/* maxwingirisi.icu — "gece-cyan" kontrol paneli teması
   mimari: sol dikey ray (sabit) + tablo öncelikli içerik akışı + yatay içindekiler çubuğu */
:root{
  --gece:#070E18; --panel:#0D1929; --panel2:#122338; --panel3:#182F4B;
  --cizgi:#1E3654; --cizgi2:#2A4A6E;
  --metin:#E7EFF8; --metin2:#9FB3CB; --metin3:#6E86A3;
  --cyan:#22D3EE; --cyan2:#67E8F9; --cyan-d:#0E7490;
  --amber:#F5A524; --yesil:#34D399; --kirmizi:#F87171;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --r:6px; --r2:10px;
  --golge:0 1px 0 rgba(255,255,255,.03),0 10px 30px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--gece);color:var(--metin);font:15.5px/1.68 var(--sans)}
img{max-width:100%;height:auto;display:block}
a{color:var(--cyan2);text-decoration:none}
a:hover{color:#fff}
h1,h2,h3{line-height:1.25;letter-spacing:-.015em;margin:0 0 12px;color:#fff}
h1{font-size:clamp(26px,3.4vw,38px)}
h2{font-size:clamp(20px,2.2vw,26px)}
h3{font-size:17.5px}
p{margin:0 0 14px}
svg{display:block}
.mono{font-family:var(--mono)}

/* ---------- YERLEŞİM: RAY + İÇERİK ---------- */
.panel-body{display:grid;grid-template-columns:262px minmax(0,1fr);min-height:100vh;align-items:start}
.ray{grid-column:1;grid-row:1;align-self:stretch;background:linear-gradient(180deg,var(--panel) 0%,#0A1424 100%);
  border-right:1px solid var(--cizgi);position:relative}
.icerik{grid-column:2;grid-row:1;min-width:0;display:flex;flex-direction:column}
.ray-in{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;padding:18px 16px 14px;overflow-y:auto}
.ray-ust{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.logo{display:flex;align-items:center;gap:10px}
.logo-mark{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,var(--cyan-d),#0B3B4A);
  color:var(--cyan2);font:700 17px/34px var(--mono);text-align:center;border:1px solid var(--cizgi2)}
.logo-y{display:flex;flex-direction:column;line-height:1.05}
.logo-y b{font-size:16.5px;color:#fff}
.logo-y i{font:400 10.5px/1.4 var(--mono);font-style:normal;color:var(--metin3);letter-spacing:.12em;text-transform:uppercase}
.ray-kapat{display:none;margin-left:auto;background:transparent;border:1px solid var(--cizgi);color:var(--metin2);
  border-radius:var(--r);width:30px;height:30px;font-size:17px;cursor:pointer}
.ara-form{display:flex;align-items:center;background:var(--panel2);border:1px solid var(--cizgi);border-radius:var(--r);margin-bottom:16px}
.ara-form input{flex:1;background:transparent;border:0;padding:9px 11px;color:var(--metin);font:14px var(--sans)}
.ara-form input::placeholder{color:var(--metin3)}
.ara-form input:focus{outline:none}
.ara-form button{background:transparent;border:0;color:var(--metin2);padding:8px 10px;cursor:pointer}
.ara-buyuk{margin-bottom:18px}
.ara-buyuk button{background:var(--cyan-d);color:#fff;font-weight:600;border-radius:0 var(--r) var(--r) 0;padding:10px 18px}
.ray-menu{margin:0}
.ray-bas{font:600 10.5px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--metin3);margin:14px 0 6px}
.ray-menu ul{list-style:none;margin:0 0 6px;padding:0}
.ray-menu li a{display:flex;justify-content:space-between;gap:8px;align-items:center;padding:8px 10px;border-radius:var(--r);
  color:var(--metin2);font-size:14.2px;border-left:2px solid transparent}
.ray-menu li a:hover{background:var(--panel2);color:#fff}
.ray-menu li a.on{background:var(--panel2);color:#fff;border-left-color:var(--cyan)}
.ray-menu li a i{font:400 11.5px var(--mono);font-style:normal;color:var(--metin3)}
.ray-mini li a{font-size:13.6px;padding:6px 10px}
.ray-alt{margin-top:auto;padding-top:16px;border-top:1px solid var(--cizgi);display:grid;gap:6px}
.ray-stat{font:12.5px var(--mono);color:var(--metin3)}
.ray-stat span{color:var(--cyan2);font-size:14.5px;margin-right:4px}
.ray-yas{font:11.5px var(--mono);color:var(--amber);margin:6px 0 0}
.ray-ac,{display:none}

/* ---------- ÜST DURUM BARI ---------- */
.stbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:14px;padding:10px 26px;
  background:rgba(7,14,24,.92);border-bottom:1px solid var(--cizgi);backdrop-filter:blur(6px);
  font:12.5px var(--mono);color:var(--metin3)}
.stbar-item b{color:var(--yesil)}
.stbar-sag{margin-left:auto;display:flex;align-items:center;gap:14px}
.stbar-sag a{color:var(--metin2)}
.yas{background:var(--amber);color:#1A1206;border-radius:3px;padding:1px 6px;font-size:11px}
.ray-ac{display:none;background:var(--panel2);border:1px solid var(--cizgi);color:var(--metin);border-radius:var(--r);
  width:30px;height:30px;font-size:15px;cursor:pointer}
.panel{padding:26px;display:block;max-width:1180px}

/* ---------- PANO (ana sayfa) ---------- */
.pano-ust{display:grid;grid-template-columns:1.35fr .65fr;gap:26px;align-items:start;margin-bottom:26px}
.etiket{font:600 10.5px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--cyan);margin:0 0 12px}
.lead{color:var(--metin2);font-size:16.5px;max-width:66ch}
.cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.btn{display:inline-block;border-radius:var(--r);font-weight:600;font-size:14px;padding:10px 16px;border:1px solid transparent}
.btn-cyan{background:var(--cyan-d);color:#fff}
.btn-cyan:hover{background:#0891B2;color:#fff}
.btn-cizgi{border-color:var(--cizgi2);color:var(--metin)}
.btn-cizgi:hover{border-color:var(--cyan);color:#fff}
.pano-metrik{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.met{background:var(--panel);border:1px solid var(--cizgi);border-radius:var(--r2);padding:16px}
.met b{display:block;font:700 24px var(--mono);color:var(--cyan2)}
.met span{font-size:12.5px;color:var(--metin3)}
.blok,.pano-blok{background:var(--panel);border:1px solid var(--cizgi);border-radius:var(--r2);padding:20px 20px 22px;margin-bottom:20px}
.pano-blok{background:linear-gradient(180deg,var(--panel2),var(--panel))}
.blok-bas{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-bottom:14px;flex-wrap:wrap}
.blok-bas h2,.blok-bas h1{margin:0}
.pg-h1{font-size:clamp(20px,2.2vw,26px)}
.blok-bas .mono,.link{font-size:12px;color:var(--metin3)}
.link:hover{color:var(--cyan2)}
.kapsam{color:var(--metin2);font-size:14.5px}
.pano-kartlar{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.p-kart{background:var(--panel2);border:1px solid var(--cizgi);border-radius:var(--r);padding:18px;display:block}
.p-kart:hover{border-color:var(--cyan-d);background:var(--panel3)}
.p-kart .no{font-size:12px;color:var(--cyan)}
.p-kart h3{margin:8px 0 8px;font-size:17px}
.p-kart p{color:var(--metin2);font-size:14px}
.blok-tek{max-width:900px}

/* ---------- TABLOLAR ---------- */
.tbl-sar{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;background:var(--panel2);font-size:14.3px}
th,td{border:1px solid var(--cizgi);padding:11px 13px;text-align:left;vertical-align:top}
thead th{background:#0B2036;color:var(--cyan2);font:600 12.5px var(--mono);letter-spacing:.04em;text-transform:uppercase}
tbody tr:hover td{background:var(--panel3)}
.metin table{margin:16px 0 22px}
.liste .c-baslik{display:flex;gap:13px;align-items:flex-start}
.liste .c-baslik img{width:88px;height:50px;object-fit:cover;border-radius:4px;flex:0 0 auto;border:1px solid var(--cizgi)}
.liste .c-baslik a{font-weight:600;color:#fff;font-size:15.3px}
.liste .c-baslik a:hover{color:var(--cyan2)}
.liste .c-baslik p{margin:4px 0 0;color:var(--metin3);font-size:13.3px}
.liste .c-sayi{font-family:var(--mono);color:var(--metin2);white-space:nowrap;width:1%}
.kat-tablo td:last-child,.kat-tablo th:last-child{width:1%;white-space:nowrap}
.cip{display:inline-block;font:600 11px var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--cyan2);
  background:rgba(34,211,238,.12);border:1px solid rgba(34,211,238,.3);border-radius:3px;padding:3px 7px;white-space:nowrap}

/* ---------- MAKALE ---------- */
.tek{max-width:900px}
.bc{font:12.5px var(--mono);color:var(--metin3);margin-bottom:16px}
.bc ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0}
.bc li+li:before{content:"/";margin-right:8px;color:var(--cizgi2)}
.bc a{color:var(--metin2)}
.tek-bas{margin-bottom:18px}
.tek-bas .meta{font-size:12.5px;color:var(--metin3);margin:0}
.kapak{margin:18px 0;border:1px solid var(--cizgi);border-radius:var(--r);overflow:hidden;background:var(--panel2)}
.toc-bar{position:sticky;top:52px;z-index:20;display:flex;align-items:center;gap:12px;background:rgba(13,25,41,.95);
  border:1px solid var(--cizgi);border-radius:var(--r);padding:9px 12px;margin:0 0 20px;backdrop-filter:blur(6px)}
.toc-etiket{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--metin3);white-space:nowrap}
.toc-kaydir{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none}
.toc-kaydir::-webkit-scrollbar{display:none}
.toc-kaydir a{font-size:13px;color:var(--metin2);border:1px solid var(--cizgi);border-radius:999px;padding:5px 11px;white-space:nowrap}
.toc-kaydir a:hover,.toc-kaydir a.on{border-color:var(--cyan-d);color:#fff;background:var(--panel3)}
.metin h2{margin:30px 0 12px;padding-bottom:8px;border-bottom:1px solid var(--cizgi)}
.metin h3{margin:20px 0 8px}
.metin p,.metin li{color:#D6E2F0}
.metin ul,.metin ol{padding-left:22px;margin:0 0 16px}
.metin li{margin-bottom:6px}
.metin strong{color:#fff}
.metin a{border-bottom:1px solid rgba(34,211,238,.4)}
.maddeler{list-style:none;padding:0}
.maddeler li{background:var(--panel2);border:1px solid var(--cizgi);border-left:3px solid var(--cyan-d);
  border-radius:var(--r);padding:10px 13px;margin-bottom:7px;font-size:14.6px;color:var(--metin2)}
.akis{list-style:none;counter-reset:a;padding:0;margin:0}
.akis li{position:relative;background:var(--panel2);border:1px solid var(--cizgi);border-radius:var(--r);
  padding:15px 16px 14px 62px;margin-bottom:9px}
.akis .no{position:absolute;left:15px;top:15px;font:700 15px var(--mono);color:var(--cyan)}
.akis b{display:block;font-size:15px;color:#fff;margin-bottom:3px}
.akis p{margin:0;color:var(--metin2);font-size:14.4px}
.yazar{display:flex;gap:13px;background:var(--panel2);border:1px solid var(--cizgi);border-radius:var(--r2);padding:15px 17px;margin-top:24px}
.yazar-avatar{width:42px;height:42px;border-radius:10px;background:linear-gradient(135deg,var(--cyan-d),#0B3B4A);
  color:var(--cyan2);font:700 13px/42px var(--mono);text-align:center;flex:0 0 auto}
.yazar p{margin:0}
.yazar-ad{font-weight:700;color:#fff;font-size:14.6px}
.yazar-not{font-size:13.3px;color:var(--metin2);margin:4px 0 6px!important}
.yazar-meta{font:12px var(--mono);color:var(--metin3)}
.kaynak{background:var(--panel2);border:1px solid var(--cizgi);border-radius:var(--r);padding:12px 14px 12px 30px;
  list-style:disc;color:var(--metin2);font-size:14.3px}
.not{font:12.5px var(--mono);color:var(--metin3);border-top:1px solid var(--cizgi);padding-top:12px}
.seffaf{background:rgba(245,165,36,.1);border-left:3px solid var(--amber);border-radius:3px;padding:11px 14px;font-size:13.8px;color:#E8D9BE}
.uyari{background:rgba(248,113,113,.08);border:1px solid rgba(248,113,113,.25);border-left:3px solid var(--kirmizi);
  border-radius:var(--r);padding:16px 18px;margin:24px 0}
.uyari h2{font-size:18px;border:0;margin:0 0 8px;padding:0;color:#FCA5A5}
.uyari p{font-size:14.3px;color:#E4C9C9;margin:0 0 10px}

/* ---------- SSS ---------- */
.sss{border:1px solid var(--cizgi);border-radius:var(--r);overflow:hidden;background:var(--panel2)}
.sss details{border-bottom:1px solid var(--cizgi)}
.sss details:last-child{border-bottom:0}
.sss summary{cursor:pointer;list-style:none;padding:14px 40px 14px 16px;font-weight:600;font-size:15px;position:relative;color:#fff}
.sss summary::-webkit-details-marker{display:none}
.sss summary:after{content:"+";position:absolute;right:16px;top:12px;color:var(--cyan);font:400 18px var(--mono)}
.sss details[open] summary:after{content:"−"}
.sss-c{padding:0 16px 14px;color:var(--metin2);font-size:14.4px}

/* ---------- SAYFALAMA ---------- */
.sayfalama{display:flex;gap:7px;margin-top:20px;flex-wrap:wrap}
.sayfalama a{border:1px solid var(--cizgi);background:var(--panel2);border-radius:var(--r);padding:8px 13px;
  font:13px var(--mono);color:var(--metin2)}
.sayfalama a.on{background:var(--cyan-d);color:#fff;border-color:var(--cyan-d)}

/* ---------- FOOTER ---------- */
.alt{border-top:1px solid var(--cizgi);background:var(--panel);margin-top:24px;padding:26px 0 22px}
.alt-in{max-width:1180px;padding:0 26px;display:grid;grid-template-columns:1.6fr 1fr 1.2fr;gap:26px}
.alt-kol h3{font:600 11px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--cyan2);margin:0 0 10px}
.alt-kol ul{list-style:none;margin:0;padding:0;font-size:14px}
.alt-kol li{padding:3px 0}
.alt-kol a{color:var(--metin2)}
.alt-kol p{font-size:13.4px;color:var(--metin3)}
.alt-iletisim a{color:var(--cyan2)}
.alt-alt{grid-column:1/-1;border-top:1px solid var(--cizgi);padding-top:14px}
.sorumlu-mini{background:rgba(245,165,36,.1);border-left:3px solid var(--amber);border-radius:3px;padding:10px 13px;
  font:12.8px var(--mono);color:#E8D9BE}
.copyright{font:12px var(--mono);color:var(--metin3);margin-top:10px}
.ray-acik-katman{display:none;position:fixed;inset:0;background:rgba(3,7,12,.6);z-index:55}
body.ray-acik .ray-acik-katman{display:block}
.panel-body > .alt{grid-column:1/-1}

/* ---------- RESPONSIVE ---------- */
@media(max-width:1080px){
  .pano-ust{grid-template-columns:1fr;gap:18px}
  .pano-metrik{grid-template-columns:repeat(4,1fr)}
  .pano-kartlar{grid-template-columns:1fr}
  .alt-in{grid-template-columns:1fr 1fr}
}
@media(max-width:900px){
  .panel-body{grid-template-columns:1fr}
  .ray{position:fixed;inset:0 auto 0 0;width:280px;transform:translateX(-100%);transition:transform .2s ease;z-index:60}
  body.ray-acik .ray{transform:none}
  body.ray-acik .ray-acik-katman{display:block;position:fixed;inset:0;background:rgba(3,7,12,.6);z-index:55}
  .ray-in{height:100vh}
  .ray-kapat{display:block}
  .ray-ac{display:inline-block}
  .stbar{padding:9px 14px;gap:10px}
  .stbar-item:first-of-type{display:none}
  .panel{padding:16px 14px}
  .toc-bar{top:48px}
  .pano-metrik{grid-template-columns:1fr 1fr}
  .alt-in{grid-template-columns:1fr;padding:0 16px}
}
@media(max-width:620px){
  .liste .c-baslik img{display:none}
  .stbar-sag a:first-child{display:none}
  .pano-metrik{grid-template-columns:1fr 1fr}
  th,td{padding:9px 10px;font-size:13.6px}
}
