/* Sepetim — veli satış sitesi. Mobil öncelikli, el yazımı CSS (Bootstrap yok).
   Palet/tipografi: design/DESIGN.md (A) asistim.ai teması, Sepetim logosunun
   turuncusu (#F07E26) ve lacivertine (#1E3A8A) uyarlanmıştır. */

:root{
  --primary:#1E3A8A;
  --primary-koyu:#14205A;
  --primary-dark:#0B1220;
  --accent:#F07E26;
  --orange:#F07E26; --orange-2:#FF9A45; --orange-soft:#FDECDD;
  --navy:#0B1220; --navy-2:#141C30; --navy-3:#1F2A44; --navy-accent:#22386E;
  --heading:#0B1220; --ink:#16181F; --muted:#5B6273; --line:#E7EAF1;
  --bg:#FFFFFF; --bg-soft:#F6F8FC;
  --white:#FFFFFF; --surface:#FFFFFF;
  --chip-bg:#E8EEFF; --chip-fg:#1E3A8A;
  --ok:#1F9D6B; --hata:#C8362B;
  --radius:18px; --radius-lg:28px;
  --shadow-sm:0 4px 14px rgba(12,30,69,.06);
  --shadow-md:0 18px 40px rgba(12,30,69,.10);
  --shadow-lg:0 40px 80px rgba(12,30,69,.16);
  --maxw:1180px; --ease:cubic-bezier(.16,.84,.44,1);
  --ust-h:86px;
  --font-family:'Plus Jakarta Sans','Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}

*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:var(--ust-h) }
/* Yapiskan alt bilgi: kisa sayfalarda footer ekran ortasinda kalmasin. */
html{ height:100% }
body{ min-height:100% }

/* Yapışkan başlık altında kalmasın diye anchor hedeflerine boşluk. */
#icerik,#urunler,#paketler,#sepet,#sss,#iletisim,.sec[id],section[id],footer[id]{
  scroll-margin-top:var(--ust-h) }
