:root{
 --koyu:#0b3d5c; --koyu2:#072b41; --vurgu:#e8730c; --vurgu2:#c85f00;
 --zemin:#f6f8fa; --kart:#ffffff; --metin:#1b2733; --soluk:#5a6b7b;
 --cizgi:#dde5ec; --yesil:#1f7a45;
 /* golgeler iki katmanli: yakin katman kenari belirginlestirir, uzak katman
    kartin zeminden ayrildigini hissettirir - tek katman duz ve ucuz duruyordu */
 --golge:0 1px 2px rgba(11,61,92,.06),0 4px 14px rgba(11,61,92,.07);
 --golge2:0 2px 6px rgba(11,61,92,.09),0 14px 34px rgba(11,61,92,.16);
 --yuvarlak:14px; --yuvarlak-kucuk:10px;
 --hap:999px;                     /* tam yuvarlak dugme yaricapi */
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
 color:var(--metin);background:var(--zemin);overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--koyu);text-decoration:none}
a:hover{text-decoration:underline}
.sar{width:100%;max-width:1180px;margin:0 auto;padding:0 16px}

/* --- ust seritteki telefon (madde 2: ust kisimda CTA) --- */
.ust{background:var(--koyu2);color:#cfe2ee;font-size:16px}
.ust .sar{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;
 justify-content:center;padding-block:7px;text-align:center}
.ust a{color:#fff;font-weight:600}
.ust b{color:var(--vurgu)}
/* Mobilde serit TEK SATIR: uzun tanitim cumlesi ve "Siparis ve teknik destek:"
   etiketi gizlenir, geriye "Ayni gun kargo" + numara kalir. Sarmali surumde
   serit 200 px yer kapliyordu (11 Eylul 2026). */
.ust-kisa{display:none}
@media(max-width:600px){
 .ust .sar{flex-wrap:nowrap;justify-content:space-between;font-size:14.5px}
 .ust-uzun{display:none}
 .ust-kisa{display:inline}
}

header{background:var(--koyu);color:#fff;position:sticky;top:0;z-index:60;box-shadow:var(--golge2)}
header .sar{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding-block:11px}
.logo{display:flex;align-items:center;gap:9px;min-height:44px;color:#fff;font-weight:800;font-size:19px;
 letter-spacing:-.4px;flex:1 1 auto;min-width:0}
.logo:hover{text-decoration:none}
.logo span{display:none;font-size:10.5px;font-weight:500;color:#9dc0d6;letter-spacing:.3px}
.logo svg{flex:0 0 auto}
.ara-dug,.menu-dug{background:rgba(255,255,255,.12);border:0;color:#fff;width:44px;height:44px;
 border-radius:9px;display:grid;place-items:center;cursor:pointer;flex:0 0 auto}
.sepet-dug{position:relative;background:var(--vurgu);border:0;color:#fff;height:44px;padding:0 13px;
 border-radius:9px;display:flex;align-items:center;gap:7px;font-weight:700;font-size:16px;cursor:pointer}
.sepet-dug b{background:#fff;color:var(--vurgu);border-radius:20px;min-width:24px;height:24px;
 font-size:15px;display:grid;place-items:center;padding:0 5px}
nav.ana{display:none}
nav.ana a{color:#e4eff7;font-weight:600;font-size:16px;padding:6px 0;white-space:nowrap}
/* mobilde: acilinca baslik satirini sarip kendi satirina duser */
.ara-kutu{flex-basis:100%;order:9;padding:2px 0 4px}
.ara-kutu.gizli{display:none}
.ara-kutu form{display:flex;gap:7px;margin:0}
.ara-kutu input{flex:1;border:0;border-radius:9px;padding:11px 14px;font-size:16px;min-width:0}
.ara-kutu button{background:var(--vurgu);color:#fff;border:0;border-radius:9px;padding:0 17px;
 font-weight:700;cursor:pointer}
/* position:relative + sag kenardaki solma: serit mobilde yatay kayiyor ama
   kaydirma cubugu gizli oldugu icin son kategori ("Kepenk Kuma...") ekranda
   KESIK bir yazi gibi duruyordu, kaydirilabildigi anlasilmiyordu
   (11 Eylul 2026). Solma, devaminin oldugunu gosteren tek isaret. */
.gezinme{position:relative;background:var(--koyu2)}
.gezinme .kaydir{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.gezinme .kaydir::-webkit-scrollbar{display:none}
.gezinme::after{content:"";position:absolute;top:0;bottom:0;right:0;width:44px;
 pointer-events:none;background:linear-gradient(90deg,rgba(7,43,65,0),var(--koyu2))}
.gezinme ul{display:flex;gap:4px;list-style:none;margin:0;padding:0 12px;white-space:nowrap}
.gezinme a{display:block;color:#cfe2ee;font-size:16px;font-weight:600;padding:13px 12px}

/* --- rehber listesindeki konu kisayollari --- */
.konu-kisayol{display:flex;flex-wrap:wrap;gap:9px;margin:20px 0 4px}
.konu-kisayol a{display:inline-flex;align-items:center;gap:7px;background:#fff;
 border:1px solid var(--cizgi);border-radius:30px;padding:9px 15px;
 font-size:15px;font-weight:650;color:var(--koyu)}
.konu-kisayol a:hover{border-color:var(--vurgu);text-decoration:none}
.konu-kisayol b{background:var(--koyu);color:#fff;border-radius:20px;
 min-width:23px;text-align:center;font-size:12.5px;padding:1px 6px}
.rehber-grup{padding-top:26px;scroll-margin-top:80px}
/* Mobilde konu rozetleri ALT ALTA diziliyordu: en genisi "Guc kaynagi ve
   elektrik 14" 227 px, 390 px ekranda iki tanesi yan yana sigmiyor ve yedi
   rozet yedi satir oluyordu. Sonuc: rehber listesinin ILK EKRANINDA tek bir
   gorsel yok, kullanici asagi kaydirmadan sayfanin kartlarini gormuyordu
   (11 Eylul 2026, rehber-mobil.png). Sarmak yerine tek satirda yatay kaydirma:
   sayfanin ust menusu de boyle calisiyor, alisilmis bir hareket. Negatif
   yan pay serit kenardan baslasin diye (kesik rozet "devami var" isaretidir),
   alt pay parmakla kaydirirken karta basilmasin diye. */
@media(max-width:640px){
 .konu-kisayol{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;margin:16px -16px 2px;padding:2px 16px 10px}
 .konu-kisayol::-webkit-scrollbar{display:none}
 .konu-kisayol a{flex:0 0 auto;font-size:14px;padding:8px 13px;min-height:44px}
}

/* --- kirinti (madde 5) --- */
.kirinti{font-size:16px;color:var(--soluk);padding:0 0 3px}
.kirinti ol{list-style:none;display:flex;flex-wrap:wrap;gap:5px;margin:0;padding:0}
.kirinti li:not(:last-child)::after{content:"\203A";margin-left:5px;color:#9aabb9}
.kirinti a{color:var(--soluk)}
/* son ogedeki span link degil: ayni dikey dolguyu almazsa satirda yukari kayiyor */
.kirinti li>span{display:inline-block;padding-block:13px;line-height:1.2}
/* Mobilde kirinti UC SATIRA sariyordu ve her satir dokunma hedefi dolgusuyla
   45 px: "Ana Sayfa > Urunler > Otomatik Kepenk Kumandalari > Mosel Dc-115b 4
   Kanalli Kumanda" 135 px, yani 844 px'lik ilk ekranin altida biri, ustelik
   son oge H1'de aynen tekrar ediyordu (11 Eylul 2026, urun-mosel-dc-115b-
   mobil.png). Sarmak yerine tek satir + yatay kaydirma: dolgu ve tam kirinti
   metni (erisilebilirlik ve BreadcrumbList ile ayni sira) korunur, dikey alan
   45 px'e iner. */
@media(max-width:640px){
 .kirinti ol{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
  scrollbar-width:none}
 .kirinti ol::-webkit-scrollbar{display:none}
 .kirinti li{white-space:nowrap;flex:0 0 auto}
}

/* --- sayfa basi bandi (rehber listesi ve benzeri liste sayfalari) --- */
/* Kume bandin SAGINDA duruyor (betik/hero_sahne_uret.BANT_KUME), perde de
   soldan saga aciliyor: yazi koyu yarida kaliyor, urunler acikta. */
.sayfa-bas{position:relative;overflow:hidden;color:#fff;background:#0b2438;
 background-repeat:no-repeat;background-position:right center;
 background-size:cover;padding:22px 0 26px;margin-bottom:22px}
.sayfa-bas::before{content:"";position:absolute;inset:0;pointer-events:none;
 background:linear-gradient(90deg,rgba(6,21,35,.95) 0%,rgba(6,21,35,.88) 40%,
  rgba(6,21,35,.34) 74%,rgba(6,21,35,.08) 100%)}
.sayfa-bas .sar{position:relative;z-index:2}
/* Baslik da paragraf gibi sinirli: kategori basliklari uzun ("Otomatik Kepenk
   Kumandalari - Sabit ve Degisken Kodlu Modeller") ve genis ekranda son kelime
   urun kumesinin uzerine biniyordu - gradyan orada %34 opaklikta, beyaz yazi
   kumandanin acik griyle karisiyor (11 Eylul 2026, kategori-...-masa.png). */
.sayfa-bas h1{margin:.1em 0 .4em;color:#fff;max-width:760px}
.sayfa-bas p{margin:0;max-width:620px;color:#c5d4e1}
/* Mobilde yazi tam genislige yayiliyor: yanyana duzen burada ise yaramaz.
   Bant gorseli 150 px'lik bir SERIT olarak uste alinir (background-size ile
   yuksekligi sabitlenir, "right top" kumeyi acikta birakir), yazi seridin
   altindaki koyu alana iner. */
@media(max-width:640px){
 .sayfa-bas{background-position:right top;background-size:auto 150px;
  padding:158px 0 24px}
 .sayfa-bas::before{background:linear-gradient(180deg,rgba(6,21,35,.16) 0,
   rgba(6,21,35,.50) 108px,rgba(6,21,35,.95) 156px,rgba(6,21,35,.99) 100%)}
 .sayfa-bas p{font-size:15.5px}
}

h1{font-size:25px;line-height:1.28;letter-spacing:-.5px;margin:.35em 0 .45em}
h2{font-size:21px;line-height:1.32;letter-spacing:-.3px;margin:1.7em 0 .5em}
h3{font-size:17.5px;margin:1.4em 0 .4em}
p{margin:0 0 1.05em}
.metin ul,.metin ol{margin:0 0 1.15em;padding-left:21px}
.metin li{margin-bottom:.45em}
.metin table{width:100%;border-collapse:collapse;font-size:16px;margin:0 0 1.2em}
.metin th,.metin td{border:1px solid var(--cizgi);padding:8px 10px;text-align:left}
.metin th{background:#eef3f7}
/* metin + buyuk gorsel yan yana bolum: uzun duz metin bloklarini kirar.
   Mobilde tek sutun, once baslik+metin sonra gorsel; genis ekranda iki sutun
   ve tek/cift satirda gorsel yon degistirir (.ters). */
.anlat-bolum{display:grid;gap:18px;margin:0 0 30px}
/* grid cocuklari daralabilsin: min-width:auto olan bir grid ogesi, icindeki
   genis cizim/tablo yuzunden sutunu ekrandan disari tasiriyor. */
.anlat-bolum>*{min-width:0}
.anlat-bolum .metin>h2:first-child{margin-top:0}
.anlat-gorsel{margin:0;border-radius:var(--yuvarlak);overflow:hidden;
 box-shadow:var(--golge);background:#eef4f8}
.anlat-gorsel img{display:block;width:100%;height:auto;aspect-ratio:880/620;
 object-fit:cover}
@media(min-width:820px){
 .anlat-bolum{grid-template-columns:1.06fr .94fr;gap:38px;align-items:center;
  margin:0 0 48px}
 .anlat-bolum.ters .anlat-gorsel{order:-1}
}
/* Rehber govdesi 820 px'lik tek sutun: anlat bolumleri burada YAN YANA
   dizilmez, gorsel metnin uzerinde tam genislikte durur - 370 px'lik iki
   sutunda hem fotograf hem paragraf sikisiyordu. */
.yazi .anlat-bolum{grid-template-columns:1fr;gap:16px;margin:0 0 34px}
.yazi .anlat-bolum.ters .anlat-gorsel{order:0}
.yazi .anlat-gorsel img{aspect-ratio:880/460}

/* Yazinin basindaki kapak afisi: liste kartinda gorulen gorselin buyugu. */
.yazi-kapak{margin:18px 0 26px;border-radius:var(--yuvarlak);overflow:hidden;
 box-shadow:var(--golge);background:#0b3d5c}
.yazi-kapak img{display:block;width:100%;height:auto;aspect-ratio:640/336;
 object-fit:cover}

/* min-width:0 sart: cizim bir grid/flex kutusunun icine dustugunde o kutunun
   varsayilan min-width:auto degeri, kaydirilabilir cercevenin 640 px'lik
   icerigini "en az bu kadar genis olmaliyim" diye okuyup kutuyu sisiriyordu.
   Olcum (390 px, 11 Eylul): rehber sayfasi 658 px genislige cikip yana
   kayiyordu - telefonda en cok sikayet edilen kusur. */
.cizim{margin:1.5em 0 1.6em;padding:0;min-width:0}
.cizim .cerceve{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--cizgi);border-radius:10px;background:#f6f8fa;min-width:0}
.cizim img{display:block;width:100%;height:auto}
.cizim figcaption{font-size:13.5px;color:var(--soluk);margin-top:7px;text-align:center;line-height:1.45}
.cizim .ipucu{display:none}
.cizim picture{display:block}
/* Telefon: dikey surumu olan cizim ekrana sigar (yana kaydirma yok);
   olmayan cizim 640 px'e acilip kaydirilir - eski davranis. */
@media(max-width:700px){
 .cizim img{width:640px;max-width:none}
 .cizim .ipucu{display:inline-block;padding:13px 4px;color:var(--vurgu);
  text-decoration:underline;text-underline-offset:3px}
 .cizim.dikeyli .cerceve{overflow-x:visible}
 .cizim.dikeyli img{width:100%;max-width:100%;height:auto;
  aspect-ratio:var(--m-oran)}
}
.tablo-kaydir{overflow-x:auto;margin:0 0 1.2em}

/* --- ana kart, dugmeler --- */
.kart{background:var(--kart);border:1px solid var(--cizgi);border-radius:var(--yuvarlak);
 box-shadow:var(--golge)}
/* hap dugme: kose yariçapi tam yuvarlak. Kose dugmeler siteye eski ve
   "sablondan cikma" bir hava veriyordu. */
.dug{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:52px;
 padding:14px 26px;border-radius:var(--hap);font-weight:700;font-size:16.5px;border:0;
 cursor:pointer;text-align:center;line-height:1.25;
 transition:transform .15s ease,box-shadow .15s ease,background .15s ease}
.dug:hover{text-decoration:none;transform:translateY(-1px)}
.dug-turuncu{background:var(--vurgu);color:#fff;box-shadow:0 6px 18px rgba(232,115,12,.32)}
.dug-turuncu:hover{background:var(--vurgu2);color:#fff;box-shadow:0 10px 26px rgba(232,115,12,.4)}
.dug-lacivert{background:var(--koyu);color:#fff;box-shadow:0 6px 18px rgba(11,61,92,.28)}
.dug-lacivert:hover{background:var(--koyu2);color:#fff}
.dug-cizgi{background:#fff;color:var(--koyu);border:1.5px solid var(--koyu)}
.dug-cizgi:hover{background:#eef4f8;color:var(--koyu)}
/* koyu zeminde (hero, alt bilgi) ayni dugme ters cevrilir */
.hero .dug-cizgi,footer .dug-cizgi{background:rgba(255,255,255,.1);color:#fff;
 border-color:rgba(255,255,255,.5)}
.hero .dug-cizgi:hover,footer .dug-cizgi:hover{background:rgba(255,255,255,.2);color:#fff}
/* Telefon numarasi sitenin en onemli eylemi (reklam yok, is telefondan
   geliyor) ama dugme olmayan yerlerde - ust serit, alt bilgi, metin ici -
   yalniz 20-21 piksel yuksekligindeydi: parmakla isabet ettirmesi zor,
   yanlis baglantiya basiliyordu (11 Eylul 2026, her sayfada alti bag).
   Dugme kaliginda olanlara (.dug) dokunulmuyor, onlar zaten 52 px. */
a[href^="tel:"]:not(.dug){display:inline-flex;align-items:center;min-height:44px}
.dug-yesil{background:var(--yesil);color:#fff;box-shadow:0 6px 18px rgba(31,122,69,.3)}
.dug-tam{display:flex;width:100%}

/* --- hero --- */
/* Zemin artik duz gradyan degil, GERCEK urun fotograflarindan uretilmis koyu
   doku (betik/hero_fon_uret.py). Sebebi kullanicinin 11 Eylul 2026'da verdigi
   referans: 2mtesisat.com.tr'nin girisinde gradyan degil fotograf var, uzerine
   koyu perde cekilmis. Duz gradyan + diyagonal cizgi yassi ve sablon duruyordu.
   Mobilde dar surum kullanilir: genis kare dikey ekranda ortadan kirpilinca
   doku bos kaliyor. */
.hero{position:relative;overflow:hidden;color:#fff;padding:34px 0 38px;
 background:#061523 url(/gorsel/fon/hero-fon-dar.webp) center top/cover no-repeat}
/* Perde: ARTIK FOTOGRAFI GIZLEMIYOR. Eski surumde sol taraf %93 opak bir
   perdeyle kapaliydi; altta duran doku hic gorunmedigi icin giris duz mavi
   bir dikdortgen gibi duruyordu. Yeni fon gercek urun fotografiyla kuruluyor
   (betik/hero_sahne_uret.py) ve zaten koyu: perde yalniz YAZININ durdugu sol
   ucu koyultuyor, urunun oldugu sag taraf acikta kaliyor.
   Mobilde kume ustte oldugu icin perde dikey: yazi alttaki koyu bolgede. */
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;
 background:linear-gradient(180deg,rgba(6,21,35,.20) 0%,rgba(6,21,35,.55) 46%,
  rgba(6,21,35,.92) 74%,rgba(6,21,35,.97) 100%)}
/* Alt kenardaki sert kesim: giris bitince bir anda beyaza donuyordu.
   Ince bir gecis seridi iki bolumu birbirine bagliyor. */
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:90px;
 pointer-events:none;
 background:linear-gradient(180deg,rgba(6,21,35,0),rgba(6,21,35,.55))}
.hero .sar{position:relative;z-index:2}
/* Mobilde urun kumesi fonun ustunde duruyor, yazi altina geciyor: ust bosluk
   kumeyi acikta birakan yukseklik. Olcum (390x844): giris 390x745, fon cover
   ile yuksekliğe gore 0,53 olcegine iniyor; tuvaldeki kume y=105..415 ekranda
   56..221 px'e dusuyor. 214 px ust bosluk yaziyi 248'de baslatir, arada 27 px
   nefes payi kalir. Fon "center top" hizalanir: eski "-60px" kaydirmasi
   kumenin ust kenarini kesiyordu. */
.hero-iki{display:grid;gap:22px;align-items:center;padding-top:214px}
.hero h1{color:#fff;font-size:30px;line-height:1.18;letter-spacing:-.8px;margin:0 0 14px}
.hero p{color:#cfe2ef;font-size:17px;line-height:1.6;margin:0 0 22px;max-width:46ch}
.hero .dugler{display:flex;flex-direction:column;gap:11px}
.rozet{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.rozet span{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);
 border-radius:30px;padding:0 15px;font-size:16px;color:#dbeaf4;font-weight:600;
 display:inline-flex;align-items:center;min-height:46px}
.rozet span a{color:inherit;display:flex;align-items:center;align-self:stretch;
 margin:0 -15px;padding:0 15px;min-height:44px}

/* --- guven seridi --- */
.guven{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:-16px 0 0;position:relative;z-index:2}
/* Ikon eklendigi icin secici `> div`: ic sarmalayici kutu gorunumu almasin. */
.guven>div{background:#fff;border:1px solid var(--cizgi);border-radius:var(--yuvarlak);
 padding:13px 12px;box-shadow:var(--golge);font-size:16px;color:var(--soluk);
 line-height:1.4;display:flex;align-items:flex-start;gap:11px}
.guven b{display:block;color:var(--metin);font-size:16.5px;margin-bottom:2px}
.guven-i{flex:0 0 38px;height:38px;border-radius:11px;display:flex;align-items:center;
 justify-content:center;background:rgba(232,115,12,.10);color:var(--vurgu)}
/* 390 px'te iki sutun x (38 px ikon + 11 px bosluk + 24 px ic dolgu) metne
   107 px birakiyordu: "2016'dan / beri" iki satira boluniyordu (11 Eylul
   2026 olcumu). Dar ekranda ikon metnin ustune alinir, metin kartin tam
   genisligini kullanir. */
@media(max-width:520px){
 .guven>div{flex-direction:column;gap:7px;padding:12px 11px}
 .guven-i{flex:0 0 auto;width:34px;height:34px}
}

/* --- 3B motor bolumu ---
   Giristen buraya alindi: fotografli girisin yaninda dusuk poligonlu cizim
   ucuz duruyordu. Kendi koyu bolumunde, solda ne ise yaradigi yazili. */
.uc-boyut{padding:0!important;margin:34px 0}
.uc-boyut-ic{background:linear-gradient(135deg,#07253a,#0b3d5c 62%,#12507b);
 border-radius:18px;padding:26px 20px 10px;color:#fff;display:grid;gap:18px;
 box-shadow:0 18px 44px rgba(7,37,58,.22);overflow:hidden;position:relative}
.uc-boyut-ic::before{content:"";position:absolute;right:-120px;top:-140px;
 width:420px;height:420px;border-radius:50%;pointer-events:none;
 background:radial-gradient(circle,rgba(232,115,12,.30),transparent 68%)}
.uc-boyut-yazi{position:relative;z-index:1}
.uc-boyut h2{color:#fff;font-size:23px;line-height:1.24;margin:10px 0 12px;
 letter-spacing:-.4px}
.uc-boyut p{color:#cfe2ef;font-size:15.5px;line-height:1.62;margin:0 0 12px}
.uc-boyut-not{font-size:15px}
.uc-boyut-not a{color:#ffd0a3;font-weight:700}
.etiket{display:inline-block;background:rgba(232,115,12,.20);color:#ffc189;
 border:1px solid rgba(232,115,12,.42);border-radius:var(--hap);
 padding:5px 13px;font-size:12.5px;font-weight:800;letter-spacing:.7px;
 text-transform:uppercase}
@media(min-width:760px){
 .uc-boyut-ic{grid-template-columns:1fr 1fr;align-items:center;
  padding:34px 34px 14px}
 .uc-boyut h2{font-size:28px}
}


/* --- ana sayfa kategori izgarasi ---
   Bes kategori dortlu izgarada tek basina alta dusuyordu; kapak da 240x126'lik
   dar bir seritti. Bes sutun + 420x220 kapak: kart artik urunun ne oldugunu
   gosteriyor. */
/* Bes sutunda kart 1440 pikselde 130 piksele dusuyor, kapaktaki urun taninmiyordu
   (11 Eylul 2026 olcumu). Uc sutunda kart 280 piksel: kapak okunur boya cikiyor.
   Alti kutu var (bes kategori + "tumu" karti), izgara tam doluyor. */
.kat-izgara{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.kat-kart{display:flex;flex-direction:column;background:#fff;border:1px solid var(--cizgi);
 border-radius:var(--yuvarlak);overflow:hidden;box-shadow:var(--golge);
 text-decoration:none;color:inherit;transition:transform .16s,box-shadow .16s}
.kat-kart:hover{transform:translateY(-3px);box-shadow:var(--golge2)}
/* Kapak artik koyu studyo sahnesi: beyaz zemin gorsel yuklenene kadar bir kare
   beyaz flas birakiyordu. Zemin kapagin kendi koyusuyla ayni. */
.kat-gorsel{display:block;background:#0a2236;border-bottom:1px solid var(--cizgi)}
.kat-gorsel img{display:block;width:100%;height:auto;aspect-ratio:420/220;object-fit:cover}
/* govde flex + kat-adet'te margin-top:auto: ozet uc satir da olsa iki satir da
   olsa "136 urun ->" satiri her kartta ayni yukseklikte durur. min-height ile
   hizalamak yetmiyordu; Alicilar kartinin oku digerlerinden bir satir yukarida
   kaliyordu (11 Eylul 2026 olcumu). */
.kat-govde{display:flex;flex-direction:column;flex:1;padding:13px 14px 14px}
.kat-govde b{display:block;font-size:16px;font-weight:750;color:var(--metin);margin-bottom:5px}
.kat-ozet{display:block;font-size:13.5px;line-height:1.5;color:var(--soluk);
 margin-bottom:9px}
.kat-adet{display:flex;align-items:center;justify-content:space-between;
 margin-top:auto;font-size:13.5px;font-weight:700;color:var(--vurgu)}
.kat-adet i{font-style:normal;transition:transform .16s}
.kat-kart:hover .kat-adet i{transform:translateX(3px)}
@media(max-width:860px){.kat-izgara{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.kat-izgara{grid-template-columns:1fr}}

/* Altinci kutu: kategori degil, butun katalogun kapisi. Izgaranin bos kalan
   gozune "katalogun tamami" karti konunca hem izgara doluyor hem urun listesine
   ikinci bir ic link aciliyor. */
.kat-kart-tum{background:linear-gradient(150deg,#0b3d5c,#072b41);color:#fff;
 border-color:#0a3350;justify-content:center;align-items:flex-start;
 padding:26px 22px;gap:10px;min-height:100%}
.kat-kart-tum b{font-size:1.28rem;line-height:1.25}
.kat-kart-tum span{color:#c9dced;font-size:.94rem;line-height:1.55}
.kat-kart-tum i{display:inline-flex;align-items:center;gap:8px;font-style:normal;
 font-weight:700;color:var(--vurgu);margin-top:4px}
.kat-kart-tum:hover i{color:#ffa24d}

/* --- kategori giris blogu ---
   Kategori sayfasi H1'in hemen altindan urun izgarasina giriyordu: ne kapak
   gorseli, ne kategoriyi anlatan iki satir, ne de "bu kategoride hangi araliklar
   var" bilgisi vardi; kategori metni izgaranin ALTINDA, kimsenin gormedigi
   yerde duruyordu (11 Eylul 2026 olcumu). Giris blogu ucunu de basa alir. */
.kat-giris{display:grid;grid-template-columns:1fr 340px;gap:22px;align-items:center;
 background:#fff;border:1px solid var(--cizgi);border-radius:var(--yuvarlak);
 box-shadow:var(--golge);padding:20px 22px;margin:4px 0 22px}
.kat-giris p{margin:0 0 14px;font-size:15.5px;line-height:1.62;color:var(--metin)}
/* Gorsel sutunu bantla birlikte kalkinca kutu tek sutuna duser: 340 px'lik
   bos sag sutun kalmasin diye ayri sinif. Son ogenin alt boslugu da atilir,
   yoksa kutunun alti bir satir kadar bos duruyor. */
.kat-giris.tek{grid-template-columns:1fr;padding:17px 19px 6px}
.kat-giris.tek>div>:last-child{margin-bottom:12px}
.kat-giris img{display:block;width:100%;height:auto;aspect-ratio:640/336;
 object-fit:cover;border-radius:11px;border:1px solid var(--cizgi)}
.kunye{display:flex;flex-wrap:wrap;gap:9px;list-style:none;margin:0 0 13px;padding:0}
.kunye li{background:var(--zemin);border:1px solid var(--cizgi);border-radius:9px;
 padding:8px 12px;font-size:13.5px;color:var(--soluk);line-height:1.3}
.kunye b{display:block;font-size:16px;font-weight:780;color:var(--metin)}
/* Kunye kutulari icerik genisligindeydi ve mobilde kirilis dagiik cikiyordu:
   "77 urun listeleniyor" ve "1-99 kanal" ilk satiri doldurup "13 farkli marka"
   tek basina ve dar olarak alt satira dusuyordu - uc olcum gibi degil, kirik
   bir satir gibi duruyordu (11 Eylul 2026, kategori-otomatik-kepenk-
   kumandalari-mobil.png). Mobilde iki esit sutun; tek kalan son kutu satiri
   bosluk birakmasin diye tam genislige yayilir. */
@media(max-width:640px){
 .kunye{display:grid;grid-template-columns:1fr 1fr;gap:8px}
 .kunye li:last-child:nth-child(odd){grid-column:1/-1}
}
.cipler{display:flex;flex-wrap:wrap;gap:7px;align-items:center;font-size:13.5px;
 color:var(--soluk)}
.cipler a,.cipler span.cip{display:inline-flex;align-items:center;min-height:44px;
 padding:5px 13px;border-radius:99px;
 border:1px solid var(--cizgi);background:var(--zemin);text-decoration:none;
 color:var(--metin);font-weight:650;transition:border-color .16s,color .16s}
/* Sayfasi olan marka tiklanabilir; sayfasi olmayan duz cip. Ikisi ayni
   gorununce ziyaretci hangisinin link oldugunu deneyerek ogreniyordu. */
.cipler a{background:#fff;border-color:#c9d6e2;color:var(--vurgu)}
.cipler a:hover{border-color:var(--vurgu);box-shadow:var(--golge)}
.cipler span.cip{color:var(--soluk);font-weight:600}
@media(max-width:900px){.kat-giris{grid-template-columns:1fr;padding:16px}
 .kat-giris .gorsel-sut{order:-1}}

/* --- teslimat / bolge bolumu (yerel SEO) --- */
.bolge-izgara{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.bolge-kart{background:#fff;border:1px solid var(--cizgi);border-radius:var(--yuvarlak);
 padding:18px 16px;box-shadow:var(--golge)}
/* .guven-i flex cocugu olarak 38px; burada kart blok oldugu icin
   genislik acikca verilmezse ikon kutusu satir boyu uzuyor. */
.bolge-kart .guven-i{width:38px;margin-bottom:11px}
.bolge-kart b{display:block;font-size:16.5px;color:var(--metin);margin-bottom:6px}
.bolge-kart p{margin:0;font-size:15px;line-height:1.55;color:var(--soluk)}
.bolge-kart a{color:var(--vurgu);font-weight:700}
.bolge-ilce{margin-top:14px;background:var(--zemin);border:1px solid var(--cizgi);
 border-radius:var(--yuvarlak);padding:16px;font-size:15px;color:var(--soluk)}
.bolge-ilce b{color:var(--metin)}
.ilce-rozet{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px}
.ilce-rozet span{background:#fff;border:1px solid var(--cizgi);border-radius:999px;
 padding:5px 12px;font-size:13.5px;color:var(--metin)}
@media(max-width:900px){.bolge-izgara{grid-template-columns:1fr}}


/* --- bolum basligi --- */
/* Yapiskan baslik sayfa ici bagda bolum basligini ortuyordu. */
.bolum{padding:42px 0 6px;scroll-margin-top:86px}
.bolum-bas{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
 margin-bottom:18px}
/* baslik ustunde ince turuncu cizgi: bolumler birbirine yapisik duruyordu */
.bolum-bas h2{margin:0;font-size:23px;line-height:1.25;letter-spacing:-.4px;position:relative;
 padding-top:14px}
.bolum-bas h2::before{content:"";position:absolute;left:0;top:0;width:44px;height:4px;
 border-radius:3px;background:var(--vurgu)}
.bolum-bas a{font-size:16px;font-weight:700;color:var(--vurgu);white-space:nowrap;
 min-height:44px;display:flex;align-items:center}

/* --- urun izgarasi --- */
.izgara{display:grid;grid-template-columns:repeat(2,1fr);gap:11px}
.urun-kart{background:#fff;border:1px solid var(--cizgi);border-radius:var(--yuvarlak);
 overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--golge)}
.urun-kart{transition:box-shadow .18s,transform .18s}
.urun-kart:hover{box-shadow:var(--golge2);transform:translateY(-3px)}
/* gorsel uzerine gelince hafif yakinlasir: kart canli, tiklanabilir hissettirir */
.urun-kart .gorsel img{transition:transform .35s ease}
.urun-kart:hover .gorsel img{transform:scale(1.05)}
.urun-kart .gorsel{overflow:hidden}
.urun-kart .gorsel{aspect-ratio:1/1;background:#fff;display:grid;place-items:center;padding:9px;
 border-bottom:1px solid var(--cizgi)}
.urun-kart .gorsel img{max-height:100%;width:auto;object-fit:contain}
/* teknik rozet: ayni fotografi paylasan urun ailelerini (34 Mosel tup motor
   tek kare) gozle ayirmak icin fotografin sol ust kosesine basilan tek deger.
   position:relative kartin kendisine degil fotograf kutusuna verilir; kutu
   grid oldugu icin rozet akista yer kaplamasin diye mutlak konumlanir. */
.urun-kart .gorsel{position:relative}
.urun-kart .rozet{position:absolute;top:7px;left:7px;z-index:1;
 /* 11 px'ti: kartin uzerindeki tek teknik bilgi ("140 Nm", "Sel 1500")
    telefonda okunmuyordu - kategori sayfasinda 120 rozet 12 pikselin
    altindaydi (11 Eylul 2026 mobil olcumu). */
 background:rgba(11,61,92,.88);color:#fff;font-size:12px;font-weight:700;
 letter-spacing:.2px;line-height:1;padding:6px 9px;border-radius:999px;
 pointer-events:none;backdrop-filter:blur(2px)}
/* rehber/kategori kapagi urun fotografi degil, tam kanar bir gorsel:
   kare cerceve icinde contain kalinca etrafi bos beyazla doluyordu */
.urun-kart .gorsel.kapak{aspect-ratio:640/336;padding:0;background:#0b3d5c;display:block}
.urun-kart .gorsel.kapak img{width:100%;height:100%;max-height:none;object-fit:cover;
 display:block}
.urun-kart .govde{padding:10px 11px 12px;display:flex;flex-direction:column;flex:1;gap:7px}
.urun-kart h3 a{display:block;min-height:44px}
.urun-kart h3{font-size:16px;line-height:1.4;margin:0;font-weight:600;color:var(--metin);
 display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.urun-kart .fiyat{font-size:18px;font-weight:800;color:var(--koyu);margin-top:auto}
/* Bolum altindaki "tamamini gorun" baglantisi: izgaradan sonra ortada durur. */
.bolum-alt{margin:16px 0 0;text-align:center}
.bolum-alt a{display:inline-block;border:1px solid var(--cizgi);background:#fff;
 border-radius:30px;padding:11px 20px;font-weight:650;color:var(--koyu)}
.bolum-alt a:hover{border-color:var(--vurgu);text-decoration:none}

/* Teknik ozellik tablosu: dar ekranda yatay kaydirilir, sayfa govdesi kaymaz. */
.tablo-sar{overflow-x:auto;margin:10px 0 18px}
table.teknik{border-collapse:collapse;width:100%;font-size:15.5px;
 background:#fff;border:1px solid var(--cizgi);border-radius:10px}
table.teknik th,table.teknik td{padding:11px 14px;text-align:left;
 border-bottom:1px solid var(--cizgi);vertical-align:top}
table.teknik tr:last-child th,table.teknik tr:last-child td{border-bottom:0}
table.teknik th{width:40%;font-weight:650;color:var(--soluk);
 background:var(--zemin);white-space:nowrap}
table.teknik td{font-weight:600;color:var(--koyu)}

/* Kategori filtre seridi: yapiskan degil, listenin hemen ustunde durur. */
.filtre{margin:22px 0 6px;display:flex;flex-direction:column;gap:10px}
.filtre-satir{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.filtre-satir>span{font-size:14px;font-weight:700;color:var(--soluk);
 min-width:74px}
.filtre-satir button{background:#fff;border:1px solid var(--cizgi);
 border-radius:30px;padding:7px 14px;font:inherit;font-size:14.5px;
 font-weight:600;color:var(--koyu);cursor:pointer;display:inline-flex;
 /* 40 px'ti: filtre cubugu kategori sayfasinin en cok dokunulan yeri,
    dort piksel eksigi yuzunden yanlis markaya basiliyordu (11 Eylul 2026). */
 align-items:center;gap:6px;min-height:44px}
.filtre-satir button:hover{border-color:var(--vurgu)}
.filtre-satir button b{font-size:12px;font-weight:700;color:var(--soluk)}
.filtre-satir button.secili{background:var(--koyu);border-color:var(--koyu);
 color:#fff}
.filtre-satir button.secili b{color:#cfe0ec}
.filtre-sonuc{margin:0;font-size:14.5px;color:var(--soluk);min-height:1px}
@media(max-width:600px){
 /* Dar ekranda etiket ustte, cipler altta tek satirda kaydirilir. */
 .filtre-satir{display:block}
 .filtre-satir>span{display:block;margin-bottom:6px}
 .filtre-satir button{margin:0 6px 6px 0}
}
.urun-kart .kat{font-size:16px;color:var(--soluk)}
/* Rehber kartinda ozet: basligin altinda uc satir, sonrasi kirpilir.
   Sabit yukseklik vermek yerine -webkit-line-clamp kullanildi, boylece kisa
   ozetli kart bosluk birakmiyor. */
.urun-kart .kart-ozet{font-size:14.5px;line-height:1.5;color:var(--soluk);
 margin:6px 0 8px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
 overflow:hidden}
/* Dolu turuncu dugme her kartta tekrar edince 4x2 izgarada sekiz turuncu
   dikdortgen olusuyor ve urun fotograflari gorsel olarak kayboluyordu
   (11 Eylul 2026 olcumu). Cerceveli dugme ayni tikla alani birakir, turuncuyu
   fiyat ve tek ana cagriya saklar; uzerine gelince dolar. */
.urun-kart .ekle{background:#fff;color:var(--vurgu);border:1.5px solid var(--vurgu);
 border-radius:10px;min-height:46px;font-weight:700;font-size:16px;cursor:pointer;width:100%;
 transition:background .15s,color .15s}
.urun-kart .ekle:hover{background:var(--vurgu);color:#fff}
.urun-kart .ekle.eklendi{background:var(--yesil)}
.stok-yok{font-size:16px;color:#b02a2a;font-weight:700}
/* Fiyati girilmemis urun (502 urunun 388'i): "0 TL" yerine hatta yonlendirme.
   Rakam olmadigi icin fiyat satiri daha kucuk ve turuncu; sepet dugmesinin
   yerini ayni olculerde bir arama baglantisi alir, izgara hizasi bozulmaz. */
.urun-kart .fiyat-sor{font-size:16px;font-weight:750;color:var(--vurgu)}
.urun-kart .ekle-ara{display:flex;align-items:center;justify-content:center;gap:7px;
 background:#fff;color:var(--vurgu);border:1.5px solid var(--vurgu);border-radius:8px;
 min-height:46px;font-weight:700;font-size:16px;text-decoration:none;box-sizing:border-box}
.urun-kart .ekle-ara:hover{background:var(--vurgu);color:#fff}
.urun-bilgi .fiyat-sor-buyuk{font-size:24px;color:var(--vurgu);letter-spacing:-.3px}

/* --- urun sayfasi --- */
.urun-ust{display:grid;gap:16px;margin-top:14px}
.urun-gorsel{background:#fff;border:1px solid var(--cizgi);border-radius:var(--yuvarlak);padding:14px}
/* Urun fotograflari 1000x1000 kare (urun_gorsel_kare.py). Kutuyu da kare
   birakinca yatay duran uzun bir tup motor, 550 px'lik beyaz alanin
   ortasinda ince bir serit gibi kaliyordu (11 Eylul 2026 olcumu). Kutu
   4:3'e indirildi, gorsel "contain" ile icine oturuyor: urun ayni piksel
   genisliginde ama etrafindaki bos alan dortte bir azaldi. */
.urun-gorsel img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:contain}
.urun-bilgi .fiyat-blok{display:flex;align-items:baseline;gap:10px;margin:6px 0 4px}
.urun-bilgi .fiyat-buyuk{font-size:31px;font-weight:800;color:var(--koyu);letter-spacing:-.7px}
.urun-bilgi .eski{font-size:17px;color:var(--soluk);text-decoration:line-through}
.kdv-not{font-size:16px;color:var(--soluk);margin:0 0 14px}
.satin-al{display:flex;flex-direction:column;gap:9px;margin:16px 0}
.adet-satir{display:flex;gap:9px;align-items:stretch}
.adet{display:flex;border:1.5px solid var(--cizgi);border-radius:9px;overflow:hidden;background:#fff}
.adet button{width:46px;min-height:46px;border:0;background:#fff;font-size:20px;cursor:pointer;color:var(--koyu)}
.adet input{width:48px;border:0;text-align:center;font-size:16px;font-weight:700;
 -moz-appearance:textfield}
.adet input::-webkit-outer-spin-button,.adet input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.ozet-liste{list-style:none;padding:0;margin:14px 0;font-size:16px}
.ozet-liste li{display:flex;gap:9px;padding:7px 0;border-bottom:1px dashed var(--cizgi);color:var(--soluk)}
.ozet-liste li b{color:var(--metin);font-weight:600}
.ozet-liste svg{flex:0 0 auto;margin-top:3px}

/* --- sss (madde 7) --- */
.sss{margin:26px 0}
.sss details{background:#fff;border:1px solid var(--cizgi);border-radius:var(--yuvarlak);
 margin-bottom:9px;overflow:hidden}
.sss summary{padding:14px 44px 14px 15px;font-weight:650;cursor:pointer;position:relative;
 font-size:16.5px;line-height:1.45;list-style:none}
.sss summary::-webkit-details-marker{display:none}
.sss summary::after{content:"+";position:absolute;right:15px;top:12px;font-size:22px;
 color:var(--vurgu);font-weight:400}
.sss details[open] summary::after{content:"\2013"}
.sss .cevap{padding:0 15px 15px;color:var(--soluk);font-size:16px}

/* --- yorum / degerlendirme --- */
.yorumlar{display:grid;gap:11px}
.yorum{background:#fff;border:1px solid var(--cizgi);border-radius:var(--yuvarlak);padding:14px}
.yildiz{color:#f5a623;font-size:16px;letter-spacing:1px}
.yorum .kim{font-size:16px;color:var(--soluk);margin-top:7px}

/* --- ic linkleme kutusu (madde 3) --- */
.ilgili{background:#eef4f8;border:1px solid #d3e2ec;border-left:4px solid var(--vurgu);
 border-radius:var(--yuvarlak);padding:14px 15px;margin:22px 0}
.ilgili b{display:block;margin-bottom:7px;font-size:16.5px}
.ilgili ul{margin:0;padding-left:19px;font-size:16px}
.ilgili li{margin-bottom:5px}

/* --- rehber tarih satiri --- */
.yazi-tarih{display:flex;flex-wrap:wrap;gap:8px;align-items:center;
 margin:2px 0 18px;font-size:14.5px;color:var(--soluk)}
.yazi-tarih span{opacity:.5}

/* --- rehber ic gezinmesi (icindekiler) --- */
/* Numarali liste, iki sutun: 8-12 bolumluk uzun rehberde tek sutun ekranin
   yarisini yiyordu. Mobilde tek sutuna iner. Baglantilar gövdedeki h2
   id'lerine dusuyor (vk_ortak.icindekiler). */
.icindekiler{background:#fff;border:1px solid var(--cizgi);
 border-left:4px solid var(--vurgu);border-radius:var(--yuvarlak);
 padding:15px 17px 13px;margin:24px 0}
.icindekiler b{display:block;margin-bottom:9px;font-size:16.5px;
 letter-spacing:.2px}
.icindekiler ol{margin:0;padding-left:20px;columns:2;column-gap:26px;
 font-size:15.5px;line-height:1.55}
.icindekiler li{margin-bottom:6px;break-inside:avoid}
.icindekiler a{color:var(--koyu);text-decoration:none;
 border-bottom:1px solid transparent}
.icindekiler a:hover{color:var(--vurgu);border-bottom-color:var(--vurgu)}
/* Icindekiler baglari 22 px yuksekti: parmakla isabet ettirmek zor, yanlis
   baslıga gidiliyor (11 Eylul 2026 mobil olcumu, rehber sayfasinda 15 bag).
   Tek satirlik bir bag kutuya cevrilip 44 pikselin ustune cikariliyor;
   liste araligi ayni kalsin diye madde payi 6 -> 0. */
@media(max-width:640px){
 .icindekiler ol{columns:1;font-size:16px}
 .icindekiler li{margin-bottom:0}
 .icindekiler a{display:inline-flex;align-items:center;min-height:44px}
}
/* Sabit ust serit baglantiyi ortmesin: hedef baslik biraz asagi hizalanir. */
.yazi h2[id]{scroll-margin-top:14px}

/* --- yazar kutusu (E-E-A-T) --- */
.yazar{display:flex;gap:13px;background:#fff;border:1px solid var(--cizgi);
 border-radius:var(--yuvarlak);padding:15px;margin:26px 0;font-size:16px;color:var(--soluk)}
.yazar .rozet-i{flex:0 0 46px;height:46px;border-radius:50%;background:var(--koyu);color:#fff;
 display:grid;place-items:center;font-weight:800;font-size:16px}
.yazar b{color:var(--metin)}

/* --- iletisim / harita --- */
.harita{width:100%;height:290px;border-radius:var(--yuvarlak);border:1px solid var(--cizgi)}
.iletisim-izgara{display:grid;gap:14px;margin:18px 0}

/* --- form --- */
.form label{display:block;font-size:16px;font-weight:600;margin:0 0 5px}
.form input,.form select,.form textarea{width:100%;border:1.5px solid var(--cizgi);border-radius:9px;
 padding:12px 13px;font-size:16px;font-family:inherit;background:#fff;margin-bottom:13px}
.form textarea{min-height:110px;resize:vertical}
.form .onay{display:flex;gap:9px;align-items:flex-start;font-size:16px;color:var(--soluk);
 margin-bottom:14px}
.form .onay input{width:20px;height:20px;margin:2px 0 0;flex:0 0 auto}

/* --- sepet --- */
.sepet-satir{display:grid;grid-template-columns:64px 1fr;gap:12px;background:#fff;
 border:1px solid var(--cizgi);border-radius:var(--yuvarlak);padding:11px;margin-bottom:10px}
.sepet-satir img{width:64px;height:64px;object-fit:contain}
.sepet-satir h3{font-size:16px;margin:0 0 5px;font-weight:600}
.sepet-satir .alt{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px}
.sepet-satir .sil{background:0;border:0;color:#b02a2a;font-size:16px;cursor:pointer;padding:11px 0;min-height:44px}
.toplam{background:#fff;border:1px solid var(--cizgi);border-radius:var(--yuvarlak);padding:15px;
 margin:14px 0}
.toplam div{display:flex;justify-content:space-between;padding:6px 0;font-size:16px;color:var(--soluk)}
.toplam .buyuk{border-top:1px solid var(--cizgi);margin-top:7px;padding-top:11px;font-size:19px;
 font-weight:800;color:var(--metin)}
.bos-durum{text-align:center;padding:40px 16px;color:var(--soluk)}

/* --- alt bilgi --- */
footer{background:var(--koyu);color:#bcd5e5;margin-top:40px;padding:28px 0 96px;font-size:16px}
footer h4{color:#fff;font-size:17px;margin:0 0 10px}
footer a{color:#bcd5e5}
footer ul{list-style:none;margin:0 0 22px;padding:0}
footer li{margin-bottom:4px}
footer li a{display:inline-block;padding:8px 0;min-height:44px}
.footer-alt{border-top:1px solid rgba(255,255,255,.14);margin-top:14px;padding-top:16px;
 font-size:16px;color:#8fb0c6}

/* --- sabit telefon serit (madde 9) --- */
.sabit-cta{position:fixed;left:0;right:0;bottom:0;z-index:80;display:flex;gap:1px;
 box-shadow:0 -3px 14px rgba(0,0,0,.17)}
.sabit-cta a{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;min-height:54px;
 color:#fff;font-weight:700;font-size:16px}
.sabit-cta a:hover{text-decoration:none}
.sabit-cta .t{background:var(--vurgu)}
.sabit-cta .w{background:#22a355}
.sabit-cta .s{background:var(--koyu)}

/* --- yuzen WhatsApp dugmesi (masaustu) --- */
.yuzen-wa{display:none;position:fixed;right:22px;bottom:24px;z-index:85;
 align-items:center;gap:0;height:60px;padding:0 18px;border-radius:var(--hap);
 background:#22a355;color:#fff;font-weight:700;font-size:16px;
 box-shadow:0 10px 26px rgba(15,90,45,.42);transition:gap .18s,padding .18s}
.yuzen-wa svg{width:26px;height:26px;flex:none}
.yuzen-wa span{max-width:0;overflow:hidden;white-space:nowrap;opacity:0;
 transition:max-width .22s,opacity .18s}
.yuzen-wa:hover{text-decoration:none;gap:10px}
.yuzen-wa:hover span{max-width:190px;opacity:1}

/* --- 404 --- */
.dortyuz{text-align:center;padding:40px 0 20px}
.dortyuz .kod{font-size:76px;font-weight:800;color:var(--koyu);letter-spacing:-3px;line-height:1}

/* --- vaka / uygulama ornekleri (madde 6) --- */
.vaka{padding:16px 15px;margin:0 0 14px}
.vaka h3{margin:0 0 10px;font-size:18px;color:var(--koyu)}
.vaka-satir{display:grid;gap:2px;margin-bottom:11px}
.vaka-satir b{font-size:14.5px;text-transform:uppercase;letter-spacing:.6px;color:var(--vurgu)}
.vaka-satir p{margin:0;color:var(--soluk)}
/* Ornekte kullanilan gercek urun. Sayfa bastan asagi duz metindi; hesabin
   sonunda hangi parcanin takildigini fotografiyla gormek hem okumayi
   boluyor hem de urun sayfasina dogal bir ic link veriyor. Genis ekranda
   metnin sagina oturur, dar ekranda altina duser. */
.vaka-urun{display:flex;gap:13px;align-items:center;margin-top:13px;padding:11px 12px;
 background:var(--zemin);border:1px solid var(--cizgi);border-radius:11px;
 text-decoration:none;color:inherit;transition:border-color .16s,box-shadow .16s}
.vaka-urun:hover{border-color:var(--vurgu);box-shadow:var(--golge)}
.vaka-urun img{width:78px;height:78px;object-fit:contain;background:#fff;
 border:1px solid var(--cizgi);border-radius:9px;padding:5px;flex:0 0 auto}
.vaka-urun .et{display:block;font-size:12.5px;font-weight:750;text-transform:uppercase;
 letter-spacing:.6px;color:var(--vurgu);margin-bottom:3px}
.vaka-urun .ad{display:block;font-weight:700;color:var(--metin);line-height:1.35}
.vaka-urun .git{display:block;font-size:13.5px;color:var(--soluk);margin-top:3px}

/* --- ekip (madde 20) --- */
.ekip{display:grid;grid-template-columns:repeat(2,1fr);gap:13px}
.ekip figure{margin:0;background:#fff;border:1px solid var(--cizgi);
 border-radius:var(--yuvarlak);overflow:hidden;box-shadow:var(--golge)}
.ekip figcaption{padding:10px 11px 12px}
.ekip figcaption b{display:block;font-size:16px}
.ekip figcaption span{font-size:16px;color:var(--soluk)}

.notlar{font-size:16px;color:var(--soluk)}
/* satir ici linkler de parmakla acilabilsin: 44 px dokunma alani (mobil kirmizi cizgi) */
.kirinti a,.ilgili li a,.vk-guven li a,.footer-alt a,.yazar a,.uyari a,
.urun-bilgi .kat a,.bos-durum a:not(.dug),.metin li > a:only-child{display:inline-block;padding-block:13px;line-height:1.2}
.ilgili li,.vk-guven li{margin-bottom:0}
.footer-alt{display:flex;flex-wrap:wrap;align-items:center;gap:0 14px}
.footer-alt a{min-width:44px;text-align:center}
.uyari{background:#fff5e6;border:1px solid #ffd9a0;border-left:4px solid var(--vurgu);
 border-radius:8px;padding:12px 14px;font-size:16px;margin:16px 0}

/* --- marka kartlari (/marka/) --- */
.marka-izgara{display:grid;grid-template-columns:1fr;gap:12px;margin:16px 0 22px}
.marka-kart{display:block;background:var(--kart);border:1px solid var(--cizgi);
 border-radius:var(--yuvarlak);box-shadow:var(--golge);color:var(--metin);overflow:hidden}
.marka-kart img{display:block;width:100%;height:auto;aspect-ratio:640/336;object-fit:cover;
 background:#0b3d5c}
.marka-kart .ic{padding:14px 18px 16px}
.marka-kart:hover{box-shadow:var(--golge2);text-decoration:none}
.marka-kart h3{margin:0 0 5px;font-size:18.5px;color:var(--koyu)}
.marka-kart .sayi{margin:0 0 8px;font-size:14.5px;font-weight:700;color:var(--vurgu)}
.marka-kart p{margin:0;font-size:15.5px;color:#41525f}

/* ================= genis ekran ================= */
@media(min-width:700px){
 .izgara{grid-template-columns:repeat(3,1fr);gap:15px}
 .marka-izgara{grid-template-columns:repeat(3,1fr);gap:16px}
 .guven{grid-template-columns:repeat(4,1fr)}
 .ekip{grid-template-columns:repeat(4,1fr)}
 .vaka-satir{grid-template-columns:150px 1fr;gap:14px}
 h1{font-size:31px}
 .hero h1{font-size:46px}
 .hero p{font-size:18.5px}
 /* 700 px'ten sonra genis doku: dar surum bu genislikte yatay gerilip
    bulanik bir lekeye donusuyor. */
 /* Genis ekranda kume SAGDA duruyor, yazi solda: perde de yatay olmali,
    dikey perde urunun uzerine biniyordu. */
 .hero{padding:56px 0 60px;background-image:url(/gorsel/fon/hero-fon.webp);
  background-position:right center}
 .hero::before{background:linear-gradient(95deg,rgba(6,21,35,.92) 0%,
   rgba(6,21,35,.80) 34%,rgba(6,21,35,.34) 56%,rgba(6,21,35,.06) 72%,
   rgba(6,21,35,0) 100%)}
 .hero::after{height:70px}
 .hero-iki{padding-top:0}
 .bolum-bas h2{font-size:27px}
 .bolum{padding:52px 0 6px}
 .hero .dugler{flex-direction:row}
 /* Tek sutun: sag taraf artik HTML degil, fondaki urun fotografi. Yazi
    sutunu 52%'de duruyor ki kume perdenin disinda kalsin. */
 .hero-iki{grid-template-columns:minmax(0,52%);gap:36px}
 .urun-ust{grid-template-columns:1fr 1fr;gap:28px;align-items:start}
 .iletisim-izgara{grid-template-columns:1fr 1fr}
 .urun-kart h3{font-size:16px}
 footer .sar{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:26px}
 .footer-alt{grid-column:1/-1}
}
@media(min-width:960px){
 .izgara{grid-template-columns:repeat(4,1fr)}
 /* Referans sitede giris basligi 72 px; bizde 48 px kalinca bolum "kucuk
    kutu" gibi duruyordu. 58 px iki satirda ayni etkiyi veriyor. */
 .hero h1{font-size:58px;letter-spacing:-1.4px}
 /* 600 px asgari yukseklik olcumle bulundu: 2400x1150'lik fon 1440 px genis
    ekranda 0,6 olcegine iniyor (1440x690) ve daha kisa bir giriste motorun
    ust ucu kirpiliyordu. */
 .hero{padding:76px 0 80px;min-height:600px;display:flex;align-items:center}
 .hero>.sar{width:100%}
 .bolum{padding:56px 0 6px}
 .bolum-bas h2{font-size:30px;padding-top:18px}
 .bolum-bas h2::before{width:54px}
 nav.ana{display:flex;gap:20px;align-items:center}
 .menu-dug{display:none}
 .gezinme ul{justify-content:center}
 .sabit-cta{display:none}
 .yuzen-wa{display:inline-flex}
 footer{padding-bottom:30px}
 /* Masaustunde arama kutusu logonun hemen yaninda. DOM sirasi
    logo -> nav -> sepet -> arama oldugu icin yerlestirme `order` ile
    yapiliyor; boylece mobilde kutu yine en alta, kendi satirina duser. */
 .ara-kutu.gizli{display:block}
 .ara-kutu{flex:1 1 240px;order:1;min-width:190px;max-width:330px;padding:0}
 .ara-kutu input{font-size:15px;padding:10px 13px}
 .ara-kutu button{padding:0 15px;font-size:15px}
 .logo{order:0;flex:0 0 auto}
 /* alt basligi tek satirda tut: sarinca baslik bandi bir satir uzuyordu */
 .logo span{display:block;font-size:11.5px;white-space:nowrap}
 nav.ana{order:2;margin-left:auto;gap:17px}
 .sepet-dug{order:3;flex:0 0 auto}
 header .sar{gap:16px;flex-wrap:nowrap}
 nav.ana a{font-size:15.5px}
 .ara-dug{display:none}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.motor3d-alan{position:relative;width:100%;max-width:520px;aspect-ratio:1/1;
 margin:0 auto;touch-action:pan-y}
/* Temas golgesi: WebGL tuvali saydam oldugu icin motor kartin uzerinde
   havada asili duruyordu. Altina yayvan, yumusak bir golge konunca urun
   zemine oturuyor - studyo fotografindaki etki. */
.motor3d-alan::after{content:"";position:absolute;left:50%;bottom:19%;z-index:0;
 width:76%;height:12%;transform:translateX(-50%);pointer-events:none;
 background:radial-gradient(ellipse at center,rgba(14,48,74,.30) 0%,
  rgba(14,48,74,.16) 42%,rgba(14,48,74,0) 72%);filter:blur(2px)}
.motor3d-alan.yok::after{display:none}
.motor3d-alan canvas{position:relative;z-index:1;width:100%;height:100%;
 display:block;cursor:grab}
.motor3d-alan canvas:active{cursor:grabbing}
.motor3d-alan.yok canvas{display:none}
.motor3d-alan.yok{background:url(/gorsel/cizim/tup-motor-kesit.svg) center/contain no-repeat;
 aspect-ratio:860/490}
.motor3d-alan.yok .motor3d-not{display:none}
.motor3d-not{position:absolute;left:50%;bottom:4px;transform:translateX(-50%);
 font-size:12.5px;color:rgba(255,255,255,.72);white-space:nowrap;pointer-events:none}

/* --- hero gosterim karti --- */
/* Kart beyazdi; hero fotograf dokusuyla koyulastiktan sonra (11 Eylul 2026)
   sag tarafta parlak beyaz bir dikdortgen kalip zemine yapistirilmis gibi
   duruyordu. Yari saydam koyu cam hem dokunun icinden gecmesine izin veriyor
   hem de gri-turuncu cizimi one cikariyor. */
.hero-gorsel{background:linear-gradient(165deg,rgba(255,255,255,.13) 0%,
  rgba(255,255,255,.05) 58%,rgba(6,30,50,.34) 100%);
 border:1px solid rgba(255,255,255,.17);backdrop-filter:blur(7px);
 border-radius:22px;padding:14px 16px 16px;box-shadow:0 30px 64px rgba(3,20,33,.5),
 0 1px 0 rgba(255,255,255,.16) inset;max-width:540px;margin:0 auto}
.hero-gorsel-ust{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;
 letter-spacing:.06em;text-transform:uppercase;color:#a9c8dc;padding:2px 4px 10px}
.hero-nokta{width:8px;height:8px;border-radius:50%;background:var(--vurgu);flex:none;
 box-shadow:0 0 0 4px rgba(232,115,12,.24)}
.hero-gorsel-alt{font-size:13.5px;line-height:1.5;color:#bcd5e5;padding:8px 4px 0;
 border-top:1px solid rgba(255,255,255,.15);margin-top:6px}
.hero-gorsel .motor3d-alan{max-width:100%;aspect-ratio:5/4}

.hero-iki{display:grid;grid-template-columns:1.05fr .95fr;gap:26px;align-items:center}
@media(max-width:820px){.hero-iki{grid-template-columns:1fr;gap:10px}
 .hero-gorsel{max-width:100%;margin-top:16px;padding:12px 13px 13px}
 .hero-gorsel .motor3d-alan{aspect-ratio:4/3}
 .hero-gorsel-alt{font-size:13px}}