/* ==========================================================================
   NEO SERVİS — tek parça tasarım sistemi

   İLKELER
   1. Tek aksan ailesi (214° mavi). İkinci bir sıcak renk ailesi yoktur.
   2. Tek kart reçetesi. Hizmet, cihaz, yazı, yorum, adım, fiş — hepsi
      aynı kenarlık, aynı yarıçap, aynı gölge, aynı hover davranışını alır.
   3. Tek bölüm ritmi (--bolum-y). Hiçbir bölüm kendi boşluğunu uydurmaz.
   4. Tek başlık kalıbı: etiket → h2 → giriş.
   5. Üç gölge katmanı, beş yarıçap, dört yüzey. Bunların dışına çıkılmaz.

   Bölümler
   01 Değişkenler          10 Ölçü şeritleri
   02 Sıfırlama            11 Form ve fiş
   03 Tipografi            12 Sihirbaz
   04 Düğme ve rozet       13 SSS
   05 Üst şerit            14 Yazı düzeni
   06 Kahraman             15 Takip ve durum
   07 Bölüm iskeleti       16 Alt bilgi ve yüzen ögeler
   08 Kartlar              17 Dar ekran
   09 Süreç ve listeler    18 Koyu tema
                           19 Hareket ve yazdırma
   ========================================================================== */


/* == 01 Değişkenler ======================================================= */

:root {
    /* Aksan ölçeği — tek aile, ton 214° */
    --aksan-950: #05203f;
    --aksan-900: #072a52;
    --aksan-800: #093868;
    --aksan-700: #0a4a92;
    --aksan-600: #0a5ecb;   /* birincil */
    --aksan-500: #2b7ae4;
    --aksan-400: #63a0ee;
    --aksan-300: #9cc4f6;
    --aksan-200: #cbe0fb;
    --aksan-100: #e4eefd;
    --aksan-50:  #f2f7ff;
    --aksan-rgb: 10, 94, 203;

    /* Yüzeyler */
    --siyah:    #08080a;
    --yuzey-1:  #ffffff;
    --yuzey-2:  #f6f6f8;
    --yuzey-3:  #eeeef1;

    /* Metin */
    --murekkep: #101014;
    --sis:      #5f6169;
    --sis-2:    #8b8d95;
    --ters:     #ffffff;
    --ters-sis: rgba(255, 255, 255, .62);

    /* Çizgiler */
    --cizgi:      #e3e4e8;
    --cizgi-koyu: #d2d4da;
    --cizgi-ters: rgba(255, 255, 255, .14);

    /* Durum renkleri — yalnızca rozet ve bildirimde */
    --yesil:  #106b45;
    --yesil-z:#e8f5ee;
    --kirmizi:#9d2f1c;
    --kirmizi-z:#fdeeea;
    --sari:   #7a5410;
    --sari-z: #fdf3e0;

    /* Tipografi */
    --metin: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
             "Helvetica Neue", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Monaco, Consolas, monospace;

    /* Ölçü */
    --kap: 1140px;
    --yan: clamp(18px, 4vw, 30px);
    --bolum-y: clamp(46px, 5vw, 74px);
    --bosluk: clamp(18px, 2.2vw, 26px);
    --tepe-y: 68px;

    /* Yarıçap */
    --r-xs: 8px;
    --r-s:  12px;
    --r-m:  16px;
    --r-l:  22px;
    --r-xl: 30px;

    /* Gölge — üç katman, başka yok */
    --golge-0: 0 1px 2px rgba(16, 16, 20, .04);
    --golge-1: 0 4px 16px rgba(16, 16, 20, .07), 0 1px 3px rgba(16, 16, 20, .04);
    --golge-2: 0 18px 48px rgba(16, 16, 20, .13), 0 4px 12px rgba(16, 16, 20, .06);

    --hiz: .26s cubic-bezier(.3, .1, .25, 1);
}


/* == 02 Sıfırlama ========================================================= */

*, *::before, *::after { box-sizing: border-box; }

/* flex/grid taşıyan ögelerde [hidden] tarayıcı varsayılanını ezdiği için
   gizlenmiyordu (blog süzgeci, boş liste uyarıları). */
[hidden] { display: none !important; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--tepe-y) + 24px);
}

body {
    margin: 0;
    background: var(--yuzey-1);
    color: var(--murekkep);
    font-family: var(--metin);
    font-size: 17px;
    line-height: 1.5;
    letter-spacing: -.011em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

img, svg, video, canvas { max-width: 100%; display: block; }
/* Simgeler çizgi (stroke) tabanlı; fill="none" özniteliği CSS'e ezdirilmemeli.
   Dolgusuz olmayan SVG'ler renklerini metinden alsın diye attr() yerine
   yalnızca fill özniteliği taşımayanlar hedefleniyor. */
svg:not([fill]) { fill: currentColor; }

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

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; }
table { border-collapse: collapse; width: 100%; }

::selection { background: rgba(var(--aksan-rgb), .2); }

:focus-visible {
    outline: 3px solid rgba(var(--aksan-rgb), .55);
    outline-offset: 2px;
    border-radius: 5px;
}

.gizli-metin {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.atla {
    position: absolute; left: 12px; top: -60px; z-index: 200;
    padding: 12px 20px; border-radius: var(--r-s);
    background: var(--murekkep); color: var(--ters); font-weight: 600;
}
.atla:focus { top: 12px; text-decoration: none; }

.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: 0; }

.kap {
    width: 100%;
    max-width: var(--kap);
    margin-inline: auto;
    padding-inline: var(--yan);
}
.kap.genis { max-width: 1400px; }


/* == 03 Tipografi ========================================================= */

h1, h2, h3, h4, h5 {
    margin: 0;
    font-weight: 640;
    letter-spacing: -.024em;
    line-height: 1.1;
    text-wrap: balance;
}

h1, .sayfa-ad {
    font-size: clamp(34px, 5.2vw, 58px);
    letter-spacing: -.032em;
}

.baslik-2 {
    font-size: clamp(27px, 3.5vw, 42px);
    letter-spacing: -.028em;
}

h3 { font-size: clamp(19px, 1.5vw, 22px); }
h4 { font-size: 16px; }

.giris {
    font-size: clamp(17px, 1.35vw, 20px);
    line-height: 1.55;
    color: var(--sis);
    max-width: 62ch;
    text-wrap: pretty;
}
.giris.sonuk { color: var(--sis); }

/* Etiket — her bölümün üstündeki küçük tanımlayıcı */
.etiket {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 640;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--aksan-700);
    background: var(--aksan-50);
    border: 1px solid var(--aksan-100);
    border-radius: 100px;
    padding: 6px 13px;
    margin: 0 0 16px;
}
.etiket.sade {
    background: none;
    border: 0;
    padding: 0;
    color: var(--aksan-600);
}
.etiket::before {
    content: "";
    width: 5px; height: 5px;
    border-radius: 50%;
    background: currentColor;
    flex: none;
}

/* Koyu zeminde tipografi tersine döner */
.koyu, .kahraman {
    background: var(--siyah);
    color: var(--ters);
}
.koyu .giris, .koyu .sonuk,
.kahraman .giris, .kahraman .sonuk { color: var(--ters-sis); }
.koyu .etiket, .kahraman .etiket {
    color: var(--aksan-300);
    background: rgba(var(--aksan-rgb), .16);
    border-color: rgba(255, 255, 255, .1);
}
.koyu .etiket.sade, .kahraman .etiket.sade { background: none; border: 0; }
.koyu a:not(.dugme), .kahraman a:not(.dugme) { color: var(--aksan-300); }


/* == 04 Düğme ve rozet ==================================================== */

.dugme {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 50px;
    padding: 0 26px;
    border: 1px solid transparent;
    border-radius: 100px;
    background: var(--aksan-600);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -.01em;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--hiz), transform var(--hiz), box-shadow var(--hiz), color var(--hiz), border-color var(--hiz);
}
.dugme:hover {
    background: var(--aksan-700);
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: var(--golge-1);
}
.dugme:active { transform: none; box-shadow: none; }

.dugme.hat {
    background: none;
    color: var(--murekkep);
    border-color: var(--cizgi-koyu);
}
.dugme.hat:hover {
    background: var(--yuzey-2);
    border-color: var(--murekkep);
    box-shadow: none;
}

.dugme.hat.ters,
.koyu .dugme.hat, .kahraman .dugme.hat {
    color: #fff;
    border-color: rgba(255, 255, 255, .3);
    background: rgba(255, 255, 255, .04);
}
.dugme.hat.ters:hover,
.koyu .dugme.hat:hover, .kahraman .dugme.hat:hover {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .55);
}

/* Sade — zemini olmayan metin düğmesi (sihirbaz "Geri" / "Baştan başla") */
.dugme.sade {
    background: none;
    border-color: transparent;
    color: var(--sis);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.dugme.sade:hover {
    background: none;
    color: var(--aksan-600);
    transform: none;
    box-shadow: none;
}

.dugme.kucuk { min-height: 40px; padding: 0 18px; font-size: 14px; }
.dugme[disabled] { opacity: .55; pointer-events: none; }

.dugme-sira {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

/* Metin bağlantısı — okla biten satır içi eylem */
.bag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    font-size: 15px;
    color: var(--aksan-600);
}
.bag::after { content: "→"; transition: transform var(--hiz); }
.bag:hover { text-decoration: none; }
.bag:hover::after { transform: translateX(3px); }

/* Rozet — kart içi küçük etiket */
.rozet {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: -.005em;
    color: var(--sis);
    background: var(--yuzey-2);
    border: 1px solid var(--cizgi);
    border-radius: 100px;
    padding: 5px 12px;
    white-space: nowrap;
}
.rozet.yesil { color: var(--yesil); background: var(--yesil-z); border-color: transparent; }
.rozet-sira { display: flex; flex-wrap: wrap; gap: 8px; }
.koyu .rozet, .kahraman .rozet {
    color: var(--ters-sis);
    background: rgba(255, 255, 255, .06);
    border-color: var(--cizgi-ters);
}

/* Damga — fiş başlığındaki durum mührü */
.damga {
    display: inline-flex;
    align-items: center;
    height: 26px;
    padding: 0 11px;
    border-radius: var(--r-xs);
    background: var(--yuzey-3);
    color: var(--sis);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
}
.damga.yesil { background: var(--yesil-z); color: var(--yesil); }
.damga.hata  { background: var(--kirmizi-z); color: var(--kirmizi); }


/* == 05 Üst şerit ========================================================= */

.tepe {
    position: sticky;
    top: 0;
    z-index: 90;
    height: var(--tepe-y);
    background: rgba(255, 255, 255, .82);
    backdrop-filter: saturate(180%) blur(18px);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    border-bottom: 1px solid var(--cizgi);
}
/* Üst şerit içeriği gövde kabından geniştir; menü sıkışmasın. */
.tepe > .kap {
    max-width: 1340px;
    height: 100%;
    display: flex;
    align-items: center;
    gap: 14px;
}
.tepe.kayik { box-shadow: var(--golge-1); }

.marka { display: flex; align-items: center; gap: 11px; flex: none; }
.marka:hover { text-decoration: none; }
.marka-im {
    width: 36px; height: 36px;
    display: grid; place-items: center;
    border-radius: 10px;
    background: var(--siyah);
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: -.03em;
    flex: none;
}
.marka-im svg { width: 20px; height: 20px; }
/* Logo kendi koyu zeminini getiriyor: kutunun yuvarlak kösesini tasmasin
   diye kirpiliyor. img'ye height verildiginde aspect-ratio ezilir, o yuzden
   iki olcu de burada sabit. */
.marka-im { overflow: hidden; padding: 0; }
.marka-im img { width: 100%; height: 100%; display: block; object-fit: cover; }
.marka-metin { display: flex; flex-direction: column; line-height: 1.16; }
.marka-ad { font-size: 16px; font-weight: 660; color: var(--murekkep); letter-spacing: -.02em; }
.marka-alt { font-size: 11.5px; color: var(--sis-2); letter-spacing: .01em; }

.menu-dugme {
    display: none;
    width: 42px; height: 42px;
    margin-left: auto;
    border: 1px solid var(--cizgi);
    border-radius: 11px;
    background: var(--yuzey-1);
    position: relative;
}
.menu-dugme i {
    position: absolute;
    left: 11px;
    width: 18px; height: 1.5px;
    background: var(--murekkep);
    border-radius: 2px;
    transition: transform var(--hiz), opacity var(--hiz);
}
.menu-dugme i:nth-child(1) { top: 15px; }
.menu-dugme i:nth-child(2) { top: 20px; }
.menu-dugme i:nth-child(3) { top: 25px; }
.menu-dugme[aria-expanded="true"] i:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.menu-dugme[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
.menu-dugme[aria-expanded="true"] i:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

.gezinti { display: flex; align-items: center; gap: 1px; margin-left: 8px; }
.gez-kutu { position: relative; }
/* Geniş panel düğmeye değil üst şeride göre konumlanır: bu kutuda konum
   kaldırılınca kapsayan blok sticky .tepe olur (bkz. .gez-acilir.gez-genis).
   Düğmeye göre ortalandığında 940px'lik dört kolonlu panel, solda duran
   "Onarım Hizmetleri" başlığının altında ekranın sol kenarından taşıyordu. */
.gez-kutu.genis { position: static; }

/* Üst şeritteki başlıklar: açılırı olan .gez-bas, olmayan .gez-bag.
   İkisi de aynı görünür — kullanıcı için tek bir menü satırıdır. */
.gez-bas, .gezinti > .gez-bag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 38px;
    padding: 0 12px;
    border: 0;
    border-radius: 10px;
    background: none;
    color: var(--murekkep);
    font-size: 14.5px;
    font-weight: 520;
    letter-spacing: -.014em;
    white-space: nowrap;
    transition: background var(--hiz), color var(--hiz);
}
.gez-bas:hover, .gezinti > .gez-bag:hover { background: var(--yuzey-2); text-decoration: none; }
.gez-bas svg { width: 9px; height: 6px; color: var(--sis-2); transition: transform var(--hiz); }
.gez-kutu:hover > .gez-bas svg,
.gez-kutu.acik > .gez-bas svg { transform: rotate(180deg); }

/* Etkin bölüm ve etkin sayfa aynı işareti alır. */
.gez-kutu[data-etkin="1"] > .gez-bas,
.gezinti > .gez-bag[aria-current="page"] { color: var(--aksan-600); background: var(--aksan-50); }

.gez-acilir {
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    z-index: 95;
    min-width: 248px;
    padding: 12px;
    background: var(--yuzey-1);
    border: 1px solid var(--cizgi);
    border-radius: var(--r-l);
    box-shadow: var(--golge-2);
    display: grid;
    gap: 2px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity var(--hiz), transform var(--hiz), visibility var(--hiz);
}
/* Fare köprüsü — başlıkla kutu arasındaki boşlukta menü kapanmasın. */
.gez-acilir::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.gez-kutu:hover > .gez-acilir,
.gez-kutu.acik > .gez-acilir { opacity: 1; visibility: visible; transform: none; }

/* Kapsayan blok .tepe (sticky) — yani `left:50%` ekranın ortası, `top:100%`
   üst şeridin alt kenarı. Panel böylece hangi başlıktan açılırsa açılsın
   ekrana göre ortalanır; genişliğin üst sınırı da ekran olduğu için hiçbir
   ekranda kenardan taşamaz. */
.gez-acilir.gez-genis {
    left: 50%;
    /* Şeridin yarısı + düğmenin yarısı (38/2) + 12px boşluk: panel, düğmeye
       göre konumlandığı günkü yerinde duruyor. Fare köprüsü de bu 12px'e
       göre ayarlı, ikisi birlikte değişir. */
    top: calc(50% + 19px + 12px);
    transform: translateX(-50%) translateY(-6px);
    width: min(720px, calc(100vw - 40px));
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px 22px;
    padding: 20px;
}
/* Hizmet paneli cihaz ailesine göre dört kolona açılıyor. Üç kolonluk 720px'e
   sığmıyordu: "MacBook Sıvı Teması Onarımı" gibi adlar iki satıra kırılıyordu.
   Genişliğin üst sınırı yine ekran, bu yüzden dar ekranda taşma olmaz. */
.gez-acilir.gez-genis.dortlu {
    width: min(940px, calc(100vw - 40px));
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px 16px;
}
.gez-kutu:hover > .gez-acilir.gez-genis,
.gez-kutu.acik > .gez-acilir.gez-genis { transform: translateX(-50%); }
/* Geniş panelde köprü düğmenin altındaki 12px'i kapatır. Yüksekliği panelin
   `top` hesabındaki boşlukla aynı olmak zorunda; aksi halde fare düğmeden
   panele inerken menü kapanır. */
.gez-acilir.gez-genis::before { top: -12px; height: 12px; }

.gez-kolon { display: grid; gap: 1px; align-content: start; }
.gez-kolon-ad {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--sis-2);
    margin: 0;
    padding: 6px 10px 8px;
}
/* Açılır kutu içindeki bağlantılar */
.gez-acilir a {
    display: block;
    padding: 9px 11px;
    border-radius: 9px;
    color: var(--murekkep);
    font-size: 14.5px;
    line-height: 1.35;
    transition: background var(--hiz), color var(--hiz);
}
.gez-acilir a:hover { background: var(--aksan-50); color: var(--aksan-700); text-decoration: none; }

