/* ==========================================================
   KARBON ADIM – Tasarım Sistemi
   Orman yeşili, filiz yeşili, toprak ve güneş tonları
   ========================================================== */
:root {
  color-scheme: light;
  --orman-950: #062619;
  --orman-900: #0B3D2E;
  --orman-800: #0F5132;
  --orman-700: #146C43;
  --filiz-600: #16A34A;
  --filiz-500: #22C55E;
  --filiz-400: #4ADE80;
  --filiz-200: #BBF7D0;
  --filiz-100: #DCFCE7;
  --filiz-50: #F0FDF4;
  --zemin: #F3F8F4;
  --kart: #FFFFFF;
  --murekkep: #12261E;
  --soluk: #5B7065;
  --cizgi: #DCE8E0;
  --toprak: #92400E;
  --toprak-acik: #FEF3C7;
  --gunes: #F59E0B;
  --gok: #0284C7;
  --gok-acik: #E0F2FE;
  --kirmizi: #DC2626;
  --kirmizi-acik: #FEE2E2;
  --mor: #7C3AED;
  --golge: 0 1px 2px rgba(6, 38, 25, .06), 0 4px 16px rgba(6, 38, 25, .06);
  --golge-buyuk: 0 12px 40px rgba(6, 38, 25, .14);
  --r: 16px;
  --r-kucuk: 10px;
  --font-baslik: "Nunito", "Segoe UI", system-ui, sans-serif;
  --font-govde: "Inter", "Segoe UI", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-govde);
  font-size: 15px;
  line-height: 1.55;
  color: var(--murekkep);
  background: var(--zemin);
}
img { max-width: 100%; display: block; }
a { color: var(--orman-700); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { font-family: var(--font-baslik); color: var(--orman-900); line-height: 1.2; margin: 0 0 .5em; font-weight: 800; }
h1 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); }
h2 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); }
h3 { font-size: 1.12rem; }
p { margin: 0 0 1em; }
small, .soluk { color: var(--soluk); }
code { background: var(--filiz-50); padding: 1px 6px; border-radius: 6px; }

/* ---------- Butonlar ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45em;
  font: 700 .95rem var(--font-baslik);
  padding: .68em 1.2em; border-radius: 999px; border: 1.5px solid transparent;
  cursor: pointer; text-decoration: none !important; transition: transform .12s, box-shadow .12s, background .15s;
  background: var(--filiz-600); color: #fff; white-space: nowrap;
}
.btn:hover { background: var(--orman-700); box-shadow: 0 6px 18px rgba(22, 163, 74, .28); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
.btn-ikincil { background: #fff; color: var(--orman-800); border-color: var(--cizgi); }
.btn-ikincil:hover { background: var(--filiz-50); border-color: var(--filiz-400); box-shadow: none; }
.btn-hayalet { background: transparent; color: var(--orman-800); }
.btn-hayalet:hover { background: var(--filiz-50); box-shadow: none; }
.btn-tehlike { background: var(--kirmizi); }
.btn-tehlike:hover { background: #B91C1C; box-shadow: 0 6px 18px rgba(220, 38, 38, .25); }
.btn-uyari { background: var(--gunes); color: #3B2300; }
.btn-uyari:hover { background: #D97706; }
.btn-kucuk { padding: .42em .85em; font-size: .82rem; }
.btn-buyuk { padding: .9em 1.6em; font-size: 1.05rem; }
.btn-tam { width: 100%; }

/* ---------- Formlar ---------- */
.form-grup { margin-bottom: 1rem; }
.form-grup label, .etiket { display: block; font-weight: 600; font-size: .88rem; margin-bottom: .35rem; color: var(--orman-900); }
.girdi, select.girdi, textarea.girdi {
  width: 100%; font: inherit; padding: .7em .9em; border-radius: var(--r-kucuk);
  border: 1.5px solid var(--cizgi); background: #fff; color: var(--murekkep); transition: border .15s, box-shadow .15s;
}
.girdi:focus { outline: none; border-color: var(--filiz-500); box-shadow: 0 0 0 4px rgba(34, 197, 94, .15); }
textarea.girdi { min-height: 110px; resize: vertical; }
.form-satir { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0 1rem; }
.onay-kutu { display: flex; gap: .6rem; align-items: flex-start; font-size: .9rem; margin-bottom: .7rem; cursor: pointer; }
.onay-kutu input { margin-top: .25rem; width: 18px; height: 18px; accent-color: var(--filiz-600); flex: none; }
.hata-metni, .field-validation-error { color: var(--kirmizi); font-size: .82rem; display: block; margin-top: .25rem; }
.validation-summary-errors ul { margin: 0; padding-left: 1.1rem; }

