/* ============================================================
   Günün Excel Challenge'ı — /challenge
   Kurallar: inline yok, gradient yok, emoji yok, tek renk yeşil + tek kırmızı (hata).
   excel-izgara.css tokenları .ch köküne bağlanır (excel-lab.css ile aynı harita).
   ============================================================ */
.ch {
    --site-yuzey: var(--color-bg, #ffffff);
    --site-baslik: var(--color-text, #1e293b);
    --site-metin: var(--color-text-secondary, #64748b);
    --site-cizgi-guclu: #94a3b8;
    --site-odak: var(--color-primary, #2B542C);
    --site-font: inherit;
    --site-bosluk-blok: 12px;
    --site-kontrol-h: 40px;
    --site-kontrol-h-sm: 32px;
    --site-radius-alan: 8px;
    --site-radius-kart: 12px;
    --site-radius-rozet: 999px;
    --slate-100: #f1f5f9; --slate-200: #e2e8f0; --slate-700: #334155;
    --blue-800: #1e3a5f; --wine-100: #fdecec; --wine-700: #b42318;
    --green-100: #e6efe6; --green-900: #1e3b1f; --plum-700: #5b3a6b; --orange-700: #9a5b12; --teal-700: #1f5f5b;
    --clay-100: #f3ede4; --clay-700: #7a5a2f;
    --g-2: #1f2937; --g-3: #374151; --g-4: #4b5563; --g-8: #d1d5db; --g-9: #e5e7eb;
    --kat-beceri: var(--color-primary, #2B542C); --kat-beceri-acik: #e6efe6;
    --c: var(--color-primary, #2B542C); --c-acik: #e6efe6;

    --ch-yesil: var(--color-primary, #2B542C);
    --ch-yesil-koyu: #1e3b1f;
    --ch-yesil-orta: #3a703b;
    --ch-yesil-acik: #e6efe6;
    --ch-yesil-cok-acik: #f2f7f2;
    --ch-kirmizi: #b42318;
    --ch-kirmizi-acik: #fdecec;
    --ch-sari: #fff4cc;
    --ch-gri: #64748b;
    --ch-cizgi: #e2e8f0;
    --ch-kod: ui-monospace, "Cascadia Mono", Consolas, monospace;
    padding-bottom: 48px;
}
.ch [hidden] { display: none !important; }
.ds-ekran-okuyucu { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ---------- Ortak ---------- */
.ch-kart { border: 1px solid var(--ch-cizgi); border-radius: 12px; background: #fff; padding: 20px 24px; }
.ch-govde > main > * + * { margin-top: 22px; }
.ch-h2 { font-size: 18px; margin: 0 0 12px; color: var(--ch-yesil-koyu); display: flex; align-items: center; gap: 8px; }
.ch-h2 i { color: var(--ch-yesil); }
.ch-sayfa-baslik { font-size: 30px; margin: 18px 0 6px; }
.ch-etiket { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--ch-gri); }
.ch-rozet { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; border-radius: 999px; padding: 4px 11px; background: var(--ch-yesil-acik); color: var(--ch-yesil-koyu); }
.ch-rozet--kolay { background: var(--ch-yesil-acik); }
.ch-rozet--orta { background: #dcebdc; }
.ch-rozet--zor { background: var(--ch-yesil); color: #fff; }
.ch-rozet--kirmizi { background: var(--ch-kirmizi-acik); color: var(--ch-kirmizi); }
.ch-rozet--gri { background: var(--slate-100); color: var(--slate-700); }
.ch-yildiz { font-family: var(--ch-kod); letter-spacing: .1em; color: var(--ch-yesil); font-weight: 900; }
.ch-btn { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--ch-cizgi); background: #fff; color: var(--ch-yesil-koyu); font-weight: 700; padding: 9px 16px; border-radius: 10px; cursor: pointer; font: inherit; font-weight: 700; }
.ch-btn:hover { border-color: var(--ch-yesil); background: var(--ch-yesil-cok-acik); }
.ch-btn--ana { background: var(--ch-yesil); color: #fff; border-color: var(--ch-yesil); }
.ch-btn--ana:hover { background: var(--ch-yesil-koyu); }
.ch-btn--tehlike { border-color: var(--ch-kirmizi); color: var(--ch-kirmizi); }
.ch-btn:disabled { opacity: .55; cursor: default; }
.ch-kod { font-family: var(--ch-kod); font-size: 14px; background: var(--slate-100); border-radius: 8px; padding: 8px 10px; white-space: pre-wrap; word-break: break-all; display: block; }
.ch-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--ch-yesil); color: #fff; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* ---------- Index ---------- */
.ch-hero { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; padding: 40px 0 32px; align-items: center; }
.ch-hero h1 { font-size: 40px; line-height: 1.12; margin: 14px 0 12px; color: var(--ch-yesil-koyu); font-weight: 900; max-width: 720px; }
.ch-hero p { color: var(--ch-gri); font-size: 17px; line-height: 1.6; margin: 0 0 22px; max-width: 680px; }
.ch-hero-yan { display: flex; flex-direction: column; gap: 10px; }
.ch-stat { border: 1px solid var(--ch-cizgi); border-radius: 12px; padding: 14px 18px; background: var(--ch-yesil-cok-acik); display: flex; align-items: center; gap: 14px; }
.ch-stat > i { font-size: 22px; color: var(--ch-yesil); }
.ch-stat strong { font-size: 24px; color: var(--ch-yesil-koyu); font-family: var(--ch-kod); }
.ch-stat span { font-size: 13px; color: var(--ch-gri); }
.ch-guncel { border: 2px solid var(--ch-yesil); border-radius: 16px; padding: 28px 32px; background: #fff; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px; align-items: center; margin: 0 0 48px; }
.ch-guncel h2 { font-size: 28px; margin: 10px 0 10px; color: var(--ch-yesil-koyu); }
.ch-guncel h2 a { color: inherit; text-decoration: none; }
.ch-guncel h2 a:hover { text-decoration: underline; }
.ch-guncel p { margin: 0; color: var(--ch-gri); font-size: 16px; line-height: 1.6; max-width: 760px; }
.ch-guncel-meta { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin-top: 16px; font-size: 13px; color: var(--ch-gri); }
.ch-guncel-meta span { display: inline-flex; align-items: center; gap: 6px; }
.ch-bolum { margin-top: 48px; }
.ch-bolum .ch-h2 { font-size: 22px; margin: 0 0 18px; padding-bottom: 12px; border-bottom: 1px solid var(--ch-cizgi); }
.ch-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.ch-liste-kart { border: 1px solid var(--ch-cizgi); border-radius: 14px; padding: 20px 22px; background: #fff; display: flex; flex-direction: column; gap: 10px; position: relative; min-height: 150px; }
.ch-liste-kart:hover { border-color: var(--ch-yesil); }
.ch-liste-kart a { text-decoration: none; color: var(--ch-yesil-koyu); font-weight: 800; font-size: 17px; line-height: 1.35; }
.ch-liste-kart a::after { content: ""; position: absolute; inset: 0; }
.ch-liste-no { font-family: var(--ch-kod); font-size: 12px; color: var(--ch-gri); }
.ch-liste-meta { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; font-size: 12px; color: var(--ch-gri); margin-top: auto; }
.ch-liste-meta span { display: inline-flex; align-items: center; gap: 5px; }
.ch-liste-kart--cozuldu { border-color: var(--ch-yesil); background: var(--ch-yesil-cok-acik); }
.ch-cozuldu-ikon { position: absolute; top: 12px; right: 12px; color: var(--ch-yesil); }

/* ---------- Show ---------- */
.ch-bas { padding: 28px 0 22px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: end; }
.ch-bas h1 { font-size: 34px; line-height: 1.15; margin: 14px 0 12px; color: var(--ch-yesil-koyu); font-weight: 900; }
.ch-bas-meta { display: flex; gap: 10px 14px; flex-wrap: wrap; align-items: center; font-size: 13px; color: var(--ch-gri); }
.ch-bas-meta > span { display: inline-flex; align-items: center; gap: 6px; }
.ch-bas-sag { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; font-size: 13px; color: var(--ch-gri); }
.ch-kalan { font-family: var(--ch-kod); font-weight: 800; color: var(--ch-yesil-koyu); font-size: 15px; }
.ch-govde { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; margin-top: 16px; }
.ch-hikaye { font-size: 15px; line-height: 1.65; color: var(--color-text, #1e293b); }
.ch-hikaye p { margin: 0 0 10px; }
.ch-gorev { border-left: 3px solid var(--ch-yesil); background: var(--ch-yesil-cok-acik); padding: 14px 18px; border-radius: 0 8px 8px 0; margin-top: 16px; line-height: 1.6; }
.ch-gorev .ch-etiket { display: inline-block; margin-top: 8px; }
.ch-gorev strong { color: var(--ch-yesil-koyu); }
.ch-izgara-kap { border: 1px solid var(--ch-cizgi); border-radius: 12px; overflow: hidden; background: #fff; }
.ch .xi-kaydir { position: relative; }
.ch .xi { --xi-kaydir-h: 520px; }
.ch-alt-bar { display: flex; align-items: center; gap: 16px; padding: 14px 18px; border-top: 1px solid var(--ch-cizgi); background: var(--ch-yesil-cok-acik); flex-wrap: wrap; }
.ch-sure { font-family: var(--ch-kod); font-weight: 800; color: var(--ch-yesil-koyu); display: inline-flex; align-items: center; gap: 6px; }
.ch-alt-sag { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ch-yazim { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--ch-gri); }
.ch-yazim select { border: 1px solid var(--ch-cizgi); border-radius: 8px; padding: 4px 8px; background: #fff; font-size: 12px; }
.ch-sonuc { border-radius: 10px; padding: 14px 18px; border: 1px solid var(--ch-cizgi); }
.ch-sonuc--tam { border-color: var(--ch-yesil); background: var(--ch-yesil-acik); }
.ch-sonuc--kismi { border-color: var(--ch-kirmizi); background: var(--ch-kirmizi-acik); }
.ch-sonuc p { margin: 6px 0 0; font-size: 14px; }
.ch-sonuc-yanlis { font-family: var(--ch-kod); }
.ch-misafir { border: 1px dashed var(--ch-yesil); border-radius: 10px; padding: 12px 14px; background: var(--ch-yesil-cok-acik); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ch-ipucu-kutu { margin-top: 10px; border-left: 3px solid var(--orange-700); background: var(--ch-sari); padding: 10px 14px; border-radius: 0 8px 8px 0; font-size: 14px; }
.ch-zor-not { font-size: 13px; color: var(--ch-gri); margin-top: 8px; display: flex; gap: 8px; align-items: flex-start; }

/* Yan panel */
.ch-yan { display: flex; flex-direction: column; gap: 18px; position: sticky; top: 84px; }
.ch-cozenler { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 420px; overflow: auto; }
.ch-cozen { display: grid; grid-template-columns: 26px 32px minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: 13px; padding: 4px 0; }
.ch-cozen-sira { font-family: var(--ch-kod); font-weight: 800; color: var(--ch-gri); }
.ch-cozen--ilk .ch-cozen-sira { color: var(--ch-yesil); }
.ch-cozen-ad { font-weight: 700; color: var(--ch-yesil-koyu); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-cozen-sure { font-family: var(--ch-kod); color: var(--ch-gri); }
.ch-cozen--reveal { opacity: .6; }
.ch-bos { color: var(--ch-gri); font-size: 14px; margin: 0; }
.ch-nav { display: flex; justify-content: space-between; gap: 12px; padding: 4px 2px; }
.ch-nav a { text-decoration: none; font-size: 13px; color: var(--ch-yesil-koyu); font-weight: 700; }

/* Çözüm formu */
.ch-form { display: flex; flex-direction: column; gap: 12px; }
.ch-form label { font-size: 13px; font-weight: 700; color: var(--ch-yesil-koyu); }
.ch-form textarea, .ch-form input[type="text"] { width: 100%; border: 1px solid var(--ch-cizgi); border-radius: 8px; padding: 10px 12px; font: inherit; }
.ch-form textarea.ch-form-formul { font-family: var(--ch-kod); min-height: 72px; }
.ch-ceviri { font-family: var(--ch-kod); font-size: 13px; color: var(--ch-yesil-orta); min-height: 18px; }
.ch-form-check { display: flex; gap: 8px; align-items: center; font-size: 13px; }
.ch-honey { position: absolute; left: -9999px; }

/* Kilit */
.ch-kilit { border: 1px dashed var(--ch-yesil); border-radius: 12px; padding: 32px 22px; text-align: center; background: var(--ch-yesil-cok-acik); display: flex; flex-direction: column; gap: 10px; align-items: center; }
.ch-kilit i { font-size: 32px; color: var(--ch-yesil); }
.ch-kilit p { margin: 0; color: var(--ch-gri); max-width: 520px; }
.ch-kilit--aciliyor { border-style: solid; }
.ch-kilit-eylemler { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }

/* Çözümler */
.ch-cozumler { margin-top: 0; }
.ch-sira { display: flex; gap: 6px; margin-bottom: 10px; }
.ch-sira a { font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--ch-cizgi); text-decoration: none; color: var(--ch-gri); }
.ch-sira a.aktif { background: var(--ch-yesil); color: #fff; border-color: var(--ch-yesil); }
.ch-cozum { border: 1px solid var(--ch-cizgi); border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 10px; }
.ch-cozum--altin { border-color: var(--ch-yesil); background: var(--ch-yesil-cok-acik); }
.ch-cozum-bas { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 13px; color: var(--ch-gri); }
.ch-cozum-bas strong { color: var(--ch-yesil-koyu); }
.ch-cozum-aciklama { font-size: 14px; margin: 6px 0 0; }
.ch-cozum-alt { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; font-size: 12px; color: var(--ch-gri); }
.ch-begen { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--ch-cizgi); background: #fff; border-radius: 999px; padding: 3px 10px; font: inherit; font-size: 12px; font-weight: 700; color: var(--ch-yesil-koyu); cursor: pointer; }
.ch-begen--aktif, .ch-begen:disabled { background: var(--ch-yesil-acik); border-color: var(--ch-yesil); }
.ch-resmi { border: 1px solid var(--ch-yesil); border-radius: 12px; padding: 18px 22px; background: #fff; }
.ch-spoiler > summary { cursor: pointer; list-style: none; }
.ch-spoiler > summary::-webkit-details-marker { display: none; }
.ch-spoiler[open] > summary { margin-bottom: 12px; }
.ch-spoiler > summary .ch-etiket { margin-left: auto; }
.ch-resmi-aciklama { font-size: 14px; line-height: 1.6; margin-top: 8px; }

/* Arşiv / liderler */
.ch-filtre { display: flex; gap: 10px; flex-wrap: wrap; margin: 16px 0 22px; align-items: center; }
.ch-filtre input[type="text"] { border: 1px solid var(--ch-cizgi); border-radius: 10px; padding: 8px 12px; font: inherit; min-width: 220px; }
.ch-tablo { width: 100%; border-collapse: collapse; }
.ch-tablo th, .ch-tablo td { padding: 8px 10px; border-bottom: 1px solid var(--ch-cizgi); text-align: left; font-size: 14px; }
.ch-tablo th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--ch-gri); }
.ch-tablo td.sayi { font-family: var(--ch-kod); text-align: right; }
.ch-tablo tr.ben td { background: var(--ch-yesil-cok-acik); font-weight: 700; }
.ch-kurallar h2 { font-size: 18px; margin: 18px 0 6px; color: var(--ch-yesil-koyu); }
.ch-kurallar p, .ch-kurallar li { font-size: 15px; line-height: 1.6; }

/* Veri tablosu (JS'siz okunabilirlik, SEO) */
.ch-veri-html { overflow: auto; margin-top: 16px; }
.ch-veri-html table { border-collapse: collapse; font-size: 13px; }
.ch-veri-html th, .ch-veri-html td { border: 1px solid var(--ch-cizgi); padding: 4px 8px; white-space: nowrap; }
.ch-veri-html th { background: var(--slate-100); font-weight: 700; }
.ch-veri-html summary { cursor: pointer; font-size: 13px; color: var(--ch-gri); }

@media (max-width: 1100px) {
    .ch-hero { gap: 20px; }
    .ch-govde { grid-template-columns: minmax(0, 1fr); }
    .ch-yan { position: static; }
    .ch-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ch-hero { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 768px) {
    .ch-bas, .ch-guncel { grid-template-columns: minmax(0, 1fr); }
    .ch-bas-sag { align-items: flex-start; }
    .ch-liste { grid-template-columns: minmax(0, 1fr); }
    .ch-hero h1 { font-size: 28px; }
    .ch-bas h1 { font-size: 24px; }
}
html.dark .ch { --site-yuzey: #111827; --site-baslik: #f3f4f6; --site-metin: #d1d5db; --slate-100: #1f2937; --slate-200: #374151; --ch-yesil-acik: #1f3a20; --ch-yesil-cok-acik: #17261a; --ch-cizgi: #374151; --ch-gri: #9ca3af; --ch-sari: #4a3f12; --ch-kirmizi-acik: #3a1c1a; }
html.dark .ch-kart, html.dark .ch-guncel, html.dark .ch-liste-kart, html.dark .ch-izgara-kap, html.dark .ch-cozum, html.dark .ch-resmi, html.dark .ch-btn, html.dark .ch-begen, html.dark .ch-form textarea, html.dark .ch-form input[type="text"], html.dark .ch-yazim select { background: #111827; color: #e5e7eb; }
html.dark .ch-hero h1, html.dark .ch-bas h1, html.dark .ch-guncel h2, html.dark .ch-liste-kart a, html.dark .ch-h2, html.dark .ch-cozen-ad, html.dark .ch-hikaye { color: #e5e7eb; }

/* ===== Tek sayfa (2026-09-16): önceki challenge'lar + liderler + kurallar, show'un altında ===== */
.ch-tek { margin-top: 48px; display: grid; gap: 40px; padding-bottom: 24px; }
.ch-tek .ch-bolum > .ch-h2 { margin-bottom: 10px; }
.ch-tek .ch-bolum > .ch-bos { margin: 0 0 16px; }
.ch-kurallar > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 10px; }
.ch-kurallar > summary::-webkit-details-marker { display: none; }
.ch-kurallar[open] > summary { margin-bottom: 14px; }
.ch-kurallar-metin h3 { font-size: 17px; margin: 18px 0 6px; }
.ch-kurallar-metin h3:first-child { margin-top: 0; }
.ch-kurallar-metin p, .ch-kurallar-metin li { line-height: 1.6; }