/* Menü içindeki eylem düğmesi yalnızca dar ekranda görünür;
   geniş ekranda aynı düğme .tepe-eylem içinde zaten var. */
.gez-eylem { display: none; }

.tepe-eylem { display: flex; align-items: center; gap: 10px; margin-left: auto; flex: none; }
.tepe-tel {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 14.5px;
    font-weight: 620;
    color: var(--murekkep);
    letter-spacing: -.015em;
    white-space: nowrap;
}
.tepe-tel svg { width: 15px; height: 15px; color: var(--aksan-600); flex: none; }
.tepe-tel:hover { color: var(--aksan-600); text-decoration: none; }

/* Okuma ilerleme çubuğu. betik.js kaydırma oranını --oran olarak öğenin
   kendi stiline yazar; burada scaleX ile okunur. Genişlik yerine dönüşüm
   kullanılıyor: her kaydırma karesinde yeniden yerleşim yapılmıyor. */
.ilerleme {
    position: fixed;
    top: 0; left: 0;
    height: 2px;
    width: 100%;
    z-index: 99;
    background: var(--aksan-600);
    transform: scaleX(var(--oran, 0));
    transform-origin: 0 50%;
    will-change: transform;
}


/* == 06 Kahraman ========================================================== */

/* Band tek ekranlık bir sahne: yazı ortada, ilke rayı en altta.
   Yükseklik ekranı geçmesin diye üst şerit payı düşülüyor; çok uzun
   ekranlarda da 760 pikselde duruyor ki band gereksiz boşluğa dönüşmesin. */
.kahraman {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    display: grid;
    grid-template-rows: 1fr auto;
    min-height: min(760px, calc(100svh - var(--tepe-y)));
}
/* Arkasında klip olmayan, tek cümlelik bantlar (404) için: tam ekran yükseklik
   dayatılınca sağda ve altta doldurulacak hiçbir şey olmayan büyük bir boşluk
   kalıyor. Bu varyant bandı içeriği kadar yüksek tutar. */
.kahraman.kisa { min-height: 0; }
.kahraman.kisa .kahraman-ic { padding-block: clamp(52px, 8vh, 92px); }
.kahraman-arka {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, #0b0c11 0%, var(--siyah) 100%);
}

/* Kahraman klibi — dört cihaz ailesi tam kare, birbirine geçerek sırayla döner.
   Band klibi enine kırptığı için ızgara düzeni değil tek kare kullanılıyor.
   Bandın kendi degradesi altta durur; klip yüklenmezse görüntü bozulmaz. */
.kahraman-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Safari otomatik oynatmayı engellediğinde (Düşük Güç Modu, pil tasarrufu,
   "otomatik oynatmayı durdur" tercihi) videonun tam ortasına kendi dev
   başlat düğmesini basıyor. Buradaki videolar dekordur, tıklanacak bir şey
   değiller; ortada duran o üçgen sayfayı amatör gösteriyor. Düğme
   bastırılıyor, klip oynayamazsa yerinde poster karesi kalıyor — kayıp yok.
   Kural yalnızca dekor videolara verilir. Kullanıcının oynat/durdur
   yetkisi olması gereken bir video eklenirse ona bu sınıflardan birini VERME. */
video[data-dekor]::-webkit-media-controls-start-playback-button {
    display: none !important;
    -webkit-appearance: none;
}
video[data-dekor]::-webkit-media-controls {
    display: none !important;
}
video[data-dekor] { pointer-events: none; }

/* Okuma perdesi. Klip bandın konusu olduğu için perde her yeri değil
   YALNIZCA yazının durduğu sol yarıyı kapatır; %55'ten sonra hızla açılır ve
   çekim sağda net görünür. İkinci katman üst şerit ile alt rayın altını
   yumuşatır, üçüncüsü kenarları içeri toplayan hafif bir vinyet. */
.kahraman-perde {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(97deg,
            rgba(6, 7, 11, .95) 0%,
            rgba(6, 7, 11, .9) 26%,
            rgba(6, 7, 11, .66) 44%,
            rgba(6, 7, 11, .28) 62%,
            rgba(6, 7, 11, .06) 82%,
            rgba(6, 7, 11, 0) 100%),
        linear-gradient(180deg,
            rgba(4, 5, 8, .6) 0%,
            rgba(4, 5, 8, 0) 22%,
            rgba(4, 5, 8, 0) 56%,
            rgba(4, 5, 8, .78) 100%),
        radial-gradient(120% 130% at 50% 46%, transparent 46%, rgba(4, 5, 8, .5) 100%);
}

.kahraman-ic {
    align-self: center;
    padding-block: clamp(48px, 7vh, 88px) clamp(40px, 6vh, 72px);
}
/* Yazı sütunu bandın yarısını geçmiyor: perdenin açıldığı yerde bitiyor,
   böylece satır uzunluğu okunur kalıyor ve klip açıkta duruyor. */
.kahraman-ic > * { max-width: 620px; }

/* Üst satır — rozet yerine ince kurumsal künye çizgisi. */
.kahraman-ust {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    margin: 0 0 22px;
    font-size: 12px;
    font-weight: 640;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .78);
}
.kahraman-ust::before {
    content: "";
    width: 32px;
    height: 1px;
    flex: none;
    background: var(--aksan-500);
}
.kahraman-ust span { color: rgba(255, 255, 255, .45); }

.kahraman h1 { font-size: clamp(34px, 4.5vw, 54px); margin-bottom: 20px; }
.kahraman .giris { margin-bottom: 30px; color: rgba(255, 255, 255, .78); }
.kahraman .dugme-sira { margin-bottom: 0; }
.kahraman .dugme.sade { color: rgba(255, 255, 255, .82); text-decoration: none; padding: 0 6px; }
.kahraman .dugme.sade:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* İlke rayı — bandın alt kenarına oturan dört sütunluk künye şeridi.
   Eskiden bandın altında ayrı bir beyaz bölümdü; buraya alınınca ilk ekran
   tek parça oldu ve sayfadan bir bölüm eksildi. */
.kahraman-ray {
    border-top: 1px solid rgba(255, 255, 255, .16);
    background: rgba(5, 6, 10, .42);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}
.kahraman-ray ul {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0;
    list-style: none;
}
.kahraman-ray li {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    min-width: 0;
    padding: 20px clamp(14px, 1.8vw, 26px) 20px 0;
    font-size: 12.5px;
    line-height: 1.45;
    color: rgba(255, 255, 255, .5);
}
.kahraman-ray li + li {
    border-left: 1px solid rgba(255, 255, 255, .12);
    padding-left: clamp(14px, 1.8vw, 26px);
}
.kahraman-ray svg { width: 17px; height: 17px; flex: none; color: var(--aksan-300); margin-top: 1px; }
.kahraman-ray strong {
    display: block;
    margin-bottom: 3px;
    font-size: 14.5px;
    font-weight: 620;
    letter-spacing: -.015em;
    color: #fff;
}

/* == 06b Açılış bandı ===================================================== *
   Ana sayfanın ilk ekranı — "sinema şeridi" düzeni. Yukarıdaki .kahraman
   kuralları SİLİNMEDİ: 404 sayfası hâlâ onları kullanıyor.

   Bandın iki katmanı var:
     1) ŞERİT — klip, kaptan taşıp sayfanın iki kenarına da değer. Ölçek
        buradan gelir; aynı klip küçük bir çerçevede sıradan durur.
     2) LEVHA — beyaz bir blok, şeridin alt kenarını örterek yukarı taşar.
        Kaptan DAR tutulmalı; kap kadar geniş olursa binme görünmez, şerit
        sadece kısalmış gibi okunur. Üstteki ince çizgi katman sınırını
        keskinleştiriyor.

   Bant koyu DEĞİL ve şeridin üstünde yazı YOK — o kalıp (koyu tam ekran
   video + üstünde başlık) bilerek dışarıda bırakıldı. */
.acilis {
    border-bottom: 1px solid var(--cizgi);
    background: var(--yuzey-1);
    padding-bottom: clamp(34px, 5vh, 62px);
}

/* -- Şerit ---------------------------------------------------------------- */
.acilis-serit {
    position: relative;
    overflow: hidden;
    background: var(--siyah);
    /* Yükseklik vh DEĞİL vw'ye bağlı ve bu kritik: klip 16:9 ve `cover` ile
       kırpılıyor, yani kadrajdan ne kadar kaybedildiğini belirleyen şey
       genişlik/yükseklik ORANI. Montaj ~2.45:1 kırpma için hazırlanmıştı
       (tek cihaz ortada). Yine de 16:9'un tamamı gösterilmiyor: şerit
       BİLEREK sinemaskop oranında, ~3.7:1. Cihazın tamamını göstermeye
       çalışmak bandı 800 pikselin üstüne çıkarıp başlığı ilk ekrandan
       atıyordu; burada gösterilen şey cihazın tamamı değil, bir kesit. */
    height: clamp(200px, 27vw, 480px);
}
.acilis-video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Çok yavaş sürüklenme: otomatik oynayan klibin durgun anlarında bile
       bant yaşıyor. Ölçü bilerek küçük — fark edilen değil, hissedilen. */
    animation: acilis-suruklen 22s ease-in-out infinite alternate;
}
@keyframes acilis-suruklen {
    from { transform: scale(1); }
    to   { transform: scale(1.05); }
}
@media (prefers-reduced-motion: reduce) {
    .acilis-video { animation: none; transform: none; }
}
/* Üst kenara ince bir karartma: köşe işaretleri her karede okunsun ve
   şerit üstteki beyaz başlık şeridinden net ayrılsın. */
.acilis-serit::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 130px;
    background: linear-gradient(to bottom, rgba(6, 8, 12, .5), transparent);
    pointer-events: none;
}
/* Köşe işaretleri — film kurgu penceresi dili: solda kim, sağda ne. */
.acilis-im {
    position: absolute;
    top: clamp(12px, 2.2vw, 22px);
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-family: var(--mono);
    font-size: clamp(10px, 1.1vw, 11.5px);
    letter-spacing: .09em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .88);
}
.acilis-im.sol { left: var(--yan); }
.acilis-im.sag { right: var(--yan); }
@media (max-width: 720px) {
    /* Darda iki işaret çarpışıyor; sağdaki cihaz listesi klibin kendisinden
       zaten anlaşılıyor, o gidiyor. */
    .acilis-im.sag { display: none; }
}
.acilis-nokta {
    width: 6px;
    height: 6px;
    flex: none;
    background: var(--aksan-500);
}

/* -- Levha ---------------------------------------------------------------- */
.acilis-levha {
    position: relative;
    z-index: 2;
    max-width: min(100%, 880px);
    /* Yukarı taşma = binme. Sağ dolgu levhanın sağ kenarını yazıdan
       uzaklaştırır; sol dolgu YOK, levhanın sol kenarı kabın hizasında
       kalsın diye (sayfanın geri kalanıyla aynı sütun çizgisi). */
    margin-top: clamp(-116px, -7vw, -44px);
    padding: clamp(24px, 3vw, 40px) clamp(30px, 4vw, 60px) 0 0;
    background: var(--yuzey-1);
    border-top: 1px solid var(--cizgi-koyu);
}
@media (max-width: 760px) {
    /* Darda levha İKİ kenara birden taşar. Yanlarda kalan 18 piksellik klip
       şeridi tasarım gibi değil hata gibi okunuyordu; tam genişlikte levha
       şeridin üstüne kayan bir blok olarak net duruyor. Yan dolgu kap
       dolgusuyla aynı → yazı sayfanın geri kalanıyla hizalı kalıyor. */
    .acilis-levha {
        max-width: none;
        margin-inline: calc(var(--yan) * -1);
        padding-inline: var(--yan);
    }
}

/* Üst satır — damgalı etiket + düz cümle. */
.acilis-ust {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin: 0 0 clamp(16px, 2vw, 24px);
    font-size: 13px;
    color: var(--sis);
}
.acilis-ust > span {
    padding: 4px 9px;
    border: 1px solid var(--murekkep);
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--murekkep);
}

.acilis h1 {
    margin: 0 0 20px;
    max-width: 14ch;
    font-size: clamp(34px, 5.4vw, 72px);
    line-height: .98;
    letter-spacing: -.042em;
    color: var(--murekkep);
}
/* Vurgulu bölüm renk DEĞİŞTİRMEZ, altına ince bir vurgu bandı alır: renkli
   sözcük başlığı ikiye böler, bant bölmeden vurgular. */
.acilis h1 em {
    font-style: normal;
    box-shadow: inset 0 -.09em 0 var(--aksan-600);
}
.acilis .giris {
    margin: 0 0 28px;
    max-width: 56ch;
    color: var(--sis);
}

.acilis-eylem { margin-bottom: 0; align-items: center; }
/* Birincil düğme mavi hap değil mürekkep siyahı: mavi hap her yerde var,
   siyah blok atölyenin kendi dili. */
