/* =============================================================================
   ozdurinox.com — tek stil dosyası
   Tasarım: REYON. Sol sabit kenar çubuğu + ürünler çelik raflarda.
   Palet: logonun mavisi + paslanmaz çelik grisi + grafit. Eski sitenin CSS'inden
   (#384d63 lacivert / #fc332d kırmızı) değil, LOGODAN ve ürün karelerinin
   çelik tonundan türedi: kareler gri-beyaz stüdyo zeminli.
   🔴 Bu site kendi tasarımına sahiptir; ortak tema YOKTUR (AGENTS.md kural 3).
   🔴 Chrome 109'a kadar çalışır: :has, nesting, container query, dvh YOK.
   ============================================================================= */

@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/barlow-condensed-600-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/barlow-condensed-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url('/assets/fonts/inter-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url('/assets/fonts/inter-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --mavi:#1736c9; --mavi-k:#0f2594; --mavi-a:#e4e9fb;
  --kirmizi:#c8201b;
  --grafit:#161c22; --grafit-2:#222a33; --grafit-3:#313b46;
  --celik-1:#f3f5f7; --celik-2:#e6e9ed; --celik-3:#cfd5dc; --celik-4:#a9b2bc;
  --yazi:#141a20; --soluk:#465160; --soluk-k:#a3afbc;
  --kenar-w:288px;
  --font-b:'Barlow Condensed','Arial Narrow',Arial,sans-serif;
  --font-g:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --olcu:1240px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font:400 16px/1.6 var(--font-g);color:var(--yazi);
  background-color:var(--celik-2);
  /* fırçalanmış çelik: çok hafif dikey tel dokusu */
  background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.28) 0 1px,transparent 1px 4px);
  overflow-wrap:break-word}
