/* EMHA Karavan — site stili */

:root{
  --ink:#0F1A2E; --ink2:#2C3A52; --mute:#6B7688;
  --bg:#EDF0F4; --sur:#FFFFFF; --sur2:#F6F8FA; --line:#D6DCE5;
  --brand:#1F3C88; --brand-d:#14285C; --brand-soft:#E3E9F7;
  --ochre:#C98A2B; --ochre-d:#A86F1C;
  --ok:#1E8E5A; --wa:#25D366;
  --zebra:#EDF1F6; --vurgu:#FCE4AC;   /* panel: liste zebra satiri + kaydedilen kayit vurgusu */
  --shadow:0 10px 30px -14px rgba(15,26,46,.35);
  --r:14px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ink:#EDF1F7; --ink2:#C3CBD8; --mute:#8D98AA;
    --bg:#0D1422; --sur:#141C2C; --sur2:#1A2436; --line:#2A3448;
    --brand:#6C8DE0; --brand-d:#4E6FC4; --brand-soft:#1E2B4A;
    --ochre:#E0A24A; --ochre-d:#C98A2B;
    --shadow:0 10px 30px -14px rgba(0,0,0,.7);
    --zebra:#1A2539; --vurgu:#4D3B16;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --ink:#EDF1F7; --ink2:#C3CBD8; --mute:#8D98AA;
  --bg:#0D1422; --sur:#141C2C; --sur2:#1A2436; --line:#2A3448;
  --brand:#6C8DE0; --brand-d:#4E6FC4; --brand-soft:#1E2B4A;
  --ochre:#E0A24A; --ochre-d:#C98A2B;
  --shadow:0 10px 30px -14px rgba(0,0,0,.7);
  --zebra:#1A2539; --vurgu:#4D3B16;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Source Sans 3","Segoe UI",Roboto,Arial,sans-serif;font-size:16px;line-height:1.5;overflow-x:hidden}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
h1,h2,h3,h4{font-family:"Barlow Condensed","Arial Narrow",Arial,sans-serif;line-height:1.05;margin:0;text-wrap:balance;letter-spacing:.005em}
h1{font-size:clamp(40px,7vw,72px);font-weight:800;text-transform:uppercase}
h2{font-size:clamp(30px,4.5vw,46px);font-weight:700;text-transform:uppercase}
h3{font-size:24px;font-weight:700}
p{margin:0}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
img,svg{max-width:100%;display:block}
.wrap{width:min(1180px,100% - 32px);margin-inline:auto}
.eyebrow{font-family:"Barlow Condensed",Arial,sans-serif;font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:20px;color:var(--ochre);margin-bottom:4px}
.lead{font-size:18px;color:var(--ink2);max-width:60ch}
:focus-visible{outline:3px solid var(--ochre);outline-offset:2px}

/* ---- düğmeler ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 20px;border-radius:10px;border:1px solid transparent;cursor:pointer;text-decoration:none;font-weight:600;font-size:15px;transition:transform .12s,background .15s;white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn-p{background:var(--brand);color:#fff}.btn-p:hover{background:var(--brand-d)}
.btn-o{background:var(--ochre);color:#1a1200}.btn-o:hover{background:var(--ochre-d)}
.btn-g{background:transparent;border-color:var(--line);color:var(--ink)}.btn-g:hover{background:var(--sur2)}
.btn-wa{background:var(--wa);color:#04301a}.btn-wa:hover{filter:brightness(.95)}
.btn-s{min-height:38px;padding:0 14px;font-size:14px;border-radius:8px}
.btn-d{background:#B4382E;color:#fff}

/* ---- üst çubuk ---- */
.top{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--sur) 92%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
@supports not (background:color-mix(in srgb,red 50%,blue)){.top{background:var(--sur)}}
.top .wrap{display:flex;align-items:center;gap:18px;height:92px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.logo svg{width:66px;height:66px;flex:none}
.logo .wm{font-family:"Barlow Condensed",Arial,sans-serif;line-height:1;display:flex;flex-direction:row;align-items:baseline;gap:.3em;white-space:nowrap}
.logo .wm b{display:inline-block;font-size:44px;font-weight:800;letter-spacing:.04em}
.logo .wm span{display:inline-block;font-size:44px;font-weight:600;letter-spacing:.04em;color:var(--ink2)}
.nav{display:flex;gap:4px;margin-left:auto}
.nav a{padding:8px 12px;border-radius:8px;text-decoration:none;font-weight:600;color:var(--ink2);white-space:nowrap}
.nav a:hover{background:var(--sur2);color:var(--ink)}
.top .acts{display:flex;gap:8px;align-items:center}
.burger{display:none;width:44px;height:44px;border:1px solid var(--line);background:var(--sur);border-radius:10px;cursor:pointer;place-items:center}
.burger svg{width:22px;height:22px}
@media (max-width:1400px){.logo .wm b,.logo .wm span{font-size:38px}}
/* Menu daralma kademeleri 6 OGEYE gore ayarlidir (Ana Sayfa · Modeller · Yedek Parça ·
   Galeri · Hakkımızda · İletişim). Esikler 5 ogeye gore 1200/1040 idi; "Ana Sayfa"
   eklenince her esigin hemen ustunde kalan uc aralikta sayfa yana tasiyordu
   (olculdu: 1205-1255, 1045-1095, 905-980 px). Esikler yukari alindi ve 1000px'e bir
   kademe daha eklendi; boylece 901-1400 px arasi tasmasiz.
   BURGER ESIGI 900px'TE BIRAKILDI — mevcut davranis degismedi.
   Menuye yeni oge eklenirse bu esikler yeniden olculmelidir. */
@media (max-width:1280px){.logo svg{width:56px;height:56px}.logo .wm b,.logo .wm span{font-size:34px}.nav{gap:0}.nav a{padding:8px 9px;font-size:15px}.top .wrap{gap:12px}}
@media (max-width:1120px){.logo .wm b,.logo .wm span{font-size:28px}.nav a{padding:8px 7px;font-size:14px}.btn-s{padding:0 10px}}
@media (max-width:1000px){.logo svg{width:46px;height:46px}.logo .wm b,.logo .wm span{font-size:24px}.nav a{padding:8px 4px;font-size:13px}}
@media (max-width:900px){
  .nav{display:none}
  .burger{display:grid}
  .top .acts .btn-hide{display:none}
  .top .wrap{height:76px;gap:8px}.top .logo{flex:1;min-width:0;gap:8px}.top .acts{margin-left:auto;flex:none}.logo svg{width:52px;height:52px}.logo .wm b,.logo .wm span{font-size:clamp(20px,9.2vw,40px)}
  .nav.open{top:76px}
  .nav.open{display:flex;position:absolute;left:0;right:0;top:92px;flex-direction:column;background:var(--sur);border-bottom:1px solid var(--line);padding:10px 16px 16px;box-shadow:var(--shadow)}
  .nav.open a{padding:14px 12px;border-bottom:1px solid var(--line)}
  .nav.open .mob{display:block;font-weight:700;color:var(--brand)}   /* yonetim girisi yalniz mobil menude */
}

/* ---- hero ---- */
.hero{position:relative;overflow:hidden;background:linear-gradient(125deg,#6E0F1C 0%,#8F1626 45%,#A61B2B 100%);color:#FFF6F3}
:root[data-theme="dark"] .hero{background:linear-gradient(125deg,#4E0A13 0%,#761221 45%,#8F1626 100%)}
.hero::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.22) 1.2px,transparent 1.3px);background-size:14px 14px;-webkit-mask-image:linear-gradient(115deg,transparent 45%,#000 100%);mask-image:linear-gradient(115deg,transparent 45%,#000 100%);opacity:.5}
.hero .wrap{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:32px;align-items:center;padding:56px 0 48px}
.hero .eyebrow{color:#F6D58A}
.hero h1{margin:12px 0 16px}
.hero h1 em{font-style:normal;color:#F6D58A}
.hero .lead{color:#F3D9D6;margin-bottom:26px}
.hero .cta{display:flex;flex-wrap:wrap;gap:10px}
.hero .art{filter:drop-shadow(0 30px 40px rgba(0,0,0,.45))}
.hero .art svg{width:100%;height:auto}
.hero .facts{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:26px;color:#F3D9D6;font-size:14px}
.hero .facts b{color:#fff;font-family:"Barlow Condensed",Arial,sans-serif;font-size:20px;font-weight:700;margin-right:4px}
@media (max-width:900px){.hero .wrap{grid-template-columns:1fr;padding:34px 0 30px}.hero .art{order:-1;width:min(420px,100%);margin-inline:auto}}

/* ---- bölümler ---- */
section.blk{padding:64px 0}
@media (max-width:700px){section.blk{padding:44px 0}}
.head{display:flex;align-items:end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:26px}
.head p{color:var(--mute);max-width:56ch}

.why{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.why div{background:var(--sur);border:1px solid var(--line);border-radius:var(--r);padding:20px}
.why svg{width:34px;height:34px;color:var(--brand);margin-bottom:12px}
.why h3{font-size:22px;margin-bottom:6px}
.why p{color:var(--ink2);font-size:15px}
@media (max-width:900px){.why{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.why{grid-template-columns:1fr}}

/* kategoriler */
.chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.chip{flex:none;border:1px solid var(--line);background:var(--sur);border-radius:999px;padding:9px 16px;cursor:pointer;font-weight:600;font-size:14px;color:var(--ink2)}
.chip[aria-pressed="true"]{background:var(--brand);border-color:var(--brand);color:#fff}
.chip small{font-weight:400;opacity:.75;margin-left:4px}

/* model kartları */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:22px}
@media (max-width:1000px){.grid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.grid{grid-template-columns:1fr}}
.card{background:var(--sur);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow)}
.card .pic{aspect-ratio:4/3;background:var(--sur2);display:grid;place-items:center;position:relative;overflow:hidden}
.card .pic img,.card .pic svg{width:100%;height:100%;object-fit:contain;position:relative;z-index:1}
/* Ikinci fotograf ilkinin USTUNE biner; fare karta gelince gorunur.
   Amac: "burada daha fazlasi var" hissi vermek, detaya girisi artirmak.
   YALNIZ FARELI CIHAZDA (@media hover:hover): dokunmatikte karta deger degmez
   sayfa kaydirilirken fotograflar yanip sonerdi; ayrica telefonda karta dokunmak
   zaten detay sayfasina gitmek demek. Ikinci fotograf yoksa .k2 hic basilmaz. */
.card .pic .k2{position:absolute;inset:0;opacity:0;transition:opacity .25s ease;z-index:1}
@media (hover:hover) and (pointer:fine){ .card:hover .pic .k2{opacity:1} }
@media (prefers-reduced-motion:reduce){ .card .pic .k2{transition:none} }
/* pazaryeri gorunumu: resim tam gosterilir, bos kalan kenarlar ayni fotografin bulanik kopyasiyla dolar.
   YALNIZ LISTE KARTLARI icindir. Detay sayfasindaki buyuk fotograf (.dgal .big) bu dolguyu
   KULLANMAZ: orada kutu fotografin kendisi kadardir, bos kenar hic olusmaz (bkz. .detay .dgal .big). */
.card .pic::before{content:'';position:absolute;inset:-14px;background:var(--bg,none) center/cover no-repeat;filter:blur(16px) saturate(1.15);opacity:.8;z-index:0}
.card .tag{z-index:2}
.card .tag{position:absolute;left:12px;top:12px;background:rgba(15,26,46,.85);color:#fff;font-size:12px;font-weight:600;padding:5px 10px;border-radius:999px;letter-spacing:.04em}
.card .bd{padding:16px 18px 18px;display:flex;flex-direction:column;gap:10px;flex:1}
.card h3{font-size:26px}
/* Aciklama alani SABIT 3 satir: 2 aciklama satiri + "…devamı".
   Her kartta ayni yeri kaplar; uzun satir "…" ile kesilir, tamami detay sayfasinda.
   Yukseklik: 3 x 22px satir + 2 x 2px bosluk = 70px. */
.card .sm{color:var(--ink2);font-size:15px;height:70px;overflow:hidden}
/* TELEFONDA (<=600px) kartlar zaten TEK SUTUN (bkz. .grid medya sorgusu, satir 134):
   yan yana kart olmadigi icin sabit yukseklik ise yaramiyor, sadece 1 satirlik
   aciklamada altta 26px bosluk birakiyordu. Burada aciklama icerigi kadar yer kaplar.
   601px ve ustunde (2-3 sutun) 70px SABIT KALIR — fiyat hizasi oradan gelir. 22.09.2026 */
@media (max-width:600px){.card .sm{height:auto}}
.card .sm .s{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:22px}
.card .sm .devam{display:block;line-height:22px;font-size:14px;font-weight:700;
  color:var(--brand);text-decoration:underline;white-space:nowrap}
.card .sm .devam:hover{color:var(--brand-d)}
/* aciklama satirlari: her satir kendi blogu — alt alta durur, yan yana birlesip kaymaz */
.card .sm .s,.detay .lead .s{display:block}
.card .sm .s + .s{margin-top:2px}
.detay .lead .s + .s{margin-top:3px}
.specs{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:4px;font-variant-numeric:tabular-nums}
.specs div{background:var(--sur2);border-radius:8px;padding:8px 6px;text-align:center}
.specs b{display:block;font-family:"Barlow Condensed",Arial,sans-serif;font-size:19px;font-weight:700;line-height:1;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Etiket ("KG BOŞ") tek satirda kalir: dar sutunda alt satira dusup kutuyu 83px'e
   cikariyor, ayni siradaki kartlarla yukseklik farki yaratiyordu (320px ve 620px). */
.specs span{font-size:11px;color:var(--mute);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
/* Tuslar fotografin HEMEN ALTINDA (22.09.2026). Onceden kartin en altindaydi;
   aciklama uzun olan modelde telefonda ekrandan tasip kayboluyordu. */
.card .ft{display:flex;gap:8px;padding-top:6px}
.card .ft.ust{margin-top:0;padding:14px 18px 0}
/* Kart alt tuslari (İncele / Sor / WhatsApp'tan sipariş) .btn-s kullanir (38px).
   Parmakla basmak icin kucuk kaliyordu; dokunma hedefi en az 44 px olmali.
   .btn-s GENELINE dokunulmadi — panelde de kullaniliyor, orada 38px kaliyor. */
.card .ft .btn{flex:1;min-height:44px}
.empty{grid-column:1/-1;text-align:center;color:var(--mute);padding:40px 0}
.pgrid{grid-template-columns:repeat(4,1fr)}
@media (max-width:1100px){.pgrid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:760px){.pgrid{grid-template-columns:1fr 1fr;gap:12px}}
@media (max-width:400px){.pgrid{grid-template-columns:1fr}}
.pcard .pic{aspect-ratio:1/1;background:var(--sur2)}
.pcard .pic img{object-fit:contain;padding:10px}
.pcard h3{font-size:21px;line-height:1.1}
.pcard .bd{padding:14px 14px 14px;gap:8px}
.pcard .fiyat{font-family:"Barlow Condensed",Arial,sans-serif;font-size:26px;font-weight:800;color:var(--brand);font-variant-numeric:tabular-nums;line-height:1}
.pcard .fiyat small{font-size:13px;font-weight:600;color:var(--mute);font-family:"Source Sans 3",sans-serif;margin-left:6px}
.pcard .stok{font-size:12px;font-weight:700;color:var(--ok)}.pcard .stok.yok{color:#B4382E}
/* Fiyat satiri: fiyat ustte, stok rozeti hemen altinda.
   Onceki hali flex + flex-wrap idi; stok rozeti sigmayinca satir 178px'e kadar uzayip
   karti 163px sisiriyor, o satirdaki tum kartlari birlikte buyutuyordu. */
.pcard .pfs{display:block}
.pcard .pfs .stok{display:block;margin-top:5px;white-space:nowrap}
.pcard .fiyat{white-space:nowrap}
.pcard .ft .btn{flex:1;min-height:44px}
@media (max-width:760px){
  .pcard .ft{flex-direction:column}
  /* telefon: parmak hedefi biraz daha buyuk */
  .card .ft .btn,.pcard .ft .btn{min-height:48px;font-size:15px}
}

/* galeri */
.gal{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:170px;gap:12px}
.gal figure{margin:0;border-radius:12px;overflow:hidden;background:var(--sur2);position:relative;cursor:pointer}
.gal figure:nth-child(1){grid-column:span 2;grid-row:span 2}
.gal figure img,.gal figure svg{width:100%;height:100%;object-fit:cover}
.gal .galac{display:block;width:100%;height:100%;padding:0;border:none;background:none;cursor:zoom-in;position:relative}
.gal figcaption{position:absolute;left:0;right:0;bottom:0;padding:10px 12px;background:linear-gradient(transparent,rgba(0,0,0,.65));color:#fff;font-size:13px;font-weight:600}
@media (max-width:800px){.gal{grid-template-columns:1fr 1fr;grid-auto-rows:150px}.gal figure:nth-child(1){grid-column:span 2;grid-row:span 1}}

/* hakkımızda */
.about{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center}
.about .ph{border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);max-width:380px;justify-self:center}
.about .ph img{width:100%;height:auto}
.about .txt p{color:var(--ink2);margin-top:14px;max-width:58ch}
.about ul{margin:16px 0 0;padding:0;list-style:none;display:grid;gap:8px}
.about li{display:flex;gap:10px;align-items:start;color:var(--ink2)}
.about li::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--ochre);margin-top:9px}
@media (max-width:800px){.about{grid-template-columns:1fr}.about .ph{order:-1}}

/* iletişim */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:24px}
@media (max-width:800px){.contact{grid-template-columns:1fr}}
.box{background:var(--sur);border:1px solid var(--line);border-radius:var(--r);padding:22px}
.box h3{margin-bottom:12px}
.info{display:grid;gap:14px}
.info a{text-decoration:none;display:inline-block;padding:6px 0;font-weight:700;color:var(--brand);font-size:18px;align-self:flex-start}
.info>div{display:flex;gap:12px;align-items:flex-start}
.info>div>div{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.info svg{width:22px;height:22px;color:var(--brand);flex:none;margin-top:2px}
.info b{display:block;font-size:12px;line-height:1.2;color:var(--mute);letter-spacing:.08em;text-transform:uppercase;font-weight:700}
.map{margin-top:16px;border-radius:12px;background:var(--sur2);border:1px dashed var(--line);padding:18px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.f{display:grid;gap:12px}
.f label{display:grid;gap:5px;font-size:14px;font-weight:600;color:var(--ink2)}
.f input,.f select,.f textarea{width:100%;min-height:44px;border:1px solid var(--line);background:var(--sur);border-radius:9px;padding:10px 12px;font-size:16px}
.f textarea{min-height:100px;resize:vertical}
.f .row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:520px){.f .row{grid-template-columns:1fr}}
.note{font-size:13px;color:var(--mute)}
.alert{display:none;border-radius:10px;padding:12px 14px;font-weight:600;background:#E1F5EA;color:#0F5A34;border:1px solid #9FD9B8}
.alert.show{display:block}

.soc{display:flex;flex-wrap:wrap;gap:8px}
.soc a{display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:0 14px 0 10px;border-radius:999px;border:1px solid var(--line);background:var(--sur);color:var(--ink);text-decoration:none;font-weight:600;font-size:14px}
.soc a:hover{background:var(--sur2)}
.soc svg{width:22px;height:22px;flex:none}
.soc a.ig svg{color:#D6336C}.soc a.fb svg{color:#1877F2}.soc a.yt svg{color:#E62117}.soc a.tt svg{color:var(--ink)}.soc a.x svg{color:var(--ink)}.soc a.in svg{color:#0A66C2}.soc a.wa svg{color:#25D366}
.soc.dark a{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);color:#fff}
.soc.dark a:hover{background:rgba(255,255,255,.16)}
.soc.dark a.tt svg,.soc.dark a.x svg{color:#fff}
.soc.ico a{padding:0;width:42px;justify-content:center}.soc.ico a span{display:none}
.share{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.share .lbl{font-family:"Barlow Condensed",Arial,sans-serif;font-size:15px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);margin-right:4px}
.share button,.share a{display:inline-flex;align-items:center;gap:6px;min-height:38px;padding:0 12px;border-radius:8px;border:1px solid var(--line);background:var(--sur);color:var(--ink);cursor:pointer;font-weight:600;font-size:14px;text-decoration:none}
.share button:hover,.share a:hover{background:var(--sur2)}
.share svg{width:18px;height:18px}
.takip{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:center}
@media (max-width:800px){.takip{grid-template-columns:1fr}}
.mobsoc{display:none}
@media (max-width:900px){.nav.open .mobsoc{display:flex;padding:14px 12px 4px;border:none}}
footer{background:var(--ink);color:#B7C0CF;padding:36px 0 90px}
:root[data-theme="dark"] footer{background:#08101F}
footer .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center;font-size:14px}
footer .logo{color:#fff}footer .logo .wm span{color:#C9D1DE}footer .logo svg{width:44px;height:44px}footer .logo .wm b,footer .logo .wm span{font-size:26px}
footer a{color:#DCE2EC}

.fab{position:fixed;right:16px;bottom:16px;z-index:60;display:flex;align-items:center;gap:10px;background:var(--wa);color:#04301a;border-radius:999px;padding:12px 18px 12px 14px;text-decoration:none;font-weight:700;box-shadow:0 10px 26px -8px rgba(0,0,0,.5)}
.fab svg{width:26px;height:26px}
@media (max-width:520px){.fab span{display:none}.fab{padding:14px}.logo svg{width:44px;height:44px}}

/* ---- modal ---- */
.ov{position:fixed;inset:0;background:rgba(6,10,20,.66);z-index:80;display:none;align-items:center;justify-content:center;padding:16px}
.ov.show{display:flex}
.md{background:var(--sur);color:var(--ink);border-radius:18px;width:min(980px,100%);max-height:calc(100dvh - 32px);max-height:calc(100vh - 32px);overflow:auto;position:relative;box-shadow:0 30px 60px -20px rgba(0,0,0,.6)}
.md .x{position:sticky;top:0;float:right;margin:12px 12px 0 0;width:40px;height:40px;border-radius:50%;border:none;background:var(--sur2);cursor:pointer;font-size:20px;z-index:2}
.md .in{padding:8px 24px 28px;clear:both}
/* Küçük resim şeridi büyük fotoğrafın ALTINDA, tek satır yatay.
   Eskiden sağda dikeydi: 14 resimde 1070px yer kaplayıp sayfayı uzatıyor,
   model adını ekranın dışına itiyordu. Yatayda resim sayısı ne olursa olsun ~91px. */
.dgal{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.dgal .big{aspect-ratio:16/10;border-radius:12px;overflow:hidden;background:var(--sur2)}
.dgal .big{position:relative}.dgal .big img,.dgal .big svg{width:100%;height:100%;object-fit:contain;position:relative;z-index:1}.dgal .big a{display:block;height:100%}
/* Fotoğrafa tıklamak sıradaki fotoğrafa geçirir; büyütme ayrı düğmededir.
   Yatay sürükleme de fotoğrafı değiştirir; touch-action:pan-y dikey sayfa kaydırmasını serbest bırakır. */
.dgal .big{touch-action:pan-y;-webkit-user-select:none;user-select:none}
.dgal .big .ileri{display:block;width:100%;height:100%;padding:0;border:none;background:none;cursor:pointer}
.dgal .big img{will-change:transform,opacity;-webkit-user-drag:none}
.dgal .big.suru,.dgal .big.suru .ileri,.dgal .big.suru img{cursor:grabbing}
.dgal .big .buyutBtn{position:absolute;right:10px;bottom:10px;z-index:3;display:inline-flex;align-items:center;gap:6px;
  min-height:38px;padding:0 14px;border:none;border-radius:10px;background:rgba(15,26,46,.72);color:#fff;
  font-weight:600;font-size:14px;cursor:zoom-in;backdrop-filter:blur(2px)}
.dgal .big .buyutBtn:hover{background:rgba(15,26,46,.9)}
.dgal .big .buyutBtn span{font-size:16px;line-height:1}
.dgal .big.oynat .buyutBtn{display:none}
/* Büyük fotoğrafta sol/sağ gezinme okları (tam ekran görüntüleyicideki ‹ › ile aynı üslup). */
.dgal .big .dok{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:52px;height:52px;padding:0 0 4px;
  border:none;border-radius:50%;background:rgba(15,26,46,.62);color:#fff;font-size:32px;line-height:1;cursor:pointer;
  display:grid;place-items:center;opacity:.88;backdrop-filter:blur(2px);transition:background .15s,opacity .15s}
.dgal .big .dok:hover{background:rgba(15,26,46,.9);opacity:1}
.dgal .big .dsol{left:10px}.dgal .big .dsag{right:10px}
.dgal .big.oynat .dok{display:none}
@media (max-width:520px){
  .dgal .big .buyutBtn{right:8px;bottom:8px;padding:0 12px;font-size:13px}
  .dgal .big .dok{width:44px;height:44px;font-size:26px}
  .dgal .big .dsol{left:6px}.dgal .big .dsag{right:6px}
}
/* ---- yatay kaydırmalı küçük resim şeridi ----
   min-width:0 ŞART: grid/flex içindeki çocuk varsayılan olarak içeriği kadar genişler,
   overflow-x devreye girmez ve şerit sayfayı yatay taşırır. */
.seritSar{position:relative;min-width:0}
.dgal .th{display:flex;gap:8px;min-width:0;max-width:100%;overflow-x:auto;scroll-behavior:smooth;
  padding:2px;scrollbar-width:none;-webkit-overflow-scrolling:touch;touch-action:pan-x}
.dgal .th::-webkit-scrollbar{display:none}
.dgal .th button{flex:none;width:116px;height:87px;border:2px solid transparent;border-radius:9px;padding:0;
  overflow:hidden;background:var(--sur2);cursor:pointer}
.dgal .th button[aria-current="true"]{border-color:var(--brand)}
.dgal .th img,.dgal .th svg{width:100%;height:100%;object-fit:contain}
/* Şerit oku: kare yüksekliğinin yarısı (87/2 ≈ 44) — büyük fotoğraftaki ‹ › ile aynı üslup. */
.seritSar .sok{position:absolute;top:50%;transform:translateY(-50%);z-index:4;width:44px;height:44px;padding:0 0 3px;
  border:none;border-radius:50%;background:rgba(15,26,46,.62);color:#fff;font-size:27px;line-height:1;
  display:none;place-items:center;cursor:pointer;backdrop-filter:blur(2px);transition:background .15s}
.seritSar .sok:hover{background:rgba(15,26,46,.9)}
.seritSar .sok.gorun{display:grid}
.seritSar .ssol{left:2px}.seritSar .ssag{right:2px}
@media (max-width:640px){
  .dgal .th button{width:96px;height:72px}
  .seritSar .sok{width:40px;height:40px;font-size:24px}
}
.dtop{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;margin:16px 0 6px}
.dtop h2{font-size:38px;text-transform:none}
.pill{font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px;background:var(--brand-soft);color:var(--brand)}
.pill.ok{background:#E1F5EA;color:#0F5A34}
/* "Stokta kalmadı" rozeti — model ve parca detayinda ayni gorunur. */
.pill.yok{background:#FBE6E4;color:#B4382E}
.dcols{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;margin-top:18px}
@media (max-width:760px){.dcols{grid-template-columns:1fr}}
table.spec{width:100%;border-collapse:collapse;font-size:15px;font-variant-numeric:tabular-nums}
table.spec th,table.spec td{text-align:left;padding:9px 6px;border-bottom:1px solid var(--line);vertical-align:top}
table.spec th{color:var(--mute);font-weight:600;width:44%}
.don h4{font-family:"Barlow Condensed",Arial,sans-serif;font-size:19px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);margin:16px 0 8px}
.don ul{margin:0;padding:0;list-style:none;display:grid;gap:6px;font-size:15px}
.don li{display:flex;gap:8px}
.don li::before{content:"✓";color:var(--ok);font-weight:700}
.don li.op::before{content:"+";color:var(--ochre)}

/* =================== YÖNETİM =================== */
#admin{display:none;min-height:100vh;background:var(--bg)}
body.adm #site,body.adm .fab{display:none}
body.adm #admin{display:block}
.login{min-height:100vh;display:grid;place-items:center;padding:20px;background:var(--ink)}
.login .box{width:min(400px,100%);padding:28px}
.login .logo{margin-bottom:18px}.login .logo svg{width:48px;height:48px}.login .logo .wm b,.login .logo .wm span{font-size:28px}
.login .err{display:none;color:#B4382E;font-weight:600;font-size:14px}
.login .err.show{display:block}
.ash{display:grid;grid-template-columns:230px 1fr;min-height:100vh}
.side{background:linear-gradient(180deg,#7A1322 0%,#5E0C18 55%,#450811 100%);color:#F3D9D6;padding:18px 14px;display:flex;flex-direction:column;gap:6px;box-shadow:inset -1px 0 0 rgba(0,0,0,.35),inset 0 0 60px rgba(0,0,0,.28);position:relative}
.side::before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 60% at 0% 0%,rgba(255,255,255,.10),transparent 60%)}
.side .logo{color:#fff;margin:4px 8px 18px}.side .logo .wm span{color:#F0C4BE}.side .logo svg{width:40px;height:40px}.side .logo .wm b,.side .logo .wm span{font-size:22px}
.side button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:none;background:transparent;color:inherit;padding:11px 12px;border-radius:9px;cursor:pointer;font-weight:600;font-size:15px}
.side button svg{width:20px;height:20px;opacity:.85}
.side button{position:relative}.side button:hover{background:rgba(255,255,255,.08)}.side button[aria-current="true"]{background:rgba(255,255,255,.16);color:#fff;box-shadow:0 2px 8px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.12)}
.side .sp{flex:1}
.main{padding:22px 26px 60px;min-width:0}
/* Islem cubugu: her sayfada ayni yerde, kaydirinca tepede yapisik kalir.
   --barTop: masaustunde 0; mobilde ustteki yapiskan menunun yuksekligi (JS olcer). */
.abar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  position:sticky;top:var(--barTop,0px);z-index:30;background:var(--bg);
  margin:-22px 0 18px;padding:14px 0;border-bottom:1px solid var(--line)}
.abar h2{text-transform:none;font-size:26px;line-height:1.1}
.abar .acts{display:flex;gap:8px;flex-wrap:wrap}
/* Enter ile gonderimi koruyan gorunmez dugme (display:none OLMAMALI, yoksa Enter calismaz) */
.gonder-gizli{position:absolute;width:1px;height:1px;padding:0;margin:-1px;border:0;opacity:0;overflow:hidden;clip-path:inset(50%);pointer-events:none}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.tile{background:var(--sur);border:1px solid var(--line);border-radius:12px;padding:16px 18px}
.tile b{display:block;font-family:"Barlow Condensed",Arial,sans-serif;font-size:40px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.tile span{font-size:13px;color:var(--mute);letter-spacing:.05em;text-transform:uppercase;font-weight:600}
@media (max-width:1100px){.tiles{grid-template-columns:1fr 1fr}}
.tbl{width:100%;border-collapse:collapse;background:var(--sur);border:1px solid var(--line);border-radius:12px;overflow:hidden;font-size:15px}
.tbl th,.tbl td{padding:11px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
.tbl th{background:var(--sur2);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.tbl tr:last-child td{border-bottom:none}
.tbl .mini{width:64px;min-width:64px;height:44px;border-radius:6px;object-fit:contain;background:var(--sur2)}
.tbl .acts{display:flex;gap:6px;flex-wrap:wrap}
/* Zebra — yalniz Modeller + Yedek Parca (class="tbl zebra"), 22.09.2026. Ilk satir baslik (th),
   veri satirlari 2. cocuktan baslar; 2., 4., 6. … veri satiri acik gri. Telefonda (<=760px)
   tablo zaten ayri kartlara donustugu icin zebra yok. */
@media (min-width:761px){.tbl.zebra tr:nth-child(odd):not(:first-child) td{background:var(--zebra)}}
/* Kaydedilen kayit vurgusu (panel.js ldUygula): hucreyi kaplayan ic golge 2.6 sn'de soner.
   Zemin (zebra) degismez, bitince titreme olmaz. Hareket azaltma acikken (genel kural tum
   animasyonlari kapatir) vurgu sabit durur, sinifi JS 2.6 sn sonra kaldirir. */
@keyframes kayitVurgu{0%,40%{box-shadow:inset 0 0 0 100vmax var(--vurgu)}100%{box-shadow:inset 0 0 0 100vmax transparent}}
.tbl tr.vurgu td{animation:kayitVurgu 2.6s ease-out}
@media (prefers-reduced-motion:reduce){.tbl tr.vurgu td{box-shadow:inset 0 0 0 100vmax var(--vurgu)}}
/* Dar pencerede tablo sikisip metinleri 3 satira sarmasin: en az bu genislikte kalir,
   sigmayinca .scroll yatay kaydirir (kaydirma cubugu bilerek belirgin). */
.tbl{min-width:660px}
.tbl.genis{min-width:940px}
.scrollSar{position:relative}
/* Tablonun kendi cubugu GIZLI: tablonun en dibinde kaldigi icin gormek ya da tutmak icin
   sayfayi sonuna kadar indirmek gerekiyordu. Yerine asagidaki yapiskan cubuk kullanilir. */
.scroll{overflow-x:auto;border-radius:12px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.scroll::-webkit-scrollbar{height:0;display:none}
/* Ekranin altina yapisan KALIN kaydirma cubugu: tablo goruntudeyken HEP gorunur.
   Tarayicinin kendi cubugu kullanilmiyor (isletim sistemine gore ince cizilebiliyor ya da
   hic gorunmuyor); tutamac elle cizilir, boylece kalinligi ve rengi her yerde ayni. */
.scrollBar{display:none;position:sticky;bottom:10px;z-index:25;height:32px;margin-top:10px;padding:4px;
  background:var(--sur2);border:1px solid var(--line);border-radius:16px;box-shadow:0 4px 14px rgba(15,26,46,.18);
  cursor:pointer;touch-action:none;-webkit-user-select:none;user-select:none}
.scrollBar.gorun{display:block}
.scrollTut{height:100%;min-width:64px;border-radius:12px;background:var(--brand);cursor:grab}
.scrollBar:hover .scrollTut{background:var(--brand-d)}
.scrollBar.suru{cursor:grabbing}
.scrollBar.suru .scrollTut{cursor:grabbing;background:var(--brand-d)}
/* "yana kaydirin" ipucu: yalniz gercekten kaydirma varken JS gosterir */
.kaydirNot{display:none;align-items:center;gap:8px;margin:0 0 8px;padding:8px 12px;border-radius:9px;
  background:var(--brand-soft);color:var(--brand);font-size:13px;font-weight:600}
.kaydirNot.gorun{display:flex}
.kaydirNot b{font-size:15px;line-height:1}
.sw{position:relative;display:inline-block;width:42px;height:24px;background:var(--line);border-radius:999px;cursor:pointer;vertical-align:middle;border:none}
.sw::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:left .15s}
.sw[aria-checked="true"]{background:var(--ok)}.sw[aria-checked="true"]::after{left:21px}
.fcard{background:var(--sur);border:1px solid var(--line);border-radius:12px;padding:20px;margin-top:14px}
.fcard h3{margin-bottom:12px;font-size:22px}
.f .row3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media (max-width:760px){.f .row3{grid-template-columns:1fr}}
/* ---- panel: aciklama satirlari (her satir ayri metin + renk + kalin) ---- */
.satirlar{border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:var(--sur2)}
.sbas,.sat{display:grid;grid-template-columns:26px minmax(0,1fr) 72px 40px 40px;gap:7px;align-items:center}
.sbas{font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--mute);font-weight:700;padding:0 8px 6px}
.sbas span:nth-child(n+3){text-align:center}
.sat{background:var(--sur);border:1px solid var(--line);border-radius:10px;padding:6px 7px;margin-bottom:7px}
.sat .tut{cursor:grab;color:var(--mute);text-align:center;font-size:20px;line-height:1;-webkit-user-select:none;user-select:none;touch-action:none}
.f .sat input[type=text]{min-height:40px;padding:8px 10px}
.rnk{display:flex;align-items:center;gap:3px}
.f .rnk input[type=color]{width:46px;min-height:40px;padding:2px;cursor:pointer}
.f .rnk input[type=color][data-bos]{opacity:.45;border-style:dashed}
.rnk .rs{width:23px;min-height:40px;border:none;background:transparent;color:var(--mute);cursor:pointer;font-size:15px;line-height:1;padding:0}
.rnk .rs:hover{color:var(--brand)}
.sat .kb{min-height:40px;border:1px solid var(--line);border-radius:9px;background:var(--sur);cursor:pointer;font-weight:800;font-size:16px;padding:0}
.sat .kb[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.sat .btn-d{min-height:40px;padding:0;font-size:18px;line-height:1}
.sat.tasiniyor{opacity:.28;outline:2px dashed var(--brand);outline-offset:-2px}
.sur-ghost .sat{margin:0;height:100%;box-shadow:none}
.ekleSat{margin-top:2px}
#satUyari{margin-top:9px;font-weight:600;color:#9A6412;background:#FDF3E0;border:1px solid #F0DDB6;border-radius:9px;padding:8px 11px}
/* telefonda metin kutusu daralmasin: satir iki siraya boluner (metin ustte, araclar altta) */
@media (max-width:640px){
  .sbas{display:none}
  .satirlar{padding:10px}
  .sat{grid-template-columns:26px 72px 40px 40px minmax(0,1fr);row-gap:6px;
       grid-template-areas:"tut met met met met" "tut rnk kal sil ."}
  .sat .tut{grid-area:tut;align-self:center}
  .f .sat input[type=text]{grid-area:met}
  .sat .rnk{grid-area:rnk}
  .sat .kb{grid-area:kal}
  .sat .btn-d{grid-area:sil}
}
.chipin{display:flex;flex-wrap:wrap;gap:6px;border:1px solid var(--line);border-radius:9px;padding:6px;background:var(--sur);min-height:44px}
.chipin span{background:var(--brand-soft);color:var(--brand);border-radius:999px;padding:4px 10px;font-size:14px;font-weight:600;display:inline-flex;gap:6px;align-items:center}
.chipin span button{border:none;background:transparent;cursor:pointer;color:inherit;font-size:16px;line-height:1;padding:0}
.chipin input{border:none;min-height:30px;flex:1;min-width:140px;background:transparent;outline:none}
/* Yukleme alani. Kenar kalinligi HER DURUMDA 3px; renk/zemin degisir ki kutu
   vurgulanirken buyuyup kuculmesin (duzen ziplamasin). */
.drop{border:3px dashed var(--line);border-radius:12px;padding:21px;text-align:center;color:var(--mute);cursor:pointer;
  background:var(--sur2);transition:border-color .15s,background .15s,box-shadow .15s,color .15s}
/* sayfaya dosya surukleniyor: hedef belli olsun (nereye birakilacagi gorunsun) */
.drop.hazir{border-color:var(--brand);color:var(--ink2);background:var(--sur)}
/* dosya tam kutunun uzerinde: guclu vurgu */
.drop.over{border-color:var(--brand);border-style:solid;color:var(--brand);background:var(--brand-soft);
  box-shadow:0 0 0 5px rgba(31,60,136,.16),0 6px 18px rgba(15,26,46,.16)}
.drop.over .note{color:var(--brand)}
.thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;margin-top:12px}
.thumbs figure{margin:0;position:relative;border-radius:10px;overflow:hidden;border:2px solid var(--line);aspect-ratio:4/3;background:var(--sur2)}
.thumbs figure[data-cover="1"]{border-color:var(--ochre)}
.thumbs img{width:100%;height:100%;object-fit:contain}
.thumbs .tb{position:absolute;inset:auto 0 0 0;display:flex;gap:4px;padding:4px;background:rgba(0,0,0,.55)}
.thumbs .tb button{flex:1;border:none;border-radius:6px;background:#fff;color:#111;font-size:12px;font-weight:700;cursor:pointer;padding:4px 0}
.thumbs .cv{position:absolute;left:6px;top:6px;background:var(--ochre);color:#1a1200;font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px}
/* Bildirim şeridi: ekranın ÜSTÜNDE, başarı yeşil / hata kırmızı (siyah değil) */
.toast{position:fixed;left:50%;top:18px;bottom:auto;transform:translateX(-50%) translateY(-18px);
  background:var(--ok);color:#fff;padding:12px 20px;border-radius:12px;font-weight:600;font-size:15px;
  display:flex;align-items:center;gap:10px;opacity:0;transition:opacity .18s,transform .18s;
  z-index:200;pointer-events:none;max-width:calc(100% - 32px);box-shadow:0 12px 28px -10px rgba(15,26,46,.45)}
.toast.hata{background:#B4382E}
.toast .tik{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;flex:none;
  border-radius:50%;background:rgba(255,255,255,.22);font-size:14px;font-weight:800;line-height:1}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---- uyarı / onay modalı (tarayıcının confirm/prompt'u yerine) ---- */
.uyari-ort{position:fixed;inset:0;z-index:300;background:rgba(15,26,46,.55);display:flex;align-items:center;justify-content:center;padding:20px}
.uyari-kutu{background:var(--sur);border:1px solid var(--line);border-radius:14px;width:min(430px,100%);
  box-shadow:0 30px 70px -20px rgba(15,26,46,.55);overflow:hidden;animation:uyariGir .16s ease-out}
@keyframes uyariGir{from{opacity:0;transform:translateY(-10px) scale(.98)}to{opacity:1;transform:none}}
.uyari-bas{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px 12px;border-bottom:1px solid var(--line)}
.uyari-bas h3{margin:0;font-size:20px;line-height:1.2}
.uyari-x{border:none;background:transparent;font-size:26px;line-height:1;color:var(--mute);cursor:pointer;padding:0 4px;min-height:32px}
.uyari-x:hover{color:var(--ink)}
.uyari-ic{padding:16px}
.uyari-ic p{margin:0;color:var(--ink2);font-size:15px;line-height:1.5;-webkit-user-select:text;user-select:text}
.uyari-ic label{display:grid;gap:5px;font-size:14px;font-weight:600;color:var(--ink2)}
.uyari-ic input{width:100%;min-height:46px;border:1px solid var(--line);background:var(--sur);border-radius:9px;padding:10px 12px;font-size:16px}
.uyari-alt{display:flex;gap:10px;padding:0 16px 16px}
.uyari-alt .btn{flex:1}
@media (max-width:420px){.uyari-bas h3{font-size:18px}}
.mob{display:none}
@media (max-width:860px){
  .ash{grid-template-columns:1fr}
  .side{flex-direction:row;flex-wrap:wrap;padding:10px 12px;position:sticky;top:0;z-index:40}
  .side .logo{margin:0 auto 0 0}.side .logo .wm{display:none}
  .side button{width:auto;padding:9px 10px;font-size:14px}
  .side button svg{display:none}
  .side .sp{display:none}
  .main{padding:16px 14px 60px}
  .abar{margin:-16px 0 14px;padding:11px 0}
  .abar h2{font-size:22px}
}
@media (max-width:520px){.abar .acts .btn{flex:1}}
/* ---- dar ekran (telefon/dar pencere): tablolar KART düzenine geçer ----
   Sebep: 900px'lik tabloyu 400px ekranda yana kaydırmak kullanışsız; her satır
   kendi kartı olur, tüm sütunlar etiketiyle alt alta görünür, düğmelere erişilir.
   Sütun başlıkları td'lerdeki data-b değerinden yazılır. */
@media (max-width:760px){
  .scroll{overflow-x:visible}
  .kaydirNot,.scrollBar{display:none!important}
  .tbl,.tbl.genis{min-width:0;border:none;background:transparent;display:block}
  .tbl tbody{display:block}
  .tbl tr{display:block;background:var(--sur);border:1px solid var(--line);border-radius:12px;margin-bottom:10px;padding:10px 12px}
  .tbl tr:first-child{display:none}                    /* başlık satırı gizlenir */
  .tbl td{display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:7px 0;border-bottom:1px solid var(--line);text-align:right}
  .tbl tr td:last-child{border-bottom:none}
  .tbl td::before{content:attr(data-b);color:var(--mute);font-size:11px;letter-spacing:.06em;
    text-transform:uppercase;font-weight:700;text-align:left;flex:none}
  .tbl td:not([data-b])::before{content:none}
  .tbl td.gorsel{justify-content:flex-start;padding-top:0;border-bottom:none}
  .tbl .mini{width:88px;min-width:88px;height:62px}
  .tbl td.bas{display:block;text-align:left;padding-top:0}
  .tbl td.bas b{font-size:17px}
  .tbl td.bas::before{display:block;margin-bottom:2px}
  .tbl td.islem{display:block;text-align:left;padding-bottom:0}
  .tbl td.islem .acts{margin-top:2px}
  .tbl td.islem .acts .btn{flex:1}
}
.msg{background:var(--sur);border:1px solid var(--line);border-radius:12px;padding:14px 16px;display:grid;gap:4px}
.msg .h{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-weight:700}
.msg .h small{color:var(--mute);font-weight:400}
.msg p{color:var(--ink2);font-size:15px}
.list{display:grid;gap:10px}
.demo{background:#FFF4DC;color:#6B4600;border:1px solid #F0D28E;border-radius:10px;padding:10px 14px;font-size:14px;margin-bottom:16px}
:root[data-theme="dark"] .demo{background:#3A2B0D;color:#F5D89A;border-color:#6B4E14}

/* ---- kart baglantilari ---- */
.card a.pic{display:grid;text-decoration:none;color:inherit}
.card h3 a{text-decoration:none;color:inherit}
.card .tag.sayi{left:auto;right:12px;top:auto;bottom:12px;background:rgba(15,26,46,.75)}
.gal figure a{display:block;height:100%}

/* ---- detay sayfasi (model / parca) ---- */
.kirinti{font-size:14px;color:var(--mute);margin:18px 0 10px;display:flex;gap:6px;flex-wrap:wrap}
.kirinti a{color:var(--brand);text-decoration:none;font-weight:600}
.detay{padding:0 0 60px}
.detay .dgal{margin-top:10px}
/* ---- KUTU = FOTOGRAFIN KENDISI (bos kenar olusmaz) ----
   Eskiden kutu sabit 16/10 idi. Kare ve dikey fotograflarda yanlarda genis bos alan
   kaliyor, orasi ayni fotografin bulanik kopyasiyla dolduruluyordu. Artik kutu
   fotografa uyar: genislik de yukseklik de fotograftan gelir, bos kenar SIFIRDIR ve
   ayni ekranda fotograf ~%34 daha buyuk gorunur (1635px ekran, kare foto: 426 -> 571).
   width:fit-content SART — kutu tam genislikte kalirsa .dok/.buyutBtn dugmeleri
   fotografin disinda, bos alanin kenarinda duruyordu.
   max-height: fotograf ekrani asmasin, urun adi ve fiyat ilk ekranda kalsin. */
.detay .dgal .big{aspect-ratio:auto;background:var(--sur);border:1px solid var(--line);
  width:-moz-fit-content;width:-webkit-fit-content;width:fit-content;max-width:100%;height:auto;
  margin-left:auto;margin-right:auto}
.detay .dgal .big .ileri{display:block;width:auto;height:auto;font-size:0;line-height:0}
/* DIKKAT — max-width'te YUZDE KULLANMA. Kutu fit-content (genisligi fotograftan alir),
   fotografin max-width:100%'i de kutuya bakar; bu dongude tarayici yuzdeyi 0 kabul eder
   ve fotograf 0x0 olur (olculdu: kutu 2x2). Bu yuzden sinir viewport tabanlidir.
   Ust sinir .wrap ile ayni: width:min(1180px,100% - 32px); 50px pay dikey kaydirma
   cubugunu da karsilar. Genislik ve yukseklik ikisi de auto -> oran korunur, letterbox olmaz. */
/* Yukseklik tavani 54vh/600px OLARAK KALIYOR — bu deger keyfi degil: urun adi ve fiyat
   sayfa acilir acilmaz gorunsun diye secilmisti (test11 bunu dogruluyor). Olculdu:
   72vh'ye cikarilirsa fotograf ~%33 buyuyor ama urun adi HICBIR masaustu ekraninda ilk
   ekranda kalmiyor (1366x768'de adin alti 864/768, 1920x1080'de 1089/1080).
   Bu degisiklikte hedeflenen sey zaten bos kenari kaldirmakti; buyutme isini tam ekran
   goruntuleyicideki yakinlastirma yapiyor. */
.detay .dgal .big img{display:block;width:auto;height:auto;
  max-width:min(1180px,calc(100vw - 50px));max-height:min(54vh,600px)}
/* min-height: kucuk gorseller icin taban. Kutu artik fotografa oturdugu icin, 120x120'lik
   bir yedek cizim kutuyu da 120x120 yapiyor ve sayfada minicik kaliyordu (eskiden sabit
   16/10 kutu icinde buyutulurdu). Genislik auto oldugu icin oran korunarak buyur — bos
   kenar olusmaz. Telefonda verilmez: orada genislik zaten bagladigi icin max-width ile
   celisirdi. */
@media (min-width:761px){ .detay .dgal .big img{min-height:min(38vh,340px)} }
/* Not: yedek cizimlerin (uploads/demo/*.svg) root etiketinde eskiden yalniz viewBox vardi,
   width/height yoktu; dogal boyutlari olmadigi icin width:auto onlari 0x0 yapiyordu
   (olculdu: kutu 2x2, cizim gorunmez). 26 dosyanin hepsine viewBox'tan turetilmis
   width/height eklendi; artik normal fotograflarla ayni kurallarla boyutlaniyorlar ve
   SVG'ye ozel bir kural GEREKMIYOR. */
@media (max-width:760px){ .detay .dgal .big img{max-width:calc(100vw - 34px);max-height:70vh} }
/* Video oynarken kutu yeniden sabit orana doner: video/iframe width/height %100 ister,
   fit-content ile yukseklik sifira dusup oynatici gorunmez olurdu. */
.detay .dgal .big.oynat{width:100%;aspect-ratio:16/9;height:auto}
/* Tıklama büyütmez (sıradaki fotoğrafa geçer) — bu yüzden büyüteç değil el imleci. */
.detay .dgal .big img{cursor:pointer}
.detay .dtop h1{font-size:clamp(32px,4.5vw,48px);text-transform:none}
.detay .dcols{margin-top:22px}
.detay .lead{margin-top:6px}
.detay .cta{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.detay .fiyat{font-family:"Barlow Condensed",Arial,sans-serif;font-size:40px;font-weight:800;color:var(--brand);font-variant-numeric:tabular-nums;line-height:1}
.detay .fiyat small{font-size:14px;font-weight:600;color:var(--mute);font-family:"Source Sans 3",sans-serif;margin-left:8px}
.detay .stok{font-weight:700;color:var(--ok)}.detay .stok.yok{color:#B4382E}
.detay .bilgi{background:var(--sur);border:1px solid var(--line);border-radius:var(--r);padding:20px 22px}
.diger{margin-top:36px}
.diger h2{font-size:28px;margin-bottom:12px}
.diger .grid{margin-top:0}
@media (max-width:640px){.detay .dgal .th{grid-template-columns:repeat(5,1fr)}}
/* "Model/parça bulunamadı" sayfası. DİKKAT: seçici .wrap ile daraltıldı —
   düz ".yok" stoksuz parçanın <span class="stok yok"> rozetine de 80px dolgu veriyor,
   kartı 160px şişirip o satırdaki bütün kartları birlikte büyütüyordu. */
.wrap.yok{padding:80px 0;text-align:center;color:var(--mute)}

/* ---- telefon alani hata durumu ---- */
.f input.hata{border-color:#B4382E;box-shadow:0 0 0 3px rgba(180,56,46,.16)}
.fhata{display:none;color:#B4382E;font-size:13px;font-weight:600;margin-top:-4px}.fhata.show{display:block}

/* ---- panel istatistik ---- */
.ist{display:grid;grid-template-columns:1.2fr .8fr;gap:14px;margin-top:14px}
@media (max-width:900px){.ist{grid-template-columns:1fr}}
.cubuk{display:flex;align-items:flex-end;gap:5px;height:120px;padding:6px 0 0}
.cubuk div{flex:1;background:var(--brand);border-radius:4px 4px 0 0;min-height:2px;position:relative;opacity:.9}
.cubuk div:last-child{background:#8F1626}
.cubuk div span{position:absolute;left:50%;top:-18px;transform:translateX(-50%);font-size:11px;color:var(--mute);white-space:nowrap}
.cubukalt{display:flex;gap:5px;font-size:10px;color:var(--mute)}.cubukalt div{flex:1;text-align:center;white-space:nowrap;overflow:hidden}
.tile small{display:block;font-size:12px;color:var(--mute);margin-top:2px}
.sira{display:grid;gap:6px}.sira div{display:grid;grid-template-columns:22px 1fr auto;gap:8px;align-items:center;font-size:14px}
.sira .n{color:var(--mute);font-weight:700}.sira .bar{height:8px;border-radius:4px;background:var(--sur2);overflow:hidden;grid-column:2/4}.sira .bar i{display:block;height:100%;background:var(--brand)}
.sira b{font-variant-numeric:tabular-nums}

/* ---- video: kucuk kare rozeti ve buyuk alanda oynatici ---- */
.th button.vidk{position:relative}
.oy{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:38px;height:38px;border-radius:50%;background:rgba(15,26,46,.72);display:grid;place-items:center;pointer-events:none;box-shadow:0 2px 8px rgba(0,0,0,.35)}
.oy::after{content:"";display:block;width:0;height:0;margin-left:4px;border-left:12px solid #fff;border-top:8px solid transparent;border-bottom:8px solid transparent}
.dgal .big.oynat{background:#000}
/* Not: eskiden burada ".dgal .big.oynat::before{display:none}" vardi — bulanik dolguyu
   video oynarken gizliyordu. Detay sayfasinda ::before dolgusu artik hic uretilmedigi
   icin o kural olu kaldi ve kaldirildi. */
.dgal .big video,.dgal .big iframe{width:100%;height:100%;border:0;display:block;background:#000;object-fit:contain;position:relative;z-index:1}
.card .tag.vid{left:12px;top:auto;bottom:12px;background:rgba(143,22,38,.9);display:flex;align-items:center;gap:6px}
.card .tag.vid i{width:0;height:0;border-left:8px solid #fff;border-top:5px solid transparent;border-bottom:5px solid transparent}
/* panel: video karesi ve yukleme durumu */
.thumbs figure.vidk .bos{display:block;width:100%;height:100%;background:#0F1A2E}
.thumbs figure.vidk .cv.vid{background:#8F1626;color:#fff}
.note.yuk{margin-top:8px;font-weight:600;color:var(--brand)}

/* ---- model fiyati (kart + detay) ---- */
.card .mfiyat .fiyat{font-family:"Barlow Condensed",Arial,sans-serif;font-size:28px;font-weight:800;color:var(--brand);font-variant-numeric:tabular-nums;line-height:1}
.card .mfiyat .fiyat small{font-size:13px;font-weight:600;color:var(--mute);font-family:"Source Sans 3",sans-serif;margin-left:6px}
/* Model kartinda stok satiri (14.09.2026). Parca kartindaki (.pcard .stok) ile ayni
   bicim; block + nowrap — sigmayan rozet satiri uzatip karti sisirmesin (pcard'da
   yasanmis hata). Fiyat yoksa .mfiyat yalniz stok satirini tasir. */
/* Fiyat blogu kartin ALTINA yapisir: ustte baslik 1 ya da 2 satir olsun,
   teknik kutu sarsin ya da sarmasin, fiyat butun kartlarda ayni hizada kalir
   (kart yukseklikleri izgarada zaten esit). */
.card .altBlok{margin-top:auto;padding-top:2px}
.card .mfiyat{display:block}
.card .mfiyat .stok{display:block;margin-top:5px;font-size:12px;font-weight:700;color:var(--ok);white-space:nowrap}
.card .mfiyat .stok.yok{color:#B4382E}
.detay .mfiyat{margin:8px 0 6px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}

/* ---- tam ekran fotoğraf görüntüleyici (sahibinden tarzı) ---- */
.fbox{position:fixed;inset:0;z-index:400;background:rgba(8,13,24,.94);display:flex;flex-direction:column;
  -webkit-user-select:none;user-select:none;animation:fbGir .15s ease-out}
@keyframes fbGir{from{opacity:0}to{opacity:1}}
.fb-ust{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;color:#fff;flex:none}
.fb-say{font-weight:700;font-size:15px;font-variant-numeric:tabular-nums;background:rgba(255,255,255,.14);border-radius:999px;padding:6px 14px}
.fb-kapat{width:44px;height:44px;border:none;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;font-size:20px;line-height:1;cursor:pointer}
.fb-kapat:hover{background:rgba(255,255,255,.26)}
.fb-orta{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;gap:10px;padding:0 10px;position:relative;overflow:hidden}
.fb-orta.cok{touch-action:pan-y}
.fb-img{max-width:100%;max-height:100%;object-fit:contain;border-radius:8px;background:#0b1220;cursor:default;touch-action:pan-y;will-change:transform,opacity;-webkit-user-drag:none}
.fb-orta.cok .fb-img{cursor:grab}
.fb-orta.cok.suru,.fb-orta.cok.suru .fb-img{cursor:grabbing}
.fb-ok{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border:none;border-radius:50%;
  background:rgba(255,255,255,.16);color:#fff;font-size:32px;line-height:1;cursor:pointer;display:grid;place-items:center;padding:0 0 4px}
.fb-ok:hover{background:rgba(255,255,255,.3)}
.fb-sol{left:12px}.fb-sag{right:12px}
.fb-alt{flex:none;padding:8px 14px 14px}
.fb-bas{margin:0 0 8px;color:#E7ECF5;font-size:14px;text-align:center}
.fb-serit{display:flex;gap:8px;overflow-x:auto;padding:2px;justify-content:flex-start;scrollbar-width:thin}
.fb-serit button{flex:none;width:74px;height:56px;border:2px solid transparent;border-radius:8px;overflow:hidden;padding:0;background:#0b1220;cursor:pointer;opacity:.6}
.fb-serit button[aria-current="true"]{border-color:#fff;opacity:1}
.fb-serit img{width:100%;height:100%;object-fit:cover;display:block}

/* ---- yakinlastirma (tikla-buyut): fotograf GERCEK boyutuna cikar ----
   Yuklenen fotograflar uzun kenari 1600px olarak saklanir; sigdirilmis halde ~650px
   gorunuyordu, yani dosyadaki pikselin ancak %41'i. Yakinlastirinca tamami gorunur.
   Dugme UST CUBUKTADIR: .fb-orta yakinlastirinca kaydirilabilir oluyor ve icine konan
   sabit dugme fotografla birlikte kayiyordu.
   margin:auto — fotograf kaptan darsa ortalanir, genisse kirpilmadan kaydirilir.
   touch-action:auto — telefonda parmakla gezinmeyi tarayicinin kendi kaydirmasi yapar. */
.fb-ustsag{display:flex;align-items:center}
.fb-ustsag .fb-kapat{margin-left:8px}
.fb-zum{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border:none;border-radius:12px;
  background:rgba(255,255,255,.92);color:#0F1A2E;font-weight:700;font-size:15px;cursor:zoom-in;
  font-family:inherit;line-height:1;white-space:nowrap}
.fb-zum:hover{background:#fff}
.fb-zum .zi{font-size:16px;margin-right:6px}
.fbox.zum .fb-zum{cursor:zoom-out}
.fbox.zum .fb-orta{overflow:auto;cursor:grab;align-items:flex-start;justify-content:flex-start;
  touch-action:auto;-webkit-overflow-scrolling:touch}
.fbox.zum .fb-orta.gez{cursor:grabbing}
.fbox.zum .fb-img{max-width:none;max-height:none;border-radius:0;margin:auto;cursor:grab;touch-action:auto}
.fbox.zum .fb-orta.gez .fb-img{cursor:grabbing}
.fbox.zum .fb-ok{display:none}
@media (max-width:700px){
  .fb-zum{min-height:40px;padding:0 11px;font-size:14px}
  .fb-zum .zi{margin-right:4px}
}
@media (max-width:700px){
  .fb-ok{width:44px;height:44px;font-size:26px}
  .fb-sol{left:6px}.fb-sag{right:6px}
  .fb-serit button{width:58px;height:44px}
  .fb-orta{padding:0 4px}
}

/* ---- fiyat gecmisi (vitrin detay + panel) ---- */
.fgtus{display:inline-flex;align-items:center;gap:6px;min-height:38px;padding:0 14px;border:1px solid var(--line);border-radius:999px;background:var(--sur);color:var(--brand);font-weight:600;font-size:14px;cursor:pointer}
.fgtus:hover{background:var(--brand-soft);border-color:var(--brand)}
.fgtus .ok{font-size:12px;line-height:1}
.fgkutu{margin:0 0 10px;max-width:460px;overflow-x:auto}
.fgtbl{width:100%;border-collapse:collapse;background:var(--sur);border:1px solid var(--line);border-radius:10px;overflow:hidden;font-size:14px}
.fgtbl th{text-align:left;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);background:var(--sur2);padding:8px 12px;font-weight:700}
.fgtbl td{padding:8px 12px;border-top:1px solid var(--line)}
.fgtbl .fgf{font-variant-numeric:tabular-nums;font-weight:700;white-space:nowrap}
.fgArt{color:#B4382E;font-weight:700;white-space:nowrap}
.fgDus{color:var(--ok);font-weight:700;white-space:nowrap}
.fgilk{color:var(--mute)}
/* panel kutusu */
.fgec{border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:var(--sur2);margin-bottom:12px}
.fgbas{font-weight:600;font-size:14px;margin-bottom:9px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.fgbas .note{margin:0;font-weight:400}
.fgec .fgtbl{max-width:520px}
.fgec .fgtbl td:last-child{width:40px;text-align:right;padding:4px 8px}
.fgec .fgtbl .btn-d{min-height:30px;padding:0 9px;font-size:15px;line-height:1;border-radius:8px}
.fgbas .fgsp{flex:1}
#fgTemizle{min-height:32px;padding:0 12px;font-size:13px}
@media (max-width:520px){.fgbas .fgsp{display:none}}

/* ---- panel: surukle-birak siralama ---- */
.thumbs [data-g],.thumbs figure{cursor:grab;touch-action:pan-y;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.thumbs [data-g].tasiniyor{opacity:.28;outline:2px dashed var(--brand);outline-offset:-2px;filter:grayscale(.4)}
.thumbs [data-g].tasiniyor figure{outline:none}
.sur-ghost{position:fixed;left:0;top:0;z-index:1000;pointer-events:none;display:block;opacity:.94;border-radius:10px;box-shadow:0 18px 40px rgba(0,0,0,.38);will-change:transform;transform:translate(0,0) scale(1.04)}
.sur-ghost figure{margin:0;height:100%}.sur-ghost .tb,.sur-ghost .cv{display:none}
body.sur-aktif{cursor:grabbing}body.sur-aktif *{cursor:grabbing!important}
.gitem{min-width:0}

/* ---- ayri sayfa yapisi (site tek sayfa degil) ----
   .icKirinti : ic sayfalarda hero yerine gecen "Ana sayfa > Bolum" satiri.
   .blkAlt    : ana sayfa vitrininin altindaki "Tum modelleri gor" dugmesi.
   .parcaUst  : yedek parca filtre satiri (eskiden satir-ici stildi, siniflandirildi). */
.icKirinti{margin:18px auto 0}
.blkAlt{display:flex;justify-content:center;margin-top:26px}
/* Suzgec: 1. satir kategori seridi, 2. satir arama. Eskiden ikisi yan yanaydi ve
   dar ekranda birbirine giriyordu; serit kesiliyor, ince tarayici cubugu zor tutuluyordu. */
.suzgec{display:grid;gap:10px;margin-bottom:16px}
.chipsSar{position:relative;min-width:0}
.chipsSar .chips{padding:2px 0;scrollbar-width:none;-ms-overflow-style:none}
.chipsSar .chips::-webkit-scrollbar{height:0;display:none}   /* ince cubuk yerine ok dugmeleri */
.chipsSar .cok{position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:38px;height:38px;display:none;place-items:center;border:1px solid var(--line);
  border-radius:50%;background:var(--sur);color:var(--ink);cursor:pointer;
  font-size:22px;line-height:1;padding:0 0 3px;box-shadow:0 4px 14px -6px rgba(15,26,46,.5)}
.chipsSar .cok.gorun{display:grid}
.chipsSar .cok:hover{background:var(--brand);border-color:var(--brand);color:#fff}
.chipsSar .csol{left:0}
.chipsSar .csag{right:0}
/* Oklar serit ALANININ DISINDA durur: tasma varsa sarmalayiciya yanlardan bosluk verilir,
   serit o daralmis alanda kayar. Boylece ok hicbir zaman chip'in ustune binmez.
   (Serite padding vermek yetmiyordu: kaydirinca padding de kayiyor ve chip okun altina giriyordu.) */
.chipsSar.tasiyor{padding:0 46px}
.araSat{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.araKutu{position:relative;display:flex;align-items:center;flex:0 1 380px;min-width:0}
.araKutu svg{position:absolute;left:15px;width:18px;height:18px;color:var(--mute);pointer-events:none}
.araKutu input{width:100%;min-height:44px;border:1px solid var(--line);border-radius:999px;
  padding:0 16px 0 42px;background:var(--sur);font-size:15px;color:var(--ink)}
.araKutu input:focus{outline:2px solid var(--brand);outline-offset:1px}
.araKutu input::-webkit-search-cancel-button{cursor:pointer}
.araSay{font-size:14px;color:var(--mute);font-weight:600}
@media (max-width:520px){.araKutu{flex:1 1 100%}}

/* ---- panel: Ziyaretler bolumu (salt izleme tablolari) ----
   Arama + sutun siralama + sayfalama. Dar ekranda site.css'in mevcut kart duzeni
   devreye girdigi icin buradaki genislik kurallari 761px ve USTU ile sinirlidir. */
.tblUst{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.tblUst .ara{flex:1 1 240px;min-width:0;min-height:42px;border:1px solid var(--line);border-radius:999px;padding:0 16px;background:var(--sur);font-size:15px;color:var(--ink)}
.tblUst .ara:focus{outline:2px solid var(--brand);outline-offset:1px}
.tblUst label{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--mute);font-weight:600;white-space:nowrap}
.tblUst select,.tarihKutu input{min-height:42px;border:1px solid var(--line);border-radius:9px;padding:0 10px;background:var(--sur);font-size:15px;color:var(--ink)}
.tarihKutu{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.tarihKutu .hiz{display:flex;gap:6px;flex-wrap:wrap}
.chips.zsek{margin-bottom:14px}

/* siralanabilir sutun basligi */
.tbl th.srt{cursor:pointer;user-select:none;white-space:nowrap}
.tbl th.srt:hover{color:var(--brand)}
.tbl th.srt::after{content:"\2195";opacity:.35;margin-left:5px;font-size:13px}
.tbl th.srt[data-yon="asc"]::after{content:"\2191";opacity:1;color:var(--brand)}
.tbl th.srt[data-yon="desc"]::after{content:"\2193";opacity:1;color:var(--brand)}

/* sayi / zaman / ziyaretci sutunlari */
.tbl td.sy,.tbl th.sy{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tbl td.sy .mini-bar{display:block;height:4px;border-radius:2px;background:var(--sur2);margin-top:4px;overflow:hidden}
.tbl td.sy .mini-bar i{display:block;height:100%;background:var(--brand)}
.tbl td.zy{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;white-space:nowrap}
.tbl td.zmn{white-space:nowrap;font-variant-numeric:tabular-nums}
.tbl td.zmn small{display:block;color:var(--mute);font-size:12px}
.rozet{display:inline-block;font-size:11px;font-weight:700;padding:3px 8px;border-radius:999px;background:var(--sur2);color:var(--mute);white-space:nowrap}
.rozet.yeni{background:#E1F5EA;color:#0F5A34}
.rozet.tekrar{background:var(--brand-soft);color:var(--brand)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .rozet.yeni{background:#123024;color:#7FD3A6}}
:root[data-theme="dark"] .rozet.yeni{background:#123024;color:#7FD3A6}

/* sayfalama */
.syfAlt{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-top:12px}
.syf{display:flex;gap:4px;flex-wrap:wrap}
.syf button{min-width:38px;min-height:38px;border:1px solid var(--line);background:var(--sur);border-radius:9px;cursor:pointer;font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink)}
.syf button[aria-current="true"]{background:var(--brand);border-color:var(--brand);color:#fff}
.syf button:disabled{opacity:.4;cursor:default}
.syf .bosluk{min-width:20px;border:none;background:transparent;cursor:default;color:var(--mute)}
.bosSonuc{background:var(--sur);border:1px dashed var(--line);border-radius:12px;padding:28px;text-align:center;color:var(--mute)}
/* Ziyaret tablolari daha dar: Duzenle/Sil sutunu YOK, yalniz okunur */
@media (min-width:761px){.tbl.zt{min-width:940px}}
@media (max-width:760px){.syfAlt{justify-content:center}.tblUst label{width:100%;justify-content:space-between}}
.ist2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:900px){.ist2{grid-template-columns:1fr}}
/* Ziyaretci ozeti 5 kutu: Bugun · 7 gun · 30 gun · Tekrar gelen · Toplam.
   Mevcut 4'lu .tiles duzeni (Model/Yayinda/Mesaj/Parca) bozulmasin diye ayri sinif. */
.tiles.bes{grid-template-columns:repeat(5,1fr)}
@media (max-width:1250px){.tiles.bes{grid-template-columns:repeat(3,1fr)}}
@media (max-width:760px){.tiles.bes{grid-template-columns:1fr 1fr}}

/* ==================== RAPORLAR (panel) ====================
   Ziyaretler bolumunun sinifları (.ist2 .sira .tarihKutu …) DEGISTIRILMEDI;
   bunlar yalniz Raporlar bolumunde kullanilir, oneki r-. */
.rsek{margin-bottom:12px}
.rbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;background:var(--sur);
  border:1px solid var(--line);border-radius:12px;padding:12px;margin-bottom:14px}
.rbar label{display:flex;align-items:center;gap:7px;font-size:14px;color:var(--mute);font-weight:600;white-space:nowrap}
.rbar input[type=date]{min-height:40px;border:1px solid var(--line);border-radius:8px;padding:0 10px;
  background:var(--sur);color:var(--ink);font-size:14px;font-family:inherit}
.rbar .rbosluk{flex:1 1 20px}
.rbar .rkar{color:var(--ink2)}
/* Tarih kutulari yalniz "Detaylı sorgulama" sekmesinde gorunur */
.rbar.ozet .tarKutu{display:none}
.rdonem{font-size:14px;color:var(--ink2);margin:0 0 12px}
.rdonem b{font-variant-numeric:tabular-nums}
.rdonem .ay{color:var(--mute)}
.rdonem .uyr{color:var(--ochre);font-weight:600}

.rkpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:12px}
.rk{background:var(--sur);border:1px solid var(--line);border-radius:12px;padding:15px}
.rk .b{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);font-weight:700}
.rk .s{font-family:"Barlow Condensed","Arial Narrow",Arial,sans-serif;font-size:40px;font-weight:800;
  line-height:1;margin:6px 0 4px;font-variant-numeric:tabular-nums}
.rk .a{font-size:12px;color:var(--mute);margin-top:2px}
.rd{font-size:13px;font-weight:700;display:inline-flex;align-items:center;gap:4px;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.rd.up{color:var(--ok)} .rd.dn{color:#B4382E} .rd.ey{color:var(--mute)}   /* kirmizi projede duz yazilir, --kotu diye bir degisken YOK */
.rd .y{font-weight:800}

.rgr{position:relative}
.rgr svg{display:block;width:100%;height:auto;overflow:visible}
.rgr .ek{font-size:11px;fill:var(--mute)}
.rgr .kl{stroke:var(--line);stroke-width:1}
.rgr .p1{fill:none;stroke:var(--brand);stroke-width:2;stroke-linejoin:round}
.rgr .p2{fill:none;stroke:var(--mute);stroke-width:2;stroke-dasharray:5 4}
.rgr .alan{fill:var(--brand);opacity:.10}
.rgr circle{fill:var(--brand);stroke:var(--sur);stroke-width:2}
.rgost{display:flex;gap:14px;flex-wrap:wrap;font-size:13px;color:var(--mute);margin-top:8px}
.rgost span{display:inline-flex;align-items:center;gap:6px}
.rgost i{width:11px;height:11px;border-radius:3px;display:inline-block}
.rgost i.s1{background:var(--brand)} .rgost i.s2{background:var(--mute)}

.rtbl{width:100%;border-collapse:collapse;background:var(--sur);font-size:15px;min-width:760px}
.rtbl th,.rtbl td{padding:10px 11px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
.rtbl th{background:var(--sur2);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);
  cursor:pointer;user-select:none;white-space:nowrap}
.rtbl th:hover{color:var(--ink)}
.rtbl th .ok{opacity:.45;font-size:10px}
.rtbl th.sy,.rtbl td.sy{text-align:right;font-variant-numeric:tabular-nums}
.rtbl tbody tr:hover{background:var(--sur2)}
.rtbl tfoot td{background:var(--sur2);font-weight:800;border-top:2px solid var(--line);border-bottom:none}
.rtbl .zmn{white-space:nowrap}
.rtbl .zmn small{color:var(--mute);margin-left:5px;font-size:12px}   /* saat: tarihten ayri okunsun */
.rbos{padding:26px;text-align:center;color:var(--mute)}
@media (max-width:620px){ .rk .s{font-size:32px} .rbar{padding:10px} }
/* Dar ekran: rapor tablolari da KART duzenine gecer — projedeki .tbl ile ayni yontem
   (760px'lik tabloyu 390px ekranda yana kaydirmak kullanissiz; .scroll zaten bu
   genislikte overflow-x:visible oluyor, tablo min-width ile sayfayi tasiriyordu). */
@media (max-width:760px){
  .rtbl{min-width:0;border:none;background:transparent;display:block}
  .rtbl thead{display:none}
  .rtbl tbody,.rtbl tfoot{display:block}
  .rtbl tr{display:block;background:var(--sur);border:1px solid var(--line);
    border-radius:12px;margin-bottom:10px;padding:10px 12px}
  .rtbl td{display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:7px 0;border-bottom:1px solid var(--line);text-align:right}
  .rtbl tr td:last-child{border-bottom:none}
  .rtbl td::before{content:attr(data-b);color:var(--mute);font-size:11px;letter-spacing:.06em;
    text-transform:uppercase;font-weight:700;text-align:left;flex:none}
  .rtbl td.bas{font-size:16px}
  .rtbl td.bas::before{display:none}
  .rtbl td.sira,.rtbl td.gizdar{display:none}
  .rtbl td .mini-bar{display:none}
  .rtbl tfoot td{background:transparent;border-top:none}
  .rtbl tfoot tr{border-color:var(--brand)}
  .rtbl tfoot td[data-b=""]{font-size:16px}
  .rtbl tfoot td[data-b=""]::before{display:none}
}