/* ==========================================================================
   Pervis — ziyaretçi tarafı stilleri
   Renkleri değiştirmek için sadece aşağıdaki :root bloğunu düzenlemeniz yeterli.
   ========================================================================== */

@font-face {
  font-family: 'Inter';
  src: url('fonts/inter-latin-wght-normal.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/inter-latin-ext-wght-normal.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* İKİNCİ YAZI TİPİ — Source Serif 4 (değişken, KENDİ sunucumuzda).
   Tek yazı tipiyle kurulmuş bir sitede her başlık aynı sesle konuşur;
   başlığı metinden ayıran tek şey punto kalır. İki tiple hiyerarşi
   puntoyla değil KARAKTERLE kuruluyor: bölüm başlıkları serif (okunan,
   kurumsal taraf), kart başlıkları ve arayüz Inter (işleyen taraf).
   Dış sunucudan yüklenmiyor — dosyalar assets/fonts altında duruyor,
   ziyaretçinin tarayıcısı bizden başka hiçbir yere bağlanmıyor.
   Türkçe harfler (ğ ı İ ş ç ö ü) latin-ext dosyasında; o dosya yalnızca
   sayfada o harfler geçtiğinde iniyor. */
@font-face {
  font-family: 'Source Serif 4';
  src: url('fonts/source-serif-4-latin-wght-normal.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: 'Source Serif 4';
  src: url('fonts/source-serif-4-latin-ext-wght-normal.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* ---------------------------------------------------------------- RENK
     Zemin beyaz. Eylem rengi YEŞİL (düğmeler, işaretler), içerik ve
     başlıklarda MAVİ tonları. Aşağıdaki değerlerin tamamı beyaz zeminde
     ve koyu bölümlerde okunurluk (kontrast) açısından ölçülmüştür.
     -------------------------------------------------------------------- */

  /* Yeşil — eylem */
  --brand:      #0a854e;   /* düğme zemini · beyaz yazı 4.7:1 */
  --brand-600:  #076b3f;   /* üzerine gelince */
  --brand-300:  #34d399;   /* koyu zeminde vurgu */
  --brand-50:   #e9f7f0;   /* açık zemin tonu */
  --brand-100:  #cfeddf;   /* ince çizgi */

  /* Mavi — içerik, başlık ve bilgi alanları */
  --mavi-950:  #0b2239;    /* koyu bölümler ve footer */
  --mavi-800:  #123a5e;
  --mavi-600:  #14456f;
  --mavi:      #1b6fa8;    /* bağlantı ve vurgu · beyaz zeminde 5.4:1 */
  --mavi-300:  #7fc0ea;    /* koyu zeminde */
  --mavi-50:   #eef5fb;    /* bilgi kutusu zemini */
  --mavi-100:  #d8e8f5;

  /* Nötr — hafif mavi kırıklı gri skala */
  --ink-950: #0f1720;
  --ink-900: #16202b;
  --ink-800: #26333f;
  --ink-700: #3c4a59;
  --ink-600: #4e5d6c;
  --ink-500: #64748b;
  /* KOYULAŞTIRILDI. #8a97a6 beyaz üzerinde 2.98:1 idi; form notları,
     ekran altyazıları ve rehber kırılımı bu rengi kullanıyor ve küçük
     puntoda okunmuyordu. #5f6d7c => 5.30:1. Ölçüldü. */
  --ink-400: #5f6d7c;
  --ink-200: #dde4eb;
  --ink-100: #ebf0f5;
  --ink-50:  #f6f9fc;

  /* ------------------------------------------------------------ YAZI TİPİ
     İki rol, iki tip. Karıştırmayın: başlık serif, arayüz sans.
     -------------------------------------------------------------------- */
  --font-metin:  'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-baslik: 'Source Serif 4', Georgia, 'Times New Roman', 'Noto Serif', serif;

  /* ---------------------------------------------------------- ÇİZGİ VE KÖŞE
     Köşe yarıçapı ARTIK TEK DEĞER DEĞİL. Her yerde aynı 14 piksel yuvarlak
     kullanmak, hazır şablon izlenimi bırakan en bilinen işaretlerden biri:
     düğme de kart da resim de aynı yumuşaklıkta olunca hiçbiri "seçilmiş"
     görünmüyor. Yarıçap artık öğenin BÜYÜKLÜĞÜYLE orantılı — küçük
     denetimde 5, yüzeyde 8, büyük görselde 12 piksel.
     -------------------------------------------------------------------- */
  --cizgi:      #e4eaf0;
  --cizgi-koyu: #d3dce5;
  --radius:    8px;
  --radius-sm:  5px;
  --radius-lg: 12px;

  /* Gölge yalnızca GERÇEKTEN havada duran şeyde: açılır menü, video, kip
     pencere. Kartlarda ve düğmelerde gölge yok — kart zeminden çizgiyle
     ayrılıyor, gölgeyle değil. */
  --golge-sm: 0 1px 2px rgba(11, 34, 57, .06);
  --golge:    0 2px 8px rgba(11, 34, 57, .07);
  --golge-lg: 0 16px 40px rgba(11, 34, 57, .10);

  --wrap: 1152px;
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-metin);
  color: var(--ink-900);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
}

/* Rakamlar sütun sütun hizalansın: %73,8 ile %8,1 alt alta gelince
   virgüller kayıyordu. Tabular rakam sadece sayı gösteren yerlerde. */
.stat-value, .figure, table td, table th, time { font-variant-numeric: tabular-nums; }

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

/* ------------------------------------------------------------------ DÜZEN */

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
.wrap--text   { max-width: 900px; }
.wrap--narrow { max-width: 760px; }

/* Düz metin sütunu: genişliği okuma boyuna göre, hizası sayfanın
   soluna göre. 65 karakter civarı bir satır boyu en rahat okunan
   ölçüdür; ortalamak o ölçüyü değiştirmiyor, yalnızca sayfada ikinci
   bir eksen açıyordu. */
.prose-kolon--dar   { max-width: 720px; }
.prose-kolon--orta  { max-width: 860px; }
.prose-kolon--genis { max-width: none; }
.wrap--wide   { max-width: var(--wrap); }

.sec { padding: 72px 0; }
.sec > .wrap--text, .sec > .wrap--narrow, .sec > .wrap--wide { padding-top: 0; padding-bottom: 0; }
.wrap--tight { padding-top: 0; padding-bottom: 0; }

.sec-light { background: #fff; color: var(--ink-900); }
.sec-soft  { background: var(--ink-50); color: var(--ink-900); border-block: 1px solid var(--cizgi); }
.sec-dark  { background: var(--mavi-950); color: #fff; }
.sec-brand { background: var(--mavi-800); color: #fff; }

/* Art arda gelen aynı zeminli bölümlerde çift çizgi oluşmasın */
.sec-soft + .sec-soft { border-top: 0; }

.sec-dark .sec-text, .sec-brand .sec-text,
.sec-dark .card-text, .sec-brand .card-text,
.sec-dark .stat-label, .sec-brand .stat-label { color: rgba(255,255,255,.75); }

.sec-head { max-width: 620px; margin-bottom: 48px; }
.sec-title {
  font-family: var(--font-baslik);
  font-size: clamp(1.85rem, 3.4vw, 2.6rem);
  line-height: 1.14; font-weight: 600; letter-spacing: -.012em; margin: 0;
  text-wrap: balance;
}
.sec-title.mb { margin-bottom: 40px; }
.sec-text { font-size: 1.06rem; color: var(--ink-600); margin: 16px 0 0; max-width: 62ch; }
.center { text-align: center; }
.narrow { max-width: 640px; margin-left: auto; margin-right: auto; }

/* Üst etiket. Marka rengiydi; artık nötr. Renk, üzerine basılabilecek
   şeye ayrılmış durumda — yeşil düğme, mavi bağlantı. Her bölümde bir
   renkli etiket, rengin taşıdığı bilgiyi tüketiyordu. */
.overline {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 14px;
  font-size: .7rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-500);
}
.overline::before {
  content: ''; width: 22px; height: 1px; flex: none;
  background: currentColor; opacity: .55;
}
.sec-dark .overline, .sec-brand .overline, .hero.sec-dark .overline { color: rgba(255,255,255,.62); }
.sec-soft .overline { color: var(--ink-500); }

/* ----------------------------------------------------------------- BUTONLAR */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 13px 26px; border-radius: var(--radius-sm);
  font-size: .9rem; font-weight: 600; border: 1px solid transparent; cursor: pointer;
  transition: background-color .16s, color .16s, border-color .16s, box-shadow .16s;
}
.btn-primary { background: var(--brand); color: #fff; box-shadow: var(--golge-sm); }
.btn-primary:hover { background: var(--brand-600); box-shadow: var(--golge); }
.btn-ghost { background: #fff; color: var(--ink-800); border-color: var(--cizgi-koyu); }
.btn-ghost:hover { border-color: var(--mavi); color: var(--mavi); }
.sec-dark .btn-ghost, .sec-brand .btn-ghost {
  background: transparent; color: #fff; border-color: rgba(255,255,255,.35);
}
.sec-dark .btn-ghost:hover, .sec-brand .btn-ghost:hover { border-color: #fff; color: #fff; }
.btn-sm { padding: 10px 20px; font-size: .85rem; }
.btn-block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* -------------------------------------------------------------- ÜST MENÜ */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.94); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--cizgi);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 28px; min-height: 72px; }
.logo { flex: 0 0 auto; }
.logo img { height: 38px; width: auto; display: block; }
.logo-text { font-size: 1.25rem; font-weight: 700; letter-spacing: -.02em; }

/* Menü tek satırda kalır: başlıklar ve düğme yazıları hiçbir zaman bölünmez */
.nav { display: flex; align-items: center; gap: 26px; }
.nav > a { font-size: .9rem; font-weight: 500; color: var(--ink-700); white-space: nowrap; }
.nav > a:hover { color: var(--mavi); }
.nav-actions { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.nav-actions .btn { white-space: nowrap; }
.nav-panel { padding-left: 18px; padding-right: 18px; }

/* Dar masaüstünde menü sıkışmasın diye kademeli daralma */
@media (max-width: 1240px) {
  .nav { gap: 20px; }
  .nav > a { font-size: .86rem; }
  .nav-actions { gap: 10px; }
  .nav-actions .btn-sm { padding: 9px 15px; font-size: .8rem; }
}
@media (max-width: 1080px) {
  .nav { gap: 15px; }
  .nav > a { font-size: .82rem; }
  .logo img { height: 32px; }
}


/* ------------------------------------------------- MENÜDE AÇILIR BAŞLIKLAR
   Yedi düz madde yerine dört başlık. Ziyaretçi siteye "özellik listesi"
   aramaya gelmiyor, kendini arıyor — belediye çalışanı "Çözümler" altında
   kendi satırını buluyor.

   JavaScript YOK: <details> etiketi betiksiz de açılıyor. Masaüstünde
   üzerine gelince, telefonda dokununca. Menü, betik yüklenmeden önce de
   çalışmalı; yüklenmezse de çalışmalı. */

.nav-grup { position: relative; }
.nav-grup > summary {
  display: flex; align-items: center; gap: 6px;
  font-size: .9rem; font-weight: 500; color: var(--ink-700);
  white-space: nowrap; cursor: pointer; list-style: none;
  padding: 6px 0;
}
.nav-grup > summary::-webkit-details-marker { display: none; }
.nav-grup > summary:hover { color: var(--mavi); }
.nav-grup[open] > summary { color: var(--mavi); }
.nav-ok {
  width: 6px; height: 6px; flex: none; margin-top: -3px;
  border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg); transition: transform .16s ease;
}
.nav-grup[open] > summary .nav-ok { transform: rotate(-135deg); margin-top: 2px; }

.nav-alt { display: flex; flex-direction: column; }
.nav-alt > a { font-size: .9rem; color: var(--ink-700); white-space: nowrap; }
.nav-alt > a:hover { color: var(--mavi); }

@media (min-width: 901px) {
  .nav-alt {
    position: absolute; top: calc(100% + 10px); left: -14px; z-index: 60;
    min-width: 214px; padding: 8px;
    background: #fff; border: 1px solid var(--cizgi); border-radius: 12px;
    box-shadow: 0 14px 38px rgba(11,34,57,.13);
  }
  .nav-alt > a { padding: 9px 12px; border-radius: 8px; }
  .nav-alt > a:hover { background: var(--ink-100, rgba(11,34,57,.05)); }

  /* ═══════════════════════════════════════════════════════════════
     ON BİRİNCİ MADDEDEN SONRA İKİNCİ SÜTUN            (paket 437)
     ═══════════════════════════════════════════════════════════════

     ÖLÇÜLEN KUSUR. 437 "Özellikler" menüsüne altı madde daha
     ekliyor: 13 → 19. Tarayıcıda, gerçek sayfada ölçüldü (1366×768):

         13 madde → kutu 542 piksel, alt kenarı 605
         19 madde → kutu 784 piksel, alt kenarı 847

     Pencere 768 piksel. Yani son maddeler EKRANIN DIŞINDA kalıyor ve
     oraya ulaşmanın yolu yok: kutu üst menüye yapışık duruyor,
     fareyle üzerindeyken sayfa kaydırılamıyor. Menüye eklenmiş ama
     tıklanamayan bir madde, menüde olmayan bir maddedir.

     ÇARE. On bir ya da daha fazla madde varsa liste ızgaraya geçip
     ikinci sütuna sarıyor. Ölçüldü: 19 madde → kutu 421 piksel, alt
     kenarı 484, iki sütun, kutu dışında kalan madde 0.

     NİYE FLEX-WRAP DEĞİL: önce onu denedim ve ekran görüntüsünde
     görüldü — maddeler ikinci ve üçüncü sütuna sarıyordu ama KUTUNUN
     GENİŞLİĞİ büyümüyordu; yazılar beyaz zeminin dışında, koyu
     kapağın üstünde duruyordu. Konumlandırılmış bir kutunun genişliği
     sarma kararından önce hesaplanıyor. Izgarada öyle değil: sütun
     sayısı baştan belli, genişlik de doğru çıkıyor.

     :has() DESTEKLENMEZSE: kural hiç uygulanmıyor ve menü bugünkü
     tek sütun hâline dönüyor — yani eskisinden kötü olmuyor. Kısayol
     bir sınıf adı değil, maddenin kendisi sayılıyor: yeni madde
     eklendiğinde kimsenin sınıf yazması gerekmiyor. */
  .nav-alt:has(> a:nth-child(11)) {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(10, auto);
    gap: 0 4px;
  }

  /* AÇILMA CSS İLE YAPILMIYOR, betikle yapılıyor — ve bunun sebebi var:
     tarayıcı, kapalı bir <details> içindeki içeriği kendi iç mekanizmasıyla
     gizliyor ve bu "display" ile geri getirilemiyor. Denedim, açılmadı.
     Bu yüzden fareyle açma küçük bir betikle "open" özniteliğini koyuyor.
     Betik yüklenmezse menü yine çalışıyor: başlığa tıklanınca açılıyor.

     Açılır kutu ile başlık arasındaki boşlukta menü kapanmasın diye
     görünmez bir köprü bırakıldı. */
  .nav-grup::after {
    content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 12px;
  }
}

.nav-toggle { display: none; }
.nav-burger { display: none; flex-direction: column; gap: 5px; padding: 10px; cursor: pointer; }
.nav-burger span { display: block; width: 22px; height: 2px; background: var(--ink-700); border-radius: 2px; }

/* ------------------------------------------------------------------ HERO */

/* Başlık sütunu görselden GENİŞ. Eşit iki sütunda başlık beş kısa satıra
   bölünüyordu; satır boyu, punto büyüdükçe sütunla birlikte büyümeli. */
.hero { padding: 92px 0 88px; }
.hero-grid { display: grid; grid-template-columns: 1.12fr 1fr; gap: 52px; align-items: center; }
.hero-grid--single { grid-template-columns: 1fr; max-width: 800px; }
.hero-title {
  font-family: var(--font-baslik);
  font-size: clamp(2.25rem, 4.6vw, 3.35rem);
  line-height: 1.06; letter-spacing: -.014em; font-weight: 600; margin: 0;
  text-wrap: balance;
}
.hero-text { font-size: 1.1rem; line-height: 1.7; margin: 24px 0 0; max-width: 34em; opacity: .8; }
.hero-media img { width: 100%; filter: drop-shadow(0 18px 44px rgba(11,34,57,.18)); }

/* ---------------------------------------------------------------- IZGARA */

.grid { display: grid; gap: 24px; }
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }

/* ---------------------------------------------------------------- SAYILAR */

/* Sayı şeridi ORTALANMIYOR. Sayfanın geri kalanı sola hizalı; şeridi
   ortalayınca göz her bölümde ekseni değiştirmek zorunda kalıyordu.
   Her sayı kendi sütununun solunda başlıyor, üstünde ince bir çizgiyle. */
.stats-grid { gap: 34px; margin-top: 44px; }
.stat { text-align: left; padding-top: 18px; border-top: 2px solid var(--ink-900); }
.sec-dark .stat, .sec-brand .stat { border-top-color: var(--brand-300); }
.stat-value {
  font-family: var(--font-baslik);
  font-size: clamp(2.3rem, 4.6vw, 3.1rem); font-weight: 600;
  letter-spacing: -.02em; color: var(--mavi-600); line-height: 1.05;
}
/* Dört sütunlu şeritte değerler kelime olabiliyor — punto küçülür,
   yükseklik sabitlenir ki alt satırdaki etiketler aynı hizada dursun */
.stats-grid.cols-4 .stat-value {
  font-size: clamp(1.6rem, 2.7vw, 2.1rem);
  min-height: 2.1em; display: flex; align-items: flex-end;
}
.sec-dark .stat-value, .sec-brand .stat-value { color: var(--brand-300); }
.stat-label { margin-top: 12px; padding-bottom: 4px; font-size: .9rem; line-height: 1.5; color: var(--ink-600); }
@media (max-width: 860px) { .stat + .stat { padding-left: 0; } }

/* ----------------------------------------------------------------- KARTLAR */

/* KUTU BİR ANLAM TAŞIR, SÜS DEĞİLDİR.
   Eskiden sayfadaki her şey kutuydu: dokuz ayrı ızgara, hepsi aynı yuvarlak
   köşeli çerçeve, aynı gölge, aynı 46 piksellik ikon karesi. Her şey kutu
   olunca kutu hiçbir şey söylemiyor.
   Bugünkü kural tek cümle: ÇİZGİ "bu bir listenin maddesi", KUTU "buraya
   tıklanır" demek. Özellik listeleri artık üstten ince çizgiyle ayrılan
   maddeler; yalnızca tıklanabilir kartlar (çözüm sayfalarına giden) çerçeve
   içinde duruyor. */
.card {
  padding: 22px 24px 4px 0;
  border-top: 1px solid var(--ink-900);
}
.sec-dark .card, .sec-brand .card { border-top-color: rgba(255,255,255,.55); }

.card--link {
  padding: 24px; border: 1px solid var(--cizgi); border-top-color: var(--cizgi);
  border-radius: var(--radius); background: #fff;
  transition: border-color .18s, background-color .18s;
}
.sec-dark .card--link  { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); }
.sec-brand .card--link { background: rgba(255,255,255,.1);  border-color: rgba(255,255,255,.22); }
/* Üzerine gelince kart zıplamıyor. Zıplama (translateY) hiçbir bilgi
   taşımıyor, yalnızca hareket ekliyordu; kenarlığın renklenmesi ise
   "burası tıklanabilir" bilgisini veriyor. */
.card--link:hover { border-color: var(--mavi); background: var(--mavi-50); }
.sec-dark .card--link:hover, .sec-brand .card--link:hover { border-color: var(--brand-300); background: rgba(255,255,255,.12); }
/* Tıklanabilir kart olduğu başlığın yanındaki okla belli olur */
.card--link .card-title::after {
  content: '→'; color: var(--mavi); font-weight: 400; margin-left: 8px;
  display: inline-block; transition: transform .18s;
}
.card--link:hover .card-title::after { transform: translateX(4px); }
.sec-dark .card--link .card-title::after,
.sec-brand .card--link .card-title::after { color: var(--brand-300); }
/* İkon artık kutunun içinde değil, başlığın hizasında duran küçük bir
   işaret. Yuvarlak köşeli renkli kare, hazır şablon izleniminin ikinci
   kaynağıydı: altı kart, altı özdeş kare. */
.card-icon {
  width: 22px; height: 22px; margin-bottom: 14px;
  display: flex; align-items: center; justify-content: flex-start;
  font-size: 1.05rem; color: var(--mavi);
}
.card-icon svg { width: 20px; height: 20px; }
.sec-dark .card-icon, .sec-brand .card-icon { color: var(--brand-300); }
.card--link .card-icon {
  width: 38px; height: 38px; border-radius: var(--radius-sm); margin-bottom: 18px;
  justify-content: center; background: var(--mavi-50); border: 1px solid var(--mavi-100);
}
.sec-dark .card--link .card-icon, .sec-brand .card--link .card-icon { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.18); }
.card-img { width: 100%; height: 160px; object-fit: cover; border-radius: var(--radius); margin-bottom: 20px; }
.card-title { font-size: 1rem; font-weight: 600; margin: 0; letter-spacing: -.005em; }
.card-text { font-size: .92rem; line-height: 1.68; color: var(--ink-600); margin: 8px 0 0; max-width: 44ch; }

/* ----------------------------------------------------------------- ADIMLAR */

/* Adım numarası bir rozet değil, bir SAYI. Sıra bilgisini zaten taşıyor;
   renkli kare içine almak bilgiye bir şey eklemiyordu. */
.step-num {
  margin-bottom: 12px;
  font-family: var(--font-baslik);
  font-size: 2rem; font-weight: 600; line-height: 1;
  color: var(--mavi); font-variant-numeric: tabular-nums;
}
.sec-dark .step-num, .sec-brand .step-num { color: var(--brand-300); }

/* ----------------------------------------------------------- GÖRSEL+METİN */

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.split--rev > div:first-child { order: 2; }
.split-img { width: 100%; border-radius: var(--radius); box-shadow: var(--golge-lg); border: 1px solid var(--cizgi); }

/* ------------------------------------------------------------ KARŞILAŞTIRMA */

.compare-box { border: 1px solid var(--cizgi); border-radius: var(--radius); padding: 32px; background: var(--ink-50); color: var(--ink-600); }
.compare-box--brand { border: 1px solid var(--brand-100); background: var(--brand-50); color: var(--ink-900); }
.compare-label { margin: 0 0 14px; font-size: .72rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-500); }
.compare-box--brand .compare-label { color: var(--brand-600); }
.compare-box--brand .compare-label::before { content: '✓ '; }
.compare-text { margin: 0; font-size: 1.2rem; line-height: 1.6; }
.compare-box--brand .compare-text { font-weight: 500; }

