/* =========================================================================
   ÖĞRETMENİN KALEMİ — tek global stil dosyası

   Üst yarı: renk/ölçü değişkenleri ve temel tipografi. Bunlar React
   sürümündeki <style> bloğundan olduğu gibi alındı; iki sürüm yan yana
   çalıştığı sürece tek kaynaktan (yapim/kaynak/source.html) üretiliyor.
   Yazı tipi aileleri üretimde --f-* değişkenlerine çevrildi (stil-yap.js).
   Alt yarı: sayfaların kullandığı bileşen sınıfları.
   ========================================================================= */

/* Yazı tipi değişkenleri: panel → Görünüm → Yazı tipleri üstüne yazar. */
:root{
  --f-govde:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-baslik:var(--f-govde);
  --f-baslik-agirlik:800;
  --f-mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
  --f-el:Caveat,'Segoe Script',cursive;
}

/* ---------------------------------------------------------------------
     AÇIK TEMA = temel. Koyu tema tokenları iki yerde yeniden tanımlanır:
     sistem tercihi (damgasız hal) ve açık [data-theme="dark"] damgası.
     Hiçbir renk yalnızca media / [data-theme] bloğunun içinde doğmaz.
     --------------------------------------------------------------------- */
  :root{
    /* yüzeyler */
    --bg:#F3F6FA;
    --surface:#FFFFFF;
    --surface-2:#F4F8FB;
    --sidebar:#FFFFFF;
    --track:#E4EBF2;

    /* çizgiler */
    --line:#E3EAF2;
    --line-2:#C9D6E4;

    /* metin */
    --text:#0D1723;
    --text-2:#4A5C70;
    --text-3:#6B7E93;

    /* yükseklik: üstte 1px iç parlaklık + yumuşak gölge */
    --elev: inset 0 1px 0 #FFFFFF, 0 1px 2px rgba(15,30,50,.04), 0 10px 26px -16px rgba(15,30,50,.28);
    --elev-h: inset 0 1px 0 #FFFFFF, 0 2px 4px rgba(15,30,50,.05), 0 18px 38px -18px rgba(15,30,50,.34);
    --grid-line:rgba(6,182,212,.10);

    /* aksanlar — dolgu canlı kalır, metin koyulaşır */
    --cyan:#06B6D4;    --cyan-ink:#0E7490;    --cyan-soft:rgba(6,182,212,.10);     --cyan-line:rgba(6,182,212,.28);
    --emerald:#10B981; --emerald-ink:#047857; --emerald-soft:rgba(16,185,129,.10); --emerald-line:rgba(16,185,129,.28);
    --gold:#F59E0B;    --gold-ink:#A16207;    --gold-soft:rgba(245,158,11,.12);    --gold-line:rgba(245,158,11,.30);
    --rose:#F43F5E;    --rose-ink:#BE123C;    --rose-soft:rgba(244,63,94,.10);     --rose-line:rgba(244,63,94,.28);
    --violet:#8B5CF6;  --violet-ink:#6D28D9;  --violet-soft:rgba(139,92,246,.10);  --violet-line:rgba(139,92,246,.28);
    --on-accent:#06212B;

    /* sıralama madalyaları */
    --rank-1:#F59E0B; --rank-2:#8FA3B8; --rank-3:#B45309;

    /* kod penceresi ve terminal — her iki temada da koyu kalır */
    --code-bg:#080D13;
    --code-head:#0C1219;
    --code-line:#182231;
    --code-edge:#22303F;
    --code-num:#46586E;
    --code-chrome:#8B9BB0;
    --code-wall:#1B2836;
    --code-floor:#0F1720;
    --c-key:#FF7B9C; --c-var:#22D3EE; --c-str:#FBBF24;
    --c-type:#A78BFA; --c-fn:#34D399; --c-plain:#9FB2C8;
    --ticker-bg:#070C11; --ticker-edge:#16261F; --ticker-dim:#2F5B48;
    --neon-cyan:#22D3EE; --neon-emerald:#34D399; --neon-gold:#FBBF24; --neon-rose:#FB7185;
  }

  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#0A0F16;
      --surface:#111823;
      --surface-2:#0D141D;
      --sidebar:#0C121A;
      --track:#0A0F16;

      --line:#1F2A38;
      --line-2:#2A3A4D;

      --text:#E6EDF6;
      --text-2:#94A6BC;
      --text-3:#7286A0;

      --elev: inset 0 1px 0 rgba(255,255,255,.045), 0 10px 30px -20px rgba(0,0,0,.9);
      --elev-h: inset 0 1px 0 rgba(255,255,255,.07), 0 22px 44px -22px rgba(0,0,0,1);
      --grid-line:rgba(34,211,238,.055);

      --cyan:#22D3EE;    --cyan-ink:#22D3EE;    --cyan-soft:rgba(34,211,238,.10);     --cyan-line:rgba(34,211,238,.26);
      --emerald:#34D399; --emerald-ink:#34D399; --emerald-soft:rgba(52,211,153,.10);  --emerald-line:rgba(52,211,153,.26);
      --gold:#FBBF24;    --gold-ink:#FBBF24;    --gold-soft:rgba(251,191,36,.10);     --gold-line:rgba(251,191,36,.26);
      --rose:#FB7185;    --rose-ink:#FB7185;    --rose-soft:rgba(251,113,133,.10);    --rose-line:rgba(251,113,133,.26);
      --violet:#A78BFA;  --violet-ink:#A78BFA;  --violet-soft:rgba(167,139,250,.10);  --violet-line:rgba(167,139,250,.26);
      --on-accent:#04141A;

      --rank-1:#FBBF24; --rank-2:#B8C4D4; --rank-3:#C98A5B;
    }
  }

  :root[data-theme="dark"]{
    --bg:#0A0F16;
    --surface:#111823;
    --surface-2:#0D141D;
    --sidebar:#0C121A;
    --track:#0A0F16;

    --line:#1F2A38;
    --line-2:#2A3A4D;

    --text:#E6EDF6;
    --text-2:#94A6BC;
    --text-3:#7286A0;

    --elev: inset 0 1px 0 rgba(255,255,255,.045), 0 10px 30px -20px rgba(0,0,0,.9);
    --elev-h: inset 0 1px 0 rgba(255,255,255,.07), 0 22px 44px -22px rgba(0,0,0,1);
    --grid-line:rgba(34,211,238,.055);

    --cyan:#22D3EE;    --cyan-ink:#22D3EE;    --cyan-soft:rgba(34,211,238,.10);     --cyan-line:rgba(34,211,238,.26);
    --emerald:#34D399; --emerald-ink:#34D399; --emerald-soft:rgba(52,211,153,.10);  --emerald-line:rgba(52,211,153,.26);
    --gold:#FBBF24;    --gold-ink:#FBBF24;    --gold-soft:rgba(251,191,36,.10);     --gold-line:rgba(251,191,36,.26);
    --rose:#FB7185;    --rose-ink:#FB7185;    --rose-soft:rgba(251,113,133,.10);    --rose-line:rgba(251,113,133,.26);
    --violet:#A78BFA;  --violet-ink:#A78BFA;  --violet-soft:rgba(167,139,250,.10);  --violet-line:rgba(167,139,250,.26);
    --on-accent:#04141A;

    --rank-1:#FBBF24; --rank-2:#B8C4D4; --rank-3:#C98A5B;
  }

  *{ box-sizing:border-box; }
  html{ background:var(--bg); }
  body{
    background:var(--bg);
    color:var(--text);
    font-family:var(--f-govde),system-ui,-apple-system,'Segoe UI',sans-serif;
    -webkit-font-smoothing:antialiased;
    letter-spacing:-0.011em;
    transition:background-color .25s ease, color .25s ease;
  }
  .font-mono,code,kbd,pre{ font-family:var(--f-mono),'SFMono-Regular',Menlo,Consolas,monospace; }
  ::selection{ background:var(--cyan-soft); }

  ::-webkit-scrollbar{ width:10px; height:10px; }
  ::-webkit-scrollbar-track{ background:var(--bg); }
  ::-webkit-scrollbar-thumb{ background:var(--line-2); border-radius:8px; border:2px solid var(--bg); }
  ::-webkit-scrollbar-thumb:hover{ background:var(--text-3); }

  :where(a,button,input,[tabindex]):focus-visible{
    outline:2px solid var(--cyan);
    outline-offset:2px;
    border-radius:6px;
  }

  /* --- terminal duyuru bandı: her iki temada koyu --- */
  .ticker-track{
    display:inline-flex; align-items:center; gap:2.5rem;
    white-space:nowrap; padding-left:100%;
    animation:ticker 38s linear infinite;
  }
  .ticker:hover .ticker-track{ animation-play-state:paused; }
  @keyframes ticker{ from{ transform:translateX(0); } to{ transform:translateX(-100%); } }

  .caret::after{
    content:'_'; margin-left:2px; color:var(--emerald-ink);
    animation:blink 1.1s steps(1) infinite;
  }
  @keyframes blink{ 50%{ opacity:0; } }

  /* --- hero arkasındaki kareli defter dokusu --- */
  .grid-paper{
    background-image:
      linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
      linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
    background-size:26px 26px;
  }

  .bar-fill{ transition:width .8s cubic-bezier(.22,1,.36,1); }

  /* --- header logosu: parantezler CSS, yazma hareketi JS --- */
  @keyframes lkBrkL{ from{ opacity:0; transform:translateX(-8px); } }
  @keyframes lkBrkR{ from{ opacity:0; transform:translateX(8px); } }
  .lk-play .lk-brk-l{ animation:lkBrkL .38s cubic-bezier(.2,.8,.2,1) backwards; }
  .lk-play .lk-brk-r{ animation:lkBrkR .38s cubic-bezier(.2,.8,.2,1) 2.35s backwards; }


  /* --- panelden gelen not gövdesi --- */
  /* Sunum kipi: tahtaya yansıtırken site kabuğu kaybolsun, ders kalsın. */
  body.ok-sunum .ok-kabuk, body.ok-sunum .ok-alt{ display:none !important; }
  body.ok-sunum{ background:var(--bg); }

  .not-govde p{ margin:0 0 1em; }
  .not-govde h2{ margin:1.6em 0 .5em; font-size:19px; font-weight:800; letter-spacing:-.01em; color:var(--text); }
  .not-govde h3{ margin:1.4em 0 .4em; font-size:16px; font-weight:700; color:var(--text); }
  .not-govde ul,.not-govde ol{ margin:0 0 1em 1.2em; }
  .not-govde li{ margin:.3em 0; }
  .not-govde a{ color:var(--cyan-ink); text-decoration:underline; text-underline-offset:2px; }
  .not-govde strong{ color:var(--text); font-weight:600; }
  .not-govde code{ font-family:var(--f-mono),monospace; font-size:.9em;
                   background:var(--surface-2); border:1px solid var(--line); border-radius:5px; padding:.1em .35em; }
  .not-govde pre{ overflow-x:auto; background:var(--code-bg); color:#E6EDF6; border-radius:12px; padding:14px 16px; margin:0 0 1em; }
  .not-govde pre code{ background:none; border:0; padding:0; color:inherit; }
  .not-govde img{ max-width:100%; border-radius:12px; }
  .not-govde blockquote{ margin:1.2em 0; padding:12px 16px; border:1px solid var(--line);
                         border-left:3px solid var(--cyan); border-radius:12px;
                         background:var(--surface-2); color:var(--text-2); font-style:italic; }
  /* Metnin ilk paragrafi giris cumlesi: bir tik buyuk ve koyu. */
  .not-govde > p:first-child{ font-size:17px; line-height:1.65; color:var(--text); font-weight:500; }
  /* Ara basliklar sol tarafta renkli bir cizgiyle ayriliyor: goz nerede yeni
     bolum basladigini tarayarak buluyor. */
  .not-govde h2{ position:relative; padding-left:14px; }
  .not-govde h2::before{ content:""; position:absolute; left:0; top:.18em; bottom:.18em; width:4px;
                         border-radius:2px; background:linear-gradient(180deg,var(--cyan),var(--emerald)); }
  .not-govde h3{ color:var(--cyan-ink); }
  .not-govde ul{ list-style:none; margin-left:0; padding-left:0; }
  .not-govde ul > li{ position:relative; padding-left:20px; }
  .not-govde ul > li::before{ content:""; position:absolute; left:4px; top:.62em; width:6px; height:6px;
                              border-radius:999px; background:var(--cyan); }
  .not-govde ol{ margin-left:0; padding-left:22px; }
  .not-govde ol > li::marker{ color:var(--cyan-ink); font-family:var(--f-mono); font-weight:700; }
  .not-govde table{ width:100%; border-collapse:collapse; margin:0 0 1em; font-size:14px; }
  .not-govde th,.not-govde td{ border:1px solid var(--line); padding:8px 10px; text-align:left; }
  .not-govde th{ background:var(--surface-2); font-weight:700; color:var(--text); }
  .not-govde hr{ border:0; border-top:1px solid var(--line); margin:1.8em 0; }

  /* Renkli bilgi kutulari: <div class="kutu bilgi">metin</div>
     Basliktaki etiketi CSS koyuyor, ogretmen yazmiyor. */
  .not-govde .kutu{ position:relative; margin:1.2em 0; padding:12px 14px 12px 16px;
                border:1px solid var(--line); border-left:3px solid var(--cyan);
                border-radius:12px; background:var(--surface-2); }
  .not-govde .kutu::before{ display:block; margin-bottom:4px;
                        font-family:var(--f-mono),monospace; font-size:10px;
                        font-weight:700; letter-spacing:.16em; text-transform:uppercase; }
  .not-govde .kutu > :last-child{ margin-bottom:0; }
  .not-govde .kutu.bilgi{ border-left-color:var(--cyan); }
  .not-govde .kutu.bilgi::before{ content:"bilgi"; color:var(--cyan-ink); }
  .not-govde .kutu.ipucu{ border-left-color:var(--emerald); background:var(--emerald-soft); }
  .not-govde .kutu.ipucu::before{ content:"ipucu"; color:var(--emerald-ink); }
  .not-govde .kutu.dikkat{ border-left-color:var(--gold); background:var(--gold-soft); }
  .not-govde .kutu.dikkat::before{ content:"dikkat"; color:var(--gold-ink); }
  .not-govde .kutu.uyari{ border-left-color:var(--rose); background:var(--rose-soft); }
  .not-govde .kutu.uyari::before{ content:"uyarı"; color:var(--rose-ink); }
  /* Kod ciktisi: terminalden kopyalanmis gibi dursun. */
  .not-govde .cikti{ margin:0 0 1em; padding:10px 14px; border-radius:10px;
                 border:1px dashed var(--line-2); background:var(--surface-2);
                 font-family:var(--f-mono),monospace; font-size:12.5px;
                 color:var(--text-2); white-space:pre-wrap; }
  .not-govde .cikti::before{ content:"çıktı"; display:block; margin-bottom:4px; font-size:10px;
                         font-weight:700; letter-spacing:.16em; text-transform:uppercase;
                         color:var(--text-3); }

  /* yatay menü dar ekranda kayar; çubuğu gizle, kaydırma kalsın */
  .no-bar{ scrollbar-width:none; -ms-overflow-style:none; }
  .no-bar::-webkit-scrollbar{ display:none; }

  @media (prefers-reduced-motion:reduce){
    .ticker-track{ animation:none; padding-left:0; }
    .caret::after{ animation:none; }
    /* svg dışarıda: mermaid çizerken ölçüyü bozuyor (viewBox devasa çıkıyor) */
    *:not(svg):not(svg *){ transition-duration:.01ms !important; }
  }
  /* Aramadan ya da bildirimden gelen hedef bir an işaretleniyor: sayfa açıldı
     ama "hangisiydi" sorusu ortada kalmasın. */
  @keyframes ok-isaret {
    0%   { box-shadow: 0 0 0 3px var(--cyan), 0 0 0 12px var(--cyan-soft); }
    72%  { box-shadow: 0 0 0 3px var(--cyan), 0 0 0 12px var(--cyan-soft); }
    100% { box-shadow: 0 0 0 3px transparent, 0 0 0 12px transparent; }
  }
  .ok-isaretli { animation: ok-isaret 2.6s ease-out 1 both; border-radius: 16px; }
  /* Hareketi kapatan kullanıcıda halka sabit duruyor; JS 2,6 sn sonra siliyor. */
  @media (prefers-reduced-motion: reduce) {
    .ok-isaretli { animation: none; box-shadow: 0 0 0 3px var(--cyan); }
  }

/* =========================================================================
   BİLEŞENLER
   Yukarıdaki değişkenler mevcut siteden birebir alındı; buradaki sınıflar da
   bugünkü görünümün ölçülerini taşıyor (kart 16px yuvarlak, başlık şeridi
   64px, menü 44px…). Tailwind sınıfları HTML'in içinde dağılmak yerine
   burada tek yerde duruyor.

   Ton sistemi: bir öğeye .ton-cyan / .ton-emerald / .ton-gold / .ton-rose /
   .ton-violet vermek üç değişkeni birden ayarlar (--ton, --ton-ink,
   --ton-soft, --ton-line). Rozet, kart başlığı, çizgi hepsi onu kullanır.
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
img, svg { display: block; }

/* --- tonlar --------------------------------------------------------- */
.ton-cyan    { --ton: var(--cyan);    --ton-ink: var(--cyan-ink);    --ton-soft: var(--cyan-soft);    --ton-line: var(--cyan-line); }
.ton-emerald { --ton: var(--emerald); --ton-ink: var(--emerald-ink); --ton-soft: var(--emerald-soft); --ton-line: var(--emerald-line); }
.ton-gold    { --ton: var(--gold);    --ton-ink: var(--gold-ink);    --ton-soft: var(--gold-soft);    --ton-line: var(--gold-line); }
.ton-rose    { --ton: var(--rose);    --ton-ink: var(--rose-ink);    --ton-soft: var(--rose-soft);    --ton-line: var(--rose-line); }
.ton-violet  { --ton: var(--violet);  --ton-ink: var(--violet-ink);  --ton-soft: var(--violet-soft);  --ton-line: var(--violet-line); }
.ton-notr    { --ton: var(--line-2);  --ton-ink: var(--text-2);      --ton-soft: var(--surface-2);    --ton-line: var(--line); }

/* --- sayfa iskeleti -------------------------------------------------- */
.kabuk { max-width: 1440px; margin: 0 auto; padding: 16px; }
@media (min-width: 640px) { .kabuk { padding: 24px; } }

.yapisik { position: sticky; top: 0; z-index: 40; }

/* --- duyuru şeridi ---------------------------------------------------- */
.serit {
  position: relative; height: 36px; overflow: hidden;
  border-bottom: 1px solid var(--ticker-edge); background: var(--ticker-bg);
}
.serit-etiket {
  position: absolute; inset: 0 auto 0 0; z-index: 10;
  display: flex; align-items: center; gap: 8px;
  padding: 0 20px 0 16px; background: var(--ticker-bg); pointer-events: none;
}
.serit-nokta { width: 8px; height: 8px; border-radius: 50%;
  background: var(--neon-emerald); box-shadow: 0 0 8px var(--neon-emerald); }
.serit-canli { font-size: 10px; font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase; color: var(--neon-emerald); }
.serit-yol { display: none; font-size: 12px; color: var(--ticker-dim); }
@media (min-width: 640px) { .serit-yol { display: inline; } }
.serit-madde { display: inline-flex; align-items: center; gap: 10px; }
.serit-elmas { color: var(--ticker-dim); }

/* --- üst başlık ------------------------------------------------------- */
.ust {
  display: flex; align-items: center; gap: 10px; height: 64px;
  padding: 0 12px; background: var(--surface); border-bottom: 1px solid var(--line);
}
@media (min-width: 640px) { .ust { gap: 12px; padding: 0 24px; } }

.ust-logo { flex-shrink: 0; display: flex; align-items: center; }
.ust-logo svg { display: block; height: 18px; width: auto; overflow: visible; }
/* Logo yazısı Caveat gelene kadar gizli; logo.js ölçüp .lk-hazir verince görünür.
   Yoksa önce yedek yazı tipiyle çizilip sonra silinir, göz "kaydı" sanır. */
.ok-logo text, .ok-logo .lk-pen, .ok-logo .lk-brk-r { opacity: 0; }
.ok-logo.lk-hazir text, .ok-logo.lk-hazir .lk-pen, .ok-logo.lk-hazir .lk-brk-r { opacity: 1; }
@media (min-width: 360px) { .ust-logo svg { height: 26px; } }
@media (min-width: 430px) { .ust-logo svg { height: 38px; } }

.ust-sag { margin-left: auto; display: flex; align-items: center; gap: 10px;
  border-left: 1px solid var(--line); padding-left: 12px; }

/* --- üst menü --------------------------------------------------------- */
.ust-menu { display: none; background: var(--surface); border-bottom: 1px solid var(--line); }
@media (min-width: 1024px) { .ust-menu { display: block; } }
.ust-menu ul { max-width: 1440px; margin: 0 auto; padding: 0 16px;
  display: flex; list-style: none; }
@media (min-width: 640px) { .ust-menu ul { padding: 0 24px; } }
.ust-menu a {
  position: relative; display: flex; align-items: center; gap: 6px; height: 44px;
  padding: 0 8px; font-size: 13px; font-weight: 500; color: var(--text-2);
  border-radius: 8px 8px 0 0; transition: background-color .2s, color .2s;
  white-space: nowrap;
}
@media (min-width: 1280px) { .ust-menu a { padding: 0 10px; font-size: 14px; } }
.ust-menu a:hover { background: var(--surface-2); color: var(--text); }
.ust-menu a.acik { font-weight: 600; color: var(--text); }
.ust-menu a.acik::after {
  content: ""; position: absolute; left: 8px; right: 8px; bottom: 0;
  height: 2px; border-radius: 2px 2px 0 0; background: var(--cyan);
}
.ust-menu a svg { display: none; width: 16px; height: 16px; color: var(--text-3); }
@media (min-width: 1280px) { .ust-menu a svg { display: block; } }
.ust-menu a.acik svg { color: var(--cyan-ink); }

/* --- düğmeler --------------------------------------------------------- */
.dugme {
  display: inline-flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 12px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--surface);
  color: var(--text-2); font-size: 13px; cursor: pointer;
  transition: color .2s, border-color .2s, background-color .2s, transform .2s;
}
.dugme:hover { color: var(--text); border-color: var(--line-2); transform: translateY(-1px); }
.dugme svg { width: 16px; height: 16px; }

