/* ===========================================================================
   Kargabot paneli — "Raven Console" teması
   Operatör konsolu: soğuk mürekkep yüzeyler + tek anlamlı vurgu (zümrüt).
   Şablonlar bu dosyadaki DEĞİŞKEN ADLARINA ve SINIFLARA bağlı; adlar korunur.
   =========================================================================== */

:root{
  /* --- yüzeyler / metin (açık tema) --- */
  --zemin:#eef1f6;        /* uygulama zemini (soğuk açık gri — krem DEĞİL) */
  --kart:#ffffff;         /* kart yüzeyi */
  --yuzey-2:#f3f6fa;      /* input / tablo başlığı / girintili yüzey */
  --yazi:#131a24;
  --soluk:#5a6676;
  --cizgi:#e3e8ef;
  --cizgi-kuvvetli:#d3dae4;

  /* --- vurgu: zümrüt (onay / para / git) --- */
  --vurgu:#0b7a46;
  --vurgu-kuvvetli:#0a6b3d;
  --vurgu-acik:#e4f3ea;

  /* --- semantik --- */
  --hata:#c0362c;   --hata-acik:#fbe9e7;
  --uyari:#8a5a0c;  --uyari-acik:#fdf0d6;

  /* --- sistem jetonları --- */
  --arka:var(--yuzey-2);                 /* eski şablon referansı (akordeon) */
  --halka:color-mix(in srgb,var(--vurgu) 42%, transparent);
  --golge:0 1px 2px rgba(16,24,40,.06), 0 6px 20px -8px rgba(16,24,40,.14);
  --golge-kart:0 1px 2px rgba(16,24,40,.05), 0 10px 28px -14px rgba(16,24,40,.18);
  --iris:#6f7bff;                        /* karga iridesansı — çok az kullanılır */

  --r-s:8px; --r-m:12px; --r-l:16px;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
}

@media (prefers-color-scheme:dark){
  :root{
    --zemin:#0d1117;      /* soğuk mürekkep (mavi dökümlü, saf siyah değil) */
    --kart:#161c25;
    --yuzey-2:#1c232e;
    --yazi:#e8edf4;
    --soluk:#93a0b2;
    --cizgi:#262f3b;
    --cizgi-kuvvetli:#333d4b;

    --vurgu:#43d998;      /* parlak nane-zümrüt */
    --vurgu-kuvvetli:#5fe3a9;
    --vurgu-acik:#11301f;

    --hata:#ff6f68;  --hata-acik:#3a1a1b;
    --uyari:#f5b63f; --uyari-acik:#33270f;

    --halka:color-mix(in srgb,var(--vurgu) 38%, transparent);
    --golge:0 1px 2px rgba(0,0,0,.35), 0 8px 24px -10px rgba(0,0,0,.55);
    --golge-kart:0 1px 2px rgba(0,0,0,.4), 0 14px 34px -16px rgba(0,0,0,.6);
    --iris:#8b95ff;
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font:15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--zemin);
  color:var(--yazi);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:var(--vurgu);text-decoration:none}
a:hover{text-decoration:underline}
::selection{background:color-mix(in srgb,var(--vurgu) 30%, transparent)}

/* --- odak halkası (klavye erişilebilirliği) --- */
:focus-visible{outline:2px solid var(--vurgu);outline-offset:2px;border-radius:4px}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none}