/* ----------------------------------------------------------------- GALERİ */

.gallery-item img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 12px; }
.gallery-item figcaption { margin-top: 10px; font-size: .87rem; color: var(--ink-500); }

/* ------------------------------------------------------------------ VİDEO */

.video-frame { margin-top: 40px; border-radius: var(--radius); overflow: hidden; background: #000; box-shadow: var(--golge-lg); }
.video-frame iframe, .video-frame video { display: block; width: 100%; aspect-ratio: 16/9; border: 0; }

/* -------------------------------------------------------------------- SSS */

/* SSS iki sütun: solda başlık, sağda sorular. Eskiden dar bir kolonda
   ortada duruyordu — sayfanın geri kalanı sola hizalıyken SSS ortada
   başlıyor, göz ekseni kaybediyordu. Başlık kaydırmada yerinde kalıyor. */
.sss-duzen { display: grid; grid-template-columns: minmax(220px, 320px) 1fr; gap: 56px; align-items: start; }
.sss-bas { position: sticky; top: 104px; }
@media (max-width: 900px) {
  .sss-duzen { grid-template-columns: 1fr; gap: 28px; }
  .sss-bas { position: static; }
}

.faq { border-top: 1px solid var(--ink-900); background: transparent; }
.sec-dark .faq, .sec-brand .faq { border-top-color: rgba(255,255,255,.55); }
.faq-item + .faq-item { border-top: 1px solid var(--cizgi); }
.sec-dark .faq-item + .faq-item, .sec-brand .faq-item + .faq-item { border-color: rgba(255,255,255,.12); }
.faq-item summary {
  list-style: none; cursor: pointer; padding: 19px 0;
  display: flex; align-items: baseline; justify-content: space-between; gap: 24px;
  font-weight: 600; font-size: 1.02rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-plus { color: var(--ink-400); font-size: 1.4rem; line-height: 1; transition: transform .18s; flex: none; }
.faq-item[open] .faq-plus { transform: rotate(45deg); }
.faq-a { padding: 0 0 22px; font-size: .95rem; line-height: 1.75; color: var(--ink-600); max-width: 62ch; }
.sec-dark .faq-a, .sec-brand .faq-a { color: rgba(255,255,255,.72); }

/* -------------------------------------------------------------------- CTA */

/* TEK EKSEN. Sayfanın gövdesi sola hizalı; sayı şeridi, SSS ve kapanış
   çağrısı ortalıydı. Göz her bölümde satır başını yeniden arıyordu.
   Ortalama artık hiçbir yerde yok — bir sayfada iki hizalama ekseni,
   şablondan çıkma izleniminin en sessiz sebeplerinden biri. */
.cta { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; max-width: 720px; }
.cta .sec-text { margin: 0; }

/* ---------------------------------------------------------------- İLETİŞİM */

.contact-list { margin: 32px 0 0; display: grid; gap: 18px; }
.contact-list dt { font-size: .85rem; font-weight: 600; color: var(--ink-500); }
.contact-list dd { margin: 4px 0 0; font-size: 1.08rem; }
.contact-list a:hover { color: var(--mavi); }
.map { margin-top: 32px; border-radius: 12px; overflow: hidden; }
.map iframe { width: 100%; height: 260px; border: 0; display: block; }

.form-card { border: 1px solid var(--cizgi); border-radius: var(--radius); padding: 28px; background: #fff; box-shadow: var(--golge); }
.sec-dark .form-card { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); }
.form { display: grid; gap: 16px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.input {
  width: 100%; padding: 13px 16px; font: inherit; font-size: .92rem;
  border: 1px solid var(--cizgi-koyu); border-radius: 10px; background: #fff; color: var(--ink-900);
  outline: none; transition: border-color .15s;
}
.input:focus { border-color: var(--mavi); box-shadow: 0 0 0 3px var(--mavi-50); }
.sec-dark .input { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.2); color: #fff; }
textarea.input { resize: vertical; }
.hp { position: absolute; left: -9999px; }
.form-note { font-size: .78rem; color: var(--ink-400); margin: 0; }
.form-error { background: #fdecec; color: #a52222; padding: 12px 16px; border-radius: var(--radius-sm); margin: 0; font-size: .9rem; }
.form-success { text-align: center; padding: 40px 0; }
.form-success-icon {
  width: 56px; height: 56px; margin: 0 auto 16px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: var(--brand-50); color: var(--brand); font-size: 1.8rem;
}
.form-success-title { font-size: 1.15rem; font-weight: 700; margin: 0; }
.form-success-text { color: var(--ink-600); margin: 8px 0 0; font-size: .93rem; }

/* ------------------------------------------------------------------- PROSE */

.prose { font-size: 1rem; }
.prose h2 { font-size: 1.7rem; line-height: 1.25; font-weight: 700; margin: 32px 0 12px; }
.prose h3 { font-size: 1.28rem; line-height: 1.3; font-weight: 700; margin: 26px 0 8px; }
.prose p  { margin: 14px 0; line-height: 1.75; color: var(--ink-700); }
.prose ul { list-style: disc; padding-left: 22px; margin: 14px 0; color: var(--ink-700); }
.prose ol { list-style: decimal; padding-left: 22px; margin: 14px 0; color: var(--ink-700); }
.prose li { margin: 6px 0; line-height: 1.7; }
.prose a  { color: var(--brand-600); text-decoration: underline; text-underline-offset: 3px; }
.prose strong { font-weight: 700; color: var(--ink-900); }
.prose blockquote { border-left: 3px solid var(--brand); padding-left: 18px; margin: 20px 0; font-style: italic; color: var(--ink-600); }
.sec-dark .prose p, .sec-dark .prose ul, .sec-dark .prose ol { color: rgba(255,255,255,.75); }
.sec-dark .prose strong { color: #fff; }

/* ------------------------------------------------------------------ FOOTER */

.site-footer { background: var(--ink-950); color: #fff; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; padding-top: 64px; padding-bottom: 64px; }
.footer-logo { height: 38px; width: auto; }
.footer-text { margin: 20px 0 0; max-width: 34em; font-size: .9rem; line-height: 1.7; color: rgba(255,255,255,.6); }
.footer-social { display: flex; gap: 16px; margin-top: 24px; }
.footer-social a { font-size: .87rem; color: rgba(255,255,255,.6); }
.footer-social a:hover { color: var(--brand-300); }
/* .4 saydamlık koyu altbilgide 3.82:1 veriyordu — 11 puntoluk aralıklı
   büyük harf için yetersiz. .62'de 7.46:1. Altbilgi sitenin her
   sayfasında olduğu için bu tek satır bütün siteyi etkiliyor. */
.footer-head { font-size: .72rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.62); margin: 0 0 16px; }
.footer-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: .92rem; color: rgba(255,255,255,.7); }
.footer-list a:hover { color: var(--brand-300); }
/* Güvenli ödeme şeridi — Visa / Mastercard / Troy / iyzico */
.footer-odeme { border-top: 1px solid rgba(255,255,255,.1); }
.footer-odeme .wrap { padding-top: 24px; padding-bottom: 24px; }
.odeme-serit { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.odeme-baslik { display: flex; align-items: center; gap: 9px; margin: 0; font-size: .82rem; color: rgba(255,255,255,.55); }
.odeme-kilit svg { width: 15px; height: 15px; fill: currentColor; display: block; }
.odeme-logolar { list-style: none; display: flex; align-items: center; gap: 10px; margin: 0; padding: 0; flex-wrap: wrap; }
.odeme-logolar img { height: 34px; width: auto; display: block; }

/* Açık zeminde (yasal sayfalar) aynı şerit */
.sec-light .odeme-baslik { color: var(--ink-500); }
.sec-light .odeme-logolar img { border: 1px solid var(--ink-200); border-radius: 7px; }

/* ------------------------------------------------------------ YASAL SAYFA */

.yasal h1 { margin-bottom: 6px; }
.yasal h2 { font-size: 1.12rem; margin: 34px 0 10px; color: var(--ink-900); }
.yasal h3 { font-size: 1rem; margin: 22px 0 8px; color: var(--ink-900); }
.yasal p, .yasal li { color: var(--ink-600); line-height: 1.8; }
.yasal ul, .yasal ol { padding-left: 20px; }
.yasal li { margin-bottom: 7px; }
.yasal a { color: var(--brand-600); text-decoration: underline; text-underline-offset: 3px; }
.yasal strong { color: var(--ink-900); }

.bilgi-kart { background: var(--ink-50, #f6f6f6); border: 1px solid var(--ink-200); border-radius: 13px; padding: 20px 24px; margin: 22px 0; }
.bilgi-kart h3 { margin: 0 0 12px; font-size: .95rem; }
.bilgi-liste { display: grid; grid-template-columns: 190px 1fr; gap: 8px 18px; margin: 0; font-size: .92rem; }
.bilgi-liste dt { color: var(--ink-500); }
.bilgi-liste dd { margin: 0; color: var(--ink-900); font-weight: 600; }

.yasal-uyari { background: #fff6e6; border: 1px solid #f2ddc0; border-radius: 12px; padding: 16px 20px; margin: 22px 0; color: #7a4f13; font-size: .92rem; }
.yasal-uyari strong { color: #7a4f13; }

.yasal-tablo { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: .92rem; }
.yasal-tablo th, .yasal-tablo td { border: 1px solid var(--ink-200); padding: 10px 14px; text-align: left; vertical-align: top; }
.yasal-tablo th { background: var(--ink-50, #f6f6f6); font-weight: 700; color: var(--ink-900); width: 34%; }

@media (max-width: 640px) {
  .bilgi-liste { grid-template-columns: 1fr; gap: 2px 0; }
  .bilgi-liste dd { margin-bottom: 10px; }
  .yasal-tablo th { width: auto; }
}

.footer-bottom { border-top: 1px solid rgba(255,255,255,.1); }
.footer-bottom-inner { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 22px; padding-bottom: 22px; font-size: .78rem; color: rgba(255,255,255,.62); }
.footer-bottom-inner p { margin: 0; }
.footer-bottom-inner a:hover { color: rgba(255,255,255,.75); }

/* -------------------------------------------------------------- WHATSAPP */

.wa-fab {
  position: fixed; right: 24px; bottom: 24px; z-index: 60;
  width: 56px; height: 56px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: #25d366; color: #fff; box-shadow: 0 10px 26px rgba(0,0,0,.25);
  transition: transform .15s;
}
.wa-fab:hover { transform: scale(1.06); }
.wa-fab svg { width: 28px; height: 28px; fill: currentColor; }

/* ----------------------------------------------------------------- DİĞER */

.draft-bar { background: var(--brand); color: #fff; text-align: center; padding: 10px 20px; font-size: .87rem; font-weight: 600; }
.notfound { text-align: center; padding: 80px 0; }
.notfound-code { font-size: 4.5rem; font-weight: 700; color: var(--brand); margin: 0 0 12px; letter-spacing: -.03em; }
.notfound .btn { margin-top: 28px; }

/* ------------------------------------------------------------- DUYARLILIK */

@media (max-width: 900px) {
  .sec { padding: 56px 0; }
  .hero { padding: 60px 0; }
  .hero-grid, .split { grid-template-columns: 1fr; gap: 36px; }
  .split--rev > div:first-child { order: 0; }
  .cols-4 { grid-template-columns: repeat(2, 1fr); }
  .cols-3 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }

  .nav-burger { display: flex; }
  .nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #fff; border-bottom: 1px solid var(--ink-100);
    padding: 8px 20px 20px;
  }
  .nav-toggle:checked ~ .nav { display: flex; }
  .nav > a { padding: 14px 0; border-bottom: 1px solid var(--ink-100); font-size: .95rem; white-space: normal; }

  /* Açılır başlıklar telefonda liste gibi davranıyor: kutu değil, girinti. */
  .nav-grup { width: 100%; }
  .nav-grup > summary {
    padding: 14px 0; border-bottom: 1px solid var(--ink-100);
    font-size: .95rem; justify-content: space-between;
  }
  .nav-alt { padding: 4px 0 8px 14px; }
  .nav-alt > a {
    padding: 11px 0; font-size: .9rem; white-space: normal;
    border-bottom: 1px solid var(--ink-100);
  }
  .nav-alt > a:last-child { border-bottom: 0; }
  .nav-actions { flex-direction: column; align-items: stretch; gap: 12px; padding-top: 16px; }
  .nav-actions .btn { justify-content: center; }
  .header-inner { position: relative; flex-wrap: wrap; }
  .logo img { height: 34px; }
}

@media (max-width: 600px) {
  .cols-2, .cols-3, .cols-4, .stats-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom-inner { flex-direction: column; align-items: flex-start; }
  .compare-text { font-size: 1.05rem; }
}

/* Kart simgesi "ikon:ad" ile panelin SVG setinden geldiğinde:
   kutu içinde ortalansın ve marka rengini alsın. */
.card-icon svg { display: block; }
.card-icon:has(svg) { color: var(--brand, #0a854e); }
.sec-dark .card-icon:has(svg), .sec-brand .card-icon:has(svg) { color: #6ee7b7; }

/* ==========================================================================
   ŞEMALAR, EKRAN GÖRÜNTÜLERİ VE YASAL SAYFA İÇİNDEKİLER LİSTESİ
   (güncelleme 178)

   Buradaki her ölçü 900 piksellik metin sütununa (.wrap--text) göre
   verilmiştir; şemalar o sütunun içinde duruyor, taşmıyor.
   ========================================================================== */

/* ------------------------------------------------------------- AKIŞ ŞEMASI */

.akis {
  list-style: none; margin: 26px 0 30px; padding: 0;
  display: grid; gap: 14px;
  grid-template-columns: repeat(5, 1fr);
  counter-reset: none;
}

.akis-adim {
  position: relative;
  display: flex; flex-direction: column; gap: 7px;
  padding: 18px 16px 16px;
  background: #fff;
  border: 1px solid var(--cizgi);
  border-radius: var(--radius);
  box-shadow: var(--golge-sm);
  margin: 0;
}

/* Kutular arası ok. Son kutudan sonra ok olmaz — yoksa akış
   bitmemiş gibi görünür. */
.akis-adim::after {
  content: ''; position: absolute; top: 50%; right: -11px;
  width: 8px; height: 8px; margin-top: -4px;
  border-top: 2px solid var(--cizgi-koyu);
  border-right: 2px solid var(--cizgi-koyu);
  transform: rotate(45deg);
}
.akis-adim:last-child::after { content: none; }

.akis-no {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 999px;
  background: var(--brand-50); color: var(--brand-600);
  font-size: .74rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.akis-ikon { color: var(--brand); }
.akis-ikon .sema-ikon { width: 22px; height: 22px; display: block; }
.akis-baslik { font-size: .9rem; color: var(--ink-900); line-height: 1.35; }
.akis-metin  { font-size: .8rem; color: var(--ink-600); line-height: 1.55; }

@media (max-width: 900px) {
  .akis { grid-template-columns: repeat(2, 1fr); }
  .akis-adim::after { content: none; }
}
@media (max-width: 560px) {
  .akis { grid-template-columns: 1fr; gap: 10px; }
  .akis-adim { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .akis-baslik { flex: 1 1 auto; }
  .akis-metin  { flex: 1 1 100%; }
}

/* --------------------------------------------------------------- ROL ŞEMASI */

.rol {
  list-style: none; margin: 24px 0 28px; padding: 0;
  display: grid; gap: 14px; grid-template-columns: repeat(3, 1fr);
}
.rol-kart {
  display: flex; flex-direction: column; gap: 6px; margin: 0;
  padding: 20px 18px;
  background: var(--ink-50); border: 1px solid var(--cizgi);
  border-radius: var(--radius);
}
.rol-ikon { color: var(--mavi); }
.rol-ikon .sema-ikon { width: 24px; height: 24px; display: block; }
.rol-baslik { font-size: .95rem; color: var(--ink-900); }
.rol-kim {
  font-size: .74rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--brand-600);
}
.rol-metin { margin: 4px 0 0; font-size: .84rem; line-height: 1.6; color: var(--ink-600); }

@media (max-width: 760px) { .rol { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------- SVG ŞEMASI */

.sema-kutu { margin: 26px 0 30px; }
.sema-kaydir {
  overflow-x: auto;                 /* dar ekranda sayfa değil, şema kaysın */
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--cizgi);
  border-radius: var(--radius);
  background: #fff;
  padding: 10px;
}
.sema { display: block; width: 100%; min-width: 640px; height: auto; }
.sema-b {
  font-size: 15px; font-weight: 700; fill: var(--ink-900);
  text-anchor: middle; font-family: inherit;
}
.sema-b--ye  { fill: var(--brand-600); }
.sema-b--gri { fill: var(--ink-500); }
.sema-k {
  font-size: 12.5px; fill: var(--ink-600);
  text-anchor: middle; font-family: inherit;
}
.sema-k--sol { text-anchor: start; }
.sema-yok .sema-k { fill: var(--ink-500); }

.sema-kutu figcaption,
.ekran figcaption {
  margin-top: 10px; font-size: .84rem; color: var(--ink-500); line-height: 1.55;
}

/* -------------------------------------------------------- EKRAN GÖRÜNTÜSÜ */

.ekranlar {
  display: grid; gap: 22px; margin: 26px 0 10px;
  grid-template-columns: repeat(2, 1fr);
}
.ekran { margin: 0; }

/* Görüntünün kendisi bir düğme: tıklayınca sayfanın üstünde büyüyor.
   Tarayıcının düğmeye verdiği zemin, kenarlık ve iç boşluk sıfırlanıyor —
   yoksa görüntü kutunun içinde küçülür. */
.ekran-bag {
  display: block; width: 100%; padding: 0; margin: 0;
  font: inherit; color: inherit; cursor: zoom-in;
  border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--cizgi); box-shadow: var(--golge); background: #fff;
}
.ekran-bag:hover { border-color: var(--cizgi-koyu); }
.ekran-bag:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }
.ekran img { display: block; width: 100%; height: auto; }
.ekran figcaption { display: flex; flex-direction: column; gap: 2px; }
.ekran figcaption strong { color: var(--ink-900); font-size: .9rem; }
.ekran-not { font-size: .78rem; color: var(--ink-400); margin: 14px 0 0; }

@media (max-width: 700px) { .ekranlar { grid-template-columns: 1fr; } }

/* Tek başına duran geniş bir ekran görüntüsü */
.ekranlar--tek { grid-template-columns: 1fr; }

/* ------------------------------------------------- YASAL: İÇİNDEKİLER */

.icindekiler {
  margin: 26px 0 34px; padding: 20px 24px;
  background: var(--ink-50); border: 1px solid var(--cizgi);
  border-radius: var(--radius);
}
.icindekiler-baslik {
  margin: 0 0 10px; font-size: .74rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink-500);
}
.icindekiler ol {
  margin: 0; padding-left: 22px;
  columns: 2; column-gap: 30px;
  font-size: .88rem;
}
.icindekiler li { margin-bottom: 6px; break-inside: avoid; color: var(--ink-500); }
.icindekiler a { color: var(--ink-700); text-decoration: none; }
.icindekiler a:hover { color: var(--brand-600); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 640px) { .icindekiler ol { columns: 1; } }

/* Çapaya atlayınca başlık üst kenara yapışmasın; sabit başlık altında kalmasın. */
.yasal h2[id] { scroll-margin-top: 90px; }


/* ------------------------------------------------------------------ BÜYÜTEÇ

   Ekran görüntüsü yeni sekmede değil, sayfanın üstünde açılıyor. Yeni
   sekmede açılan şey sitenin bir sayfası değil çıplak bir resim dosyası
   oluyordu; kullanıcı kendini sitenin dışında buluyordu.
   ------------------------------------------------------------------------ */

.buyutec {
  position: fixed; inset: 0; z-index: 200;
  display: none; align-items: center; justify-content: center;
  padding: 40px 60px;
  background: rgba(11, 34, 57, .88);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  cursor: zoom-out;
}
.buyutec.acik { display: flex; }

/* Katman açıkken arkadaki sayfa kaymasın. */
.buyutec-kilit, .buyutec-kilit body { overflow: hidden; }

/* WhatsApp düğmesi katmanın ALTINDA kalıyor (z-index 60 < 200), ama yarı
   saydam zeminin arkasından parlak yeşil bir daire olarak görünüyordu.
   Katman açıkken görünmesinin bir anlamı da yok. */
.buyutec-kilit .wa-fab { opacity: 0; pointer-events: none; }

.buyutec-govde {
  margin: 0; display: flex; flex-direction: column; gap: 12px;
  align-items: center; max-width: 100%; max-height: 100%;
}
.buyutec-resim {
  display: flex; align-items: center; justify-content: center;
  max-width: 100%; min-height: 0;
  border-radius: var(--radius-sm); box-shadow: 0 24px 60px rgba(0,0,0,.45);
}
.buyutec-govde img {
  display: block; max-width: 100%; max-height: 82vh;
  width: auto; height: auto; cursor: default;
  border-radius: var(--radius-sm); background: #fff;
}
.buyutec-govde figcaption {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  justify-content: center; text-align: center;
  color: rgba(255,255,255,.9); font-size: .9rem;
}
.buyutec-sayac { color: rgba(255,255,255,.5); font-size: .8rem;
                 font-variant-numeric: tabular-nums; }

/* Yalnızca görüntünün sığmadığı dar ekranlarda görünür. */
.buyutec-ipucu { display: none; color: rgba(255,255,255,.5); font-size: .78rem; }

.buyutec-kapat, .buyutec-ok {
  position: absolute; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 999px; cursor: pointer;
  background: rgba(255,255,255,.14); color: #fff;
  line-height: 1; font-family: inherit;
}
.buyutec-kapat:hover, .buyutec-ok:hover { background: rgba(255,255,255,.26); }
.buyutec-kapat:focus-visible, .buyutec-ok:focus-visible {
  outline: 3px solid #fff; outline-offset: 2px;
}
.buyutec-kapat { top: 16px; right: 16px; width: 42px; height: 42px; font-size: 1.7rem; }
.buyutec-ok    { top: 50%; margin-top: -24px; width: 48px; height: 48px; font-size: 2rem; }
.buyutec-ok--sol { left: 12px; }
.buyutec-ok--sag { right: 12px; }
.buyutec-ok[hidden] { display: none; }

@media (max-width: 640px) {
  .buyutec { padding: 56px 10px 20px; }
  .buyutec-ok { width: 40px; height: 40px; margin-top: -20px; font-size: 1.6rem; }
  .buyutec-ok--sol { left: 4px; }
  .buyutec-ok--sag { right: 4px; }

  /* TELEFONDA GÖRÜNTÜYÜ KÜÇÜLTMEK İŞE YARAMIYOR.
     390 piksel genişliğe sığdırılan bir panel ekranı 370 piksel oluyor;
     içindeki yazı okunmuyor ve büyüteç hiçbir işe yaramıyor. Onun için
     görüntü ekran yüksekliğine göre BÜYÜK bırakılıyor, kullanıcı yana
     kaydırarak inceliyor. */
  .buyutec-govde { width: 100%; }
  .buyutec-resim {
    overflow: auto; -webkit-overflow-scrolling: touch;
    width: 100%; justify-content: flex-start;
    background: rgba(255,255,255,.06);
  }
  .buyutec-govde img { max-width: none; width: auto; height: 72vh; max-height: none; }
  .buyutec-ipucu { display: block; flex-basis: 100%; }
}

/* ==========================================================================
   DİL SEÇİCİ (güncelleme 180)

   İki harflik kutular: TR / EN. Bayrak KULLANMIYORUZ — bayrak ülke
   gösterir, dil değil. İngilizce konuşan herkesin ülkesi İngiltere değil;
   Türkçe okuyan herkes de Türkiye'de oturmuyor.
   ========================================================================== */

.dil-secici { display: inline-flex; align-items: center; gap: 2px;
              border: 1px solid var(--cizgi); border-radius: 999px; padding: 2px; }
.dil-secici a, .dil-secici .dil-etkin {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; height: 26px; padding: 0 8px; border-radius: 999px;
  font-size: .74rem; font-weight: 700; letter-spacing: .03em;
  text-decoration: none; line-height: 1;
}
.dil-secici a { color: var(--ink-500); }
.dil-secici a:hover { background: var(--ink-100); color: var(--ink-900); }
.dil-secici .dil-etkin { background: var(--mavi-950); color: #fff; }

/* Koyu zeminde (footer) */
.sec-dark .dil-secici, .site-footer .dil-secici { border-color: rgba(255,255,255,.18); }
.sec-dark .dil-secici a, .site-footer .dil-secici a { color: rgba(255,255,255,.65); }
.sec-dark .dil-secici a:hover, .site-footer .dil-secici a:hover {
  background: rgba(255,255,255,.12); color: #fff;
}
.sec-dark .dil-secici .dil-etkin, .site-footer .dil-secici .dil-etkin {
  background: rgba(255,255,255,.92); color: var(--mavi-950);
}

@media (max-width: 980px) {
  /* Telefonda açılan menüde kendi satırında dursun; düğmelerle aynı
     satıra sıkışırsa dokunma alanı 26 pikselin altına iniyor. */
  .nav-actions .dil-secici { align-self: flex-start; }
}
.footer-bottom-sag { display: inline-flex; align-items: center; gap: 14px; }

/* ==================================================================
   REHBER (kılavuz yazıları)

   Yazı gövdesi mevcut .prose sınıfını kullanıyor; burada yalnızca
   liste kartları, içindekiler ve yazıya özel parçalar var. Aynı
   tipografiyi ikinci kez tanımlasaydık ikisi zamanla birbirinden
   ayrılırdı.
   ================================================================== */

.kv-bas { margin-bottom: 26px; }
.kv-bas .muted { font-size: 1.02rem; line-height: 1.7; max-width: 640px; }

/* --- kategori sekmeleri --- */
.kv-sekmeler { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 26px; }
.kv-sekme {
  display: inline-block; padding: 8px 16px; border-radius: 999px;
  border: 1px solid var(--cizgi-koyu); background: #fff;
  color: var(--ink-700); font-size: .88rem; font-weight: 600;
  text-decoration: none; transition: border-color .15s, color .15s;
}
.kv-sekme:hover { border-color: var(--brand); color: var(--brand-600); }
.kv-sekme.is-active { background: var(--brand); border-color: var(--brand); color: #fff; }

/* --- kart ızgarası --- */
.kv-izgara {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
}
.kv-kart { display: flex; }
.kv-kart-bag {
  display: flex; flex-direction: column; gap: 9px; width: 100%;
  padding: 22px; border: 1px solid var(--cizgi); border-radius: 14px;
  background: #fff; text-decoration: none; color: inherit;
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.kv-kart-bag:hover {
  border-color: var(--brand); transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(10, 34, 57, .08);
}
.kv-etiket {
  align-self: flex-start; font-size: .72rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--brand-600); background: #eaf7f0;
  padding: 4px 10px; border-radius: 999px;
}
.kv-kart-baslik { font-size: 1.12rem; line-height: 1.35; margin: 0; color: var(--ink-900); }
.kv-kart-ozet { margin: 0; font-size: .92rem; line-height: 1.65; color: var(--ink-700); }
.kv-kart-alt { margin: auto 0 0; padding-top: 6px; font-size: .8rem; color: var(--ink-600); }

.kv-bos { padding: 60px 20px; text-align: center; color: var(--ink-600); }
.kv-bos p { margin: 0 0 16px; }

/* --- yazı sayfası --- */
.kv-kirilim { font-size: .84rem; color: var(--ink-600); margin-bottom: 14px; }
.kv-kirilim a { color: var(--ink-700); text-decoration: none; }
.kv-kirilim a:hover { text-decoration: underline; }
.kv-kirilim span { margin: 0 6px; color: var(--ink-400); }

.kv-ust-bilgi { font-size: .86rem; color: var(--ink-600); margin: 10px 0 22px; }

.kv-ozet {
  font-size: 1.08rem; line-height: 1.75; color: var(--ink-700);
  border-left: 3px solid var(--brand); padding-left: 18px; margin: 0 0 28px;
}

/* İçindekiler yalnızca üç ve üzeri başlıkta çıkıyor; iki maddelik
   bir liste yer kaplamaktan başka bir işe yaramıyor. */
.kv-icindekiler {
  background: var(--ink-50); border: 1px solid var(--cizgi);
  border-radius: 12px; padding: 18px 22px; margin: 0 0 30px;
}
.kv-ic-baslik {
  margin: 0 0 10px; font-size: .78rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-600);
}
.kv-icindekiler ol { margin: 0; padding-left: 20px; }
.kv-icindekiler li { margin: 6px 0; line-height: 1.6; }
.kv-icindekiler a { color: var(--ink-800); text-decoration: none; }
.kv-icindekiler a:hover { color: var(--brand-600); text-decoration: underline; }

/* Yapışkan başlığın altında kalmasın diye başlıklara boşluk. */
.kv-govde h2[id], .kv-govde h3[id] { scroll-margin-top: 90px; }

.kv-uyari {
  background: #fdf6e6; border: 1px solid #eddfb8; border-radius: 10px;
  padding: 14px 16px; margin: 20px 0; font-size: .94rem; line-height: 1.7;
  color: #5c4609;
}

.kv-tablo-kaydir { overflow-x: auto; margin: 22px 0; }
.kv-tablo { width: 100%; border-collapse: collapse; font-size: .92rem; min-width: 460px; }
.kv-tablo th, .kv-tablo td {
  border: 1px solid var(--cizgi); padding: 10px 13px;
  text-align: left; vertical-align: top; line-height: 1.6;
}
.kv-tablo th { background: var(--ink-50); font-weight: 700; color: var(--ink-900); }
.kv-tablo td { color: var(--ink-700); }

.kv-cta {
  margin-top: 44px; padding: 26px 28px; border-radius: 14px;
  background: var(--ink-50); border: 1px solid var(--cizgi);
}
.kv-cta h2 { margin: 0 0 8px; font-size: 1.25rem; color: var(--ink-900); }
.kv-cta p  { margin: 0 0 16px; color: var(--ink-700); line-height: 1.7; }

@media (max-width: 640px) {
  .kv-kart-bag { padding: 18px; }
  .kv-ozet { font-size: 1rem; padding-left: 14px; }
  .kv-cta { padding: 20px; }
}

/* ═══════════════════════════════════════════════════════ VİDEO VİTRİNİ

   Örnek videolar telefon çerçevesinde, yan yana. Ziyaretçi "benim
   müşterim ne görecek" sorusunun cevabını burada görüyor.

   Çerçeve DİKEY (9:16) çünkü müşteri bu videoyu telefonunda görüyor.
   Yatay bir kutu, ürünü olmadığı bir şey gibi tanıtırdı. */

.vitrin-bas { margin-bottom: 36px; }

.vitrin { align-items: start; }

.vitrin-oge { margin: 0; }

/* Telefon çerçevesi: koyu bir kasa ve içinde ekran. Gölge ve yuvarlak
   köşeler, videonun "sitenin içindeki bir kutu" değil "bir telefon"
   olarak okunmasını sağlıyor. */
.vitrin-telefon {
  position: relative;
  background: var(--ink-950);
  border-radius: 26px;
  padding: 8px;
  box-shadow: 0 12px 32px rgba(15, 23, 32, .18);
  max-width: 280px;
  margin: 0 auto;
}

.vitrin-video {
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  border-radius: 19px;
  background: #000;
  object-fit: cover;
}

.vitrin-oge figcaption {
  margin-top: 16px;
  text-align: center;
  max-width: 280px;
  margin-left: auto;
  margin-right: auto;
}
.vitrin-oge figcaption strong {
  display: block;
  font-size: 1rem;
  color: var(--ink-900);
}
.vitrin-oge figcaption span {
  display: block;
  margin-top: 4px;
  font-size: .87rem;
  line-height: 1.55;
  color: var(--ink-600);
}

.vitrin-eylem { text-align: center; margin: 40px 0 0; }

/* Koyu bölümde metin renkleri zeminle birlikte dönmeli; yoksa koyu
   zeminde koyu yazı çıkar. */
.sec-dark .vitrin-oge figcaption strong, .sec-brand .vitrin-oge figcaption strong { color: #fff; }
.sec-dark .vitrin-oge figcaption span, .sec-brand .vitrin-oge figcaption span { color: var(--ink-200); }

@media (max-width: 900px) {
  /* Telefonda tek sütun: iki dikey çerçeve yan yana sığmıyor, ikisi de
     okunmaz boyuta iniyordu. */
  .vitrin.cols-2, .vitrin.cols-3, .vitrin.cols-4 { grid-template-columns: 1fr; }
  .vitrin { gap: 40px; }
}

/* ==========================================================================
   ZİNCİR BLOĞU — uçtan uca akış
   ==========================================================================

   "Adımlar" bloğu numaralı kartlar diziyor ve aralarındaki BAĞI
   göstermiyor. Bir zincirin anlatmak istediği şey ise tam olarak o bağ:
   bu adım bittiğinde öteki kendiliğinden başlıyor.

   Oklar CSS ile çiziliyor — dışarıdan hiçbir dosya, hiçbir betik
   yüklenmiyor. Bir tanıtım sayfası için üçüncü taraf bir kütüphane
   çağırmak, o kütüphane bir gün değişirse ziyaretçinin tarayıcısında
   çalışacak yabancı bir kod demek; şıklık bu riske değmez.
   ========================================================================== */

.zincir {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 0;
  max-width: 900px;
}

/* Halka: solda dar künye (numara + kim yapıyor), sağda anlatım.
   Aralarındaki dikey çizgi zincirin kendisi; son halkada bitiyor. */
.zincir-halka {
  position: relative;
  display: grid; grid-template-columns: 124px 1fr; gap: 20px;
  padding: 22px 0 24px 0;
}
/* Halkalar arasında yatay çizgi YOK. Dikey çizgi zaten sırayı taşıyor;
   her halkaya bir de yatay çizgi koyunca ekran ızgara kâğıdına dönüyor
   ve hiçbir çizgi bir şey söylemiyordu. Yalnızca zincirin başında ve
   sonunda birer çizgi var: nerede başladığı, nerede bittiği. */
.zincir-halka:first-child { border-top: 1px solid var(--ink-900); }
.zincir-halka:last-child  { border-bottom: 1px solid var(--cizgi); }
.sec-dark .zincir-halka:first-child, .sec-brand .zincir-halka:first-child { border-top-color: rgba(255,255,255,.55); }
.sec-dark .zincir-halka:last-child,  .sec-brand .zincir-halka:last-child  { border-bottom-color: rgba(255,255,255,.16); }

/* ZİNCİRİN KENDİSİ: künye sütununun sağ kenarından inen sürekli çizgi.
   Halkalar arasında kesilmiyor — kesilseydi "burada duruyor" derdi.
   Son halkada aşağı doğru bitiyor: devamı varmış gibi göstermek yalan
   olurdu. Çizgi CSS ile; dışarıdan hiçbir dosya yüklenmiyor. */
.zincir-halka::before {
  content: ''; position: absolute; left: 26px; top: 0; bottom: 0;
  width: 2px; background: var(--brand-300);
}
.zincir-halka:first-child::before { top: 34px; }
.zincir-halka:last-child::before  { bottom: auto; height: 34px; }
.sec-dark .zincir-halka::before, .sec-brand .zincir-halka::before { background: rgba(52,211,153,.32); }

/* Çizginin üstündeki nokta: halkanın başladığı yer. */
.zincir-halka::after {
  content: ''; position: absolute; left: 21px; top: 28px;
  width: 12px; height: 12px; border-radius: 999px;
  background: var(--brand); border: 3px solid #fff;
}
.sec-soft .zincir-halka::after { border-color: var(--ink-50); }
.sec-soft .zincir-halka--elle::after { border-color: var(--ink-600); }
.sec-dark .zincir-halka::after, .sec-brand .zincir-halka::after {
  background: var(--brand-300); border-color: var(--mavi-950);
}
/* Personelin yaptığı adımda nokta içi boş: "burada makine yok". */
.zincir-halka--elle::after { background: #fff; border: 3px solid var(--ink-600); }
.sec-dark .zincir-halka--elle::after, .sec-brand .zincir-halka--elle::after {
  background: var(--mavi-950); border-color: rgba(255,255,255,.55);
}

.zincir-yan { padding-left: 44px; }
.zincir-no {
  display: block; font-family: var(--font-baslik);
  font-size: 1.15rem; font-weight: 600; line-height: 1;
  color: var(--ink-400); font-variant-numeric: tabular-nums;
}
.sec-dark .zincir-no, .sec-brand .zincir-no { color: rgba(255,255,255,.55); }

.zincir-rozet {
  display: inline-block; margin-top: 8px;
  font-size: .64rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase;
}
/* İKİ ROZET İKİ AYRI ŞEY SÖYLÜYOR ve rengi de öyle: yeşil "buna
   dokunmuyorsunuz", nötr "burada insan var". Aynı renkte olsalardı
   zincirin bütün anlamı kaybolurdu. */
.zincir-rozet--oto  { color: var(--brand-600); }
.zincir-rozet--elle { color: var(--ink-500); }
.sec-dark .zincir-rozet--oto,  .sec-brand .zincir-rozet--oto  { color: var(--brand-300); }
.sec-dark .zincir-rozet--elle, .sec-brand .zincir-rozet--elle { color: rgba(255,255,255,.65); }

.zincir-ad { margin: 0 0 6px; font-size: 1.05rem; font-weight: 600; }
.zincir-metin { margin: 0; font-size: .95rem; line-height: 1.68; color: var(--ink-600); max-width: 58ch; }
.sec-dark .zincir-metin, .sec-brand .zincir-metin { color: rgba(255,255,255,.72); }

.zincir-dipnot {
  margin: 22px 0 0; font-size: .88rem; color: var(--ink-500);
}
.sec-dark .zincir-dipnot { color: rgba(255,255,255,.6); }

/* Telefonda künye üste geçiyor; 150 piksellik sütun 390 piksellik
   ekranda metne 90 piksel bırakıyordu. */
/* TELEFON — künye üste geçiyor, çizgi metnin SOLUNA çekiliyor.
   İlk denemede yalnızca sütunu tek yapmıştım: künye üste geçti ama
   dikey çizgi 26 pikselde kaldı ve METNİN İÇİNDEN geçti. Ölçmeden
   "tek sütuna düştü, tamam" demek yeterli değilmiş. Çizgi sola,
   halkanın tamamı çizgiden sonraya. */
@media (max-width: 620px) {
  .zincir-halka { grid-template-columns: 1fr; gap: 8px; padding-left: 30px; }
  .zincir-halka::before { left: 5px; }
  .zincir-halka::after  { left: 0; }
  .zincir-yan { padding-left: 0; display: flex; align-items: baseline; gap: 12px; }
  .zincir-rozet { margin-top: 0; }
  .zincir-metin { font-size: .92rem; }
}

/* ══════════════════════════════════════════════════════════════════════
   PAKETLER — FİYAT KARŞILAŞTIRMA TABLOSU  (paket 385)
   ══════════════════════════════════════════════════════════════════════

   Satırlar özellik, sütunlar paket. Tablo gerçek bir <table>: ekran
   okuyucu "Gümüş, aylık mesaj, 5.000" diye okuyor. Izgara (div) ile
   çizsem başlık-hücre bağı kaybolur ve tablo yalnızca gözle
   okunabilirdi.

   KAYDIRMA KABIN İÇİNDE. Beş sütunlu tablo telefonda 360 pikselden
   geniş; kap olmasaydı SAYFA GÖVDESİ yana kayardı — menü, başlık ve
   altbilgi de yerinden çıkardı. Kural: taşan içerik kendi kabında
   kayar, gövde asla.
   ------------------------------------------------------------------ */
.paket-kaydir {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--cizgi);
  border-radius: 10px;
  background: #fff;
}
.sec-dark .paket-kaydir, .sec-brand .paket-kaydir {
  background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.16);
}

.paket-tablo {
  width: 100%; min-width: 560px;
  border-collapse: collapse;
  font-size: .95rem;
}
.paket-tablo th, .paket-tablo td {
  padding: 13px 16px;
  border-bottom: 1px solid var(--cizgi);
  text-align: center;
  vertical-align: middle;
}
.sec-dark .paket-tablo th, .sec-dark .paket-tablo td,
.sec-brand .paket-tablo th, .sec-brand .paket-tablo td {
  border-color: rgba(255,255,255,.14);
}
/* İlk sütun satırın kimliği: solda ve kalın. */
.paket-tablo thead th:first-child,
.paket-tablo tbody th[scope="row"] {
  text-align: left; font-weight: 600; color: var(--ink-800);
  background: var(--ink-50);
  position: sticky; left: 0; z-index: 1;
}
.sec-dark .paket-tablo tbody th[scope="row"],
.sec-dark .paket-tablo thead th:first-child,
.sec-brand .paket-tablo tbody th[scope="row"],
.sec-brand .paket-tablo thead th:first-child {
  color: #fff; background: var(--mavi-800);
}
.paket-tablo tbody tr:last-child th, .paket-tablo tbody tr:last-child td { border-bottom: 0; }

.paket-ad { display: block; font-family: var(--font-baslik); font-size: 1.1rem; font-weight: 600; }
.paket-etiket {
  display: inline-block; margin-top: 5px; padding: 2px 9px;
  font-size: .7rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: #fff; background: var(--brand); border-radius: 999px;
}
.paket-fiyat { display: block; font-size: 1.25rem; font-weight: 700; color: var(--ink-900); }
.sec-dark .paket-fiyat, .sec-brand .paket-fiyat { color: #fff; }
.paket-donem { display: block; font-size: .8rem; color: var(--ink-500); }
.sec-dark .paket-donem, .sec-brand .paket-donem { color: rgba(255,255,255,.65); }
.paket-birim { font-weight: 400; color: var(--ink-500); font-size: .85em; }
.paket-yok-isaret { color: var(--ink-400); }
/* PAKET 939 — özellik satırları: grup başlığı tam satır, ✓ marka renginde. */
.paket-tablo .paket-grup-satir th { background: var(--ink-50); text-align: left; font-weight: 700; font-size: .85rem; letter-spacing: .02em; padding-top: 14px; }
.paket-tablo .paket-ozellik-satir th { font-weight: 400; }
.paket-tablo .paket-ozellik-satir td { text-align: center; }
.paket-var { color: var(--brand); font-weight: 700; }
.sec-dark .paket-var, .sec-brand .paket-var { color: #fff; }
/* ═══ PAKET 942 — Paket kartları (Aylık/Yıllık · iki kart · alt bayi kutusu) ═══ */
.paket-baslik-vurgu { color: var(--brand); }
.paket-donem-sec { display: flex; justify-content: center; align-items: center; gap: 4px; margin: 0 auto 28px; position: relative; width: max-content; max-width: 100%; padding: 4px; border: 1px solid var(--cizgi); border-radius: 999px; background: #fff; }
.paket-donem-dugme { border: 0; background: transparent; padding: 10px 30px; border-radius: 999px; font: inherit; font-weight: 600; color: var(--ink-700); cursor: pointer; }
.paket-donem-dugme.is-secili { background: var(--brand); color: #fff; }
.paket-donem-not { position: absolute; left: calc(100% + 14px); white-space: nowrap; font-size: .9rem; color: var(--ink-600); }
.paket-kartlar { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; max-width: 1160px; margin: 0 auto; align-items: stretch; }
.paket-kart { display: flex; flex-direction: column; gap: 16px; padding: 28px; border: 1px solid var(--cizgi); border-radius: var(--radius-lg); background: #fff; box-shadow: var(--golge); color: var(--ink-900); text-align: left; }
.paket-kart--koyu { background: var(--ink-900); border-color: var(--ink-900); color: #fff; }
.paket-kart-bas { display: flex; gap: 16px; align-items: center; padding-bottom: 18px; border-bottom: 1px solid var(--cizgi); }
.paket-kart--koyu .paket-kart-bas { border-bottom-color: var(--cizgi-koyu); }
.paket-kart-simge { flex: 0 0 64px; height: 64px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--brand-50); color: var(--brand); }
.paket-kart--koyu .paket-kart-simge { background: var(--ink-700); color: #fff; }
.paket-kart-ad { margin: 0; font-family: var(--font-baslik); font-size: 1.6rem; line-height: 1.2; }
.paket-kart-slogan { margin: 4px 0 0; color: var(--ink-600); }
.paket-kart--koyu .paket-kart-slogan, .paket-kart--koyu .paket-kart-alt { color: var(--ink-200); }
.paket-kart-tutar { font-size: 2.6rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.paket-kart-donem { font-size: 1.2rem; color: var(--ink-600); }
.paket-kart--koyu .paket-kart-donem { color: var(--ink-200); }
.paket-kart-alt { font-size: .92rem; color: var(--ink-600); margin-top: 2px; }
.paket-kartlar[data-donem="aylik"] .paket-fiyat-y,
.paket-kartlar[data-donem="yillik"] .paket-fiyat-yedek { display: none; }
.paket-kart-maddeler { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.paket-kart-maddeler li { display: flex; align-items: center; gap: 12px; }
.paket-kart-isaret { flex: 0 0 22px; height: 22px; border-radius: 50%; background: var(--brand); position: relative; }
.paket-kart-isaret::after { content: ""; position: absolute; left: 7px; top: 4px; width: 6px; height: 11px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.paket-kart-maddeler li.is-yok { color: var(--ink-500); }
.paket-kart-maddeler li.is-yok .paket-kart-isaret { background: var(--ink-400); }
.paket-kart-maddeler li.is-yok .paket-kart-isaret::after { left: 5px; top: 10px; width: 12px; height: 0; border-width: 2px 0 0 0; transform: none; }
.paket-kart-hediye { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: var(--radius); background: var(--brand-50); color: var(--brand-600); font-weight: 600; }
.paket-kart--koyu .paket-kart-hediye { background: var(--ink-800); color: #fff; }
.paket-kart--koyu .paket-kart-hediye svg { color: var(--brand-300); }
.paket-kart-altbayi { display: flex; gap: 16px; align-items: center; padding: 16px 18px; border: 1px solid var(--cizgi); border-radius: var(--radius); }
.paket-kart--koyu .paket-kart-altbayi { border-color: var(--cizgi-koyu); }
.paket-kart-altbayi .paket-kart-simge { flex-basis: 52px; height: 52px; }
.paket-altbayi-bas { font-weight: 600; }
.paket-altbayi-tutar { font-size: 1.4rem; }
.paket-kart-dugme { margin-top: auto; justify-content: center; width: 100%; padding-block: 14px; font-size: 1.05rem; }
.paket-kart-not { text-align: center; }
.paket-detay { margin-top: 32px; }
.paket-detay > summary { cursor: pointer; text-align: center; font-weight: 600; color: var(--brand); padding: 10px; }
@media (max-width: 720px) {
  .paket-donem-not { position: static; }
  .paket-donem-sec { flex-wrap: wrap; }
  .paket-kart { padding: 20px; }
  .paket-kart-tutar { font-size: 2.1rem; }
}

/* ------------------------------------------------------------------
   KADEME SÜTUNLARI DİKEY OLARAK AYRIŞIYOR
   ------------------------------------------------------------------

   TEK RENK, KADEMELİ TON — VE SEBEBİ

   Paketler SIRALI bir ölçek: bronz < gümüş < altın < platin. Sıralı
   bir ölçeğin doğru gösterimi tek bir rengin açıktan koyuya giden
   tonlarıdır. Her sütuna ayrı bir renk verseydim (bronz kahve, altın
   sarı, platin gri) tablo dört ayrı KATEGORİ gibi okunurdu — oysa
   aralarındaki ilişki "daha fazlası", "başkası" değil.

   NİYE MAVİ AİLESİ, YEŞİL DEĞİL: yeşil bu sitede eylemin rengi
   (düğme) ve ÖNE ÇIKAN sütunun rengi. Sütun ayrımını da yeşille
   yapsaydım "öne çıkan" vurgusu kalabalığın içinde kaybolurdu. Mavi
   sitenin yapısal rengi; ayrım onun işi.

   TON KOYULAŞIYOR AMA YAZI SİYAH KALIYOR: en koyu adım da açık bir
   ton (L≈%90), yani metin karşıtlığı bozulmuyor. Daha koyuya gitmek
   son sütunda yazıyı okunmaz yapardı.

   RENK TEK İŞARET DEĞİL: sütunlar arasına ince bir dikey çizgi de
   kondu. Renk körü ziyaretçi ve gri basılan bir çıktıda ayrım
   çizgiden okunuyor.

   ALTI ADIM VAR AMA DÖRT PAKET: kullanıcı panelden beşinci ve altıncı
   kademeyi açabiliyor. Altıdan sonrası en koyu tonu paylaşıyor —
   tonu sonsuza kadar koyulaştırmak yazıyı okunmaz yapardı.
   ------------------------------------------------------------------ */
.paket-tablo th:not(:first-child),
.paket-tablo td:not(:first-child) { border-left: 1px solid var(--cizgi); }

.paket-tablo thead th:nth-child(2),
.paket-tablo tbody td:nth-child(2)  { background: #f6fafd; }
.paket-tablo thead th:nth-child(3),
.paket-tablo tbody td:nth-child(3)  { background: #ebf4fb; }
.paket-tablo thead th:nth-child(4),
.paket-tablo tbody td:nth-child(4)  { background: #e0edf8; }
.paket-tablo thead th:nth-child(5),
.paket-tablo tbody td:nth-child(5)  { background: #d5e6f5; }
.paket-tablo thead th:nth-child(6),
.paket-tablo tbody td:nth-child(6)  { background: #cbdff2; }
.paket-tablo thead th:nth-child(n+7),
.paket-tablo tbody td:nth-child(n+7) { background: #c2d9ef; }

/* Başlık satırı sütunun başlığı: aynı ton, bir adım koyu — sütun
   yukarıdan aşağıya tek parça okunsun. */
.paket-tablo thead th:not(:first-child) {
  border-bottom: 2px solid var(--mavi-100);
}
/* Paket adı mavi ailenin koyu tonunda: sütunun kimliği başlıkta. */
.paket-ad { color: var(--mavi-600); }

.sec-dark .paket-tablo thead th:nth-child(n+2),
.sec-dark .paket-tablo tbody td:nth-child(n+2),
.sec-brand .paket-tablo thead th:nth-child(n+2),
.sec-brand .paket-tablo tbody td:nth-child(n+2) { background: rgba(255,255,255,.03); }
.sec-dark .paket-tablo thead th:nth-child(3),
.sec-dark .paket-tablo tbody td:nth-child(3),
.sec-brand .paket-tablo thead th:nth-child(3),
.sec-brand .paket-tablo tbody td:nth-child(3) { background: rgba(255,255,255,.06); }
.sec-dark .paket-tablo thead th:nth-child(4),
.sec-dark .paket-tablo tbody td:nth-child(4),
.sec-brand .paket-tablo thead th:nth-child(4),
.sec-brand .paket-tablo tbody td:nth-child(4) { background: rgba(255,255,255,.09); }
.sec-dark .paket-tablo thead th:nth-child(n+5),
.sec-dark .paket-tablo tbody td:nth-child(n+5),
.sec-brand .paket-tablo thead th:nth-child(n+5),
.sec-brand .paket-tablo tbody td:nth-child(n+5) { background: rgba(255,255,255,.12); }
.sec-dark .paket-ad, .sec-brand .paket-ad { color: var(--mavi-300); }

/* ÖNE ÇIKAN SÜTUN. Yalnızca renkle değil, kenar çizgisiyle de
   işaretli: renk körü ziyaretçi de hangi sütunun vurgulandığını
   görüyor.

   TON DİZİSİNİN ÜSTÜNDE — VE SEÇİCİ BİLEREK BÖYLE YAZILDI

   İlk yazışımda seçici `.paket-tablo .paket-vurgu` idi ve "sonra
   geldiği için kazanır" diye düşünmüştüm. YANLIŞTI ve ekran
   görüntüsü yakaladı: öne çıkan sütun yeşil rozetini taşıyor ama
   zemini mavi kalıyordu.

   Sebep özgüllük: `.paket-tablo thead th:nth-child(4)` iki sınıf
   değerinde değil — bir sınıf + bir öğe + bir sınıf-benzeri sözde
   sınıf, yani (0,2,1). `.paket-tablo .paket-vurgu` ise (0,2,0).
   Kaynak sırası ancak özgüllük EŞİTSE konuşuyor; burada eşit değildi
   ve ton dizisi kazanıyordu.

   Şimdi seçici öğe + sınıf + sözde sınıf taşıyor: (0,2,2). Ton
   dizisini özgüllükle yeniyor, sıraya bağlı değil. Kullanıcı vurguyu
   hangi kademeye alırsa alsın yeşil orada. */
.paket-tablo th.paket-vurgu:nth-child(n),
.paket-tablo td.paket-vurgu:nth-child(n) {
  background: var(--brand-50);
  box-shadow: inset 1px 0 0 var(--brand-100), inset -1px 0 0 var(--brand-100);
}
.sec-dark .paket-tablo th.paket-vurgu:nth-child(n),
.sec-dark .paket-tablo td.paket-vurgu:nth-child(n),
.sec-brand .paket-tablo th.paket-vurgu:nth-child(n),
.sec-brand .paket-tablo td.paket-vurgu:nth-child(n) {
  background: rgba(52,211,153,.10);
  box-shadow: inset 1px 0 0 rgba(52,211,153,.35), inset -1px 0 0 rgba(52,211,153,.35);
}
/* Öne çıkan sütunda paket adı da yeşile geçiyor: rozet, zemin ve ad
   aynı şeyi söylüyor. */
.paket-tablo th.paket-vurgu .paket-ad { color: var(--brand-600); }
.sec-dark .paket-tablo th.paket-vurgu .paket-ad,
.sec-brand .paket-tablo th.paket-vurgu .paket-ad { color: var(--brand-300); }
.paket-dugme-satir td { padding-top: 18px; padding-bottom: 18px; }

.paket-not { margin: 14px 0 0; font-size: .88rem; color: var(--ink-500); }
.sec-dark .paket-not, .sec-brand .paket-not { color: rgba(255,255,255,.65); }

.paket-yok {
  margin: 0; padding: 18px 20px;
  border: 1px dashed var(--cizgi-koyu); border-radius: 10px;
  color: var(--ink-600); font-size: .95rem; background: var(--ink-50);
}
.sec-dark .paket-yok, .sec-brand .paket-yok {
  color: rgba(255,255,255,.78); background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.22);
}

@media (max-width: 640px) {
  .paket-tablo { font-size: .88rem; }
  .paket-tablo th, .paket-tablo td { padding: 10px 12px; }
  .paket-fiyat { font-size: 1.08rem; }
}

/* ══════════════════════════════════════════════════════════════════════
   KAPAK SLAYTI                                             (paket 427)
   ──────────────────────────────────────────────────────────────────────
   Slaytlar yatay bir kaydırma şeridi; hizalama scroll-snap ile. Bu
   seçim JavaScript'i zorunlu olmaktan çıkarıyor: betik hiç çalışmasa
   bile şerit parmakla kaydırılıyor ve noktalar birer çapa bağlantısı
   olarak çalışıyor.
   ══════════════════════════════════════════════════════════════════════ */
.slider { padding: 0; position: relative; }

.slider-serit {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* Kaydırma çubuğu gizli: şeridin altında duran noktalar zaten nerede
     olduğunu söylüyor ve iki gösterge birbiriyle yarışıyordu. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.slider-serit::-webkit-scrollbar { display: none; }

.slider-slayt {
  flex: 0 0 100%;
  min-width: 100%;
  scroll-snap-align: start;
  padding: 76px 0 84px;
}
.slider-ic {
  display: grid; grid-template-columns: 1.12fr 1fr; gap: 52px; align-items: center;
}
/* GÖRSELSİZ SLAYT: WRAP DARALTILMIYOR, METİN SÜTUNU DARALTILIYOR.
   Wrap'ı daraltmak onu ortalıyordu (margin: 0 auto) ve görselsiz slaytın
   metni, görselli slayttan 160 piksel içeride başlıyordu. Slayt
   değiştikçe başlığın sola-sağa zıplaması, sayfanın en üstünde ilk
   görülen şeydi — ölçüldü (ekran görüntüsü). Bu dosyanın kuralı zaten
   yazılı: dar metin sütunu sayfanın SOL EKSENİNDE durur. */
.slider-slayt--tek .slider-ic { grid-template-columns: 1fr; }
.slider-slayt--tek .slider-yazi { max-width: 52rem; }
.slider-yazi { min-width: 0; }

/* Noktalar şeridin İÇİNDE değil altında: üstüne binen bir gösterge,
   dokunmatik ekranda slaydın kendisini tıklamayı zorlaştırıyor. */
.slider-nokta {
  display: flex; justify-content: center; gap: 8px;
  padding: 0 0 26px; margin: -14px 0 0;
}
.slider-nok {
  display: block; padding: 6px; line-height: 0; border-radius: 999px;
  text-decoration: none;
}
.slider-nok span {
  display: block; width: 9px; height: 9px; border-radius: 999px;
  background: currentColor; opacity: .28; transition: opacity .15s, transform .15s;
}
.slider-nok.is-on span { opacity: 1; transform: scale(1.25); }
.slider-nok:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

@media (max-width: 900px) {
  .slider-slayt { padding: 54px 0 58px; }
  .slider-ic { grid-template-columns: 1fr; gap: 28px; }
  /* Görsel metnin ALTINDA: dar ekranda önce ne dediğimiz okunsun. */
  .slider-gorsel { order: 2; }
}

/* Kendiliğinden geçiş, hareketi azaltma tercihi olan kullanıcıda
   betik tarafından hiç başlatılmıyor; burada yumuşak kaydırmayı da
   kapatıyoruz ki elle geçiş ani olsun. */
@media (prefers-reduced-motion: reduce) {
  .slider-serit { scroll-behavior: auto; }
  .slider-nok span { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   PAKET 748 — GÖRÜNÜM YENİLEMESİ (kullanıcının referansı · 11.10)
   İçerik aynı; değişen yalnızca görünüm: eylem rengi turuncu, zemin
   açık, başlıklar kalın ve sıkı, özellikler yuvarlak köşeli kartlarda,
   kapanış çağrısı lacivert bir bant. Bu blok dosyanın SONUNDA durur ve
   yukarıdaki kuralları ezer; geri almak bu bloğu silmektir.
   Turuncu #cf4208 üstünde beyaz yazı 4.7:1 (ölçüldü).
   ══════════════════════════════════════════════════════════════════════ */
:root {
  --brand:     #cf4208;
  --brand-600: #ad3505;
  --brand-300: #ff9a6b;
  --brand-50:  #fff3ec;
  --brand-100: #ffdfcf;
  --mavi-950:  #0f2140;
  --mavi-800:  #17305c;
  --font-baslik: var(--font-metin);
  --radius-sm: 10px;
  --radius:    14px;
  --radius-lg: 20px;
}
body { background: #fff; }

/* Başlıklar: kalın, sıkı aralıklı */
.sec-title, .hero-title { font-weight: 800; letter-spacing: -.035em; }
.sec-title { font-size: clamp(1.8rem, 3.2vw, 2.45rem); line-height: 1.12; }
.hero-title { font-size: clamp(2.2rem, 4.4vw, 3.3rem); line-height: 1.05; }
.stat-value, .step-num { font-weight: 800; letter-spacing: -.035em; }

/* Bölüm başlığı ortada */
.sec-head { max-width: 760px; margin-inline: auto; text-align: center; }
.sec-head .sec-text { margin-inline: auto; }
.sec-head .overline { justify-content: center; }

/* Üst etiket: çerçeveli küçük hap */
.overline {
  display: inline-flex; padding: 6px 14px; border-radius: 999px;
  border: 1px solid var(--brand-100); background: var(--brand-50);
  color: var(--brand-600); letter-spacing: .08em; font-weight: 700;
}
.sec-head .overline { display: flex; width: fit-content; margin-inline: auto; }
.overline::before { content: none; }
.sec-soft .overline { color: var(--brand-600); background: #fff; }
.sec-dark .overline, .sec-brand .overline, .hero.sec-dark .overline {
  color: #fff; background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.22);
}

/* Düğmeler */
.btn { padding: 14px 26px; font-weight: 700; }
.btn-sm { padding: 10px 18px; }
.btn-primary { box-shadow: 0 6px 16px rgba(207,66,8,.22); }
.btn-primary:hover { box-shadow: 0 8px 20px rgba(207,66,8,.3); }
.btn-ghost { border-color: var(--mavi-950); color: var(--mavi-950); }
.btn-ghost:hover { border-color: var(--brand); color: var(--brand-600); }

/* Üst menü */
.site-header { background: rgba(255,255,255,.96); border-bottom-color: transparent; box-shadow: 0 1px 0 rgba(15,33,64,.06); }
.nav > a, .nav-grup > summary { font-weight: 600; color: var(--mavi-950); }
.nav > a:hover, .nav-grup > summary:hover, .nav-grup[open] > summary, .nav-alt > a:hover { color: var(--brand-600); }

/* Bölüm zeminleri */
.sec-soft { background: #f5f8fd; border-block: 0; }

/* Açılış: açık zemin, koyu yazı */
.slider.sec-dark, .hero.sec-dark {
  background:
    radial-gradient(900px 480px at 88% 10%, #fff0e6 0, rgba(255,240,230,0) 62%),
    linear-gradient(180deg, #f3f7fd 0, #fff 100%);
  color: var(--mavi-950);
}
.slider.sec-dark .hero-text, .hero.sec-dark .hero-text { color: var(--ink-700); opacity: 1; }
.slider.sec-dark .overline, .hero.sec-dark .overline {
  color: var(--brand-600); background: #fff; border-color: var(--brand-100);
}
.slider.sec-dark .btn-ghost, .hero.sec-dark .btn-ghost {
  background: #fff; color: var(--mavi-950); border-color: var(--mavi-950);
}
.slider.sec-dark .btn-ghost:hover, .hero.sec-dark .btn-ghost:hover { border-color: var(--brand); color: var(--brand-600); }
.slider .hero-title::after, .hero .hero-title::after {
  content: ''; display: block; width: 76px; height: 5px; border-radius: 3px;
  background: var(--brand); margin-top: 22px;
}
.slider-slayt { padding: 64px 0 76px; }
.slider-ic { grid-template-columns: .92fr 1.2fr; gap: 40px; }
.slider-gorsel img { filter: none; }
.slider-nok { color: var(--mavi-950); }
.slider-nok.is-on { color: var(--brand); }

/* Kartlar: yumuşak zeminli, yuvarlak köşeli kutu */
.card, .card--link {
  padding: 26px 26px 24px; border: 1px solid #e6ecf5; border-radius: var(--radius-lg);
  background: #f5f8fd;
}
.sec-soft .card, .sec-soft .card--link { background: #fff; }
.grid > .card:nth-child(3n+2) { background: #fff6f0; border-color: #ffe6d8; }
.sec-soft .grid > .card:nth-child(3n+2) { background: #fff; border-color: #e6ecf5; }
.sec-dark .card, .sec-brand .card, .sec-dark .card--link, .sec-brand .card--link {
  background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14);
}
.card--link { transition: border-color .18s, box-shadow .18s, background-color .18s; }
.card--link:hover { border-color: var(--brand); background: #fff; box-shadow: 0 14px 34px rgba(15,33,64,.1); }
.card--link .card-title::after { color: var(--brand); }
.card-icon, .card--link .card-icon {
  width: 46px; height: 46px; border-radius: 13px; margin-bottom: 18px;
  justify-content: center; background: var(--brand); border: 0; color: #fff;
}
.card-icon:has(svg) { color: #fff; }
.grid > .card:nth-child(3n+1) .card-icon { background: #1f6fe0; }
.grid > .card:nth-child(3n) .card-icon { background: #12a150; }
.sec-dark .card-icon, .sec-brand .card-icon,
.sec-dark .card-icon:has(svg), .sec-brand .card-icon:has(svg) { color: #fff; }
.card-icon svg { width: 22px; height: 22px; }
.card-title { font-size: 1.08rem; font-weight: 700; letter-spacing: -.015em; color: var(--mavi-950); }
.sec-dark .card-title, .sec-brand .card-title { color: #fff; }
.card-img { border-radius: var(--radius); }

/* Sayılar: kart içinde */
.stats-grid { gap: 20px; }
.stat {
  padding: 24px 24px 20px; border: 1px solid #e6ecf5; border-top: 1px solid #e6ecf5;
  border-radius: var(--radius-lg); background: #fff;
}
.sec-light .stat { background: #f5f8fd; }
.sec-dark .stat, .sec-brand .stat { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); }
.stat-value { color: var(--mavi-950); }
.stat:nth-child(even) .stat-value { color: var(--brand); }

/* Adımlar */
.step-num { color: var(--brand); }

/* Karşılaştırma ve SSS */
.compare-box { border-radius: var(--radius-lg); }
.faq { border-top: 0; display: grid; gap: 12px; }
.faq-item, .faq-item + .faq-item {
  border: 1px solid #e6ecf5; border-radius: var(--radius); background: #fff; padding: 0 22px;
}
.sec-dark .faq-item, .sec-brand .faq-item { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); }
.faq-item[open] { border-color: var(--brand-100); }
.faq-plus { color: var(--brand); }

/* Kapanış çağrısı: sayfanın içinde duran lacivert bant */
section.sec-dark:has(> .cta) { background: transparent; padding: 28px 20px 72px; }
.sec-dark > .cta {
  max-width: calc(var(--wrap) - 40px); padding: 46px 52px; border-radius: 24px;
  background:
    radial-gradient(520px 260px at 100% 0, rgba(255,122,69,.28) 0, rgba(255,122,69,0) 70%),
    var(--mavi-950);
}
.sec-dark > .cta .sec-title::after {
  content: ''; display: block; width: 64px; height: 4px; border-radius: 2px;
  background: var(--brand-300); margin-top: 16px;
}
.sec-dark > .cta .btn-primary { background: #e8521d; }

/* Alt bilgi */
.site-footer { background: var(--mavi-950); }

@media (max-width: 900px) {
  .slider-slayt { padding: 44px 0 56px; }
  .slider-ic { grid-template-columns: 1fr; gap: 26px; }
  .sec-dark > .cta { padding: 34px 24px; border-radius: 20px; }
  section.sec-dark:has(> .cta) { padding: 16px 16px 48px; }
}
@media (max-width: 860px) { .stats-grid.cols-4 .stat-value { min-height: 0; display: block; } }

/* 748 · görselli düzen (kit görselleri beyaz zeminli: açık zeminde
   çarpma karışımıyla zemine oturur) */
.hero { padding: 56px 0 64px; }
.hero-media img, .split-img { filter: none; border: 0; box-shadow: none; border-radius: var(--radius-lg); mix-blend-mode: multiply; }
.sec-light .split-img { mix-blend-mode: normal; }
.split { gap: 56px; }
.split .prose ul { padding: 0; margin: 18px 0 0; list-style: none; display: grid; gap: 10px; }
.split .prose li { position: relative; padding-left: 30px; color: var(--ink-800); }
.split .prose li::before {
  content: '✓'; position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--brand); color: #fff; font-size: .72rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.card-img { height: auto; aspect-ratio: 3 / 2; object-fit: cover; margin: -10px -10px 18px; width: calc(100% + 20px); max-width: none; background: #fff; }
.card:has(> .card-img), .grid > .card:has(> .card-img):nth-child(n) { background: #fff; border-color: #e6ecf5; }
/* başlıksız bölüm (kitle şeridi): boş baş boşluk bırakmasın */
.sec-head:not(:has(*)) { display: none; }
.sec:has(.sec-head:not(:has(*))) { padding: 28px 0 40px; }
@media (min-width: 901px) { .hero-grid { grid-template-columns: 1fr 1.05fr; gap: 36px; } }
.hero .hero-title { font-size: clamp(2.1rem, 3.9vw, 2.9rem); text-wrap: pretty; white-space: pre-line; }

/* ══════════════════════════════════════════════════════════════════════
   PAKET 749 — iletişim sayfası · video talebi bölümü · boş kutu kapısı
   ══════════════════════════════════════════════════════════════════════ */
/* İçeriği boş bırakılmış kutu/soru çizilmez */
.compare-box:not(:has(.compare-text:not(:empty))) { display: none; }
.faq-item:has(> .faq-a:empty) { display: none; }

/* İletişim bloğu */
.contact-list { margin-top: 28px; gap: 12px; }
.contact-list > div {
  display: block; padding: 16px 20px; border: 1px solid #e6ecf5; border-radius: var(--radius);
  background: #f5f8fd;
}
.sec-soft .contact-list > div { background: #fff; }
.contact-list dt { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: var(--brand-600); }
.contact-list dd { margin-top: 4px; font-size: 1.12rem; font-weight: 700; color: var(--mavi-950); }
.contact-list a:hover { color: var(--brand-600); }
.form-card { border-radius: var(--radius-lg); padding: 32px; border-color: #e6ecf5; box-shadow: 0 18px 44px rgba(15,33,64,.08); }
.input { border-radius: 12px; padding: 14px 16px; border-color: #d5deea; }
.input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-50); }
.form-error { border-radius: 12px; }

/* Kişiye özel video talebi */
.vt { padding: 36px 20px; }
.vt-kutu {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center;
  max-width: calc(var(--wrap) - 40px); padding: 48px 52px; border-radius: 24px; color: #fff;
  background:
    radial-gradient(560px 280px at 0 100%, rgba(255,122,69,.3) 0, rgba(255,122,69,0) 70%),
    var(--mavi-950);
}
.vt .overline { color: #fff; background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.22); }
.vt .sec-title { color: #fff; }
.vt .sec-text { color: rgba(255,255,255,.78); }
.vt-liste { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 10px; font-size: .95rem; color: rgba(255,255,255,.9); }
.vt-liste li { position: relative; padding-left: 30px; }
.vt-liste li::before {
  content: '✓'; position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--brand-300); color: var(--mavi-950); font-size: .72rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.vt-form { background: #fff; color: var(--ink-900); border-radius: 20px; padding: 28px; box-shadow: 0 24px 60px rgba(0,0,0,.25); }
.vt-riza { display: flex; gap: 10px; align-items: flex-start; font-size: .8rem; line-height: 1.5; color: var(--ink-600); cursor: pointer; }
.vt-riza input { margin-top: 3px; width: 16px; height: 16px; flex: none; accent-color: var(--brand); }
.vt-form .btn-primary { background: #e8521d; }
@media (max-width: 900px) {
  .vt { padding: 20px 16px; }
  .vt-kutu { grid-template-columns: 1fr; gap: 28px; padding: 32px 22px; border-radius: 20px; }
  .vt-form { padding: 22px; }
}

/* PAKET 827 — site ekleri: çerez bandı · telefonda sabit düğme · form hatası */
.se-cerez { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 120; max-width: 720px; margin: 0 auto;
  display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap;
  background: #fff; color: #1b2233; border: 1px solid rgba(15,23,42,.12); border-radius: 14px;
  padding: 14px 16px; box-shadow: 0 12px 40px rgba(15,23,42,.18); font-size: 14px; }
.se-cerez[hidden] { display: none; }
.se-cerez p { margin: 0; flex: 1 1 260px; }
.se-cerez a { text-decoration: underline; }
.se-cerez-dg { display: flex; gap: 8px; }
.se-cta { display: none; }
.se-hata { margin: 4px 0 0; font-size: 13px; color: #b42318; }
.input.se-hatali { border-color: #b42318; }
.form-success { scroll-margin-top: 110px; }
.se-alan { min-width: 0; }
.se-alan > .input { width: 100%; }
@media (max-width: 700px) {
  .se-cta { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: #fff;
    border-top: 1px solid rgba(15,23,42,.1); box-shadow: 0 -6px 20px rgba(15,23,42,.08); }
  body:has(.se-cta) { padding-bottom: 72px; }
  body:has(.se-cta) .wa-fab { bottom: 84px; }
  body.se-cerez-acik .se-cta { display: none; }
  body.se-cerez-acik .wa-fab { bottom: 150px; }
}

/* PAKET 830 — canlı destek balonu (sağ alt · WhatsApp düğmesinin üstünde) */
.dsk-balon { position: fixed; right: 20px; bottom: 92px; width: 56px; height: 56px; border-radius: 50%; border: 0; cursor: pointer; z-index: 60;
  background: var(--brand, #cf4208); color: #fff; display: grid; place-items: center; box-shadow: 0 10px 28px rgba(0,0,0,.22); transition: transform .15s; }
.dsk-balon:hover { transform: scale(1.06); }
.dsk-balon svg { pointer-events: none; }
.dsk-rozet { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: #1a1a1a; color: #fff; font: 700 12px/20px Inter, system-ui, sans-serif; }
.dsk-tuzak { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.dsk-kutu { position: fixed; right: 20px; bottom: 160px; width: 360px; max-width: calc(100vw - 32px); max-height: min(70vh, 560px); z-index: 61;
  display: flex; flex-direction: column; background: #fff; color: #111; border-radius: 16px; box-shadow: 0 18px 50px rgba(0,0,0,.28); overflow: hidden; font-size: 15px; }
.dsk-bas { display: flex; align-items: center; gap: 10px; padding: 14px 16px; background: #141414; color: #fff; }
.dsk-bas > div { flex: 1; display: grid; }
.dsk-bas small { opacity: .75; font-size: 12px; }
.dsk-kapat { border: 0; background: transparent; color: #fff; font-size: 24px; line-height: 1; cursor: pointer; padding: 0 4px; }
.dsk-giris { display: grid; gap: 10px; padding: 16px; }
.dsk-giris input { padding: 10px 12px; border: 1px solid #d8dde6; border-radius: 10px; font: inherit; }
.dsk-akis { flex: 1; overflow: auto; padding: 14px; display: flex; flex-direction: column; gap: 8px; background: #f5f7fb; min-height: 200px; }
.dsk-m { max-width: 82%; display: grid; gap: 2px; }
.dsk-m-in { align-self: flex-end; text-align: right; }
.dsk-m-out { align-self: flex-start; }
.dsk-m-sys { align-self: center; max-width: 94%; text-align: center; }
.dsk-m-govde { padding: 8px 12px; border-radius: 12px; background: #fff; border: 1px solid #e3e7ee; word-break: break-word; text-align: left; white-space: pre-wrap; }
.dsk-m-in .dsk-m-govde { background: #DCF7E3; border-color: transparent; }
.dsk-m-sys .dsk-m-govde { background: transparent; border-style: dashed; font-size: 13px; color: #5b6472; }
.dsk-m small { color: #8a94a3; font-size: 11px; }
.dsk-yaz { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid #e3e7ee; align-items: flex-end; flex-wrap: wrap; }
.dsk-yaz textarea { flex: 1; resize: none; padding: 10px 12px; border: 1px solid #d8dde6; border-radius: 10px; font: inherit; min-height: 42px; max-height: 120px; }
.dsk-yaz .btn { padding: 10px 14px; }
.dsk-hata { color: #b3261e; font-size: 13px; margin: 0; flex-basis: 100%; }
body:has(.se-cta) .dsk-balon { bottom: 160px; }
body:has(.se-cta) .dsk-kutu { bottom: 228px; }
@media (max-width: 600px) {
  .dsk-kutu { right: 8px; left: 8px; width: auto; bottom: 8px; max-height: 85vh; }
  body.dsk-acik .dsk-balon, body.dsk-acik .wa-fab, body.dsk-acik .se-cta { display: none; }
}

/* PAKET 832 — canlı destek balonu düzeltmeleri: `hidden` ızgara/esnek kurala yeniliyordu
   (kutu kapanmıyor · kayıt formu akışla birlikte kalıyordu); telefon düğmesi masaüstünde de
   `:has(.se-cta)` ile yukarı itiliyordu (WhatsApp düğmesiyle arada boşluk). */
.dsk-kutu [hidden], .dsk-kutu[hidden], .dsk-rozet[hidden] { display: none !important; }
body:has(.se-cta) .dsk-balon { bottom: 92px; }
body:has(.se-cta) .dsk-kutu { bottom: 160px; }
@media (max-width: 700px) {
  body:has(.se-cta) .dsk-balon { bottom: 160px; }
  body:has(.se-cta) .dsk-kutu { bottom: 8px; }
}
/* ═══ PAKET 943 — fiyatlar KDV hariç: tutarın yanında "+ KDV" ═══ */
.paket-kdv { font-size: .95rem; font-weight: 600; color: var(--ink-600); white-space: nowrap; }
.paket-kart--koyu .paket-kdv { color: var(--ink-200); }