.dugme-kare { width: 36px; padding: 0; justify-content: center; }

.dugme-ana {
  border: 0; color: var(--on-accent); font-weight: 700;
  background: linear-gradient(100deg, var(--cyan), var(--emerald));
  box-shadow: var(--elev);
}
.dugme-ana:hover { transform: translateY(-2px); box-shadow: var(--elev-h); color: var(--on-accent); }

.dugme-ton { border-color: var(--ton-line); background: var(--ton-soft); color: var(--ton-ink); }
.dugme-ton:hover { border-color: var(--ton-ink); color: var(--ton-ink); }

/* --- kart -------------------------------------------------------------- */
.kart {
  border-radius: 16px; border: 1px solid var(--line); background: var(--surface);
  box-shadow: var(--elev); transition: transform .3s, border-color .3s, box-shadow .3s;
}
/* RGB cerceve: dort kenarda donen neon seridi (gunun sozu karti).
   Kartin altinda donen buyuk bir conic-gradient karesi var (::before);
   ::after ise 1.5px iceriden kartin zeminini geri ciziyor. Boylece sadece
   kenarda ince bir serit kalir. Donus transform ile: her tarayicida calisir. */
.kart-rgb { position: relative; overflow: hidden; border-color: transparent; }
.kart-rgb::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 200%; padding-top: 200%;
  margin: -100% 0 0 -100%; z-index: 0; pointer-events: none;
  background: conic-gradient(var(--neon-cyan), var(--neon-emerald), var(--neon-gold),
    var(--neon-rose), var(--violet), var(--neon-cyan));
  opacity: .85; animation: rgb-don 6s linear infinite;
}
.kart-rgb::after {
  content: ""; position: absolute; inset: 1.5px; z-index: 0; pointer-events: none;
  border-radius: 14.5px; background: var(--surface);
}
.kart-rgb > * { position: relative; z-index: 1; }
@keyframes rgb-don { to { transform: rotate(360deg); } }
@keyframes anket-dol { from { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) { .kart-rgb::before, .anket-dolgu { animation: none; } }
.kart-tikla:hover { transform: translateY(-4px); border-color: var(--line-2); box-shadow: var(--elev-h); }
.kart-ic { padding: 20px; }

.kart-bas { display: flex; align-items: center; gap: 10px; }
.kart-bas-ikon {
  display: grid; place-items: center; width: 28px; height: 28px; flex-shrink: 0;
  border-radius: 8px; border: 1px solid var(--ton-line); background: var(--ton-soft); color: var(--ton-ink);
}
.kart-bas-ikon svg { width: 14px; height: 14px; }
.kart-bas-etiket { font-size: 10px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ton-ink); }
.kart-bas-meta { margin-left: auto; flex-shrink: 0; font-size: 10px; color: var(--text-3); }
/* Kart başlığındaki "tümünü gör" bağlantısı: meta yazısı varsa onun sağına oturur. */
.kart-bas-git { margin-left: auto; flex-shrink: 0; font-size: 10px; font-weight: 600; color: var(--ton-ink);
  text-decoration: none; white-space: nowrap; }
.kart-bas-meta + .kart-bas-git { margin-left: 0; }
.kart-bas-git:hover { text-decoration: underline; }
.hero-tumu { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-3);
  text-decoration: none; }
.hero-tumu:hover { color: var(--cyan-ink); }
.hero-tumu svg { width: 14px; height: 14px; }

/* --- rozet ------------------------------------------------------------- */
.rozet {
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: 6px; border: 1px solid var(--ton-line); background: var(--ton-soft);
  color: var(--ton-ink); padding: 2px 8px;
  font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
}
.rozet svg { width: 11px; height: 11px; }

.etiket-kucuk {
  border-radius: 4px; border: 1px solid var(--line); background: var(--surface-2);
  padding: 2px 6px; color: var(--text-3);
}

/* --- başlıklar --------------------------------------------------------- */
.sayfa-basligi { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -.02em; color: var(--text); }
.sayfa-ozeti { margin: 4px 0 0; max-width: 62ch; font-size: 13px; line-height: 1.625; color: var(--text-2); }
.bolum-etiketi { font-size: 10px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text-3); }

/* --- not listesi (blog) ------------------------------------------------- */
.not-satiri {
  position: relative; display: flex; gap: 16px;
  border-radius: 12px; border: 1px solid var(--line); background: var(--surface);
  padding: 16px; box-shadow: var(--elev);
  transition: transform .3s, border-color .3s, box-shadow .3s;
}
.not-satiri:hover { transform: translateY(-2px); border-color: var(--line-2); box-shadow: var(--elev-h); }
.not-serit { width: 4px; flex-shrink: 0; margin-top: 4px; border-radius: 4px; background: var(--ton); }
.not-govde-alan { min-width: 0; flex: 1; }
.not-ust { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.not-unite { font-size: 10px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ton-ink); }
.not-baslik { margin: 6px 0 0; font-size: 15px; font-weight: 700; line-height: 1.375;
  letter-spacing: -.01em; color: var(--text); }
.not-baslik a { transition: color .2s; }
.not-baslik a:hover { color: var(--cyan-ink); }
.not-ozet { margin: 4px 0 0; max-width: 68ch; font-size: 13px; line-height: 1.625; color: var(--text-2); }
.not-alt { margin-top: 10px; display: flex; flex-wrap: wrap; align-items: center;
  gap: 6px 12px; font-size: 10.5px; color: var(--text-3); }
.not-alt span { display: inline-flex; align-items: center; gap: 4px; }
.not-alt svg { width: 11px; height: 11px; }
.not-kod { color: var(--emerald-ink); }

.liste { display: flex; flex-direction: column; gap: 12px; }

/* --- ızgara ------------------------------------------------------------ */
.izgara { display: grid; gap: 16px; }
@media (min-width: 1024px) { .izgara-yan { grid-template-columns: minmax(0, 1fr) 320px; } }

/* --- alt bilgi --------------------------------------------------------- */
.alt { margin-top: 32px; border-top: 1px solid var(--line); background: var(--surface); }
.alt-ic { max-width: 1440px; margin: 0 auto; padding: 28px 16px 24px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px 20px; }
@media (min-width: 640px)  { .alt-ic { padding: 32px 24px 28px; } }
@media (min-width: 900px)  { .alt-ic { grid-template-columns: 1.5fr 1.5fr 1fr 1fr; gap: 24px 32px; }
  .alt-sutun.alt-bolumler ul { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; } }
.alt-marka, .alt-xp { grid-column: 1 / -1; } .alt-marka { max-width: 420px; }
@media (min-width: 900px) { .alt-marka, .alt-xp { grid-column: auto; } }
.alt-logo { display: inline-flex; text-decoration: none; }
.alt-logo svg { display: block; height: 34px; width: auto; overflow: visible; }
.alt-logo-yazi { font-family: var(--f-el); font-size: 30px; font-weight: 700;
  line-height: 1; color: var(--text); }
.alt-logo-yazi b { color: var(--cyan-ink); font-weight: 700; }
.alt-tanim { margin: 10px 0 0; font-size: 13px; line-height: 1.6; color: var(--text-2); }
.alt-donem { margin: 12px 0 0; font-size: 11px; color: var(--text-3); }
.alt-sutun h4 { margin: 0 0 10px; font-size: 10px; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text-3); }
.alt-sutun ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.alt-sutun a { display: inline-flex; align-items: center; gap: 8px; font-size: 13px;
  color: var(--text-2); text-decoration: none; padding: 2px 0; border-radius: 6px; }
.alt-sutun a:hover { color: var(--text); }
.alt-sutun a svg { width: 14px; height: 14px; color: var(--text-3); flex-shrink: 0; }
.alt-sutun a:hover svg { color: var(--cyan-ink); }
.alt-xp-liste li { display: flex; justify-content: space-between; gap: 12px; font-size: 11.5px;
  color: var(--text-2); padding: 3px 0; border-bottom: 1px dashed var(--line); }
.alt-xp-liste li:last-child { border-bottom: 0; }
.alt-xp-liste b { color: var(--emerald-ink); font-weight: 700; }
.alt-cizgi { border-top: 1px solid var(--line); }
.alt-cizgi { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  max-width: 1440px; margin: 0 auto; padding: 14px 16px; }
@media (min-width: 640px) { .alt-cizgi { padding: 14px 24px; } }
.alt-cizgi p { margin: 0; font-size: 11px; color: var(--text-3); }
.alt .kabuk-isaret { color: var(--emerald-ink); }
.alt-yukari { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-3); white-space: nowrap; flex-shrink: 0;
  text-decoration: none; padding: 4px 8px; border-radius: 8px; border: 1px solid var(--line); }
.alt-yukari:hover { color: var(--text); border-color: var(--line-2); }
.alt-yukari svg { width: 12px; height: 12px; }

/* --- ana sayfa liste satırları (uygulama + not) ------------------------- */
.liste-satir { display: flex; align-items: center; gap: 10px; padding: 8px 0;
  border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; }
.liste-satir:last-child { border-bottom: 0; }
.liste-satir:hover > span:last-child > span:first-child { color: var(--cyan-ink); }
.liste-satir-ikon { flex-shrink: 0; width: 30px; height: 30px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ton-soft); color: var(--ton-ink); border: 1px solid var(--ton-line); }
.liste-satir-ikon svg { width: 15px; height: 15px; }

/* --- teslim sayacı --------------------------------------------------- */
.sayac { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 14px; }
.sayac > div { border-radius: 8px; border: 1px solid var(--line); background: var(--surface-2);
  padding: 8px 0; text-align: center; }
.sayac b { display: block; font-family: var(--f-mono), monospace; font-size: 18px;
  font-weight: 700; line-height: 1; color: var(--rose-ink); font-variant-numeric: tabular-nums; }
.sayac span { display: block; margin-top: 4px; font-family: var(--f-mono), monospace;
  font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }

/* --- fikir alıntısı --------------------------------------------------- */
.fikir-alinti { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--surface-2);
  border-left: 3px solid var(--ton); font-size: 13px; line-height: 1.6; color: var(--text-2); }
.fikir-alinti-alt { display: flex; justify-content: space-between; gap: 10px; margin-top: 6px;
  font-size: 10.5px; color: var(--text-3); }
.fikir-alinti-alt span { display: inline-flex; align-items: center; gap: 4px; }
.fikir-alinti-alt svg { width: 11px; height: 11px; }

/* --- yardımcılar -------------------------------------------------------- */
.mono { font-family: var(--f-mono), monospace; }
.gizli { display: none; }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* --- üst çubuk: arama ve hesap ------------------------------------- */
.ust-arama {
  display: none; align-items: center; gap: 8px; flex: 1; min-width: 0;
  max-width: 560px; margin-left: 12px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2);
  padding: 0 12px; height: 38px;
}
@media (min-width: 640px) { .ust-arama { display: flex; } }
.ust-arama:focus-within { border-color: var(--cyan-line); }
.ust-arama svg { width: 16px; height: 16px; color: var(--text-3); flex-shrink: 0; }
.ust-arama input {
  flex: 1; min-width: 0; border: 0; background: transparent; outline: none;
  color: var(--text); font: inherit; font-size: 13px;
}

.ust-hata span { display: none; }
@media (min-width: 900px) { .ust-hata span { display: inline; } }

.ust-hesap { height: 40px; align-items: center; }
.ust-hesap > span { display: flex; flex-direction: column; line-height: 1.2; text-align: left; }
.ust-ad { font-size: 12.5px; font-weight: 700; color: var(--text); }
.ust-xp { font-size: 10px; color: var(--text-3); }
@media (max-width: 520px) { .ust-hesap > span { display: none; } }