/* ===================================================== üst bar (app bar) */
header{
  background:color-mix(in srgb,var(--kart) 88%, transparent);
  backdrop-filter:saturate(1.2) blur(8px);
  -webkit-backdrop-filter:saturate(1.2) blur(8px);
  border-bottom:1px solid var(--cizgi);
  padding:0 24px;
  display:flex;align-items:center;gap:22px;
  min-height:58px;
  position:sticky;top:0;z-index:20;
}
header .logo{
  display:inline-flex;align-items:center;gap:9px;
  font-weight:700;font-size:17px;letter-spacing:-.015em;
  color:var(--yazi);text-decoration:none;white-space:nowrap;
}
/* Karga işareti — wordmark'tan önce, vurgu rengiyle maskeli */
header .logo::before{
  content:"";width:22px;height:22px;flex:none;
  background:var(--vurgu);
  -webkit-mask:var(--karga) center/contain no-repeat;
  mask:var(--karga) center/contain no-repeat;
}
:root{
  --karga:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg%3E%3Cpath d='M3.5 17.5 L10.5 11.5 L11.5 15.2 Z'/%3E%3Cellipse cx='12.8' cy='10.8' rx='6.1' ry='4.3' transform='rotate(-20 12.8 10.8)'/%3E%3Ccircle cx='17.9' cy='7.7' r='2.7'/%3E%3Cpath d='M19.9 6.9 L24 5.9 L20.3 8.8 Z'/%3E%3Crect x='12.1' y='14.2' width='1.05' height='3.4' rx='.5'/%3E%3Crect x='14.1' y='14.4' width='1.05' height='3.1' rx='.5'/%3E%3C/g%3E%3C/svg%3E");
}
nav{display:flex;gap:3px;flex-wrap:wrap;align-items:center}
nav a{
  padding:7px 13px;border-radius:var(--r-s);
  color:var(--soluk);text-decoration:none;font-size:14px;font-weight:500;
  transition:background .14s ease,color .14s ease;
  white-space:nowrap;
}
nav a:hover{background:var(--yuzey-2);color:var(--yazi);text-decoration:none}
nav a.aktif{background:var(--vurgu-acik);color:var(--vurgu);font-weight:600}
header .sag{margin-left:auto;font-size:14px;font-weight:500}
/* İçerik | Kurulum ayracı */
.nav-ayrac{width:1px;align-self:center;height:22px;background:var(--cizgi-kuvvetli);margin:0 7px}

main{max-width:1120px;margin:28px auto;padding:0 24px}

/* ===================================================== başlıklar */
h1{font-size:25px;line-height:1.2;letter-spacing:-.02em;margin:0 0 6px;font-weight:700}
h2{font-size:16px;line-height:1.3;margin:0 0 14px;font-weight:650}
/* kart içi bölüm başlığına ince zümrüt vurgu */
.kart>h2:first-child{
  display:flex;align-items:center;gap:9px;
}
.kart>h2:first-child::before{
  content:"";width:3px;height:16px;border-radius:2px;background:var(--vurgu);flex:none;
}
.alt{color:var(--soluk);margin:0 0 22px;font-size:14.5px;max-width:72ch}

