/* ==================================================================
   SADE — üst menü, mobil çekmece, alt bilgi ve ana sayfa
   Amaç: müşteri ürünü üç tıkta bulsun. Süs yok, hareketli şerit yok,
   gölge yok. Tüm renkler system.css tokenlarından gelir; koyu mod
   koyu.css'in token geçersiz kılmalarıyla kendiliğinden çalışır.
   Sınıf öneki sd- : eski bileşen kurallarıyla çakışmaz.
   ================================================================== */

/* ==================================================================
   RENK SKALASI — arduvaz (slate) nötrleri
   Eski nötrler soğuk ve sertti (--ink:#050810, --line:#e6e9f0).
   Arduvaz rampası daha yumuşak bir kontrast veriyor ve ince
   çizgilerin "saç teli" gibi durmasını sağlıyor.

   Yalnızca MEVCUT token adları yeniden tanımlanıyor; koyu.css
   :root[data-tema="koyu"] ile (daha yüksek özgüllük) yazdığı için
   koyu mod bundan etkilenmez.

   --primary ve --accent'e DOKUNULMUYOR: ikisi de panelden geliyor
   (Tema Ayarları → t37 / t4) ve temaheader.php satır içi stille
   basıyor. Vurgu rengi gerektiğinde var(--accent) kullanılır.
   ================================================================== */
:root{
  --ink:#121b28;          /* başlıklar */
  --ink-2:#1e293b;        /* gövde metni */
  --ink-3:#334155;
  --muted:#64748b;        /* ikincil metin */
  --muted-2:#94a3b8;      /* üçüncül / ikon */
  --line:#e2e8f0;         /* standart çizgi */
  --line-soft:#f1f5f9;    /* saç teli ayraç */
  --line-strong:#cbd5e1;  /* girdi kenarlığı */
  --bg-soft:#f8fafc;      /* bölüm zemini */

  /* arduvaz tonlu gölgeler — siyah gölge kirli gri yapıyordu */
  --shadow-xs:0 1px 2px #64748b14;
  --shadow-sm:0 1px 3px #64748b1f, 0 1px 2px #64748b14;
  --shadow-md:0 8px 18px -6px #64748b29, 0 3px 8px -3px #64748b1f;
  --shadow-lg:0 14px 28px -8px #64748b2e, 0 6px 14px -6px #64748b24;
  --shadow-xl:0 24px 48px -14px #64748b38, 0 10px 24px -10px #64748b29;

  /* kart yarıçapı */
  --kart-radius:14px;
}

/* ---------- ortak ---------- */
.sd-container{width:100%;max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
.sd-bolum{padding:56px 0}
.sd-bolum + .sd-bolum{padding-top:0}
.sd-bas{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:24px}
.sd-bas h2{margin:0;font-size:26px;font-weight:650;letter-spacing:-.025em;line-height:1.15;color:var(--ink)}
.sd-bas p{margin:6px 0 0;font-size:15px;color:var(--muted);line-height:1.5}
/* üst etiket: başlığın üstünde küçük, renkli, aralıklı */
.sd-kicker{
  display:block;margin-bottom:7px;
  font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--primary-text,var(--primary))
}
.sd-bas-link{display:inline-flex;align-items:center;gap:6px;font-size:14.5px;font-weight:600;color:var(--primary-text,var(--primary));text-decoration:none;white-space:nowrap}
.sd-bas-link:hover{color:var(--primary-text,var(--primary-hover))}
.sd-bas-link svg{width:16px;height:16px}

.sd-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 20px;
  font-size:15px;font-weight:600;font-family:inherit;letter-spacing:-.01em;line-height:1;
  border-radius:var(--radius-sm);border:1px solid transparent;cursor:pointer;text-decoration:none;
  transition:background .18s,border-color .18s,color .18s}
.sd-btn svg{width:16px;height:16px;flex-shrink:0}
.sd-btn-ana{background:var(--primary);color:var(--primary-ink);border-color:var(--primary)}
.sd-btn-ana:hover{background:var(--primary-hover);border-color:var(--primary-hover);color:var(--primary-ink)}
.sd-btn-cizgi{background:var(--surface);color:var(--ink);border-color:var(--line-strong)}
.sd-btn-cizgi:hover{border-color:var(--ink);color:var(--ink)}
/* ==================================================================
   ÜST MENÜ — İKİ KATLI
   1. kat: koyu bilgi şeridi (telefon, e-posta, hesap)
   2. kat: logo · menü · arama/sepet/tema · telefon bloğu · CTA
   Açılır menü TAM SAYFA GENİŞLİĞİNDE; tetikleyiciye değil header'a
   göre konumlanır, bu yüzden .sd-header position:relative ve
   .nav-dropdown position:static.
   ================================================================== */