.dugme.murekkep {
    background: var(--murekkep);
    border-color: var(--murekkep);
    color: var(--ters);
}
.dugme.murekkep:hover { background: #000; border-color: #000; color: var(--ters); }
.acilis-tel {
    font-family: var(--mono);
    font-size: 14.5px;
    color: var(--murekkep);
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 1px;
}
.acilis-tel:hover { text-decoration-color: var(--aksan-600); }

/* Künye — dört ikonlu şerit DEĞİL, tek hairline satır. Masaüstünde dördü
   yan yana, aralarında dikey çizgi; ölçü levhası gibi okunuyor. */
.acilis-kunye {
    display: grid;
    gap: 0;
    margin: clamp(26px, 3.4vw, 44px) 0 0;
    border-top: 1px solid var(--cizgi-koyu);
}
.acilis-kunye > div { padding: 14px 0; }
.acilis-kunye > div + div { border-top: 1px solid var(--cizgi); }
.acilis-kunye dt {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--sis-2);
}
.acilis-kunye dd { margin: 5px 0 0; min-width: 0; }
.acilis-kunye dd b {
    display: block;
    font-size: 16px;
    font-weight: 620;
    letter-spacing: -.015em;
    color: var(--murekkep);
}
.acilis-kunye dd span {
    display: block;
    margin-top: 3px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--sis);
}
@media (min-width: 760px) {
    .acilis-kunye { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    /* Yatay dizilince ayraç üstte değil YANDA olmalı; ilk hücre ayraç almaz,
       yoksa satır kabın soluna bir çizgi fazladan taşar. */
    .acilis-kunye > div + div {
        border-top: 0;
        border-left: 1px solid var(--cizgi);
        padding-left: clamp(16px, 2vw, 28px);
    }
    .acilis-kunye > div { padding-right: clamp(16px, 2vw, 28px); }
}


/* Talep bandı — kahramandan çıkarılan formun kendi bölümü. */
.talep-yazi .baslik-2 { margin: 12px 0 16px; }
.talep-yazi .olcum { border-top-color: var(--cizgi); margin-top: 26px; }
.talep-yazi .olcum dd { color: var(--sis); }
.talep-yazi .kutu { margin-top: 26px; }


/* -- Giriş perdesi --------------------------------------------------------
   Siteye ilk girişte klip tam ekran döner, sonra kırpılarak kahraman bandının
   ölçüsüne iner ve sönerek yerini bandın kendi klibine bırakır. Geometriyi
   betik ölçer; burada yalnızca sahne ve geçiş süreleri tanımlıdır.
   Perde sadece html.giris-acik varken görünür — betik çalışmazsa hiç açılmaz. */
.giris-perde { display: none; }
html.giris-acik { overflow: hidden; }
.giris-perde.acik {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 200;
    background: #05060a;
    transition: clip-path .95s cubic-bezier(.72, .02, .16, 1), opacity .32s linear;
}
.giris-perde.acik .giris-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform-origin: 50% 50%;
    transition: transform .95s cubic-bezier(.72, .02, .16, 1);
}
/* Perde inerken bandın yazısı ve formu aynı anda belirir. */
html.giris-acik .tepe,
html.giris-acik .kahraman-ic,
html.giris-acik .acilis-ic { opacity: 0; }
.tepe, .kahraman-ic, .acilis-ic { transition: opacity .5s ease .35s; }

.giris-atla {
    position: absolute;
    right: clamp(16px, 3vw, 34px);
    bottom: clamp(16px, 3vw, 34px);
    z-index: 2;
    padding: 9px 18px;
    border: 1px solid rgba(255, 255, 255, .34);
    border-radius: 999px;
    background: rgba(6, 8, 12, .5);
    color: #fff;
    font: inherit;
    font-size: .82rem;
    letter-spacing: .02em;
    cursor: pointer;
    backdrop-filter: blur(6px);
}
.giris-atla:hover { background: rgba(6, 8, 12, .82); }
.giris-perde.iniyor .giris-atla { opacity: 0; transition: opacity .2s linear; }


/* == 07 Bölüm iskeleti ==================================================== */

.bolum {
    padding: var(--bolum-y) 0;
    position: relative;
}
.bolum.gri  { background: var(--yuzey-2); }
.bolum.koyu { background: var(--siyah); color: var(--ters); }

/* Aynı renkte iki bölüm yan yana gelirse aralarına saç teli çizgi girer;
   böylece bölüm sınırı belli olur ama zemin değişmez. */
.bolum + .bolum:not(.gri):not(.koyu) { border-top: 1px solid var(--cizgi); }
.bolum.gri + .bolum.gri { border-top: 1px solid var(--cizgi-koyu); }
.bolum.koyu + .bolum.koyu { border-top: 1px solid var(--cizgi-ters); }

.bolum-basi {
    max-width: 62ch;
    margin: 0 auto clamp(26px, 2.8vw, 38px);
    text-align: center;
}
.bolum-basi.sol { margin-inline: 0; text-align: left; }
.bolum-basi .baslik-2 { margin-bottom: 14px; }
.bolum-basi .giris { margin: 0 auto; }
.bolum-basi.sol .giris { margin-inline: 0; }

/* Sayfa başı — iç sayfaların ortak üst bandı */
.sayfa-basi {
    background: var(--siyah);
    color: var(--ters);
    padding: clamp(48px, 6vw, 84px) 0 clamp(40px, 5vw, 68px);
    position: relative;
    overflow: hidden;
}
.sayfa-basi::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(64% 120% at 8% 0%, rgba(var(--aksan-rgb), .42) 0%, transparent 62%);
}
.sayfa-basi > .kap { position: relative; }

.kirinti {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    color: var(--ters-sis);
    margin-bottom: 22px;
    list-style: none;
}
.kirinti li { display: flex; align-items: center; gap: 8px; }
.kirinti li + li::before { content: "/"; color: rgba(255, 255, 255, .28); }
.kirinti a { color: var(--ters-sis); }
.kirinti a:hover { color: #fff; }

.sayfa-etiket { margin-bottom: 14px; }
.sayfa-ad { margin-bottom: 18px; max-width: 20ch; }
.sayfa-ozet {
    font-size: clamp(16.5px, 1.3vw, 19px);
    line-height: 1.56;
    color: var(--ters-sis);
    max-width: 64ch;
    margin: 0 0 26px;
}
.sayfa-basi .dugme-sira { margin-bottom: 30px; }

/* Videolu varyant: solda yazı, sağda sürekli dönen ürün klibi.
   Klip açık gri zeminli olduğu için koyu bandın üstünde kart gibi durur. */
.sayfa-basi.medyali > .kap {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(28px, 4vw, 56px);
}
.sayfa-basi.medyali .sayfa-ad,
.sayfa-basi.medyali .sayfa-ozet { max-width: none; }
.sayfa-basi.medyali .sayfa-olcum { gap: 12px 32px; }
.sayfa-basi-medya {
    border-radius: 20px;
    overflow: hidden;
    background: #eceef1;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .38);
}
.sayfa-basi-video { display: block; width: 100%; height: auto; }
@media (max-width: 899px) {
    .sayfa-basi.medyali > .kap { grid-template-columns: 1fr; }
    .sayfa-basi-medya { order: -1; margin-bottom: 6px; }
}

.sayfa-olcum, .olcum {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 44px;
    margin: 0;
    padding-top: 26px;
    border-top: 1px solid var(--cizgi-ters);
}
.sayfa-olcum > div, .olcum > div { display: grid; gap: 3px; }
.sayfa-olcum dt, .olcum dt {
    font-size: clamp(22px, 2.2vw, 30px);
    font-weight: 660;
    letter-spacing: -.03em;
    line-height: 1.05;
}
.sayfa-olcum dd, .olcum dd {
    margin: 0;
    font-size: 13px;
    color: var(--ters-sis);
    letter-spacing: .01em;
}

/* İkili düzen — anlatım + form/kart */
.ikili-duzen {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    gap: clamp(30px, 4vw, 58px);
    align-items: start;
}
.ikili-duzen.esit { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ikili-duzen.dar-sol { grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); }

.kapanis { text-align: center; max-width: 62ch; margin-inline: auto; }
.kapanis .etiket { margin-bottom: 14px; }
.kapanis .baslik-2 { margin-bottom: 16px; }
.kapanis .dugme-sira { justify-content: center; margin-top: 28px; }


/* == 08 Kartlar =========================================================== */

/* TEK KART REÇETESİ — sitedeki bütün kutular buradan doğar. */
.kutu, .hizmet-kart, .cihaz-kart, .yazi-kart, .katalog-kart,
.bilgi-kart, .adim, .fis, .sihirbaz, .yazar-kutu,
.harita-kutu, .secenek, .yontem-adim {
    position: relative;
    background: var(--yuzey-1);
    border: 1px solid var(--cizgi);
    border-radius: var(--r-l);
    box-shadow: var(--golge-0);
    transition: transform var(--hiz), box-shadow var(--hiz), border-color var(--hiz);
}

/* Tıklanabilir kartların ortak hover'ı */
a.kutu:hover, a.hizmet-kart:hover, a.cihaz-kart:hover, a.yazi-kart:hover,
.secenek:hover {
    transform: translateY(-3px);
    box-shadow: var(--golge-2);
    border-color: var(--cizgi-koyu);
    text-decoration: none;
}

/* Koyu zeminde kart tersine döner */
.koyu .kutu, .koyu .adim, .koyu .bilgi-kart,
.kahraman .kutu, .kahraman .bilgi-kart {
    background: rgba(255, 255, 255, .05);
    border-color: var(--cizgi-ters);
    box-shadow: none;
    color: var(--ters);
}
.koyu .kutu p, .koyu .adim p, .koyu .bilgi-kart p,
.kahraman .kutu p, .kahraman .bilgi-kart p { color: var(--ters-sis); }

/* --- Genel kutu --- */
.kutu { padding: clamp(22px, 2.4vw, 30px); display: block; }
.kutu.kucuk { padding: 20px; border-radius: var(--r-m); }
/* Küçük kartın iskeleti her yerde aynı: <span> (ad + alt satır) ve yanında
   ayrı bir .kutu-ok. Kutu display:block olduğu için ok, kendisinden önceki
   blok seviyesindeki .kutu-alt'ın ALTINA düşüyordu — kartın sol alt köşesinde,
   ayırıcı çizginin altında boş bir satır açan yersiz bir ok duruyordu. Oysa
   .bolge-ag .kutu kuralı ve a.kutu:hover .kutu-ok'un yatay kayması, okun sağ
   kenarda dikey ortada durması gerektiğini söylüyor. */
.kutu.kucuk:has(> .kutu-ok) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}
/* Uzun model adları (“MacBook Air M3 (A3113 / A3114)”) sarmalıyken min-width
   otomatik kalırsa esnek sütun kısalmıyor ve ok kartın dışına taşıyor. */
.kutu.kucuk:has(> .kutu-ok) > span:first-child { flex: 1 1 auto; min-width: 0; }

/* Kompakt kartta ad ile alt satır arasındaki ayırıcı çizgi fazla ağırdı:
   18px boşluk + 16px iç boşluk + çizgi, iki satırlık bir içerik için kartın
   yarısını boşa harcıyordu. Burada alt satır bir künye; çizgi kalkıyor. */
.kutu.kucuk:has(> .kutu-ok) .kutu-ad { margin-bottom: 3px; }
.kutu.kucuk:has(> .kutu-ok) .kutu-alt {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
    font-size: 13.5px;
    color: var(--sis-2);
}
.koyu .kutu.kucuk:has(> .kutu-ok) .kutu-alt,
.kahraman .kutu.kucuk:has(> .kutu-ok) .kutu-alt { color: var(--ters-sis); }

/* Ok artık kartın sağında yuvarlak bir yuvada duruyor. Yalın bir ok, geniş
   kartın sağ boşluğunda başıboş kalıyordu; yuva onu tıklanabilir bir hedef
   gibi gösteriyor ve hover'da kartın nereye gittiğini anlatıyor. */
.kutu.kucuk > .kutu-ok {
    flex: none;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--yuzey-2);
    border: 1px solid var(--cizgi);
    transition: background var(--hiz), border-color var(--hiz), color var(--hiz);
}
.kutu.kucuk > .kutu-ok svg { transition: transform var(--hiz); }
.koyu .kutu.kucuk > .kutu-ok,
.kahraman .kutu.kucuk > .kutu-ok {
    background: rgba(255, 255, 255, .07);
    border-color: var(--cizgi-ters);
    color: var(--aksan-300);
}
/* Yuvalı okta kartın tamamını kaydıran translateX iptal; hareket okun kendisinde. */
a.kutu.kucuk:hover > .kutu-ok {
    transform: none;
    background: var(--aksan-600);
    border-color: var(--aksan-600);
    color: #fff;
}
a.kutu.kucuk:hover > .kutu-ok svg { transform: translateX(2px); }

.kutu h3 { margin-bottom: 10px; }
.kutu p { color: var(--sis); font-size: 15.5px; line-height: 1.55; margin: 0; }
.kutu p + p { margin-top: .8em; }
.kutu-ad {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 17px;
    font-weight: 640;
    letter-spacing: -.02em;
    margin-bottom: 10px;
}
/* Başlığın yanındaki satır içi ikon. Ölçü verilmezse <svg> kutunun boyuna
   yayılıp kartı yüzlerce piksel şişiriyor. */
.kutu-ad svg { width: 18px; height: 18px; flex: none; color: var(--aksan-600); }
.kutu-alt {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--cizgi);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 14px;
    color: var(--sis);
}
.koyu .kutu-alt { border-top-color: var(--cizgi-ters); color: var(--ters-sis); }
/* Ok, kimi sayfada "→" metni kimi sayfada satır içi <svg>. İkisi de aynı boyda. */
.kutu-ok { color: var(--aksan-600); font-weight: 700; transition: transform var(--hiz); }
.kutu-ok svg, .hizmet-ok svg { height: 12px; width: auto; }
a.kutu:hover .kutu-ok { transform: translateX(4px); }