img{max-width:100%;height:auto;display:block}
a{color:var(--mavi-k)}
a:hover{color:var(--mavi)}
:focus-visible{outline:3px solid var(--mavi);outline-offset:2px;border-radius:3px}
h1,h2,h3,h4{font-family:var(--font-b);font-weight:600;line-height:1.08;margin:0;letter-spacing:.01em}
p{margin:0 0 1em}
.gizle-ekran{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.atla{position:absolute;left:8px;top:-60px;background:var(--mavi);color:#fff;padding:10px 16px;z-index:100;border-radius:0 0 6px 6px}
.atla:focus{top:0;color:#fff}

/* ------------------------------------------------------------ düzen iskeleti */
.kenar{position:fixed;inset:0 auto 0 0;width:var(--kenar-w);background:var(--grafit);color:#dde4ea;
  display:flex;flex-direction:column;z-index:60;overflow-y:auto;overscroll-behavior:contain;
  border-right:1px solid #000}
.ana{margin-left:var(--kenar-w);min-width:0}
.kapsa{width:min(100% - 32px,var(--olcu));margin-inline:auto}

/* ------------------------------------------------------------ kenar çubuğu */
.kenar-marka{display:block;margin:18px 18px 0;background:#fff;border-radius:6px;padding:8px 10px;
  box-shadow:0 0 0 1px rgba(255,255,255,.14),0 6px 16px -8px #000}
.kenar-marka img{width:100%;height:auto;aspect-ratio:273/86}
.kenar-ara{margin:16px 18px 0;position:relative}
.kenar-ara input{width:100%;height:46px;border:1px solid var(--grafit-3);border-radius:6px;background:var(--grafit-2);
  color:#fff;font:inherit;font-size:15px;padding:0 44px 0 14px}
.kenar-ara input::placeholder{color:var(--soluk-k)}
.kenar-ara input:focus{border-color:var(--mavi);outline:2px solid var(--mavi);outline-offset:0}
.kenar-ara button{position:absolute;right:2px;top:2px;width:42px;height:42px;border:0;background:transparent;color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;border-radius:5px}
.kenar-ara button:hover{background:var(--grafit-3)}
.kenar-ara svg{width:20px;height:20px;fill:currentColor}

.kenar-liste-dugme{display:none;margin:12px 18px 0;min-height:46px;width:calc(100% - 36px);align-items:center;justify-content:space-between;gap:10px;
  background:var(--mavi);color:#fff;border:0;border-radius:6px;font:600 15px var(--font-g);padding:0 14px;cursor:pointer}
.js .kenar-liste-dugme{display:flex}
.kenar-liste-dugme:hover{background:var(--mavi-k)}
.rozet{min-width:26px;height:26px;border-radius:13px;background:#fff;color:var(--mavi-k);font:700 13px/26px var(--font-g);text-align:center;padding:0 7px}
.rozet[data-bos="1"]{background:rgba(255,255,255,.25);color:#fff}

.kenar-baslik{font:600 13px var(--font-b);letter-spacing:.18em;text-transform:uppercase;color:var(--soluk-k);margin:22px 22px 6px}
.kenar-gez{list-style:none;margin:0;padding:0 10px}
.kenar-gez a{display:flex;align-items:center;gap:10px;min-height:40px;padding:6px 10px;border-radius:6px;color:#dde4ea;text-decoration:none;font-size:14.5px;line-height:1.25}
.kenar-gez a:hover{background:var(--grafit-2);color:#fff}
.kenar-gez a[aria-current]{background:var(--mavi);color:#fff}
.kenar-gez .no{flex:none;font:600 14px var(--font-b);width:24px;color:var(--soluk-k);letter-spacing:.04em}
.kenar-gez a[aria-current] .no{color:#cdd6f7}
.kenar-gez .ad{flex:1}
.kenar-gez .adet{flex:none;font:500 12.5px var(--font-g);color:var(--soluk-k)}
.kenar-gez a[aria-current] .adet{color:#cdd6f7}
.kenar-ikinci a{min-height:38px;font-size:14px}

.kenar-iletisim{margin:auto 18px 18px;padding-top:18px}
.kenar-iletisim .tel{display:flex;align-items:center;gap:10px;min-height:46px;padding:0 14px;border-radius:6px;background:var(--grafit-2);
  border:1px solid var(--grafit-3);color:#fff;text-decoration:none;font:600 16px var(--font-g);margin-bottom:8px}
.kenar-iletisim .tel:hover{background:var(--grafit-3);color:#fff}
.kenar-iletisim .wa{display:flex;align-items:center;gap:10px;min-height:46px;padding:0 14px;border-radius:6px;background:#1ea952;
  color:#fff;text-decoration:none;font:600 15px var(--font-g)}
.kenar-iletisim .wa:hover{background:#178a43;color:#fff}
.kenar-iletisim svg{width:20px;height:20px;fill:currentColor;flex:none}
.kenar-iletisim p{font-size:13px;line-height:1.5;color:var(--soluk-k);margin:12px 0 0}

/* ------------------------------------------------------------ üst bar (yalnız dar ekran) */
.ustbar{display:none}

/* ------------------------------------------------------------ düğmeler */
.dugme{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:46px;padding:0 20px;border-radius:6px;
  font:600 15.5px var(--font-g);text-decoration:none;border:2px solid transparent;cursor:pointer;line-height:1.2;text-align:center}
.dugme svg{width:20px;height:20px;fill:currentColor;flex:none}
.dugme-m{background:var(--mavi);color:#fff}
.dugme-m:hover{background:var(--mavi-k);color:#fff}
.dugme-c{background:#fff;color:var(--yazi);border-color:var(--celik-3)}
.dugme-c:hover{border-color:var(--mavi);color:var(--mavi-k)}
.dugme-w{background:#1ea952;color:#fff}
.dugme-w:hover{background:#178a43;color:#fff}
.dugme-g{background:var(--grafit);color:#fff}
.dugme-g:hover{background:var(--grafit-3);color:#fff}

/* ------------------------------------------------------------ açılış */
.acilis{padding:18px 0 10px}
.acilis-ic{display:flex;align-items:flex-end;justify-content:space-between;gap:24px 40px;flex-wrap:wrap}
.acilis-metin{flex:1 1 440px;min-width:0}
.ust-yazi{font:600 14px var(--font-b);letter-spacing:.2em;text-transform:uppercase;color:var(--mavi-k);margin:0 0 6px}
.acilis h1{font-size:clamp(32px,3.7vw,50px);text-transform:uppercase;letter-spacing:.015em}
.acilis h1 em{font-style:normal;color:var(--mavi)}
.acilis .alt-cumle{margin:10px 0 0;max-width:58ch;color:var(--soluk);font-size:16px}
.acilis-eylem{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.sayaclar{display:flex;gap:10px;flex:0 0 auto}
.sayac{background:var(--grafit);color:#fff;border-radius:6px;padding:7px 16px 6px;min-width:88px;text-align:center;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.sayac b{display:block;font:600 32px/1 var(--font-b);letter-spacing:.02em}
.sayac span{display:block;font-size:12.5px;color:var(--soluk-k);margin-top:3px}

/* ------------------------------------------------------------ raf (reyon) */
.raf{margin:0 0 6px;padding-top:6px}
.raf-bas{display:flex;align-items:center;gap:12px;margin:0 0 9px;flex-wrap:wrap}
.levha{display:inline-flex;flex:0 1 auto;align-items:center;gap:12px;background:linear-gradient(180deg,#fafbfc,#d3d9df);border:1px solid var(--celik-4);
  border-radius:4px;padding:5px 14px 5px 8px;box-shadow:0 1px 0 #fff inset,0 2px 4px -2px rgba(0,0,0,.35);position:relative;min-width:0}
.levha::before,.levha::after{content:"";position:absolute;top:50%;width:5px;height:5px;margin-top:-2.5px;border-radius:50%;background:#7b8692;box-shadow:inset 0 1px 1px rgba(0,0,0,.5)}
.levha::before{left:-10px}.levha::after{right:-10px}
.levha .no{font:600 15px var(--font-b);letter-spacing:.14em;color:#fff;background:var(--grafit);padding:3px 9px 2px;border-radius:3px}
.levha h2,.levha .levha-ad{font-size:clamp(21px,2vw,27px);text-transform:uppercase;letter-spacing:.03em;color:var(--yazi)}
.levha .adet{font:500 13px var(--font-g);color:var(--soluk);white-space:nowrap}
.raf-tum .kisa{display:none}
.raf-tum{margin-left:auto;font:600 14px var(--font-g);text-decoration:none;white-space:nowrap;min-height:44px;display:inline-flex;align-items:center;color:var(--mavi-k)}
.raf-tum:hover{text-decoration:underline}
.raf-oklar{display:none;gap:6px}
.js .raf-oklar{display:flex}
.raf-oklar button{width:44px;height:44px;border-radius:6px;border:1px solid var(--celik-4);background:#fff;color:var(--yazi);cursor:pointer;display:flex;align-items:center;justify-content:center}
.raf-oklar button:hover{border-color:var(--mavi);color:var(--mavi)}
.raf-oklar button:disabled{opacity:.4;cursor:default}
.raf-oklar svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.4}

.raf-ray{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;padding:2px 2px 0;margin:0 -2px;list-style:none}
.raf-ray::-webkit-scrollbar{display:none}
.raf-ray > .urun{flex:0 0 clamp(212px,19vw,262px);scroll-snap-align:start}
/* ürünlerin oturduğu çelik tahta */
.raf-tahta{height:13px;border-radius:2px;background:linear-gradient(180deg,#ffffff 0,#cdd3d9 38%,#8e98a3 72%,#6c7681 100%);
  box-shadow:0 9px 14px -8px rgba(15,22,30,.5);position:relative}
.raf-tahta::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:#fff}

/* ------------------------------------------------------------ ürün kartı */
.urun{margin:0;background:#fff;border:1px solid var(--celik-3);border-bottom:0;border-radius:6px 6px 0 0;display:flex;flex-direction:column;position:relative;
  transition:transform .22s ease,box-shadow .22s ease}
.urun:hover{transform:translateY(-4px);box-shadow:0 10px 18px -10px rgba(15,22,30,.55);z-index:2}
.urun-gorsel{margin:0;overflow:hidden;border-radius:5px 5px 0 0;background:var(--celik-1);cursor:zoom-in;aspect-ratio:600/446}
.js .urun-gorsel{cursor:zoom-in}
.urun-gorsel img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.urun:hover .urun-gorsel img{transform:scale(1.045)}
.urun-alt{display:flex;align-items:center;gap:8px;padding:8px 8px 8px 12px;min-height:54px}
.urun-ad{flex:1;min-width:0;font:600 18.5px/1.15 var(--font-b);letter-spacing:.015em;color:var(--yazi)}
.ekle{display:none;flex:none;width:44px;height:44px;border-radius:6px;border:1px solid var(--celik-4);background:#fff;color:var(--mavi-k);cursor:pointer;
  align-items:center;justify-content:center;font:600 22px/1 var(--font-g);padding:0}
.js .ekle{display:flex}
.ekle:hover{border-color:var(--mavi);background:var(--mavi-a)}
.ekle[aria-pressed="true"]{background:var(--mavi);border-color:var(--mavi);color:#fff}
.ekle svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.ekle .tik{display:none}
.ekle[aria-pressed="true"] .arti{display:none}
.ekle[aria-pressed="true"] .tik{display:block}

/* ızgara (katalog, raf sayfası): kartlar aynı raf mantığıyla, satır başına tahta */
.izgara{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:22px 14px;list-style:none;margin:0;padding:0}
.izgara .urun{border-bottom:1px solid var(--celik-3);border-radius:6px}
.izgara .urun-gorsel{border-radius:5px 5px 0 0}
.izgara .urun[hidden]{display:none}

/* ------------------------------------------------------------ sayfa başlığı */
.sayfa-bas{padding:26px 0 8px}
.sayfa-bas h1{font-size:clamp(32px,3.8vw,52px);text-transform:uppercase}
.sayfa-bas .ozet{color:var(--soluk);max-width:64ch;margin:8px 0 0}
.kirinti{display:flex;flex-wrap:wrap;gap:4px 8px;list-style:none;margin:0 0 10px;padding:0;font-size:13.5px;color:var(--soluk)}
.kirinti a{color:var(--soluk);display:inline-flex;align-items:center;min-height:44px}
.kirinti li+li::before{content:"/";margin-right:8px;color:var(--celik-4)}

.bolum{padding:26px 0}
.bolum-koyu{background:var(--grafit);color:#e8edf1}

/* katalog arama çubuğu */
.arama-sat{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:16px 0 4px}
.arama-kutu{flex:1 1 320px;position:relative}
.arama-kutu input{width:100%;height:54px;border:2px solid var(--celik-4);border-radius:8px;background:#fff;font:inherit;font-size:17px;padding:0 16px 0 52px}
.arama-kutu input:focus{border-color:var(--mavi);outline:0;box-shadow:0 0 0 3px var(--mavi-a)}
.arama-kutu svg{position:absolute;left:16px;top:16px;width:22px;height:22px;fill:var(--soluk)}
.arama-sonuc{font-size:14.5px;color:var(--soluk);min-height:24px;margin:6px 0 0}
.bos-sonuc{background:#fff;border:1px dashed var(--celik-4);border-radius:8px;padding:22px;max-width:620px;margin-top:14px}
.bos-sonuc[hidden]{display:none}

/* ------------------------------------------------------------ hizmet plakaları */
.plakalar{display:grid;grid-template-columns:repeat(auto-fit,minmax(225px,1fr));gap:16px;list-style:none;margin:0;padding:0}
.plaka{background:linear-gradient(180deg,#fbfcfd,#dfe4e9);border:1px solid var(--celik-4);border-radius:8px;padding:22px 22px 20px;position:relative;
  box-shadow:0 1px 0 #fff inset,0 8px 16px -12px rgba(15,22,30,.6)}
.plaka::before,.plaka::after{content:"";position:absolute;top:10px;width:7px;height:7px;border-radius:50%;background:#8b95a0;box-shadow:inset 0 1px 1px rgba(0,0,0,.5)}
.plaka::before{left:10px}.plaka::after{right:10px}
.plaka .no{font:600 15px var(--font-b);letter-spacing:.16em;color:var(--mavi-k);margin:6px 0 4px}
.plaka h2,.plaka h3{font-size:26px;text-transform:uppercase;margin-bottom:8px}
.plaka p{margin:0;color:#2c3641}
.plaka .raf-baglar{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.etiket{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border-radius:18px;background:#fff;border:1px solid var(--celik-3);font-size:13.5px;text-decoration:none;color:var(--yazi)}
.etiket:hover{border-color:var(--mavi);color:var(--mavi-k)}

/* ürün şeridi (sayfa altlarında: her raftan bir kare) */
.serit{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.serit a{display:block;text-decoration:none;color:var(--yazi);background:#fff;border:1px solid var(--celik-3);border-radius:6px;overflow:hidden;transition:transform .22s ease,box-shadow .22s ease}
.serit a:hover{transform:translateY(-4px);box-shadow:0 10px 18px -10px rgba(15,22,30,.55)}
.serit img{width:100%;aspect-ratio:600/446;object-fit:cover}
.serit span{display:block;font:600 16px/1.15 var(--font-b);padding:8px 10px 9px;letter-spacing:.02em}

/* künye */
.kunye{list-style:none;margin:0;padding:0;background:#fff;border:1px solid var(--celik-3);border-radius:8px}
.kunye li{display:flex;gap:14px;padding:13px 18px;border-bottom:1px solid var(--celik-2)}
.kunye li:last-child{border-bottom:0}
.kunye .et{flex:0 0 88px;font:600 14px var(--font-b);letter-spacing:.14em;text-transform:uppercase;color:var(--soluk);padding-top:2px}
.kunye a{font-weight:600;display:inline-flex;align-items:center;min-height:44px}

.iki{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:28px}
.hikaye p{font-size:17.5px;line-height:1.7;max-width:62ch}

/* paralaks bant */
.bant{position:relative;color:#fff;padding:54px 0;background:var(--grafit) center/cover fixed no-repeat;isolation:isolate}
.bant::before{content:"";position:absolute;inset:0;background:rgba(14,20,27,.82);z-index:-1}
.bant h2{font-size:clamp(28px,3.2vw,44px);text-transform:uppercase}
.bant p{max-width:58ch;color:#d3dbe3;margin:8px 0 0}
.bant-ic{display:flex;gap:20px 40px;align-items:center;justify-content:space-between;flex-wrap:wrap}

/* ------------------------------------------------------------ form */
.form{display:grid;gap:14px}
.alan label{display:block;font-weight:600;font-size:14.5px;margin-bottom:5px}
.alan label em{display:block;font-style:normal;font-weight:400;font-size:13.5px;color:var(--soluk)}
.zorunlu{color:var(--kirmizi)}
.alan input,.alan select,.alan textarea{width:100%;font:inherit;font-size:16px;padding:11px 13px;border:2px solid var(--celik-3);border-radius:6px;background:#fff;color:var(--yazi)}
.alan select{height:50px}
.alan input{height:50px}
.alan input:focus,.alan select:focus,.alan textarea:focus{border-color:var(--mavi);outline:0;box-shadow:0 0 0 3px var(--mavi-a)}
.bal{position:absolute;left:-5000px;width:1px;height:1px;overflow:hidden}
.uyari{padding:14px 16px;border-radius:6px;margin-bottom:14px;font-size:15px}
.uyari-ok{background:#e3f6ea;border:1px solid #8bd2a5;color:#0f5a2a}
.uyari-hata{background:#fdeaea;border:1px solid #efa9a6;color:#8a1410}
.liste-aktar{background:#fff;border:1px solid var(--mavi);border-left-width:6px;border-radius:6px;padding:14px 16px;margin-bottom:16px}
.liste-aktar[hidden]{display:none}
.liste-aktar p{margin:0 0 10px;font-size:15px}
.harita-kutu{border:1px solid var(--celik-3);border-radius:8px;overflow:hidden;background:#fff;min-height:260px;display:flex}
.harita-kutu iframe{border:0;width:100%;min-height:300px}
.harita-ac{flex:1;min-height:260px;border:0;background:linear-gradient(135deg,#eef1f4,#d9dfe5);cursor:pointer;font:inherit;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:20px;color:var(--yazi)}
.harita-ac b{font:600 22px var(--font-b);letter-spacing:.04em;text-transform:uppercase}
.harita-ac span{font-size:14px;color:var(--soluk)}
.harita-ac:hover{background:linear-gradient(135deg,#e4e8ed,#cfd6dd)}

/* ------------------------------------------------------------ alt bilgi */
.alt{background:var(--grafit);color:#c9d2db;margin-top:36px;padding:26px 0 10px}
.alt-ic{display:flex;flex-wrap:wrap;gap:18px 44px;justify-content:space-between;align-items:flex-start}
.alt h2{font-size:22px;color:#fff;text-transform:uppercase;margin-bottom:6px}
.alt p{margin:0;font-size:14.5px;line-height:1.6}
.alt a{color:#e8edf1}
.alt a:hover{color:#fff}
.alt-liste{list-style:none;margin:0;padding:0;font-size:14.5px}
.alt-liste a{display:flex;align-items:center;min-height:44px;text-decoration:none}
.alt-liste a:hover{text-decoration:underline}
.alt-son{display:flex;flex-wrap:wrap;gap:6px 20px;justify-content:space-between;align-items:center;border-top:1px solid var(--grafit-3);margin-top:14px;padding-top:6px;font-size:13px;color:var(--soluk-k)}
.alt-son p{margin:0}

/* ------------------------------------------------------------ yüzen düğmeler (yalnız dar ekran) */
.yuzen{display:none}
.yuzen a{width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 6px 16px -4px rgba(0,0,0,.5)}
.yuzen a svg{width:26px;height:26px;fill:currentColor}
.yuzen .ara{background:var(--mavi)}
.yuzen .wa-mobil.wa-mobil{background:#1ea952}

/* ------------------------------------------------------------ teklif listesi çekmecesi */
.liste{position:fixed;inset:0 0 0 auto;width:min(420px,100%);background:#fff;z-index:90;display:flex;flex-direction:column;
  box-shadow:-20px 0 40px -20px rgba(0,0,0,.55);transform:translateX(104%);transition:transform .26s ease;visibility:hidden}
.liste.acik{transform:none;visibility:visible}
.liste-bas{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;background:var(--grafit);color:#fff}
.liste-bas h2{font-size:26px;text-transform:uppercase}
.liste-kapat{width:44px;height:44px;border:0;border-radius:6px;background:var(--grafit-3);color:#fff;font-size:24px;line-height:1;cursor:pointer}
.liste-kapat:hover{background:var(--mavi)}
.liste-govde{flex:1;overflow-y:auto;padding:6px 18px 16px}
.liste-govde ul{list-style:none;margin:0;padding:0}
.liste-govde li{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--celik-2)}
.liste-govde li img{width:64px;height:48px;object-fit:cover;border-radius:4px;border:1px solid var(--celik-3);flex:none}
.liste-govde li span{flex:1;min-width:0;font:600 18px/1.15 var(--font-b);letter-spacing:.015em}
.liste-govde li small{display:block;font:400 12.5px var(--font-g);color:var(--soluk);margin-top:2px;letter-spacing:0}
.liste-govde li button{width:44px;height:44px;border:1px solid var(--celik-3);border-radius:6px;background:#fff;cursor:pointer;font-size:20px;line-height:1;color:var(--soluk)}
.liste-govde li button:hover{border-color:var(--kirmizi);color:var(--kirmizi)}
.liste-bos{padding:28px 6px;color:var(--soluk);font-size:15px}
.liste-alt{padding:14px 18px 18px;border-top:1px solid var(--celik-3);display:grid;gap:8px;background:var(--celik-1)}
.liste-alt .dugme{width:100%}
.liste-temizle{background:none;border:0;color:var(--soluk);text-decoration:underline;font:inherit;font-size:14px;cursor:pointer;min-height:44px}
.perde{position:fixed;inset:0;background:rgba(10,15,20,.55);z-index:80;opacity:0;visibility:hidden;transition:opacity .2s ease}
.perde.acik{opacity:1;visibility:visible}

/* ------------------------------------------------------------ büyüteç (dialog) */
.buyut{border:0;padding:0;background:transparent;max-width:min(660px,calc(100% - 24px));width:100%;overflow:visible}  /* kaynak 600 px: 660 px kutuda büyütme ≈1.1 */
.buyut::backdrop{background:rgba(10,15,20,.8)}
.buyut-kutu{background:#fff;border-radius:10px;overflow:hidden;position:relative}
.buyut-kutu img{width:100%;aspect-ratio:600/446;object-fit:contain;background:var(--celik-1);max-height:calc(100vh - 190px)}
.buyut-alt{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:space-between;padding:14px 16px}
.buyut-alt h2{font-size:28px;text-transform:uppercase}
.buyut-alt small{display:block;font:400 13.5px var(--font-g);color:var(--soluk);margin-top:3px;text-transform:none;letter-spacing:0}
.buyut-eylem{display:flex;gap:8px;flex-wrap:wrap}
.buyut-ok{position:absolute;top:calc(50% - 90px);width:48px;height:56px;border:0;background:rgba(20,26,32,.72);color:#fff;font-size:26px;cursor:pointer;border-radius:6px}
.buyut-ok:hover{background:var(--mavi)}
.buyut-ok.geri{left:8px}.buyut-ok.ileri{right:8px}
.buyut-kapat{position:absolute;right:8px;top:8px;width:44px;height:44px;border:0;border-radius:6px;background:rgba(20,26,32,.72);color:#fff;font-size:24px;cursor:pointer;z-index:2}
.buyut-kapat:hover{background:var(--kirmizi)}
.buyut-sayac{position:absolute;left:10px;top:12px;background:rgba(20,26,32,.72);color:#fff;font:600 13px var(--font-g);padding:4px 10px;border-radius:12px}

/* ------------------------------------------------------------ belirme (yalnız CSS) */
@supports (animation-timeline:view()){
  .bel{animation:bel linear both;animation-timeline:view();animation-range:entry 0% entry 38%}
}
@keyframes bel{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}

/* ------------------------------------------------------------ duyarlı */
@media (max-width:1000px){
  :root{--kenar-w:min(320px,86vw)}
  .kenar{transform:translateX(-104%);transition:transform .26s ease;visibility:hidden;box-shadow:20px 0 40px -20px rgba(0,0,0,.6)}
  .kenar.acik{transform:none;visibility:visible}
  .ana{margin-left:0}
  .ustbar{display:flex;align-items:center;gap:8px;position:sticky;top:0;z-index:50;background:var(--grafit);padding:8px 12px}
  .ustbar .marka{flex:none;display:flex;align-items:center;min-height:44px;background:#fff;border-radius:5px;padding:4px 7px}
  .kenar-gez a,.kenar-ikinci a{min-height:44px}
  .ustbar .marka img{width:104px;height:auto;aspect-ratio:273/86}
  .ustbar-bosluk{flex:1}
  .ustbar button{height:44px;min-width:44px;border:1px solid var(--grafit-3);border-radius:6px;background:var(--grafit-2);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;padding:0 10px;font:600 14px var(--font-g)}
  .ustbar button svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
  .ustbar .u-liste{display:none;background:var(--mavi);border-color:var(--mavi)}
  .js .ustbar .u-liste{display:flex}
  .yuzen{display:flex;flex-direction:column;gap:10px;position:fixed;right:14px;bottom:14px;z-index:40}
  .bant{background-attachment:scroll}
  .iki{grid-template-columns:1fr}
  .raf-ray > .urun{flex-basis:clamp(190px,44vw,260px)}
}
@media (max-width:640px){
  .acilis{padding:14px 0 6px}
  .acilis .ust-yazi{display:none}
  .acilis h1{font-size:30px}
  .acilis-ic{gap:10px}
  .sayaclar{width:100%;gap:8px}
  .sayac{flex:1;min-width:0;padding:5px 6px 4px}
  .sayac b{font-size:24px}
  .sayac span{font-size:11.5px;margin-top:1px}
  .raf-bas{flex-wrap:nowrap;gap:8px}
  .levha{flex:1 1 0;min-width:0;padding:4px 10px 4px 6px;gap:8px}
  .levha h2,.levha .levha-ad{font-size:19px;line-height:1.05}
  .levha .adet{display:none}
  .raf-oklar,.js .raf-oklar{display:none}
  .raf-tum .uzun{display:none}
  .raf-tum .kisa{display:inline}
  .raf-tum{margin-left:0;flex:none}
  .raf-ray > .urun{flex-basis:66vw}
  .urun-ad{font-size:17.5px}
  .izgara{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 10px}
  .izgara .urun-ad{font-size:16.5px}
  .urun-alt{padding:6px 6px 6px 10px}
  .kunye li{flex-direction:column;gap:2px}
  .kunye .et{flex-basis:auto}
  .buyut-ok{top:calc(50% - 110px)}
  .yuzen a{width:48px;height:48px}
}
@media (min-width:1001px){ .yuzen .wa-mobil{display:none} }

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
  .bel{opacity:1;transform:none}
  .urun:hover,.serit a:hover{transform:none}
}
@media print{.kenar,.ustbar,.yuzen,.liste,.perde{display:none!important}.ana{margin:0}}