.sd-header{position:relative;z-index:50;background:var(--surface)}
.sd-header.scrolled .sd-ana-bar{box-shadow:0 1px 0 var(--line), 0 6px 18px -12px #64748b4d}

/* ---------- 1. kat: bilgi şeridi ---------- */
.sd-ust-serit{background:var(--forest);color:#fff}
.sd-ust-ic{display:flex;align-items:center;gap:20px;height:38px;font-size:12.5px}
.sd-ust-ic a{
  display:inline-flex;align-items:center;gap:6px;
  color:#ffffffbf;text-decoration:none;white-space:nowrap;transition:color .15s
}
.sd-ust-ic a:hover{color:#fff}
.sd-ust-ic svg{width:13px;height:13px;flex-shrink:0}
.sd-ust-sag{margin-left:auto;display:flex;align-items:center;gap:18px}
.sd-ust-slogan{display:none;align-items:center;gap:7px;color:#fff;font-weight:600}
.sd-ust-slogan svg{width:13px;height:13px;flex-shrink:0;opacity:.85}

/* ---------- 2. kat: ana bar ---------- */
.sd-ana-bar{border-bottom:1px solid var(--line);background:var(--surface)}
.sd-nav{display:flex;align-items:center;gap:26px;height:74px}
.sd-logo{display:flex;align-items:center;flex-shrink:0;text-decoration:none}
.sd-logo img{height:38px;width:auto;max-width:170px;object-fit:contain;display:block}

/* Menü sağa yaslı: logo solda yalnız, bağlantılar ve işlemler sağda kümeli. */
.sd-linkler{display:flex;align-items:stretch;gap:20px;height:74px;margin-left:auto}
.sd-header .sd-link{
  display:inline-flex;align-items:center;gap:6px;height:74px;padding:0;
  font-size:14.5px;font-weight:600;letter-spacing:-.01em;color:var(--ink-2);
  text-decoration:none;background:none;border:0;border-bottom:2px solid transparent;
  font-family:inherit;cursor:pointer;white-space:nowrap;transition:color .16s,border-color .16s
}
.sd-header .sd-link svg{width:14px;height:14px;color:var(--muted-2);transition:transform .2s,color .16s}
.sd-header .sd-link:hover,.sd-header .sd-link.is-active{color:var(--primary-text,var(--accent))}
.sd-header .sd-link:hover svg{color:var(--accent-text,var(--accent))}
.sd-header .sd-link[aria-expanded="true"]{color:var(--primary-text,var(--accent));border-bottom-color:var(--accent)}
.sd-header .sd-link[aria-expanded="true"] svg{color:var(--accent-text,var(--accent));transform:rotate(180deg)}

/* ---------- sağ blok ---------- */
.sd-eylem{display:flex;align-items:center;gap:8px;margin-left:6px}
.sd-ikon{
  position:relative;width:38px;height:38px;border-radius:9px;display:grid;place-items:center;
  color:var(--ink-2);background:transparent;border:0;cursor:pointer;text-decoration:none;
  font-family:inherit;transition:background .18s,color .18s
}
.sd-ikon svg{width:18px;height:18px}
.sd-ikon:hover{background:var(--bg-soft);color:var(--ink)}
.sd-rozet{
  position:absolute;top:3px;right:2px;min-width:17px;height:17px;padding:0 4px;border-radius:99px;
  background:var(--accent);color:var(--accent-ink,#fff);font-size:10.5px;font-weight:700;line-height:17px;text-align:center
}
.sd-ikon.tema-dugme .ay{display:none}
:root[data-tema="koyu"] .sd-ikon.tema-dugme .gunes{display:none}
:root[data-tema="koyu"] .sd-ikon.tema-dugme .ay{display:block}

/* telefon bloğu */
.sd-tel{
  display:flex;align-items:center;gap:9px;padding:0 14px 0 6px;margin-left:4px;
  border-right:1px solid var(--line);text-decoration:none
}
.sd-tel i{
  flex:0 0 auto;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:var(--accent-soft);color:var(--accent)
}
.sd-tel i svg{width:15px;height:15px}
.sd-tel b{display:block;font-size:13.5px;font-weight:700;letter-spacing:-.01em;color:var(--ink);white-space:nowrap}
.sd-tel small{display:block;font-size:11.5px;color:var(--muted);white-space:nowrap}
.sd-tel:hover b{color:var(--accent-text,var(--accent))}

/* vurgu düğmesi (amber/turuncu — panelden --accent) */
.sd-btn-vurgu{background:var(--accent);border-color:var(--accent);color:var(--accent-ink,#fff)}
.sd-btn-vurgu:hover{background:var(--accent-2);border-color:var(--accent-2);color:var(--accent-ink,#fff)}
.sd-cta{
  padding:0 20px;height:42px;border-radius:99px;font-size:14px;font-weight:700;
  white-space:nowrap;box-shadow:0 6px 16px -8px color-mix(in srgb, var(--accent) 70%, transparent)
}

/* ---------- TAM GENİŞLİK MEGA PANEL ---------- */
.sd-header .nav-dropdown{position:static;display:flex;align-items:stretch}
.sd-header .nav-dropdown-panel{
  position:absolute;left:0;right:0;top:100%;
  background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  box-shadow:0 18px 34px -18px #64748b52;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .2s ease,transform .2s ease,visibility 0s linear .2s;z-index:45
}
.sd-header .nav-dropdown-panel.is-open{opacity:1;visibility:visible;transform:none;transition-delay:0s}

.sd-mega-izgara{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) 280px;gap:28px;
  padding-top:26px;padding-bottom:28px
}
.sd-mega-dar{grid-template-columns:repeat(2,minmax(0,1fr)) 280px}
.sd-mega-sutun{min-width:0}
.sd-mega-sutun h4{
  margin:0 0 10px;padding-bottom:9px;border-bottom:1px solid var(--line-soft);
  font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted-2)
}

.sd-mega-oge{
  --oge-renk:var(--primary);--oge-yumusak:var(--primary-soft);
  display:flex;align-items:flex-start;gap:11px;padding:8px 9px;
  border-radius:10px;text-decoration:none;color:var(--ink);transition:background .15s
}
.sd-mega-oge:hover{background:var(--bg-soft)}
.sd-mega-ikon{
  flex:0 0 auto;width:33px;height:33px;border-radius:9px;display:grid;place-items:center;
  background:var(--oge-yumusak);color:var(--oge-renk)
}
.sd-mega-ikon svg{width:16px;height:16px}
.sd-mega-metin{min-width:0}
.sd-mega-metin b{
  display:flex;align-items:center;gap:7px;
  font-size:13.8px;font-weight:650;letter-spacing:-.015em;line-height:1.3;color:var(--ink)
}
.sd-mega-metin b em{
  font-style:normal;flex:0 0 auto;padding:1px 6px;border-radius:99px;
  background:var(--accent-soft);color:var(--primary-text,var(--accent));
  font-size:9.5px;font-weight:700;letter-spacing:.02em;text-transform:uppercase
}
.sd-mega-metin small{
  display:block;margin-top:2px;font-size:12.2px;line-height:1.45;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
.sd-mega-oge:hover .sd-mega-metin b{color:var(--oge-renk)}

/* mega sağ sütunu: teklif paneli */
.sd-mega-yan{
  display:flex;flex-direction:column;align-items:flex-start;
  padding:18px;border-radius:var(--kart-radius);background:var(--bg-soft);border:1px solid var(--line-soft)
}
.sd-mega-yan-etiket{
  display:inline-flex;align-items:center;gap:6px;margin-bottom:10px;
  font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--primary-text,var(--accent))
}
.sd-mega-yan-etiket svg{width:14px;height:14px}
.sd-mega-yan h4{margin:0 0 7px;font-size:15px;font-weight:650;letter-spacing:-.02em;line-height:1.32;color:var(--ink)}
.sd-mega-yan p{margin:0 0 15px;font-size:12.8px;line-height:1.55;color:var(--muted)}
.sd-mega-yan .sd-btn{width:100%;padding:10px 16px;font-size:13.5px;border-radius:var(--radius-sm)}
.sd-mega-yan-alt{
  display:inline-flex;align-items:center;gap:7px;margin-top:11px;
  font-size:12.8px;font-weight:600;color:var(--ink-2);text-decoration:none
}
.sd-mega-yan-alt svg{width:14px;height:14px;color:var(--muted-2)}
.sd-mega-yan-alt:hover{color:var(--accent-text,var(--accent))}

/* ---------- mobil 2. sıra: arama şeridi ----------
   Mağazada arama birincil giriş noktası; mobilde ikona tıklatmak
   yerine kutu hep açık duruyor. Masaüstünde gizli. */
.sd-mobil-ara{display:none;padding:0 0 11px;background:var(--surface)}
.sd-mobil-ara form{position:relative;display:flex;align-items:center}
.sd-mobil-ara svg{position:absolute;left:14px;width:16px;height:16px;color:var(--muted-2);pointer-events:none}
.sd-mobil-ara input{
  width:100%;height:42px;padding:0 14px 0 39px;font-size:14px;font-family:inherit;color:var(--ink);
  background:var(--bg-soft);border:1px solid var(--line);border-radius:99px;outline:none;
  transition:border-color .16s,background .16s
}
.sd-mobil-ara input::placeholder{color:var(--muted-2)}
.sd-mobil-ara input:focus{background:var(--surface);border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}

/* ==================================================================
   MOBİL ALT GEZİNME ÇUBUĞU
   Ekranın dibinde sabit; başparmakla erişilen asıl gezinme.
   Yalnızca mobilde görünür.
   ================================================================== */
.sd-altbar{display:none}

@media (max-width:1000px){
  .sd-altbar{
    position:fixed;left:0;right:0;bottom:0;z-index:65;
    display:grid;grid-template-columns:repeat(5,1fr);
    background:var(--surface);border-top:1px solid var(--line);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom));
    box-shadow:0 -8px 22px -16px #64748b8c
  }
  .sd-altbar-oge{
    position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;
    padding:6px 2px;border:0;background:none;font-family:inherit;cursor:pointer;
    font-size:10px;font-weight:600;letter-spacing:-.005em;color:var(--muted-2);
    text-decoration:none;transition:color .16s
  }
  .sd-altbar-oge svg{width:20px;height:20px}
  .sd-altbar-oge.is-active{color:var(--primary-text,var(--primary))}
  .sd-altbar-oge:active{color:var(--ink)}
  .sd-altbar-ik{position:relative;display:block}
  .sd-altbar-ik em{
    position:absolute;top:-5px;right:-9px;min-width:16px;height:16px;padding:0 4px;
    border-radius:99px;background:var(--accent);color:var(--accent-ink,#fff);
    font-size:9.5px;font-weight:700;font-style:normal;line-height:16px;text-align:center
  }

  /* Sabit çubuk içeriğin üstüne binmesin + altta duran diğer
     yüzen öğeler onun üstüne çıksın. */
  body{padding-bottom:64px}
  .floating-wa{bottom:calc(76px + env(safe-area-inset-bottom))}
  .cookiebar{bottom:calc(76px + env(safe-area-inset-bottom))}
  .pz-toast-wrap{bottom:calc(80px + env(safe-area-inset-bottom))}
}

/* mobil menü düğmesi */
.sd-menu-ac{display:none}

@media (max-width:1280px){
  .sd-linkler{gap:15px}
  .sd-header .sd-link{font-size:14px}
  .sd-mega-izgara{grid-template-columns:repeat(3,minmax(0,1fr)) 240px;gap:20px}
  .sd-mega-dar{grid-template-columns:repeat(2,minmax(0,1fr)) 240px}
}
@media (max-width:1120px){
  .sd-tel{display:none}
  .sd-mega-izgara{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
  .sd-mega-dar{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sd-mega-yan{display:none}
}
@media (max-width:1000px){
  .sd-linkler{display:none}
  /* Serit mobilde TEK SATIR: telefon, e-posta ve sag baglantilar
     gizlenir; yerine kisa slogan gelir. Uc bilgi dar ekranda
     satir kiriyordu. */
  .sd-ust-ic{justify-content:center;gap:0;height:34px;font-size:11.5px}
  .sd-ust-ic > a,.sd-ust-ic .sd-ust-sag{display:none}
  .sd-ust-slogan{
    display:flex;min-width:0;max-width:100%;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap
  }
  .sd-nav{height:58px}
  .sd-eylem{margin-left:auto}
  .sd-menu-ac{display:grid}
  /* arama kutusu 2. sirada acik duruyor; ikon gereksiz */
  #navSearch{display:none}
  .sd-mobil-ara{display:block}
  /* logo buyutuldu: arama ikonunun yeri bosaldi */
  .sd-logo img{height:44px;max-width:210px}
}
@media (max-width:820px){
  .sd-logo img{height:44px;max-width:200px}
  .sd-cta{display:none}
}
@media (prefers-reduced-motion:reduce){
  .sd-header .nav-dropdown-panel,.sd-header .sd-link,.sd-header .sd-link svg{transition:none}
}

/* ==================================================================
   MOBİL MENÜ — ALT SAYFA (bottom sheet)
   Alttan yukarı kayar; başparmakla erişimi en kolay biçim.
   Tek kaydırma yüzeyi: yalnızca .sd-alt-govde kayar, çocukları
   flex-shrink:0 olduğu için sıkışmaz (eski akordiyonlu çekmecede
   yaşanan ezilme sorunu bu yüzden tekrarlamaz).
   ================================================================== */
.mobile-nav.sd-alt{
  position:fixed;inset:0;z-index:70;visibility:hidden;pointer-events:none;
  transition:visibility 0s linear .3s
}
.mobile-nav.sd-alt.is-open{visibility:visible;pointer-events:auto;transition-delay:0s}

.sd-alt-fon{position:absolute;inset:0;background:#0f173073;opacity:0;transition:opacity .26s}
.mobile-nav.sd-alt.is-open .sd-alt-fon{opacity:1}

.sd-alt-panel{
  position:absolute;left:0;right:0;bottom:0;
  display:flex;flex-direction:column;
  max-height:88vh;max-height:88dvh;
  background:var(--surface);
  border-radius:22px 22px 0 0;
  box-shadow:0 -16px 40px -16px #0f17304d;
  transform:translateY(100%);
  transition:transform .32s cubic-bezier(.16,1,.3,1)
}
.mobile-nav.sd-alt.is-open .sd-alt-panel{transform:none}

/* tutamaç — dokunma hedefi olarak da kapatır */
.sd-alt-tutamac{
  flex:0 0 auto;display:flex;justify-content:center;
  padding:10px 0 4px;cursor:pointer;border:0;background:none;width:100%
}
.sd-alt-tutamac i{width:40px;height:4px;border-radius:99px;background:var(--line-strong);display:block}

.sd-alt-bas{
  flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;
  padding:4px 16px 12px;border-bottom:1px solid var(--line)
}
.sd-alt-bas b{font-size:15.5px;font-weight:650;letter-spacing:-.02em;color:var(--ink)}
.sd-alt-kapat{
  width:36px;height:36px;border-radius:10px;display:grid;place-items:center;
  border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer
}
.sd-alt-kapat svg{width:17px;height:17px}

/* tek kaydırma yüzeyi */
.sd-alt-govde{
  flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;padding:13px 16px 18px
}
.sd-alt-govde > *{flex-shrink:0}

/* arama */
.sd-alt-ara form{position:relative;display:flex;align-items:center}
.sd-alt-ara svg{position:absolute;left:13px;width:17px;height:17px;color:var(--muted-2);pointer-events:none}
.sd-alt-ara input{
  width:100%;height:46px;padding:0 46px 0 40px;font-size:15px;font-family:inherit;color:var(--ink);
  background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--radius-sm);outline:none
}
.sd-alt-ara input:focus{border-color:var(--primary);background:var(--surface)}
.sd-alt-ara button{
  position:absolute;right:6px;width:34px;height:34px;border:0;border-radius:8px;
  background:var(--primary);color:var(--primary-ink);display:grid;place-items:center;cursor:pointer
}
.sd-alt-ara button svg{position:static;color:inherit;width:16px;height:16px}

.sd-alt-baslik{
  display:block;padding:16px 2px 8px;
  font-size:10.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--muted-2)
}

/* kategori kutuları — 2'li */
.sd-alt-kare{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.sd-alt-kare a{
  --kt-renk:var(--primary);--kt-yumusak:var(--primary-soft);
  display:flex;flex-direction:column;gap:9px;padding:13px;
  border-radius:12px;background:var(--bg-soft);border:1px solid var(--line-soft);
  text-decoration:none;color:var(--ink);font-size:13.5px;font-weight:650;letter-spacing:-.015em;line-height:1.3
}
.sd-alt-kare a i{
  width:32px;height:32px;border-radius:9px;display:grid;place-items:center;
  background:var(--kt-yumusak);color:var(--kt-renk)
}
.sd-alt-kare a i svg{width:16px;height:16px}
.sd-alt-kare a span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sd-alt-kare a small{font-size:11.5px;font-weight:400;color:var(--muted-2)}
.sd-alt-kare a:active{border-color:var(--kt-renk)}

.sd-alt-tumu{
  display:flex;align-items:center;gap:9px;margin-top:10px;padding:12px 13px;
  border-radius:12px;border:1px dashed var(--line-strong);
  font-size:13.5px;font-weight:600;color:var(--primary-text,var(--primary));text-decoration:none
}
.sd-alt-tumu svg{width:15px;height:15px;flex-shrink:0}
.sd-alt-tumu svg:last-child{margin-left:auto}

/* düz satırlar */
.sd-alt-sat{
  display:flex;align-items:center;gap:10px;padding:13px 2px;
  border-bottom:1px solid var(--line-soft);
  font-size:14.5px;font-weight:500;letter-spacing:-.01em;color:var(--ink-2);text-decoration:none
}
.sd-alt-sat:last-of-type{border-bottom:0}
.sd-alt-sat svg{width:15px;height:15px;color:var(--muted-2);margin-left:auto;flex-shrink:0}
.sd-alt-sat:active{color:var(--primary-text,var(--primary))}
.sd-alt-say{
  margin-left:auto;padding:2px 8px;border-radius:99px;
  background:var(--primary-soft);color:var(--primary-text,var(--primary));font-size:11.5px;font-weight:700
}
.sd-alt-say + svg{margin-left:8px}

/* dip: CTA + telefon — güvenli alan payı ile */
.sd-alt-dip{
  flex:0 0 auto;display:grid;gap:8px;
  padding:12px 16px calc(16px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line);background:var(--surface)
}
.sd-alt-dip .sd-btn{width:100%;padding:12px 18px;font-size:14.5px}

@media (prefers-reduced-motion:reduce){
  .sd-alt-panel,.sd-alt-fon{transition:none}
}


/* ==================================================================
   ALT BİLGİ
   ================================================================== */
.sd-footer{margin-top:48px;background:var(--bg-soft);border-top:1px solid var(--line);color:var(--ink-2)}
.sd-footer-izgara{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px;padding:52px 0 40px}
.sd-footer-marka img{height:36px;width:auto;max-width:170px;object-fit:contain;display:block;margin-bottom:16px}
.sd-footer-marka p{margin:0 0 18px;font-size:14px;line-height:1.65;color:var(--muted);max-width:340px}
.sd-footer-iletisim{display:grid;gap:9px;font-size:14px}
.sd-footer-iletisim a,.sd-footer-iletisim span{display:flex;align-items:center;gap:9px;color:var(--ink-2);text-decoration:none}
.sd-footer-iletisim a:hover{color:var(--primary-text,var(--primary))}
.sd-footer-iletisim svg{width:15px;height:15px;color:var(--muted-2);flex-shrink:0}
.sd-footer-baslik{display:block;margin:4px 0 14px;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.sd-footer-liste{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.sd-footer-liste a{font-size:14.5px;color:var(--muted);text-decoration:none;letter-spacing:-.01em;transition:color .16s}
.sd-footer-liste a:hover{color:var(--primary-text,var(--primary))}

.sd-footer-bulten{margin-top:22px}
.sd-footer-bulten form{display:flex;gap:6px;max-width:340px}
.sd-footer-bulten input{flex:1 1 auto;min-width:0;height:42px;padding:0 12px;font-size:14px;font-family:inherit;
  color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);outline:none}
.sd-footer-bulten input:focus{border-color:var(--primary)}
.sd-footer-bulten button{height:42px;padding:0 14px}

.sd-footer-alt{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:18px 0 22px;border-top:1px solid var(--line);font-size:13px;color:var(--muted-2)}
.sd-footer-alt-linkler{display:flex;flex-wrap:wrap;gap:6px 18px}
.sd-footer-alt-linkler a{color:var(--muted);text-decoration:none}
.sd-footer-alt-linkler a:hover{color:var(--ink)}
.sd-footer-sosyal{display:flex;gap:4px}
.sd-footer-sosyal a{width:36px;height:36px;border-radius:9px;display:grid;place-items:center;color:var(--muted);
  border:1px solid var(--line);background:var(--surface);transition:color .16s,border-color .16s}
.sd-footer-sosyal a:hover{color:var(--primary-text,var(--primary));border-color:var(--primary)}
.sd-footer-sosyal svg{width:16px;height:16px}

@media (max-width:1000px){.sd-footer-izgara{grid-template-columns:1fr 1fr;gap:32px 28px;padding:44px 0 34px}}
@media (max-width:560px){.sd-footer-izgara{grid-template-columns:1fr;gap:28px}}

/* ==================================================================
   ANA SAYFA
   ================================================================== */

/* --- hero: solda başlık+arama, sağda gerçek yazılım görselleri --- */
.sd-hero{background:var(--bg-soft);border-bottom:1px solid var(--line);padding:64px 0 56px;overflow:hidden}
.sd-hero-izgara{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:48px;align-items:center}
.sd-hero-ic{min-width:0;max-width:640px}

/* sağdaki kolaj: iki dikey tanıtım görseli + kayan bilgi kartı */
.sd-hero-gorsel{position:relative;min-width:0}
/* Kolaj: ana görsel önde, ikinci görsel sağ alta binen küçük kart.
   Izgara yerine bindirme, çünkü dikey görseller yan yana dizilince
   sütun genişliğine sıkışıp metin sütununa göre bodur kalıyordu. */
.sd-hero-yigin{position:relative;padding:0 0 34px}
.sd-hero-cerce{
  margin:0;overflow:hidden;border-radius:var(--radius-lg);
  background:var(--surface);border:1px solid var(--line);
  box-shadow:0 24px 56px -22px #0f173033
}
.sd-hero-cerce img{display:block;width:100%;height:100%;object-fit:cover}
.sd-hero-c1{width:68%;aspect-ratio:52/62}
.sd-hero-c2{
  position:absolute;right:0;bottom:0;width:46%;aspect-ratio:52/62;
  box-shadow:0 18px 44px -18px #0f17303d
}

/* arka yumuşak leke — kutuların ardında derinlik */
.sd-hero-leke{
  position:absolute;z-index:0;width:320px;height:320px;border-radius:50%;
  right:-70px;top:-56px;pointer-events:none;
  background:radial-gradient(circle, var(--primary-soft) 0%, transparent 68%)
}
.sd-hero-yigin,.sd-hero-etiket{position:relative;z-index:1}

/* kayan bilgi kartı */
.sd-hero-etiket{
  display:flex;align-items:center;gap:11px;
  margin:-26px 0 0 -8px;padding:11px 14px;width:max-content;max-width:100%;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:0 14px 34px -14px #0f17302e;text-decoration:none
}
.sd-hero-etiket .ikon{
  flex:0 0 auto;width:36px;height:36px;border-radius:10px;display:grid;place-items:center;
  background:var(--primary-soft);color:var(--primary-text,var(--primary))
}
.sd-hero-etiket .ikon svg{width:18px;height:18px}
.sd-hero-etiket span{min-width:0}
.sd-hero-etiket b{
  display:block;font-size:13.5px;font-weight:650;letter-spacing:-.015em;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:210px
}
.sd-hero-etiket small{display:block;margin-top:1px;font-size:12.5px;color:var(--muted)}
.sd-hero-etiket:hover{border-color:var(--primary)}
.sd-hero-etiket:hover b{color:var(--primary-text,var(--primary))}

@media (max-width:1080px){
  .sd-hero-izgara{grid-template-columns:minmax(0,1fr) minmax(0,360px);gap:32px}
}
@media (max-width:900px){
  .sd-hero-izgara{grid-template-columns:1fr}
  .sd-hero-gorsel{display:none}
  .sd-hero-ic{max-width:none}
}
.sd-hero h1{margin:0 0 14px;font-size:clamp(30px,4.4vw,46px);font-weight:650;letter-spacing:-.035em;line-height:1.08;color:var(--ink)}
.sd-hero h1 em{font-style:normal;color:var(--primary-text,var(--primary))}
.sd-hero p{margin:0 0 26px;font-size:17px;line-height:1.6;color:var(--muted);max-width:560px}
.sd-hero-ara form{position:relative;display:flex;align-items:center;max-width:600px}
.sd-hero-ara svg{position:absolute;left:18px;width:20px;height:20px;color:var(--muted-2);pointer-events:none}
.sd-hero-ara input{width:100%;height:56px;padding:0 130px 0 50px;font-size:16px;font-family:inherit;color:var(--ink);
  background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--radius);outline:none;transition:border-color .18s,box-shadow .18s}
.sd-hero-ara input:focus{border-color:var(--primary);box-shadow:0 0 0 4px var(--primary-soft)}
.sd-hero-ara button{position:absolute;right:6px;height:44px;padding:0 18px}
.sd-hero-ara button svg{position:static;color:inherit;width:16px;height:16px}
.sd-hero-hizli{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:14px;font-size:13.5px;color:var(--muted)}
.sd-hero-hizli a{padding:5px 11px;border-radius:99px;border:1px solid var(--line);background:var(--surface);
  color:var(--ink-2);text-decoration:none;font-weight:500;transition:border-color .16s,color .16s}
.sd-hero-hizli a:hover{border-color:var(--primary);color:var(--primary-text,var(--primary))}
.sd-hero-dugmeler{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.sd-hero-olcu{display:flex;flex-wrap:wrap;gap:28px;margin-top:34px;padding-top:26px;border-top:1px solid var(--line)}
.sd-hero-olcu div{display:grid;gap:2px}
.sd-hero-olcu b{font-size:22px;font-weight:650;letter-spacing:-.03em;color:var(--ink);line-height:1.1}
.sd-hero-olcu span{font-size:13px;color:var(--muted)}

@media (max-width:820px){
  .sd-hero{padding:40px 0 36px}
  .sd-hero p{font-size:15.5px}
  .sd-hero-ara input{height:52px;padding-right:56px;font-size:15px}
  .sd-hero-ara button{width:42px;padding:0}
  .sd-hero-ara button span{display:none}
  .sd-hero-olcu{gap:20px}
}

/* --- kategoriler: ürün bulmanın ana yolu --- */
.sd-kat-izgara{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.sd-kat{display:flex;align-items:center;gap:14px;padding:16px;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--surface);text-decoration:none;color:var(--ink);transition:border-color .18s,background .18s}
.sd-kat:hover{border-color:var(--primary);background:var(--primary-soft)}
.sd-kat .kat-ikon{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;flex-shrink:0;
  background:var(--bg-soft);color:var(--primary-text,var(--primary));transition:background .18s}
.sd-kat:hover .kat-ikon{background:var(--surface)}
.sd-kat .kat-ikon svg{width:20px;height:20px}
.sd-kat b{display:block;font-size:15px;font-weight:600;letter-spacing:-.015em;line-height:1.25}
.sd-kat small{display:block;margin-top:3px;font-size:12.5px;color:var(--muted)}
.sd-kat>svg{margin-left:auto;width:16px;height:16px;color:var(--muted-2);flex-shrink:0}
@media (max-width:1000px){.sd-kat-izgara{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:680px){
  .sd-kat-izgara{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .sd-kat{flex-direction:column;align-items:flex-start;gap:12px;padding:14px}
  .sd-kat>svg{display:none}
}

/* --- yazılım ızgarası --- */
.sd-urun-izgara{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
@media (max-width:1100px){.sd-urun-izgara{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:820px){.sd-urun-izgara{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}
.sd-urun-alt{display:flex;justify-content:center;margin-top:28px}
/* ==================================================================
   YAZILIM KARTI
   Her ızgarada çalışır (ana sayfa, katalog, kategori, favoriler).
   Vurgu rengi kategoriden gelir: --kart-renk / --kart-yumusak.

   Görsel notu: ürün görselleri yazılımın TAM SAYFA ekran görüntüsü
   (520x620 dikey). Fotoğraf gibi yatay kırpılsa yalnızca üst şerit
   görünürdü; bu yüzden küçük bir tarayıcı çerçevesi içinde üstten
   hizalanıyor — kart "bu yazılım böyle görünüyor" diyor.
   ================================================================== */
.sd-kart{
  --kart-renk:var(--primary);--kart-yumusak:var(--primary-soft);
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--kart-radius);
  /* durağan halde yumuşak arduvaz gölgesi — kart zeminden ayrılıyor */
  box-shadow:0 10px 20px -12px #64748b3d, 0 2px 6px -3px #64748b29;
  transition:border-color .2s,box-shadow .22s,transform .22s
}
.sd-kart:hover{
  border-color:var(--line);transform:translateY(-4px);
  box-shadow:0 20px 34px -14px #64748b52, 0 6px 14px -8px #64748b33
}

/* görsel: tarayıcı çerçevesi + üstten hizalı ekran görüntüsü */
.sd-kart-gorsel{
  display:block;position:relative;overflow:hidden;
  background:var(--bg-soft);border-bottom:1px solid var(--line-soft)
}
.sd-kart-cerce{
  display:flex;align-items:center;gap:4px;height:24px;padding:0 10px;
  background:var(--surface);border-bottom:1px solid var(--line-soft)
}
.sd-kart-cerce i{width:6px;height:6px;border-radius:50%;background:var(--line-strong);flex:0 0 auto}
.sd-kart-cerce > span{flex:1 1 auto;height:8px;margin-left:6px;border-radius:99px;background:var(--bg-soft)}

.sd-kart-ekran{display:block;position:relative;aspect-ratio:4/3;overflow:hidden}
.sd-kart-ekran img{
  display:block;width:100%;height:100%;
  object-fit:cover;object-position:top center;
  transition:transform .4s cubic-bezier(.16,1,.3,1)
}
.sd-kart:hover .sd-kart-ekran img{transform:scale(1.035)}

/* ekran görüntüsünün altına doğru yumuşak geçiş — metin başlangıcı
   keskin kesilmiş gibi durmasın */
.sd-kart-parlama{
  position:absolute;left:0;right:0;bottom:0;height:46px;pointer-events:none;
  background:linear-gradient(to bottom, transparent, var(--surface))
}

/* görsel üstüne binen rozetler */
.sd-kart-rozetler{position:absolute;top:33px;right:9px;display:grid;gap:5px;justify-items:end;z-index:2}
.sd-kart-rozetler em{
  font-style:normal;padding:3px 9px;border-radius:99px;
  font-size:10.5px;font-weight:700;letter-spacing:.03em;
  color:#fff;background:var(--ink);box-shadow:0 2px 8px -2px #0f173059;white-space:nowrap
}
.sd-kart-rozetler .is-kurumsal{background:var(--forest)}
.sd-kart-rozetler .is-populer{background:var(--primary)}
.sd-kart-rozetler .is-yeni{background:var(--ok)}
.sd-kart-rozetler .is-ozel{background:var(--kart-renk)}
.sd-kart-indirim{
  position:absolute;top:33px;left:9px;z-index:2;padding:3px 9px;border-radius:99px;
  background:var(--danger);color:#fff;font-size:10.5px;font-weight:700;letter-spacing:.03em;
  box-shadow:0 2px 8px -2px #0f173059
}

/* gövde */
.sd-kart-govde{display:flex;flex-direction:column;flex:1;padding:13px 15px 15px;min-width:0}

/* kategori rozeti: renkli nokta + ad */
.sd-kart-kat{
  display:inline-flex;align-items:center;gap:6px;align-self:flex-start;max-width:100%;
  margin-bottom:7px;font-size:11.5px;font-weight:600;letter-spacing:.01em;
  color:var(--muted);text-decoration:none;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
.sd-kart-kat i{flex:0 0 auto;width:7px;height:7px;border-radius:50%;background:var(--kart-renk)}
.sd-kart-kat:hover{color:var(--kart-renk)}

.sd-kart-ad{margin:0 0 11px;font-size:15.5px;font-weight:650;letter-spacing:-.02em;line-height:1.32}
.sd-kart-ad a{
  color:var(--ink);text-decoration:none;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden
}
.sd-kart-ad a:hover{color:var(--kart-renk)}

/* fiyat — eylem satırının hemen üstünde, dibe yaslı */
.sd-kart-fiyat{
  display:flex;align-items:baseline;flex-wrap:wrap;gap:6px;
  margin-top:auto;padding-top:11px;border-top:1px solid var(--line-soft)
}
.sd-kart-fiyat b{font-size:18.5px;font-weight:700;letter-spacing:-.03em;color:var(--ink);line-height:1.1;white-space:nowrap}
.sd-kart-fiyat s{font-size:12.5px;color:var(--muted-2);text-decoration-thickness:1px;white-space:nowrap}
.sd-kart-fiyat-not{font-size:11.5px;color:var(--muted-2);white-space:nowrap}

/* Eylemler: yuvarlak vurgu ikonları + koyu hap "İncele".
   Koyu hap kartın içinde maviden daha sakin duruyor ve fiyatla
   yarışmıyor; marka mavisi üst menüdeki birincil eyleme kalıyor. */
.sd-kart-eylem{display:flex;align-items:center;gap:7px;margin-top:12px}
.sd-kart-btn{
  flex:1 1 auto;padding:9px 16px;font-size:13.5px;border-radius:var(--radius-pill);
  background:var(--ink);border-color:var(--ink);color:var(--surface)
}
.sd-kart-btn:hover{background:var(--ink-2);border-color:var(--ink-2);color:var(--surface)}
.sd-kart-ikon{
  flex:0 0 auto;width:34px;height:34px;display:grid;place-items:center;border-radius:50%;
  border:1px solid transparent;background:var(--accent-soft);color:var(--accent);
  text-decoration:none;transition:background .16s,color .16s
}
.sd-kart-ikon:hover{background:var(--accent);color:var(--accent-ink,#fff)}
.sd-kart-ikon svg{width:15px;height:15px}

@media (max-width:820px){
  .sd-kart-govde{padding:11px 12px 13px}
  .sd-kart-ad{font-size:14.5px;margin-bottom:9px}
  .sd-kart-kat{font-size:11px;margin-bottom:6px}
  .sd-kart-fiyat b{font-size:16.5px}
  .sd-kart-fiyat s,.sd-kart-fiyat-not{display:none}
  .sd-kart-eylem{margin-top:10px}
  /* mobilde demo/panel ikonları gizli — kart daralıyor */
  .sd-kart-ikon{display:none}
  .sd-kart-btn{padding:8px 13px;font-size:13px}
  .sd-kart-rozetler em,.sd-kart-indirim{font-size:10px;padding:2px 7px}
}
/* --- neden biz: dört madde, süs yok --- */
.sd-neden{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.sd-neden-oge{display:flex;gap:14px;padding:18px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.sd-neden-oge .ikon{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;flex-shrink:0;background:var(--primary-soft);color:var(--primary-text,var(--primary))}
.sd-neden-oge .ikon svg{width:19px;height:19px}
.sd-neden-oge b{display:block;font-size:15px;font-weight:600;letter-spacing:-.015em;margin-bottom:4px;color:var(--ink)}
.sd-neden-oge p{margin:0;font-size:13.5px;line-height:1.55;color:var(--muted)}
@media (max-width:1000px){.sd-neden{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.sd-neden{grid-template-columns:1fr}}

/* --- hizmetler: üç kart --- */
.sd-hizmet-izgara{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.sd-hizmet{display:flex;flex-direction:column;padding:22px;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--surface);text-decoration:none;color:var(--ink);transition:border-color .18s}
.sd-hizmet:hover{border-color:var(--primary)}
.sd-hizmet .ikon{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--primary-soft);color:var(--primary-text,var(--primary));margin-bottom:16px}
.sd-hizmet .ikon svg{width:21px;height:21px}
.sd-hizmet b{font-size:16.5px;font-weight:600;letter-spacing:-.02em;margin-bottom:8px}
.sd-hizmet p{margin:0 0 16px;font-size:14px;line-height:1.6;color:var(--muted);flex:1}
.sd-hizmet span{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:var(--primary-text,var(--primary))}
.sd-hizmet span svg{width:15px;height:15px}
@media (max-width:900px){.sd-hizmet-izgara{grid-template-columns:1fr}}

/* --- son çağrı --- */
.sd-cta-band{padding:44px 32px;border-radius:var(--radius-lg);background:var(--forest);color:#fff;
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.sd-cta-band h2{margin:0 0 6px;font-size:24px;font-weight:650;letter-spacing:-.025em;color:#fff}
.sd-cta-band p{margin:0;font-size:15px;color:#ffffffb3;max-width:520px;line-height:1.55}
.sd-cta-band .sd-btn-ana{background:#fff;color:var(--forest);border-color:#fff}
.sd-cta-band .sd-btn-ana:hover{background:#eef2ff;border-color:#eef2ff;color:var(--forest)}
.sd-cta-band .sd-btn-cizgi{background:transparent;color:#fff;border-color:#ffffff59}
.sd-cta-band .sd-btn-cizgi:hover{border-color:#fff;color:#fff}
.sd-cta-dugmeler{display:flex;gap:10px;flex-wrap:wrap}
@media (max-width:640px){.sd-cta-band{padding:30px 22px}.sd-cta-band h2{font-size:21px}}

/* ==================================================================
   KOYU MOD — tokenlar yetmeyen birkaç yer
   ================================================================== */
:root[data-tema="koyu"] .sd-header .nav-dropdown-panel{box-shadow:0 16px 40px -12px #00000080}
:root[data-tema="koyu"] .sd-alt-fon{background:#000000a6}
:root[data-tema="koyu"] .sd-cta-band{background:var(--surface-elevated);border:1px solid var(--line)}
:root[data-tema="koyu"] .sd-cta-band .sd-btn-ana{background:var(--primary);color:var(--primary-ink);border-color:var(--primary)}
:root[data-tema="koyu"] .sd-cta-band .sd-btn-ana:hover{background:var(--primary-hover);border-color:var(--primary-hover)}

/* ==================================================================
   HAREKET AZALTMA
   ================================================================== */
@media (prefers-reduced-motion:reduce){
  .sd-alt-panel,.sd-alt-fon,.sd-header .nav-dropdown-panel,.sd-link svg{transition:none}
}

/* ==================================================================
   HERO VİTRİNİ
   Sol sütun sabittir; sağdaki vitrin slaytı ve hero'nun tamamının
   zemin tonu birlikte değişir. Ton --sl-pastel ile taşınır; @property
   sayesinde renk geçişi animasyona girer, desteklemeyen tarayıcıda
   anında geçer (bozulma olmaz).

   Zemin ve ızgara kuralları premium.css'teki .sd-hero / .sd-hero-izgara
   kurallarını yenmek zorunda; bu yüzden iki sınıfla (0,2,0) yazıldılar.
   ================================================================== */
@property --sl-pastel {
  syntax: "<color>";
  inherits: true;
  initial-value: #e8f2fb;
}

.sd-hero.sd-hero-vitrinli{
  transition:--sl-pastel .7s ease;
  background:
    radial-gradient(760px 420px at 86% -12%, var(--sl-pastel), transparent 66%),
    radial-gradient(520px 320px at -6% 106%, color-mix(in srgb, var(--sl-pastel) 60%, transparent), transparent 62%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-soft) 100%)
}
:root[data-tema="koyu"] .sd-hero.sd-hero-vitrinli{
  background:
    radial-gradient(760px 420px at 86% -12%, color-mix(in srgb, var(--sl-pastel) 13%, transparent), transparent 66%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-soft) 100%)
}
@media (prefers-reduced-motion:reduce){ .sd-hero.sd-hero-vitrinli{transition:none} }

.sd-hero-vitrinli .sd-hero-izgara{
  grid-template-columns:minmax(0,1fr) minmax(0,700px);gap:40px;align-items:center
}

.sd-hero-vitrin{position:relative;min-width:0;z-index:1}
.sd-vt-pencere{position:relative;overflow:hidden}
.sd-vt-ray{display:flex;transition:transform .55s cubic-bezier(.16,1,.3,1)}
.sd-vt-slayt{min-width:100%;position:relative}
@media (prefers-reduced-motion:reduce){ .sd-vt-ray{transition:none} }

/* ---- sahne: çemberler + tarayıcı + rozetler ---- */
.sd-vt-sahne{position:relative;width:100%;aspect-ratio:1000/620}

/* tarayıcının arkasındaki iç içe şeffaf çemberler */
.sd-vt-cember{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  z-index:1;border-radius:50%;pointer-events:none;
  background:var(--sl-pastel);border:1px solid var(--surface)
}
.sd-vt-cember.c1{width:76%;aspect-ratio:1;opacity:.38}
.sd-vt-cember.c2{width:60%;aspect-ratio:1;opacity:.52}
.sd-vt-cember.c3{width:45%;aspect-ratio:1;opacity:.7}

/* ---- tarayıcı önizlemesi ---- */
.sd-vt-tarayici{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  z-index:2;width:64%;margin:0;border-radius:12px;overflow:hidden;
  background:var(--surface);border:1px solid var(--line);
  box-shadow:0 26px 54px -24px #64748b87, 0 8px 20px -12px #64748b4d
}
.sd-vt-cubuk{display:flex;align-items:center;gap:5px;height:24px;padding:0 10px;background:var(--line-soft);border-bottom:1px solid var(--line)}
.sd-vt-cubuk i{width:7px;height:7px;border-radius:50%;flex:0 0 auto}
.sd-vt-cubuk i:nth-child(1){background:#ff5f57}
.sd-vt-cubuk i:nth-child(2){background:#febc2e}
.sd-vt-cubuk i:nth-child(3){background:#28c840}
.sd-vt-ekran{display:block;position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--bg-soft)}
.sd-vt-ekran picture{display:block;width:100%;height:100%}
.sd-vt-ekran img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center}

/* ---- rozet baloncukları ---- */
.sd-vt-rozet{
  position:absolute;z-index:3;display:inline-flex;align-items:center;gap:9px;
  max-width:235px;padding:7px 14px 7px 7px;border-radius:99px;
  background:var(--surface);border:1px solid var(--line);
  box-shadow:0 12px 26px -12px #64748b7a, 0 2px 6px -3px #64748b40;
  animation:sd-vt-suzul 5.4s ease-in-out infinite
}
.sd-vt-rozet i{
  flex:0 0 auto;width:33px;height:33px;border-radius:50%;
  display:grid;place-items:center;background:var(--vt-renk,var(--primary));color:#fff
}
.sd-vt-rozet i svg{width:16px;height:16px}
.sd-vt-rozet span{min-width:0}
.sd-vt-rozet b{
  display:block;font-size:12.5px;font-weight:650;letter-spacing:-.02em;
  color:var(--ink);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.sd-vt-rozet small{
  display:block;margin-top:1px;font-size:10.5px;color:var(--muted);
  line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}

/* sekiz yuva: dördü solda, dördü sağda — dikeyde kaydırmalı */
.sd-vt-rozet.p1{left:0;   top:0;   animation-delay:0s}
.sd-vt-rozet.p2{right:0;  top:2%;  animation-delay:.7s}
.sd-vt-rozet.p3{left:3%;  top:27%; animation-delay:1.4s}
.sd-vt-rozet.p4{right:2%; top:29%; animation-delay:2.1s}
.sd-vt-rozet.p5{left:1%;  top:54%; animation-delay:2.8s}
.sd-vt-rozet.p6{right:0;  top:56%; animation-delay:3.5s}
.sd-vt-rozet.p7{left:5%;  top:81%; animation-delay:4.2s}
.sd-vt-rozet.p8{right:3%; top:83%; animation-delay:4.9s}

@keyframes sd-vt-suzul{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@media (prefers-reduced-motion:reduce){ .sd-vt-rozet{animation:none} }

/* ---- slayt künyesi: ürün adı, fiyat, bağlantılar ---- */
.sd-vt-kunye{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  flex-wrap:wrap;margin-top:12px;padding:12px 15px;
  border:1px solid var(--line);border-radius:var(--kart-radius,14px);background:var(--surface)
}
.sd-vt-kunye-ad{min-width:0;flex:1 1 180px}
.sd-vt-kunye-ad b{
  display:block;font-size:14.5px;font-weight:650;letter-spacing:-.02em;color:var(--ink);
  line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
.sd-vt-kunye-ad span{display:block;margin-top:3px;font-size:12.5px;color:var(--muted)}
.sd-vt-kunye-ad span em{font-style:normal;font-weight:650;color:var(--ink)}
.sd-vt-kunye-git{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.sd-vt-kunye-git .sd-btn{height:36px;padding:0 14px;font-size:13px}

/* ---- gezinme: yalnizca nokta + kaydirma ---- */
.sd-vt-nokta{display:flex;justify-content:center;gap:7px;margin-top:12px}
.sd-vt-nokta button{
  width:7px;height:7px;padding:0;border:0;border-radius:99px;background:var(--line-strong);
  cursor:pointer;transition:width .25s,background .25s
}
.sd-vt-nokta button.ac{width:22px;background:var(--ink-3)}

/* ---- daralma ----
   Sağ sütun daraldıkça rozet önce alt satırını, sonra iki yuvasını
   bırakır; böylece baloncuklar hiçbir genişlikte taşmaz ya da
   birbirinin üstüne binmez. */
@media (max-width:1320px){
  .sd-hero-vitrinli .sd-hero-izgara{grid-template-columns:minmax(0,1fr) minmax(0,560px);gap:34px}
  .sd-vt-rozet{max-width:172px;gap:8px;padding:6px 12px 6px 6px}
  .sd-vt-rozet i{width:29px;height:29px}
  .sd-vt-rozet i svg{width:14px;height:14px}
  .sd-vt-rozet b{font-size:11.5px}
  .sd-vt-rozet small{display:none}
}
@media (max-width:1200px){
  /* Rozeti daraltmak basliklari kirpiyordu; yerine tarayici bir miktar
     inceliyor, boylece yanlarda baloncuga yer aciliyor. */
  .sd-hero-vitrinli .sd-hero-izgara{grid-template-columns:minmax(0,1fr) minmax(0,460px);gap:28px}
  .sd-vt-tarayici{width:48%}
  .sd-vt-rozet.p5,.sd-vt-rozet.p6{display:none}
}
@media (max-width:1024px){
  .sd-hero-vitrinli .sd-hero-izgara{grid-template-columns:1fr;gap:34px}
  .sd-hero-vitrinli .sd-hero-ic{max-width:none}
  .sd-vt-sahne{aspect-ratio:1000/560}
  .sd-vt-tarayici{width:56%}
  .sd-vt-rozet{max-width:235px;gap:9px;padding:7px 14px 7px 7px}
  .sd-vt-rozet i{width:33px;height:33px}
  .sd-vt-rozet i svg{width:16px;height:16px}
  .sd-vt-rozet b{font-size:12.5px}
  .sd-vt-rozet small{display:block}
  .sd-vt-rozet.p5,.sd-vt-rozet.p6{display:inline-flex}
}
@media (max-width:640px){
  /* Telefonda yalnizca dort kose rozet kalir; sahne, tarayici arti
     alt/ust rozet siralari sigacak kadar yuksek olmali. */
  .sd-vt-sahne{aspect-ratio:1000/840}
  .sd-vt-rozet.p3,.sd-vt-rozet.p4,.sd-vt-rozet.p5,.sd-vt-rozet.p6{display:none}
  .sd-vt-rozet{max-width:46%;gap:7px;padding:5px 11px 5px 5px}
  .sd-vt-rozet i{width:27px;height:27px}
  .sd-vt-rozet i svg{width:13px;height:13px}
  .sd-vt-rozet b{font-size:11px}
  .sd-vt-rozet small{display:none}
  .sd-vt-tarayici{width:66%}
  .sd-vt-kunye{flex-direction:column;align-items:stretch}
  .sd-vt-kunye-git .sd-btn{flex:1;justify-content:center}
}

/* ---- koyu tema ---- */
:root[data-tema="koyu"] .sd-vt-cember{opacity:.1;border-color:#ffffff1f}
:root[data-tema="koyu"] .sd-vt-cember.c2{opacity:.14}
:root[data-tema="koyu"] .sd-vt-cember.c3{opacity:.18}
:root[data-tema="koyu"] .sd-vt-tarayici{box-shadow:0 26px 54px -24px #00000096}


/* ==================================================================
   YAZILIM KARTI — KÖŞE ROZETLİ DÜZEN (.kv)
   Kök .sd-kart çerçeveyi, yarıçapı ve havalanmayı verir; düzen
   buradadır. Seçiciler iki sınıflı (0,2,0) çünkü premium.css daha
   sonra yüklenip eski .sd-kart-* kurallarını uyguluyor.

   Rozetler "saf": zemin neredeyse beyaz, yazı renkli. Ekran görüntüsü
   ne renk olursa olsun okunur kalsın diye doygun dolgu kullanılmadı.
   ================================================================== */
.sd-kart.kv{padding:0;gap:0}

.kv .kv-gorsel{
  display:block;position:relative;overflow:hidden;
  aspect-ratio:4/3;background:var(--bg-soft);border-bottom:1px solid var(--line-soft)
}
.kv .kv-ekran{display:block;width:100%;height:100%}
.kv .kv-ekran picture{display:block;width:100%;height:100%}
.kv .kv-ekran img{
  display:block;width:100%;height:100%;
  object-fit:cover;object-position:top center;
  transition:transform .4s cubic-bezier(.16,1,.3,1)
}
.sd-kart.kv:hover .kv-ekran img{transform:scale(1.035)}

/* görselin üstünde: yalnızca indirim rozeti */
.kv .kv-indirim{
  position:absolute;left:11px;bottom:11px;z-index:2;
  display:inline-flex;padding:5px 11px;border-radius:99px;
  background:var(--danger-soft);color:var(--danger);
  border:1px solid color-mix(in srgb, var(--danger) 26%, transparent);
  font-size:10.5px;font-weight:700;letter-spacing:.04em;
  white-space:nowrap;box-shadow:0 2px 10px -4px #0f173040
}

/* gövde */
.kv .kv-ic{display:flex;flex-direction:column;gap:5px;padding:15px 16px 12px}
.kv .kv-ad{
  margin:0;font-size:16px;font-weight:700;letter-spacing:-.03em;line-height:1.28;color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.56em
}
.kv .kv-ad a{color:inherit}
.sd-kart.kv:hover .kv-ad a{color:var(--primary-text,var(--primary))}
.kv .kv-kat{
  font-size:12.5px;color:var(--muted);line-height:1.4;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
.kv .kv-kat:hover{color:var(--kart-renk,var(--primary))}

/* fiyat şeridi */
.kv .kv-alt{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:auto;padding:12px 16px 15px;border-top:1px solid var(--line-soft)
}
.kv .kv-fiyat{min-width:0;display:flex;flex-direction:column}
.kv .kv-fiyat s{font-size:11.5px;color:var(--muted-2);line-height:1.2}
.kv .kv-fiyat b{
  font-size:18.5px;font-weight:700;letter-spacing:-.035em;line-height:1.15;
  color:var(--ink);white-space:nowrap
}
.kv .kv-fiyat > span{font-size:11.5px;color:var(--muted);white-space:nowrap}
.kv .kv-git{display:flex;align-items:center;gap:7px;flex:0 0 auto}
.kv .kv-yuvarlak{
  width:36px;height:36px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
  background:var(--accent-soft);color:var(--primary-text,var(--accent));border:1px solid transparent;
  transition:background .16s,color .16s,transform .16s
}
.kv .kv-yuvarlak:hover{background:var(--accent);color:var(--accent-ink,#fff);transform:translateY(-2px)}
.kv .kv-yuvarlak svg{width:15px;height:15px}
.kv .kv-pil{
  display:inline-flex;align-items:center;justify-content:center;padding:10px 18px;border-radius:99px;
  background:var(--ink);color:var(--surface);
  font-size:13.5px;font-weight:650;letter-spacing:-.01em;white-space:nowrap;
  transition:background .16s,transform .16s
}
.kv .kv-pil:hover{background:var(--ink-3);transform:translateY(-1px)}

/* koyu tema: rozet zemini beyaz değil, kartın yüzeyi olur */
:root[data-tema="koyu"] .kv .kv-pil{background:var(--primary);color:var(--primary-ink,#fff)}
:root[data-tema="koyu"] .kv .kv-pil:hover{background:var(--primary-hover)}

/* dar sütunlar: rozet ve düğmeler küçülür, sonra ikinci rozet düşer */
@media (max-width:1100px){
  .kv .kv-ad{font-size:15px}
}
@media (max-width:820px){
  .kv .kv-alt{padding:11px 13px 13px}
  .kv .kv-ic{padding:13px 13px 10px}
  .kv .kv-fiyat b{font-size:17px}
  .kv .kv-pil{padding:9px 15px;font-size:13px}
  .kv .kv-yuvarlak{width:33px;height:33px}
}
@media (max-width:560px){
  /* İki sütunlu ızgarada kart ~160px kalıyor; fiyat ile butonlar aynı
     satıra sığmadığı için fiyat kırpılıyordu. Şerit alt alta geçiyor. */
  .kv .kv-indirim{font-size:9.5px;padding:5px 10px}
  .kv .kv-git .kv-yuvarlak:nth-of-type(2){display:none}
  .kv .kv-alt{flex-direction:column;align-items:stretch;gap:9px;padding:11px 12px 13px}
  .kv .kv-fiyat{flex-direction:row;align-items:baseline;gap:6px;flex-wrap:wrap}
  .kv .kv-fiyat b{font-size:16px}
  .kv .kv-fiyat > span{font-size:11px}
  .kv .kv-git{width:100%}
  .kv .kv-pil{flex:1;padding:9px 12px}
  .kv .kv-ic{padding:12px 12px 9px}
  .kv .kv-ad{font-size:14px}
}

/* ==================================================================
   ENTEGRASYONLAR — kayan logo şeridi
   Yazılım ızgarasının altında, kenardan kenara. İki sıra ters yönde
   kayar; üzerine gelince durur. Her sıra listesini iki kez basar ve
   kendi genişliği kadar (-100%) kayar; ikinci kopya tam ilkinin yerini
   aldığı için döngü dikişsiz. Hareket azaltma tercihinde animasyon
   kapanır, şerit elle kaydırılır.

   Logo kutusu koyu temada da BEYAZ kalır: kayıtlı logoların çoğu beyaz
   zeminli JPG/PNG; koyu zeminde beyaz blok gibi görünürlerdi.
   ================================================================== */
.sd-bas.sd-bas-orta{justify-content:center;text-align:center}
.sd-bas.sd-bas-orta p{margin-left:auto;margin-right:auto;max-width:62ch}

.sd-ent-serit{position:relative;overflow:hidden;padding:4px 0}
.sd-ent-serit::before,.sd-ent-serit::after{
  content:"";position:absolute;top:0;bottom:0;width:clamp(48px,9vw,140px);z-index:2;pointer-events:none
}
.sd-ent-serit::before{left:0;background:linear-gradient(90deg,var(--bg),transparent)}
.sd-ent-serit::after{right:0;background:linear-gradient(270deg,var(--bg),transparent)}

.sd-ent-sira{display:flex;overflow:hidden;margin-bottom:14px}
.sd-ent-sira:last-child{margin-bottom:0}
.sd-ent-ray{
  display:flex;gap:14px;flex:0 0 auto;padding-right:14px;
  animation:sd-ent-kay 52s linear infinite
}
.sd-ent-sira.ters .sd-ent-ray{animation-direction:reverse}
.sd-ent-serit:hover .sd-ent-ray{animation-play-state:paused}
@keyframes sd-ent-kay{from{transform:translateX(0)}to{transform:translateX(-100%)}}

.sd-ent-oge{
  display:flex;align-items:center;gap:11px;flex:0 0 auto;padding:11px 18px 11px 11px;
  border:1px solid var(--line);border-radius:12px;background:var(--surface);
  transition:border-color .18s,box-shadow .22s
}
.sd-ent-oge:hover{
  border-color:var(--ent-renk,var(--primary));
  box-shadow:0 10px 20px -12px #64748b3d, 0 2px 6px -3px #64748b29
}
.sd-ent-logo{
  display:flex;align-items:center;justify-content:center;width:40px;height:40px;padding:5px;flex:0 0 auto;overflow:hidden;
  border-radius:9px;background:#fff;border:1px solid var(--line-soft);
  filter:grayscale(1);opacity:.72;transition:filter .22s,opacity .22s
}
.sd-ent-oge:hover .sd-ent-logo{filter:none;opacity:1}
.sd-ent-logo img{display:block;width:100%;height:100%;object-fit:contain}
.sd-ent-ad{min-width:0}
.sd-ent-ad b{display:block;font-size:13.5px;font-weight:650;letter-spacing:-.015em;color:var(--ink);white-space:nowrap}
.sd-ent-ad small{display:block;margin-top:1px;font-size:11px;color:var(--muted);white-space:nowrap}

@media (max-width:640px){
  .sd-ent-ray{gap:10px;padding-right:10px;animation-duration:38s}
  .sd-ent-oge{padding:9px 14px 9px 9px;gap:9px}
  .sd-ent-logo{width:34px;height:34px}
  .sd-ent-ad b{font-size:12.5px}
  .sd-ent-ad small{display:none}
}
@media (prefers-reduced-motion:reduce){
  .sd-ent-ray{animation:none}
  .sd-ent-sira{overflow-x:auto;scrollbar-width:thin;padding-bottom:4px}
  .sd-ent-oge{transition:none}
}

/* ==================================================================
   NASIL ÇALIŞIR — kavisli yol
   Beş daire dalgalı kesik çizgi üstünde; 1-3-5 yukarıda, 2-4 aşağıda.
   Arkada dev çizgisel sayı. Vurgu rengi --accent (turuncu, panelden):
   ikon, dönen halkalar ve düğmeler onu kullanır.

   Halka animasyonu yalnızca transform (compositor); üzerine gelince
   hızlanır. Hareket azaltma tercihinde durur.

   Yol SVG'si ızgaranın ilk çocuğu olduğu için adımlar nth-of-type ile
   sayılıyor; nth-child SVG'yi de sayıp zikzağı ters çevirirdi.
   ================================================================== */
.sd-adim .sd-bas h2 em{font-style:normal;color:var(--primary-text,var(--accent))}

.sd-adim-yol{
  position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  gap:20px;padding-top:24px
}
.sd-adim-cizgi{position:absolute;left:0;right:0;top:0;width:100%;height:100%;z-index:0;pointer-events:none}
.sd-adim-cizgi path{fill:none;stroke:var(--line-strong);stroke-width:2;stroke-dasharray:7 8}

.sd-adim-ad{position:relative;z-index:1;text-align:center;padding-top:0}
.sd-adim-ad:nth-of-type(even){padding-top:56px}

.sd-adim-no{
  position:absolute;left:50%;top:-18px;transform:translateX(-50%);z-index:0;
  font-size:118px;font-weight:700;letter-spacing:-.06em;line-height:1;
  color:transparent;-webkit-text-stroke:1.5px var(--line);
  pointer-events:none;user-select:none
}
.sd-adim-ad:nth-of-type(even) .sd-adim-no{top:38px}

/* ikon dairesi + iki dönen halka */
.sd-adim-ik{
  position:relative;z-index:1;display:grid;place-items:center;
  width:132px;height:132px;margin:44px auto 22px;border-radius:50%;
  background:var(--surface);color:var(--accent);
  box-shadow:0 18px 40px -18px #64748b66, 0 0 0 1px var(--line-soft);
  transition:background .22s,transform .22s
}
.sd-adim-ik i{display:grid;place-items:center;font-style:normal}
.sd-adim-ik svg{width:44px;height:44px}
.sd-adim-ik::before,.sd-adim-ik::after{
  content:"";position:absolute;border-radius:50%;pointer-events:none
}
.sd-adim-ik::before{
  inset:-10px;border:2px dashed var(--accent);opacity:.55;
  animation:sd-adim-don 14s linear infinite
}
.sd-adim-ik::after{
  inset:-20px;border:1px solid var(--accent);opacity:.16;
  border-top-color:transparent;border-bottom-color:transparent;
  animation:sd-adim-don 22s linear infinite reverse
}
.sd-adim-ad:hover .sd-adim-ik{background:var(--accent-soft);transform:translateY(-4px)}
.sd-adim-ad:hover .sd-adim-ik::before{animation-duration:4s;opacity:.9}
.sd-adim-ad:hover .sd-adim-ik::after{animation-duration:7s;opacity:.35}
@keyframes sd-adim-don{to{transform:rotate(360deg)}}

.sd-adim-ad h3{margin:0 0 8px;font-size:18px;font-weight:650;letter-spacing:-.025em;color:var(--ink)}
.sd-adim-ad p{margin:0 auto;font-size:14px;line-height:1.6;color:var(--muted);max-width:26ch}

.sd-adim-btn{
  display:inline-flex;align-items:center;gap:7px;margin-top:16px;padding:9px 17px;border-radius:99px;
  background:var(--accent);color:var(--accent-ink,#fff);
  font-size:13px;font-weight:650;letter-spacing:-.01em;white-space:nowrap;
  transition:background .16s,transform .16s,box-shadow .2s
}
.sd-adim-btn:hover{background:var(--accent-2,var(--accent));transform:translateY(-1px);
  box-shadow:0 8px 20px -8px color-mix(in srgb, var(--accent) 60%, transparent)}
.sd-adim-btn svg{width:14px;height:14px}

@media (max-width:1100px){
  .sd-adim-yol{grid-template-columns:repeat(3,minmax(0,1fr));gap:26px 16px}
  .sd-adim-cizgi{display:none}
  .sd-adim-ad:nth-of-type(even){padding-top:0}
  .sd-adim-ad:nth-of-type(even) .sd-adim-no{top:-18px}
  .sd-adim-ik{width:110px;height:110px;margin-top:36px}
  .sd-adim-ik svg{width:36px;height:36px}
  .sd-adim-no{font-size:96px}
}
@media (max-width:640px){
  .sd-adim-yol{grid-template-columns:1fr;gap:34px}
}
@media (prefers-reduced-motion:reduce){
  .sd-adim-ik::before,.sd-adim-ik::after{animation:none}
  .sd-adim-ik,.sd-adim-btn{transition:none}
  .sd-adim-ad:hover .sd-adim-ik{transform:none}
}

/* ==================================================================
   HİZMETLER — kompakt kutu ızgarası
   18 hizmetin tamamı küçük kutularda: kapak görseli (hizmetin kendi
   SVG'si), ad, "Detaylar". Vurgu rengi --primary (panelden).
   ================================================================== */
.sd-hz-izgara{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.sd-hz{
  display:flex;flex-direction:column;gap:11px;padding:12px 12px 14px;
  border:1px solid var(--line);border-radius:14px;background:var(--surface);
  transition:border-color .18s,transform .18s,box-shadow .22s
}
.sd-hz:hover{
  border-color:var(--primary);transform:translateY(-3px);
  box-shadow:0 10px 20px -12px #64748b3d, 0 2px 6px -3px #64748b29
}
.sd-hz-kapak{display:block;aspect-ratio:16/10;border-radius:9px;overflow:hidden;background:var(--bg-soft)}
.sd-hz-kapak img{
  display:block;width:100%;height:100%;object-fit:cover;
  transition:transform .45s cubic-bezier(.22,.61,.36,1)
}
.sd-hz:hover .sd-hz-kapak img{transform:scale(1.04)}
.sd-hz b{
  font-size:13px;font-weight:650;letter-spacing:-.015em;line-height:1.3;color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em
}
.sd-hz-ok{
  display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:650;color:var(--muted);
  transition:color .16s
}
.sd-hz-ok svg{width:13px;height:13px;transition:transform .18s}
.sd-hz:hover .sd-hz-ok{color:var(--primary-text,var(--primary))}
.sd-hz:hover .sd-hz-ok svg{transform:translateX(3px)}

@media (max-width:1240px){ .sd-hz-izgara{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media (max-width:820px){ .sd-hz-izgara{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px} }
@media (max-width:520px){ .sd-hz-izgara{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (prefers-reduced-motion:reduce){
  .sd-hz,.sd-hz-kapak img,.sd-hz-ok,.sd-hz-ok svg{transition:none}
  .sd-hz:hover{transform:none} .sd-hz:hover .sd-hz-kapak img{transform:none}
}

/* ==================================================================
   DESTEK BANDI — görselli bant
   Lacivert zemin, ince ızgara dokusu, solda metin + üç bağlantı,
   sağda destek illüstrasyonu (resimler/genel/destek-banner.svg —
   değiştirmek için aynı adla başka bir görsel koymak yeter).
   Eski .sd-cta-band'ın yerini aldı.
   ================================================================== */
.sd-destek{
  position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:30px;align-items:center;padding:44px 40px 0;border-radius:var(--radius-lg);
  background:var(--forest);color:#fff;min-height:300px
}
.sd-destek::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(#ffffff0a 1px,transparent 1px),linear-gradient(90deg,#ffffff0a 1px,transparent 1px);
  background-size:40px 40px
}
.sd-destek-ic{position:relative;z-index:1;padding-bottom:44px}
.sd-destek-kicker{
  display:block;margin-bottom:10px;font-size:12px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:#ffb98a
}
.sd-destek h2{margin:0 0 10px;font-size:clamp(22px,2.5vw,31px);font-weight:650;letter-spacing:-.03em;line-height:1.15;color:#fff}
.sd-destek p{margin:0 0 20px;font-size:15px;color:#ffffffb8;max-width:48ch;line-height:1.6}
.sd-destek-dugmeler{display:flex;gap:10px;flex-wrap:wrap}
.sd-destek .sd-btn-ana{background:var(--primary);color:var(--primary-ink);border-color:var(--primary)}
.sd-destek .sd-btn-ana:hover{background:var(--primary-hover);border-color:var(--primary-hover)}
.sd-destek-cizgi{background:transparent;color:#fff;border:1px solid #ffffff59}
.sd-destek-cizgi:hover{border-color:#fff;background:#ffffff14;color:#fff}
.sd-destek-gorsel{position:relative;z-index:1;align-self:center;padding-bottom:20px}
.sd-destek-gorsel img{display:block;width:100%;max-width:520px;height:auto;margin:0 auto}

@media (max-width:900px){
  .sd-destek{grid-template-columns:1fr;padding:32px 26px 0}
  .sd-destek-ic{padding-bottom:28px}
  .sd-destek-gorsel img{max-width:380px}
}
@media (max-width:520px){
  .sd-destek-dugmeler .sd-btn{flex:1 1 100%;justify-content:center}
}

/* ==================================================================
   REFERANSLAR — logo kaydırma paneli
   Yuvarlak açık panel içinde iki sıra logo; yatay kaydırma + oklar.
   Logo kutusu koyu temada da beyaz (logoların çoğu beyaz zeminli JPG).
   ================================================================== */
.sd-ref{position:relative;padding:34px 60px;border-radius:var(--radius-lg);background:var(--bg-soft)}
.sd-ref-ray{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(150px,1fr);grid-template-rows:repeat(2,1fr);
  gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;padding:4px
}
.sd-ref-ray::-webkit-scrollbar{display:none}
/* flex (grid değil): grid'de img'in yüzde max-height'ı otomatik satıra karşı
   çözülemiyor ve dik logolar kutudan taşıyordu (180 logonun 86'sı). */
.sd-ref-oge{
  scroll-snap-align:start;display:flex;align-items:center;justify-content:center;
  height:88px;padding:16px 18px;border-radius:14px;overflow:hidden;
  background:#fff;border:1px solid var(--line);transition:border-color .18s,transform .18s,box-shadow .22s
}
.sd-ref-oge:hover{
  border-color:var(--primary);transform:translateY(-3px);
  box-shadow:0 10px 20px -12px #64748b3d, 0 2px 6px -3px #64748b29
}
.sd-ref-oge img{
  display:block;width:100%;height:100%;object-fit:contain;
  filter:grayscale(1);opacity:.7;transition:filter .22s,opacity .22s
}
.sd-ref-oge:hover img{filter:none;opacity:1}
.sd-ref-ok{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:42px;height:42px;border-radius:50%;
  cursor:pointer;background:var(--surface);border:1px solid var(--line);color:var(--primary-text,var(--primary));
  display:grid;place-items:center;box-shadow:0 10px 20px -12px #64748b3d;transition:background .16s,color .16s
}
.sd-ref-ok:hover{background:var(--primary);color:var(--primary-ink)}
.sd-ref-ok:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.sd-ref-ok svg{width:18px;height:18px}
.sd-ref-geri{left:12px} .sd-ref-ileri{right:12px}
.sd-ref-alt{display:flex;justify-content:space-between;align-items:center;margin-top:16px;font-size:12.5px;color:var(--muted)}
.sd-ref-alt a{display:inline-flex;align-items:center;gap:6px;font-weight:650;color:var(--primary-text,var(--primary))}
.sd-ref-alt a svg{width:14px;height:14px}

@media (max-width:700px){
  .sd-ref{padding:22px 16px}
  .sd-ref-ok{display:none}
  .sd-ref-ray{grid-auto-columns:minmax(120px,1fr)}
  .sd-ref-oge{height:72px}
}
@media (prefers-reduced-motion:reduce){
  .sd-ref-ray{scroll-behavior:auto}
  .sd-ref-oge,.sd-ref-oge img,.sd-ref-ok{transition:none}
  .sd-ref-oge:hover{transform:none}
}

/* ==================================================================
   FOOTER — iletişim kartlı düzen
   Solda lacivert iletişim kartı (logo, açıklama, tel/e-posta/adres,
   WhatsApp, sosyal); sağda üç bağlantı sütunu ve altında e-bülten
   şeridi. Alt şerit: telif · yasal linkler · ödeme logoları.
   Eski .sd-footer-izgara/.sd-footer-marka/.sd-footer-bulten kalktı;
   .sd-footer-baslik/.sd-footer-liste/.sd-footer-alt/.sd-footer-sosyal
   aynen kullanılıyor.
   ================================================================== */
.sd-ft-izgara{display:grid;grid-template-columns:minmax(0,400px) minmax(0,1fr);gap:32px;padding:44px 0 36px;align-items:start}

/* sol kart */
.sd-ft-kart{position:relative;overflow:hidden;padding:30px 28px;border-radius:var(--radius-lg);background:var(--forest);color:#fff}
.sd-ft-kart::after{
  content:"";position:absolute;right:-70px;top:-70px;width:220px;height:220px;border-radius:50%;
  background:var(--primary);opacity:.16;pointer-events:none
}
.sd-ft-kart > *{position:relative;z-index:1}
.sd-ft-logo{display:block;margin-bottom:16px}
.sd-ft-logo img{display:block;height:34px;width:auto}
/* koyu kartta her zaman açık logo — tema fark etmez */
.sd-ft-kart .logo-acik.logo-cift{display:none}
.sd-ft-kart .logo-koyu{display:block}
.sd-ft-kart p{margin:0 0 20px;font-size:13.5px;line-height:1.6;color:#b9c2d8;max-width:38ch}
.sd-ft-ilet{display:grid;gap:12px;margin-bottom:20px}
.sd-ft-ilet a,.sd-ft-ilet > span{display:flex;align-items:flex-start;gap:10px;font-size:14px;color:#e6eaf3;line-height:1.45}
.sd-ft-ilet i{width:30px;height:30px;border-radius:9px;flex:0 0 auto;display:grid;place-items:center;background:#ffffff14;color:var(--primary)}
.sd-ft-ilet i svg{width:15px;height:15px}
.sd-ft-ilet a:hover{color:#fff}
.sd-ft-wa{display:inline-flex}
.sd-ft-kart .sd-footer-sosyal{margin-top:18px}
.sd-ft-kart .sd-footer-sosyal a{border-color:#ffffff1f;color:#c6cee0;background:transparent}
.sd-ft-kart .sd-footer-sosyal a:hover{background:var(--primary);border-color:var(--primary);color:var(--primary-ink)}

/* sağ: sütunlar + bülten */
.sd-ft-sag{display:flex;flex-direction:column;gap:28px;min-width:0;padding-top:6px}
.sd-ft-sutunlar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px}
.sd-ft-bulten{
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding:18px 22px;border:1px solid var(--line);border-radius:var(--kart-radius,14px);background:var(--surface)
}
.sd-ft-bulten-metin{min-width:0;flex:1 1 260px}
.sd-ft-bulten-metin b{display:block;font-size:15px;font-weight:650;letter-spacing:-.02em;color:var(--ink)}
.sd-ft-bulten-metin span{display:block;margin-top:3px;font-size:13px;color:var(--muted);line-height:1.5}
.sd-ft-bulten-form{position:relative;display:flex;gap:8px;flex:1 1 360px;max-width:460px;min-width:0}
/* flex:1 (basis 0) sütun düzeninde height'ı eziyordu (≤420px'de 19px kalıyordu);
   basis auto ile satırda esner, sütunda 44px korunur. */
.sd-ft-bulten-form input[type="email"]{
  flex:1 1 auto;min-width:0;height:44px;padding:0 14px;border-radius:10px;border:1px solid var(--line-strong);
  background:var(--bg);color:var(--ink);font-family:inherit;font-size:14px
}
.sd-ft-bulten-form input[type="email"]:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}
.sd-ft-bulten-form .sd-btn{height:44px;padding:0 16px;font-size:13.5px;flex:0 0 auto}

@media (max-width:1000px){
  .sd-ft-izgara{grid-template-columns:1fr;gap:28px;padding-top:36px}
}
@media (max-width:640px){
  .sd-ft-sutunlar{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
  .sd-ft-kart{padding:24px 20px}
  .sd-ft-bulten{padding:16px}
  .sd-ft-bulten-form{flex-basis:100%;max-width:none}
}
@media (max-width:420px){
  .sd-ft-bulten-form{flex-direction:column}
  .sd-ft-bulten-form input[type="email"]{width:100%;flex:0 0 auto}
  .sd-ft-bulten-form .sd-btn{width:100%}
}

/* ==================================================================
   ÜYELİK — sekmeli tek kart (parca/uyelik-formu.php)
   Ortada 480px kart; üstte Giriş / Üye ol sekmesi; tek seferde tek form.
   Ödeme akışında (.checkout-steps) aynı kart adım çubuğunun altında.
   ================================================================== */
.uy-kap{max-width:480px;margin:0 auto}
.uy-kart{
  padding:26px 28px 28px;border:1px solid var(--line);border-radius:20px;background:var(--surface);
  box-shadow:0 10px 20px -12px #64748b3d, 0 2px 6px -3px #64748b29
}
.uy-sekme{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border-radius:12px;background:var(--bg-soft);margin-bottom:22px}
.uy-sekme button{
  height:40px;border:0;border-radius:9px;background:none;cursor:pointer;
  font-family:inherit;font-size:14px;font-weight:600;color:var(--muted);
  transition:background .16s,color .16s
}
.uy-sekme button.ac{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px #64748b2e}
.uy-sekme button:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.uy-bas{margin-bottom:20px}
.uy-bas h3{margin:0 0 6px;font-size:22px;font-weight:650;letter-spacing:-.03em;color:var(--ink)}
.uy-bas p{margin:0;font-size:14px;color:var(--muted);line-height:1.55}
.uy-form{display:grid;gap:14px}
.uy-alan{display:grid;gap:6px}
.uy-alan > span{font-size:13px;font-weight:600;color:var(--ink-2)}
.uy-alan input{
  width:100%;height:46px;padding:0 14px;border-radius:11px;border:1px solid var(--line-strong);
  background:var(--bg);color:var(--ink);font-family:inherit;font-size:14.5px
}
.uy-alan input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}
.uy-sifre{position:relative;display:block}
.uy-sifre input{padding-right:46px}
.uy-goz{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);width:34px;height:34px;border-radius:8px;
  border:0;background:none;color:var(--muted);cursor:pointer;display:grid;place-items:center
}
.uy-goz:hover,.uy-goz[aria-pressed="true"]{color:var(--ink);background:var(--bg-soft)}
.uy-goz svg{width:16px;height:16px}
.uy-satir{display:flex;justify-content:flex-end;font-size:13.5px}
.uy-onay{display:flex;align-items:flex-start;gap:9px;font-size:13.5px;line-height:1.5;color:var(--ink-2);cursor:pointer}
.uy-onay input{margin:3px 0 0;width:16px;height:16px;accent-color:var(--primary);flex:0 0 auto}
.uy-link{color:var(--primary-text,var(--primary));font-weight:600}
.uy-link:hover{text-decoration:underline}
.uy-btn{width:100%;height:48px;justify-content:center;font-size:15px}
.uy-btn-koyu{background:var(--ink);color:var(--surface);border-color:var(--ink)}
.uy-btn-koyu:hover{background:var(--ink-3);border-color:var(--ink-3);color:var(--surface)}
.uy-not{display:flex;align-items:center;justify-content:center;gap:7px;margin:18px 0 0;text-align:center;font-size:13.5px;color:var(--muted)}
.uy-not svg{width:15px;height:15px;flex:0 0 auto}
@media (max-width:520px){ .uy-kart{padding:22px 18px 24px} }

/* ==================================================================
   BLOG LİSTESİ — 4 sütun, kompakt kart
   system.css'teki 3 sütunlu .blog-grid'i ve büyük .blog-tile'ı ezer
   (aynı özgüllük, bu dosya sonra yüklenir). Kapak 16/9, başlık 16px,
   özet iki satırda kesilir; kart ~330px (eskisi ~520px).
   ================================================================== */
.blog-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.blog-tile{border-radius:14px}
.blog-tile-cover{aspect-ratio:16/9}
.blog-tile-body{gap:7px;padding:14px 16px 16px}
.blog-tile-tag{font-size:10.5px;padding:3px 9px}
.blog-tile h3{font-size:16px;line-height:1.3;letter-spacing:-.02em;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.blog-tile p{font-size:13.5px;line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;flex:0 0 auto}
.blog-tile-link{font-size:13.5px;padding-top:8px}
@media (max-width:1200px){ .blog-grid{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:820px){ .blog-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px} }
@media (max-width:520px){ .blog-grid{grid-template-columns:1fr} }

/* ==================================================================
   HEADER LOGO — açılış animasyonu
   Rozet tam logo yüksekliğinde, yazı --yazi-oran ile orantılı
   (func/logo.php gerçek görsel boyutlarından hesaplar). Animasyon
   yalnızca .oynat sınıfıyla (oturumda bir kez, JS ekler) oynar.
   .sd-logo img{height:38px} kuralını iki sınıflı seçicilerle eziyor.
   ================================================================== */
.sd-logo-anim{display:inline-flex;align-items:center;gap:10px;height:38px}
.sd-logo-anim .sd-logo-rozet{position:relative;height:100%;flex:0 0 auto}
.sd-logo-anim .sd-logo-rozet img{height:100%;width:auto;max-width:none;display:block}
/* display burada verilmez: açık/koyu yazı geçişini koyu.css yönetir. */
.sd-logo-anim .sd-logo-yazi{height:calc(100% * var(--yazi-oran,.76));width:auto;max-width:none}
.sd-logo-anim.oynat .sd-logo-rozet img{animation:sd-logo-rozet .9s cubic-bezier(.16,1,.3,1) both}
.sd-logo-anim.oynat .sd-logo-yazi{animation:sd-logo-yazi .7s .35s cubic-bezier(.16,1,.3,1) both}
@keyframes sd-logo-rozet{
  from{transform:scale(0) rotate(-90deg);opacity:0}
  60%{transform:scale(1.12) rotate(8deg);opacity:1}
  to{transform:scale(1) rotate(0)}
}
@keyframes sd-logo-yazi{from{transform:translateX(-14px);opacity:0}to{transform:translateX(0);opacity:1}}
@media (max-width:1100px){ .sd-logo-anim{height:44px} }
@media (max-width:820px){ .sd-logo-anim{height:44px} }
@media (prefers-reduced-motion:reduce){
  .sd-logo-anim.oynat .sd-logo-rozet img,.sd-logo-anim.oynat .sd-logo-yazi{animation:none}
}