.kutu-ag, .bilgi-ag, .cihaz-ag, .yazi-ag, .bolge-ag {
    display: grid;
    gap: var(--bosluk);
}
.kutu-ag   { grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); }
.bilgi-ag  { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.cihaz-ag  { grid-template-columns: repeat(auto-fit, minmax(214px, 1fr)); }
.yazi-ag   { grid-template-columns: repeat(auto-fit, minmax(288px, 1fr)); }
.bolge-ag  { grid-template-columns: repeat(auto-fit, minmax(206px, 1fr)); }
/* Semt kartında tek kelime ile bir ok var; ad ile ok alt alta durunca kart
   gereksiz yere iki kat uzuyor. İkisi tek satırda, iki uca yaslı. */
.bolge-ag .kutu {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 15px 18px;
}
.bolge-ag .kutu-ad { margin-bottom: 0; font-size: 16px; }
/* Sütun sayısı sabitleyiciler: auto-fit, kart sayısı sütuna tam bölünmediğinde
   son satırda tek başına kalan kart bırakıyor. Öge sayısı bilinen yerlerde
   sütun sayısı elle sabitleniyor. */
.kutu-ag.uclu, .bilgi-ag.uclu, .cihaz-ag.uclu { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kutu-ag.dortlu, .cihaz-ag.dortlu { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* --- İkon kutucuğu — bütün kartlarda aynı --- */
.hizmet-im, .bilgi-im {
    width: 44px; height: 44px;
    display: grid; place-items: center;
    border-radius: var(--r-s);
    background: var(--aksan-50);
    color: var(--aksan-600);
    margin-bottom: 16px;
    flex: none;
}
.hizmet-im svg, .bilgi-im svg { width: 21px; height: 21px; }
.koyu .bilgi-im, .kahraman .bilgi-im {
    background: rgba(var(--aksan-rgb), .22);
    color: var(--aksan-300);
}

/* --- Hizmet kartı --- */
.hizmet-ag { display: grid; grid-template-columns: repeat(auto-fit, minmax(292px, 1fr)); gap: var(--bosluk); }
.hizmet-kart {
    display: flex;
    flex-direction: column;
    padding: clamp(24px, 2.5vw, 30px);
    color: inherit;
}
/* Kart başlığı hizmetler sayfasında h4 (üstünde cihaz ailesi h3'ü var),
   başka yerlerde h3 kalabilsin diye ikisi de aynı boyu alıyor. */
.hizmet-kart h3, .hizmet-kart h4 { font-size: 18px; line-height: 1.3; margin: 0 0 9px; }

/* --- Cihaz ailesine göre öbek --- */
.hizmet-obek + .hizmet-obek { margin-top: clamp(40px, 5vw, 64px); }
.obek-basi {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 14px;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--cizgi);
}
.obek-basi h3 { font-size: clamp(20px, 2vw, 24px); margin: 0; }
.obek-basi p  { color: var(--sis); font-size: 15px; margin: 0; }
.hizmet-ozet {
    color: var(--sis);
    font-size: 15.5px;
    line-height: 1.55;
    margin: 0 0 18px;
    flex: 1;
}
.hizmet-kunye {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    font-size: 13.5px;
    color: var(--sis-2);
}
.hizmet-bag { font-size: 14.5px; font-weight: 600; color: var(--aksan-600); }
.hizmet-ok { color: var(--aksan-600); font-weight: 700; transition: transform var(--hiz); }
a.hizmet-kart:hover .hizmet-ok { transform: translateX(4px); }

/* --- Cihaz kartı --- */
.cihaz-kart {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 24px 22px;
    color: inherit;
}
.cihaz-kart svg { width: 30px; height: 30px; color: var(--aksan-600); }
.cihaz-kart h3 { font-size: 17px; margin: 0; }
.cihaz-kart p { margin: 0; font-size: 14px; color: var(--sis); line-height: 1.5; }
.cihaz-kart .kutu-ok { margin-top: auto; padding-top: 6px; }

/* Görselli varyant: kartın üstünde tam genişlikte bir bant.
   Kart taban reçetesinde overflow yok, o yüzden burada kırpıyoruz. */
.cihaz-kart.fotolu { padding: 0; gap: 0; overflow: hidden; }
.cihaz-resim { display: block; width: 100%; background: #eceef1; }
/* Görsel artık <picture> içinde geliyor; picture varsayılan olarak satır içi,
   altında satır boşluğu bırakmasın diye blok yapılıyor. */
.cihaz-resim picture { display: block; }
.cihaz-resim img { display: block; width: 100%; height: 158px; object-fit: cover; }
.cihaz-yazi {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    flex: 1;
    padding: 20px 22px 22px;
}

/* --- Yazı kartı --- */
.yazi-kart {
    display: flex;
    flex-direction: column;
    padding: clamp(22px, 2.3vw, 28px);
    color: inherit;
}
.yazi-kart .etiket { margin-bottom: 12px; }
/* Kart başlığının düzeyi sayfaya göre değişiyor: blog listesinde yazılar
   sayfanın ana içeriği (h2), ana sayfada ise bir bölümün altında (h3).
   Boyut bu yüzden etikete değil karta bağlı. */
.yazi-kart h2, .yazi-kart h3 {
    font-size: clamp(19px, 1.5vw, 22px);
    margin-bottom: 10px;
    line-height: 1.24;
}
.yazi-kart p { color: var(--sis); font-size: 15px; line-height: 1.55; margin: 0 0 18px; flex: 1; }
.yazi-kunye {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    font-size: 13px;
    color: var(--sis-2);
    padding-top: 15px;
    border-top: 1px solid var(--cizgi);
}
.yazi-kunye > span + span::before { content: "·"; margin-right: 14px; color: var(--cizgi-koyu); }

/* --- Bilgi kartı --- */
.bilgi-kart { padding: 26px 24px; }
.bilgi-kart h3 { font-size: 17px; margin-bottom: 9px; }
.bilgi-kart p { margin: 0; font-size: 15px; color: var(--sis); line-height: 1.55; }

/* --- Harita --- */
.harita-kutu {
    overflow: hidden;
    padding: 0;
    aspect-ratio: 16 / 10;
    background: var(--yuzey-3);
}
.harita-kutu iframe { width: 100%; height: 100%; border: 0; display: block; }

/* --- Yazar kutusu --- */
/* Yazı kenar sütunundaki bilgi kartı: başlık (b), üst satır (span), gövde (p)
   alt alta akar. Yatay dizilirse üç dar sütuna bölünür. */
.yazar-kutu {
    display: block;
    padding: 24px;
    background: var(--yuzey-2);
}
.yazar-kutu > b {
    display: block;
    font-size: 15.5px;
    font-weight: 640;
    letter-spacing: -.012em;
    color: var(--murekkep);
}
.yazar-kutu > span {
    display: block;
    margin-top: 3px;
    font-size: 13px;
    color: var(--sis-2);
}
.yazar-kutu p { margin: 10px 0 0; font-size: 14.5px; color: var(--sis); line-height: 1.55; }
.yazar-kutu p .bag { font-size: 14.5px; }


/* == 09 Süreç ve listeler ================================================= */

.surec {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(226px, 1fr));
    gap: var(--bosluk);
    counter-reset: adim;
}
/* Altı adımlı akışta auto-fit dört sütun açıp ikinci sıraya iki adım bırakıyor;
   üçe sabitlenince 3+3 dengeli oturuyor. */
.surec.uclu { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.adim { padding: 26px 24px; }
.adim h3 { font-size: 17px; margin-bottom: 9px; }
.adim p { margin: 0; font-size: 14.5px; color: var(--sis); line-height: 1.55; }
.adim-no {
    display: grid;
    place-items: center;
    width: 34px; height: 34px;
    border-radius: 50%;
    background: var(--aksan-600);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    margin-bottom: 16px;
}
.koyu .adim-no { background: var(--aksan-500); }

/* Izgara bir <ol>: sıra anlamı taşıdığı için işaretleme doğru, ama numarayı
   kart içindeki .yontem-no yazıyor. list-style kapatılmazsa tarayıcı kendi
   "1." "2." işaretini kartın SOLUNDA, ızgaranın dışında çiziyordu — her kartın
   yanında ikinci bir numara duruyordu. */
.yontem-ag {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--bosluk);
    margin: 0;
    padding: 0;
    list-style: none;
}
.yontem-adim { padding: 24px 22px; }
.yontem-adim h3 { font-size: 16.5px; margin-bottom: 8px; }
.yontem-adim p { margin: 0; font-size: 14.5px; color: var(--sis); line-height: 1.55; }
.yontem-no {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--aksan-600);
    display: block;
    margin-bottom: 12px;
}

/* Rehber sayfasındaki "evde şunu deneyin" maddeleri (inc/sablon-rehber.php).
   Madde imi olarak nokta değil ince bir çizgi: aynı çizgi hizmet kataloğunda
   da kullanılıyor, iki liste aynı dili konuşsun. Sıfırlamada ul'un dolgusu
   alındığı için varsayılan madde imi kutunun dışında kalıp kırpılıyordu. */
.rehber-adim {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--sis);
}
.rehber-adim li { position: relative; padding: 5px 0 5px 15px; }
.rehber-adim li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 16px;
    width: 7px;
    height: 1px;
    background: var(--cizgi-koyu);
}

/* "Bu durumlarda denemeyin" listesi — uyarı olduğu için madde imi çizgi değil
   dolu kırmızı nokta; göz listeyi tarafsız bir tarif sanmasın. */
.uyari-liste {
    display: grid;
    gap: 11px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 15.5px;
    line-height: 1.5;
    color: var(--murekkep);
}
.uyari-liste li { position: relative; padding-left: 26px; }
.uyari-liste li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 7px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--kirmizi);
    box-shadow: 0 0 0 4px var(--kirmizi-z);
}

/* Kontrol listesi — tikli maddeler */
.kontrol-ag {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
    gap: 12px 26px;
    list-style: none;
}
.kontrol {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    font-size: 15.5px;
    line-height: 1.5;
    color: var(--murekkep);
}
/* Tik, işaretin kendisi olan <svg>'dir; ayrıca sözde öge kullanılmıyor. */
.kontrol > svg {
    width: 20px; height: 20px;
    flex: none;
    margin-top: 2px;
    padding: 4px;
    box-sizing: border-box;
    border-radius: 50%;
    background: var(--aksan-50);
    color: var(--aksan-600);
}
.koyu .kontrol { color: var(--ters); }
.koyu .kontrol > svg { background: rgba(var(--aksan-rgb), .28); color: var(--aksan-300); }

.adim-liste {
    display: grid;
    gap: 12px;
    list-style: none;
    counter-reset: sira;
}
.adim-liste li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 15px;
    line-height: 1.55;
    color: var(--sis);
}
.adim-liste li::before {
    counter-increment: sira;
    content: counter(sira);
    width: 24px; height: 24px;
    flex: none;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--aksan-50);
    color: var(--aksan-700);
    font-size: 12.5px;
    font-weight: 700;
}
.adim-liste li strong { color: var(--murekkep); font-weight: 620; }

/* Liste araçları — süzgeç ve arama (blog, hizmet listeleri) */
.liste-arac {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: clamp(26px, 3vw, 38px);
}
.suzgec { display: flex; flex-wrap: wrap; gap: 8px; }
.suzgec button {
    height: 38px;
    padding: 0 16px;
    border: 1px solid var(--cizgi);
    border-radius: 100px;
    background: var(--yuzey-1);
    color: var(--sis);
    font-size: 14px;
    font-weight: 560;
    white-space: nowrap;
    transition: background var(--hiz), color var(--hiz), border-color var(--hiz);
}
.suzgec button:hover { border-color: var(--cizgi-koyu); color: var(--murekkep); }
.suzgec button[aria-pressed="true"] {
    background: var(--murekkep);
    border-color: var(--murekkep);
    color: #fff;
}
.liste-ara { flex: 1; min-width: 240px; max-width: 340px; }
.liste-ara .alan { margin: 0; }
.liste-bos {
    text-align: center;
    padding: 52px 20px;
    color: var(--sis);
    font-size: 16px;
}


/* == 10 Ölçü şeritleri ==================================================== */

/* Açık zeminde rakam şeridi — koyu banttaki .olcum'un ikizi */
.olcu-serit {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(184px, 1fr));
    gap: 1px;
    background: var(--cizgi);
    border: 1px solid var(--cizgi);
    border-radius: var(--r-l);
    overflow: hidden;
}
.olcu-serit > div {
    background: var(--yuzey-1);
    padding: 26px 24px;
    display: grid;
    gap: 6px;
    align-content: start;
}
.olcu-serit dt, .olcu-serit strong {
    font-size: clamp(24px, 2.4vw, 32px);
    font-weight: 660;
    letter-spacing: -.03em;
    line-height: 1.05;
    color: var(--murekkep);
}
.olcu-serit dd, .olcu-serit span {
    margin: 0;
    font-size: 14px;
    color: var(--sis);
    line-height: 1.5;
}
.koyu .olcu-serit { background: var(--cizgi-ters); border-color: var(--cizgi-ters); }
.koyu .olcu-serit > div { background: #0f1015; }
.koyu .olcu-serit dt, .koyu .olcu-serit strong { color: var(--ters); }
.koyu .olcu-serit dd, .koyu .olcu-serit span { color: var(--ters-sis); }


/* == 11 Form ve fiş ======================================================= */

.fis {
    overflow: hidden;
    box-shadow: var(--golge-2);
}
.koyu .fis, .kahraman .fis { background: var(--yuzey-1); color: var(--murekkep); border-color: transparent; }
.koyu .fis p, .kahraman .fis p { color: var(--sis); }

.fis-basi {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 22px 26px;
    background: var(--yuzey-2);
    border-bottom: 1px solid var(--cizgi);
}
/* Başlık düzeyi sayfaya göre değişiyor (bkz. form-talep.php "duzey"), bu yüzden
   biçim tek bir etikete değil kabın içindeki her düzeye bağlı. */
.fis-basi h2, .fis-basi h3, .fis-basi h4 { font-size: 19px; margin: 0; letter-spacing: -.025em; }
.fis-basi .etiket { margin-bottom: 6px; }
.fis-govde { padding: 26px; display: grid; gap: 16px; }
.fis-govde > p { margin: 0; }
.fis-alt {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 16px 26px;
    background: var(--yuzey-2);
    border-top: 1px solid var(--cizgi);
    font-size: 13.5px;
    color: var(--sis);
}

.alan { display: grid; gap: 7px; }
.alan > span, .alan > label > span {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--murekkep);
    letter-spacing: -.008em;
}
.alan i { color: var(--kirmizi); font-style: normal; }
.alan input, .alan select, .alan textarea,
input[type="search"], input[type="text"], input[type="tel"],
input[type="email"], select, textarea {
    width: 100%;
    min-height: 48px;
    padding: 12px 15px;
    border: 1px solid var(--cizgi-koyu);
    border-radius: var(--r-s);
    background: var(--yuzey-1);
    color: var(--murekkep);
    font-size: 16px;
    line-height: 1.45;
    transition: border-color var(--hiz), box-shadow var(--hiz);
    -webkit-appearance: none;
    appearance: none;
}
textarea { min-height: 120px; resize: vertical; }
select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%235f6169' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 11px;
    padding-right: 40px;
}
input::placeholder, textarea::placeholder { color: var(--sis-2); }
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--aksan-600);
    box-shadow: 0 0 0 3px rgba(var(--aksan-rgb), .16);
}
.alan-ikili { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }

/* Alan hatası — betik.js gönderim öncesi .alan kutusuna .hatali verir ve
   içine role="alert" taşıyan bir .alan-uyari satırı ekler. İkisinin de kuralı
   yoktu: uyarı gövde metniyle aynı görünüyor, alanın kendisi hiç işaretlenmiyor
   ve kullanıcı hangi kutunun yanlış olduğunu ancak metni okuyarak anlıyordu.
   Renk tek başına taşıyıcı değil — uyarı metni zaten yazıyla da söylüyor. */
.alan.hatali > input, .alan.hatali > select, .alan.hatali > textarea,
.alan.hatali > label > input, .alan.hatali > label > select, .alan.hatali > label > textarea {
    border-color: var(--kirmizi);
}
.alan.hatali > input:focus, .alan.hatali > select:focus, .alan.hatali > textarea:focus {
    border-color: var(--kirmizi);
    box-shadow: 0 0 0 3px rgba(157, 47, 28, .16);
}
.alan-uyari {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--kirmizi);
}
/* Ünlem işareti sözde ögeyle: uyarı metninin kendisi ekran okuyucuya
   role="alert" ile gidiyor, bu yalnızca gören kullanıcı için işaret. */
.alan-uyari::before {
    content: "!";
    flex: none;
    width: 15px; height: 15px;
    margin-top: 1px;
    border-radius: 50%;
    background: var(--kirmizi);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 15px;
    text-align: center;
}

