/* Bikopi ortak tasarim dili: marka tokenlari + paylasilan component stilleri.
   Sitenin TEK stil kaynagi; layouts/app.blade.php bunu <link> ile yukler.

   2026-09-10'a kadar bu icerik design-tokens.blade.php icinde satir ici
   <style> olarak her sayfaya gomuluydu. Olculdu: 257 KB (sikistirilmis
   ~50 KB) HER sayfada yeniden iniyordu ve gomulu oldugu icin tarayici
   onbellege alamiyordu. Dis dosya 7 gun onbellekleniyor.

   Build adimi YOK: dosya dogrudan duzenlenir. Onbellek kirma asset_v()
   ile mtime uzerinden otomatiktir, elle surum yazilmaz. */
    /* Baslik fontu — sicak, yuvarlak (Poppins). Self-hosted (dis istek yok, hizli).
       Turkce icin latin + latin-ext. Govde metni sistem fontunda kalir (hiz). */
    @font-face {
        font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap;
        src: url('/fonts/poppins-700-latinext.woff2') format('woff2');
        unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }
    @font-face {
        font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap;
        src: url('/fonts/poppins-700-latin.woff2') format('woff2');
        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+2212;
    }
    @font-face {
        font-family: 'Poppins'; font-style: normal; font-weight: 800; font-display: swap;
        src: url('/fonts/poppins-800-latinext.woff2') format('woff2');
        unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }
    @font-face {
        font-family: 'Poppins'; font-style: normal; font-weight: 800; font-display: swap;
        src: url('/fonts/poppins-800-latin.woff2') format('woff2');
        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+2212;
    }

    .bkpf-imza { --bkpf-el: 1; }

    :root {
        color-scheme: light;
        --bkpf: "9f3a2e7c";
        --font-display: 'Poppins', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
        --bg: #f4f7f5;
        --panel: #ffffff;
        --text: #14201a;
        --muted: #5c6b64;
        --border: #dbe5e0;

        /* ONCEDEN TANIMSIZ TOKENLAR (2026-08-19). Bu adlar dosya boyunca
           `var(--line)` gibi fallback'lerle kullaniliyordu ama :root
           hicbirini bildirmiyordu — yani HER ZAMAN fallback render ediliyordu
           ve koyu tema hicbir sekilde uygulanamiyordu. Degerler, en cok
           kullanilan fallback degerlerinin kendisi: acik temada gorunum
           birebir ayni kalir. */
        --line: #e7ece9;
        --ink: #14231c;
        --ink-soft: #3b4a43;
        --surface-2: #eef2ef;
        --primary-50: #eafaf1;
        --primary-border: #b7d8c7;
        --brand: #14855f;
        --danger-600: #c0392b;
        --danger-border: #e3b3ac;
        --danger-tint: #fdecec;

        /* Marka: Bikopi yesili + ikincil slate */
        /* DUGME YAZISI OKUNUR OLSUN (2026-08-22).
         *
         * #02a45d uzerinde beyaz yazinin kontrasti 3.25 idi; WCAG'in en
         * dusuk esigi 4.5. Yani "Cihazdan Yukle", "Sepete Ekle", "Hemen
         * cikti al" gibi sitenin EN KRITIK dugmelerindeki yazi esigin
         * altindaydi -- hem acik hem koyu temada, cunku bu token koyu
         * temada override edilmiyor.
         *
         * #02864d ile kontrast 4.65: esigi gecen ve marka yesilinden gozle
         * ayirt edilemeyen en yakin ton. Ara aday #018a4e olculdu ve 4.42
         * ciktigi icin elendi -- esigin 0.08 altinda kalmak, sorunu cozmus
         * gibi gorunup cozmemek olurdu.
         *
         * Koyu zeminde de olculdu: dugme zemini #141615 ile 3.91 kontrast
         * veriyor, arayuz bileseni esigi 3.0 -- dugme zeminden ayrisiyor. */
        --primary: #02864d;
        --primary-600: #02864d;
        --primary-700: #016b3e;
        --primary-tint: #e6f6ee;
        --secondary: #0f172a;
        --secondary-tint: #f1f5f9;

        --accent: var(--primary-tint);
        --selected-ring: var(--primary);
        --selected-bg: var(--primary-tint);

        --danger: #dc3545;
        /* Yapiskan ust seridin yuksekligi. Sayfadaki DIGER yapiskan kutular
           (fiyat kutusu, magaza kategorileri, arac yan sutunu) bu degeri
           kullanir — yoksa seridin ALTINA girip yarim gorunurler. Tek yerden
           yonetilmesi sart: serit yukseklige dokunan biri bes ayri `top`
           degerini guncellemeyi unutur. */
        --nav-h: 61px;
        --radius: 14px;
        --radius-sm: 10px;
        --shadow: 0 12px 30px rgba(15, 32, 25, 0.06);
    }

    /* ====================================================================
       KOYU TEMA (2026-08-19 — Faz 2 / 2.6).

       bikopi-theme.js tercihi COZUMLENMIS degerle (light|dark) <html>
       data-theme'ine yazar — "auto" hicbir zaman DOM'a ulasmaz, o yuzden
       burada prefers-color-scheme sorgusu YOK; JS ile kavga etmez.

       Desen panel-tokens.blade.php'nin dokuz-degiskenlik blogunun public
       karsiligi: yalnizca tokenlar degisir, bilesen kurallari degismez.
       Sabit `color: #fff` kullanan yerler (renkli zemin ustundeki yazi)
       BILEREK dokunulmadan birakildi — koyu temada da zemin renkli.
       ==================================================================== */
    /* KOYU PALET YUMUSATILDI (2026-08-22).
     *
     * ISLETME: "musteri koyu modda bogucu geliyor" -- once mobilden bir
     * musteri bildirdi, sonra masaustunde de ayni his dogrulandi.
     *
     * OLCULDU (canli sayfada): zemin/metin kontrasti 16.3:1 idi. WCAG'in en
     * yuksek esigi (AAA) 7:1; yani gerekenin IKI KATINDAN fazlasi. Koyu
     * zeminde asiri kontrast, parlak metnin kenarlarinin yayilmis gibi
     * gorunmesine (halation) yol aciyor ve goz surekli uyum yapmak zorunda
     * kaliyor -- "bogucu" denen sey buydu. Karanlik tema rehberleri (Material,
     * Apple HIG) tam da bu yuzden saf beyaz metin ve saf siyah zemin
     * onermiyor.
     *
     * Zemin bir tik acildi, metin bir tik kisildi: kontrast 16.3 -> 13.6.
     * Hâlâ AAA esiginin iki katina yakin, yani okunabilirlikten HIC odun
     * verilmedi; yalnizca sertlik alindi.
     *
     * Panel ile zemin arasindaki fark KORUNDU (hatta bir miktar artti) --
     * kartlarin zeminden ayrilmasi bu farka bagli, esitlemek her seyi tek
     * duz kutle yapardi. */
    /* NOTR KATMANLAR YESILDEN ARINDIRILDI (2026-08-22, ikinci tur).
     *
     * ISLETME: "kurumsal rengimiz yesil ama su an haki yesil, cok koyu
     * tonlar ile bir seyler yanlis hissi veriyor."
     *
     * OLCULDU: paletin TAMAMI ayni tondaydi -- zemin 153 derece, panel 155,
     * kenarlik 148, hatta METIN bile 147. Ustelik zeminlerin doygunlugu
     * %16-21'di. Yani marka yesili yalnizca vurguda degil, her katmana
     * surulmustu. Vurgu rengi de 155 derece; zeminden TON olarak hic
     * ayrilmiyor, yalnizca parlaklikla ayriliyordu. Ortaya cikan sey haki:
     * marka rengini her yere yaymak markayi guclendirmiyor, tersine
     * vurgunun ayrisacak yeri kalmiyor.
     *
     * Doygunluk %21'den %5'e indirildi, TON KORUNDU (152 derece). Haki
     * hissi gidiyor, marka bagi kaliyor, yesil vurgu artik ayirt ediliyor.
     *
     * PARLAKLIKLARA DOKUNULMADI -- bir onceki turda "bogucu" sikayeti icin
     * ayarlanmislardi. Zemin/metin kontrasti 14.0'dan 14.1'e gecti, yani
     * okunabilirlik aynen duruyor (AAA esigi 7.0).
     *
     * Vurgu ailesi (--primary-50, --primary-tint, --primary-border, --brand)
     * bilincli olarak YESIL kaldi; nokta zaten oralarda yesil olmasi. */
    [data-theme="dark"] {
        color-scheme: dark;
        /* ZEMIN KATMANLARI ACILDI (2026-08-22, ucuncu tur).
         *
         * ISLETME: "koyu mod gri rengini biraz daha acalim, veya renklerin
         * tamamini." Ayni gun once "bogucu" (kontrast cok yuksekti), sonra
         * "haki" (doygunluk cok yuksekti) duzeltildi; bu ucuncu tur zemini
         * bir kademe aciyor.
         *
         * Her katman +5 parlaklik puani aldi. METINLER OLDUGU GIBI KALDI --
         * onlari da acmak kontrasti geri yukseltir ve "bogucu" sikayetine
         * donerdi. Sonuc: zemin/metin kontrasti 14.1 -> 12.3, hâlâ AAA
         * esiginin (7.0) neredeyse iki kati.
         *
         * SINIR NEREDE: zemin acildikca yesil dugme (#02864d) zeminden DAHA
         * AZ ayrisiyor -- 3.62'den 3.41'e dustu, arayuz bileseni esigi 3.0.
         * Bir kademe daha acmak (+7) bunu 3.17'ye indiriyordu; pay o kadar
         * daralinca sonraki her renk ayari esigi kirma riski tasir. Acilmanin
         * duracagi yer burasi; daha acigi isteniyorsa once dugme yesili
         * gozden gecirilmeli. */
        --bg: #202322;
        --panel: #2a2f2d;
        --text: #e0e3e1;
        --muted: #a1a8a5;
        --border: #3e4541;

        --line: #3e4541;
        --ink: #e0e3e1;
        --ink-soft: #bbc0be;
        --surface-2: #303533;
        /* TINT'LER ZEMINLE BIRLIKTE ACILDI.
         *
         * #12211a, yeni zeminden (#202322) DAHA KOYUYDU -- yani "hafif yesil
         * vurgu zemini" olmasi gereken sey, uzerinde durdugu yuzeyden koyu
         * kalarak ters etki yapiyordu (vurgulanan alan cukur gorunuyordu).
         * Zeminin ustunde kalacak sekilde yukseltildi. */
        --primary-50: #1c3328;
        --primary-border: #365a47;
        --brand: #37b380;
        --danger-600: #ff8a7a;
        --danger-border: #5a2a24;
        --danger-tint: #351712;

        /* VURGU YESILI KOYU TEMADA ACILIR (2026-08-22).
         *
         * `--primary-700` (#016b3e) yalnizca ACIK tema icin secilmisti ve
         * koyu temada hic override edilmemisti. Oysa vurgu metinleri bu
         * token'i kullaniyor: bolum basliklari (.hm-h2), fiyat rakami
         * (.qc-amount), rozetler (.hs-badge, .hm-pill), vurgulu kelime
         * (.hm-mark). Koyu zeminde olculen kontrast 2.1-2.7 arasindaydi --
         * WCAG'in en dusuk esigi 4.5 (buyuk metinde 3.0), yani yazilar
         * fiilen okunmuyordu.
         *
         * #37b380 zaten palette `--brand` olarak duruyordu; koyu zeminde
         * 6.7, panel uzerinde 5.9 veriyor. Marka tonundan uzaklasmadan
         * esigin uzerine cikiyor. */
        --primary-700: #37b380;

        --primary-tint: #1b3d29;
        /* --secondary BILEREK DEGISMIYOR (2026-08-19 dersi, uretimde goruldu):
           bu token cift rolluydu — hem koyu ZEMIN (footer, .anno-bar) hem koyu
           METIN. Acik renge cevirmek footer'i beyaza, kayan seridin yazisini
           gorunmeze cevirdi. Zemin rolu kazandi: secondary iki temada da koyu
           slate kalir; metin kullanimlar var(--ink)'e tasindi. */
        --secondary-tint: #1a2430;

        --shadow: 0 12px 30px rgba(0, 0, 0, .45);
    }



    * { box-sizing: border-box; }

    /* Global yatay-tasma guvenlik agi (2026-08-18). Tek bir bilesen viewport'u
       assa bile sayfa saga-sola kaymaz. `hidden` DEGIL `clip`: hidden yeni bir
       kaydirma baglami acip position: sticky basliklari bozabilir; clip bunu
       yapmadan tasmayi kirpar. Genis tablolar/ticker'lar zaten kendi
       .pl-scroll/.anno-bar konteynerlerinde kayiyor; bu kural onlari etkilemez.
       layouts.app tek <body> oldugu icin musteri paneli de (nested) kapsanir. */
    html { overflow-x: clip; }

    body {
        margin: 0;
        max-width: 100%;
        overflow-x: clip;
        font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        background: var(--bg);
        color: var(--text);
    }

    /* Sicak baslik karakteri — marka + tum ana basliklar */
    .brand, h1, h2, .hm-h2, .pl-h2 {
        font-family: var(--font-display);
        letter-spacing: -0.02em;
    }
    h1, .brand { font-weight: 800; }

    a { color: var(--primary-600); text-decoration: none; }
    a:hover { text-decoration: underline; }

    .shell { max-width: 1180px; margin: 0 auto; padding: 24px; }

    /* ---- Yapiskan ust serit ----
       Menu sayfa boyunca gorus alaninda kalir: siparis akisinda musteri uzun
       bir dosya listesini kaydirirken "Sepetim" ve rozeti hep elinin altinda
       olsun diye (bkz. CLAUDE.md → siparis vermeyi kolaylastirmak).

       Serit .shell'in DISINDA oldugu icin tam genislikte; ic hizalamayi
       .nav-inner yapiyor (ayni 1180px, ayni 24px yan bosluk).

       YAPISKANLIK KIRILGANDIR: `position: sticky` bir ust ogede `overflow`
       `visible` DISINDA bir deger varsa calismaz. Simdiki ust oge <body>;
       oraya overflow verilirse serit sessizce yapismayi birakir. */
    .nav {
        position: sticky; top: 0; z-index: 50;
        background: color-mix(in srgb, var(--bg) 82%, transparent);
        backdrop-filter: saturate(1.6) blur(12px);
        -webkit-backdrop-filter: saturate(1.6) blur(12px);
        border-bottom: 1px solid transparent;
        transition: border-color .18s ease, box-shadow .18s ease;
    }
    /* Bulaniklik desteklenmiyorsa yari saydam birakmak yaziyi okunmaz yapardi;
       o durumda serit tamamen opak olur. */
    @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
        .nav { background: var(--bg); }
    }
    /* Ayrim cizgisi ve golge yalnizca sayfa kaydirilmisken: en ustteyken serit
       sayfanin bir parcasi gibi durur, kaydirinca ustte "durdugu" belli olur.
       Sinifi bikopi-nav.js ekliyor; JS yuklenmezse serit yine yapisir, sadece
       cizgisi cikmaz. */
    .nav.is-stuck {
        border-bottom-color: var(--border);
        box-shadow: 0 6px 20px rgba(15, 32, 25, .07);
    }
    .nav-inner {
        max-width: 1180px; margin: 0 auto; padding: 8px 24px;
        /* --nav-h ile TUTARLI olmali: 60px + 1px alt cizgi = 61px */
        min-height: 60px;
        display: flex; flex-wrap: wrap; gap: 12px;
        align-items: center; justify-content: space-between;
    }
    .nav-links { display: flex; flex-wrap: wrap; gap: 18px; font-size: 14px; align-items: center; }
    .nav-links a { color: var(--text); }
    .nav-links a:hover { color: var(--primary-700); text-decoration: none; }
    .nav-links .nav-accent { font-weight: 700; color: var(--primary-700); }
    .brand { font-weight: 800; font-size: 22px; color: var(--primary-700); }
    .brand:hover { text-decoration: none; }

    /* ---- Mobil menü (hamburger + sağdan açılan çekmece) ----
       Masaüstünde çekmece ve arkaplan hiç görünmez; hamburger de yalnızca
       bikopi-nav.js header'a data-nav="ready" yazdıysa ortaya çıkar. JS
       yüklenmezse linkler eskisi gibi alt satıra sarar (menüsüz kalınmaz). */
    /* Tema dugmesi (2026-08-19, Faz 2 / 2.6): panel kenar cubugundaki
         kutunun header uyarlamasi. Her kirilimda gorunur — mobilde ayrica
         cekmeceye koymaya gerek kalmadi. */
    /* 44x44: DOKUNMA HEDEFI KURALI (WCAG 2.5.8, CLAUDE.md Arayuz §2).
     *
     * 36px'ti ve kuralin altindaydi. Bu yalnizca bir olcu meselesi degil:
     * site sistem tercihini otomatik uyguluyor, yani telefonunu koyu modda
     * tutan musteri siteyi koyu goruyor. Koyu mod rahatsiz ettiginde
     * cikis yolu BU DUGME -- mobil baslikta 36px'lik bir simge olarak
     * gozden kaciyordu. Buyutmek, "bogucu" bulan musteriye gorunur bir
     * cikis birakiyor. */
    .nav-theme-btn {
        width: 44px; height: 44px; padding: 0; flex: none;
        display: inline-flex; align-items: center; justify-content: center;
        background: var(--panel); border: 1px solid var(--border);
        border-radius: 50%; cursor: pointer; font-size: 15px; line-height: 1;
        -webkit-tap-highlight-color: transparent;
    }
    .nav-theme-btn:hover { border-color: var(--primary); }

    /* Logo cift varyant: acik temada normal, koyu temada beyaz "Bi"li
         (bikopi-logo-dark.svg). <img> ile yuklenen SVG sayfa CSS'inden renk
         alamadigi icin iki ayri dosya kullaniliyor. */
    .logo-koyu { display: none; }
    [data-theme="dark"] .logo-acik { display: none; }
    [data-theme="dark"] .logo-koyu { display: inline-block; }

    .nav-burger, .nav-backdrop, .nav-drawer { display: none; }

    .nav-burger {
        width: 44px; height: 44px; padding: 0;          /* 44px: WCAG 2.5.5 dokunma hedefi */
        align-items: center; justify-content: center;
        background: var(--panel); border: 1px solid var(--border);
        border-radius: var(--radius-sm); cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        flex: none;
    }
    .nav-burger:active { background: var(--primary-tint); }
    .nav-burger:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

    .nav-burger-box { position: relative; display: block; width: 20px; height: 14px; }
    .nav-burger-box span {
        position: absolute; left: 0; width: 100%; height: 2px;
        background: var(--text); border-radius: 2px;
        transition: top .28s cubic-bezier(.4, 0, .2, 1),
                    transform .28s cubic-bezier(.4, 0, .2, 1),
                    opacity .16s linear;
    }
    .nav-burger-box span:nth-child(1) { top: 0; }
    .nav-burger-box span:nth-child(2) { top: 6px; }
    .nav-burger-box span:nth-child(3) { top: 12px; }

    /* X'e dönüşüm doğrudan aria-expanded'a bağlı: görsel durumla erişilebilirlik
       durumu tek kaynaktan gelir, ikisi birbirinden kayamaz. */
    .nav-burger[aria-expanded="true"] .nav-burger-box span:nth-child(1),
    .nav-burger-x .nav-burger-box span:nth-child(1) { top: 6px; transform: rotate(45deg); }
    .nav-burger[aria-expanded="true"] .nav-burger-box span:nth-child(2),
    .nav-burger-x .nav-burger-box span:nth-child(2) { opacity: 0; transform: scaleX(.4); }
    .nav-burger[aria-expanded="true"] .nav-burger-box span:nth-child(3),
    .nav-burger-x .nav-burger-box span:nth-child(3) { top: 6px; transform: rotate(-45deg); }

    @media (max-width: 768px) {
        .nav[data-nav="ready"] .nav-links { display: none; }
        .nav[data-nav="ready"] .nav-burger { display: inline-flex; }
        /* Çekmecenin kendi kapatma düğmesi: header'daki hamburgerden bağımsız,
           data-nav="ready" koşuluna bakmaz (zaten çekmece yalnızca JS ile açılır). */
        .nav-drawer .nav-burger { display: inline-flex; }

        .nav-backdrop {
            display: block; position: fixed; inset: 0; z-index: 60;
            background: rgba(15, 32, 25, .45);
            opacity: 0; pointer-events: none; transition: opacity .28s ease;
        }
        .nav-backdrop.is-open { opacity: 1; pointer-events: auto; }

        .nav-drawer {
            display: flex; flex-direction: column;
            position: fixed; top: 0; right: 0; z-index: 61;
            width: min(86vw, 340px);
            height: 100vh; height: 100dvh;               /* dvh: mobil tarayıcı çubuğu açılıp kapanınca zıplamasın */
            background: var(--panel);
            box-shadow: -18px 0 44px rgba(15, 32, 25, .18);
            padding: 16px 14px calc(16px + env(safe-area-inset-bottom));
            overflow-y: auto; overscroll-behavior: contain;
            transform: translateX(100%); visibility: hidden;
            transition: transform .3s cubic-bezier(.4, 0, .2, 1), visibility 0s linear .3s;
        }
        .nav-drawer.is-open {
            transform: translateX(0); visibility: visible;
            transition: transform .3s cubic-bezier(.4, 0, .2, 1), visibility 0s;
        }

        .nav-drawer-top {
            display: flex; align-items: center; justify-content: space-between;
            gap: 12px; margin-bottom: 14px;
        }

        .nav-drawer-links { display: flex; flex-direction: column; gap: 2px; }
        .nav-drawer-links a, .nav-drawer-logout {
            display: flex; align-items: center; width: 100%;
            min-height: 48px; padding: 12px 14px;
            border: 0; border-radius: var(--radius-sm);
            background: none; font: inherit; font-size: 16px; font-weight: 600;
            color: var(--text); text-align: left; text-decoration: none; cursor: pointer;
            -webkit-tap-highlight-color: transparent;
        }
        .nav-drawer-links a:hover, .nav-drawer-links a:active,
        .nav-drawer-logout:hover, .nav-drawer-logout:active {
            background: var(--primary-tint); text-decoration: none;
        }
        .nav-drawer-links a:focus-visible, .nav-drawer-logout:focus-visible {
            outline: 2px solid var(--primary); outline-offset: -2px;
        }
        .nav-drawer-links .is-accent { color: var(--primary-700); font-weight: 700; }
        .nav-drawer-logout { color: var(--muted); }
    }

    @media (prefers-reduced-motion: reduce) {
        .nav-drawer, .nav-backdrop, .nav-burger-box span { transition-duration: .01ms !important; }
    }

    /* ---- Popup (panelden yonetilir) ----
       Uc yerlesim tek bilesenden turer: merkez modal, sag alt kart, alt serit.
       Mobilde "merkez" alttan acilan sayfa (bottom sheet) olur — kucuk ekranda
       ortada duran kutu hem basparmak erisimine uzak hem klavye acilinca kayiyor. */
    .pop {
        position: fixed; inset: 0; z-index: 90;
        display: flex; padding: 16px;
        background: rgba(15, 32, 25, .5);
        opacity: 0; pointer-events: none;
        transition: opacity .25s ease;
    }
    .pop.is-open { opacity: 1; pointer-events: auto; }
    body.popup-acik { overflow: hidden; }

    .pop-kart {
        position: relative; background: var(--panel);
        border-radius: var(--radius); box-shadow: 0 24px 60px rgba(15, 32, 25, .28);
        width: 100%; max-width: 420px; overflow: hidden;
        transform: translateY(12px) scale(.98);
        transition: transform .28s cubic-bezier(.4, 0, .2, 1);
        max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain;
    }
    .pop.is-open .pop-kart { transform: none; }

    /* Yerlesimler */
    .pop--merkez { align-items: center; justify-content: center; }
    .pop--kose { align-items: flex-end; justify-content: flex-end; background: transparent; }
    .pop--kose .pop-kart { max-width: 340px; }
    .pop--alt-serit { align-items: flex-end; justify-content: center; background: transparent; padding: 0; }
    .pop--alt-serit .pop-kart {
        max-width: 100%; width: 100%; border-radius: var(--radius) var(--radius) 0 0;
        display: flex; align-items: center; gap: 16px; padding-right: 8px;
    }
    .pop--alt-serit .pop-gorsel { width: 72px; height: 72px; margin: 12px 0 12px 16px; flex: none; }
    .pop--alt-serit .pop-govde { padding: 12px 0; text-align: left; flex: 1; }

    /* Arka plani olmayan yerlesimlerde tiklama yalnizca kartta olsun,
       yoksa gorunmez bir katman tum sayfayi kapatir. */
    .pop--kose, .pop--alt-serit { pointer-events: none; }
    .pop--kose.is-open .pop-kart, .pop--alt-serit.is-open .pop-kart { pointer-events: auto; }

    .pop-gorsel { display: block; width: 100%; height: auto; max-height: 220px; object-fit: contain; background: var(--primary-tint); }
    .pop-govde { padding: 20px; text-align: center; }
    .pop-govde h2 { font-size: 20px; margin: 0 0 8px; }
    .pop-govde p { margin: 0 0 16px; font-size: 14.5px; line-height: 1.6; color: var(--muted); }
    .pop-cta { display: inline-flex; width: 100%; justify-content: center; }

    /* .pop-vazgec (CTA altindaki ikinci "Kapat" metni) kaldirildi 2026-08-15 —
       gerekce popup.blade.php icinde. */
    .pop-kapat {
        position: absolute; top: 8px; right: 8px; z-index: 2;
        width: 40px; height: 40px; padding: 0;      /* dokunma hedefi */
        display: flex; align-items: center; justify-content: center;
        background: rgba(255, 255, 255, .9); border: 1px solid var(--border);
        border-radius: 50%; cursor: pointer; font-size: 15px; color: var(--text);
        -webkit-tap-highlight-color: transparent;
    }
    .pop-kapat:hover { background: var(--panel); }
    .pop-kapat:focus-visible, .pop-cta:focus-visible {
        outline: 2px solid var(--primary); outline-offset: 2px;
    }

    @media (max-width: 600px) {
        .pop { padding: 0; }
        /* Mobilde merkez modal alttan acilan sayfaya donusur */
        .pop--merkez { align-items: flex-end; }
        .pop--merkez .pop-kart, .pop--kose .pop-kart {
            max-width: 100%; border-radius: var(--radius) var(--radius) 0 0;
            max-height: 88dvh;
        }
        .pop--kose { align-items: flex-end; justify-content: center; }
        .pop-gorsel { max-height: 160px; }
        .pop-govde { padding: 18px 16px calc(18px + env(safe-area-inset-bottom)); }
        .pop--alt-serit .pop-kart { flex-direction: column; align-items: stretch; gap: 0; padding-right: 0; }
        .pop--alt-serit .pop-gorsel { width: 100%; height: 120px; margin: 0; }
        .pop--alt-serit .pop-govde { padding: 16px; text-align: center; }
    }

    @media (prefers-reduced-motion: reduce) {
        .pop, .pop-kart { transition-duration: .01ms !important; }
    }

    /* ---- Hizmet sayfalari (/hizmetler, /hizmetler/{slug}) ---- */
    .svc-grid {
        display: grid; gap: 16px;
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    }
    .svc-card {
        display: flex; flex-direction: column; gap: 8px;
        background: var(--panel); border: 1px solid var(--border);
        border-radius: var(--radius); padding: 20px;
        color: var(--text); text-decoration: none;
        transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    }
    .svc-card:hover {
        text-decoration: none; transform: translateY(-2px);
        box-shadow: var(--shadow); border-color: var(--primary);
    }
    .svc-card-ico { font-size: 26px; line-height: 1; }
    .svc-card h2 { font-size: 18px; margin: 0; }
    .svc-card p { margin: 0; font-size: 14px; color: var(--muted); line-height: 1.55; }
    .svc-card-foot {
        display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
        margin-top: auto; padding-top: 10px; font-size: 14px;
    }
    .svc-card-foot strong { color: var(--primary-700); font-size: 17px; }
    .svc-card-go { margin-left: auto; color: var(--primary-600); font-weight: 700; }

    .svc-crumb { font-size: 13px; color: var(--muted); margin-bottom: 14px; display: flex; gap: 7px; flex-wrap: wrap; }
    .svc-crumb a { color: var(--primary-700); }

    .svc-article { max-width: 820px; margin: 0 auto; }
    .svc-hero { margin-bottom: 20px; }
    .svc-lead { font-size: 17px; line-height: 1.65; color: var(--text); margin: 10px 0 0; }
    .svc-hero-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
    .svc-price { display: flex; align-items: baseline; gap: 5px; font-size: 14px; }
    .svc-price strong { font-size: 20px; color: var(--primary-700); }

    .svc-cover { border-radius: var(--radius); overflow: hidden; margin-bottom: 20px; }
    .svc-cover img { width: 100%; height: auto; display: block; }

    .svc-highlights {
        display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        list-style: none; padding: 0; margin: 0 0 20px;
    }
    .svc-highlights li {
        display: flex; gap: 8px; align-items: flex-start;
        background: var(--primary-tint); border-radius: var(--radius-sm);
        padding: 10px 12px; font-size: 14px; font-weight: 500;
    }
    .svc-highlights li span { color: var(--primary-700); font-weight: 800; }

    .svc-body { margin-bottom: 22px; }

    .svc-faq { margin-bottom: 22px; }
    .svc-faq h2, .svc-related h2 { font-size: 20px; margin: 0 0 12px; }
    .svc-faq-item {
        background: var(--panel); border: 1px solid var(--border);
        border-radius: var(--radius-sm); padding: 12px 14px; margin-bottom: 8px;
    }
    .svc-faq-item summary {
        cursor: pointer; font-weight: 600; list-style: none;
        min-height: 24px; display: flex; align-items: center; gap: 8px;
    }
    .svc-faq-item summary::-webkit-details-marker { display: none; }
    .svc-faq-item summary::after { content: '⌄'; margin-left: auto; color: var(--muted); }
    .svc-faq-item[open] summary::after { content: '⌃'; }
    .svc-faq-item > div { margin-top: 10px; font-size: 14.5px; line-height: 1.65; color: var(--muted); }

    /* Rehber sayfalarindaki satir ici SVG cizimler. viewBox oranini koruyup
       kucuk ekranda kendiliginden olceklenir; ayri bir mobil surum gerekmez. */
    .bg-cizim {
        margin: 20px 0; padding: 16px;
        background: var(--panel); border: 1px solid var(--border);
        border-radius: var(--radius);
    }
    .bg-cizim svg { display: block; width: 100%; height: auto; }
    .bg-cizim figcaption {
        margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border);
        font-size: 13px; line-height: 1.55; color: var(--muted);
    }
    @media (max-width: 600px) {
        .bg-cizim { padding: 12px; margin: 16px -4px; }
        .bg-cizim figcaption { font-size: 12.5px; }

        /* Cizim dar ekranda tam genislige sikisirsa icindeki 12px yazilar
           ~6,8px'e duser ve okunmaz olur (olculdu). Cizimi asgari bir
           genislikte tutup KENDI kutusu icinde yatay kaydiriyoruz — sayfa
           yatay tasmiyor, yazi okunur kaliyor. */
        .bg-cizim { overflow-x: auto; overscroll-behavior-x: contain; }
        .bg-cizim svg { min-width: 470px; }
        .bg-cizim figcaption { position: sticky; left: 0; }
    }

    .svc-related { margin-bottom: 22px; }
    .svc-related ul { margin: 0; padding-left: 18px; }
    .svc-related li { margin-bottom: 6px; font-size: 14.5px; }

    @media (max-width: 600px) {
        .svc-card { padding: 16px; }
        .svc-hero-actions .btn { width: 100%; }
        .svc-price { width: 100%; }
    }

    .panel {
        background: var(--panel); border: 1px solid var(--border);
        border-radius: 16px; padding: 24px; box-shadow: var(--shadow);
    }
    .muted { color: var(--muted); }
    .stack > * + * { margin-top: 12px; }

    /* Rozet / chip */
    .badge {
        display: inline-flex; align-items: center; gap: 8px;
        background: var(--accent); color: var(--primary-700);
        border-radius: 999px; padding: 6px 12px; font-size: 13px; font-weight: 600;
    }
    .chip {
        display: inline-flex; align-items: center; gap: 6px;
        background: var(--secondary-tint); color: var(--ink);
        border-radius: 999px; padding: 4px 10px; font-size: 12px; font-weight: 600;
    }

    /* Butonlar */
    .btn {
        display: inline-flex; align-items: center; justify-content: center; gap: 8px;
        font-weight: 700; font-size: 15px; border-radius: var(--radius-sm);
        padding: 12px 18px; cursor: pointer; border: 1px solid transparent;
        transition: background .15s, box-shadow .15s, border-color .15s;
    }
    .btn-primary { background: var(--primary); color: #fff; }
    /* HOVER BIR TIK DAHA KOYUYA GIDER.
     *
     * --primary koyulastirilinca --primary-600 (#02864d) ile ayni degere
     * geldi ve hover GORUNMEZ oldu. Bir alt basamak kullaniliyor: acik
     * temada dugme kararir, koyu temada ise --primary-700 zaten acik yesile
     * (#37b380) override edildigi icin dugme parlar. Ikisi de dogru
     * geri bildirim. */
    .btn-primary:hover { background: var(--primary-700); text-decoration: none; }
    .btn-primary:disabled { background: #9fd3ba; cursor: not-allowed; }
    .btn-outline { background: var(--panel); color: var(--primary-700); border-color: var(--border); }
    .btn-outline:hover { border-color: var(--primary); text-decoration: none; }
    .btn-ghost { background: transparent; color: var(--muted); padding: 6px 10px; font-size: 13px; }

    /* DAVET ACILIS SAYFASI (/davet/BD...). Tek kart, tek is: ne oldugunu
       anlatmak ve uye ol demek. */
    .dvk-sarmal { max-width: 640px; margin: 32px auto 56px; padding: 0 16px; }
    .dvk-kart { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 26px; }
    .dvk-baslik { font-size: 26px; font-weight: 800; line-height: 1.3; margin: 12px 0 10px; }
    .dvk-metin { font-size: 15px; color: var(--muted); line-height: 1.7; margin: 0 0 16px; }
    .dvk-kurallar { font-size: 13.5px; color: var(--muted); line-height: 1.7; border-top: 1px solid var(--line); padding-top: 14px; }
    .dvk-kurallar div + div { margin-top: 6px; }
    .dvk-uyari { margin-top: 14px; font-size: 13.5px; background: var(--panel-2, #f7f8fa); border-radius: 10px; padding: 11px 13px; }
    .dvk-butonlar { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
    .dvk-ikincil { align-self: center; font-size: 13.5px; color: var(--muted); }
    .btn-ghost:hover { color: var(--danger); text-decoration: none; }
    .btn-block { width: 100%; }

    /* Secenek karti (gorsel secim) */
    .opt-group { margin-top: 18px; }
    /* Secenek grubunun altindaki aciklama notu ("Tek sayfalik belge arkali
       onlu basilamaz." gibi). Kart kenarina yapismasin diye kendi bosluğu
       var — eskiden satir ici negatif margin ile yukari cekiliyor ve kartin
       alt kenariyla ust uste biniyordu. */
    .opt-note { margin-top: 8px; font-size: 12px; line-height: 1.45; color: var(--muted); }
    /* KAPALI CILTLEMENIN CIKIS YOLU (2026-09-10).
       Kart uzerindeki `title` ipucu dokunmatikte HIC gorunmuyor; musteri
       yalnizca soluk karti goruyordu. Bu not grubun altinda her cihazda
       duruyor. Soluk gri (.opt-note) kalmasin diye hafif vurgulu: musterinin
       ihtiyaci olan sey burada -- ne yapacagi. */
    .opt-note-engel {
        color: var(--text);
        background: var(--bg);
        border-left: 3px solid var(--primary);
        border-radius: var(--radius-sm);
        padding: 8px 10px;
    }

    /* Bulut kaynagi dugmeleri (Google Drive / Dropbox) — yukleme alaninin
       altinda, ikincil eylem olarak. Ana yol hep "Dosya Seç"; bulut
       secenekleri onu golgelemeyecek agirlikta. */
    .pc-cloud { margin-top: 14px; text-align: center; }
    .pc-cloud-label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 8px; }
    .pc-cloud-btns { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
    .pc-cloud-btn {
        display: inline-flex; align-items: center; gap: 6px;
        padding: 9px 16px; border-radius: 10px; cursor: pointer;
        border: 1px solid var(--border); background: var(--panel);
        font-size: 13px; font-weight: 600; color: var(--text);
        transition: border-color .15s, background .15s;
    }
    .pc-cloud-btn:hover:not(:disabled) { border-color: var(--primary); background: var(--primary-tint); }
    /* Istek baslatan dugme devre disi kalir ve metni "Açılıyor…" olur.
       Google betikleri + OAuth penceresi bir kac saniye surebiliyor; geri
       bildirim olmadan musteri tekrar tikliyor ve eskiden ikinci tiklama
       ikinci bir secim penceresi aciyordu (perde ekranda kaliyordu). */
    .pc-cloud-btn:disabled { opacity: .6; cursor: progress; }
    .pc-cloud-note { margin-top: 10px; font-size: 12.5px; color: var(--muted); }
    .pc-cloud-note.is-error { color: var(--danger); font-weight: 600; }
    @media (max-width: 600px) {
        /* Dokunmatik hedef: iki dugme yan yana sikismasin */
        .pc-cloud-btn { flex: 1 1 140px; justify-content: center; padding: 12px 14px; }
    }
    .opt-label { font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 8px; letter-spacing: .01em; }
    .opt-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
    .opt-card {
        position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px;
        border: 2px solid var(--border); border-radius: var(--radius-sm);
        padding: 14px 10px; background: var(--panel); cursor: pointer; text-align: center;
        transition: border-color .15s, background .15s, box-shadow .15s;
    }
    .opt-card:hover { border-color: var(--primary-border); }
    .opt-card .opt-ico { width: 44px; height: 44px; color: var(--muted); }
    /* Tik isareti sag ustte mutlak konumlu; uzun etiketler altina girmesin diye yanlarda bosluk */
    .opt-card .opt-name { font-size: 13px; font-weight: 600; color: var(--text); padding: 0 16px; line-height: 1.3; }
    .opt-card .opt-sub { font-size: 11px; color: var(--muted); padding: 0 6px; }
    .opt-card.is-selected {
        border-color: var(--selected-ring); background: var(--selected-bg);
        box-shadow: 0 0 0 3px rgba(2, 164, 93, .12);
    }
    .opt-card.is-selected .opt-ico { color: var(--primary); }
    .opt-card.is-selected .opt-name { color: var(--primary-700); }
    .opt-card .opt-check {
        position: absolute; top: 6px; right: 6px; width: 18px; height: 18px;
        color: var(--primary); opacity: 0; transition: opacity .15s;
    }
    .opt-card.is-selected .opt-check { opacity: 1; }

    /* Gecici olarak kapali secenek (stok bitti / makine bakimda).
       Kart GORUNMEYE devam eder — musteri hizmetin var oldugunu bilsin diye —
       ama secilemez. `pointer-events` kapatilmaz: kapali kartta title
       ipucunun gorunmesi ve dokunmatikte "neden olmuyor" sorusuna cevap
       vermesi icin imlec uzerine gelebilmeli; tiklama zaten wire:click hic
       basilmadigi icin bir sey yapmiyor. */
    .opt-card.is-disabled {
        opacity: .45;
        cursor: not-allowed;
        background: var(--bg);
    }
    .opt-card.is-disabled:hover { border-color: var(--border); }
    .opt-card.is-disabled .opt-sub { font-weight: 700; }

    /* Adet / sayi girisi */
    .stepper { display: inline-flex; align-items: center; border: 2px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
    .stepper button { border: none; background: var(--panel); width: 40px; height: 40px; font-size: 18px; cursor: pointer; color: var(--ink); }
    .stepper button:hover { background: var(--secondary-tint); }
    .stepper input { width: 60px; height: 40px; border: none; text-align: center; font-size: 15px; font-weight: 700; }
    /* Tarayicinin kendi artir/azalt oklari GIZLENIR: kutunun iki yaninda
       zaten - / + dugmeleri var, ucuncu bir denetim fazlalik. Ayrica native
       oklar dokunmatikte 44x44 hedefin cok altinda ve yanlislikla basiliyor
       (isletme, 2026-08-21). Deger yine elle yazilabilir; yalnizca oklar
       kalkar. Ayni desen .form-row icin de uygulanmisti. */
    .stepper input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
    .stepper input[type="number"]::-webkit-outer-spin-button,
    .stepper input[type="number"]::-webkit-inner-spin-button {
        -webkit-appearance: none; margin: 0;
    }

    /* Sticky fiyat kutusu */
    /* Fiyat kutusu sayfa kaydikca musteriyi takip eder.
       STICKY GRID OGESININ KENDISINE VERILMEZ: .cfg-layout `align-items:start`
       kullaniyor, yani sag sutun icerik yuksekligi kadar. Sticky'nin yol
       alabilmesi icin bir kapsayici yuksekligi gerekir — kutu kendi kutusu
       kadar oldugunda hicbir yere yapisamaz ve sayfa kayarken yukarida kalip
       gozden kaybolur (kullanici bildirimi, 2026-08-14). Cozum: grid ogesi
       satir yuksekligine uzatilir, sticky ICERIDEKI panele verilir.

       max-height + overflow: cok dosya yuklendiginde kutudaki dosya listesi
       uzuyor; sinir olmasa "Sepete Ekle" dugmesi ekranin altinda kalip
       erisilemez hale gelirdi. */
    .price-box { align-self: stretch; }
    .price-box > .pc-side-sticky {
        position: sticky;
        /* Yapiskan ust seridin ALTINDAN baslar; yoksa kutunun ust kismi
           seridin arkasinda kalir. */
        top: calc(var(--nav-h) + 20px);
        /* Blok gorus alanindan uzun olursa tarayici onu ust kenara
           yapistiramaz — asagi kaydirirken alt kenari gorunene kadar sayfayla
           birlikte kayar, yani "takip etmiyor" gibi gorunur. Sinir bu yuzden
           var; asilirsa icerik kendi icinde kayar ve "Sepete Ekle" erisilebilir
           kalir. */
        max-height: calc(100dvh - var(--nav-h) - 40px);
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        gap: 12px;
        /* Ic kaydirma cubugu paneli kesmesin */
        padding-right: 2px;
    }

    /* SEPET sayfasi ayni .cfg-layout izgarasini ve ayni .price-box sinifini
       kullaniyor, AMA yapisi farkli: baski sayfasinda sticky sarmalayici
       (.pc-side-sticky) var, sepette panel dogrudan .price-box'in cocugu.
       Yukaridaki kural bu yuzden sepette hic uygulanmiyordu ve ozet kutusu
       liste uzayinca yukarida kalip gozden kayboluyordu (kullanici bildirimi,
       2026-08-15).

       Ayni gerekce, ayni sinirlar: izgara ogesi zaten `align-self: stretch`
       ile satir yuksekligine uzatiliyor, sticky ICERIDEKI panele veriliyor.
       max-height guvenlik icin: sepette uyari kutulari (toplu islem bedeli,
       minimum tutar) cikinca ozet uzayabiliyor; sinir olmasa "Siparisi
       tamamla" dugmesi ekranin altinda kalip erisilemez hale gelirdi.

       Mobilde sifirlama AYRICA YAZILMADI: asagidaki `max-width: 900px`
       blogunda `.price-box .panel` zaten `position: static; max-height: none`
       yapiyor (kutu orada ekranin altina `fixed` yapisiyor). Ayni kurali iki
       yere yazmak, sonradan birinin unutulmasi demek. */
    .price-box > .panel {
        position: sticky;
        top: calc(var(--nav-h) + 20px);
        max-height: calc(100dvh - var(--nav-h) - 40px);
        overflow-y: auto;
    }

    /* Secime gore canlanan kagit cizimi (yalnizca masaustu sag sutun) */
    /* Cizim + fiyat kutusu BIRLIKTE sticky. Ikisinin toplam yuksekligi gorus
       alanini doldurursa sticky'nin yol alacak yeri kalmaz ve kutu "hic
       hareket etmiyor" gibi gorunur (kullanici bildirimi, 2026-08-14). Bu
       yuzden cizim paneli bilincli olarak SIKI: kucuk baslik, 150px cizim,
       dar bosluklar. Hedef, ikisinin toplami ~560px. */
    .pc-mockup { text-align: center; padding: 14px 16px 16px; }
    .pc-mockup-title {
        font-size: 11px; font-weight: 700; letter-spacing: .02em;
        text-transform: uppercase; color: var(--muted); margin-bottom: 6px;
    }
    /* max-height, cizimi sutun genisliginden ONCE kisitliyordu: tuval
       176x172 oraninda oldugu icin 200px genislikte dogal yukseklik ~195px
       cikiyor, 150 sinirI onu %25 kucultuyordu. Sinir cizimi degil TASMAYI
       engellemeli. */
    .pc-mockup-svg { display: block; width: 100%; height: auto; max-height: 200px; }
    .pc-mockup-chain {
        display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
        gap: 5px; margin-top: 8px; font-size: 12.5px; color: var(--text);
    }
    .pc-mockup-chain strong { font-size: 14px; color: var(--primary-700, #027a45); }
    .pc-mockup-op { color: var(--muted); }
    .pc-mockup-note { margin-top: 6px; font-size: 11px; line-height: 1.45; color: var(--muted); }
    .pc-mockup-price-note { margin-top: 4px; }
    .price-box .total-label { font-size: 14px; color: var(--muted); }
    .price-box .total-sub { font-size: 12px; color: var(--muted); }
    .price-box .total-amount { font-size: 34px; font-weight: 800; color: var(--ink); line-height: 1.1; margin: 4px 0 14px; }
    /* Etiket-deger satiri (ozet kutulari, siparis ozeti) — genel yardimci */
    .row { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; padding: 6px 0; }
    .row + .row { border-top: 1px dashed var(--border); }

    /* Dosya listesi */
    .file-card {
        display: flex; gap: 14px; border: 1px solid var(--border);
        border-radius: var(--radius); padding: 14px; background: var(--panel);
    }
    .file-card.is-active { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(2,164,93,.10); }
    .file-thumb {
        width: 68px; height: 88px; flex: none; border-radius: 8px; border: 1px solid var(--border);
        /* Beyaz zemin: `contain` ile kenarlarda bosluk kaliyor ve o boslugun
           kagit gibi gorunmesi gerekiyor. */
        background: var(--panel); display: flex; align-items: center; justify-content: center;
        color: var(--muted); overflow: hidden;
    }
    /* contain, cover DEGIL. Bu bir dekoratif gorsel degil BELGE ONIZLEMESI:
       `cover` sayfayi kirparak kutuyu dolduruyordu ve musteri basilacak
       seyin bir kismini goremiyordu (kullanici bildirimi, 2026-08-15).
       Yanlis izlenim verme riski de var — kirpilmis onizleme "sayfam boyle
       mi basilacak" sorusunu doguruyor. */
    .file-thumb img { width: 100%; height: 100%; object-fit: contain; }
    .file-meta { flex: 1; min-width: 0; }
    .file-name { font-weight: 700; font-size: 14px; word-break: break-word; }
    .file-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

    /* Yukleme alani */
    .dropzone {
        /* label varsayilan olarak inline'dir; blok yapilmazsa kenarlik satirlara bolunur */
        display: block; width: 100%;
        border: 2px dashed var(--primary-border); border-radius: var(--radius);
        background: var(--primary-tint); padding: 28px 20px; text-align: center; color: var(--primary-700);
        cursor: pointer; transition: background .15s, border-color .15s;
    }
    /* Sabit `#dbf0e6` idi — aynı hata sınıfı, bkz. .pc-dropzone:hover.
       Yazı rengi var(--primary-700) koyu temada açığa dönüyor, zemin sabit
       açık yeşilde kalıyor ve metin okunmuyordu. */
    .dropzone:hover { background: var(--primary-50); }
    .dropzone:hover { border-color: var(--primary); }

    /* Modal (PDF onizleme) */
    .modal-backdrop {
        position: fixed; inset: 0; background: rgba(15, 32, 25, .55);
        display: flex; align-items: center; justify-content: center; padding: 24px; z-index: 50;
    }
    .modal-card { background: var(--panel); border-radius: var(--radius); width: min(920px, 100%); height: min(86vh, 100%); display: flex; flex-direction: column; overflow: hidden; }
    .modal-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--border); }
    .modal-card iframe { flex: 1; border: none; width: 100%; }

    /* Formlar */
    .form-row { margin-bottom: 14px; }
    .form-row label {
        display: block; font-size: 13px; font-weight: 700;
        color: var(--ink); margin-bottom: 6px;
    }
    /* Tur tur saymak yerine hepsini kapsa: yeni bir alan tipi eklendiginde
       (number, search, date…) stil disinda kalip "yamali" gorunmesin.
       Kutu/radyo disarida birakilir; onlarin kendi gorunumu olmali. */
    .form-row input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
    .form-row select, .form-row textarea {
        width: 100%; padding: 12px 14px; font-size: 15px; font-family: inherit;
        border: 2px solid var(--border); border-radius: var(--radius-sm);
        background: var(--panel); color: var(--text); transition: border-color .15s, box-shadow .15s;
        -webkit-appearance: none; appearance: none;
    }
    /* Sayi alanlarinda tarayicinin artir/azalt oklari kutuyu daraltiyordu */
    .form-row input[type="number"] { -moz-appearance: textfield; }
    .form-row input[type="number"]::-webkit-outer-spin-button,
    .form-row input[type="number"]::-webkit-inner-spin-button {
        -webkit-appearance: none; margin: 0;
    }
    /* select'in kendi oku appearance:none ile kalktigi icin geri konur */
    .form-row select {
        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235c6b64' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
        background-repeat: no-repeat; background-position: right 12px center;
        background-size: 18px; padding-right: 38px;
    }
    .form-row input:focus, .form-row select:focus, .form-row textarea:focus {
        outline: none; border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(2, 164, 93, .12);
    }
    .form-row .hint { font-size: 12px; color: var(--muted); margin-top: 5px; }
    .form-row .field-error { font-size: 12px; color: var(--danger); margin-top: 5px; font-weight: 600; }

    .auth-card { max-width: 440px; margin: 0 auto; }
    .auth-title { font-size: 24px; margin: 0 0 4px; }
    .auth-sub { color: var(--muted); font-size: 14px; margin: 0 0 20px; }
    .auth-alt { text-align: center; font-size: 14px; color: var(--muted); margin-top: 18px; }

    /* Bildirimler */
    .alert { padding: 12px 14px; border-radius: var(--radius-sm); font-size: 14px; margin-bottom: 16px; }
    /* HATA KUTUSU — koyu temada okunmuyordu (isletme bildirimi, 2026-08-23:
       "koyu modda bu kutu cok karanlik, okunaksiz").

       Yazi `#a32020` (koyu kirmizi) ve kenarlik `#f5c6c6` SABIT yazilmisti.
       Koyu temada zemin --danger-tint ile #351712'ye donuyor, yazi ise koyu
       kirmizi kaliyordu: koyu ustune koyu.

       SABIT BEYAZ DE COZUM DEGILDI: acik temada zemin #fdecec, yani
       neredeyse beyaz -- beyaz yazi bu kez orada kaybolurdu. Ihtiyac duyulan
       sey TEMAYLA DONEN bir renk.

       --ink secildi (acik #14231c, koyu #e0e3e1): isletmenin tarifiyle
       "beyaz modda siyah, koyu modda beyaz". Kirmizi zemin uzerine KIRMIZI
       yazi (--danger-600) da okunur olurdu ama isletme "kirmizi icine
       kirmizi uymadi" dedi; hata sinyalini zaten ZEMIN ve KENARLIK tasiyor,
       yazinin da kirmizi olmasi gerekmiyor.

       Kenarlik --danger-border'a baglandi (acik #e3b3ac, koyu #5a2a24);
       onceden #f5c6c6 sabitti ve koyu temada acik pembe bir cerceve olarak
       kaliyordu. */
    .alert-error { background: var(--danger-tint); color: var(--ink); border: 1px solid var(--danger-border); }
    .alert-success { background: var(--primary-tint); color: var(--primary-700); border: 1px solid var(--primary-border); }
    .alert-info { background: var(--secondary-tint); color: var(--ink); border: 1px solid var(--border); }

    /* Dogrulama kodu girisi */
    .code-input {
        letter-spacing: .5em; text-align: center; font-size: 22px !important;
        font-weight: 700; padding: 14px !important;
    }

    /* ---- Katalog vitrini (i2pdf tarzi kart izgarasi) ---- */
    .cat-grid {
        display: grid; gap: 14px; margin-bottom: 26px;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    }
    .cat-card {
        display: block; background: var(--panel); border: 1px solid var(--border);
        border-radius: var(--radius); padding: 18px; text-decoration: none;
        color: var(--text); transition: border-color .15s, box-shadow .15s, transform .15s;
    }
    .cat-card:hover {
        border-color: var(--primary); box-shadow: var(--shadow);
        transform: translateY(-2px); text-decoration: none;
    }
    .cat-card.is-active { border-color: var(--primary); background: var(--primary-tint); }
    .cat-name { font-weight: 700; font-size: 16px; margin-bottom: 6px; color: var(--ink); }
    .cat-desc { font-size: 13px; color: var(--muted); line-height: 1.6; margin-bottom: 12px; }
    .cat-count {
        display: inline-block; background: var(--primary-tint); color: var(--primary-700);
        font-size: 12px; font-weight: 700; padding: 5px 11px; border-radius: 999px;
    }

    .urun-grid {
        display: grid; gap: 16px;
        grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    }
    .urun-card {
        display: flex; flex-direction: column; background: var(--panel);
        border: 1px solid var(--border); border-radius: var(--radius);
        overflow: hidden; text-decoration: none; color: var(--text);
        transition: border-color .15s, box-shadow .15s, transform .15s;
    }
    .urun-card:hover {
        border-color: var(--primary); box-shadow: var(--shadow);
        transform: translateY(-2px); text-decoration: none;
    }
    .urun-gorsel {
        aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center;
        background: var(--primary-tint); color: var(--primary); overflow: hidden;
    }
    .urun-gorsel img { width: 100%; height: 100%; object-fit: cover; }
    /* Gorseli olmayan urunlerde yer tutucu ikon kutuda kaybolmasin */
    .urun-gorsel > svg { width: 56px; height: 56px; opacity: .55; }
    .urun-govde { padding: 14px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
    .urun-kategori {
        font-size: 11px; font-weight: 700; color: var(--primary-700);
        text-transform: uppercase; letter-spacing: .04em;
    }
    .urun-adi { font-weight: 700; font-size: 14px; line-height: 1.4; flex: 1; }
    .urun-fiyat { font-weight: 800; font-size: 17px; color: var(--ink); margin-top: 6px; }

    /* Urun basligi icerik akisinin basinda (bkz. products/show.blade.php).
       Mobilde sabit fiyat cubuguna sikismasin diye buraya alindi. */
    .urun-baslik { font-size: 24px; line-height: 1.25; margin: 0 0 8px; }
    .urun-baslik-alt { margin-bottom: 14px; }

    /* Ikincil eylem butonunun uzun/kisa metni: dar ekranda kisa olan gorunur. */
    .urun-bastir-btn .metin-kisa, .urun-giris-btn .metin-kisa { display: none; }

    .urun-detay-gorsel {
        aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center;
        background: var(--primary-tint); color: var(--primary);
        border-radius: var(--radius); overflow: hidden;
    }
    /* Görseller yüklemede kareye kırpıldığı için cover ile kart/detayda aynı görünür. */
    .urun-detay-gorsel img { width: 100%; height: 100%; object-fit: cover; }
    .urun-detay-gorsel > svg { width: 96px; height: 96px; opacity: .5; }
    .urun-kucuk-gorsel {
        width: 62px; height: 62px; padding: 0; border: 2px solid var(--border);
        border-radius: 8px; overflow: hidden; cursor: pointer; background: var(--panel);
    }
    .urun-kucuk-gorsel:hover { border-color: var(--primary); }
    .urun-kucuk-gorsel img { width: 100%; height: 100%; object-fit: cover; }

    @media (max-width: 900px) {
        .urun-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
    }

    /* Sosyal giris butonlari */
    .social-sep {
        display: flex; align-items: center; gap: 12px;
        color: var(--muted); font-size: 13px; margin: 18px 0;
    }
    .social-sep::before, .social-sep::after {
        content: ''; flex: 1; height: 1px; background: var(--border);
    }
    .btn-social {
        display: flex; align-items: center; justify-content: center; gap: 10px;
        width: 100%; padding: 12px 16px; border-radius: var(--radius-sm);
        border: 2px solid var(--border); background: var(--panel); color: var(--text);
        font-size: 15px; font-weight: 600; cursor: pointer; text-decoration: none;
        transition: border-color .15s, background .15s;
    }
    /* Sosyal giris dugmesi. Sabit `#fafdfb` (neredeyse beyaz) idi: yazisi
       var(--text) ve koyu temada aciga donuyor, zemin ise sabit beyaza yakin
       kaliyordu — ustune gelince dugme okunmuyordu. --primary-tint iki temada
       da tanimli ve kenarligin --primary-border'a donmesiyle uyumlu.

       DIKKAT: burada dugmenin GORUNEN METNI yazilmaz. Bu bir CSS yorumu, yani
       Blade yorumunun aksine tarayiciya GONDERILIR; metni yazmak, dugme gizli
       olsa bile ifadenin sayfa kaynaginda gorunmesine yol acar ve
       GoogleIleGirisTest'in "anahtar yokken dugme gorunmez" kontrolu duser
       (2026-08-23'te tam olarak bu oldu). */
    .btn-social:hover { border-color: var(--primary-border); background: var(--primary-tint); text-decoration: none; }
    .btn-social + .btn-social { margin-top: 10px; }
    .btn-social svg { width: 20px; height: 20px; flex: none; }

    /* Anasayfa Hizli Hesaplama Araci */
    .qc-wrap {
        display: grid; grid-template-columns: 1fr 1.15fr; gap: 24px; align-items: stretch;
        background: var(--primary-tint); border-radius: 20px; padding: 28px; overflow: hidden;
    }
    .qc-intro { align-self: center; }
    .qc-panel { background: var(--panel); border-radius: 16px; padding: 20px; box-shadow: var(--shadow); }
    .qc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
    .qc-drop {
        display: block; text-align: center; margin-top: 16px; padding: 18px;
        border: 2px dashed var(--primary-border); border-radius: var(--radius); background: var(--primary-tint);
        cursor: pointer; transition: border-color .15s;
    }
    .qc-price {
        margin-top: 18px; padding: 18px; text-align: center;
        background: var(--primary-tint); border-radius: var(--radius);
    }
    .qc-amount { font-size: 32px; font-weight: 800; color: var(--primary-700); line-height: 1.1; margin: 4px 0; }
    @media (max-width: 860px) {
        .qc-wrap { grid-template-columns: 1fr; padding: 18px; }
        .qc-grid { grid-template-columns: 1fr 1fr; }
    }
    @media (max-width: 480px) {
        .qc-grid { grid-template-columns: 1fr; }
    }

    /* ---- Site geneli koyu duyuru şeridi (kayan, modern) ---- */
    .anno-bar { background: var(--secondary); color: #fff; overflow: hidden; }
    .anno-bar .anno-track { display: inline-flex; align-items: center; white-space: nowrap; will-change: transform; animation: hm-scroll 32s linear infinite; }
    .anno-bar:hover .anno-track { animation-play-state: paused; }
    .anno-item { display: inline-flex; align-items: center; gap: 7px; padding: 9px 18px; font-size: 13px; font-weight: 500; }
    .anno-item.anno-free { color: #6ff0aa; font-weight: 800; }
    .anno-sep { opacity: .3; }
    @media (prefers-reduced-motion: reduce) {
        .anno-bar { overflow-x: auto; }
        .anno-bar .anno-track { animation: none; }
    }

    /* ---- Anasayfa hero: pill + vurgulu başlık (bgsoft esintili) ---- */
    .hm-pill {
        display: inline-flex; align-items: center; gap: 6px; margin: 0 0 16px;
        background: var(--panel); border: 1px solid var(--border); border-radius: 999px;
        padding: 6px 14px; font-size: 13px; font-weight: 600; color: var(--primary-700);
    }
    .hm-title { font-size: 38px; line-height: 1.12; margin: 0 0 16px; color: var(--ink); font-weight: 800; }
    .hm-mark {
        color: var(--primary-700);
        background: linear-gradient(transparent 62%, rgba(2, 164, 93, .22) 62%);
        padding: 0 2px;
    }
    .hm-sub { color: var(--muted); line-height: 1.7; margin: 0 0 18px; font-size: 16px; }
    @media (max-width: 860px) { .hm-title { font-size: 30px; } }

    /* ---- Anasayfa: rozetler, adımlar, yorumlar, ürünler ---- */
    .hm-badges { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 16px; }
    .hm-badge {
        display: flex; flex-direction: column; gap: 2px;
        background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
        padding: 10px 14px; min-width: 96px;
    }
    .hm-badge b { font-size: 19px; color: var(--primary-700); line-height: 1.1; }
    .hm-badge span { font-size: 12px; color: var(--muted); }
    .hm-guest {
        background: var(--secondary-tint, #eef6ff); border: 1px solid var(--border);
        border-radius: 12px; padding: 10px 14px; font-size: 13px; line-height: 1.6; color: var(--ink);
    }

    /* Kayan güven şeridi — transform animasyonu (GPU dostu), üstüne gelince durur */
    .hm-marquee { margin: 22px 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
    .hm-marquee-track { display: inline-flex; gap: 10px; white-space: nowrap; will-change: transform; animation: hm-scroll 30s linear infinite; }
    .hm-marquee:hover .hm-marquee-track { animation-play-state: paused; }
    .hm-chip {
        display: inline-flex; align-items: center; gap: 6px; flex: none;
        background: var(--primary-50); color: var(--primary-700);
        border: 1px solid var(--border); border-radius: 999px; padding: 8px 14px; font-size: 13px; font-weight: 600;
    }
    @keyframes hm-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
    @media (prefers-reduced-motion: reduce) {
        .hm-marquee-track { animation: none; flex-wrap: wrap; white-space: normal; }
        .hm-marquee { -webkit-mask-image: none; mask-image: none; }
    }

    .hm-section { margin: 34px 0; }
    .hm-h2 { font-size: 22px; color: var(--primary-700); margin: 0 0 18px; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
    /* "Tümü →" baglantisi 55x21 px'ti; dikey dokunma hedefi 24'un altinda
       kaliyordu (2026-08-23). Dikey dolgu ve inline-flex ile 24px'e cikti;
       gorsel olarak hicbir sey buyumedi, yalnizca tiklanabilir alan. */
    .hm-h2 .hm-more { font-size: 14px; font-weight: 600; color: var(--ink); margin-left: auto;
        display: inline-flex; align-items: center; min-height: 24px; padding: 2px 4px; }
    .hm-rating { font-size: 14px; font-weight: 600; color: #e8a800; }

    /* NASIL CALISIR — bolum zemini (2026-08-18).
       Sayfa zemini (var(--bg)) ile kart beyazi arasindaki fark 3-4 birimdi;
       kartlar pratikte "beyaz uzerinde beyaz" duruyordu ve bolum duz
       gorunuyordu. Bolume marka tonlu hafif bir zemin verilince beyaz
       kartlar yuzuyor, bolum sayfadan ayriliyor. */
    .hm-steps-kutu {
        background:
            radial-gradient(120% 140% at 0% 0%, rgba(2, 164, 93, .07), transparent 55%),
            var(--primary-tint);
        border: 1px solid rgba(2, 164, 93, .12);
        border-radius: 20px;
        padding: 22px;
    }

    .hm-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
    .hm-step {
        position: relative;
        background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 22px 18px;
        box-shadow: 0 1px 2px rgba(15, 32, 25, .04);
        transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    }
    .hm-step:hover {
        transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--primary);
    }

    /* ADIMLAR ARASI BAGLANTI CIZGISI.
       Bolum bir SUREC anlatiyor ama dort bagimsiz kutu gibi duruyordu; goz
       "1 -> 2 -> 3 -> 4" akisini okumuyordu. Kesikli cizgi ikon kutusunun
       dikey ortasindan gecer (1px kart kenarligi + 22px padding + 58px kutunun yarisi = 52px).
       Kartin DISINA, gap icine cizilir; son adimda yoktur. */
    .hm-step + .hm-step::before {
        content: '';
        position: absolute;
        top: 52px;
        left: -17px;
        width: 17px;
        border-top: 2px dashed rgba(2, 164, 93, .35);
    }

    /* Ikon + sira rozeti. Numara TEK BASINA birakilmadi: ikon anlami bir
       bakista veriyor, numara sirayi koruyor — ikisi birlikte. */
    .hm-step-ikon-kutu {
        position: relative; width: 58px; height: 58px; margin-bottom: 14px;
        display: grid; place-items: center;
        background: var(--primary-tint); border-radius: 16px;
        color: var(--primary-700);
        transition: background .18s ease, color .18s ease;
    }
    .hm-step:hover .hm-step-ikon-kutu { background: var(--primary-600); color: #fff; }
    .hm-step-ico { width: 32px; height: 32px; display: block; }

    .hm-step-no {
        position: absolute; top: -6px; right: -6px;
        width: 22px; height: 22px; border-radius: 50%;
        display: grid; place-items: center;
        background: var(--primary-600); color: #fff;
        font-size: 12px; font-weight: 800; line-height: 1;
        border: 2px solid var(--panel);
    }

    .hm-step-title { font-weight: 700; margin-bottom: 6px; }
    .hm-step-text { font-size: 13px; color: var(--muted); line-height: 1.6; }

    @media (prefers-reduced-motion: reduce) {
        .hm-step, .hm-step-ikon-kutu { transition: none; }
        .hm-step:hover { transform: none; }
    }

    .hm-reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
    .hm-review { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 18px; }
    .hm-review-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
    .hm-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--primary-600); color: #fff; display: grid; place-items: center; font-weight: 700; flex: none; }
    .hm-review-name { font-weight: 700; font-size: 14px; }
    .hm-stars { color: #e8a800; font-size: 13px; letter-spacing: 1px; }
    .hm-review-text { font-size: 13px; color: var(--muted); line-height: 1.65; margin: 0; }

    .hm-products { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }

    /* URUN SEKMELERI -- JAVASCRIPT YOK (2026-08-22).
     *
     * ISLETME: "urunleri iki siraya cikaralim, one cikan gibi en cok giden
     * falan yapip e-ticaret sitelerindeki hava verilmis olur."
     *
     * Gizli radyo dugmeleri + `:checked` ile calisiyor. Script gerektirmemesi
     * bir tercih degil dayaniklilik: anasayfa urun listesi, JS yuklenemedigi
     * ya da hata verdigi durumda da gezilebilir kalmali. Radyolar panellerin
     * ONUNDE duruyor, cunku CSS kardes seciciyle yalnizca SONRAKI ogelere
     * ulasabiliyor.
     *
     * Radyolar ekrandan gizleniyor ama `display:none` KULLANILMIYOR --
     * o, dugmeleri klavye erisimine de kapatir ve sekmeler yalnizca fareyle
     * gezilebilir hale gelirdi. Sekmeler arasi gecis ok tuslariyla calisir
     * (radyo grubunun dogal davranisi); odak halkasi da etiketin uzerinde
     * gorunur, yoksa klavyeyle gezen kisi nerede oldugunu bilemez. */
    .us-r {
        position: absolute; width: 1px; height: 1px;
        opacity: 0; pointer-events: none;
    }

    .us-tablar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }

    .us-tab {
        font-size: 14px; font-weight: 700; padding: 8px 16px; border-radius: 999px;
        border: 1px solid var(--border); color: var(--muted); background: transparent;
        cursor: pointer; transition: background .15s, color .15s, border-color .15s;
        /* 44px dokunma hedefi (WCAG 2.5.8) -- CLAUDE.md Arayuz §2. */
        min-height: 44px; display: inline-flex; align-items: center;
    }

    .us-tab:hover { color: var(--text); border-color: var(--muted); }

    .us-panel { display: none; grid-template-columns: repeat(4, 1fr); gap: 16px; }

    /* Secili sekmenin paneli acilir. Uc kural, uc olasi sekme icin: liste
       Blade tarafinda dinamik (bos sekme basilmiyor), ama en fazla uc tane
       olabilecegi icin sabit sayida kural yeterli. */
    .us-r:nth-of-type(1):checked ~ .us-panel-1,
    .us-r:nth-of-type(2):checked ~ .us-panel-2,
    .us-r:nth-of-type(3):checked ~ .us-panel-3 { display: grid; }

    .us-r:nth-of-type(1):checked ~ .us-tablar .us-tab:nth-child(1),
    .us-r:nth-of-type(2):checked ~ .us-tablar .us-tab:nth-child(2),
    .us-r:nth-of-type(3):checked ~ .us-tablar .us-tab:nth-child(3) {
        background: var(--primary); border-color: var(--primary); color: #fff;
    }

    .us-r:nth-of-type(1):focus-visible ~ .us-tablar .us-tab:nth-child(1),
    .us-r:nth-of-type(2):focus-visible ~ .us-tablar .us-tab:nth-child(2),
    .us-r:nth-of-type(3):focus-visible ~ .us-tablar .us-tab:nth-child(3) {
        outline: 2px solid var(--primary); outline-offset: 2px;
    }

    @media (max-width: 900px) {
        .us-panel { grid-template-columns: repeat(2, 1fr); }
    }
    .hm-product { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 12px; display: block; transition: box-shadow .15s, transform .15s; }
    .hm-product:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
    .hm-product-img { aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--primary-tint); display: grid; place-items: center; margin-bottom: 10px; }
    .hm-product-img img { width: 100%; height: 100%; object-fit: cover; }
    /* Hero dipnotu. Once inline `color:var(--danger)` idi ve koyu temada
     * kontrasti 3.13'te kaliyordu (esik 4.5). `--danger` token'i KOYU TEMADA
     * DEGISTIRILMEDI: bir yerde zemin olarak da kullaniliyor
     * (.wiz-file-card .rm:hover), acik renge cevirmek orada beyaz metni
     * okunmaz yapardi -- `--secondary` ile yasanan cift rol tuzaginin aynisi.
     * Cozum token'a degil, bu metne ozel. */
    .hm-hero-dipnot { color: var(--danger); font-size: 12px; margin: 12px 0 0; }
    [data-theme="dark"] .hm-hero-dipnot { color: #ff9d92; }

    .hm-product-name { font-size: 13px; font-weight: 600; line-height: 1.4; margin-bottom: 4px; }
    /* Kart zemini `--primary-tint` (koyu yesil); uzerindeki ad ve gorsel
     * yer tutucusu koyu temada 3.0-3.4 arasinda kaliyordu, esik 4.5
     * (2026-08-22 taramasi). */
    [data-theme="dark"] .hm-product-name,
    [data-theme="dark"] .hm-product-img { color: var(--text); }
    .hm-product-price { font-weight: 800; color: var(--ink); }

    @media (max-width: 860px) {
        .hm-steps { grid-template-columns: repeat(2, 1fr); }
        .hm-reviews { grid-template-columns: 1fr; }
        .hm-products { grid-template-columns: repeat(2, 1fr); }
        /* Iki sutunda cizgi yalnizca 1->2 ve 3->4 arasinda anlamli; satir
           basina gecen kartta (3.) sola dogru cizgi cizmek akisi YANLIS
           gosterirdi (aslinda yukaridan asagi geciyor). */
        .hm-step:nth-child(odd)::before { display: none; }
        .hm-steps-kutu { padding: 18px; }
    }
    @media (max-width: 480px) {
        .hm-steps { grid-template-columns: 1fr; }
        .hm-h2 { font-size: 19px; }
        /* Tek sutunda kartlar alt alta: yatay cizgi anlamsiz. */
        .hm-step + .hm-step::before { display: none; }
        .hm-steps-kutu { padding: 14px; border-radius: 16px; }
    }

    /* Standart / Detayli gecis cubugu */
    /* AYAR CUBUGU IKI SATIR (2026-08-23).
       Ust satir: ayar ozeti (chip'ler + guven cumlesi)
       Alt satir: kopya adedi + ayar dugmesi

       Onceden tek satirda space-between ile duruyordu ve "Kopya Adedi" ayri
       bir blok olarak asagida yer aliyordu -- toplam UC satir. Isletme
       "baski ayari tek satira sigar, adet ve dugme ikinci satir olsun" dedi. */
    .std-bar {
        display: flex; flex-direction: column; align-items: stretch; gap: 12px;
        margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border);
    }
    /* Ucalara YASLANMAZ: kopya ve dugme birbirine yakin dursun ("ayri iki sey"
       degil, "ayni dosyanin ayarlari" gibi okunsun). */
    .std-alt { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
    .std-kopya { display: inline-flex; align-items: center; gap: 8px; }
    /* Etiket dar ekranda da GIZLENMEZ: mukerrer dosya uyarisi musteriyi
       adiyla buraya yonlendiriyor ("Kopya Adedi'ni artirmak daha uygun
       olur"). Gizlersek uyari ekranda olmayan bir seyi isaret eder.
       Dar ekranda satir sarar; kabul edilir bedel. */
    .std-kopya-et { font-size: 13px; color: var(--muted); white-space: nowrap; }

    /* AYAR ÖZETİ — kapalı görünümde ayarların kendisini gösterir.

       MÜŞTERİ BİLDİRİMİ (2026-08-23): ilk kez gelen biri "yüklediğim PDF'in
       rengini nereden siyah-beyaz yaparım" diye sordu. Ekranda "✓ Standart
       baskı" yazıyordu ve bunun ne olduğu hiçbir yerde belli değildi.

       Sorun düğmenin boyutu değildi — yandaki düğme 2026-08-19'da zaten
       büyütülmüştü. Eksik olan MEVCUT DURUMUN GÖRÜNMEMESİYDİ.

       Chip'ler `.std-ayar-btn`den KASITLI OLARAK DAHA SAKİN: asıl eylem
       düğmesi hâlâ o, bunlar okunacak bilgi + kısa yol. İkisi de aynı
       vurguda olsa çubuk iki rakip düğmeye dönerdi. */
    .std-ozet { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
    .std-ozet-chip {
        font: inherit; font-size: 13px; font-weight: 700; line-height: 1.2;
        padding: 6px 11px; border-radius: var(--radius);
        border: 1px solid var(--primary-border); background: var(--primary-tint);
        color: var(--primary-700); cursor: pointer; white-space: nowrap;
        /* Dokunma hedefi: WCAG 2.5.8 asgari 24px (proje kuralı). */
        min-height: 32px;
        transition: border-color .15s ease, background .15s ease;
    }
    .std-ozet-chip:hover { border-color: var(--primary); background: var(--primary-50); }
    .std-ozet-chip:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
    /* Güven cümlesi chip DEĞİL: tıklanmaz, sakin durur. Chip gibi
       görünseydi müşteri ona da basmayı denerdi. */
    .std-ozet-not { font-size: 12px; color: var(--muted); white-space: nowrap; }
    @media (max-width: 480px) {
        /* Dar ekranda çubuk iki satıra sarıyor; chip'ler tam genişliği
           kullanabilsin diye özet kendi satırına geçiyor. */
        .std-ozet { width: 100%; }
    }
    /* Sepetteki urun onerisi. Kalem listesinin ALTINDA duruyor, sag sutunda
       degil: sag sutun "Siparisi tamamla"nin yeri ve oraya urun koymak asil
       eylemle yarisir. */
    .cart-oneri { margin-top: 28px; }
    .cart-oneri-baslik { font-size: 17px; margin: 0 0 12px; }
    .cart-oneri-grid {
        display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px;
    }
    .cart-oneri-kart {
        display: block; padding: 10px; border: 1px solid var(--border); border-radius: 12px;
        background: var(--panel); text-decoration: none; color: inherit;
        transition: border-color .15s ease, box-shadow .15s ease;
    }
    .cart-oneri-kart:hover { border-color: var(--primary); box-shadow: var(--shadow); }
    .cart-oneri-gorsel {
        height: 96px; border-radius: 8px; background: var(--panel); overflow: hidden;
        display: flex; align-items: center; justify-content: center; margin-bottom: 8px;
    }
    /* Urun gorseli de KIRPILMAZ — musteri neyi aldigini gormeli. */
    .cart-oneri-gorsel img { width: 100%; height: 100%; object-fit: contain; }
    .cart-oneri-adi { font-size: 13px; font-weight: 700; line-height: 1.35; }
    .cart-oneri-fiyat { font-size: 13px; color: var(--primary-700); font-weight: 800; margin-top: 4px; }

    /* Menudeki sepet sayaci. Musteri dosyalarini birakip baska sayfaya
       gectiginde sepetinde is oldugunu unutuyor; rozet yarim kalmis siparisi
       geri cagiran en ucuz hatirlatma. Sifirken HIC BASILMIYOR — "0" gostermek
       gurultu, bilgi degil. */
    .nav-sayac {
        display: inline-flex; align-items: center; justify-content: center;
        min-width: 18px; height: 18px; margin-left: 6px; padding: 0 5px;
        border-radius: 999px; background: var(--primary); color: #fff;
        font-size: 11px; font-weight: 800; line-height: 1; vertical-align: middle;
    }

    /* Baski ayarlari dugmesi (2026-08-19).
       MOBIL-FIRST: temel deger MOBILIN eski hali -- mobilde HICBIR sey
       degismez (isletme: "mobilde degisiklik istemiyorum"). Metin mobilde
       "Baski secenekleri", stil kucuk outline (onceki gibi).
       Yalnizca >=561px'te (masaustu) dugme buyur, dolu yesile doner ve
       metin "Baski ayarlarini degistir" olur -- bu ekranin en cok gozden
       kacan dugmesiydi, bir bakista fark edilsin diye. */
    /* Rozet artik tiklanabilir (2026-08-19): tek tikla secenekleri acar.
       button varsayilan gorunumunu sifirla; std-badge'in kendi stili kalsin.
       Uzerine gelince hafif belirginlesir ki tiklanabilir oldugu anlasilsin. */
    .std-badge-btn { cursor: pointer; font: inherit; text-align: left; border: none; }
    .std-badge-btn:hover { filter: brightness(0.97); }
    .std-badge-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

    .std-ayar-btn { padding: 8px 14px; font-size: 13px; font-weight: 800; white-space: nowrap; }
    .std-ayar-uzun { display: none; }
    .std-ayar-kisa { display: inline; }
    @media (min-width: 561px) {
        .std-ayar-uzun { display: inline; }
        .std-ayar-kisa { display: none; }
        .std-ayar-btn {
            padding: 11px 22px; font-size: 15px;
            background: var(--primary); color: #fff; border-color: var(--primary);
        }
        .std-ayar-btn:hover { background: var(--primary-600); border-color: var(--primary-600); }
    }

    .std-badge {
        display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap;
        background: var(--primary-tint); color: var(--primary-700);
        border-radius: 999px; padding: 5px 12px; font-size: 13px; font-weight: 700;
    }
    /* "cogu musterinin tercihi" — rozetin ICINDE, ayri bir soluk gri yazi
       olarak degil. Bu, ekrandaki en onemli guven sinyali: musteri hicbir sey
       secmeden siparis verebilecegini buradan anliyor. Disarida kucuk gri
       yaziyken goze carpmiyordu (kullanici bildirimi, 2026-08-15).
       Ayni renkte ama daha hafif: rozetin kendisiyle yarismaz. */
    /* Rozetin ikinci yarisi: AYNI renk tonunda degil, KENDI rengiyle.
       Ayni yesilin soluk hali olarak birakildiginda rozetin icinde
       kayboluyordu (kullanici bildirimi). Amber, yesil rozetin icinde
       kendiliginden one cikiyor ve "dikkat" degil "bilgi" tonunda kaliyor —
       uyari kutulariyla karistirmamak icin bilincli olarak turuncu-sari. */
    .std-badge-not {
        font-weight: 700; font-size: 12px;
        color: #8a5a00; background: #ffe9b8;
        padding: 2px 9px; border-radius: 999px;
    }
    [data-theme="dark"] .std-badge-not { color: #ffd98a; background: #3a2e10; }

    /* Yukleme ilerlemesi */
    .up-card {
        border: 1px solid var(--border); border-radius: var(--radius);
        padding: 18px; background: var(--panel); margin-top: 12px;
    }
    .up-name { font-weight: 700; font-size: 15px; word-break: break-word; text-align: center; }
    .up-size { font-size: 13px; color: var(--muted); text-align: center; margin-top: 2px; }
    .up-meta {
        text-align: center; font-size: 13px; color: var(--muted); margin: 12px 0 8px;
    }
    .up-meta strong { color: var(--ink); font-weight: 700; }
    .up-bar {
        height: 18px; background: var(--secondary-tint); border-radius: 999px; overflow: hidden;
    }
    .up-bar > span {
        display: block; height: 100%; width: 0%; background: var(--primary);
        border-radius: 999px; transition: width .25s ease;
    }
    .up-percent {
        text-align: center; font-size: 30px; font-weight: 800; color: var(--ink);
        margin-top: 12px; line-height: 1.1;
    }
    .up-percent small { display: block; font-size: 13px; font-weight: 600; color: var(--muted); letter-spacing: .04em; }
    .up-actions { text-align: center; margin-top: 10px; }
    .up-error {
        margin-top: 10px; padding: 10px 12px; border-radius: var(--radius-sm);
        background: var(--danger-tint); color: var(--danger); font-size: 13px; text-align: center;
    }
    .up-card.is-done .up-bar > span { background: var(--primary-600); }

    /* Konfigurator duzeni */
    .cfg-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; max-width: 100%; }
    .cfg-layout > * { min-width: 0; max-width: 100%; }

    /* Dosya kalite kontrolu uyarilari */
    .qc-issues { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
    .qc-issue {
        display: flex; align-items: center; gap: 10px;
        padding: 10px 12px; border-radius: 10px; font-size: 13px; line-height: 1.5;
        border: 1px solid transparent;
    }
    .qc-issue .qc-ico { flex: none; font-size: 15px; }
    .qc-issue .qc-msg { flex: 1; }
    /* YAZI RENGI NOTR (2026-08-23, isletme tercihi: "beyaz modda siyah, koyu
       modda beyaz"). Onceden acik temada #8a5a00 / #a11, koyu temada amber ve
       somon yaziliyordu; okunuyordu ama isletme "kirmizi icine kirmizi
       uymadi" dedi ve ayni yaklasimi buraya da istedi.

       Uyari/engel sinyalini ZATEN zemin, kenarlik ve ikon tasiyor; yazinin
       da renkli olmasi gerekmiyor. --ink iki temada da donuyor
       (#14231c / #e0e3e1), yani tek satirla ikisi de dogru. */
    .qc-issue.is-warn { background: #fff7e6; border-color: #f0c36d; color: var(--ink); }
    .qc-issue.is-block { background: #fdecea; border-color: var(--danger); color: var(--ink); }
    .qc-fix {
        flex: none; border: none; cursor: pointer;
        background: var(--primary-600); color: #fff; font-weight: 700; font-size: 12px;
        padding: 7px 12px; border-radius: 8px; white-space: nowrap;
    }
    .qc-fix:hover { background: var(--primary-700); }
    /* data-theme SECICISI, media query DEGIL (2026-08-19): tema artik
         bikopi-theme.js'in yazdigi cozumlenmis degerden okunur. Eski
         prefers-color-scheme sorgusu elle secilen temayla KAVGA ediyordu:
         OS koyu + site acik secilmisken bu iki kural yine koyu basiyordu. */
    /* Koyu temada YALNIZCA zemin ve kenarlik degisiyor; yazi rengi
         yukaridaki --ink'ten geliyor, burada tekrar edilmiyor. */
    [data-theme="dark"] .qc-issue.is-warn { background: #3a2e10; border-color: #7a5a1a; }
    [data-theme="dark"] .qc-issue.is-block { background: #3a1613; border-color: #a5342a; }

    /* ---- Fiyat listesi (seffaflik sayfasi) ---- */
    .pl-head { margin-bottom: 20px; }
    .pl-highlight {
        display: inline-flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
        margin-top: 10px; padding: 10px 16px; border-radius: 12px;
        background: var(--primary-50); border: 2px solid var(--primary-600);
        font-size: 14px; color: var(--primary-700);
    }
    .pl-highlight strong { font-size: 24px; font-weight: 800; }

    .pl-formula { margin-bottom: 26px; }
    .pl-formula-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; }
    .pl-chip {
        display: inline-block; padding: 6px 12px; border-radius: 999px;
        background: var(--primary-50); color: var(--primary-700);
        border: 1px solid var(--border); font-weight: 700; font-size: 13px;
    }

    .pl-h2 { font-size: 20px; margin: 28px 0 12px; color: var(--primary-700); }

    /* Genis tablolar KENDI icinde kayar, sayfa yatay kaymaz */
    .pl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 14px; }
    .pl-table {
        width: 100%; border-collapse: collapse; background: var(--panel);
        border: 2px solid var(--border); border-radius: 14px; overflow: hidden;
        font-size: 14px; min-width: 520px;
    }
    .pl-table.pl-table-sm { min-width: 0; }
    .pl-table th, .pl-table td {
        padding: 11px 14px; text-align: center; border-bottom: 1px solid var(--border);
        white-space: nowrap;
    }
    .pl-table thead th {
        background: var(--primary-50); color: var(--primary-700);
        font-weight: 800; font-size: 13px;
    }
    .pl-table thead th.pl-sub { font-size: 12px; font-weight: 700; }
    .pl-table tbody tr:last-child td { border-bottom: none; }
    .pl-table .pl-rowhead { text-align: left; font-weight: 700; }
    /* Yaprak aralığının sayfa karşılığı — asıl değerin altında, ikincil.
       Müşteri sayfa ile düşünüyor ama fiyatı belirleyen yaprak (kalınlık);
       ikisi birlikte gösteriliyor, biri diğerinin yerine geçmiyor. */
    .pl-table .pl-alt {
        display: block; margin-top: 2px;
        font-weight: 400; font-size: 11.5px; color: var(--muted);
        white-space: nowrap;
    }
    .pl-table .pl-best { color: var(--primary-700); font-weight: 800; background: var(--primary-50); }
    .pl-note { font-size: 13px; margin: 10px 2px 0; line-height: 1.7; }

    .pl-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
    .pl-cta {
        margin-top: 28px; display: flex; align-items: center; justify-content: space-between;
        gap: 16px; flex-wrap: wrap;
    }

    /* ---- Mobil ---- */
    @media (max-width: 900px) {
        .pl-cta { flex-direction: column; align-items: stretch; }
        .pl-cta .btn { width: 100%; }
        .pl-highlight strong { font-size: 20px; }

        .cfg-layout { grid-template-columns: 1fr; }
        .shell { padding: 16px 14px 96px; }
        .panel { padding: 16px; border-radius: 14px; }

        /* Fiyat kutusu mobilde ekranin altina sabitlenir - siparis her an bir tik uzakta */
        .price-box {
            position: fixed; left: 0; right: 0; bottom: 0; top: auto;
            z-index: 40; padding: 0;
        }
        .price-box .panel {
            border-radius: 16px 16px 0 0; border-bottom: none;
            box-shadow: 0 -8px 24px rgba(15, 32, 25, .12);
            display: flex; align-items: center; gap: 12px; padding: 12px 16px;
            /* Masaustundeki sticky/max-height sifirlanir: mobilde kutunun
               kendisi zaten ekranin altina `fixed` olarak yapisiyor. */
            position: static; max-height: none; overflow: visible;
        }
        .price-box .total-label, .price-box .total-sub, .price-box .row { display: none; }
        .price-box .total-amount { font-size: 22px; margin: 0; flex: none; }
        .price-box .btn-block { width: auto; flex: 1; }
        .price-box .muted { display: none; }

        /* SABIT CUBUK YALNIZCA: fiyat + sepete ekle + dosya bastir
           (isletme, 2026-08-18 — cubuk ekrana sigmiyordu).
           Adet secimi cubuga sigmaz; 1 adet gonderilir, musteri sepette
           degistirir. Form satirlarinin kendisi de gizlenmeli, yoksa flex
           satirinda bos bir kutu olarak yer kaplar. */
        .price-box .form-row { display: none; }
        .price-box form { display: contents; }
        .price-box .btn { padding: 12px 10px; font-size: 13.5px; line-height: 1.25; }
        .urun-bastir-btn .metin-uzun, .urun-giris-btn .metin-uzun { display: none; }
        .urun-bastir-btn .metin-kisa, .urun-giris-btn .metin-kisa { display: inline; }
        /* Iki buton ESIT bolusur. Ana eyleme fazla pay verilince ikincil
           buton ("Dosya bastır") iki satira kirilip cubugu sisiriyordu. */
        .price-box .btn-block { flex: 1 1 0; }
        .price-box .urun-bastir-btn { margin-top: 0 !important; }

        /* Dokunmatik hedefler buyutulur */
        .opt-grid { grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 8px; }
        .opt-card { padding: 12px 8px; min-height: 84px; }
        .opt-card .opt-ico { width: 34px; height: 34px; }
        .opt-card .opt-name { font-size: 12px; }
        .stepper button { width: 46px; height: 46px; font-size: 20px; }
        .stepper input { height: 46px; }
        .btn { padding: 14px 18px; }

        .nav { gap: 8px; }
        .nav-links { gap: 12px; font-size: 13px; }
        .file-card { flex-wrap: wrap; }
        .file-card > div[style*="text-align:right"] { width: 100%; text-align: left !important; }
        .modal-card { height: 92vh; width: 100%; }
        .up-percent { font-size: 26px; }
    }

    /* ============================================================
       PDF Baskı Konfiguratörü — Faz 2 UX (/pdf-baski)
       ============================================================ */

    /* Dropzone — modern, iLovePDF tarzı */
    .pc-dropzone {
        display: flex; flex-direction: column; align-items: center; justify-content: center;
        gap: 10px; min-height: 160px; padding: 32px 24px;
        border: 2px dashed var(--primary-border); border-radius: 16px;
        background: linear-gradient(180deg, var(--primary-tint) 0%, var(--panel) 100%);
        cursor: pointer; transition: border-color .2s, background .2s, transform .15s;
        text-align: center;
    }
    /* Hover zemini TOKEN olmali (2026-08-23, işletme bildirimi: "koyu modda
       yükleme alanına gelince yazılar okunmaz oluyor").

       Burada `background: #e8f7ef` sabit yazılmıştı. O değer açık temanın
       --primary-tint'i; koyu temada ise yazı rengi (--ink) açığa dönüyor ama
       zemin bu sabit açık yeşilde kalıyordu — açık üstüne açık, başlık
       tamamen okunmaz hale geliyordu.

       --primary-tint iki temada da tanımlı (#e6f6ee / #1b3d29), yani aynı
       görsel etki koyu temada da doğru çalışıyor. */
    .pc-dropzone:hover, .pc-dropzone.is-dragover {
        border-color: var(--primary); background: var(--primary-tint);
        transform: translateY(-1px);
    }
    .pc-dropzone-ico {
        width: 56px; height: 56px; border-radius: 14px;
        background: var(--primary-600); color: #fff;
        display: flex; align-items: center; justify-content: center;
        font-size: 28px; box-shadow: 0 4px 14px rgba(2,164,93,.25);
    }
    .pc-dropzone-title { font-size: 16px; font-weight: 800; color: var(--ink); line-height: 1.35; }
    .pc-dropzone-sub { font-size: 13px; color: var(--muted); max-width: 420px; line-height: 1.55; margin: 0; }
    .pc-dropzone-body {
        display: flex; flex-direction: column; align-items: center; gap: 14px;
        text-align: center; width: 100%;
    }
    .pc-dropzone-text { display: flex; flex-direction: column; gap: 6px; align-items: center; }
    .pc-dropzone-btn {
        display: inline-flex; align-items: center; justify-content: center;
        margin-top: 2px; padding: 12px 24px; border-radius: 999px;
        background: var(--primary-600); color: #fff; font-weight: 700; font-size: 14px;
        border: none; pointer-events: none; flex: none;
    }
    .pc-dropzone.is-compact { min-height: 100px; padding: 20px; flex-direction: row; gap: 16px; text-align: left; }
    .pc-dropzone.is-compact .pc-dropzone-ico { width: 44px; height: 44px; font-size: 22px; flex: none; }
    .pc-dropzone.is-compact .pc-dropzone-btn { display: none; }

    /* Skeleton */
    @keyframes pc-shimmer {
        0% { background-position: -400px 0; }
        100% { background-position: 400px 0; }
    }
    .skel, .skel-text, .pc-skel-block {
        background: linear-gradient(90deg, var(--surface-2) 25%, var(--panel) 50%, var(--surface-2) 75%);
        background-size: 800px 100%;
        animation: pc-shimmer 1.4s infinite linear;
        border-radius: 8px;
    }
    .skel-text { height: 14px; width: 70%; margin-bottom: 6px; }
    .skel-text.short { width: 45%; }

    /* Upload kartları */
    .pc-upload-card {
        border: 1px solid var(--border); border-radius: 14px;
        background: var(--panel); margin-top: 12px; overflow: hidden;
        box-shadow: 0 2px 8px rgba(15,32,25,.04);
    }
    .pc-upload-card-inner { display: flex; gap: 14px; padding: 14px; align-items: flex-start; }
    .pc-upload-thumb {
        width: 64px; height: 84px; flex: none; border-radius: 8px;
        border: 1px solid var(--border); overflow: hidden; background: var(--secondary-tint);
    }
    .pc-upload-thumb img { width: 100%; height: 100%; object-fit: cover; }
    .pc-upload-body { flex: 1; min-width: 0; }
    .pc-upload-name { font-weight: 700; font-size: 14px; word-break: break-word; }
    .pc-upload-meta { font-size: 12px; color: var(--muted); margin: 4px 0 10px; }
    .pc-upload-bar {
        height: 6px; background: var(--secondary-tint); border-radius: 999px; overflow: hidden;
    }
    .pc-upload-bar > span {
        display: block; height: 100%; width: 0%; background: var(--primary);
        border-radius: 999px; transition: width .25s ease;
    }
    .pc-upload-footer { display: flex; justify-content: space-between; margin-top: 6px; font-size: 12px; }
    .pc-upload-pct { font-weight: 800; color: var(--primary-700); }
    .pc-upload-status { color: var(--muted); }
    .pc-upload-cancel {
        flex: none; border: none; background: transparent; color: var(--muted);
        cursor: pointer; font-size: 16px; padding: 4px 8px; border-radius: 8px;
    }
    .pc-upload-cancel:hover { background: var(--secondary-tint); color: var(--danger); }
    .pc-upload-card.is-done { border-color: var(--primary); }
    .pc-upload-card.is-error { border-color: var(--danger); }

    /* Dosya sekmeleri — yatay kaydirma yok; sigmayanlar "Tumunu goster" ile alt alta acilir */
    /* overflow-x: HIDDEN DEGIL CLIP.
       `hidden` yazildiginda tarayici diger ekseni de otomatik olarak `auto`
       yapiyor (hesaplanan deger: "hidden auto") ve bu oge KENDI KAYDIRMA KABI
       haline geliyor. `position: sticky` de artik gorus alanina degil O KABA
       gore yapisiyor; kap sayfayla birlikte kaydigi icin sag sutun hic
       yapismiyormus gibi gorunuyor.
       2026-08-15'te tarayicida olculdu — sag sutunun "asagi kaymamasinin"
       sebebi buydu; sticky kurallarinda ya da yukseklikte bir sorun yoktu.
       `clip` ayni gorsel etkiyi verir (yatay tasmayi keser) ama kaydirma kabi
       OLUSTURMAZ, dolayisiyla sticky gorus alanina gore calismaya devam eder. */
    .pc-root { max-width: 100%; min-width: 0; overflow-x: clip; }
    .pc-file-tabs-wrap {
        width: 100%; max-width: 100%; min-width: 0;
        margin-bottom: 8px;
    }
    .pc-file-tabs {
        display: flex; flex-wrap: wrap; gap: 8px;
        width: 100%; max-width: 100%; min-width: 0;
        padding: 4px 0 10px;
    }
    .pc-file-tab {
        flex: none; display: flex; align-items: center; gap: 8px;
        padding: 8px 14px; border-radius: 999px; border: 2px solid var(--border);
        background: var(--panel); cursor: pointer; font-size: 13px; font-weight: 600;
        max-width: min(240px, 100%); min-width: 0;
        transition: border-color .15s, background .15s;
    }
    .pc-file-tab[hidden] { display: none !important; }
    /* Acik hal: dosyalar alt alta, tam genislikte */
    .pc-file-tabs-wrap.is-expanded .pc-file-tabs {
        flex-direction: column; align-items: stretch; flex-wrap: nowrap;
    }
    .pc-file-tabs-wrap.is-expanded .pc-file-tab {
        width: 100%; max-width: 100%; border-radius: 12px; justify-content: flex-start;
    }
    .pc-file-tabs-more {
        display: inline-flex; align-items: center; gap: 6px;
        margin: 0 0 12px; padding: 8px 14px; min-height: 40px;
        border: 2px dashed var(--border); border-radius: 999px;
        background: var(--panel); color: var(--primary-700);
        font-size: 13px; font-weight: 700; cursor: pointer;
        transition: border-color .15s, background .15s;
    }
    .pc-file-tabs-more:hover { border-color: var(--primary); background: var(--primary-tint); }
    .pc-file-tabs-more[hidden] { display: none !important; }
    .pc-file-tab.is-active { border-color: var(--primary); background: var(--primary-tint); color: var(--primary-700); }
    .pc-file-tab-thumb {
        width: 28px; height: 36px; border-radius: 4px; object-fit: cover;
        border: 1px solid var(--border); flex: none;
    }
    .pc-file-tab-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    /* Önizleme alanı (inline — dosya seçiliyken) */
    .pc-workspace {
        display: grid; grid-template-columns: 1fr 340px; gap: 20px; align-items: start;
    }
    /* Dosya basligi seridi. min-height ve gri zemin ESKIDEN buyuk onizleme
       icin alan ayiriyordu; onizleme kaldirilinca (2026-08-14) geriye bos gri
       bir kutu kaliyordu. Panel artik yalnizca arac cubugunu sariyor. */
    .pc-preview-panel {
        border: 1px solid var(--border); border-radius: 16px; background: var(--panel);
        overflow: hidden; max-width: 100%;
    }
    .pc-preview-panel-toolbar {
        display: flex; align-items: center; justify-content: space-between; gap: 8px;
        padding: 10px 14px; background: var(--panel); border-bottom: 1px solid var(--border);
        flex-wrap: wrap;
    }
    .pc-slider {
        position: relative;
        display: block;
        max-width: 100%;
        width: 100%;
        background: var(--surface-2);
        padding: 16px 48px;
        outline: none;
        overflow: hidden;
        box-sizing: border-box;
    }
    .pc-slider:focus-visible { box-shadow: inset 0 0 0 2px var(--primary); }
    .pc-preview-panel-canvas {
        display: flex; align-items: center; justify-content: center;
        min-height: 320px; min-width: 0; padding: 8px 4px; overflow: hidden;
        background: transparent; max-width: 100%;
    }
    /* Kapak gorseli artik tam onizlemeyi acan bir dugme — <button> oldugu icin
       tarayici varsayilanlarini sifirlayip tiklanabilir oldugunu belli ediyoruz. */
    .pc-preview-trigger {
        border: none; background: transparent; width: 100%; cursor: zoom-in;
        font: inherit; color: inherit;
    }
    .pc-preview-trigger .pc-preview-a4-frame { position: relative; transition: transform .15s ease; }
    .pc-preview-trigger:hover .pc-preview-a4-frame { transform: scale(1.015); }
    .pc-preview-trigger:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 8px; }
    /* Ipucu HER ZAMAN gorunur: hover'a baglamak dokunmatik cihazlarda
       (@media (hover: none) her tarayicida guvenilir eslesmiyor) rozeti
       tamamen gizliyordu. Ustelik surekli gorunmesi, kapak gorselinin
       tiklanabilir oldugunu her kullaniciya bastan belli ediyor. */
    .pc-preview-hint {
        position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%);
        background: rgba(15, 32, 25, .78); color: #fff;
        font-size: 12px; font-weight: 700; padding: 5px 12px; border-radius: 999px;
        pointer-events: none; white-space: nowrap;
        transition: background .15s ease;
    }
    .pc-preview-trigger:hover .pc-preview-hint,
    .pc-preview-trigger:focus-visible .pc-preview-hint { background: var(--primary, #2e9e6b); }
    .pc-slider-nav {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 10;
        width: 48px; height: 48px; min-width: 44px; min-height: 44px;
        border: none; border-radius: 999px; cursor: pointer;
        background: var(--panel); color: var(--ink); font-size: 30px; line-height: 1;
        font-weight: 700; box-shadow: 0 4px 16px rgba(15,32,25,.18);
        display: inline-flex; align-items: center; justify-content: center;
        transition: background .15s, color .15s, transform .15s, opacity .15s, box-shadow .15s;
        -webkit-tap-highlight-color: transparent;
        padding: 0;
    }
    .pc-slider-prev { left: 8px; }
    .pc-slider-next { right: 8px; }
    .pc-slider-nav:hover:not(:disabled) {
        background: var(--primary-600); color: #fff;
        transform: translateY(-50%) scale(1.06);
        box-shadow: 0 6px 18px rgba(2,164,93,.28);
    }
    .pc-slider-nav:active:not(:disabled) { transform: translateY(-50%) scale(.96); }
    .pc-slider-nav:disabled { opacity: .35; cursor: default; box-shadow: 0 2px 8px rgba(15,32,25,.08); }
    .pc-slider-meta {
        text-align: center; font-size: 13px; font-weight: 700; color: var(--ink);
        padding: 0 12px 10px; background: var(--surface-2);
    }
    .pc-slider-note {
        display: block; margin-top: 4px;
        font-size: 12px; font-weight: 600; color: var(--muted);
    }
    /* A4 orani (210:297) — tek sayfa onizleme cercevesi */
    .pc-preview-a4-frame {
        width: min(360px, 100%);
        aspect-ratio: 210 / 297;
        background: var(--panel);
        border-radius: 6px;
        box-shadow: 0 4px 20px rgba(0,0,0,.12);
        display: flex; align-items: center; justify-content: center;
        overflow: hidden; flex: none;
        position: relative;
        transition: opacity .2s ease;
        margin: 0 auto;
    }
    .pc-preview-a4-frame.is-landscape {
        width: min(520px, 92%);
        aspect-ratio: 297 / 210;
    }
    .pc-preview-a4-frame.is-switching { opacity: .45; }
    .pc-preview-a4-frame canvas,
    .pc-preview-img {
        display: block; max-width: 100%; max-height: 100%;
        width: auto; height: auto; object-fit: contain;
    }
    .pc-preview-img { width: 100%; height: 100%; object-fit: contain; }
    .pc-preview-skel { width: 100%; height: 100%; border-radius: 6px; }
    .pc-preview-panel-thumbs {
        display: flex; gap: 10px; padding: 12px 14px;
        overflow-x: auto; overflow-y: hidden;
        max-width: 100%;
        background: var(--panel); border-top: 1px solid var(--border);
        -webkit-overflow-scrolling: touch; flex-wrap: nowrap;
        scrollbar-width: thin;
        overscroll-behavior-x: contain;
    }
    .pc-preview-panel-thumbs[hidden] { display: none !important; }

    /* Önizleme modalı */
    .pc-preview-modal { position: fixed; inset: 0; z-index: 60; }
    .pc-preview-modal[hidden] { display: none; }
    .pc-preview-backdrop { position: absolute; inset: 0; background: rgba(15,32,25,.6); }
    .pc-preview-dialog {
        position: absolute; inset: 16px; max-width: 1100px; margin: 0 auto;
        left: 16px; right: 16px; background: var(--panel); border-radius: 16px;
        display: flex; flex-direction: column; overflow: hidden;
        box-shadow: 0 24px 64px rgba(0,0,0,.2);
    }
    .pc-preview-head {
        display: flex; align-items: center; justify-content: space-between;
        padding: 12px 16px; border-bottom: 1px solid var(--border);
    }
    .pc-preview-toolbar {
        display: flex; align-items: center; gap: 12px; padding: 10px 16px;
        background: var(--secondary-tint); border-bottom: 1px solid var(--border); flex-wrap: wrap;
    }
    .pc-preview-toolbar-group { display: flex; align-items: center; gap: 4px; }
    .pc-tb-btn {
        min-width: 36px; height: 36px; border: 1px solid var(--border); border-radius: 8px;
        background: var(--panel); cursor: pointer; font-size: 16px; font-weight: 700;
        display: inline-flex; align-items: center; justify-content: center;
    }
    .pc-tb-btn:hover { border-color: var(--primary); background: var(--primary-tint); }
    .pc-tb-zoom, .pc-tb-page { font-size: 13px; font-weight: 700; min-width: 48px; text-align: center; }
    .pc-preview-main { flex: 1; overflow: auto; background: #e8ece9; display: flex; align-items: flex-start; justify-content: center; padding: 20px; }
    .pc-preview-canvas-wrap { max-width: 100%; }
    /* Yukleme taslagi: .pc-skel-block'un kendi olcusu yok — burada verilmezse
       kutu bos gorunur (yukseklik 0) ve kullanici hicbir geri bildirim almaz. */
    .pc-preview-loading { width: 280px; height: 360px; position: relative; }
    .pc-preview-loading .pc-skel-block { width: 100%; height: 100%; border-radius: 6px; }
    .pc-preview-loading-note {
        position: absolute; left: 0; right: 0; bottom: 12px;
        text-align: center; font-size: 12px; font-weight: 600; color: var(--muted);
    }
    .pc-preview-error { padding: 40px; text-align: center; color: var(--danger); }
    .pc-preview-thumbs {
        display: flex; gap: 8px; padding: 12px 16px; overflow-x: auto;
        background: var(--panel); border-top: 1px solid var(--border);
        -webkit-overflow-scrolling: touch;
    }
    .pc-thumb-btn {
        flex: none; position: relative; width: 64px;
        aspect-ratio: 210 / 297;
        border: 2px solid var(--border);
        border-radius: 8px; padding: 0; background: var(--panel); cursor: pointer; overflow: hidden;
        transition: border-color .15s, opacity .15s;
    }
    .pc-thumb-btn.is-landscape { width: 88px; aspect-ratio: 297 / 210; }
    .pc-thumb-btn canvas { display: block; width: 100%; height: 100%; object-fit: contain; }
    .pc-thumb-num {
        position: absolute; top: 4px; left: 4px; font-size: 10px; font-weight: 800;
        background: rgba(15,32,25,.7); color: #fff; border-radius: 4px; padding: 1px 5px;
    }
    .pc-thumb-btn.is-active { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(2,164,93,.2); }
    .pc-thumb-btn.is-excluded { opacity: .4; }
    .pc-thumb-btn.is-excluded::after {
        content: '✕'; position: absolute; inset: 0; display: flex; align-items: center;
        justify-content: center; font-size: 24px; color: var(--danger); background: rgba(255,255,255,.6);
    }
    .pc-preview-foot { padding: 8px 16px 12px; font-size: 12px; text-align: center; border-top: 1px solid var(--border); }

    /* Mobil bottom-sheet — baskı seçenekleri */
    .pc-sheet-backdrop {
        display: none; position: fixed; inset: 0; background: rgba(15,32,25,.45); z-index: 45;
    }
    .pc-sheet-backdrop.is-open { display: block; }
    .pc-options-sheet {
        display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 46;
        max-height: 75dvh; background: var(--panel); border-radius: 20px 20px 0 0;
        box-shadow: 0 -12px 40px rgba(15,32,25,.15);
        transform: translateY(100%); transition: transform .28s ease;
        overflow: hidden; flex-direction: column;
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    .pc-options-sheet.is-open { display: flex; transform: translateY(0); }
    .pc-sheet-handle {
        width: 40px; height: 4px; background: var(--border); border-radius: 999px;
        margin: 10px auto 0;
    }
    .pc-sheet-head {
        display: flex; align-items: center; gap: 10px;
        padding: 12px 16px; border-bottom: 1px solid var(--border);
    }
    .pc-sheet-head-text { min-width: 0; flex: 1; display: flex; flex-direction: column; }
    .pc-sheet-head-file {
        font-size: 11.5px; color: var(--muted);
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    /* Pencere acikken alttaki fiyat cubugu gizli; tutar burada gorunur. */
    .pc-sheet-head-price {
        font-size: 19px; font-weight: 800; color: var(--ink);
        white-space: nowrap; flex: none;
    }
    .pc-sheet-body { flex: 1; overflow-y: auto; padding: 16px; -webkit-overflow-scrolling: touch; }
    .pc-sheet-toggle {
        display: none; width: 100%; margin-bottom: 12px;
        padding: 14px 18px; border-radius: 12px; border: 2px solid var(--primary);
        background: var(--primary-tint); color: var(--primary-700);
        font-weight: 700; font-size: 15px; cursor: pointer;
        min-height: 48px;
    }

    /* Sticky mobil CTA geliştirmesi */
    .pc-mobile-cta {
        display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 44;
        padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
        background: var(--panel); border-top: 1px solid var(--border);
        box-shadow: 0 -8px 24px rgba(15,32,25,.1);
        align-items: center; gap: 12px; flex-wrap: wrap;
    }
    .pc-mobile-cta-price { font-size: 20px; font-weight: 800; color: var(--ink); flex: none; }
    .pc-mobile-cta .btn-primary { flex: 1; min-height: 48px; font-size: 16px; }

    /* Sepete Ekle kapaliysa SEBEBI seridin ustunde, kendi satirinda durur
       (2026-09-10, konusma #51). flex: 1 0 100% -> serit sarmali, fiyat ve
       dugme asagida yan yana kalir. Uzun sebep kirpilmaz, kaydirilir:
       dokunmatikte baslik (title) gorunmedigi icin metnin kendisi
       okunabilir olmali. */
    .pc-mobile-cta-engel {
        flex: 1 0 100%; font-size: 13px; line-height: 1.35;
        color: var(--ink); background: var(--danger-tint);
        border: 1px solid var(--danger-border); border-radius: 8px;
        padding: 7px 10px; max-height: 4.2em; overflow-y: auto;
    }

    @media (max-width: 900px) {
        .pc-workspace { grid-template-columns: 1fr; }
        .pc-options-desktop { display: none; }
        .pc-sheet-toggle { display: flex; align-items: center; justify-content: center; gap: 8px; }
        .pc-mobile-cta { display: flex; }
        body.pc-sheet-open .pc-mobile-cta { display: none; }
        .pc-preview-dialog { inset: 0; border-radius: 0; left: 0; right: 0; }
        .pc-dropzone { min-height: 140px; padding: 24px 16px; }
        .pc-slider { padding: 12px 44px; }
        .pc-preview-panel-canvas { min-height: 220px; padding: 4px 0; }
        .pc-preview-a4-frame { width: min(220px, 100%); }
        .pc-preview-a4-frame.is-landscape { width: min(100%, 280px); }
        .pc-slider-nav { width: 44px; height: 44px; font-size: 26px; }
        .pc-slider-prev { left: 4px; }
        .pc-slider-next { right: 4px; }
        /* Yeni mobil CTA kullanilirken eski price-box gizlenir */
        .pc-root .price-box { display: none; }
        /* NOT: burada eskiden `.pc-root .shell { padding-bottom: 80px }`
           yaziyordu ve HIC ESLESMIYORDU — .pc-root, .shell'in ICINDE, tersi
           degil. Yani cubugun kapattigi alan icin ayrilan bosluk hic
           uygulanmamis. Dogru bosluk artik footer blogunda veriliyor
           (footer .shell disina cikti, sayfanin en alti o). */
    }
    @media (min-width: 901px) {
        .pc-options-sheet, .pc-sheet-backdrop { display: none !important; }
    }
    @media (prefers-reduced-motion: reduce) {
        .skel, .skel-text, .pc-skel-block { animation: none; }
        .pc-options-sheet { transition: none; }
        .pc-preview-a4-frame { transition: none; }
        .pc-slider-nav { transition: none; }
    }

    .footer { margin-top: 24px; font-size: 13px; color: var(--muted); }

    /* ---- Katalog arama kutusu ----
       Geri kalan `.shop-*` kurallari (sol panel duzeni: .shop-layout,
       .shop-cats, .shop-cat, .shop-grid, .shop-result-bar) 2026-08-30'da
       SILINDI: /products yatay filtreli vitrine gecti (bkz. asagidaki
       "KATALOG VITRINI" blogu) ve bu siniflari kullanan tek sablon oydu.
       Depoda hicbir Blade ya da test artik onlara atif yapmiyor -- silmeden
       once arandi. Kutu kaldi cunku arama alani ayni bilesen. */
    .shop-search {
        display: flex; align-items: center; gap: 10px; background: var(--panel);
        border: 1px solid var(--border); border-radius: 12px; padding: 8px 8px 8px 16px; margin-bottom: 16px;
    }
    /* 16px alti: iOS Safari odaklanirken sayfayi yakinlastirir (arayuz kurali 3).
       Eskiden 15px'ti. */
    .shop-search input { border: none; outline: none; flex: 1; min-width: 0; font-size: 16px; background: transparent; color: var(--text); }

    /* ---- Blog ---- */
    .blog-head { margin-bottom: 22px; }
    .blog-layout { display: grid; grid-template-columns: 1fr 300px; gap: 26px; align-items: start; }
    .blog-cat-tag { display: inline-block; font-size: 12px; font-weight: 700; color: var(--primary-700); background: var(--primary-tint); padding: 3px 10px; border-radius: 999px; margin-bottom: 8px; }
    .blog-badge { display: inline-block; font-size: 11px; font-weight: 800; color: #fff; background: var(--primary-600); padding: 3px 10px; border-radius: 999px; margin: 0 6px 8px 0; }
    .blog-meta { display: block; font-size: 12px; color: var(--muted); margin-top: 8px; }

    .blog-feature { display: block; background: var(--panel); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; margin-bottom: 22px; }
    .blog-feature:hover { border-color: var(--primary-600); text-decoration: none; box-shadow: var(--shadow); }
    .blog-feature-img { aspect-ratio: 16/9; overflow: hidden; background: var(--primary-tint); }
    .blog-feature-img img { width: 100%; height: 100%; object-fit: cover; }
    .blog-feature-body { padding: 20px; }
    .blog-feature-body h2 { font-size: 22px; margin: 6px 0 8px; color: var(--ink); }
    .blog-feature-body p { font-size: 14px; color: var(--muted); line-height: 1.7; margin: 0; }

    .blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
    .blog-card { display: block; background: var(--panel); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
    .blog-card:hover { border-color: var(--primary-600); text-decoration: none; transform: translateY(-2px); box-shadow: var(--shadow); }
    .blog-card-img { aspect-ratio: 16/9; overflow: hidden; background: var(--primary-tint); display: grid; place-items: center; }
    .blog-card-img img { width: 100%; height: 100%; object-fit: cover; }

    /* ===== Banner (Slider'dan ayrı, panelden yönetilir) ===== */
    .hm-afis-bolum { display: flex; flex-direction: column; gap: 14px; margin: 24px 0; }
    .hm-afis-baglanti, .hm-afis-gorsel { display: block; width: 100%; }
    .hm-afis-gorsel { border-radius: 16px; object-fit: cover; }
    .hm-afis-baglanti:hover { opacity: .96; }

    /* ===== Google Yorumları ===== */
    /* Google yorumlari bolumu — bolum ayirici olarak cok soluk kareli zemin.
       Saf CSS gradient: ek dosya istegi ve JS YOK, yalnizca boyama maliyeti.
       Renk paletine dokunulmuyor; cizgiler metin renginin %3.5'i kadar bir
       alfa ile ciziliyor, yani kartlarin ve yazinin kontrastini etkilemiyor.
       Maske kenarlara dogru soluklastiriyor ki desen kutu gibi durmasin;
       maske desteklenmezse duz kareli zemin kaliyor (kabul edilebilir). */
    .gr-section {
        text-align: center;
        position: relative;
        padding: 30px 16px;
        border-radius: 20px;
        isolation: isolate;
    }
    .gr-section::before {
        content: '';
        position: absolute; inset: 0; z-index: -1;
        border-radius: inherit;
        background-image:
            linear-gradient(rgba(20, 35, 28, .035) 1px, transparent 1px),
            linear-gradient(90deg, rgba(20, 35, 28, .035) 1px, transparent 1px);
        background-size: 46px 46px;
        -webkit-mask-image: radial-gradient(ellipse 78% 72% at 50% 50%, #000 55%, transparent 100%);
        mask-image: radial-gradient(ellipse 78% 72% at 50% 50%, #000 55%, transparent 100%);
        pointer-events: none;
    }
    @media (max-width: 600px) {
        .gr-section { padding: 22px 10px; }
        .gr-section::before { background-size: 36px 36px; }
    }
    .gr-head { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 22px; text-align: left; }
    .gr-title { font-weight: 800; font-size: 20px; color: var(--ink); line-height: 1.2; }
    .gr-rating { display: flex; align-items: center; gap: 8px; margin-top: 2px; font-size: 14px; color: var(--muted); }
    .gr-rating strong { font-size: 18px; color: var(--ink); }
    .gr-stars, .gr-card-stars { color: #fbbc04; letter-spacing: 1px; }
    .gr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; text-align: left; }

    /* GOOGLE YORUMLARI: UC SATIRLIK GRID YERINE TEK SERIT (2026-08-22).
     *
     * ISLETME: "burayi tek satira indirelim, kayan sekilde sola saga
     * gitsin." Iki satir x uc sutun, ana sayfanin ortasinda buyuk bir blok
     * kapliyordu; 450 degerlendirmenin bollugunu da anlatmiyordu -- alti
     * yorum durup duruyordu.
     *
     * Serit sitede zaten kullanilan desenin aynisi (.hm-marquee, .mq):
     * ustune gelince duruyor, kenarlari soluyor, hareket azaltma tercihine
     * saygi duyuyor. Yeni bir sistem yazilmadi.
     *
     * SURE: on kart x iki kopya, 60 saniye. Hiz kasitli olarak dusuk --
     * amac dikkat cekmek degil, okunabilmek. Hizli akan yaziyi kimse
     * okumuyor, yalnizca rahatsiz ediyor.
     *
     * NOT: `.gr-grid` DURUYOR; ayni kart tasarimini kullanan REFERANSLAR
     * bolumu hâlâ grid ve oyle kalmali (panelden yonetilen az sayida
     * secilmis referans, akmasi gerekmiyor). */
    .gr-serit {
        overflow: hidden;
        -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
        mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
    }

    .gr-serit-ray {
        display: inline-flex; gap: 16px; align-items: stretch;
        will-change: transform; animation: gr-serit-kay 60s linear infinite;
    }

    .gr-serit:hover .gr-serit-ray,
    .gr-serit:focus-within .gr-serit-ray { animation-play-state: paused; }

    /* Kart gridde esnekti; seritte sabit genislik gerekiyor. */
    .gr-serit .gr-card { width: 300px; flex: none; white-space: normal; }

    @keyframes gr-serit-kay { from { transform: translateX(0); } to { transform: translateX(-50%); } }

    /* HAREKET AZALTMA: animasyon durunca serit erisilemez kalmasin --
     * kullanici elle kaydirabilsin diye yatay kaydirma aciliyor ve
     * kenarlardaki solma kaldiriliyor (solmus kenar, kaydirilacak icerigin
     * orada oldugunu gizler). */
    @media (prefers-reduced-motion: reduce) {
        .gr-serit-ray { animation: none; }
        .gr-serit { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
    }
    .gr-card {
        position: relative; background: var(--panel); border: 1px solid var(--line);
        border-radius: 14px; padding: 18px 18px 16px; box-shadow: 0 1px 2px rgba(20,35,28,.04);
        transition: box-shadow .15s, transform .15s;
    }
    .gr-card:hover { box-shadow: var(--shadow, 0 8px 24px rgba(20,35,28,.08)); transform: translateY(-2px); }
    .gr-card-g { position: absolute; top: 16px; right: 16px; opacity: .9; }
    .gr-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
    .gr-card-head .hm-avatar {
        width: 40px; height: 40px; border-radius: 50%; flex: none;
        display: grid; place-items: center; font-weight: 700; color: #fff;
        background: linear-gradient(135deg, var(--primary, #2e9e6b), var(--primary-700, #1f7d52));
    }
    .gr-name { font-weight: 700; font-size: 14px; color: var(--ink); }
    .gr-date { font-size: 12px; color: var(--muted); }
    .gr-card-stars { font-size: 15px; margin-bottom: 6px; }
    .gr-text { font-size: 14px; line-height: 1.6; color: var(--ink-soft); margin: 0; }
    .gr-cta { margin-top: 24px; }
    .gr-btn {
        display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px;
        background: var(--panel); border: 1px solid var(--line); border-radius: 999px;
        font-weight: 700; font-size: 14px; color: var(--ink); text-decoration: none;
        box-shadow: 0 1px 2px rgba(20,35,28,.05); transition: box-shadow .15s, border-color .15s;
    }
    .gr-btn:hover { box-shadow: var(--shadow, 0 8px 20px rgba(20,35,28,.1)); border-color: var(--primary, #2e9e6b); text-decoration: none; }
    @media (max-width: 640px) {
        .gr-grid { grid-template-columns: 1fr; }
        .gr-head { flex-direction: row; }
    }

    [x-cloak] { display: none !important; }

    /* ===== PDF Araçları (pdf.io hissi, animasyonlu ikonlar) ===== */
    .tools-hero { text-align: center; margin: 6px 0 26px; }
    .tools-hero h1 { font-size: clamp(28px, 4vw, 44px); font-weight: 800; margin: 0 0 8px; }
    .tools-hero p { color: var(--muted); font-size: 16px; margin: 0; }
    .tools-group-title { font-weight: 800; font-size: 18px; margin: 26px 0 12px; color: var(--ink); }
    .tools-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; }
    .tool-card {
        display: flex; flex-direction: column; gap: 8px; padding: 20px 18px; border-radius: 16px;
        background: var(--panel); border: 1px solid var(--line); text-decoration: none; color: inherit;
        transition: box-shadow .18s, transform .18s, border-color .18s;
    }
    .tool-card:hover { box-shadow: var(--shadow, 0 12px 30px rgba(20,35,28,.1)); transform: translateY(-3px); border-color: var(--c, var(--primary)); text-decoration: none; }
    .tool-card h3 { font-size: 15.5px; font-weight: 700; margin: 4px 0 0; }
    .tool-card p { font-size: 12.5px; color: var(--muted); margin: 0; line-height: 1.5; }
    .ti { width: 56px; height: 56px; display: grid; place-items: center; }
    .ti svg { width: 52px; height: 52px; overflow: visible; }
    /* Sayfa/kutu parçaları */
    .ti-pg { fill: var(--panel); stroke: var(--c); stroke-width: 2.5; rx: 3; }
    .ti-fill { fill: var(--c); }
    .ti-soft { fill: color-mix(in srgb, var(--c) 18%, var(--panel)); stroke: var(--c); stroke-width: 2.5; }
    /* Sürekli hafif + hover’da canlanan animasyonlar */
    @keyframes ti-float { 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-3px) } }
    @keyframes ti-spin { to { transform: rotate(360deg) } }
    @keyframes ti-merge { 0%,100%{ transform: translateX(0) } 50%{ transform: translateX(6px) } }
    @keyframes ti-mergeL { 0%,100%{ transform: translateX(0) } 50%{ transform: translateX(-6px) } }
    @keyframes ti-squeeze { 0%,100%{ transform: scaleX(1) } 50%{ transform: scaleX(.7) } }
    @keyframes ti-liftlid { 0%,100%{ transform: translateY(0) rotate(0) } 50%{ transform: translate(-2px,-5px) rotate(-16deg) } }
    @keyframes ti-slideout { 0%,100%{ transform: translateX(0); opacity:1 } 50%{ transform: translateX(10px); opacity:.4 } }
    @keyframes ti-swap { 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(7px) } }
    @keyframes ti-swap2 { 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-7px) } }
    .ti-anim-float { animation: ti-float 2.6s ease-in-out infinite; transform-origin: center; }
    .ti-anim-spin  { animation: ti-spin 6s linear infinite; transform-origin: center; transform-box: fill-box; }
    .ti-anim-mergeR{ animation: ti-merge 2.4s ease-in-out infinite; transform-box: fill-box; }
    .ti-anim-mergeL{ animation: ti-mergeL 2.4s ease-in-out infinite; transform-box: fill-box; }
    .ti-anim-squeeze{ animation: ti-squeeze 2.2s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
    .ti-anim-lid   { animation: ti-liftlid 2.6s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
    .ti-anim-out   { animation: ti-slideout 2.4s ease-in-out infinite; transform-box: fill-box; }
    .ti-anim-swap  { animation: ti-swap 2.4s ease-in-out infinite; transform-box: fill-box; }
    .ti-anim-swap2 { animation: ti-swap2 2.4s ease-in-out infinite; transform-box: fill-box; }
    .tool-card:hover .ti svg { animation-duration: 1.1s; }
    @media (prefers-reduced-motion: reduce) { .ti svg *[class*="ti-anim"] { animation: none !important; } }

    /* Araç sayfası (tek araç) */
    .tool-page { max-width: 1060px; margin: 0 auto; }

    /* Calisma alani: solda dosya/sayfa alani, sagda yapiskan ayar paneli
       (Smallpdf/PDF24 deseni). 900px altinda tek sutuna duser ve panel
       dosya alaninin ALTINA gecer — mobilde once dosya secilir. */
    .tool-work { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 22px; align-items: start; }
    .tool-work-main { min-width: 0; }
    .tool-work-side { position: sticky; top: calc(var(--nav-h) + 18px); }
    @media (max-width: 900px) {
        .tool-work { grid-template-columns: 1fr; }
        .tool-work-side { position: static; }
    }

    .tool-side-card { background: var(--panel); border: 1px solid var(--line); border-radius: 16px;
        padding: 16px; box-shadow: 0 6px 22px rgba(20,35,28,.07); }
    .tool-side-head { display: flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 800;
        margin-bottom: 12px; }
    .tool-side-step { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
        background: color-mix(in srgb, var(--c, var(--primary)) 16%, var(--panel)); color: var(--c, var(--primary-700));
        font-size: 12.5px; font-weight: 800; flex: none; }
    .tool-side-empty { font-size: 13px; color: var(--muted); line-height: 1.5;
        padding: 10px 12px; border: 1px dashed var(--line); border-radius: 10px; }
    .tool-side-sum { display: grid; gap: 6px; margin-bottom: 14px; }
    .tool-side-sum > div { display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
        font-size: 13px; padding-bottom: 6px; border-bottom: 1px dashed var(--line); }
    .tool-side-sum > div:last-child { border-bottom: none; padding-bottom: 0; }
    .tool-side-sum span { color: var(--muted); }
    .tool-side-sum strong { font-weight: 800; color: var(--primary-700, #1f7d52); }
    /* Secenek panelindeki aciklama satiri (2026-09-05, OCR araciyla geldi).
       .tool-side-note ORTALANMIS ve dugmenin ALTI icin; bu ise secim kutusunun
       hemen yaninda, sola dayali okunmali. */
    /* ---- Sepet: ucretsiz kargo ilerlemesi (2026-09-05) ----
       Bilgi CUMLEDE duruyor; cubuk yalnizca destek. Renk/uzunluk tek basina
       anlam tasimaz (CLAUDE.md Arayuz - renk korlugu). */
    .kargo-ilerleme { margin-bottom: 12px; }
    .kargo-ilerleme-metin { font-size: 13.5px; line-height: 1.5; margin-bottom: 6px; }
    .kargo-ilerleme-yol {
        height: 8px; border-radius: 999px; overflow: hidden;
        background: color-mix(in srgb, var(--border) 55%, transparent);
    }
    .kargo-ilerleme-dolu {
        height: 100%; border-radius: 999px; background: var(--primary);
        transition: width .3s ease;
    }
    .kargo-ilerleme.is-kazanildi .kargo-ilerleme-dolu { background: var(--primary-700); }

    /* ---- Sepet: kargoya veris tarihi ---- */
    .kargo-cikis {
        margin-bottom: 12px; padding: 10px 12px;
        border: 1px solid var(--border); border-radius: var(--radius-sm);
        background: var(--panel);
        font-size: 13.5px; line-height: 1.5;
    }
    .kargo-cikis-uyari {
        margin-top: 4px; font-size: 12.5px; color: var(--muted);
    }

    .tool-opt-not { margin: -2px 0 2px; font-size: 12.5px; color: var(--muted); line-height: 1.5; }

    .tool-side-note { margin-top: 9px; font-size: 12.5px; color: var(--muted); text-align: center; line-height: 1.45; }

    /* Sonuc ekrani devam yollari */
    .tool-next { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 20px; }
    .tool-next .tool-chip-btn { text-decoration: none; }

    /* BU BELGEYLE DEVAM ET (2026-08-28) — sonuc ekranindaki arac listesi.
       Dosya tarayicida devredilir, sunucuya ikinci kez yuklenmez. Dugmeler
       liste gorunumunde: kullanici arac ADINI okuyup secer, ikon avina
       cikmaz. Dokunma hedefi 44px (arayuz kurali 2). */
    .tool-chain { max-width: 640px; margin: 26px auto 0; text-align: left; }
    .tool-chain-baslik {
        font-size: 12.5px; font-weight: 800; letter-spacing: .4px;
        text-transform: uppercase; color: var(--muted); margin-bottom: 10px; text-align: center;
    }
    .tool-chain-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
    .tool-chain-btn {
        display: flex; align-items: center; gap: 10px; width: 100%;
        min-height: 44px; padding: 10px 12px;
        border: 1px solid var(--border); border-radius: 12px;
        background: var(--panel); color: var(--text);
        font-size: 14px; font-weight: 600; text-align: left; cursor: pointer;
        transition: border-color .15s, transform .15s;
    }
    .tool-chain-btn:hover { border-color: var(--primary); transform: translateY(-1px); }
    .tool-chain-btn:disabled { opacity: .55; cursor: default; transform: none; }
    /* AYNI ARAÇLA DEVAM — listenin ilk ve en çok istenen seçeneği (2026-09-05).
       İşletme "birkaç kez tekrarlamak isteyen çıkar" dedi; komşu araçlardan bir
       tık öne çıkıyor ama ayrı bir düğme gibi durmuyor — aynı ızgaranın parçası. */
    .tool-chain-btn--ayni { border-color: var(--primary); background: var(--primary-tint, var(--panel)); }
    .tool-chain-nokta { width: 10px; height: 10px; border-radius: 50%; flex: none; }
    .tool-chain-ok { margin-left: auto; color: var(--muted); font-size: 18px; line-height: 1; }
    .tool-chain-not { margin-top: 8px; font-size: 13px; color: var(--muted); text-align: center; }

    /* Arac sayfasi anlatim blogu (ToolSeoContent). Aracin ALTINDA durur —
       gelen kullanicinin isi once araci kullanmak; metin arama motoru,
       yapay zeka alintisi ve ilk kez kullananlar icin. */
    .tool-seo {
        max-width: 780px; margin: 56px auto 0; padding: 32px 26px 26px;
        border-top: 1px solid var(--line);
        color: var(--ink); line-height: 1.7;
    }
    .tool-seo h2 { font-size: 22px; margin: 0 0 14px; }
    .tool-seo h3 { font-size: 17px; margin: 30px 0 12px; }
    .tool-seo-lead { font-size: 17px; margin: 0; }
    .tool-seo-adimlar { margin: 0; padding-left: 22px; }
    .tool-seo-adimlar li { margin-bottom: 10px; }
    .tool-seo-sss dt { font-weight: 700; margin-top: 16px; }
    .tool-seo-sss dd { margin: 6px 0 0; color: var(--muted); }
    .tool-seo-cta {
        margin: 30px 0 0; padding: 16px 18px; border-radius: 12px;
        background: var(--primary-tint, #e6f6ee);
    }
    .tool-seo-cta a { color: var(--primary, #02a45d); font-weight: 700; }
    /* Ilgili araclar: ayni gruptaki diger araclara dogrudan baglanti. */
    .tool-seo-ilgili { margin-top: 14px; font-size: 13.5px; line-height: 1.9; }
    .tool-seo-ilgili a { color: var(--primary, #02a45d); font-weight: 600; }
    @media (max-width: 600px) {
        .tool-seo { margin-top: 40px; padding: 26px 16px 20px; }
        .tool-seo h2 { font-size: 20px; }
    }

    /* Ortak siralama surukleme (public/js/bikopi-dnd.js).
       `touch-action: manipulation` sadece cift-dokunma yakinlastirmasini kapatir;
       sayfa kaydirma korunur — surukleme basladiginda JS zaten preventDefault ediyor. */
    .tool-prev, .tool-page-tile, .wiz-page-tile { touch-action: manipulation; }
    .bt-dnd-active { opacity: .55; transform: scale(.96); box-shadow: 0 10px 26px rgba(20,35,28,.26) !important; }
    .bt-dnd-surukleniyor { cursor: grabbing; user-select: none; }
    .bt-dnd-surukleniyor * { cursor: grabbing !important; }
    @media (prefers-reduced-motion: reduce) { .bt-dnd-active { transform: none; } }

    /* Klavye kisayolu yardimi (public/js/bikopi-hotkeys.js — `?` ile acilir) */
    .bt-hk-katman { position: fixed; inset: 0; z-index: 10000; background: rgba(16,26,21,.55);
        display: grid; place-items: center; padding: 20px; }
    .bt-hk-kutu { background: var(--panel); border-radius: 16px; padding: 20px 22px; min-width: min(360px, 92vw);
        max-width: 460px; box-shadow: 0 24px 60px rgba(20,35,28,.32); }
    .bt-hk-baslik { font-size: 16px; font-weight: 800; margin-bottom: 14px; }
    .bt-hk-satir { display: flex; align-items: center; gap: 12px; padding: 7px 0;
        border-bottom: 1px dashed var(--line); font-size: 13.5px; }
    .bt-hk-satir:last-of-type { border-bottom: none; }
    .bt-hk-satir kbd { flex: none; min-width: 54px; text-align: center; font-family: inherit; font-size: 12px;
        font-weight: 800; padding: 5px 9px; border-radius: 7px; border: 1px solid var(--line);
        background: var(--primary-tint, #eef7f1); color: var(--primary-700, #1f7d52); }
    .bt-hk-alt { margin-top: 12px; font-size: 12px; color: var(--muted); text-align: right; }

    /* Ortak toast (public/js/bikopi-toast.js) */
    .bt-toast-wrap { position: fixed; right: 16px; bottom: 16px; z-index: 9999; display: flex;
        flex-direction: column; gap: 8px; align-items: flex-end; pointer-events: none; max-width: min(360px, calc(100vw - 32px)); }
    .bt-toast { pointer-events: auto; cursor: pointer; display: flex; align-items: flex-start; gap: 10px;
        background: #16241d; color: #fff; padding: 11px 14px; border-radius: 11px; font-size: 13.5px;
        font-weight: 600; line-height: 1.4; box-shadow: 0 10px 30px rgba(20,35,28,.28);
        opacity: 0; transform: translateY(8px); transition: opacity .2s, transform .2s; word-break: break-word; }
    .bt-toast.is-in { opacity: 1; transform: none; }
    .bt-toast-ic { width: 19px; height: 19px; border-radius: 50%; display: grid; place-items: center;
        font-size: 12px; font-weight: 800; flex: none; margin-top: 1px; background: rgba(255,255,255,.18); }
    .bt-toast-ok .bt-toast-ic { background: #2e9e6b; }
    .bt-toast-err { background: #7a2018; }
    .bt-toast-err .bt-toast-ic { background: var(--danger-600); }
    @media (prefers-reduced-motion: reduce) { .bt-toast { transition: none; } }
    .tool-drop { border: 2px dashed var(--line); border-radius: 16px; padding: 34px 20px; text-align: center; background: var(--panel); }
    .tool-drop.drag { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 6%, var(--panel)); }
    .tool-src { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 14px; }
    .tool-src button, .tool-src label {
        display: inline-flex; align-items: center; gap: 7px; padding: 9px 15px; border-radius: 10px; cursor: pointer;
        border: 1px solid var(--line); background: var(--panel); font-size: 13.5px; font-weight: 600; color: var(--ink);
    }
    .tool-src button:hover, .tool-src label:hover { border-color: var(--primary); }
    /* Yüklenen dosya önizleme kartları (123apps tarzı) */
    .tool-previews { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; margin-top: 20px; }
    .tool-prev { position: relative; border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
        background: var(--panel); box-shadow: 0 2px 10px rgba(20,35,28,.06); }
    /* A4 ORANI (2026-08-28, işletme: "orantısız bir dik kutu… A4'e oranlı
       olsun"). Önceden 3/4 (0,75) idi; A4 210/297 = 0,707. Fark küçük ama kart
       gözle "uzun" duruyordu, üstelik sayfa karoları (.tool-page-tile) zaten
       A4 oranında — iki farklı oran yan yana tutarsız görünüyordu. */
    .tool-prev-thumb { aspect-ratio: 210 / 297; background: var(--primary-tint, #eef7f1); display: grid; place-items: center; overflow: hidden; }
    .tool-prev-thumb img, .tool-prev-thumb canvas { width: 100%; height: 100%; object-fit: contain; display: block; }
    .tool-prev-thumb .ph { font-size: 34px; opacity: .5; }
    .tool-prev-body { padding: 9px 11px; }
    .tool-prev-name { font-size: 12.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .tool-prev-meta { font-size: 11.5px; color: var(--primary-700, #1f7d52); margin-top: 2px; font-weight: 600; }
    /* Kaldir dugmesi: eskiden 26px beyaz bir daireydi ve acik yesil kart
       zemininde fark edilmiyordu (kullanici "kaldir secenegi yok" diye
       bildirdi). Simdi kirmizi cerceveli, uzerine gelince dolan bir dugme. */
    .tool-prev .rm { position: absolute; top: 7px; right: 7px; width: 30px; height: 30px; border-radius: 50%;
        background: var(--panel); border: 1.5px solid var(--danger-border); color: var(--danger-600); cursor: pointer; font-size: 19px;
        line-height: 1; display: grid; place-items: center; box-shadow: 0 2px 8px rgba(20,35,28,.18);
        z-index: 2; transition: background .15s, color .15s, transform .15s; }
    .tool-prev .rm:hover { background: var(--danger-600); color: #fff; border-color: var(--danger-600); transform: scale(1.08); }
    .tool-prev .rm:focus-visible { outline: 2px solid var(--danger-600); outline-offset: 2px; }
    /* Kart icindeki acik metin butonu — ikon tek basina yeterince okunur degildi. */
    .tool-prev-rm { margin-top: 8px; width: 100%; border: 1px solid var(--line); background: var(--panel);
        color: var(--danger-600); border-radius: 8px; padding: 6px 8px; font-size: 12px; font-weight: 700;
        cursor: pointer; font-family: inherit; transition: background .15s, color .15s, border-color .15s; }
    .tool-prev-rm:hover { background: var(--danger-600); color: #fff; border-color: var(--danger-600); }

    /* Secili dosya cubugu: ozet + toplu eylemler (Smallpdf/PDF24 deseni) */
    .tool-filebar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px;
        margin-top: 18px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px;
        background: var(--primary-tint, #eef7f1); }
    .tool-filebar-sum { font-size: 13.5px; color: var(--primary-700, #1f7d52); font-weight: 600; }
    .tool-filebar-sum strong { font-weight: 800; }
    .tool-filebar-act { display: flex; gap: 8px; flex-wrap: wrap; }
    .tool-chip-btn.is-danger { color: var(--danger-600); border-color: var(--danger-border); }
    .tool-chip-btn.is-danger:hover { background: var(--danger-600); color: #fff; border-color: var(--danger-600); }

    .tool-opts { margin-top: 16px; display: grid; gap: 12px; }
    .tool-opts label { font-size: 13px; font-weight: 600; display: block; margin-bottom: 4px; }
    .tool-opts input, .tool-opts select { width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font-size: 14px; }
    .tool-go { margin-top: 18px; width: 100%; border: none; border-radius: 12px; background: var(--primary, #2e9e6b); color: #fff; padding: 14px; font-size: 15px; font-weight: 700; cursor: pointer; }
    .tool-go:disabled { opacity: .5; cursor: not-allowed; }
    .tool-result { margin-top: 18px; text-align: center; }
    .tool-msg { margin-top: 12px; font-size: 14px; }
    .tool-msg.err { color: var(--danger-600); }

    /* Sayfa ızgarası (Sayfa Sil/Seç/Döndür/Sırala/Böl) — .tool-prev ile aynı kart dili */
    .tool-page-grid-card {
        background: var(--panel); border: 1px solid var(--line); border-radius: 16px;
        padding: 18px; box-shadow: 0 2px 10px rgba(20,35,28,.06);
    }
    .tool-page-grid-hint { font-size: 13px; color: var(--muted); font-weight: 600; }
    .tool-page-tile {
        border: 2px solid var(--line) !important; border-radius: 12px !important;
        background: var(--panel); box-shadow: 0 2px 8px rgba(20,35,28,.05);
        transition: box-shadow .15s, transform .15s, border-color .15s;
        /* Kaynak PDF'in gercek sayfa oranindan bagimsiz olarak her zaman A4 (210x297mm)
           oraninda gorunsun - farkli boyutlu belgelerde kart yukseklikleri once
           gorselin dogal oranina birakiliyordu, bu da "ince uzun" cikan kartlara
           yol aciyordu. */
        position: relative; overflow: hidden; aspect-ratio: 210 / 297;
    }
    .tool-page-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
    /* SONUC ONIZLEMESI KIRPILMAZ (2026-09-05).
       Yukaridaki karo, SAYFA SECIM IZGARASI icin tasarlandi: orada butun
       karolarin ayni sekilde durmasi isteniyor, o yuzden A4 orani zorlanip
       `cover` ile dolduruluyor. Ama ayni sinif SONUC onizlemesinde de
       kullaniliyordu ve orada belgenin bir kismi gorunmuyordu. Olculen kirpma:
         A4            %0,1   (tesadufen ayni oran)
         Letter        %8,5   yanlardan
         364x574       %10,3  ust-alt   (gercek musteri dosyasi)
         A4 yatay      %50    yanlardan -- belgenin YARISI
       Sepet kucuk resminde ayni hata 2026-08-15'te duzeltilmisti: bu bir
       dekoratif gorsel degil BELGE onizlemesi; kirpilmis onizleme "sayfam
       boyle mi basilacak" sorusunu doguruyor. */
    .tool-page-tile.is-sonuc { aspect-ratio: auto; background: var(--panel); }
    .tool-page-tile.is-sonuc img { height: auto; object-fit: contain; }

    .tool-page-tile:hover { box-shadow: 0 8px 20px rgba(20,35,28,.12); transform: translateY(-2px); border-color: var(--c, var(--primary)) !important; }
    .tool-page-tile .tp-badge {
        position: absolute; top: 6px; left: 6px; z-index: 2;
        background: var(--c, var(--primary)); color: #fff; font-size: 11px; font-weight: 700;
        padding: 2px 8px; border-radius: 8px; box-shadow: 0 2px 6px rgba(0,0,0,.18);
    }
    .tool-page-tile.is-inrange, .tool-page-tile.is-marked { border-color: var(--c, var(--primary)) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--c, var(--primary)) 30%, transparent) !important; }
    .tool-page-tile.is-selected { border-color: var(--danger, #dc3545) !important; }
    .tool-page-tile[draggable="true"] { cursor: grab; }
    .tool-page-tile[draggable="true"]:active { cursor: grabbing; }
    .tool-chip-btn {
        display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 10px; cursor: pointer;
        border: 1px solid var(--c, var(--line)); background: color-mix(in srgb, var(--c, var(--primary)) 8%, var(--panel));
        font-size: 13px; font-weight: 700; color: var(--c, var(--primary-700));
        transition: background .15s;
    }
    .tool-chip-btn:hover { background: color-mix(in srgb, var(--c, var(--primary)) 16%, var(--panel)); }
    /* Izgara seridindeki "calistir" cipi: asil eylem oldugu icin dolu marka
       rengi — diger cipler yardimci, bu sonuc ureten dugme (2026-08-19). */
    .tool-chip-go { background: var(--primary); color: #fff; border-color: var(--primary-600); font-weight: 700; }
    .tool-chip-go:hover:not(:disabled) { background: var(--primary-600); }
    .tool-chip-go:disabled { opacity: .5; cursor: not-allowed; }

    /* Sonuc karti: ozet satiri + baski akisina gecis (2026-08-19).
       "Sepete ekle" kutusu indirme dugmesinden AYRISIR: indirme bu isin
       bitisi, sepet ise siteye devam yolu — ikisi ayni gorunurse musteri
       hangisinin ne yaptigini anlamiyor. */
    .tool-result-ozet { font-size: 14px; color: var(--muted); margin-bottom: 14px; }

    /* Dosya kartinda siralama oklari — surukleme bilmeyen/dokunmatik
       kullanici icin (2026-08-19). 32px: WCAG dokunma hedefine yakin,
       kartin icinde de sismiyor. */
    .tool-prev-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
    .tool-prev-sira { display: inline-flex; gap: 4px; }
    .tool-prev-sira button {
        width: 30px; height: 30px; padding: 0; line-height: 1;
        border: 1px solid var(--line); background: var(--panel); color: var(--ink);
        border-radius: 8px; cursor: pointer; font-size: 14px;
    }
    .tool-prev-sira button:hover:not(:disabled) { border-color: var(--primary); color: var(--primary-700); }
    .tool-prev-sira button:disabled { opacity: .35; cursor: not-allowed; }
    .tool-cart {
        margin: 22px auto 0; max-width: 520px; padding: 16px 18px;
        border: 1px dashed var(--primary-border); border-radius: var(--radius);
        background: var(--primary-50);
    }
    .tool-cart-soru { font-weight: 700; font-size: 15px; margin-bottom: 12px; color: var(--ink); }
    .tool-cart-btns { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
    .tool-cart-btn {
        flex: 1 1 200px; padding: 12px 16px; border-radius: var(--radius-sm);
        border: 1px solid var(--border); background: var(--panel); color: var(--ink);
        font-size: 14px; font-weight: 700; cursor: pointer;
        transition: transform .12s ease, box-shadow .12s ease;
    }
    .tool-cart-btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: var(--shadow); }
    .tool-cart-btn:disabled { opacity: .55; cursor: not-allowed; }
    .tool-cart-btn.is-primary { background: var(--primary); border-color: var(--primary-600); color: #fff; }
    .tool-cart-not { margin-top: 10px; font-size: 12.5px; color: var(--muted); }
    .tool-chip-btn:disabled { opacity: .45; cursor: not-allowed; }
    .tool-range-chip {
        display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 20px;
        background: color-mix(in srgb, var(--c, var(--primary)) 12%, var(--panel)); border: 1px solid var(--c, var(--primary));
        font-size: 13px; font-weight: 700; color: var(--c, var(--primary-700));
    }
    .tool-range-chip button { border: none; background: none; cursor: pointer; color: inherit; opacity: .6; font-size: 15px; line-height: 1; }
    .tool-range-chip button:hover { opacity: 1; }
    .tool-progress-track { height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; }
    .tool-progress-bar { height: 100%; background: linear-gradient(90deg, var(--c, var(--primary)), var(--primary, #2e9e6b)); border-radius: 4px; }
    .tool-progress-indeterminate { width: 40% !important; animation: tool-progress-slide 1.1s ease-in-out infinite; }
    @keyframes tool-progress-slide { 0% { margin-left: -40%; } 100% { margin-left: 100%; } }
    @keyframes tool-spin { to { transform: rotate(360deg); } }

    /* Header "Araçlar" dropdown */
    .nav-dd { position: relative; }
    .nav-dd-menu {
        position: absolute; top: 130%; left: 0; z-index: 40; min-width: 460px;
        background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 14px;
        box-shadow: var(--shadow, 0 16px 40px rgba(20,35,28,.14)); display: grid; grid-template-columns: 1fr 1fr; gap: 4px 18px;
    }
    .nav-dd-col strong { display: block; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em;
        color: var(--primary-700, #1f7d52); margin: 10px 6px 4px; padding-bottom: 5px; border-bottom: 1px solid var(--line); }
    /* Yazi rengi TOKEN olmali: zemin var(--panel) ile temaya gore donuyordu
       ama renk `#3b4a43` sabitti -- koyu temada koyu zemin uzerine koyu yazi,
       yani menu okunmuyordu (2026-08-23 taramasi). */
    .nav-dd-menu a { display: block; padding: 7px 8px; border-radius: 8px; font-size: 13.5px; font-weight: 500; color: var(--text); text-decoration: none; }
    .nav-dd-menu a:hover { background: var(--primary-tint, #eef7f1); text-decoration: none; }
    @media (max-width: 820px) { .nav-dd-menu { position: static; min-width: 0; grid-template-columns: 1fr; box-shadow: none; border: none; padding: 4px 0 4px 12px; } }

    /* ===== Kayan yazı (marquee) — açık, modern, bazı öğeler renkli ===== */
    .mq { overflow: hidden; padding: 15px 0; border-radius: 16px; margin: 34px 0;
        background: color-mix(in srgb, var(--primary) 7%, var(--panel));
        border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--panel)); color: #24352c;
        -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
        mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
    /* Kayan seridin metni SABIT KOYU yazilmisti (#24352c) ve koyu temada
     * override edilmiyordu: olculen kontrast 1.37: "Hızlı teslim" gibi
     * ogeler fiilen gorunmuyordu (2026-08-22). */
    [data-theme="dark"] .mq { color: var(--text); }

    .mq-track { display: inline-flex; white-space: nowrap; animation: mq-scroll 32s linear infinite; will-change: transform; }
    .mq:hover .mq-track { animation-play-state: paused; }
    .mq-item { display: inline-flex; align-items: center; gap: 9px; padding: 0 28px; font-weight: 700; font-size: 15px; }
    .mq-item::before { content: '✦'; color: var(--secondary, #ff9f43); font-size: 12px; }
    .mq-item:nth-child(3n+2) { color: var(--primary-700, #1f7d52); }
    .mq-item:nth-child(3n+2)::before { color: var(--primary, #2e9e6b); }
    .mq-item:nth-child(3n)   { color: var(--secondary, #e8890c); }
    /* `--secondary` koyu temada BILEREK degismiyor (cift rollu token: hem
     * footer zemini hem metin). Burada metin rolunde kullanildigi icin koyu
     * zeminde okunmuyordu -- olculen kontrast 1.01. */
    [data-theme="dark"] .mq-item:nth-child(3n) { color: var(--text); }
    .mq-item:nth-child(3n)::before { color: var(--secondary, #ff9f43); }
    @keyframes mq-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
    @media (prefers-reduced-motion: reduce) { .mq-track { animation: none; } }

    /* ===== Hero Slider (bgsoft tarzı: metin + oval köşeli resim, split) ===== */
    .hs { position: relative; margin-bottom: 28px; }
    /* Yukseklik REZERVE: --fade modunda slide'lar absolute, aktif slide'i
       Alpine 'is-active' ile relative yapiyor. Alpine yuklenene kadar hero
       cokuk kalip sonra aciliyor, altindaki .shell kayiyordu (CLS, 2026-08-25
       PageSpeed'de masaustu 0.36). Viewport'a min-height verince hero alani
       bastan yer kaplar; Alpine gecikse/kirilsa da collapse olmaz. Mobilde
       asagida sifirlaniyor (mobil CLS zaten 0.01, icerik-yukseklik korunur). */
    .hs-viewport { position: relative; overflow: hidden; border-radius: 22px; min-height: var(--hs-h-d, 460px); }
    .hs-track { display: flex; transition: transform var(--hs-speed, 600ms) ease; align-items: stretch; }
    .hs--slide .hs-slide { flex: 0 0 100%; }
    .hs-slide { position: relative; width: 100%; min-height: var(--hs-h-d, 460px);
        background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 12%, var(--panel)), color-mix(in srgb, var(--secondary, #ff9f43) 10%, var(--panel))); }
    .hs--fade .hs-slide { position: absolute; inset: 0; opacity: 0; transition: opacity var(--hs-speed, 600ms) ease; pointer-events: none; }
    .hs--fade .hs-slide.is-active { opacity: 1; pointer-events: auto; position: relative; }
    /* Split iç düzen: metin bir yanda, resim öbür yanda */
    .hs-inner { display: flex; align-items: center; gap: 36px; min-height: var(--hs-h-d, 460px);
        max-width: 1180px; margin: 0 auto; padding: 40px 56px; box-sizing: border-box; }
    .hs-text { flex: 1 1 52%; display: flex; flex-direction: column; gap: 15px; color: #12231a; }
    /* MASAUSTU CLS (2026-08-28). Kok sebep: <img>'de width/height YOKTU, bu
       yuzden tarayici gorsel inene kadar ona 0 yukseklik veriyordu; inince
       ~208px'e sicriyor ve altindaki .shell kayiyordu (PageSpeed lab 0.242,
       gercek-kullanici masaustu 0.36 = KOTU).

       COZUM SABIT YUKSEKLIK DEGIL, DOGRU ORAN. Once `.hs-media`ya sabit
       yukseklik (388px) denendi: CLS 0'a indi ama gorselin dogal orani
       300x146 oldugu icin kutuda 180px BOS ALAN kaldi ve golge/yuvarlak kose
       bos kutuyu sardi -- gorsel ortada asili kaliyordu. Onun yerine
       HeroSlide::gorselOlculeri() olculeri okuyup <img>'e width/height
       yaziyor; tarayici orani bastan bilip TAM DOGRU yeri ayiriyor.
       (bkz. partials/hero-slide-inner.blade.php)

       object-fit: contain (cover DEGIL): isletme 2026-08-25'te "slider resmi
       tam cikmiyor" dedi, sebep masaustunden miras `cover`di; mobil o gun
       contain'e cevrildi ama masaustu unutulmustu. Kirpma projede zaten
       istenmiyor (CLAUDE.md siparis akisi kurali 4). */
    .hs-media { flex: 0 0 42%; }
    .hs-media img { width: 100%; height: auto; max-height: calc(var(--hs-h-d, 460px) - 72px);
        object-fit: contain; border-radius: 20px; display: block; box-shadow: 0 18px 40px rgba(20,35,28,.16); }
    .hs-pos-center .hs-text { align-items: center; text-align: center; }
    .hs-pos-right .hs-text { align-items: flex-end; text-align: right; }
    .hs-theme-light { color: #12231a; } /* açık zeminde koyu metin */

    /* SLIDER YAZISI KOYU TEMADA OKUNMUYORDU (2026-08-22, isletme bildirdi:
     * "karanlik modda slider yazisi beyaza donmeli sanki").
     *
     * `.hs-theme-light` slaytin ZEMIN'ine gore secilen bir siniftir: acik
     * zeminli slaytta koyu metin dogru. Ama slaytin kendi zemini yoksa
     * sayfa zeminini kullaniyor ve koyu temada o zemin de koyu -- olculen
     * kontrast 1.08 idi, yani baslik neredeyse gorunmez.
     *
     * Koyu temada bu sinif metni sayfa metin rengine birakiyor. Slayta
     * ACIK bir arka plan gorseli konursa kural yeniden gozden gecirilmeli;
     * o durumda slaytin kendi zemini olacagi icin koyu metin yine dogru
     * olurdu. */
    [data-theme="dark"] .hs-theme-light,
    [data-theme="dark"] .hs-theme-light .hs-title,
    [data-theme="dark"] .hs-theme-light .hs-btn:not(.hs-btn-primary) { color: var(--text); }

    [data-theme="dark"] .hs-theme-light .hs-sub { color: var(--ink-soft); }
    .hs-theme-dark { color: #12231a; }
    .hs-badge { display: inline-flex; align-items: center; align-self: flex-start; gap: 6px; padding: 7px 15px;
        border-radius: 999px; font-weight: 700; font-size: 13px; background: var(--panel); color: var(--primary-700, #1f7d52);
        box-shadow: 0 2px 8px rgba(20,35,28,.06); }
    .hs-pos-center .hs-badge { align-self: center; }
    .hs-pos-right .hs-badge { align-self: flex-end; }
    .hs-title { font-size: clamp(26px, 3.4vw, 44px); font-weight: 800; line-height: 1.12; margin: 0; }
    .hs-sub { font-size: clamp(15px, 1.5vw, 18px); line-height: 1.6; margin: 0; color: #46574e; }
    [data-theme="dark"] .hs-sub { color: var(--ink-soft); }
    .hs-btns { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
    .hs-pos-center .hs-btns { justify-content: center; }
    .hs-pos-right .hs-btns { justify-content: flex-end; }
    .hs-btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 26px; border-radius: 12px;
        font-weight: 700; font-size: 15px; text-decoration: none; transition: transform .12s, box-shadow .12s; }
    .hs-btn-primary { background: var(--primary, #2e9e6b); color: #fff; box-shadow: 0 8px 24px rgba(46,158,107,.35); }
    .hs-btn-primary:hover { transform: translateY(-2px); text-decoration: none; }
    .hs-btn-ghost { background: var(--panel); color: var(--ink); border: 1px solid rgba(0,0,0,.08); }
    .hs-btn-ghost:hover { transform: translateY(-2px); text-decoration: none; }
    .hs-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 42px; height: 42px;
        border: none; border-radius: 50%; background: var(--panel); color: var(--ink); font-size: 24px;
        line-height: 1; cursor: pointer; display: grid; place-items: center; box-shadow: 0 4px 14px rgba(0,0,0,.14); }
    .hs-arrow:hover { background: var(--primary-tint, #eef7f1); }
    .hs-prev { left: 14px; } .hs-next { right: 14px; }
    .hs-dots { position: absolute; left: 0; right: 0; bottom: 14px; z-index: 3; display: flex; gap: 8px; justify-content: center; }
    /* DOKUNMA HEDEFI GORSEL BOYUTTAN BUYUK (2026-08-23).

       Noktalar 9x9 px'ti; WCAG 2.5.8 asgarisi 24x24, projenin kendi kurali 44.
       Lighthouse erisilebilirlik puanindaki "dokunma hedefleri uygun boyutta
       degil" maddesi buydu.

       NOKTA KUCUK KALIYOR, TIKLANABILIR ALAN BUYUYOR: gorseli buyutmek
       sliderin altini nokta tarlasina cevirirdi. `::before` ile 44x44'luk
       gorunmez bir alan seriliyor -- kullanici noktanin yanina bassa da
       calisiyor. Bu, kucuk kontroller icin standart teknik. */
    .hs-dot { width: 9px; height: 9px; border-radius: 50%; border: none; cursor: pointer; padding: 0;
        position: relative;
        background: color-mix(in srgb, var(--primary) 30%, var(--panel)); transition: width .2s, background .2s; }
    .hs-dot::before {
        content: ''; position: absolute; top: 50%; left: 50%;
        width: 44px; height: 44px; transform: translate(-50%, -50%);
    }
    .hs-dot.is-active { width: 24px; border-radius: 6px; background: var(--primary, #2e9e6b); }
    @media (max-width: 820px) {
        /* Mobil: resim metnin ALTINA geçer, yükseklik içeriğe göre */
        .hs-viewport { min-height: 0; }   /* masaustu rezervini mobilde kaldir */
        .hs--slide .hs-viewport, .hs--slide .hs-slide, .hs--slide .hs-inner { min-height: 0; }
        .hs-inner { flex-direction: column; text-align: center; padding: 30px 22px; gap: 22px; }
        .hs-text { align-items: center; text-align: center; }
        /* Masaustunde gorsel kutusuna sabit yukseklik verildi (CLS); mobilde
           SIFIRLANIR — burada yukseklik icerige gore, mobil CLS zaten iyi
           (0.01) ve sabit yukseklik hero'yu telefonda gereksiz uzatirdi. */
        .hs-media { flex: none; width: 100%; height: auto; }
        /* Mobilde illustrasyon KIRPILMASIN (2026-08-25, isletme bildirdi:
           "slider resmi tam cikmiyor"). Masaustundeki `object-fit: cover`
           mirasi + kisa max-height, dikey resmin alt/ustunu kesiyordu. Bir
           urun/marka gorseli tam gorunmeli: contain oranı korur, kesmez.
           Yukseklik yine sinirli ki hero telefonda asiri uzamasin. */
        .hs-media img { height: auto; max-height: 300px; object-fit: contain; }
        .hs-badge, .hs-pos-right .hs-badge { align-self: center; }
        .hs-btns, .hs-pos-right .hs-btns { justify-content: center; }
        .hs-arrow { width: 34px; height: 34px; font-size: 20px; }
        .hs-prev { left: 6px; } .hs-next { right: 6px; }
    }
    .blog-card-ph { font-size: 30px; color: var(--primary-600); }
    .blog-card-body { padding: 14px; }
    .blog-card-body h3 { font-size: 15px; margin: 4px 0 6px; line-height: 1.35; }
    .blog-card-body p { font-size: 13px; color: var(--muted); line-height: 1.6; margin: 0; }

    .blog-pager { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 24px; }

    .blog-side { display: flex; flex-direction: column; gap: 16px; }
    .blog-side-h { font-size: 14px; color: var(--ink); margin: 0 0 12px; }
    .blog-side-link { display: flex; justify-content: space-between; padding: 7px 0; font-size: 14px; color: var(--muted); }
    .blog-side-link:hover { color: var(--primary-700); text-decoration: none; }
    .blog-side-count { background: var(--primary-tint); color: var(--primary-700); border-radius: 999px; padding: 0 8px; font-size: 12px; font-weight: 700; }
    .blog-side-post { display: block; font-size: 13px; padding: 7px 0; border-bottom: 1px solid var(--border); color: var(--text); line-height: 1.4; }
    .blog-side-post:last-child { border-bottom: none; }
    .blog-side-post:hover { color: var(--primary-700); text-decoration: none; }

    .blog-article-meta { display: flex; flex-wrap: wrap; gap: 14px; font-size: 13px; color: var(--muted); margin: 8px 0 18px; }
    .blog-article-hero { border-radius: 16px; overflow: hidden; margin-bottom: 22px; }
    .blog-article-hero img { width: 100%; height: auto; display: block; }
    /* Kapaksiz yazida hero, yer tutucuya makul bir yukseklik verir. */
    .blog-article-hero--bos { aspect-ratio: 16/5; background: var(--primary-tint); }

    /* ---- Kapak gorseli olmayan yazilarin yer tutucusu ----
       Marka renkli logo, hafif degradeli zemin uzerinde. Logo kutunun disina
       ASLA tasmaz: yuzde genislik + piksel tavani + object-fit:contain +
       padding birlikte calisir (olculdu: 9 kartin hicbirinde tasma yok). */
    .blog-ph {
        width: 100%; height: 100%;
        display: flex; align-items: center; justify-content: center;
        padding: 16px; box-sizing: border-box;
        background: linear-gradient(135deg, var(--primary-tint) 0%, #d9f0e5 100%);
    }
    .blog-ph img {
        width: 74%; max-width: 210px; max-height: 76%;
        height: auto; object-fit: contain;
        opacity: .9;
        /* Grid/flex icinde tasmayi tetikleyen varsayilan min boyutu kapat. */
        min-width: 0; min-height: 0;
    }
    .blog-feature-img .blog-ph img { width: 46%; max-width: 280px; }
    .blog-article-hero .blog-ph img { width: 34%; max-width: 260px; }
    @media (max-width: 600px) {
        .blog-ph { padding: 12px; }
        .blog-ph img { width: 76%; max-width: 170px; }
        .blog-feature-img .blog-ph img,
        .blog-article-hero .blog-ph img { width: 58%; max-width: 200px; }
    }

    @media (max-width: 860px) {
        .blog-layout { grid-template-columns: 1fr; }
        .blog-side { order: 2; }
    }

    /* ---- SSS (FAQ) akordeon ---- */
    .faq-wrap { max-width: 780px; margin: 0 auto; }
    .faq-search {
        display: flex; align-items: center; gap: 10px; background: var(--panel);
        border: 1px solid var(--border); border-radius: 12px; padding: 12px 16px; margin-bottom: 22px;
    }
    .faq-search input { border: none; outline: none; width: 100%; font-size: 15px; background: transparent; color: var(--text); }
    .faq-cat { font-size: 16px; color: var(--primary-700); margin: 22px 0 12px; }
    .faq-list { display: flex; flex-direction: column; gap: 10px; }
    .faq-item { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
    .faq-q {
        width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 14px;
        background: none; border: none; cursor: pointer; text-align: left;
        padding: 16px 18px; font-size: 15px; font-weight: 600; color: var(--text);
    }
    .faq-q:hover { color: var(--primary-700); }
    .faq-chevron { flex: none; font-size: 20px; color: var(--primary-600); transition: transform .2s; }
    .faq-chevron.is-open { transform: rotate(180deg); }
    .faq-a-inner { padding: 0 18px 18px; font-size: 14px; line-height: 1.7; color: var(--muted); }

    /* ---- Anasayfa SSS bölümü (2026-08-23) ----

       /sss sayfasindaki .faq-* sinifları YENIDEN KULLANILMADI: onlar
       <button> + <div> yapisina gore yazilmis (Alpine akordeon), buradaki
       blok <details>/<summary>. Ayni siniflari zorlamak, iki farkli
       markup'i tek stil setine bagli birakirdi -- birinde yapilan degisiklik
       digerini sessizce bozardi.

       Gorunum bilerek /sss ile ayni ailede: ayni kenarlik, ayni yaricap,
       ayni chevron. Musteri iki yerde ayni sey oldugunu tanisin. */
    .hf { margin: 34px 0 8px; }
    .hf-head { margin-bottom: 18px; }
    .hf-title { font-size: 22px; color: var(--primary-700); margin: 0 0 6px; font-weight: 800; }
    .hf-sub { font-size: 14.5px; color: var(--muted); margin: 0; }

    .hf-list { display: grid; gap: 10px; }

    .hf-item {
        background: var(--panel); border: 1px solid var(--border);
        border-radius: 12px; overflow: hidden;
    }

    .hf-q {
        display: flex; align-items: center; justify-content: space-between; gap: 14px;
        padding: 15px 18px; cursor: pointer;
        font-size: 15px; font-weight: 600; color: var(--text);
        /* Varsayilan ucgen isareti kaldiriliyor; yerine dondurulen chevron.
           list-style Firefox'ta, ::-webkit-details-marker Safari'de gerekiyor. */
        list-style: none;
        /* Dokunma hedefi: 15px dolgu + 15px satir = 45px, kural 44'u asiyor. */
        min-height: 44px;
    }
    .hf-q::-webkit-details-marker { display: none; }
    .hf-q:hover { color: var(--primary-700); }
    /* Klavye odagi gorunur kalmali (arayuz kurali 9). */
    .hf-item:focus-within .hf-q { color: var(--primary-700); }
    .hf-q:focus-visible { outline: 2px solid var(--primary-600); outline-offset: -2px; }

    .hf-ok {
        flex: none; font-size: 20px; color: var(--primary-600);
        transition: transform .2s;
    }
    .hf-item[open] .hf-ok { transform: rotate(180deg); }

    .hf-a { padding: 0 18px 18px; font-size: 14px; line-height: 1.7; color: var(--muted); }

    .hf-more { margin: 16px 0 0; font-size: 14px; color: var(--muted); }
    .hf-more a { color: var(--primary-700); font-weight: 600; }

    @media (prefers-reduced-motion: reduce) {
        .hf-ok { transition: none; }
    }

    /* ---- İletişim sayfası ---- */
    .ct-head { margin-bottom: 20px; }
    .ct-layout { display: grid; grid-template-columns: 1fr 1.2fr; gap: 20px; align-items: start; }
    .ct-info { display: flex; flex-direction: column; gap: 12px; }
    .ct-card {
        display: flex; align-items: center; gap: 14px;
        background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px;
    }
    .ct-card:hover { border-color: var(--primary-600); text-decoration: none; }
    .ct-ico {
        width: 44px; height: 44px; flex: none; border-radius: 12px; display: grid; place-items: center;
        background: var(--primary-tint); font-size: 20px;
    }
    .ct-label { display: block; font-size: 12px; color: var(--muted); }
    .ct-val { display: block; font-weight: 700; color: var(--text); }
    .form-err { display: block; color: var(--danger); font-size: 12px; margin-top: 4px; }
    @media (max-width: 780px) { .ct-layout { grid-template-columns: 1fr; } }

    /* ---- İçerik sayfası (sözleşme/kurumsal) ---- */
    .page-breadcrumb { font-size: 13px; color: var(--muted); margin-bottom: 16px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
    .page-breadcrumb a { color: var(--muted); }
    .page-breadcrumb a:hover { color: var(--primary-700); }
    .page-article { max-width: 820px; margin: 0 auto; }
    .page-article > h1 { font-size: 28px; color: var(--ink); margin: 0 0 8px; }
    .page-meta { font-size: 13px; color: var(--muted); margin-bottom: 20px; }
    .page-content { font-size: 15px; line-height: 1.75; color: var(--text); }
    /* Editorden eklenen icerik gorselleri (blog + urun aciklamasi ayni sinifi
       kullanir): kutuya SIGAR, mobilde kuculur, orani korunur (2026-08-25).
       NOT: CSS gorunum boyutunu sigdirir ama DOSYAYI kucultmez — buyuk dosya
       agirligi ayri konu (yukleme aninda boyut siniri RichEditor config'de). */
    .page-content img { max-width: 100%; height: auto; border-radius: 10px; margin: 8px 0 14px; }
    .page-content h2 { font-size: 20px; margin: 26px 0 10px; }
    .page-content h3 { font-size: 17px; margin: 22px 0 8px; }
    .page-content p { margin: 0 0 14px; }
    .page-content ul, .page-content ol { margin: 0 0 14px; padding-left: 22px; }
    .page-content li { margin-bottom: 6px; }
    .page-content a { color: var(--primary-700); text-decoration: underline; }
    .page-content table { width: 100%; border-collapse: collapse; margin: 0 0 16px; }
    .page-content th, .page-content td { border: 1px solid var(--border); padding: 8px 10px; text-align: left; }
    .page-links { display: flex; flex-direction: column; gap: 10px; }
    .page-link {
        display: flex; align-items: center; justify-content: space-between;
        background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px;
    }
    .page-link:hover { border-color: var(--primary-600); text-decoration: none; }
    .page-link-title { font-weight: 600; color: var(--text); }
    .page-link-arrow { color: var(--primary-600); }

    /* ---- Havale/EFT dekont yukleme kutusu ----
       Uc sayfada ayni gorunur (siparis, siparis sonucu, siparis sorgulama).
       Kutu bilincli olarak DIKKAT CEKIYOR: musterinin bu adimi atlamasi
       siparisin baskiya girmemesi demek. */
    .dek-kutu {
        border: 1px solid var(--primary);
        border-radius: var(--radius);
        background: var(--primary-tint);
        padding: 16px;
    }
    .dek-ust { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
    .dek-rozet {
        font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
        background: var(--primary-700); color: #fff; padding: 3px 8px; border-radius: 999px;
    }
    .dek-ust strong { font-size: 15px; color: var(--ink); }

    .dek-iban {
        background: var(--panel); border-radius: var(--radius-sm);
        padding: 12px 14px; margin-bottom: 12px; font-size: 13px;
    }
    .dek-iban > div { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; }
    .dek-iban span { color: var(--muted); flex: none; }
    /* IBAN uzun ve kopyalanacak: kirilabilsin ve rakamlar hizali okunsun. */
    .dek-iban strong { text-align: right; word-break: break-all; font-variant-numeric: tabular-nums; }
    .dek-aciklama { margin: 8px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.5; }

    .dek-alindi {
        display: flex; flex-direction: column; gap: 2px;
        background: var(--panel); border-left: 3px solid var(--primary);
        border-radius: var(--radius-sm); padding: 10px 12px; margin-bottom: 12px;
    }
    .dek-alindi strong { font-size: 13.5px; color: var(--primary-700); }
    .dek-alindi span { font-size: 12.5px; color: var(--muted); }
    .dek-adet { font-style: italic; }

    /* ---- Dekont onaylanmadi ----
       Musteri bunu KACIRMAMALI: dekontu reddedilmisse siparisi uretime
       girmeyecek ve haberi yoksa bosuna bekler. Bu yuzden kutu kendi
       cercevesiyle geliyor, yukleme kutusunun icinde eriyip gitmiyor.

       AYRIM YALNIZCA RENGE BIRAKILMIYOR (renk korlugu): ikon, kalin kenarlik
       ve "onaylanmadı" sozcugu birlikte calisiyor. */
    .dek-red {
        display: flex; gap: 10px; align-items: flex-start;
        background: var(--panel);
        border: 1px solid var(--danger);
        border-left: 4px solid var(--danger);
        border-radius: var(--radius-sm);
        padding: 12px 14px; margin-bottom: 12px;
    }
    .dek-red-ikon { flex: none; width: 20px; height: 20px; color: var(--danger); margin-top: 1px; }
    .dek-red-govde { min-width: 0; }
    .dek-red strong { display: block; font-size: 13.5px; color: var(--danger); margin-bottom: 3px; }
    /* Sebep asil bilgi: ne oldugundan cok NE YAPILACAGI yaziyor. */
    .dek-red-sebep { font-size: 13px; line-height: 1.55; color: var(--text); }
    .dek-red-alt { display: block; margin-top: 5px; font-size: 12px; color: var(--muted); }

    .dek-form { display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap; }
    /* Dosya girisi gizlenip etiketin kendisi dugme gibi davranir; boylece
       tarayicinin "Dosya secilmedi" metni yerine secilen dosyanin adi yazar. */
    .dek-sec {
        flex: 1 1 220px; min-height: 46px;
        display: flex; align-items: center; gap: 9px;
        background: var(--panel); border: 1px dashed var(--primary);
        border-radius: var(--radius-sm); padding: 10px 14px;
        cursor: pointer; font-size: 14px; color: var(--ink);
        transition: background .15s ease, border-color .15s ease;
    }
    .dek-sec:hover { background: var(--panel); border-color: var(--primary-700); }
    .dek-sec input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
    .dek-sec:focus-within { outline: 2px solid var(--primary); outline-offset: 2px; }
    .dek-sec-ikon { display: flex; color: var(--primary-700); flex: none; }
    .dek-sec-ikon svg { width: 20px; height: 20px; }
    /* Uzun dosya adi dugmeyi tasirmasin. */
    .dek-sec-metin { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .dek-form .btn { flex: 0 0 auto; min-height: 46px; }

    /* Dekont yukleme ilerlemesi.
       Cubuk formun TAM GENISLIGINI kaplar: .dek-form flex ve wrap'li, bu yuzden
       flex-basis 100% verilmezse dugmenin yanina sikisir. */
    .dek-ilerleme {
        flex: 0 0 100%;
        height: 6px;
        border-radius: 999px;
        background: rgba(0, 0, 0, .10);
        overflow: hidden;
    }
    .dek-ilerleme-dolgu {
        height: 100%;
        width: 0;
        border-radius: 999px;
        background: var(--brand);
        transition: width .18s ease-out;
    }
    /* %100'de dosya sunucuda ama islem surüyor (virus taramasi). Duran bir
       cubuk "takildi" izlenimi verir; kayan cizgi beklemenin surdugunu soyler. */
    .dek-ilerleme-dolgu.is-isleniyor {
        background: linear-gradient(90deg,
            var(--brand) 25%, rgba(255, 255, 255, .55) 50%, var(--brand) 75%);
        background-size: 200% 100%;
        animation: dek-kayan 1.1s linear infinite;
    }
    @keyframes dek-kayan { from { background-position: 100% 0; } to { background-position: -100% 0; } }
    @media (prefers-reduced-motion: reduce) {
        .dek-ilerleme-dolgu.is-isleniyor { animation: none; }
        .dek-ilerleme-dolgu { transition: none; }
    }

    .dek-uyari {
        flex: 0 0 100%;
        margin: 0;
        font-size: 13px;
        color: var(--danger, #b42318);
        line-height: 1.5;
    }

    .dek-not { margin: 10px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.55; }
    /* Siparis sorgulama sayfasinda sonuc kartinin altinda durur. */
    .track-dekont { margin-top: 16px; }

    /* ---- Teslimat sonrasi degerlendirme ----
       Musteri telefonundan, SMS'teki baglantiyla geliyor: dokunma hedefleri
       buyuk, secim gorsel olarak net. */
    .fb-puan { display: flex; gap: 8px; flex-wrap: wrap; }
    .fb-puan-secim { position: relative; flex: 1 1 56px; }
    .fb-puan-secim input { position: absolute; opacity: 0; width: 1px; height: 1px; }
    .fb-puan-secim span {
        display: flex; align-items: center; justify-content: center;
        min-height: 46px; padding: 0 12px;
        border: 1px solid var(--border); border-radius: var(--radius-sm);
        background: var(--panel); cursor: pointer; font-weight: 600;
        transition: border-color .15s ease, background .15s ease, color .15s ease;
    }
    .fb-puan-secim input:checked + span {
        border-color: var(--primary); background: var(--primary-tint); color: var(--primary-700);
    }
    .fb-puan-secim input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 2px; }

    .fb-sorun {
        display: flex; align-items: flex-start; gap: 10px;
        padding: 12px 14px; margin-top: 4px;
        border: 1px solid var(--border); border-radius: var(--radius-sm);
        background: var(--secondary-tint); font-size: 14px; cursor: pointer;
    }
    .fb-sorun input { margin-top: 3px; flex: none; }

    @media (max-width: 520px) {
        .dek-form { flex-direction: column; }
        .dek-form .btn { width: 100%; }
        .dek-iban > div { flex-direction: column; gap: 0; }
        .dek-iban strong { text-align: left; }
    }

    /* ---- Kargo firmasi secimi (odeme sayfasi) ----
       Musteri firmayi kendi seciyor: bolgesel dagitim farkli (PTT koye
       gidiyor, digerleri gitmiyor) ve Geliver bazi adresleri belirli firma
       icin kabul etmiyor. */
    .kargo-secenekler { display: grid; gap: 8px; }
    .kargo-secenek {
        display: flex; align-items: center; justify-content: space-between;
        gap: 12px; padding: 12px 14px;
        border: 1px solid var(--border); border-radius: var(--radius-sm);
        background: var(--panel); color: var(--text);
        transition: border-color .15s ease, background .15s ease;
    }
    .kargo-secenek:hover { border-color: var(--primary); text-decoration: none; }
    .kargo-secenek.is-secili {
        border-color: var(--primary); background: var(--primary-tint);
        box-shadow: inset 0 0 0 1px var(--primary);
    }
    /* Secim isareti: ayrim yalnizca renge/cerceveye birakilmiyor (renk
       korlugu + dokunmatikte hover yok). Secili satirda ici dolar. */
    .kargo-isaret {
        flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%;
        border: 2px solid var(--border); background: var(--panel);
        position: relative;
    }
    .kargo-secenek.is-secili .kargo-isaret { border-color: var(--primary); }
    .kargo-secenek.is-secili .kargo-isaret::after {
        content: ''; position: absolute; inset: 3px;
        border-radius: 50%; background: var(--primary);
    }

    /* FIRMA ROZETI — Geliver teklif yanıtında logo alanı YOK (üretimde tüm
       alanlar listelendi). Dışarıdan logo çekmek ödeme sayfasına üçüncü taraf
       istek eklerdi; firma renginde kısa kod hem bir bakışta ayırt ettiriyor
       hem ek istek gerektirmiyor. Genişlik SABİT: farklı uzunluktaki kodlar
       adları kaydırmasın. */
    .kargo-rozet {
        flex: 0 0 auto;
        width: 46px; height: 26px;
        display: inline-flex; align-items: center; justify-content: center;
        border-radius: 6px;
        font-size: 11px; font-weight: 800; letter-spacing: .02em;
        color: #fff; background: var(--muted);
    }
    .kargo-rozet--surat { background: #e2001a; }
    .kargo-rozet--hepsijet { background: #ff6000; }
    .kargo-rozet--ptt { background: #004b93; }
    .kargo-rozet--aras { background: #003da5; }
    .kargo-rozet--yurtici { background: #0033a0; }
    .kargo-rozet--kolaygelsin { background: #00a86b; }
    .kargo-rozet--sendeo { background: #6d28d9; }

    /* Firma logosu — YEREL SVG (public/img/kargo), dışarıya istek yok.
       Kutu SABİT ama rozetten geniş: logoların en-boy oranları çok farklı
       (Sürat 5.9:1 uzun, PTT 1.4:1 kare gibi). `contain` ile hiçbiri
       bozulmaz; dar bir kutuda uzun logo okunmaz hâle geliyordu. */
    .kargo-logo {
        flex: 0 0 auto;
        width: 62px; height: 30px;
        object-fit: contain; object-position: center;
    }

    /* Ad + tahmini teslim; kalan genişliği bu alır, fiyat sağda kalır. */
    .kargo-bilgi { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
    .kargo-adi { font-weight: 600; line-height: 1.3; }
    .kargo-sure { font-size: 12px; color: var(--muted); line-height: 1.3; }

    .kargo-fiyat { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

    /* 360px'te logo + ad + süre + fiyat yan yana sığmıyor: logo ile ad
       aynı satırda kalır, fiyat alta geçer. */
    @media (max-width: 420px) {
        .kargo-secenek { flex-wrap: wrap; }
        .kargo-fiyat { margin-left: auto; }
    }

    /* ---- AI asistan yuzen dugmesi (FAB) ----
       Renkler ONCEDEN satir ici style icinde gomulu mor-mavi degerlerdi
       (#5b8def → #7c5cff). Markayla ilgisi yoktu ve daha kotusu: dugmenin
       ACTIGI pencerenin baslik cubugu zaten yesil, yani dugme kendi acacagi
       seyle celisiyordu.

       Bicim piyasa standardina getirildi: daire, marka gradyani, MARKA
       RENGINDEN turetilmis golge ve hover'da hafif yukselme. */
    .ai-fab {
        position: fixed; right: 22px; bottom: 22px; z-index: 9998;
        width: 60px; height: 60px; padding: 0;
        border: none; border-radius: 50%;
        background: linear-gradient(145deg, var(--primary), var(--primary-700));
        color: #fff; cursor: pointer;
        display: flex; align-items: center; justify-content: center;
        /* Notr siyah golge dugmeyi sayfaya YAPISTIRIYOR; renkli golge
           yuzuyormus hissi veriyor. Ikinci katman temas golgesi. */
        box-shadow: 0 10px 24px rgba(2, 164, 93, .34), 0 2px 6px rgba(15, 32, 25, .12);
        transition: transform .18s ease, box-shadow .18s ease;
    }
    .ai-fab:hover {
        transform: translateY(-3px);
        box-shadow: 0 16px 32px rgba(2, 164, 93, .40), 0 2px 6px rgba(15, 32, 25, .14);
    }
    .ai-fab:active { transform: translateY(-1px); }
    .ai-fab:focus-visible { outline: 3px solid var(--primary-tint); outline-offset: 3px; }
    .ai-fab svg { width: 34px; height: 34px; overflow: visible; }

    /* MOBILDE ALT CUBUKLARIN USTUNE CIKAR (2026-08-19, isletme bildirdi):
       dugme panelin alt menu barina (.cp-mobile-bar) biniyordu, "Hesabım"
       sekmesi tiklanamiyordu. Alt cubugu OLAN sayfada yukari kalkar; olmayan
       sayfada eski yerinde durur — bos yere yukselmis bir dugme de sacma
       gorunurdu. Ayni koruma baski sayfasinin yapiskan fiyat cubugu
       (.pc-mobile-cta) icin de gecerli. */
    @media (max-width: 768px) {
        .ai-fab { right: 16px; }
        body:has(.cp-mobile-bar) .ai-fab,
        body:has(.pc-mobile-cta) .ai-fab {
            bottom: calc(84px + env(safe-area-inset-bottom, 0px));
        }
    }

    /* Ustune gelince EL SALLAR.
       Hareket yalnizca hover'da: surekli oynayan bir sey sayfanin geri
       kalanindan dikkat calar ve zamanla rahatsiz eder.
       transform-box: fill-box olmadan donme merkezi SVG'nin sol ust kosesi
       olur ve el ekrandan disari savrulur. */
    /* Dönme merkezi bileğe yakın (sol alt): el, kolun ucundan sallanmalı.
       Merkezden döndürülünce el kolun içine giriyordu. */
    .ai-fab-el {
        transform-box: fill-box;
        transform-origin: 12% 90%;
    }
    .ai-fab:hover .ai-fab-el,
    .ai-fab:focus-visible .ai-fab-el {
        animation: ai-fab-salla .55s ease-in-out 2;
    }
    @keyframes ai-fab-salla {
        0%, 100% { transform: rotate(0deg); }
        25% { transform: rotate(-22deg); }
        75% { transform: rotate(22deg); }
    }

    @media (prefers-reduced-motion: reduce) {
        .ai-fab, .ai-fab:hover, .ai-fab:active { transition: none; transform: none; }
        .ai-fab:hover .ai-fab-el, .ai-fab:focus-visible .ai-fab-el { animation: none; }
    }
    /* Mobilde ekranin altina yapisan siparis cubuklari var; dugme onlarin
       USTUNE binmesin (z-index 9998 ile hep onde duruyordu). */
    @media (max-width: 900px) {
        body:has(.pc-mobile-cta) .ai-fab,
        body:has(.price-box) .ai-fab { bottom: 86px; }
    }

    /* ================= SOHBET PENCERESİ (2026-08-16'da yeniden yazıldı) =====
       Önceki hâli tamamen satır içi stildi ve renkler koda gömülüydü
       (#fff, #f7f7fb, #eee, #222). Sonuçları:
         · Koyu tema hiç çalışmıyordu — pencere her zaman beyazdı.
         · Girdi 14px'ti; iOS Safari 16px'ten küçük bir alana odaklanınca
           sayfayı yakınlaştırıyor ve düzeni bozuyor.
         · Dokunma hedefleri 44px'in altındaydı (dosya ekle ~30px).
         · Gönder düğmesi bir ok emojisiydi.
       Stiller buraya taşındı; renkler tokenlardan geliyor. */

    .sohbet {
        position: fixed;
        right: 22px;
        /* FAB 60px + 22px alt boşluk + 12px aralık */
        bottom: calc(94px + env(safe-area-inset-bottom, 0px));
        z-index: 9997;
        width: min(384px, calc(100vw - 32px));
        /* Yükseklik ekrana göre: sabit 540px küçük telefonlarda taşıyordu. */
        height: min(560px, calc(100dvh - 150px));
        display: flex;
        flex-direction: column;
        overflow: hidden;
        background: var(--panel);
        color: var(--text);
        border: 1px solid var(--border);
        border-radius: 18px;
        box-shadow: 0 20px 56px rgba(15, 32, 25, .26);
    }

    /* Dar ekranda tam genişlik: 384px'lik bir kutu 360px telefonda kenarlara
       yapışıyordu. */
    @media (max-width: 460px) {
        .sohbet {
            right: 12px;
            left: 12px;
            width: auto;
            bottom: calc(88px + env(safe-area-inset-bottom, 0px));
            height: min(70dvh, calc(100dvh - 140px));
        }
    }

    .sohbet-ust {
        display: flex; align-items: center; gap: 10px;
        padding: 12px 14px;
        background: linear-gradient(145deg, var(--primary), var(--primary-700));
        color: #fff;
    }
    .sohbet-avatar {
        width: 34px; height: 34px; flex: 0 0 auto;
        border-radius: 50%;
        background: rgba(255, 255, 255, .18);
        display: flex; align-items: center; justify-content: center;
    }
    .sohbet-avatar svg { width: 22px; height: 22px; }
    .sohbet-adi { font-weight: 700; font-size: 15px; line-height: 1.2; }
    /* "Çevrimiçi" DEMİYOR: asistan bir program, insan gibi göstermek yanıltıcı.
       Yazan şey ne yapabildiği. */
    .sohbet-alt { font-size: 11.5px; opacity: .88; }
    .sohbet-kapat {
        margin-left: auto;
        width: 44px; height: 44px;      /* WCAG 2.5.8 dokunma hedefi */
        display: flex; align-items: center; justify-content: center;
        border: none; background: transparent; color: #fff;
        border-radius: 10px; cursor: pointer;
    }
    .sohbet-kapat:hover { background: rgba(255, 255, 255, .16); }
    .sohbet-kapat:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }

    .sohbet-akis {
        flex: 1; overflow-y: auto;
        padding: 14px;
        background: var(--bg);
        display: flex; flex-direction: column; gap: 10px;
        overscroll-behavior: contain;   /* akış bitince sayfa kaymasın */
    }

    .sohbet-satir { display: flex; }
    .sohbet-satir.is-ben { justify-content: flex-end; }

    .sohbet-balon {
        max-width: 82%;
        padding: 10px 13px;
        font-size: 14.5px; line-height: 1.5;
        white-space: pre-wrap; word-break: break-word;
        border-radius: 14px;
        background: var(--panel);
        border: 1px solid var(--border);
        border-bottom-left-radius: 4px;
    }
    .sohbet-satir.is-ben .sohbet-balon {
        background: var(--primary-700);
        color: #fff;
        border-color: transparent;
        border-bottom-left-radius: 14px;
        border-bottom-right-radius: 4px;
    }

    /* ---- Boş durum: ne olduğu VE ne yapılacağı ---- */
    .sohbet-bos { padding: 10px 2px; }
    .sohbet-bos p { margin: 0 0 12px; font-size: 14px; line-height: 1.55; color: var(--muted); }
    .sohbet-oneriler { display: flex; flex-wrap: wrap; gap: 8px; }
    /* Hazır sorular: boş bir kutuya ne yazacağını bilemeyen müşteri
       kapatıp gidiyor. */
    .sohbet-oneri {
        border: 1px solid var(--border); background: var(--panel); color: var(--text);
        border-radius: 999px; padding: 9px 14px;
        font-size: 13px; cursor: pointer; min-height: 40px;
        text-align: left;
    }
    .sohbet-oneri:hover { border-color: var(--primary); color: var(--primary-700); }

    /* ---- "Yazıyor" göstergesi ----
       Dönen çark yerine üç nokta: satır yüksekliği baloncukla aynı kaldığı
       için akış zıplamıyor. */
    .sohbet-yaziyor { display: flex; gap: 4px; align-items: center; padding: 12px 14px; }
    .sohbet-nokta {
        width: 7px; height: 7px; border-radius: 50%;
        background: var(--muted);
        animation: sohbet-zipla 1.1s ease-in-out infinite;
    }
    .sohbet-nokta:nth-child(2) { animation-delay: .15s; }
    .sohbet-nokta:nth-child(3) { animation-delay: .3s; }
    @keyframes sohbet-zipla {
        0%, 60%, 100% { transform: translateY(0); opacity: .45; }
        30% { transform: translateY(-4px); opacity: 1; }
    }

    /* ---- Eklenen dosya ---- */
    .sohbet-ek {
        display: flex; align-items: center; gap: 8px;
        padding: 9px 12px;
        font-size: 13px;
        background: var(--primary-tint); color: var(--primary-700);
        border-top: 1px solid var(--border);
    }
    .sohbet-ek-adi { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .sohbet-ek-sil {
        margin-left: auto; width: 32px; height: 32px;
        border: none; background: transparent; color: var(--danger);
        cursor: pointer; border-radius: 8px; font-size: 18px; line-height: 1;
    }
    .sohbet-ek-sil:hover { background: rgba(0, 0, 0, .06); }

    .sohbet-hata {
        display: flex; align-items: flex-start; gap: 8px;
        padding: 9px 12px; font-size: 13px; line-height: 1.45;
        color: var(--danger);
        border-top: 1px solid var(--danger);
        background: rgba(180, 35, 24, .07);
    }

    /* ---- Giriş ---- */
    .sohbet-giris {
        display: flex; align-items: flex-end; gap: 8px;
        padding: 10px;
        padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
        border-top: 1px solid var(--border);
        background: var(--panel);
    }
    .sohbet-ekle {
        flex: 0 0 auto;
        width: 44px; height: 44px;       /* dokunma hedefi */
        display: flex; align-items: center; justify-content: center;
        border-radius: 10px; cursor: pointer; color: var(--muted);
    }
    .sohbet-ekle:hover { background: var(--primary-tint); color: var(--primary-700); }
    .sohbet-ekle svg { width: 20px; height: 20px; }

    .sohbet-metin {
        flex: 1;
        /* 16px ALTINA İNMEZ: iOS Safari daha küçüğüne odaklanırken sayfayı
           yakınlaştırır ve düzen bozulur. */
        font: inherit; font-size: 16px;
        min-height: 44px; max-height: 120px;
        padding: 11px 12px;
        border: 1px solid var(--border); border-radius: 12px;
        background: var(--bg); color: var(--text);
        resize: none; outline: none;
    }
    .sohbet-metin:focus { border-color: var(--primary); }
    .sohbet-metin:disabled { opacity: .6; }

    .sohbet-gonder {
        flex: 0 0 auto;
        width: 44px; height: 44px;
        display: flex; align-items: center; justify-content: center;
        border: none; border-radius: 12px;
        background: var(--primary-700); color: #fff; cursor: pointer;
    }
    .sohbet-gonder:hover { background: var(--primary); }
    .sohbet-gonder:disabled { opacity: .5; cursor: not-allowed; }
    .sohbet-gonder svg { width: 19px; height: 19px; }

    .sohbet-durum { padding: 0 12px 8px; font-size: 12px; color: var(--muted); }

    /* ---- Koyu tema ----
       Artık gerçekten çalışıyor: bikopi-theme.js data-theme'i <html>'e
       koyuyor (2026-08-16'ya kadar betik hiç yüklenmiyordu). */
    [data-theme="dark"] .sohbet {
        box-shadow: 0 20px 56px rgba(0, 0, 0, .5);
    }
    [data-theme="dark"] .sohbet-ek-sil:hover { background: rgba(255, 255, 255, .08); }

    @media (prefers-reduced-motion: reduce) {
        .sohbet-nokta { animation: none; }
    }

    /* ---- Site footer ----
       Koyu yuzey BILINCLI bir tercih (2026-08-15): footer .shell'in disina
       cikarildi ve sayfanin sonunu net bir bicimde kapatiyor. Renk paletten
       geliyor (--secondary), yeni bir marka rengi UYDURULMADI.

       Footer'a ozel iki degisken YALNIZCA bu blokta tanimli: koyu zeminde
       --border ve --muted okunmuyor. Bunlar site geneli token DEGIL, bilerek
       footer'a kapatildi. */
    .site-footer {
        --sf-line: rgba(255, 255, 255, .11);
        --sf-dim: #93a3b8;
        margin-top: 64px;
        background: var(--secondary);
        color: #e2e8f0;
    }
    /* .shell ile AYNI olcu: footer tam genislikte ama icerigi sayfayla hizali. */
    .sf-inner { max-width: 1180px; margin: 0 auto; padding: 0 24px; }

    /* Cagri seridi — footer'a inen ziyaretci icin siparis akisina donus yolu. */
    .sf-cta {
        display: flex; align-items: center; justify-content: space-between;
        gap: 20px; flex-wrap: wrap;
        padding: 26px 0 28px; border-bottom: 1px solid var(--sf-line);
    }
    .sf-cta-text { display: flex; flex-direction: column; gap: 4px; }
    .sf-cta-text strong {
        font-family: var(--font-display); font-size: 20px; font-weight: 800;
        letter-spacing: -.02em; color: #fff;
    }
    .sf-cta-text span { font-size: 14px; color: var(--sf-dim); }

    .sf-grid {
        display: grid; grid-template-columns: 1.7fr 1fr 1fr 1.3fr;
        gap: 32px; padding: 40px 0;
    }
    .sf-col h3 {
        font-size: 12px; font-weight: 700; letter-spacing: .08em;
        text-transform: uppercase; margin: 0 0 16px; color: #fff;
    }
    .sf-col a, .sf-static { display: block; font-size: 14px; color: var(--sf-dim); padding: 6px 0; }
    .sf-col a { transition: color .15s ease; }
    .sf-col a:hover { color: #fff; text-decoration: none; }
    .sf-logo { height: 34px; margin-bottom: 14px; }
    .sf-wordmark { font-size: 22px; color: #fff; margin-bottom: 14px; }
    .sf-about p { font-size: 14px; color: var(--sf-dim); line-height: 1.75; margin: 0 0 18px; max-width: 40ch; }

    .sf-social { display: flex; gap: 10px; }
    .sf-social a {
        width: 38px; height: 38px; border-radius: 12px; padding: 0;
        display: grid; place-items: center;
        background: rgba(255, 255, 255, .06);
        border: 1px solid var(--sf-line);
        color: #cbd5e1;
        transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
    }
    .sf-social a:hover {
        background: var(--primary); border-color: var(--primary);
        color: #fff; transform: translateY(-2px);
    }
    .sf-social svg { width: 18px; height: 18px; }

    /* Iletisim satirlari: ikon + metin yan yana, uzun adres sarabilsin diye
       ikon `flex: none` ve ustten hizali. */
    .sf-contact a, .sf-contact .sf-static { display: flex; align-items: flex-start; gap: 9px; }
    .sf-contact svg { width: 16px; height: 16px; flex: none; margin-top: 3px; color: var(--primary); }

    .sf-bottom {
        display: flex; align-items: center; justify-content: space-between;
        gap: 16px; flex-wrap: wrap;
        padding: 18px 0 26px; border-top: 1px solid var(--sf-line);
        font-size: 13px; color: var(--sf-dim);
    }
    /* Yayin surumu — telifin hemen yanina, ayni satira. `margin-inline-end:auto`
       bos alani buraya yikiyor: telif + surum solda bitisik kaliyor, ETBIS
       rozeti (varsa) saga itiliyor. Rozet yokken de surum telifin yanindadir,
       satirin ortasinda asili kalmaz. */
    .sf-surum {
        margin-inline-end: auto;
        font-size: 12px;
        font-variant-numeric: tabular-nums;
        opacity: .75;
    }

    /* ETBİS rozeti — panelden kod girilmediginde bu blok hic basilmaz.
       Rozet boyutu Bakanlik tarafindan verildigi icin sabit olcu vermiyoruz.
       BEYAZ ZEMIN bilincli: rozet gorseli disaridan geliyor, koyu arka planda
       okunacaginin garantisi yok. */
    .sf-etbis {
        display: flex; align-items: center;
        background: var(--panel); border-radius: 10px; padding: 6px 10px;
    }
    .sf-etbis img, .sf-etbis iframe, .sf-etbis svg { max-width: 100%; height: auto; display: block; }

    /* Koyu zeminde varsayilan odak halkasi kayboluyor. */
    .site-footer a:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 6px; }
    @media (prefers-reduced-motion: reduce) {
        .sf-social a:hover { transform: none; }
    }

    @media (max-width: 900px) {
        .sf-grid { grid-template-columns: 1fr 1fr; gap: 26px; padding: 32px 0; }
        .sf-about { grid-column: 1 / -1; }

        /* Ekranin altina yapisan cubuklar (.pc-mobile-cta ve mobil .price-box)
           sayfanin son satirini kapatiyor. Bosluk FOOTER'a veriliyor: footer
           artik .shell disinda, yani sayfanin en alti o. */
        body:has(.pc-mobile-cta) .site-footer,
        body:has(.price-box) .site-footer { padding-bottom: 96px; }
    }
    @media (max-width: 560px) {
        .sf-grid { grid-template-columns: 1fr; }

        /* KISA ETIKETLI LISTE IKI SUTUNA GECER (2026-08-23, isletme sorusu:
           "mobilde iki yazı yan yana sığar mı").

           Tek sutunda uzun link listeleri footer'i gereksiz uzatiyordu.
           Baslik iki sutunu birden kapliyor, linkler altina iki serit
           halinde diziliyor.

           375px'te OLCULDU: sutun 327px, yari sutun 149px.
             Kesfet   : en uzun etiket 110px -> hepsi sigar, 7 satir -> 4
             Kurumsal : 8 etiketin 6'si sigar; sigmayan ikisi iki satira
                        sarar, sutun yine 280px -> 194px iner

           ILETISIM SUTUNUNA VERILMEDI: yalnizca uc satir ve ikonlu iletisim
           bilgileri; ikiye bolmek okumayi zorlastirir, kazanc tek satir. */
        .sf-col--iki {
            display: grid;
            grid-template-columns: 1fr 1fr;
            column-gap: 14px;
            align-items: start;
        }
        .sf-col--iki h4 { grid-column: 1 / -1; }
        .sf-cta { flex-direction: column; align-items: stretch; }
        .sf-cta .btn { text-align: center; }
        .sf-bottom { flex-direction: column; align-items: flex-start; }
        /* Sutun duzeninde otomatik kenar bosluguna gerek yok. */
        .sf-surum { margin-inline-end: 0; }
    }

    /* ============================================================
       PDF Arac Sihirbazi — /araclar/sihirbaz
       Markayla uyumlu, template-AI hissi olmayan 4 adimli UI.
       ============================================================ */
    .wiz-shell {
        max-width: 980px;
        margin: 0 auto 96px;
        padding: 0 16px;
        font-family: var(--font-display);
    }

    /* STEPPER */
    .wiz-stepper {
        margin: 24px 0 32px;
    }
    .wiz-stepper-list {
        list-style: none;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 0;
        padding: 0; margin: 0;
        position: relative;
    }
    .wiz-stepper-list::before {
        content: '';
        position: absolute;
        top: 16px; left: 12.5%; right: 12.5%;
        height: 2px;
        background: var(--border);
        z-index: 0;
    }
    .wiz-step-item {
        position: relative;
        z-index: 1;
        text-align: center;
    }
    .wiz-step-btn {
        background: none; border: 0; padding: 0;
        display: flex; flex-direction: column; align-items: center; gap: 6px;
        cursor: pointer; color: var(--muted);
        font: inherit;
        transition: color .15s ease;
    }
    .wiz-step-btn:disabled { cursor: default; }
    .wiz-step-num {
        width: 32px; height: 32px;
        border-radius: 50%;
        background: var(--panel);
        border: 2px solid var(--border);
        display: inline-flex; align-items: center; justify-content: center;
        font-weight: 800; font-size: 14px;
        color: var(--muted);
        transition: all .2s ease;
    }
    .wiz-step-item.is-current .wiz-step-num {
        background: var(--primary-tint);
        border-color: var(--primary);
        color: var(--primary-700);
        box-shadow: 0 0 0 3px rgba(2, 164, 93, .12);
    }
    .wiz-step-item.is-done .wiz-step-num {
        background: var(--primary);
        border-color: var(--primary);
        color: #fff;
    }
    .wiz-step-check { font-size: 16px; line-height: 1; }
    .wiz-step-icon { font-size: 18px; line-height: 1; }
    .wiz-step-label {
        font-size: 12px; font-weight: 700;
        color: var(--muted);
        letter-spacing: .02em;
    }
    .wiz-step-item.is-current .wiz-step-label,
    .wiz-step-item.is-done .wiz-step-label {
        color: var(--text);
    }

    /* ADIM PANELI */
    .wiz-step-panel {
        background: var(--panel);
        border: 1px solid var(--border);
        border-radius: 18px;
        padding: 28px;
        box-shadow: var(--shadow);
    }
    .wiz-panel-header { margin-bottom: 20px; }
    .wiz-panel-header h2 {
        font-family: var(--font-display);
        font-weight: 800;
        font-size: 22px;
        margin: 0 0 4px;
        color: var(--text);
    }
    .wiz-panel-header .muted { margin: 0; }

    /* ADIM 1 — DROPZONE */
    .wiz-drop {
        border: 2px dashed var(--border);
        border-radius: 14px;
        padding: 32px 16px;
        text-align: center;
        background: color-mix(in srgb, var(--primary-tint) 30%, var(--panel));
        transition: border-color .15s ease, background .15s ease;
    }
    .wiz-drop.is-dragging {
        border-color: var(--primary);
        background: var(--primary-tint);
    }
    .wiz-drop-title {
        font-weight: 600; color: var(--text);
        margin-bottom: 12px;
    }
    .wiz-drop-actions {
        display: inline-flex; gap: 10px; flex-wrap: wrap;
        justify-content: center;
    }

    .wiz-files {
        margin-top: 18px;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        gap: 12px;
    }
    .wiz-file-card {
        position: relative;
        background: var(--panel);
        border: 1px solid var(--border);
        border-radius: 12px;
        padding: 12px;
        display: flex; gap: 10px; align-items: center;
    }
    .wiz-file-card .rm {
        position: absolute; top: 6px; right: 6px;
        width: 22px; height: 22px; border-radius: 50%;
        border: 0; background: var(--panel);
        color: var(--muted); cursor: pointer; line-height: 1;
        font-size: 14px;
    }
    .wiz-file-card .rm:hover { background: var(--danger); color: #fff; }
    .wiz-file-thumb {
        width: 44px; height: 56px;
        border-radius: 6px;
        background: var(--secondary-tint);
        overflow: hidden;
        flex-shrink: 0;
        display: flex; align-items: center; justify-content: center;
    }
    .wiz-file-thumb img { width: 100%; height: 100%; object-fit: cover; }
    .wiz-file-thumb .ph { font-size: 22px; }
    .wiz-file-body { flex: 1; min-width: 0; }
    .wiz-file-name {
        font-weight: 600;
        font-size: 13px;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .wiz-file-meta { font-size: 12px; margin-top: 2px; }

    /* ADIM 2 — TOOL GRID */
    .wiz-search {
        width: 100%;
        padding: 12px 14px;
        border: 1px solid var(--border);
        border-radius: 10px;
        font: inherit;
        margin-bottom: 18px;
    }
    .wiz-search:focus { outline: 2px solid var(--primary); outline-offset: 1px; }
    .wiz-tool-group { margin-top: 18px; }
    .wiz-tool-group-title {
        font-family: var(--font-display);
        font-size: 13px; font-weight: 700;
        color: var(--muted);
        text-transform: uppercase;
        letter-spacing: .04em;
        margin: 0 0 10px;
    }
    .wiz-tool-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        gap: 12px;
    }
    .wiz-tool-tile {
        position: relative;
        background: var(--panel);
        border: 1.5px solid var(--border);
        border-radius: 14px;
        padding: 14px;
        display: flex; gap: 12px; align-items: flex-start;
        text-align: left;
        cursor: pointer;
        font: inherit; color: var(--text);
        transition: border-color .15s ease, transform .1s ease, box-shadow .15s ease;
    }
    .wiz-tool-tile:hover {
        border-color: var(--primary);
        transform: translateY(-1px);
        box-shadow: 0 4px 14px rgba(2,164,93,.08);
    }
    .wiz-tool-tile.is-selected {
        border-color: var(--primary);
        background: var(--primary-tint);
        box-shadow: 0 0 0 3px rgba(2, 164, 93, .12);
    }
    .wiz-tool-icon {
        width: 40px; height: 40px;
        border-radius: 10px;
        display: inline-flex; align-items: center; justify-content: center;
        flex-shrink: 0;
    }
    .wiz-tool-body { flex: 1; min-width: 0; }
    .wiz-tool-title {
        font-weight: 700; font-size: 14px;
        display: block;
    }
    .wiz-tool-desc {
        font-size: 12px;
        display: block;
        margin-top: 2px;
    }
    .wiz-tool-badge {
        position: absolute; top: 8px; right: 8px;
        font-size: 10px; font-weight: 700;
        background: var(--secondary);
        color: #fff;
        padding: 3px 7px;
        border-radius: 999px;
        letter-spacing: .03em;
    }

    /* ADIM 3 — AYARLAR */
    .wiz-settings-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 18px;
    }
    .wiz-settings-col { min-width: 0; }
    /* TEK SUTUN (2026-09-05): sag sutundaki BASKI SECENEKLERI 4. adima
       tasindi (bkz. wizard.blade.php). Geriye yalnizca aracin kendi ayarlari
       kaldi; iki sutunluk izgara icinde tek basina durunca sayfanin yarisi
       bosluk oluyordu. Genislik 720'de siniriliyor ki uzun ekranlarda satirlar
       okunmaz sekilde uzamasin. */
    .wiz-settings-tek { grid-template-columns: 1fr; max-width: 720px; }

    /* SEPETE EKLE PANELI (2026-09-05). 4. adimda "Sepete Ekle"ye basilinca
       acilir; baski ayarlari ancak musteri baski istedigini soyleyince
       gorunur. */
    .wiz-sepet-panel {
        margin-top: 18px; padding-top: 18px;
        border-top: 1px dashed var(--line, #dde);
    }
    .wiz-settings-title {
        font-family: var(--font-display);
        font-size: 13px; font-weight: 700;
        color: var(--muted);
        text-transform: uppercase;
        letter-spacing: .04em;
        margin: 0 0 12px;
    }
    .wiz-card {
        background: var(--panel);
        border: 1px solid var(--border);
        border-radius: 12px;
        padding: 16px;
        margin-bottom: 14px;
    }
    .wiz-card-head {
        display: flex; align-items: center; justify-content: space-between;
        gap: 8px; flex-wrap: wrap;
        margin-bottom: 12px;
    }
    .wiz-card-head .muted { font-size: 13px; }
    .wiz-label {
        display: block;
        font-weight: 700;
        font-size: 13px;
        margin-bottom: 8px;
        color: var(--text);
    }
    .wiz-input {
        width: 100%;
        padding: 10px 12px;
        border: 1px solid var(--border);
        border-radius: 8px;
        font: inherit;
        background: var(--panel);
    }
    .wiz-input:focus { outline: 2px solid var(--primary); outline-offset: 1px; }
    .wiz-chip-btn {
        background: var(--panel);
        border: 1px solid var(--border);
        border-radius: 999px;
        padding: 4px 10px;
        font-size: 12px; font-weight: 600;
        color: var(--muted);
        cursor: pointer;
    }
    .wiz-chip-btn:hover { color: var(--text); border-color: var(--primary); }

    .opt-grid {
        display: grid;
        gap: 8px;
    }
    .opt-grid-2 { grid-template-columns: 1fr 1fr; }
    .opt-grid-3 { grid-template-columns: repeat(3, 1fr); }
    .opt-grid-4 { grid-template-columns: repeat(4, 1fr); }
    .opt-card {
        background: var(--panel);
        border: 1.5px solid var(--border);
        border-radius: 10px;
        padding: 10px 12px;
        text-align: left;
        cursor: pointer;
        font: inherit; color: var(--text);
        display: flex; flex-direction: column; gap: 2px;
        transition: border-color .15s ease, background .15s ease;
    }
    .opt-card:hover { border-color: var(--primary); }
    .opt-card.is-selected {
        border-color: var(--primary);
        background: var(--primary-tint);
    }
    .opt-title { font-weight: 700; font-size: 13px; }
    .opt-sub { font-size: 11px; }
    .opt-icon { display: inline-flex; align-items: center; }

    /* SAYFA IZGARASI (pageSelect=true ise) */
    .wiz-page-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
        gap: 8px;
    }
    .wiz-page-tile {
        position: relative;
        background: var(--panel);
        border: 2px solid var(--border);
        border-radius: 8px;
        overflow: hidden;
        cursor: pointer;
        /* A4 (210x297mm) orani - kaynak PDF'in gercek sayfa oranindan bagimsiz,
           tum araclarda tutarli kart gorunumu icin (bkz. .tool-page-tile). */
        aspect-ratio: 210 / 297;
        transition: border-color .15s ease, opacity .15s ease;
    }
    .wiz-page-tile img { width: 100%; height: 100%; object-fit: cover; }
    .wiz-page-num {
        position: absolute; top: 4px; left: 4px;
        background: rgba(255,255,255,.92);
        color: var(--text);
        font-size: 11px; font-weight: 700;
        padding: 1px 5px;
        border-radius: 4px;
    }
    .wiz-page-tile.is-selected {
        border-color: var(--danger);
        opacity: .65;
    }
    .wiz-page-tile.is-in-range,
    .wiz-page-tile.is-in-any-range {
        border-color: var(--primary);
    }
    .wiz-page-tile.is-dragging { opacity: .5; }

    .wiz-zip-warning { color: var(--danger); font-weight: 600; }
    .wiz-zip-note { background: var(--secondary-tint); }

    /* ADIM 4 — SONUÇ */
    .wiz-result {
        background: var(--panel);
        border: 1px solid var(--border);
        border-radius: 14px;
        padding: 20px;
    }
    .wiz-result-strip {
        display: flex; gap: 8px;
        overflow-x: auto;
        padding: 8px 0 16px;
        background: linear-gradient(180deg, var(--primary-tint), var(--panel));
        border-radius: 10px;
        padding: 12px;
        margin-bottom: 16px;
    }
    .wiz-result-strip img {
        width: 80px; height: 108px;
        object-fit: cover;
        border-radius: 6px;
        border: 1px solid var(--border);
        flex-shrink: 0;
    }
    .wiz-result-info { margin-bottom: 16px; }
    .wiz-result-name {
        font-family: var(--font-display);
        font-weight: 700; font-size: 18px;
    }
    .wiz-result-actions {
        display: flex; gap: 10px; flex-wrap: wrap;
    }

    .wiz-busy { text-align: center; }
    .wiz-progress {
        height: 8px;
        background: var(--secondary-tint);
        border-radius: 999px;
        overflow: hidden;
        margin-bottom: 12px;
    }
    .wiz-progress-bar {
        height: 100%;
        background: var(--primary);
        transition: width .15s ease;
    }
    .wiz-error {
        background: var(--danger-tint);
        border-color: var(--danger-border);
        color: var(--danger-600);
    }
    .wiz-price-card {
        background: var(--primary-tint);
        border-color: var(--primary);
    }
    .wiz-price-num {
        font-family: var(--font-display);
        font-weight: 800; font-size: 28px;
        color: var(--primary-700);
        margin-top: 4px;
    }

    /* STICKY ALT BAR */
    .wiz-actions {
        position: sticky; bottom: 16px;
        background: color-mix(in srgb, var(--panel) 95%, transparent);
        backdrop-filter: blur(6px);
        border: 1px solid var(--border);
        border-radius: 14px;
        padding: 12px;
        margin-top: 18px;
        display: flex; gap: 10px; justify-content: space-between;
        box-shadow: 0 -4px 20px rgba(15, 32, 25, .08);
        z-index: 10;
    }
    .wiz-actions .btn { min-width: 120px; }

    /* LANDING CTA KARTI (araclar.blade.php'de kullanilir) */
    .wiz-cta {
        background: linear-gradient(135deg, var(--primary) 0%, var(--primary-700) 100%);
        color: #fff;
        border-radius: 18px;
        padding: 24px;
        margin-bottom: 28px;
        display: flex; align-items: center; justify-content: space-between;
        gap: 16px;
        text-decoration: none;
        transition: transform .15s ease, box-shadow .15s ease;
    }
    .wiz-cta:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 30px rgba(2, 164, 93, .25);
        color: #fff;
    }
    .wiz-cta-body { flex: 1; min-width: 0; }
    .wiz-cta-title {
        font-family: var(--font-display);
        font-weight: 800; font-size: 20px;
        display: block; margin-bottom: 4px;
    }
    .wiz-cta-sub { font-size: 14px; opacity: .9; }
    .wiz-cta-icon {
        font-size: 36px;
        width: 56px; height: 56px;
        background: rgba(255,255,255,.18);
        border-radius: 14px;
        display: inline-flex; align-items: center; justify-content: center;
    }
    .wiz-cta-arrow { font-size: 24px; }

    /* RESPONSIVE */
    @media (max-width: 860px) {
        .wiz-settings-grid { grid-template-columns: 1fr; }
        .wiz-stepper-list::before { left: 18%; right: 18%; }
        .wiz-step-num { width: 28px; height: 28px; font-size: 12px; }
        .wiz-step-icon { font-size: 14px; }
    }
    @media (max-width: 480px) {
        .wiz-stepper-list { grid-template-columns: repeat(4, auto); }
        .wiz-step-label { display: none; }
        .wiz-step-item.is-current .wiz-step-label { display: block; }
        .wiz-cta { flex-direction: column; text-align: center; }
        .wiz-drop { padding: 20px 12px; }
        .wiz-step-panel { padding: 20px; }
    }
    @media (prefers-reduced-motion: reduce) {
        .wiz-tool-tile, .wiz-step-num, .opt-card, .wiz-page-tile {
            transition: none !important;
        }
        .wiz-actions { backdrop-filter: none; }
    }

    /* ============================================================
       PDF Editor — /araclar/editor (Faz 1+)
       Route-scoped: sadece .editor-shell altinda aktif.
       ============================================================ */
    .editor-shell {
        --editor-bg: #2a323a;
        --editor-panel: #ffffff;
        --editor-text: #14201a;
        --editor-muted: #6b7770;
        --editor-border: #dbe5e0;
        --editor-accent: #f0c674;
        --editor-danger: #dc3545;

        position: fixed;
        inset: 0;
        display: grid;
        /* 4. satir (mobile-actionbar) sadece <768px'de icerik alir; genis ekranda
           o satirdaki eleman display:none oldugundan auto-track 0 yukseklige coker. */
        grid-template-rows: auto 1fr auto auto;
        grid-template-columns: 1fr;
        background: var(--editor-bg);
        color: #e6ecea;
        font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        z-index: 100;
        overflow-x: hidden;
    }
    .editor-shell * { box-sizing: border-box; }

    /* ÜST TOOLBAR */
    .editor-toolbar {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: calc(10px + env(safe-area-inset-top, 0px)) calc(14px + env(safe-area-inset-right, 0px)) 10px calc(14px + env(safe-area-inset-left, 0px));
        background: #1f262c;
        border-bottom: 1px solid #14191e;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        /* Kaydirma cubugu koyu zeminde gorunur olmali — kullanici tasan
           dugmelere ulasamadigini bildirdi. Firefox + WebKit ayri ayri. */
        scrollbar-width: thin;
        scrollbar-color: #4c5763 transparent;
    }
    .editor-toolbar::-webkit-scrollbar { height: 8px; }
    .editor-toolbar::-webkit-scrollbar-track { background: #171d22; }
    .editor-toolbar::-webkit-scrollbar-thumb { background: #4c5763; border-radius: 4px; }
    .editor-toolbar::-webkit-scrollbar-thumb:hover { background: #64717f; }
    /* KRITIK: flex cocuklari varsayilan olarak KUCULUR (flex-shrink:1). Bu
       yuzden toolbar tasmak yerine dugmeleri eziyordu ve ayiricilar 0px'e
       dusuyordu (olculdu: 4 ayiricinin dordu de 0px). `flex: none` ile
       ogeler dogal genisliklerini korur, konteyner gercekten tasar ve
       yatay kaydirma anlamli hale gelir. */
    .editor-toolbar > * { flex: none; }
    .editor-toolbar-group {
        display: flex; align-items: center; gap: 4px;
    }
    .editor-toolbar-sep {
        width: 1px; height: 24px;
        background: #3a434b;
        margin: 0 4px;
    }
    /* Bosluk: yer varken sag grubu saga iter, tastigi anda 0'a duser.
       (`flex: none` kurali yukarida `> *` ile geldigi icin burada geri aliniyor.) */
    .editor-toolbar-spacer { flex: 1 1 0 !important; min-width: 0; }

    /* --- Toolbar: yatay kaydirma cubugu yerine kademeli daralma ---
       Kullanici hakli olarak "bu bar sag-sol cubugu olmadan bir tasarima sahip
       olmali" dedi. Olculen genislikler (1280px ekran, toplam 1497px):
         arac grubu 595 · kaydet grubu 340 · zoom+ozellikler 178 · ac/sayfalar
         105 · geri-al grubu 74 · kapat 62 · etiketler toplami 311.
       Yer daraldikca once ETIKETLER dusuyor (title/aria duruyor, erisilebilirlik
       kaybi yok), sonra bar alt satira sariyor. Hicbir dugme gizlenmiyor. */

    /* 1) Once arac grubunun etiketleri: en buyuk kazanc (~320px), ikonlar
          zaten anlasilir ve tooltip'te kisayoluyla birlikte yaziyor. */
    @media (max-width: 1550px) {
        .editor-toolbar [role="radiogroup"] .editor-action-label { display: none; }
        .editor-toolbar [role="radiogroup"] .editor-action { padding: 8px; }
    }
    /* 2) Sonra kalan tum etiketler — bar tamamen ikon moduna gecer. */
    @media (max-width: 1250px) {
        .editor-toolbar .editor-action-label { display: none; }
        .editor-toolbar .editor-action { padding: 8px; }
    }
    /* 3) Dar ekranda kaydirmak yerine ALT SATIRA sar: gizli kalan dugme olmaz,
          kaydirma cubugu tamamen ortadan kalkar. */
    @media (max-width: 1100px) {
        .editor-toolbar { flex-wrap: wrap; overflow-x: visible; row-gap: 6px; }
        .editor-toolbar-spacer { display: none; }
        /* Sarilan satirlarda ayiricilar gorsel gurultu yapmasin. */
        .editor-toolbar-sep { margin: 0 2px; }
    }
    /* 4) Telefonda satir sayisi artinca bar dikeyde cok yer kapliyor
          (375px'te olculdu: 4 satir / 215px). Dugmeleri sikistirip 2-3 satira
          indiriyoruz; dokunma hedefi hala ~34px kaliyor. */
    @media (max-width: 600px) {
        .editor-toolbar { gap: 3px; row-gap: 4px; }
        .editor-toolbar-group { gap: 2px; }
        .editor-toolbar .editor-action { padding: 6px; }
        .editor-toolbar .editor-action svg,
        .editor-toolbar .editor-action .editor-action-icon svg { width: 18px; height: 18px; }
        .editor-toolbar-sep { margin: 0; }
        /* Dokunma hedefi 44 -> 40px. Gruplar birer butun olarak sardigi icin
           bu 4px, geri-al ve zoom gruplarinin AYNI satira sigmasini sagliyor
           (olculdu: 4 satir / 215px -> 3 satir). WCAG 2.5.8'in 24px alt
           siniri hala fazlasiyla asiliyor. */
        .editor-toolbar .editor-action { min-width: 40px; min-height: 40px; }
    }
    .editor-action {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 7px 10px;
        background: transparent;
        border: 1px solid transparent;
        border-radius: 8px;
        color: #cfd6d2;
        font: inherit;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        transition: background .15s ease, border-color .15s ease, color .15s ease;
        white-space: nowrap;
        touch-action: manipulation;
    }
    .editor-action:hover:not(:disabled) {
        background: #2d353c;
        color: #fff;
    }
    .editor-action:disabled {
        opacity: .4;
        cursor: not-allowed;
    }
    .editor-action.is-active {
        background: var(--editor-accent);
        color: #1f262c;
        border-color: var(--editor-accent);
    }
    .editor-action.is-active:hover { background: #d8b15c; }
    .editor-action-primary {
        background: var(--primary);
        color: #fff;
        border-color: var(--primary);
    }
    .editor-action-primary:hover:not(:disabled) {
        background: var(--primary-600);
        border-color: var(--primary-600);
    }
    .editor-action-icon { display: inline-flex; width: 18px; height: 18px; }
    .editor-action-icon svg { width: 100%; height: 100%; }
    .editor-action-label { font-size: 13px; }
    .editor-zoom-readout {
        font-variant-numeric: tabular-nums;
        font-size: 13px;
        font-weight: 600;
        min-width: 48px;
        text-align: center;
        color: #cfd6d2;
    }

    /* ANA YAPI: sidebar + canvas + properties */
    .editor-main {
        position: relative;
        display: grid;
        grid-template-columns: 220px 1fr 280px;
        gap: 0;
        min-height: 0;
        /* .editor-main kendisi .editor-shell'in grid item'i; varsayilan
           min-width:auto (min-content) mobilde tek-sutuna dusunce container'i
           tasirabiliyordu (bkz. "grid blowout") - 0'a sabitleyerek onlenir. */
        min-width: 0;
    }

    /* Mobil drawer tetikleyicileri + backdrop — masaustunde gizli, sadece
       asagidaki @media bloklarinda goruntulenir (bkz. RESPONSIVE). */
    .editor-toggle-sidebar, .editor-toggle-properties { display: none; }
    .editor-drawer-backdrop {
        display: none;
        position: absolute;
        inset: 0;
        background: rgba(0,0,0,.5);
        z-index: 9;
    }

    /* SOL: THUMBNAIL SIDEBAR */
    .editor-sidebar {
        background: #1f262c;
        border-right: 1px solid #14191e;
        display: flex;
        flex-direction: column;
        min-height: 0;
    }
    .editor-sidebar-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 14px;
        border-bottom: 1px solid #2d353c;
    }
    .editor-sidebar-title {
        font-family: var(--font-display);
        font-weight: 700;
        font-size: 13px;
        letter-spacing: .04em;
        text-transform: uppercase;
        color: #9ba6a1;
    }
    .editor-sidebar-count {
        font-size: 12px;
        color: #6b7770;
        font-variant-numeric: tabular-nums;
    }
    .editor-sidebar-list {
        flex: 1;
        overflow-y: auto;
        padding: 8px;
        display: flex;
        flex-direction: column;
        gap: 6px;
    }
    .editor-thumb {
        position: relative;
        background: #2d353c;
        border: 1.5px solid transparent;
        border-radius: 8px;
        padding: 6px;
        cursor: pointer;
        transition: border-color .15s ease, background .15s ease;
        text-align: left;
        color: inherit;
        font: inherit;
        touch-action: manipulation;
    }
    .editor-thumb:hover { background: #353e46; }
    .editor-thumb.is-active {
        border-color: var(--editor-accent);
        background: #353e46;
    }
    .editor-thumb.is-rendering { opacity: .7; }
    .editor-thumb.is-failed { border-color: var(--editor-danger); }
    .editor-thumb-num {
        position: absolute;
        top: 4px; left: 4px;
        background: rgba(0,0,0,.5);
        color: #fff;
        font-size: 10px;
        font-weight: 700;
        padding: 2px 5px;
        border-radius: 3px;
    }
    .editor-thumb-canvas {
        display: block;
        width: 100%;
        aspect-ratio: 210 / 297; /* A4 - tutarlilik icin bkz. .tool-page-tile */
        background: var(--panel);
        border-radius: 4px;
    }

    /* ORTA: CANVAS VIEWPORT */
    .editor-canvas-wrap {
        background: var(--editor-bg);
        overflow: auto;
        position: relative;
        /* CSS Grid'in klasik "1fr blowout"u: grid item'larin varsayilan
           min-width:auto'su (min-content) container'i tasirabilir - ozellikle
           mobilde tek sutuna dusunce fark edilir. overflow:auto zaten bunu
           sifirlar ama emin olmak icin acikca da belirtiliyor. */
        min-width: 0;
    }
    .editor-empty {
        display: flex; align-items: center; justify-content: center;
        height: 100%;
        padding: 32px;
    }
    .editor-empty-card {
        max-width: 480px;
        background: var(--editor-panel);
        color: var(--editor-text);
        border-radius: 14px;
        padding: 40px 32px;
        text-align: center;
        box-shadow: var(--shadow);
    }
    .editor-empty-icon { font-size: 56px; margin-bottom: 12px; }
    .editor-empty-card h2 {
        font-family: var(--font-display);
        font-weight: 800;
        margin: 0 0 8px;
    }
    .editor-empty-card p { margin: 0 0 18px; }
    .editor-empty-drag {
        margin-top: 16px;
        padding: 14px;
        border: 2px dashed var(--editor-border);
        border-radius: 10px;
        font-size: 13px;
        color: var(--editor-muted);
        transition: border-color .15s, background .15s;
    }
    .editor-empty-drag.is-drag {
        border-color: var(--primary);
        background: var(--primary-tint);
        color: var(--primary-700);
    }

    .editor-canvas-stage {
        padding: 32px 16px 64px;
        min-height: 100%;
        display: flex;
        justify-content: center;
    }
    .editor-canvas-pages {
        display: flex;
        flex-direction: column;
        gap: 24px;
        align-items: center;
    }
    .editor-page {
        position: relative;
        background: var(--panel);
        box-shadow: 0 4px 16px rgba(0,0,0,.4);
        border-radius: 2px;
        transform-origin: top center;
        cursor: default;
        overflow: hidden;
        touch-action: manipulation;
    }
    .editor-page.is-active {
        box-shadow: 0 0 0 2px var(--editor-accent), 0 4px 16px rgba(0,0,0,.4);
    }
    .editor-page-canvas {
        display: block;
        pointer-events: none;
    }
    .editor-page-textlayer,
    .editor-page-annotlayer,
    .editor-page-editorlayer {
        position: absolute;
        inset: 0;
        overflow: hidden;
        touch-action: none;
    }
    .editor-page-textlayer { pointer-events: auto; }
    /* PDF.js metin katmani — kutuphanenin kendi CSS'i projeye hic alinmamisti.
       Bu katman GORUNMEZ olmali: yalnizca metin secimi/arama icin var, gorseli
       canvas ciziyor. Span'lar seffaf yapilmazsa belgenin uzerine ikinci bir
       yazi katmani biner (kullanici "soluk yazilar" diye bildirdi).
       Boyutlar `--scale-factor` ile hesaplaniyor; onu JS veriyor
       (bkz. tools-page-grid.js renderPage). */
    .editor-page-textlayer {
        line-height: 1;
        text-align: initial;
        transform-origin: 0 0;
        -webkit-text-size-adjust: none;
        text-size-adjust: none;
        forced-color-adjust: none;
    }
    .editor-page-textlayer span,
    .editor-page-textlayer br {
        position: absolute;
        color: transparent;
        white-space: pre;
        cursor: text;
        transform-origin: 0% 0%;
    }
    .editor-page-textlayer ::selection { background: rgba(90, 150, 255, .35); }
    /* PDF.js'in secim yardimcisi; gorunur olmamali. */
    .editor-page-textlayer .endOfContent {
        display: block;
        position: absolute;
        inset: 100% 0 0;
        z-index: -1;
        cursor: default;
        user-select: none;
    }
    .editor-page-annotlayer { pointer-events: auto; }
    .editor-page-editorlayer { pointer-events: auto; }
    /* Sec/Vurgu/El araclarinda editorlayer'i "gorunmez" yap ki alttaki metin
       secilebilsin (Vurgu: window.getSelection()) ve dokunmatik kaydirma/pan
       kendi custom pan mantigimizla (tools-editor-annot.js) yonetilsin. */
    .editor-canvas-stage[data-tool="select"] .editor-page-editorlayer,
    .editor-canvas-stage[data-tool="highlight"] .editor-page-editorlayer,
    .editor-canvas-stage[data-tool="hand"] .editor-page-editorlayer {
        pointer-events: none;
    }
    .editor-page-num {
        position: absolute;
        bottom: -22px;
        left: 50%;
        transform: translateX(-50%);
        font-size: 12px;
        color: #9ba6a1;
        font-variant-numeric: tabular-nums;
    }

    /* SAĞ: PROPERTIES PANEL */
    .editor-properties {
        background: #1f262c;
        border-left: 1px solid #14191e;
        padding: 16px;
        overflow-y: auto;
    }
    .editor-prop-group {
        margin-bottom: 18px;
    }
    .editor-prop-group h3 {
        font-family: var(--font-display);
        font-weight: 700;
        font-size: 12px;
        letter-spacing: .04em;
        text-transform: uppercase;
        color: #9ba6a1;
        margin: 0 0 10px;
    }
    .editor-prop-label {
        display: block;
        font-size: 12px;
        font-weight: 600;
        color: #cfd6d2;
        margin: 10px 0 6px;
    }
    .editor-color-grid {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        gap: 6px;
    }
    .editor-color {
        width: 100%;
        aspect-ratio: 1;
        border-radius: 6px;
        border: 2px solid transparent;
        cursor: pointer;
        transition: transform .1s ease, border-color .15s ease;
    }
    .editor-color:hover { transform: scale(1.08); }
    .editor-color.is-active {
        border-color: #fff;
        box-shadow: 0 0 0 2px var(--editor-accent);
    }
    .editor-range {
        width: 100%;
        accent-color: var(--editor-accent);
    }
    .editor-input {
        width: 100%;
        padding: 6px 8px;
        background: #2d353c;
        border: 1px solid #3a434b;
        border-radius: 6px;
        color: #e6ecea;
        font: inherit;
        font-size: 13px;
    }
    .editor-input:focus {
        outline: 2px solid var(--editor-accent);
        outline-offset: 1px;
    }

    /* BOTTOM STATUS */
    .editor-status {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 6px calc(14px + env(safe-area-inset-right, 0px)) calc(6px + env(safe-area-inset-bottom, 0px)) calc(14px + env(safe-area-inset-left, 0px));
        background: #14191e;
        color: #9ba6a1;
        font-size: 12px;
        border-top: 1px solid #0d1115;
    }
    .editor-status-dot {
        width: 8px; height: 8px;
        border-radius: 50%;
        background: #4ade80;
    }
    .editor-status-dot.is-busy { background: var(--editor-accent); animation: editor-pulse 1.2s infinite; }
    .editor-status-dot.is-dirty { background: var(--editor-danger); }
    @keyframes editor-pulse {
        0%, 100% { opacity: 1; }
        50% { opacity: .4; }
    }
    .editor-status-spacer { flex: 1; }
    .editor-status-error { color: var(--editor-danger); }

    /* Mobil alt aksiyon cubugu (<768px) — masaustunde/tablette daima gizli,
       "Kaydet / Sepete Ekle / Indir" ust toolbar'daki kalabalik yatay
       kaydirmadan cikarilip basparmak bolgesine (thumb zone) tasinir. */
    .editor-mobile-actionbar { display: none; }

    /* RESPONSIVE — breakpoint standardi: Tablet 768px, Laptop/Desktop 1024px
       (Mobile Small 360 / Mobile Large 414 ayri breakpoint gerektirmez, akiskan
       genislikler + yatay kaydirma ile zaten kesintisiz calisir). */

    /* --- <=1023px (Mobil + Tablet ortak): sayfalar paneli her zaman off-canvas --- */
    @media (max-width: 1023px) {
        .editor-sidebar {
            position: absolute;
            left: 0; top: 0; bottom: 0;
            width: min(78vw, 260px);
            transform: translateX(-100%);
            transition: transform .2s ease;
            z-index: 10;
        }
        .editor-sidebar.is-open { transform: translateX(0); }
        .editor-toggle-sidebar { display: inline-flex; }
        .editor-drawer-backdrop.is-open { display: block; }
        .editor-action-label { display: none; }

        /* Dokunma hedefi >= 44x44px (WCAG) — masaustundeki kompakt buton
           boyutu (padding:7px 10px) bu kademede buyutulur. */
        .editor-action { min-width: 44px; min-height: 44px; }
        .editor-color { min-width: 44px; min-height: 44px; }
        .editor-range, .editor-input { min-height: 44px; }
        .editor-color-grid { grid-template-columns: repeat(4, 1fr); }
    }

    /* --- 768px-1023px (Tablet): iki sutunlu esnek duzen — sol onizleme,
       sag SABIT/gorunur (kaydirilabilir) ayarlar paneli. Sayfalar paneli
       yukaridaki kuraldan devam ederek off-canvas kalir (3. sutun acilmaz). --- */
    @media (min-width: 768px) and (max-width: 1023px) {
        .editor-main { grid-template-columns: 1fr minmax(260px, 300px); }
        .editor-properties {
            position: static;
            transform: none;
            width: auto;
            border-radius: 0;
            box-shadow: none;
        }
        .editor-toggle-properties { display: none; }
    }

    /* --- <768px (Mobil): tek sutun; onizleme ustte, ayarlar paneli alt
       bottom-sheet, sticky alt aksiyon cubugu basparmak erisimine uygun. --- */
    @media (max-width: 767px) {
        .editor-main { grid-template-columns: 1fr; }

        /* Ayarlar paneli: sagdan degil ALTTAN acilan bottom-sheet. */
        .editor-properties {
            position: absolute;
            left: 0; right: 0; bottom: 0; top: auto;
            width: auto;
            max-height: 70dvh;
            border-radius: 16px 16px 0 0;
            box-shadow: 0 -8px 24px rgba(0,0,0,.35);
            transform: translateY(100%);
            transition: transform .25s ease;
            padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
            z-index: 10;
        }
        .editor-properties.is-open { transform: translateY(0); }
        .editor-toggle-properties { display: inline-flex; }

        /* Ust toolbar'daki Indir/Kaydet/Sepete-Ekle grubu alt bara tasinir
           (ayni @click handler'lari .editor-mobile-actionbar icinde tekrar
           kullanilir — bkz. editor.blade.php), tekrari onlemek icin gizlenir. */
        .editor-toolbar-actions { display: none; }

        .editor-mobile-actionbar {
            display: flex;
            gap: 8px;
            padding: 10px calc(12px + env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) calc(12px + env(safe-area-inset-left, 0px));
            background: #1f262c;
            border-top: 1px solid #14191e;
        }
        .editor-mobile-actionbar .editor-action {
            flex: 1;
            justify-content: center;
            min-height: 48px;
        }

        .editor-toolbar { padding-left: calc(10px + env(safe-area-inset-left, 0px)); padding-right: calc(10px + env(safe-area-inset-right, 0px)); gap: 6px; }
        .editor-toolbar-group { gap: 2px; }
        .editor-empty-card { padding: 28px 18px; }
        .editor-empty { padding: 16px; }
    }
    @media (prefers-reduced-motion: reduce) {
        .editor-status-dot.is-busy { animation: none; }
    }

    /* İmza modalı (Faz 1B) — mevcut .modal-backdrop/.modal-card kalıbını kullanır. */
    .editor-signature-card { width: min(520px, 100%); height: auto; }
    .editor-signature-body { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
    .editor-signature-canvas {
        width: 100%; height: 220px; border: 2px dashed var(--editor-border, #cbd5c9);
        border-radius: var(--radius-sm); background: var(--panel); touch-action: none; cursor: crosshair;
    }
    .editor-signature-actions { display: flex; justify-content: flex-end; gap: 8px; }

    /* Custom annotation overlay ogeleri (Faz 1.4/1B — bkz. tools-editor-annot.js) */
    .editor-annot { box-sizing: border-box; }
    .editor-annot-text { user-select: none; }

    /* ============================================================
       404 Sayfa Bulunamadı — resources/views/errors/404.blade.php
       Mobile-first: 360px taban, 768px/1024px min-width kademeleri.
       ============================================================ */
    .error-404 {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 70dvh;
        padding: 32px 16px;
        overflow-x: hidden;
        text-align: center;
    }
    .error-404-inner { width: 100%; max-width: 560px; }
    .error-404-code {
        font-family: var(--font-display);
        font-weight: 800;
        font-size: clamp(72px, 22vw, 140px);
        line-height: 1;
        margin: 0 0 8px;
        background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        letter-spacing: -0.02em;
    }
    .error-404-title {
        font-family: var(--font-display);
        font-weight: 800;
        font-size: clamp(20px, 4.5vw, 28px);
        margin: 0 0 10px;
        color: var(--text);
    }
    .error-404-sub {
        color: var(--muted);
        font-size: 15px;
        line-height: 1.55;
        margin: 0 0 28px;
    }
    .error-404-actions {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px;
        margin-bottom: 28px;
    }
    .error-404-btn {
        min-height: 44px;
        padding: 12px 22px;
        font-size: 15px;
        flex: 1 1 auto;
        min-width: 180px;
    }
    .error-404-search {
        display: flex;
        align-items: center;
        gap: 8px;
        background: var(--panel);
        border: 1.5px solid var(--border);
        border-radius: 999px;
        padding: 6px 6px 6px 18px;
        margin: 0 0 32px;
        max-width: 440px;
        margin-left: auto;
        margin-right: auto;
    }
    .error-404-search-icon { font-size: 15px; opacity: .6; flex-shrink: 0; }
    .error-404-search input[type="search"] {
        flex: 1;
        min-width: 0;
        border: none;
        outline: none;
        background: transparent;
        font: inherit;
        font-size: 15px;
        min-height: 44px;
        color: var(--text);
    }
    .error-404-search .btn {
        min-height: 44px;
        padding: 0 20px;
        flex-shrink: 0;
    }
    .error-404-links-label {
        display: block;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: .04em;
        text-transform: uppercase;
        color: var(--muted);
        margin-bottom: 14px;
    }
    .error-404-links-grid {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    .error-404-links-grid a {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        min-height: 44px;
        padding: 10px 16px;
        border-radius: 12px;
        background: var(--panel);
        border: 1px solid var(--border);
        color: var(--text);
        font-weight: 600;
        font-size: 14px;
        transition: border-color .15s ease, transform .15s ease;
    }
    .error-404-links-grid a:hover {
        border-color: var(--primary);
        color: var(--primary-700);
        text-decoration: none;
        transform: translateY(-1px);
    }
    @media (min-width: 768px) {
        .error-404-links-grid {
            flex-direction: row;
            flex-wrap: wrap;
        }
        .error-404-links-grid a { flex: 1 1 auto; }
    }
    @media (min-width: 1024px) {
        .error-404 { min-height: 74dvh; }
        .error-404-inner { max-width: 620px; }
    }
    @media (prefers-reduced-motion: reduce) {
        .error-404-links-grid a { transition: none; }
    }

    /* ---- Sipariş sorgulama (/siparis-sorgulama) ----
       DEGISKEN ADLARI: bu dosyada --border / --panel / --text / --muted var;
       --line / --surface / --text-1 YOK. Tanimsiz degiskenli bir kural
       tarayici tarafindan atilir ve ogeler cerceve/zeminsiz kalir. */
    .track-wrap { max-width: 760px; margin: 0 auto; display: grid; gap: 18px; }
    .track-form .track-fields { display: grid; grid-template-columns: 1fr 1fr auto; gap: 14px; align-items: end; }
    .track-fields label { display: grid; gap: 6px; font-size: 14px; font-weight: 600; color: var(--text); }
    .track-fields input {
        /* min-height 48px: dokunmatik hedef en az 44px olmali (WCAG 2.5.8);
           font-size 16px iOS'ta odaklanirken sayfayi yakinlastirmayi engeller. */
        min-height: 48px; padding: 12px 14px; font-size: 16px; width: 100%;
        border: 1px solid var(--border); border-radius: var(--radius-sm);
        background: var(--panel); color: var(--text);
        transition: border-color .15s ease, box-shadow .15s ease;
    }
    .track-fields input::placeholder { color: var(--muted); opacity: .75; }
    .track-fields input:hover { border-color: var(--primary-600); }
    .track-fields input:focus {
        outline: none; border-color: var(--primary);
        box-shadow: 0 0 0 3px var(--primary-tint);
    }
    .track-fields button { min-height: 48px; }
    .track-fields button[disabled] { opacity: .6; cursor: progress; }

    /* Hata: yalnizca renkle degil ikon + kenar cizgisiyle de belli olur. */
    .track-error {
        display: flex; gap: 10px; align-items: flex-start;
        margin: 14px 0 0; padding: 12px 14px;
        border: 1px solid #f3c6c6; border-left: 4px solid var(--danger);
        border-radius: var(--radius-sm); background: #fdf3f3;
        color: #8f2020; font-size: 14px; font-weight: 500; line-height: 1.45;
    }
    .track-error::before { content: "!"; font-weight: 800; color: var(--danger); flex: none; }

    .track-head { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; }
    .track-no { font-size: 18px; font-weight: 700; }
    .track-date { font-size: 13px; color: var(--muted); }
    .track-stage-now {
        background: var(--accent); color: var(--primary-700);
        padding: 6px 12px; border-radius: 999px; font-weight: 700; font-size: 14px;
    }

    /* Asama hatti. Tamamlanan · su an · bekleyen ucu de FARKLI okunmali ve
       ayrim YALNIZCA renge dayanmamali (renk korlugu): nokta dolgusu ve yazi
       kalinligi da degisiyor. */
    .track-steps { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 2px; }
    .track-step { display: flex; align-items: center; gap: 10px; padding: 8px 0; position: relative; opacity: .65; }
    .track-step .track-dot {
        width: 14px; height: 14px; border-radius: 50%;
        border: 2px solid var(--border); background: var(--panel); flex: none;
    }
    .track-step + .track-step::before {
        content: ""; position: absolute; left: 6px; top: -8px; width: 2px; height: 16px; background: var(--border);
    }
    .track-step.is-done { opacity: .9; }
    .track-step.is-done .track-dot { background: var(--primary-700); border-color: var(--primary-700); }
    .track-step.is-done + .track-step::before { background: var(--primary-700); }
    .track-step.is-current { opacity: 1; font-weight: 700; }
    .track-step.is-current .track-dot { border-color: var(--primary-700); box-shadow: 0 0 0 4px var(--accent); }
    .track-badge {
        font-size: 12px; font-weight: 700; color: var(--primary-700);
        background: var(--accent); padding: 2px 8px; border-radius: 999px;
    }

    .track-cargo {
        margin-top: 16px; padding: 12px; border-radius: 10px; background: var(--accent);
        display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center; font-size: 14px;
    }
    .track-note { margin: 14px 0 0; font-size: 14px; color: var(--muted); }
    .track-legend h2 { font-size: 18px; margin: 0 0 10px; }
    .track-legend dt { font-weight: 700; margin-top: 10px; font-size: 14px; }
    .track-legend dd { margin: 2px 0 0; font-size: 14px; color: var(--muted); }

    @media (max-width: 640px) {
        .track-form .track-fields { grid-template-columns: 1fr; }
    }

    /* GOOGLE PICKER PENCERESI EKRANA SABITLENIR (2026-08-22).
     *
     * ISLETME: "ilk actigimda sayfanin dibi aciliyor, yukari kaydirinca
     * cookies". Ondan once bir musteri de "ekran boyle kaldi, kapama tusu
     * falan yok" demisti -- ayni sey.
     *
     * SEBEP: Google Picker dialogunu 'position: absolute' ile BELGEYE
     * yerlestiriyor, viewport'a degil. Picker acilirken sayfa dibe kayiyor;
     * dialog belgenin ustunde kaldigi icin musteri bos bir footer'a bakiyor
     * ve pencereyi gormek icin elle yukari kaydirmasi gerekiyor. Isletmenin
     * ekran goruntusunde bu acikca gorunuyordu: sayfa dipte, en ustte
     * dialogun yalnizca alt kenari.
     *
     * 'position: fixed' ile pencere sayfa nereye kayarsa kaysin ekranin ortasinda
     * kalir. Boyutlari Google kendi hesapliyor; burada YALNIZCA konum
     * eziliyor, olculere dokunulmuyor. max-width/max-height ise dar
     * ekranlarda pencerenin disari tasmasini engelliyor.
     *
     * Sinif adlari Google'in kendi HTML'inden geliyor (kod bunlari zaten
     * perdeTemizle() icinde de kullaniyor). Google bir gun adlari
     * degistirirse kural sessizce etkisiz kalir -- zarar vermez, ama belirti
     * geri gelirse ilk bakilacak yer burasi. */
    .picker-dialog-bg {
        position: fixed !important;
        top: 0 !important; left: 0 !important;
        width: 100% !important; height: 100% !important;
    }

    .picker-dialog {
        position: fixed !important;
        top: 50% !important; left: 50% !important;
        margin: 0 !important;
        transform: translate(-50%, -50%) !important;
        max-width: 96vw !important; max-height: 92vh !important;
    }

    /* ====================================================================
       KATALOG VITRINI (/products, /products/{kategori}, /marka/{slug})
       2026-08-30. Eski `.shop-*` sol panel duzeninin yerini aldi.

       Neden yeni onek: `.shop-cats` sol sutun icin yaziliydi ve `position:
       sticky` + 240px grid sutunu varsayiyordu; ayni adlari yeniden
       tanimlamak iki farkli duzen varsayimini tek isim altinda toplardi.
       Eski sol panel kurallari (.shop-layout, .shop-cats, .shop-cat,
       .shop-grid, .shop-result-bar) bu turda SILINDI -- onlari kullanan tek
       sablon buydu. Yalnizca `.shop-search` kaldi, arama kutusu ayni bilesen.
       ==================================================================== */

    /* Ekran okuyucuya gorunur, goze gorunmez. `display:none` DEGIL: o, metni
       ekran okuyuculardan da gizler. */
    .gorsel-gizli {
        position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
        overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
    }

    .kv-basmak { margin-bottom: 20px; }
    .kv-h1 { font-size: 28px; line-height: 1.2; margin: 10px 0 6px; }
    .kv-lead { color: var(--muted); margin: 0; max-width: 62ch; font-size: 15px; }

    .kv-bolum-h {
        font-size: 12px; text-transform: uppercase; letter-spacing: .06em;
        color: var(--muted); font-weight: 700; margin: 0 0 10px;
    }

    /* ---- Kategori / marka kutucuklari ---- */
    .kv-kutucuklar {
        display: grid; gap: 12px; margin-bottom: 22px;
        grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    }
    .kv-kutucuk {
        display: flex; flex-direction: column; gap: 8px; padding: 16px;
        background: var(--panel); border: 1px solid var(--border);
        border-radius: var(--radius); color: var(--text); text-decoration: none;
        transition: border-color .15s, box-shadow .15s, transform .15s;
    }
    .kv-kutucuk:hover, .kv-kutucuk:focus-visible {
        border-color: var(--primary); box-shadow: var(--shadow);
        transform: translateY(-2px); text-decoration: none;
    }
    .kv-kutucuk.secili { border-color: var(--primary); background: var(--primary-tint); }
    .kv-ikon {
        width: 40px; height: 40px; border-radius: 11px; background: var(--primary-tint);
        color: var(--primary-700); display: grid; place-items: center; flex: none;
    }
    .kv-ikon-svg { width: 24px; height: 24px; }
    .kv-kutucuk-ad {
        font-family: var(--font-display); font-weight: 700; font-size: 15px;
        color: var(--ink); display: flex; align-items: baseline; gap: 7px;
    }
    .kv-kutucuk-adet { font-size: 12px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
    .kv-kutucuk-alt { font-size: 12.5px; color: var(--muted); line-height: 1.5; }

    .kv-marka-serit {
        display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 22px;
        -webkit-overflow-scrolling: touch;
    }
    .kv-marka-kart {
        flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
        background: var(--panel); border: 1px solid var(--border); border-radius: 999px;
        padding: 8px 15px; font-size: 13.5px; font-weight: 700; color: var(--ink); text-decoration: none;
    }
    .kv-marka-kart:hover { border-color: var(--primary); text-decoration: none; }
    .kv-marka-tumu { color: var(--primary-700); }
    .kv-chip-adet { font-size: 11.5px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }

    /* ---- Filtre seridi ---- */
    .kv-arama { margin-bottom: 14px; }
    .kv-arac {
        display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
        margin-bottom: 12px;
    }
    /* Marka filtresi KENDI kabinda kayar; sayfa govdesi yatay kaymaz
       (arayuz kurali 1). */
    .kv-marka-filtre {
        display: flex; gap: 7px; overflow-x: auto; flex: 1 1 280px; min-width: 0;
        padding-bottom: 4px; -webkit-overflow-scrolling: touch;
    }
    .kv-arac-sag { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto; }
    .kv-chip {
        display: inline-flex; align-items: center; gap: 6px; flex: none; min-height: 40px;
        background: var(--panel); border: 1px solid var(--border); color: var(--ink);
        border-radius: 999px; padding: 7px 14px; font-size: 13.5px; font-weight: 600;
        text-decoration: none; cursor: pointer;
    }
    .kv-chip:hover { border-color: var(--primary); text-decoration: none; }
    .kv-chip.secili { background: var(--primary-tint); border-color: var(--primary-border); color: var(--primary-700); }
    .kv-chip.secili .kv-chip-adet { color: var(--primary-700); }
    .kv-chip-x { font-weight: 800; opacity: .65; }
    .kv-chip-temizle { border-style: dashed; color: var(--muted); }

    .kv-fiyat-form, .kv-sirala-form { display: flex; align-items: center; gap: 7px; }
    .kv-alan-etiket { font-size: 12.5px; color: var(--muted); font-weight: 600; }
    .kv-fiyat-alan {
        width: 84px; min-height: 40px; border: 1px solid var(--border);
        border-radius: var(--radius-sm); background: var(--panel); color: var(--text);
        /* 16px alti: iOS Safari odaklanirken sayfayi yakinlastirir (arayuz kurali 3) */
        padding: 8px 10px; font-size: 16px;
    }
    .kv-tire { color: var(--muted); }
    .kv-secim {
        min-height: 40px; border: 1px solid var(--border); border-radius: var(--radius-sm);
        background: var(--panel); color: var(--text); padding: 8px 10px;
        font-size: 16px; font-weight: 600; max-width: 100%;
    }
    .kv-kucuk-btn { min-height: 40px; padding: 8px 14px; font-size: 13.5px; }

    .kv-rozet-serit { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 14px; }

    .kv-sonuc { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
    .kv-sonuc-baslik { font-size: 16px; margin: 0; }
    .kv-sonuc-adet { font-size: 13px; font-variant-numeric: tabular-nums; }

    /* ---- Urun izgarasi ---- */
    .kv-izgara { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
    .kv-kart {
        /* Kartin KENDI genisligine gore kural yazabilmek icin. Misafire
           gosterilen "Sepete eklemek icin giris yapin" dugmesi genis ekranda
           bile dar bir izgara sutununda iki satira kiriliyordu; olcu ekran
           degil KART genisligi oldugu icin dogru arac medya sorgusu degil
           container sorgusu (asagida). */
        container-type: inline-size;
        display: flex; flex-direction: column; background: var(--panel);
        border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
        transition: border-color .15s, box-shadow .15s, transform .15s;
    }
    .kv-kart:hover, .kv-kart:focus-within {
        border-color: var(--primary); box-shadow: var(--shadow); transform: translateY(-2px);
    }
    .kv-kart-baglanti { display: flex; flex-direction: column; flex: 1; color: var(--text); text-decoration: none; }
    .kv-kart-baglanti:hover { text-decoration: none; }
    .kv-gorsel {
        position: relative; aspect-ratio: 4 / 3; display: flex; align-items: center;
        justify-content: center; background: var(--primary-tint); color: var(--primary-700); overflow: hidden;
    }
    .kv-gorsel img { width: 100%; height: 100%; object-fit: cover; }
    .kv-gorsel > svg { width: 56px; height: 56px; opacity: .55; }
    .kv-rozet {
        position: absolute; top: 9px; left: 9px; border-radius: 999px; padding: 3px 10px;
        font-size: 11px; font-weight: 800; letter-spacing: .02em;
    }
    /* Renk TEK BASINA ayirt edici degil: rozette rakam ve sozcuk de var
       (arayuz kurali 8). */
    .kv-rozet-uyari { background: var(--danger-tint); color: var(--danger-600); }
    .kv-rozet-yok { background: var(--surface-2); color: var(--muted); }
    .kv-govde { padding: 13px 13px 0; display: flex; flex-direction: column; gap: 4px; flex: 1; }
    .kv-marka {
        font-size: 11px; font-weight: 800; color: var(--primary-700);
        text-transform: uppercase; letter-spacing: .04em;
    }
    .kv-ad { font-weight: 700; font-size: 14px; line-height: 1.4; flex: 1; color: var(--ink); }
    .kv-fiyat-satir { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 8px; }
    .kv-fiyat { font-weight: 800; font-size: 17px; color: var(--ink); font-variant-numeric: tabular-nums; }
    .kv-kdv { font-size: 11px; color: var(--muted); }
    .kv-eylem { padding: 11px 13px 13px; }
    .kv-sepet-btn { width: 100%; min-height: 44px; }
    .kv-sepet-btn .metin-kisa { display: none; }
    @container (max-width: 300px) {
        .kv-sepet-btn .metin-uzun { display: none; }
        .kv-sepet-btn .metin-kisa { display: inline; }
    }

    /* ---- Bos durum ---- */
    .kv-bos { text-align: center; padding: 34px 22px; }
    .kv-bos-ikon { display: inline-flex; color: var(--muted); opacity: .5; margin-bottom: 10px; }
    .kv-bos-ikon .kv-ikon-svg { width: 46px; height: 46px; }
    .kv-bos-baslik { font-size: 17px; margin: 0 0 6px; }
    .kv-bos-metin { margin: 0 auto 16px; max-width: 46ch; font-size: 14px; }
    .kv-bos-eylem { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

    /* ---- Sayfalama ---- */
    .kv-sayfalama { display: flex; gap: 6px; justify-content: center; align-items: center; flex-wrap: wrap; margin-top: 24px; }
    .kv-sayfalama a, .kv-sayfalama .simdi {
        min-width: 44px; min-height: 44px; display: inline-flex; align-items: center;
        justify-content: center; padding: 0 13px; border: 1px solid var(--border);
        border-radius: var(--radius-sm); font-size: 14px; font-weight: 700;
        background: var(--panel); color: var(--ink); text-decoration: none;
        font-variant-numeric: tabular-nums;
    }
    .kv-sayfalama a:hover { border-color: var(--primary); text-decoration: none; }
    .kv-sayfalama .simdi { background: var(--primary); border-color: var(--primary); color: #fff; }
    .kv-atla { color: var(--muted); padding: 0 4px; }

    /* ---- Alt bolum: metin + ozet + SSS ---- */
    .kv-alt {
        display: grid; grid-template-columns: 1.15fr .85fr; gap: 28px;
        margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--border);
    }
    .kv-alt-metin { max-width: 68ch; }
    .kv-alt-metin h2 { font-size: 20px; margin: 0 0 10px; }
    .kv-alt-metin p, .kv-metin-govde { margin: 0 0 12px; color: var(--ink-soft); font-size: 15px; line-height: 1.7; }
    .kv-alt-cta { margin-top: 16px; }

    .kv-yan-h { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; margin: 0 0 12px; }
    .kv-sss-h { margin-top: 20px; }
    .kv-ozet { padding: 18px; }
    .kv-ozet-tablo { border-collapse: collapse; width: 100%; font-size: 14px; }
    .kv-ozet-tablo th, .kv-ozet-tablo td { text-align: left; padding: 9px 2px; border-bottom: 1px solid var(--line); }
    .kv-ozet-tablo tr:last-child th, .kv-ozet-tablo tr:last-child td { border-bottom: 0; }
    .kv-ozet-tablo th { color: var(--muted); font-weight: 600; }
    .kv-ozet-tablo td { font-weight: 700; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }

    .kv-sss details { border-bottom: 1px solid var(--line); }
    .kv-sss summary {
        cursor: pointer; padding: 13px 2px; font-weight: 700; font-size: 14.5px;
        min-height: 44px; display: flex; align-items: center; gap: 10px; list-style: none;
    }
    .kv-sss summary::-webkit-details-marker { display: none; }
    .kv-sss summary::before { content: "+"; color: var(--primary-700); font-weight: 800; width: 14px; flex: none; }
    .kv-sss details[open] summary::before { content: "-"; }
    .kv-sss-cevap { margin: 0 0 14px 24px; font-size: 14px; color: var(--ink-soft); line-height: 1.7; }

    .kv-geri { margin-top: 26px; font-size: 14px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
    .kv-geri a { color: var(--primary-700); font-weight: 600; }

    @media (max-width: 820px) {
        .kv-h1 { font-size: 23px; }
        .kv-kutucuklar { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
        .kv-kutucuk { padding: 13px; }
        .kv-izgara { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
        .kv-alt { grid-template-columns: 1fr; gap: 24px; }
        /* MIN-WIDTH: 0 SART.
         *
         * Flex ogesinin varsayilan `min-width: auto`si onu icerigin
         * min-content genisliginin altina INDIRMEZ. Fiyat formu 375px'lik
         * ekranda 572px'e cikiyor ve "Uygula" dugmesi ekran disinda
         * kaliyordu; body'de `overflow-x: clip` oldugu icin sayfa yatay
         * kaymiyor, yani hata SESSIZ -- dugme yok olmus gibi duruyor.
         * (2026-08-30'da 375px'te olculdu.) */
        .kv-arac-sag { margin-left: 0; width: 100%; min-width: 0; }
        .kv-fiyat-form, .kv-sirala-form { flex: 1 1 100%; min-width: 0; flex-wrap: wrap; }
        .kv-secim { flex: 1 1 150px; min-width: 0; }
        .kv-fiyat-alan { flex: 1 1 80px; width: auto; min-width: 0; max-width: 150px; }
        /* Dar ekranda uzun dugme metni uc satira kiriliyordu (bkz. products/show
           icindeki ayni desen). */
        .kv-sepet-btn .metin-uzun { display: none; }
        .kv-sepet-btn .metin-kisa { display: inline; }
    }

    @media (max-width: 420px) {
        .kv-izgara { grid-template-columns: repeat(2, 1fr); gap: 10px; }
        .kv-govde { padding: 11px 11px 0; }
        .kv-eylem { padding: 9px 11px 11px; }
        .kv-ad { font-size: 13px; }
        .kv-fiyat { font-size: 15.5px; }
    }

    /* ---- Sol filtre paneli duzeni (taslak A) ----
       Vitrin once yatay filtre seridiyle yazilmisti; isletme sol panelli
       yonu secti (2026-08-30). Yatay serit kurallari SILINMEDI: marka
       sayfasi (/marka/{slug}) hâlâ onu kullaniyor -- orada kategori agaci
       yok, tek bir siralama/fiyat seridi yetiyor. */
    .kv-duzen { display: grid; grid-template-columns: 258px 1fr; gap: 22px; align-items: start; }
    .kv-ana { min-width: 0; }

    .kv-yan { display: flex; flex-direction: column; gap: 14px; }
    .kv-yan-kutu { padding: 16px; }
    .kv-yan-h {
        font-size: 12px; text-transform: uppercase; letter-spacing: .06em;
        color: var(--muted); font-weight: 700; margin: 0 0 10px;
    }
    .kv-yaprak { display: none; }
    .kv-yan-link { display: inline-block; margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--primary-700); }

    .kv-agac { display: flex; flex-direction: column; gap: 2px; }
    .kv-dal {
        display: flex; align-items: center; justify-content: space-between; gap: 8px;
        min-height: 40px; padding: 8px 12px; border-radius: 10px;
        font-size: 14px; color: var(--text); text-decoration: none;
    }
    .kv-dal:hover { background: var(--primary-tint); text-decoration: none; }
    .kv-dal.acik { background: var(--primary-600); color: #fff; font-weight: 700; }
    .kv-dal-adet {
        flex: none; font-size: 12px; font-weight: 700; color: var(--muted);
        background: var(--secondary-tint); border-radius: 999px; padding: 1px 9px;
        font-variant-numeric: tabular-nums;
    }
    .kv-dal.acik .kv-dal-adet { background: rgba(255,255,255,.25); color: #fff; }
    .kv-alt-dallar {
        display: flex; flex-direction: column; gap: 2px;
        margin: 2px 0 6px 14px; padding-left: 10px; border-left: 2px solid var(--line);
    }
    .kv-dal-alt { font-size: 13.5px; }

    /* Onay kutusu GORSEL; tiklanan sey <a>. Filtre baglantilari taranabilir
       kalmali (kategori indekslenen eksen, marka /marka'ya giden yol) --
       form ogesi olsalardi tarayici onlari izleyemezdi. */
    .kv-onay {
        display: flex; align-items: center; gap: 10px; min-height: 40px;
        padding: 4px 2px; font-size: 13.5px; color: var(--text); text-decoration: none;
    }
    .kv-onay:hover { text-decoration: none; }
    .kv-onay:hover .kv-onay-ad { color: var(--primary-700); }
    .kv-onay-ad { flex: 1; min-width: 0; }
    .kv-kutu {
        flex: none; width: 18px; height: 18px; border-radius: 5px;
        border: 1.5px solid var(--border); background: var(--panel);
        display: grid; place-items: center; transition: background .12s, border-color .12s;
    }
    .kv-kutu.isaretli { background: var(--primary); border-color: var(--primary); }
    /* Isaret CSS ile ciziliyor: ayri bir SVG ya da font istegi yok
       (Kural 2.7 -- performans siralama faktoru). */
    .kv-kutu.isaretli::after {
        content: ""; width: 5px; height: 9px; margin-top: -2px;
        border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
    }

    /* FIYAT FORMU DAR PANELDE TASIYORDU (isletme bildirdi, 2026-08-30).
     *
     * Form yatay serit icin yazilmisti: iki 84px alan + tire + dugme + bosluk
     * = 272px. Sol panelin ic genisligi 226px, yani "Uygula" panelin disina
     * tasiyordu. Flex ogesinin varsayilan `min-width: auto`si alanlari
     * kucultmedigi icin de kendiliginden toparlanmiyordu.
     *
     * Panelde form SARIYOR: alanlar ustte yan yana, dugme altta tam
     * genislikte. Yatay serit (marka sayfasi) eski davranisinda kaliyor. */
    .kv-yan .kv-fiyat-form { flex-wrap: wrap; min-width: 0; gap: 8px; }
    .kv-yan .kv-fiyat-alan { flex: 1 1 70px; width: auto; min-width: 0; max-width: none; }
    .kv-yan .kv-fiyat-form .btn { flex: 1 1 100%; }

    .kv-sonuc { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
    .kv-sonuc-baslik { font-size: 16px; margin: 0; }
    .kv-sonuc-adet { font-size: 13px; font-weight: 400; font-variant-numeric: tabular-nums; }
    .kv-sonuc-araclar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
    .kv-filtre-dugme { display: none; }

    .kv-rozet-satan { background: var(--primary-600); color: #fff; }

    @media (max-width: 900px) {
        .kv-duzen { grid-template-columns: 1fr; }

        /* JS VARSA panel alttan acilan sayfaya doner. JS yoksa normal akista,
           izgaranin ustunde durur ve dugme hic gorunmez -- filtreye her
           halukarda ulasilir. */
        .kv-js .kv-filtre-dugme { display: inline-flex; }
        .kv-js .kv-yan {
            display: none; position: fixed; inset: auto 0 0 0; z-index: 30;
            max-height: 82vh; overflow-y: auto; gap: 10px;
            background: var(--panel); border-top: 1px solid var(--border);
            border-radius: 18px 18px 0 0;
            padding: 6px 16px calc(18px + env(safe-area-inset-bottom));
            box-shadow: 0 -18px 40px rgba(0, 0, 0, .18);
        }
        .kv-js .kv-yan.acik { display: flex; }
        .kv-js .kv-yan .kv-yan-kutu {
            border: 0; border-radius: 0; box-shadow: none; background: transparent;
            padding: 10px 0; border-bottom: 1px solid var(--line);
        }
        .kv-js .kv-yaprak {
            display: block; width: 44px; height: 4px; border-radius: 999px;
            background: var(--border); margin: 8px auto 2px; flex: none;
        }
        /* Alt sayfa acikken arka plan kaymaz: kaydirinca panelin arkasindaki
           liste hareket ederse musteri yerini kaybediyor. */
        body.kv-kilit { overflow: hidden; }
    }