/* =====================================================================
   SAHNEGO — TASARIM SİSTEMİ                        2026-09-03
   =====================================================================
   Bu dosya sıfırdan yazıldı. Öncesi 2.052 satırdı ve üst üste binmiş
   10 ayrı "düzeltme" bölümü içeriyordu; her biri bir öncekini eziyordu.
   Görsel uyumsuzluğun kaynağı buydu.

   İLKELER
   1. Renk fotoğraftan gelir, arayüz susar. Açık zemin, tek vurgu rengi.
   2. Cam efekti (backdrop-filter), dekoratif gradient ve büyük gölge yok.
      Fotoğraf üstündeki perde işlevseldir (metin okunurluğu), dekor değil.
   3. Tek kart bileşeni: .kart-tabani. Diğerleri onu genişletir.
   4. Boşluk 4px katları. Yarıçap üç değer. Gölge iki seviye.
   5. Sınıf adları eskisiyle BİREBİR aynıdır — şablonlar, schema ve
      SEO çıktısı değişmez.

   SIRA: jetonlar · temel · tipografi · düzen · başlık/alt · buton ·
         kart · vitrin · içerik · hizmet detayı · form · mobil
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. JETONLAR
   --------------------------------------------------------------------- */
:root {
  /* ================================================================
     YAPI JETONLARI — tema degistirse de AYNI kalir.
     Marka jetonlari asagida `[data-tema]` bloklarinda; tema eklemek
     icin yalnizca yeni bir blok yaz, bu bolume dokunma.
     ================================================================ */

  /* Yüzeyler */
  --zemin:        #ffffff;
  --zemin-2:      #fafafc;
  --yuzey:        #ffffff;   /* kart */
  --yuzey-2:      #f0f0f4;   /* girdi, pasif çip */
  --cizgi:        #e2e2e9;
  --cizgi-2:      #cfcfd9;

  /* Metin */
  --metin:        #17161c;
  --metin-2:      #3d3a47;
  --metin-3:      #5b5866;   /* AA: beyazda 7.3:1 — 12px etiketler icin */
  --metin-ters:   #ffffff;

  /* WhatsApp — marka disi, sabit */
  --wa:           #25d366;
  --wa-metin:     #04321b;

  /* Tipografi — tema degistirse de ayni aile.
     Plus Jakarta Sans geometrik ve okunakli; Fraunces yalniz kelime
     markasinda. 2026-09-11'de tema calismasinda bilerek KORUNDU. */
  --f-marka:  Fraunces, Georgia, "Times New Roman", serif;
  --f-baslik: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-govde:  "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-etiket: var(--f-govde);

  /* Ölçek — 4px katları */
  --b1: 4px;  --b2: 8px;  --b3: 12px; --b4: 16px; --b5: 20px;
  --b6: 24px; --b7: 32px; --b8: 40px; --b9: 56px; --b10: 72px;

  --kap: 1200px;
  --gecis: 140ms ease;
}

/* ==================================================================
   TEMA 1 — "deniz"  (VARSAYILAN, WanderMap uyarlamasi)
   Teal + mercan. Kaynak paletteki tonlar KONTRAST ICIN KOYULASTIRILDI:
     · #F97316 beyaz yazida 2.9:1 — AA'yi gecmiyor → #C2410C (5.9:1)
     · #0EA5E9 beyazda 2.9:1 → bag rengi #0369A1 (5.7:1)
     · #059669 beyazda 3.4:1 → #047857 (4.5:1)
   Canli tonlar `--vurgu*` olarak duruyor; metin tasimayan yerlerde
   (rozet noktasi, ikon, alt cizgi) kullanilir.
   ================================================================== */
:root,
:root[data-tema="deniz"] {
  --marka:        #0f766e;   /* teal-700 · beyaz yazi 5.4:1 */
  --marka-koyu:   #115e59;
  --marka-acik:   #effaf8;
  --vurgu:        #f97316;   /* canli mercan — YALNIZ metinsiz vurgu */
  --vurgu-2:      #0ea5e9;   /* gok — ikon/aksan */

  --cta:          #c2410c;   /* mercan, koyulastirilmis · beyaz yazi 5.9:1 */
  --cta-koyu:     #9a3412;
  --cta-metin:    #ffffff;

  --altin:        #b45309;   /* fiyat vurgusu · beyazda 4.9:1 */
  --altin-zemin:  #fff7ed;
  --yesil:        #047857;

  /* WanderMap "rounded, friendly" — yaricaplar bir tik buyuk */
  --r:    14px;
  --r-sm: 10px;
  --r-lg: 20px;

  --golge:   0 1px 2px rgba(15,118,110,.06);
  --golge-2: 0 2px 4px rgba(15,118,110,.06), 0 12px 28px -20px rgba(12,74,110,.38);
  /* Koyu temada rehber kartlarinin ust parildisi — marka tonunu izler. */
  --kart-parilti: rgba(45,212,191,.10);
  /* Vitrin videosu uzerindeki perde — marka tonunun koyu hali.
     rgba() icinde alfa degisebilsin diye SADECE RGB uclusu tutulur. */
  --perde-rgb: 6, 42, 46;
  /* Koyu temada sabit koyu baslik zemini (beyaz yazi tasir). */
  --vitrin-zemin: #115e59;
}

/* ==================================================================
   TEMA 2 — "mor"  (onceki kimlik; geri donmek icin korunuyor)
   `<html data-tema="mor">` ile acilir.
   ================================================================== */
:root[data-tema="mor"] {
  --marka:        #5b2a86;
  --marka-koyu:   #451f68;
  --marka-acik:   #f4eefb;
  --vurgu:        #8b5cf6;
  --vurgu-2:      #a78bfa;

  --cta:          #5b2a86;
  --cta-koyu:     #451f68;
  --cta-metin:    #ffffff;

  --altin:        #8a5f1f;   /* beyaz üstünde 5.6:1 */
  --altin-zemin:  #fdf6e9;
  --yesil:        #1f6b45;

  --r:    12px;
  --r-sm: 8px;
  --r-lg: 16px;

  --golge:   0 1px 2px rgba(20,18,26,.05);
  --golge-2: 0 2px 4px rgba(20,18,26,.05), 0 12px 28px -20px rgba(20,18,26,.35);
  --kart-parilti: rgba(139,92,246,.10);
  --perde-rgb: 28, 10, 48;
  --vitrin-zemin: #451f68;
}


@media (prefers-color-scheme: dark) {
  /* 🔴 2026-09-11 DUZELTME: bu blok yalniz `:root` hedefliyordu ve icinde
     MOR jetonlar vardi. `:root[data-tema="deniz"]` (0,2,0) ozgullugu
     `:root` (0,1,0) blogunu ezdigi icin marka tonlari acik temada kaldi,
     zemin/metin ise mor-gri geldi → koyu temali telefonlarda "eski renk".
     Artik her tema KENDI koyu paletini tanimliyor ve blok iki tema
     blogundan SONRA geldigi icin esit ozgullukte kazaniyor.
     Kontrast olcumleri --yuzey (#131c20) uzerinde. */
  :root,
  :root[data-tema="deniz"] {
    --marka:      #5eead4;   /* teal-300 · yuzeyde 11.9:1 */
    --marka-koyu: #99f6e4;
    --marka-acik: #0f2a28;
    --vurgu:      #fb923c;
    --vurgu-2:    #38bdf8;
    --altin:      #fbbf24;   /* yuzeyde 10.8:1 */
    --altin-zemin:#2a2110;
    --yesil:      #34d399;

    --zemin:      #0d1417;
    --zemin-2:    #0a1013;
    --yuzey:      #131c20;
    --yuzey-2:    #1a252a;
    --cizgi:      #243238;
    --cizgi-2:    #314249;

    --metin:      #eef4f4;
    --metin-2:    #b3c2c4;   /* yuzeyde 9.6:1 */
    --metin-3:    #8a9ca0;   /* yuzeyde 6.0:1 */

    --cta:        #c2410c;   /* beyaz yazi 5.9:1 — acik temayla ayni */
    --cta-koyu:   #dc5a1f;
    --cta-metin:  #ffffff;

    --golge:   0 1px 2px rgba(0,0,0,.4);
    --golge-2: 0 2px 4px rgba(0,0,0,.4), 0 12px 28px -20px rgba(0,0,0,.8);
    --kart-parilti: rgba(45,212,191,.10);
    --perde-rgb: 4, 30, 33;
    --vitrin-zemin: #0b2f2c;
  }
  :root[data-tema="mor"] {
    --marka:      #c4a2e8;
    --marka-koyu: #d6bef1;
    --marka-acik: #2a1f3a;
    --vurgu:      #a78bfa;
    --vurgu-2:    #c4b5fd;
    --altin:      #e0b775;
    --altin-zemin:#2c2416;
    --yesil:      #63c294;

    --zemin:      #131218;
    --zemin-2:    #0e0d12;
    --yuzey:      #1b1a22;
    --yuzey-2:    #24222d;
    --cizgi:      #2e2c38;
    --cizgi-2:    #3d3a49;

    --metin:      #f0eef4;
    --metin-2:    #b6b2c0;
    --metin-3:    #8b8794;

    --cta:        #7b46b8;
    --cta-koyu:   #8d5bc9;
    --cta-metin:  #ffffff;

    --golge:   0 1px 2px rgba(0,0,0,.4);
    --golge-2: 0 2px 4px rgba(0,0,0,.4), 0 12px 28px -20px rgba(0,0,0,.8);
    --kart-parilti: rgba(139,92,246,.10);
    --perde-rgb: 28, 10, 48;
    --vitrin-zemin: #3a1d57;
  }
}

/* ---------------------------------------------------------------------
   2. TEMEL
   --------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--f-govde);
  font-size: 16px;
  line-height: 1.6;
  color: var(--metin);
  background: var(--zemin-2);
  /* ⚠️ `text-rendering: optimizeLegibility` KALDIRILDI.
     Kerning/ligature acar ama metni bulaniklastirmasiyla bilinir; Chrome
     ve Firefox global kullanimini onermiyor. "Yazilar net degil"
     sikayetinin klasik sebebi. Yerine iki platformda da tutarli
     yumusatma + acik kerning/ligature. */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures contextual;
  font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
}

img, svg, video { max-width: 100%; }
img { height: auto; display: block; }
svg { fill: none; }

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

:focus-visible {
  outline: 2px solid var(--cta);
  outline-offset: 2px;
  border-radius: 3px;
}

hr { border: 0; border-top: 1px solid var(--cizgi); margin: var(--b7) 0; }

.atla {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--cta); color: var(--cta-metin);
  padding: 10px 16px; border-radius: 0 0 var(--r-sm) 0;
}
.atla:focus { left: 0; }

/* ---------------------------------------------------------------------
   3. TİPOGRAFİ
   --------------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--f-baslik);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -.022em;
  color: var(--metin);
  margin: 0 0 var(--b3);
  text-wrap: balance;
}
/* Ic sayfa olcegi: referanstaki gibi bold sans, olculu boy.
   Anasayfa vitrini asagida ayrica buyutuluyor. */
h1 { font-size: clamp(26px, 3vw, 34px); }
h2 { font-size: clamp(20px, 2.1vw, 25px); }
h3 { font-size: 17.5px; letter-spacing: -.015em; }
h4 { font-size: 16px; letter-spacing: -.01em; }

p { margin: 0 0 var(--b3); max-width: 68ch; }
p:last-child { margin-bottom: 0; }

strong, b { font-weight: 600; }
small { font-size: 87.5%; }

ul, ol { margin: 0 0 var(--b3); padding-left: 1.2em; }
li { margin-bottom: var(--b1); }

/* Küçük büyük harfli etiket — eski --f-etiket (mono) yerine.
   Mono ailesi kaldırıldı: bir Google Fonts isteği daha az. */
/* ⚠️ [hidden] HER ZAMAN KAZANMALI.
   Tarayicinin varsayilan `[hidden]{display:none}` kurali, bizim yazdigimiz
   herhangi bir `display` kuralindan DAHA DUSUK ozgullukte. Ornek:
   `.fiyat-tablo tbody tr { display: block }` mobilde `[hidden]` satirlari
   gorunur birakiyordu — "Tumunu goster" kirpmasi hic calismadi ve /fiyatlar
   24.000px kaldi. JS `el.hidden` ile gizlediginde bu kural devreye girer. */
[hidden] { display: none !important; }

/* ⚠️ OZGULLUK: `.kahraman > p` (0-1-1) bu kurali (0-1-0) eziyordu ve
   kahraman icindeki etiket 17px basiliyordu — H1 20px iken etiket ondan
   buyuk gorunuyordu. Asagidaki `p.bolum-etiket` / `.kahraman > p.bolum-etiket`
   kurallari bu yuzden var; silme. */
.kahraman > p.bolum-etiket,
.vitrin p.bolum-etiket,
p.bolum-etiket { font-size: 12px; line-height: 1.35; }
@media (max-width: 640px) {
  .kahraman > p.bolum-etiket,
  .vitrin p.bolum-etiket,
  p.bolum-etiket { font-size: 10.5px; }
}

.bolum-etiket {
  font-family: var(--f-etiket);
  font-size: 12px; font-weight: 600;
  letter-spacing: .085em; text-transform: uppercase;
  color: var(--metin-3);
  margin: 0 0 var(--b3);
}

.alt-not { font-size: 14.5px; color: var(--metin-2); margin: 0; }

/* ---------------------------------------------------------------------
   4. DÜZEN
   --------------------------------------------------------------------- */
.kap { width: 100%; max-width: var(--kap); margin: 0 auto; padding: 0 var(--b6); }
.kap-dar { max-width: 760px; }

main { display: block; }

.bolum { padding: var(--b9) 0 0; }
.bolum:first-child { padding-top: var(--b7); }

.bolum-ust {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: var(--b3);
  margin-bottom: var(--b5);
}
.bolum-ust h2 { margin: 0; }
.bolum-bag {
  font-size: 14.5px; font-weight: 600; color: var(--marka);
  white-space: nowrap;
}

/* Tam genişlik şerit — zemini bir ton farklı */
.serit { background: var(--zemin); padding: var(--b9) 0 var(--b8); margin-top: var(--b9); }
.serit .bolum { padding-top: 0; }

/* Izgaralar */
.izgara { display: grid; gap: var(--b4); grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.izgara-dar     { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.izgara-vitrin  { grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); }
.izgara-kategori{ grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.izgara-sehir   { grid-template-columns: repeat(auto-fill, minmax(216px, 1fr)); }
.izgara-paket   { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.izgara-guven   { grid-template-columns: repeat(auto-fill, minmax(238px, 1fr)); }

/* Kırıntı yolu */
.kirinti {
  font-size: 13.5px; color: var(--metin-3);
  padding: var(--b5) 0 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
}
.kirinti a { color: var(--metin-2); }
.kirinti a:hover { color: var(--marka); }
.kirinti-koyu { color: var(--metin-3); }

/* ---------------------------------------------------------------------
   5. ÜST BAŞLIK
   Marka solda · ikonlu menü ortada (aktif öge alt çizgili) ·
   eylemler sağda: Şehir Seç · arama ikonu · Teklif Al hapı.
   --------------------------------------------------------------------- */
.ust {
  position: sticky; top: 0; z-index: 50;
  background: var(--zemin);
  border-bottom: 1px solid var(--cizgi);
}
.ust-ic { display: flex; align-items: stretch; gap: var(--b5); min-height: 66px; }

.marka { display: flex; align-items: center; flex: 0 0 auto; }
.marka:hover { text-decoration: none; }
.marka-ad {
  font-family: var(--f-marka); font-size: 25px; font-weight: 600;
  color: var(--metin); letter-spacing: -.02em; line-height: 1;
}
.marka-alt { display: none; }

/* --- orta menü --- */
.ust-menu {
  display: flex; align-items: stretch; gap: var(--b1);
  margin: 0 auto;                      /* ortalar */
}
.ust-bag {
  position: relative;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 0 var(--b4);
  font-size: 15px; font-weight: 600; letter-spacing: -.005em;
  color: var(--metin-2);
  border-bottom: 2px solid transparent;
  transition: color var(--gecis), border-color var(--gecis);
}
.ust-bag svg { width: 18px; height: 18px; stroke: currentColor; flex: 0 0 auto; }
.ust-bag:hover { color: var(--metin); text-decoration: none; }
.ust-bag.aktif { color: var(--metin); border-bottom-color: var(--metin); }

/* --- sağ eylemler --- */
.ust-eylem { display: flex; align-items: center; gap: var(--b3); flex: 0 0 auto; }
.ust-konum {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 40px; padding: 0 var(--b2);
  font-size: 14.5px; font-weight: 600; color: var(--metin-2);
}
.ust-konum svg { width: 17px; height: 17px; stroke: currentColor; }
.ust-konum:hover { color: var(--metin); text-decoration: none; }

.ust-ikon {
  display: inline-grid; place-items: center;
  width: 42px; height: 42px; flex: 0 0 auto;
  border-radius: var(--r); background: var(--yuzey-2);
  color: var(--metin); border: 1px solid transparent;
  transition: background var(--gecis), border-color var(--gecis);
}
.ust-ikon:hover { background: var(--zemin); border-color: var(--cizgi-2); }
.ust-ikon svg { width: 18px; height: 18px; stroke: currentColor; }

/* .dugme-ana ile ayni ozgullukte kaliyordu ve sonra geldigi icin moru
   basiyordu; ozgulluk `.ust .ust-eylem` ile iki kademe yukari alindi.
   ⚠️ Burada eskiden `color: ... !important` vardi. Anasayfadaki saydam
      ustbilgi kuralini eziyordu ve dugme beyaz-uzerine-beyaz kaliyordu
      (olculdu: kontrast 1). !important kaldirildi; ozgulluk yeterli. */
.ust .ust-eylem .ust-cta {
  min-height: 42px; padding: 0 var(--b5);
  background: var(--metin); color: var(--zemin);
  font-size: 14.5px;
}
.ust .ust-eylem .ust-cta:hover { background: #000; }
.ust-cta svg { width: 16px; height: 16px; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ust .ust-eylem .ust-cta {
    background: var(--metin); color: #12111a;
  }
  :root:not([data-theme="light"]) .ust .ust-eylem .ust-cta:hover { background: #fff; }
}
:root[data-theme="dark"] .ust .ust-eylem .ust-cta {
  background: var(--metin); color: #12111a;
}

/* ---------------------------------------------------------------------
   6. ALT BİLGİ
   --------------------------------------------------------------------- */
.alt {
  margin-top: var(--b10);
  padding: var(--b8) 0 var(--b5);
  background: var(--zemin);
  border-top: 1px solid var(--cizgi);
}
.alt-ic {
  display: flex; flex-wrap: wrap; gap: var(--b7);
  justify-content: space-between; align-items: flex-start;
}
.alt-marka {
  font-family: var(--f-marka); font-size: 21px; font-weight: 600;
  margin: 0 0 var(--b1); color: var(--metin);
}
.alt .alt-not { max-width: 40ch; color: var(--metin-2); }
.alt-menu { display: grid; grid-template-columns: repeat(2, auto); gap: var(--b2) var(--b7); }
.alt-menu a { font-size: 14.5px; color: var(--metin-2); }
.alt-menu a:hover { color: var(--marka); }
.telif {
  margin: var(--b7) auto 0; padding-top: var(--b4);
  border-top: 1px solid var(--cizgi);
  font-size: 13px; color: var(--metin-3);
}

/* ---------------------------------------------------------------------
   7. BUTONLAR · ÇİPLER · ROZETLER
   --------------------------------------------------------------------- */
.dugme {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--b2);
  font-family: var(--f-govde); font-size: 15px; font-weight: 600; line-height: 1.2;
  padding: 11px 20px; min-height: 44px;
  border: 1px solid transparent; border-radius: 999px;
  cursor: pointer; text-align: center;
  transition: background var(--gecis), border-color var(--gecis), color var(--gecis);
}
.dugme:hover { text-decoration: none; }
.dugme svg { width: 17px; height: 17px; stroke: currentColor; flex: 0 0 auto; }

.dugme-ana { background: var(--cta); color: var(--cta-metin); }
.dugme-ana:hover { background: var(--cta-koyu); color: var(--cta-metin); }

.dugme-ikincil, .dugme-cam {
  background: var(--zemin); color: var(--metin);
  border-color: var(--cizgi-2);
}
.dugme-ikincil:hover, .dugme-cam:hover {
  background: var(--yuzey-2); border-color: var(--metin-3); color: var(--metin);
}

.dugme-wa { background: var(--wa); color: var(--wa-metin); border-color: transparent; }
.dugme-wa:hover { background: #1fbe5a; color: var(--wa-metin); }
.dugme-wa svg { fill: currentColor; stroke: none; }

.dugme-buyuk { padding: 13px 26px; font-size: 16px; min-height: 50px; }
.dugme-tam { width: 100%; }

.ikon-dugme {
  display: inline-grid; place-items: center; width: 40px; height: 40px;
  border-radius: 50%; border: 1px solid var(--cizgi-2);
  background: var(--zemin); color: var(--metin-2); cursor: pointer;
}
.ikon-dugme:hover { border-color: var(--marka); color: var(--marka); }
.ikon-dugme svg { width: 18px; height: 18px; stroke: currentColor; }

/* Çipler */
.cipler { display: flex; flex-wrap: wrap; gap: var(--b2); list-style: none; margin: 0; padding: 0; }
.cipler li { margin: 0; }
.cip, .cip-pasif {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 8px 15px; min-height: 38px;
  font-size: 14.5px; font-weight: 500; line-height: 1.2;
  border-radius: 999px; border: 1px solid var(--cizgi);
  background: var(--zemin); color: var(--metin);
}
.cip:hover { border-color: var(--marka); color: var(--marka); text-decoration: none; }
.cip small { color: var(--metin-3); font-size: 12.5px; }
.cip-pasif { background: var(--yuzey-2); color: var(--metin-2); border-color: transparent; }
.cipler-il .cip-pasif { font-size: 13.5px; padding: 6px 12px; min-height: 32px; }

.etiketler { display: flex; flex-wrap: wrap; gap: var(--b2); list-style: none; margin: 0; padding: 0; }
.etiketler a {
  display: inline-block; padding: 7px 13px; font-size: 14px;
  border: 1px solid var(--cizgi); border-radius: var(--r-sm);
  color: var(--metin-2); background: var(--zemin);
}
.etiketler a:hover { border-color: var(--marka); color: var(--marka); text-decoration: none; }

/* Rozetler */
.rozet {
  display: inline-block; padding: 3px 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .03em;
  background: var(--yuzey-2); color: var(--metin-2);
}
.rozet-dogrulanmis { background: #e8f4ee; color: var(--yesil); }
.rozet-demo { background: var(--altin-zemin); color: var(--altin); }
@media (prefers-color-scheme: dark) { .rozet-dogrulanmis { background: #14301f; } }

/* ---------------------------------------------------------------------
   8. KART SİSTEMİ — tek taban
   --------------------------------------------------------------------- */
.kart, .vkart, .kkart, .skart, .gkart, .paket-kart, .yan-kutu,
.yorum, .puan-ozet, .metin-blok, .sss details {
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  border-radius: var(--r);
}

/* Tıklanabilir kartlar: hover'da hafif yükselme, animasyon yok */
.kart, .vkart, .kkart, .skart {
  display: block; overflow: hidden; color: inherit;
  transition: border-color var(--gecis), box-shadow var(--gecis);
}
.kart:hover, .vkart:hover, .kkart:hover, .skart:hover {
  border-color: var(--cizgi-2); box-shadow: var(--golge-2); text-decoration: none;
}

/* Kart görselleri — tek en-boy oranı */
.vkart-gorsel, .kkart-gorsel, .skart-gorsel, .paket-gorsel {
  display: block; position: relative; overflow: hidden;
  aspect-ratio: 3 / 2; background: var(--yuzey-2);
}
.vkart-gorsel img, .kkart-gorsel img, .skart-gorsel img, .paket-gorsel img {
  width: 100%; height: 100%; object-fit: cover;
}

/* --- basit kart (kategori listesi vb.) --- */
.kart { padding: var(--b4) var(--b5); }
.kart-ad { font-weight: 600; font-size: 16px; margin: 0 0 3px; color: var(--metin); }
.kart-kategori, .kart-not { font-size: 14px; color: var(--metin-2); margin: 0; }

/* --- vitrin kartı: paket --- */
.vkart { display: flex; flex-direction: column; }
.vkart-rozet {
  position: absolute; top: 10px; left: 10px;
  background: var(--zemin); color: var(--metin);
  padding: 4px 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600;
}
.vkart-govde { display: block; padding: var(--b4) var(--b4) var(--b4); flex: 1; }
.vkart-ust {
  display: block; font-size: 12px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--metin-3); margin-bottom: 3px;
}
.vkart-ad {
  display: block; font-family: var(--f-baslik); font-size: 17px; font-weight: 700;
  line-height: 1.2; color: var(--metin); margin-bottom: 5px;
}
.vkart-not {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; font-size: 14px; color: var(--metin-2); line-height: 1.5;
}
.vkart-fiyat {
  display: flex; align-items: baseline; gap: 6px;
  margin-top: var(--b3); padding-top: var(--b3);
  border-top: 1px solid var(--cizgi);
}
.vkart-fiyat b { font-size: 17px; font-weight: 600; color: var(--altin); }
.vkart-fiyat small { font-size: 12.5px; color: var(--metin-3); }

/* --- kategori kartı --- */
.kkart { display: flex; flex-direction: column; }
.kkart-govde { display: block; padding: var(--b3) var(--b4) var(--b4); }
.kkart-ad {
  display: block; font-family: var(--f-baslik); font-size: 16.5px; font-weight: 700;
  color: var(--metin); margin-bottom: 2px;
}
.kkart-not { display: block; font-size: 13.5px; color: var(--metin-3); }

/* --- şehir kartı: görsel üstünde yazı (perde işlevsel) --- */
.skart { position: relative; display: flex; align-items: flex-end; min-height: 176px; }
.skart-gorsel { position: absolute; inset: 0; aspect-ratio: auto; }
.skart::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(var(--perde-rgb),.86) 0%, rgba(var(--perde-rgb),.45) 45%,
                              rgba(var(--perde-rgb),.08) 100%);
}
.skart-govde { position: relative; z-index: 1; display: grid; gap: 2px; padding: var(--b4); width: 100%; }
.skart-ad { font-family: var(--f-baslik); font-size: 18px; font-weight: 700; color: #fff; }
.skart-not { font-size: 12.5px; font-weight: 500; color: rgba(255,255,255,.78); }
.skart-para {
  position: absolute; z-index: 1; top: 10px; right: 10px;
  background: rgba(255,255,255,.92); color: var(--metin);
  padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600;
}

/* --- güven kartı --- */
.gkart { padding: var(--b5); }
.gkart-ad { font-family: var(--f-baslik); font-size: 16.5px; font-weight: 700; margin: 0 0 5px; }
.gkart-not { font-size: 14.5px; color: var(--metin-2); margin: 0; max-width: none; }

/* --- hizmet listesi (metin satırları) --- */
.hliste { display: grid; gap: var(--b2); grid-template-columns: repeat(auto-fill, minmax(238px, 1fr)); list-style: none; margin: 0; padding: 0; }
.hliste li { margin: 0; }
.hliste a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--b3);
  min-height: 48px; padding: 10px var(--b4);
  background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r-sm);
  color: var(--metin); transition: border-color var(--gecis), background var(--gecis);
}
.hliste a:hover { border-color: var(--marka); background: var(--marka-acik); text-decoration: none; }
.hliste-ad { font-size: 15px; font-weight: 500; }
.hliste-fiyat { font-size: 13px; font-weight: 600; color: var(--altin); white-space: nowrap; }

/* --- kategori bandı (/hizmetler) --- */
.kbolum { margin-top: var(--b8); }
.kbolum:first-of-type { margin-top: var(--b6); }
.kbolum-bas { background: none; border: 0; }
.kbolum-ic {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--b3); padding: 0 var(--b6) var(--b4);
}
.kbolum-metin h2 { margin: 0; }
.kbolum-metin p { margin: 3px 0 0; font-size: 14.5px; color: var(--metin-2); }
.kbolum-gorsel { display: none; }

/* --- dizin gezinme --- */
.dizin-bas { padding: var(--b7) 0 0; }
.dizin-bas-dar { max-width: 900px; }
.dizin-gezinme { display: flex; flex-wrap: wrap; gap: var(--b2); }
.dizin-gezinme a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; min-height: 38px;
  font-size: 14.5px; font-weight: 500;
  border: 1px solid var(--cizgi); border-radius: 999px;
  background: var(--zemin); color: var(--metin);
}
.dizin-gezinme a:hover { border-color: var(--marka); color: var(--marka); text-decoration: none; }
.dizin-gezinme span { color: var(--metin-3); font-size: 12.5px; }

/* ---------------------------------------------------------------------
   9. VİTRİN (hero) ve KAHRAMAN
   --------------------------------------------------------------------- */
.vitrin {
  position: relative; isolation: isolate;
  background: var(--zemin);
  border-bottom: 1px solid var(--cizgi);
  overflow: hidden;
}
.vitrin-fon { position: absolute; inset: 0; z-index: -2; }
.vitrin-fon img { width: 100%; height: 100%; object-fit: cover; }
/* Perde: fotoğraf üstünde metin okunabilsin diye. Dekor değil.
   Fotoğraf yoksa hiç basılmaz — aksi hâlde beyaz zemini karartıp
   koyu metni okunmaz hâle getiriyordu. */
.vitrin-perde { display: none; }
.vitrin-fotograf .vitrin-perde {
  display: block; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(var(--perde-rgb),.86) 0%, rgba(var(--perde-rgb),.7) 46%,
                              rgba(var(--perde-rgb),.28) 100%);
}
.vitrin-ic { padding: var(--b10) 0; max-width: 640px; }
.vitrin-ic-sayfa .vitrin-ic { padding: var(--b8) 0 var(--b9); }
.vitrin h1 { margin: 0 0 var(--b4); }
.vitrin-alt { font-size: 17.5px; line-height: 1.55; color: var(--metin-2); margin: 0 0 var(--b6); }
.vitrin-eylem { display: flex; flex-wrap: wrap; gap: var(--b3); }
.vitrin-not { margin: var(--b5) 0 0; font-size: 14.5px; color: var(--metin-2); }
.vitrin-not strong { color: var(--metin); }

/* Fotoğraflı vitrin: metin beyaza döner */
.vitrin-fotograf .vitrin-ic,
.vitrin-fotograf h1,
.vitrin-fotograf .vitrin-alt,
.vitrin-fotograf .vitrin-not { color: #fff; }
.vitrin-fotograf .vitrin-alt { color: rgba(255,255,255,.86); }
.vitrin-fotograf .vitrin-not { color: rgba(255,255,255,.78); }
.vitrin-fotograf .vitrin-not strong { color: #fff; }
.vitrin-fotograf .bolum-etiket { color: rgba(255,255,255,.72); }
.vitrin-fotograf .kirinti,
.vitrin-fotograf .kirinti a { color: rgba(255,255,255,.72); }
.vitrin-fotograf .dugme-ikincil, .vitrin-fotograf .dugme-cam {
  background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.42);
}
.vitrin-fotograf .dugme-ikincil:hover, .vitrin-fotograf .dugme-cam:hover {
  background: rgba(255,255,255,.2); border-color: #fff;
}

/* Sade başlık bloğu (fotoğrafsız sayfalar) */
.kahraman { padding: var(--b7) 0 0; }
.kahraman h1 { margin: 0 0 var(--b3); }
.kahraman > p { font-size: 17px; color: var(--metin-2); }
.kahraman-hizmet { padding: var(--b5) 0 0; }
.kahraman-baslik { margin: 0; }
.kahraman-satir { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--b3); }
.kahraman-dugmeler, .kahraman-eylem { display: flex; flex-wrap: wrap; gap: var(--b3); }
.kahraman-gorsel-sarmal { margin-top: var(--b5); border-radius: var(--r-lg); overflow: hidden; }
.kahraman-gorsel { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; }

/* Işık bandı — CTA şeridi */
.isik-bant { background: var(--marka-acik); border-block: 1px solid var(--cizgi); padding: var(--b7) 0; }
.isik-bant .bolum-etiket { color: var(--marka); }
.isik-eylem { display: flex; flex-wrap: wrap; gap: var(--b3); }

/* Kapanış CTA */
.kapanis {
  margin-top: var(--b9);
  background: var(--zemin); border-top: 1px solid var(--cizgi);
  padding: var(--b8) 0;
}
.kapanis-ic {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--b5);
}
.kapanis-ic h2 { margin: 0 0 6px; }
.kapanis-ic p { margin: 0; color: var(--metin-2); }
.kapanis-eylem { display: flex; flex-wrap: wrap; gap: var(--b3); }

/* ---------------------------------------------------------------------
   10. İÇERİK METNİ · SSS · ADIMLAR
   --------------------------------------------------------------------- */
.metin { padding: var(--b8) 0 0; display: grid; gap: var(--b4); }
.metin-blok { padding: var(--b5) var(--b6); }
.metin-blok h2 { font-size: 22px; margin: 0 0 var(--b3); }
.metin-blok p { color: var(--metin-2); margin-bottom: var(--b3); }
.metin-blok p:last-child { margin-bottom: 0; }
.metin-blok strong { color: var(--metin); }
.metin-giris { background: none; border: 0; padding: 0; }
.metin-giris p { font-size: 17px; color: var(--metin); }

/* Katlanabilir uzun metin (2026-09-12 duzeltmesi)
   ESKI DAVRANIS HATALI: kirpma her genislikte uygulaniyor, acma kontrolu yalniz
   <=640px'te gorunuyordu — masaustunde uzun blok 3 satirda kalip acilamiyordu.
   Kontrol de checkbox+label idi (ekran okuyucuda "onay kutusu"). Artik kirpma
   YALNIZ js-katli sinifiyla (JS mobilde kurar), kontrol gercek button+aria-expanded.
   JS yoksa metin tam gorunur. */
.katla-kutu { position: relative; }
.katla-kutu.js-katli .katla-govde {
  /* line-clamp coklu <p> iceren blokta guvenilir degil (2026-09-12 olcumu: ilk
     blok 3 satir yerine 8 satirda kaliyordu). Kesin yukseklik + solma kullaniliyor. */
  max-height: 5.2em; overflow: hidden; position: relative;
  -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 60%, transparent 100%);
}
.katla-kutu.js-katli .katla-govde > *:first-child { margin-top: 0; }
.katla-kutu.js-katli.acik .katla-govde {
  max-height: none; -webkit-mask-image: none; mask-image: none;
}
.katla-dugme {
  display: inline-block; margin-top: var(--b2); cursor: pointer;
  background: none; border: 0; padding: 0; font: inherit;
  font-size: 14px; font-weight: 600; color: var(--marka);
}
.katla-dugme:focus-visible { outline: 2px solid var(--cta); outline-offset: 2px; }

/* SSS */
.sss { display: grid; gap: var(--b2); }
.sss details { overflow: hidden; }
.sss summary {
  cursor: pointer; list-style: none;
  padding: var(--b4) var(--b5); padding-right: var(--b8);
  font-size: 15.5px; font-weight: 600; color: var(--metin);
  position: relative;
}
.sss summary::-webkit-details-marker { display: none; }
.sss summary::after {
  content: ''; position: absolute; right: var(--b5); top: 50%;
  width: 9px; height: 9px; margin-top: -6px;
  border-right: 2px solid var(--metin-3); border-bottom: 2px solid var(--metin-3);
  transform: rotate(45deg); transition: transform var(--gecis);
}
.sss details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.sss summary:hover { color: var(--marka); }
.sss .cevap {
  margin: 0; padding: 0 var(--b5) var(--b5);
  font-size: 15px; color: var(--metin-2); max-width: 72ch;
}

/* Adımlar */
.adimlar { list-style: none; counter-reset: adim; margin: 0; padding: 0;
           display: grid; gap: var(--b4); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.adimlar li {
  counter-increment: adim; margin: 0;
  padding: var(--b5) var(--b5) var(--b5) var(--b5);
  background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r);
}
.adimlar li::before {
  content: counter(adim);
  display: grid; place-items: center; width: 28px; height: 28px; margin-bottom: var(--b3);
  border-radius: 50%; background: var(--marka-acik); color: var(--marka);
  font-size: 13px; font-weight: 700;
}
.adim-ad { font-family: var(--f-baslik); font-size: 16.5px; font-weight: 700; margin: 0 0 5px; }
.adim-not { font-size: 14.5px; color: var(--metin-2); margin: 0; max-width: none; }

/* Uyarı kutusu */
.uyari {
  margin: var(--b5) 0 0;
  padding: var(--b4) var(--b5);
  background: var(--altin-zemin); border: 1px solid var(--cizgi);
  border-left: 3px solid var(--altin); border-radius: var(--r-sm);
  color: var(--metin);
}
.uyari ul { margin: 6px 0 0; padding-left: 18px; }

/* ---------------------------------------------------------------------
   11. HİZMET DETAYI — gövde + yan kutu
   --------------------------------------------------------------------- */
.hizmet-duzen {
  display: grid; gap: var(--b7);
  grid-template-columns: minmax(0, 1fr) 330px;
  align-items: start;
  padding-top: var(--b6);
}
.hizmet-govde { min-width: 0; }
.hizmet-govde > section { padding-top: var(--b8); }
.hizmet-govde > section:first-child { padding-top: 0; }
.hizmet-yan { position: sticky; top: 88px; }

.yan-kutu { padding: var(--b5); }
.yan-kutu .yan-baslik {
  font-family: var(--f-baslik); font-size: 17px; font-weight: 700;
  margin: 0 0 5px; color: var(--metin);
}
.yan-kutu .yan-not { font-size: 14px; color: var(--metin-2); margin: 0 0 var(--b4); }

.yan-fiyat {
  display: grid; gap: 2px; padding: var(--b4);
  background: var(--yuzey-2); border-radius: var(--r-sm);
  margin-bottom: var(--b4);
}
.yan-fiyat-etiket, .paket-fiyat-etiket {
  font-size: 11.5px; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--metin-3);
}
.yan-fiyat-tutar, .paket-fiyat-tutar {
  font-family: var(--f-baslik); font-size: 26px; font-weight: 700;
  color: var(--metin); line-height: 1.1;
}
.yan-fiyat-aralik, .paket-fiyat-aralik { font-size: 13px; color: var(--metin-2); }
.yan-fiyat-kdv, .paket-kdv { font-size: 12.5px; color: var(--metin-3); }
.yan-fiyat-kapora, .paket-kapora {
  font-size: 12.5px; color: var(--yesil); font-weight: 600; margin-top: 3px;
}

.yan-ozellik { list-style: none; margin: 0 0 var(--b4); padding: 0; display: grid; gap: 7px; }
.yan-ozellik li {
  position: relative; padding-left: 22px; font-size: 14px; color: var(--metin-2); margin: 0;
}
.yan-ozellik li::before {
  content: ''; position: absolute; left: 2px; top: 7px;
  width: 10px; height: 6px; border-left: 2px solid var(--yesil);
  border-bottom: 2px solid var(--yesil); transform: rotate(-45deg);
}
.yan-paket-bag { font-size: 14px; font-weight: 600; margin: 0 0 var(--b4); }

.yan-meta {
  display: grid; gap: 0; margin-bottom: var(--b4);
  border: 1px solid var(--cizgi); border-radius: var(--r-sm); overflow: hidden;
}
.yan-meta div {
  display: flex; align-items: center; gap: var(--b3);
  padding: 11px var(--b4); font-size: 14px; color: var(--metin-2);
  border-bottom: 1px solid var(--cizgi);
}
.yan-meta div:last-child { border-bottom: 0; }
.yan-meta svg { width: 17px; height: 17px; stroke: var(--marka); flex: 0 0 auto; }

.yan-kutu .dugme, .yan-kutu .yan-katla > summary, .yan-kutu .yan-ikincil {
  width: 100%; margin-top: var(--b2);
}
.yan-katla > summary { list-style: none; }
.yan-katla > summary::-webkit-details-marker { display: none; }
.yan-ikincil {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--b2);
  min-height: 44px; padding: 10px 18px;
  font: inherit; font-size: 14.5px; font-weight: 500;
  background: none; border: 1px solid var(--cizgi); border-radius: 999px;
  color: var(--metin-2); cursor: pointer;
}
.yan-ikincil:hover { border-color: var(--marka); color: var(--marka); }
.yan-ikincil svg { width: 16px; height: 16px; stroke: currentColor; }
.yan-paylas {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  width: 100%; margin-top: var(--b2); padding: 10px 18px; min-height: 44px;
  background: none; border: 1px solid var(--cizgi); border-radius: 999px;
  font: inherit; font-size: 14.5px; font-weight: 500; color: var(--metin-2); cursor: pointer;
}
.yan-paylas:hover { border-color: var(--marka); color: var(--marka); }
.yan-paylas svg { width: 15px; height: 15px; stroke: currentColor; }
.yan-paylas[data-durum="kopyalandi"] { border-color: var(--yesil); color: var(--yesil); }
.yan-alt-not {
  margin: var(--b4) 0 0; padding-top: var(--b3);
  border-top: 1px solid var(--cizgi);
  font-size: 13.5px; line-height: 1.55; color: var(--metin-2);
}

/* Yan kutudaki kompakt form */
.yan-form { display: grid; gap: var(--b3); margin-top: var(--b3); }
.yan-alan { display: grid; gap: 4px; }
.yan-alan > span {
  font-size: 12px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--metin-3);
}
.yan-alan > span em { font-style: normal; text-transform: none; letter-spacing: 0; }
.yan-alan input {
  width: 100%; padding: 10px 12px; min-height: 44px;
  font: inherit; font-size: 15px; color: var(--metin);
  background: var(--zemin); border: 1px solid var(--cizgi-2); border-radius: var(--r-sm);
}
.yan-alan input:focus { outline: none; border-color: var(--cta); box-shadow: 0 0 0 3px var(--marka-acik); }
.yan-onay { display: grid; grid-template-columns: auto 1fr; gap: var(--b2); align-items: start; font-size: 13.5px; color: var(--metin-2); }
.yan-onay input { width: 17px; height: 17px; margin-top: 3px; }

/* ---------------------------------------------------------------------
   12. PAKET · FİYAT TABLOSU · PUAN · YORUM
   --------------------------------------------------------------------- */
.paket-kart { display: flex; flex-direction: column; overflow: hidden; }
.paket-gorsel { aspect-ratio: 16 / 9; }
.paket-rozet {
  position: absolute; top: 10px; left: 10px;
  background: var(--marka); color: #fff;
  padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600;
}
.paket-ad { font-family: var(--f-baslik); font-size: 18px; font-weight: 700; margin: 0; padding: var(--b4) var(--b5) 0; }
.paket-ozet { font-size: 14.5px; color: var(--metin-2); margin: 5px 0 0; padding: 0 var(--b5); }
.paket-fiyat {
  margin: var(--b4) var(--b5) 0; padding: var(--b3) var(--b4);
  background: var(--yuzey-2); border-radius: var(--r-sm);
  display: grid; gap: 1px;
}
.paket-ozellik { list-style: none; margin: var(--b4) 0 0; padding: 0 var(--b5); display: grid; gap: 7px; }
.paket-ozellik li { position: relative; padding-left: 22px; font-size: 14.5px; color: var(--metin-2); margin: 0; }
.paket-ozellik li::before {
  content: ''; position: absolute; left: 2px; top: 7px;
  width: 10px; height: 6px; border-left: 2px solid var(--yesil);
  border-bottom: 2px solid var(--yesil); transform: rotate(-45deg);
}
.paket-ozet-satir { font-size: 14px; color: var(--metin-2); padding: 0 var(--b5); margin: var(--b3) 0 0; }
.paket-not {
  margin: var(--b4) var(--b5) 0; padding: var(--b3) var(--b4);
  background: var(--altin-zemin); border-left: 3px solid var(--altin);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: 13.5px; color: var(--metin-2);
}
.paket-eylem { margin-top: auto; padding: var(--b4) var(--b5) var(--b5); }
.paket-kart .dugme-tam { width: 100%; }

.fiyat-tablo { width: 100%; border-collapse: collapse; font-size: 15px; }
.fiyat-tablo th, .fiyat-tablo td {
  text-align: left; padding: 11px var(--b3);
  border-bottom: 1px solid var(--cizgi);
}
.fiyat-tablo th { font-weight: 600; color: var(--metin-3); font-size: 13px; text-transform: uppercase; letter-spacing: .05em; }
.fiyat-tablo td { color: var(--metin-2); }
.fiyat-tablo td:first-child { color: var(--metin); font-weight: 500; }

/* Puan */
.puan-ozet { display: flex; flex-wrap: wrap; gap: var(--b6); align-items: center; padding: var(--b5); }
.puan-buyuk { font-family: var(--f-baslik); font-size: 40px; font-weight: 700; line-height: 1; }
.puan-yildiz, .yorum-yildiz { color: var(--altin); letter-spacing: .08em; }
.puan-adet { font-size: 13.5px; color: var(--metin-3); }
.puan-dagilim { flex: 1; min-width: 200px; display: grid; gap: 4px; }
.puan-satir-etiket { font-size: 13px; color: var(--metin-2); }
.puan-secim { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: var(--b2); }
.puan-secim label { cursor: pointer; }
.puan-secim input { position: absolute; opacity: 0; }
.puan-secim span { color: var(--altin); font-size: 21px; }
.puan-secim input:focus-visible + span { outline: 2px solid var(--cta); outline-offset: 3px; }

/* Yorum */
.yorum-liste { display: grid; gap: var(--b3); }
.yorum { padding: var(--b5); }
.yorum-ust { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--b3); margin-bottom: var(--b2); }
.yorum-ad { font-weight: 600; margin: 0; }
.yorum-baslik { font-family: var(--f-baslik); font-size: 17px; margin: 0 0 5px; }
.yorum-govde { color: var(--metin-2); margin: 0; }
.yorum-alt { display: flex; flex-wrap: wrap; gap: var(--b3); margin-top: var(--b3); font-size: 13px; color: var(--metin-3); }
.yorum-dogrulama { font-size: 14px; color: var(--metin-2); }

/* ---------------------------------------------------------------------
   13. FORMLAR
   --------------------------------------------------------------------- */
.form { display: block; max-width: 640px; }
.form .alan, .alan { display: grid; gap: 6px; margin-bottom: var(--b4); }
.alan label, .form .alan > span { font-size: 14.5px; font-weight: 600; color: var(--metin); }
.form .alan small { font-weight: 400; color: var(--metin-3); }

.alan input, .alan select, .alan textarea,
.form input, .form select, .form textarea {
  width: 100%; padding: 11px var(--b3); min-height: 44px;
  font: inherit; font-size: 15.5px; color: var(--metin);
  background: var(--zemin);
  border: 1px solid var(--cizgi-2); border-radius: var(--r-sm);
  transition: border-color var(--gecis), box-shadow var(--gecis);
}
.alan input:focus, .alan select:focus, .alan textarea:focus,
.form input:focus, .form select:focus, .form textarea:focus {
  outline: none; border-color: var(--cta); box-shadow: 0 0 0 3px var(--marka-acik);
}
.alan textarea, .form textarea { min-height: 132px; resize: vertical; line-height: 1.55; }
.alan .ipucu, .ipucu { font-size: 13.5px; color: var(--metin-2); }

.zorunlu { color: #b3261e; }
.alan-hata { color: #b3261e; font-size: 13.5px; }
@media (prefers-color-scheme: dark) { .alan-hata, .zorunlu { color: #ff8a80; } }
.alan-onay { grid-template-columns: auto 1fr; align-items: start; gap: var(--b2); }
.form-not { font-size: 13.5px; color: var(--metin-2); margin-top: var(--b3); }

/* Bal küpü — ekran okuyucudan da uzak */
.bal, .bal-kupu, .balkupu {
  position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden;
}

/* Talep formu grupları */
.talep-giris { max-width: 62ch; font-size: 17px; line-height: 1.6; color: var(--metin-2); }
.talep-not-ust { margin: 0 0 var(--b4); font-size: 14.5px; color: var(--metin-2); }
.talep-form { max-width: none; }
.talep-form .alan { margin-bottom: 0; }

.form-grup {
  border: 1px solid var(--cizgi); background: var(--yuzey);
  border-radius: var(--r); padding: var(--b2) var(--b5) var(--b5);
  margin: 0 0 var(--b4);
}
.form-grup > .alan, .form-grup > .form-satir { margin-top: var(--b4); }
.form-grup legend {
  display: flex; align-items: center; gap: var(--b2);
  padding: 0 var(--b2);
  font-size: 12.5px; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--metin-2);
}
.grup-ikon {
  display: inline-grid; place-items: center; width: 28px; height: 28px;
  border-radius: 50%; background: var(--marka-acik); flex: 0 0 auto;
}
.grup-ikon svg { width: 15px; height: 15px; stroke: var(--marka); }

.form-satir { display: grid; gap: var(--b4); grid-template-columns: 1fr 1fr; }
.form-satir-3 { grid-template-columns: repeat(3, 1fr); }

.talep-onay {
  display: grid; grid-template-columns: auto 1fr; align-items: start;
  gap: var(--b2); margin: 0 0 var(--b5); font-size: 14.5px;
}
.talep-onay input { width: 18px; height: 18px; margin-top: 3px; }
.talep-onay label { font-weight: 400; color: var(--metin-2); }
.talep-gonder { display: flex; flex-wrap: wrap; gap: var(--b3); align-items: center; }

/* Büyük arama formu (/ara) */
/* Arama formu artik yalniz /ara sayfasinda (header'da ikon butonu var) */
.ara-form { display: flex; align-items: center; gap: var(--b2); }
.ara-form button {
  flex: 0 0 auto; width: 50px; height: 50px; border: 0; border-radius: 999px;
  background: var(--cta); color: var(--cta-metin); cursor: pointer;
  display: grid; place-items: center;
}
.ara-form button:hover { background: var(--cta-koyu); }
.ara-form button svg { width: 19px; height: 19px; stroke: currentColor; }

.ara-form-buyuk {
  display: flex; gap: var(--b2); max-width: 620px; margin-bottom: var(--b6);
}
.ara-form-buyuk input {
  flex: 1; padding: 13px var(--b4); min-height: 50px; font: inherit; font-size: 16px;
  background: var(--zemin); border: 1px solid var(--cizgi-2); border-radius: 999px;
  color: var(--metin);
}
.ara-form-buyuk input:focus { outline: none; border-color: var(--cta); box-shadow: 0 0 0 3px var(--marka-acik); }

/* ---------------------------------------------------------------------
   14. WHATSAPP PENCERESİ — <dialog>
   ⚠️ Burada `display:none` KULLANMA. Yazar stili, tarayıcının
   `dialog[open]{display:block}` kuralını ezer; pencere açılır ama
   0x0 çizilir (2026-09-03'te tam olarak bu oldu). Görünürlüğü
   `open` niteliği yönetir.
   --------------------------------------------------------------------- */
.wa-simge svg, .wa-ikon svg { width: 17px; height: 17px; }
.wa-ikon-kart { margin-left: auto; color: var(--wa); display: inline-flex; }
.wa-ikon-kart svg { width: 18px; height: 18px; fill: currentColor; stroke: none; }

.wa-pencere {
  width: min(460px, calc(100vw - 32px));
  max-height: min(88vh, 720px);
  padding: 0; border: 0; border-radius: var(--r-lg);
  background: var(--yuzey); color: var(--metin);
  box-shadow: 0 24px 60px -24px rgba(var(--perde-rgb),.55);
  overflow: auto;
}
.wa-pencere::backdrop { background: rgba(var(--perde-rgb),.55); }

.wa-kapat-form { position: sticky; top: 0; display: flex; justify-content: flex-end; z-index: 1; }
.wa-kapat {
  border: 0; background: none; cursor: pointer;
  width: 44px; height: 44px; font-size: 26px; line-height: 1;
  color: var(--metin-3);
}
.wa-kapat:hover { color: var(--metin); }

.wa-ust {
  display: flex; align-items: center; gap: var(--b3);
  padding: 0 var(--b6) var(--b4);
  margin-top: calc(var(--b4) * -1);
}
.wa-simge {
  display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 auto;
  border-radius: 50%; background: rgba(37,211,102,.14); color: #128c4a;
}
.wa-simge svg { stroke: currentColor; }
.wa-baslik { font-size: 18px; font-weight: 700; margin: 0; letter-spacing: -.015em; }
.wa-alt { font-size: 13.5px; color: var(--metin-2); margin: 2px 0 0; }

.wa-govde { display: grid; gap: var(--b3); padding: 0 var(--b6) var(--b6); }
.wa-govde textarea {
  width: 100%; padding: 10px 12px; font: inherit; font-size: 15px;
  color: var(--metin); background: var(--zemin);
  border: 1px solid var(--cizgi-2); border-radius: var(--r-sm); resize: vertical;
}
.wa-govde textarea:focus { outline: none; border-color: var(--cta); box-shadow: 0 0 0 3px var(--marka-acik); }
.wa-govde .dugme { width: 100%; margin-top: var(--b2); }
.wa-not { font-size: 12.5px; color: var(--metin-3); margin: 0; }
.wa-uyari {
  margin: 0; padding: 9px var(--b3); border-radius: var(--r-sm);
  background: #fdeceb; color: #b3261e; font-size: 13.5px;
}
@media (prefers-color-scheme: dark) { .wa-uyari { background: #3a1c1a; color: #ff8a80; } }

/* Mobil alt eylem çubuğu */
.alt-cubuk { display: none; }

/* ---------------------------------------------------------------------
   15. ŞEHİR SAYFASI
   --------------------------------------------------------------------- */
.sehir-kat {
  display: flex; align-items: baseline; gap: var(--b2);
  font-family: var(--f-govde); font-size: 12.5px; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase; color: var(--metin-3);
  margin: var(--b6) 0 var(--b3);
}
.sehir-kat:first-of-type { margin-top: 0; }
.sehir-kat small { font-size: 11.5px; color: var(--altin); letter-spacing: .04em; }

.ulke-blok { margin-top: var(--b6); }
.ulke-bas { font-family: var(--f-baslik); font-size: 20px; margin: 0 0 var(--b3); }

/* ---------------------------------------------------------------------
   16. MOBİL — tek kırılma seti (900 / 640)
   --------------------------------------------------------------------- */
@media (max-width: 900px) {
  .kap { padding: 0 var(--b5); }

  .ust-ic { gap: var(--b3); }
  .ust-bag { padding: 0 var(--b3); font-size: 14.5px; }
  .ust-konum span { display: none; }
  .ust-konum { padding: 0; width: 40px; justify-content: center; }

  .hizmet-duzen { grid-template-columns: 1fr; gap: var(--b6); }
  /* Yan kutu içeriğin sonuna gider: önce oku, sonra karar ver */
  .hizmet-yan { position: static; order: 1; }

  .form-satir, .form-satir-3 { grid-template-columns: 1fr; }
  .alt-menu { grid-template-columns: repeat(2, 1fr); }
  .vitrin-ic { padding: var(--b8) 0; max-width: none; }
  .vitrin-fotograf .vitrin-perde {
    background: linear-gradient(0deg, rgba(var(--perde-rgb),.9) 8%, rgba(var(--perde-rgb),.66) 62%,
                                rgba(var(--perde-rgb),.42) 100%);
  }

  /* Alt eylem çubuğu — teklif her an bir dokunuş uzakta */
  .alt-cubuk {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    display: flex; gap: var(--b2); padding: var(--b2) var(--b4);
    padding-bottom: calc(var(--b2) + env(safe-area-inset-bottom, 0px));
    background: var(--zemin); border-top: 1px solid var(--cizgi);
  }
  .alt-cubuk .dugme { flex: 1; }
  body:has(.alt-cubuk) .alt { padding-bottom: 84px; }
}

@media (max-width: 640px) {
  .kap { padding: 0 var(--b4); }

  body { font-size: 15.5px; }
  h3 { font-size: 17.5px; }

  .bolum { padding-top: var(--b8); }
  .serit { padding: var(--b8) 0 var(--b7); margin-top: var(--b8); }

  /* Üst başlık: arama alta iner, menü linkleri gizlenir (alt menüde var) */
  /* Ust baslik mobilde iki satir: marka + eylemler, altinda kaydirilabilir menu */
  .ust-ic { flex-wrap: wrap; gap: var(--b2); min-height: 0; padding-block: var(--b2); }
  .ust-menu {
    order: 3; flex-basis: 100%; margin: 0;
    overflow-x: auto; scrollbar-width: none;
    margin-inline: calc(var(--b4) * -1); padding-inline: var(--b4);
  }
  .ust-menu::-webkit-scrollbar { display: none; }
  .ust-bag { padding: var(--b2) var(--b3); font-size: 14.5px; white-space: nowrap; }
  .ust-eylem { margin-left: auto; gap: var(--b2); }
  .ust-konum span { display: none; }
  .ust-konum { padding: 0; width: 42px; justify-content: center; }
  .ust-cta { padding: 0 var(--b4); font-size: 14px; }
  .ust-cta svg { display: none; }

  .vitrin-ic { padding: var(--b7) 0; }
  .vitrin-alt { font-size: 16px; }
  .vitrin-eylem .dugme, .kapanis-eylem .dugme, .talep-gonder .dugme { width: 100%; }

  /* Kart sıraları yatay kaydırılır — mobil uygulama hissi */
  .izgara-vitrin, .izgara-kategori, .izgara-paket {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
    gap: var(--b3); padding-bottom: var(--b2);
    margin-inline: calc(var(--b4) * -1); padding-inline: var(--b4);
    scrollbar-width: none;
  }
  .izgara-vitrin::-webkit-scrollbar,
  .izgara-kategori::-webkit-scrollbar,
  .izgara-paket::-webkit-scrollbar { display: none; }
  .izgara-vitrin > *, .izgara-paket > * { flex: 0 0 78%; scroll-snap-align: start; }
  .izgara-kategori > * { flex: 0 0 62%; scroll-snap-align: start; }

  /* Şehirler ızgara kalır: satırda 2 kart */
  .izgara-sehir { grid-template-columns: repeat(2, 1fr); gap: var(--b3); }
  .skart { min-height: 132px; }
  .skart-ad { font-size: 16px; }

  .hliste { grid-template-columns: 1fr; }
  .metin-blok { padding: var(--b4) var(--b5); }
  .metin-blok h2 { font-size: 20px; }
  .kbolum-ic { padding-inline: 0; }
  .sss summary { padding: var(--b3) var(--b4); padding-right: var(--b7); font-size: 15px; }
  .sss .cevap { padding: 0 var(--b4) var(--b4); }
  .adimlar { grid-template-columns: 1fr; gap: var(--b3); }
  .alt-ic { gap: var(--b5); }
  .alt-menu { grid-template-columns: 1fr 1fr; }
  .form-grup { padding: var(--b1) var(--b4) var(--b4); }
  .puan-ozet { gap: var(--b4); }
}

/* ---------------------------------------------------------------------
   17. HAREKET AZALTMA · YAZDIRMA
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

@media print {
  .ust, .alt, .alt-cubuk, .vitrin-fon, .vitrin-perde, .yan-kutu, .kapanis { display: none; }
  body { background: #fff; color: #000; }
  .kap { max-width: none; padding: 0; }
}

/* ---------------------------------------------------------------------
   18. ŞABLONLARDA GEÇEN KALAN SINIFLAR
   Bunlar eski dosyada tanımsızdı ya da admin.css'ten sızıyordu;
   burada açıkça tanımlanıyor ki hiçbir öğe stilsiz kalmasın.
   --------------------------------------------------------------------- */
.paketler, .yorumlar { display: block; }
.paketler .bolum-ust, .yorumlar .bolum-ust { margin-bottom: var(--b4); }

/* Paket başlığındaki satır içi puan rozeti */
.puan {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; color: var(--metin-2);
}

/* Fiyat tablosunda sayısal sütun sağa yaslı */
.fiyat-tablo .sayi { text-align: right; font-variant-numeric: tabular-nums; }
.fiyat-tablo th.sayi { text-align: right; }

/* Puan dağılım çubuğu */
.puan-dagilim li { display: grid; grid-template-columns: 58px 1fr auto; gap: var(--b2);
                   align-items: center; margin: 0; list-style: none; font-size: 13px; }
.cubuk {
  display: block; height: 6px; border-radius: 999px;
  background: var(--altin); min-width: 2px;
}
.puan-dagilim { padding: 0; }

/* Hizmet başlığının üstündeki kategori etiketi */
.kahraman-etiket {
  display: block; font-size: 12.5px; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase; color: var(--metin-3);
  margin-bottom: 6px;
}

/* Boş durum notu ve basit filtre şeridi (rehber dizini, doğrulama) */
.a-not { font-size: 15px; color: var(--metin-2); margin: 0; }
.a-filtre { display: flex; flex-wrap: wrap; gap: var(--b2); }
.a-filtre a {
  padding: 7px 14px; font-size: 14px; border-radius: 999px;
  border: 1px solid var(--cizgi); background: var(--zemin); color: var(--metin-2);
}
.a-filtre a:hover { border-color: var(--marka); color: var(--marka); text-decoration: none; }

/* Bölüm içi ara etiket — "Sık aranan hizmetler", "Neden Sahnego?" */
.serit-etiket {
  margin: var(--b7) 0 var(--b3);
  font-size: 12.5px; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--metin-3);
}
.alt-not-bosluk { margin-top: var(--b4); }

/* ---------------------------------------------------------------------
   19. RİTİM VE DOKUNMA HEDEFLERİ — ölçümle bulunanlar
   --------------------------------------------------------------------- */
/* Vitrinin hemen ardından gelen şeritte çift boşluk oluşuyordu (40+40) */
.vitrin + .serit { margin-top: 0; }

/* WCAG 2.2 · 2.5.8: hedef en az 24x24. Satır içi bağlantılar muaf ama
   ölçümde 23px çıkanlar sınırda kalıyordu; hepsi eşiğin üstüne alındı. */
.bolum-bag, .alt-menu a, .kirinti a {
  display: inline-flex; align-items: center; min-height: 26px;
}

@media (max-width: 640px) {
  .ust-ic { padding-block: var(--b2) var(--b3); row-gap: var(--b2); }
  .cip, .cip-pasif { min-height: 40px; padding: 9px 16px; }
  .cipler-il .cip-pasif { min-height: 34px; }
  .serit { margin-top: var(--b7); }
  .vitrin + .serit { margin-top: 0; }
}

/* Hizmet kahramanı: masaüstünde geniş, mobilde daha az yatay */
.kahraman-gorsel { aspect-ratio: 21 / 9; }
@media (max-width: 900px) { .kahraman-gorsel { aspect-ratio: 16 / 9; } }

/* ---------------------------------------------------------------------
   20. VİTRİN BAŞLIĞI VE FİYATSIZ KART            (2026-09-03)
   İç sayfa başlık ölçeği küçüldü; anasayfa vitrini ayrıca büyütülüyor.
   --------------------------------------------------------------------- */
.vitrin h1 { font-size: clamp(30px, 4vw, 44px); letter-spacing: -.03em; }
.vitrin-ic-sayfa h1 { font-size: clamp(26px, 3vw, 34px); letter-spacing: -.022em; }

/* Gerçek paket fiyatı olmayan vitrin kartı — uydurma rakam yerine */
.vkart-fiyat-yok { font-size: 15px; font-weight: 700; color: var(--metin-2); }

/* Gövde metni referans ölçüsüne çekildi (17 → 15.5), giriş bloğu bir tık üstte */
.metin-blok p { font-size: 15.5px; line-height: 1.62; }
.metin-giris p { font-size: 16.5px; line-height: 1.6; }
.sss .cevap { font-size: 14.8px; }
.adim-not, .gkart-not { font-size: 14.2px; }
.vitrin-alt { font-size: 16.5px; }

/* İç sayfa vitrini fotoğraflıysa daha alçak: içerik hızlı başlasın */
.vitrin-fotograf.vitrin-ic-sayfa .vitrin-ic { padding: var(--b7) 0 var(--b8); }

/* ---------------------------------------------------------------------
   21. HİZMET SAYFASI: OKUMA ALANI AYRI SAYFA        (2026-09-03)
   Gövde ile sayfa zemini aynı renkti; göz nereye odaklanacağını
   bulamıyordu. Gövde artık tek beyaz yaprak, içindeki bloklar da
   kart olmaktan çıkıp ayırıcı çizgiyle bölünüyor (kart içinde kart yok).
   --------------------------------------------------------------------- */
.hizmet-govde {
  background: var(--zemin);
  border: 1px solid var(--cizgi);
  border-radius: var(--r-lg);
  padding: var(--b6) var(--b7) var(--b7);
}
.hizmet-govde > section { padding-top: var(--b7); }
.hizmet-govde > section:first-child { padding-top: 0; }

/* Yaprağın içindeki metin blokları: kutu değil, bölüm */
.hizmet-govde .metin { padding-top: 0; gap: 0; }
.hizmet-govde .metin-blok {
  background: none; border: 0; border-radius: 0;
  padding: var(--b5) 0;
  border-bottom: 1px solid var(--cizgi);
}
.hizmet-govde .metin-blok:first-child { padding-top: 0; }
.hizmet-govde .metin-blok:last-child { border-bottom: 0; padding-bottom: 0; }
.hizmet-govde .metin-giris { padding-top: 0; }

/* SSS ve yorum kartları yaprağın içinde de kart kalır (tıklanabilirler) */
.hizmet-govde .sss details,
.hizmet-govde .yorum,
.hizmet-govde .puan-ozet { background: var(--zemin-2); border-color: var(--cizgi); }

@media (max-width: 900px) {
  .hizmet-govde { padding: var(--b5); border-radius: var(--r); }
}
@media (max-width: 640px) {
  /* Dar ekranda yaprak kenarlığı yer yiyor: kenardan kenara aksın */
  .hizmet-govde {
    padding: var(--b4); border-inline: 0; border-radius: 0;
    margin-inline: calc(var(--b4) * -1);
  }
}

/* ---------------------------------------------------------------------
   22. DÜZ RENK VİTRİN + BÜYÜK ARAMA               (2026-09-03)
   Anasayfa hero'su fotoğraftan düz marka zeminine döndü: sakin,
   hızlı (LCP'de görsel yok) ve arama kutusu öne çıkıyor.
   --------------------------------------------------------------------- */
.vitrin-duz {
  background: var(--marka);
  border-bottom: 0;
}
.vitrin-duz .vitrin-ic {
  max-width: 760px; margin: 0 auto; text-align: center;
  padding: var(--b10) 0 var(--b9);
}
.vitrin-duz h1 { color: #fff; margin-bottom: var(--b4); }
.vitrin-duz .bolum-etiket { color: rgba(255,255,255,.72); }
.vitrin-duz .vitrin-alt {
  color: rgba(255,255,255,.88); margin: 0 auto var(--b6); max-width: 56ch;
}
.vitrin-duz .vitrin-eylem { justify-content: center; }
.vitrin-duz .vitrin-not { color: rgba(255,255,255,.78); }

/* Anasayfa alt basligi TEK SATIR. Genis ekranda sarmasini engelliyoruz;
   metin zaten bu genislige gore kisaltildi (anasayfa.php).
   ⚠️ nowrap yalniz >=980px'de: dar ekranda tasma yerine dogal sarma. */
.vitrin-duz .vitrin-alt-tek {
  color: #fff; font-size: 17px; line-height: 1.5;
}
@media (min-width: 980px) {
  .vitrin-duz .vitrin-alt-tek {
    max-width: none; white-space: nowrap; font-size: 17.5px;
  }
}
.vitrin-duz .vitrin-not strong { color: #fff; }
/* ⚠️ Baslik zemini HER TEMADA koyu (tema tonunda). Burada tema jetonu KULLANMA:
   `var(--metin)` koyu temada acik renge donuyordu ve beyaz yazi uzerinde
   kontrast 1.15'e dusuyordu (olculdu). Sabit koyu renk. */
.vitrin-duz .dugme-ana {
  background: #17161c; color: #fff; border-color: #17161c;
}
.vitrin-duz .dugme-ana:hover { background: #000; color: #fff; }
.vitrin-duz .dugme-cam, .vitrin-duz .dugme-ikincil {
  background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.42);
}
.vitrin-duz .dugme-cam:hover { background: rgba(255,255,255,.24); border-color: #fff; }

/* Büyük arama çubuğu */
.vitrin-ara {
  display: flex; align-items: center; gap: var(--b2);
  background: #fff; border-radius: 999px;
  padding: 6px 6px 6px var(--b5);
  margin: 0 0 var(--b5);
  box-shadow: 0 10px 30px -18px rgba(0,0,0,.5);
}
.vitrin-ara-ikon { display: grid; place-items: center; color: var(--metin-3); flex: 0 0 auto; }
.vitrin-ara-ikon svg { width: 19px; height: 19px; stroke: currentColor; }
.vitrin-ara input {
  flex: 1; min-width: 0; border: 0; background: none; font: inherit;
  font-size: 16px; color: var(--metin); padding: 13px 0;
}
.vitrin-ara input::placeholder { color: var(--metin-3); }
.vitrin-ara input:focus { outline: none; }
.vitrin-ara button {
  flex: 0 0 auto; border: 0; cursor: pointer;
  min-height: 46px; padding: 0 var(--b6); border-radius: 999px;
  font: inherit; font-size: 15px; font-weight: 700;
  background: var(--marka); color: #fff;
}
.vitrin-ara button:hover { background: var(--marka-koyu); }

@media (prefers-color-scheme: dark) {
  .vitrin-duz { background: var(--vitrin-zemin); }
  .vitrin-ara { background: var(--yuzey); }
  /* 2026-09-14: parlak mercan yerine sakin yesil (--marka-acik zemin + --marka yazi). */
  .vitrin-ara button { background: var(--marka-acik); color: var(--marka);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--marka) 40%, transparent); }
  .vitrin-ara button:hover { background: color-mix(in srgb, var(--marka) 18%, var(--marka-acik)); }
}

@media (max-width: 640px) {
  .vitrin-duz .vitrin-ic { padding: var(--b8) 0 var(--b7); }
  .vitrin-ara { flex-wrap: wrap; border-radius: var(--r-lg); padding: var(--b3); }
  .vitrin-ara input { flex-basis: calc(100% - 34px); padding: 8px 0; }
  .vitrin-ara button { width: 100%; margin-top: var(--b2); }
}

/* Değerlendirme daveti — yorum yokken basılır, yıldız/puan yok */
.deg-davet {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--b4); padding: var(--b5);
  background: var(--marka-acik); border: 1px solid var(--cizgi);
  border-radius: var(--r);
}
.deg-davet-ad { font-weight: 700; font-size: 16px; margin: 0 0 3px; color: var(--metin); }
.deg-davet-not { font-size: 14.5px; color: var(--metin-2); margin: 0; max-width: 52ch; }

/* ---------------------------------------------------------------------
   23. METİN VE LİSTE HİZASI                        (2026-09-03)
   Ölçümde bulunan dört hata:
   1. <caption> tek başına ortalıydı (-webkit-center) — sütun sol hizalı.
   2. .fiyat-tablo th kuralı hem thead hem tbody'ye uyuyordu: paket adları
      küçük, gri ve BÜYÜK HARF basılıyordu. Artık yalnız thead öyle.
   3. .paket-not yan boşluklarıyla 20px içeri kaçıyordu, sol kenar kırılıyordu.
   4. Bölüm h2'si 25px, içerik bloğu h2'si 22px idi — aynı seviye iki boyda.
   --------------------------------------------------------------------- */

/* --- 4: okuma sütununda tek h2 ölçüsü --- */
.hizmet-govde h2,
.hizmet-govde .metin-blok h2 { font-size: 22px; line-height: 1.25; }
.hizmet-govde h3 { font-size: 17px; }

/* --- 1 + 2: fiyat tablosu --- */
.fiyat-tablo { margin-top: var(--b5); }
.fiyat-tablo caption {
  caption-side: top; text-align: left;
  font-size: 12.5px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--metin-3);
  padding: 0 0 var(--b2);
}
.fiyat-tablo thead th {
  font-size: 12.5px; font-weight: 600; color: var(--metin-3);
  text-transform: uppercase; letter-spacing: .05em;
  border-bottom: 1px solid var(--cizgi-2);
}
/* Satır başlığı = paket adı: gövde metni gibi okunur, etiket gibi değil */
.fiyat-tablo tbody th {
  font-size: 15px; font-weight: 600; color: var(--metin);
  text-transform: none; letter-spacing: 0;
}
.fiyat-tablo td { font-size: 14.5px; }
.fiyat-tablo th:first-child, .fiyat-tablo td:first-child { padding-left: 0; }
.fiyat-tablo th:last-child, .fiyat-tablo td:last-child { padding-right: 0; }
.fiyat-tablo tbody tr:last-child th,
.fiyat-tablo tbody tr:last-child td { border-bottom: 0; }

/* --- 3: not kutusu sütunun sol kenarına oturur ---
   YALNIZ .paketler'in DOGRUDAN cocugu; kart icindeki ayni adli ogelerin
   yan dolgusunu silmemeli (sildiginde icerik kart kenarina tasiyordu). */
.hizmet-govde .paketler > .paket-not { margin-inline: 0; }
.hizmet-govde .paketler > .paket-not {
  margin-top: var(--b4);
  padding: var(--b3) var(--b4);
  border-left: 3px solid var(--altin);
}

/* --- bölüm ritmi: paket bölümü ile gövde metni arası --- */
.paketler > h2 { margin-bottom: var(--b2); }
.paket-ozet { margin: 0 0 var(--b3); font-size: 14.5px; }

/* --- içerik listeleri: madde işareti metin sütununa hizalı --- */
.metin-blok ul, .metin-blok ol,
.sss .cevap ul, .sss .cevap ol {
  margin: var(--b2) 0 var(--b3);
  padding-left: 1.15em;
}
.metin-blok li { margin-bottom: 6px; line-height: 1.6; }
.metin-blok li::marker { color: var(--marka); }
.metin-blok ul ul, .metin-blok ol ol { margin-block: 6px; }

/* --- gövde metni ile başlık arası tek ölçü --- */
.metin-blok h2 + p, .metin-blok h3 + p { margin-top: 0; }
.metin-blok p + h3 { margin-top: var(--b4); }

/* ---------------------------------------------------------------------
   24. PAKET KARTLARI — KARTLAR ARASI HİZA          (2026-09-03)
   Özellik sayısı kartlara göre değişince fiyat kutusu ve buton farklı
   yüksekliklerde kalıyordu. Kart artık dikey flex: özellik listesi boşluğu
   yutuyor, fiyat kutusu ve buton her kartta aynı hizada bitiyor.
   --------------------------------------------------------------------- */
.izgara-paket { align-items: stretch; }

.paket-kart { display: flex; flex-direction: column; position: relative; }
.paket-kart > .paket-gorsel { flex: 0 0 auto; }
.paket-ad { flex: 0 0 auto; }
.paket-ozet-satir { flex: 0 0 auto; }

/* Boşluğu bu liste yutar → altındaki her şey aynı hizaya oturur */
.paket-ozellik { flex: 1 1 auto; margin-bottom: var(--b4); }

/* Fiyat kutusu tek birim: etiket · tutar · aralık · KDV · ön ödeme */
.paket-fiyat {
  flex: 0 0 auto;
  margin: 0 var(--b5); padding: var(--b4);
  background: var(--yuzey-2); border-radius: var(--r-sm);
  display: grid; gap: 2px;
}
.paket-fiyat-etiket { margin-bottom: 1px; }
.paket-kapora {
  margin: 6px 0 0; padding-top: 6px;
  border-top: 1px solid var(--cizgi);
  font-size: 12.5px; font-weight: 600; color: var(--yesil);
}
.paket-eylem { flex: 0 0 auto; margin-top: var(--b4); padding: 0 var(--b5) var(--b5); }
.paket-eylem .dugme { width: 100%; }

/* Rozet görselin üstünde durur; görsel yoksa kartın köşesinde kalır */
.paket-kart .paket-rozet { position: absolute; top: 10px; left: 10px; z-index: 1; }

@media (max-width: 640px) {
  .paket-fiyat { margin-inline: var(--b4); }
  .paket-eylem { padding: 0 var(--b4) var(--b4); }
  .paket-ad, .paket-ozet-satir, .paket-ozellik { padding-inline: var(--b4); }
}

/* ---------------------------------------------------------------------
   25. ALT BİLGİ — TAM MENÜ                         (2026-09-03)
   --------------------------------------------------------------------- */
.alt-ic {
  display: grid; align-items: start;
  grid-template-columns: 1.5fr repeat(4, minmax(0, 1fr));
  gap: var(--b7) var(--b6);
}
.alt-marka-blok { max-width: 34ch; }
.alt-eylem { display: flex; flex-wrap: wrap; gap: var(--b2); margin-top: var(--b4); }
.alt-eylem .dugme { min-height: 40px; padding: 0 var(--b4); font-size: 14px; }

.alt-baslik {
  font-size: 12.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--metin); margin: 0 0 var(--b3);
}
.alt-sutun ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.alt-sutun li { margin: 0; }
/* Tek satir: uzun rehber basliklari sutunu uzatip hizayi bozuyordu */
.alt-sutun a {
  display: block; min-height: 26px; line-height: 26px;
  font-size: 14px; color: var(--metin-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.alt-sutun a:hover { color: var(--marka); }
.alt-tumu { font-weight: 600; color: var(--marka) !important; margin-top: 4px; }

/* Kapanış satırı: telif solda, yasal bağlantılar sağda yatay */
.alt-kapanis {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: var(--b3) var(--b5);
  margin-top: var(--b7); padding-top: var(--b4);
  border-top: 1px solid var(--cizgi);
}
.telif { margin: 0; padding: 0; border: 0; font-size: 13px; color: var(--metin-3); }
.alt-yasal { display: flex; flex-wrap: wrap; gap: var(--b2) var(--b5); }
.alt-yasal a {
  display: inline-flex; align-items: center; min-height: 26px;
  font-size: 13px; color: var(--metin-2);
}
.alt-yasal a:hover { color: var(--marka); }

@media (max-width: 900px) {
  .alt-ic { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .alt-marka-blok { grid-column: 1 / -1; max-width: none; }
  .alt-kapanis { justify-content: flex-start; }
}
@media (max-width: 640px) {
  .alt-ic { grid-template-columns: 1fr 1fr; gap: var(--b6) var(--b4); }
  .alt-eylem .dugme { flex: 1; }
}

/* ---------------------------------------------------------------------
   26. KAYDET (favori) DÜĞMESİ — GÖRSEL GERİ BİLDİRİM
   Düğme localStorage'a yazıyordu ama basılı hâli hiç çizilmiyordu;
   kullanıcı için "çalışmıyor" demekti. Artık kalp doluyor.
   --------------------------------------------------------------------- */
.ikon-dugme[aria-pressed="true"],
.yan-ikincil[aria-pressed="true"] {
  border-color: var(--marka); color: var(--marka);
  background: var(--marka-acik);
}
.ikon-dugme[aria-pressed="true"] svg,
.yan-ikincil[aria-pressed="true"] svg { fill: currentColor; stroke: currentColor; }
.ikon-dugme[data-durum="kopyalandi"] { border-color: var(--yesil); color: var(--yesil); }

/* ---------------------------------------------------------------------
   27. HİZMET KAHRAMAN GÖRSELİ — DAHA ALÇAK
   21/9 masaüstünde ~490px yer kaplıyordu; içerik ekranın altına iniyordu.
   --------------------------------------------------------------------- */
.kahraman-gorsel { aspect-ratio: 32 / 9; }
@media (max-width: 900px) { .kahraman-gorsel { aspect-ratio: 2 / 1; } }
@media (max-width: 640px) { .kahraman-gorsel { aspect-ratio: 16 / 9; } }

/* ---------------------------------------------------------------------
   28. ARAMA SONUÇLARI                              (2026-09-03)
   --------------------------------------------------------------------- */
.ara-sayi {
  font-family: var(--f-govde); font-size: 13px; font-weight: 600;
  color: var(--metin-3); margin-left: 6px; vertical-align: middle;
}

/* Sorgu bir şehri işaret ediyorsa öne çıkan kart */
.ara-odak {
  display: flex; align-items: stretch; gap: 0; overflow: hidden;
  background: var(--yuzey); border: 1px solid var(--cizgi);
  border-radius: var(--r); color: inherit;
  transition: border-color var(--gecis), box-shadow var(--gecis);
}
.ara-odak:hover { border-color: var(--cizgi-2); box-shadow: var(--golge-2); text-decoration: none; }
.ara-odak-gorsel { flex: 0 0 260px; position: relative; overflow: hidden; }
.ara-odak-gorsel img { width: 100%; height: 100%; object-fit: cover; }
.ara-odak-govde { display: grid; align-content: center; gap: 4px; padding: var(--b5) var(--b6); }
.ara-odak-etiket {
  font-size: 12px; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--metin-3);
}
.ara-odak-ad { font-size: 20px; font-weight: 700; letter-spacing: -.02em; color: var(--metin); }
.ara-odak-not { font-size: 14.5px; color: var(--metin-2); line-height: 1.55; }

@media (max-width: 640px) {
  .ara-odak { flex-direction: column; }
  .ara-odak-gorsel { flex: 0 0 auto; aspect-ratio: 16 / 9; }
  .ara-odak-govde { padding: var(--b4); }
}

/* Arama sayfasındaki büyük form: buton hap içinde */
.ara-form-buyuk .dugme { flex: 0 0 auto; }
.ara-form-buyuk input { border-radius: 999px; }

/* ---------------------------------------------------------------------
   29. HİZMET KAHRAMANI FOTOĞRAF ÜSTÜNDE            (2026-09-03)
   Görsel ayrı bir bant, başlık altındaydı; ikisi arasında ölü boşluk
   vardı. Artık şehir sayfasıyla aynı dil: başlık, kategori ve eylem
   simgeleri fotoğrafın üzerinde.
   --------------------------------------------------------------------- */
.vitrin-fotograf .kahraman-satir {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--b4); margin-bottom: var(--b3);
}
.vitrin-fotograf .kahraman-satir h1 { margin: 0; }
.vitrin-fotograf .kahraman-eylem { flex: 0 0 auto; gap: var(--b2); }

/* Fotoğraf üstündeki simge düğmeleri cam değil, saydam çerçeveli */
.vitrin-fotograf .ikon-dugme {
  background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.4);
  color: #fff;
}
.vitrin-fotograf .ikon-dugme:hover {
  background: rgba(255,255,255,.24); border-color: #fff; color: #fff;
}
.vitrin-fotograf .ikon-dugme[aria-pressed="true"] {
  background: #fff; border-color: #fff; color: var(--marka);
}
.vitrin-fotograf .ikon-dugme[aria-pressed="true"] svg { fill: currentColor; }

/* İç sayfa vitrini: metin genişliği okunur kalsın */
.vitrin-ic-sayfa .vitrin-ic { max-width: 780px; }
.vitrin-ic-sayfa .vitrin-alt { margin-bottom: var(--b5); }

@media (max-width: 640px) {
  /* Simgeler basligin soluna gecip basligi saga itiyordu:
     dar ekranda baslik once, eylemler altinda kendi satirinda. */
  .vitrin-fotograf .kahraman-satir {
    flex-direction: column; align-items: flex-start; gap: var(--b3);
  }
  .vitrin-fotograf .kahraman-eylem { margin-left: 0; }
}

/* ---------------------------------------------------------------------
   30. LOGO KİLİDİ + NEFES ALANI                    (2026-09-03)
   Okuma yaprağındaki bloklar sıkışıktı: paragraf arası 12px, blok
   dolgusu 20px. Metin iç içe geçmiş görünüyordu.
   --------------------------------------------------------------------- */
.marka { gap: var(--b2); }
.marka-isaret { width: 32px; height: 32px; border-radius: 8px; flex: 0 0 auto; }

/* Bloklar arası ve blok içi ritim açıldı */
.hizmet-govde .metin-blok { padding: var(--b7) 0; }
.hizmet-govde .metin-blok:first-child { padding-top: var(--b2); }
.hizmet-govde .metin-blok h2,
.hizmet-govde .metin-blok h3 { margin-bottom: var(--b4); }
.metin-blok p { margin-bottom: var(--b4); line-height: 1.7; }
.metin-blok p:last-child { margin-bottom: 0; }
.metin-blok li { margin-bottom: var(--b2); line-height: 1.7; }

/* Bölüm başlıkları ile içerik arası */
.hizmet-govde > section { padding-top: var(--b8); }
.hizmet-govde > section > h2 { margin-bottom: var(--b4); }

/* SSS de biraz nefes alsın */
.sss { gap: var(--b2); }
.sss summary { padding-block: var(--b4); }
.sss .cevap { line-height: 1.7; padding-bottom: var(--b5); }

/* Yan kutu satırları */
.yan-meta div { padding: 13px var(--b4); }
.yan-kutu .dugme, .yan-kutu .yan-ikincil { margin-top: var(--b2); }

/* Fotoğraflı iç sayfa kahramanı: metin ile buton arası */
.vitrin-ic-sayfa .vitrin-alt { line-height: 1.6; margin-bottom: var(--b6); }
.vitrin-ic-sayfa .kahraman-satir { margin-bottom: var(--b4); }

/* ---------------------------------------------------------------------
   31. DÜZELTMELER + FİYAT ENDEKSİ                  (2026-09-03)
   --------------------------------------------------------------------- */

/* Footer sütunları: min-width:0 olmadan izgara izini asip yan sutuna
   giriyorlardi; ellipsis de bu yuzden calismiyordu. */
.alt-sutun, .alt-sutun ul, .alt-sutun li { min-width: 0; }
.alt-sutun a { max-width: 100%; }

/* İç sayfa kahraman metni satır boyu kontrollü — tam genişlik okunmuyordu */
.vitrin-ic-sayfa .vitrin-alt { max-width: 54ch; }
.vitrin-duz .vitrin-alt { max-width: 56ch; }

/* --- fiyat endeksi --- */
.tablo-sar { overflow-x: auto; }
.endeks-tablo { width: 100%; min-width: 520px; }
.endeks-tablo tbody th { font-weight: 600; }
.endeks-tablo tbody th a { color: var(--metin); }
.endeks-tablo tbody th a:hover { color: var(--marka); }
.endeks-alt { color: var(--altin); font-weight: 700; }
.endeks-yok { color: var(--metin-3); font-style: normal; }
.endeks-tablo .sayi { font-variant-numeric: tabular-nums; white-space: nowrap; }

.endeks-uyari {
  margin: var(--b5) 0 0; padding: var(--b5);
  background: var(--altin-zemin); border: 1px solid var(--cizgi);
  border-left: 3px solid var(--altin); border-radius: 0 var(--r) var(--r) 0;
  font-size: 14.5px; line-height: 1.65; color: var(--metin-2); max-width: none;
}
.endeks-uyari strong { color: var(--metin); }

/* Footer eylem düğmeleri: marka bloğunda daha ölçülü dursun */
.alt-eylem .dugme {
  min-height: 36px; padding: 0 var(--b4);
  font-size: 13.5px; gap: 6px;
}
.alt-eylem .dugme svg { width: 15px; height: 15px; }

/* ---------------------------------------------------------------------
   32. HİZMET KUTUCUKLARI (.hliste) — RENK VE TİPOGRAFİ
   Kutucuklar düz beyaz ve aynı ağırlıktaydı; fiyatlı olanla olmayan
   ayırt edilmiyordu. Marka renginde ince bir sol vurgu, fiyat rozeti
   ve daha okunur ad tipografisi. Palet dışına çıkılmıyor.
   --------------------------------------------------------------------- */
.hliste a {
  position: relative;
  padding: 11px var(--b4) 11px calc(var(--b4) + 3px);
  min-height: 52px;
  border-radius: 10px;
  transition: border-color var(--gecis), background var(--gecis), box-shadow var(--gecis);
}
.hliste a::before {
  content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px;
  border-radius: 0 3px 3px 0; background: transparent;
  transition: background var(--gecis);
}
.hliste a:hover {
  background: var(--zemin); border-color: var(--marka);
  box-shadow: var(--golge-2); text-decoration: none;
}
.hliste a:hover::before { background: var(--marka); }

.hliste-ad {
  font-size: 15px; font-weight: 600; letter-spacing: -.01em;
  color: var(--metin); line-height: 1.3;
  display: flex; flex-direction: column; gap: 1px; min-width: 0;
}
.hliste-ad small {
  font-size: 12px; font-weight: 500; letter-spacing: 0;
  color: var(--metin-3); text-transform: none;
}

/* Fiyat rozeti: altın zeminde, hizmetin fiyatı olduğu bir bakışta belli */
.hliste-fiyat {
  flex: 0 0 auto;
  padding: 3px 9px; border-radius: 999px;
  background: var(--altin-zemin); color: var(--altin);
  font-size: 12px; font-weight: 700; letter-spacing: -.01em;
  white-space: nowrap;
}

/* Fiyatı olan kutucuk hafifçe öne çıkar */
.hliste a:has(.hliste-fiyat) { border-color: color-mix(in srgb, var(--altin) 28%, transparent); }
.hliste a:has(.hliste-fiyat)::before { background: color-mix(in srgb, var(--altin) 35%, transparent); }
.hliste a:has(.hliste-fiyat):hover::before { background: var(--altin); }

@media (max-width: 640px) {
  .hliste a { min-height: 48px; padding-block: 9px; }
  .hliste-ad { font-size: 14.5px; }
}

/* ---------------------------------------------------------------------
   33. İÇ SAYFA KAHRAMANI — SATIR BOYU VE EYLEM SİMGELERİ
   Metin sütunu daraltıldı (okuma boyu), eylem simgeleri kapsayıcının
   sağ kenarına taşındı ve bir tık büyütüldü.
   --------------------------------------------------------------------- */
.vitrin-ic-sayfa .vitrin-ic { max-width: none; }
.vitrin-ic-sayfa h1 { max-width: 20ch; }
.vitrin-ic-sayfa .vitrin-alt { max-width: 46ch; }
.vitrin-ic-sayfa .bolum-etiket { max-width: none; }

.vitrin-fotograf .kahraman-satir { width: 100%; align-items: center; }
.vitrin-fotograf .kahraman-eylem { margin-left: auto; gap: 10px; }
.vitrin-fotograf .ikon-dugme { width: 46px; height: 46px; }
.vitrin-fotograf .ikon-dugme svg { width: 20px; height: 20px; }

@media (max-width: 900px) {
  .vitrin-ic-sayfa h1 { max-width: 24ch; }
  .vitrin-ic-sayfa .vitrin-alt { max-width: 52ch; }
}
@media (max-width: 640px) {
  .vitrin-ic-sayfa h1, .vitrin-ic-sayfa .vitrin-alt { max-width: none; }
  .vitrin-fotograf .ikon-dugme { width: 42px; height: 42px; }
}

/* ---------------------------------------------------------------------
   34. SEKMELİ KATEGORİ GEZİNTİSİ                   (2026-09-03)
   JavaScript yok: gizli radio + `:checked ~` kardeş seçici.
   Panel `display:none` olduğu için gizli sekmedeki lazy görseller
   indirilmez — 10 sekme sayfayı ağırlaştırmıyor.
   --------------------------------------------------------------------- */
.sekme { position: relative; }
/* Gorsel olarak gizli ama KLAVYEYLE odaklanabilir: sekmeler ok tuslariyla
   gezilebilsin diye radio kaldirilmiyor, yalniz 1x1'e indiriliyor. */
.sekme-anahtar {
  position: absolute; width: 1px; height: 1px; opacity: 0;
  pointer-events: none; margin: 0;
}

.sekme-baslik {
  display: flex; gap: var(--b1); overflow-x: auto; scrollbar-width: none;
  border-bottom: 1px solid var(--cizgi); margin-bottom: var(--b5);
}
.sekme-baslik::-webkit-scrollbar { display: none; }
.sekme-etiket {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: 10px var(--b4); min-height: 44px; cursor: pointer;
  font-size: 15px; font-weight: 600; color: var(--metin-2);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color var(--gecis), border-color var(--gecis);
}
.sekme-etiket:hover { color: var(--metin); }
.sekme-etiket small { font-size: 12px; font-weight: 600; color: var(--metin-3); }
.sekme-anahtar:focus-visible ~ .sekme-baslik .sekme-etiket {
  outline: 2px solid var(--cta); outline-offset: -2px;
}

.sekme-panel { display: none; }

/* Kategori bandı: görsel + perde + başlık */
.sekme-bant {
  position: relative; display: flex; align-items: flex-end; overflow: hidden;
  min-height: 168px; border-radius: var(--r); margin-bottom: var(--b4);
  color: inherit; isolation: isolate;
}
.sekme-bant-gorsel { position: absolute; inset: 0; z-index: -2; }
.sekme-bant-gorsel img { width: 100%; height: 100%; object-fit: cover; }
.sekme-bant::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(var(--perde-rgb),.84) 0%, rgba(var(--perde-rgb),.6) 52%,
                              rgba(var(--perde-rgb),.2) 100%);
}
.sekme-bant-govde { display: grid; gap: 4px; padding: var(--b5) var(--b6); max-width: 52ch; }
.sekme-bant-ad {
  font-size: 21px; font-weight: 700; letter-spacing: -.02em; color: #fff;
}
.sekme-bant-not { font-size: 14.5px; color: rgba(255,255,255,.84); line-height: 1.5; }
.sekme-bant-bag { font-size: 14px; font-weight: 600; color: #fff; margin-top: 4px; }
.sekme-bant:hover { text-decoration: none; }
.sekme-bant:hover .sekme-bant-bag { text-decoration: underline; }

@media (max-width: 640px) {
  .sekme-baslik { margin-inline: calc(var(--b4) * -1); padding-inline: var(--b4); }
  .sekme-etiket { padding: 9px var(--b3); font-size: 14.5px; }
  .sekme-bant { min-height: 140px; }
  .sekme-bant-govde { padding: var(--b4); }
  .sekme-bant-ad { font-size: 18px; }
}

/* Sekme kurallari.
   ⚠️ .sekme-panel divleri, .sekme-baslik divinden SONRA geliyor;
   nth-of-type div sayar, bu yuzden panel k = div nth-of-type(k+1).
   Ilk turda bu atlandi ve hicbir panel gorunmedi. */
.sekme-anahtar:nth-of-type(1):checked ~ .sekme-baslik .sekme-etiket:nth-of-type(1) { color: var(--marka); border-bottom-color: var(--marka); }
.sekme-anahtar:nth-of-type(1):checked ~ .sekme-panel:nth-of-type(2) { display: block; }
.sekme-anahtar:nth-of-type(2):checked ~ .sekme-baslik .sekme-etiket:nth-of-type(2) { color: var(--marka); border-bottom-color: var(--marka); }
.sekme-anahtar:nth-of-type(2):checked ~ .sekme-panel:nth-of-type(3) { display: block; }
.sekme-anahtar:nth-of-type(3):checked ~ .sekme-baslik .sekme-etiket:nth-of-type(3) { color: var(--marka); border-bottom-color: var(--marka); }
.sekme-anahtar:nth-of-type(3):checked ~ .sekme-panel:nth-of-type(4) { display: block; }
.sekme-anahtar:nth-of-type(4):checked ~ .sekme-baslik .sekme-etiket:nth-of-type(4) { color: var(--marka); border-bottom-color: var(--marka); }
.sekme-anahtar:nth-of-type(4):checked ~ .sekme-panel:nth-of-type(5) { display: block; }
.sekme-anahtar:nth-of-type(5):checked ~ .sekme-baslik .sekme-etiket:nth-of-type(5) { color: var(--marka); border-bottom-color: var(--marka); }
.sekme-anahtar:nth-of-type(5):checked ~ .sekme-panel:nth-of-type(6) { display: block; }
.sekme-anahtar:nth-of-type(6):checked ~ .sekme-baslik .sekme-etiket:nth-of-type(6) { color: var(--marka); border-bottom-color: var(--marka); }
.sekme-anahtar:nth-of-type(6):checked ~ .sekme-panel:nth-of-type(7) { display: block; }
.sekme-anahtar:nth-of-type(7):checked ~ .sekme-baslik .sekme-etiket:nth-of-type(7) { color: var(--marka); border-bottom-color: var(--marka); }
.sekme-anahtar:nth-of-type(7):checked ~ .sekme-panel:nth-of-type(8) { display: block; }
.sekme-anahtar:nth-of-type(8):checked ~ .sekme-baslik .sekme-etiket:nth-of-type(8) { color: var(--marka); border-bottom-color: var(--marka); }
.sekme-anahtar:nth-of-type(8):checked ~ .sekme-panel:nth-of-type(9) { display: block; }
.sekme-anahtar:nth-of-type(9):checked ~ .sekme-baslik .sekme-etiket:nth-of-type(9) { color: var(--marka); border-bottom-color: var(--marka); }
.sekme-anahtar:nth-of-type(9):checked ~ .sekme-panel:nth-of-type(10) { display: block; }
.sekme-anahtar:nth-of-type(10):checked ~ .sekme-baslik .sekme-etiket:nth-of-type(10) { color: var(--marka); border-bottom-color: var(--marka); }
.sekme-anahtar:nth-of-type(10):checked ~ .sekme-panel:nth-of-type(11) { display: block; }

/* ---------------------------------------------------------------------
   35. PAKET KARTI — LİSTE VE FİYAT RİTMİ            (2026-09-03)
   Özellik satırları arası fazla açıktı (kart gereksiz uzuyordu),
   tutar 26px ile aşırı büyüktü ve altındaki aralık satırı tutara
   yapışıyordu.
   --------------------------------------------------------------------- */
.paket-ozellik { gap: 5px; margin-bottom: var(--b3); }
.paket-ozellik li { font-size: 14px; line-height: 1.45; padding-left: 20px; }
.paket-ozellik li::before { top: 6px; }

.paket-fiyat { gap: 0; padding: var(--b3) var(--b4); }
.paket-fiyat-etiket { margin-bottom: 2px; }
.paket-fiyat-tutar { font-size: 22px; line-height: 1.15; margin-bottom: 5px; }
.paket-fiyat-aralik { font-size: 12.5px; line-height: 1.4; }
.paket-kdv { font-size: 12px; line-height: 1.4; margin-top: 2px; }

/* Yan kutudaki fiyat bloğu da aynı ritimde */
.yan-fiyat { gap: 0; }
.yan-fiyat-tutar { font-size: 24px; line-height: 1.15; margin-bottom: 5px; }
.yan-fiyat-aralik { font-size: 12.5px; line-height: 1.4; }
.yan-fiyat-kdv { font-size: 12px; margin-top: 2px; }

/* Fiyat rozeti düğme gibi okunsun — hepsi tek ölçü, tek dil */
.hliste-fiyat {
  padding: 5px 11px; min-height: 26px;
  display: inline-flex; align-items: center;
  background: var(--altin-zemin); color: var(--altin);
  border: 1px solid color-mix(in srgb, var(--altin) 30%, transparent);
  font-size: 12.5px; font-weight: 700; letter-spacing: -.01em;
  transition: background var(--gecis), color var(--gecis), border-color var(--gecis);
}
.hliste a:hover .hliste-fiyat {
  background: var(--altin); color: #fff; border-color: transparent;
}
@media (prefers-color-scheme: dark) {
  .hliste-fiyat { border-color: color-mix(in srgb, var(--altin) 32%, transparent); }
  .hliste a:hover .hliste-fiyat { color: #241c0e; }
}

/* ---------------------------------------------------------------------
   36. BAŞLIK TAŞMASI + AKTİF SEKME RENGİ           (2026-09-04)
   İç sayfa kahramanında uzun başlık üç satıra çıkıp bloğu şişiriyordu.
   Başlık tek satır, alt açıklama en fazla iki satır.
   --------------------------------------------------------------------- */
.vitrin-ic-sayfa h1 {
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
  overflow: hidden; max-width: 24ch;
}
.vitrin-ic-sayfa .vitrin-alt {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; max-width: 52ch;
}
@media (max-width: 640px) {
  .vitrin-ic-sayfa h1 { -webkit-line-clamp: 2; max-width: none; }
  .vitrin-ic-sayfa .vitrin-alt { max-width: none; }
}

/* Yan kutu başlığı da tek satır kalsın */
.yan-kutu .yan-baslik {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Aktif sekme marka renginde — siyah alt çizgi sayfayla uyuşmuyordu */
.sekme-etiket.aktif, .sekme-baslik .sekme-etiket:hover { color: var(--marka); }

/* ---------------------------------------------------------------------
   37. DEĞERLENDİRME PENCERESİ                      (2026-09-04)
   Yıldız oylaması üyelik istemez; yazılı yorum giriş ister.
   ⚠️ <dialog>'a display yazma (bkz. 14. bölüm notu).
   --------------------------------------------------------------------- */
.deg-pencere {
  width: min(420px, calc(100vw - 32px));
  padding: 0; border: 0; border-radius: var(--r-lg);
  background: var(--yuzey); color: var(--metin);
  box-shadow: 0 24px 60px -24px rgba(var(--perde-rgb),.55);
}
.deg-pencere::backdrop { background: rgba(var(--perde-rgb),.55); }
.deg-simge { background: var(--altin-zemin); color: var(--altin); }
.deg-simge svg { fill: currentColor; stroke: none; }

.deg-form { display: grid; gap: var(--b3); }

/* Yıldızlar: row-reverse + kardeş seçici ile soldan sağa dolar */
.deg-yildiz {
  border: 0; margin: 0; padding: 0;
  display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px;
}
.deg-yildiz legend {
  float: left; width: 100%; padding: 0 0 var(--b2);
  font-size: 12.5px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--metin-3);
}
.deg-yildiz input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.deg-yildiz label {
  cursor: pointer; font-size: 34px; line-height: 1; color: var(--cizgi-2);
  transition: color var(--gecis); padding: 0 2px;
}
.deg-yildiz label:hover,
.deg-yildiz label:hover ~ label,
.deg-yildiz input:checked ~ label { color: var(--altin); }
.deg-yildiz input:focus-visible + label { outline: 2px solid var(--cta); outline-offset: 2px; }

.deg-ayrac {
  margin: var(--b4) 0 var(--b2); padding-top: var(--b4);
  border-top: 1px solid var(--cizgi);
  font-size: 13.5px; color: var(--metin-2);
}

/* Oylama sonrası geri bildirim */
.deg-geri {
  margin: 0 0 var(--b3); padding: 11px var(--b4); border-radius: var(--r-sm);
  font-size: 14.5px; font-weight: 500;
}
.deg-geri-ok    { background: #e8f4ee; color: var(--yesil); }
.deg-geri-zaten,
.deg-geri-cok   { background: var(--altin-zemin); color: var(--altin); }
.deg-geri-hata  { background: #fdeceb; color: #b3261e; }
@media (prefers-color-scheme: dark) {
  .deg-geri-ok   { background: #14301f; }
  .deg-geri-hata { background: #3a1c1a; color: #ff8a80; }
}

/* ---------------------------------------------------------------------
   38. OKUNURLUK TURU                               (2026-09-04)
   Ölçülen kontrast AA'yı geçiyordu ama kullanıcı üç ayrı ekranda
   "okunmuyor" dedi. AA bir taban, hedef değil: ikincil metin
   koyulaştırıldı ve küçük punto alanlar büyütüldü.
   --------------------------------------------------------------------- */
.sss .cevap { font-size: 15.5px; color: var(--metin-2); line-height: 1.65; }
.sss summary { font-size: 15.5px; }

.fiyat-tablo td { font-size: 15px; color: var(--metin-2); }
.fiyat-tablo caption, .fiyat-tablo thead th { font-size: 12.5px; color: var(--metin-2); }

.paket-fiyat-aralik, .yan-fiyat-aralik { font-size: 13px; color: var(--metin-2); }
.paket-kdv, .yan-fiyat-kdv { font-size: 12.5px; color: var(--metin-2); }
.paket-ozet-satir, .paket-ozellik li { font-size: 14.5px; color: var(--metin-2); }
.paket-not { font-size: 14px; color: var(--metin-2); }

.metin-blok p { font-size: 16px; color: var(--metin-2); }
.metin-giris p { font-size: 17px; }
.adim-not, .gkart-not, .kart-not, .vkart-not, .kkart-not { font-size: 14.5px; color: var(--metin-2); }
.alt-not { font-size: 15px; }
.yan-meta div { font-size: 14.5px; color: var(--metin-2); }
.yan-kutu .yan-not { font-size: 14.5px; }
.deg-davet-not { font-size: 15px; }

/* Fotoğraflı kahramanda beyaz metin: opaklık yerine tam beyaz */
.vitrin-fotograf .vitrin-alt { color: rgba(255,255,255,.94); }
.vitrin-fotograf .bolum-etiket { color: rgba(255,255,255,.82); }
.vitrin-fotograf .kirinti, .vitrin-fotograf .kirinti a { color: rgba(255,255,255,.82); }

/* ---------------------------------------------------------------------
   39. IZGARA HİZASI VE BÖLÜM RİTMİ                 (2026-09-04)
   Ölçümde bulunanlar:
   · .izgara-vitrin kartları 360px ve 311px olarak iki boyda çıkıyordu —
     özeti olan kart uzun, olmayan kısa kalıyordu.
   · Ardışık bölümler arasında bazen 56px, bazen 0px boşluk vardı.
   --------------------------------------------------------------------- */

/* Kart gövdesi esner, fiyat satırı her kartta aynı hizada biter */
.vkart { display: flex; flex-direction: column; }
.vkart-gorsel { flex: 0 0 auto; }
.vkart-govde { display: flex; flex-direction: column; flex: 1 1 auto; }
.vkart-ust, .vkart-ad { flex: 0 0 auto; }
.vkart-not { flex: 1 1 auto; }
.vkart-fiyat { margin-top: auto; }

/* Kategori ve şehir kartları da aynı kuralı izler */
.kkart { display: flex; flex-direction: column; }
.kkart-govde { display: flex; flex-direction: column; flex: 1 1 auto; }
.kkart-not { margin-top: auto; }

/* Bölüm ritmi: şeritler kendi dolgusunu taşır, aradaki .bolum'lar
   birbirine yapışmasın */
.serit + .serit { margin-top: 0; }
.kap > .bolum + .bolum { padding-top: var(--b8); }
.serit > .kap > .bolum:first-child { padding-top: 0; }

/* Şerit ile ondan sonraki .kap arasında nefes */
.serit + .kap > .bolum:first-child { padding-top: var(--b9); }

/* Izgara satırları eşit yükseklikte: 12 kart 3 satıra bölününce
   satırlar içerik uzunluğuna göre farklı boyda kalıyordu. */
.izgara-vitrin, .izgara-kategori, .izgara-sehir, .izgara-guven, .izgara-paket {
  grid-auto-rows: 1fr;
}
@media (max-width: 640px) {
  /* Mobilde bunlar flex sıraya döndüğü için kural geçersiz; sıfırlanıyor */
  .izgara-vitrin, .izgara-kategori, .izgara-paket { grid-auto-rows: auto; }
}

/* Mobilde başlık ortalanıyordu: 33. bölümdeki `align-items:center` kuralı
   29. bölümdeki media sorgusundan SONRA geldiği için onu eziyordu.
   Kural burada, en sonda yeniden yazılıyor. */
@media (max-width: 640px) {
  .vitrin-fotograf .kahraman-satir {
    flex-direction: column; align-items: flex-start; justify-content: flex-start;
    gap: var(--b3);
  }
  .vitrin-fotograf .kahraman-eylem { margin-left: 0; }
  .vitrin-ic-sayfa h1 { text-align: left; }
}

/* ── 40. KAHRAMAN PUAN ROZETI ─────────────────────────────────────────────
   Favori/paylas ikonlarinin ALTINDA, sag sutunda durur.
   ⚠️ Ortalama yalniz gercek onayli yorum esigi asilinca basilir (App\Core\Puan).
      Puan yoksa yildizlar BOS gosterilir ve dugme puanlama penceresini acar —
      sayi uydurulmaz. */
.kahraman-eylem {
  flex-direction: column; align-items: flex-end; gap: var(--b2);
}
/* Ikon ikilisi yan yana kalir; rozet ALTLARINDA durur */
.kahraman-ikonlar { display: flex; gap: var(--b2); }

.kahraman-puan {
  display: inline-flex; align-items: center; gap: var(--b2);
  margin-top: var(--b2); padding: var(--b2) var(--b3);
  border: 1px solid rgba(255,255,255,.35); border-radius: 999px;
  background: rgba(0,0,0,.28); color: #fff;
  font: 600 13px/1 var(--f-govde); text-decoration: none;
  cursor: pointer; white-space: nowrap;
}
.kahraman-puan:hover { background: rgba(0,0,0,.42); }
.kahraman-puan strong { font-size: 15px; }
.kahraman-puan-yildiz { color: #ffc94d; letter-spacing: .5px; }
/* ⚠️ Bos durumda yildizlar ALTIN OLMAZ — kucuk boyutta dolu yildiz gibi
   okunuyor ve "5 yildiz" izlenimi veriyordu. Notr renk, puan yok demektir. */
.kahraman-puan-bos .kahraman-puan-yildiz { color: currentColor; opacity: .55; }
/* Ziyaretci kendi puanini verdiyse yildizlar altin doner — ama bu ORTALAMA
   degil, o cihazin kendi oyudur (bkz. parca/yorumlar.php). */
.kahraman-puan-verildi .kahraman-puan-yildiz { color: #ffc94d; opacity: 1; }
.kahraman-puan-verildi { border-color: rgba(255,201,77,.5); }

/* ⚠️ BASLIK-ALTYAZI BOSLUGU
   Sag sutun (favori + paylas + puan rozeti) ~110px yuksekligindeydi ve
   `.kahraman-satir` bu yuksekligi aldigi icin h1 ile alt aciklama arasinda
   115px olu bosluk olusuyordu. Sag sutun akistan cikariliyor: masaustunde
   mutlak konumlanir, boylece h1 -> altyazi araligi dogal kalir.
   Mobilde akista kalir (dar ekranda ust uste binerdi). */
@media (min-width: 641px) {
  .vitrin-ic { position: relative; }
  .vitrin-ic .kahraman-eylem {
    position: absolute; top: 0; right: 0; margin: 0;
  }
  .vitrin-ic .kahraman-satir { padding-right: 240px; }
}
.vitrin-ic .kahraman-satir { margin-bottom: 0; }
.vitrin-ic .kahraman-satir h1 { margin: 0; }
.vitrin-ic .vitrin-alt { margin-top: var(--b3); }
.kahraman-puan-adet   { font-weight: 500; opacity: .88; }

/* Fotografsiz baslikta zemin koyu degil — jetonlu renge don */
.vitrin:not(.vitrin-fotograf) .kahraman-puan {
  border-color: var(--cizgi-2); background: var(--yuzey-2); color: var(--metin);
}
.vitrin:not(.vitrin-fotograf) .kahraman-puan:hover { background: var(--yuzey); }

/* Verilen puanin geri bildirimi */
.deg-geri-sayi {
  display: inline-block; margin-left: var(--b1); padding: 1px var(--b2);
  border-radius: 999px; background: var(--marka-acik); color: var(--marka-koyu);
  font-size: 12px; font-weight: 700;
}

@media (max-width: 640px) {
  .kahraman-eylem { align-items: flex-start; }
  .kahraman-puan  { margin-top: var(--b2); }
}


/* ── 41. REHBER / BLOG ────────────────────────────────────────────────────
   Yazi altindaki CTA, SSS listesine yapisik duruyordu — sifir bosluklu
   `<section>` idi. Ayri bir kapanis serididir, kendi nefesi olmali. */
.yazi-kapanis {
  margin-top: var(--b8);
  padding-top: var(--b6);
  border-top: 1px solid var(--cizgi);
}
.yazi-kapanis .kahraman-dugmeler { gap: var(--b3); flex-wrap: wrap; }

/* Rehber/blog kartlari: duz beyaz kutular sayfada okunmuyordu.
   Kategoriye degil, marka jetonlarina bagli sade bir vurgu:
   sol kenarda ince marka seridi + ustte hafif marka zemini.
   ⚠️ Sabit renk yok; koyu temada da jetonlar donuyor. */
.izgara-rehber .kart,
.rehber-kart {
  position: relative;
  border: 1px solid var(--cizgi);
  border-radius: var(--r-lg);
  background:
    linear-gradient(180deg, var(--marka-acik) 0, transparent 88px),
    var(--yuzey);
  padding: var(--b4) var(--b4) var(--b4) calc(var(--b4) + 4px);
  overflow: hidden;
  transition: border-color .15s ease, transform .15s ease;
}
.izgara-rehber .kart::before,
.rehber-kart::before {
  content: ''; position: absolute; inset: 0 auto 0 0; width: 4px;
  background: var(--marka);
}
.izgara-rehber .kart:hover,
.rehber-kart:hover { border-color: var(--cizgi-2); transform: translateY(-2px); }

.izgara-rehber .kart-ad,
.rehber-kart .kart-ad {
  font: 700 16px/1.35 var(--f-baslik); color: var(--metin);
  margin: 0 0 var(--b2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.izgara-rehber .kart-not,
.rehber-kart .kart-not {
  font-size: 13.5px; line-height: 1.55; color: var(--metin-3); margin: 0;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
.izgara-rehber { grid-auto-rows: 1fr; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .izgara-rehber .kart,
  :root:not([data-theme="light"]) .rehber-kart {
    background: linear-gradient(180deg, var(--kart-parilti) 0, transparent 88px),
                var(--yuzey);
  }
}
:root[data-theme="dark"] .izgara-rehber .kart,
:root[data-theme="dark"] .rehber-kart {
  background: linear-gradient(180deg, var(--kart-parilti) 0, transparent 88px),
              var(--yuzey);
}

/* ── 42. ANASAYFA BASLIK VIDEOSU ──────────────────────────────────────────
   Mor zeminin uzerinde sessiz, kisa bir dongu. Kurallar:
   · Zemin rengi KALIR — video yuklenmese de baslik dogru gorunur.
   · Video yalniz >=900px ekranda gosterilir; mobilde hic indirilmez.
   · `prefers-reduced-motion: reduce` -> video hic olusturulmaz.
   ⚠️ <video> HTML'de basilmaz, JS ile eklenir (bkz. anasayfa.php):
      preload="none" yetmiyordu, tarayici <source>'u yine indiriyordu. */
.vitrin-video { position: relative; isolation: isolate; overflow: hidden; }

.vitrin-video-fon { display: none; }

@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  .vitrin-video-fon {
    display: block; position: absolute; inset: 0; z-index: 0;
    pointer-events: none;
  }
  .vitrin-video-fon video {
    width: 100%; height: 100%; object-fit: cover; display: block;
    /* Mor cok baskindi, video secilmiyordu: opaklik .28 -> .62,
       doygunluk kisilmiyor. Metin okunurlugunu perde saglar. */
    opacity: .62;
  }
  /* Perde: video ustunde ince bir koyulastirma. Yalniz metnin oldugu
     ust-orta bandi koyulastirir, videonun kenarlarini acik birakir. */
  .vitrin-video::after {
    content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background:
      radial-gradient(120% 90% at 50% 42%, rgba(var(--perde-rgb), .55) 0%,
                      rgba(var(--perde-rgb), .28) 55%, rgba(var(--perde-rgb), .10) 100%),
      linear-gradient(180deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,.22) 100%);
  }
  .vitrin-video > .kap { position: relative; z-index: 2; }

  /* Tema zemini de aciliyor: video onun uzerinden okunsun */
  .vitrin-video { background-color: var(--marka); }  /* tema jetonu */
  .vitrin-video::before {
    content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(var(--perde-rgb), .7) 0%, rgb(var(--perde-rgb)) 100%);
    opacity: .55;
  }
}

/* ── 43. USTBILGI VIDEONUN USTUNDE ────────────────────────────────────────
   Anasayfada ustbilgi saydam olup videonun uzerine biniyor.
   ⚠️ YALNIZ anasayfada: ic sayfalarda ustbilgi beyaz kalir, yoksa
      fotografli baslikta okunmaz oluyor.

   🔴 BURADA YAPILAN HATA (2026-09-04, kullanici bildirdi):
      `body.anasayfa .ust a { color:#fff }` gibi TOPLU bir kural yazilmisti.
      Iki sey kirdi:
        1. `.ust-cta` beyaz zeminliydi; toplu kural (0,2,1) onun kendi
           kuralindan (0,2,0) daha ozguldu, yazi da beyaza dondu ->
           beyaz uzerine beyaz, dugme BOS gorundu.
        2. `.ust-ikon` (arama) acik temada acik gri zeminli; ikon beyaza
           dondu -> yine gorunmez.
      Ayrica marka yazisi `.ust-marka` degil `.marka-ad`; hedeflenmedigi
      icin acik temada koyu kalip video uzerinde kayboldu.
   DERS: saydam ustbilgide rengi TEK TEK ver; `a`/`button` gibi eleman
      seciciyle toplu boyama yapma, kendi zemini olan ogeleri ezersin. */
@media (min-width: 900px) {
  body.anasayfa .ust {
    position: absolute; inset: 0 0 auto 0; z-index: 30;
    background: transparent; border-bottom-color: transparent;
    backdrop-filter: none;
  }
  body.anasayfa .vitrin-video { padding-top: 96px; }

  /* Ustbilgi altinda koyulastirma: menu her karede okunsun */
  body.anasayfa .ust::after {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(180deg, rgba(var(--perde-rgb), .62) 0%, rgba(var(--perde-rgb), 0) 100%);
  }

  /* --- yalniz ZEMINSIZ metin ogeleri beyaza doner --- */
  body.anasayfa .marka,
  body.anasayfa .marka-ad,
  body.anasayfa .ust-bag,
  body.anasayfa .ust-bag span,
  body.anasayfa .ust-konum,
  body.anasayfa .ust-konum span { color: #fff; }
  body.anasayfa .ust-bag svg,
  body.anasayfa .ust-konum svg { stroke: #fff; }
  body.anasayfa .ust-bag:hover,
  body.anasayfa .ust-konum:hover { color: #fff; opacity: .82; }
  body.anasayfa .ust-bag.aktif::after { background: #fff; }

  /* --- KENDI ZEMINI OLAN ogeler: renk ayri ayri verilir --- */
  /* Arama: saydam zemin + beyaz cerceve */
  body.anasayfa .ust .ust-ikon {
    background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.40);
    color: #fff;
  }
  body.anasayfa .ust .ust-ikon:hover { background: rgba(255,255,255,.24); }
  body.anasayfa .ust .ust-ikon svg { stroke: #fff; }

  /* Teklif Al: beyaz zemin + KOYU yazi. Ozgullugu yukarki metin
     kuralindan yuksek tutmak icin `.ust .ust-cta` yazildi. */
  body.anasayfa .ust .ust-eylem .ust-cta {
    background: #fff; color: rgb(var(--perde-rgb)); border-color: #fff;
  }
  body.anasayfa .ust .ust-eylem .ust-cta:hover { background: rgba(255,255,255,.86); color: rgb(var(--perde-rgb)); }
  body.anasayfa .ust .ust-eylem .ust-cta svg { stroke: rgb(var(--perde-rgb)); }
}

/* ── 44. YAZI GOVDESI ARALIKLARI ──────────────────────────────────────────
   Rehber/blog govdesinde <ul> ile sonraki basligin arasi kapaliydi; liste
   H2'ye yapisik duruyordu. Bloklar `.metin` icinde arka arkaya basildigi
   icin aralik TEK YERDEN verilir. */
.metin > ul,
.metin > ol { margin: var(--b4) 0 var(--b5); padding-left: var(--b5); }
.metin > ul li,
.metin > ol li { margin-bottom: var(--b2); line-height: 1.65; }
.metin > ul + h2,
.metin > ol + h2,
.metin > p + h2 { margin-top: var(--b7); }
.metin > h2 { margin-bottom: var(--b3); }
.metin > h3 { margin-top: var(--b6); margin-bottom: var(--b2); }

/* Govdeden sonra gelen SSS bolumu de kendi nefesini alsin */
.hizmet-govde > section + section { margin-top: var(--b7); }
.hizmet-govde .sss { margin-top: var(--b3); }

/* ── 45. MOBIL: UYGULAMA HISSI ────────────────────────────────────────────
   Olculen sorun (375px, anasayfa): sayfa 6.375px, footer tek basina 860px,
   bolumler arasi 56–72px olu bosluk vardi. Masaustu araliklari mobile
   oldugu gibi tasiniyordu.
   Bu blok YALNIZ <=640px'i etkiler; masaustu duzeni degismez. */
@media (max-width: 640px) {

  /* --- bolum araliklari: yarisi kadar --- */
  .serit, .bolum { padding-top: var(--b5); padding-bottom: var(--b5); }
  .serit + .serit, .bolum + .bolum { margin-top: 0; }
  .kapanis { margin-top: var(--b5); padding: var(--b5) 0; }
  .alt { margin-top: var(--b5); padding-top: var(--b5); }
  .kap { padding-left: var(--b4); padding-right: var(--b4); }

  /* --- baslik olcekleri: bir kademe kucuk --- */
  .bolum-ust h2, .serit h2, .bolum h2 { font-size: 19px; line-height: 1.3; }
  .bolum-ust { margin-bottom: var(--b3); }
  .sehir-kat { font-size: 15px; margin: var(--b4) 0 var(--b2); }

  /* --- kartlar: daha sik --- */
  .vkart-govde { padding: var(--b3); }
  .vkart-ad    { font-size: 14.5px; }
  .vkart-not   { font-size: 12.5px; }
  .kart        { padding: var(--b3); }

  /* ── SEHIR KARTLARI YATAY AKAR ──────────────────────────────────────
     Dikey izgarada 148 kart mobilde bitmeyen bir liste oluyordu.
     Yatay kaydirma + snap: uygulama davranisi.
     ⚠️ `grid-auto-rows: 1fr` (bolum 39) burada gecersiz kalmali,
        yoksa flex cocuklari esnemez. */
  .izgara-sehir {
    display: flex; grid-auto-rows: auto;
    gap: var(--b3);
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* kenarlara tasarak aksin: kap dolgusunu asar, kenardan baslar */
    margin-inline: calc(var(--b4) * -1);
    padding-inline: var(--b4);
    padding-bottom: var(--b2);
  }
  .izgara-sehir::-webkit-scrollbar { display: none; }
  .izgara-sehir > * {
    flex: 0 0 62%; scroll-snap-align: start; min-width: 0;
  }

  /* Ayni davranis one cikan paket ve kategori seritlerinde de --- */
  .izgara-vitrin, .izgara-paket {
    display: flex; grid-auto-rows: auto; gap: var(--b3);
    overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    margin-inline: calc(var(--b4) * -1);
    padding-inline: var(--b4); padding-bottom: var(--b2);
  }
  .izgara-vitrin::-webkit-scrollbar,
  .izgara-paket::-webkit-scrollbar { display: none; }
  .izgara-vitrin > *, .izgara-paket > * {
    flex: 0 0 72%; scroll-snap-align: start; min-width: 0;
  }

  /* ── FOOTER: iki menu acik, digerleri yalniz baslik + tumu bagi ──────
     Mobilde 860px'di. Tum baglantilar HTML'de kalir (SEO), yalniz
     3. ve 4. sutunun madde listesi gizlenir. */
  .alt-ic { gap: var(--b4); }
  .alt-sutun:nth-of-type(n+3) li:not(:has(> .alt-tumu)) { display: none; }
  .alt-sutun:nth-of-type(n+3) .alt-baslik { margin-bottom: var(--b1); }
  .alt-liste li { margin-bottom: 2px; }
  .alt-marka-blok { margin-bottom: var(--b2); }
  .alt-kapanis { padding-top: var(--b3); margin-top: var(--b3); }
  .alt-yasal { gap: var(--b2) var(--b3); font-size: 12px; }
}

/* ── 46. MOBIL: LISTELER, ALT ACIKLAMALAR, DUGMELER ───────────────────────
   Olculdu (375px): /sehirler/adana sayfa boyu 16.113px. Sebep, 240 hizmet
   maddesinin TEK sutunda 48px'lik satirlar halinde dizilmesi.
   Cozum: iki sutun + sik satir. Ayrica kart alti aciklamalari mobilde
   gizleniyor — kucuk ekranda ad ve fiyat yeter, aciklama sayfayi uzatiyor. */
@media (max-width: 640px) {

  /* --- hizmet listesi: iki sutun, sik satir --- */
  .hliste {
    display: grid; grid-template-columns: 1fr 1fr; gap: var(--b2);
  }
  .hliste li { margin: 0; }
  .hliste a {
    min-height: 40px; padding: var(--b2) var(--b3);
    font-size: 12.5px; line-height: 1.3; border-radius: var(--r-sm);
    display: flex; flex-direction: column; justify-content: center; gap: 2px;
  }
  .hliste-ad {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .hliste-fiyat { font-size: 11px; }

  /* --- alt aciklamalar: mobilde gizlenir --- */
  /* Kart adi ve fiyati kaliyor; ikinci satir aciklama sayfa boyunu iki
     katina cikariyordu. Metin HTML'de duruyor, yalniz gorunmuyor. */
  .vkart-not, .kart-not:not(.kart-ad),
  .izgara-kategori .kart-not,
  .sehir-kart-not { display: none; }
  .bolum-ust .bolum-alt { display: none; }

  /* --- dugmeler: parmak boyu, tasmasiz --- */
  .dugme { min-height: 44px; padding: 0 var(--b4); font-size: 14px; }
  .dugme-buyuk { min-height: 48px; width: 100%; }
  .vitrin-eylem { flex-direction: column; align-items: stretch; gap: var(--b2); }
  .vitrin-eylem .dugme { width: 100%; }
  .kahraman-dugmeler { flex-direction: column; align-items: stretch; gap: var(--b2); }
  .kahraman-dugmeler .dugme { width: 100%; }
  .bolum-ust { flex-wrap: wrap; gap: var(--b2); }
  .bolum-bag { font-size: 13px; }

  /* --- form alanlari: iOS'ta yakinlastirma yapmasin (16px alti zoom eder) --- */
  .yan-alan input, .yan-alan textarea, .yan-alan select,
  .vitrin-ara input { font-size: 16px; min-height: 44px; }

  /* --- sag sutun mobilde govdenin ALTINA duser --- */
  .hizmet-duzen { display: block; }
  .hizmet-yan { margin-top: var(--b5); position: static; width: auto; }

  /* --- tablolar kendi icinde kaysin, sayfayi tasirmasin --- */
  .fiyat-tablo-sar, .tablo-sar { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table { font-size: 13px; }
}

/* ── 47. MOBIL: "TUMUNU GOSTER" + HER GORSEL IZGARASI YATAY AKAR ──────────
   Kaynak: parca/mobil-daha.php (ilerlemeli iyilestirme; JS kapaliysa
   hersey gorunur kalir). */
.daha-dugme { display: none; }

@media (max-width: 640px) {
  .daha-dugme {
    display: inline-flex; align-items: center; gap: var(--b1);
    margin: var(--b3) 0 var(--b2);
    padding: var(--b2) var(--b4); min-height: 40px;
    border: 1px solid var(--cizgi-2); border-radius: 999px;
    background: var(--yuzey); color: var(--marka);
    font: 600 13px/1 var(--f-govde); cursor: pointer;
  }
  .daha-dugme:hover { background: var(--marka-acik); }
  .daha-satir { margin-top: var(--b1); padding: var(--b1) var(--b3);
                min-height: 32px; font-size: 12.5px; border: 0;
                background: transparent; padding-left: 0; }

  /* Uzun paragraf kirpma */
  .metin-kirpik {
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* ── GORSEL ICEREN HER IZGARA YATAY AKAR ──────────────────────────
     Kural: birden fazla gorsel varsa mobilde dikey yigin degil, yatay
     serit. Tek yerden veriliyor ki yeni izgara eklenince unutulmasin. */
  .izgara-vitrin, .izgara-paket, .izgara-sehir, .izgara-guven, .izgara-dar {
    display: flex; grid-auto-rows: auto; gap: var(--b3);
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-inline: calc(var(--b4) * -1);
    padding-inline: var(--b4); padding-bottom: var(--b2);
  }
  .izgara-vitrin::-webkit-scrollbar, .izgara-paket::-webkit-scrollbar,
  .izgara-sehir::-webkit-scrollbar,  .izgara-guven::-webkit-scrollbar,
  .izgara-dar::-webkit-scrollbar { display: none; }
  .izgara-vitrin > *, .izgara-paket > *, .izgara-dar > * { flex: 0 0 72%; scroll-snap-align: start; min-width: 0; }
  .izgara-sehir  > * { flex: 0 0 62%; scroll-snap-align: start; min-width: 0; }
  .izgara-guven  > * { flex: 0 0 78%; scroll-snap-align: start; min-width: 0; }

  /* Yatay seritlerde "tumunu goster" dugmesi cikmaz — zaten kaydiriliyor */
  .izgara-vitrin + .daha-dugme, .izgara-paket + .daha-dugme,
  .izgara-sehir + .daha-dugme,  .izgara-guven + .daha-dugme,
  .izgara-dar + .daha-dugme { display: none; }
}

/* ── 48. MOBIL: YAZI SAYFALARI + UYGULAMA HISSI ───────────────────────────
   Rehber/blog gövdesi masaüstü ölçüleriyle geliyordu; telefonda satırlar
   uzun, başlıklar iri, aralıklar genişti. */
@media (max-width: 640px) {

  /* --- yazi tipografisi: bir kademe kucuk, satir araligi korunur --- */
  .metin p, .metin li { font-size: 14.5px; line-height: 1.62; }
  .metin > h2 { font-size: 17.5px; margin-top: var(--b5); margin-bottom: var(--b2); }
  .metin > h3 { font-size: 15.5px; margin-top: var(--b4); }
  .metin > ul, .metin > ol { padding-left: var(--b4); margin: var(--b3) 0 var(--b4); }
  .metin > ul li, .metin > ol li { margin-bottom: var(--b1); }

  article h1, .vitrin-ic h1 { font-size: 24px; line-height: 1.22; }
  .vitrin-alt { font-size: 14.5px; }
  .kirinti { font-size: 12px; }

  /* SSS: sik ve dokunmatik */
  .sss details { border-radius: var(--r-sm); }
  .sss summary { min-height: 46px; padding: var(--b3); font-size: 14px; }
  .sss .cevap  { padding: 0 var(--b3) var(--b3); font-size: 13.5px; }

  /* --- UYGULAMA HISSI ------------------------------------------------
     · dokunma vurgusu kapali (mavi kutu cikmasin)
     · yatay seritler momentumla kaysin
     · secim/uzun basma menusu kart uzerinde cikmasin
     · sabit alt eylem cubugu: "Teklif al" her zaman elin altinda */
  * { -webkit-tap-highlight-color: transparent; }
  .vkart, .kart, .sehir-kart { -webkit-touch-callout: none; }
  .vkart:active, .kart:active, .dugme:active { transform: scale(.985); }
  .vkart, .kart, .dugme { transition: transform .12s ease; }

  /* Sabit alt cubuk — sayfanin en altina degil, ekranin altina yapisik */
  .mobil-cubuk {
    position: fixed; inset: auto 0 0 0; z-index: 40;
    display: flex; gap: var(--b2);
    padding: var(--b2) var(--b4) calc(var(--b2) + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--zemin) 92%, transparent);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--cizgi);
  }
  .mobil-cubuk .dugme { flex: 1 1 0; min-height: 46px; font-size: 14px; }
  /* Cubugun altinda kalan icerik gorunsun */
  body { padding-bottom: 68px; }
  .alt { padding-bottom: var(--b6); }
}
@media (min-width: 641px) { .mobil-cubuk { display: none; } }

/* ── 49. MOBIL: TIPOGRAFI VE FORM OLCEKLERI (son ayar) ────────────────────
   Baslik/metin/dugme olcekleri masaustunden geliyordu. Telefon
   uygulamasi hissi icin hepsi bir kademe kuculdu ve TEK yerden verildi. */
@media (max-width: 640px) {

  /* --- baslik olcegi --- */
  h1 { font-size: 23px; line-height: 1.22; }
  h2 { font-size: 18px;  line-height: 1.28; }
  h3 { font-size: 15.5px; line-height: 1.3; }
  .bolum-ust h2, .serit h2, .bolum h2, .sehir-baslik { font-size: 18px; }
  .sehir-kat { font-size: 11.5px; letter-spacing: .04em; }
  .sehir-kat small { font-size: 11px; }
  .bolum-etiket { font-size: 10.5px; letter-spacing: .06em; }

  /* --- govde metni --- */
  body, p, li, td, .kart-not, .alt-not { font-size: 14px; }
  .a-not, .alt-not, .wa-not, .vitrin-not { font-size: 12.5px; }

  /* --- form: sik ve tek sutun --- */
  form fieldset { margin-bottom: var(--b4); padding: var(--b3); }
  form legend, .form-baslik { font-size: 12px; letter-spacing: .05em; }
  label, .yan-alan > span { font-size: 13px; margin-bottom: 2px; }
  .yan-alan { margin-bottom: var(--b3); }
  /* ⚠️ 16px ALTINA DUSURME: iOS 16px'ten kucuk alanda sayfayi
     yakinlastiriyor ve kullanici formdan cikiyor. */
  input, select, textarea { font-size: 16px; min-height: 44px; }
  textarea { min-height: 88px; }
  .alan-ipucu, form small { font-size: 12px; line-height: 1.45; margin-top: 2px; }

  /* --- dugmeler: tek olcek --- */
  .dugme { min-height: 44px; padding: 0 var(--b4); font-size: 13.5px; }
  .dugme-buyuk { min-height: 48px; font-size: 14.5px; }
  .ikon-dugme { width: 40px; height: 40px; }
  .daha-dugme { font-size: 12.5px; min-height: 38px; }

  /* --- baslik alanindaki eylem sutunu daralsin --- */
  .vitrin-ic .kahraman-satir { padding-right: 0; }
  .kahraman-puan { font-size: 12px; padding: var(--b1) var(--b3); }
}

/* ── 50. MOBIL: DUGMELER KUCULSUN ─────────────────────────────────────────
   48. bolumde tum CTA'lar tam genislik + 48px yapilmisti; kapanis ve footer
   bloklarinda iki dev dugme alt alta duruyordu. Artik YAN YANA ve alcak.
   ⚠️ 44px dokunma hedefinin altina inilmiyor — parmakla isabet sarti. */
@media (max-width: 640px) {
  .kapanis .kahraman-dugmeler,
  .alt-eylem,
  .yazi-kapanis .kahraman-dugmeler {
    flex-direction: row; flex-wrap: wrap; gap: var(--b2);
  }
  .kapanis .kahraman-dugmeler .dugme,
  .alt-eylem .dugme,
  .yazi-kapanis .kahraman-dugmeler .dugme {
    flex: 1 1 0; width: auto; min-width: 0;
    min-height: 42px; padding: 0 var(--b3);
    font-size: 13px; white-space: nowrap;
  }
  /* Baslik alanindaki ana CTA tam genislik KALIR — orada tek eylem var */
  .vitrin-eylem .dugme { min-height: 46px; font-size: 14px; }
  .vitrin-eylem .dugme-cam { min-height: 42px; font-size: 13.5px; }

  /* Sabit alt cubuk da alcalsin */
  .mobil-cubuk .dugme { min-height: 42px; font-size: 13.5px; }
  .mobil-cubuk .dugme-wa { flex: 0 0 52px; padding: 0; }
  body { padding-bottom: 62px; }
}

/* ── 51. MOBIL: OLCEK DUZELTMESI (49/50'yi ezen kurallar) ─────────────────
   ⚠️ 49. bolumde `h1 { 23px }` yazmistim ama olculdugunde 24px cikti:
      `.vitrin-ic h1` (0,1,1) bare `h1`den (0,0,1) daha ozgul ve kazaniyor.
      Ders: mobil olcegi verirken MASAUSTUNDE HANGI SECICI KULLANILDIYSA
      onun aynisini yaz; bare eleman secicisi yetmiyor. */
@media (max-width: 640px) {
  .vitrin-ic h1, article h1, .kahraman h1, .kahraman-satir h1 { font-size: 21px; }
  .bolum-ust h2, .serit h2, .bolum h2, .metin > h2,
  .yorumlar h2, .sss-bolum h2 { font-size: 16.5px; }
  .metin > h3, .bolum h3 { font-size: 14.5px; }

  /* --- kategori etiketleri (chip) kucultuldu --- */
  .etiketler { gap: var(--b2); }
  .etiketler li a, .etiketler a {
    min-height: 34px; padding: var(--b1) var(--b3);
    font-size: 12.5px; border-radius: 999px;
  }
  .etiketler small { font-size: 11px; }

  /* --- dugmeler bir kademe daha kucuk --- */
  .dugme { min-height: 40px; padding: 0 var(--b3); font-size: 12.5px; }
  .dugme-buyuk { min-height: 44px; font-size: 13.5px; }
  .vitrin-eylem .dugme { min-height: 44px; font-size: 13.5px; }
  .vitrin-eylem .dugme-cam { min-height: 40px; font-size: 12.5px; }
  .kapanis .kahraman-dugmeler .dugme,
  .alt-eylem .dugme,
  .yazi-kapanis .kahraman-dugmeler .dugme { min-height: 40px; font-size: 12.5px; }
  .mobil-cubuk .dugme { min-height: 40px; font-size: 12.5px; }
  body { padding-bottom: 58px; }

  /* --- liste satirlari sikilastirildi --- */
  .hliste a { min-height: 36px; font-size: 12px; padding: var(--b1) var(--b2); }
  .daha-dugme { min-height: 34px; font-size: 12px; padding: var(--b1) var(--b3); }
}

/* ── 52. MOBIL: REHBER/BLOG KARTLARI KUCULDU ──────────────────────────────
   Tek sutunda, 2 satirlik baslikla ~110px'lik kartlar diziliyordu.
   Aciklama zaten gizliydi; kalan bosluk dolgudan geliyordu. */
@media (max-width: 640px) {
  .izgara-rehber { gap: var(--b2); }
  .izgara-rehber .kart {
    padding: var(--b2) var(--b3) var(--b2) calc(var(--b3) + 2px);
    border-radius: var(--r-sm);
    background: var(--yuzey);            /* mobilde degrade yok — sade */
    min-height: 0;
  }
  .izgara-rehber .kart::before { width: 3px; }
  .izgara-rehber .kart-ad {
    font-size: 12.5px; line-height: 1.32; margin: 0;
    -webkit-line-clamp: 2;
  }
  /* Izgara satir yuksekligini esitlemesin — kart kendi boyunda kalsin */
  .izgara-rehber { grid-auto-rows: auto; }
}

/* ── 53. MOBIL: GOVDE METNI KUCULDU (son) ─────────────────────────────────
   ⚠️ 48. bolumde `.metin p { 14.5px }` verilmisti; olculdugunde masaustu
      degeri geliyordu cunku `.hizmet-govde .metin p` gibi daha ozgul
      kurallar oniine geciyordu. Ayni ozgullukle yaziliyor. */
@media (max-width: 640px) {
  .metin p, .metin li,
  .hizmet-govde .metin p, .hizmet-govde .metin li,
  article p, article li,
  .yorumlar p, .sss .cevap {
    font-size: 13px; line-height: 1.58;
  }
  .metin p { margin-bottom: var(--b3); }
  .metin strong { font-weight: 650; }

  /* Alt aciklama / not satirlari */
  .vitrin-alt, .kart-not, .alt-not, .a-not { font-size: 12.5px; line-height: 1.5; }

  /* SSS icerigi */
  .sss summary { font-size: 13px; min-height: 42px; }
  .sss .cevap  { font-size: 12.5px; }

  /* Sag sutun kutusu */
  .yan-kutu { padding: var(--b3); }
  .yan-baslik { font-size: 14px; }
  .yan-not, .yan-meta { font-size: 12px; }
  .yan-fiyat-tutar { font-size: 20px; }
}

/* ── 54. MOBIL: FORM ALANI 16px + DOKUNMA HEDEFI 40px ─────────────────────
   Iki olculen sorun:
   🔴 /talep alanlari 15,5px kaliyordu — `.alan input, .form input` (0,1,1)
      benim bare `input` kuralimi (0,0,1) eziyordu. iOS 16px ALTINDA alana
      odaklaninca sayfayi YAKINLASTIRIYOR ve kullanici formdan cikiyor.
      Ayni ozgullukle yazildi.
   🔴 21–23 bag/dugme 26px yuksekligindeydi (kirinti, footer, etiket
      listeleri). Parmakla isabet icin en az 40px. */
@media (max-width: 640px) {
  .alan input, .alan select, .alan textarea,
  .form input, .form select, .form textarea,
  .talep-form input, .talep-form select, .talep-form textarea,
  .yan-alan input, .yan-alan select, .yan-alan textarea {
    font-size: 16px; min-height: 46px;
  }
  .alan textarea, .form textarea, .talep-form textarea { min-height: 88px; }

  /* Dokunma hedefleri */
  .kirinti a, .kirinti span { display: inline-block; padding: var(--b2) 0; }
  /* ⚠️ Sinif `.alt-liste` DEGIL — footer sutunlarindaki <ul> sinifsiz.
     `.alt-sutun li a` ile hedeflenir. */
  .alt-sutun li a, .alt-yasal a, .alt-tumu {
    display: inline-block; min-height: 40px; line-height: 40px;
  }
  .alt-sutun li { margin-bottom: 0; }
  .sehir-kat + .hliste a { min-height: 40px; }
  .bolum-bag { min-height: 40px; display: inline-flex; align-items: center; }

  /* Footer yine de uzamasin: satir yuksekligi arttigi icin sutunlari sik tut */
  .alt-ic { gap: var(--b3); }
  .alt { padding-top: var(--b4); }
}

/* ── 55. MOBIL: ANASAYFA BILESENLERI (olculen gercek siniflar) ────────────
   🔴 45–54 arasi bloklarda `.etiketler`, `h2`, `input` gibi TAHMIN edilen
      secicileri kullanmistim. Olculdugunde anasayfanin bu siniflari
      kullandigi ortaya cikti: .cip/.cipler, .kkart*, .sekme-*, .adim*.
      Hicbiri kuculmemisti. Ders: once `getComputedStyle` ile SINIF ADINI
      OGREN, sonra kural yaz. */
@media (max-width: 640px) {

  /* --- bolum dolgulari (56px'ti) --- */
  .bolum { padding-top: var(--b5); padding-bottom: var(--b5); }
  .serit { padding-top: var(--b5); padding-bottom: var(--b5); }

  /* --- baslik alti aciklama (17px'ti) --- */
  .vitrin-duz .vitrin-alt, .vitrin-duz .vitrin-alt-tek,
  .vitrin-alt { font-size: 13.5px; line-height: 1.5; }
  .vitrin-ara { padding: var(--b2); }
  .vitrin-ara input { min-height: 44px; }
  .vitrin-not { font-size: 11.5px; }

  /* --- CIPLER (14,5px / 40px idi) --- */
  .cipler { gap: var(--b2); }
  .cip {
    padding: var(--b1) var(--b3); min-height: 32px;
    font-size: 12px; line-height: 1.25; border-radius: 999px;
  }
  .serit-etiket { font-size: 10.5px; letter-spacing: .06em; }

  /* --- KATEGORI KARTLARI --- */
  .kkart-gorsel { height: 96px; }
  .kkart-govde  { padding: var(--b2) var(--b3); }
  .kkart-ad     { font-size: 13.5px; line-height: 1.3; }
  .kkart-not    { font-size: 11.5px; }

  /* --- SEKMELER --- */
  .sekme-baslik { padding: 0 var(--b3); }
  .sekme-etiket { padding: var(--b2) var(--b2); min-height: 38px; font-size: 12px; }
  .sekme-bant   { }
  .sekme-bant-gorsel { height: 96px; }
  .sekme-bant-govde  { padding: var(--b3); }
  .sekme-bant-ad     { font-size: 14.5px; }
  .sekme-bant-not    { font-size: 12px; line-height: 1.45; }

  /* --- NASIL CALISIR adimlari --- */
  .adimlar { gap: var(--b3); }
  .adim, .adimlar > li { padding: var(--b3); }
  .adim-ad, .adimlar h3 { font-size: 14px; }
  .adim-not { font-size: 12.5px; line-height: 1.5; }
  .adim-no  { width: 26px; height: 26px; font-size: 12px; }

  /* --- VITRIN KARTLARI (274px idi) --- */
  .vkart-gorsel { height: 118px; }
  .vkart-govde  { padding: var(--b2) var(--b3); }
  .vkart-ad     { font-size: 13px; }
  .vkart-ust    { font-size: 11px; }
  .vkart-fiyat  { padding-top: var(--b2); font-size: 13px; }

  /* --- guven kartlari --- */
  .guven-kart { padding: var(--b3); }
  .guven-ad   { font-size: 13.5px; }
  .guven-not  { font-size: 12px; }
}

/* ── 56. MOBIL: SON OLCEK DUZELTMESI ──────────────────────────────────────
   ⚠️ `.bolum { padding-top: var(--b5) }` tutmadi: `.kap > .bolum + .bolum`
      (0,2,0) daha ozgul. Ayni ozgullukle yaziliyor.
   ⚠️ Dokunma hedefini 40px yapinca FOOTER 795px'e cikti. 36px yeterli
      (WCAG 2.2 AA hedefi 24px; 36px rahat isabet) ve footer kisaliyor. */
@media (max-width: 640px) {
  .bolum, .bolum:first-child,
  .kap > .bolum, .kap > .bolum + .bolum,
  .serit > .kap > .bolum { padding-top: var(--b5); padding-bottom: 0; }
  .serit > .kap > .bolum:first-child { padding-top: var(--b2); }

  /* Footer: baglar 36px, sutun araligi dar */
  .alt-sutun li a, .alt-yasal a, .alt-tumu { min-height: 36px; line-height: 36px; }
  .alt-baslik { font-size: 11px; letter-spacing: .06em; margin-bottom: 0; }
  .alt-marka { font-size: 16px; }
  .alt-ic { gap: var(--b2) var(--b4); }
  .alt-sutun li a { font-size: 12.5px; }

  /* SSS baslik ve satirlari */
  .sss-bolum h2, .yorumlar h2, section > h2 { font-size: 16.5px; }
  .sss summary { font-size: 12.5px; min-height: 40px; padding: var(--b2) var(--b3); }
  .sss .cevap { font-size: 12px; padding: 0 var(--b3) var(--b3); }

  /* Genel: kalan iri basliklar */
  .kahraman h1, .kahraman h2 { font-size: 20px; }
  .deg-davet-ad, .yan-baslik, .paket-ad { font-size: 13.5px; }
  .deg-davet-not, .paket-not { font-size: 12px; }
}

/* ── 57. MOBIL: ALT CUBUK DAHA INCE ───────────────────────────────────────
   Cubuk ekranin altini fazla kapatiyordu. Dugmeler 36px, cubuk dolgusu dar.
   ⚠️ 36px WCAG 2.2 AA'nin 24px hedefinin ustunde; parmakla rahat isabet. */
@media (max-width: 640px) {
  .mobil-cubuk { padding: 6px var(--b3) calc(6px + env(safe-area-inset-bottom)); gap: 6px; }
  .mobil-cubuk .dugme { min-height: 36px; font-size: 12px; padding: 0 var(--b3); }
  .mobil-cubuk .dugme-wa { flex: 0 0 46px; }
  .mobil-cubuk .dugme-wa svg { width: 16px; height: 16px; }
  body { padding-bottom: 50px; }

  /* Yasal satir da sikilassin */
  .alt-kapanis { padding-top: var(--b2); margin-top: var(--b2); }
  .alt-yasal { font-size: 11.5px; gap: var(--b1) var(--b3); }
  .alt-yasal a { min-height: 30px; line-height: 30px; }
  .alt-telif { font-size: 11.5px; }
}

/* ── 58. MOBIL: BOLUM DOLGUSU (kazanan secici) ────────────────────────────
   ⚠️ Ucuncu deneme. `.serit + .kap > .bolum:first-child` (0,3,0) 56px
      veriyordu; benim (0,1,0) ve (0,2,0) kurallarim yetmedi.
      DERS: `getComputedStyle` yetmiyor — hangi KURALIN kazandigini da
      bul (styleSheets uzerinde gezerek), yoksa ucuncu kez yaziyorsun. */
@media (max-width: 640px) {
  .serit + .kap > .bolum:first-child,
  .kap > .bolum:first-child,
  .bolum:first-child { padding-top: var(--b5); }
  .serit + .kap > .bolum, .kap > .bolum { padding-top: var(--b5); }
}

/* ── 59. SAYFALAMA (rehber / blog) ────────────────────────────────────────
   10 yazi/sayfa. 108 rehberin tek listede dizilmesi mobilde okunmuyordu. */
.sayfalama {
  display: flex; align-items: center; justify-content: center;
  gap: var(--b3); margin-top: var(--b6); flex-wrap: wrap;
}
.sayfalama-bag {
  display: inline-flex; align-items: center; min-height: 40px;
  padding: 0 var(--b4); border: 1px solid var(--cizgi-2);
  border-radius: 999px; background: var(--yuzey);
  font: 600 13.5px/1 var(--f-govde); color: var(--marka); text-decoration: none;
}
.sayfalama-bag:hover { background: var(--marka-acik); border-color: var(--marka); }
.sayfalama-no { font: 600 13px/1 var(--f-govde); color: var(--metin-3); }
@media (max-width: 640px) {
  .sayfalama { gap: var(--b2); margin-top: var(--b4); }
  .sayfalama-bag { min-height: 36px; padding: 0 var(--b3); font-size: 12.5px; }
  .sayfalama-no { font-size: 12px; }
}

/* ── 60. MOBIL: ADIMLAR VE FOOTER SIKISTIRMA ─────────────────────────────
   Olculdu: `.adimlar > li` 150px × 3 = 597px · `.alt-sutun` 329px.
   Ikisi de masaustu yerlesimini mobile tasiyordu. */
@media (max-width: 640px) {

  /* --- NASIL CALISIR: numara basligin yaninda, not 2 satir --- */
  .adimlar { gap: var(--b2); }
  .adimlar > li {
    padding: var(--b2) var(--b3);
    display: grid; grid-template-columns: 24px 1fr; gap: 2px var(--b2);
    align-items: start; border-radius: var(--r-sm);
  }
  .adim-no, .adimlar > li > span:first-child {
    grid-row: 1 / span 2; width: 24px; height: 24px;
    font-size: 11px; align-self: center;
  }
  .adim-ad, .adimlar h3 { grid-column: 2; font-size: 13px; margin: 0; }
  .adim-not {
    grid-column: 2; font-size: 12px; line-height: 1.45; margin: 0;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* --- FOOTER: satirlar 30px, yazi 12px --- */
  .alt-sutun li a, .alt-tumu {
    min-height: 30px; line-height: 30px; font-size: 12px;
  }
  .alt-sutun { min-width: 0; }
  .alt-baslik { font-size: 10.5px; margin-bottom: 2px; }
  .alt-marka { font-size: 15px; }
  .alt-not { font-size: 11.5px; line-height: 1.45; }
  .alt-ic { gap: var(--b2) var(--b3); }
  .alt-yasal a { min-height: 26px; line-height: 26px; font-size: 11px; }
  .alt-telif { font-size: 11px; }
}

/* ── 61. MOBIL: BASLIK ALANI SIKISTIRMA ──────────────────────────────────
   Hero mobilde 545px yer kapliyordu — ilk ekranin tamami. Uygulama
   hissinde baslik kisa olur, icerik hemen baslar. */
@media (max-width: 640px) {
  .vitrin-ic { padding-top: var(--b5); padding-bottom: var(--b5); }
  .vitrin-duz .vitrin-ic h1 { font-size: 22px; line-height: 1.2; margin-bottom: var(--b2); }
  .vitrin-duz .bolum-etiket { margin-bottom: var(--b2); }
  .vitrin-duz .vitrin-alt, .vitrin-duz .vitrin-alt-tek {
    font-size: 13px; margin-bottom: var(--b3);
  }
  .vitrin-ara { padding: 6px; margin-bottom: var(--b3); border-radius: var(--r); }
  .vitrin-ara input { min-height: 40px; }
  .vitrin-ara .dugme { min-height: 38px; font-size: 13px; }
  .vitrin-eylem { gap: var(--b2); margin-bottom: var(--b2); }
  .vitrin-eylem .dugme { min-height: 40px; font-size: 13px; }
  .vitrin-eylem .dugme-cam { min-height: 38px; font-size: 12.5px; }
  .vitrin-not { font-size: 11px; margin: 0; }
}

/* ── 62. MOBIL: SSS BASLIGI + FIYAT TABLOSU KART DUZENI ──────────────────
   ⚠️ `section > h2` (0,0,2) yazmistim; `.hizmet-govde h2` (0,1,1) daha
      ozgul — sinif her zaman elemani yener. 22px kaliyordu. */
@media (max-width: 640px) {
  .hizmet-govde h2, .hizmet-govde .metin h2,
  article h2, .yorumlar h2 { font-size: 16.5px; line-height: 1.28; }
  .hizmet-govde h3 { font-size: 14px; }

  /* --- FIYAT TABLOSU: 3-4 sutun 375px'e sigmiyor, KART'a donusuyor ----
     `<table>` yapisi korunur (erisilebilirlik + schema), yalniz gorunum
     degisir. Basliklar `::before` ile satirin icine tasinir. */
  .fiyat-tablo { border: 0; }
  .fiyat-tablo thead { position: absolute; width: 1px; height: 1px;
                       overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .fiyat-tablo caption {
    font-size: 11.5px; line-height: 1.4; padding-bottom: var(--b2);
    text-align: left;
  }
  .fiyat-tablo tbody tr {
    display: block; margin-bottom: var(--b2);
    border: 1px solid var(--cizgi); border-radius: var(--r-sm);
    padding: var(--b2) var(--b3); background: var(--yuzey);
  }
  .fiyat-tablo tbody th {
    display: block; padding: 0 0 var(--b1); border: 0;
    font-size: 13px; font-weight: 700; color: var(--metin); text-align: left;
  }
  .fiyat-tablo tbody td {
    display: flex; justify-content: space-between; gap: var(--b3);
    padding: 3px 0; border: 0; font-size: 12.5px; text-align: right;
  }
  .fiyat-tablo tbody td::before {
    content: attr(data-etiket); font-weight: 600; color: var(--metin-3);
    text-align: left; flex: 0 0 auto;
  }
  .fiyat-tablo tbody td.sayi { text-align: right; }
  .fiyat-tablo tbody td[colspan] { justify-content: flex-start; }
}

/* ── 63. MOBIL: FOOTER SATIR ARASI ───────────────────────────────────────
   Satirlar zaten 35px'ti (li) ama 30px line-height fazla kursiv bosluk
   birakiyordu. 26px'e cekildi; dokunma hedefi hala 26px+ (WCAG 2.2 AA
   hedefi 24px). */
@media (max-width: 640px) {
  .alt-sutun ul { gap: 0; }
  .alt-sutun li a, .alt-tumu { min-height: 26px; line-height: 26px; font-size: 12px; }
  .alt-sutun { margin-bottom: var(--b2); }
  .alt-marka-blok { margin-bottom: var(--b3); }
  .alt-eylem { margin-bottom: var(--b3); }
}

/* ── 64. MOBIL: IC SAYFA BASLIK ALANI ────────────────────────────────────
   Fotografli baslikta etiket, H1, ikonlar, puan rozeti ve alt aciklama
   masaustu olcusundeydi; ilk ekranin tamamini kapliyordu. */
@media (max-width: 640px) {
  .vitrin-ic-sayfa .vitrin-ic { padding-top: var(--b4); padding-bottom: var(--b4); }
  .vitrin-ic-sayfa .bolum-etiket { font-size: 9.5px; letter-spacing: .07em; margin-bottom: var(--b1); }
  .vitrin-ic-sayfa .kahraman-satir h1,
  .vitrin-ic-sayfa h1 { font-size: 19px; line-height: 1.2; }
  .vitrin-ic-sayfa .kirinti { font-size: 11px; margin-bottom: var(--b2); }

  /* ikonlar ve puan rozeti */
  .vitrin-ic-sayfa .ikon-dugme { width: 32px; height: 32px; }
  .vitrin-ic-sayfa .ikon-dugme svg { width: 15px; height: 15px; }
  .vitrin-ic-sayfa .kahraman-eylem { gap: var(--b1); }
  .vitrin-ic-sayfa .kahraman-ikonlar { gap: var(--b1); }
  .kahraman-puan { padding: 2px var(--b2); font-size: 10.5px; gap: var(--b1); }
  .kahraman-puan strong { font-size: 12px; }
  .kahraman-puan-yildiz { font-size: 10px; letter-spacing: 0; }

  /* alt aciklama: 2 satirda kirp */
  .vitrin-ic-sayfa .vitrin-alt {
    font-size: 12px; line-height: 1.45; margin-top: var(--b2);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* cipler bir tik daha kucuk */
  .cip { padding: 3px var(--b2); min-height: 28px; font-size: 11.5px; }
  .cipler { gap: 6px; }
}

/* ── 65. MOBIL: FOOTER SON DUZEN ─────────────────────────────────────────
   Tek yerden, boslugu olmayan sik bir footer. Onceki 45/56/60/63
   bloklarindaki dagitik footer kurallarinin uzerine YAZAR. */
@media (max-width: 640px) {
  .alt { padding-top: var(--b4); padding-bottom: var(--b3); margin-top: var(--b4); }
  .alt-ic { gap: var(--b3) var(--b4); }

  .alt-marka-blok { margin-bottom: var(--b2); }
  .alt-marka { font-size: 14px; margin-bottom: 2px; }
  .alt-not { font-size: 11px; line-height: 1.4; margin: 0 0 var(--b2); }
  .alt-eylem { margin: 0 0 var(--b2); gap: 6px; }
  .alt-eylem .dugme { min-height: 34px; font-size: 11.5px; }

  .alt-sutun { margin: 0; }
  .alt-baslik { font-size: 10px; letter-spacing: .07em; margin: 0 0 2px; }
  .alt-sutun ul { gap: 0; margin: 0; }
  .alt-sutun li { margin: 0; }
  .alt-sutun li a, .alt-tumu {
    min-height: 24px; line-height: 24px; font-size: 11.5px; display: block;
  }
  .alt-tumu { margin-top: 2px; }

  .alt-kapanis { margin-top: var(--b3); padding-top: var(--b2); }
  .alt-telif { font-size: 10.5px; margin: 0 0 var(--b1); }
  .alt-yasal { gap: 2px var(--b3); }
  .alt-yasal a { min-height: 24px; line-height: 24px; font-size: 10.5px; }
}

/* ── 66. ILGILI REHBER/BLOG LISTESI ──────────────────────────────────────
   Hizmet sayfasindan yaziya bag. Ic link derinligini kisaltir: 5. listeleme
   sayfasindaki bir yazi artik hizmet sayfasindan tek tikla erisiliyor. */
.ilgili-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--b2); }
.ilgili-liste a {
  display: flex; align-items: baseline; gap: var(--b3);
  padding: var(--b3); border: 1px solid var(--cizgi); border-radius: var(--r-sm);
  background: var(--yuzey); text-decoration: none; color: var(--metin);
}
.ilgili-liste a:hover { border-color: var(--marka); background: var(--marka-acik); }
.ilgili-tur {
  flex: 0 0 auto; font: 700 10.5px/1 var(--f-govde); letter-spacing: .06em;
  text-transform: uppercase; color: var(--marka); padding: 3px var(--b2);
  border-radius: 999px; background: var(--marka-acik);
}
.ilgili-ad { font-size: 14.5px; line-height: 1.4; }
@media (min-width: 641px) { .ilgili-liste { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) {
  .ilgili-liste a { padding: var(--b2) var(--b3); }
  .ilgili-ad { font-size: 12.5px; }
  .ilgili-tur { font-size: 9.5px; }
}

/* ── 67. MOBIL ALT CUBUK: TEK WHATSAPP DUGMESI ───────────────────────────
   Once iki dugme vardi (mor teklif + kucuk yesil ikon). Cubuk daraliyor,
   iki eylem karar maliyeti yaratiyordu. Tek, tam genislikte WhatsApp. */
@media (max-width: 640px) {
  .mobil-cubuk { padding: 6px var(--b3) calc(6px + env(safe-area-inset-bottom)); }
  .mobil-cubuk .dugme {
    flex: 1 1 auto; width: 100%; min-height: 42px;
    font-size: 13.5px; gap: var(--b2);
  }
  .mobil-cubuk .dugme svg { width: 17px; height: 17px; }
  body { padding-bottom: 56px; }
}

/* ── 68. MOBIL: ADIM KARTLARI BIR KADEME DAHA ────────────────────────────
   60. bolumde 150px → 95px olmustu; hala iri duruyordu. Numara kucultuldu,
   dolgu ve satir araligi sikilastirildi, aciklama 2 satirda kirpik kaldi. */
@media (max-width: 640px) {
  .adimlar { gap: 6px; }
  .adimlar > li {
    padding: 8px 10px;
    grid-template-columns: 20px 1fr; gap: 1px var(--b2);
  }
  .adim-no, .adimlar > li > span:first-child {
    width: 20px; height: 20px; font-size: 10px;
  }
  .adim-ad, .adimlar h3 { font-size: 12px; line-height: 1.25; }
  .adim-not { font-size: 11.5px; line-height: 1.4; }

  /* Alt cubuk dugmesi bir tik daha alcak */
  .mobil-cubuk { padding: 5px var(--b3) calc(5px + env(safe-area-inset-bottom)); }
  .mobil-cubuk .dugme { min-height: 38px; font-size: 12.5px; }
  .mobil-cubuk .dugme svg { width: 15px; height: 15px; }
  body { padding-bottom: 50px; }
}

/* ── 69. ŞEHİR KARTLARI: TEK SATIR, YATAY AKAN ───────────────────────────
   Anasayfada 5×2 izgaraydi ve dikeyde cok yer kapliyordu. Tek satira
   alindi; kalanlara yatay kaydirmayla erisiliyor. Mobil zaten boyleydi
   (45/47. bolumler) — artik masaustunde de ayni davranis.
   ⚠️ `grid-auto-rows: 1fr` (39. bolum) flex'te esnemeyi bozar, sifirlanir. */
.serit .izgara-sehir,
.bolum .izgara-sehir {
  display: flex; grid-auto-rows: auto; gap: var(--b3);
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  padding-bottom: var(--b2);
  /* Kenardan basla, kenarda bit — kart yarim kesilmesin */
  scroll-padding-inline: var(--b4);
}
.serit .izgara-sehir > *,
.bolum .izgara-sehir > * {
  flex: 0 0 216px; scroll-snap-align: start; min-width: 0;
}
/* Dikeyde bir kademe alcak */
.skart, .izgara-sehir .kart { min-height: 0; }
.skart-gorsel, .izgara-sehir .kart img { height: 128px; object-fit: cover; }
.skart-ad { font-size: 16px; }
.skart-not { font-size: 12px; }

/* Ince, sade kaydirma cubugu — serit oldugu belli olsun */
.izgara-sehir::-webkit-scrollbar { height: 6px; }
.izgara-sehir::-webkit-scrollbar-thumb {
  background: var(--cizgi-2); border-radius: 999px;
}
.izgara-sehir::-webkit-scrollbar-track { background: transparent; }

@media (max-width: 640px) {
  .serit .izgara-sehir > *, .bolum .izgara-sehir > * { flex: 0 0 62%; }
  .skart-gorsel, .izgara-sehir .kart img { height: 104px; }
  .skart-ad { font-size: 13.5px; }
  .skart-not { font-size: 11px; }
}

/* ── 70. SERIT OKLARI ────────────────────────────────────────────────────
   Yatay kayan izgaralarin kenarinda gorunur tutamak. Kaydirma zaten
   parmakla calisiyor; ok FARE kullanicisi icin.
   ⚠️ Serit tasmiyorsa `.serit-tam` sinifi gelir ve oklar gizlenir. */
.serit-sarmal { position: relative; }
.serit-ok {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 40px; height: 40px; display: grid; place-items: center;
  border: 1px solid var(--cizgi-2); border-radius: 999px;
  background: var(--zemin); color: var(--metin);
  box-shadow: 0 2px 10px rgb(0 0 0 / .10);
  cursor: pointer; transition: opacity .15s ease, background .15s ease;
}
.serit-ok:hover { background: var(--yuzey-2); }
.serit-ok svg  { width: 18px; height: 18px; }
.serit-ok-sol  { left: -8px; }
.serit-ok-sag  { right: -8px; }
.serit-ok[disabled] { opacity: 0; pointer-events: none; }
.serit-tam .serit-ok { display: none; }
@media (max-width: 640px) { .serit-ok { display: none; } }

/* ── 72. PAKET KARTI: ETIKET GORSELE, FIYAT DENGELENDI ───────────────────
   Uc olculen sorun:
   1. Hizmet adi (.vkart-ust) govdede yer kapliyordu; gorsel uzerine alindi.
   2. Fiyat 17px + altin renk cok baskindi → 15,5px.
   3. "başlangıç" 12,5px `--metin-3` ile soluktu → 12px `--metin-2`,
      600 agirlik. Ayni satirda okunur oldu. */
.vkart-gorsel { position: relative; }

/* Hizmet adi rozeti — gorselin SOL ALTINDA, okunur perde uzerinde */
.vkart-govde > .vkart-ust { display: none; }
.vkart-gorsel::after {
  content: attr(data-hizmet);
  position: absolute; left: 10px; bottom: 10px; right: 10px; z-index: 2;
  font: 700 11px/1.2 var(--f-govde); letter-spacing: .05em;
  text-transform: uppercase; color: #fff;
  text-shadow: 0 1px 4px rgb(0 0 0 / .7);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  pointer-events: none;
}
/* Perde: alt kenari koyulastir ki yazi her fotografta okunsun */
.vkart-gorsel::before {
  content: ''; position: absolute; inset: auto 0 0 0; height: 56%; z-index: 1;
  background: linear-gradient(180deg, transparent, rgb(0 0 0 / .62));
  pointer-events: none;
}

.vkart-fiyat b     { font-size: 15.5px; }
.vkart-fiyat small { font-size: 12px; font-weight: 600; color: var(--metin-2); }

@media (max-width: 640px) {
  .vkart-gorsel::after { font-size: 9.5px; left: 8px; bottom: 8px; right: 8px; }
  .vkart-fiyat b     { font-size: 13.5px; }
  .vkart-fiyat small { font-size: 10.5px; }
}

/* ── 73. KART BAŞLIKLARI TEK SATIR ───────────────────────────────────────
   "Müzik ve Canlı Performans", "Süsleme ve Dekorasyon" gibi uzun adlar
   iki satira tasip kart yuksekliklerini bozuyordu. Tek satir + ellipsis.
   ⚠️ Izgara cocugunda `text-overflow` calismasi icin `min-width: 0`
      sart — yoksa kutu icerik kadar genisler ve kirpma olmaz. */
.kkart, .kkart-govde, .vkart, .vkart-govde,
.skart, .kart { min-width: 0; }

.kkart-ad, .vkart-ad, .skart-ad, .kart-ad {
  display: block;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  -webkit-line-clamp: none;
}
/* Kart ozeti iki satirda kalsin — baslik tek satir olunca yer aciliyor */
.vkart-not, .kkart-not {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; white-space: normal;
}
/* Rehber/blog kartlarinda baslik ZATEN iki satir kirpik — orasi liste,
   tek satira indirmek basligi anlamsizlastirir. Muaf tutuluyor. */
.izgara-rehber .kart-ad {
  display: -webkit-box; white-space: normal;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}

/* ---------------------------------------------------------------- 75
   YAZI KAPAK GORSELI — rehber ve blog
   Icerik gorseli; dekoratif degil, alt metni dolu.
   `aspect-ratio` + `width/height` birlikte CLS'i sifirlar.
------------------------------------------------------------------- */
.yazi-kapak {
  margin: var(--b6) 0;
}
.yazi-kapak img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--r-lg);
  background: var(--yuzey-2);
}
@media (max-width: 780px) {
  .yazi-kapak { margin: var(--b4) calc(var(--b4) * -1); }
  .yazi-kapak img { border-radius: 0; aspect-ratio: 16 / 10; }
}

/* ---------------------------------------------------------------- 76
   HIZMET GALERISI — yatay kaydirmali serit
   3-4 kare oldugu icin masaustunde de izgaraya bolmek yerine serit
   birakildi; `parca/serit-ok.php` ok dugmelerini bu seride de basar.
   ⚠️ Kareler STOK fotograftir; altyazidaki fotografci adi sablonda
      basiliyor ve gizlenmez.
------------------------------------------------------------------- */
.galeri { margin: var(--b7) 0; }
.galeri > h2 { margin-bottom: var(--b2); }
.galeri-not { margin: 0 0 var(--b4); max-width: 62ch; }

.izgara-galeri {
  display: flex;
  gap: var(--b3);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 0 0 var(--b2);
  margin: 0;
  list-style: none;
}
.izgara-galeri::-webkit-scrollbar { display: none; }

.galeri-kare {
  flex: 0 0 320px;
  scroll-snap-align: start;
  min-width: 0;
}
.galeri-kare figure { margin: 0; }
.galeri-kare img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--r);
  background: var(--yuzey-2);
  display: block;
}
.galeri-atif {
  margin-top: 6px;
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--metin-3);
  /* Uzun fotografci adlari kareyi buyutmesin */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 780px) {
  .galeri { margin: var(--b5) 0; }
  .izgara-galeri {
    margin-inline: calc(var(--b4) * -1);
    padding-inline: var(--b4);
  }
  .galeri-kare { flex: 0 0 78%; }
  .galeri-not { font-size: 13px; }
}

/* ---------------------------------------------------------------- 77
   MOBILDE SAYFA BOYU — olculen sorunlar (375px, 2026-09-11)
   /fiyatlar 23.600px · /dj-kiralama 6.000px · /sehirler/istanbul 6.900px
   Amac: "uygulama gibi" — ekran sayisi tek haneli ve tekrar yok.
------------------------------------------------------------------- */
@media (max-width: 640px) {

  /* 1. AYNI VERI IKI KEZ: paket bolumunde hem kart seridi hem fiyat
     tablosu ayni paketleri listeliyordu (kartlar 694px + tablo 349px).
     Mobilde tablo gizlenir; kart seridi zaten yatay kayiyor.
     ⚠️ `display:none` — DOM'da kalir, masaustunde ve taramada gorunur. */
  .paketler > .fiyat-tablo { display: none; }

  /* 2. Paket karti 686px idi (neredeyse tam ekran). Ozellik listesi ve
     fiyat blogundaki bosluklar sikilastirildi; METIN KIRPILMADI —
     bilgi kaybi olmasin. */
  .paket-ozellik { gap: 2px; margin-block: var(--b2); }
  .paket-ozellik li { padding-block: 3px; line-height: 1.42; }
  .paket-gorsel { aspect-ratio: 16 / 9; }
  .paket-fiyat { padding-block: var(--b2); }
  .paket-ozet-satir {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* ── 78. YUZEN WHATSAPP DESTEK — yalniz avatar (2026-09-11) ──────────────
   Kullanici istegi: uzun yazili dugme yok, yalniz ikon. Musteri
   temsilcisini temsilen CIZIM avatar (gercek kisi fotografi degil);
   uzerine gelince "WhatsApp Destek". Mobilde de gorunur ve tam genislik
   alt cubugun yerini alir (numara yoksa alt cubuk /talep ile kalir).
   Eski 71 ve 74 numarali bloklar bu bolumle DEGISTIRILDI. */
.wa-yuzen {
  position: fixed; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  z-index: 55; width: 60px; height: 60px; border-radius: 50%;
  display: block; text-decoration: none;
  box-shadow: 0 8px 24px rgb(0 0 0 / .18), 0 0 0 3px var(--wa);
  transition: transform .18s ease, box-shadow .18s ease;
}
.wa-yuzen:hover, .wa-yuzen:focus-visible {
  transform: translateY(-2px); text-decoration: none;
  box-shadow: 0 12px 28px rgb(0 0 0 / .22), 0 0 0 3px var(--wa);
}
.wa-yuzen-avatar { display: block; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; }
.wa-yuzen-avatar svg { display: block; width: 100%; height: 100%; }
.wa-yuzen-rozet {
  position: absolute; right: -3px; bottom: -3px; width: 24px; height: 24px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--wa); color: #fff; border: 2px solid var(--zemin);
}
.wa-yuzen-rozet svg { width: 13px; height: 13px; fill: currentColor; stroke: none; }
.wa-yuzen-ipucu {
  position: absolute; right: calc(100% + 12px); top: 50%;
  transform: translate(6px, -50%); white-space: nowrap;
  padding: 8px 13px; border-radius: 999px;
  background: var(--metin); color: var(--zemin);
  font: 600 13px/1 var(--f-govde); box-shadow: var(--golge-2);
  opacity: 0; pointer-events: none; transition: opacity .16s ease, transform .16s ease;
}
.wa-yuzen:hover .wa-yuzen-ipucu,
.wa-yuzen:focus-visible .wa-yuzen-ipucu { opacity: 1; transform: translate(0, -50%); }
@media (max-width: 640px) {
  .wa-yuzen { width: 54px; height: 54px; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
  /* Hizmet sayfasindaki hizli eylem cubugunun ustunde dursun */
  body:has(.alt-cubuk) .wa-yuzen { bottom: calc(78px + env(safe-area-inset-bottom, 0px)); }
  /* Alt cubuk yoksa onun icin ayrilan bosluk da kalksin */
  body:not(:has(.mobil-cubuk)):not(:has(.alt-cubuk)) { padding-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) { .wa-yuzen, .wa-yuzen-ipucu { transition: none; } }

/* ── 79. SAG PANEL v2 — teklif kutusu (2026-09-11) ────────────────────────
   Hiyerarsi: fiyat → TEK ana eylem (WhatsApp) → ikincil form → 3 adim →
   dogrulanabilir kapsam rozetleri → kaydet. Once iki ana dugme yarisiyordu. */
.yan-v2 {
  padding: var(--b6) var(--b5) var(--b5);
  background: var(--yuzey); border: 1px solid var(--cizgi);
  border-radius: var(--r-lg); box-shadow: var(--golge-2);
}
.yan-v2 .yan-ust {
  margin: 0 0 6px; font: 700 11.5px/1 var(--f-govde);
  letter-spacing: .08em; text-transform: uppercase; color: var(--marka);
}
.yan-v2 .yan-baslik { font-size: 19px; line-height: 1.25; margin: 0 0 var(--b4); }
.yan-v2 .yan-fiyat {
  gap: 2px; padding: var(--b4); margin-bottom: var(--b4);
  background: linear-gradient(135deg, var(--marka-acik), var(--yuzey-2));
  border: 1px solid color-mix(in srgb, var(--marka) 18%, transparent);
  border-radius: var(--r);
}
.yan-v2 .yan-fiyat-tutar { font-size: 30px; letter-spacing: -.02em; margin: 3px 0 4px; }
.yan-v2 .yan-fiyat-alt { font-size: 12.5px; line-height: 1.45; color: var(--metin-2); }
.yan-v2 .yan-paket-bag {
  display: inline-block; margin: var(--b2) 0 0;
  font-size: 13.5px; font-weight: 700; color: var(--marka);
}
.yan-v2 .yan-ana-eylem { width: 100%; min-height: 50px; margin-top: 0; font-size: 15.5px; font-weight: 700; gap: 8px; }
.yan-v2 .yan-ana-eylem svg { width: 19px; height: 19px; fill: currentColor; stroke: none; }
.yan-v2 .yan-katla > summary { width: 100%; margin-top: var(--b2); cursor: pointer; }
.yan-adim {
  list-style: none; counter-reset: adim;
  margin: var(--b5) 0 0; padding: var(--b4) 0 0;
  border-top: 1px solid var(--cizgi); display: grid; gap: var(--b3);
}
.yan-adim li {
  counter-increment: adim; margin: 0;
  display: grid; grid-template-columns: 26px 1fr; column-gap: var(--b3); align-items: start;
}
.yan-adim li::before {
  content: counter(adim); grid-row: span 2;
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  font: 700 12.5px/1 var(--f-govde); color: var(--marka);
  background: var(--marka-acik); border: 1px solid color-mix(in srgb, var(--marka) 25%, transparent);
}
.yan-adim b { font-size: 14px; line-height: 1.3; color: var(--metin); }
.yan-adim span { font-size: 13px; line-height: 1.45; color: var(--metin-2); }
.yan-guven { list-style: none; margin: var(--b4) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.yan-guven li {
  margin: 0; display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: 999px;
  background: var(--yuzey-2); font-size: 12.5px; color: var(--metin-2);
}
.yan-guven svg { width: 14px; height: 14px; stroke: var(--marka); flex: 0 0 auto; }
.yan-kaydet {
  width: 100%; min-height: 40px; margin-top: var(--b3);
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: none; border: 0; cursor: pointer;
  font: 600 13.5px/1 var(--f-govde); color: var(--metin-3);
}
.yan-kaydet:hover { color: var(--marka); }
.yan-kaydet svg { width: 15px; height: 15px; stroke: currentColor; }
.yan-kaydet[aria-pressed="true"] { color: var(--cta); }
.yan-kaydet[aria-pressed="true"] svg { fill: currentColor; }
@media (max-width: 900px) { .yan-v2 { box-shadow: none; } }
@media (max-width: 640px) {
  .yan-v2 { padding: var(--b4); border-radius: var(--r); }
  .yan-v2 .yan-baslik { font-size: 16px; margin-bottom: var(--b3); }
  .yan-v2 .yan-fiyat-tutar { font-size: 24px; }
  /* Mobilde panel icerigin ALTINDA: kisa tut — adim aciklamasi ve rozetler gizli */
  .yan-adim { gap: var(--b2); margin-top: var(--b4); }
  .yan-adim span, .yan-guven { display: none; }
}

/* ── 80. FOTOĞRAFSIZ KART (2026-09-11) ────────────────────────────────────
   "Ayni fotograf iki yerde olmasin" kurali + nis hizmetlerde Pexels'te yeterli
   ALAKALI kare olmamasi: bazi paket kartlarinin fotografi yok. Gri bosluk yerine
   marka tonunda desenli zemin; beyaz yazi her iki temada koyu zemin uzerinde. */
.vkart-gorsel:not(:has(img)),
.paket-gorsel-bos {
  background:
    radial-gradient(circle at 18% 22%, color-mix(in srgb, var(--vurgu) 28%, transparent) 0 16%, transparent 17%),
    radial-gradient(circle at 86% 78%, color-mix(in srgb, var(--vurgu-2) 26%, transparent) 0 22%, transparent 23%),
    linear-gradient(135deg, var(--vitrin-zemin) 0%, rgb(var(--perde-rgb)) 100%);
}
.paket-gorsel-bos {
  display: grid; place-items: center; aspect-ratio: 16 / 9;
  padding: var(--b4); text-align: center;
}
.paket-gorsel-bos > span {
  color: #fff; font: 700 15px/1.25 var(--f-baslik); letter-spacing: -.01em;
  text-shadow: 0 1px 3px rgb(0 0 0 / .35);
}


/* 81. Yayinda olmayan sehir merkezi karti (2026-09-11) — link degil, tiklanmaz.
   Kural 6: noindex merkeze ic link verilmez; kart gorunur kalir. */
.skart-pasif { cursor: default; }
.skart-pasif:hover { transform: none; box-shadow: none; border-color: var(--cizgi); }

/* 82. Sehir merkezi kategori basligindaki "Tümü" bagi (2026-09-12). */
.sehir-kat-bag { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--marka); text-decoration: none; }
.sehir-kat-bag:hover { text-decoration: underline; }

/* ---------------------------------------------------------------------
   83. FİYAT TABLOSU — okunurluk ve vurgu (2026-09-12)
   Kullanıcı geri bildirimi: "kapsam yazıları okunmuyor", "fiyatlar ayrı
   renk olsun", "paket adları 2 satıra taşmasın".
   - Başlık satırı: marka renginin %8 tonu + marka çizgisi
   - Kapsam sütunu: --metin-2 yerine --metin, 15px, 1.55 satır yüksekliği
   - Fiyat: --altin (jeton zaten "fiyat vurgusu" için tanımlı), 700, tek satır
   - Paket sütunu sabit genişlik: ad iki satıra bölünmesin
   - Şerit ve üzerine gelme: marka renginin %4/%7 tonu (koyu temada da çalışır)
   --------------------------------------------------------------------- */
.fiyat-tablo caption { color: var(--marka); }
.fiyat-tablo thead th {
  background: color-mix(in srgb, var(--marka) 8%, transparent);
  color: var(--metin-2);
  border-bottom: 2px solid color-mix(in srgb, var(--marka) 30%, transparent);
}
.fiyat-tablo tbody th {
  width: 34%; line-height: 1.35; padding-right: var(--b4);
}
.fiyat-tablo tbody td { color: var(--metin); font-size: 15px; line-height: 1.55; }
.fiyat-tablo tbody tr:nth-child(even) th,
.fiyat-tablo tbody tr:nth-child(even) td {
  background: color-mix(in srgb, var(--marka) 4%, transparent);
}
.fiyat-tablo tbody tr:hover th,
.fiyat-tablo tbody tr:hover td {
  background: color-mix(in srgb, var(--marka) 7%, transparent);
}
.fiyat-tablo tbody td.sayi {
  color: var(--altin); font-weight: 700; font-size: 15.5px; white-space: nowrap;
}
@media (max-width: 640px) {
  /* Mobilde tablo kart düzenine geçiyor (bkz. 3075) — sabit genişlik kalkar */
  .fiyat-tablo tbody th { width: auto; padding-right: 0; }
  .fiyat-tablo tbody td.sayi { font-size: 16px; }
  .fiyat-tablo tbody tr:nth-child(even) th,
  .fiyat-tablo tbody tr:nth-child(even) td { background: none; }
}

/* ---------------------------------------------------------------------
   84. ETİKET VE ÇİP DÜĞMELERİ (2026-09-12)
   Kullanıcı: "bu butonlar direk bu renk olabilir, üzerine geldiğimizde
   koyu rengine dönebilir". Varsayılan: marka renginin açık tonu + marka
   yazı. Üzerine gelince: dolu marka zemin.
   Koyu temada --marka açık teal olduğu için dolu haldeki yazı --zemin;
   böylece iki temada da kontrast korunur.
   --------------------------------------------------------------------- */
.etiketler a, .cip {
  border-color: color-mix(in srgb, var(--marka) 35%, transparent);
  background: color-mix(in srgb, var(--marka) 8%, transparent);
  color: var(--marka);
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.etiketler a:hover, .etiketler a:focus-visible,
.cip:hover, .cip:focus-visible {
  background: var(--marka); border-color: var(--marka); color: var(--zemin);
  text-decoration: none;
}
.cip small { color: inherit; opacity: .75; }
/* Pasif çip (sayfası olmayan şehir) marka rengine girmez */
.cip-pasif, .cip-pasif:hover {
  background: var(--yuzey-2); color: var(--metin-2); border-color: transparent;
}

/* ---------------------------------------------------------------------
   85. MOBİL ÖLÇEK DÜZELTMELERİ (2026-09-12, kullanıcı geri bildirimi)
   "WhatsApp butonu çok büyük", "başlangıç fiyatı rakamı da öyle",
   "resim alanını küçült", "paketleri de küçült, boşluklarını al".
   --------------------------------------------------------------------- */
@media (max-width: 640px) {
  /* Sağ teklif paneli */
  .yan-v2 { padding: var(--b4); }
  .yan-v2 .yan-baslik { font-size: 17px; }
  .yan-v2 .yan-fiyat { padding: var(--b3) var(--b4); }
  .yan-v2 .yan-fiyat-tutar { font-size: 22px; margin: 2px 0 3px; }
  .yan-v2 .yan-fiyat-alt { font-size: 12px; }
  .yan-v2 .yan-ana-eylem { min-height: 44px; font-size: 14.5px; }
  .yan-v2 .yan-ana-eylem svg { width: 17px; height: 17px; }

  /* Galeri kareleri ekranın yarısını kaplıyordu */
  .galeri-kare { flex: 0 0 68%; }
  .galeri-kare img { aspect-ratio: 4 / 3; max-height: 200px; }
  .galeri-atif { font-size: 11px; }

  /* Paket kartları: görsel alçaldı, iç boşluklar daraldı */
  .izgara-vitrin > *, .izgara-paket > * { flex: 0 0 72%; }
  .paket-kart > .paket-gorsel { aspect-ratio: 16 / 10; max-height: 150px; }
  .paket-ad { font-size: 16px; padding: var(--b3) var(--b4) 0; }
  .paket-ozet-satir { font-size: 13.5px; padding-inline: var(--b4); margin-top: 4px; }
  .paket-ozellik { padding: 0 var(--b4); gap: 5px; margin-top: var(--b3); }
  .paket-ozellik li { font-size: 13.5px; padding-left: 20px; }
  .paket-fiyat { padding-inline: var(--b4); }
  .paket-fiyat-tutar { font-size: 19px; }
  .paket-eylem { padding: var(--b3) var(--b4) var(--b4); }
  .paket-eylem .dugme { min-height: 42px; font-size: 14.5px; }
}

/* 86. Mobilde çip ve paket fiyat kutusu ölçüsü (2026-09-12 geri bildirimi) */
@media (max-width: 640px) {
  .cip, .cip-pasif { font-size: 13.5px; padding: 6px 12px; min-height: 34px; }
  .cip small { font-size: 11.5px; }
  .etiketler a { font-size: 13.5px; padding: 6px 11px; }

  /* Paket kartındaki fiyat kutusu: rakam ve boşluklar küçüldü */
  .paket-fiyat { margin: 0 var(--b4); padding: var(--b3); gap: 0; }
  .paket-fiyat-etiket { font-size: 10.5px; letter-spacing: .06em; }
  .paket-fiyat-tutar { font-size: 18px; line-height: 1.2; }
  .paket-fiyat-aralik, .paket-kdv { font-size: 11.5px; line-height: 1.35; }
  .paket-kapora { font-size: 11.5px; margin-top: 4px; padding-top: 4px; }
}

/* 87. Mobilde sağ teklif paneli bir kademe daha küçük (2026-09-12)
   Kullanıcı: panel başlığı, fiyat rakamı, WhatsApp düğmesi ve adımlar
   telefonda orantısız duruyordu. */
@media (max-width: 640px) {
  .yan-v2 { padding: 14px; }
  .yan-v2 .yan-ust { font-size: 10.5px; letter-spacing: .07em; }
  .yan-v2 .yan-baslik { font-size: 15.5px; margin-bottom: var(--b3); }
  .yan-v2 .yan-fiyat { padding: 10px 12px; }
  .yan-v2 .yan-fiyat-etiket { font-size: 10px; }
  .yan-v2 .yan-fiyat-tutar { font-size: 20px; margin: 1px 0 2px; }
  .yan-v2 .yan-fiyat-alt { font-size: 11.5px; line-height: 1.4; }
  .yan-v2 .yan-paket-bag { font-size: 12.5px; }
  .yan-v2 .yan-ana-eylem { min-height: 42px; font-size: 14px; }
  .yan-v2 .yan-ana-eylem svg { width: 16px; height: 16px; }
  .yan-v2 .yan-katla > summary { min-height: 38px; font-size: 12.5px; }
  .yan-adim li, .yan-guven li { font-size: 12.5px; }
  .yan-kaydet { font-size: 12.5px; }
}

/* 88. Mobilde adım kutuları yana kayar, kart düğmeleri küçülür (2026-09-12)
   Kullanıcı: "bu kısımda tek kutu olsun sağa sola aksın tek satır",
   "bu butonları da bir tık küçült". Adımlar alt alta 4 kutu olarak
   sayfayı uzatıyordu; artık tek sıra, kaydırmalı ve yapışkan hizalı. */
@media (max-width: 640px) {
  .adimlar {
    display: flex; flex-wrap: nowrap; overflow-x: auto;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    gap: var(--b3); scrollbar-width: none;
    margin-inline: calc(var(--b4) * -1); padding-inline: var(--b4);
  }
  .adimlar::-webkit-scrollbar { display: none; }
  .adimlar > li {
    flex: 0 0 82%; scroll-snap-align: start; min-width: 0;
  }

  /* Paket kartı ve panel düğmeleri sayfayla orantılı */
  .paket-eylem .dugme { min-height: 38px; font-size: 13.5px; }
  .paket-eylem .dugme svg { width: 15px; height: 15px; }
}

/* ---------------------------------------------------------------------
   89. FİYAT TABLOSU KENARLARI, FİYAT RAKAMI VE MOBİL SIKIŞTIRMA
   (2026-09-12, kullanıcı geri bildirimleri — ekran görüntüleriyle)

   1) "tablonun sağı ve solu eksik, beyaz kalmış"
      Satır şeridi ve başlık bandı ilk/son hücrede `padding-inline: 0`
      olduğu için metnin tam kenarında bitiyordu; bant kesilmiş
      görünüyordu. Artık tablo bir KART: kenarlık, köşe yarıçapı ve iç
      dolgu var, şerit kartın iki kenarına da tam oturuyor.
      ⚠️ `border-radius` çalışsın diye `border-collapse: separate`;
         hücre alt çizgileri bu yüzden elle geri veriliyor.

   2) "fiyatlar hâlâ büyük, altındaki yazılar renk açısından okunmuyor"
      Rakam bir kademe küçüldü; altındaki aralık/KDV satırları
      --metin-2'den --metin'e alındı (koyu temada da kontrast artar).

   3) "mobilde işaretlediğim yazıların arası boşluk olmasın"
      Paket özellik listesi sıkıştı, tik işareti marka rengine döndü.

   4) "mobilde bu resimler de küçülsün"  → galeri karesi ve paket görseli.

   5) Yüzen WhatsApp düğmesi metnin üstüne biniyordu: mobilde küçüldü,
      sayfanın altına düğme kadar boşluk eklendi.
   --------------------------------------------------------------------- */

/* --- 1) Tablo kart görünümü --------------------------------------- */
.fiyat-tablo {
  border-collapse: separate; border-spacing: 0;
  border: 1px solid var(--cizgi); border-radius: var(--r);
  overflow: hidden;
}
.fiyat-tablo th:first-child, .fiyat-tablo td:first-child { padding-left: var(--b4); }
.fiyat-tablo th:last-child,  .fiyat-tablo td:last-child  { padding-right: var(--b4); }
/* `separate` moduna geçince çöken alt çizgiler geri veriliyor */
.fiyat-tablo tbody th, .fiyat-tablo tbody td {
  border-bottom: 1px solid var(--cizgi);
}
.fiyat-tablo tbody tr:last-child th,
.fiyat-tablo tbody tr:last-child td { border-bottom: 0; }
.fiyat-tablo caption { padding-left: 2px; }

/* --- 2) Fiyat rakamı ve altındaki satırlar ------------------------ */
.paket-fiyat-tutar { font-size: 20px; }
.yan-v2 .yan-fiyat-tutar { font-size: 26px; }
.paket-fiyat-aralik, .paket-kdv, .yan-v2 .yan-fiyat-alt {
  color: var(--metin); opacity: .82;
}
.paket-fiyat-etiket, .yan-fiyat-etiket { color: var(--metin-2); }

@media (max-width: 640px) {
  /* --- 1b) Mobilde tablo kart düzenine geçiyor: satırların kendisi
         kart olduğu için tablo kabuğu kenarlıksız kalmalı --- */
  .fiyat-tablo { border: 0; border-radius: 0; overflow: visible; }
  .fiyat-tablo tbody th, .fiyat-tablo tbody td { border-bottom: 0; }
  .fiyat-tablo th:first-child, .fiyat-tablo td:first-child,
  .fiyat-tablo th:last-child,  .fiyat-tablo td:last-child { padding-inline: 0; }

  /* --- 2b) Rakam bir kademe daha küçük --- */
  .paket-fiyat-tutar { font-size: 18px; }
  .yan-v2 .yan-fiyat-tutar { font-size: 19px; }
  .paket-fiyat-aralik, .paket-kdv { font-size: 12.5px; line-height: 1.4; }

  /* --- 3) Paket özellik listesi: satır arası kapanır, tik marka rengi --- */
  .paket-ozellik { gap: 1px; margin-block: var(--b2) var(--b3); }
  .paket-ozellik li {
    font-size: 13px; line-height: 1.38; padding-left: 18px;
    color: var(--metin); margin: 0;
  }
  .paket-ozellik li::before {
    left: 1px; top: 5px; width: 8px; height: 5px;
    border-left-color: var(--marka); border-bottom-color: var(--marka);
  }

  /* --- 4) Görseller bir kademe daha küçük --- */
  .galeri-kare { flex: 0 0 58%; }
  .galeri-kare img { aspect-ratio: 4 / 3; max-height: 150px; }
  .paket-kart > .paket-gorsel { aspect-ratio: 16 / 9; max-height: 118px; }

  /* --- 5) Yüzen WhatsApp düğmesi metni kapatmasın --- */
  .wa-yuzen { width: 46px; height: 46px; right: 10px; }
  .wa-yuzen-rozet { width: 17px; height: 17px; }
  body { padding-bottom: 64px; }
  body:has(.alt-cubuk) { padding-bottom: 0; }
}

/* ---------------------------------------------------------------------
   90. GRİ KÜÇÜK YAZILARIN OKUNURLUĞU + ÇİP DÜĞMELERİ + YAN PANEL ALTI
   (2026-09-12, kullanıcı: "bu tarz gri yazılar buton rengi gibi olsun,
    gri olmasın — hem masaüstü hem mobil", "yanlarındaki sayı gri okunmuyor",
    "mobilde burayı topla, sola dayalı olsun")

   ⚠️ FONT DEĞİŞMEDİ ve değişmemeli: gövde/başlık zaten Plus Jakarta Sans,
      marka Fraunces — ikisi de kendi sunucumuzdan yükleniyor ve canlıda
      yüklü olduğu ölçüldü (document.fonts: "loaded"). Sorun yazı tipi
      değil KONTRASTTI; onu düzeltiyoruz.

   1) --metin-3 jetonu üç temada da koyulaştı. Bu jeton 12–13px etiketlerde
      kullanılıyor; küçük punto düşük kontrastta okunmuyordu.
   2) Fiyat etiketi ("BAŞLANGIÇ FİYATI") ve altındaki satır marka rengine /
      tam metin rengine alındı.
   3) Kategori çipleri (/hizmetler) marka rengini aldı, bir tık küçüldü;
      yanlarındaki sayı artık gri değil.
   4) Yan panelin altı (adımlar + Kaydet) mobilde toplandı ve sola dayandı.
   --------------------------------------------------------------------- */

/* --- 1) Jeton kontrastı ------------------------------------------- */
/* ⚠️ Bu projede acik/koyu ekseni YALNIZ prefers-color-scheme; `data-tema`
   marka paleti (deniz/mor). Koyu blok, ozgun tanimdan SONRA ve ayni
   ozgullukte yazilmali — yoksa kazanamaz (2026-09-11'de yasandi). */
:root { --metin-3: #4b4857; }                      /* beyazda 9.1:1 */
@media (prefers-color-scheme: dark) {
  :root, :root[data-tema="deniz"] { --metin-3: #a9bbbe; }   /* yuzeyde 8.1:1 */
  :root[data-tema="mor"]          { --metin-3: #a8a4b3; }
}

/* --- 2) Fiyat etiketi ve alt satır -------------------------------- */
.paket-fiyat-etiket, .yan-fiyat-etiket {
  color: var(--marka); font-weight: 700; letter-spacing: .07em;
}
/* ⚠️ `.yan-v2 .yan-fiyat-alt` (0,2,0) bu kurali yeniyordu: sinif zincirini
   esitlemeden renk degismiyor. Olculdu: rgb(179,194,196) kaliyordu. */
.yan-v2 .yan-fiyat-alt, .paket-fiyat-aralik, .paket-kdv {
  color: var(--metin); opacity: .9;
}

/* --- 3) Kategori çipleri: marka rengi, sayı okunur ----------------- */
.dizin-gezinme a {
  border-color: color-mix(in srgb, var(--marka) 35%, transparent);
  background: color-mix(in srgb, var(--marka) 8%, transparent);
  color: var(--marka); font-weight: 600;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.dizin-gezinme a:hover, .dizin-gezinme a:focus-visible {
  background: var(--marka); border-color: var(--marka); color: var(--zemin);
}
.dizin-gezinme span { color: inherit; opacity: .8; font-weight: 600; }

/* --- 4) Kaydet düğmesi gri kalmasın ------------------------------- */
.yan-kaydet { color: var(--marka); }

@media (max-width: 640px) {
  /* Çipler bir tık küçük; 3 satırdan sonrası "Tümünü göster" ile açılır
     (mobil-daha.php içindeki SECICI listesine .dizin-gezinme eklendi). */
  .dizin-gezinme { gap: 6px; }
  .dizin-gezinme a {
    padding: 6px 11px; min-height: 32px; font-size: 13px; gap: 4px;
  }
  .dizin-gezinme span { font-size: 11.5px; }

  /* Yan panelin altı: adımlar sıkışır, Kaydet sola dayanır ve satır
     yüksekliği düşer — altta kalan büyük boşluk kalkar. */
  .yan-v2 .yan-adim { gap: 6px; margin-block: var(--b2); }
  .yan-v2 .yan-adim li { gap: 8px; }
  .yan-v2 .yan-guven { gap: 4px; margin-block: var(--b2); }
  .yan-kaydet {
    width: auto; min-height: 32px; margin-top: var(--b2);
    justify-content: flex-start; font-size: 13px;
  }
  .yan-kaydet svg { width: 14px; height: 14px; }
}

/* ---------------------------------------------------------------------
   91. DOKUNMA HEDEFİ VE MOBİL OKUNURLUK (2026-09-12)
   Kaynak: dış derin SEO/mobil denetimi + 320 px canlı ölçüm.

   ÖLÇÜLEN (320×568, 8 şablon):
     · yatay taşma  : 0  (8/8 şablon temiz — korunuyor)
     · H1 sayısı    : 1  (8/8 — korunuyor)
     · dokunma hedefi < 44 px : /fiyatlar 77, /sehirler/istanbul 60,
       /hizmetler 44, /360-video-booth 42 kontrol
     · ana gövde paragrafı 13 px / 20,5 px satır yüksekliği

   YAKLAŞIM — GÖRSEL ÖLÇÜ DEĞİŞMİYOR.
   Kullanıcı bu oturumda çip ve düğmeleri bilerek küçülttü. Bunları geri
   büyütmek isteğini bozardı. Bunun yerine web.dev'in önerdiği yol:
   görünen kutu aynı kalır, GERÇEK dokunma alanı görünmez bir ::after ile
   44 px'e çıkar. Yan yana hedeflerde çakışmayı önlemek için yalnız aradaki
   boşluk büyütülür (32+12=44, 34+10=44).

   ⚠️ ::after yatayda DEĞİL yalnız dikeyde büyür. Yatayda büyütmek, yanındaki
      başlığın üstüne binip yanlış tıklama üretiyordu. Tek istisna ikon
      düğmeler: onlarda metin yok, iki eksende de büyütülür.
   --------------------------------------------------------------------- */

:root { --dokun: 44px; }

@media (max-width: 900px) {
  /* --- 1) Tek başına duran blok düğmeler: doğrudan yükselir --------- */
  .daha-dugme, .katla-dugme { min-height: var(--dokun); }

  /* --- 2) Görsel ölçü sabit, dokunma alanı büyür ------------------- */
  .cip, .dizin-gezinme a, .etiketler a, .bolum-bag, .sehir-kat-bag,
  .ust-bag, .dugme, .yan-kaydet, .yan-paket-bag, .alt-cubuk a {
    position: relative;
  }
  .cip::after, .dizin-gezinme a::after, .etiketler a::after,
  .bolum-bag::after, .sehir-kat-bag::after, .ust-bag::after,
  .dugme::after, .yan-kaydet::after, .yan-paket-bag::after,
  .alt-cubuk a::after {
    content: ''; position: absolute; left: 0; right: 0; top: 50%;
    height: var(--dokun); transform: translateY(-50%);
  }

  /* İkon düğmede metin yok: iki eksende de büyür */
  .ikon-dugme { position: relative; }
  .ikon-dugme::after {
    content: ''; position: absolute; left: 50%; top: 50%;
    width: var(--dokun); height: var(--dokun);
    transform: translate(-50%, -50%);
  }

  /* --- 3) Komşu hedefler çakışmasın: boşluk = 44 − görünen yükseklik */
  .cipler { gap: 10px; }                 /* çip 34 + 10 = 44 */
  .dizin-gezinme { gap: 12px; }          /* çip 32 + 12 = 44 */
  .kahraman-ikonlar { gap: 12px; }       /* ikon 32 + 12 = 44 */
}

/* ---------------------------------------------------------------------
   Ana okuma metni. 13 px gövde, mobilde okunabilirlik riski (denetim).
   16 px / 1,6 web.dev'in önerdiği taban. Sayfa boyu bu yüzden uzamıyor:
   uzun bloklar zaten 3 satırda katlanıp "Tümünü göster" veriyor (CSS 88,
   mobil-daha.php). Etiket, altyazı ve yardımcı metinler küçük kalır —
   onlar okuma metni değil.
   --------------------------------------------------------------------- */
@media (max-width: 640px) {
  .metin p, .metin li, .metin-blok p, .metin-blok li,
  .hizmet-govde > p, article > p, .katla-govde p, .katla-govde li {
    font-size: 16px; line-height: 1.6;
  }
  .sss p, .sss li { font-size: 15.5px; line-height: 1.6; }
}

/* ---------------------------------------------------------------------
   92. KALAN DOKUNMA HEDEFLERİ (2026-09-12, 320 px ölçümünün ikinci turu)
   CSS 91'den sonra kalanlar: üstbilgi kontrolleri, kırıntı bağları ve
   /fiyatlar endeks tablosundaki satır bağları (ölçülen: 16 px ve 25 px).
   --------------------------------------------------------------------- */
@media (max-width: 900px) {
  .marka, .ust-konum, .ust-ikon, .atla, .kirinti a { position: relative; }
  .marka::after, .ust-konum::after, .ust-ikon::after,
  .atla::after, .kirinti a::after {
    content: ''; position: absolute; left: 0; right: 0; top: 50%;
    height: var(--dokun); transform: translateY(-50%);
  }
  /* Endeks tablosu mobilde karta dönüşüyor; hücreler alt alta olduğu için
     bağların yüksekliğini doğrudan büyütmek çakışma üretmez. */
  .endeks-tablo tbody th a, .endeks-tablo tbody td a {
    display: flex; align-items: center; min-height: var(--dokun);
  }
}

/* 93. Son kalan dokunma hedefleri (2026-09-12, üçüncü ölçüm turu).
   SSS başlıkları 40 px'te kalıyordu; sayfalama, puan rozeti, "Fiyat detayı"
   bağı ve onay kutusu yanındaki KVKK bağı 17–36 px idi. */
@media (max-width: 900px) {
  .sss summary { min-height: var(--dokun); }
  .sayfalama-bag, .kahraman-puan, .paket-fiyat-bag,
  .yan-onay a, .alan label a { position: relative; }
  .sayfalama-bag::after, .kahraman-puan::after, .paket-fiyat-bag::after,
  .yan-onay a::after, .alan label a::after {
    content: ''; position: absolute; left: 0; right: 0; top: 50%;
    height: var(--dokun); transform: translateY(-50%);
  }
}

/* ---------------------------------------------------------------------
   94. ÜSTBİLGİ 641–860 px ARASINDA TAŞIYORDU (2026-09-12)

   🔴 GERÇEK HATA. Ölçüm (8 şablon, 768 px): `document.scrollWidth` 817,
   viewport 768 → sayfa yatayda 49 px kayıyordu. Neden: `.ust-ic`
   `flex-wrap: wrap` yalnız ≤640 px'te tanımlıydı; 641 px'ten itibaren
   `nowrap`a dönüyor ama satırın ihtiyacı ~817 px. Yani tablet dikey (768)
   ve küçük dizüstü bandının tamamı kırıktı. 320–640 ve ≥900 temiz olduğu
   için önceki turlarda görünmemişti.

   ÇÖZÜM: sarma davranışı bir breakpoint'e bağlanmıyor. Satır sığıyorsa
   tek satır kalır, sığmıyorsa sarar — her genişlikte kendi kendini düzeltir.
   Bu, aynı hatanın yeni bir breakpoint'te tekrar doğmasını da engeller.
   --------------------------------------------------------------------- */
.ust-ic { flex-wrap: wrap; }
@media (min-width: 641px) and (max-width: 900px) {
  .ust-ic { row-gap: var(--b2); padding-block: var(--b2); min-height: 0; }
}

/* 95. Dokunma hedefi kuralı genişliğe değil GİRDİ TÜRÜNE de baksın.
   Tablet yatay (1024 px) dokunmatiktir ama CSS 91–93 yalnız ≤900 px'te
   çalışıyordu; 1024'te 153 hedef 44 px altında ölçüldü. `pointer: coarse`
   ile fare kullanıcısı kompakt arayüzü görmeye devam eder. */
@media (pointer: coarse) {
  .daha-dugme, .katla-dugme, .sss summary { min-height: var(--dokun); }
  .cip, .dizin-gezinme a, .etiketler a, .bolum-bag, .sehir-kat-bag,
  .ust-bag, .dugme, .yan-kaydet, .yan-paket-bag, .alt-cubuk a,
  .marka, .ust-konum, .ust-ikon, .atla, .kirinti a,
  .sayfalama-bag, .kahraman-puan, .paket-fiyat-bag,
  .yan-onay a, .alan label a { position: relative; }
  .cip::after, .dizin-gezinme a::after, .etiketler a::after,
  .bolum-bag::after, .sehir-kat-bag::after, .ust-bag::after,
  .dugme::after, .yan-kaydet::after, .yan-paket-bag::after,
  .alt-cubuk a::after, .marka::after, .ust-konum::after, .ust-ikon::after,
  .atla::after, .kirinti a::after, .sayfalama-bag::after,
  .kahraman-puan::after, .paket-fiyat-bag::after,
  .yan-onay a::after, .alan label a::after {
    content: ''; position: absolute; left: 0; right: 0; top: 50%;
    height: var(--dokun); transform: translateY(-50%);
  }
  .ikon-dugme { position: relative; }
  .ikon-dugme::after {
    content: ''; position: absolute; left: 50%; top: 50%;
    width: var(--dokun); height: var(--dokun); transform: translate(-50%, -50%);
  }
  .cipler { gap: 10px; }
  .dizin-gezinme { gap: 12px; }
  .kahraman-ikonlar { gap: 12px; }
  .endeks-tablo tbody th a, .endeks-tablo tbody td a {
    display: flex; align-items: center; min-height: var(--dokun);
  }
}

/* 96. GÖRSEL KREDİSİ (2026-09-13) — açık lisanslı arşivler
   CC-BY / CC-BY-SA kareler yapanın adını ve lisansı GÖRÜNÜR kılmak zorunda.
   Pexels ve CC0/kamu malı karelerde bu satır hiç basılmaz, tasarım değişmez. */
.gorsel-kredi {
  display: block; font-size: 11px; line-height: 1.35;
  color: var(--metin-3); margin-top: 3px;
}
.gorsel-kredi a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.gorsel-kredi-kart { padding: 4px var(--b5) 0; }
@media (max-width: 640px) { .gorsel-kredi-kart { padding-inline: var(--b4); } }

/* 97. Fotoğrafsız paket kutusu — 6 ton varyantı (2026-09-13)
   Bir hizmetin bütün paketleri aynı gradyanı gösterince kart dizisi tek bir
   bozuk blok gibi duruyordu. Varyant paket id'sinden gelir: aynı sayfadaki
   kutular farklı, aynı paket her zaman aynı tonu alır (rastgele değil). */
.paket-gorsel-bos.bos-1 { filter: hue-rotate(28deg); }
.paket-gorsel-bos.bos-2 { filter: hue-rotate(-24deg) saturate(1.08); }
.paket-gorsel-bos.bos-3 { filter: hue-rotate(56deg) brightness(1.04); }
.paket-gorsel-bos.bos-4 { filter: hue-rotate(-48deg); }
.paket-gorsel-bos.bos-5 { filter: hue-rotate(14deg) saturate(.92) brightness(.96); }

/* =====================================================================
   98–108. ARAYÜZ YENİLEME (2026-09-13) — kullanıcının 14 maddelik notu
   Ortak dil: iki yazı ağırlığı (600/700), dört yazı kademesi
   (12 · 13.5 · 15.5 · 18+), tek ana eylem, sakin ikincil öğeler.
   Yeni bileşenler YENİ sınıf adı taşır (vk2, kk2, yan-v3, kapanis2, akis,
   neden, hsekme); böylece dosyadaki eski ezme zincirlerine takılmazlar.
   ===================================================================== */

/* ---------------------------------------------------------------------
   98. VİTRİN KARTI v2 — ana sayfa, şehir sayfası, keşfet sekmeleri
   Tek etiket görselde, hizmet adı kartın üstünde, başlık iki satıra kadar,
   fiyat sağa hizalı, kalp ikonu görselin sağ üstünde.
   --------------------------------------------------------------------- */
.vk2 {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: 14px;
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.vk2:hover {
  border-color: var(--cizgi-2); transform: translateY(-2px);
  box-shadow: 0 14px 30px -18px rgb(0 0 0 / .32);
}
.vk2-gorsel { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--yuzey-2); }
.vk2-gorsel img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.vk2:hover .vk2-gorsel img { transform: scale(1.035); }
.vk2-bos {
  display: grid; place-items: center; height: 100%; padding: 16px; text-align: center;
  font: 600 14px/1.3 var(--f-baslik); color: var(--metin-2);
  background: linear-gradient(140deg, color-mix(in srgb, var(--marka) 22%, var(--yuzey)), var(--yuzey-2));
}
.vk2-rozet {
  position: absolute; top: 10px; left: 10px; z-index: 2; pointer-events: none;
  padding: 4px 9px; border-radius: 6px;
  background: rgb(255 255 255 / .95); color: #16181d;
  font: 600 11.5px/1.25 var(--f-govde);
}
.vk2-kaydet {
  position: absolute; top: 8px; right: 8px; z-index: 3;
  width: 36px; height: 36px; display: grid; place-items: center;
  border: 0; border-radius: 50%; cursor: pointer;
  background: rgb(255 255 255 / .95); color: #16181d;
  box-shadow: 0 1px 4px rgb(0 0 0 / .2);
  transition: transform .15s ease, color .15s ease;
}
.vk2-kaydet svg { width: 18px; height: 18px; }
.vk2-kaydet:hover { transform: scale(1.07); }
.vk2-kaydet[aria-pressed="true"] { color: #e11d48; }
.vk2-kaydet[aria-pressed="true"] svg { fill: currentColor; }
.vk2-kaydet:focus-visible { outline: 2px solid var(--marka); outline-offset: 2px; }

.vk2-govde { display: flex; flex-direction: column; flex: 1; gap: 4px; padding: 14px 16px 16px; }
.vk2-ust {
  margin: 0; font: 600 11.5px/1.3 var(--f-govde); letter-spacing: .04em;
  text-transform: uppercase; color: var(--marka);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vk2-ad {
  margin: 0; font: 700 16.5px/1.3 var(--f-baslik); letter-spacing: -.01em; color: var(--metin);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.vk2-bag, .vk2-bag:hover { color: inherit; text-decoration: none; }
.vk2-bag::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.vk2-bag:focus-visible { outline: none; }
.vk2:has(.vk2-bag:focus-visible) { outline: 2px solid var(--marka); outline-offset: 2px; }
.vk2-not {
  margin: 2px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--metin-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.vk2-alt { margin-top: auto; padding-top: 12px; display: flex; justify-content: flex-end; }
.vk2-fiyat { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; }
.vk2-fiyat small { font-size: 11.5px; color: var(--metin-2); margin-bottom: 3px; }
.vk2-fiyat b { font: 700 18px/1.1 var(--f-baslik); letter-spacing: -.01em; color: var(--metin); }
.vk2-fiyat b.vk2-teklif { font-size: 15.5px; color: var(--marka); }

@media (max-width: 640px) {
  .vk2 { border-radius: 12px; }
  .vk2-govde { padding: 10px 12px 12px; gap: 3px; }
  .vk2-ust { font-size: 10.5px; }
  .vk2-ad { font-size: 14.5px; }
  .vk2-not { font-size: 12.5px; line-height: 1.45; }
  .vk2-alt { padding-top: 8px; }
  .vk2-fiyat small { font-size: 10.5px; }
  .vk2-fiyat b { font-size: 15.5px; }
  .vk2-fiyat b.vk2-teklif { font-size: 14px; }
  .vk2-kaydet { width: 32px; height: 32px; top: 6px; right: 6px; }
  .vk2-kaydet svg { width: 16px; height: 16px; }
  .vk2-rozet { top: 8px; left: 8px; font-size: 10.5px; padding: 3px 7px; }
}

/* ---------------------------------------------------------------------
   99. KATEGORİ KARTI v2 — başlık kesilmez (iki satıra kadar), "N hizmet →"
   --------------------------------------------------------------------- */
.kk2 .kkart-gorsel { aspect-ratio: 4 / 3; }
.kk2-govde { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 14px; }
.kk2-ad {
  font: 700 15.5px/1.3 var(--f-baslik); letter-spacing: -.01em; color: var(--metin);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: 2.6em;
}
.kk2-not { display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: var(--metin-2); }
.kk2-ok { color: var(--marka); font-weight: 700; transition: transform .2s ease; }
.kk2:hover .kk2-ok { transform: translateX(3px); }
@media (max-width: 640px) {
  .kk2-govde { padding: 9px 11px 11px; }
  .kk2-ad { font-size: 13.5px; }
  .kk2-not { font-size: 12px; }
}

/* ---------------------------------------------------------------------
   100. NASIL ÇALIŞIR — kutu değil, numaraları birbirine bağlı akış
   --------------------------------------------------------------------- */
.akis {
  list-style: none; margin: 0; padding: 0; position: relative;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px;
}
.akis::before {
  content: ''; position: absolute; top: 20px; left: 20px; right: 20px; height: 2px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--marka) 60%, transparent),
    color-mix(in srgb, var(--marka) 10%, transparent));
}
.akis-adim { position: relative; margin: 0; padding: 0; }
.akis-no {
  position: relative; z-index: 1; display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--marka); color: var(--zemin);
  font: 700 16px/1 var(--f-baslik);
}
.akis-ad { margin: 18px 0 6px; font: 700 17px/1.3 var(--f-baslik); letter-spacing: -.01em; color: var(--metin); }
.akis-not { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--metin-2); max-width: 34ch; }
@media (max-width: 900px) {
  .akis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 24px; }
  .akis::before { display: none; }
}
/* Mobil: kullanıcının daha önce istediği gibi tek sıra, yana kayar */
@media (max-width: 640px) {
  .akis {
    display: flex; overflow-x: auto; gap: 12px; scroll-snap-type: x mandatory;
    scrollbar-width: none; margin-inline: calc(var(--b4) * -1); padding: 2px var(--b4) 4px;
  }
  .akis::-webkit-scrollbar { display: none; }
  .akis-adim {
    flex: 0 0 76%; scroll-snap-align: start;
    padding: 14px; border: 1px solid var(--cizgi); border-radius: 12px; background: var(--yuzey);
  }
  .akis-no { width: 30px; height: 30px; font-size: 13.5px; }
  .akis-ad { margin: 10px 0 4px; font-size: 14.5px; }
  .akis-not { font-size: 13px; line-height: 1.5; max-width: none; }
}

/* ---------------------------------------------------------------------
   101. NEDEN SAHNEGO — gerçek bölüm başlığı + ikonlu vaatler
   --------------------------------------------------------------------- */
.neden-serit {
  padding: 60px 0; margin-top: 8px;
  background: var(--yuzey); border-block: 1px solid var(--cizgi);
}
.neden { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); gap: 56px; align-items: start; }
.neden-etiket {
  margin: 0 0 10px; font: 700 12px/1 var(--f-govde); letter-spacing: .08em;
  text-transform: uppercase; color: var(--marka);
}
.neden-bas h2 { margin: 0 0 12px; font-size: clamp(23px, 2.5vw, 31px); line-height: 1.2; letter-spacing: -.02em; }
.neden-bas p { margin: 0; font-size: 15.5px; line-height: 1.65; color: var(--metin-2); max-width: 38ch; }
.neden-liste {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 36px;
}
.neden-liste li { margin: 0; display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; }
.neden-ikon {
  width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  background: var(--marka-acik); color: var(--marka);
}
.neden-ikon svg { width: 22px; height: 22px; }
.neden-liste h3 { margin: 2px 0 5px; font: 700 16px/1.3 var(--f-baslik); color: var(--metin); }
.neden-liste p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--metin-2); }
@media (max-width: 900px) { .neden { grid-template-columns: 1fr; gap: 30px; } }
@media (max-width: 640px) {
  .neden-serit { padding: 36px 0; }
  .neden-bas h2 { font-size: 20px; }
  .neden-bas p { font-size: 14px; }
  .neden-liste { grid-template-columns: 1fr; gap: 16px; }
  .neden-liste li { grid-template-columns: 36px 1fr; gap: 12px; }
  .neden-ikon { width: 36px; height: 36px; border-radius: 10px; }
  .neden-ikon svg { width: 18px; height: 18px; }
  .neden-liste h3 { font-size: 14.5px; margin: 1px 0 3px; }
  .neden-liste p { font-size: 13px; }
}

/* ---------------------------------------------------------------------
   102. ANA SAYFA ŞEHİR ŞERİDİ — kartlar yükseldi, kaydırma çubuğu gizli,
   iki ok da görünür (uçtaki ok soluklaşır).
   ⚠️ Eski kural `.skart-gorsel { position:absolute; inset:0 }` + `height:128px`
      kartın kendisini yalnız metin kadar (≈80px) bırakıyordu. Yükseklik artık
      kartın `min-height`inden gelir; görsel kartı kaplar.
   --------------------------------------------------------------------- */
.sehir-serit .izgara-sehir { scrollbar-width: none; padding-bottom: 0; }
.sehir-serit .izgara-sehir::-webkit-scrollbar { display: none; }
.sehir-serit .izgara-sehir > * { flex: 0 0 240px; }
.sehir-serit .skart { min-height: 220px; border-radius: 14px; overflow: hidden; }
.sehir-serit .skart-gorsel { height: auto; inset: 0; }
.sehir-serit .skart-govde { padding: 16px; }
.sehir-serit .skart-ad { font-size: 19px; }
.sehir-serit .skart-not { font-size: 13px; }
.serit-ok[disabled] { opacity: .35; pointer-events: none; }
@media (max-width: 640px) {
  .sehir-serit .izgara-sehir > * { flex-basis: 62%; }
  .sehir-serit .skart { min-height: 170px; }
  .sehir-serit .skart-ad { font-size: 16px; }
  .sehir-serit .skart-not { font-size: 12px; }
}

/* ---------------------------------------------------------------------
   103. ŞEHİRLER SAYFASI — tam ızgara, satırda 6 kart (yatay şerit değil)
   --------------------------------------------------------------------- */
.izgara-sehir-tam { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.izgara-sehir-tam .skart { min-height: 150px; border-radius: 12px; overflow: hidden; }
.izgara-sehir-tam .skart-gorsel { height: auto; inset: 0; }
.izgara-sehir-tam .skart-govde { padding: 12px; }
.izgara-sehir-tam .skart-ad { font-size: 15px; white-space: normal; }
.izgara-sehir-tam .skart-not { font-size: 11.5px; }
/* Pasif kart: gri filtre kaldirildi — sisli/soluk sehir fotograflarinda kart bos gibi duruyordu. Ayrim "Talep üzerine" yazisiyla. */
.izgara-sehir-tam .skart-pasif .skart-not { opacity: .85; }
@media (max-width: 1100px) { .izgara-sehir-tam { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 780px)  { .izgara-sehir-tam { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px)  {
  .izgara-sehir-tam { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .izgara-sehir-tam .skart { min-height: 116px; }
  .izgara-sehir-tam .skart-govde { padding: 10px; }
  .izgara-sehir-tam .skart-ad { font-size: 13.5px; }
  .izgara-sehir-tam .skart-not { font-size: 10.5px; }
}

/* ---------------------------------------------------------------------
   104. SAYFA SONU TEKLİF KARTI — tek ana düğme, sayfaya oturan kart
   --------------------------------------------------------------------- */
.kapanis2 { margin: 56px 0 8px; }
.kapanis2-kart {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 18px 32px; padding: 28px 32px; border-radius: 18px;
  background: linear-gradient(135deg, var(--marka-acik), var(--yuzey));
  border: 1px solid color-mix(in srgb, var(--marka) 20%, transparent);
}
.kapanis2-metin h2 { margin: 0 0 4px; font-size: clamp(19px, 2vw, 24px); letter-spacing: -.01em; }
.kapanis2-metin p { margin: 0; font-size: 14.5px; color: var(--metin-2); }
.kapanis2-eylem { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
.kapanis2-eylem .dugme { min-height: 44px; padding: 10px 20px; font-size: 14.5px; }
.kapanis2-bag { font-size: 14px; font-weight: 600; color: var(--marka); white-space: nowrap; }
.kapanis2-bag:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 640px) {
  .kapanis2 { margin: 32px 0 4px; }
  .kapanis2-kart { padding: 18px; gap: 14px; border-radius: 14px; }
  .kapanis2-metin h2 { font-size: 17px; }
  .kapanis2-metin p { font-size: 13.5px; }
  .kapanis2-eylem { width: 100%; justify-content: space-between; }
  .kapanis2-eylem .dugme { min-height: 40px; padding: 8px 16px; font-size: 14px; }
}
@media print { .kapanis2 { display: none; } }

/* ---------------------------------------------------------------------
   105. HİZMET SAYFASI SEKME MENÜSÜ — sade, ince, yapışkan
   `--ust-yuk` üst bilginin gerçek yüksekliği; betik ölçüp yazar
   (mobilde üst bilgi iki satır olabiliyor).
   --------------------------------------------------------------------- */
:root { --ust-yuk: 67px; --sekme-yuk: 49px; }
.hsekme {
  position: sticky; top: var(--ust-yuk); z-index: 20; margin: 0 0 8px;
  background: color-mix(in srgb, var(--zemin) 94%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(8px); backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--cizgi);
}
.hsekme ul {
  list-style: none; margin: 0; padding: 0; display: flex; gap: 2px;
  overflow-x: auto; scrollbar-width: none;
}
.hsekme ul::-webkit-scrollbar { display: none; }
.hsekme li { margin: 0; flex: 0 0 auto; }
.hsekme a {
  position: relative; display: flex; align-items: center; min-height: 48px; padding: 0 14px;
  font: 600 14.5px/1 var(--f-govde); color: var(--metin-2); text-decoration: none; white-space: nowrap;
  transition: color .15s ease;
}
.hsekme a:hover { color: var(--metin); text-decoration: none; }
.hsekme a[aria-current="true"] { color: var(--metin); }
.hsekme a[aria-current="true"]::before {
  content: ''; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 2px;
  border-radius: 2px; background: var(--marka);
}
.hizmet-govde [id] { scroll-margin-top: calc(var(--ust-yuk) + var(--sekme-yuk) + 12px); }
.metin-genel, .metin-teklif { padding-top: 12px; }
.fiyatlar-bolum { margin-top: 32px; }
@media (max-width: 640px) {
  .hsekme { margin-inline: calc(var(--b4) * -1); padding-inline: 4px; }
  .hsekme a { min-height: 44px; padding: 0 11px; font-size: 13.5px; }
  .hsekme a[aria-current="true"]::before { left: 11px; right: 11px; }
}

/* ---------------------------------------------------------------------
   106. TEKLİF PANELİ v3 — üç kademe: başlık+fiyat · tek ana eylem · güvence
   --------------------------------------------------------------------- */
.yan-kutu.yan-v3 {
  padding: 22px 20px 18px; background: var(--yuzey);
  border: 1px solid var(--cizgi); border-radius: 16px;
  box-shadow: 0 14px 34px -22px rgb(0 0 0 / .3);
}
.yan3-ust {
  margin: 0 0 4px; font: 600 11.5px/1.2 var(--f-govde);
  letter-spacing: .06em; text-transform: uppercase; color: var(--marka);
}
.yan3-baslik { margin: 0 0 14px; font: 700 18px/1.25 var(--f-baslik); letter-spacing: -.01em; color: var(--metin); }
.yan3-fiyat { padding: 14px 0 16px; margin-bottom: 16px; border-block: 1px solid var(--cizgi); }
.yan3-fiyat-etiket { display: block; margin-bottom: 3px; font-size: 12.5px; color: var(--metin-2); }
.yan3-fiyat-satir { margin: 0; display: flex; align-items: baseline; gap: 8px; }
.yan3-fiyat-satir strong { font: 700 26px/1.1 var(--f-baslik); letter-spacing: -.02em; color: var(--metin); }
.yan3-fiyat-satir span { font-size: 13px; color: var(--metin-2); }
.yan3-fiyat-not { margin: 6px 0 0; font-size: 13px; color: var(--metin-2); }
.yan3-fiyat-not a { color: var(--marka); font-weight: 600; }
.yan-kutu.yan-v3 .yan3-ana {
  width: 100%; min-height: 48px; margin: 0; gap: 8px;
  border-radius: 12px; font-size: 15px; font-weight: 700;
}
.yan-kutu.yan-v3 .yan3-ana svg { width: 18px; height: 18px; }
.yan-v3 .yan3-form { margin-top: 8px; }
.yan-v3 .yan-katla > summary.yan3-ikincil {
  display: flex; align-items: center; justify-content: center; width: 100%;
  min-height: 44px; margin: 0; padding: 0 16px; list-style: none; cursor: pointer;
  border: 1px solid var(--cizgi-2); border-radius: 12px; background: transparent;
  font: 600 14.5px/1 var(--f-govde); color: var(--metin);
}
.yan-v3 .yan-katla > summary.yan3-ikincil::-webkit-details-marker { display: none; }
.yan-v3 .yan-katla > summary.yan3-ikincil:hover { background: var(--yuzey-2); }
.yan-v3 .yan3-form[open] > summary { margin-bottom: 12px; }
.yan3-guven {
  list-style: none; margin: 18px 0 0; padding: 16px 0 0;
  border-top: 1px solid var(--cizgi); display: grid; gap: 12px;
}
.yan3-guven li { margin: 0; display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; }
.yan3-guven svg { width: 18px; height: 18px; margin-top: 1px; color: var(--marka); stroke: currentColor; }
.yan3-guven span { font-size: 12.5px; line-height: 1.45; color: var(--metin-2); }
.yan3-guven b { display: block; font-size: 13.5px; font-weight: 600; line-height: 1.35; color: var(--metin); }
.yan-kutu.yan-v3 .yan3-kaydet {
  width: auto; min-height: 32px; margin-top: 12px; padding: 0;
  justify-content: flex-start; font-size: 13px; color: var(--metin-2);
}
.yan-kutu.yan-v3 .yan3-kaydet:hover { color: var(--marka); }
@media (max-width: 640px) {
  .yan-kutu.yan-v3 { padding: 16px 14px 14px; border-radius: 14px; box-shadow: none; }
  .yan3-baslik { font-size: 15.5px; margin-bottom: 10px; }
  .yan3-fiyat { padding: 10px 0 12px; margin-bottom: 12px; }
  .yan3-fiyat-satir strong { font-size: 20px; }
  .yan3-fiyat-not { font-size: 12px; }
  .yan-kutu.yan-v3 .yan3-ana { min-height: 44px; font-size: 14px; }
  .yan-v3 .yan-katla > summary.yan3-ikincil { min-height: 40px; font-size: 13.5px; }
  .yan3-guven { margin-top: 14px; padding-top: 12px; gap: 9px; }
  .yan3-guven b { font-size: 13px; }
  .yan3-guven span { font-size: 12px; }
}

/* ---------------------------------------------------------------------
   107. PAKET KARTI — özellik satırları sıkı, düğme küçük, mobilde en aza iner,
   fotoğrafsız alan sadeleşti
   Ölçüm (375 px, önce): kart 247×550 px, satır 13 px/24 px, fiyat 18 px.
   --------------------------------------------------------------------- */
.paket-kart .paket-ozellik { gap: 0; margin-top: 10px; }
.paket-kart .paket-ozellik li { padding-block: 2px; font-size: 14px; line-height: 1.45; }
.paket-kart .paket-eylem .dugme { min-height: 40px; padding: 8px 16px; font-size: 14px; }
.paket-kart .paket-eylem .dugme svg { width: 16px; height: 16px; }
.paket-kart .paket-gorsel-bos {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  padding: 16px;
  background: linear-gradient(140deg,
    color-mix(in srgb, var(--marka) 24%, var(--yuzey)) 0%,
    color-mix(in srgb, var(--marka) 7%, var(--yuzey)) 100%);
}
.paket-gorsel-bos .bos-isaret {
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  background: color-mix(in srgb, var(--zemin) 72%, transparent); color: var(--marka);
  text-shadow: none;
}
.paket-gorsel-bos .bos-isaret svg { width: 20px; height: 20px; }
.paket-gorsel-bos .bos-ad { font: 600 13.5px/1.3 var(--f-baslik); color: var(--metin); text-shadow: none; }
@media (max-width: 640px) {
  .paket-kart > .paket-gorsel { max-height: 100px; }
  .paket-kart .paket-ad { font-size: 14.5px; padding-top: 10px; }
  .paket-kart .paket-ozet-satir { font-size: 12.5px; line-height: 1.4; margin-top: 3px; }
  .paket-kart .paket-ozellik { margin-block: 6px 8px; }
  .paket-kart .paket-ozellik li { padding-block: 1px; padding-left: 17px; font-size: 12.5px; line-height: 1.35; }
  .paket-kart .paket-fiyat { padding: 8px 10px; }
  .paket-kart .paket-fiyat-etiket { font-size: 10px; }
  .paket-kart .paket-fiyat-tutar { font-size: 16px; margin: 1px 0 2px; }
  .paket-kart .paket-fiyat-aralik, .paket-kart .paket-kdv, .paket-kart .paket-kapora { font-size: 11.5px; line-height: 1.35; }
  .paket-kart .paket-eylem { padding: 8px 12px 12px; }
  .paket-kart .paket-eylem .dugme { min-height: 36px; font-size: 13px; }
  .paket-gorsel-bos .bos-isaret { width: 32px; height: 32px; }
  .paket-gorsel-bos .bos-isaret svg { width: 16px; height: 16px; }
  .paket-gorsel-bos .bos-ad { font-size: 12px; }
}

/* ---------------------------------------------------------------------
   108. ALT BİLGİ — bir kademe küçük, kesik başlık yok, tek ana düğme
   --------------------------------------------------------------------- */
.alt .alt-marka { font-size: 21px; }
.alt .alt-not { font-size: 13.5px; line-height: 1.6; }
.alt-baslik { font-size: 11.5px; letter-spacing: .07em; margin-bottom: 10px; }
.alt-sutun ul { gap: 1px; }
.alt-sutun a {
  min-height: 0; padding-block: 4px; font-size: 13.5px; line-height: 1.45;
  white-space: normal; text-overflow: clip;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.alt-eylem { align-items: center; gap: 10px 16px; }
.alt-eylem .dugme { min-height: 38px; padding: 0 14px; font-size: 13.5px; }
.alt-form-bag { font-size: 13.5px; font-weight: 600; color: var(--marka); }
.alt-odeme { margin-top: 18px; }
.alt-odeme-baslik {
  margin: 0 0 8px; font-size: 11.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--metin);
}
.alt-odeme ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.alt-odeme li {
  margin: 0; padding: 4px 9px; border: 1px solid var(--cizgi); border-radius: 6px;
  background: var(--zemin); font-size: 12px; color: var(--metin-2);
}
.telif, .alt-yasal a { font-size: 12.5px; }

/* 109. Kalp düğmesi dokunma alanı (kural 9) — görünen 36/32 px, gerçek alan 44 px.
   Ölçüldü (375 px): .vk2-kaydet 32×32. Görsel ölçü değişmez. */
.vk2-kaydet::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; }
@media (max-width: 640px) { .vk2-kaydet::after { inset: -6px; } }


/* ---------------------------------------------------------------------
   110. ÖDEME ROZETLERİ (footer) — işletme kararı 2026-09-13
   --------------------------------------------------------------------- */
.alt-odeme ul { gap: 6px; }
.alt-odeme li { padding: 0; border: 0; background: none; line-height: 0; }
.alt-odeme svg { display: block; width: 46px; height: 29px; border-radius: 5px;
                 box-shadow: 0 1px 2px rgb(0 0 0 / .08); }
.gizli-metin {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.alt-cerez {
  display: inline-flex; align-items: center; min-height: 26px; padding: 0;
  background: none; border: 0; cursor: pointer;
  font: inherit; font-size: 12.5px; color: var(--metin-2);
}
.alt-cerez:hover { color: var(--marka); }

/* ---------------------------------------------------------------------
   111. ÇEREZ ŞERİDİ — alt kısımda yatay, sayfayı kapatmaz
   Yalnız ölçüm kimliği tanımlıysa basılır (parca/olcum.php).
   --------------------------------------------------------------------- */
.cerez {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  padding: 12px 0 calc(12px + env(safe-area-inset-bottom, 0px));
  background: var(--yuzey); border-top: 1px solid var(--cizgi);
  box-shadow: 0 -8px 24px -16px rgb(0 0 0 / .35);
}
.cerez-ic {
  max-width: 1180px; margin: 0 auto; padding: 0 var(--b4);
  display: flex; align-items: center; justify-content: space-between; gap: 12px 24px;
}
.cerez-metin { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--metin-2); }
.cerez-metin strong { color: var(--metin); font-weight: 600; }
.cerez-metin a { color: var(--marka); font-weight: 600; }
.cerez-eylem { display: flex; gap: 8px; flex: 0 0 auto; }
.cerez-eylem .dugme { min-height: 40px; padding: 8px 18px; font-size: 14px; }
/* Şerit açıkken yüzen WhatsApp düğmesi ve mobil alt çubuk üstüne binmesin */
.cerez-acik .wa-yuzen { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 640px) {
  .cerez-ic { flex-direction: column; align-items: stretch; gap: 10px; }
  .cerez-metin { font-size: 12.5px; }
  .cerez-eylem .dugme { flex: 1; min-height: 40px; font-size: 13.5px; }
  .cerez-acik .wa-yuzen { bottom: calc(150px + env(safe-area-inset-bottom, 0px)); }
}
@media print { .cerez { display: none; } }

/* ---------------------------------------------------------------------
   112. İKİNCİ TUR NOTLARI (kullanıcı, 2026-09-13)
   · Vitrin kartı: başlık TEK satır; başlangıç fiyatı görselin sol altında;
     alt satırda yeşil "Detaylı incele" (WhatsApp düğmesiyle aynı yeşil).
   · Kategori kartı: "N hizmet →" yerine aynı aileden ince "İncele →" hapı.
   · "Öne çıkan hizmetler" en fazla 2 satır.
   · Alt bilgi: tek satır maddeler, marka satırı sütun başlıklarıyla hizalı.
   · Mobil: bloklar arası 1–2 satır.
   Görsel üstü katmanlar temadan bağımsızdır (fotoğraf her iki temada aynı).
   --------------------------------------------------------------------- */
.vk2-ad {
  display: block; -webkit-line-clamp: unset;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vk2-fiyat {
  position: absolute; left: 10px; bottom: 10px; z-index: 2; pointer-events: none;
  align-items: flex-start; padding: 6px 10px 7px; border-radius: 8px;
  background: rgb(12 14 18 / .64);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.vk2-fiyat small { color: rgb(255 255 255 / .82); font-size: 10.5px; margin-bottom: 2px; letter-spacing: .02em; }
.vk2-fiyat b { color: #fff; font-size: 16px; }
.vk2-alt { justify-content: flex-start; padding-top: 12px; }
.vk2-dugme {
  display: inline-flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 14px; border-radius: 999px;
  background: var(--wa); color: var(--wa-metin);
  font: 600 13px/1 var(--f-govde); letter-spacing: .01em;
  transition: background .2s ease;
}
.vk2-dugme svg { width: 14px; height: 14px; transition: transform .2s ease; }
.vk2:hover .vk2-dugme { background: #1fbe5a; }
.vk2:hover .vk2-dugme svg { transform: translateX(2px); }

.kk2-not { gap: 8px; }
.kk2-dugme {
  display: inline-flex; align-items: center; gap: 4px; flex: none;
  height: 28px; padding: 0 11px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--wa) 60%, var(--cizgi));
  color: var(--metin); font-size: 12.5px; font-weight: 600;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.kk2-dugme .kk2-ok { color: inherit; }
.kk2:hover .kk2-dugme { background: var(--wa); border-color: var(--wa); color: var(--wa-metin); }

@media (min-width: 641px) {
  .cipler-2satir { max-height: calc(2 * 38px + var(--b2)); overflow: hidden; }
}

.alt-sutun a {
  display: block; -webkit-line-clamp: unset;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.alt .alt-marka { font-size: 19px; line-height: 1; margin-top: -2px; margin-bottom: 10px; }

@media (max-width: 640px) {
  .vk2-fiyat { left: 8px; bottom: 8px; padding: 4px 8px 5px; border-radius: 7px; }
  .vk2-fiyat small { font-size: 9.5px; margin-bottom: 1px; }
  .vk2-fiyat b { font-size: 14px; }
  .vk2-alt { padding-top: 8px; }
  .vk2-dugme { height: 30px; padding: 0 11px; font-size: 12px; }
  .vk2-dugme svg { width: 12px; height: 12px; }
  .kk2-dugme { height: 24px; padding: 0 8px; font-size: 11px; }

  /* Bloklar arası: hizmet sayfasında 32 + 40 = 72 px idi → 24 px */
  .hizmet-govde > section { padding-top: 24px; }
  .hizmet-govde > section + section { margin-top: 0; }
  .metin { padding-top: var(--b4); }
  .bolum { padding-top: 20px; }
  .serit { margin-top: 0; padding-top: 20px; padding-bottom: 20px; }
  .neden-serit { margin-top: 0; padding-top: 20px; padding-bottom: 20px; }
  .kapanis2 { margin-top: 20px; }
  .serit-etiket { margin: 16px 0 8px; }
}

/* ---------------------------------------------------------------------
   113. SAKİN YEŞİL — üçüncü tur notları (kullanıcı, 2026-09-13)
   Parlak WhatsApp yeşili (--wa) kartta, kategori hapında ve footer'da
   "cırtlak" bulundu. Örnek: hizmet çipinin açık nane zemini + marka yazısı.
   Tek aile: zemin --marka-acik, yazı --marka, üzerine gelince --marka-koyu.
   Jetonların koyu tema değerleri zaten tanımlı.
   Fiyatın arkasındaki koyu cam kutu kalktı: yazı gölgesi + görselin altında
   çok hafif geçiş (açık fotoğrafta da okunur kalsın diye).
   --------------------------------------------------------------------- */
.vk2-fiyat {
  background: none; -webkit-backdrop-filter: none; backdrop-filter: none;
  padding: 0; left: 14px; bottom: 11px;
  text-shadow: 0 1px 2px rgb(0 0 0 / .6), 0 0 14px rgb(0 0 0 / .35);
}
.vk2-fiyat small { color: rgb(255 255 255 / .9); }
.vk2-gorsel::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 40%;
  background: linear-gradient(to top, rgb(0 0 0 / .32), transparent);
  pointer-events: none; z-index: 1;
}

.vk2-alt { display: block; }
.vk2-dugme {
  display: flex; justify-content: center; width: 100%; height: 38px;
  background: var(--marka-acik); color: var(--marka);
  border: 1px solid color-mix(in srgb, var(--marka) 28%, transparent);
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.vk2:hover .vk2-dugme {
  background: color-mix(in srgb, var(--marka) 14%, var(--marka-acik));
  border-color: color-mix(in srgb, var(--marka) 50%, transparent);
  color: var(--marka-koyu);
}

.kk2-dugme { border-color: color-mix(in srgb, var(--marka) 35%, transparent); color: var(--marka); }
.kk2:hover .kk2-dugme {
  background: var(--marka-acik); color: var(--marka-koyu);
  border-color: color-mix(in srgb, var(--marka) 55%, transparent);
}

.alt-eylem .dugme.alt-wa {
  min-height: 34px; padding: 0 12px; gap: 6px; font-size: 13px;
  background: var(--marka-acik); color: var(--marka);
  border: 1px solid color-mix(in srgb, var(--marka) 28%, transparent);
}
.alt-eylem .dugme.alt-wa:hover {
  background: color-mix(in srgb, var(--marka) 14%, var(--marka-acik)); color: var(--marka-koyu);
}
.alt-eylem .dugme.alt-wa svg { width: 15px; height: 15px; }

/* Kurumsal sütunu dar kalıp "Değerlendirme bırak" ve "Ücretsiz teklif al →"
   kesiliyordu (~1150 px). Son sütuna en az 11rem. */
@media (min-width: 900px) {
  .alt-ic { grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)) minmax(11rem, 1fr); }
}

@media (max-width: 640px) {
  .vk2-fiyat { left: 10px; bottom: 8px; }
  .vk2-dugme { height: 34px; }
}

/* ---------------------------------------------------------------------
   114. DÖRDÜNCÜ TUR (kullanıcı, 2026-09-13 — "uygula")
   5. TÜM WhatsApp düğmeleri footer'daki sakin stilde ("çok beğendim").
      Tek taban kural `.dugme-wa`; sayfa özel kuralları (mobil çubuk, yan
      sütun, paket, kapanış, form, WA penceresi) rengi buradan alır.
   6. Vitrin kartı açıklaması düğme yazısının yeşili (--marka).
   7. DENEME: kategori kartı gövdesi "Öne çıkan hizmetler" çipi renginde.
      Geri almak için yalnız 7. bloğu sil.
   8. Ana sayfa şehir şeridi kartları ~%20 kısa (220 → 176, mobil 170 → 140).
   --------------------------------------------------------------------- */
/* 5 */
.dugme-wa {
  background: var(--marka-acik); color: var(--marka);
  border: 1px solid color-mix(in srgb, var(--marka) 28%, transparent);
}
.dugme-wa:hover {
  background: color-mix(in srgb, var(--marka) 14%, var(--marka-acik));
  border-color: color-mix(in srgb, var(--marka) 50%, transparent);
  color: var(--marka-koyu);
}
.wa-ikon-kart { color: var(--marka); }

/* 6 */
.vk2-not { color: var(--marka); }

/* 8 */
.sehir-serit .skart { min-height: 176px; }
@media (max-width: 640px) {
  .sehir-serit .skart { min-height: 140px; }
}

/* ---------------------------------------------------------------------
   115. KATEGORİ BENTO — "Ne arıyorsun?" (kullanıcı, 2026-09-13)
   5×2 düz ızgara + nane gövde "çirkin" bulundu (114'teki 7. deneme silindi).
   Satırda 4 kart, bilgi fotoğrafın ÜSTÜNDE; bazı kartlar 2 sütun kaplar
   (seçim anasayfa.php'de: kart + geniş = 4'ün katı → boşluksuz 4×3).
   Mobil: mevcut yatay şerit kalır (6 satır bento telefonda ~900 px olurdu),
   yalnız aynı fotoğraf-üstü görünüm.
   Fotoğraf üstü katman temadan bağımsızdır: beyaz yazı + koyu geçiş, hap
   sabit açık nane/teal (koyu temada --marka-koyu açık renge döner, beyaz
   hap üstünde okunmazdı).
   --------------------------------------------------------------------- */
.kk2 {
  position: relative; overflow: hidden; min-height: 200px;
  border: 0; border-radius: 14px; background: var(--yuzey-2);
  isolation: isolate;
}
.kk2 .kkart-gorsel { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; z-index: -1; }
.kk2 .kkart-gorsel img { transition: transform .5s ease; }
.kk2:hover .kkart-gorsel img { transform: scale(1.045); }
.kk2 .kkart-gorsel::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgb(0 0 0 / .74) 0%, rgb(0 0 0 / .3) 42%, rgb(0 0 0 / 0) 70%);
}
.kk2-govde {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column; gap: 8px;
  padding: 16px 16px 15px; background: none;
}
.kk2-ad {
  min-height: 0; color: #fff; font-size: 17px; line-height: 1.25;
  text-shadow: 0 1px 3px rgb(0 0 0 / .45);
}
.kk2-genis .kk2-ad { font-size: 22px; letter-spacing: -.015em; }
.kk2-not { color: rgb(255 255 255 / .86); font-size: 13px; }
.kk2-dugme {
  background: rgb(255 255 255 / .95); color: #115e59;
  border: 1px solid rgb(255 255 255 / .95);
}
.kk2:hover .kk2-dugme { background: #effaf8; color: #0f766e; border-color: #effaf8; }
.kk2:focus-visible { outline: 3px solid var(--marka); outline-offset: 2px; }

@media (min-width: 641px) {
  .izgara-kategori.kk-bento {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: 210px; grid-auto-flow: dense; gap: 16px;
  }
  .kk-bento .kk2 { min-height: 0; }
  .kk-bento .kk2-genis { grid-column: span 2; }
}
@media (min-width: 641px) and (max-width: 900px) {
  .izgara-kategori.kk-bento { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 180px; gap: 12px; }
  .kk2-genis .kk2-ad { font-size: 19px; }
}
@media (max-width: 640px) {
  .izgara-kategori > .kk2 { min-height: 150px; }
  .kk2-govde { padding: 12px; gap: 6px; }
  .kk2-ad, .kk2-genis .kk2-ad { font-size: 15px; }
  .kk2-not { font-size: 11.5px; }
}

/* ---------------------------------------------------------------------
   116. ALTINCI TUR (kullanıcı, 2026-09-13 — "uygula hepsini")
   --------------------------------------------------------------------- */
/* 9. Vitrin kartı açıklaması: yeşil okunmuyordu → markanın siyaha yakın tonu.
   --metin'e %18 marka karışır: açık temada koyu yeşilimsi siyah, koyu temada
   hafif yeşil açık gri. Sabit renk yok. */
.vk2-not { color: color-mix(in srgb, var(--marka) 18%, var(--metin)); }

/* 10. Ana sayfa şehir şeridi: ad fotoğrafın ORTASINDA. Alttan geçiş yerine
   eşit hafif karartma (ortadaki yazı her fotoğrafta okunur). Sol ok artık
   yazının üstüne binmiyor. Yalnız şerit; /sehirler ızgarası aynı. */
.sehir-serit .skart { align-items: center; justify-content: center; text-align: center; }
.sehir-serit .skart::after { background: rgba(var(--perde-rgb), .46); }
.sehir-serit .skart-govde { justify-items: center; padding: 12px 16px; }
.sehir-serit .skart-ad { text-shadow: 0 1px 3px rgb(0 0 0 / .35); }

/* 11. Ödeme rozetleri ~%20 küçük (46×29 → 37×23) */
.alt-odeme ul { gap: 5px; }
.alt-odeme svg { width: 37px; height: 23px; border-radius: 4px; }

/* 12. Nasıl çalışır: zemin ritmi beyaz – açık nane – beyaz. Adımlar beyaz
   kutuda; bağlantı çizgisi kutuların ARASINDA görünür (kutular üstte). */
.akis-serit { background: var(--marka-acik); }
.akis { gap: 16px; align-items: stretch; }
.akis::before { top: 37px; left: 40px; right: 40px; }
.akis-adim {
  padding: 17px 18px 20px; border-radius: 14px; background: var(--yuzey);
  border: 1px solid color-mix(in srgb, var(--marka) 14%, var(--cizgi));
}
.akis-ad { margin-top: 14px; }
.akis-not { max-width: none; }
.neden-serit { border-top: 0; }

/* 13. Sağ teklif paneli: fiyat 26 → 22 px, en koyu marka yeşili; blok sıkı */
.yan3-fiyat { padding: 12px 0 14px; }
.yan3-fiyat-etiket { margin-bottom: 2px; }
.yan3-fiyat-satir strong { font-size: 22px; color: var(--marka-koyu); }
.yan3-fiyat-satir span { font-size: 12.5px; }
.yan3-fiyat-not { margin-top: 4px; font-size: 12.5px; }
.yan3-ust { color: var(--marka); }

/* 14. Aktif sekme: koyu marka yeşili yazı + aynı renkte alt çizgi.
   Kalınlık font-weight ile DEĞİL: kaydırırken aktif sekme değişince genişlik
   değişip menü titriyordu → görünmez ince kontur. */
.hsekme a[aria-current="true"] { color: var(--marka-koyu); -webkit-text-stroke: .3px currentColor; }
.hsekme a[aria-current="true"]::before { background: var(--marka-koyu); }

@media (max-width: 640px) {
  .sehir-serit .skart-govde { padding: 10px 12px; }
  .yan3-fiyat-satir strong { font-size: 19px; }
}

/* ---------------------------------------------------------------------
   117. SAĞ PANEL FİYAT KUTUSU (kullanıcı, 2026-09-13: "karışıklık var")
   Etiket, fiyat, "+ KDV" ve "5 paket · Ön ödeme · Karşılaştır" iki ince
   yatay çizgi arasında üst üste sıkışıyordu. Kullanıcının örnek verdiği
   iletişim panelindeki çerçeveli liste kutusu diliyle: tek çerçeve, üst
   satır etiket ↔ KDV, ortada yalnız fiyat, altta açık zeminli ayrı şerit.
   --------------------------------------------------------------------- */
.yan3-fiyat {
  padding: 0; margin: 2px 0 14px; overflow: hidden;
  border: 1px solid var(--cizgi); border-radius: 12px; background: var(--yuzey);
}
.yan3-fiyat-ust {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  padding: 12px 14px 0;
}
.yan3-fiyat-etiket { margin: 0; font-size: 12.5px; color: var(--metin-2); }
.yan3-fiyat-kdv { font-size: 12px; color: var(--metin-3); }
.yan3-fiyat-satir { margin: 0; padding: 3px 14px 12px; }
.yan3-fiyat-satir strong { display: block; font-size: 24px; line-height: 1.1; color: var(--marka-koyu); }
.yan3-fiyat-alt {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 9px 14px; border-top: 1px solid var(--cizgi);
  background: color-mix(in srgb, var(--marka-acik) 60%, var(--yuzey));
  font-size: 12.5px; color: var(--metin-2);
}
.yan3-fiyat-alt a { color: var(--marka); font-weight: 600; white-space: nowrap; }
.yan3-fiyat-alt a:hover { color: var(--marka-koyu); }

/* Nasıl çalışır zemini: açık nane → diğer şeritlerle aynı gri (--zemin-2 = sayfa zemini #fafafc; --zemin açık temada BEYAZ; ör.
   "Hizmet verdiğimiz şehirler"). Kullanıcı isteği, aynı gün. Adım kutuları beyaz,
   çerçeve nötr çizgi. */
.akis-serit { background: var(--zemin-2); }
.akis-adim { border-color: var(--cizgi); }

@media (max-width: 640px) {
  .yan3-fiyat-ust { padding: 10px 12px 0; }
  .yan3-fiyat-satir { padding: 2px 12px 10px; }
  .yan3-fiyat-satir strong { font-size: 20px; }
  .yan3-fiyat-alt { padding: 8px 12px; font-size: 12px; }
}

/* ---------------------------------------------------------------------
   118. SAĞ PANEL — güvence listesi şeritli kutu + KDV fiyatın yanında
   (kullanıcı, 2026-09-13). Örnek: iletişim panelindeki çerçeveli liste;
   maddeler arasında ince ayırıcı. Fiyat kutusuyla aynı çerçeve dili.
   --------------------------------------------------------------------- */
.yan3-guven {
  display: block; margin: 16px 0 0; padding: 0; list-style: none;
  border: 1px solid var(--cizgi); border-radius: 12px; border-top-width: 1px;
  background: var(--yuzey); overflow: hidden;
}
.yan3-guven li { padding: 11px 14px; }
.yan3-guven li + li { border-top: 1px solid var(--cizgi); }

.yan3-fiyat-satir { display: flex; align-items: baseline; gap: 6px; }
.yan3-fiyat-satir strong { display: inline; }
.yan3-fiyat-kdv { font-size: 12.5px; font-weight: 500; color: var(--metin-2); }

@media (max-width: 640px) {
  .yan3-guven { margin-top: 12px; padding: 0; }
  .yan3-guven li { padding: 9px 12px; }
}

/* ---------------------------------------------------------------------
   119. VİTRİN KARTI ALT ŞERİT (kullanıcı, 2026-09-13: "benzer mantığı
   bunlarda da uygulayalım … buton yerine blokta olduğu gibi")
   Sağ paneldeki fiyat kutusunun alt şeridiyle (.yan3-fiyat-alt) aynı dil:
   kart kenarından kenarına, üstte ince çizgi, açık nane-beyaz zemin; solda
   hizmet adı (eski büyük harfli üst satır buraya indi), sağda "Detaylı
   incele →" düz bağlantı görünümü. Kart gövdesi: yalnız başlık + açıklama.
   --------------------------------------------------------------------- */
.vk2-govde { padding: 14px 16px 0; gap: 4px; }
.vk2-govde > .vk2-ad:nth-last-child(2),
.vk2-govde > .vk2-not { margin-bottom: 14px; }
.vk2-alt {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  margin: auto -16px 0; padding: 10px 16px;
  border-top: 1px solid var(--cizgi);
  background: color-mix(in srgb, var(--marka-acik) 60%, var(--yuzey));
}
.vk2-alt-ust {
  min-width: 0; font-size: 12.5px; color: var(--metin-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vk2-dugme {
  display: inline-flex; align-items: center; gap: 5px; flex: none;
  width: auto; height: auto; padding: 0; border: 0; border-radius: 0; background: none;
  color: var(--marka); font: 600 12.5px/1.2 var(--f-govde); white-space: nowrap;
}
.vk2-dugme svg { width: 13px; height: 13px; }
.vk2:hover .vk2-dugme { background: none; border-color: transparent; color: var(--marka-koyu); }

@media (max-width: 640px) {
  .vk2-govde { padding: 10px 12px 0; }
  .vk2-govde > .vk2-ad:nth-last-child(2),
  .vk2-govde > .vk2-not { margin-bottom: 10px; }
  .vk2-alt { margin: auto -12px 0; padding: 8px 12px; }
  .vk2-alt-ust, .vk2-dugme { font-size: 11.5px; }
  .vk2-dugme { height: auto; }
}

/* 119b. Alt şeritte hizmet adı 1200 px'te 8 kartın 3'ünde kesiliyordu
   ("Düğün Organizasyo…"). Yazı 12 px, iç boşluk 14 px, ok 12 px; tam ad
   `title` ile görünür. "Detaylı incele" metni kullanıcının seçimi — kısaltılmadı. */
.vk2-alt { gap: 8px; margin-inline: -16px; padding-inline: 14px; }
.vk2-alt-ust { font-size: 12px; }
.vk2-dugme { font-size: 12px; gap: 4px; }
.vk2-dugme svg { width: 12px; height: 12px; }
@media (max-width: 640px) {
  .vk2-alt { margin-inline: -12px; padding-inline: 11px; }
  .vk2-alt-ust, .vk2-dugme { font-size: 11px; }
}

/* ---------------------------------------------------------------------
   120. PAKET KARTI TOPARLAMA (kullanıcı, 2026-09-13: "dağınık hava olmasın")
   Fiyat kutusu sağ paneldeki (.yan3-fiyat, CSS 117) ile aynı dil. Bu sınıflar
   için dosyada ~10 ezme katmanı var (866, 961, 1603, 2024, 3719, 3808, 4492 …);
   hepsini tek tek düzeltmek yerine `.paket-kart .paket-fiyat.pf2` özgüllüğüyle
   (0,3,0) tek yerden yazılır. Eski katmanlar pf2 olmayan kartları etkilemez.
   --------------------------------------------------------------------- */
.paket-kart .paket-fiyat.pf2 {
  display: block; gap: 0; margin: 0 var(--b5); padding: 0; overflow: hidden;
  border: 1px solid var(--cizgi); border-radius: 12px; background: var(--yuzey);
}
.paket-kart .pf2 .paket-fiyat-etiket {
  display: block; margin: 0; padding: 11px 14px 0;
  font-size: 12.5px; font-weight: 400; letter-spacing: 0; text-transform: none;
  color: var(--metin-2);
}
.paket-kart .pf2 .pf2-satir {
  display: flex; align-items: baseline; gap: 6px; margin: 0; padding: 2px 14px 11px;
}
.paket-kart .pf2 .paket-fiyat-tutar {
  margin: 0; font: 700 22px/1.1 var(--f-baslik); letter-spacing: -.015em; color: var(--marka-koyu);
}
.paket-kart .pf2 .pf2-kdv { font-size: 12.5px; font-weight: 500; color: var(--metin-2); }
.paket-kart .pf2 .pf2-alt {
  margin: 0; padding: 0; border-top: 1px solid var(--cizgi);
  background: color-mix(in srgb, var(--marka-acik) 60%, var(--yuzey));
}
.paket-kart .pf2 .pf2-alt > div {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  padding: 7px 14px;
}
.paket-kart .pf2 .pf2-alt > div + div { border-top: 1px solid color-mix(in srgb, var(--cizgi) 70%, transparent); }
.paket-kart .pf2 .pf2-alt dt { margin: 0; font-size: 12.5px; color: var(--metin-2); }
.paket-kart .pf2 .pf2-alt dd { margin: 0; font-size: 12.5px; font-weight: 600; color: var(--metin); white-space: nowrap; }

/* Kartın geri kalanı: tek ritim. Başlık → özet → özellik listesi eşit aralık;
   fiyat kutusu ve düğme her kartta aynı yükseklikte dibe oturur. */
.paket-kart .paket-ad { padding: 14px var(--b5) 0; font-size: 17px; line-height: 1.3; }
.paket-kart .paket-ozet-satir { margin: 4px 0 0; padding-inline: var(--b5); font-size: 14px; line-height: 1.5; color: var(--metin-2); }
.paket-kart .paket-ozellik { margin: 12px 0 16px; padding-inline: var(--b5); gap: 6px; }
.paket-kart .paket-ozellik li { padding-block: 0; font-size: 14px; line-height: 1.45; }
.paket-kart .paket-eylem { margin-top: 12px; padding: 0 var(--b5) var(--b5); }

@media (max-width: 640px) {
  .paket-kart .paket-fiyat.pf2 { margin-inline: 12px; border-radius: 10px; }
  .paket-kart .pf2 .paket-fiyat-etiket { padding: 8px 10px 0; font-size: 11.5px; }
  .paket-kart .pf2 .pf2-satir { padding: 1px 10px 8px; }
  .paket-kart .pf2 .paket-fiyat-tutar { font-size: 17px; }
  .paket-kart .pf2 .pf2-kdv { font-size: 11px; }
  .paket-kart .pf2 .pf2-alt > div { padding: 5px 10px; }
  .paket-kart .pf2 .pf2-alt dt, .paket-kart .pf2 .pf2-alt dd { font-size: 11.5px; }
  .paket-kart .paket-ad { padding: 10px 12px 0; font-size: 14.5px; }
  .paket-kart .paket-ozet-satir { padding-inline: 12px; font-size: 12.5px; }
  .paket-kart .paket-ozellik { margin: 8px 0 10px; padding-inline: 12px; gap: 3px; }
  .paket-kart .paket-ozellik li { font-size: 12.5px; }
  .paket-kart .paket-eylem { margin-top: 10px; padding: 0 12px 12px; }
}

/* ---------------------------------------------------------------------
   121. PAKET KARTI — başlık + özet FOTOĞRAFIN ÜSTÜNDE (kullanıcı, 2026-09-13:
   "yer tasarrufu, biraz daha toparlanacak"). Fotoğraf + başlık `.paket-ust`
   sarmalayıcısında; eski `.paket-kart > .paket-gorsel` kuralları (doğrudan
   çocuk) artık eşleşmez, oran burada tek yerden verilir.
   Fotoğraf üstü katman temadan bağımsız (beyaz yazı + koyu geçiş).
   Fotoğrafsız yer tutucuda hizmet adı (.bos-ad) gizlenir: başlık zaten üstte.
   Lisans atfı (yalnız CC-BY karelerde) başlıkla çakışmasın diye sağ üstte.
   --------------------------------------------------------------------- */
.paket-kart .paket-ust { position: relative; overflow: hidden; flex: 0 0 auto; }
.paket-kart .paket-ust .paket-gorsel {
  display: block; width: 100%; height: auto; max-height: none; margin: 0;
  aspect-ratio: 16 / 10; object-fit: cover;
}
.paket-kart .paket-ust .paket-gorsel-bos { display: grid; max-height: none; aspect-ratio: 16 / 10; }
.paket-kart .paket-ust .bos-ad { display: none; }
.paket-kart .paket-ust::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgb(0 0 0 / .8) 0%, rgb(0 0 0 / .46) 38%, rgb(0 0 0 / 0) 70%);
}
.paket-kart .paket-baslik-ust {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  padding: 0 16px 13px;
}
.paket-kart .paket-baslik-ust .paket-ad {
  margin: 0; padding: 0; color: #fff; font-size: 17px; line-height: 1.25;
  text-shadow: 0 1px 3px rgb(0 0 0 / .4);
}
.paket-kart .paket-baslik-ust .paket-ozet-satir {
  margin: 3px 0 0; padding: 0; color: rgb(255 255 255 / .9);
  font-size: 13px; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.paket-kart .paket-rozet { z-index: 2; }
.paket-kart .paket-ust .gorsel-kredi-kart {
  position: absolute; top: 8px; right: 8px; bottom: auto; left: auto; z-index: 2;
}
.paket-kart .paket-ozellik { margin-top: 14px; }

@media (max-width: 640px) {
  .paket-kart .paket-baslik-ust { padding: 0 12px 10px; }
  .paket-kart .paket-baslik-ust .paket-ad { font-size: 14.5px; }
  .paket-kart .paket-baslik-ust .paket-ozet-satir { font-size: 11.5px; margin-top: 2px; }
  .paket-kart .paket-ozellik { margin-top: 10px; }
}

/* ---------------------------------------------------------------------
   122. PAKET ÖZELLİKLERİ ŞERİTLİ KUTU (kullanıcı, 2026-09-13: "fiyatın altında
   olduğu gibi satırlara koyalım, ayrı ayrı bir düzen içinde")
   Fiyat kutusunun alt şeridiyle (pf2-alt) aynı dil: çerçeve, her özellik ayrı
   satır, aralarında ince çizgi, onay işareti solda dikey ortalı.
   Kutu listenin KENDİ boyunda kalır (flex büyümesi yok: kısa listede boş kutu
   olurdu); kartlar arası yükseklik farkını fiyat kutusunun margin-top:auto'su
   karşılar, fiyat + düğme yine her kartta dibe oturur.
   --------------------------------------------------------------------- */
.paket-kart .paket-ozellik {
  display: block; flex: 0 0 auto; list-style: none;
  margin: 12px var(--b5) 14px; padding: 0; gap: 0;
  border: 1px solid var(--cizgi); border-radius: 12px; overflow: hidden;
  background: var(--yuzey);
}
.paket-kart .paket-ozellik li {
  position: relative; margin: 0; padding: 8px 12px 8px 34px;
  font-size: 13.5px; line-height: 1.4; color: var(--metin);
}
.paket-kart .paket-ozellik li + li { border-top: 1px solid var(--cizgi); }
.paket-kart .paket-ozellik li::before {
  left: 14px; top: 50%; margin-top: -5px; width: 9px; height: 5px;
  border-left: 2px solid var(--marka); border-bottom: 2px solid var(--marka);
  transform: rotate(-45deg);
}
.paket-kart .paket-fiyat.pf2 { margin-top: auto; }

@media (max-width: 640px) {
  .paket-kart .paket-ozellik { margin: 8px 12px 10px; border-radius: 10px; }
  .paket-kart .paket-ozellik li { padding: 6px 10px 6px 28px; font-size: 12px; line-height: 1.35; }
  .paket-kart .paket-ozellik li::before { left: 11px; width: 8px; height: 4px; margin-top: -4px; }
}

/* ---------------------------------------------------------------------
   123. PAKET KARTI = TEK TABLO (kullanıcı, 2026-09-13: "ayrı ayrı 2 tablo var
   gibi … tek tablo içinde olsunlar, resim de aynı tablo içinde")
   122'deki özellik kutusu ve 120'deki fiyat kutusu kendi çerçeve/köşe/dış
   boşluklarını KAYBEDER; kartın kendisi tek çerçevedir. Dikey sıra:
     fotoğraf (başlık üstünde) → özellik satırları → fiyat → aralık/ön ödeme → düğme
   Bütün ayırıcılar kenardan kenara 1 px çizgi. Tek yatay iç boşluk: 16 px.
   Özellik bölümü esner (flex 1): kısa listede boşluk bölümün İÇİNDE, çizgisiz
   kalır; fiyat bölümü her kartta aynı yükseklikten başlar.
   --------------------------------------------------------------------- */
.paket-kart {
  padding: 0; gap: 0; overflow: hidden;
  border: 1px solid var(--cizgi); border-radius: 14px; background: var(--yuzey);
}
.paket-kart .paket-ozellik {
  flex: 1 1 auto; margin: 0; padding: 0;
  border: 0; border-radius: 0; background: none;
}
.paket-kart .paket-ozellik li { padding: 9px 16px 9px 40px; }
.paket-kart .paket-ozellik li + li { border-top: 1px solid var(--cizgi); }
.paket-kart .paket-ozellik li::before { left: 18px; }

/* Fiyat bölümünün ÜST çizgisi bölüm ayıracıdır: kısa listede boşluk bu çizginin
   üstünde kalır, çizgi her kartta aynı yükseklikte. */
.paket-kart .paket-fiyat.pf2 {
  margin: 0; border: 0; border-radius: 0; background: none;
  border-top: 1px solid var(--cizgi);
}
.paket-kart .pf2 .paket-fiyat-etiket { padding: 12px 16px 0; }
.paket-kart .pf2 .pf2-satir { padding: 2px 16px 12px; }
.paket-kart .pf2 .pf2-alt > div { padding: 8px 16px; }

.paket-kart .paket-eylem {
  margin: 0; padding: 12px 16px 16px;
  border-top: 1px solid var(--cizgi);
}

@media (max-width: 640px) {
  .paket-kart { border-radius: 12px; }
  .paket-kart .paket-ozellik { margin: 0; border-radius: 0; }
  .paket-kart .paket-ozellik li { padding: 7px 12px 7px 32px; }
  .paket-kart .paket-ozellik li::before { left: 14px; }
  .paket-kart .paket-fiyat.pf2 { margin: 0; border-radius: 0; }
  .paket-kart .pf2 .paket-fiyat-etiket { padding: 9px 12px 0; }
  .paket-kart .pf2 .pf2-satir { padding: 1px 12px 9px; }
  .paket-kart .pf2 .pf2-alt > div { padding: 6px 12px; }
  .paket-kart .paket-eylem { margin: 0; padding: 10px 12px 12px; }
}

/* ---------------------------------------------------------------------
   124. PAKET KARTI SIRASI: fiyat önce, dahil olanlar sonra (kullanıcı,
   2026-09-13). Fiyat bölümü fotoğrafın hemen altında → üst çizgisi yok.
   Özellik bölümü aralık/ön ödeme şeridinden sonra gelir → üst çizgisi var.
   Özellik bölümü esnemeye devam eder; kısa listede boşluk düğme çizgisinin
   üstünde kalır, fiyat bölümü zaten her kartta aynı yükseklikte başlar.
   --------------------------------------------------------------------- */
.paket-kart .paket-fiyat.pf2 { border-top: 0; }
.paket-kart .paket-ozellik { border-top: 1px solid var(--cizgi); }

/* ---------------------------------------------------------------------
   125. PAKET IZGARASI SATIR YUKSEKLIGI (kullanici, 2026-09-13)
   2199: `.izgara-paket { grid-auto-rows: 1fr }` TUM satirlari izgaradaki en
   uzun karta esitliyordu: iki yanda da 1 madde olan satirda, baska satirdaki
   4 maddeli kart yuzunden alt bosluk kaliyordu. Artik her satir kendi en uzun
   kartina gore; ayni satirdaki kartlar yine esit (align-items: stretch).
   --------------------------------------------------------------------- */
@media (min-width: 641px) {
  .izgara-paket { grid-auto-rows: auto; align-items: stretch; }
}

/* ---------------------------------------------------------------------
   126. FİYAT SAYFASI DÜZENİ v2 (kullanıcı, 2026-09-13: "boşluklar, blok
   eşitlikleri, estetik bir yapı ve akış") — app/Views/fiyat/goster.php
   Üst alan mevcut `.vitrin-ic-sayfa.vitrin-fotograf` stilini kullanır.
   Ritim: bölümler arası 40 px (mobil 28), kutular 12 px köşe + 1 px çizgi,
   sağ panel ve kutular sağ teklif paneliyle (yan3) aynı dil.
   --------------------------------------------------------------------- */
.fy-kap { padding-top: 24px; padding-bottom: 8px; }

/* 2026-09-14: dort ayri kutu → TEK CERCEVE, hucreler ince cizgiyle ayrilir
   (kullanici stili: "tek cerceve, ince cizgili satirlar"). Cizgi her hucrenin
   sol/ust golgesidir; kenardakiler overflow ile kirpilir — sutun sayisi degisse de bozulmaz. */
.fy-ozet {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0;
  margin: 0 0 12px; padding: 0; overflow: hidden;
  border: 1px solid var(--cizgi); border-radius: 12px; background: var(--yuzey);
}
.fy-ozet > div {
  margin: 0; padding: 14px 16px; box-shadow: -1px -1px 0 var(--cizgi);
}
.fy-ozet dt { margin: 0 0 4px; font-size: 12.5px; color: var(--metin-2); }
.fy-ozet dd { margin: 0; font: 700 20px/1.2 var(--f-baslik); letter-spacing: -.01em; color: var(--marka-koyu); }

.fy-not {
  margin: 0 0 32px; padding: 12px 16px; border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--marka) 20%, var(--cizgi));
  background: color-mix(in srgb, var(--marka-acik) 60%, var(--yuzey));
}
.fy-not p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--metin-2); max-width: none; }
.fy-not strong { color: var(--metin); }

.fy-duzen {
  display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 32px; align-items: start;
}
.fy-ana { min-width: 0; }
.fy-ana > .fy-bolum { margin: 0; padding: 0; }
.fy-ana > .fy-bolum + .fy-bolum { margin-top: 40px; }
.fy-ana > .fy-bolum > h2:first-child { margin: 0 0 14px; }
.fy-ana .fiyat-tablo { margin: 0; width: 100%; }
.fy-metin { display: block; }
.fy-metin > h2 { margin: 28px 0 10px; }
.fy-metin > h2:first-child { margin-top: 0; }
.fy-metin p, .fy-metin li { max-width: none; }

.fy-yan { position: sticky; top: calc(var(--ust-yuk, 64px) + 16px); display: grid; gap: 12px; }
.fy-kutu {
  padding: 16px; border: 1px solid var(--cizgi); border-radius: 14px; background: var(--yuzey);
}
.fy-kutu-etiket { margin: 0 0 2px; font-size: 12.5px; color: var(--metin-2); }
.fy-kutu-fiyat { margin: 0; display: flex; align-items: baseline; gap: 6px; }
.fy-kutu-fiyat strong { font: 700 24px/1.1 var(--f-baslik); letter-spacing: -.015em; color: var(--marka-koyu); }
.fy-kutu-fiyat span { font-size: 12.5px; color: var(--metin-2); }
.fy-kutu-not { margin: 6px 0 0; font-size: 12.5px; color: var(--metin-2); }
.fy-kutu-eylem { display: grid; gap: 8px; margin-top: 14px; }
.fy-kutu-eylem .dugme { min-height: 42px; font-size: 14px; }

.fy-benzer { padding: 0; overflow: hidden; }
.fy-kutu-baslik { margin: 0; padding: 12px 16px; font-size: 13px; font-weight: 700; color: var(--metin); border-bottom: 1px solid var(--cizgi); }
.fy-benzer ul { list-style: none; margin: 0; padding: 0; }
.fy-benzer li { margin: 0; }
.fy-benzer li + li { border-top: 1px solid var(--cizgi); }
.fy-benzer li a {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  padding: 9px 16px; font-size: 13px; color: var(--metin); text-decoration: none;
}
.fy-benzer li a:hover { background: color-mix(in srgb, var(--marka-acik) 60%, var(--yuzey)); }
.fy-benzer li a span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fy-benzer li a b { flex: none; font-weight: 600; color: var(--marka-koyu); }
.fy-tumu {
  display: block; padding: 10px 16px; border-top: 1px solid var(--cizgi);
  background: color-mix(in srgb, var(--marka-acik) 60%, var(--yuzey));
  font-size: 13px; font-weight: 600; color: var(--marka);
}

@media (max-width: 960px) {
  .fy-duzen { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .fy-yan { position: static; }
}
@media (max-width: 640px) {
  .fy-kap { padding-top: 16px; }
  .fy-ozet { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fy-ozet > div { padding: 9px 12px; }
  .fy-ozet dt { font-size: 11px; margin-bottom: 2px; }
  .fy-ozet dd { font-size: 15px; }
  .fy-not { margin-bottom: 24px; padding: 10px 12px; }
  .fy-not p { font-size: 13px; }
  .fy-ana > .fy-bolum + .fy-bolum { margin-top: 28px; }
  .fy-kutu-fiyat strong { font-size: 20px; }
}

/* 126b. Fiyat sayfası mobil: özet kutusu sayısı tekse (üst sınır yokken 3 kutu)
   son kutu 2 sütunlu ızgarada tek başına yarım kalıyordu → tam genişlik. */
@media (max-width: 640px) {
  .fy-ozet > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* ---------------------------------------------------------------------
   127. MOBİL FİYAT TABLOSU KARTI + FİYAT SAYFASI METNİ (kullanıcı,
   2026-09-13: "mobilinde çok aşırı uyumsuzluk var").
   Neden: 3098'deki mobil kart kuralı (td 12,5 px) dosyada SONRA gelen genel
   kurallarla eziliyordu (3634 `.fiyat-tablo tbody td { font-size: 15px }`,
   3643 td.sayi, 2146) → mobilde etiket 15 px kalın, açıklama SAĞA yaslı,
   /fiyatlar'da 16 px. Bu blok dosyanın sonunda, aynı özgüllükte, medya
   sorgusu içinde: kazanan kural tek yerde.
   Kart düzeni: paket adı → küçük büyük harf etiket + sola yaslı açıklama →
   ince çizgi → "Başlangıç ↔ tutar" satırı.
   --------------------------------------------------------------------- */
@media (max-width: 640px) {
  .fiyat-tablo tbody tr {
    display: block; margin: 0 0 8px; padding: 10px 12px;
    border: 1px solid var(--cizgi); border-radius: 12px; background: var(--yuzey);
  }
  .fiyat-tablo tbody tr:nth-child(even) th,
  .fiyat-tablo tbody tr:nth-child(even) td,
  .fiyat-tablo tbody tr:hover th,
  .fiyat-tablo tbody tr:hover td { background: none; }
  .fiyat-tablo tbody th {
    display: block; width: auto; margin: 0; padding: 0 0 4px; border: 0;
    font: 700 14px/1.35 var(--f-baslik); letter-spacing: 0; text-transform: none;
    color: var(--metin); text-align: left; background: none;
  }
  .fiyat-tablo tbody td {
    display: block; margin: 0; padding: 2px 0 0; border: 0; background: none;
    font-size: 13px; line-height: 1.5; font-weight: 400; color: var(--metin-2);
    text-align: left;
  }
  .fiyat-tablo tbody td::before {
    content: attr(data-etiket); display: block; margin: 0 0 1px;
    font-size: 10.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
    color: var(--metin-3); text-align: left;
  }
  .fiyat-tablo tbody td.sayi {
    display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
    margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--cizgi);
    font: 700 15px/1.2 var(--f-baslik); color: var(--marka-koyu); text-align: right;
  }
  .fiyat-tablo tbody td.sayi + td.sayi { margin-top: 4px; padding-top: 0; border-top: 0; }
  .fiyat-tablo tbody td.sayi::before {
    display: inline; margin: 0; font: 400 12.5px/1.2 var(--f-govde);
    letter-spacing: 0; text-transform: none; color: var(--metin-2);
  }
  .fiyat-tablo tbody td[colspan] { display: block; text-align: left; }
  .fiyat-tablo tbody td[colspan]::before { content: none; }
  .fiyat-tablo caption { font-size: 11.5px; padding-bottom: 8px; }

  /* Fiyat sayfası içerik metni: 16 px idi, sayfanın geri kalanı 13–14,5 px */
  .fy-metin p, .fy-metin li { font-size: 14.5px; line-height: 1.62; }
  .fy-metin > h2, .fy-ana > .fy-bolum > h2:first-child { font-size: 17px; line-height: 1.3; }
  .fy-metin > h2 { margin: 22px 0 8px; }
  .fy-metin > h2:first-child { margin-top: 0; }
  .fy-kutu { padding: 14px; }
  .fy-benzer { padding: 0; }
}

/* ---------------------------------------------------------------------
   128. MOBİL FOOTER SIKI DÜZEN (kullanıcı, 2026-09-13: "boşlukları al,
   düzen içinde olsun, çok uzun olmasın").
   Ölçüm (375 px, önce): madde aralığı 33 px (a 32 px = min 24 + 4+4 dolgu,
   2864'teki 40 px dokunma kuralı sonraki katmanlarla karışmış); Rehber ve
   Kurumsal sütunlarında 2535 yüzünden YALNIZ "Tümü" bağı kalıyordu → iki
   yarım boş sütun; footer 660 px.
   Yeni: Hizmetler/Şehirler madde aralığı 26 px (WCAG 2.2 AA en az 24 px
   hedef karşılanır; kural 9'daki 44 px tercihinden bilinçli sapma — kullanıcı
   isteği, footer bağlantıları birincil eylem değil). Rehber tek satır:
   başlık ↔ "Tüm rehberler →". Kurumsal tam genişlik, kısa bağlar satır içi.
   `.alt-sutun:nth-of-type(n)` nav sırasına göre (div.alt-marka-blok sayılmaz).
   --------------------------------------------------------------------- */
@media (max-width: 640px) {
  .alt .alt-ic { grid-template-columns: 1fr 1fr; gap: 16px 16px; }
  .alt .alt-sutun { margin: 0; }
  .alt .alt-baslik { margin: 0 0 4px; font-size: 10.5px; letter-spacing: .07em; }
  .alt .alt-sutun ul { display: grid; gap: 0; margin: 0; padding: 0; }
  .alt .alt-sutun li { margin: 0; }
  .alt .alt-sutun li a, .alt .alt-tumu {
    display: block; min-height: 0; padding: 3px 0; line-height: 20px; font-size: 12.5px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .alt .alt-tumu { margin-top: 2px; }

  /* Rehber: tek satır, üstte ince ayırıcı */
  .alt .alt-sutun:nth-of-type(3) {
    grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding-top: 12px; border-top: 1px solid var(--cizgi);
  }
  .alt .alt-sutun:nth-of-type(3) .alt-baslik { margin: 0; }
  .alt .alt-sutun:nth-of-type(3) ul { display: block; }
  .alt .alt-sutun:nth-of-type(3) .alt-tumu { margin: 0; }

  /* Kurumsal: tam genişlik, kısa bağlar satır içi (gizlenen maddeler geri) */
  .alt .alt-sutun:nth-of-type(4) {
    grid-column: 1 / -1; padding-top: 12px; border-top: 1px solid var(--cizgi);
  }
  .alt .alt-sutun:nth-of-type(4) .alt-baslik { margin-bottom: 6px; }
  .alt .alt-sutun:nth-of-type(4) ul { display: flex; flex-wrap: wrap; gap: 0 16px; }
  .alt .alt-sutun:nth-of-type(4) li:not(:has(> .alt-tumu)) { display: block; }
  .alt .alt-sutun:nth-of-type(4) li a { display: inline-block; }
}

/* 128b. Mobil footer duzeltme (olcum sonrasi): Kurumsal baglari satir ici acilinca
   footer 660 -> 743 px UZADI. Kurumsal da Rehber gibi tek satir (baslik <-> Ucretsiz
   teklif al); maddeleri mobilde eskisi gibi gizli (2535). 320 px'te kategori adlari
   kesiliyordu -> kesme yerine satir sarar. */
@media (max-width: 640px) {
  .alt .alt-sutun li a, .alt .alt-tumu { white-space: normal; overflow: visible; text-overflow: clip; }
  .alt .alt-sutun:nth-of-type(4) {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
  }
  .alt .alt-sutun:nth-of-type(4) .alt-baslik { margin: 0; }
  .alt .alt-sutun:nth-of-type(4) ul { display: block; }
  .alt .alt-sutun:nth-of-type(4) li:not(:has(> .alt-tumu)) { display: none; }
  .alt .alt-sutun:nth-of-type(4) .alt-tumu { margin: 0; }
  .alt .alt-sutun:nth-of-type(3) + .alt-sutun:nth-of-type(4) { padding-top: 10px; }
  .alt .alt-sutun:nth-of-type(3) .alt-tumu, .alt .alt-sutun:nth-of-type(4) .alt-tumu { white-space: nowrap; }
}

/* ---------------------------------------------------------------------
   129. MOBIL /fiyatlar TABLOSU + MOBIL METIN OLCEGI (kullanici, 2026-09-13)
   HATA (127 sonrasi): /fiyatlar tablosu `.endeks-tablo { min-width: 520px }`
   ile `.tablo-sar` yatay kaydirici icinde 520 px kalıyordu; 127'deki
   "etiket <-> deger" satiri degeri 523 px'e itti -> 360/375 px ekranda
   RAKAMLAR GORUNMUYORDU, kart sagdan kesikti. Mobilde min-width yok,
   kaydirici yok; satir kompakt kart: hizmet adi ustte, altinda 3 sutun
   (Baslangic / Ust aralik / Paket) kucuk etiket + deger.
   METIN: mobilde icerik bloklari sayfaya gore 13-16 px ve h2 20 px idi
   (hakkimizda, kategori katla-govde, sehir metin-kirpik, /fiyatlar
   metin-blok). Tek olcek: govde 14.5 px / 1.6, blok basligi 17 px.
   --------------------------------------------------------------------- */
@media (max-width: 640px) {
  .tablo-sar { overflow: visible; }
  .endeks-tablo { min-width: 0; width: 100%; }
  .endeks-tablo tbody tr {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 10px; row-gap: 0;
    padding: 10px 12px;
  }
  .endeks-tablo tbody th {
    grid-column: 1 / -1; margin: 0 0 8px; padding: 0 0 8px; border-bottom: 1px solid var(--cizgi);
    font-size: 14px;
  }
  .endeks-tablo tbody th a { display: inline; min-height: 0; line-height: 1.35; }
  .endeks-tablo tbody td.sayi,
  .endeks-tablo tbody td.sayi + td.sayi {
    display: block; margin: 0; padding: 0; border: 0;
    font: 700 14px/1.25 var(--f-baslik); color: var(--marka-koyu); text-align: left;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .endeks-tablo tbody td.sayi::before {
    display: block; margin: 0 0 2px; font: 600 10px/1.2 var(--f-govde);
    letter-spacing: .05em; text-transform: uppercase; color: var(--metin-3);
  }
  .endeks-tablo tbody td.sayi a { display: inline; min-height: 0; line-height: 1.25; }
  .endeks-tablo tbody td[colspan] {
    grid-column: 1 / -1; font: 600 13px/1.3 var(--f-govde); color: var(--metin-2);
  }
  .endeks-tablo tbody td[colspan]::before { content: none; }

  /* Mobil icerik metni tek olcek */
  .metin p, .metin li, .metin-blok p, .metin-blok li,
  .metin-kirpik, .katla-govde, .katla-govde p, .katla-govde li {
    font-size: 14.5px; line-height: 1.6;
  }
  .metin > h2, .metin-blok h2, .metin h2 { font-size: 17px; line-height: 1.3; margin-bottom: 8px; }
  .metin > h3, .metin-blok h3 { font-size: 15px; }
  .metin-blok { padding: 14px; }
  .kahraman > p { font-size: 15px; line-height: 1.55; }
}

/* ---------------------------------------------------------------------
   130. MOBIL YAZI VE FIYAT KUCULTME (kullanici, 2026-09-13: "mobilde
   yazilari kucult, fiyatlari vs"; /fiyatlar ekran goruntuleri)
   1. /fiyatlar sayfa sonu "Ucretsiz teklif al": eski .kapanis + dugme-buyuk,
      mobilde tam genislik ve iri -> icerik genisliginde, 40 px.
   2. .endeks-uyari: 14.5 px uzun kutu -> 13 px, dar dolgu, ince sol cizgi.
   3. /fiyatlar tablo karti: etiket 10 -> 9.5 px, rakam 14 -> 13 px, dolgu siki.
   4. Fiyat rakamlari (fiyat sayfasi tablo/ozet/yan kutu, paket karti) bir kademe kucuk.
   --------------------------------------------------------------------- */
@media (max-width: 640px) {
  .kapanis .kapanis-ic > .dugme,
  .kapanis .dugme.dugme-buyuk {
    width: auto; align-self: flex-start; min-height: 40px; padding: 8px 18px; font-size: 14px;
  }
  .endeks-uyari { font-size: 13px; line-height: 1.55; padding: 11px 12px 11px 13px; border-left-width: 3px; }

  .endeks-tablo tbody tr { padding: 8px 10px; margin-bottom: 6px; }
  .endeks-tablo tbody th { font-size: 13px; margin: 0 0 6px; padding: 0 0 6px; }
  .endeks-tablo tbody td.sayi,
  .endeks-tablo tbody td.sayi + td.sayi { font-size: 13px; }
  .endeks-tablo tbody td.sayi::before { font-size: 9.5px; margin-bottom: 1px; }
  .endeks-tablo tbody td[colspan] { font-size: 12.5px; }

  .fiyat-tablo tbody tr { padding: 9px 11px; }
  .fiyat-tablo tbody th { font-size: 13px; }
  .fiyat-tablo tbody td { font-size: 12.5px; }
  .fiyat-tablo tbody td.sayi { font-size: 14px; margin-top: 6px; padding-top: 6px; }
  .fy-ozet dd { font-size: 15px; }
  .fy-kutu-fiyat strong { font-size: 18px; }
  .paket-kart .pf2 .paket-fiyat-tutar { font-size: 16px; }
}

/* 130b. /fiyatlar tablosu hem .endeks-tablo hem .fiyat-tablo sinifli: 130'daki
   fiyat sayfasi kurali (.fiyat-tablo tbody td.sayi 14px + margin/padding-top 6px)
   ayni ozgullukte SONRA geldigi icin /fiyatlar'i da ezdi (rakam 14 px, kart 92 px).
   Ozgulluk artirilarak ayrildi. */
@media (max-width: 640px) {
  .endeks-tablo.fiyat-tablo tbody td.sayi,
  .endeks-tablo.fiyat-tablo tbody td.sayi + td.sayi {
    margin: 0; padding: 0; border: 0; font-size: 13px; line-height: 1.25;
  }
  .endeks-tablo.fiyat-tablo tbody tr { padding: 8px 10px; }
}

/* ---------------------------------------------------------------------
   131. MOBIL ICERIK METNI 13 px (kullanici, 2026-09-13: "mobilde bu tarz
   sabit yazilarin fontlarini kucult" - fiyat sayfasi metin bloklari).
   129'daki 14.5 px olcegi yerine hizmet sayfasi ve rehberde zaten kullanilan
   13 px: tum icerik bloklarinda tek olcek. Blok basligi 15.5 px.
   --------------------------------------------------------------------- */
@media (max-width: 640px) {
  .fy-metin p, .fy-metin li,
  .metin p, .metin li, .metin-blok p, .metin-blok li,
  .metin-kirpik, .katla-govde, .katla-govde p, .katla-govde li {
    font-size: 13px; line-height: 1.6;
  }
  .fy-metin > h2, .fy-ana > .fy-bolum > h2:first-child,
  .metin > h2, .metin-blok h2, .metin h2 { font-size: 15.5px; line-height: 1.3; }
  .fy-metin > h2 { margin: 18px 0 6px; }
  .fy-metin > h2:first-child { margin-top: 0; }
  .metin > h3, .metin-blok h3 { font-size: 14px; }
  .kahraman > p { font-size: 14px; }
}

/* ---------------------------------------------------------------------
   132. MOBIL KALAN IRI YAZILAR + CIPLER (kullanici, 2026-09-13)
   400 px taramasi (17 sayfa, govde metni > 14 px): /hizmetler kbolum-metin
   14.5 (10), hizmet sayfasi paket-ozet 14.5 ve yan3-baslik 15.5, /talep
   etiket 14.5 (12), yan-baslik 17, yan-not ve talep-not-ust 14.5.
   Cipler ("One cikan hizmetler"): "mobilde bir tik kucult".
   Form ALANLARI 16 px kalir (iOS odakta sayfayi buyutmesin); yalniz etiketler.
   Dokunma alani kural 9 (::after) ile korunur.
   --------------------------------------------------------------------- */
@media (max-width: 640px) {
  .kbolum-metin { font-size: 13px; line-height: 1.55; }
  .paket-ozet { font-size: 13px; }
  .yan3-baslik { font-size: 14.5px; }
  .yan-baslik { font-size: 15px; }
  .yan-not, .talep-not-ust { font-size: 13px; }
  label.alan, .alan > label, .alan > span:first-child { font-size: 13.5px; }
  .cip, .cipler .cip {
    padding: 5px 11px; min-height: 30px; font-size: 12.5px; line-height: 1.2;
  }
  .cipler { gap: 6px; }
}

/* ---------------------------------------------------------------------
   133. MOBIL ANA SAYFA KUCULTME + TEKRAR EDEN WA BLOGU (kullanici, 2026-09-13)
   a) "Kategoriye gore kesfet": sekme etiketi 14.5 -> 13 px; kategori bandi
      min 140 -> 100 px, ad 18 -> 15 px; vitrin kartlari seritte %72 -> %62,
      ad/ozet/fiyat bir kademe kucuk ("mobilde kucult").
   b) "Neden Sahnego": alt alta 4 madde ekrani dolduruyordu ("uyumsuz, kucult,
      sag sol kayabilir") -> yana kayan kompakt kartlar (Nasil calisir ile ayni dil).
   c) Sayfa sonu teklif karti (kapanis2) ile footer marka blogundaki
      "WhatsApp'tan yaz / Formla teklif iste" mobilde ust uste ayni gorunuyordu
      ("birini mobilde gizle") -> footer'daki gizli. Mobilde alttaki sabit
      WhatsApp/Teklif cubugu her sayfada oldugu icin iletisim yolu kaybolmaz.
   --------------------------------------------------------------------- */
@media (max-width: 640px) {
  .sekme-etiket { padding: 8px 10px; font-size: 13px; }
  .sekme-etiket small { font-size: 11px; }
  .sekme-bant { min-height: 100px; }
  .sekme-bant-govde { padding: 12px 14px; gap: 2px; }
  .sekme-bant-ad { font-size: 15px; }
  .sekme-bant-not { font-size: 12px; line-height: 1.4; }
  .sekme-bant-bag { font-size: 12.5px; margin-top: 2px; }

  .izgara-vitrin > * { flex: 0 0 62%; }
  .vk2-ad { font-size: 13.5px; }
  .vk2-not { font-size: 11.5px; line-height: 1.4; }
  .vk2-fiyat b { font-size: 13px; }
  .vk2-fiyat small { font-size: 9px; }

  .neden-serit { padding-top: 18px; padding-bottom: 18px; }
  .neden { gap: 14px; }
  .neden-etiket { font-size: 10px; }
  .neden-bas h2 { font-size: 17px; margin-bottom: 6px; }
  .neden-bas p { font-size: 13px; line-height: 1.5; }
  .neden-liste {
    display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory;
    margin-inline: calc(var(--b4) * -1); padding: 2px var(--b4) 4px; scrollbar-width: none;
  }
  .neden-liste::-webkit-scrollbar { display: none; }
  .neden-liste li {
    flex: 0 0 70%; scroll-snap-align: start; grid-template-columns: 30px 1fr; gap: 10px;
    padding: 12px; border: 1px solid var(--cizgi); border-radius: 12px; background: var(--yuzey);
  }
  .neden-ikon { width: 30px; height: 30px; border-radius: 8px; }
  .neden-ikon svg { width: 16px; height: 16px; }
  .neden-liste h3 { font-size: 13.5px; margin: 0 0 2px; }
  .neden-liste p { font-size: 12px; line-height: 1.45; }

  /* Yalniz sayfada ayni eylemi tasiyan bir blok varsa gizle. Olcum: alt cubuk
     YALNIZ hizmet sayfasinda; /hakkimizda gibi sayfalarda ne kart ne cubuk var.
     :has desteklemeyen tarayici dugmeleri gosterir (guvenli taraf). */
  body:has(.kapanis2, .kapanis, .alt-cubuk, .mobil-cubuk, .fy-kutu-eylem) .alt .alt-eylem { display: none; }
}

/* ---------------------------------------------------------------------
   134. MOBİL NOT PAKETİ (PROJECT/mobil-notlar.md, 10 madde — kullanıcı "uygula",
   2026-09-13). Ölçüm 400 px, sınıflar canlı DOM'dan alındı.
   --------------------------------------------------------------------- */
.vk2-dugme-kisa { display: none; }
@media (max-width: 640px) {
  .vk2-dugme-uzun { display: none; }
  .vk2-dugme-kisa { display: inline; }

  /* 1. Bölüm başlıkları tek boy: "Neden Sahnego" ve kapanış 17 px idi, diğerleri 16,5 */
  .neden-bas h2, .kapanis2 h2, .kapanis2-metin h2 { font-size: 16.5px; line-height: 1.3; }
  .neden-etiket { margin-bottom: 4px; }

  /* 2. Şehir şeridi: kart 219×140 (%57) → %44 × 110 */
  .sehir-serit .izgara-sehir > * { flex: 0 0 44%; }
  .sehir-serit .skart { min-height: 110px; }
  .sehir-serit .skart-ad { font-size: 14px; }
  .sehir-serit .skart-not { font-size: 11px; }
  .sehir-serit .alt-not-bosluk { margin-top: 10px; font-size: 12px; }

  /* 3. Keşfet: bant 100 → 80 px; kartlar %62 → %44, foto 16:10.
     Hiza: şerit kaydırıcısı `scroll-snap-align: start` yüzünden 16 px sola
     kaymış açılıyordu (kart 0 px, bant 16 px) → scroll-padding. */
  .izgara-vitrin, .izgara-paket, .izgara-kategori, .neden-liste, .akis, .izgara-sehir {
    scroll-padding-inline: var(--b4);
  }
  .sekme-bant { min-height: 80px; }
  .sekme-bant-govde { padding: 10px 12px; }
  .sekme-bant-ad { font-size: 14px; }
  .sekme-bant-not { font-size: 11.5px; }
  .sekme-bant-bag { font-size: 12px; }
  .sekme-panel .izgara-vitrin > * { flex: 0 0 44%; }
  .sekme-panel .vk2-gorsel { aspect-ratio: 16 / 10; }
  .sekme-panel .vk2-govde { padding: 8px 10px 0; }
  .sekme-panel .vk2-ad { font-size: 13px; }
  .sekme-panel .vk2-not { display: none; }
  .sekme-panel .vk2-fiyat b { font-size: 12px; }
  .sekme-panel .vk2-fiyat small { font-size: 8.5px; }
  .sekme-panel .vk2-alt { margin-inline: -10px; padding: 7px 10px; }
  .sekme-panel .vk2-alt-ust, .sekme-panel .vk2-dugme { font-size: 10.5px; }
  .sekme-panel .vk2-kaydet { width: 28px; height: 28px; }
  .sekme-panel .vk2-rozet { font-size: 9.5px; padding: 2px 6px; }

  /* 4. Footer marka bloğu */
  .alt .alt-marka { font-size: 16px; margin-bottom: 6px; }
  .alt .alt-marka-blok .alt-not { font-size: 12.5px; line-height: 1.5; }
  .alt .alt-odeme { margin-top: 12px; }

  /* 5. /fiyatlar: kategori başına tek liste kutusu, satır = ad ↔ fiyat'tan / N paket ↔ üst sınır */
  .endeks-tablo.fiyat-tablo {
    border: 1px solid var(--cizgi); border-radius: 12px; overflow: hidden; background: var(--yuzey);
  }
  .endeks-tablo.fiyat-tablo tbody tr {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; row-gap: 1px;
    margin: 0; padding: 9px 12px; border: 0; border-radius: 0; background: none;
  }
  .endeks-tablo.fiyat-tablo tbody tr + tr { border-top: 1px solid var(--cizgi); }
  .endeks-tablo.fiyat-tablo tbody th {
    grid-column: 1; grid-row: 1; margin: 0; padding: 0; border: 0;
    font: 600 13px/1.35 var(--f-govde);
  }
  .endeks-tablo.fiyat-tablo tbody td.sayi,
  .endeks-tablo.fiyat-tablo tbody td.sayi + td.sayi {
    margin: 0; padding: 0; border: 0; overflow: visible; white-space: nowrap;
  }
  .endeks-tablo.fiyat-tablo tbody td.sayi::before { content: none; }
  .endeks-tablo.fiyat-tablo tbody td.endeks-alt {
    grid-column: 2; grid-row: 1; text-align: right;
    font: 700 13px/1.35 var(--f-baslik); color: var(--marka-koyu);
  }
  .endeks-tablo.fiyat-tablo tbody td.endeks-alt::after { content: '\2019den'; font-weight: 600; }
  .endeks-tablo.fiyat-tablo tbody td[data-etiket="Paket"],
  .endeks-tablo.fiyat-tablo tbody td[data-etiket="Paket"] a {
    grid-column: 1; grid-row: 2; font: 400 11px/1.3 var(--f-govde); color: var(--metin-2);
  }
  .endeks-tablo.fiyat-tablo tbody td[data-etiket="Üst aralık"] {
    grid-column: 2; grid-row: 2; text-align: right; font: 400 11px/1.3 var(--f-govde); color: var(--metin-2);
  }
  .endeks-tablo.fiyat-tablo tbody td[data-etiket="Üst aralık"]::before { content: 'üst sınır '; display: inline; font: inherit; letter-spacing: 0; text-transform: none; color: inherit; }
  .endeks-tablo.fiyat-tablo tbody td.endeks-bos { display: none; }
  .endeks-tablo.fiyat-tablo tbody td[colspan] { grid-column: 2; grid-row: 1; text-align: right; font: 600 12px/1.35 var(--f-govde); }
  .endeks-tablo .daha-dugme, .fy-bolum .daha-dugme {
    min-height: 32px; margin-top: 8px; padding: 5px 12px; font-size: 12px;
  }

  /* 6–7. Formlar (/talep, /degerlendirme, yan panel formu, WA penceresi) */
  .form .ipucu, .talep-form .ipucu, .yan-form .ipucu, .wa-pencere .ipucu {
    display: block; margin-top: 4px; font-size: 12px; font-weight: 400; line-height: 1.45; color: var(--metin-2);
  }
  .form .alan > label, .form label.alan > span, .yan-form label, .wa-pencere label { font-size: 13px; font-weight: 600; }
  .form .alan, .form label.alan { margin: 0 0 14px; }
  .form input:not([type=checkbox]):not([type=radio]):not([type=hidden]),
  .form select, .yan-form input:not([type=checkbox]):not([type=radio]):not([type=hidden]),
  .yan-form select, .wa-pencere input:not([type=checkbox]):not([type=radio]), .wa-pencere select {
    height: 42px; min-height: 42px; padding: 0 12px; border-radius: 10px; font-size: 16px;
  }
  .form textarea, .yan-form textarea, .wa-pencere textarea { min-height: 84px; padding: 10px 12px; border-radius: 10px; font-size: 16px; }
  .form fieldset.form-grup { padding: 2px 14px 12px; margin-bottom: 12px; }
  .form fieldset.form-grup legend { font-size: 11px; }
  .form fieldset.form-grup legend svg { width: 14px; height: 14px; }
  .form .form-not, .form label:has(> input[type=checkbox]) { font-size: 12.5px; line-height: 1.5; }
  .talep-gonder .dugme, .form button.dugme { min-height: 42px; font-size: 14px; }

  /* 8. Şehir sayfası hizmet listesi (.hliste): 57 px ortalı kutu + turuncu hap → sade satır */
  .hliste a {
    display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px;
    min-height: 44px; padding: 7px 10px; text-align: left;
    border: 1px solid var(--cizgi); border-radius: 10px; background: var(--yuzey);
  }
  .hliste-ad { font-size: 12.5px; font-weight: 600; line-height: 1.3; text-align: left; }
  .hliste-fiyat {
    padding: 0; border: 0; border-radius: 0; background: none;
    font-size: 11px; font-weight: 700; color: var(--marka-koyu);
  }
  .hliste { gap: 6px; }

  /* 9. Blog/rehber yazısı kapak görseli: kenardan kenara 241 px → içerik genişliği, 16:9, ≤200 px */
  .yazi-kapak { margin: 12px 0; border-radius: 12px; overflow: hidden; }
  .yazi-kapak img { display: block; width: 100%; height: auto; max-height: 200px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 0; }
  article .kahraman h1 { font-size: 19px; line-height: 1.25; }
  article .kahraman > p { font-size: 13.5px; }
  article .metin h2 { font-size: 15.5px; }
  article .metin h3 { font-size: 14px; }

  /* 10. Yazı sonu düğmeleri + ilgili yazılar */
  .kahraman-dugmeler { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-start; }
  .kahraman-dugmeler .dugme { flex: 0 0 auto; width: auto; min-height: 38px; padding: 7px 14px; font-size: 13.5px; }
  a:has(> .ilgili-tur) { min-height: 40px; padding: 8px 12px; gap: 10px; font-size: 13px; line-height: 1.35; }
}

/* 134b. OLCUM SONRASI DUZELTMELER (400/360 px):
   - /talep .ipucu hala 14.5 px kalin: daha ozgul `.alan span` kurali eziyordu -> ozgulluk artti.
   - /fiyatlar "'den": CSS kacisi '9den' "2019de" diye 6 hane okunup bozuk karakter basti -> '9 den'.
   - /fiyatlar endeks-bos 12 satirda gorunuyordu: `td.sayi + td.sayi` (0,3,3) > secicim (0,3,2).
   - daha-dugme 44 px kaldi (dokunma kurali) -> gorunen 32 px (dokunma alani ::after, kural 9).
   - Yazi sonu dugmeleri: `.yazi-kapanis .kahraman-dugmeler .dugme` (0,3,0) eziyordu.
   - /degerlendirme YATAY TASMA (762 px): yildiz secimindeki radio input'lar `.alan input`
     genislik %100 + 46 px aliyordu, fieldset min-width: min-content -> gorsel gizli, fieldset min 0.
   - .hliste kutu 59 px: fiyat eski hap kuralindan flex + yukseklik -> satir ici.
   - Kesfet kartlarinda 4 hizmet adi kesikti -> panel kartlarinda "Incele" gizli, ad tam genislik. */
@media (max-width: 640px) {
  .form .alan span.ipucu, .form .alan .ipucu, .talep-form .alan .ipucu, main form .ipucu {
    display: block; margin-top: 4px; font-size: 12px; font-weight: 400; line-height: 1.45; color: var(--metin-2);
  }
  .endeks-tablo.fiyat-tablo tbody td.endeks-alt::after { content: '9 den'; }
  .endeks-tablo.fiyat-tablo tbody td.sayi.endeks-bos,
  .endeks-tablo.fiyat-tablo tbody td.sayi + td.sayi.endeks-bos { display: none; }
  .endeks-tablo .daha-dugme, .fy-bolum .daha-dugme, button.daha-dugme {
    height: 32px; min-height: 0; padding: 0 12px; font-size: 12px; line-height: 30px; position: relative;
  }
  button.daha-dugme::after { content: ''; position: absolute; left: 0; right: 0; top: -6px; bottom: -6px; }
  .yazi-kapanis .kahraman-dugmeler, .kapanis .kahraman-dugmeler {
    flex-direction: row; align-items: center; flex-wrap: wrap; gap: 8px;
  }
  .yazi-kapanis .kahraman-dugmeler .dugme, .kapanis .kahraman-dugmeler .dugme {
    flex: 0 0 auto; width: auto; min-height: 38px; padding: 7px 14px; font-size: 13.5px;
  }
  .form fieldset { min-width: 0; }
  .puan-secim { flex-wrap: wrap; }
  .puan-secim input, .form .puan-secim input {
    position: absolute; width: 1px; height: 1px; min-height: 0; margin: 0; padding: 0; opacity: 0; overflow: hidden;
  }
  .puan-secim label { position: relative; }
  .hliste .hliste-fiyat { display: inline; min-height: 0; height: auto; line-height: 1.3; }
  .hliste a { gap: 0; padding: 6px 10px; }
  .sekme-panel .vk2-dugme { display: none; }
  .sekme-panel .vk2-alt-ust { max-width: 100%; }
}

/* 134c. "’den" eki: CSS hex kacisi iki denemede de bozuk basildi ("9 den") -> kacis yok,
   UTF-8 dosyada harf dogrudan. Kesfet paneli 360 px'te 4/4 hizmet adi kesikti -> 2 satira kadar. */
@media (max-width: 640px) {
  .endeks-tablo.fiyat-tablo tbody td.sayi.endeks-alt::after { content: "’den"; font-weight: 600; }
  .sekme-panel .vk2-alt-ust {
    white-space: normal; overflow: hidden; text-overflow: clip;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.3;
  }
}

/* ---------------------------------------------------------------------
   135. MOBİL NOT PAKETİ 2 (mobil-notlar.md 11–17, kullanıcı "uygula", 2026-09-13)
   Önceki turda 7 kural özgüllükten kaybetti → bu blokta her seçici `:root` ile
   (+0,1,0) başlar. Değerler 400 px canlı ölçümden.
   --------------------------------------------------------------------- */
@media (max-width: 640px) {
  /* 11. /talep formu (tüm gruplar): alan 42 → 38 px (yazı 16 px, iOS), etiket 12,5,
     alan arası düzensizdi (16 / 30 px) → 12 px eşit. */
  :root main form .alan { margin: 0 0 12px; }
  :root main form .alan + .alan { margin-top: 0; }
  :root main form .alan > label { font-size: 12.5px; line-height: 1.4; margin-bottom: 4px; }
  :root main form .alan .ipucu { margin: 3px 0 0; font-size: 11.5px; }
  :root main form input:not([type=checkbox]):not([type=radio]):not([type=hidden]),
  :root main form select { height: 38px; min-height: 38px; padding: 0 11px; font-size: 16px; }
  :root main form textarea { min-height: 76px; padding: 8px 11px; }
  :root main form fieldset.form-grup { padding: 2px 12px 10px; margin-bottom: 10px; }
  :root main form fieldset.form-grup legend { font-size: 10.5px; padding: 0 6px; }
  :root main form .grup-ikon { width: 22px; height: 22px; }
  :root main form .grup-ikon svg { width: 12px; height: 12px; }
  :root main .talep-gonder .dugme { min-height: 40px; font-size: 13.5px; }

  /* 12. /talep giriş bloğu + yan bölümler */
  :root .kahraman-hizmet h1 { font-size: 17px; line-height: 1.25; }
  :root .kahraman-hizmet .bolum-etiket, :root .kahraman-hizmet .kahraman-etiket { font-size: 10px; }
  :root p.talep-giris { font-size: 13px; line-height: 1.5; }
  :root .hizmet-govde section.bolum h2 { font-size: 15.5px; }
  :root .hizmet-govde section.bolum p, :root .hizmet-govde section.bolum li { font-size: 12.5px; line-height: 1.5; }
  :root p.talep-not-ust { font-size: 12.5px; }

  /* 13. /hizmetler kategori bölüm başı */
  :root .kbolum-metin h2 { font-size: 15.5px; line-height: 1.3; margin-bottom: 2px; }
  :root .kbolum-metin > p { font-size: 11.5px; line-height: 1.4; color: var(--metin-2); margin: 0; }
  :root .kbolum-ic .dugme.dugme-cam {
    min-height: 0; height: auto; padding: 0; border: 0; background: none; box-shadow: none;
    font-size: 12.5px; font-weight: 600; color: var(--marka);
  }
  :root .kbolum-ic .dugme.dugme-cam::after { content: ' →'; }
  :root .hliste a { border-color: var(--cizgi); }
  :root .hliste a::before { content: none; display: none; }

  /* 14. Ana sayfa kategori kartları: %57 × 150 → %40 × 110 */
  :root .izgara-kategori.kk-bento > .kk2 { flex: 0 0 40%; min-height: 110px; }
  :root .kk2 .kk2-govde { padding: 0 10px 9px; gap: 4px; }
  :root .kk2 .kk2-ad { font-size: 13px; }
  :root .kk2 .kk2-not { font-size: 10.5px; }
  :root .kk2 .kk2-dugme { height: 20px; padding: 0 7px; font-size: 10px; }

  /* 15. "Neden Sahnego" bloğu: etiket 13 px 700 ve açıklama 13 px 700 idi (133 tutmadı) */
  :root .neden-bas .neden-etiket { font-size: 10px; font-weight: 600; letter-spacing: .08em; margin: 0 0 4px; }
  :root .neden-bas h2 { font-size: 16.5px; font-weight: 700; line-height: 1.3; margin: 0 0 4px; }
  :root .neden-bas p { font-size: 12.5px; font-weight: 400; line-height: 1.5; }

  /* 16. Hizmet sayfası galerisi: kare %53 × 150 → %40 × ~105 */
  :root .izgara-galeri > .galeri-kare { flex: 0 0 40%; }
  :root .izgara-galeri .galeri-kare img { height: 105px; }
  :root .galeri-kare .galeri-atif {
    font-size: 10px; line-height: 1.35;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }

  /* 17. Hizmet sayfası teklif paneli */
  :root .yan-v3 { padding: 14px 12px 12px; }
  :root .yan-v3 .yan3-ust { font-size: 10px; }
  :root .yan-v3 .yan3-baslik { font-size: 14px; }
  :root .yan-v3 .yan3-fiyat-satir strong { font-size: 17px; }
  :root .yan-v3 .yan3-fiyat-kdv { font-size: 11px; }
  :root .yan-v3 .yan3-fiyat-alt { font-size: 11.5px; }
  :root .yan-v3 .yan-ozellik {
    margin: 0 0 12px; padding: 0; list-style: none;
    border: 1px solid var(--cizgi); border-radius: 10px; overflow: hidden;
  }
  :root .yan-v3 .yan-ozellik li { position: relative; margin: 0; padding: 6px 10px 6px 30px; font-size: 12.5px; line-height: 1.4; }
  :root .yan-v3 .yan-ozellik li + li { border-top: 1px solid var(--cizgi); }
  :root .yan-v3 .yan3-ana { min-height: 40px; font-size: 13px; }
  :root .yan-v3 .yan3-ikincil { min-height: 36px; font-size: 13px; }
}

/* 135b. Olcum sonrasi: (1) /talep alan arasi 16/28/28 px -- 135'teki margin kapsayicinin
   kendi gap'ine eklendi -> margin 0, aralik tek yerden (gap 12). (2) Galeri seridi
   kenara yapisik aciliyordu (scroll-padding listesinde yoktu). (3) Tek paket ozellik
   kutusunda onay isareti cerceveye 2 px -> 11 px. */
@media (max-width: 640px) {
  :root main form .alan, :root main form .alan + .alan { margin: 0; }
  :root main form fieldset.form-grup, :root main form .form-satir { display: grid; gap: 12px; }
  :root .izgara-galeri { scroll-padding-inline: var(--b4); }
  :root .yan-v3 .yan-ozellik li::before { left: 11px; }
}

/* 135c. Form alanlari hala iri (kullanici: "formlari neden kucultmedin?"). 135'te yazi
   16 px birakilmisti (iOS odak yakinlastirmasi); kullanici kucuk istiyor -> alan 34 px,
   yazi 14 px. Bedeli: iPhone'da alana dokununca sayfa hafifce yakinlasabilir (bilincli). */
@media (max-width: 640px) {
  :root main form input:not([type=checkbox]):not([type=radio]):not([type=hidden]),
  :root main form select {
    height: 34px; min-height: 34px; padding: 0 10px; font-size: 14px; line-height: 1.2; border-radius: 9px;
  }
  :root main form input[type=date] { padding-right: 6px; }
  :root main form textarea { min-height: 72px; padding: 8px 10px; font-size: 14px; border-radius: 9px; }
  :root main form select { background-position: right 8px center; }
}

/* 135d. Vitrin karti kucultme TUM seritlere (kullanici: "One cikan paketler resimlerini de
   kucult"). 134'te yalniz .sekme-panel'e yazilmisti; ayni kart ana sayfa "One cikan
   paketler" ve sehir sayfasi paket seritlerinde de var -> tum .izgara-vitrin. */
@media (max-width: 640px) {
  :root .izgara-vitrin > * { flex: 0 0 44%; }
  :root .izgara-vitrin .vk2-gorsel { aspect-ratio: 16 / 10; }
  :root .izgara-vitrin .vk2-govde { padding: 8px 10px 0; }
  :root .izgara-vitrin .vk2-ad { font-size: 13px; }
  :root .izgara-vitrin .vk2-not { display: none; }
  :root .izgara-vitrin .vk2-fiyat { left: 8px; bottom: 6px; }
  :root .izgara-vitrin .vk2-fiyat b { font-size: 12px; }
  :root .izgara-vitrin .vk2-fiyat small { font-size: 8.5px; }
  :root .izgara-vitrin .vk2-alt { margin-inline: -10px; padding: 7px 10px; }
  :root .izgara-vitrin .vk2-alt-ust {
    font-size: 10.5px; white-space: normal; overflow: hidden; text-overflow: clip;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.3;
  }
  :root .izgara-vitrin .vk2-dugme { display: none; }
  :root .izgara-vitrin .vk2-kaydet { width: 28px; height: 28px; top: 6px; right: 6px; }
  :root .izgara-vitrin .vk2-kaydet svg { width: 14px; height: 14px; }
  :root .izgara-vitrin .vk2-rozet { top: 6px; left: 6px; font-size: 9.5px; padding: 2px 6px; }
}

/* ---------------------------------------------------------------------
   136. SITE GENELI DENETIM DUZELTMELERI (salt-okur denetim ajani raporu,
   28 sayfa x 320/360/400/900/1366, 2026-09-13) + kullanici: "mobilde Neden
   Sahnego alanini gizle". Mobil olcek: sahnego-mobil-stil hafizasi.
   --------------------------------------------------------------------- */
/* Tum genislikler */
:root .puan-secim input {
  position: absolute; width: 1px; height: 1px; min-height: 0; margin: 0; padding: 0;
  opacity: 0; overflow: hidden; clip-path: inset(50%);
}
:root .puan-secim label { position: relative; }
:root .wa-yuzen-rozet { background: var(--marka); }

@media (max-width: 640px) {
  /* H: atla baglantisi mobilde satir kapliyordu -> 22 px ust bosluk */
  :root a.atla:not(:focus) { position: absolute; left: -9999px; top: 0; }

  /* H: ust bilgi 320/360'ta 3 satir 152 px -> 2 siki satir */
  :root .ust .ust-ic { column-gap: 8px; row-gap: 0; padding-top: 6px; padding-bottom: 0; }
  :root .ust .marka { font-size: 19px; min-height: 36px; }
  :root .ust .marka img, :root .ust .marka svg { width: 26px; height: 26px; }
  :root .ust .ust-eylem { gap: 6px; }
  :root .ust .ust-eylem .ikon-dugme { width: 32px; height: 32px; }
  :root .ust .ust-eylem .ikon-dugme svg { width: 15px; height: 15px; }
  :root .ust .ust-eylem > a.dugme { min-height: 32px; height: 32px; padding: 0 11px; font-size: 12.5px; }
  :root .ust nav.ust-menu .ust-bag { min-height: 34px; padding: 0 9px; font-size: 13px; }
  :root .ust nav.ust-menu .ust-bag svg { width: 15px; height: 15px; }

  /* Kullanici: Neden Sahnego mobilde gizli */
  :root .neden-serit { display: none; }

  /* H: tam genislik olmamasi gereken dugmeler */
  :root .vitrin-eylem { display: flex; flex-wrap: wrap; gap: 8px; }
  :root .vitrin-eylem > a.dugme, :root .vitrin .vitrin-eylem .dugme { width: auto; flex: 0 0 auto; min-height: 38px; padding: 0 14px; font-size: 13px; }
  :root section.metin button.daha-dugme, :root button.katla-dugme {
    width: auto; height: 32px; min-height: 0; padding: 0 12px; font-size: 12px; line-height: 30px;
  }
  /* 2026-09-14: katla-dugme zeminsiz/cerceveli degil; 12px ic bosluk yaziyi
     paragrafin 12px icine itiyordu (hizmet, sehir, rehber). Dokunma alani ::after ile. */
  :root button.katla-dugme, :root section.metin button.daha-dugme { padding: 0; }
  :root .talep-gonder > a.dugme { width: auto; align-self: flex-start; min-height: 36px; font-size: 13px; }
  :root .kahraman .kahraman-dugmeler { flex-direction: row; flex-wrap: wrap; gap: 8px; }
  :root .kahraman .kahraman-dugmeler .dugme { width: auto; flex: 0 0 auto; min-height: 38px; font-size: 13px; }

  /* M: dugme yukseklikleri */
  :root form.ara-form button.dugme, :root form.vitrin-ara button { min-height: 38px; height: 38px; font-size: 13.5px; }

  /* M: bolum basliklari tek boy 16 px; H1 en fazla 19 */
  :root main h2, :root .metin-blok h2, :root .bolum-ust h2, :root .galeri h2, :root section.bolum h2,
  :root section.kapanis h2, :root .kapanis2 h2, :root .fy-bolum h2, :root .kbolum-metin h2 {
    font-size: 16px; line-height: 1.3;
  }
  :root section.vitrin .vitrin-ic > h1 { font-size: 19px; line-height: 1.25; }
  :root section.kahraman h1 { font-size: 19px; line-height: 1.25; }

  /* M: yana kayan seritler en fazla ~%50, ilk kart hizali */
  :root ol.akis > li, :root .akis > .akis-adim { flex: 0 0 48%; }
  :root .neden-liste li { flex: 0 0 48%; }
  :root .sekme-baslik .sekme-etiket { flex: 0 0 auto; width: auto; }
  :root section.paketler .izgara-paket > *, :root .paketler .serit-sarmal > .izgara > * { flex: 0 0 60%; }
  :root .serit-sarmal > .izgara > .vkart, :root .serit-sarmal > .izgara:not(.izgara-paket) > * { flex: 0 0 44%; }
  :root ol.adimlar { scroll-padding-inline: var(--b4); }
  :root ol.adimlar > li { flex: 0 0 48%; }
  :root .serit-sarmal > .izgara, :root .sekme-baslik, :root ol.adimlar { scroll-padding-inline: var(--b4); }

  /* M: aciklama ve ipucu yazilari */
  :root aside.hizmet-yan p.yan-baslik, :root p.yan-baslik { font-size: 14px; }
  :root p.yan-not, :root aside .yan-not, :root p.yan-alt-not { font-size: 12px; }
  :root section.kapanis p, :root section.kahraman > p { font-size: 13px; line-height: 1.5; }
  :root main .kap > div.fy-not p, :root div.fy-not p { font-size: 12.5px; }
  :root section.kahraman p.alt-not, :root p.akis-not, :root p.deg-davet-not, :root p.form-not,
  :root p.fy-kutu-not, :root p.adim-not, :root p.a-not, :root span.vkart-not, :root footer p.alt-not,
  :root .alt .alt-marka-blok .alt-not { font-size: 12px; font-weight: 400; }
  :root h2 > small.ara-sayi, :root h3.sehir-kat > small, :root span.vkart-fiyat > small, :root label.sekme-etiket > small { font-weight: 400; }
  :root section.bolum a.kart > p.kart-ad {
    font-size: 13.5px; white-space: normal; overflow: hidden; text-overflow: clip;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  }

  /* M: buyuk harf etiketler */
  :root h3.sehir-kat { font-size: 10.5px; }
  :root table.fiyat-tablo thead th, :root table.fiyat-tablo caption { font-size: 10.5px; }
  :root footer p.alt-odeme-baslik, :root .alt .alt-odeme-baslik { font-size: 10.5px; }

  /* M: hizmet sayfasinda yuzen WhatsApp alt cubukla ust uste */
  :root body:has(.alt-cubuk) .wa-yuzen { display: none; }

  /* L: kesilen adlar mobilde 2 satir */
  :root .izgara-vitrin h3.vk2-ad, :root span.vkart-ad {
    white-space: normal; overflow: hidden; text-overflow: clip;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  }
  :root figcaption.galeri-atif { white-space: normal; overflow: visible; text-overflow: clip; }

  /* L: hap baglar en fazla 32 px */
  :root nav.dizin-gezinme a { min-height: 30px; padding-block: 5px; }
  :root nav.sayfalama a.sayfalama-bag { min-height: 32px; height: 32px; }
  :root section.bolum li > a.cip { min-height: 30px; }
}

/* 136b. Kullanici notlari (ayni tur): sayfa sonu karti dugmesi + form bagi kucuk;
   liste sayfasi fotografli ust alan dikeyde kisa; eski kapanis "Ucretsiz teklif al" kucuk. */
@media (max-width: 640px) {
  :root .kapanis2-eylem { gap: 8px 14px; }
  :root .kapanis2-eylem .dugme { min-height: 32px; height: 32px; padding: 0 12px; font-size: 12.5px; }
  :root .kapanis2-eylem .dugme svg { width: 14px; height: 14px; }
  :root .kapanis2-eylem a:not(.dugme), :root .kapanis2-bag { font-size: 12.5px; }
  :root .kapanis .kapanis-ic > .dugme, :root .kapanis .dugme.dugme-buyuk {
    min-height: 32px; height: 32px; padding: 0 14px; font-size: 12.5px;
  }
  :root .vitrin-ic-sayfa .kap { padding-top: 0; }
  :root .vitrin-ic-sayfa .kirinti { margin: 0; padding-top: 8px; font-size: 10.5px; }
  :root .vitrin-ic-sayfa .vitrin-ic { padding-top: 8px; padding-bottom: 12px; }
  :root .vitrin-ic-sayfa .bolum-etiket { margin-bottom: 2px; }
  :root .vitrin-ic-sayfa h1, :root section.vitrin.vitrin-ic-sayfa .vitrin-ic > h1 { font-size: 17px; margin-bottom: 4px; }
  :root .vitrin-ic-sayfa .vitrin-alt {
    margin: 0; font-size: 12px; line-height: 1.45;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  :root .vitrin-ic-sayfa .vitrin-eylem { margin-top: 8px; }
  :root .vitrin-ic-sayfa .vitrin-eylem .dugme { min-height: 32px; height: 32px; font-size: 12.5px; }
}

/* 136c. /talep "Teklif talebi gonder" mobilde tam genislik 42 px -> icerik genisliginde 36 px
   (kullanici: "bu buton da kucul"). Birincil eylem oldugu icin turuncu kalir. */
@media (max-width: 640px) {
  :root main form .talep-gonder { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
  :root main form .talep-gonder button.dugme, :root main .talep-gonder .dugme-buyuk {
    width: auto; flex: 0 0 auto; min-height: 36px; height: 36px; padding: 0 18px; font-size: 13px;
  }
  :root main form .talep-gonder a.dugme { min-height: 36px; height: 36px; padding: 0 12px; font-size: 12.5px; }
  :root main form label:has(> input[type=checkbox]) { font-size: 12px; }
}

/* 136d. Olcum sonrasi kalanlar: (1) ana sayfa hero dugmeleri hala tam genislik -- kap sutun
   yonlu flex, cocuklari esnetiyordu -> satir yonu. (2) 320 px ust bilgi 119 px (1. satir
   sariyordu) -> 360 alti konum ikonu gizli. (3) hizmet sayfasi h2 15.5/16 karisik --
   135'teki .hizmet-govde section.bolum h2 daha ozguldu. (4) /talep ilk alan arasi 28 px. */
@media (max-width: 640px) {
  :root section.vitrin .vitrin-eylem, :root .vitrin .vitrin-eylem {
    flex-direction: row; align-items: center; justify-content: flex-start;
  }
  :root section.vitrin .vitrin-eylem > .dugme { width: auto; max-width: none; align-self: auto; }
  :root .hizmet-govde section.bolum h2, :root .hizmet-govde section h2 { font-size: 16px; }
  :root main form .form-satir, :root main form .form-satir + .alan, :root main form .alan + .form-satir { margin: 0; }
}
@media (max-width: 359px) {
  :root .ust .ust-eylem > .ikon-dugme:first-child { display: none; }
}

/* 136e. Kullanici notlari: /talep "Gonderdikten sonra ne oluyor?" adim kartlari uyumsuz
   (numara basliga biniyor, baslik-metin arasi bosluk, metin kesik); ana sayfa "Nasil
   calisir" kartlarinda metin uzun -> "3 satirdan sonra gizle". */
@media (max-width: 640px) {
  :root ol.adimlar > li {
    display: block; position: relative; padding: 10px 10px 10px 36px; min-height: 0; height: auto;
  }
  :root ol.adimlar > li::before {
    position: absolute; left: 10px; top: 10px; margin: 0;
    width: 18px; height: 18px; line-height: 18px; font-size: 10px; text-align: center;
  }
  :root ol.adimlar .adim-ad { margin: 0 0 2px; font-size: 12.5px; line-height: 18px; }
  :root ol.adimlar .adim-not {
    margin: 0; font-size: 11.5px; line-height: 1.45; text-overflow: clip;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  }
  :root .akis .akis-not {
    font-size: 11.5px; line-height: 1.45;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  }
  :root .akis .akis-ad { font-size: 13px; margin: 8px 0 2px; }
}

/* 136f. Ust bilgi 320 px'te hala 3 satir 119 px: gercek siniflar a.ust-konum ve a.ust-ikon
   (136'daki .ikon-dugme hedefi yanlisti). marka 133 + eylem 165 + bosluk > 289 px.
   Tum mobilde ikonlar 32 px; 360 alti konum ikonu gizli. */
@media (max-width: 640px) {
  :root .ust .ust-eylem > a.ust-konum, :root .ust .ust-eylem > a.ust-ikon {
    width: 32px; height: 32px; min-height: 0;
  }
  :root .ust .ust-eylem > a.ust-konum svg, :root .ust .ust-eylem > a.ust-ikon svg { width: 15px; height: 15px; }
}
@media (max-width: 359px) {
  :root .ust .ust-eylem > a.ust-konum { display: none; }
}

/* 136g. Kategori/liste ust alani cok sikisti (kullanici: "cok sikismis, rahatlat, her sey ic
   ice girmis") -- 136b dikey kisaltmada bosluklar asiri kucultuldu. Yazi boylari ayni,
   yalniz aralar rahat. */
@media (max-width: 640px) {
  :root .vitrin-ic-sayfa .kirinti { padding-top: 12px; margin-bottom: 0; line-height: 1.5; }
  :root .vitrin-ic-sayfa .vitrin-ic { padding-top: 14px; padding-bottom: 18px; }
  :root .vitrin-ic-sayfa .bolum-etiket { margin-bottom: 6px; line-height: 1.4; }
  :root .vitrin-ic-sayfa h1, :root section.vitrin.vitrin-ic-sayfa .vitrin-ic > h1 { margin-bottom: 8px; line-height: 1.25; }
  :root .vitrin-ic-sayfa .vitrin-alt { line-height: 1.55; }
  :root .vitrin-ic-sayfa .vitrin-eylem { margin-top: 14px; gap: 8px; }
  :root .vitrin-ic-sayfa .vitrin-not { margin-top: 14px; font-size: 11px; line-height: 1.5; }
}

/* 137. Genel tarama turu (2026-09-14). Hizmet sayfasinda kapak ile sekme menusu
   arasinda 41px bos serit vardi: .hizmet-duzen padding-top 24 + .hizmet-govde
   padding-top 16 + ust cizgi 1. Sekme menusu govdenin ilk cocuguysa kapagin
   hemen altina oturur (uygulama havasi); sekmesiz sayfalar etkilenmez. */
@media (max-width: 640px) {
  :root .hizmet-duzen:has(> .hizmet-govde > .hsekme:first-child) { padding-top: 0; }
  :root .hizmet-govde:has(> .hsekme:first-child) { padding-top: 0; border-top: 0; }
}

/* 137b. /fiyatlar "Bu tabloyu kaynak gösterin" — tek çerçeve, sakin yeşil vurgu. */
.atif-kutu {
  margin-top: var(--b7); padding: var(--b5) var(--b6);
  border: 1px solid var(--cizgi); border-radius: var(--r); background: var(--yuzey);
}
.atif-kutu h2 { margin: 0 0 var(--b2); }
.atif-kutu p { margin: 0; color: var(--metin-2); }
.atif-kod {
  margin: var(--b3) 0 var(--b2); padding: 10px 12px; border-radius: var(--r-sm);
  background: var(--marka-acik); color: var(--marka-koyu);
  border: 1px solid color-mix(in srgb, var(--marka) 25%, transparent);
  font: 500 13px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: pre-wrap; word-break: break-all; user-select: all; -webkit-user-select: all; cursor: text;
}
.atif-kutu .atif-not { font-size: 12.5px; color: var(--metin-3); }
@media (max-width: 640px) {
  :root .atif-kutu { margin-top: 24px; padding: 12px 14px; }
  :root .atif-kutu p { font-size: 12.5px; }
  :root .atif-kod { font-size: 11.5px; padding: 8px 10px; }
  :root .atif-kutu .atif-not { font-size: 11px; }
}

/* 137c. Rehber/blog yazısı üst alanı (58 sayfa, rehber/goster.php). Mobilde üst
   menüden H1'e 189 px vardı: .hizmet-duzen 24 + .hizmet-govde 16 + .kirinti 20 +
   kırıntı 116 px (yazı başlığı kırıntıda ikinci kez, 4 satıra sarıyordu) +
   .kahraman 32. Kırıntının son öğesi tek satırda kırpılır (tam başlık zaten H1'de,
   BreadcrumbList şeması ayrı), dış boşluklar uygulama ölçeğine iner. */
@media (max-width: 640px) {
  :root .hizmet-duzen:has(> .hizmet-govde > .kirinti + article) { padding-top: 0; }
  :root .hizmet-govde:has(> .kirinti + article) { padding-top: 10px; border-top: 0; }
  :root .hizmet-govde > .kirinti:has(+ article) { padding-top: 0; flex-wrap: nowrap; align-items: baseline; white-space: nowrap; }
  :root .hizmet-govde > .kirinti:has(+ article) > span { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  :root .hizmet-govde > .kirinti + article > section.kahraman { padding-top: 12px; }
}

/* 137d. Aynı kalıbın statik sayfa hâli (statik/goster.php: hakkımızda, iletişim, kvkk,
   gizlilik, kullanım koşulları, nasıl çalışır): .kap > .kirinti + section.kahraman.
   Üst menüden H1'e 87 px → kırıntı 20 + kahraman 32 dolgusu uygulama ölçeğine iner. */
@media (max-width: 640px) {
  :root .kap > .kirinti:has(+ section.kahraman) { padding-top: 12px; }
  :root .kap > .kirinti + section.kahraman { padding-top: 10px; }
}

/* 138. Rakip analizi eklemeleri (2026-09-15): fiyat kutusunda form (yan-v3 ile aynı dil,
   sakin ikincil), "veya arayın" satırı, fiyat notunda son güncelleme, iletişim kanalları. */
.fy-kutu .fy-form { margin-top: 8px; }
.fy-kutu .fy-form > summary.yan3-ikincil {
  display: flex; align-items: center; justify-content: center; min-height: 40px;
  border: 1px solid var(--cizgi, var(--yuzey-2)); border-radius: var(--r, 10px);
  font-size: 13.5px; font-weight: 600; color: var(--metin); cursor: pointer;
}
.fy-kutu .fy-form > summary.yan3-ikincil:hover { background: var(--yuzey-2); }
.fy-kutu .fy-form[open] > summary { margin-bottom: 12px; }
.fy-kutu .fy-tel { margin-top: 10px; text-align: center; }
.fy-kutu .fy-tel a { color: var(--marka); font-weight: 600; text-decoration: none; }
.fy-not .fy-tarih { display: block; margin-top: 6px; font-size: 12px; color: var(--metin-3, var(--metin-2)); }
.ilet-kanal { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 20px; }
.ilet-kanal .dugme { min-height: 38px; padding: 0 14px; font-size: 13.5px; }
.ilet-kanal .dugme svg { width: 15px; height: 15px; }
@media (max-width: 640px) {
  :root .ilet-kanal .dugme { min-height: 34px; font-size: 12.5px; }
  :root .fy-kutu .fy-form > summary.yan3-ikincil { min-height: 36px; font-size: 12.5px; }
}

/* 139. Arayüz denetimi (2026-09-15, 14 sayfa × 7 genişlik × 2 tema). Görünen ölçü değişmez;
   yalnız kontrast, dokunma alanı (kural 9: ::after YALNIZ dikey) ve küçük dokunuşlar. */
/* Koyu temada şehir kartı para rozeti 1,06:1 idi: zemin sabit beyaz, --metin açığa dönüyordu.
   --perde-rgb iki temada da koyu → ~17:1. */
.skart-para { color: rgb(var(--perde-rgb)); }
/* 24 px altı metin bağları: "Formla teklif iste" 20–22 px, "Karşılaştır →" 18 px. */
.kapanis2-bag, .alt-form-bag, .yan3-fiyat-alt a { position: relative; display: inline-flex; align-items: center; min-height: 24px; }
.kapanis2-bag::after, .alt-form-bag::after, .yan3-fiyat-alt a::after {
  content: ''; position: absolute; left: 0; right: 0; top: 50%; height: var(--dokun); transform: translateY(-50%);
}
/* /fiyatlar kart düzeni: bağlar 13–16 px idi (5423/5434 inline). Satırın tamamı hizmet bağı,
   sayı bağı üstte ayrı hedef. */
.endeks-tablo tbody tr { position: relative; }
.endeks-tablo tbody th a::after { content: ''; position: absolute; inset: 0; }
.endeks-tablo tbody td.sayi a { position: relative; z-index: 1; }
/* Sayı etiketleri opaklıkla 3,06–3,33:1 idi → tam ton. */
.cip small, .dizin-gezinme span { opacity: 1; }
/* Arama kutusunda odak göstergesi yoktu (1487 outline:none). */
.vitrin-ara:focus-within { box-shadow: 0 0 0 3px color-mix(in srgb, var(--marka) 30%, transparent); }
/* Vitrin kartı yer tutucusu: görsel gelene kadar beyaz fiyat yazısı gri zeminde okunmuyordu. */
.vk2-gorsel { background: color-mix(in srgb, var(--marka) 22%, var(--yuzey-2)); }
/* /talep: yüzen WhatsApp form alanlarının üstüne biniyordu, formda zaten WhatsApp düğmesi var. */
body:has(.talep-gonder) .wa-yuzen { display: none; }
@media (max-width: 640px) {
  /* "Tümünü göster" etkin 32 px idi (5926 height:32px); yorumdaki ::after hiç yazılmamıştı. */
  :root button.katla-dugme { position: relative; }
  :root button.katla-dugme::after {
    content: ''; position: absolute; left: 0; right: 0; top: 50%; height: var(--dokun); transform: translateY(-50%);
  }
  /* Çip satırları 30 px + 6 px aralık → dokunma alanları 8 px çakışıyordu. */
  :root ul.cipler { row-gap: 14px; }
  :root .vitrin-ic-sayfa .kahraman-ikonlar { gap: 12px; }
  :root .vk2-kaydet::after { inset: -8px; }
  /* İç içe katlama: katla kutusu içinde ikinci "Devamını oku"/"Daralt" görünmez ama Tab'la
     odaklanıyordu; kutu açılınca metin de tam açılır, tek kontrol kalır. */
  :root .katla-kutu .daha-satir { display: none; }
  :root .katla-kutu.acik .metin-kirpik { max-height: none; -webkit-line-clamp: unset; }
}

/* 140. Kullanici onayi 2026-09-16 (UI denetimi E2/E3).
   1) Form alanlari: iOS Safari 16px altindaki alanda odakta sayfayi yakinlastirir ve
      kullanici formdan duser. Gorunen yukseklik kucuk kalir (36px), yalniz yazi 16px.
   2) Masaustunde bolum basliklari tek boy: ana sayfada 24/25/31 px karisikti. */
@media (max-width: 640px) {
  :root .alan input, :root .alan select, :root .alan textarea,
  :root .form input, :root .form select, :root .form textarea,
  :root .talep-form input, :root .talep-form select, :root .talep-form textarea {
    font-size: 16px; min-height: 36px;
  }
  :root .yan-alan input, :root .yan-alan select, :root .yan-alan textarea { font-size: 16px; min-height: 36px; }
}
@media (min-width: 641px) {
  :root { --h2-boy: clamp(21px, 0.9vw + 13px, 25px); }
  :root main h2,
  :root main section h2,
  :root .kbolum-ic h2, :root .kbolum-metin h2,
  :root .kapanis2 h2, :root .kapanis2-metin h2,
  :root .neden-bas h2, :root .fy-bolum h2, :root .hizmet-govde h2 {
    font-size: var(--h2-boy); line-height: 1.25;
  }
}

/* 141. Hizmetler acilir menusu (kullanici istegi + ornek gorsel, 2026-09-16).
   JS YOK: <details>/<summary>. Klavyeyle acilir, JS kapaliyken calisir.
   Panel: kategori listesi (ikon + ad + hizmet sayisi) -> iki sutun yardimci bag -> tek CTA. */
.ust-katman { position: relative; display: flex; align-items: stretch; }
.ust-katman > summary { list-style: none; cursor: pointer; }
.ust-katman > summary::-webkit-details-marker { display: none; }
.ust-katman > summary::marker { content: ''; }
.ust-katman > summary:focus-visible { outline: 2px solid var(--marka); outline-offset: -2px; border-radius: 8px; }
.ust-ok { width: 14px; height: 14px; opacity: .7; transition: transform .15s ease; }
.ust-katman[open] .ust-ok { transform: rotate(180deg); }
.ust-panel {
  position: absolute; top: 100%; left: 0; z-index: 60;
  width: min(320px, calc(100vw - 24px)); padding: 10px;
  background: var(--zemin); border: 1px solid var(--cizgi); border-radius: 14px;
  box-shadow: 0 14px 40px rgba(var(--perde-rgb), .16);
}
.ust-panel-baslik {
  margin: 2px 6px 8px; font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--metin-3);
}
.ust-panel-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.ust-panel-liste a {
  display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 6px 8px;
  border-radius: 10px; font-size: 13.5px; font-weight: 600; color: var(--metin); text-decoration: none;
}
.ust-panel-liste a:hover { background: var(--marka-acik); color: var(--marka); }
.ust-panel-ikon { width: 18px; height: 18px; flex: 0 0 auto; color: var(--marka); }
.ust-panel-liste small { margin-left: auto; font-size: 11.5px; font-weight: 600; color: var(--metin-3); }
.ust-panel-alt {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px;
  margin: 10px 0; padding-top: 10px; border-top: 1px solid var(--cizgi);
}
.ust-panel-alt a {
  display: flex; align-items: center; min-height: 32px; padding: 4px 6px;
  border-radius: 8px; font-size: 13px; color: var(--metin-2); text-decoration: none;
}
.ust-panel-alt a:hover { color: var(--marka); }
.ust-panel-cta { min-height: 40px; font-size: 13.5px; }
/* Menu seridi mobilde yatay kayiyor; panel acikken kirpilmasin. */
.ust-menu:has(details[open]) { overflow: visible; }
@media (max-width: 640px) {
  :root .ust-panel { padding: 8px; border-radius: 12px; }
  :root .ust-panel-liste a { min-height: 38px; font-size: 12.5px; }
  :root .ust-panel-alt a { min-height: 30px; font-size: 12px; }
  :root .ust-panel-cta { min-height: 36px; font-size: 12.5px; }
}
/* 141b. Panel rotuslari: CTA sakin marka tonu (mercan panelde cirtlak duruyordu),
   mobilde panel ekrani asmasin. */
.ust-panel-cta, .ust-panel-cta:hover { background: var(--marka); color: var(--zemin); border-color: var(--marka); }
.ust-panel { max-height: min(78vh, 720px); overflow-y: auto; overscroll-behavior: contain; }
@media (max-width: 640px) { :root .ust-panel { max-height: 70vh; } }

/* 142. Ust menu duzeni (kullanici notlari 2026-09-16): panel cok uzundu, mobilde uyumsuzdu,
   menuler sagda olsun. Cozum: kategori paneli iki sutun, panel sag kenara hizali,
   mobilde ustbilginin altinda tam genislik sayfa (fixed), ic kaydirma. */
.ust-menu { margin: 0 0 0 auto; }              /* ortadan saga */
.ust-panel { left: auto; right: 0; }
.ust-panel-iki, .ust-panel-liste.iki-sutun { grid-template-columns: 1fr 1fr; }
@media (min-width: 900px) {
  .ust-katman-hizmet .ust-panel { width: 560px; }
  .ust-katman-hizmet .ust-panel-liste { grid-template-columns: 1fr 1fr; column-gap: 8px; }
  .ust-katman-genis .ust-panel { width: 420px; }
}
@media (max-width: 899px) {
  .ust-panel { width: min(340px, calc(100vw - 20px)); }
}
/* Mobil: panel ustbilginin altinda tam genislik. Sticky ustbilgi 56-66 px. */
@media (max-width: 640px) {
  :root .ust-panel {
    position: fixed; top: var(--ust-yuk, 58px); left: 8px; right: 8px; width: auto;
    max-height: calc(100dvh - var(--ust-yuk, 58px) - 16px); border-radius: 14px;
  }
  :root .ust-panel-liste { grid-template-columns: 1fr 1fr; column-gap: 6px; }
  :root .ust-panel-liste a { min-height: 40px; padding: 6px; font-size: 12px; gap: 7px; }
  :root .ust-panel-liste small { font-size: 10.5px; }
  :root .ust-panel-alt { grid-template-columns: 1fr 1fr; }
}
/* 142b. Acilir arama (ust-katman-ara): ikon tiklaninca kutu acilir, sayfaya gitmez. */
.ust-katman-ara > summary { list-style: none; cursor: pointer; }
.ust-katman-ara > summary::-webkit-details-marker { display: none; }
.ust-katman-ara > summary::marker { content: ''; }
.ust-panel-ara { width: min(380px, calc(100vw - 20px)); }
.ust-ara-form { display: flex; gap: 8px; align-items: center; }
.ust-ara-form input {
  flex: 1 1 auto; min-width: 0; min-height: 40px; padding: 0 12px; font-size: 16px;
  border: 1px solid var(--cizgi); border-radius: 10px; background: var(--yuzey-2); color: var(--metin);
}
.ust-ara-form input:focus { outline: none; border-color: var(--marka); box-shadow: 0 0 0 3px var(--marka-acik); }
.ust-ara-form .dugme { min-height: 40px; padding: 0 16px; font-size: 13.5px; }
.ust-ara-ipucu { margin: 8px 2px 0; font-size: 12px; color: var(--metin-3); }
.ust-ara-ipucu a { color: var(--marka); font-weight: 600; }
@media (max-width: 640px) { :root .ust-panel-ara { width: auto; } }
/* 142c. Mobil ustbilgi iki satir (marka+eylem / menu seridi) = 83-84 px; panel
   58 px varsayilaniyla ustbilginin uzerine biniyordu. Olculdu: 375 px -> 83. */
@media (max-width: 640px) { :root { --ust-yuk: 84px; } }
@media (min-width: 641px) { :root { --ust-yuk: 67px; } }
/* 142d. Cikis artik POST formu; bag gibi gorunen dugme (2026-09-16). */
.cikis-form { display: inline; }
.bag-dugme {
  background: none; border: 0; padding: 0; margin: 0; font: inherit; color: var(--marka);
  cursor: pointer; text-decoration: underline; text-underline-offset: 3px; min-height: 24px;
}
.bag-dugme:hover { color: var(--marka-koyu); }
/* 142e. Panel alt baglari sonuk kalmisti (kullanici, 2026-09-16): ikincil gri yerine
   ana metin tonu + hap zemin; kategori satirlariyla ayni dil, sakin marka vurgusu. */
.ust-panel-alt {
  gap: 6px 8px; padding: 10px; margin: 10px 0;
  background: color-mix(in srgb, var(--marka) 6%, var(--yuzey-2));
  border: 1px solid color-mix(in srgb, var(--marka) 14%, transparent);
  border-radius: 12px;
}
.ust-panel-alt a {
  min-height: 34px; padding: 6px 8px; border-radius: 8px;
  font-size: 13px; font-weight: 600; color: var(--metin);
}
.ust-panel-alt a:hover { background: var(--marka-acik); color: var(--marka); }
/* 142f. Menu panelinde CTA WhatsApp; telefon altta sakin metin bagi. */
.ust-panel-cta svg { width: 16px; height: 16px; margin-right: 6px; }
.ust-panel-tel { margin: 8px 0 0; text-align: center; font-size: 12.5px; }
.ust-panel-tel a { color: var(--marka); font-weight: 600; text-decoration: none; }
.ust-panel-tel a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* 143. Menu estetigi (kullanici ornegi 2026-09-16): her kategori kendi ikon renginde,
   yazilar marka tonunda okunur, alt baglar kutu yerine ince ayrac. Renkler JETON. */
:root {
  --kat-muzik: #7c3aed; --kat-gosteri: #2563eb; --kat-organizasyon: #0f766e;
  --kat-ekipman: #b45309; --kat-goruntu: #db2777; --kat-susleme: #16a34a;
  --kat-ikram: #ea580c; --kat-personel: #0891b2; --kat-mekan: #4f46e5; --kat-ulasim: #4d7c0f;
}
:root:not([data-theme="light"]) {
  @media (prefers-color-scheme: dark) {
    --kat-muzik: #c4b5fd; --kat-gosteri: #93c5fd; --kat-organizasyon: #5eead4;
    --kat-ekipman: #fcd34d; --kat-goruntu: #f9a8d4; --kat-susleme: #86efac;
    --kat-ikram: #fdba74; --kat-personel: #67e8f9; --kat-mekan: #a5b4fc; --kat-ulasim: #bef264;
  }
}
:root[data-theme="dark"] {
  --kat-muzik: #c4b5fd; --kat-gosteri: #93c5fd; --kat-organizasyon: #5eead4;
  --kat-ekipman: #fcd34d; --kat-goruntu: #f9a8d4; --kat-susleme: #86efac;
  --kat-ikram: #fdba74; --kat-personel: #67e8f9; --kat-mekan: #a5b4fc; --kat-ulasim: #bef264;
}
.kat-muzik .ust-panel-ikon { color: var(--kat-muzik); }
.kat-gosteri .ust-panel-ikon { color: var(--kat-gosteri); }
.kat-organizasyon .ust-panel-ikon { color: var(--kat-organizasyon); }
.kat-ekipman .ust-panel-ikon { color: var(--kat-ekipman); }
.kat-goruntu .ust-panel-ikon { color: var(--kat-goruntu); }
.kat-susleme .ust-panel-ikon { color: var(--kat-susleme); }
.kat-ikram .ust-panel-ikon { color: var(--kat-ikram); }
.kat-personel .ust-panel-ikon { color: var(--kat-personel); }
.kat-mekan .ust-panel-ikon { color: var(--kat-mekan); }
.kat-ulasim .ust-panel-ikon { color: var(--kat-ulasim); }
.ust-panel-liste a { color: var(--marka-koyu); }
.ust-panel-liste a:hover { background: var(--marka-acik); color: var(--marka-koyu); }
.ust-panel-liste small { color: var(--metin-3); font-weight: 600; }
/* Alt baglar: kutu kalksin, ayrac + marka tonu kalsin (ornek gorseldeki sadelik). */
.ust-panel-alt {
  background: none; border: 0; border-top: 1px solid var(--cizgi);
  border-radius: 0; padding: 10px 2px 2px; margin: 10px 0 8px;
}
.ust-panel-alt a { color: var(--marka-koyu); font-weight: 600; font-size: 13px; }
.ust-panel-alt a:hover { background: var(--marka-acik); color: var(--marka-koyu); }
.ust-panel-baslik { color: var(--metin-2); }

/* 144. Menu paneli toparlama (kullanici notu 2026-09-16: "cok fazla satir boslugu,
   alt kisim ayri gibi"). Satirlar sik, alt baglar ayni blogun devami, CTA yakin.
   Kullanici istisnasi (kural 9 gibi footer'da oldugu gibi): liste satiri 32-34 px,
   satirlar bitisik oldugu icin dokunma alani satirin kendisi, cakisma yok. */
.ust-panel { padding: 8px; }
.ust-panel-baslik { margin: 2px 8px 4px; font-size: 10.5px; }
.ust-panel-liste { gap: 0; }
.ust-katman-hizmet .ust-panel-liste,
.ust-panel-iki { column-gap: 4px; }
.ust-panel-liste a { min-height: 34px; padding: 4px 8px; gap: 9px; font-size: 13px; border-radius: 8px; }
.ust-panel-ikon { width: 17px; height: 17px; }
.ust-panel-alt {
  margin: 6px 0 6px; padding: 6px 0 0; gap: 0 4px;
  border-top: 1px solid var(--cizgi);
}
.ust-panel-alt a { min-height: 30px; padding: 3px 8px; font-size: 12.5px; border-radius: 8px; }
.ust-panel-cta { min-height: 38px; margin-top: 2px; }
.ust-panel-tel { margin: 6px 0 2px; }
.ust-panel-ara { padding: 10px; }
@media (max-width: 640px) {
  :root .ust-panel { padding: 6px; }
  :root .ust-panel-liste a { min-height: 34px; padding: 4px 6px; font-size: 12.5px; gap: 7px; }
  :root .ust-panel-alt a { min-height: 30px; padding: 3px 6px; font-size: 12px; }
  :root .ust-panel-cta { min-height: 36px; font-size: 12.5px; }
  :root .ust-panel-baslik { margin: 2px 6px 2px; }
}
/* 145. Kullanici 2026-09-16: menu ikonlari yaziyla ayni renkte (kategori renkleri kalkti,
   --kat-* jetonlari ileride kullanilabilir diye duruyor). */
.ust-panel .ust-panel-liste li .ust-panel-ikon { color: currentColor; }

/* 146. Teklif formu v2 (talep/form.php, kullanici 2026-09-16: "daginik, sade ve guzel").
   Tek cerceveli kart, numarali 3 bolum, 6 kolonlu siki izgara; sagda yapiskan adimlar. */
.tf-bas { padding: 8px 0 18px; max-width: 760px; }
.tf-bas h1 { margin: 4px 0 8px; }
.tf-giris { margin: 0; font-size: 15px; line-height: 1.6; color: var(--metin-2); }
.tf-hizli { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 14px; }
.tf-hizli .dugme { min-height: 38px; padding: 0 14px; font-size: 13.5px; }
.tf-hizli .dugme svg { width: 15px; height: 15px; margin-right: 6px; }
.tf-hizli-not { font-size: 12.5px; color: var(--metin-3); }

.tf-duzen { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; align-items: start; padding-bottom: 36px; }
.tf-kart {
  background: var(--zemin); border: 1px solid var(--cizgi); border-radius: 16px;
  padding: 6px 22px 20px; box-shadow: 0 6px 24px rgba(var(--perde-rgb), .05);
}
.tf-bolum { padding: 16px 0 14px; border-bottom: 1px solid var(--cizgi); }
.tf-baslik {
  display: flex; align-items: center; gap: 10px; margin: 0 0 12px;
  font-size: 15px; font-weight: 700; letter-spacing: 0; line-height: 1.2;
}
.tf-no {
  display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  background: var(--marka-acik); color: var(--marka-koyu); font-size: 12px; font-weight: 700;
}
.tf-izgara { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px 12px; }
.tf-g2 { grid-column: span 2; } .tf-g3 { grid-column: span 3; } .tf-g6 { grid-column: span 6; }
.tf-alan { display: grid; gap: 5px; min-width: 0; }
.tf-alan label { font-size: 12.5px; font-weight: 600; color: var(--metin); }
.tf-alan label em { font-style: normal; font-weight: 500; color: var(--metin-3); }
.tf-alan input, .tf-alan select, .tf-alan textarea {
  width: 100%; min-height: 42px; padding: 0 12px; font: inherit; font-size: 14.5px; color: var(--metin);
  background: var(--yuzey-2); border: 1px solid transparent; border-radius: 10px;
}
.tf-alan textarea { min-height: 104px; padding: 10px 12px; line-height: 1.5; resize: vertical; }
.tf-alan input:focus, .tf-alan select:focus, .tf-alan textarea:focus {
  outline: none; background: var(--zemin); border-color: var(--marka); box-shadow: 0 0 0 3px var(--marka-acik);
}
.tf-alt { padding-top: 16px; display: grid; gap: 12px; }
.tf-onay { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 13px; color: var(--metin-2); }
.tf-onay input { width: 18px; height: 18px; margin: 0; accent-color: var(--marka); }
.tf-kvkk { margin-left: auto; font-size: 12.5px; color: var(--marka); font-weight: 600; }
.tf-gonder { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.tf-gonder .dugme { min-height: 44px; padding: 0 22px; font-size: 14.5px; background: var(--marka); border-color: var(--marka); color: var(--zemin); }
.tf-wa-bag { font-size: 13.5px; font-weight: 600; color: var(--marka); }
.tf-not { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 12px; color: var(--metin-3); }
.tf-not svg { width: 14px; height: 14px; flex: 0 0 auto; }

.tf-sss { margin-top: 28px; }
.tf-sss h2 { margin: 0 0 10px; }

.tf-yan { position: sticky; top: calc(var(--ust-yuk, 67px) + 16px); }
.tf-yan-kutu {
  padding: 18px; border-radius: 16px;
  background: color-mix(in srgb, var(--marka) 5%, var(--zemin));
  border: 1px solid color-mix(in srgb, var(--marka) 16%, transparent);
}
.tf-yan-baslik { margin: 0 0 12px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--metin-2); }
.tf-adim { list-style: none; margin: 0; padding: 0; counter-reset: tf; display: grid; gap: 12px; }
.tf-adim li { counter-increment: tf; position: relative; padding-left: 34px; display: grid; gap: 2px; }
.tf-adim li::before {
  content: counter(tf); position: absolute; left: 0; top: 0; width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center; font-size: 12px; font-weight: 700;
  background: var(--marka); color: var(--zemin);
}
.tf-adim strong { font-size: 13.5px; color: var(--metin); }
.tf-adim span { font-size: 12.5px; line-height: 1.45; color: var(--metin-2); }
.tf-guven { list-style: none; margin: 16px 0 0; padding: 14px 0 0; border-top: 1px solid var(--cizgi); display: grid; gap: 8px; }
.tf-guven li { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--metin); }
.tf-guven svg { width: 16px; height: 16px; color: var(--marka); flex: 0 0 auto; }

@media (max-width: 900px) {
  .tf-duzen { grid-template-columns: 1fr; gap: 20px; }
  .tf-yan { position: static; }
}
@media (max-width: 640px) {
  :root .tf-bas { padding: 4px 0 12px; }
  :root .tf-giris { font-size: 13px; }
  :root .tf-hizli .dugme { min-height: 36px; font-size: 12.5px; }
  :root .tf-kart { padding: 2px 14px 16px; border-radius: 14px; }
  :root .tf-bolum { padding: 12px 0 12px; }
  :root .tf-baslik { font-size: 14px; margin-bottom: 10px; }
  :root .tf-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  :root .tf-g6, :root .tf-g3 { grid-column: span 2; }
  :root .tf-g2 { grid-column: span 1; }
  :root .tf-izgara .tf-g2:last-of-type { grid-column: span 2; }
  :root .tf-alan input, :root .tf-alan select, :root .tf-alan textarea { min-height: 38px; font-size: 16px; }
  :root .tf-alan label { font-size: 12px; }
  :root .tf-kvkk { margin-left: 28px; }
  :root .tf-gonder .dugme { min-height: 40px; font-size: 13.5px; }
  :root .tf-yan-kutu { padding: 14px; }
}

/* 147. Kurumsal sayfa v2 (statik/goster.php, kullanici 2026-09-16). */
.st-bas {
  padding: 22px 0 30px; color: #fff;
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(255,255,255,.10), transparent 55%),
    linear-gradient(135deg, var(--marka-koyu), var(--marka));
}
.st-bas .kirinti, .st-bas .kirinti a, .st-bas .kirinti span { color: rgba(255,255,255,.82); }
.st-bas .bolum-etiket { color: rgba(255,255,255,.85); margin-top: 14px; }
.st-bas h1 { color: #fff; margin: 6px 0 8px; max-width: 760px; }
.st-bas-alt { margin: 0; max-width: 680px; font-size: 15.5px; line-height: 1.6; color: rgba(255,255,255,.9); }
.st-bas-eylem { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.st-dugme-ana, .st-dugme-ana:hover { background: var(--marka); border-color: var(--marka); color: #fff; }
.st-bas .st-dugme-ana, .st-bas .st-dugme-ana:hover { background: #fff; border-color: #fff; color: var(--marka-koyu); }
.st-dugme-cam, .st-dugme-cam:hover { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.45); color: #fff; }
.st-dugme-acik, .st-dugme-acik:hover { background: #fff; border-color: #fff; color: var(--marka-koyu); }
.st-bas .dugme, .st-cta .dugme { min-height: 40px; padding: 0 16px; font-size: 13.5px; }
.st-bas .dugme svg, .st-cta .dugme svg, .st-yan .dugme svg { width: 15px; height: 15px; margin-right: 6px; }

.st { padding-top: 26px; padding-bottom: 40px; }

.st-kanallar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.st-kanal {
  display: grid; gap: 4px; padding: 16px; border-radius: 14px; text-decoration: none;
  background: var(--zemin); border: 1px solid var(--cizgi); color: var(--metin);
  transition: border-color .15s ease, transform .15s ease;
}
.st-kanal:hover { border-color: var(--marka); transform: translateY(-1px); text-decoration: none; }
.st-kanal-ikon {
  display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; margin-bottom: 6px;
  background: var(--marka-acik); color: var(--marka-koyu);
}
.st-kanal-ikon svg { width: 18px; height: 18px; }
.st-kanal-ad { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--metin-3); }
.st-kanal-deger { font-size: 14.5px; font-weight: 600; color: var(--metin); overflow-wrap: anywhere; }

.st-harita {
  display: grid; grid-template-columns: 300px minmax(0, 1fr); overflow: hidden; margin-bottom: 30px;
  border: 1px solid var(--cizgi); border-radius: 16px; background: var(--zemin);
}
.st-harita-bilgi { display: flex; flex-direction: column; gap: 10px; padding: 20px; }
.st-harita-ad { margin: 0; font-size: 16px; font-weight: 700; }
.st-harita-not { margin: 2px 0 0; font-size: 13px; line-height: 1.5; color: var(--metin-2); }
.st-harita-bag { margin-top: auto; font-size: 13px; font-weight: 600; color: var(--marka); }
.st-harita-cerceve { display: block; width: 100%; height: 280px; border: 0; background: var(--yuzey-2); }

.st-rakam { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.st-rakam > div { padding: 16px; border-radius: 14px; border: 1px solid var(--cizgi); background: var(--zemin); display: grid; gap: 2px; }
.st-rakam strong { font-family: var(--f-baslik); font-size: 28px; line-height: 1.1; color: var(--marka-koyu); }
.st-rakam span { font-size: 12.5px; color: var(--metin-2); }
.st-degerler { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 30px; }
.st-degerler > div {
  padding: 16px; border-radius: 14px;
  background: color-mix(in srgb, var(--marka) 5%, var(--zemin));
  border: 1px solid color-mix(in srgb, var(--marka) 14%, transparent);
}
.st-degerler strong { display: block; font-size: 14.5px; margin-bottom: 4px; }
.st-degerler p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--metin-2); }

.st-duzen { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 32px; align-items: start; }
.st-metin { max-width: 760px; font-size: 16px; line-height: 1.7; color: var(--metin); }
.st-metin h2 { position: relative; margin: 30px 0 10px; padding-left: 14px; font-size: 20px; line-height: 1.3; }
.st-metin h2::before {
  content: ""; position: absolute; left: 0; top: .2em; bottom: .2em; width: 4px; border-radius: 4px; background: var(--marka);
}
.st-blok:first-child h2 { margin-top: 0; }
.st-metin p { margin: 0 0 12px; }
.st-metin ul, .st-metin ol { margin: 0 0 14px; padding-left: 20px; }
.st-metin li { margin-bottom: 4px; }
.st-metin a { color: var(--marka); font-weight: 600; }
.st-yasal { font-size: 15px; }
.st-yasal h2 { font-size: 17.5px; }
.st-blok { scroll-margin-top: calc(var(--ust-yuk, 67px) + 16px); }

.st-surec { list-style: none; margin: 0; padding: 0; counter-reset: st; position: relative; }
.st-surec::before { content: ""; position: absolute; left: 17px; top: 8px; bottom: 8px; width: 2px; background: var(--cizgi); }
.st-surec > li { counter-increment: st; position: relative; padding: 0 0 22px 54px; scroll-margin-top: calc(var(--ust-yuk, 67px) + 16px); }
.st-surec > li::before {
  content: counter(st); position: absolute; left: 0; top: 0; width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 700; font-size: 15px;
  background: var(--marka); color: #fff; box-shadow: 0 0 0 5px var(--zemin);
}
.st-surec > li h2 { margin: 4px 0 6px; padding-left: 0; font-size: 18px; }
.st-surec > li h2::before { content: none; }
.st-surec-govde { padding: 14px 16px; border-radius: 12px; border: 1px solid var(--cizgi); background: var(--zemin); }
.st-surec-govde > :last-child { margin-bottom: 0; }

.st-yan { position: sticky; top: calc(var(--ust-yuk, 67px) + 16px); display: grid; gap: 14px; }
.st-yan-kutu { padding: 16px; border-radius: 14px; border: 1px solid var(--cizgi); background: var(--zemin); }
.st-yan-baslik { margin: 0 0 10px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--metin-2); }
.st-iletisim { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.st-iletisim li { display: flex; align-items: center; gap: 8px; font-size: 13.5px; min-width: 0; }
.st-iletisim svg { width: 16px; height: 16px; flex: 0 0 auto; color: var(--marka); }
.st-iletisim a { color: var(--metin); font-weight: 600; overflow-wrap: anywhere; }
.st-iletisim span { color: var(--metin-2); }
.st-yan .dugme { min-height: 40px; font-size: 13.5px; }
.st-yan-bag { display: inline-block; margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--marka); }
.st-baglar, .st-icindekiler ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.st-baglar a, .st-icindekiler a {
  display: block; padding: 6px 8px; border-radius: 8px; font-size: 13px; font-weight: 600;
  color: var(--metin); text-decoration: none;
}
.st-baglar a:hover, .st-icindekiler a:hover { background: var(--marka-acik); color: var(--marka-koyu); }
.st-icindekiler a { font-weight: 500; color: var(--metin-2); }

.st-cta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
  margin-top: 36px; padding: 22px 24px; border-radius: 18px; color: #fff;
  background: linear-gradient(135deg, var(--marka-koyu), var(--marka));
}
.st-cta-baslik { margin: 0; font-family: var(--f-baslik); font-size: 20px; font-weight: 600; }
.st-cta-not { margin: 4px 0 0; font-size: 14px; color: rgba(255,255,255,.88); }
.st-cta-eylem { display: flex; flex-wrap: wrap; gap: 10px; }

@media (max-width: 980px) {
  .st-kanallar, .st-rakam { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st-degerler { grid-template-columns: 1fr; }
  .st-harita { grid-template-columns: 1fr; }
  .st-duzen { grid-template-columns: 1fr; gap: 20px; }
  .st-yan { position: static; }
}
@media (max-width: 640px) {
  :root .st-bas { padding: 14px 0 20px; }
  :root .st-bas h1 { font-size: 19px; }
  :root .st-bas-alt { font-size: 13px; }
  :root .st-bas .dugme, :root .st-cta .dugme { min-height: 36px; font-size: 12.5px; padding: 0 12px; }
  :root .st { padding-top: 16px; padding-bottom: 28px; }
  :root .st-kanallar { gap: 8px; }
  :root .st-kanal { padding: 12px; }
  :root .st-kanal-deger { font-size: 13px; }
  :root .st-harita-cerceve { height: 200px; }
  :root .st-rakam strong { font-size: 22px; }
  :root .st-metin { font-size: 15px; }
  :root .st-metin h2 { font-size: 16px; margin-top: 22px; }
  :root .st-surec > li { padding-left: 44px; }
  :root .st-surec > li::before { width: 30px; height: 30px; font-size: 13px; }
  :root .st-surec::before { left: 14px; }
  :root .st-surec > li h2 { font-size: 16px; }
  :root .st-cta { padding: 16px; border-radius: 14px; }
  :root .st-cta-baslik { font-size: 16px; }
  :root .st-cta-not { font-size: 12.5px; }
}

/* 148. Rotus (2026-09-16): genel svg { fill: none } WhatsApp simgesini bosaltiyordu; mobil formda
   kisi sayisi yarim satirda tek kaliyordu. */
.st-wa svg, .st-kanal-ikon.st-wa svg { fill: currentColor; }
@media (max-width: 640px) { :root .tf-izgara .tf-alan:has(#kisi_sayisi) { grid-column: span 2; } }
.st-giris { margin-bottom: 22px; font-size: 16.5px; color: var(--metin-2); }
@media (max-width: 640px) { :root .st-giris { font-size: 14px; margin-bottom: 16px; } }

/* 149. Kurumsal sayfalarda acilir bolumler (iletisim, hakkimizda; kullanici 2026-09-16).
   Kapaliyken baslik + iki satir onizleme; acilinca onizleme gizlenir, tam metin gelir. */
.st-akor {
  margin: 0 0 10px; border: 1px solid var(--cizgi); border-radius: 14px; background: var(--zemin);
  scroll-margin-top: calc(var(--ust-yuk, 67px) + 16px);
  transition: border-color .15s ease;
}
.st-akor[open] { border-color: color-mix(in srgb, var(--marka) 40%, var(--cizgi)); }
.st-akor > summary {
  position: relative; display: grid; gap: 4px; padding: 14px 48px 14px 18px;
  list-style: none; cursor: pointer;
}
.st-akor > summary::-webkit-details-marker { display: none; }
.st-akor > summary::marker { content: ""; }
.st-akor > summary::after {
  content: ""; position: absolute; right: 18px; top: 20px; width: 9px; height: 9px;
  border-right: 2px solid var(--marka); border-bottom: 2px solid var(--marka);
  transform: rotate(45deg); transition: transform .15s ease;
}
.st-akor[open] > summary::after { transform: rotate(-135deg); top: 24px; }
.st-akor > summary:hover .st-akor-baslik { color: var(--marka-koyu); }
.st-akor > summary:focus-visible { outline: 2px solid var(--marka); outline-offset: 2px; border-radius: 14px; }
.st-akor-baslik {
  position: relative; padding-left: 12px; font-family: var(--f-baslik);
  font-size: 17px; font-weight: 600; line-height: 1.3; color: var(--metin);
}
.st-akor-baslik::before {
  content: ""; position: absolute; left: 0; top: .15em; bottom: .15em; width: 3px; border-radius: 3px; background: var(--marka);
}
.st-akor-on {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  padding-left: 12px; font-size: 14px; line-height: 1.55; color: var(--metin-2);
}
.st-akor[open] .st-akor-on { display: none; }
.st-akor-govde { padding: 0 18px 16px 30px; font-size: 15px; line-height: 1.7; }
.st-akor-govde > :last-child { margin-bottom: 0; }
@media (max-width: 640px) {
  :root .st-akor > summary { padding: 12px 40px 12px 14px; }
  :root .st-akor > summary::after { right: 14px; top: 17px; }
  :root .st-akor[open] > summary::after { top: 21px; }
  :root .st-akor-baslik { font-size: 15px; }
  :root .st-akor-on { font-size: 12.5px; }
  :root .st-akor-govde { padding: 0 14px 14px 26px; font-size: 14px; }
}

/* 150. Talep sayfasi fotografli ust alana gecti (2026-09-16); form karti ust alanin hemen altinda. */
.tf { padding-top: 22px; }
@media (max-width: 640px) { :root .tf { padding-top: 14px; } }