.bal-kupu { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.onay {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--sis);
    cursor: pointer;
}
.onay input[type="checkbox"] {
    width: 19px; height: 19px;
    min-height: 0;
    margin: 1px 0 0;
    padding: 0;
    flex: none;
    accent-color: var(--aksan-600);
    border-radius: 5px;
    cursor: pointer;
}
.onay a { text-decoration: underline; }

.dosya-yer {
    display: grid;
    place-items: center;
    gap: 6px;
    padding: 22px;
    border: 1.5px dashed var(--cizgi-koyu);
    border-radius: var(--r-m);
    background: var(--yuzey-2);
    text-align: center;
    font-size: 14px;
    color: var(--sis);
    cursor: pointer;
    transition: border-color var(--hiz), background var(--hiz);
}
.dosya-yer:hover { border-color: var(--aksan-600); background: var(--aksan-50); }
.dosya-yer strong { color: var(--murekkep); font-weight: 620; font-size: 15px; }

/* Bildirim — bilgi, hata ve olumlu durum kutusu */
.bildirim {
    display: grid;
    gap: 5px;
    padding: 16px 18px;
    border-radius: var(--r-m);
    border: 1px solid var(--aksan-100);
    background: var(--aksan-50);
    color: var(--aksan-900);
    font-size: 14.5px;
    line-height: 1.55;
}
.bildirim strong { font-weight: 660; color: inherit; }
.bildirim.hata   { border-color: transparent; background: var(--kirmizi-z); color: var(--kirmizi); }
.bildirim.olumlu { border-color: transparent; background: var(--yesil-z);  color: var(--yesil); }
.koyu .bildirim {
    background: rgba(var(--aksan-rgb), .16);
    border-color: var(--cizgi-ters);
    color: var(--ters);
}


/* == 12 Sihirbaz ========================================================== */

.sihirbaz { overflow: hidden; box-shadow: var(--golge-1); }
.sihirbaz-basi {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 20px 26px;
    background: var(--yuzey-2);
    border-bottom: 1px solid var(--cizgi);
}
.sihirbaz-basi h3 { font-size: 18px; margin: 0; }

.sihirbaz-ray { display: flex; gap: 6px; flex: none; }
.sihirbaz-ray i {
    width: 26px; height: 4px;
    border-radius: 100px;
    background: var(--cizgi-koyu);
    transition: background var(--hiz), width var(--hiz);
}
.sihirbaz-ray i.etkin { background: var(--aksan-600); width: 34px; }

.sihirbaz-basi p { margin: 0; font-size: 14px; font-weight: 600; color: var(--sis); }

.sihirbaz-govde { padding: 26px; }
/* Aynı anda tek adım görünür; JS .etkin sınıfını taşır. */
.sihirbaz-adim { display: none; gap: 16px; }
.sihirbaz-adim.etkin { display: grid; }
/* Adım kabına odak yalnızca betik tarafından veriliyor (tabindex="-1"), yeni
   adım ekran okuyucuya okunsun diye. Klavyeyle sekmeleyerek buraya gelinmez,
   bu yüzden odak halkası bastırılıyor — yoksa adım her değiştiğinde bölümün
   tamamının çevresine çerçeve çiziliyor. Kullanıcının kendi odakladığı
   düğmelerin halkasına dokunulmuyor. */
.sihirbaz-adim:focus, .sihirbaz-adim:focus-visible { outline: none; }
.sihirbaz-adim h3 { font-size: 19px; }
.sihirbaz-adim > p { margin: 0; color: var(--sis); font-size: 15px; line-height: 1.55; max-width: 68ch; }

.secenek-ag { display: grid; grid-template-columns: repeat(auto-fit, minmax(198px, 1fr)); gap: 12px; }
/* Cihaz ailesi adımı: auto-fit'e bırakılırsa dar ekranda üç kart alt alta tek
   sütuna düşüp adımı gereksiz uzatıyor. Üçü geniş ekranda tek sırada, 620'nin
   altında ikili + tek kalır. */
.secenek-ag.uclu { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 620px)  { .secenek-ag.uclu { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.secenek {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 15px 17px;
    text-align: left;
    border-radius: var(--r-m);
    box-shadow: none;
}
.secenek b {
    font-size: 15px;
    font-weight: 620;
    color: var(--murekkep);
    letter-spacing: -.015em;
    line-height: 1.3;
}
.secenek span { font-size: 13px; color: var(--sis); line-height: 1.45; }
.secenek:hover { border-color: var(--aksan-600); background: var(--aksan-50); }
.secenek[aria-pressed="true"], .secenek.etkin {
    border-color: var(--aksan-600);
    background: var(--aksan-50);
    box-shadow: 0 0 0 1px var(--aksan-600) inset;
}
.secenek[aria-pressed="true"] b, .secenek.etkin b { color: var(--aksan-700); }

/* Görselli varyant — yalnızca ilk adımdaki cihaz ailesi kartlarında.
   Belirti ve teslim yolu adımlarında görsel yok: orada seçenekler arıza
   başlığı, cihazın kendisi değil. Kadraj .cihaz-kart.fotolu ile aynı
   mantıkta, kart taban reçetesinde overflow olmadığı için burada kırpılıyor. */
.secenek.fotolu { padding: 0; gap: 0; overflow: hidden; }
.secenek-resim { display: block; width: 100%; background: #eceef1; }
.secenek-resim picture { display: block; }
/* Sabit yükseklik yerine oran: kadraj 5:4 kesildi, kutu da 5:4. Böylece
   cihazın hiçbir kenarı kırpılmıyor — sabit yükseklikte kart genişledikçe
   object-fit üstten alttan kesiyordu. contain, ileride farklı oranda bir
   görsel konursa da kırpmak yerine boşluk bırakır. */
.secenek-resim img { display: block; width: 100%; height: auto; aspect-ratio: 5 / 4; object-fit: contain; }
/* Dolgu artık karta değil metne veriliyor; görsel kenardan kenara uzansın. */
.secenek.fotolu > b { padding: 13px 15px 0; }
.secenek.fotolu > span:not(.secenek-resim) { padding: 3px 15px 14px; }
/* Seçilen kartın görseli hafifçe öne çıksın; iç gölge kadrajı da sarsın. */
.secenek.fotolu[aria-pressed="true"] .secenek-resim { box-shadow: inset 0 0 0 1px var(--aksan-600); }

.sihirbaz-sonuc { display: grid; gap: 18px; }
.sihirbaz-sonuc h4 { font-size: 18px; letter-spacing: -.022em; }
.sihirbaz-sonuc > p { margin: 0; color: var(--sis); font-size: 15.5px; line-height: 1.6; }
/* Sihirbaz sonucunun başlığı — para değil, yönlendirilen hizmetin adı */
.sonuc-ad {
    display: block;
    font-size: clamp(19px, 2vw, 24px);
    font-weight: 640;
    letter-spacing: -.026em;
    color: var(--murekkep);
    line-height: 1.25;
}
.sonuc-olcu {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1px;
    margin: 0;
    background: var(--cizgi);
    border: 1px solid var(--cizgi);
    border-radius: var(--r-m);
    overflow: hidden;
}
.sonuc-olcu > div { background: var(--yuzey-1); padding: 16px 18px; display: grid; gap: 4px; }
.sonuc-olcu dt { font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--sis-2); }
.sonuc-olcu dd { margin: 0; font-size: 15.5px; font-weight: 600; color: var(--murekkep); letter-spacing: -.015em; }

.sihirbaz-alt {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 26px;
    background: var(--yuzey-2);
    border-top: 1px solid var(--cizgi);
    font-size: 13.5px;
    color: var(--sis);
}


/* == 13 SSS =============================================================== */

.sss { display: grid; gap: 10px; max-width: 860px; margin-inline: auto; }
.sss.genis { max-width: none; }
.sss details {
    background: var(--yuzey-1);
    border: 1px solid var(--cizgi);
    border-radius: var(--r-m);
    overflow: hidden;
    transition: border-color var(--hiz), box-shadow var(--hiz);
}
.sss details[open] { border-color: var(--cizgi-koyu); box-shadow: var(--golge-1); }
.sss summary {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 19px 22px;
    font-size: 16.5px;
    font-weight: 600;
    letter-spacing: -.018em;
    line-height: 1.4;
    cursor: pointer;
    list-style: none;
}
.sss summary::-webkit-details-marker { display: none; }
.sss summary::after {
    content: "";
    width: 14px; height: 14px;
    flex: none;
    margin-top: 4px;
    background: center / contain no-repeat
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%235f6169' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M7 1.5v11M1.5 7h11'/%3E%3C/svg%3E");
    transition: transform var(--hiz);
}
.sss details[open] summary::after { transform: rotate(135deg); }
.sss .cevap, .sss details > div, .sss details > p {
    padding: 0 22px 21px;
    color: var(--sis);
    font-size: 15.5px;
    line-height: 1.62;
}
.sss .cevap p:last-child { margin-bottom: 0; }
.koyu .sss details { background: rgba(255, 255, 255, .05); border-color: var(--cizgi-ters); }
.koyu .sss summary { color: var(--ters); }
.koyu .sss .cevap { color: var(--ters-sis); }


/* == 14 Yazı düzeni ======================================================= */

.yazi-duzen {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 268px;
    gap: clamp(32px, 4vw, 60px);
    align-items: start;
}
.yazi-govde { max-width: 72ch; font-size: 17.5px; line-height: 1.72; color: #26262c; }
.yazi-govde > * + * { margin-top: 1.15em; }
.yazi-govde h2 {
    font-size: clamp(23px, 2.2vw, 29px);
    margin-top: 1.9em;
    letter-spacing: -.025em;
    color: var(--murekkep);
}
.yazi-govde h3 { font-size: clamp(19px, 1.7vw, 22px); margin-top: 1.7em; color: var(--murekkep); }
.yazi-govde p { margin-bottom: 0; }
.yazi-govde ul, .yazi-govde ol { padding-left: 22px; display: grid; gap: 9px; }
.yazi-govde li { line-height: 1.65; }
.yazi-govde a { text-decoration: underline; text-underline-offset: 3px; }
.yazi-govde blockquote {
    margin: 1.6em 0;
    padding: 18px 24px;
    border-left: 3px solid var(--aksan-600);
    background: var(--aksan-50);
    border-radius: 0 var(--r-m) var(--r-m) 0;
    font-size: 17px;
    color: var(--aksan-900);
}
.yazi-govde blockquote p:last-child { margin-bottom: 0; }
.yazi-govde img { border-radius: var(--r-m); margin: 1.6em 0; }

/* ---- Blog görselleri (2026-09-21) ----
   Kapak ve gövde içi görseller panelden yükleniyor (varlik/blog/). Her <img>
   width/height taşıdığı için yer önceden ayrılıyor; aspect-ratio kartlarda
   farklı oranlı kapakları aynı hizaya getiriyor (object-fit: cover kırpar). */
.yazi-kapak { margin: 0 0 1.7em; }
.yazi-kapak img,
.yazi-gorsel img { display: block; width: 100%; height: auto; margin: 0; border-radius: var(--r-m); }
.yazi-gorsel { margin: 1.6em 0; }
.yazi-gorsel figcaption {
    margin-top: 10px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--sis);
    text-align: center;
}
.yazi-kart-gorsel {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--r-m);
    margin-bottom: 16px;
}
.yazi-govde code {
    font-family: var(--mono);
    font-size: .9em;
    background: var(--yuzey-3);
    padding: 2px 6px;
    border-radius: 5px;
}
.yazi-govde hr { border: 0; border-top: 1px solid var(--cizgi); margin: 2.2em 0; }

.yazi-yan { position: sticky; top: calc(var(--tepe-y) + 22px); display: grid; gap: 18px; }
.icindekiler {
    padding: 22px;
    background: var(--yuzey-2);
    border: 1px solid var(--cizgi);
    border-radius: var(--r-m);
}
/* Başlık, yazı.php'de <p> olarak geliyor. */
.icindekiler > p {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--sis-2);
    margin-bottom: 12px;
}
/* Bağlantılar doğrudan çocuk; sol ray dikey liste görüntüsünü kuruyor. */
.icindekiler a {
    display: block;
    padding: 5px 0 5px 13px;
    font-size: 14.5px;
    line-height: 1.45;
    color: var(--sis);
    border-left: 2px solid var(--cizgi);
    transition: color var(--hiz), border-color var(--hiz);
}
.icindekiler a:hover { color: var(--aksan-600); text-decoration: none; }

/* Okunmakta olan bölüm. .etkin sınıfını betik.js kaydırma konumuna göre veriyor. */
.icindekiler a.etkin {
    color: var(--aksan-700);
    font-weight: 620;
    border-left-color: var(--aksan-600);
}

.yazi-not {
    padding: 18px 20px;
    border-radius: var(--r-m);
    background: var(--aksan-50);
    border: 1px solid var(--aksan-100);
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--aksan-900);
}
.yazi-not strong { font-weight: 660; }

.kunye-liste {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    list-style: none;
    font-size: 13.5px;
    color: var(--sis-2);
}

.yol-not {
    font-size: 13.5px;
    color: var(--sis);
    padding: 12px 16px;
    background: var(--yuzey-2);
    border-radius: var(--r-s);
}

.yasal { font-size: 15px; line-height: 1.7; color: var(--sis); max-width: 76ch; }
.yasal h2 { color: var(--murekkep); margin: 2em 0 .7em; font-size: 22px; }
.yasal h3 { color: var(--murekkep); margin: 1.6em 0 .6em; font-size: 18px; }
.yasal ul, .yasal ol { padding-left: 22px; display: grid; gap: 8px; margin-bottom: 1em; }


/* == 15 Takip ve durum ==================================================== */

/* Durum çizelgesi — takip sayfasındaki dikey akış.
   Kurallar bilerek ul.ray ile daraltıldı: .ray sınıfı başka yerlerde satır içi
   bir şerit adı olarak da kullanılabiliyor, bu düzen oraya sızmamalı. */
ul.ray {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0;
}
ul.ray > li {
    position: relative;
    padding: 0 0 20px 30px;
    min-height: 30px;
}
ul.ray > li:last-child { padding-bottom: 0; }

/* Nokta */
ul.ray > li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 3px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    box-sizing: border-box;
    background: var(--yuzey-1);
    border: 2px solid var(--cizgi-koyu);
}
/* Noktaları birleştiren dikey çizgi */
ul.ray > li::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 19px;
    bottom: 2px;
    width: 2px;
    background: var(--cizgi);
}
ul.ray > li:last-child::after { display: none; }

ul.ray > li > b {
    display: block;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -.012em;
    color: var(--sis-2);
    line-height: 1.35;
}
ul.ray > li > small {
    display: block;
    margin-top: 3px;
    font-family: var(--mono);
    font-size: 12px;
    color: var(--sis-2);
}
ul.ray > li > p {
    margin: 6px 0 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--sis);
}

/* Tamamlanan adım — dolu nokta, çizgi de dolu */
ul.ray > li.tamam::before { background: var(--aksan-600); border-color: var(--aksan-600); }
ul.ray > li.tamam::after  { background: var(--aksan-200); }
ul.ray > li.tamam > b     { color: var(--murekkep); }

