/* Yasar Kirtasiye anasayfa stilleri (kayakirtasiye.com.tr yapisinin yeniden yorumu) */
:root{
  --kirmizi:#E32121; --kirmizi-h:#C81B1B; --kirmizi-metin:#CF1C1C; --kirmizi-acik:#FDEEEE;
  --metin:#18181B; --metin-2:#62626C; --metin-3:#9A9AA3;
  --zemin:#FFFFFF; --yuzey:#F5F5F6; --yuzey-2:#EEEEF0; --cizgi:#EAEAED;
  --golge:0 1px 2px rgba(24,24,27,.04),0 14px 32px -14px rgba(24,24,27,.16);
  --golge-k:0 1px 2px rgba(24,24,27,.05),0 4px 12px -4px rgba(24,24,27,.08);
  --rl:16px; --r:12px; --kap:1360px;
  color-scheme:light;
}
html{scroll-padding-top:72px}
body{background:var(--zemin);color:var(--metin);font-family:"Plus Jakarta Sans",ui-sans-serif,system-ui,sans-serif;font-size:.9375rem;font-weight:500;word-spacing:.06em}
h1,h2,h3{font-weight:800;letter-spacing:-.02em;word-spacing:.04em;color:var(--metin)}
.kap{width:100%;max-width:var(--kap);margin-inline:auto;padding-inline:clamp(16px,3vw,32px)}
:focus-visible{outline:2px solid var(--kirmizi);outline-offset:2px;border-radius:6px}
.atla{position:absolute;left:16px;top:-60px;z-index:100;background:var(--kirmizi);color:#fff;padding:10px 16px;border-radius:var(--r)}
.atla:focus{top:12px}
.mobil-yalniz,.mobil-yalniz-blok{display:none!important}

/* Dugmeler */
.dugme{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 20px;border-radius:var(--r);font-weight:700;white-space:nowrap;transition:background-color .2s,color .2s,border-color .2s,transform .15s}
.dugme:active{transform:scale(.98)}
.dugme .ico{width:18px;height:18px}
.dugme-kirmizi{background:var(--kirmizi);color:#fff}
.dugme-kirmizi:hover{background:var(--kirmizi-h)}
.dugme-beyaz{background:#fff;color:var(--kirmizi-metin)}
.dugme-beyaz:hover{background:#FFF5F5}
.dugme-cizgi{border:1.5px solid var(--cizgi);color:var(--metin);background:#fff}
.dugme-cizgi:hover{border-color:var(--metin)}
.dugme-buyuk{height:52px;padding:0 28px;font-size:1rem}
.dugme-tam{width:100%}
.ikon-dugme{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:var(--r);color:var(--metin)}
.ikon-dugme:hover{background:var(--yuzey)}
.ikon-dugme .ico{width:24px;height:24px}

/* Ust bar: kayakirtasiye.com.tr duzeni. Kirmizi zemin + seyrek nokta deseni,
   esit aralikli 5 oge: beyaz ikon, beyaz kisa metin, beyaz etiket icinde kirmizi kalin yazi */
.ustbar{background-color:var(--kirmizi);
  background-image:radial-gradient(rgba(255,255,255,.22) 1.4px,transparent 1.8px),radial-gradient(rgba(255,255,255,.12) 1px,transparent 1.4px);
  background-size:220px 44px,140px 44px;background-position:20px 8px,90px 30px;color:#fff;font-size:.875rem}
.ustbar-kayan{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.ustbar-ray{display:flex;width:max-content}
.ustbar-ic{display:flex;align-items:center;gap:96px;padding-right:96px;min-height:44px}
@media (prefers-reduced-motion:no-preference){
  .ustbar-ray{animation:ustbar-kay 45s linear infinite}
  .ustbar-kayan:hover .ustbar-ray,.ustbar-kayan:focus-within .ustbar-ray{animation-play-state:paused}
}
@keyframes ustbar-kay{to{transform:translateX(var(--kay,-50%))}}
.ustbar-ic li{display:flex;align-items:center;gap:8px;white-space:nowrap;font-weight:600}
.ustbar-ic .ico{width:20px;height:20px;flex:none}
.ustbar-ic strong{display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:4px;background:#fff;color:var(--kirmizi-metin);font-size:.78rem;font-weight:800;letter-spacing:.04em;margin-left:4px}
.ustbar-ic a strong{transition:background-color .2s}
.ustbar-ic a:hover strong{background:#FFF0F0}

/* Header */
.header{background:#fff;position:sticky;top:0;z-index:30;box-shadow:0 1px 0 var(--cizgi)}
.header-ic{display:flex;align-items:center;gap:clamp(16px,2.5vw,36px);height:88px}
.logo{flex:none}
.logo img{height:62px;width:auto}
.arama{flex:1;max-width:600px;display:flex;align-items:center;height:52px;padding:4px 4px 4px 18px;background:var(--yuzey);border:1.5px solid transparent;border-radius:var(--r);transition:border-color .2s,background-color .2s}
.arama:focus-within{background:#fff;border-color:var(--kirmizi)}
.arama>.ico{color:var(--metin-3);width:20px;height:20px}
.arama input{flex:1;min-width:0;height:100%;border:0;background:none;padding:0 12px;outline:none;font-weight:500}
.arama input::placeholder{color:var(--metin-3)}
.arama .dugme{height:100%;padding:0 22px;border-radius:9px}
.hat{display:flex;align-items:center;gap:10px;flex:none}
.hat-ikon{width:44px;height:44px;border-radius:50%;background:var(--kirmizi-acik);color:var(--kirmizi);display:grid;place-items:center}
.hat-ikon .ico{width:22px;height:22px}
.hat-yazi{display:grid;line-height:1.25}
.hat-yazi small{font-size:.75rem;color:var(--metin-2);font-weight:600}
.hat-yazi strong{font-size:.95rem;font-weight:800;font-variant-numeric:tabular-nums}
.hat:hover strong{color:var(--kirmizi-metin)}
.araclar{display:flex;align-items:center;gap:4px;margin-left:auto}
.arac{display:inline-flex;align-items:center;gap:8px;height:48px;padding:0 12px;border-radius:var(--r);font-weight:700;color:var(--metin)}
.arac:hover{background:var(--yuzey)}
.arac .ico{width:24px;height:24px}
.arac-sepet{background:var(--metin);color:#fff;padding:0 16px 0 14px;margin-left:6px}
.arac-sepet:hover{background:#2E2E33}
.arac-yazi{font-variant-numeric:tabular-nums;white-space:nowrap}
.ikon-rozet{position:relative;display:inline-flex}
.rozet{position:absolute;top:-7px;right:-9px;min-width:19px;height:19px;padding:0 5px;border-radius:999px;background:var(--kirmizi);color:#fff;font-size:.68rem;font-weight:800;display:grid;place-items:center;line-height:1;box-shadow:0 0 0 2px #fff}
.arac-sepet .rozet{box-shadow:0 0 0 2px var(--metin)}
.is-zipla{animation:zipla .45s cubic-bezier(.16,1,.3,1)}
@keyframes zipla{40%{transform:scale(1.35)}}

/* Kategori cubugu + mega menu */
.kat-nav{border-top:1px solid var(--cizgi)}
.kat-nav-ic{display:flex;align-items:center;gap:8px;height:54px}
.mega-kap{position:static;align-self:stretch;display:flex;align-items:center}
.tum-kat{display:inline-flex;align-items:center;gap:10px;height:40px;padding:0 16px;border-radius:var(--r);background:var(--kirmizi);color:#fff;font-weight:700;white-space:nowrap}
.tum-kat:hover{background:var(--kirmizi-h)}
.tum-kat .ico-k{width:14px;height:14px;transition:transform .2s}
.is-mega-acik .tum-kat .ico-k{transform:rotate(180deg)}
.kat-linkler{display:flex;flex-wrap:wrap;height:54px;overflow:hidden;flex:1;margin-left:8px}
.kat-linkler a{position:relative;display:flex;align-items:center;height:54px;padding:0 12px;font-weight:600;color:var(--metin-2);white-space:nowrap;transition:color .2s}
.kat-linkler a::after{content:"";position:absolute;left:12px;right:12px;bottom:0;height:2px;border-radius:2px;background:var(--kirmizi);transform:scaleX(0);transition:transform .25s cubic-bezier(.16,1,.3,1)}
.kat-linkler a:hover{color:var(--metin)}
.kat-linkler a:hover::after{transform:scaleX(1)}
.kat-firsat{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 14px;border-radius:999px;background:var(--kirmizi-acik);color:var(--kirmizi-metin);font-weight:800;white-space:nowrap}
.kat-firsat:hover{background:#FADADA}
.mega{position:absolute;left:0;right:0;top:100%;background:#fff;border-top:1px solid var(--cizgi);box-shadow:0 24px 40px -24px rgba(24,24,27,.25);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .2s,transform .2s,visibility .2s}
.is-mega-acik .mega{opacity:1;visibility:visible;transform:none}
.mega::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:14px}
.mega-ic{--pad:clamp(16px,3vw,32px);--sol:300px;position:relative;max-width:var(--kap);margin:0 auto;padding:20px var(--pad) 28px}
.mega-sol{width:var(--sol);min-height:340px;padding-right:12px;border-right:1px solid var(--cizgi)}
.mega-ana{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:10px;font-weight:600;color:var(--metin)}
.mega-ana .ico{width:20px;height:20px;color:var(--metin-3)}
.mega-ana .ico:last-child{width:14px;height:14px;margin-left:auto}
.mega-ana span{flex:1}
.mega-oge.is-secili>.mega-ana{background:var(--kirmizi-acik);color:var(--kirmizi-metin)}
.mega-oge.is-secili>.mega-ana .ico{color:var(--kirmizi)}
.mega-alt{position:absolute;left:calc(var(--pad) + var(--sol) + 32px);right:var(--pad);top:28px;display:none;grid-template-columns:1fr 300px;gap:32px}
.mega-oge.is-secili .mega-alt{display:grid}
.mega-alt-baslik{font-size:1.25rem;font-weight:800;margin-bottom:14px;letter-spacing:-.02em}
.mega-alt ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 24px}
.mega-alt ul a{display:block;padding:7px 0;color:var(--metin-2);font-weight:500}
.mega-alt ul a:hover{color:var(--kirmizi-metin)}
.mega-tumu{display:inline-flex;align-items:center;gap:6px;margin-top:18px;font-weight:700;color:var(--kirmizi-metin)}
.mega-tumu .ico{width:16px;height:16px}
.mega-alt img{width:300px;height:300px;object-fit:cover;border-radius:var(--rl)}

/* Tam genislik slider: yalnizca gorsel */
.slider{position:relative;aspect-ratio:8/3;max-height:640px;width:100%;overflow:hidden;background:var(--yuzey);cursor:grab;touch-action:pan-y;-webkit-user-select:none;user-select:none}
.slider.is-surukleniyor{cursor:grabbing}
.slider a{cursor:inherit;-webkit-user-drag:none}
.slider-serit{display:flex;height:100%;will-change:transform;touch-action:pan-y}
.slayt{position:relative;flex:0 0 100%;height:100%;overflow:hidden}
.slider:focus-visible{outline:3px solid var(--kirmizi);outline-offset:-3px;border-radius:0}
.slayt a,.slayt img{display:block;width:100%;height:100%}
.slayt img{object-fit:cover}
/* Oklar: buzlu cam zemin, beyaz ikon. Uzerine gelince kirmizi zemin, beyaz ikon */
.slider-ok{position:absolute;z-index:3;top:50%;width:52px;height:52px;margin-top:-26px;border-radius:50%;background:rgba(17,17,19,.3);border:1px solid rgba(255,255,255,.5);color:#fff;display:grid;place-items:center;backdrop-filter:blur(10px) saturate(140%);-webkit-backdrop-filter:blur(10px) saturate(140%);box-shadow:0 6px 18px -6px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.35);cursor:pointer;transition:background-color .2s,border-color .2s,transform .2s}
.slider-ok:hover,.slider-ok:focus-visible{background:var(--kirmizi);border-color:var(--kirmizi)}
.slider-ok .ico{filter:drop-shadow(0 1px 2px rgba(0,0,0,.35))}
.slider-ok:hover .ico{filter:none}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.slider-ok{background:rgba(17,17,19,.45)}}
.slider-ok:active{transform:scale(.95)}
.slider-ok .ico{width:22px;height:22px}
.slider-ok-sol{left:clamp(12px,2.5vw,32px)}
.slider-ok-sag{right:clamp(12px,2.5vw,32px)}
.slider-noktalar{position:absolute;z-index:3;left:50%;bottom:20px;transform:translateX(-50%);display:flex;gap:8px;padding:8px 12px;border-radius:999px;background:rgba(17,17,19,.28);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.slider-noktalar button{position:relative;width:10px;height:10px;border-radius:999px;background:rgba(255,255,255,.55);transition:width .3s,background-color .3s}
.slider-noktalar button::after{content:"";position:absolute;inset:-8px -4px}
.slider-noktalar button[aria-current="true"]{width:28px;background:#fff}

/* Guven bandi */
.guven{margin-top:24px}
.guven-ic{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:#fff;border-radius:var(--rl);border:1px solid var(--cizgi);overflow:hidden}
.guven-ic li{display:flex;align-items:center;gap:14px;padding:20px 24px;transition:background-color .2s}
/* Header'daki arac (Giris yap) hover'i ile ayni: acik gri zemin */
.guven-ic li:hover{background:var(--yuzey)}
.guven-ic li+li{border-left:1px solid var(--cizgi)}
.guven-ikon{flex:none;width:48px;height:48px;border-radius:var(--r);background:var(--kirmizi-acik);color:var(--kirmizi);display:grid;place-items:center;transition:background-color .2s,color .2s}
.guven-ic li:hover .guven-ikon{background:var(--kirmizi);color:#fff}
.guven-ikon .ico{width:24px;height:24px}
.guven-ic div{display:grid;gap:2px;line-height:1.35}
.guven-ic strong{font-weight:800}
.guven-ic span:not(.guven-ikon){font-size:.85rem;color:var(--metin-2)}

/* Bolum ortak */
.bolum{padding-top:clamp(48px,6vw,72px)}
.bolum-bas{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:24px}
.bolum-bas h2{font-size:clamp(1.5rem,2.4vw,2rem)}
.tumu{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:var(--metin);white-space:nowrap}
.tumu .ico{width:16px;height:16px;transition:transform .2s}
.tumu:hover{color:var(--kirmizi-metin)}
.tumu:hover .ico{transform:translateX(3px)}

/* Kategori kartlari: dikdortgen, yalnizca gorsel */
.kat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.kat-kart{position:relative;display:block;aspect-ratio:16/10;border-radius:var(--rl);overflow:hidden;background:var(--yuzey);isolation:isolate;transition:box-shadow .3s,transform .3s cubic-bezier(.16,1,.3,1)}
.kat-kart img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.16,1,.3,1),filter .4s ease}
/* Uzerine gelince: hafif parlaklik + kartin uzerinden gecen capraz isik yansimasi */
.kat-kart::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;
  background:linear-gradient(180deg,rgba(255,255,255,.3),rgba(255,255,255,0) 50%);opacity:0;transition:opacity .4s ease}
.kat-kart::after{content:"";position:absolute;top:-20%;bottom:-20%;left:-70%;width:55%;z-index:2;pointer-events:none;
  background:linear-gradient(105deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.25) 30%,rgba(255,255,255,.85) 50%,rgba(255,255,255,.25) 70%,rgba(255,255,255,0) 100%);
  transform:translateX(0) skewX(-18deg);opacity:0}
.kat-kart:hover{box-shadow:var(--golge);transform:translateY(-3px)}
.kat-kart:hover img{transform:scale(1.05);filter:brightness(1.08) saturate(1.08)}
.kat-kart:hover::before{opacity:1}
@media (prefers-reduced-motion:no-preference){
  .kat-kart:hover::after{animation:kat-isik .55s cubic-bezier(.45,.05,.35,1)}
}
@keyframes kat-isik{0%{opacity:0;transform:translateX(0) skewX(-18deg)}12%{opacity:1}75%{opacity:1}100%{opacity:0;transform:translateX(360%) skewX(-18deg)}}

/* Kampanyalar: solda 1 buyuk, sagda 2 kucuk */
.kampanya-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);grid-template-rows:repeat(2,minmax(0,1fr));gap:20px;height:clamp(360px,36vw,500px)}
.kampanya{display:block;border-radius:var(--rl);overflow:hidden;background:var(--yuzey)}
.kampanya-buyuk{grid-row:1/3}
.kampanya img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.16,1,.3,1)}
.kampanya:hover img{transform:scale(1.04)}

/* Sekmeler */
.sekmeler{display:flex;gap:6px;padding:5px;border-radius:999px;background:var(--yuzey)}
.sekmeler [role="tab"]{height:38px;padding:0 18px;border-radius:999px;font-weight:700;color:var(--metin-2);white-space:nowrap;transition:background-color .2s,color .2s}
.sekmeler [role="tab"]:hover{color:var(--metin)}
.sekmeler [role="tab"][aria-selected="true"]{background:#fff;color:var(--kirmizi-metin);box-shadow:var(--golge-k)}
/* Kayan gosterge (JS ekler): secili sekmenin beyaz zemini tiklanan sekmeye kayar */
.sekmeler.has-gosterge{position:relative;isolation:isolate}
.sekmeler.has-gosterge [role="tab"]{position:relative;z-index:1;background:transparent!important;box-shadow:none!important;transition:color .3s}
.sekme-gosterge{position:absolute;top:5px;bottom:5px;left:0;z-index:0;border-radius:999px;background:#fff;box-shadow:var(--golge-k);pointer-events:none;transition:transform .42s cubic-bezier(.16,1,.3,1),width .42s cubic-bezier(.16,1,.3,1)}

/* Urun kartlari */
.urun-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.kart{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--cizgi);border-radius:var(--rl);padding:12px;transition:box-shadow .25s,border-color .25s}
.kart:hover{border-color:transparent;box-shadow:var(--golge)}
.kart-ust{position:relative}
.kart-gorsel{display:block;aspect-ratio:1;border-radius:var(--r);overflow:hidden;background:var(--yuzey)}
.kart-gorsel img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.kart:hover .kart-gorsel img{transform:scale(1.04)}
.kart-rozet{position:absolute;top:10px;left:10px;display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:999px;background:var(--kirmizi);color:#fff;font-size:.75rem;font-weight:800}
.kart-rozet-gri{background:rgba(24,24,27,.78)}
.kart-fav{position:absolute;top:10px;right:10px;width:36px;height:36px;border-radius:50%;background:#fff;display:grid;place-items:center;color:var(--metin-2);box-shadow:var(--golge-k);transition:color .2s,transform .2s}
.kart-fav:hover{color:var(--kirmizi);transform:scale(1.06)}
.kart-fav[aria-pressed="true"]{color:var(--kirmizi)}
/* Kart alti sepet dugmesi: yeri ayrilmis, ilk halde gizli; urunun uzerine gelince belirir.
   Tiklaninca ayni dugme "- adet +" kontrolune donusur. Urun sepetteyse kontrol hep gorunur. */
/* Fiyat alani: masaustunde uzerine gelince fiyat solar, yerine sepet dugmesi gelir (kart buyumez).
   Dokunmatikte dugme fiyatin altinda, hep gorunur. */
.kart-fiyat-alan{position:relative;margin-top:auto;min-height:54px;display:flex;flex-direction:column;justify-content:flex-end}
.kart-fiyat{transition:opacity .2s ease,transform .3s cubic-bezier(.16,1,.3,1)}
.sd{position:absolute;left:0;right:0;bottom:0;height:48px;opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity .22s ease,transform .3s cubic-bezier(.16,1,.3,1)}
.sd>*{height:100%}
@media (hover:hover){
  .kart:hover .kart-fiyat,.kart:has(:focus-visible) .kart-fiyat{opacity:0;transform:translateY(-8px)}
  .kart:hover .sd,.kart:has(:focus-visible) .sd{opacity:1;transform:none;pointer-events:auto}
}
@media (hover:none){
  .kart-fiyat-alan{min-height:0}
  .sd{position:relative;left:auto;right:auto;bottom:auto;height:46px;margin-top:12px;opacity:1;transform:none;pointer-events:auto}
}
/* Sepetteki urun etiketi: fiyatin sagi, kart yuksekligini degistirmez */
.sd-rozet{position:absolute;right:14px;bottom:18px;display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 10px;border-radius:999px;background:var(--kirmizi-acik);color:var(--kirmizi-metin);font-size:.75rem;font-weight:800;font-variant-numeric:tabular-nums;transition:opacity .2s}
.sd-rozet .ico{width:14px;height:14px}
.kart:hover .sd-rozet,.kart:has(:focus-visible) .sd-rozet{opacity:0}
@media (hover:none){.sd-rozet{display:none}}
.sd-ekle,.sd-adet{width:100%;border-radius:var(--r);background:var(--kirmizi);color:#fff}
.sd-ekle{display:flex;align-items:center;justify-content:center;gap:8px;font-weight:700;font-size:.92rem;transition:background-color .2s}
.sd-ekle:hover{background:var(--kirmizi-h)}
.sd-ekle .ico{width:18px;height:18px}
.sd-adet{display:none;align-items:center;justify-content:space-between}
.sd.is-sepette .sd-ekle{display:none}
.sd.is-sepette .sd-adet{display:flex;animation:sd-donus .32s cubic-bezier(.16,1,.3,1)}
.sd-adet button{width:46px;height:100%;display:grid;place-items:center;color:#fff;border-radius:var(--r);transition:background-color .2s}
.sd-adet button:hover{background:rgba(0,0,0,.14)}
.sd-adet button .ico{width:18px;height:18px}
.sd-sayi{font-weight:800;font-size:.95rem;font-variant-numeric:tabular-nums;white-space:nowrap}
.sd-haber{background:var(--metin)}
.sd-haber:hover{background:#18181B}
.sd-haber:disabled{cursor:default;opacity:.9}
@keyframes sd-donus{from{transform:scaleX(.9);opacity:.5}}
.kart-govde{display:flex;flex-direction:column;flex:1;padding:12px 6px 4px}
.kart-marka{font-size:.75rem;font-weight:700;color:var(--metin-3);letter-spacing:.01em}
.kart-ad{margin-top:3px;font-size:1.02rem;font-weight:700;letter-spacing:-.01em;line-height:1.35;min-height:2.7em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.kart-ad a:hover{color:var(--kirmizi-metin)}
.kart-koli{display:flex;align-items:center;gap:6px;margin-top:8px;font-size:.8rem;color:var(--metin-2);font-weight:600}
.kart-koli .ico{width:15px;height:15px;color:var(--metin-3)}
.kart-fiyat{display:flex;flex-direction:column;justify-content:flex-end;margin-top:8px}
.kart-fiyat s{font-size:.8rem;color:var(--metin-3);font-weight:600}
.kart-fiyat strong{font-size:1.45rem;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.kart-fiyat-indirim strong{color:var(--kirmizi-metin)}

/* Promo kartlari */
.promo{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding-top:clamp(48px,6vw,72px)}
.promo-kart{position:relative;display:flex;align-items:center;gap:24px;min-height:260px;padding:36px 0 36px 40px;border-radius:var(--rl);overflow:hidden}
.promo-metin{position:relative;z-index:1;flex:1;max-width:330px}
.promo-kart h2{font-size:clamp(1.5rem,2.2vw,1.9rem);line-height:1.12}
.promo-kart p{margin:10px 0 22px;line-height:1.55}
.promo-kirmizi{background:var(--kirmizi);color:#fff}
.promo-kirmizi h2{color:#fff}
.promo-kirmizi p{color:rgba(255,255,255,.88)}
.promo-gri{background:var(--yuzey)}
.promo-gri p{color:var(--metin-2)}
.promo-gorsel{position:relative;flex:none;width:250px;height:220px;margin-right:-10px}
.promo-gorsel img{position:absolute;width:150px;height:150px;object-fit:cover;border-radius:var(--rl);box-shadow:0 18px 30px -12px rgba(0,0,0,.35);transition:transform .4s cubic-bezier(.16,1,.3,1)}
.promo-gorsel img:first-child{top:0;left:10px;transform:rotate(-6deg)}
.promo-gorsel img:last-child{bottom:0;right:30px;transform:rotate(5deg)}
.promo-kart:hover .promo-gorsel img:first-child{transform:rotate(-2deg) translateY(-4px)}
.promo-kart:hover .promo-gorsel img:last-child{transform:rotate(2deg) translateY(-4px)}

/* Siparis adimlari */
.adimlar{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.4fr);gap:40px;align-items:center;padding:40px;border-radius:var(--rl);background:var(--yuzey)}
.adimlar h2{font-size:clamp(1.5rem,2.4vw,2rem);max-width:12ch}
.adim-liste{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.adim-liste li{display:flex;gap:14px;padding:22px;border-radius:var(--r);background:#fff;transition:background-color .25s,transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s}
.adim-no{flex:none;width:36px;height:36px;border-radius:50%;background:var(--kirmizi);color:#fff;font-weight:800;display:grid;place-items:center;transition:background-color .25s,color .25s}
.adim-liste h3{font-size:1rem;letter-spacing:-.01em;transition:color .25s}
.adim-liste p{margin-top:4px;font-size:.875rem;color:var(--metin-2);line-height:1.55;transition:color .25s}
.adim-liste a{color:var(--kirmizi-metin);font-weight:700;white-space:nowrap;transition:color .25s}
/* Uzerine gelince ters renkler: kirmizi kart, beyaz daire icinde kirmizi numara, beyaz yazilar */
.adim-liste li:hover{background:var(--kirmizi);transform:translateY(-3px);box-shadow:0 14px 28px -14px rgba(227,33,33,.55)}
.adim-liste li:hover .adim-no{background:#fff;color:var(--kirmizi)}
.adim-liste li:hover h3,.adim-liste li:hover a{color:#fff}
.adim-liste li:hover p{color:rgba(255,255,255,.9)}
.adim-liste li:hover a{text-decoration:underline}

/* Markalar */
.marka-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.marka-kutu{display:grid;place-items:center;height:96px;padding:18px 24px;border-radius:var(--rl);border:1px solid var(--cizgi);background:#fff;transition:box-shadow .25s,border-color .25s}
.marka-kutu img{max-height:38px;max-width:min(130px,100%);width:auto;object-fit:contain;filter:grayscale(1);opacity:.65;transition:filter .25s,opacity .25s}
.marka-kutu:hover{border-color:transparent;box-shadow:var(--golge)}
.marka-kutu:hover img{filter:none;opacity:1}

/* Blog */
.blog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.blog-gorsel{display:block;aspect-ratio:16/10;border-radius:var(--rl);overflow:hidden;background:var(--yuzey)}
.blog-gorsel img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.blog-kart:hover .blog-gorsel img{transform:scale(1.04)}
.blog-kart time{display:block;margin-top:14px;font-size:.8rem;font-weight:600;color:var(--metin-3)}
.blog-kart h3{margin-top:4px;font-size:1.1rem;line-height:1.35;letter-spacing:-.015em}
.blog-kart h3 a:hover{color:var(--kirmizi-metin)}

/* Footer */
.footer{margin-top:clamp(56px,7vw,96px);background:var(--yuzey)}
.footer-ic{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px;padding-block:56px 48px}
.footer-firma img{height:71px;width:auto}
.footer-firma>p{margin-top:14px;color:var(--metin-2);max-width:34ch;line-height:1.55}
.footer address{font-style:normal;display:grid;gap:12px;margin-top:20px}
.footer address>*{display:flex;gap:10px;align-items:flex-start;font-weight:600}
.footer address .ico{color:var(--kirmizi);margin-top:1px}
.footer h2{font-size:1rem;letter-spacing:-.01em;margin-bottom:16px}
.footer-kolon li+li{margin-top:10px}
.footer-kolon a{color:var(--metin-2)}
.footer a:hover{color:var(--kirmizi-metin)}
.footer-alt{border-top:1px solid var(--cizgi)}
.footer-alt-ic{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:18px;font-size:.85rem;color:var(--metin-2)}
.odeme{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.odeme img,.ssl{height:36px;padding:6px 10px;border-radius:8px;background:#fff;border:1px solid var(--cizgi);object-fit:contain}
.odeme img{width:64px}
.ssl{display:inline-flex;align-items:center;gap:6px;font-size:.62rem;font-weight:800;line-height:1.05;color:var(--metin);text-transform:uppercase;letter-spacing:.02em}
.ssl .ico{width:18px;height:18px;color:#1E8A4C}

/* Paneller */
.perde{position:fixed;inset:0;z-index:40;background:rgba(17,17,19,.45);opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s}
.panel-acik .perde{opacity:1;visibility:visible}
.panel-acik{overflow:hidden}
.panel{position:fixed;top:0;bottom:0;z-index:50;width:min(420px,92vw);background:#fff;display:flex;flex-direction:column;transition:transform .3s cubic-bezier(.16,1,.3,1)}
.panel-sol{left:0;transform:translateX(-100%);border-radius:0 var(--rl) var(--rl) 0}
.panel-sag{right:0;transform:translateX(100%);border-radius:var(--rl) 0 0 var(--rl)}
.panel.is-acik{transform:none}
.panel-bas{display:flex;align-items:center;justify-content:space-between;padding:14px 14px 14px 24px;border-bottom:1px solid var(--cizgi)}
.panel-bas h2{font-size:1.25rem}
.panel-alt{padding:18px 24px;border-top:1px solid var(--cizgi);margin-top:auto}
.mobil-hesap{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mobil-kat{overflow-y:auto;padding:8px 12px}
.mk summary{display:flex;align-items:center;gap:12px;padding:12px;border-radius:10px;font-weight:700;cursor:pointer;list-style:none}
.mk summary::-webkit-details-marker{display:none}
.mk summary span{flex:1}
.mk summary .ico{width:20px;height:20px;color:var(--metin-3)}
.mk summary .ico:last-child{width:16px;height:16px;transition:transform .2s}
.mk[open] summary{background:var(--kirmizi-acik);color:var(--kirmizi-metin)}
.mk[open] summary .ico{color:var(--kirmizi)}
.mk[open] summary .ico:last-child{transform:rotate(180deg)}
.mk ul{padding:6px 0 10px 44px}
.mk ul a{display:block;padding:8px 0;color:var(--metin-2);font-weight:600}
.ms-liste{flex:1;overflow-y:auto;padding:8px 24px}
.ms-urun{display:flex;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid var(--cizgi)}
.ms-urun img{width:60px;height:60px;border-radius:var(--r);object-fit:cover;background:var(--yuzey)}
.ms-bilgi{display:grid;gap:2px;flex:1;min-width:0}
.ms-ad{font-weight:700;font-size:.92rem}
.ms-detay{font-size:.8rem;color:var(--metin-2);font-variant-numeric:tabular-nums}
.ms-sil{width:36px;height:36px;display:grid;place-items:center;color:var(--metin-3);border-radius:50%}
.ms-sil:hover{color:var(--kirmizi);background:var(--kirmizi-acik)}
.ms-bos{padding:48px 0;text-align:center;color:var(--metin-2);display:grid;gap:6px}
.ms-bos p:first-child{font-weight:800;color:var(--metin);font-size:1.05rem}
.ms-alt{display:grid;gap:14px}
.ms-bar{height:8px;border-radius:999px;background:var(--yuzey-2);overflow:hidden}
.ms-bar span{display:block;height:100%;width:var(--oran,0%);background:var(--kirmizi);border-radius:999px;transition:width .5s cubic-bezier(.16,1,.3,1)}
.ms-min p{font-size:.85rem;color:var(--metin-2);margin-top:8px;font-weight:600}
.ms-toplam{display:flex;justify-content:space-between;align-items:baseline;font-weight:700}
.ms-toplam strong{font-size:1.35rem;font-weight:800;font-variant-numeric:tabular-nums}
.yk-toast{position:fixed;left:50%;bottom:28px;z-index:60;transform:translate(-50%,16px);display:flex;align-items:center;gap:10px;background:var(--metin);color:#fff;padding:14px 20px;border-radius:999px;font-weight:700;box-shadow:var(--golge);opacity:0;pointer-events:none;transition:opacity .25s,transform .3s cubic-bezier(.16,1,.3,1);max-width:calc(100vw - 32px)}
.yk-toast.is-acik{opacity:1;transform:translate(-50%,0)}
.mobil-alt{display:none}

/* ---------- Duyarli ---------- */
@media (max-width:1279px){
  .genis-yalniz{display:none!important}
  .urun-grid{gap:16px}
  .promo-gorsel{width:200px}
  .promo-gorsel img{width:124px;height:124px}
  .adimlar{grid-template-columns:1fr;gap:24px}
  .adimlar h2{max-width:none}
}
@media (max-width:1023px){
  .arac-yazi{display:none}
  .arac-sepet{padding:0 14px}
  .guven-ic{grid-template-columns:1fr 1fr}
  .guven-ic li:nth-child(3){border-left:0}
  .guven-ic li:nth-child(n+3){border-top:1px solid var(--cizgi)}
  .kat-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .slider{aspect-ratio:16/7}
  .urun-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sayfa-anasayfa .urun-grid>.kart:nth-child(n+7){display:none}
  .promo{grid-template-columns:1fr}
  .adim-liste{grid-template-columns:1fr}
  .marka-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .footer-ic{grid-template-columns:1fr 1fr}
  .mega-ic{--sol:260px}
  .mega-alt{grid-template-columns:1fr}
  .mega-alt img{display:none}
}
@media (max-width:767px){
  html{scroll-padding-top:120px}
  .ustbar{font-size:.8rem}
  .ustbar-ic{gap:56px;padding-right:56px;min-height:40px}
  body{padding-bottom:68px}
  .mobil-yalniz{display:inline-grid!important}
  .mobil-yalniz-blok{display:flex!important}
  .masaustu-yalniz{display:none!important}
  .header-ic{flex-wrap:wrap;height:auto;gap:8px 10px;padding-block:8px 10px}
  .logo{margin-right:auto}
  .logo img{height:48px}
  .arac-sepet{height:44px;margin-left:0}
  .arama{order:3;flex-basis:100%;max-width:none;height:46px;padding-left:14px}
  .arama .dugme{display:none}
  .kat-nav{display:none}
  .kat-cipler{gap:8px;overflow-x:auto;scrollbar-width:none;padding:0 16px 12px;scroll-snap-type:x proximity}
  .kat-cipler::-webkit-scrollbar{display:none}
  .kat-cipler a{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 14px;border-radius:999px;background:var(--yuzey);font-weight:700;font-size:.85rem;white-space:nowrap;scroll-snap-align:start}
  .kat-cipler .ico{width:18px;height:18px;color:var(--kirmizi)}
  .slider{aspect-ratio:16/10}
  .slider-ok{width:38px;height:38px;margin-top:-19px}
  .slider-ok .ico{width:18px;height:18px}
  .slider-noktalar{bottom:12px;padding:6px 10px}
  .guven{margin-top:16px}
  .guven-ic li{flex-direction:column;align-items:flex-start;gap:10px;padding:16px}
  .guven-ikon{width:40px;height:40px}
  .guven-ic strong{font-size:.9rem}
  .guven-ic span:not(.guven-ikon){font-size:.78rem}
  .bolum{padding-top:44px}
  .bolum-bas{flex-wrap:wrap;margin-bottom:18px}
  .kat-grid{gap:10px}
  .kampanya-grid{grid-template-columns:1fr 1fr;grid-template-rows:auto auto;height:auto;gap:10px}
  .kampanya{aspect-ratio:1}
  .kampanya-buyuk{grid-row:auto;grid-column:1/-1;aspect-ratio:16/9}
  .sekmeler{width:100%;overflow-x:auto;scrollbar-width:none}
  .sekmeler [role="tab"]{flex:1;padding:0 12px;font-size:.85rem}
  .urun-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .sayfa-anasayfa .urun-grid>.kart:nth-child(n+7){display:flex}
  .sayfa-anasayfa .urun-grid>.kart:nth-child(n+9){display:none}
  .kart{padding:6px}
  .kart-rozet{top:8px;left:8px;height:24px;padding:0 8px;font-size:.7rem}
  .kart-fav{top:8px;right:8px;width:32px;height:32px}
  .sd{height:42px}
  .sd-ekle{font-size:.82rem;gap:6px}
  .sd-adet button{width:38px}
  .sd-sayi{font-size:.85rem}
  .kart-govde{padding:10px 4px 4px}
  .kart-ad{font-size:.875rem}
  .kart-fiyat strong{font-size:1.15rem}
  .promo{gap:12px}
  .promo-kart{flex-direction:column;align-items:flex-start;min-height:0;padding:28px 24px 0}
  .promo-metin{max-width:none}
  .promo-gorsel{width:100%;height:150px;margin:0}
  .promo-gorsel img{width:110px;height:110px}
  .promo-gorsel img:first-child{left:auto;right:120px;top:20px}
  .promo-gorsel img:last-child{right:10px;bottom:-12px}
  .adimlar{padding:24px 18px}
  .adim-liste li{padding:16px}
  .marka-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .marka-kutu{height:72px;padding:12px}
  .blog-grid{grid-template-columns:1fr;gap:18px}
  .blog-kart:nth-child(n+2){display:grid;grid-template-columns:120px 1fr;gap:2px 14px;align-items:start}
  .blog-kart:nth-child(n+2) .blog-gorsel{grid-row:1/3;aspect-ratio:1}
  .blog-kart:nth-child(n+2) time{margin-top:0}
  .blog-kart:nth-child(n+2) h3{font-size:1rem}
  .footer-ic{grid-template-columns:1fr;gap:28px;padding-block:40px 32px}
  .footer-alt-ic{flex-direction:column-reverse;align-items:flex-start;gap:14px}
  .odeme{gap:6px}
  .odeme img{width:54px;padding:6px 8px}
  .mobil-alt{display:grid;grid-template-columns:repeat(4,1fr);position:fixed;left:0;right:0;bottom:0;z-index:35;height:68px;background:#fff;border-top:1px solid var(--cizgi);padding-bottom:env(safe-area-inset-bottom)}
  .mobil-alt>*{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:.72rem;font-weight:700;color:var(--metin-2)}
  .mobil-alt .ico{width:24px;height:24px;color:var(--metin)}
  .yk-toast{bottom:84px;border-radius:var(--r)}
}