/* Dar ekranda menü gizlenmiyor, yatay kayıyor: bölümlere telefondan da
   ulaşılsın (React sürümünde burada çekmece vardı). */
.ust-menu { display: block; }
.ust-menu ul { overflow-x: auto; scrollbar-width: none; }
.ust-menu ul::-webkit-scrollbar { display: none; }

/* --- ana sayfa düzeni -------------------------------------------------- */
/* Ana sayfa: 12 sütunluk blok ızgarası. Her bloğun genişliği (--g: 4/6/8/12)
   panelden gelir. Tablet: dar bloklar yan yana, genişler tam satır. Telefon: tek sütun. */
.ana-bloklar { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; }
.ana-blok { grid-column: span 12; min-width: 0; display: flex; flex-direction: column; }
.ana-blok > section { flex: 1; }
@media (min-width: 640px) and (max-width: 1279px) {
  .ana-blok[style*="--g:4"], .ana-blok[style*="--g:6"] { grid-column: span 6; }
}
@media (min-width: 1280px) { .ana-blok { grid-column: span var(--g, 12); } }

.ikili { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 768px) { .ikili { grid-template-columns: 1fr 1fr; } }

/* --- anket seçeneği ---------------------------------------------------- */
.anket-secenek {
  position: relative; display: block; width: 100%; overflow: hidden;
  border: 1px solid var(--line); border-radius: 10px; background: var(--surface);
  padding: 0; text-align: left; cursor: pointer;
  transition: border-color .2s, transform .2s;
}
.anket-secenek:hover:not(:disabled) { border-color: var(--ton-line); transform: translateY(-1px); }
.anket-secenek:disabled { cursor: default; opacity: .85; }
.anket-secenek.secili { border-color: var(--ton-line); background: var(--ton-soft); }