/* Şu anki adım — halkalı nokta, vurgulu metin */
ul.ray > li.simdi::before {
    background: var(--aksan-600);
    border-color: var(--aksan-600);
    box-shadow: 0 0 0 4px rgba(var(--aksan-rgb), .16);
}
ul.ray > li.simdi > b {
    color: var(--aksan-600);
    font-weight: 680;
    font-size: 15.5px;
}

/* Henüz gelmemiş adım */
ul.ray > li.bekleyen::before { background: var(--yuzey-1); border-color: var(--cizgi-koyu); }
ul.ray > li.bekleyen > b     { color: var(--sis-2); font-weight: 560; }

table th, table td {
    text-align: left;
    padding: 13px 14px;
    border-bottom: 1px solid var(--cizgi);
    font-size: 14.5px;
}
table th {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--sis-2);
}
table td { color: var(--sis); }
table td strong { color: var(--murekkep); font-weight: 620; }


/* == 16 Alt bilgi ve yüzen ögeler ========================================= */

.dip {
    background: var(--siyah);
    color: var(--ters-sis);
    padding: clamp(42px, 4vw, 58px) 0 30px;
    font-size: 14.5px;
    line-height: 1.62;
}
.dip a { color: var(--ters-sis); }
.dip a:hover { color: #fff; text-decoration: none; }

.dip-ag {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
    gap: 30px 26px;
    padding-bottom: 34px;
    border-bottom: 1px solid var(--cizgi-ters);
}
.dip-sutun summary { list-style: none; cursor: default; }
.dip-sutun summary::-webkit-details-marker { display: none; }
/* h2 çünkü dip sütunları sayfanın ana bölümleriyle aynı derinlikte; h4 yazılınca
   sayfanın son h2'sinden sonra h2 → h4 atlaması oluyordu. Görsel boyut zaten
   burada tanımlı, etiket değişimi görünümü etkilemiyor. */
.dip-sutun h2 {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 15px;
}
.dip-sutun ul { display: grid; gap: 4px; list-style: none; }
.dip-sutun li { font-size: 14px; line-height: 1.5; }
/* Dokunma hedefi: satırlar 21 pikselde kalıyordu, WCAG 2.5.8 en az 24 istiyor.
   Bağlantıyı blok yapıp dikey iç boşluk veriyoruz; grid boşluğu buna karşılık
   10'dan 4'e indi ki sütunun toplam yüksekliği değişmesin. */
.dip-sutun li a { display: inline-block; padding: 3px 0; min-height: 24px; }

.feragat {
    margin: 30px 0 0;
    font-size: 12.5px;
    line-height: 1.62;
    color: rgba(255, 255, 255, .42);
    max-width: 96ch;
}

.dip-alt {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid var(--cizgi-ters);
    font-size: 12.5px;
    color: rgba(255, 255, 255, .42);
}
/* Yapımcı künyesi ortada durur; telif ve ülke iki uçta kalsın diye kalan
   boşluğu o alır. Dar ekranda üç satır alt alta düşünce ortalama bozulmasın
   diye hizalama yalnızca geniş ekranda merkez. */
.dip-kunye { color: rgba(255, 255, 255, .5); }
.dip-kunye b { font-weight: 600; color: rgba(255, 255, 255, .72); }
/* Künye bağlantısı dip yazısının rengini korur; tıklanabilirliği alt çizgi
   anlatır. Mavi aksan verilseydi dip bandında tek başına parlayıp asıl
   gezinti bağlantılarından daha baskın görünürdü. */
.dip-kunye a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, .3); }
.dip-kunye a:hover { text-decoration-color: rgba(255, 255, 255, .7); }
.dip-kunye a:hover b { color: #fff; }
@media (min-width: 760px) { .dip-kunye { flex: 1 1 auto; text-align: center; } }

.yuzen-wa {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 80;
    width: 54px; height: 54px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: #25d366;
    color: #fff;
    box-shadow: var(--golge-2);
    transition: transform var(--hiz);
}
.yuzen-wa:hover { transform: scale(1.06); text-decoration: none; }
.yuzen-wa svg { width: 27px; height: 27px; }

.eylem-cubugu {
    display: none;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 85;
    gap: 8px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, .93);
    backdrop-filter: saturate(180%) blur(18px);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    border-top: 1px solid var(--cizgi);
}
.eylem-cubugu .dugme { flex: 1; min-height: 46px; padding: 0 10px; font-size: 14.5px; }


/* == 17 Dar ekran ========================================================= */