/* Anahtar (toggle) */
.anahtar { position: relative; display: inline-flex; align-items: center; gap: .7rem; cursor: pointer; font-weight: 600; }
.anahtar input { position: absolute; opacity: 0; }
.anahtar .ray { width: 48px; height: 28px; border-radius: 99px; background: #CBD5E1; position: relative; transition: background .2s; flex: none; }
.anahtar .ray::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .2s; }
.anahtar input:checked + .ray { background: var(--filiz-600); }
.anahtar input:checked + .ray::after { transform: translateX(20px); }
.anahtar input:focus-visible + .ray { box-shadow: 0 0 0 4px rgba(34, 197, 94, .25); }

/* ---------- Uyarılar ---------- */
.uyari { padding: .9rem 1.1rem; border-radius: var(--r-kucuk); margin-bottom: 1rem; border: 1px solid; display: flex; gap: .7rem; align-items: flex-start; }
.uyari-basari { background: var(--filiz-50); border-color: var(--filiz-200); color: var(--orman-800); }
.uyari-hata { background: var(--kirmizi-acik); border-color: #FCA5A5; color: #7F1D1D; }
.uyari-bilgi { background: var(--gok-acik); border-color: #7DD3FC; color: #0C4A6E; }
.uyari-dikkat { background: var(--toprak-acik); border-color: #FCD34D; color: #78350F; }

/* ---------- Kartlar ---------- */
.kart { background: var(--kart); border-radius: var(--r); box-shadow: var(--golge); padding: 1.35rem; border: 1px solid rgba(220, 232, 224, .7); min-width: 0; }
.kart-baslik { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
.kart-baslik h2, .kart-baslik h3 { margin: 0; }
.izgara { display: grid; gap: 1.1rem; }
.izgara-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.izgara-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.izgara-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.izgara-21 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
@media (max-width: 1100px) { .izgara-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .izgara-21 { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .izgara-2, .izgara-3 { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .izgara-4 { grid-template-columns: 1fr; } }
.mt { margin-top: 1.1rem; }
.mb { margin-bottom: 1.1rem; }
.yatay { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.ara { justify-content: space-between; }

/* İstatistik kutuları */
.stat { display: flex; gap: 1rem; align-items: center; }
.stat-ikon { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; font-size: 1.5rem; flex: none; background: var(--filiz-100); }
.stat-ikon.toprak { background: var(--toprak-acik); }
.stat-ikon.gok { background: var(--gok-acik); }
.stat-ikon.mor { background: #EDE9FE; }
.stat-ikon.kirmizi { background: var(--kirmizi-acik); }
.stat-deger { font: 800 1.6rem/1.1 var(--font-baslik); color: var(--orman-900); font-variant-numeric: tabular-nums; }
.stat-etiket { font-size: .84rem; color: var(--soluk); }

/* Rozetler */
.rozet { display: inline-flex; align-items: center; gap: .3em; font: 700 .74rem var(--font-govde); padding: .25em .7em; border-radius: 99px; background: var(--filiz-100); color: var(--orman-800); white-space: nowrap; }
.rozet-bekliyor { background: var(--toprak-acik); color: var(--toprak); }
.rozet-red { background: var(--kirmizi-acik); color: #991B1B; }
.rozet-askida { background: #E2E8F0; color: #334155; }
.rozet-gok { background: var(--gok-acik); color: #075985; }
.rozet-mor { background: #EDE9FE; color: #5B21B6; }

/* İlerleme */
.ilerleme { height: 12px; border-radius: 99px; background: var(--filiz-100); overflow: hidden; }
.ilerleme > span { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--filiz-500), var(--filiz-600)); transition: width .6s; }

/* Tablolar */
.tablo-sarmal { overflow-x: auto; margin: 0 -1.35rem; padding: 0 1.35rem; }
.tablo { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tablo th { text-align: left; font: 700 .76rem var(--font-govde); text-transform: uppercase; letter-spacing: .04em; color: var(--soluk); padding: .65rem .7rem; border-bottom: 2px solid var(--cizgi); white-space: nowrap; background: #FAFDFB; }
.tablo td { padding: .7rem; border-bottom: 1px solid var(--cizgi); vertical-align: middle; }
.tablo tr:hover td { background: #FAFDFB; }
.tablo .sayi { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kisi { display: flex; align-items: center; gap: .65rem; min-width: 180px; }
.avatar { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font: 800 .8rem var(--font-baslik); background: linear-gradient(135deg, var(--filiz-400), var(--orman-700)); color: #fff; flex: none; }
.avatar.buyuk { width: 72px; height: 72px; font-size: 1.4rem; }

.bos { text-align: center; padding: 2.5rem 1rem; color: var(--soluk); }
.bos .ikon { font-size: 2.6rem; margin-bottom: .5rem; }

/* Sekmeler */
.sekmeler { display: flex; gap: .35rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.sekmeler a, .sekmeler button { padding: .5em 1em; border-radius: 99px; font: 700 .86rem var(--font-baslik); color: var(--orman-800); background: #fff; border: 1.5px solid var(--cizgi); cursor: pointer; text-decoration: none; }
.sekmeler .aktif { background: var(--orman-900); color: #fff; border-color: var(--orman-900); }

/* ==========================================================
   GENEL (HALKA AÇIK) SAYFALAR
   ========================================================== */
.ust-cubuk { position: sticky; top: 0; z-index: 30; background: rgba(255, 255, 255, .9); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--cizgi); }
.ust-ic { max-width: 1180px; margin: 0 auto; padding: .7rem 16px; display: flex; align-items: center; gap: 1rem; }
.logo { display: flex; align-items: center; gap: .55rem; text-decoration: none !important; }
.logo img { width: 38px; height: 38px; object-fit: contain; }
.logo b { font: 900 1.22rem var(--font-baslik); color: var(--orman-900); letter-spacing: -.01em; }
.logo b span { color: var(--filiz-600); }
.ust-menu { display: flex; gap: .25rem; margin-left: auto; align-items: center; }
.ust-menu a:not(.btn) { padding: .45em .8em; border-radius: 99px; color: var(--orman-800); font-weight: 600; font-size: .92rem; }
.ust-menu a:not(.btn):hover { background: var(--filiz-50); text-decoration: none; }
@media (max-width: 760px) { .ust-menu a.gizle-mobil { display: none; } }

.kapsayici { max-width: 1180px; margin: 0 auto; padding: 0 16px; }

.kahraman { position: relative; overflow: hidden; color: #fff; background: var(--orman-950); }
.kahraman::before { content: ""; position: absolute; inset: 0; background: url("../img/orman.jpg") center/cover; opacity: .38; }
.kahraman::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(6, 38, 25, .96) 15%, rgba(6, 38, 25, .55) 65%, rgba(6, 38, 25, .2)); }
.kahraman-ic { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; padding: clamp(3rem, 8vw, 6.5rem) 16px; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 2rem; align-items: center; }
.kahraman h1 { color: #fff; font-size: clamp(2rem, 4.6vw, 3.4rem); letter-spacing: -.02em; }
.kahraman h1 em { font-style: normal; color: var(--filiz-400); }
.kahraman p.giris { font-size: 1.1rem; color: #D1FAE5; max-width: 560px; }
.tubitak-rozet { display: inline-flex; align-items: center; gap: .5rem; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .25); padding: .4em .9em; border-radius: 99px; font: 700 .82rem var(--font-govde); margin-bottom: 1.2rem; color: #ECFDF5; }
.tubitak-rozet i { width: 8px; height: 8px; border-radius: 50%; background: var(--filiz-400); box-shadow: 0 0 0 4px rgba(74, 222, 128, .25); }
.kahraman-agac { justify-self: center; position: relative; }
.kahraman-agac img { width: min(340px, 70vw); filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .45)); animation: salin 6s ease-in-out infinite; transform-origin: bottom center; }
@keyframes salin { 0%, 100% { transform: rotate(-1.2deg); } 50% { transform: rotate(1.2deg); } }
.kahraman-sayac { position: absolute; background: #fff; color: var(--murekkep); border-radius: 14px; padding: .6rem .9rem; box-shadow: var(--golge-buyuk); font-size: .8rem; }
.kahraman-sayac b { display: block; font: 800 1.25rem var(--font-baslik); color: var(--orman-900); }
@media (max-width: 860px) { .kahraman-ic { grid-template-columns: 1fr; } .kahraman-agac { display: none; } }

.bolum { padding: clamp(2.5rem, 6vw, 4.5rem) 0; }
.bolum-baslik { text-align: center; max-width: 680px; margin: 0 auto 2.2rem; }
.bolum-baslik .ust { font: 800 .8rem var(--font-govde); letter-spacing: .12em; text-transform: uppercase; color: var(--filiz-600); }
.ozellik { padding: 1.5rem; }
.ozellik .ikon { font-size: 2rem; width: 60px; height: 60px; border-radius: 16px; background: var(--filiz-100); display: grid; place-items: center; margin-bottom: 1rem; }
.adimlar { counter-reset: adim; }
.adim { position: relative; padding-left: 3.4rem; margin-bottom: 1.4rem; }
.adim::before { counter-increment: adim; content: counter(adim); position: absolute; left: 0; top: 0; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--orman-900); color: #fff; display: grid; place-items: center; font: 800 1rem var(--font-baslik); }
.alt-bilgi { background: var(--orman-950); color: #A7C4B5; padding: 2.5rem 0 1.5rem; font-size: .9rem; }
.alt-bilgi .logo b { color: #fff; }
.alt-bilgi a { color: #D1FAE5; }

/* Kimlik doğrulama sayfaları */
.kimlik-sayfa { min-height: calc(100vh - 64px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.kimlik-gorsel { position: relative; background: var(--orman-950); color: #fff; padding: 3rem; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; }
.kimlik-gorsel::before { content: ""; position: absolute; inset: 0; background: url("../img/orman.jpg") center/cover; opacity: .5; }
.kimlik-gorsel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(6, 38, 25, .95), rgba(6, 38, 25, .2)); }
.kimlik-gorsel > * { position: relative; z-index: 1; }
.kimlik-gorsel h2 { color: #fff; }
.kimlik-form { display: flex; align-items: center; justify-content: center; padding: 2.5rem 16px; }
.kimlik-form .kart { width: 100%; max-width: 520px; padding: 2rem; }
@media (max-width: 900px) { .kimlik-sayfa { grid-template-columns: 1fr; } .kimlik-gorsel { display: none; } }

/* ==========================================================
   PANEL (ÖĞRENCİ & YÖNETİM)
   ========================================================== */
.panel { display: grid; grid-template-columns: 264px minmax(0, 1fr); min-height: 100vh; }
.yan-menu { background: var(--orman-950); color: #CFE3D8; position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 1.1rem .9rem; overflow-y: auto; }
.yan-menu .logo { padding: .3rem .5rem 1.2rem; }
.yan-menu .logo b { color: #fff; }
.yan-menu .logo b span { color: var(--filiz-400); }
.menu-grup { font: 800 .7rem var(--font-govde); letter-spacing: .12em; text-transform: uppercase; color: #6E9784; padding: 1rem .7rem .4rem; }
.menu-link { display: flex; align-items: center; gap: .75rem; padding: .62rem .75rem; border-radius: 12px; color: #CFE3D8; font-weight: 600; font-size: .93rem; text-decoration: none !important; position: relative; }
.menu-link .i { width: 1.4rem; text-align: center; font-size: 1.05rem; }
.menu-link:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.menu-link.aktif { background: linear-gradient(90deg, rgba(74, 222, 128, .2), rgba(74, 222, 128, .05)); color: #fff; }
.menu-link.aktif::before { content: ""; position: absolute; left: -.9rem; top: 20%; bottom: 20%; width: 4px; border-radius: 0 4px 4px 0; background: var(--filiz-400); }
.menu-link .sayac { margin-left: auto; background: var(--gunes); color: #3B2300; font: 800 .72rem var(--font-govde); padding: .1em .55em; border-radius: 99px; }
.yan-alt { margin-top: auto; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, .08); }
.yan-kisi { display: flex; align-items: center; gap: .65rem; padding: .5rem; }
.yan-kisi b { color: #fff; font-size: .9rem; display: block; line-height: 1.2; }
.yan-kisi small { color: #8DB3A1; font-size: .76rem; }

.icerik { padding: 1.6rem clamp(16px, 3vw, 2.2rem) 3rem; min-width: 0; }
.sayfa-baslik { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.sayfa-baslik h1 { font-size: clamp(1.45rem, 2.6vw, 1.95rem); margin: 0; }
.sayfa-baslik p { margin: .25rem 0 0; color: var(--soluk); }

.mobil-ust { display: none; }
@media (max-width: 960px) {
  .panel { grid-template-columns: 1fr; }
  .yan-menu { position: fixed; inset: 0 auto 0 0; width: 280px; z-index: 50; transform: translateX(-100%); transition: transform .25s; }
  .panel.menu-acik .yan-menu { transform: none; box-shadow: var(--golge-buyuk); }
  .panel.menu-acik::after { content: ""; position: fixed; inset: 0; background: rgba(6, 38, 25, .45); z-index: 40; }
  .mobil-ust { display: flex; align-items: center; gap: .8rem; padding: .7rem 16px; background: #fff; border-bottom: 1px solid var(--cizgi); position: sticky; top: 0; z-index: 20; }
  .mobil-ust button { background: none; border: 0; font-size: 1.5rem; cursor: pointer; color: var(--orman-900); padding: .2rem .4rem; }
}

/* Öğrenci paneli: ağaç sahnesi */
.agac-sahne { position: relative; border-radius: var(--r); overflow: hidden; background: linear-gradient(180deg, #E0F7FA 0%, #ECFDF5 55%, #BBF7D0 56%, #86EFAC 100%); min-height: 260px; display: flex; align-items: flex-end; justify-content: center; padding: 1rem; }
.agac-sahne .buyuk-ikon { font-size: 7rem; line-height: 1; filter: drop-shadow(0 12px 10px rgba(6, 38, 25, .2)); animation: salin 5s ease-in-out infinite; transform-origin: bottom; margin-bottom: 1.6rem; }
.agac-sahne .gunes { position: absolute; top: 18px; right: 22px; width: 56px; height: 56px; border-radius: 50%; background: radial-gradient(circle, #FDE68A, #F59E0B); box-shadow: 0 0 40px rgba(245, 158, 11, .6); }

.takvim { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .5rem; }
.gun { text-align: center; padding: .6rem .2rem; border-radius: 12px; border: 2px solid var(--cizgi); background: #fff; }
.gun b { display: block; font: 800 1.15rem var(--font-baslik); }
.gun small { font-size: .72rem; text-transform: uppercase; font-weight: 700; }
.gun.tamam { border-color: var(--filiz-500); background: var(--filiz-50); }
.gun.kacti { border-color: #FCA5A5; background: #FEF2F2; }
.gun.bugun { box-shadow: 0 0 0 3px rgba(34, 197, 94, .25); border-color: var(--filiz-600); }
.gun .d { font-size: .9rem; }

/* Görev listesi */
.gorev { display: flex; align-items: center; gap: .9rem; padding: .9rem 1rem; border-radius: 14px; border: 1.5px solid var(--cizgi); margin-bottom: .6rem; cursor: pointer; background: #fff; transition: border .15s, background .15s; }
.gorev:hover { border-color: var(--filiz-400); }
.gorev input { position: absolute; opacity: 0; pointer-events: none; }
.gorev .kutu { width: 26px; height: 26px; border-radius: 8px; border: 2px solid #A3BFB0; display: grid; place-items: center; flex: none; transition: all .15s; color: transparent; font-weight: 900; }
.gorev .gorev-ikon { font-size: 1.5rem; flex: none; }
.gorev .metin { flex: 1; font-weight: 600; }
.gorev .metin small { display: block; font-weight: 500; }
.gorev:has(input:checked) { background: var(--filiz-50); border-color: var(--filiz-500); }
.gorev:has(input:checked) .kutu { background: var(--filiz-600); border-color: var(--filiz-600); color: #fff; }
.gorev:has(input:focus-visible) { box-shadow: 0 0 0 4px rgba(34, 197, 94, .2); }
.gorev.kilitli { cursor: default; }

/* Test */
.soru-kart { margin-bottom: 1rem; }
.secenekler { display: grid; gap: .5rem; }
.secenek { display: flex; gap: .7rem; align-items: center; padding: .8rem 1rem; border: 1.5px solid var(--cizgi); border-radius: 12px; cursor: pointer; background: #fff; }
.secenek:hover { border-color: var(--filiz-400); }
.secenek input { accent-color: var(--filiz-600); width: 18px; height: 18px; flex: none; }
.secenek:has(input:checked) { border-color: var(--filiz-600); background: var(--filiz-50); font-weight: 600; }

/* Orman */
.orman-zemin { position: relative; border-radius: var(--r); overflow: hidden; min-height: 420px; background: linear-gradient(180deg, #CFFAFE 0%, #ECFDF5 9%, #BBF7D0 9.5%, #86EFAC 60%, #4ADE80 100%); padding: 3rem 1rem 1.2rem; }
.orman-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: .3rem .5rem; position: relative; }
.orman-agac { aspect-ratio: 1 / 1.05; display: flex; align-items: flex-end; justify-content: center; position: relative; }
.orman-agac img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 8px 6px rgba(6, 38, 25, .25)); transition: transform .2s; }
.orman-agac:hover img { transform: scale(1.08) translateY(-4px); }
.orman-agac .etiket { position: absolute; bottom: -2px; font-size: .68rem; background: rgba(255, 255, 255, .85); padding: 0 .4rem; border-radius: 99px; font-weight: 700; color: var(--orman-800); }
.orman-agac.bos-yer { border: 2px dashed rgba(6, 38, 25, .18); border-radius: 50%; aspect-ratio: 1; align-items: center; color: rgba(6, 38, 25, .35); font-size: 1.4rem; }

/* Oyunlar */
.oyun-secim { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 860px) { .oyun-secim { grid-template-columns: 1fr; } }
.oyun-kart { text-align: left; cursor: pointer; border: 2px solid transparent; transition: transform .15s, border .15s; font: inherit; color: inherit; }
.oyun-kart:hover { transform: translateY(-3px); border-color: var(--filiz-400); }
.oyun-kart .ikon { font-size: 2.4rem; }
.merge-izgara { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; max-width: 380px; margin: 0 auto; }
.merge-hucre { aspect-ratio: 1; border-radius: 18px; border: 2px solid var(--cizgi); background: var(--filiz-50); font-size: 2.6rem; display: grid; place-items: center; cursor: pointer; position: relative; transition: transform .12s, background .15s; user-select: none; }
.merge-hucre:hover { transform: scale(1.04); }
.merge-hucre.secili { border-color: var(--gunes); background: var(--toprak-acik); }
.merge-hucre small { position: absolute; bottom: 4px; right: 8px; font: 800 .72rem var(--font-govde); color: var(--soluk); }
.quiz-secenek { width: 100%; text-align: left; padding: .9rem 1.1rem; border: 2px solid var(--cizgi); border-radius: 14px; background: #fff; cursor: pointer; font: 600 .98rem var(--font-govde); margin-bottom: .55rem; color: var(--murekkep); }
.quiz-secenek:hover:not(:disabled) { border-color: var(--filiz-400); background: var(--filiz-50); }
.quiz-secenek.dogru { border-color: var(--filiz-600); background: var(--filiz-100); }
.quiz-secenek.yanlis { border-color: var(--kirmizi); background: var(--kirmizi-acik); }
.atik-sahne { text-align: center; }
.atik-gorsel { width: 170px; height: 150px; object-fit: contain; margin: 0 auto .5rem; filter: drop-shadow(0 10px 10px rgba(0, 0, 0, .15)); }
.kutular { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .7rem; margin-top: 1.2rem; }
.kutu-btn { border: 2px solid var(--cizgi); border-radius: 16px; background: #fff; padding: .6rem .3rem; cursor: pointer; font: 800 .85rem var(--font-baslik); color: var(--orman-900); }
.kutu-btn img { height: 90px; margin: 0 auto .3rem; object-fit: contain; }
.kutu-btn:hover { border-color: var(--filiz-400); transform: translateY(-2px); }
@media (max-width: 560px) { .kutular { grid-template-columns: repeat(2, 1fr); } }

.bildirim { position: fixed; bottom: 22px; left: 50%; transform: translate(-50%, 160%); visibility: hidden; background: var(--orman-900); color: #fff; padding: .85rem 1.3rem; border-radius: 14px; box-shadow: var(--golge-buyuk); z-index: 100; font-weight: 600; transition: transform .3s; max-width: calc(100vw - 32px); }
.bildirim.goster { transform: translate(-50%, 0); visibility: visible; }

/* Liderlik */
.podyum { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; align-items: end; max-width: 560px; margin: 0 auto 1.5rem; text-align: center; }
.podyum div { background: #fff; border-radius: 16px 16px 6px 6px; padding: 1rem .5rem; box-shadow: var(--golge); }
.podyum .p1 { padding-top: 1.8rem; background: linear-gradient(180deg, #FEF3C7, #fff); }
.podyum .madalya { font-size: 2rem; }

/* Grafik */
.grafik { position: relative; height: 290px; }
.grafik.kisa { height: 230px; }

/* Duyuru */
.duyuru { border-left: 4px solid var(--filiz-500); padding: .2rem 0 .2rem 1rem; margin-bottom: 1.1rem; }
.duyuru h4 { margin: 0 0 .2rem; font-size: 1rem; }
.not { background: #FFFBEB; border: 1px solid #FDE68A; border-radius: 12px; padding: .8rem 1rem; margin-bottom: .7rem; }

/* Yazdırma */
@media print {
  .yan-menu, .mobil-ust, .yazdirma-gizle, .ust-cubuk, .alt-bilgi { display: none !important; }
  .panel { display: block; }
  .icerik { padding: 0; }
  body { background: #fff; font-size: 12px; }
  .kart { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; }
  .grafik { height: 220px; }
}

/* Erişilebilirlik */
:focus-visible { outline: 3px solid rgba(34, 197, 94, .55); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

.yazdirma-baslik { display: none; }
@media print { .yazdirma-baslik { display: block !important; } }