/* ===================================================== kartlar */
.kart{
  background:var(--kart);
  border:1px solid var(--cizgi);
  border-radius:var(--r-m);
  padding:22px;
  margin-bottom:16px;
  box-shadow:var(--golge-kart);
}
.kart.pasif{opacity:.6}
.izgara{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
/* özet sayı kutusu */
.sayi{font-size:30px;font-weight:750;letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums}
.etiket{color:var(--soluk);font-size:13px;margin-top:6px}

/* ===================================================== tablolar */
table{width:100%;border-collapse:separate;border-spacing:0;font-size:14px}
th,td{text-align:left;padding:11px 10px;border-bottom:1px solid var(--cizgi);vertical-align:top}
thead th,tr:first-child th{
  color:var(--soluk);font-weight:600;font-size:12px;letter-spacing:.02em;
  border-bottom:1px solid var(--cizgi-kuvvetli);
}
tbody tr,table tr{transition:background .12s ease}
tbody tr:hover td{background:var(--yuzey-2)}
tr.pasif td{opacity:.5}
td:last-child,th:last-child{text-align:right}

/* ===================================================== formlar */
label{display:block;font-weight:600;font-size:13px;margin:16px 0 6px}
input[type=text],input[type=password],input[type=number],input[type=url],
input[type=datetime-local],input[type=date],input[type=time],input[type=email],
select,textarea{
  width:100%;padding:10px 12px;
  border:1px solid var(--cizgi-kuvvetli);border-radius:var(--r-s);
  background:var(--yuzey-2);color:var(--yazi);font:inherit;
  transition:border-color .14s ease, box-shadow .14s ease, background .14s ease;
}
input:hover,select:hover,textarea:hover{border-color:var(--soluk)}
input:focus,select:focus,textarea:focus{
  border-color:var(--vurgu);
  box-shadow:0 0 0 3px var(--halka);
  background:var(--kart);
}
input::placeholder,textarea::placeholder{color:var(--soluk);opacity:.7}
textarea{min-height:150px;font-size:14px;line-height:1.5;resize:vertical}
.ipucu{color:var(--soluk);font-size:12.5px;margin-top:5px;line-height:1.45}
.satir{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.secim{display:flex;flex-wrap:wrap;gap:9px 18px}
.secim label{font-weight:400;margin:0;display:flex;gap:7px;align-items:center;cursor:pointer}
input[type=checkbox],input[type=radio]{accent-color:var(--vurgu);width:16px;height:16px;cursor:pointer}

/* ===================================================== butonlar */
button,.buton{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:9px 17px;border-radius:var(--r-s);
  border:1px solid var(--vurgu);background:var(--vurgu);color:#fff;
  font:inherit;font-weight:600;cursor:pointer;text-decoration:none;
  transition:background .14s ease,border-color .14s ease,color .14s ease,transform .06s ease,box-shadow .14s ease;
  box-shadow:0 1px 2px rgba(16,24,40,.08);
}
button:hover,.buton:hover{background:var(--vurgu-kuvvetli);border-color:var(--vurgu-kuvvetli);text-decoration:none}
button:active,.buton:active{transform:translateY(1px)}
@media (prefers-color-scheme:dark){ button,.buton{color:#07140d} }

button.ikincil,.buton.ikincil{
  background:transparent;color:var(--vurgu);border-color:var(--cizgi-kuvvetli);box-shadow:none;
}
button.ikincil:hover,.buton.ikincil:hover{background:var(--vurgu-acik);border-color:var(--vurgu)}
@media (prefers-color-scheme:dark){ button.ikincil,.buton.ikincil{color:var(--vurgu)} }

button.tehlike,.buton.tehlike{background:transparent;border-color:color-mix(in srgb,var(--hata) 55%, var(--cizgi));color:var(--hata);box-shadow:none}
button.tehlike:hover,.buton.tehlike:hover{background:var(--hata);border-color:var(--hata);color:#fff}
@media (prefers-color-scheme:dark){ button.tehlike:hover,.buton.tehlike:hover{color:#1a0b0b} }

button.kucuk,.buton.kucuk{padding:5px 11px;font-size:13px;font-weight:600}
.butonlar{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap;align-items:center}
form.satir-ici{display:inline}

/* ===================================================== bildirimler */
.bildirim{
  padding:13px 15px 13px 16px;border-radius:var(--r-s);margin-bottom:16px;font-size:14px;
  border:1px solid transparent;border-left-width:3px;display:flex;gap:10px;align-items:flex-start;
}
.bildirim.ok{background:var(--vurgu-acik);color:var(--vurgu);border-color:color-mix(in srgb,var(--vurgu) 30%, transparent)}
.bildirim.hata{background:var(--hata-acik);color:var(--hata);border-color:color-mix(in srgb,var(--hata) 35%, transparent)}
.bildirim.uyari{background:var(--uyari-acik);color:var(--uyari);border-color:color-mix(in srgb,var(--uyari) 35%, transparent)}

/* ===================================================== rozetler */
.rozet{
  display:inline-flex;align-items:center;white-space:nowrap;
  padding:3px 9px;border-radius:999px;font-size:12px;font-weight:600;
  background:var(--yuzey-2);border:1px solid var(--cizgi);color:var(--soluk);
  margin:0 4px 4px 0;
}
.rozet.yesil{background:var(--vurgu-acik);color:var(--vurgu);border-color:transparent}

/* ===================================================== görseller */
.onizleme{max-width:220px;border-radius:var(--r-s);border:1px solid var(--cizgi);display:block}
.kucuk-gorsel{width:64px;height:40px;object-fit:cover;border-radius:6px;border:1px solid var(--cizgi)}
.sohbet-gorsel{max-width:100%;max-height:320px;border-radius:var(--r-s);display:block;margin-bottom:8px}

/* ===================================================== kod / önbiçimli */
pre{
  background:var(--yuzey-2);border:1px solid var(--cizgi);border-radius:var(--r-s);
  padding:12px;overflow:auto;font-size:12.5px;max-height:320px;white-space:pre-wrap;
  font-family:var(--mono);line-height:1.5;
}
code{
  background:var(--yuzey-2);border:1px solid var(--cizgi);
  padding:1.5px 6px;border-radius:5px;font-size:12.5px;font-family:var(--mono);
  color:var(--yazi);
}
details summary{cursor:pointer;color:var(--vurgu);font-weight:500}

/* ===================================================== giriş / kurulum kutusu */
.giris-kutu{max-width:380px;margin:12vh auto}
.giris-kutu.kart{box-shadow:var(--golge-kart)}

/* ===================================================== araç çubuğu (promosyon arama) */
.arac-cubugu{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:14px 16px}
.arac-cubugu .ara{display:flex;gap:8px;flex-wrap:wrap}
.arac-cubugu .ara input{width:260px;max-width:100%}

/* ===================================================== yayın önizleme (sohbet) */
.duzen{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:18px;align-items:start}
.sohbet{background:var(--kart);border:1px solid var(--cizgi);border-radius:var(--r-m);padding:22px;min-height:200px;box-shadow:var(--golge-kart)}
.balon{
  max-width:560px;background:var(--yuzey-2);border:1px solid var(--cizgi);
  border-radius:16px 16px 16px 5px;padding:14px 16px;
}
.balon-ust{margin-bottom:8px}
.mesaj{word-wrap:break-word}
.mesaj p{margin:0 0 6px}
.secenekler{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.secenek{display:flex;gap:10px;align-items:flex-start;flex-wrap:wrap}
.secenek-buton{
  display:inline-block;padding:9px 15px;border:1px solid var(--vurgu);color:var(--vurgu);
  border-radius:10px;text-decoration:none;background:var(--kart);font-weight:600;font-size:14px;
  transition:background .14s ease;
}
.secenek-buton:hover{background:var(--vurgu-acik);text-decoration:none}
.secenek-buton.bos{border-color:var(--cizgi-kuvvetli);color:var(--soluk)}
details.duzenle{font-size:13px}
details.duzenle summary{padding:8px 0}
details.duzenle[open]{flex-basis:100%;background:var(--kart);border:1px solid var(--cizgi);border-radius:var(--r-s);padding:4px 12px 12px}
.devam{display:inline-block;margin-top:14px;font-weight:600;text-decoration:none}
.ayrinti{font-size:13px;margin-top:6px;word-break:break-all;color:var(--soluk)}
.yan{position:sticky;top:78px}

/* ===================================================== Mesajlar akordeonu */
details.mesaj-grup{
  border:1px solid var(--cizgi);border-radius:var(--r-s);padding:4px 16px;margin:12px 0;
  background:var(--kart);transition:border-color .14s ease;
}
details.mesaj-grup>summary{font-size:15px;font-weight:600;padding:12px 0;color:var(--yazi);list-style:none}
details.mesaj-grup>summary::-webkit-details-marker{display:none}
details.mesaj-grup>summary::before{content:"▸ ";color:var(--vurgu);font-weight:700}
details.mesaj-grup[open]>summary::before{content:"▾ "}
details.mesaj-grup[open]{border-color:var(--cizgi-kuvvetli);padding-bottom:14px}

/* ===================================================== duyarlı (responsive) */
@media(max-width:900px){.duzen{grid-template-columns:1fr}.yan{position:static}}
@media(max-width:700px){
  .satir{grid-template-columns:1fr}
  header{flex-wrap:wrap;min-height:auto;padding:12px 16px;gap:12px}
  .nav-ayrac{display:none}
  main{margin:20px auto;padding:0 16px}
  h1{font-size:22px}
}

/* ===================================================== hareketi azalt */
@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important;scroll-behavior:auto !important}
}