@media (max-width: 1040px) {
    .kutu-ag.uclu, .bilgi-ag.uclu, .cihaz-ag.uclu { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
    .surec.uclu { grid-template-columns: repeat(auto-fit, minmax(226px, 1fr)); }
    .kutu-ag.dortlu, .cihaz-ag.dortlu { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .yazi-duzen { grid-template-columns: minmax(0, 1fr); }
    .yazi-yan { position: static; order: -1; }
    .icindekiler { position: static; }
}

@media (max-width: 900px) {
    .ikili-duzen, .ikili-duzen.esit, .ikili-duzen.dar-sol {
        grid-template-columns: minmax(0, 1fr);
    }
    .sayfa-ad { max-width: none; }

    /* Dar ekranda yazı bandın soluna değil tamamına yayılıyor; yatay perde
       yerine üstü açık, aşağı doğru koyulaşan dikey bir perde gerekiyor.
       Klip üst üçte birde açıkta kalır, yazı alt yarıda okunur. */
    .kahraman { min-height: 0; }
    .kahraman-ic > * { max-width: none; }
    .kahraman-perde {
        background:
            linear-gradient(180deg,
                rgba(6, 7, 11, .58) 0%,
                rgba(6, 7, 11, .34) 16%,
                rgba(6, 7, 11, .82) 44%,
                rgba(4, 5, 8, .94) 68%,
                rgba(4, 5, 8, .96) 100%);
    }
    .kahraman-ic { padding-block: clamp(120px, 26vw, 200px) clamp(34px, 6vw, 52px); }

    .kahraman-ray ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .kahraman-ray li { padding: 16px clamp(12px, 3vw, 20px) 16px 0; }
    .kahraman-ray li + li { border-left: 0; padding-left: 0; }
    .kahraman-ray li:nth-child(2n) { padding-left: clamp(12px, 3vw, 20px); border-left: 1px solid rgba(255, 255, 255, .12); }
    .kahraman-ray li:nth-child(n + 3) { border-top: 1px solid rgba(255, 255, 255, .12); }
}

@media (max-width: 540px) {
    .kahraman-ray ul { grid-template-columns: minmax(0, 1fr); }
    .kahraman-ray li { padding: 14px 0; }
    .kahraman-ray li:nth-child(2n) { padding-left: 0; border-left: 0; }
    .kahraman-ray li + li { border-top: 1px solid rgba(255, 255, 255, .12); }
}

/* Masaüstü üst şeridi doğal halinde ~1240px istiyor (marka + altı başlıklı
   menü + telefon + düğme). 2026-08-17'de ölçüldü: 1024px'te (iPad yatay) sağ
   kenar 1211'e taşıp tüm sayfayı yatay kaydırtıyordu. Bu ara bant taşmayı
   önlemek için şeridi sıkıştırır; yetmediği yerde aşağıdaki blok menüyü
   tümden hamburgere çevirir. */
@media (max-width: 1240px) {
    .tepe > .kap { gap: 10px; }
    /* Telefon zaten menü içinde, dip şeritte ve iletişim sayfasında var;
       burada gizlemek 136px kazandırıyor. */
    .tepe-tel { display: none; }
    .gezinti { margin-left: 4px; }
    .gez-bas, .gezinti > .gez-bag { padding: 0 9px; font-size: 14px; }
}

/* Üst şerit burada hamburgere döner. Sınır 1080: iPad yatay (1024) menüye
   düşsün, 1100-1280 arası dizüstü pencereleri masaüstü menüsünü korusun.
   Dokunma donanımına özgü öğeler (alt eylem çubuğu, yüzen WhatsApp) bu blokta
   DEĞİL, aşağıdaki 860px bloğunda kalır: ekran darlığıyla parmakla kullanım
   ayrı sorular. */
@media (max-width: 1080px) {
    .menu-dugme { display: block; }
    .tepe-eylem { display: none; }

    /* backdrop-filter, .tepe'yi position:fixed için kapsayıcı bloğa çevirir ve
       aşağıdaki tam ekran menüyü 68px'e hapseder. Dar ekranda kapatılıyor. */
    .tepe { backdrop-filter: none; background: var(--yuzey-1); }

    .gezinti {
        position: fixed;
        top: var(--tepe-y);
        left: 0; right: 0;
        bottom: 0;
        z-index: 88;
        margin: 0;
        padding: 16px var(--yan) 40px;
        background: var(--yuzey-1);
        border-top: 1px solid var(--cizgi);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
    }
    .gezinti.acik { display: flex; }

    .gez-kutu { border-bottom: 1px solid var(--cizgi); }
    .gez-bas, .gezinti > .gez-bag {
        width: 100%;
        justify-content: space-between;
        height: 54px;
        padding: 0 4px;
        font-size: 17px;
        font-weight: 560;
        border-radius: 0;
        background: none;
    }
    .gezinti > .gez-bag { border-bottom: 1px solid var(--cizgi); }
    .gez-bas:hover, .gezinti > .gez-bag:hover { background: none; color: var(--aksan-600); }
    .gez-bas svg { width: 12px; height: 8px; }
    .gez-kutu:hover > .gez-bas svg { transform: none; }
    .gez-kutu.acik > .gez-bas svg { transform: rotate(180deg); }

    /* Açılır menü dar ekranda katman değil, akış içinde liste olur */
    .gez-acilir, .gez-acilir.gez-genis {
        position: static;
        width: auto;
        min-width: 0;
        transform: none;
        opacity: 1;
        visibility: visible;
        box-shadow: none;
        border: 0;
        border-radius: 0;
        padding: 0 0 14px 4px;
        grid-template-columns: minmax(0, 1fr);
        gap: 1px;
        display: none;
    }
    .gez-acilir::before { display: none; }
    .gez-kutu:hover > .gez-acilir { display: none; }
    .gez-kutu.acik > .gez-acilir,
    .gez-kutu.acik > .gez-acilir.gez-genis { display: grid; transform: none; }
    .gez-kolon-ad { padding: 14px 8px 4px; }
    .gez-acilir a { padding: 11px 8px; font-size: 15.5px; }

    .gez-eylem { display: inline-flex; margin-top: 20px; width: 100%; }
}

/* 861-1080 bandının kendine özgü boşluğu: telefon 1240'ta üst şeritten
   gizleniyor, alt eylem çubuğu ise ancak 860'ta açılıyor. Aradaki bantta
   numara hiçbir yerde görünmez kalıyordu. Burada geri alınıyor; yanındaki
   randevu düğmesi menüdeki "Randevu Al"a devredildiği için gizli.
   Sıra: marka — telefon — hamburger (ikisinde de margin-left:auto var,
   order olmadan telefon düğmenin sağına düşüyor). */
/* Ana sayfadaki cihaz ızgarası üç kart. auto-fit bu bantta iki sütun veriyor
   ve üçüncü kart yarım satırda yalnız kalıyordu; nerede kırıldığı da dolgu
   değiştikçe kayıyordu. Sütun sayısı elle sabitlendi, yalnız kalan kart tam
   satırı alıyor. Görseli sabit yükseklikli (object-fit: cover) olduğu için
   genişlemek onu büyütmüyor, yalnızca boşluğu kapatıyor. */
@media (min-width: 621px) and (max-width: 860px) {
    .cihaz-ag.uclu { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cihaz-ag.uclu > :last-child { grid-column: 1 / -1; }
}

@media (min-width: 861px) and (max-width: 1080px) {
    .tepe-eylem { display: flex; order: 2; }
    .tepe-eylem .dugme { display: none; }
    .tepe-tel { display: inline-flex; }
    .menu-dugme { order: 3; margin-left: 14px; }
}

/* Parmakla kullanılan ekranlara özgü katman. Üst şerit 1080'de menüye
   dönüyor ama alt eylem çubuğunu 1000px'lik bir dizüstü penceresine
   koymanın anlamı yok; o yüzden bu üçlü kendi sınırında kaldı. */
@media (max-width: 860px) {
    .eylem-cubugu { display: flex; }
    /* Yüzen WhatsApp balonu bu genişlikte GİZLİ. Alt eylem çubuğu zaten
       WhatsApp'ı ortadaki ana düğme olarak taşıyor; balon çubuğun 82px
       üstünde durunca aynı ekranda iki WhatsApp çıkıyor ve balon
       kaydırırken içeriğe (bölge sayfasındaki haritaya) biniyordu
       (2026-09-11 telefon ekran görüntüsü). Masaüstünde çubuk yok, balon
       orada kalıyor. */
    .yuzen-wa { display: none; }
    .dip { padding-bottom: 96px; }
}

@media (max-width: 620px) {
    body { font-size: 16.5px; }
    .kutu-ag.dortlu, .cihaz-ag.dortlu, .cihaz-ag.uclu { grid-template-columns: minmax(0, 1fr); }
    .alan-ikili { grid-template-columns: minmax(0, 1fr); }
    .dugme-sira .dugme { width: 100%; }
    .kapanis .dugme-sira { flex-direction: column; }

    .fis-basi, .sihirbaz-basi { padding: 18px 20px; }
    .fis-govde, .sihirbaz-govde { padding: 20px; }
    .fis-alt, .sihirbaz-alt { padding: 14px 20px; }

    .sayfa-olcum, .olcum { gap: 16px 28px; }
    .olcu-serit { grid-template-columns: minmax(0, 1fr); }
    .liste-arac { flex-direction: column; align-items: stretch; }
    .liste-ara { max-width: none; }
    /* width:100% şart. Süzgeç bir kaydırma kabı (overflow-x:auto) olduğu için
       otomatik genişliği içeriğine göre hesaplanıyor ve ata öğenin
       align-items:stretch değeri bunu ezmiyordu; şerit 569px'e uzayıp tüm
       sayfayı yatay kaydırtıyordu (375px ekranda 212px taşma). min-width:0 tek
       başına yetmiyor, ölçüldü. */
    .suzgec { width: 100%; min-width: 0; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; scrollbar-width: none; }
    .suzgec::-webkit-scrollbar { display: none; }

    .dip-sutun { border-bottom: 1px solid var(--cizgi-ters); padding-bottom: 14px; }
    .dip-sutun summary { cursor: pointer; display: flex; align-items: center; justify-content: space-between; }
    .dip-sutun summary::after {
        content: "";
        width: 11px; height: 11px;
        border-right: 1.5px solid rgba(255, 255, 255, .5);
        border-bottom: 1.5px solid rgba(255, 255, 255, .5);
        transform: rotate(45deg);
        transition: transform var(--hiz);
    }
    .dip-sutun[open] summary::after { transform: rotate(-135deg); }
    .dip-ag { gap: 0; }
    .dip-sutun ul { padding-top: 14px; }

    .yazi-ag, .hizmet-ag { grid-template-columns: minmax(0, 1fr); }
}


/* == 18 Tema kilidi ======================================================= */

/* Site tek temalıdır: zemin her koşulda beyaz.

   Önceden burada bir prefers-color-scheme: dark bloğu vardı ve işletim
   sistemi koyu moddayken bütün sayfa siyaha dönüyordu. Kaldırıldı; sayfanın
   kimliğini ziyaretçinin sistem ayarı değil, tasarım belirliyor.

   Koyuluk yalnızca tasarımın kendi seçtiği yerlerde var: kahraman bölümü,
   .bolum.koyu şeritleri ve alt bilgi. Onlar zaten sabit değerle yazılı,
   burayla ilgileri yok.

   color-scheme: yalnızca "light" — bu satır olmadan tarayıcı koyu modda
   açılır kutuları, kaydırma çubuğunu, otomatik doldurulan form alanlarını
   ve tarih seçiciyi kendi kararıyla siyaha çeviriyordu. */
:root { color-scheme: light; }


/* == 19 Hizmet kataloğu =================================================== */
/* Dört cihaz ailesi, o ailede yaptığımız işlemlerin tam listesiyle.
   Düzen "bento": eşit dört sütun yerine iki satır, her satır 12 birim.
       satır 1 · MacBook 7 + iMac 5
       satır 2 · iPhone 6 + iPad  6
   NEDEN eşit dört sütun değil: dört eşit sütunda MacBook'un 17 satırlık
   listesi sütunu iki katına uzatıyor, yanındaki 14 satırlık iMac kartının
   altında yüz piksellik boşluk kalıyordu. Genişliği listenin uzunluğuna
   göre dağıtmak boşluğu kapatıyor ve MacBook'a hak ettiği ağırlığı veriyor.

   Sütun genişlikleri elle yazıldı, auto-fit ile değil: auto-fit dar ekranda
   son kartı tek başına bırakıyor (öksüz kart), ayrıca 7/5 gibi eşitsiz
   oranları üretemiyor.

   align-items: start — listeler eşit uzunlukta değil, kart kendi boyunda
   duruyor, satırın en uzununa gerilmiyor. */
.katalog-ag {
    display: grid;
    align-items: start;
    gap: var(--bosluk);
    grid-template-columns: minmax(0, 1fr);
}
/* Orta genişlik: bento oranları için yer yok, ikişerli eşit düzen. */
@media (min-width: 720px) {
    .katalog-ag { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Bento yalnızca 1080'den sonra. Altında 7 birimlik kart 380 piksele
   düşüyor ve iki sütunlu işlem listesi okunmuyor. */
@media (min-width: 1080px) {
    .katalog-ag.bento { grid-template-columns: repeat(12, minmax(0, 1fr)); }
    .katalog-ag.bento .genis { grid-column: span 7; }
    .katalog-ag.bento .dar   { grid-column: span 5; }
    .katalog-ag.bento .orta  { grid-column: span 6; }
}

/* Kart gövdesi tek kart reçetesinden geliyor; burada yalnızca iç düzen var.
   Kolon dip hizası için liste esniyor, aile bağlantısı en alta oturuyor. */
.katalog-kart {
    display: flex;
    flex-direction: column;
    padding: clamp(20px, 1.8vw, 24px);
}
.katalog-kart h3 { font-size: 18px; margin: 0 0 5px; }
.katalog-kapsam {
    margin: 0 0 14px;
    padding-bottom: 13px;
    border-bottom: 1px solid var(--cizgi);
    font-size: 13px;
    line-height: 1.45;
    color: var(--sis-2);
}

/* Kart üstü fotoğraf şeridi — gerçek cihaz fotoğrafı, çizim değil.
   Kartın kendi dolgusunu negatif kenar boşluğuyla taşıyor ki fotoğraf
   kenardan kenara otursun; kart dolgusu clamp olduğu için aynı clamp
   negatif yazıldı.
   iMac kartında fotoğraf YOK (elimizde iMac çekimi yok) — bento düzeni
   kartları zaten farklı boyda gösterdiği için bu tutarsız değil,
   kasıtlı görünüyor. */
.katalog-foto {
    display: block;
    margin: calc(-1 * clamp(20px, 1.8vw, 24px)) calc(-1 * clamp(20px, 1.8vw, 24px)) 18px;
    overflow: hidden;
    background: var(--yuzey-2);
}
.katalog-foto picture { display: block; }
/* Sabit yükseklik + cover: 5/4 oranındaki kare fotoğraf geniş kartta
   kartı iki katına uzatıyordu. Çekimlerde cihaz ortada, kırpma güvenli. */
.katalog-foto img {
    display: block;
    width: 100%;
    height: clamp(126px, 13vw, 168px);
    object-fit: cover;
    object-position: center;
}

/* İki haneli sıra numarası. Mono ailesi atolye.css'ten geliyor; o katman
   silinirse numara sistem fontuyla yazılır, düzen bozulmaz. */
.katalog-basi {
    display: flex;
    align-items: baseline;
    gap: 12px;
}
.katalog-basi > div { min-width: 0; }
.katalog-no {
    flex: none;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -.02em;
    color: var(--sis-2);
    font-variant-numeric: tabular-nums;
}

.katalog-liste {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 14px;
    line-height: 1.4;
    color: var(--sis);
}
/* Madde imi yerine ince bir çizgi: liste bir "işaretli kutucuk" listesi gibi
   değil, tarifedeki satırlar gibi okunsun. Satır metinleri bilerek kısa
   tutuluyor; dört sütunda sütun genişliği 250 piksele kadar iniyor ve uzun
   başlık iki satıra kırılıp sütunu iki katına çıkarıyor. */
/* Satır artık iki sütunlu: solda işlem adı, sağda süre. Süre "sonradan
   eklenmiş etiket" değil, tarifedeki ikinci kolon gibi okunsun diye
   aradaki boşluk esneyerek dolduruluyor. */
.katalog-liste li {
    position: relative;
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 6px 0 6px 15px;
}
.katalog-liste li > :first-child { min-width: 0; }
.katalog-liste li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 13px;
    width: 7px;
    height: 1px;
    background: var(--cizgi-koyu);
}
/* Ayrı sayfası olan işlem tıklanabilir; olmayan düz metin kalıyor.
   İkisi arasındaki fark renkle değil altı çizgiyle veriliyor, çünkü
   listenin yarıya yakını bağlantı ve sütun alacalı görünmesin. */
.katalog-liste a {
    color: var(--murekkep);
    font-weight: 560;
    text-decoration: underline;
    text-decoration-color: var(--aksan-200);
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
}
.katalog-liste a:hover {
    color: var(--aksan-700);
    text-decoration-color: var(--aksan-600);
}

/* Süre sütunu. Gerçek kayıttan gelir (inc/veri-hizmet.php · sure); kaydı
   olmayan işlemde bu düğüm hiç basılmaz, uydurma süre yazılmaz.
   text-align: right yerine margin-left: auto — sütun genişliği metne göre
   değişiyor, sabit sütun ayırmak dar kartta işlem adını sıkıştırıyordu. */
.katalog-sure {
    flex: none;
    margin-left: auto;
    font-size: 12px;
    line-height: 1.3;
    white-space: nowrap;
    color: var(--sis-2);
    font-variant-numeric: tabular-nums;
}
/* Dar kartta "Anakart komponent onarımı" + "Aynı gün – 1 iş günü" aynı
   satıra sığmıyor, işlem adı iki satıra kırılıyor. Orada süre alta iniyor.
   Ölçü ekran genişliği DEĞİL kart genişliği: aynı 340 piksellik kart hem
   375'lik telefonda (tek sütun) hem 780'lik tablette (iki sütun) çıkıyor,
   medya sorgusu ikisini ayıramaz. */
.katalog-kart { container-type: inline-size; }
@container (max-width: 380px) {
    .katalog-liste li { flex-wrap: wrap; gap: 0 10px; }
    .katalog-sure { margin-left: 0; flex-basis: 100%; }
}

/* Kartın içine değer (rakip kartları yalnızca ad + ok taşıyor).
   Üç rozet her ailede aynı, çünkü politikamız cihazdan bağımsız.
   FİYAT YOK — bu sitede hiçbir yüzeyde fiyat gösterilmez. */
.katalog-deger {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 16px 0 0;
}
.katalog-deger span {
    padding: 4px 9px;
    border: 1px solid var(--cizgi);
    border-radius: var(--r-xs);
    background: var(--yuzey-2);
    font-size: 11.5px;
    line-height: 1.35;
    color: var(--sis);
    white-space: nowrap;
}

.katalog-tum {
    margin-top: 18px;
    padding-top: 15px;
    border-top: 1px solid var(--cizgi);
    font-size: 14.5px;
    font-weight: 600;
    color: var(--aksan-600);
}
.katalog-tum span { display: inline-block; transition: transform var(--hiz); }
.katalog-tum:hover { text-decoration: none; }
.katalog-tum:hover span { transform: translateX(4px); }

.katalog-not {
    margin: 30px 0 0;
    text-align: center;
    font-size: 15px;
    color: var(--sis);
}


/* == 19b Atölye ilkesi (büyük tipografik ifade) ========================== */
/* Tek cümlelik duruş bandı. Kart, ikon, düğme yok — sayfadaki tek "sessiz"
   bölüm bu; koyu tezgâh bandıyla gri süreç bandı arasında nefes açıyor.

   h2 DEĞİL <p>: bu bir bölüm başlığı değil, cümlenin kendisi. Başlık
   yapılsaydı içindekiler ağacına "Değiştirilebilecek bir parçayı…" diye
   girerdi ve ana sayfanın başlık hiyerarşisi bozulurdu. */
.ifade { text-align: center; }

.ifade .etiket { margin-bottom: 22px; }

.ifade-metin {
    max-width: 15em;          /* em: yazı büyüdükçe satır uzunluğu sabit kalır */
    margin: 0 auto;
    font-size: clamp(28px, 4.6vw, 54px);
    font-weight: 640;
    line-height: 1.12;
    letter-spacing: -.03em;
    text-wrap: balance;
    color: var(--murekkep);
}

/* Vurgulanan sözcükler renkle ayrılıyor, eğik yazıyla değil: bu boyutta
   italik sistem fontunda sentetik çıkıyor ve satır dengesini bozuyor. */
.ifade-metin em {
    font-style: normal;
    color: var(--aksan-600);
}

.ifade-alt {
    max-width: 60ch;
    margin: 26px auto 0;
    font-size: 16.5px;
    line-height: 1.65;
    color: var(--sis);
    text-wrap: pretty;
}


/* == 19c Servise hazırlama listesi ======================================= */
/* inc/hazirlik.php. Gerçek işaretlenebilir kutucuklar — JavaScript yok,
   durumu tarayıcı tutuyor. Sayfa yenilenince sıfırlanması kasıtlı: bu bir
   form değil, cihazı kutulayana kadar bakılan bir sayım. */
.hazirlik {
    display: grid;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--cizgi);
    background: var(--cizgi);   /* 2px'lik gap ayırıcı çizgi görevi görüyor */
}
@media (min-width: 861px) {
    .hazirlik { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.hazirlik li {
    padding: 18px 20px 20px;
    background: var(--yuzey-1);
}

/* Kutucuk + numara + başlık tek tıklama alanı. */
.hazirlik-satir {
    display: flex;
    align-items: center;
    gap: 11px;
    cursor: pointer;
}

/* Tarayıcının kendi kutucuğu her işletim sisteminde başka boyda ve mavi
   çıkıyor; kare kenarlıklı görünüme uymuyor. appearance: none ile sıfırlanıp
   elle çiziliyor — ama ELEMENT DURUYOR: klavye, ekran okuyucu ve form
   davranışı tarayıcıdan geliyor, taklit edilmiyor. */
.hazirlik-kutu {
    appearance: none;
    -webkit-appearance: none;
    flex: none;
    width: 19px;
    height: 19px;
    margin: 0;
    border: 1.5px solid var(--cizgi-koyu);
    border-radius: var(--r-xs);
    background: var(--yuzey-1);
    display: grid;
    place-content: center;
    transition: border-color var(--hiz), background var(--hiz);
}
.hazirlik-kutu::before {
    content: "";
    width: 10px;
    height: 6px;
    border-left: 2px solid var(--ters);
    border-bottom: 2px solid var(--ters);
    transform: rotate(-45deg) translate(1px, -1px);
    opacity: 0;
    transition: opacity var(--hiz);
}
.hazirlik-kutu:hover { border-color: var(--aksan-600); }
.hazirlik-kutu:checked {
    border-color: var(--aksan-600);
    background: var(--aksan-600);
}
.hazirlik-kutu:checked::before { opacity: 1; }
.hazirlik-kutu:focus-visible {
    outline: 2px solid var(--aksan-600);
    outline-offset: 2px;
}

.hazirlik-no {
    flex: none;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: -.02em;
    color: var(--sis-2);
    font-variant-numeric: tabular-nums;
}
.hazirlik-ad {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--murekkep);
}
/* İşaretlenen madde soluyor: listede kalan işin ne olduğu bir bakışta
   görünsün. Üstü çizilmiyor — metin hâlâ okunabilir kalmalı. */
.hazirlik-kutu:checked ~ .hazirlik-ad,
.hazirlik-kutu:checked ~ .hazirlik-no { color: var(--sis-2); }

.hazirlik-metin {
    margin: 8px 0 0 30px;      /* 19px kutucuk + 11px boşluk = başlıkla hizalı */
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--sis);
    text-wrap: pretty;
}


/* == 19d Katman diyagramı ================================================ */
/* inc/katman.php. Dört bant, her biri bir öncekinden içeride: "derine
   iniyoruz" fikri metinle değil düzenle anlatılıyor.

   Girinti yalnızca 861'den sonra veriliyor. Dar ekranda 54 piksellik girinti
   son bandın metnini kullanılamaz hale getiriyor; orada bantlar hizalı
   kalıyor, derinliği sol çizginin koyulaşması taşıyor. */
.katman {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
}

.katman-bant {
    padding: 20px 22px 18px;
    border: 1px solid var(--cizgi);
    border-left-width: 3px;
    background: var(--yuzey-1);
}
.katman-bant:nth-child(1) { border-left-color: var(--cizgi-koyu); }
.katman-bant:nth-child(2) { border-left-color: var(--sis-2); }
.katman-bant:nth-child(3) { border-left-color: var(--sis); }
.katman-bant:nth-child(4) { border-left-color: var(--aksan-600); }

@media (min-width: 861px) {
    .katman-bant:nth-child(2) { margin-left: 26px; }
    .katman-bant:nth-child(3) { margin-left: 52px; }
    .katman-bant:nth-child(4) { margin-left: 78px; }
}

/* Son bant ayırt edici nokta: kalın kenarlık yerine zemin farkı, çünkü
   kenarlık zaten derinlik ölçeğini taşıyor. */
.katman-bant.derin { background: var(--aksan-50); }

.katman-basi {
    display: flex;
    align-items: baseline;
    gap: 12px;
}
.katman-basi > div { min-width: 0; }
.katman-no {
    flex: none;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -.02em;
    color: var(--sis-2);
    font-variant-numeric: tabular-nums;
}
.katman-ust {
    display: block;
    margin-bottom: 2px;
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--sis-2);
}
.katman-bant h3 {
    margin: 0;
    font-size: 19px;
    line-height: 1.25;
}

.katman-metin {
    margin: 10px 0 0 25px;     /* numara sütunuyla hizalı */
    max-width: 70ch;
    font-size: 15px;
    line-height: 1.62;
    color: var(--sis);
    text-wrap: pretty;
}

/* Katmandaki işler: çip biçiminde bağlantılar. Liste değil satır içi
   akış — dört bant alt alta olduğu için her birine madde imli liste
   koymak bölümü iki katına çıkarıyordu. */
.katman-baglar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 14px 0 0 25px;
}
.katman-baglar a {
    padding: 5px 10px;
    border: 1px solid var(--cizgi);
    border-radius: var(--r-xs);
    background: var(--yuzey-1);
    font-size: 13px;
    line-height: 1.3;
    color: var(--murekkep);
    text-decoration: none;
    transition: border-color var(--hiz), color var(--hiz);
}
.katman-baglar a:hover {
    border-color: var(--aksan-600);
    color: var(--aksan-600);
}


/* == 19e Sihirbaz serbest metin girişi =================================== */
/* Ziyaretçi listeyi taramak yerine kendi sözcüğünü yazıyor; başlıklar
   anında süzülüyor (bkz. betik.js · suz). Çipler boş kutunun karşısında
   "ne yazabilirim" sorusunu cevaplıyor. */
.serbest { margin: 0 0 18px; }

.serbest-alan { display: block; }

.serbest-alan input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--cizgi-koyu);
    border-radius: var(--r-s);
    background: var(--yuzey-1);
    font: inherit;
    font-size: 15.5px;
    color: var(--murekkep);
}
.serbest-alan input::placeholder { color: var(--sis-2); }
.serbest-alan input:focus-visible {
    outline: 2px solid var(--aksan-600);
    outline-offset: 1px;
    border-color: var(--aksan-600);
}