.anket-dolgu {
  position: absolute; inset: 0 auto 0 0; background: var(--ton-soft);
  transition: width .4s ease;
  transform-origin: left; animation: anket-dol .9s cubic-bezier(.2,.8,.2,1) both;
}
.anket-ic { position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
.anket-isaret { color: var(--ton-ink); font-size: 12px; }
.anket-etiket { display: block; font-size: 13.5px; font-weight: 600; color: var(--text); }
.anket-ipucu { display: block; font-size: 11.5px; color: var(--text-3); }
.anket-yuzde { font-size: 12px; font-weight: 700; color: var(--ton-ink); }


/* --- bildirim zili ----------------------------------------------------- */
.zil { position: relative; }
.zil-sayi {
  position: absolute; top: -4px; right: -4px; min-width: 16px; height: 16px;
  display: grid; place-items: center; padding: 0 4px;
  border-radius: 8px; background: var(--rose); color: #fff;
  font-family: var(--f-mono); font-size: 9px; font-weight: 700;
}

/* --- araç sayfası ------------------------------------------------------ */
@keyframes donen { to { transform: rotate(360deg); } }

/* =========================================================================
   PANEL
   Öğrenci tarafıyla aynı renk ve kart dilini kullanır; farkı sol menü ve
   tablolar. Panel yalnızca öğretmenin gördüğü ekran olduğu için burada
   yoğunluk (bilgi/piksel) daha yüksek tutuldu.
   ========================================================================= */

body.panel { background: var(--surface-2); }

.panel-ust {
  display: flex; align-items: center; gap: 12px; height: 52px;
  padding: 0 16px; background: var(--surface); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 30;
}
.panel-marka { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.panel-marka svg { display: block; height: 30px; width: auto; overflow: visible; }
.panel-etiket { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px;
  border: 1px solid var(--cyan-line); background: var(--cyan-soft); color: var(--cyan-ink);
  font-family: var(--f-mono), monospace; font-size: 10px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; }
.panel-nokta { width: 8px; height: 8px; border-radius: 50%; background: var(--cyan);
  box-shadow: 0 0 8px var(--cyan); }
.panel-ust-sag { margin-left: auto; display: flex; align-items: center; gap: 10px; }

.panel-govde { display: grid; grid-template-columns: 1fr; }
@media (min-width: 900px) { .panel-govde { grid-template-columns: 224px minmax(0, 1fr); } }

.panel-kenar {
  display: flex; flex-direction: column; gap: 1px; padding: 12px 10px;
  background: var(--surface); border-right: 1px solid var(--line);
}
@media (min-width: 900px) { .panel-kenar { position: sticky; top: 52px; height: calc(100vh - 52px); overflow-y: auto; } }

.panel-grup { margin: 12px 0 4px; padding: 0 10px; font-size: 9.5px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); }

.panel-satir {
  display: flex; align-items: center; gap: 9px; padding: 7px 10px;
  border-radius: 8px; font-size: 13px; color: var(--text-2);
  transition: background-color .15s, color .15s;
}
.panel-satir:hover { background: var(--surface-2); color: var(--text); }
.panel-satir.acik { background: var(--cyan-soft); color: var(--cyan-ink); font-weight: 600; }
.panel-satir svg { width: 15px; height: 15px; flex-shrink: 0; }
.panel-sayi {
  margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px;
  display: grid; place-items: center; border-radius: 9px;
  background: var(--rose); color: #fff;
  font-family: var(--f-mono); font-size: 10px; font-weight: 700;
}

.panel-icerik { padding: 20px 16px 40px; min-width: 0; }
@media (min-width: 900px) { .panel-icerik { padding: 24px; } }

.panel-basmetin { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.panel-basmetin .dugme-ana { margin-left: auto; }

/* --- tablo --- */
.panel-tablo { width: 100%; border-collapse: collapse; font-size: 13px; }
.panel-tablo th {
  padding: 9px 12px; text-align: left; white-space: nowrap;
  border-bottom: 1px solid var(--line); background: var(--surface-2);
  font-family: var(--f-mono); font-size: 10px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--text-3);
}
.panel-tablo td { padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.panel-tablo tr:last-child td { border-bottom: 0; }
.panel-tablo tbody tr:hover { background: var(--surface-2); }
.panel-tablo .dugme { height: 30px; padding: 0 9px; }

/* --- form --- */
.panel-alan { display: flex; flex-direction: column; gap: 5px; }
.panel-giris {
  width: 100%; border: 1px solid var(--line); border-radius: 9px;
  background: var(--surface-2); color: var(--text);
  padding: 9px 11px; font: inherit; font-size: 13.5px; resize: vertical;
}
.panel-giris:focus { outline: none; border-color: var(--cyan-line); }
.panel-ipucu { font-size: 11.5px; color: var(--text-3); }

/* --- özet kutuları --- */
.panel-kutular { display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: 20px; }
@media (min-width: 640px) { .panel-kutular { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1200px) { .panel-kutular { grid-template-columns: repeat(4, 1fr); } }
.panel-rakam { display: block; margin-top: 6px; font-size: 30px; font-weight: 800;
  letter-spacing: -.03em; color: var(--text); }
.panel-alt { display: block; margin-top: 2px; font-size: 12px; color: var(--text-2); }

.panel-ikili { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 1100px) { .panel-ikili { grid-template-columns: 1fr 1fr; } }

/* Arama kutusu 640px altında gizli; oraya kısa yol düğmesi giriyor. */
.ust-ara-kisa { display: inline-flex; }
@media (min-width: 640px) { .ust-ara-kisa { display: none; } }

/* --- ana sayfa: haftanın hatası --------------------------------------- */
.hero-hata { display: flex; flex-direction: column; gap: 24px; padding: 20px; border-bottom: 1px solid var(--line); }
@media (min-width: 640px)  { .hero-hata { padding: 28px; } }
@media (min-width: 1024px) { .hero-hata { flex-direction: row; align-items: center; } .hero-metin { width: 42%; flex-shrink: 0; } }
.hero-metin { min-width: 0; }
.hero-baslik { margin: 14px 0 0; font-size: 26px; font-weight: 800; line-height: 1.12;
  letter-spacing: -.02em; color: var(--text); text-wrap: balance; }
@media (min-width: 640px) { .hero-baslik { font-size: 32px; } }

.kod-pencere {
  min-width: 0; flex: 1; overflow: hidden; border-radius: 12px;
  border: 1px solid var(--code-edge); background: var(--code-bg);
  box-shadow: 0 18px 40px -24px rgba(0, 0, 0, .85);
}
.kod-pencere-bas { display: flex; align-items: center; gap: 8px; padding: 8px 14px;
  border-bottom: 1px solid var(--code-line); background: var(--code-head); }
.kod-pencere-bas > span:first-child, .kod-pencere-bas > span:nth-child(2), .kod-pencere-bas > span:nth-child(3) {
  width: 10px; height: 10px; border-radius: 50%; }
.kod-govde { margin: 0; padding: 14px 16px; overflow-x: auto; font-size: 12.5px; line-height: 1.85; color: var(--c-plain); }
.kod-govde .kod-satir { display: block; white-space: pre; }
.kod-govde .kod-no { display: inline-block; width: 2.2em; margin-right: .4em; text-align: right;
  color: var(--code-num); user-select: none; }
.kod-anahtar { color: var(--c-key); }
.kod-metin   { color: var(--c-str); }
.kod-yorum   { color: var(--code-num); }

/* --- sağ ray: seviye, hafta, rozetler --------------------------------- */
.seviye-ray { margin-top: 10px; height: 8px; border-radius: 4px; background: var(--track); overflow: hidden; }
.seviye-ray span { display: block; height: 100%; border-radius: 4px;
  background: linear-gradient(90deg, var(--cyan), var(--emerald)); transition: width .6s ease; }

.hafta-izgara { margin-top: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.hafta-izgara div { padding: 10px 12px; border-radius: 10px; background: var(--surface-2); }
.hafta-izgara b { display: block; font-size: 22px; font-weight: 800; letter-spacing: -.02em; color: var(--text); }
.hafta-izgara span { font-size: 11px; color: var(--text-3); }

.rozet-raf { margin-top: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (min-width: 640px) and (max-width: 1279px) { .rozet-raf { grid-template-columns: repeat(3, 1fr); } }
.rozet-kutu {
  display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center;
  padding: 12px 8px 10px; border-radius: 12px; border: 1px solid var(--ton-line); background: var(--ton-soft);
}
.rozet-kutu.sonuk { opacity: .45; filter: grayscale(1); }
.rozet-ikon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px;
  background: var(--surface); color: var(--ton-ink); box-shadow: var(--elev); }
.rozet-ikon svg { width: 17px; height: 17px; }
.rozet-ad { margin-top: 2px; font-size: 12px; font-weight: 700; color: var(--text); line-height: 1.2; }
.rozet-ipucu { font-size: 10px; line-height: 1.3; color: var(--text-3); }

/* --- giriş kuralı tasarımcısı (panel) ---------------------------------- */
.kural-sira { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: 44px; margin-top: 6px;
  padding: 8px; border-radius: 10px; border: 1px dashed var(--line-2); background: var(--surface-2); }
.kural-cip { display: inline-flex; align-items: center; gap: 2px; padding: 4px 4px 4px 8px; border-radius: 8px;
  font-size: 12.5px; background: var(--cyan-soft); border: 1px solid var(--cyan-line); color: var(--cyan-ink); }
.kural-cip-islem { background: var(--violet-soft); border-color: var(--violet-line); color: var(--violet-ink); }
.kural-cip b { font-weight: 600; margin: 0 4px; }
.kural-cip button { border: 0; background: none; cursor: pointer; color: inherit; opacity: .6; font-size: 13px;
  width: 20px; height: 20px; border-radius: 5px; line-height: 1; }
.kural-cip button:hover { opacity: 1; background: rgba(0,0,0,.08); }
.kural-grup { display: flex; gap: 10px; align-items: baseline; margin-top: 8px; }
.kural-grup-ad { flex-shrink: 0; width: 56px; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.kural-secenekler { display: flex; flex-wrap: wrap; gap: 6px; }
.kural-parca { border: 1px solid var(--line); background: var(--surface); color: var(--text-2); border-radius: 8px;
  padding: 5px 10px; font: inherit; font-size: 12.5px; cursor: pointer; transition: border-color .2s, color .2s, transform .2s; }
.kural-parca:hover { border-color: var(--cyan-line); color: var(--cyan-ink); transform: translateY(-1px); }
.kural-islem { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 6px; }
@media (min-width: 900px) { .kural-islem { grid-template-columns: 1.2fr 1fr 1fr auto; } }
.kural-adimlar { margin: 12px 0 0; padding: 0 0 0 22px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.kural-adimlar li { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 6px; border-bottom: 1px dashed var(--line); }
.kural-adimlar li b { color: var(--cyan-ink); }
.ornek-hesap { margin-top: 10px; }
.ornek-hesap summary { cursor: pointer; font-size: 11px; color: var(--gold-ink); }
.ornek-hesap .kural-adimlar { font-size: 12.5px; }

/* --- arama önerisi (yazarken açılan liste) ------------------------------ */
.oneri-kok { position: relative; }
.oneri { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 60;
  border-radius: 12px; border: 1px solid var(--line); background: var(--surface);
  box-shadow: var(--elev-h); overflow: hidden; max-height: 420px; overflow-y: auto; }
.oneri-satir { display: flex; align-items: center; gap: 10px; padding: 9px 12px; text-decoration: none;
  color: var(--text); font-size: 13px; border-bottom: 1px solid var(--line); }
.oneri-satir:last-of-type { border-bottom: 0; }
.oneri-satir:hover, .oneri-satir.secili { background: var(--surface-2); }
.oneri-tur { flex-shrink: 0; min-width: 76px; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ton-ink); }
.oneri-ad { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oneri-hepsi { display: block; padding: 8px 12px; font-size: 11px; color: var(--cyan-ink); text-decoration: none;
  background: var(--surface-2); border-top: 1px solid var(--line); }
.oneri-hepsi:hover, .oneri-hepsi.secili { text-decoration: underline; }
.oneri-bos { padding: 10px 12px; font-size: 12.5px; color: var(--text-3); }

/* --- anketler sayfası ---------------------------------------------------- */
.bolum-cizgi { display: flex; align-items: center; gap: 10px; color: var(--text-3); }
.bolum-cizgi h3 { margin: 0; font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.bolum-cizgi > .mono:last-child { font-size: 10px; }
.bolum-cizgi svg { width: 14px; height: 14px; }
.bolum-nokta { width: 8px; height: 8px; border-radius: 50%; background: var(--emerald); flex-shrink: 0; }
.bolum-hat { flex: 1; height: 1px; background: var(--line); }

.anket { overflow: hidden; }
.anket-ust { padding: 20px; }
@media (min-width: 640px) { .anket-ust { padding: 24px; } }
.anket-cipler { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.anket-cipler .rozet svg { width: 11px; height: 11px; }
.anket-hafta { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
.anket-adet { font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3);
  border: 1px solid var(--line); border-radius: 4px; padding: 2px 6px; }
.anket-zaman { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px;
  color: var(--text-3); font-variant-numeric: tabular-nums; }
.anket-zaman.acil { color: var(--rose-ink); }
.anket-zaman svg { width: 12px; height: 12px; }
.anket-soru { margin: 12px 0 0; font-size: 22px; font-weight: 800; line-height: 1.15; letter-spacing: -.02em; color: var(--text); text-wrap: balance; }
@media (min-width: 640px) { .anket-soru { font-size: 26px; } }
.anket-not { margin: 8px 0 0; max-width: 58ch; font-size: 14px; line-height: 1.6; color: var(--text-2); }

.anket-sonuc { margin-top: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 14px;
  border-radius: 12px; border: 1px solid var(--gold-line); background: var(--gold-soft); }
.anket-sonuc-ikon { display: grid; place-items: center; width: 36px; height: 36px; flex-shrink: 0; border-radius: 8px;
  border: 1px solid var(--gold-line); color: var(--gold-ink); }
.anket-sonuc-ikon svg { width: 17px; height: 17px; }
.anket-sonuc-etiket { display: block; font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-ink); }
.anket-sonuc-ad { display: block; font-size: 15px; font-weight: 700; line-height: 1.35; color: var(--text); }
.anket-sonuc-sen { margin-left: auto; flex-shrink: 0; font-size: 10.5px; color: var(--text-2); }
.anket-sonuc-sen.ayni { color: var(--emerald-ink); }

/* iki seçenek: düello kutuları */
.anket-duello { margin-top: 20px; display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 640px) { .anket-duello { grid-template-columns: 1fr 1fr; } }
.anket-kutu { text-align: left; padding: 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2);
  cursor: pointer; font: inherit; color: var(--text); transition: transform .3s, border-color .3s, box-shadow .3s, opacity .3s; }
.anket-kutu:hover:not(:disabled):not(.secili) { border-color: var(--ton-line); transform: translateY(-3px); box-shadow: var(--elev); }
.anket-kutu.secili { border-color: var(--ton-line); background: var(--ton-soft); }
.anket-kutu.donuk { opacity: .6; }
.anket-kutu:disabled { cursor: default; }
.anket-kutu-bas { display: flex; align-items: center; gap: 8px; }
.anket-kutu-bas > svg { width: 17px; height: 17px; color: var(--ton-ink); flex-shrink: 0; }
.anket-kutu-bas b { font-size: 18px; font-weight: 800; letter-spacing: -.01em; color: var(--ton-ink); }
.anket-onay { margin-left: auto; color: var(--emerald-ink) !important; }
.anket-tac { margin-left: auto; color: var(--gold-ink) !important; width: 15px; height: 15px; flex-shrink: 0; }
.anket-kod { display: block; margin-top: 6px; font-size: 11px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.anket-kutu .anket-ipucu { margin-top: 4px; }

/* 3+ seçenek: satır listesi */
.anket-liste { margin-top: 20px; display: flex; flex-direction: column; gap: 8px; }
.anket-satir { position: relative; overflow: hidden; width: 100%; text-align: left; padding: 0; border-radius: 12px;
  border: 1px solid var(--line); background: var(--surface-2); cursor: pointer; font: inherit; color: var(--text);
  transition: transform .3s, border-color .3s, box-shadow .3s; }
.anket-satir:hover:not(:disabled):not(.secili) { border-color: var(--ton-line); transform: translateY(-2px); box-shadow: var(--elev); }
.anket-satir.secili { border-color: var(--ton-line); background: var(--ton-soft); }
.anket-satir:disabled { cursor: default; }
.anket-satir-dolgu { position: absolute; inset: 0 auto 0 0; background: var(--ton-soft);
  transform-origin: left; animation: anket-dol .9s cubic-bezier(.2,.8,.2,1) both; }
.anket-satir-ic { position: relative; display: flex; align-items: center; gap: 10px; padding: 11px 12px; }
.anket-halka { display: grid; place-items: center; width: 20px; height: 20px; flex-shrink: 0; border-radius: 50%;
  border: 2px solid var(--line-2); }
.anket-halka.dolu { border-color: transparent; background: var(--emerald); color: var(--on-accent); }
.anket-halka svg { width: 12px; height: 12px; stroke-width: 3.2; }
.anket-satir-ad { min-width: 0; flex: 1; font-size: 14px; font-weight: 500; color: var(--text-2); }
.anket-satir-ad.kalin { font-weight: 700; color: var(--text); }
.anket-satir-ad small { display: block; font-size: 11.5px; font-weight: 400; color: var(--text-3); }
.anket-satir-sayi { flex-shrink: 0; font-size: 11px; font-weight: 700; color: var(--ton-ink); font-variant-numeric: tabular-nums; }
.anket-satir-sayi small { font-weight: 400; color: var(--text-3); }

/* çubuklar (düello altı + geçmiş) */
.anket-cubuklar { margin-top: 20px; display: flex; flex-direction: column; gap: 12px; }
.anket-cubuk-bas { display: flex; align-items: baseline; gap: 8px; font-size: 12px; color: var(--text-2); }
.anket-cubuk-bas .kalin { font-weight: 700; color: var(--text); }
.anket-cubuk-bas b { margin-left: auto; font-size: 11px; color: var(--ton-ink); font-variant-numeric: tabular-nums; }
.anket-cubuk-bas .anket-tac { margin-left: 0; width: 12px; height: 12px; align-self: center; }
.anket-ray { margin-top: 6px; height: 9px; border-radius: 999px; background: var(--track); overflow: hidden; }
.anket-ray-dolgu { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--ton-soft), var(--ton));
  transform-origin: left; animation: anket-dol .9s cubic-bezier(.2,.8,.2,1) both; }
.anket-sen { font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--cyan-ink);
  border: 1px solid var(--cyan-line); border-radius: 4px; padding: 0 4px; }

.anket-durum { margin: 16px 0 0; padding-top: 16px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap;
  align-items: center; gap: 6px; font-size: 11px; color: var(--text-2); }
.anket-durum svg { width: 13px; height: 13px; }
.anket-durum a { color: var(--cyan-ink); }
.anket-yesil { color: var(--emerald-ink); }

.anket-gecmis-bas { display: flex; align-items: baseline; gap: 10px; font-size: 10px; color: var(--text-3); }
.anket-gecmis-soru { margin: 8px 0 0; font-size: 15px; font-weight: 700; line-height: 1.4; letter-spacing: -.01em; color: var(--text); }

.oy-gecmisi { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.oy-gecmisi a { display: flex; align-items: baseline; gap: 10px; padding: 8px 10px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--surface-2); text-decoration: none; color: inherit; }
.oy-gecmisi a:hover { border-color: var(--line-2); }
.oy-gecmisi .mono { flex-shrink: 0; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.oy-gecmisi b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
@media (prefers-reduced-motion: reduce) { .anket-satir-dolgu, .anket-ray-dolgu { animation: none; } }

/* --- anket yönetimi (panel) --------------------------------------------- */
.anket-yonetim-satir { display: flex; gap: 16px; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.anket-yonetim-satir:last-child { border-bottom: 0; }
.anket-yonetim-islem { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; flex-shrink: 0; }
.anket-yonetim-islem form { display: inline; }
/* Satirda kupur + metin + islem dugmeleri var; dugmeler kucultulmuyor
   (flex-shrink: 0), bu yuzden dar panelde satiri alt alta diziyoruz. */
@media (max-width: 980px) { .anket-yonetim-satir { flex-direction: column; align-items: stretch; } .anket-yonetim-islem { justify-content: flex-start; } }

.anket-yan-yana { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 720px) { .anket-yan-yana { grid-template-columns: 1fr 1fr; } }
.secim-satir { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--surface-2); cursor: pointer; margin-top: 6px; }
.secim-satir:has(input:checked) { border-color: var(--cyan-line); background: var(--cyan-soft); }
.secim-satir input { margin-top: 3px; }
.secim-satir b { display: block; font-size: 13px; }
.secim-satir small { display: block; font-size: 11.5px; color: var(--text-3); line-height: 1.5; }
.sure-cip { height: 26px; padding: 0 9px; font-size: 11px; }

.secenek-liste { display: flex; flex-direction: column; gap: 8px; }
.secenek-satir { border-radius: 12px; border: 1px solid var(--ton-line); background: var(--surface-2); padding: 8px; }
.secenek-ana { display: flex; gap: 8px; align-items: center; }
.secenek-renk { width: 10px; height: 26px; border-radius: 4px; background: var(--ton); flex-shrink: 0; }
.secenek-ana .s-label { flex: 1; min-width: 0; font-weight: 600; }
.secenek-ana .s-tone { width: auto; padding: 7px 8px; font-size: 12px; }
.secenek-dugmeler { display: flex; gap: 4px; flex-shrink: 0; }
.secenek-dugmeler .dugme { height: 32px; width: 32px; padding: 0; justify-content: center; font-size: 14px; }
.secenek-ayrinti { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; padding: 10px 4px 4px 22px; }
@media (min-width: 900px) { .secenek-ayrinti { grid-template-columns: 1fr 1fr 1fr 110px; } }
.secenek-ayrinti label { display: flex; flex-direction: column; gap: 4px; }
.secenek-ayrinti[hidden] { display: none; }
.secenek-ayrinti label > span.mono { font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.secenek-ayrinti .panel-giris { padding: 6px 9px; font-size: 12.5px; }
#onizleme .anket-kutu, #onizleme .anket-satir { cursor: default; }

/* tartışma yönetimi: fikir satırları */
.fikir-satir { display: flex; gap: 16px; align-items: flex-start; padding: 14px 20px; border-top: 1px solid var(--line); }
.fikir-satir.gizli-fikir { opacity: .55; background: var(--surface-2); }
.fikir-satir .anket-yonetim-islem { flex-wrap: nowrap; }
@media (max-width: 760px) { .fikir-satir { flex-direction: column; } }
/* fikir atölyesi: öğretmen görüşü kartı */
.kod-govde .kod-vurgu { background: rgba(244,63,94,.18); box-shadow: inset 3px 0 0 var(--neon-rose); margin: 0 -16px; padding: 0 16px; }

/* --- hata avcısı yönetimi ------------------------------------------------ */
.zorluk-cip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface-2); font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.zorluk-cip small { font-family: var(--f-mono), monospace; font-size: 10px; color: var(--text-3); }
.zorluk-cip:has(input:checked) { border-color: var(--ton-line); background: var(--ton-soft); color: var(--ton-ink); }
.zorluk-cip input { display: none; }
.kod-duzenle { display: flex; border-radius: 10px; border: 1px solid var(--line); background: var(--code-bg); overflow: hidden; }
.kod-duzenle-oluk { display: flex; flex-direction: column; flex-shrink: 0; padding: 10px 0; overflow: hidden; background: rgba(255,255,255,.03); border-right: 1px solid var(--code-edge); }
.kod-duzenle-oluk button { border: 0; background: none; cursor: pointer; color: var(--code-num); font: inherit; font-size: 12.5px; line-height: 1.7;
  height: calc(12.5px * 1.7); padding: 0 8px 0 10px; text-align: right; min-width: 40px; }
.kod-duzenle-oluk button:hover { color: var(--c-plain); }
.kod-duzenle-oluk button.secili { color: #fff; background: var(--neon-rose); }
.kod-duzenle textarea { flex: 1; min-width: 0; border: 0; border-radius: 0; background: transparent; color: var(--c-plain);
  font-size: 12.5px; line-height: 1.7; padding: 10px 12px; resize: vertical; white-space: pre; overflow: auto; }
.kod-duzenle textarea:focus { outline: none; }

/* --- ders notu yönetimi -------------------------------------------------- */
.not-duzenle { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; }
@media (min-width: 1200px) { .not-duzenle { grid-template-columns: minmax(0, 1fr) minmax(360px, 46%); } }
.not-onizleme { position: sticky; top: 68px; max-height: calc(100vh - 84px); overflow-y: auto; }
.arac-cubugu { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.arac-cubugu button { border: 1px solid var(--line); background: var(--surface-2); color: var(--text-2); border-radius: 7px;
  padding: 5px 9px; font: inherit; font-size: 12px; cursor: pointer; }
.arac-cubugu button:hover { border-color: var(--ton-line, var(--line-2)); color: var(--ton-ink, var(--text)); }
.arac-cubugu button[class*="ton-"] { color: var(--ton-ink); border-color: var(--ton-line); background: var(--ton-soft); }
.arac-ayrac { width: 1px; height: 18px; background: var(--line); margin: 0 4px; }

/* duyuru yönetimi */
.duyuru-renk { width: 10px; height: 34px; border-radius: 4px; flex-shrink: 0; }
.serit-yeni-metin { color: #0b0f14; background: var(--neon-gold); padding: 2px 8px; border-radius: 6px; font-weight: 700; }
.sablon-satir { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 8px 10px; border-radius: 9px;
  border: 1px solid var(--line); background: var(--surface); color: var(--text-2); font: inherit; font-size: 12.5px; cursor: pointer; }
.sablon-satir:hover { border-color: var(--gold-line); color: var(--text); background: var(--gold-soft); }
.sablon-satir > svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--gold-ink); }
.sablon-satir span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* şeritte tıklanabilir duyuru */
a.serit-baglanti { text-decoration: none; }
a.serit-baglanti:hover span:last-of-type { text-decoration: underline; text-underline-offset: 3px; }
a.serit-baglanti svg { width: 11px; height: 11px; opacity: .7; margin-left: -4px; }

/* --- algoritma: müfredat ------------------------------------------------ */
.algo-hero { display: flex; flex-direction: column; gap: 20px; padding: 24px; border-color: var(--ton-line);
  background: linear-gradient(135deg, var(--ton-soft), var(--surface) 55%); }
@media (min-width: 640px)  { .algo-hero { padding: 28px; } }
@media (min-width: 1024px) { .algo-hero { flex-direction: row; align-items: stretch; } .algo-hero-metin { flex: 1; min-width: 0; } }
.algo-hero .hero-baslik { margin-top: 12px; }
.algo-hero-sayilar { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 18px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.algo-hero-sayilar b { display: block; font-size: 22px; letter-spacing: -.02em; color: var(--text); font-variant-numeric: tabular-nums; }
.algo-hero-yan { flex-shrink: 0; width: 100%; padding: 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); }
@media (min-width: 1024px) { .algo-hero-yan { width: 300px; } }
.algo-siradaki { display: flex; flex-direction: column; gap: 3px; margin-top: 14px; padding: 12px 14px; border-radius: 10px;
  border: 1px solid var(--cyan-line); background: var(--cyan-soft); text-decoration: none; color: inherit; transition: transform .2s, border-color .2s; }
.algo-siradaki:hover { transform: translateY(-2px); border-color: var(--cyan); }
.algo-siradaki-ad { font-size: 14px; font-weight: 700; color: var(--text); }

.algo-unite { padding: 0; overflow: hidden; }
.algo-unite-bas { display: flex; align-items: flex-start; gap: 14px; padding: 18px 20px 14px; border-bottom: 1px solid var(--line);
  background: linear-gradient(90deg, var(--ton-soft), transparent 70%); }
.algo-unite-bas > span:nth-child(2) { flex: 1; min-width: 0; }
.algo-unite-no { flex-shrink: 0; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; font-size: 14px; font-weight: 700;
  color: var(--ton-ink); background: var(--surface); border: 1px solid var(--ton-line); box-shadow: 0 6px 16px -10px var(--ton); }
.algo-unite-bas h2 { margin: 0; font-size: 17px; font-weight: 800; letter-spacing: -.01em; color: var(--text); }
.algo-unite-bas p { margin: 3px 0 0; font-size: 13px; line-height: 1.5; color: var(--text-2); }
.algo-unite-sure { flex-shrink: 0; font-size: 11px; color: var(--text-3); padding-top: 4px; }
.algo-liste { display: flex; flex-direction: column; }
.algo-ders { display: flex; align-items: center; gap: 14px; padding: 12px 20px; border-top: 1px solid var(--line); text-decoration: none; color: inherit;
  transition: background-color .15s; }
.algo-ders:first-child { border-top: 0; }
.algo-ders:hover { background: var(--surface-2); }
.algo-ders:hover .algo-ders-ad { color: var(--ton-ink); }
.algo-ders-no { position: relative; flex-shrink: 0; display: grid; place-items: center; width: 40px; height: 30px; border-radius: 8px; font-size: 11.5px; font-weight: 600;
  color: var(--text-2); background: var(--surface-2); border: 1px solid var(--line); }
.algo-ders-no svg { position: absolute; width: 14px; height: 14px; opacity: 0; }
.algo-ders.tamam .algo-ders-no { color: var(--emerald-ink); background: var(--emerald-soft); border-color: var(--emerald-line); }
.algo-ders.tamam .algo-ders-no span { visibility: hidden; }
.algo-ders.tamam .algo-ders-no svg { opacity: 1; }
.algo-ders-metin { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.algo-ders-ad { font-size: 14px; font-weight: 700; color: var(--text); transition: color .15s; }
.algo-ders-ozet { font-size: 12.5px; line-height: 1.45; color: var(--text-2); }
.algo-ders-sag { flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--text-3); }
.algo-ders-sag svg { width: 14px; height: 14px; }
@media (max-width: 560px) { .algo-ders-sag { display: none; } .algo-unite-sure { display: none; } }
.algo-adimlar { margin: 12px 0 0; padding-left: 22px; font-size: 13px; line-height: 1.6; color: var(--text-2); }
.algo-adimlar li { margin: 6px 0; }
.algo-adimlar li::marker { color: var(--emerald-ink); font-family: var(--f-mono), monospace; font-weight: 700; }
.algo-adimlar b { color: var(--text); }

/* --- algoritma: ders --------------------------------------------------- */
.algo-akis-not { margin-left: auto; font-size: 10px; color: var(--text-3); }
@media (max-width: 760px) { .algo-akis-not { display: none; } }
.algo-akis { margin-top: 12px; padding: 12px; border-radius: 12px; border: 1px dashed var(--line-2); background: var(--surface-2); overflow-x: auto; }
.algo-akis .mermaid { margin: 0; font-size: 12px; line-height: 1.6; white-space: pre; color: var(--text-2); }
.algo-akis .mermaid.cizildi { display: flex; justify-content: center; white-space: normal; }
.algo-akis .mermaid svg { max-width: 100%; height: auto; }
.algo-ikili { display: grid; gap: 14px; }
@media (min-width: 900px) { .algo-ikili { grid-template-columns: 1fr 1fr; } }
.algo-ikili .kod-govde { min-height: 100%; }
.algo-izleme-kaydir { margin-top: 12px; overflow-x: auto; border-radius: 10px; border: 1px solid var(--line); }
.algo-izleme { width: 100%; border-collapse: collapse; font-size: 12px; white-space: nowrap; }
.algo-izleme th, .algo-izleme td { padding: 8px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.algo-izleme th { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); background: var(--surface-2); font-weight: 600; }
.algo-izleme tbody tr:last-child td { border-bottom: 0; }
.algo-izleme td:first-child { color: var(--text-3); width: 1%; }
.algo-izleme-satir { color: var(--cyan-ink); font-weight: 600; }
.algo-izleme-not { white-space: normal; min-width: 180px; font-family: var(--f-govde); color: var(--text-2); }
.algo-izleme .soluk { color: var(--line-2); }
.algo-izleme tr.son td { background: var(--cyan-soft); }
.algo-izleme tr.son td:first-child { box-shadow: inset 3px 0 0 var(--cyan); }
.algo-izleme-islem { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.algo-izleme-islem .dugme[disabled] { opacity: .5; cursor: default; transform: none; }
.algo-gorev .not-govde p { margin: 0 0 .6em; }
.algo-gorev .dugme { display: inline-flex; }
.algo-soru { padding: 0; }
.algo-soru summary { display: flex; align-items: center; gap: 12px; padding: 16px 20px; cursor: pointer; list-style: none; }
.algo-soru summary::-webkit-details-marker { display: none; }
.algo-soru summary > span:nth-child(2) { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.algo-soru-metin { font-size: 14.5px; font-weight: 600; line-height: 1.5; color: var(--text); }
.algo-soru-metin code { font-family: var(--f-mono), monospace; font-size: .9em; padding: 1px 5px; border-radius: 5px; background: var(--surface-2); border: 1px solid var(--line); }
.algo-soru-ok { flex-shrink: 0; width: 18px; height: 18px; color: var(--text-3); transition: transform .2s; }
.algo-soru[open] .algo-soru-ok { transform: rotate(180deg); }
.algo-soru-cevap { margin: 0 20px 18px 62px; padding: 12px 14px; border-radius: 10px; border-left: 3px solid var(--emerald); background: var(--emerald-soft);
  font-size: 14px; line-height: 1.65; color: var(--text); }
.algo-soru-cevap code { font-family: var(--f-mono), monospace; font-size: .9em; }
@media (max-width: 560px) { .algo-soru-cevap { margin-left: 20px; } }
.algo-tamamla { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.algo-tamam-isaret { color: var(--emerald-ink); font-weight: 600; }
.algo-gezinti { display: grid; gap: 12px; }
@media (min-width: 640px) { .algo-gezinti { grid-template-columns: 1fr 1fr; } }
.algo-gezinti .kart { display: flex; align-items: center; gap: 12px; padding: 14px 16px; text-decoration: none; color: inherit; }
.algo-gezinti .kart > span { min-width: 0; flex: 1; }
.algo-gezinti-sag { text-align: right; }
.algo-gezinti-ad { display: block; margin-top: 3px; font-size: 14px; font-weight: 700; color: var(--text); }
.algo-gezinti svg { flex-shrink: 0; width: 18px; height: 18px; }

/* sağ ray: ünite ve ders listesi */
.algo-ray { margin-top: 12px; display: flex; flex-direction: column; }
.algo-ray-unite { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 6px 0 4px; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.algo-ray-unite > span { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 5px; font-size: 10px; font-weight: 700;
  color: var(--ton-ink); background: var(--ton-soft); border: 1px solid var(--ton-line); }
.algo-ray-ders { display: flex; align-items: center; gap: 8px; padding: 6px 8px; margin: 0 -8px; border-radius: 8px; font-size: 13px; line-height: 1.35; color: var(--text-2); text-decoration: none; }
.algo-ray-ders:hover { background: var(--surface-2); color: var(--text); }
.algo-ray-ders.acik { background: var(--cyan-soft); color: var(--text); font-weight: 600; }
.algo-ray-no { flex-shrink: 0; width: 26px; font-size: 10.5px; color: var(--text-3); }
.algo-ray-tik { flex-shrink: 0; width: 14px; height: 14px; color: var(--emerald-ink); visibility: hidden; }
.algo-ray-ders.tamam .algo-ray-tik { visibility: visible; }
.algo-ray-ders.tamam .algo-ray-no { color: var(--emerald-ink); }
/* dar ekran: uzun kod parçası (soru başlığı) sütunu genişletmesin; gizlenen düğme gerçekten gizlensin */
.algo-ders-sayfa > article, .algo-ders-sayfa > aside { min-width: 0; }
.algo-soru-metin, .algo-soru-cevap, .algo-gorev { overflow-wrap: anywhere; }
.algo-tamamla [hidden], .not-alt [hidden] { display: none !important; }

/* --- giriş / üye ol ------------------------------------------------------ */
.giris-alan { width: 100%; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); color: var(--text);
  padding: 10px 12px; font: inherit; font-size: 14px; outline: none; transition: border-color .15s; }
.giris-alan:focus { border-color: var(--cyan-line); }
.giris-alan.hatali { border-color: var(--rose); }
select.giris-alan { appearance: auto; }
.giris-sekme { display: flex; gap: 6px; padding: 4px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); }
.giris-sekme button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; border: 0; border-radius: 9px;
  background: transparent; color: var(--text-3); font: inherit; font-size: 11px; letter-spacing: .04em; cursor: pointer; transition: background-color .15s, color .15s; }
.giris-sekme button svg { width: 13px; height: 13px; }
.giris-sekme button.acik { background: var(--surface); color: var(--text); box-shadow: var(--elev); font-weight: 700; }
.uye-form { display: flex; flex-direction: column; gap: 14px; }
.uye-form label { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.uye-form small { font-size: 11px; line-height: 1.4; color: var(--text-3); min-height: 1em; }
.uye-form small.hata { color: var(--rose-ink); font-weight: 600; }
.uye-satir { display: grid; gap: 14px; }
@media (min-width: 480px) { .uye-satir { grid-template-columns: 1fr 1fr; } }

/* --- fikir atölyesi -------------------------------------------------------- */
.fikir-bas { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.fikir-soru { padding: 24px; border-color: var(--ton-line); background: linear-gradient(135deg, var(--ton-soft), var(--surface) 60%); }
.fikir-soru-baslik { margin: 12px 0 0; font-size: 22px; font-weight: 800; letter-spacing: -.015em; line-height: 1.25; color: var(--text); text-wrap: balance; }
@media (min-width: 640px) { .fikir-soru-baslik { font-size: 26px; } }
.fikir-soru-metin { margin: 10px 0 0; max-width: 70ch; font-size: 14px; line-height: 1.75; color: var(--text-2); }
.fikir-durus { margin-top: 18px; display: flex; flex-direction: column; gap: 8px; }
.fikir-durus-cubuk { display: flex; height: 10px; gap: 2px; border-radius: 6px; overflow: hidden; background: var(--track); }
.fikir-durus-cubuk span { display: block; min-width: 6px; background: var(--ton); opacity: .85; }
.fikir-durus-aciklama { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 10.5px; color: var(--text-2); }
.fikir-durus-aciklama span { display: inline-flex; align-items: center; gap: 6px; }
.fikir-durus-aciklama i { width: 8px; height: 8px; border-radius: 2px; background: var(--ton); }
.fikir-durus-aciklama b { color: var(--text); }
.fikir-mesaj { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; font-size: 13px; font-weight: 600;
  color: var(--ton-ink); background: var(--ton-soft); border: 1px solid var(--ton-line); }
.fikir-mesaj svg { width: 15px; height: 15px; flex-shrink: 0; }
.fikir-cagri { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.fikir-cagri > div:not(.fikir-cagri-dugmeler) { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 2px; }
.fikir-cagri b { font-size: 15px; color: var(--text); }
.fikir-cagri span:not(.kart-bas-ikon) { font-size: 13px; color: var(--text-2); }
.fikir-cagri-dugmeler { display: flex; gap: 8px; flex-wrap: wrap; }
.fikir-form { display: flex; flex-direction: column; gap: 12px; }
.fikir-durus-sec { display: flex; flex-wrap: wrap; gap: 8px; }
.fikir-cip { position: relative; display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface-2); color: var(--text-2); font-size: 12.5px; font-weight: 600; transition: border-color .15s, background-color .15s, color .15s; }
.fikir-cip input { position: absolute; opacity: 0; width: 0; height: 0; }
.fikir-cip:has(input:checked), .fikir-cip.sabit { border-color: var(--ton-line); background: var(--ton-soft); color: var(--ton-ink); }
.fikir-cip:has(input:focus-visible) { outline: 2px solid var(--cyan); outline-offset: 2px; }
.fikir-cip.sabit { height: 24px; padding: 0 10px; font-size: 11px; cursor: default; }
.fikir-metin { width: 100%; resize: vertical; min-height: 96px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); color: var(--text);
  padding: 12px 14px; font: inherit; font-size: 14px; line-height: 1.6; outline: none; }
.fikir-metin:focus { border-color: var(--cyan-line); }
.fikir-form-alt { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fikir-sayac { margin-right: auto; font-size: 11px; color: var(--text-3); }
.fikir-sayac.dolu { color: var(--rose-ink); }
.fikir-liste-bas { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 24px; padding-bottom: 8px; }
.fikir-sirala { display: flex; gap: 4px; }
.fikir-sirala a { padding: 4px 10px; border-radius: 999px; font-size: 10.5px; letter-spacing: .04em; color: var(--text-3); border: 1px solid transparent; }
.fikir-sirala a.acik { color: var(--text); border-color: var(--line); background: var(--surface); }
.fikir-liste { display: flex; flex-direction: column; gap: 12px; }
.fikir-kart { transition: border-color .2s; }
.fikir-kart.benim { border-color: var(--cyan-line); box-shadow: inset 3px 0 0 var(--cyan); }
.fikir-kart:target { border-color: var(--gold); }
.fikir-kart-bas { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fikir-avatar { flex-shrink: 0; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; font-weight: 800; font-size: 14px;
  color: var(--ton-ink); background: var(--ton-soft); border: 1px solid var(--ton-line); }
.fikir-kim { display: flex; flex-direction: column; gap: 1px; min-width: 0; margin-right: auto; }
.fikir-kim b { font-size: 13.5px; color: var(--text); }
.fikir-kim b em { font-style: normal; font-weight: 600; color: var(--cyan-ink); }
.fikir-kim .mono { font-size: 10.5px; color: var(--text-3); }
.fikir-govde { margin: 12px 0 0; font-size: 14.5px; line-height: 1.7; color: var(--text); overflow-wrap: anywhere; }
.fikir-tepkiler { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.fikir-tepkiler form { margin: 0; }
.fikir-tepki { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface); color: var(--text-2); font: inherit; font-size: 12px; text-decoration: none;
  transition: border-color .15s, background-color .15s, color .15s, transform .15s; }
.fikir-tepki svg { width: 13px; height: 13px; }
.fikir-tepki b { font-weight: 600; color: var(--text-3); }
.fikir-tepki:hover { border-color: var(--ton-line); color: var(--ton-ink); transform: translateY(-1px); }
.fikir-tepki.secili { border-color: var(--ton-line); background: var(--ton-soft); color: var(--ton-ink); }
.fikir-tepki.secili b { color: var(--ton-ink); }
.fikir-tepki.pasif { cursor: default; opacity: .7; }
.fikir-tepki.pasif:hover { transform: none; border-color: var(--line); color: var(--text-2); }
.fikir-bos { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 28px; text-align: center; color: var(--text-3); }
.fikir-bos svg { width: 28px; height: 28px; }
.fikir-bos p { margin: 0; font-size: 13px; color: var(--text-2); }
.fikir-gecmis { margin-top: 10px; display: flex; flex-direction: column; }
.fikir-gecmis-satir { display: flex; gap: 10px; align-items: flex-start; padding: 9px 8px; margin: 0 -8px; border-radius: 10px; text-decoration: none; color: inherit; }
.fikir-gecmis-satir:hover { background: var(--surface-2); }
.fikir-gecmis-satir.acik { background: var(--gold-soft); }
.fikir-gecmis-satir > span:last-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fikir-gecmis-satir b { font-size: 13px; line-height: 1.35; color: var(--text); }
.fikir-gecmis-satir .mono { font-size: 10.5px; color: var(--text-3); }
.fikir-gecmis-nokta { flex-shrink: 0; width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: var(--ton); }
.gorus-kart p { margin: 10px 0 0; font-size: 14px; line-height: 1.75; color: var(--text); }
/* fikir atölyesi: soru listesi */
.fikir-soru-kart { display: flex; flex-direction: column; gap: 0; padding: 20px; text-decoration: none; color: inherit; }
.fikir-soru-kart.acik { padding: 24px; border-color: var(--ton-line); background: linear-gradient(135deg, var(--ton-soft), var(--surface) 60%); }
.fikir-soru-kart .fikir-soru-baslik { font-size: 20px; }
@media (min-width: 640px) { .fikir-soru-kart .fikir-soru-baslik { font-size: 24px; } }
.fikir-soru-kucuk { margin: 10px 0 0; font-size: 15px; font-weight: 700; line-height: 1.35; color: var(--text); text-wrap: balance; }
.fikir-soru-alt { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 14px; font-size: 11px; color: var(--text-3); }
.fikir-soru-alt .mono { display: inline-flex; align-items: center; gap: 5px; }
.fikir-soru-alt svg { width: 12px; height: 12px; }
.fikir-soru-git { margin-left: auto; color: var(--gold-ink); font-weight: 700; }
.fikir-soru-kart:hover .fikir-soru-git { text-decoration: underline; text-underline-offset: 3px; }
.fikir-gecmis-izgara { display: grid; gap: 12px; }
@media (min-width: 720px) { .fikir-gecmis-izgara { grid-template-columns: 1fr 1fr; } }

/* --- sınıf içi uygulamalar --------------------------------------------- */
.uyg-suzgec { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.uyg-sekmeler { display: flex; flex-wrap: wrap; gap: 6px; }
.uyg-sekmeler a { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
  color: var(--text-2); border: 1px solid var(--line); background: var(--surface); text-decoration: none; transition: border-color .15s, background-color .15s, color .15s; }
.uyg-sekmeler a svg { width: 14px; height: 14px; }
.uyg-sekmeler a .mono { font-size: 10.5px; color: var(--text-3); }
.uyg-sekmeler a:hover { border-color: var(--ton-line, var(--line-2)); color: var(--ton-ink, var(--text)); }
.uyg-sekmeler a.acik { border-color: var(--ton-line, var(--line-2)); background: var(--ton-soft, var(--surface-2)); color: var(--ton-ink, var(--text)); }
.uyg-sekmeler a.acik .mono { color: inherit; opacity: .7; }
.uyg-siniflar { display: flex; flex-wrap: wrap; gap: 4px; }
.uyg-siniflar a { padding: 4px 10px; border-radius: 999px; font-size: 10.5px; letter-spacing: .04em; color: var(--text-3); border: 1px solid transparent; text-decoration: none; }
.uyg-siniflar a.acik { color: var(--text); border-color: var(--line); background: var(--surface); }
.uyg-kartlar { display: grid; gap: 14px; margin-top: 16px; }
@media (min-width: 720px)  { .uyg-kartlar { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1200px) { .uyg-kartlar { grid-template-columns: 1fr 1fr 1fr; } }
.uyg-kart { display: flex; flex-direction: column; padding: 18px 20px 16px; text-decoration: none; color: inherit; border-top: 3px solid var(--ton); }
.uyg-kart.bitti { border-top-color: var(--emerald); }
.uyg-kart-bas { display: flex; align-items: center; gap: 10px; }
.uyg-kart-ad { margin: 12px 0 0; font-size: 16px; font-weight: 800; letter-spacing: -.01em; line-height: 1.3; color: var(--text); text-wrap: balance; }
.uyg-kart:hover .uyg-kart-ad { color: var(--ton-ink); }
.uyg-kart-ozet { margin: 6px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--text-2); flex: 1; }
.uyg-kart-alt { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 14px; font-size: 10.5px; color: var(--text-3); }
.uyg-kart-alt span { display: inline-flex; align-items: center; gap: 4px; }
.uyg-kart-alt svg { width: 12px; height: 12px; }
.uyg-durum { margin-left: auto; color: var(--emerald-ink); font-weight: 600; }
.uyg-durum:empty { display: none; }
.uyg-cubuk { margin-top: 10px; height: 4px; border-radius: 2px; background: var(--track); overflow: hidden; }
.uyg-cubuk span { display: block; height: 100%; border-radius: 2px; background: linear-gradient(90deg, var(--cyan), var(--emerald)); transition: width .4s ease; }

.uyg-bas { padding: 24px; border-color: var(--ton-line); background: linear-gradient(135deg, var(--ton-soft), var(--surface) 60%); }
.uyg-baslik { margin: 12px 0 0; font-size: 24px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; color: var(--text); text-wrap: balance; }
@media (min-width: 640px) { .uyg-baslik { font-size: 28px; } }
.uyg-ozet { margin: 8px 0 0; max-width: 70ch; font-size: 14px; line-height: 1.7; color: var(--text-2); }
.uyg-kisiler { margin: 8px 0 0; font-size: 10.5px; color: var(--text-3); }
.uyg-eylemler { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.uyg-ilerleme { margin-left: auto; font-size: 11px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.uyg-bas .seviye-ray { margin-top: 12px; }
.uyg-adim-liste { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; }
.uyg-adim { padding: 12px 0; border-top: 1px solid var(--line); }
.uyg-adim:first-child { border-top: 0; padding-top: 4px; }
.uyg-adim-bas { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.uyg-adim-bas input { position: absolute; opacity: 0; width: 0; height: 0; }
.uyg-adim-no { flex-shrink: 0; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; font-size: 11px; font-weight: 700;
  color: var(--cyan-ink); background: var(--cyan-soft); border: 1px solid var(--cyan-line); transition: background-color .15s, color .15s; }
.uyg-adim-bas:hover .uyg-adim-no { background: var(--cyan); color: #fff; }
.uyg-adim.yapildi .uyg-adim-no { background: var(--emerald); border-color: var(--emerald); color: #fff; }
.uyg-adim.yapildi .uyg-adim-no::before { content: "✓"; }
.uyg-adim.yapildi .uyg-adim-no { font-size: 0; }
.uyg-adim.yapildi .uyg-adim-no::before { font-size: 13px; }
.uyg-adim-metin { flex: 1; min-width: 0; padding-top: 3px; font-size: 14.5px; line-height: 1.65; color: var(--text); overflow-wrap: anywhere; }
.uyg-adim.yapildi .uyg-adim-metin { color: var(--text-3); text-decoration: line-through; text-decoration-color: var(--line-2); }
.uyg-adim-metin code { font-family: var(--f-mono), monospace; font-size: .88em; padding: 1px 5px; border-radius: 5px; background: var(--surface-2); border: 1px solid var(--line); }
.uyg-adim-bas input:focus-visible ~ .uyg-adim-no { outline: 2px solid var(--cyan); outline-offset: 2px; }
.uyg-kod { margin: 10px 0 0 38px; box-shadow: none; }
.uyg-kod .kod-govde { font-size: 12px; }
@media (max-width: 560px) { .uyg-kod { margin-left: 0; } }
.uyg-adim-kaydet { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.uyg-bloklar { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.uyg-blok { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: 6px 12px 12px 6px; font-size: 12.5px; font-weight: 600; color: #fff;
  background: var(--blok, #6b7e93); box-shadow: inset 0 -2px 0 rgba(0,0,0,.2), 0 1px 0 rgba(0,0,0,.1); position: relative; }
.uyg-blok::before { content: ""; position: absolute; left: 10px; top: -3px; width: 12px; height: 4px; border-radius: 2px 2px 0 0; background: var(--blok, #6b7e93); }
.uyg-blok.olay     { --blok: #d9a400; }
.uyg-blok.kontrol  { --blok: #e6a03c; }
.uyg-blok.hareket  { --blok: #4c97ff; }
.uyg-blok.gorunum  { --blok: #9966ff; }
.uyg-blok.algilama { --blok: #5cb1d6; }
.uyg-blok.veri     { --blok: #ff8c1a; }
.uyg-hedefler, .uyg-ogrenilen { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.uyg-hedefler li { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; line-height: 1.6; color: var(--text); }
.uyg-hedefler svg { flex-shrink: 0; width: 16px; height: 16px; margin-top: 3px; color: var(--emerald-ink); }
.uyg-ogrenilen li { position: relative; padding-left: 16px; font-size: 13px; line-height: 1.6; color: var(--text-2); }
.uyg-ogrenilen li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--violet); }
.uyg-baslangic { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; font-size: 10.5px; color: var(--text-3); }
.uyg-baslangic span { padding: 4px 8px; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--line); }
.uyg-baslangic b { color: var(--text); }
/* canlı kod: uygulamadan gelindi şeridi */
.uyg-serit { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; border-radius: 12px; border: 1px solid var(--ton-line); background: var(--ton-soft); font-size: 13px; color: var(--text-2); }
.uyg-serit > span:nth-child(2) { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 2px; }
.uyg-serit b { color: var(--text); }
@media (max-width: 560px) { .uyg-adimlar .kart-bas-meta, .uyg-bas .kart-bas-meta { display: none; } .uyg-sayfa > article { min-width: 0; } }
.uyg-serit-kaynaklar { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 4px; font-size: 10.5px; }
.uyg-serit-kaynaklar a { color: var(--cyan-ink); text-decoration: underline; text-underline-offset: 2px; }
.uyg-serit-dugmeler { display: flex; flex-wrap: wrap; gap: 8px; }
.uyg-serit-durum { width: 100%; font-size: 10.5px; color: var(--emerald-ink); }
.uyg-serit-durum:empty { display: none; }
.uyg-serit-durum.hata { color: var(--rose-ink); }
@media (min-width: 900px) { .uyg-serit-durum { width: auto; } }
.uyg-sonuc-not { margin: 10px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); border-left: 3px solid var(--ton); font-size: 13.5px; line-height: 1.6; color: var(--text); }
.uyg-sonuc-sekme { margin-top: 12px; }
.uyg-sonuc-sekme button.acik { border-color: var(--ton-line); background: var(--ton-soft); color: var(--ton-ink); }
.uyg-sonuc-kod { margin-top: 10px; box-shadow: none; }
.uyg-sonuc-kod .kod-govde { max-height: 420px; overflow: auto; font-size: 12px; }

/* --- panel: ana sayfa düzeni (sürükle-bırak tuval) ------------------------ */
.duzen-tuval { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px; padding: 14px; border-radius: 14px;
  border: 1px dashed var(--line-2); background: var(--surface-2); min-height: 120px; }
.duzen-blok { grid-column: span var(--g, 12); min-width: 0; display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--surface); box-shadow: var(--elev); cursor: grab; transition: box-shadow .15s, opacity .15s, transform .15s; }
.duzen-blok:active { cursor: grabbing; }
.duzen-blok.suruklenen { opacity: .45; }
.duzen-blok.hedef { box-shadow: 0 0 0 2px var(--cyan); }
.duzen-blok.vurgu { transform: scale(1.01); box-shadow: 0 0 0 2px var(--emerald); }
.duzen-blok.gizli { opacity: .5; background: repeating-linear-gradient(135deg, var(--surface), var(--surface) 8px, var(--surface-2) 8px, var(--surface-2) 16px); }
.duzen-blok-bas { display: flex; align-items: center; gap: 10px; min-width: 0; }
.duzen-tutamac { color: var(--text-3); font-size: 14px; letter-spacing: -2px; user-select: none; }
.duzen-blok-ad { display: flex; flex-direction: column; min-width: 0; }
.duzen-blok-ad b { font-size: 13.5px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.duzen-blok-ad small { font-size: 11px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.duzen-blok-islem { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: auto; }
.duzen-genislik { display: inline-flex; gap: 2px; padding: 2px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface-2); }
.duzen-genislik button { height: 24px; padding: 0 8px; border: 0; border-radius: 6px; background: transparent; color: var(--text-3); font: inherit; font-size: 10.5px; cursor: pointer; }
.duzen-genislik button.acik { background: var(--cyan-soft); color: var(--cyan-ink); font-weight: 700; }
.duzen-sira { display: inline-flex; gap: 2px; }
.duzen-sira button, .duzen-goz { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 7px; border: 1px solid var(--line); background: var(--surface); color: var(--text-2); cursor: pointer; }
.duzen-sira button:hover, .duzen-goz:hover { border-color: var(--line-2); color: var(--text); }
.duzen-sira svg, .duzen-goz svg { width: 14px; height: 14px; }
.duzen-goz { margin-left: auto; }
.duzen-alt { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
@media (max-width: 900px) { .duzen-blok { grid-column: span 12; } .duzen-blok-ad b, .duzen-blok-ad small { white-space: normal; } }

/* --- içini dök ------------------------------------------------------------ */
.ust-dok span { display: none; }
@media (min-width: 900px) { .ust-dok span { display: inline; } }
.dok-bas { display: flex; align-items: flex-start; gap: 14px; }
.dok-bas .kart-bas-ikon { width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0; }
.dok-bas .kart-bas-ikon svg { width: 22px; height: 22px; }
.dok-soz { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 11px; color: var(--text-2); }
.dok-soz li { display: flex; align-items: flex-start; gap: 8px; }
.dok-soz svg { flex-shrink: 0; width: 13px; height: 13px; margin-top: 1px; color: var(--violet-ink); }
.dok-form { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; }
.dok-balkupu { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.dok-alan { display: flex; flex-direction: column; gap: 6px; }
.dok-tesekkur { display: flex; flex-direction: column; gap: 12px; padding: 28px; }
.dok-tesekkur .kart-bas-ikon { width: 44px; height: 44px; border-radius: 12px; }
.dok-tesekkur p { margin: 0; font-size: 14.5px; line-height: 1.7; color: var(--text); max-width: 60ch; }
.dok-acil { padding: 10px 12px; border-radius: 10px; background: var(--surface-2); border-left: 3px solid var(--rose); font-size: 13px !important; color: var(--text-2) !important; }
.dok-blok { display: flex; flex-direction: column; }
.dok-blok p { margin: 10px 0 14px; font-size: 13.5px; line-height: 1.65; color: var(--text-2); }
.dert-satir.yeni { background: var(--rose-soft); }
.dert-govde { margin: 8px 0 0; font-size: 14px; line-height: 1.7; color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; max-width: 70ch; }
.panel-ozet-satir { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 12px; }
@media (min-width: 900px) { .panel-ozet-satir { grid-template-columns: repeat(5, 1fr); } }
/* Telefonda üst çubuğa altı düğme sığmıyor: İçini Dök orada alt bilgide ve ana sayfa bloğunda kalır. */
@media (max-width: 480px) { .ust-dok { display: none; } }
.fikir-cip svg { display: inline-block; vertical-align: -2px; }

/* --- panel: takvim ------------------------------------------------------ */
/* Üst çubuk: görünüm sekmeleri + gezinme */
.takvim-bas { gap: 10px 14px; }
.takvim-sekme { display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); }
.takvim-sekme a { height: 28px; padding: 0 12px; display: inline-flex; align-items: center; border-radius: 7px; font-size: 12.5px; font-weight: 600; color: var(--text-3); }
.takvim-sekme a:hover { color: var(--text); }
.takvim-sekme a.acik { background: var(--cyan-soft); color: var(--cyan-ink); }
.takvim-gezin { display: inline-flex; align-items: center; gap: 6px; }
.takvim-gezin .dugme-kare { width: 32px; height: 32px; }
.takvim-baslik { margin-left: 8px; font-size: 15px; font-weight: 800; letter-spacing: -.01em; color: var(--text); white-space: nowrap; }
.takvim-sayilar { grid-template-columns: 1fr 1fr; }
@media (min-width: 1200px) { .takvim-sayilar { grid-template-columns: repeat(4, 1fr); } }
.takvim-sayilar .panel-rakam { font-size: 26px; }
.takvim-sayilar .kart-ic { padding: 14px 16px; }

/* Yerleşim: takvim + yan sütun */
.takvim-yerlesim { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; }
@media (min-width: 1180px) { .takvim-yerlesim { grid-template-columns: minmax(0, 1fr) 300px; } }
.takvim-ana { min-width: 0; }
.takvim-yan { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

/* Ay ızgarası */
.takvim-izgara-kart { overflow: hidden; }
.takvim-izgara { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.takvim-gun-adi { padding: 8px 6px; text-align: center; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-3); background: var(--surface-2); border-bottom: 1px solid var(--line); }
.takvim-gun-adi.haftasonu { color: var(--rose-ink); opacity: .8; }
.takvim-gun { min-height: 108px; padding: 6px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; min-width: 0;
  transition: background-color .15s; }
.takvim-gun:nth-child(7n) { border-right: 0; }
.takvim-gun:hover { background: var(--surface-2); }
.takvim-gun.haftasonu { background: color-mix(in srgb, var(--surface-2) 55%, transparent); }
.takvim-gun.disari { opacity: .5; }
.takvim-gun.disari .takvim-cipler { opacity: .8; }
.takvim-gun.gecti .takvim-gun-no { color: var(--text-3); }
.takvim-gun.bugun { background: var(--cyan-soft); box-shadow: inset 0 0 0 1px var(--cyan-line); }
.takvim-gun.bugun .takvim-gun-no { background: var(--cyan); color: var(--on-accent); }
.takvim-gun-no { align-self: flex-start; display: inline-flex; align-items: center; gap: 3px; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 7px;
  font-family: var(--f-mono); font-size: 11.5px; font-weight: 700; color: var(--text-2); text-decoration: none; }
.takvim-gun-no small { font-size: 9px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; opacity: .8; }
.takvim-gun-no:hover { background: var(--surface); box-shadow: var(--elev); color: var(--text); }
.takvim-cipler { display: flex; flex-direction: column; gap: 3px; min-width: 0; }

/* Etkinlik çipi (ay ve önizleme) */
.takvim-cip { display: flex; align-items: center; gap: 5px; min-width: 0; height: 22px; padding: 0 6px; border-radius: 6px;
  border: 1px solid var(--ton-line); background: var(--ton-soft); color: var(--text); font-size: 11.5px; line-height: 1; text-decoration: none;
  box-shadow: inset 3px 0 0 var(--ton); transition: transform .12s, box-shadow .12s; }
.takvim-cip:hover { transform: translateY(-1px); box-shadow: inset 3px 0 0 var(--ton), var(--elev); }
.takvim-cip svg { width: 12px; height: 12px; flex-shrink: 0; color: var(--ton-ink); }
.takvim-cip-saat { flex-shrink: 0; font-size: 10px; color: var(--ton-ink); }
.takvim-cip-ad { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.takvim-cip.sistem { border-style: dashed; background: transparent; box-shadow: inset 3px 0 0 var(--ton-line); }
.takvim-cip.sistem .takvim-cip-ad { font-weight: 500; color: var(--text-2); }
.takvim-cip.bitti { opacity: .55; }
.takvim-cip.bitti .takvim-cip-ad { text-decoration: line-through; }
.takvim-cip.onemli { border-color: var(--ton); box-shadow: inset 3px 0 0 var(--ton), 0 0 0 1px var(--ton); }
.takvim-cip.devam { border-left-style: dotted; opacity: .85; }
.takvim-fazla { display: inline-block; padding: 1px 6px; font-size: 10px; color: var(--text-3); text-decoration: none; }
.takvim-fazla:hover { color: var(--cyan-ink); }
@media (max-width: 760px) {
  .takvim-gun { min-height: 64px; padding: 4px; }
  .takvim-cip { height: 18px; padding: 0 4px; font-size: 10px; gap: 3px; }
  .takvim-cip svg, .takvim-cip-saat { display: none; }
}
@media (max-width: 480px) {
  .takvim-cip-ad { display: none; }
  .takvim-cip { width: 100%; height: 6px; padding: 0; border-radius: 3px; background: var(--ton); box-shadow: none; border: 0; }
  .takvim-gun { min-height: 52px; }
}

/* Hafta sütunları */
.takvim-hafta { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 1100px) { .takvim-hafta { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 760px)  { .takvim-hafta { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px)  { .takvim-hafta { grid-template-columns: 1fr; } }
.takvim-hafta-gun { min-width: 0; display: flex; flex-direction: column; }
.takvim-hafta-gun.bugun { box-shadow: 0 0 0 1px var(--cyan-line), var(--elev); }
.takvim-hafta-gun.haftasonu .takvim-hafta-bas .mono { color: var(--rose-ink); }
.takvim-hafta-bas { display: flex; align-items: center; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--line); background: var(--surface-2); border-radius: 16px 16px 0 0; }
.takvim-hafta-bas .mono { font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.takvim-hafta-bas b { font-size: 18px; font-weight: 800; letter-spacing: -.02em; color: var(--text); }
.takvim-hafta-gun.bugun .takvim-hafta-bas b { color: var(--cyan-ink); }
.takvim-hafta-bas .dugme-kare svg { width: 13px; height: 13px; }
.takvim-hafta-liste { display: flex; flex-direction: column; gap: 6px; padding: 8px; flex: 1; }
.takvim-bos { padding: 10px 4px; font-size: 11px; color: var(--text-3); }
.takvim-satir { display: flex; gap: 8px; align-items: flex-start; padding: 7px 8px; border-radius: 9px; border: 1px solid var(--ton-line); background: var(--ton-soft);
  text-decoration: none; color: inherit; box-shadow: inset 3px 0 0 var(--ton); transition: transform .12s; }
.takvim-satir:hover { transform: translateY(-1px); }
.takvim-satir-saat { flex-shrink: 0; font-size: 10px; line-height: 1.4; color: var(--ton-ink); min-width: 34px; }
.takvim-satir b { display: flex; align-items: center; gap: 5px; font-size: 12px; line-height: 1.3; color: var(--text); overflow-wrap: anywhere; }
.takvim-satir b svg { width: 12px; height: 12px; flex-shrink: 0; color: var(--ton-ink); }
.takvim-satir small { display: block; margin-top: 2px; font-size: 10.5px; line-height: 1.3; color: var(--text-3); }
.takvim-satir.sistem { border-style: dashed; background: transparent; box-shadow: inset 3px 0 0 var(--ton-line); }
.takvim-satir.bitti { opacity: .55; }
.takvim-satir.bitti b { text-decoration: line-through; }
.takvim-satir.onemli { box-shadow: inset 3px 0 0 var(--ton), 0 0 0 1px var(--ton); }

/* Ajanda */
.takvim-ajanda-gun { margin-bottom: 16px; }
.takvim-ajanda-bas { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.takvim-ajanda-bas b { font-size: 15px; font-weight: 800; letter-spacing: -.01em; color: var(--text); }
.takvim-ajanda-bas .mono { font-size: 10.5px; color: var(--text-3); }
.takvim-ajanda-gun.bugun .takvim-ajanda-bas b { color: var(--cyan-ink); }
.takvim-ajanda-gun.gecti { opacity: .7; }
.takvim-ajanda-satir { display: flex; gap: 14px; align-items: flex-start; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.takvim-ajanda-satir:last-child { border-bottom: 0; }
.takvim-ajanda-satir.bitti > div p:first-child a { text-decoration: line-through; color: var(--text-3); }
.takvim-ajanda-satir.sistem { background: repeating-linear-gradient(135deg, transparent, transparent 10px, var(--surface-2) 10px, var(--surface-2) 11px); }
.takvim-ajanda-saat { flex-shrink: 0; width: 44px; font-size: 12px; font-weight: 700; line-height: 1.35; color: var(--text-2); padding-top: 2px; }
.takvim-ajanda-ikon { flex-shrink: 0; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--ton-soft); color: var(--ton-ink); border: 1px solid var(--ton-line); }
.takvim-ajanda-ikon svg { width: 15px; height: 15px; }
.takvim-ajanda-satir .anket-yonetim-islem .dugme { height: 30px; padding: 0 8px; }
@media (max-width: 760px) { .takvim-ajanda-satir { flex-wrap: wrap; } .takvim-ajanda-satir .anket-yonetim-islem { width: 100%; justify-content: flex-start; padding-left: 58px; } }
.takvim-yakin { display: flex; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.takvim-yakin:last-child { border-bottom: 0; }
/* Metin içinde küçük simge: genel "svg { display:block }" kuralını aşar */
.takvim-ic-ikon { display: inline-block; width: 11px; height: 11px; vertical-align: -1px; }

/* Tür çipleri (form ve süzgeç), renk noktaları, gün seçimi */
.takvim-tur-secim { display: flex; flex-wrap: wrap; gap: 6px; }
.takvim-tur-cip { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: 999px; cursor: pointer; user-select: none;
  border: 1px solid var(--line); background: var(--surface-2); color: var(--text-2); font-size: 12px; font-weight: 600; transition: border-color .12s, background-color .12s, color .12s; }
.takvim-tur-cip input { position: absolute; opacity: 0; width: 0; height: 0; }
.takvim-tur-cip svg { width: 13px; height: 13px; }
.takvim-tur-cip:hover { border-color: var(--line-2); color: var(--text); }
.takvim-tur-cip:has(input:checked) { border-color: var(--ton-line); background: var(--ton-soft); color: var(--ton-ink); }
.takvim-tur-cip:has(input:focus-visible) { outline: 2px solid var(--cyan-line); outline-offset: 1px; }
.takvim-renkler { display: flex; align-items: center; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.takvim-renk { width: 20px; height: 20px; padding: 0; border-radius: 50%; border: 2px solid transparent; background: var(--ton); cursor: pointer; box-shadow: 0 0 0 1px var(--line); transition: transform .12s; }
.takvim-renk:hover { transform: scale(1.12); }
.takvim-renk.acik { border-color: var(--surface); box-shadow: 0 0 0 2px var(--ton); }
.takvim-gunler { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.takvim-gunler[hidden] { display: none; }
.takvim-gun-cip { position: relative; display: inline-flex; }
.takvim-gun-cip input { position: absolute; opacity: 0; width: 0; height: 0; }
.takvim-gun-cip span { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 28px; border-radius: 7px; border: 1px solid var(--line); background: var(--surface-2);
  font-family: var(--f-mono); font-size: 10.5px; font-weight: 700; color: var(--text-3); cursor: pointer; user-select: none; }
.takvim-gun-cip:has(input:checked) span { border-color: var(--cyan-line); background: var(--cyan-soft); color: var(--cyan-ink); }
.hatirlatma-cip.acik { border-color: var(--cyan-line); background: var(--cyan-soft); color: var(--cyan-ink); }
.takvim-onizleme { margin-top: 10px; }
.takvim-onizleme .takvim-gun { border: 1px solid var(--line); border-radius: 10px; }
@media (min-width: 1100px) { .takvim-form-izgara { grid-template-columns: minmax(0, 3fr) minmax(280px, 2fr); } }

/* Hatırlatma şeridi: panelin her sayfasında, içerik başlığının üstünde */
.takvim-serit { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.takvim-serit-satir { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--ton-line); background: var(--ton-soft);
  box-shadow: inset 4px 0 0 var(--ton), var(--elev); animation: takvim-serit-gir .35s ease both; }
@keyframes takvim-serit-gir { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.takvim-serit-ikon { flex-shrink: 0; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--surface); color: var(--ton-ink); box-shadow: var(--elev); }
.takvim-serit-ikon svg { width: 17px; height: 17px; animation: takvim-zil 1.6s ease-in-out 2; transform-origin: top center; }
@keyframes takvim-zil { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(14deg); } 30% { transform: rotate(-12deg); } 45% { transform: rotate(8deg); } 60% { transform: rotate(-5deg); } 75% { transform: rotate(2deg); } }
.takvim-serit-metin { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.takvim-serit-metin b { font-size: 13.5px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.takvim-serit-metin .mono { font-size: 10.5px; color: var(--ton-ink); }
.takvim-serit-metin em { font-style: normal; font-size: 12px; color: var(--text-2); }
.takvim-serit-islem { display: flex; gap: 6px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
.takvim-serit-islem .dugme-ana { color: var(--on-accent); }
.takvim-serit-daha { align-self: flex-end; font-size: 11px; color: var(--text-3); }
@media (max-width: 760px) { .takvim-serit-satir { flex-wrap: wrap; } .takvim-serit-islem { width: 100%; justify-content: flex-start; padding-left: 46px; } }
@media (prefers-reduced-motion: reduce) { .takvim-serit-satir, .takvim-serit-ikon svg { animation: none; } }

/* --- görünüm: panelden düzenlenen parçalar --------------------------------- */
/* Başlık yazı tipi: panel → Görünüm → Yazı tipleri (--f-baslik) */
h1, h2, h3, .sayfa-basligi, .hero-baslik, .not-baslik, .afis-baslik { font-family: var(--f-baslik); }
.sayfa-basligi, .hero-baslik, .afis-baslik { font-weight: var(--f-baslik-agirlik); }

/* Logo görseli (SVG yerine yüklenen resim) */
.ust-logo img, .alt-logo img { display: block; height: var(--logo-h, 38px); width: auto; max-width: 60vw; }
@media (max-width: 429px) { .ust-logo img { height: calc(var(--logo-h, 38px) * .7); } }
.ust-menu.ikonsuz a svg { display: none; }
.yapisik-degil { position: static; }

/* Ana sayfa afişi */
.afis { position: relative; overflow: hidden; display: grid; gap: 20px; align-items: center; margin-bottom: 16px; padding: 28px;
  border-radius: 20px; border: 1px solid var(--ton-line); background: linear-gradient(135deg, var(--ton-soft), var(--surface)); box-shadow: var(--elev); }
.afis-metin { min-width: 0; position: relative; z-index: 1; }
.afis-baslik { margin: 0; font-size: 28px; line-height: 1.12; letter-spacing: -.02em; color: var(--text); text-wrap: balance; }
.afis-aciklama { margin: 10px 0 0; max-width: 56ch; font-size: 15px; line-height: 1.65; color: var(--text-2); }
.afis-dugme { margin-top: 18px; display: inline-flex; }
.afis-gorsel { position: relative; z-index: 1; min-width: 0; }
.afis-gorsel img { display: block; width: 100%; max-height: 360px; object-fit: cover; border-radius: 14px; box-shadow: var(--elev-h); }
.afis-kisa { padding: 20px 24px; } .afis-kisa .afis-baslik { font-size: 22px; } .afis-kisa .afis-gorsel img { max-height: 200px; }
.afis-uzun { padding: 44px 32px; min-height: 380px; } .afis-uzun .afis-baslik { font-size: 36px; }
@media (min-width: 800px) {
  .afis-sag, .afis-sol { grid-template-columns: 1.2fr 1fr; }
  .afis-sol .afis-gorsel { order: -1; }
  .afis-baslik { font-size: 34px; } .afis-uzun .afis-baslik { font-size: 44px; }
}
.afis-ust { grid-template-columns: 1fr; } .afis-ust .afis-gorsel { order: -1; }
.afis-arka { grid-template-columns: 1fr; min-height: 260px; background-size: cover; background-position: center; border-color: transparent; }
.afis-arka::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--surface) 0%, color-mix(in srgb, var(--surface) 78%, transparent) 55%, transparent 100%); }
.afis-arka .afis-metin { max-width: 60ch; }
@media (max-width: 640px) { .afis { padding: 20px; } .afis-baslik { font-size: 24px; } }

/* Blog: kart ızgarası ve kapak görselleri */
.not-izgara { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 700px) { .not-izgara { grid-template-columns: repeat(var(--sutun, 2), minmax(0, 1fr)); } }
.not-izgara .not-satiri { flex-direction: column; gap: 10px; }
.not-izgara .not-serit { width: auto; height: 4px; margin: 0; }
.not-kapak { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; background: var(--surface-2); }
.not-satiri .not-kapak-yan { width: 160px; flex-shrink: 0; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; }
@media (max-width: 560px) { .not-satiri .not-kapak-yan { display: none; } }
.not-kapak-buyuk { display: block; width: 100%; max-height: 420px; object-fit: cover; border-radius: 14px; margin-bottom: 16px; }
.not-dar { max-width: 760px; margin: 0 auto; } .not-genis { max-width: none; }
.sayfalama { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 16px; flex-wrap: wrap; }
.sayfalama a, .sayfalama span { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 10px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--surface); font-size: 12.5px; color: var(--text-2); text-decoration: none; }
.sayfalama a:hover { border-color: var(--line-2); color: var(--text); }
.sayfalama .acik { border-color: var(--cyan-line); background: var(--cyan-soft); color: var(--cyan-ink); font-weight: 700; }

/* Alt bilgi: özel bağlantı sütunu, logo görseli */
.alt-logo img { height: 34px; }

/* --- panel: görünüm ekranı ------------------------------------------------ */
.gorunum-yerlesim { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; }
@media (min-width: 1120px) { .gorunum-yerlesim { grid-template-columns: minmax(360px, 440px) minmax(0, 1fr); } }
@media (min-width: 1500px) { .gorunum-yerlesim { grid-template-columns: minmax(440px, 540px) minmax(0, 1fr); } }
.gorunum-sekmeler { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); margin-bottom: 12px; }
.gorunum-sekmeler button { height: 30px; padding: 0 11px; border: 0; border-radius: 8px; background: transparent; color: var(--text-3); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.gorunum-sekmeler button svg { width: 13px; height: 13px; }
.gorunum-sekmeler button:hover { color: var(--text); background: var(--surface-2); }
.gorunum-sekmeler button.acik { background: var(--cyan-soft); color: var(--cyan-ink); }
.gorunum-panel { display: flex; flex-direction: column; gap: 14px; }
.gorunum-panel[hidden] { display: none; }
.gorunum-bolum { display: flex; flex-direction: column; gap: 12px; }
.gorunum-bolum + .gorunum-bolum { padding-top: 14px; border-top: 1px dashed var(--line); }
.gorunum-bolum > h3 { margin: 0; font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); }
/* Sütunlar kapsayıcıya göre: dar panelde kendiliğinden tek sütuna düşer. */
.gorunum-satir { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px 12px; }
.gorunum-satir.uclu { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.gorunum-onay { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); cursor: pointer; padding: 6px 0; }
.gorunum-onay input { width: 16px; height: 16px; accent-color: var(--cyan); }
.gorunum-onay b { color: var(--text); font-weight: 600; }
.gorunum-onay small { display: block; font-size: 11px; color: var(--text-3); }
.gorunum-onizleme { position: sticky; top: 64px; }
.gorunum-onizleme-bas { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 10px; border: 1px solid var(--line); border-bottom: 0; border-radius: 12px 12px 0 0; background: var(--surface); }
.gorunum-onizleme-bas select { width: auto; padding: 5px 8px; font-size: 12px; }
.gorunum-onizleme-bas .dugme { height: 28px; padding: 0 8px; font-size: 11.5px; }
.gorunum-onizleme-bas .dugme.acik { border-color: var(--cyan-line); background: var(--cyan-soft); color: var(--cyan-ink); }
.gorunum-onizleme-cerceve { border: 1px solid var(--line); border-radius: 0 0 12px 12px; background: var(--surface-2); overflow: hidden; display: flex; justify-content: center; }
.gorunum-onizleme-cerceve iframe { display: block; width: 100%; height: calc(100vh - 150px); min-height: 520px; border: 0; background: #fff; transition: width .25s; }
.gorunum-onizleme-cerceve.telefon iframe { width: 390px; }
.gorunum-onizleme-cerceve.tablet iframe { width: 820px; max-width: 100%; }
.gorunum-durum { font-size: 11px; color: var(--text-3); margin-left: auto; }
.gorunum-durum.kirli { color: var(--gold-ink); }
.gorunum-durum.hata { color: var(--rose-ink); }

/* renk satırı */
.renk-liste { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; }
@media (max-width: 560px) { .renk-liste { grid-template-columns: 1fr; } }
.renk-satir { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 9px; border: 1px solid var(--line); background: var(--surface-2); }
.renk-satir input[type=color] { width: 32px; height: 26px; padding: 0; border: 0; border-radius: 6px; background: none; cursor: pointer; }
.renk-satir input[type=color]::-webkit-color-swatch-wrapper { padding: 0; }
.renk-satir input[type=color]::-webkit-color-swatch { border: 1px solid var(--line-2); border-radius: 6px; }
.renk-satir label { flex: 1; min-width: 0; font-size: 12px; color: var(--text-2); cursor: pointer; }
.renk-satir .mono { font-size: 10.5px; color: var(--text-3); width: 62px; }
.renk-satir input.hex { width: 74px; padding: 4px 6px; font-size: 11px; }
.palet-liste { display: flex; flex-wrap: wrap; gap: 6px; }
.palet-cip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px 0 6px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font: inherit; font-size: 11.5px; color: var(--text-2); cursor: pointer; }
.palet-cip:hover { border-color: var(--line-2); color: var(--text); }
.palet-cip i { display: inline-flex; gap: 2px; }
.palet-cip i b { width: 8px; height: 16px; border-radius: 2px; }

/* yazı tipi seçimi */
.font-secim { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
@media (max-width: 560px) { .font-secim { grid-template-columns: 1fr; } }
.font-cip { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: 9px; border: 1px solid var(--line); background: var(--surface-2); cursor: pointer; }
.font-cip input { position: absolute; opacity: 0; width: 0; height: 0; }
.font-cip b { font-size: 15px; font-weight: 600; color: var(--text); }
.font-cip small { font-size: 10px; color: var(--text-3); letter-spacing: .08em; text-transform: uppercase; }
.font-cip:has(input:checked) { border-color: var(--cyan-line); background: var(--cyan-soft); }

/* sürüklenebilir liste (menü, bağlantılar) */
.sira-liste { display: flex; flex-direction: column; gap: 6px; }
.sira-satir { display: grid; grid-template-columns: 22px 20px minmax(0, 1fr) 120px auto; gap: 8px; align-items: center; padding: 6px 8px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-2); }
.sira-satir.suruklenen { opacity: .45; } .sira-satir.hedef { box-shadow: 0 0 0 2px var(--cyan); }
.sira-satir .tutamac { cursor: grab; color: var(--text-3); font-size: 14px; letter-spacing: -2px; user-select: none; text-align: center; }
.sira-satir .panel-giris { padding: 5px 8px; font-size: 12.5px; }
.sira-satir .sira-yol { grid-column: 3 / -1; font-size: 11px; }
.sira-satir.ozel { grid-template-rows: auto auto; }
.sira-satir .sira-sil { width: 28px; height: 28px; padding: 0; justify-content: center; }
.sira-satir .sira-sil svg { width: 13px; height: 13px; }
.sira-satir input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--cyan); }
@media (max-width: 560px) { .sira-satir { grid-template-columns: 22px 20px minmax(0, 1fr) auto; } .sira-satir .sira-ikon { grid-column: 3 / -1; } }

/* görsel seçici */
.gorsel-alan { display: flex; gap: 10px; align-items: center; padding: 8px; border-radius: 10px; border: 1px dashed var(--line-2); background: var(--surface-2); }
.gorsel-alan img { width: 64px; height: 44px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); background: var(--surface); }
.gorsel-alan .gorsel-bos { width: 64px; height: 44px; display: grid; place-items: center; border-radius: 6px; border: 1px solid var(--line); color: var(--text-3); }
.gorsel-alan .gorsel-bos svg { width: 16px; height: 16px; }
.gorsel-alan > span { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.gorsel-alan .mono { font-size: 10.5px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gorsel-alan .dugme { height: 26px; padding: 0 8px; font-size: 11px; }
.gorsel-raf { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.gorsel-kutu { position: relative; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-2); overflow: hidden; cursor: pointer; }
.gorsel-kutu img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.gorsel-kutu small { display: block; padding: 4px 6px; font-size: 9.5px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gorsel-kutu:hover { border-color: var(--cyan-line); }
.gorsel-kutu.secili { box-shadow: 0 0 0 2px var(--cyan); }
.gorsel-kutu .gorsel-sil { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; padding: 0; justify-content: center; border-radius: 6px; opacity: 0; }
.gorsel-kutu:hover .gorsel-sil { opacity: 1; }
.gorsel-kutu .gorsel-sil svg { width: 12px; height: 12px; }
.gorsel-pencere { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; background: rgba(0, 0, 0, .45); padding: 16px; }
.gorsel-pencere[hidden] { display: none; }
.gorsel-pencere > div { width: min(760px, 100%); max-height: 85vh; overflow: auto; }
.blok-ayar { padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-2); display: grid; grid-template-columns: 1fr; gap: 8px; }
.blok-ayar > b { font-size: 12.5px; color: var(--text); display: flex; align-items: center; gap: 6px; }
.blok-ayar > b svg { width: 13px; height: 13px; color: var(--text-3); }
.blok-ayar .gorunum-satir { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 6px 8px; }
.blok-ayar .panel-giris { padding: 5px 8px; font-size: 12px; }
.blok-ayar .bolum-etiketi { font-size: 9px; }
.aralik { display: flex; align-items: center; gap: 8px; min-width: 0; }
.aralik input[type=range] { flex: 1; min-width: 0; accent-color: var(--cyan); }
.aralik output { width: 48px; text-align: right; font-size: 11.5px; color: var(--text-2); }

/* Ana sayfa bloğu "tek" düzeni: son not / son uygulama büyük kart */
.ana-tek { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; padding: 14px; border-radius: 12px; border: 1px solid var(--ton-line); background: var(--ton-soft); text-decoration: none; color: inherit; transition: transform .2s; }
.ana-tek:hover { transform: translateY(-2px); }
.ana-tek .rozet { align-self: flex-start; }
.ana-tek b { font-size: 17px; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; color: var(--text); font-family: var(--f-baslik); }
.ana-tek p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--text-2); }
.ana-tek .mono { font-size: 10.5px; color: var(--ton-ink); }
.ana-tek .not-kapak { margin-bottom: 4px; }
/* hidden özniteliği: display veren sınıfları yenmeli */
.gorsel-alan img[hidden], .gorsel-alan .gorsel-bos[hidden], .gorsel-alan .dugme[hidden], .gorunum-onizleme-bas [hidden], .sira-satir [hidden] { display: none !important; }
/* Görünüm → Sayfalar: başlığın üstüne görsel */
.sayfa-kapak { display: block; width: 100%; max-height: 320px; object-fit: cover; border-radius: 14px; margin-bottom: 14px; }
.blok-ayar > b .sure-cip { height: 22px; padding: 0 6px; }
.sayfa-ayar[hidden] { display: none; }
/* Araç sayfası not şeridi (Görünüm → Sayfalar → Canlı Kod / Hata Avcısı / Form) */
.arac-serit { display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--ton-line); background: var(--ton-soft); font-size: 13.5px; line-height: 1.55; color: var(--text); box-shadow: inset 4px 0 0 var(--ton); }
.arac-serit svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--ton-ink); margin-top: 2px; }
/* Görünüm → Yazı tipleri: örnek satırlar ve öğe kartları */
.font-ornek { display: block; padding: 8px 10px; border-radius: 8px; border: 1px dashed var(--line); background: var(--surface); font-size: 17px; line-height: 1.35; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oge-ayar > summary::-webkit-details-marker { display: none; }
.oge-ayar[open] > summary i[data-lucide=chevron-down], .oge-ayar[open] > summary svg:last-child { transform: rotate(180deg); }
.oge-ayar .oge-ornek { margin-top: 8px; }
.oge-ayar .gorunum-satir { margin-top: 8px; }
.gorunum-satir > * { min-width: 0; }
/* Görünüm: seçerek düzenle kutusu ve boş bırakılabilir renk seçici */
.secim-kutu { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border: 1px solid var(--rose-line); border-bottom: 0; background: var(--rose-soft); }
.secim-kutu[hidden] { display: none; }
.secim-bas { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.secim-bas > svg { width: 15px; height: 15px; color: var(--rose-ink); }
.secim-bas b { font-size: 13px; color: var(--text); }
.secim-bas .mono { font-size: 10.5px; color: var(--text-3); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.secim-grup { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); }
.secim-grup + .secim-grup { margin-top: 8px; }
.secim-grup .gorunum-satir { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 6px 10px; }
.secim-grup .panel-giris { padding: 5px 8px; font-size: 12.5px; }
.secim-grup .bolum-etiketi { font-size: 9px; }
.gorunum-onizleme-bas #on-sec.acik { border-color: var(--rose-line); background: var(--rose-soft); color: var(--rose-ink); }
.renk-secici { display: flex; align-items: center; gap: 6px; }
.renk-secici input[type=color] { width: 34px; height: 30px; padding: 0; border: 1px solid var(--line); border-radius: 7px; background: none; cursor: pointer; flex-shrink: 0; }
.renk-secici input[type=color].bos { opacity: .45; }
.renk-secici input[type=color]::-webkit-color-swatch-wrapper { padding: 2px; }
.renk-secici input[type=color]::-webkit-color-swatch { border: 0; border-radius: 5px; }
.renk-secici .panel-giris { flex: 1; min-width: 0; }
.renk-secici .sure-cip { width: 26px; padding: 0; justify-content: center; flex-shrink: 0; }
.kapsam-sec { display: inline-flex; gap: 4px; margin-left: auto; text-transform: none; letter-spacing: 0; }
.kapsam-sec .sure-cip.acik { border-color: var(--cyan-line); background: var(--cyan-soft); color: var(--cyan-ink); }

/* Görünüm paneli: dar sütunda etiket ve alanların düzgün durması */
.gorunum-panel .bolum-etiketi, .secim-grup .bolum-etiketi { overflow-wrap: anywhere; letter-spacing: .1em; }
.gorunum-panel .panel-alan, .secim-grup .panel-alan { min-width: 0; }
.gorunum-panel .panel-giris, .secim-grup .panel-giris { min-width: 0; max-width: 100%; }
.gorunum-panel select.panel-giris, .secim-grup select.panel-giris { text-overflow: ellipsis; }
.gorunum-panel .panel-ipucu { overflow-wrap: anywhere; }
.oge-ayar > summary { flex-wrap: wrap; row-gap: 2px; }
.oge-ayar > summary > .panel-ipucu { flex-basis: 100%; order: 3; white-space: normal; overflow: visible; }
.oge-ayar .oge-ozet { margin-left: auto; }
.font-ornek { font-size: 16px; }
@media (max-width: 1360px) { .oge-ayar > summary > .panel-ipucu { display: none; } }
/* Etiket bir ya da iki satır olsun, alanlar yine aynı hizada başlasın */
.gorunum-panel .gorunum-satir > .panel-alan > .bolum-etiketi,
.secim-grup .gorunum-satir > .panel-alan > .bolum-etiketi {
  display: flex; align-items: flex-end; min-height: 2.1em; line-height: 1.25;
}
.gorunum-panel .gorunum-satir > .gorunum-onay { align-self: end; }
/* Örnek satırdaki uzun metin kartı genişletmesin (nowrap min-content taşması) */
.blok-ayar { grid-template-columns: minmax(0, 1fr); }
.blok-ayar > *, .oge-ayar .font-ornek { min-width: 0; }

/* --- panel: evraklar ------------------------------------------------------ */
.evrak-tur-secim { display: flex; flex-wrap: wrap; gap: 6px; }
.evrak-hafta { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; margin-top: 12px; }
.evrak-gun { display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); min-height: 92px; }
.evrak-gun.yok { border-style: dashed; border-color: var(--rose-line); background: var(--rose-soft); }
.evrak-gun.var { border-color: var(--emerald-line); background: var(--emerald-soft); }
.evrak-gun.bugun { box-shadow: 0 0 0 2px var(--cyan-line); }
.evrak-gun-bas { font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); display: flex; align-items: baseline; gap: 6px; }
.evrak-gun-bas b { font-size: 15px; letter-spacing: -.02em; color: var(--text); }
.evrak-gun-kayit { display: flex; align-items: center; gap: 6px; padding: 5px 7px; border-radius: 8px; background: var(--surface); border: 1px solid var(--line); font-size: 11.5px; color: var(--text); text-decoration: none; min-width: 0; }
.evrak-gun-kayit:hover { border-color: var(--line-2); }
.evrak-gun-kayit svg { width: 12px; height: 12px; flex-shrink: 0; color: var(--text-3); }
.evrak-gun-kayit span:not(.evrak-nokta) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.evrak-nokta { width: 7px; height: 7px; border-radius: 50%; background: var(--ton); margin-left: auto; flex-shrink: 0; }
.evrak-gun-ekle { display: inline-flex; align-items: center; gap: 5px; margin-top: auto; font-size: 11.5px; color: var(--rose-ink); text-decoration: none; }
.evrak-gun-ekle svg { width: 12px; height: 12px; }
.evrak-gun-ekle:hover { text-decoration: underline; }
.evrak-satir-ikon { flex-shrink: 0; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--ton-soft); color: var(--ton-ink); border: 1px solid var(--ton-line); }
.evrak-satir-ikon svg { width: 16px; height: 16px; }
.evrak-dosya { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-2); }
.evrak-dosya-ikon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--cyan-soft); color: var(--cyan-ink); flex-shrink: 0; }
.evrak-dosya-ikon svg { width: 15px; height: 15px; }
input[type=file].panel-giris { padding: 8px 10px; font-size: 12.5px; }
.panel-alan[hidden], .gorunum-satir > [hidden], .evrak-gun [hidden] { display: none !important; }
/* Evraklar: "sadece dosya yükle" kutusu */
.evrak-hizli { margin-bottom: 16px; }
.evrak-hizli-satir { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-top: 10px; }
.evrak-hizli-satir .panel-alan { flex: 1; min-width: 0; }
.evrak-hizli-satir .dugme-ana { height: 38px; }

/* --- açılır listeler (combobox) ------------------------------------------
   Tarayıcının kendi denetimleri temayı bilmiyordu: select oku işletim
   sisteminden geliyordu, datalist'li alanlar da "öneri" gibi görünüp
   yazmadan açılmıyordu. Select'e kendi okumuzu koyuyoruz; datalist'li
   alanları ise ortak/alt.php'deki betik gerçek açılır listeye çeviriyor. */
:root { color-scheme: light; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; } }
:root[data-theme="dark"] { color-scheme: dark; }

select.panel-giris {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  padding-right: 30px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237286A0' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 9px center; background-size: 13px;
}
select.panel-giris:hover { border-color: var(--line-2); }
select.panel-giris option { background: var(--surface); color: var(--text); }
select.panel-giris::-ms-expand { display: none; }

.ac-kutu { position: relative; display: block; min-width: 0; }
.ac-kutu > .panel-giris { padding-right: 30px; }
.ac-ok { position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; width: 24px; height: 24px; padding: 0;
  border: 0; border-radius: 6px; background: transparent; color: var(--text-3); cursor: pointer; }
.ac-ok:hover { color: var(--text); background: var(--surface-2); }
.ac-ok svg { width: 13px; height: 13px; }
.ac-kutu.acik .ac-ok { color: var(--cyan-ink); transform: translateY(-50%) rotate(180deg); }
.ac-liste { position: absolute; z-index: 60; left: 0; right: 0; top: calc(100% + 4px);
  max-height: 248px; overflow: auto; padding: 4px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--surface); box-shadow: var(--elev); }
.ac-liste[hidden] { display: none !important; }
.ac-sec { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; padding: 7px 9px; border: 0; border-radius: 7px; background: transparent;
  color: var(--text); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.ac-sec > b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-sec > span { flex: none; font-family: var(--f-mono); font-size: 10.5px; color: var(--text-3); }
.ac-sec:hover, .ac-sec.secili { background: var(--surface-2); }
.ac-sec.secili { box-shadow: inset 0 0 0 1px var(--cyan-line); }
.ac-sec[aria-selected="true"] > b { color: var(--cyan-ink); font-weight: 700; }
.ac-bos { padding: 9px; font-size: 12px; color: var(--text-3); }

/* dosya seçme düğmesi de panelin kendi düğmelerine benzesin */
input[type=file].panel-giris::file-selector-button {
  margin-right: 10px; padding: 5px 10px; border: 1px solid var(--line-2); border-radius: 7px;
  background: var(--surface); color: var(--text); font: inherit; font-size: 12px; cursor: pointer;
}
input[type=file].panel-giris::file-selector-button:hover { border-color: var(--cyan-line); color: var(--cyan-ink); }

/* --- Kullanıcılar (panel hesapları) -------------------------------------- */
.panel-hesap { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 9px;
  border: 1px solid transparent; border-radius: 8px; font-size: 11px; color: var(--text-3); text-decoration: none; }
.panel-hesap svg { width: 13px; height: 13px; }
.panel-hesap:hover { border-color: var(--line); background: var(--surface-2); color: var(--text); }

.hesap-ikili { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 12px; margin-bottom: 16px; align-items: start; }
.hesap-form { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.hesap-form .dugme { align-self: flex-start; }
.hesap-meta { margin-top: 14px; font-size: 12.5px; }
.hesap-meta th { width: 130px; color: var(--text-3); font-weight: 600; text-align: left; padding: 6px 10px 6px 0; }
.hesap-meta td { color: var(--text-2); }
.hesap-ayrac { height: 1px; margin: 16px 0 12px; background: var(--line); }

.hesap-islem { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-start; justify-content: flex-end; }
.hesap-islem form { display: inline-flex; }
.hesap-katlar { position: relative; }
.hesap-katlar > summary { list-style: none; cursor: pointer; }
.hesap-katlar > summary::-webkit-details-marker { display: none; }
.hesap-katlar[open] > summary { border-color: var(--cyan-line); color: var(--cyan-ink); }
.hesap-katlar-ic { position: absolute; z-index: 30; right: 0; top: calc(100% + 6px); width: 260px;
  display: flex; flex-direction: column; gap: 9px; padding: 12px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: var(--elev); text-align: left; }

.hesap-yeni > summary { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; cursor: pointer; list-style: none; }
.hesap-yeni > summary::-webkit-details-marker { display: none; }
.hesap-yeni > summary .panel-ipucu { margin-left: auto; }
.hesap-satir { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin: 12px 0 8px; }
.hesap-satir .panel-alan { flex: 1; min-width: 150px; }
.hesap-satir .dugme-ana { height: 38px; }

.hesap-gunluk { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; }
.hesap-gunluk-satir { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 9px; }
.hesap-gunluk-satir:hover { background: var(--surface-2); }
.hesap-gunluk-satir b { display: block; font-size: 12.5px; font-weight: 600; color: var(--text); }
.hesap-gunluk-satir .mono { font-size: 11px; color: var(--text-3); }

/* --- içerik görseli (söz, fikir, anket, hata, uygulama, ödev, not) -------
   Panelden seçilen görsel; yoksa hiç basılmaz. Kırpma 16:9, köşe ve çizgi
   karttan gelir. */
.icerik-gorsel { display: block; width: 100%; margin: 12px 0 0; border-radius: 12px;
  border: 1px solid var(--line); background: var(--surface-2); object-fit: cover; aspect-ratio: 16 / 9; }
.icerik-gorsel.gorsel-blok { margin-top: 12px; max-height: 240px; }
.icerik-gorsel.gorsel-kart { margin: 10px 0 2px; max-height: 190px; }
.icerik-gorsel.gorsel-kisa { aspect-ratio: 21 / 9; max-height: 120px; }
.icerik-gorsel.gorsel-genis { margin: 14px 0 4px; max-height: 320px; }
.liste-satir-gorsel { flex: none; width: 34px; height: 34px; border-radius: 9px; object-fit: cover;
  border: 1px solid var(--line); background: var(--surface-2); }

/* panel listelerinde satır başındaki görsel küpürü (ortak/gorsel.php) */
.satir-kupur { flex: none; align-self: flex-start; width: 72px; height: 48px; border-radius: 9px;
  object-fit: cover; border: 1px solid var(--line); background: var(--surface-2); }
@media (max-width: 980px) { .satir-kupur { width: 100%; height: 130px; } }

/* --- E-posta (SMTP) ekranı ---------------------------------------------- */
.eposta-duzen { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px; align-items: start; margin-bottom: 16px; }
.eposta-olaylar { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 6px; margin-top: 8px; }
.eposta-kayit { margin: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface-2); color: var(--text-2); font-size: 11.5px; line-height: 1.6;
  white-space: pre-wrap; word-break: break-word; max-height: 260px; overflow: auto; }