/* Ünal Güner Stüdyo — panel biçimi.
   Renkler tek yerde: her şey değişkenlerden okur, koyu/açık tek satırda döner. */

:root{
  --ground:#f7f6f3; --yuzey:#ffffff; --yuzey2:#f1efe9; --yuzey3:#e8e5dd;
  --murekkep:#16202e; --soluk:#5b6676; --daha-soluk:#8a93a1;
  --cizgi:#e3e0d9; --cizgi2:#cfcabf;
  --bakir:#b25a2a; --bakir-yzi:#ffffff; --turkuaz:#1c6b6b;
  --iyi:#2f7a4d; --uyari:#a87a14; --kritik:#a33a2e;
  --iyi-z:#e2f0e6; --uyari-z:#f6ecd2; --kritik-z:#f7e2de;
  --golge:0 1px 2px rgba(22,32,46,.06), 0 8px 24px rgba(22,32,46,.05);
}
html[data-tema="koyu"]{
  --ground:#0f141c; --yuzey:#161d28; --yuzey2:#1c2431; --yuzey3:#212b3a;
  --murekkep:#e8e9ec; --soluk:#97a1b0; --daha-soluk:#6d778a;
  --cizgi:#253040; --cizgi2:#33415a;
  --bakir:#e08a4f; --bakir-yzi:#1a0f06; --turkuaz:#4fc4bd;
  --iyi:#5bbd82; --uyari:#d9a83c; --kritik:#e0725f;
  --iyi-z:#16301f; --uyari-z:#332711; --kritik-z:#3a1c17;
  --golge:0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--ground); color:var(--murekkep);
  font-family:'Source Sans 3',system-ui,sans-serif; font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit; text-decoration:none}
button,input,select,textarea{font:inherit; color:inherit}
.mono{font-family:'IBM Plex Mono',ui-monospace,monospace; font-variant-numeric:tabular-nums}

/* ------------------------------------------------------------------ çatı */
.cati{display:grid; grid-template-columns:238px 1fr; min-height:100vh}
.yan{background:var(--yuzey); border-right:1px solid var(--cizgi); padding:18px 0;
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh}
.marka{display:flex; gap:10px; align-items:center; padding:0 20px 18px; border-bottom:1px solid var(--cizgi)}
.marka .rz{width:34px; height:34px; border-radius:8px; flex:none; display:grid; place-items:center;
  background:linear-gradient(135deg,var(--bakir),#8c4a22); color:var(--bakir-yzi);
  font-family:'Bricolage Grotesque',sans-serif; font-weight:700}
.marka b{display:block; font-family:'Bricolage Grotesque',sans-serif; font-size:1.02rem; line-height:1.15}
.marka span{font-size:.7rem; color:var(--daha-soluk); letter-spacing:.07em}
.menu{padding:12px; display:flex; flex-direction:column; gap:2px; overflow-y:auto; flex:1}
.menu a{display:flex; gap:10px; align-items:center; padding:9px 12px; border-radius:7px;
  color:var(--soluk); font-size:.93rem}
.menu a:hover{background:var(--yuzey2); color:var(--murekkep)}
.menu a.et{background:var(--yuzey3); color:var(--murekkep); font-weight:600}
.menu a .ik{width:17px; text-align:center; opacity:.85}
.menu a .sy{margin-left:auto; font-family:'IBM Plex Mono',monospace; font-size:.74rem; color:var(--daha-soluk)}
.menu .ayrac{height:1px; background:var(--cizgi); margin:10px 4px}
.yan-alt{padding:0 12px}
.isci{padding:9px 12px; border:1px solid var(--cizgi); border-radius:8px;
  display:flex; gap:9px; align-items:center; font-size:.81rem; color:var(--soluk)}
.nokta{width:8px; height:8px; border-radius:50%; background:var(--iyi); flex:none;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--iyi) 20%, transparent)}
.nokta.kapali{background:var(--kritik); box-shadow:0 0 0 3px color-mix(in srgb, var(--kritik) 20%, transparent)}