.serbest-cip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
}
.serbest-cip > span {
    font-size: 12.5px;
    color: var(--sis-2);
    margin-right: 2px;
}
.serbest-cip button {
    padding: 5px 10px;
    border: 1px solid var(--cizgi);
    border-radius: var(--r-xs);
    background: var(--yuzey-1);
    font: inherit;
    font-size: 13px;
    line-height: 1.3;
    color: var(--sis);
    cursor: pointer;
    transition: border-color var(--hiz), color var(--hiz);
}
.serbest-cip button:hover {
    border-color: var(--aksan-600);
    color: var(--aksan-600);
}
.serbest-cip button:focus-visible {
    outline: 2px solid var(--aksan-600);
    outline-offset: 2px;
}

.serbest-sonuc {
    margin: 10px 0 0;
    font-size: 13px;
    color: var(--sis);
}

/* .secenek display:flex taşıyor; [hidden] tek başına onu yenemiyor.
   Süzme bu satır olmadan hiçbir şeyi gizlemez. */
.secenek[hidden] { display: none; }

/* Model sayfasındaki "elimdeki cihaz bu mu?" fotoğrafı. */
.model-gorsel { margin-top: 26px; }

.model-gorsel picture { display: block; }

.model-gorsel img {
    display: block;
    width: 100%;
    max-width: 520px;
    height: auto;
    border-radius: 16px;
}


/* == 19e2 Onarım vakaları ================================================ */

/* Süreç bandıyla aynı gri zemin: ikisi tek bir bant gibi okunsun. Üstteki
   ince çizgi konunun değiştiğini söylüyor, renk değişimi değil. */
.vaka-bolum {
    padding-top: clamp(34px, 4vw, 52px);
    border-top: 1px solid var(--cizgi-koyu);
}

.vaka-ag {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
}

.vaka {
    display: flex;
    flex-direction: column;
    padding: 18px 18px 16px;
    border: 1px solid var(--cizgi-koyu);
    background: var(--yuzey-1);
}

.vaka-basi {
    padding-bottom: 12px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--cizgi);
}
.vaka-basi h3 {
    margin: 0;
    font-size: 17px;
    font-weight: 640;
    line-height: 1.25;
    letter-spacing: -.02em;
}
.vaka-basi h3 a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--cizgi-koyu); }
.vaka-basi h3 a:hover { text-decoration-color: var(--aksan-600); }

.vaka-kunye {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    margin: 6px 0 0;
    font-family: var(--mono);
    font-size: 11.5px;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--sis-2);
}

/* Dört adım numaralı: sayaç dt'nin önüne mono bir sıra numarası basıyor.
   Numara HTML'e yazılmıyor çünkü boş alanlar atlanabiliyor — sayaç o zaman
   da kesintisiz 1,2,3 gider. */
.vaka-adim { counter-reset: vaka; margin: 0; }
.vaka-adim dt {
    counter-increment: vaka;
    margin-top: 14px;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--sis-2);
}
.vaka-adim dt::before {
    content: counter(vaka) " · ";
    color: var(--aksan-600);
}
.vaka-adim dd {
    margin: 3px 0 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--sis);
}
/* Son adım (Sonuç) vurgulu: kartın cevabı o. */
.vaka-adim dd:last-of-type { color: var(--murekkep); }


/* == 19f Model rayı (yatay kaydırma) ===================================== */

/* Ray, .kap'ın dışında yaşar: kartlar ekranın sağ kenarından taşarak devam
   etmeli, yoksa listenin kaydırılabilir olduğu anlaşılmıyor. Sol kenar yine
   de .kap ile aynı hizada başlar; --ray-yan bunu hesaplar: geniş ekranda
   kapsayıcının sol boşluğu kadar, dar ekranda sayfanın yan dolgusu kadar.

   Sınıf adı bilerek .ray DEĞİL: takip sayfasındaki durum çizelgesi ul.ray
   kullanıyor (bkz. satır ~2064) ve süssüz bir .ray kuralı oraya sızıp dikey
   çizelgeyi yatay kaydırma kutusuna çevirirdi. Çocuk sınıflar (.ray-kart vb.)
   çakışmıyor, onlar olduğu gibi kalıyor. */
.model-ray {
    --ray-yan: max(var(--yan), (100% - var(--kap)) / 2 + var(--yan));
    margin-top: 26px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    scroll-padding-inline: var(--ray-yan);
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--cizgi-koyu) transparent;
}
.model-ray::-webkit-scrollbar        { height: 6px; }
.model-ray::-webkit-scrollbar-track  { background: transparent; }
.model-ray::-webkit-scrollbar-thumb  { background: var(--cizgi-koyu); }

/* Yan dolgu listeye veriliyor, kaydırma kutusuna değil: kaydırılabilir bir
   kutunun SON dolgusunu bazı tarayıcılar yok sayar, dolgu içerideki esnek
   kapsayıcıdayken ise her yerde çalışır. */
.ray-liste {
    display: flex;
    gap: 14px;
    margin: 0;
    padding: 4px var(--ray-yan) 16px;
    list-style: none;
}
.ray-liste > li { flex: none; scroll-snap-align: start; }

.ray-kart {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: clamp(238px, 66vw, 274px);
    height: 100%;
    padding: 16px 16px 14px;
    border: 1px solid var(--cizgi);
    background: var(--yuzey-1);
    color: var(--murekkep);
    text-decoration: none;
    transition: border-color var(--hiz), background var(--hiz);
}
.ray-kart:hover,
.ray-kart:focus-visible {
    border-color: var(--murekkep);
    background: var(--yuzey-2);
}

.ray-no {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .08em;
    color: var(--aksan-600);
}
.ray-ad {
    font-size: 17px;
    font-weight: 640;
    line-height: 1.2;
    letter-spacing: -.02em;
}
.ray-yil { font-size: 12.5px; color: var(--sis-2); }

/* Teknik satırlar kartın dibine yaslanır: kart adları farklı uzunlukta
   olduğu için ray boyunca aynı hizada durmaları okumayı kolaylaştırıyor. */
.ray-satir {
    display: grid;
    gap: 2px;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--cizgi);
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--sis);
}
.ray-git {
    margin-top: 10px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--aksan-600);
}
.ray-kart:hover .ray-git span { padding-left: 3px; }
.ray-git span { display: inline-block; transition: padding-left var(--hiz); }

/* Başlık bloğu ile "tüm modeller" bağlantısı geniş ekranda aynı satırda.
   max-width sıfırlanıyor: .bolum-basi 62ch ile sınırlı, o sınır burada
   kalırsa bağlantı sayfanın ortasında asılı kalır. Metnin kendi genişliği
   içerideki .giris ile korunuyor. */
.ray-basi { display: grid; gap: 16px; max-width: none; }
.ray-basi > div { max-width: 62ch; }
@media (min-width: 800px) {
    .ray-basi {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: end;
        column-gap: 32px;
    }
    .ray-tum { white-space: nowrap; }
}


/* == 20 Tezgâh turu (kaydırmayla taranan tam ekran video) ================== */

/* Bölümün kendi dolgusu yok: yüksekliği .tezgah-uzun veriyor. Video kenardan
   kenara uzandığı için bölüm koyu: video yüklenene kadar arkada beyaz bir
   kare parlamasın. */
.bolum.tezgah { padding: 0; overflow: clip; background: #0a0d12; color: #fff; }

/* JS devreye girene kadar (ve hiç girmezse) bölüm tek ekran boyunda durur:
   poster karesi arkada, metinlerin hepsi alt alta okunur. Uzun sarmalayıcı
   yalnızca .hazir sınıfı geldiğinde açılır. */
.tezgah-uzun { padding: 0; }
.tezgah.hazir .tezgah-uzun { height: 300vh; }

.tezgah-sabit {
    position: relative;
    display: flex;
    align-items: center;
    /* Mobilde adres çubuğu açılıp kapandıkça 100vh zıplıyor; destekleyen
       tarayıcılarda sabit olan küçük görünüm yüksekliğini kullan. */
    min-height: 100vh;
    min-height: 100svh;
    padding: 74px 0;
}

.tezgah.hazir .tezgah-sabit {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
    min-height: 0;
    padding: 0;
}

/* -- Arka plan katmanı -- */

/* Video bölümü kaplar. Oranı ekranınkiyle tutmadığı için `cover` ile taşan
   kenarları kırpılıyor; ortalama noktası biraz yukarıda çünkü çekimlerin
   konusu (kart, fan, tezgâh) karenin üst yarısında duruyor. */
.tezgah-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 42%;
}

/* Beyaz metnin video üstünde okunabilmesi için karartma. Soldan sağa açılan
   kısım metin sütununu, alttan gelen kısım eylem düğmelerini taşıyor. */
.tezgah-orte {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(6, 9, 14, .88) 0%, rgba(6, 9, 14, .72) 42%,
                               rgba(6, 9, 14, .28) 72%, rgba(6, 9, 14, .16) 100%),
        linear-gradient(0deg,  rgba(6, 9, 14, .62) 0%, rgba(6, 9, 14, 0) 46%);
}

.tezgah-ic { position: relative; width: 100%; }

/* -- Metin katmanı -- */

.tezgah-yazi { max-width: 620px; }
.tezgah-yazi > .etiket { margin: 0 0 18px; color: rgba(255, 255, 255, .62); }
.tezgah-yazi .baslik-2 { color: #fff; }
.tezgah-yazi .giris { color: rgba(255, 255, 255, .82); }

/* Perdeler tek bir grid gözünde üst üste yığılır. Konumlandırma yerine grid
   kullanılıyor çünkü grid gözü en uzun perdeye göre büyür: adım değişince
   sütun boyu oynamaz, kısa bir perde de uzun olanı taşırmaz. */
.tezgah.hazir .tezgah-perdeler { display: grid; }

.tezgah.hazir .tezgah-perde {
    grid-area: 1 / 1;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .5s ease, transform .5s ease;
    pointer-events: none;
}

.tezgah.hazir .tezgah-perde.acik {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

.tezgah-perde + .tezgah-perde { margin-top: 34px; }
.tezgah.hazir .tezgah-perde + .tezgah-perde { margin-top: 0; }

.tezgah-ust {
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    /* Koyu zeminde 700 tonu okunmuyor; ramp'ın açık ucuna çıkılıyor. */
    color: var(--aksan-300, #7cc0ff);
}

.tezgah-perde .baslik-2 { margin: 0 0 12px; }
.tezgah-perde .giris { margin: 0; }

/* -- Adım sayacı -- */

.tezgah-sayac {
    display: flex;
    gap: 8px;
    margin: 28px 0 0;
    padding: 0;
    list-style: none;
}

.tezgah-sayac li {
    width: 34px;
    height: 3px;
    border-radius: 2px;
    background: rgba(255, 255, 255, .24);
    transition: background var(--hiz, .22s) ease;
}

.tezgah-sayac li.gecti { background: #fff; }

/* Sayaç yalnızca sahne sürülebiliyorsa anlamlı. */
.tezgah:not(.hazir) .tezgah-sayac { display: none; }

/* -- Eylem satırı -- */

.tezgah-eylem {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 32px 0 0;
}

/* Metin katmanı görünüm alanına girip çıkarken yumuşak açılır/kapanır:
   kullanıcı "bir görünsün sonra kaybolsun" dediği için bölümle birlikte
   solar. Video kendi başına kalır, koyu zemin sürekli akar. */
.tezgah.hazir .tezgah-yazi {
    opacity: var(--perde, 1);
    transition: opacity .35s linear;
}

@media (max-width: 899px) {
    .tezgah.hazir .tezgah-uzun { height: 280vh; }
    .tezgah-orte {
        background:
            linear-gradient(0deg, rgba(6, 9, 14, .9) 0%, rgba(6, 9, 14, .6) 55%,
                                  rgba(6, 9, 14, .4) 100%);
    }
    .tezgah-sayac { margin-top: 20px; }
    .tezgah-eylem { margin-top: 24px; }
    .tezgah-eylem .dugme { flex: 1 1 100%; text-align: center; }
}

/* Hareket kapalıysa sahne sürülmez: bölüm normal yüksekliğine döner,
   poster karesi arkada durur ve bütün adımlar alt alta okunur. */
@media (prefers-reduced-motion: reduce) {
    .tezgah.hazir .tezgah-uzun { height: auto; }
    .tezgah.hazir .tezgah-sabit {
        position: static;
        height: auto;
        min-height: 100svh;
        padding: 74px 0;
    }
    .tezgah.hazir .tezgah-perdeler { display: block; }
    .tezgah.hazir .tezgah-perde {
        grid-area: auto;
        opacity: 1;
        transform: none;
        pointer-events: auto;
    }
    .tezgah.hazir .tezgah-perde + .tezgah-perde { margin-top: 34px; }
    .tezgah.hazir .tezgah-yazi { opacity: 1; }
    .tezgah .tezgah-sayac { display: none; }
}


/* == 21 Hareket ve yazdırma =============================================== */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
    a.kutu:hover, a.hizmet-kart:hover, a.cihaz-kart:hover,
    a.yazi-kart:hover, .dugme:hover { transform: none; }
    .katalog-tum:hover span { transform: none; }
}

@media print {
    .tepe, .gezinti, .yuzen-wa, .eylem-cubugu, .ilerleme,
    .atla, .dugme-sira, .sihirbaz { display: none !important; }
    body { font-size: 12pt; color: #000; }
    .kahraman, .sayfa-basi, .bolum.koyu, .dip {
        background: #fff !important;
        color: #000 !important;
    }
    .kahraman .giris, .sayfa-ozet, .dip { color: #333 !important; }
    .bolum { padding: 18pt 0; }
    a { color: #000; text-decoration: underline; }
}