body{
  margin:0; font-family:var(--font-family); color:var(--ink);
  background:var(--bg); line-height:1.6; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  display:flex; flex-direction:column; min-height:100vh;
}
#icerik{ flex:1 0 auto }
h1,h2,h3,h4{ font-family:'Plus Jakarta Sans',sans-serif; line-height:1.15; letter-spacing:-.02em; color:var(--heading); margin:0 0 12px }
h1{ font-size:clamp(1.85rem,6vw,3.1rem); font-weight:800 }
h2{ font-size:clamp(1.4rem,3.6vw,2.05rem); font-weight:800 }
h3{ font-size:1.15rem; font-weight:700 }
h4{ font-size:1rem; font-weight:700 }
p{ margin:0 0 12px }
a{ color:var(--primary); text-decoration:none }
a:hover{ color:var(--orange) }
img{ max-width:100%; height:auto }
::selection{ background:var(--orange); color:#fff }
:focus-visible{ outline:3px solid rgba(240,126,38,.55); outline-offset:2px; border-radius:6px }

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 18px; width:100% }
.lead{ color:var(--muted); font-size:1.02rem }
.mini{ font-size:.86rem; color:var(--muted) }
.gizli{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }
.atla{ position:absolute; left:-9999px; top:0; background:var(--primary); color:#fff; padding:10px 16px; z-index:200; border-radius:0 0 10px 0 }
.atla:focus{ left:0; color:#fff }

.etiket{ display:inline-block; text-transform:uppercase; letter-spacing:.08em; font-size:.74rem;
  font-weight:800; color:var(--orange); background:var(--orange-soft); border-radius:100px;
  padding:5px 14px; margin-bottom:12px }
.etiket-koyu{ background:rgba(255,255,255,.12); color:var(--orange-2) }

/* ---------------------------------------------------------------- Başlık */
.ust{ position:sticky; top:0; z-index:80; background:rgba(255,255,255,.96);
  backdrop-filter:saturate(160%) blur(8px); box-shadow:0 1px 0 var(--line); transition:box-shadow .3s }
.ust.kaydirildi{ box-shadow:0 6px 22px rgba(12,30,69,.09) }
.ust-ic{ display:flex; align-items:center; gap:12px; padding-top:10px; padding-bottom:10px; flex-wrap:wrap }
.marka{ display:flex; align-items:center; margin-right:auto; min-width:0 }
.marka-sepetim{ height:34px; width:auto }

.menu-dugme{ order:3; width:40px; height:40px; border:1.5px solid var(--line); background:#fff;
  border-radius:12px; display:grid; place-content:center; gap:5px; cursor:pointer; padding:0 }
.menu-dugme span{ display:block; width:18px; height:2px; background:var(--heading); border-radius:2px; transition:transform .25s var(--ease), opacity .2s }
.menu-dugme.acik span:nth-child(1){ transform:translateY(7px) rotate(45deg) }
.menu-dugme.acik span:nth-child(2){ opacity:0 }
.menu-dugme.acik span:nth-child(3){ transform:translateY(-7px) rotate(-45deg) }

.ust-nav{ order:5; display:none; width:100%; flex-direction:column; gap:2px; padding:8px 0 4px; border-top:1px solid var(--line) }
.ust-nav.acik{ display:flex }
.ust-nav .nlink{ font-weight:600; font-size:.98rem; color:var(--heading); opacity:.88; padding:10px 4px; border-radius:10px }
.ust-nav .nlink:hover{ opacity:1; color:var(--orange) }
.ust-nav-sade{ display:flex; flex-direction:row; gap:16px; width:auto; order:2; border:0; padding:0 }

.ust-sag{ order:2; display:flex; align-items:center; gap:10px }
.sepet-rozet{ display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:.9rem;
  color:var(--primary); background:var(--chip-bg); border-radius:100px; padding:8px 14px;
  border:1.5px solid transparent; transition:background .25s, border-color .25s }
.sepet-rozet svg{ width:19px; height:19px }
.sepet-rozet:hover{ background:#fff; border-color:var(--orange); color:var(--orange) }
.sepet-rozet .rozet-yazi{ display:none }
.rozet-adet{ min-width:22px; height:22px; border-radius:100px; background:var(--orange); color:#fff;
  display:inline-grid; place-items:center; font-size:.78rem; font-weight:800; padding:0 6px }
.sepet-rozet[data-bos="true"] .rozet-adet{ background:var(--muted) }

.marka-impark{ display:inline-flex; align-items:center; gap:6px; font-size:.72rem; color:var(--muted); white-space:nowrap }
.marka-impark img{ height:17px; width:auto; opacity:.85 }
.marka-impark-yazi{ display:none; font-weight:600 }

/* ---------------------------------------------------------------- Bölümler */
.sec{ padding:52px 0 }
.sec-acik{ background:var(--bg-soft) }
.sec-koyu{ background:linear-gradient(140deg,var(--primary-koyu),var(--primary) 55%,#26489E);
  color:rgba(255,255,255,.86) }
.sec-basi{ max-width:720px; margin:0 0 28px }
.sec-basi .lead{ margin-bottom:0 }
.sec-basi-koyu h2{ color:#fff }

/* ---------------------------------------------------------------- Hero */
.hero{ position:relative; overflow:hidden; padding:44px 0 52px;
  background:
    radial-gradient(700px 420px at 88% -6%, rgba(240,126,38,.16), transparent 62%),
    radial-gradient(760px 480px at 6% 0%, rgba(30,58,138,.14), transparent 60%),
    linear-gradient(180deg,#FFFFFF,var(--bg-soft)) }
.hero-ic{ display:grid; grid-template-columns:1fr; gap:34px; align-items:center }
.hero h1{ margin-bottom:14px }
.hero h1 em{ font-style:normal; color:var(--orange) }
.hero .lead{ font-size:1.06rem; max-width:56ch }
.hero-dugmeler{ display:flex; flex-wrap:wrap; gap:12px; margin:22px 0 20px }
.hero-madde{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px 18px }
.hero-madde li{ position:relative; padding-left:24px; font-size:.92rem; font-weight:600; color:var(--muted) }
.hero-madde li::before{ content:"✓"; position:absolute; left:0; top:-1px; width:17px; height:17px;
  border-radius:50%; background:var(--orange); color:#fff; font-size:.66rem; display:grid; place-items:center }

.hero-gorsel{ position:relative; min-height:280px; display:grid; place-items:center }
.hero-daire{ position:absolute; inset:6% 8%; border-radius:50%;
  background:radial-gradient(circle at 34% 30%, rgba(255,255,255,.95), rgba(232,238,255,.75));
  box-shadow:var(--shadow-md) }
.hero-kart{ position:absolute; background:#fff; border:1px solid var(--line); border-radius:16px;
  box-shadow:var(--shadow-md); padding:12px 14px; display:grid; place-items:center;
  animation:sallan 6s var(--ease) infinite }
.hero-kart img{ max-height:30px; width:auto; max-width:120px }
.hero-kart-1{ top:4%; left:2%; animation-delay:0s }
.hero-kart-2{ bottom:12%; left:8%; animation-delay:.9s }
.hero-kart-3{ top:16%; right:2%; animation-delay:1.8s }
.hero-sepet{ position:relative; z-index:2; background:#fff; border-radius:22px; padding:20px 26px;
  box-shadow:var(--shadow-lg); border:1px solid var(--line) }
.hero-sepet img{ height:44px; width:auto }
@keyframes sallan{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-9px) } }

/* ---------------------------------------------------------------- Ürün kartları */
.urun-izgara{ display:grid; grid-template-columns:1fr; gap:16px }
.urun-kart{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:24px; box-shadow:var(--shadow-sm); display:flex; flex-direction:column;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s }
.urun-kart:hover{ transform:translateY(-5px); box-shadow:var(--shadow-md); border-color:transparent }
.urun-logo{ height:54px; display:flex; align-items:center; margin-bottom:16px }
.urun-logo img{ max-height:46px; max-width:180px; width:auto; object-fit:contain }
.urun-kart p{ color:var(--muted); font-size:.95rem; flex:1 }
.urun-link{ font-weight:700; font-size:.92rem; align-self:flex-start }

/* ---------------------------------------------------------------- Neden İmpark */
.neden-izgara{ display:grid; grid-template-columns:1fr; gap:14px }
.neden{ background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14);
  border-radius:16px; padding:20px }
.neden strong{ display:block; font-size:1.45rem; font-weight:800; color:#fff; letter-spacing:-.02em; margin-bottom:4px }
.neden span{ font-size:.92rem; color:rgba(255,255,255,.8) }

/* ---------------------------------------------------------------- Size özel paketler */
.ozel-basi{ position:relative }
.ozel-logo{ max-height:56px; max-width:190px; width:auto; object-fit:contain; display:block; margin-bottom:14px }
.ozel-not{ background:var(--orange-soft); border:1px solid #F5D6B8; color:#7A3D06;
  border-radius:14px; padding:12px 16px; font-size:.92rem; margin-top:14px }

.kanal{ margin-top:30px }
.kanal-baslik{ display:flex; align-items:center; gap:12px; margin:0 0 14px; padding-bottom:12px; border-bottom:1px solid var(--line) }
.kanal-baslik h3{ margin:0; font-size:1.2rem }
.kanal-logo{ height:30px; max-width:96px; width:auto; object-fit:contain }
.kanal-rozet{ background:var(--chip-bg); color:var(--chip-fg); border-radius:100px; font-size:.76rem;
  font-weight:700; padding:4px 12px; margin-left:auto; white-space:nowrap }

.kart-izgara{ display:grid; grid-template-columns:1fr; gap:16px }

.paket-kart{ position:relative; display:flex; flex-direction:column; background:var(--surface);
  border:2px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); overflow:hidden;
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease) }
.paket-kart:hover{ box-shadow:var(--shadow-md); transform:translateY(-4px) }
/* Kartlar kendi icinde yavasca suzulur: translate ozelligi transform'dan bagimsiz oldugu icin
   hover kaldirmasiyla cakismaz; GPU'da calisir, sunucuya ve isleme yuku getirmez. */
@keyframes kart-suzul{ 0%,100%{ translate:0 0 } 50%{ translate:0 -7px } }
.paket-kart{ animation:kart-suzul 5.2s ease-in-out infinite }
.kart-izgara .paket-kart:nth-child(3n+2){ animation-delay:-1.7s }
.kart-izgara .paket-kart:nth-child(3n+3){ animation-delay:-3.5s }
.paket-kart:hover{ animation-play-state:paused }
/* Kapak: kartin ust kismini kenardan kenara doldurur (4:3, tam tasarimli gorsel) */
.paket-kapak{ position:relative; width:100%; aspect-ratio:4/3; padding:0; overflow:hidden;
  background:var(--bg-soft); border-bottom:1px solid var(--line) }
.paket-kapak img{ display:block; width:100%; height:100%; object-fit:cover }
/* Kapak yoksa: kanal logosu, acik mavi zeminde ortali */
.paket-kapak-bos{ background:linear-gradient(160deg,#F2F5FC,#E8EEFF); display:grid; place-items:center; padding:18px }
.paket-kapak-bos img{ width:auto; max-width:78%; max-height:100%; object-fit:contain }
/* Secili kartta kapagin sag ustunde onay rozeti */
.paket-onay{ position:absolute; top:10px; right:10px; width:32px; height:32px; border-radius:50%;
  background:#12764F; color:#fff; display:grid; place-items:center; font-size:1rem; font-weight:800;
  line-height:1; box-shadow:0 6px 18px rgba(12,30,69,.3); pointer-events:none;
  opacity:0; transform:scale(.6);
  transition:opacity .22s var(--ease), transform .22s var(--ease) }
.paket-kart.secili .paket-onay{ opacity:1; transform:scale(1) }
.paket-sinif{ position:absolute; top:12px; left:12px; background:#fff; color:var(--primary);
  border-radius:100px; font-size:.76rem; font-weight:800; padding:4px 12px; box-shadow:var(--shadow-sm) }
.paket-govde{ padding:16px 18px 8px; flex:1 }
.paket-kanal{ display:block; font-size:.78rem; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; color:var(--orange); margin-bottom:6px }
.paket-ad{ font-size:1.06rem; font-weight:700; margin:0 0 6px }
.paket-aciklama{ font-size:.9rem; color:var(--muted); margin:0 }
.paket-alt{ position:relative; display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:14px 18px 18px; flex-wrap:wrap }
.paket-fiyat-blok{ display:flex; flex-direction:column; min-width:0 }
.paket-fiyat-etiket{ font-size:.74rem; color:var(--muted); font-weight:600 }
.paket-fiyat{ font-size:1.24rem; font-weight:800; color:var(--heading); white-space:nowrap; letter-spacing:-.02em }
.paket-kutu{ position:absolute; opacity:0; width:1px; height:1px; margin:0; pointer-events:none }

.btn-ekle{ background:var(--primary); color:#fff; padding:11px 20px; font-size:.92rem;
  box-shadow:0 6px 16px rgba(30,58,138,.22) }
.btn-ekle .sepette-yazi{ display:none }
.btn-ekle:hover{ background:var(--orange); color:#fff; box-shadow:0 10px 22px rgba(240,126,38,.3) }
.paket-kutu:checked + .btn-ekle{ background:#E4F6EE; color:#12764F; box-shadow:none; border-color:#B7E4D0 }
.paket-kutu:checked + .btn-ekle .ekle-yazi{ display:none }
.paket-kutu:checked + .btn-ekle .sepette-yazi{ display:inline }
.paket-kutu:focus-visible + .btn-ekle{ outline:3px solid rgba(240,126,38,.55); outline-offset:2px }
.paket-kart.secili{ border-color:var(--primary); box-shadow:0 12px 28px rgba(30,58,138,.16) }
.paket-kart.secili .paket-kapak-bos{ background:linear-gradient(160deg,#E8EEFF,#DCE6FF) }

/* ---------------------------------------------------------------- Sepet kartı */
.sepet-kart{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md); padding:22px 20px; max-width:680px; margin:0 auto }
.sepet-basi{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:6px }
.sepet-basi h2{ margin:0 }
.sepet-satirlar{ margin:10px 0 4px }
.sepet-bos{ color:var(--muted); font-size:.94rem; background:var(--bg-soft); border-radius:14px; padding:16px; margin:0 }
.sepet-satir{ display:grid; grid-template-columns:96px 1fr auto auto; align-items:center; gap:12px;
  padding:12px 0; border-top:1px solid var(--line) }
.sepet-satir-gorsel{ display:block; width:96px; height:72px; aspect-ratio:4/3; object-fit:cover;
  border-radius:8px; padding:0; background:var(--bg-soft); border:0 }
.sepet-satir-gorsel-bos{ object-fit:contain; padding:8px }
.sepet-satir-bilgi{ display:flex; flex-direction:column; min-width:0 }
.sepet-satir-ad{ font-weight:700; font-size:.96rem; color:var(--heading) }
.sepet-satir-kanal{ font-size:.8rem; color:var(--muted) }
.sepet-satir-fiyat{ font-weight:700; white-space:nowrap }
.sepet-kaldir{ width:30px; height:30px; border-radius:50%; border:1.5px solid var(--line);
  background:#fff; color:var(--muted); font-size:1.1rem; line-height:1; cursor:pointer;
  display:grid; place-items:center; padding:0 }
.sepet-kaldir:hover{ border-color:var(--hata); color:var(--hata) }
.sepet-toplam{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  border-top:2px solid var(--line); margin-top:8px; padding:14px 0 16px;
  font-weight:800; font-size:1.2rem; color:var(--heading) }
.sepet-not{ margin:12px 0 0; text-align:center }

/* ---------------------------------------------------------------- SSS */
.sss-liste{ display:grid; gap:10px; max-width:840px }
.sss{ background:var(--surface); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow-sm) }
.sss > summary{ list-style:none; cursor:pointer; padding:16px 18px; font-weight:700;
  color:var(--heading); display:flex; align-items:center; justify-content:space-between; gap:12px }
.sss > summary::-webkit-details-marker{ display:none }
.sss > summary::after{ content:"+"; color:var(--orange); font-size:1.3rem; font-weight:700; line-height:1 }
.sss[open] > summary::after{ content:"–" }
.sss-govde{ padding:0 18px 16px }
.sss-govde p{ color:var(--muted); font-size:.95rem; margin:0 }

/* ---------------------------------------------------------------- Yapışkan mini çubuk */
.sepet-cubuk{ position:fixed; left:0; right:0; bottom:0; z-index:70; background:var(--surface);
  border-top:1px solid var(--line); box-shadow:0 -10px 30px rgba(12,30,69,.12);
  padding:10px 0 calc(10px + env(safe-area-inset-bottom));
  transform:translateY(0); transition:transform .3s var(--ease), opacity .25s }
.sepet-cubuk.gizli{ transform:translateY(120%); opacity:0; pointer-events:none }
.sepet-cubuk[data-bos="true"]{ transform:translateY(120%); opacity:0; pointer-events:none }
.secim-ic{ display:flex; align-items:center; gap:12px }
.secim-bilgi{ min-width:0 }
.secim-adet{ font-size:.8rem; color:var(--muted) }
.secim-toplam{ font-size:1.15rem; font-weight:800; color:var(--heading) }
.sepet-cubuk .btn-primary{ margin-left:auto }

/* Toplamın yanındaki ok düğmesi */
.sepet-ok{ flex:0 0 auto; width:38px; height:38px; border-radius:50%; padding:0; cursor:pointer;
  border:1.5px solid var(--line); background:#fff; color:var(--primary);
  display:grid; place-items:center; transition:border-color .25s, color .25s, background .25s }
.sepet-ok svg{ width:22px; height:22px; transition:transform .25s var(--ease) }
.sepet-ok:hover:not(:disabled){ border-color:var(--orange); color:var(--orange) }
.sepet-ok:disabled{ opacity:.4; cursor:not-allowed }
.sepet-ok[aria-expanded="false"] svg{ transform:rotate(180deg) }

/* Çubuğun üstünde açılan sepet paneli */
.sepet-panel{ background:var(--surface); border-bottom:1px solid var(--line);
  margin:-10px 0 10px; padding:14px 0 12px; box-shadow:0 -8px 24px rgba(12,30,69,.08) }
.sepet-panel[hidden]{ display:none }
.sepet-panel-basi{ display:flex; align-items:baseline; gap:10px; margin-bottom:6px }
.sepet-panel-basi h3{ margin:0; font-size:1.05rem }
.sepet-panel-kapat{ margin-left:auto; align-self:center; width:30px; height:30px; border-radius:50%;
  border:1.5px solid var(--line); background:#fff; color:var(--muted); font-size:.9rem; line-height:1;
  cursor:pointer; display:grid; place-items:center; padding:0 }
.sepet-panel-kapat:hover{ border-color:var(--orange); color:var(--orange) }
.sepet-panel-satirlar{ max-height:min(46vh,340px); overflow-y:auto; -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain }
.sepet-panel-satir{ display:grid; grid-template-columns:auto 96px 1fr auto; align-items:center; gap:10px;
  padding:9px 0; border-top:1px solid var(--line) }
.sepet-panel-satir:first-child{ border-top:0 }
.sepet-panel-gorsel{ display:block; width:96px; height:72px; aspect-ratio:4/3; object-fit:cover;
  background:var(--bg-soft); border-radius:8px; padding:0 }
.sepet-panel-gorsel-bos{ object-fit:contain; padding:8px }
.sepet-panel-bilgi{ display:flex; flex-direction:column; min-width:0 }
.sepet-panel-kanal{ font-size:.74rem; font-weight:700; letter-spacing:.03em; text-transform:uppercase;
  color:var(--orange) }
.sepet-panel-ad{ font-size:.92rem; font-weight:600; color:var(--heading) }
.sepet-panel-fiyat{ font-weight:700; font-size:.95rem; white-space:nowrap }
.sepet-panel-toplam{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  border-top:2px solid var(--line); margin-top:6px; padding:12px 0 12px;
  font-weight:800; font-size:1.08rem; color:var(--heading) }
.sepet-panel-bos{ color:var(--muted); font-size:.92rem; background:var(--bg-soft); border-radius:12px;
  padding:14px; margin:0 }

/* ---------------------------------------------------------------- Butonlar */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; font-family:inherit;
  font-weight:700; font-size:1rem; padding:14px 26px; border-radius:100px; border:2px solid transparent;
  cursor:pointer; text-align:center; white-space:nowrap;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s, color .25s }
.btn-primary{ background:var(--primary); color:#fff; box-shadow:0 6px 16px rgba(30,58,138,.24) }
.btn-primary:hover{ background:var(--orange); color:#fff; transform:translateY(-2px); box-shadow:0 10px 22px rgba(240,126,38,.3) }
.btn-ghost{ background:#fff; color:var(--heading); border-color:var(--line) }
.btn-ghost:hover{ border-color:var(--orange); color:var(--orange); transform:translateY(-2px) }
.btn-lg{ padding:16px 32px; font-size:1.05rem }
.btn-blok{ width:100% }
.btn:disabled,.btn[aria-disabled="true"]{ background:#C9CFDC; color:#fff; box-shadow:none; cursor:not-allowed; transform:none }
@media (hover:none){
  .btn:hover{ transform:none; box-shadow:none }
  .paket-kart:hover,.urun-kart:hover{ transform:none; box-shadow:var(--shadow-sm) }
}

/* ---------------------------------------------------------------- Checkout */
.co-basi{ padding:34px 0 6px }
.co-grid{ display:grid; grid-template-columns:1fr; gap:18px; align-items:start; padding-bottom:44px }
.adimlar{ display:grid; gap:14px }
.adim{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); overflow:hidden }
.adim-basi{ display:flex; align-items:center; gap:12px; padding:16px 18px; border-bottom:1px solid var(--line) }
.adim-no{ width:28px; height:28px; border-radius:50%; background:var(--chip-bg); color:var(--chip-fg);
  display:grid; place-items:center; font-weight:800; font-size:.85rem; flex:0 0 auto }
.adim-basi h2{ font-size:1.05rem; margin:0 }
.adim-govde{ padding:16px 18px }

.alanlar{ display:grid; grid-template-columns:1fr; gap:14px }
.alan{ display:flex; flex-direction:column; gap:6px; min-width:0 }
.alan label{ font-size:.86rem; font-weight:600; color:var(--heading) }
.alan input,.alan textarea,.alan select{
  font-family:inherit; font-size:1rem; color:var(--ink); background:#fff;
  border:1.5px solid var(--line); border-radius:12px; padding:12px 14px; width:100%; }
.alan input:focus,.alan textarea:focus{ outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(30,58,138,.12) }
.alan textarea{ min-height:84px; resize:vertical }
.alan-genis{ grid-column:1 / -1 }
.hata-metin{ color:var(--hata); font-size:.82rem; font-weight:600 }
.hata-metin:empty{ display:none }
.ozet-hata{ background:#FDECEA; border:1px solid #F3C6C1; color:#8A2118; border-radius:14px; padding:12px 14px; margin-bottom:14px }
.ozet-hata ul{ margin:6px 0 0; padding-left:18px }

.ogrenci-blok{ border:1px solid var(--line); border-radius:14px; padding:14px; margin-bottom:14px; background:var(--bg-soft) }
.ogrenci-blok:last-child{ margin-bottom:0 }
.ogrenci-basi{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; flex-wrap:wrap }
.ogrenci-basi strong{ font-size:.98rem }

.onay{ display:flex; align-items:flex-start; gap:10px; margin-bottom:12px }
.onay input[type=checkbox]{ width:20px; height:20px; margin-top:2px; accent-color:var(--primary); flex:0 0 auto }
.onay label{ font-size:.92rem; color:var(--ink) }
.onay a{ font-weight:600; text-decoration:underline }
.odeme-guven{ display:flex; align-items:center; gap:10px; background:var(--bg-soft); border-radius:14px;
  padding:12px 14px; margin-bottom:14px; font-size:.88rem; color:var(--muted) }
.odeme-guven svg{ width:22px; height:22px; color:var(--ok); flex:0 0 auto }

/* Sipariş özeti */
.ozet{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm) }
.ozet > summary{ list-style:none; cursor:pointer; padding:16px 18px; display:flex; align-items:center; justify-content:space-between; gap:10px; font-weight:700 }
.ozet > summary::-webkit-details-marker{ display:none }
.ozet > summary::after{ content:"▾"; color:var(--muted) }
.ozet[open] > summary::after{ content:"▴" }
.ozet-govde{ padding:0 18px 18px }
.ozet-satir{ display:grid; grid-template-columns:72px 1fr auto; gap:12px; align-items:center; padding:10px 0; border-top:1px solid var(--line) }
.ozet-satir img{ display:block; width:72px; height:54px; aspect-ratio:4/3; object-fit:cover;
  background:var(--bg-soft); border-radius:8px; padding:0 }
.ozet-satir img.ozet-gorsel-bos{ object-fit:contain; padding:6px }
.ozet-ad{ font-weight:600; font-size:.92rem }
.ozet-kanal{ font-size:.8rem; color:var(--muted) }
.ozet-fiyat{ font-weight:700; white-space:nowrap }
.ozet-toplam{ display:flex; align-items:center; justify-content:space-between; border-top:2px solid var(--line);
  margin-top:8px; padding-top:12px; font-weight:800; font-size:1.1rem; color:var(--heading) }

/* ---------------------------------------------------------------- Bilgi kutuları / durum sayfaları */
.kutu{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); padding:26px 22px }
.kutu-orta{ max-width:640px; margin:44px auto; text-align:center }
.durum-ikon{ width:64px; height:64px; border-radius:50%; display:grid; place-items:center; margin:0 auto 14px;
  font-size:1.8rem; color:#fff; background:var(--primary) }
.durum-ok{ background:var(--ok) }
.durum-hata{ background:var(--hata) }
.uyari-serit{ margin:20px 0 0 }
.btn.bekliyor,.btn:disabled{ opacity:.65; cursor:progress }
.uyari{ background:var(--orange-soft); border:1px solid #F5D6B8; color:#7A3D06; border-radius:14px; padding:14px 16px; margin-bottom:16px }
.rozet{ display:inline-block; border-radius:100px; padding:5px 14px; font-size:.82rem; font-weight:700 }
.rozet-ok{ background:#E4F6EE; color:#12764F }
.rozet-hata{ background:#FDECEA; color:#8A2118 }
.rozet-bekliyor{ background:var(--chip-bg); color:var(--chip-fg) }

.tablo{ width:100%; border-collapse:collapse; margin-top:10px }
.tablo th,.tablo td{ text-align:left; padding:10px 0; border-bottom:1px solid var(--line); font-size:.92rem }
.tablo th{ color:var(--muted); font-weight:600 }
.tablo td:last-child,.tablo th:last-child{ text-align:right }

.metin-sayfa{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); padding:26px 22px; max-width:820px; margin:34px auto }
.metin-sayfa h2{ margin-top:22px }
.metin-sayfa ol,.metin-sayfa ul{ padding-left:20px }

/* ---------------------------------------------------------------- Alt bilgi */
.alt{ background:#080A10; color:rgba(255,255,255,.72); padding:44px 0 26px;
  padding-bottom:calc(96px + env(safe-area-inset-bottom));
  margin-top:auto; flex:0 0 auto }
.alt h4{ color:#fff; font-size:.95rem; font-weight:700; margin:0 0 12px }
.alt-ust{ display:grid; grid-template-columns:1fr; gap:28px; padding-bottom:26px }
.alt-marka p{ font-size:.92rem; margin:14px 0 16px; max-width:42ch }
.alt-logo{ height:34px; width:auto }
.alt-impark{ height:26px; width:auto; opacity:.8 }
.alt-sutun{ display:flex; flex-direction:column; gap:9px }
.alt-sutun a{ color:rgba(255,255,255,.72); font-size:.92rem }
.alt-sutun a:hover{ color:var(--orange-2) }
.alt-guven{ display:flex; align-items:flex-start; gap:12px; border-top:1px solid rgba(255,255,255,.1);
  padding:20px 0; }
.alt-guven p{ margin:0; font-size:.88rem; color:rgba(255,255,255,.62) }
.alt-guven strong{ color:#fff }
.guven-rozet{ flex:0 0 auto; width:34px; height:34px; border-radius:10px; background:rgba(255,255,255,.08);
  display:grid; place-items:center; color:var(--orange-2) }
.guven-rozet svg{ width:20px; height:20px }
.alt-yasal{ display:flex; gap:20px; flex-wrap:wrap; border-top:1px solid rgba(255,255,255,.1); padding-top:18px }
.alt-yasal a{ color:rgba(255,255,255,.8); font-size:.9rem; font-weight:600 }
.alt-yasal a:hover{ color:var(--orange-2) }
.alt-telif{ font-size:.82rem; color:rgba(255,255,255,.45); padding-top:16px }

/* ---------------------------------------------------------------- Teşekkür sayfası */
.tsk{ padding:28px 0 44px }
.tsk-kart{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md); padding:28px 20px 26px; max-width:680px; margin:0 auto; text-align:center }
.tsk-logolar{ display:flex; flex-direction:column; align-items:center; gap:10px; margin-bottom:18px }
.tsk-logo-sepetim{ height:56px; width:auto }
.tsk-logo-impark{ height:22px; width:auto; opacity:.85 }
.tsk-logo-ayrac{ width:44px; height:1px; background:var(--line) }
.tsk-onay{ width:62px; height:62px; border-radius:50%; margin:0 auto 14px; display:grid; place-items:center;
  background:#E4F6EE; color:#12764F }
.tsk-onay svg{ width:32px; height:32px }
.tsk-baslik{ font-size:clamp(1.35rem,5vw,1.9rem); margin:0 0 8px }
.tsk-lead{ margin:0 0 20px }
.tsk-kunye{ display:grid; gap:8px; text-align:left; margin-bottom:22px }
.tsk-kunye-kutu{ background:var(--bg-soft); border-radius:14px; padding:12px 14px; display:flex;
  flex-direction:column; gap:2px; min-width:0 }
.tsk-etiket{ font-size:.72rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--muted) }
.tsk-kunye-kutu strong{ font-size:1rem; color:var(--heading); word-break:break-word }
.tsk-siparis-no{ letter-spacing:.02em }
.tsk-alt-baslik{ font-size:1.02rem; text-align:left; margin:0 0 4px }
.tsk-liste{ list-style:none; margin:0; padding:0; text-align:left }
.tsk-satir{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
  padding:12px 0; border-bottom:1px solid var(--line) }
.tsk-satir-gorsel{ display:block; flex:0 0 auto; width:72px; height:54px; aspect-ratio:4/3;
  object-fit:cover; border-radius:8px; padding:0; background:var(--bg-soft) }
.tsk-satir-bilgi{ display:flex; flex-direction:column; min-width:0; flex:1 1 auto }
.tsk-satir-kanal{ font-size:.74rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--orange) }
.tsk-satir-ad{ font-weight:700; color:var(--heading) }
.tsk-satir-ogrenci{ font-size:.86rem; color:var(--muted) }
.tsk-satir-fiyat{ font-weight:700; white-space:nowrap }
.tsk-toplam{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 0 4px; font-weight:800; font-size:1.15rem; color:var(--heading) }
.tsk-not{ text-align:left; font-size:.9rem; color:var(--muted); background:var(--bg-soft);
  border-radius:14px; padding:13px 15px; margin:12px 0 0 }
.tsk-not strong{ color:var(--heading); word-break:break-word }
.tsk-not-ok{ background:#E4F6EE; color:#12764F }
.tsk-not-ok strong{ color:#0E5C3D }
.tsk-iletisim{ text-align:left; border-top:1px solid var(--line); margin-top:22px; padding-top:16px }
.tsk-iletisim-satir{ display:flex; flex-wrap:wrap; gap:8px 18px; margin:6px 0 6px; font-weight:700 }
.tsk-iletisim .mini{ margin:0 }
.tsk-geri{ margin-top:20px }
.tsk-hata-dugmeler{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin:18px 0 10px }

@media (min-width:700px){
  .tsk{ padding:44px 0 64px }
  .tsk-kart{ padding:38px 34px 32px }
  .tsk-logo-sepetim{ height:72px }
  .tsk-logo-impark{ height:26px }
  .tsk-kunye{ grid-template-columns:repeat(3,1fr) }
}

/* ---------------------------------------------------------------- Kırılımlar */
@media (min-width:600px){
  .wrap{ padding:0 24px }
  .kart-izgara{ grid-template-columns:repeat(2,1fr) }
  .urun-izgara{ grid-template-columns:repeat(2,1fr) }
  .neden-izgara{ grid-template-columns:repeat(2,1fr) }
  .alanlar{ grid-template-columns:1fr 1fr }
  .alt-ust{ grid-template-columns:repeat(2,1fr); gap:30px }
  .sepet-rozet .rozet-yazi{ display:inline }
}

@media (min-width:900px){
  :root{ --ust-h:96px }
  .sec{ padding:76px 0 }
  .hero{ padding:64px 0 76px }
  .hero-ic{ grid-template-columns:1.05fr .95fr; gap:48px }
  .hero-gorsel{ min-height:380px }
  .ust-ic{ flex-wrap:nowrap; padding-top:12px; padding-bottom:12px }
  .marka-sepetim{ height:40px }
  .menu-dugme{ display:none }
  .ust-nav{ order:2; display:flex; flex-direction:row; align-items:center; gap:26px; width:auto;
    border:0; padding:0; margin-right:26px }
  .ust-nav .nlink{ padding:0 }
  .ust-sag{ order:3 }
  .marka-impark img{ height:20px }
  .marka-impark-yazi{ display:inline }
  .urun-izgara{ grid-template-columns:repeat(3,1fr) }
  .neden-izgara{ grid-template-columns:repeat(4,1fr) }
  .kart-izgara{ grid-template-columns:repeat(3,1fr) }
  .co-grid{ grid-template-columns:1.25fr .75fr; gap:24px }
  .co-ozet{ position:sticky; top:96px }
  .ozet > summary{ cursor:default; pointer-events:none }
  .ozet > summary::after{ content:"" }
  .alt{ padding-bottom:26px }
  .alt-ust{ grid-template-columns:1.4fr 1fr 1fr 1fr; gap:34px }
  .sepet-kart{ padding:28px }
}

@media (max-width:560px){
  .sepet-satir{ grid-template-columns:80px 1fr auto auto }
  .sepet-satir-gorsel,.sepet-panel-gorsel{ width:80px; height:60px }
  .sepet-panel-satir{ grid-template-columns:auto 80px 1fr auto }
}

@media (max-width:420px){
  .paket-alt{ gap:10px }
  .paket-fiyat{ font-size:1.12rem }
  .btn-ekle{ padding:11px 16px; font-size:.88rem }
  .hero-kart img{ max-height:24px; max-width:96px }
  .hero-sepet img{ height:36px }
}

@media (max-width:380px){
  .wrap{ padding:0 14px }
  .marka-sepetim{ height:28px }
  .marka-impark{ display:none }
  .sepet-rozet{ padding:7px 11px }
  .btn{ padding:13px 20px; font-size:.95rem }
  .secim-toplam{ font-size:1.05rem }
  .paket-alt{ flex-direction:column; align-items:stretch }
  .btn-ekle{ width:100% }
  .sepet-satir{ grid-template-columns:80px 1fr auto; row-gap:4px }
  .sepet-satir-gorsel{ grid-row:1 / span 2 }
  .sepet-satir-fiyat{ grid-column:2 }
  .sepet-kaldir{ grid-column:3; grid-row:1 / span 2; align-self:center }
  .secim-ic{ gap:8px }
  .sepet-cubuk .btn-primary{ padding:12px 16px; font-size:.92rem }
  .sepet-ok{ width:34px; height:34px }
  .sepet-panel-satir{ grid-template-columns:auto 80px 1fr auto; gap:8px }
  .sepet-panel-ad{ font-size:.88rem }
  .sepet-panel-fiyat{ font-size:.9rem }
}

/* ---------------------------------------------------------------- Hareket tercihi */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important }
  .hero-kart{ animation:none }
}

/* ---------------------------------------------------------------- Modal */
dialog{ border:none; border-radius:var(--radius); padding:22px; max-width:min(680px,92vw);
  max-height:82vh; overflow:auto; box-shadow:var(--shadow-lg); color:var(--ink) }
dialog::backdrop{ background:rgba(11,18,32,.55) }
dialog h2{ margin-top:0 }
dialog h3{ margin-top:18px }