/* tema-ortak.css — 19.09 üç tema prototipinin ORTAK görsel dili.
   Tek ekran kalıbı: sol ağaç 220 · orta sahne · sağ parça kartı 320. Mobilde tek kolon. */
:root{
  --bg:#0e1216;--panel:#161b21;--panel2:#1e242c;--line:#2a323c;--ink:#e6e2da;--ink2:#9aa3ad;
  --accent:#3fc9dc;--accent-ink:#0b1419;   /* 19.09 kullanıcı: marka rengi TURKUAZ (sarı değil) — SAFİR koyu lacivert + cyan */--A:#4fbf7d;--B:#e8964a;--C:#e05a5a;--gri:#6b7680;
  --pafta:#f7f6f2;color-scheme:dark;
}
*{box-sizing:border-box}[hidden]{display:none!important}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.45 "IBM Plex Sans",system-ui,sans-serif;display:flex;flex-direction:column}
a{color:var(--accent);text-decoration:none}
button{font:inherit}
.mono{font-family:"IBM Plex Mono",ui-monospace,Consolas,monospace}
/* üst şerit */
#ust{display:flex;align-items:center;gap:14px;padding:8px 14px;background:var(--panel);border-bottom:1px solid var(--line);font-size:13px;flex-wrap:wrap}
#ust .marka{font-weight:700;letter-spacing:.06em;color:var(--accent);text-decoration:none}
#ust a.marka:hover{text-shadow:0 0 12px rgba(63,201,220,.6)}
#ust .yol{color:var(--ink2)}
#ust .yol b{color:var(--ink);font-weight:600}
#ust .temalar{margin-left:auto;display:flex;gap:4px}
#ust .temalar a{padding:4px 10px;border:1px solid var(--line);border-radius:4px;color:var(--ink2);font-size:12px}
#ust .temalar a.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:600}
/* gövde ızgarası */
#govde{flex:1;display:grid;grid-template-columns:220px minmax(0,1fr) 340px;min-height:0}
#govde>*{min-height:0;overflow:auto}
nav#agac{background:var(--panel);border-right:1px solid var(--line);padding:10px 8px;font-size:12.5px}
main#sahne{padding:12px;display:flex;flex-direction:column;gap:10px}
aside#kart,aside#kartKap{background:var(--panel);border-left:1px solid var(--line);padding:12px}
@media(max-width:900px){#govde{grid-template-columns:1fr;grid-auto-rows:auto}nav#agac{border-right:0;border-bottom:1px solid var(--line);max-height:220px}aside#kart,aside#kartKap{border-left:0;border-top:1px solid var(--line)}}
/* ağaç */
#agac .bas{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink2);margin:8px 6px 4px}
#agac ul{list-style:none;margin:0;padding:0}
#agac li{padding:4px 6px;border-radius:4px;display:flex;justify-content:space-between;gap:6px;align-items:center}
#agac li a{color:var(--ink2);flex:1}
#agac li.on{background:var(--panel2)}#agac li.on a{color:var(--ink);font-weight:600}
#agac li.gr{padding-left:14px;cursor:pointer}
#agac li.gr .ad{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#agac .bar{display:inline-flex;height:6px;width:36px;border-radius:2px;overflow:hidden;background:var(--line)}
#agac .bar i{display:block;height:100%}
#agac .bar .a{background:var(--A)}#agac .bar .b{background:var(--B)}#agac .bar .c{background:var(--C)}
#agac .bil{margin-top:8px;padding:4px 6px;font-weight:600;color:var(--ink);font-size:12px}
/* rozet */
.roz{display:inline-block;font-family:"IBM Plex Mono",monospace;font-size:11px;font-weight:600;padding:1px 6px;border-radius:3px;color:#fff;line-height:1.5}
.roz.A{background:var(--A);color:#062}.roz.B{background:var(--B);color:#3a1a00}.roz.C{background:var(--C)}
.roz.gri{background:var(--gri)}
/* çipler (grup sekmeleri) */
.cipler{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}
.cip{flex:none;display:flex;gap:6px;align-items:center;padding:5px 10px;border:1px solid var(--line);border-radius:4px;background:var(--panel);color:var(--ink2);cursor:pointer;font-size:12px;white-space:nowrap}
.cip.on{border-color:var(--accent);color:var(--ink);background:var(--panel2)}
.cip .sayi{font-family:"IBM Plex Mono",monospace;font-size:10px;color:var(--ink2)}
/* pafta sahnesi */
.pafta{position:relative;background:var(--pafta);border-radius:6px;overflow:hidden;border:1px solid var(--line)}
.pafta svg{width:100%;height:auto;display:block;max-height:70vh}
.pafta.kucuk svg{max-height:220px}
.pafta .hs{cursor:pointer;stroke-width:1.2;fill-opacity:.35;transition:fill-opacity .12s}
.pafta .hs:hover{fill-opacity:.8}
.pafta .hs.on{fill-opacity:.85;stroke-width:2.2;stroke:#000}
.pafta .hs.A{fill:var(--A);stroke:#1f7a48}.pafta .hs.B{fill:var(--B);stroke:#8a4a10}.pafta .hs.C{fill:var(--C);stroke:#8a1f1f}.pafta .hs.gri{fill:var(--gri);stroke:#333}
.pafta .not{position:absolute;left:8px;bottom:6px;font-size:11px;color:#333;background:rgba(255,255,255,.8);padding:2px 6px;border-radius:3px}
.pafta .bos{padding:40px 16px;color:#555;text-align:center;font-size:13px}
/* 3B sahne */
.stage{position:relative;background:radial-gradient(ellipse at center,#26303a,#0e1216);border:1px solid var(--line);border-radius:6px;overflow:hidden}
.stage model-viewer{width:100%;height:56vh;min-height:320px;background:transparent}
.yuva model-viewer{width:100%;height:240px;background:radial-gradient(ellipse at center,#26303a,#12171c);border:1px solid var(--line);border-radius:6px}
.yuva{min-height:60px}
.stage .altyazi{position:absolute;z-index:2;left:10px;bottom:8px;font-size:12px;color:var(--ink2);background:rgba(14,18,22,.7);padding:3px 8px;border-radius:4px}
.mvhs{width:28px;height:28px;border-radius:50%;background:var(--accent);color:var(--accent-ink);border:2px solid #fff;font-weight:700;font-size:12px;cursor:pointer;box-shadow:0 2px 8px #0008}
.mvhs.on{background:#fff;transform:scale(1.15)}
/* parça şeridi / ızgara */
.serit{display:flex;gap:8px;overflow-x:auto;padding:4px 0;scrollbar-width:thin}
.izgara{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.pk{flex:none;width:130px;border:1px solid var(--line);background:var(--panel);border-radius:5px;padding:6px;cursor:pointer;display:grid;gap:3px;font-size:11.5px}
.izgara .pk{width:auto}
.pk.on{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.pk .on-img{aspect-ratio:1;background:#fff;border-radius:3px;display:grid;place-items:center;overflow:hidden;color:#888;font-size:10px;text-align:center}
.pk .on-img img{width:100%;height:100%;object-fit:contain}
.pk .pn{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--ink)}
.pk .ad{color:var(--ink2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pk .alt{display:flex;justify-content:space-between;align-items:center}
/* kart */
#kart .kir{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--ink2);margin-bottom:6px}
#kart .pn{font-family:"IBM Plex Mono",monospace;font-size:18px;font-weight:600}
#kart .ad{font-size:15px;font-weight:600;line-height:1.25;margin:2px 0 8px}
#kart .ad small{display:block;font-weight:400;color:var(--ink2);font-size:12px}
#kart dl{display:grid;grid-template-columns:auto 1fr;gap:3px 10px;font-size:12px;margin:10px 0}
#kart dt{color:var(--ink2)}#kart dd{margin:0}
#kart .neden{font-size:11.5px;color:var(--ink2)}
#kart .dugmeler{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
#kart .dugmeler button,#kart .dugmeler a{padding:6px 10px;border:1px solid var(--line);background:var(--panel2);color:var(--ink);border-radius:4px;cursor:pointer;font-size:12px}
#kart .dugmeler .p{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:600}
#kart .kardes{font-size:12px;margin-top:8px}
#kart .kardes li{list-style:none;padding:2px 0}
#kart .kardes ul{margin:4px 0 0;padding:0}
#kart .uyari{border-left:3px solid var(--C);padding:6px 10px;background:var(--panel2);font-size:12px;margin:8px 0}
#kart .uyari.B{border-color:var(--B)}
#kart .uyari.pyok{border-color:var(--muted,#8a96a0)}
#kart .foto{width:100%;background:#fff;border-radius:4px;margin-top:8px;max-height:160px;object-fit:contain}
#kart .ozet{font-size:12.5px;color:var(--ink2);line-height:1.6}
/* bütçe */
#butce{position:fixed;right:10px;bottom:10px;font-family:"IBM Plex Mono",monospace;font-size:11px;background:rgba(22,27,33,.92);border:1px solid var(--line);border-radius:4px;padding:5px 9px;color:var(--ink2);z-index:20}
#butce b{color:var(--accent)}
/* arama */
.ara{width:100%;font:inherit;font-size:16px;padding:10px 12px;border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:5px}
.ara:focus{outline:2px solid var(--accent);outline-offset:1px}
.bilgi{font-size:12px;color:var(--ink2)}
.kirinti{font-size:12px;color:var(--ink2);display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.kirinti a{color:var(--ink2)}.kirinti b{color:var(--ink)}
.kirinti .geri{padding:3px 8px;border:1px solid var(--line);border-radius:4px;background:var(--panel);color:var(--ink);cursor:pointer;font-size:12px}

/* ===== 19.09 v2 SADELEŞTİRME (kullanıcı: "kargaşa olmasın, sağ boş sol karışık") ===== */
#ust select.makineSec{min-width:230px}#ust input.makineAra{background:var(--panel2);border:1px solid var(--line);color:var(--ink);padding:5px 8px;border-radius:4px;font:inherit;font-size:13px;min-width:230px}
#ust input.makineAra:focus{outline:none;border-color:var(--accent)}
#ust select{background:var(--panel2);border:1px solid var(--line);color:var(--ink);padding:5px 8px;border-radius:4px;font:inherit;font-size:13px}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:5px;overflow:hidden}
.seg button{border:0;background:var(--panel);color:var(--ink2);padding:6px 12px;cursor:pointer;font-size:12.5px}
.seg button.on{background:var(--accent);color:var(--accent-ink);font-weight:600}
.seg button+button{border-left:1px solid var(--line)}
#agac.v2 .bil{margin-top:10px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink2);font-weight:600}
#agac.v2 li.gr{padding:6px 8px;border-left:2px solid transparent}
#agac.v2 li.gr.on{border-left-color:var(--accent)}
#agac.v2 li.gr .pn{font-family:"IBM Plex Mono",monospace;font-size:10px;color:var(--ink2);display:block}
.pk{position:relative}
.pk .ref.pyok{opacity:.7;text-decoration:line-through dotted}
.pk .ref{position:absolute;top:6px;left:6px;font-family:"IBM Plex Mono",monospace;font-size:10px;background:rgba(14,18,22,.85);color:var(--accent);padding:1px 5px;border-radius:3px}
.pk .kd{position:absolute;top:6px;right:6px;width:10px;height:10px;border-radius:50%}
.pk .kd.A{background:var(--A)}.pk .kd.B{background:var(--B)}.pk .kd.C{background:var(--C)}
.galeri{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin:8px 0}
.galeri img{width:100%;aspect-ratio:1;object-fit:contain;background:#fff;border-radius:3px;cursor:pointer;border:2px solid transparent}
.galeri img.on{border-color:var(--accent)}
.buyuk{width:100%;aspect-ratio:4/3;object-fit:contain;background:#fff;border-radius:4px}
#kart .bolum{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink2);margin:12px 0 4px}
#kart .sahne-not{font-size:12px;color:var(--ink2);margin-top:6px}
.yok{padding:10px;border:1px dashed var(--line);border-radius:4px;color:var(--ink2);font-size:12px;text-align:center}
/* pafta pan/zoom + sağ panele taşınan pafta (19.09) */
.pafta{overflow:hidden;user-select:none}
.pafta svg{shape-rendering:geometricPrecision}
.pafta .pz{position:absolute;right:8px;bottom:6px;display:flex;gap:3px;z-index:3}
.pafta .pz button{width:26px;height:26px;border:1px solid var(--line);background:rgba(22,27,33,.9);color:var(--ink);border-radius:3px;cursor:pointer;font-size:14px;line-height:1}
.pafta .pz button:hover{background:var(--accent);color:var(--accent-ink)}
main#sahne>.pafta{height:64vh}main#sahne>.pafta svg{max-height:none;height:100%;width:100%}
aside#kartKap>.pafta{height:240px;margin:-12px -12px 10px;border-radius:0;border-width:0 0 1px 0}
aside#kartKap>.pafta svg{max-height:none;height:100%;width:100%}
aside#kartKap>.pafta .not{font-size:10px}
.seg button:disabled{opacity:.4;cursor:not-allowed;text-decoration:line-through}

.on-img .on-yok{display:flex;align-items:center;justify-content:center;height:100%;color:var(--ink2);font-size:12px}
/* 21.09 MOBİL (≤640px) — kullanıcı: "parça kataloğunun mobilde görünüşüne el atmamız lazım". Geniş pafta 375px'te 90px'e düşüyordu →
   sahne 55vh + yatay/dikey kaydırma, svg 2,2× geniş (parmakla gezilir; +/− düğmeleri aynen çalışır); grup ağacı 160px. */
@media(max-width:640px){
  nav#agacKap{max-height:210px;overflow:auto}
  #ust .sis{flex-wrap:wrap;max-width:100%}#ust select{max-width:44%;flex:1 1 40%}#ust input.makineAra,#ust select.makineSec{min-width:0;flex:1 1 50%}
  #serit{overflow-x:auto;max-width:100%}
  html,body{height:auto;overflow:auto}#govde{display:block;height:auto;min-height:0}main#sahne{height:auto!important;max-height:none;overflow:visible}aside#kart,aside#kartKap{height:auto;max-height:none;overflow:visible}
  main#sahne{padding:8px;gap:8px}
  main#sahne>.pafta{height:55vh!important;min-height:55vh;flex:none!important;overflow:hidden;touch-action:none}
  main#sahne>.pafta svg{width:100%;height:100%;max-height:none}
  main#sahne>#serit{flex:none;min-height:96px}
  aside#kart{padding:10px}
}

/* 26.09 DOKUNMA ALANLARI (kullanıcı: "mobil dokunma alanlarını da yap") — yalnız parmakla kullanılan cihazlar (pointer:coarse); masaüstü değişmez.
   Hedef ~44 px (Apple/Google önerisi). Görünüşü küçük kalması gereken öğelerde (3B balon) görünmez ::before ile tıklama alanı büyütülür. */
@media (pointer:coarse){
  .pafta .pz{gap:6px}
  .pafta .pz button{width:44px;height:44px;font-size:20px;border-radius:6px}
  .cip{min-height:40px;padding:8px 12px}
  #agac li{min-height:40px;padding:8px 8px}
  #agac li.gr{padding-left:16px}
  .mvhs{position:relative}.mvhs::before{content:'';position:absolute;inset:-8px;border-radius:50%}
  .pk{min-height:44px}
  #sahneUst .seg button{min-height:36px;padding:8px 12px;font-size:12px}
  .sayfa .bas button.kapat{min-height:40px;padding:8px 14px}
  /* iOS: 16 px altı yazılı kutuya dokununca sayfayı zorla büyütüyordu */
  input,select,textarea{font-size:16px!important}
  #ust select,#ust input{min-height:40px}
}
/* adres çubuğu açılıp kapanınca vh ile boyutlanan sahneler zıplıyordu → küçük görünüm yüksekliği (svh) */
@supports (height:1svh){
  .stage model-viewer{height:56svh}
  .pafta svg{max-height:70svh}
  main#sahne>.pafta{height:64svh}
  @media(max-width:640px){main#sahne>.pafta{height:55svh!important;min-height:55svh}}
}
/* 26.09 KLAVYE: Tab ile gelinen öğe belirgin çerçeveyle görünür (fareyle tıklamada çerçeve çıkmaz — :focus-visible) */
[role="button"][tabindex="0"]:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
.pafta circle.hs:focus-visible{outline:none;stroke:var(--accent);stroke-width:3px;paint-order:stroke}
/* 27.09 Kleemann göz işaretli bölüm referansı (pafta → detay grubu) */
.pafta rect.ada{fill:rgba(63,191,127,.06);stroke:#2f9e62;stroke-width:2px;stroke-dasharray:6 4;vector-effect:non-scaling-stroke;cursor:pointer}
.pafta rect.ada:hover{fill:rgba(63,191,127,.18)}.pafta rect.ada.on{fill:rgba(63,191,127,.26);stroke-width:3px;stroke-dasharray:none}
.pafta rect.ada:focus-visible{outline:none;stroke:var(--accent);stroke-width:3px}
.ada-liste{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:4px}.ada-liste button{width:100%;text-align:left;font:inherit;font-size:13px;padding:6px 8px;border-radius:6px;border:1px solid rgba(128,128,128,.3);background:transparent;color:inherit;cursor:pointer}
.pafta rect.ref{fill:rgba(63,201,220,.14);stroke:var(--accent);stroke-width:3px;vector-effect:non-scaling-stroke;cursor:pointer}
.pafta rect.ref:hover,.pafta rect.ref:focus-visible{fill:rgba(63,201,220,.34);outline:none}

/* 28.09 teknik bilgi (saha/üretici doğrulamalı) */
#kart .teknik{border-left:3px solid var(--accent);background:var(--panel2);padding:6px 10px;margin:8px 0}#kart .teknik dl{margin:6px 0}#kart .esd{font-size:12.5px;margin:4px 0}#kart .galeri.saha img{width:96px;height:auto;border-radius:4px}

/* 28.09 aynı montajın alternatif onaylı modelleri: görünüm 1/2 */
#altyazi .gor{font:inherit;font-size:12px;padding:2px 8px;border-radius:6px;border:1px solid var(--line,#3a4650);background:transparent;color:inherit;cursor:pointer}#altyazi .gor.on{background:var(--accent);border-color:var(--accent);color:#111}

/* 29.09: model-viewer (host position:relative) altyazıdan SONRA eklendiği için "Bütüne dön" bağlantısının üstüne biniyor, tıklamayı 3B tuval yutuyordu → altyazı z-index:2 */