.ana{display:flex; flex-direction:column; min-width:0}
.tepe{display:flex; gap:12px; align-items:center; padding:12px 22px; background:var(--yuzey);
  border-bottom:1px solid var(--cizgi); position:sticky; top:0; z-index:5}
.ara-sar{flex:1; max-width:430px}
.ara{width:100%; background:var(--ground); border:1px solid var(--cizgi2); border-radius:8px;
  padding:8px 13px; font-size:.92rem}
.ara:focus{outline:2px solid var(--bakir); outline-offset:1px; border-color:transparent}
.tepe .sag{margin-left:auto; display:flex; gap:9px; align-items:center}
.ikon-dugme{width:36px; height:36px; border-radius:8px; border:1px solid var(--cizgi);
  background:var(--yuzey2); display:grid; place-items:center; cursor:pointer; font-size:1rem}
.ikon-dugme:hover{background:var(--yuzey3)}
.yan-ac{display:none}
.kul{display:flex; gap:9px; align-items:center; font-size:.88rem}
.kul .av{width:32px; height:32px; border-radius:50%; background:var(--turkuaz); color:#fff;
  display:grid; place-items:center; font-weight:700; font-size:.8rem}
html[data-tema="koyu"] .kul .av{color:#06231f}
.govde{padding:22px; flex:1}

/* ---------------------------------------------------------------- başlık */
h1.sf{font-family:'Bricolage Grotesque',sans-serif; font-size:1.5rem; font-weight:700;
  margin:0 0 3px; letter-spacing:-.01em}
.sf-alt{color:var(--soluk); font-size:.92rem; margin:0 0 18px}
h2,h3{font-family:'Bricolage Grotesque',sans-serif; margin:0}

/* -------------------------------------------------------------- sayımlar */
.sayim-sira{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-bottom:20px}
.sy-kutu{background:var(--yuzey); border:1px solid var(--cizgi); border-radius:9px; padding:13px 15px}
.sy-kutu b{display:block; font-family:'IBM Plex Mono',monospace; font-size:1.5rem; font-weight:600;
  font-variant-numeric:tabular-nums; line-height:1.1}
.sy-kutu span{display:block; color:var(--soluk); font-size:.8rem; margin-top:2px}
.sy-kutu.a b{color:var(--turkuaz)} .sy-kutu.b b{color:var(--bakir)} .sy-kutu.c b{color:var(--uyari)}

/* --------------------------------------------------------------- çipler */
.cipler{display:flex; gap:7px; flex-wrap:wrap; margin-bottom:14px}
.cip{padding:5px 12px; border-radius:18px; border:1px solid var(--cizgi2); background:var(--yuzey);
  color:var(--soluk); font-size:.83rem; cursor:pointer}
.cip:hover{border-color:var(--bakir); color:var(--murekkep)}
.cip.et{background:var(--bakir); border-color:var(--bakir); color:var(--bakir-yzi); font-weight:600}

/* ---------------------------------------------------------------- tablo */
.tsar{border:1px solid var(--cizgi); border-radius:9px; overflow-x:auto; background:var(--yuzey)}
table{border-collapse:collapse; width:100%; min-width:680px}
th,td{text-align:left; padding:10px 15px; border-bottom:1px solid var(--cizgi); font-size:.9rem}
th{font-family:'IBM Plex Mono',monospace; font-size:.69rem; letter-spacing:.11em; text-transform:uppercase;
  color:var(--daha-soluk); font-weight:400; background:var(--yuzey2); position:sticky; top:0}
tbody tr:hover{background:var(--yuzey2)}
tr:last-child td{border-bottom:none}
td.s{font-family:'IBM Plex Mono',monospace; font-variant-numeric:tabular-nums; color:var(--soluk)}
td .ad{font-weight:600}
.serit{display:inline-block; width:3px; height:15px; border-radius:2px; margin-right:9px; vertical-align:-3px}
.se-a{background:var(--iyi)} .se-p{background:var(--daha-soluk)}

.rozet{display:inline-block; padding:2px 9px; border-radius:14px; font-size:.72rem;
  font-family:'IBM Plex Mono',monospace; letter-spacing:.03em; white-space:nowrap}
.r-iyi{background:var(--iyi-z); color:var(--iyi)}
.r-uy{background:var(--uyari-z); color:var(--uyari)}
.r-kr{background:var(--kritik-z); color:var(--kritik)}
.r-ss{background:var(--yuzey3); color:var(--daha-soluk)}

/* ----------------------------------------------------------------- panel */
.pan{background:var(--yuzey); border:1px solid var(--cizgi); border-radius:9px; padding:17px 19px}
.pan h3{font-size:1.02rem; margin-bottom:12px; font-weight:700}
.iki{display:grid; grid-template-columns:1.55fr 1fr; gap:18px; align-items:start}
.sutun{display:flex; flex-direction:column; gap:18px}
.satir{display:flex; gap:12px; padding:9px 0; border-bottom:1px solid var(--cizgi); font-size:.9rem;
  align-items:center}
.satir:last-child{border-bottom:none}
.satir .et{color:var(--soluk); min-width:120px}
.ilerle{height:6px; background:var(--yuzey3); border-radius:4px; overflow:hidden; flex:1; max-width:140px}
.ilerle i{display:block; height:100%; background:var(--turkuaz)}

/* ----------------------------------------------------------------- form */
.dugme{display:inline-block; padding:10px 18px; border-radius:8px; border:0; cursor:pointer;
  background:var(--bakir); color:var(--bakir-yzi); font-weight:700; font-size:.94rem; text-align:center}
.dugme:hover{filter:brightness(1.07)}
.dugme.genis{display:block; width:100%; margin-top:10px}
.dugme.ikincil{background:var(--yuzey3); color:var(--murekkep); font-weight:600}
label{display:block; font-size:.8rem; color:var(--soluk); margin:13px 0 5px}
.alan{width:100%; background:var(--ground); border:1px solid var(--cizgi2); border-radius:7px;
  padding:9px 12px; font-size:.92rem}
.alan:focus{outline:2px solid var(--bakir); outline-offset:1px; border-color:transparent}

/* ---------------------------------------------------------------- giriş */
.giris-ek{min-height:100vh; display:grid; place-items:center; padding:20px;
  background:radial-gradient(900px 480px at 30% 18%, color-mix(in srgb, var(--bakir) 12%, transparent), transparent 62%), var(--ground)}
.giris-kut{width:100%; max-width:380px; background:var(--yuzey); border:1px solid var(--cizgi2);
  border-radius:13px; padding:28px; box-shadow:var(--golge)}
.giris-kut .marka{border:none; padding:0 0 16px; justify-content:center}
.uyari-kutu{background:var(--kritik-z); color:var(--kritik); border-radius:7px; padding:9px 12px;
  font-size:.88rem; margin-top:12px}
.bilgi-kutu{background:var(--iyi-z); color:var(--iyi); border-radius:7px; padding:9px 12px;
  font-size:.88rem; margin-top:12px}
.pwa-not{margin-top:16px; padding-top:14px; border-top:1px solid var(--cizgi);
  color:var(--daha-soluk); font-size:.78rem; text-align:center}

/* ------------------------------------------------------------------- boş */
.bos{text-align:center; padding:50px 20px; color:var(--soluk)}
.bos b{display:block; font-family:'Bricolage Grotesque',sans-serif; font-size:1.1rem;
  color:var(--murekkep); margin-bottom:6px}

@media(max-width:900px){
  .iki{grid-template-columns:1fr}
}
@media(max-width:760px){
  .cati{grid-template-columns:1fr}
  .yan{position:fixed; left:-260px; top:0; width:238px; z-index:20; transition:left .18s}
  .yan.acik{left:0}
  .yan-ac{display:grid}
  .kul-ad{display:none}
}
@media(prefers-reduced-motion:reduce){*{transition:none !important; animation:none !important}}