/* =========================================================
   SANAL ORMAN — Kastamonu Üniversitesi
   ========================================================= */
:root {
  --gece: #0c2219;        /* koyu orman */
  --gece-2: #12301f;
  --yosun: #1f4a32;
  --yaprak: #3f8f5a;
  --filiz: #8fd18a;
  --kagit: #f5f0e4;       /* kâğıt / krem */
  --kagit-2: #ebe3d1;
  --murekkep: #17251d;
  --gri: #5d6b62;
  --amber: #e9a23b;       /* kesilen / uyarı */
  --kor: #d9612e;
  --su: #4aa3c7;
  --govde: #6b4a2b;
  --cizgi: rgba(23, 37, 29, .12);
  --golge: 0 30px 60px -30px rgba(12, 34, 25, .45);
  --r: 22px;
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --max: 1200px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--sans); color: var(--murekkep); background: var(--kagit);
  font-size: var(--fs-lg); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.05; letter-spacing: -.02em; margin: 0; }
p { margin: 0; }
.kap { width: min(var(--max), 100% - 40px); margin-inline: auto; }
.etiket {
  display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--yaprak);
}
.etiket::before { content: ""; width: 22px; height: 2px; background: currentColor; border-radius: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; border-radius: 6px; }

/* ---------- Üst menü ---------- */
.ust {
  position: fixed; inset: 0 0 auto 0; z-index: 50; padding: 16px 0;
  transition: background .35s, padding .35s, box-shadow .35s;
}
.ust.dolu { background: rgba(12, 34, 25, .86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); padding: 10px 0; box-shadow: 0 10px 30px -20px #000; }
.ust .kap { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.logo { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--kagit); }
.logo-isaret { width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(150deg, var(--filiz), var(--yaprak)); display: grid; place-items: center; box-shadow: inset 0 -6px 12px rgba(0,0,0,.18); }
.logo-isaret svg { width: 22px; color: var(--gece); --govde: var(--gece); }
.logo b { display: block; font-family: var(--serif); font-size: var(--fs-lg); line-height: 1; letter-spacing: -.01em; }
.logo small { display: block; font-size: var(--fs-2xs); opacity: .7; letter-spacing: .06em; margin-top: 3px; }
.menu { display: flex; align-items: center; gap: 6px; }
.menu a { color: var(--kagit); text-decoration: none; font-weight: 600; font-size: var(--fs-base); padding: 9px 14px; border-radius: 999px; opacity: .85; transition: .2s; }
.menu a:hover { opacity: 1; background: rgba(255,255,255,.08); }
.menu a.aktif { opacity: 1; background: rgba(255,255,255,.12); }
.buton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 0; cursor: pointer;
  font: 700 var(--fs-base)/1 var(--sans); padding: 15px 22px; border-radius: 999px; text-decoration: none;
  background: var(--amber); color: var(--gece); transition: transform .2s, box-shadow .2s, background .2s;
  box-shadow: 0 10px 24px -12px rgba(233, 162, 59, .8);
}
.buton:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -14px rgba(233, 162, 59, .9); }
.buton.hayalet { background: transparent; color: var(--kagit); box-shadow: inset 0 0 0 1.5px rgba(245,240,228,.35); }
.buton.hayalet:hover { box-shadow: inset 0 0 0 1.5px var(--kagit); }
.buton.koyu { background: var(--gece); color: var(--kagit); box-shadow: none; }
.buton svg { width: 18px; height: 18px; }
.menu .buton { padding: 11px 18px; opacity: 1; color: var(--gece); }
.menu .buton:hover { background: #f3b553; }
@media (max-width: 760px) {
  .menu a:not(.buton) { display: none; }
  .logo small { display: none; }
}

/* ---------- HERO ---------- */
.hero {
  position: relative; min-height: 100svh; color: var(--kagit); overflow: hidden; isolation: isolate;
  background:
    radial-gradient(1200px 600px at 75% 10%, rgba(143, 209, 138, .18), transparent 60%),
    radial-gradient(800px 500px at 10% 30%, rgba(233, 162, 59, .10), transparent 60%),
    linear-gradient(180deg, #0a1d15 0%, var(--gece) 45%, var(--gece-2) 100%);
  display: flex; flex-direction: column; justify-content: center; padding: 120px 0 0;
}
.yildiz { position: absolute; inset: 0; z-index: -2; opacity: .55;
  background-image: radial-gradient(1.5px 1.5px at 20% 30%, #fff8 50%, transparent 51%),
  radial-gradient(1px 1px at 70% 20%, #fff7 50%, transparent 51%), radial-gradient(1px 1px at 40% 10%, #fff6 50%, transparent 51%),
  radial-gradient(1.5px 1.5px at 85% 40%, #fff5 50%, transparent 51%), radial-gradient(1px 1px at 55% 35%, #fff5 50%, transparent 51%),
  radial-gradient(1px 1px at 10% 15%, #fff6 50%, transparent 51%), radial-gradient(1px 1px at 92% 12%, #fff7 50%, transparent 51%); }
.hero-ic { display: grid; grid-template-columns: 1.15fr .85fr; gap: 40px; align-items: end; position: relative; z-index: 2; }
.hero h1 { font-size: var(--fs-4xl); font-weight: 500; }
.hero h1 em { font-style: italic; color: var(--filiz); font-weight: 400; }
.hero .alt { font-size: var(--fs-lg); max-width: 560px; margin-top: 24px; color: rgba(245, 240, 228, .78); }
.hero .eylem { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.hero .etiket { color: var(--filiz); margin-bottom: 22px; }
.sayac-kart {
  background: linear-gradient(160deg, rgba(255,255,255,.10), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.12); border-radius: 28px; padding: 28px 30px 26px; backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px); box-shadow: 0 40px 80px -40px #000;
}
.sayac-kart .ust-satir { font-size: var(--fs-sm); letter-spacing: .1em; text-transform: uppercase; opacity: .7; font-weight: 700; }
.sayac-kart .dev { font-family: var(--serif); font-size: var(--fs-4xl); line-height: .9; font-weight: 500; color: var(--filiz); margin: 12px 0 4px; font-variant-numeric: tabular-nums; letter-spacing: -.04em; }
.sayac-kart .dev-alt { font-size: var(--fs-lg); font-weight: 600; }
.sayac-kart .ufak { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 22px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.12); }
.sayac-kart .ufak b { display: block; font-family: var(--serif); font-size: var(--fs-2xl); font-weight: 500; font-variant-numeric: tabular-nums; }
.sayac-kart .ufak span { font-size: var(--fs-sm); opacity: .7; }

/* Peyzaj */
.peyzaj { position: relative; height: clamp(180px, 26vw, 330px); margin-top: 40px; z-index: 1; }
.peyzaj > svg { position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; }
.sallan { transform-box: fill-box; transform-origin: 50% 100%; animation: sallan 6s ease-in-out infinite; }
@keyframes sallan { 0%,100% { transform: rotate(-1.4deg); } 50% { transform: rotate(1.4deg); } }
.yukari-ok { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 3; color: var(--kagit); opacity: .7; animation: zipla 2s infinite; }
@keyframes zipla { 0%,100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 8px); } }

/* ---------- Bölümler ---------- */
.bolum { padding: clamp(80px, 11vw, 140px) 0; position: relative; }
.bolum-bas { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: end; margin-bottom: 56px; }
.bolum-bas h2 { font-size: var(--fs-4xl); font-weight: 500; margin-top: 16px; }
.bolum-bas h2 em { font-style: italic; color: var(--yaprak); }
.bolum-bas p { color: var(--gri); font-size: var(--fs-lg); max-width: 520px; }

/* Etki şeridi */
.serit { background: var(--gece-2); color: var(--kagit); padding: 0; }
.serit-ic { display: grid; grid-template-columns: repeat(5, 1fr); }
.serit-ic > div { padding: 34px 26px; border-left: 1px solid rgba(255,255,255,.08); }
.serit-ic > div:first-child { border-left: 0; }
.serit b { display: block; font-family: var(--serif); font-size: var(--fs-3xl); font-weight: 500; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.serit b small { font-size: .5em; opacity: .7; margin-left: 4px; font-family: var(--sans); font-weight: 600; }
.serit-ic > div > span { font-size: var(--fs-sm); opacity: .72; }
.serit .ik { width: 34px; height: 34px; margin-bottom: 16px; color: var(--filiz); }
.serit .su .ik { color: var(--su); } .serit .co2 .ik { color: #c9d6cd; } .serit .atik .ik { color: var(--amber); } .serit .toner .ik { color: #b9a6e6; }
@media (max-width: 960px) { .serit-ic { grid-template-columns: repeat(2, 1fr); } .serit-ic > div { border-left: 0; border-top: 1px solid rgba(255,255,255,.08); } .serit-ic > div:first-child { grid-column: 1 / -1; border-top: 0; } }

/* Orman haritası */
.orman-kart { background: #fff; border-radius: 32px; box-shadow: var(--golge); padding: clamp(18px, 3vw, 36px); border: 1px solid var(--cizgi); }
.orman-ust { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.yil-sec { display: flex; flex-wrap: wrap; gap: 8px; }
.yil-sec button {
  font: 700 var(--fs-sm) var(--sans); border: 1.5px solid var(--cizgi); background: var(--kagit); color: var(--murekkep);
  padding: 9px 14px 9px 12px; border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: .2s;
}
.yil-sec button i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.yil-sec button[aria-pressed="true"] { background: var(--gece); color: var(--kagit); border-color: var(--gece); }
.yil-sec button:hover { border-color: var(--gece); }
.orman-not { font-size: var(--fs-sm); color: var(--gri); }
.orman-not b { color: var(--murekkep); }
.orman-alan { background: linear-gradient(180deg, #f3f7ef, #e7efe0); border-radius: 20px; padding: clamp(10px, 2vw, 22px); position: relative; overflow: hidden; }
#orman-svg { width: 100%; height: auto; }
#orman-svg use { transition: opacity .4s, transform .4s; }
#orman-svg use.soluk { opacity: .12; }
.orman-alt { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-top: 22px; }
.yil-kart { border-radius: 18px; padding: 18px; background: var(--kagit); border: 1px solid var(--cizgi); position: relative; overflow: hidden; cursor: pointer; transition: transform .25s, box-shadow .25s; text-align: left; font: inherit; color: inherit; }
.yil-kart:hover { transform: translateY(-3px); box-shadow: 0 16px 30px -20px rgba(0,0,0,.4); }
.yil-kart::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--c); }
.yil-kart .y { font-weight: 800; font-size: var(--fs-sm); letter-spacing: .08em; color: var(--gri); }
.yil-kart .y small { font-weight: 600; letter-spacing: 0; text-transform: none; margin-left: 6px; color: var(--amber); }
.yil-kart .a { font-family: var(--serif); font-size: var(--fs-3xl); font-weight: 500; line-height: 1.1; margin: 4px 0; }
.yil-kart .a small { font-family: var(--sans); font-size: var(--fs-sm); font-weight: 600; color: var(--gri); margin-left: 4px; }
.yil-kart .d { font-size: var(--fs-sm); color: var(--gri); line-height: 1.5; }
@media (max-width: 1000px) { .orman-alt { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .orman-alt { grid-template-columns: 1fr 1fr; } }

/* Grafik */
.grafik { position: relative; display: grid; grid-template-columns: repeat(var(--n, 4), 1fr); gap: clamp(10px, 3vw, 34px); align-items: end; height: 340px; padding: 0 4px; border-bottom: 2px solid var(--murekkep); }
.sutun { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 10px; }
.sutun .cubuk { width: 100%; max-width: 120px; border-radius: 14px 14px 0 0; background: linear-gradient(180deg, var(--c), color-mix(in srgb, var(--c) 70%, #000)); height: 0; transition: height 1.4s cubic-bezier(.2,.8,.2,1); position: relative; }
.sutun .deger { font-family: var(--serif); font-size: var(--fs-2xl); font-weight: 500; }
.grafik-etk { display: grid; grid-template-columns: repeat(var(--n, 4), 1fr); gap: clamp(10px, 3vw, 34px); padding-top: 12px; text-align: center; font-weight: 800; color: var(--gri); letter-spacing: .06em; }
.grafik-etk small { display: block; font-weight: 600; letter-spacing: 0; font-size: var(--fs-xs); color: var(--amber); }
.iki-kolon { display: grid; grid-template-columns: 1.2fr .8fr; gap: 40px; align-items: start; }
.tablo { width: 100%; border-collapse: collapse; font-size: var(--fs-base); font-variant-numeric: tabular-nums; }
.tablo th, .tablo td { padding: 12px 10px; text-align: right; border-bottom: 1px solid var(--cizgi); }
.tablo th:first-child, .tablo td:first-child { text-align: left; }
.tablo th { font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--gri); font-weight: 700; }
.tablo tfoot td { font-weight: 800; border-bottom: 0; border-top: 2px solid var(--murekkep); }
.tablo-sar { overflow-x: auto; }

/* Yöntem */
.yontem { background: var(--kagit-2); }
.formul-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.formul-grid.dort { grid-template-columns: repeat(4, 1fr); }
.formul { background: var(--kagit); border-radius: var(--r); padding: 26px; border: 1px solid var(--cizgi); }
.formul h3 { font-size: var(--fs-xl); margin: 14px 0 8px; font-weight: 500; }
.formul p { color: var(--gri); font-size: var(--fs-base); }
.formul code { display: block; margin-top: 16px; padding: 14px 16px; background: var(--gece); color: var(--filiz); border-radius: 12px; font: 600 var(--fs-sm)/1.5 ui-monospace, "SF Mono", Menlo, monospace; overflow-x: auto; }
.formul .no { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--gece); color: var(--filiz); font-family: var(--serif); font-size: var(--fs-lg); }

/* CTA */
.cta { background: var(--gece); color: var(--kagit); border-radius: 36px; padding: clamp(36px, 6vw, 80px); position: relative; overflow: hidden; display: grid; grid-template-columns: 1.3fr .7fr; gap: 30px; align-items: center; }
.cta h2 { font-size: var(--fs-4xl); font-weight: 500; }
.cta h2 em { color: var(--amber); font-style: italic; }
.cta p { margin-top: 16px; color: rgba(245,240,228,.75); font-size: var(--fs-lg); max-width: 560px; }
.cta .buton { margin-top: 28px; }
.cta-agac { display: flex; align-items: flex-end; justify-content: center; gap: 6px; height: 220px; color: var(--filiz); }
.cta-agac svg { width: 60px; height: 90px; }
.cta-agac .kesik { color: var(--amber); }

/* Alt bilgi */
.alt-bilgi { background: #081711; color: rgba(245,240,228,.7); padding: 48px 0; font-size: var(--fs-sm); }
.alt-bilgi .kap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px; align-items: center; }
.alt-bilgi a { color: var(--kagit); }

/* Görünme animasyonu */
.belir { opacity: 0; transform: translateY(26px); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.8,.2,1); }
.belir.gorundu { opacity: 1; transform: none; }

@media (max-width: 960px) {
  .hero-ic, .bolum-bas, .iki-kolon, .cta { grid-template-columns: 1fr; }
  .formul-grid { grid-template-columns: 1fr; }
  .cta-agac { height: 140px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .belir { opacity: 1; transform: none; }
}

/* =========================================================
   HESAPLAMA SAYFASI
   ========================================================= */
.hesap-hero { background: linear-gradient(180deg, #0a1d15, var(--gece)); color: var(--kagit); padding: 140px 0 120px; position: relative; overflow: hidden; }
.hesap-hero h1 { font-size: var(--fs-4xl); font-weight: 500; max-width: 900px; }
.hesap-hero h1 em { color: var(--amber); font-style: italic; font-weight: 400; }
.hesap-hero p { margin-top: 20px; max-width: 620px; color: rgba(245,240,228,.75); font-size: var(--fs-lg); }
.hesap-hero .etiket { color: var(--filiz); margin-bottom: 20px; }
.hesap-govde { margin-top: -70px; position: relative; z-index: 2; padding-bottom: 100px; }
.hesap-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 24px; align-items: start; }
.panel { background: #fff; border-radius: 28px; box-shadow: var(--golge); border: 1px solid var(--cizgi); padding: clamp(20px, 3vw, 34px); }
.panel h2 { font-size: var(--fs-2xl); font-weight: 600; display: flex; align-items: center; gap: 12px; }
.panel h2 .no { width: 30px; height: 30px; border-radius: 9px; background: var(--gece); color: var(--filiz); display: grid; place-items: center; font-size: var(--fs-base); font-family: var(--sans); font-weight: 800; }
.grup { padding: 22px 0; border-bottom: 1px dashed var(--cizgi); }
.grup:last-of-type { border-bottom: 0; }
.grup > .bas { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.grup > .bas h3 { font-family: var(--sans); font-size: var(--fs-sm); letter-spacing: .12em; text-transform: uppercase; font-weight: 800; color: var(--gri); }
.secim { display: flex; flex-wrap: wrap; gap: 8px; }
.secim label { cursor: pointer; }
.secim input { position: absolute; opacity: 0; pointer-events: none; }
.secim span { display: inline-flex; align-items: center; gap: 8px; padding: 10px 15px; border-radius: 999px; border: 1.5px solid var(--cizgi); font-weight: 700; font-size: var(--fs-sm); transition: .2s; background: var(--kagit); }
.secim input:checked + span { background: var(--gece); color: var(--kagit); border-color: var(--gece); }
.secim input:focus-visible + span { outline: 3px solid var(--amber); outline-offset: 2px; }
.secim span:hover { border-color: var(--gece); }
.tarih-satir { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 12px; margin-top: 12px; }
.alan label, .girdi > label { display: block; font-size: var(--fs-sm); font-weight: 700; margin-bottom: 6px; color: var(--murekkep); }
.alan input, .alan select {
  width: 100%; font: 600 var(--fs-base) var(--sans); color: var(--murekkep); padding: 13px 14px; border-radius: 14px;
  border: 1.5px solid var(--cizgi); background: var(--kagit); transition: border-color .2s, background .2s; min-width: 0;
}
.alan input:focus, .alan select:focus { border-color: var(--yaprak); background: #fff; outline: none; box-shadow: 0 0 0 4px rgba(63,143,90,.15); }
.gun-bilgi { margin-top: 10px; font-size: var(--fs-sm); color: var(--gri); }
.gun-bilgi b { color: var(--murekkep); }
.girdi { display: grid; grid-template-columns: 52px minmax(0,1fr); gap: 14px; align-items: start; padding: 16px 0; }
.girdi + .girdi { border-top: 1px solid var(--cizgi); }
.girdi .ik { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--bg); color: var(--fg); }
.girdi .ik svg { width: 26px; height: 26px; }
.girdi .ust-s { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.girdi .ust-s label { margin: 0; font-size: var(--fs-base); }
.girdi .ust-s .sonuc-mini { font-size: var(--fs-sm); font-weight: 700; color: var(--yaprak); white-space: nowrap; }
.girdi .ipucu { font-size: var(--fs-sm); color: var(--gri); margin: 2px 0 10px; }
.birlesik { display: flex; border: 1.5px solid var(--cizgi); border-radius: 14px; background: var(--kagit); overflow: hidden; transition: .2s; }
.birlesik:focus-within { border-color: var(--yaprak); background: #fff; box-shadow: 0 0 0 4px rgba(63,143,90,.15); }
.birlesik input { flex: 1; min-width: 0; width: 100%; border: 0; background: transparent; font: 700 var(--fs-lg) var(--sans); padding: 12px 14px; color: var(--murekkep); outline: none; font-variant-numeric: tabular-nums; }
.birlesik select, .birlesik .birim { border: 0; border-left: 1.5px solid var(--cizgi); background: transparent; font: 700 var(--fs-sm) var(--sans); padding: 0 14px; color: var(--gri); outline: none; display: flex; align-items: center; }
.birlesik select { cursor: pointer; padding-right: 10px; }
.ekstra-ac { background: none; border: 0; font: 700 var(--fs-sm) var(--sans); color: var(--yaprak); cursor: pointer; padding: 6px 0; display: inline-flex; gap: 6px; align-items: center; }
.ekstra { display: none; }
.ekstra.acik { display: block; }

/* Sonuç paneli */
.sonuc { position: sticky; top: 90px; background: var(--gece); color: var(--kagit); border: 0; overflow: hidden; }
.sonuc .etiket { color: var(--filiz); }
.sonuc-bas { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 12px; }
.sonuc .dev { font-family: var(--serif); font-size: var(--fs-4xl); line-height: .85; font-weight: 500; color: var(--amber); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.sonuc .dev-alt { font-size: var(--fs-lg); font-weight: 600; margin-top: 10px; }
.sonuc .dev-alt span { opacity: .7; font-weight: 500; }
.rozet { font-size: var(--fs-sm); font-weight: 800; padding: 8px 12px; border-radius: 999px; background: rgba(255,255,255,.08); white-space: nowrap; }
.rozet.iyi { background: rgba(143, 209, 138, .18); color: var(--filiz); }
.rozet.orta { background: rgba(233, 162, 59, .18); color: var(--amber); }
.rozet.kotu { background: rgba(217, 97, 46, .22); color: #ff9a6b; }
.sahne { margin: 24px 0 8px; border-radius: 20px; background: linear-gradient(180deg, #163a28 0%, #102c1e 100%); padding: 16px; position: relative; min-height: 180px; }
.sahne svg { width: 100%; height: auto; }
.sahne .olcek { position: absolute; top: 12px; right: 14px; font-size: var(--fs-xs); font-weight: 700; opacity: .7; background: rgba(0,0,0,.25); padding: 4px 9px; border-radius: 999px; }
.sahne use { color: var(--filiz); }
.sahne .kesildi { animation: devril .9s cubic-bezier(.5,0,.75,0) both; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes devril { 0% { transform: rotate(0); opacity: 1; } 80% { opacity: 1; } 100% { transform: rotate(88deg) translateY(-2px); opacity: 0; } }
.sahne .kutuk { animation: cik .4s ease both; }
@keyframes cik { from { opacity: 0; } to { opacity: 1; } }
.bos-sahne { display: grid; place-items: center; text-align: center; min-height: 150px; color: rgba(245,240,228,.65); font-size: var(--fs-base); }
.bos-sahne b { display: block; font-family: var(--serif); font-size: var(--fs-xl); color: var(--filiz); font-weight: 500; margin-bottom: 4px; }
.metrik { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.metrik > div { background: rgba(255,255,255,.06); border-radius: 16px; padding: 14px 16px; }
.metrik b { display: block; font-family: var(--serif); font-size: var(--fs-2xl); font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.metrik b small { font-family: var(--sans); font-size: var(--fs-sm); opacity: .7; margin-left: 3px; font-weight: 600; }
.metrik > div > span { font-size: var(--fs-sm); opacity: .72; }
.metrik em { display: block; font-style: normal; font-size: var(--fs-xs); color: var(--filiz); margin-top: 4px; font-weight: 600; }
.dagilim { margin-top: 22px; }
.dagilim h4 { font-size: var(--fs-xs); letter-spacing: .12em; text-transform: uppercase; opacity: .7; margin: 0 0 10px; }
.dagilim .bar { display: flex; height: 12px; border-radius: 999px; overflow: hidden; background: rgba(255,255,255,.08); }
.dagilim .bar i { display: block; height: 100%; transition: width .6s ease; }
.dagilim ul { list-style: none; padding: 0; margin: 12px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; font-size: var(--fs-sm); }
.dagilim li { display: flex; justify-content: space-between; gap: 8px; }
.dagilim li span::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 3px; background: var(--c); margin-right: 7px; }
.dagilim li b { font-variant-numeric: tabular-nums; }
.yorum { margin-top: 20px; padding: 16px 18px; border-radius: 16px; background: rgba(233, 162, 59, .1); border: 1px solid rgba(233, 162, 59, .25); font-size: var(--fs-base); line-height: 1.55; }
.yorum b { color: var(--amber); }
.sonuc-eylem { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.sonuc-eylem .buton { padding: 12px 16px; font-size: var(--fs-sm); }
.toast { position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 20px); background: var(--gece); color: var(--kagit); padding: 12px 18px; border-radius: 999px; font-weight: 700; font-size: var(--fs-sm); opacity: 0; transition: .3s; z-index: 99; box-shadow: 0 20px 40px -20px #000; }
.toast.goster { opacity: 1; transform: translate(-50%, 0); }

/* Öneriler */
.oneri-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.oneri { background: #fff; border-radius: var(--r); padding: 24px; border: 1px solid var(--cizgi); }
.oneri .ik { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: #e6f2e2; color: var(--yaprak); }
.oneri .ik svg { width: 22px; }
.oneri h3 { font-family: var(--sans); font-size: var(--fs-lg); font-weight: 800; margin: 16px 0 6px; letter-spacing: 0; }
.oneri p { font-size: var(--fs-sm); color: var(--gri); }
.oneri .kazan { margin-top: 12px; font-size: var(--fs-sm); font-weight: 800; color: var(--yaprak); }
.katsayi { margin-top: 40px; font-size: var(--fs-sm); color: var(--gri); }
.katsayi summary { cursor: pointer; font-weight: 800; color: var(--murekkep); }
.katsayi table { margin-top: 14px; }
@media (max-width: 1000px) { .hesap-grid { grid-template-columns: minmax(0, 1fr); } .sonuc { position: relative; top: 0; } .oneri-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .oneri-grid, .metrik { grid-template-columns: 1fr; } .tarih-satir { grid-template-columns: minmax(0,1fr); } .alan input[type=date] { -webkit-appearance: none; appearance: none; min-height: 50px; } .dagilim ul { grid-template-columns: 1fr; } }


/* =========================================================
   v2 — slider, canlı sayaç, animasyonlar
   ========================================================= */
.ilerleme { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60; background: linear-gradient(90deg, var(--filiz), var(--amber)); transform-origin: 0 50%; transform: scaleX(0); }

/* Düşen yapraklar */
.yapraklar { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 1; }
.yapraklar i { position: absolute; top: -40px; width: var(--b); height: var(--b); color: var(--c); opacity: 0; animation: yaprak linear infinite; }
.yapraklar svg { width: 100%; height: 100%; animation: don 3s ease-in-out infinite alternate; }
@keyframes yaprak {
  0% { transform: translate(0, -5vh); opacity: 0; }
  10% { opacity: .75; }
  90% { opacity: .55; }
  100% { transform: translate(var(--x), 105vh); opacity: 0; }
}
@keyframes don { from { transform: rotate(-40deg) rotateY(0); } to { transform: rotate(50deg) rotateY(160deg); } }

/* Hero üst bant */
.hero { padding-top: 104px; justify-content: flex-start; }
.ust-bant { display: flex; justify-content: space-between; align-items: center; gap: 12px; position: relative; z-index: 3; margin-bottom: clamp(26px, 5vh, 54px); }
.kurum-rozet { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 12px; border-radius: 999px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); font-size: var(--fs-sm); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.kurum-rozet .nokta { width: 8px; height: 8px; border-radius: 50%; background: var(--filiz); box-shadow: 0 0 0 0 rgba(143,209,138,.7); animation: nabiz 2s infinite; }
@keyframes nabiz { 0% { box-shadow: 0 0 0 0 rgba(143,209,138,.6); } 100% { box-shadow: 0 0 0 12px rgba(143,209,138,0); } }
.yil-aralik { font-family: var(--serif); font-size: var(--fs-lg); opacity: .65; letter-spacing: .02em; }

/* Slaytlar */
.slaytlar { display: grid; position: relative; z-index: 2; }
.slayt { grid-area: 1 / 1; display: grid; grid-template-columns: 1.15fr .85fr; gap: 40px; align-items: center; visibility: hidden; opacity: 0; transition: opacity .6s ease, visibility 0s .6s; }
.slayt.aktif { visibility: visible; opacity: 1; transition: opacity .6s ease; }
.slayt-metin > * { transform: translateY(24px); opacity: 0; transition: transform .8s cubic-bezier(.2,.8,.2,1), opacity .8s; }
.slayt.aktif .slayt-metin > * { transform: none; opacity: 1; }
.slayt.aktif .slayt-metin > *:nth-child(2) { transition-delay: .08s; }
.slayt.aktif .slayt-metin > *:nth-child(3) { transition-delay: .16s; }
.slayt.aktif .slayt-metin > *:nth-child(4) { transition-delay: .24s; }
.slayt .sayac-kart { transform: translateY(30px) scale(.97); opacity: 0; transition: transform .9s cubic-bezier(.2,.8,.2,1) .15s, opacity .8s .15s; }
.slayt.aktif .sayac-kart { transform: none; opacity: 1; }
.hero h1 em.amber { color: var(--amber); }
.sayac-kart .dev.kucuk { font-size: var(--fs-4xl); }
.sayac-kart .dev.mavi { color: #8ccde6; }

/* Mini büyüme grafiği */
.mini-buyume { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; align-items: end; height: 120px; margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.12); }
.mb-sutun { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 5px; }
.mb-sutun b { font-size: var(--fs-2xs); font-weight: 800; opacity: .8; font-variant-numeric: tabular-nums; }
.mb-sutun i { width: 100%; border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, var(--filiz), #3f8f5a); height: 0; }
.slayt.aktif .mb-sutun i { animation: yuksel 1s cubic-bezier(.2,.8,.2,1) var(--d) forwards; }
@keyframes yuksel { to { height: var(--h); } }
.mb-sutun span { font-size: var(--fs-2xs); opacity: .6; font-weight: 700; }

/* Kâğıt kulesi */
.kule { display: grid; grid-template-columns: 110px 1fr; gap: 16px; align-items: end; margin-top: 18px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.12); }
.kule p { font-size: var(--fs-base); opacity: .85; }
.kule b { color: var(--filiz); }
.kule-gorsel { position: relative; height: 96px; }
.kule-gorsel .dag { position: absolute; bottom: 0; right: 0; width: 100px; color: #3d6a52; }
.kagit-kule { position: absolute; bottom: 0; left: 8px; width: 16px; height: 0; z-index: 2; border-radius: 2px;
  background: repeating-linear-gradient(0deg, #f5f0e4 0 3px, #d8cfb8 3px 4px); box-shadow: 0 0 12px rgba(245,240,228,.35); }
.slayt.aktif .kagit-kule { animation: kule 2.2s cubic-bezier(.2,.8,.2,1) .5s forwards; }
@keyframes kule { to { height: 93%; } }

/* Hesap önizleme */
.hesap-onizleme .onz-satir { display: flex; justify-content: space-between; padding: 11px 0; border-bottom: 1px dashed rgba(255,255,255,.14); font-size: var(--fs-base); }
.hesap-onizleme .onz-satir b { font-variant-numeric: tabular-nums; }
.onz-sonuc { display: flex; align-items: baseline; gap: 10px; margin-top: 12px; }
.onz-sonuc span { font-size: var(--fs-2xl); opacity: .5; }
.onz-sonuc b { font-family: var(--serif); font-size: var(--fs-4xl); font-weight: 500; color: var(--amber); line-height: 1; }
.onz-agac { display: flex; align-items: flex-end; gap: 4px; height: 60px; color: var(--filiz); margin-top: 6px; }
.onz-agac svg { width: 36px; height: 54px; }
.slayt.aktif .dusuyor { color: var(--amber); transform-box: fill-box; transform-origin: 50% 100%; animation: devril2 3s ease-in 1s infinite; }
@keyframes devril2 { 0%, 30% { transform: rotate(0); opacity: 1; } 60% { transform: rotate(85deg); opacity: 1; } 75%, 100% { transform: rotate(85deg); opacity: 0; } }

/* Slayt kontrol */
.slayt-kontrol { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: clamp(28px, 5vh, 48px); position: relative; z-index: 3; }
.sekmeler { display: flex; gap: 6px; flex-wrap: wrap; }
.sekmeler button { position: relative; overflow: hidden; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); color: var(--kagit); font: 700 var(--fs-sm) var(--sans); padding: 12px 18px 14px; border-radius: 14px; cursor: pointer; text-align: left; min-width: 120px; opacity: .65; transition: opacity .3s, background .3s; }
.sekmeler button span { display: block; font-size: var(--fs-2xs); opacity: .6; letter-spacing: .1em; margin-bottom: 2px; }
.sekmeler button[aria-selected="true"] { opacity: 1; background: rgba(255,255,255,.1); }
.sekmeler button i { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--filiz); transform: scaleX(0); transform-origin: 0 50%; }
.sekmeler button.doluyor i { animation: dolum 7s linear forwards; }
.hero.durdu .sekmeler button.doluyor i { animation-play-state: paused; }
@keyframes dolum { to { transform: scaleX(1); } }
.oklar { display: flex; gap: 8px; }
.oklar button { width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255,255,255,.2); background: transparent; color: var(--kagit); cursor: pointer; display: grid; place-items: center; transition: .2s; }
.oklar button:hover { background: var(--kagit); color: var(--gece); }
.oklar svg { width: 20px; }
.peyzaj { margin-top: -40px; }
.peyzaj .katman { will-change: transform; }
.peyzaj .ay { animation: parla 6s ease-in-out infinite; }
@keyframes parla { 50% { opacity: .75; } }
@keyframes uc { 0% { transform: translate(-60px, 90px); } 50% { transform: translate(720px, 50px); } 100% { transform: translate(1520px, 80px); } }
.yukari-ok { display: none; }

/* Kayan bant */
@keyframes kay { to { transform: translateX(-50%); } }

/* Canlı sayaç */
.canli { background: var(--gece); color: var(--kagit); border-bottom: 1px solid rgba(255,255,255,.06); }
.canli-ic { display: grid; grid-template-columns: auto 1.4fr 1fr 1fr; gap: 24px; align-items: center; padding: 22px 0; }
.canli-rozet { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-xs); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #ff8f6b; background: rgba(217,97,46,.14); padding: 8px 12px; border-radius: 999px; white-space: nowrap; }
.canli-rozet i { width: 8px; height: 8px; border-radius: 50%; background: #ff8f6b; animation: yanip 1.2s infinite; }
@keyframes yanip { 50% { opacity: .2; } }
.canli p { display: flex; flex-direction: column; }
.canli .ac { font-size: var(--fs-xs); opacity: .65; }
.canli b { font-family: var(--serif); font-weight: 500; font-size: var(--fs-2xl); font-variant-numeric: tabular-nums; letter-spacing: -.01em; color: var(--filiz); }
@media (max-width: 860px) { .canli-ic { grid-template-columns: 1fr 1fr; } .canli-rozet { grid-column: 1 / -1; justify-self: start; } .canli p:first-of-type { grid-column: 1 / -1; } }

/* Orman: büyüt */
.oynat { padding: 11px 18px; font-size: var(--fs-sm); }
.oynat.calisiyor { background: var(--filiz); }
.oynat.calisiyor svg { animation: yanip 1s infinite; }
.orman-sayac { position: absolute; top: 14px; left: 14px; z-index: 2; background: rgba(12,34,25,.88); color: var(--kagit); border-radius: 16px; padding: 10px 16px; backdrop-filter: blur(6px); display: flex; flex-direction: column; box-shadow: 0 10px 30px -12px rgba(0,0,0,.5); }
.orman-sayac span { font-size: var(--fs-xs); font-weight: 700; opacity: .75; }
.orman-sayac b { font-family: var(--serif); font-size: var(--fs-2xl); font-weight: 500; line-height: 1.05; color: var(--filiz); font-variant-numeric: tabular-nums; }
.orman-sayac small { font-size: var(--fs-xs); opacity: .7; margin-top: -2px; }
.orman-alan { padding-top: 90px; }
#orman-svg use { transform-box: fill-box; transform-origin: 50% 100%; }
#orman-svg use.gizli { opacity: 0; transform: scale(.2); }
#orman-svg use:hover { transform: scale(1.6); }
@keyframes filiz { from { opacity: 0; transform: scale(0); } 70% { transform: scale(1.15); } to { opacity: 1; transform: scale(1); } }
.yil-kart.secili { box-shadow: 0 0 0 2px var(--c), 0 16px 30px -20px rgba(0,0,0,.4); transform: translateY(-3px); }
.yil-kart .a { font-size: var(--fs-2xl); }
.yil-kart .d b { color: var(--murekkep); }

/* Grafik v2 */
.grafik-kap { position: relative; }
.grafik { height: 360px; }
.sutun .cubuk { max-width: 72px; }
.kum-cizgi { position: absolute; inset: 0 0 0 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.kum-cizgi path { fill: none; stroke: var(--yaprak); stroke-width: 2.5; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; stroke-linecap: round; stroke-linejoin: round; }
.grafik.ciz .kum-cizgi path { animation: ciz 2s ease .6s forwards; }
@keyframes ciz { to { stroke-dashoffset: 0; } }
.kum-noktalar { position: absolute; inset: 0; pointer-events: none; }
.kum-noktalar span { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: #fff; border: 3px solid var(--yaprak); transform: scale(0); }
.grafik.ciz .kum-noktalar span { animation: pop .4s cubic-bezier(.3,1.6,.5,1) var(--d) forwards; }
@keyframes pop { to { transform: scale(1); } }
.kum-noktalar em { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); font-style: normal; font-size: var(--fs-xs); font-weight: 800; color: var(--yaprak); background: var(--kagit); padding: 1px 6px; border-radius: 6px; white-space: nowrap; }
.lejant { display: flex; gap: 20px; margin-top: 16px; font-size: var(--fs-sm); color: var(--gri); font-weight: 700; }
.lejant span::before { content: ""; display: inline-block; vertical-align: middle; margin-right: 8px; }
.l-cubuk::before { width: 12px; height: 12px; border-radius: 3px; background: var(--yaprak); }
.l-cizgi::before { width: 22px; height: 3px; border-radius: 2px; background: var(--yaprak); box-shadow: 0 0 0 0; }
.tablo-not { margin-top: 14px; font-size: var(--fs-xs); color: var(--gri); line-height: 1.5; }
.tablo .tn { font-size: var(--fs-2xs); color: var(--amber); font-weight: 700; }

/* Ne demek */
.karsilastir { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.kars { background: #fff; border-radius: var(--r); padding: 26px; border: 1px solid var(--cizgi); position: relative; overflow: hidden; transition: transform .3s, box-shadow .3s; }
.kars::after { content: ""; position: absolute; right: -40px; top: -40px; width: 120px; height: 120px; border-radius: 50%; background: var(--c); opacity: .08; transition: transform .5s; }
.kars:hover { transform: translateY(-6px); box-shadow: var(--golge); }
.kars:hover::after { transform: scale(2.4); }
.kars-ik { width: 56px; height: 40px; color: var(--c); }
.kars-ik svg { width: 100%; height: 100%; }
.kars > b { display: block; font-family: var(--serif); font-size: var(--fs-3xl); font-weight: 500; line-height: 1; margin-top: 18px; color: var(--c); font-variant-numeric: tabular-nums; }
.kars > b small { font-size: var(--fs-lg); font-family: var(--sans); margin-left: 4px; font-weight: 700; }
.kars h3 { font-family: var(--sans); font-size: var(--fs-base); font-weight: 800; letter-spacing: 0; margin: 8px 0 6px; }
.kars p { font-size: var(--fs-sm); color: var(--gri); }
@media (max-width: 960px) { .karsilastir, .formul-grid.dort { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .karsilastir, .formul-grid.dort { grid-template-columns: 1fr; } }

/* Akış */
.akis { display: grid; grid-template-columns: 1fr 60px 1fr 60px 1fr 60px 1fr; align-items: center; margin-bottom: 40px; background: var(--kagit); border-radius: 26px; padding: 26px; border: 1px solid var(--cizgi); }
.akis-adim { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.akis-ik { width: 64px; height: 64px; border-radius: 20px; background: #fff; display: grid; place-items: center; font-size: var(--fs-2xl); box-shadow: 0 10px 20px -12px rgba(0,0,0,.3); margin-bottom: 8px; }
.akis.gorundu .akis-adim .akis-ik { animation: hop .6s cubic-bezier(.3,1.6,.5,1) both; }
.akis.gorundu .akis-adim:nth-child(3) .akis-ik { animation-delay: .5s; }
.akis.gorundu .akis-adim:nth-child(5) .akis-ik { animation-delay: 1s; }
.akis.gorundu .akis-adim:nth-child(7) .akis-ik { animation-delay: 1.5s; }
@keyframes hop { from { transform: scale(.3); opacity: 0; } to { transform: none; opacity: 1; } }
.akis-adim.yesil .akis-ik { background: var(--gece); }
.akis-adim b { font-size: var(--fs-base); }
.akis-adim span { font-size: var(--fs-sm); color: var(--gri); }
.akis-ok { height: 2px; background: repeating-linear-gradient(90deg, var(--yaprak) 0 6px, transparent 6px 12px); background-size: 24px 2px; animation: akis 1s linear infinite; position: relative; }
.akis-ok::after { content: ""; position: absolute; right: -2px; top: -5px; border: 6px solid transparent; border-left-color: var(--yaprak); border-right: 0; }
@keyframes akis { to { background-position: 24px 0; } }
@media (max-width: 860px) { .akis { grid-template-columns: 1fr; gap: 6px; } .akis-ok { width: 2px; height: 26px; margin: 0 auto; background: repeating-linear-gradient(180deg, var(--yaprak) 0 6px, transparent 6px 12px); } .akis-ok::after { display: none; } }

/* Yöntem v2 */
.f-buyuk { display: block; font-family: var(--serif); font-size: var(--fs-3xl); font-weight: 500; color: var(--yaprak); line-height: 1; margin-top: 18px; }
.f-buyuk.mavi { color: var(--su); } .f-buyuk.gri { color: var(--gri); } .f-buyuk.amber { color: #c2852a; }
.formul-grid.dort .formul h3 { font-family: var(--sans); font-size: var(--fs-base); font-weight: 800; letter-spacing: 0; margin: 6px 0 10px; }
.formul { transition: transform .3s, box-shadow .3s; }
.formul:hover { transform: translateY(-4px); box-shadow: var(--golge); }
.ornek-hesap { margin-top: 22px; background: var(--gece); color: var(--kagit); border-radius: 20px; padding: 22px 26px; }
.ornek-hesap .etiket { color: var(--filiz); }
.ornek-hesap p { margin-top: 8px; font-size: var(--fs-base); line-height: 1.8; }
.ornek-hesap b { color: var(--filiz); font-weight: 800; }
.cta { isolation: isolate; }
.cta > div { position: relative; z-index: 2; }

@media (max-width: 960px) {
  .slayt { grid-template-columns: 1fr; gap: 24px; }
  .sekmeler button { min-width: 0; flex: 1; padding: 10px 12px 12px; font-size: var(--fs-sm); }
  .oklar { display: none; }
  .ust-bant .yil-aralik { display: none; }
}
@media (max-width: 560px) {
  .kurum-rozet { font-size: var(--fs-2xs); }
  .sekmeler { width: 100%; }
  .sekmeler button { font-size: var(--fs-xs); padding: 9px 8px 11px; }
  .sayac-kart { padding: 22px; }
  .orman-sayac b { font-size: var(--fs-2xl); }
  .orman-alan { padding-top: 80px; }
}
@media (prefers-reduced-motion: reduce) {
  .slayt-metin > *, .slayt .sayac-kart { opacity: 1; transform: none; }
  .mb-sutun i { height: var(--h); }
  .kagit-kule { height: 93%; }
  .yapraklar { display: none; }
}

.hesap-hero { isolation: isolate; }
.hesap-hero .kap { position: relative; z-index: 2; }
.hesap-adim { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.hesap-adim span { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 8px; border-radius: 999px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); font-size: var(--fs-sm); font-weight: 700; }
.hesap-adim b { width: 26px; height: 26px; border-radius: 50%; background: var(--filiz); color: var(--gece); display: grid; place-items: center; font-size: var(--fs-sm); }
.girdi .ik { transition: transform .3s; }
.girdi:focus-within .ik { transform: scale(1.08) rotate(-4deg); }
.sonuc .dev { transition: color .3s; }
.sonuc.titre .dev { animation: titre .45s; }
@keyframes titre { 30% { transform: scale(1.06); } 60% { transform: scale(.98); } }

/* Yığılmış büyüme grafiği */
.sutun .cubuk { display: flex; flex-direction: column; background: none; overflow: hidden; border-radius: 12px 12px 0 0; transition: height 1.3s cubic-bezier(.2,.8,.2,1); max-width: 84px; }
.sutun .cubuk .yeni { background: linear-gradient(180deg, var(--c), color-mix(in srgb, var(--c) 75%, #000)); display: flex; align-items: flex-start; justify-content: center; min-height: 26px; }
.sutun .cubuk .yeni span { font-size: var(--fs-xs); font-weight: 800; color: #fff; padding-top: 6px; text-shadow: 0 1px 2px rgba(0,0,0,.3); white-space: nowrap; }
.sutun .cubuk .eski { background: repeating-linear-gradient(135deg, #cfdcc9 0 6px, #c3d3bc 6px 12px); }
.l-eski::before { width: 12px; height: 12px; border-radius: 3px; background: #c9d8c2; }
.menu .buton { white-space: nowrap; }
@media (max-width: 560px) { .menu .buton { font-size: var(--fs-sm); padding: 10px 14px; } .logo b { font-size: var(--fs-lg); } .logo-isaret { width: 34px; height: 34px; } }

/* İsteğe bağlı alanlar */
.opsiyonel { margin-top: 8px; border: 1.5px dashed rgba(63,143,90,.35); border-radius: 20px; padding: 18px 18px 6px; background: linear-gradient(180deg, #f7faf4, #fff); }
.ops-bas h3 { font-family: var(--sans); font-size: var(--fs-base); font-weight: 800; letter-spacing: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ops-bas p { font-size: var(--fs-sm); color: var(--gri); margin-top: 6px; line-height: 1.55; }
.ops-bas p b { color: var(--yaprak); }
.rozet-ops { font-size: var(--fs-2xs); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; background: #e6f2e2; color: var(--yaprak); padding: 4px 9px; border-radius: 999px; }
.girdi label em { font-style: normal; font-size: var(--fs-2xs); font-weight: 700; margin-left: 6px; padding: 2px 8px; border-radius: 999px; vertical-align: 2px; }
.girdi label em.ops { background: #eef1ec; color: var(--gri); }
.girdi label em.temel { background: #fbecd0; color: #a06b14; }
.opsiyonel .birlesik input::placeholder { font-weight: 500; font-size: var(--fs-sm); color: #9aa59d; }
.opsiyonel .ekstra-ac { margin-bottom: 8px; }
.kapsam { margin-top: 18px; padding: 12px 16px; border-radius: 14px; background: rgba(143,209,138,.1); border: 1px solid rgba(143,209,138,.25); font-size: var(--fs-sm); line-height: 1.5; color: rgba(245,240,228,.88); }

/* =========================================================
   Eşitlik: 1 adet A4 = 600 ml su + 34 g CO₂ + 2,4 g atık
   ========================================================= */
.esitlik { background: #fff; border: 1px solid var(--cizgi); border-radius: 28px; padding: clamp(20px, 3vw, 34px); box-shadow: var(--golge); margin-bottom: 40px; position: relative; overflow: hidden; }
.esitlik::before { content: ""; position: absolute; inset: auto -80px -120px auto; width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(circle, rgba(143,209,138,.18), transparent 70%); pointer-events: none; }
.e-sekme { position: relative; display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--kagit); border: 1px solid var(--cizgi); margin-bottom: 22px; }
.e-sekme button { position: relative; z-index: 1; border: 0; background: none; font: 800 var(--fs-sm) var(--sans); padding: 9px 16px; border-radius: 999px; cursor: pointer; color: var(--gri); transition: color .3s; }
.e-sekme button[aria-selected="true"] { color: var(--kagit); }
.e-gosterge { position: absolute; top: 4px; bottom: 4px; left: 0; border-radius: 999px; background: var(--gece); transition: transform .45s cubic-bezier(.3,1.3,.5,1), width .45s; }
.e-satir { display: grid; grid-template-columns: 1fr 44px 1fr 44px 1fr 44px 1fr; align-items: center; }
.e-kalem { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; opacity: 0; transform: translateY(18px) scale(.8); }
.esitlik.oynat .e-kalem { animation: e-gir .7s cubic-bezier(.3,1.5,.5,1) var(--g) forwards; }
@keyframes e-gir { to { opacity: 1; transform: none; } }
.e-ik { position: relative; width: clamp(76px, 8vw, 104px); aspect-ratio: 1; border-radius: 26px; display: grid; place-items: center; margin-bottom: 10px; background: var(--bg, #f3ecdc); box-shadow: inset 0 -6px 14px rgba(0,0,0,.05), 0 14px 26px -18px rgba(0,0,0,.4); transition: transform .3s; }
.e-kalem:hover .e-ik { transform: translateY(-4px) rotate(-3deg); }
.e-ik svg { width: 74%; height: 74%; overflow: visible; }
.e-sol { --bg: #f5f0e4; } .e-su { --bg: #e1f0f6; } .e-co2 { --bg: #eceeed; } .e-atik { --bg: #fbecd0; }
.e-deger { font-family: var(--serif); font-size: var(--fs-3xl); font-weight: 500; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.e-su .e-deger { color: #2c7fa3; } .e-co2 .e-deger { color: #5d6b62; } .e-atik .e-deger { color: #b0751b; } .e-sol .e-deger { color: var(--yaprak); }
.e-etk { font-size: var(--fs-sm); font-weight: 700; color: var(--gri); }
.e-kalem.degisti .e-deger { animation: e-sayi .5s cubic-bezier(.3,1.6,.5,1); }
@keyframes e-sayi { 0% { transform: translateY(10px) scale(.7); opacity: 0; } 100% { transform: none; opacity: 1; } }
.e-op { font-family: var(--serif); font-size: var(--fs-3xl); color: var(--yaprak); text-align: center; opacity: 0; transform: scale(0) rotate(-90deg); margin-bottom: 40px; }
.esitlik.oynat .e-op { animation: e-op .5s cubic-bezier(.3,1.8,.5,1) var(--g) forwards; }
@keyframes e-op { to { opacity: 1; transform: none; } }
.e-not { margin-top: 20px; font-size: var(--fs-sm); color: var(--gri); text-align: center; }
.e-not b { color: var(--yaprak); }

/* Sol ikon geçişi */
.e-sol .e-ik { display: block; }
.e-sol-ik { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transform: scale(.5) rotate(-10deg); transition: opacity .4s, transform .5s cubic-bezier(.3,1.5,.5,1); }
.e-sol-ik.aktif { opacity: 1; transform: none; }
.esitlik.agac-modu .e-sol .e-ik { --bg: #e6f2e2; }

/* İkon animasyonları */
.ik-kagit .sayfa { animation: e-suzul 3.4s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes e-suzul { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-4px) rotate(2deg); } }
.ik-kagit .satir path { stroke-dasharray: 24; stroke-dashoffset: 24; }
.esitlik.oynat .ik-kagit .satir path { animation: e-yaz 3.6s ease-in-out infinite; }
.ik-kagit .satir path:nth-child(2) { animation-delay: .25s !important; }
.ik-kagit .satir path:nth-child(3) { animation-delay: .5s !important; }
.ik-kagit .satir path:nth-child(4) { animation-delay: .75s !important; }
@keyframes e-yaz { 0% { stroke-dashoffset: 24; } 35%, 80% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -24; } }
.ik-yigin rect { opacity: 0; transform: translateY(-14px); }
.e-sol-ik.aktif .ik-yigin rect { animation: e-yigin .4s cubic-bezier(.3,1.5,.5,1) calc(var(--i) * .09s) forwards; }
@keyframes e-yigin { to { opacity: 1; transform: none; } }
.ik-agac .tac { transform-box: fill-box; transform-origin: 50% 100%; transform: scale(.2); }
.e-sol-ik.aktif .ik-agac .tac { animation: e-buyu .8s cubic-bezier(.3,1.5,.5,1) forwards, e-sallan 4s ease-in-out .8s infinite; }
@keyframes e-buyu { to { transform: scale(1); } }
@keyframes e-sallan { 0%,100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
.ik-su .dalga { transform: translateY(26px); }
.esitlik.oynat .ik-su .dalga { animation: e-doldur 1.4s ease .8s forwards, e-dalga 2.4s linear infinite; }
@keyframes e-doldur { from { transform: translate(0, 26px); } to { transform: translate(-12px, 0); } }
@keyframes e-dalga { from { translate: 0 0; } to { translate: -24px 0; } }
.ik-su .kabarcik { animation: e-kabar 2.6s ease-in infinite; }
.ik-su .kabarcik.k2 { animation-delay: 1.2s; }
@keyframes e-kabar { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: .9; } 100% { transform: translateY(-22px); opacity: 0; } }
.ik-co2 .b { transform-box: fill-box; transform-origin: center; animation: e-duman 3.2s ease-out infinite; opacity: 0; }
.ik-co2 .b2 { animation-delay: .8s; } .ik-co2 .b3 { animation-delay: 1.6s; } .ik-co2 .b4 { animation-delay: 2.4s; }
@keyframes e-duman { 0% { transform: translate(0, 6px) scale(.4); opacity: 0; } 25% { opacity: .95; } 100% { transform: translate(4px, -22px) scale(1.4); opacity: 0; } }
.ik-co2 .co2-yazi { animation: e-nefes 3.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes e-nefes { 0%,100% { opacity: .55; } 50% { opacity: 1; } }
.ik-atik .kapak { transform-box: fill-box; transform-origin: 0% 100%; animation: e-kapak 3s ease-in-out infinite; }
@keyframes e-kapak { 0%, 15%, 70%, 100% { transform: rotate(0); } 25%, 55% { transform: rotate(-28deg); } }
.ik-atik .parca { animation: e-dus 3s ease-in infinite; }
@keyframes e-dus { 0%, 20% { transform: translateY(-6px); opacity: 0; } 30% { opacity: 1; } 55% { transform: translateY(18px); opacity: 1; } 62%, 100% { transform: translateY(22px); opacity: 0; } }

/* Koyu, kompakt sürüm (hesaplayıcı hero) */
.esitlik.koyu { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); box-shadow: none; color: var(--kagit); backdrop-filter: blur(6px); }
.esitlik.koyu .e-etk { color: rgba(245,240,228,.72); }
.esitlik.koyu .e-op { color: var(--filiz); }
.esitlik.koyu .e-su .e-deger { color: #8ccde6; } .esitlik.koyu .e-co2 .e-deger { color: #c9d6cd; } .esitlik.koyu .e-atik .e-deger { color: var(--amber); } .esitlik.koyu .e-sol .e-deger { color: var(--filiz); }
.esitlik.kompakt { padding: 18px 22px; margin: 30px 0 0; max-width: 760px; }
.esitlik.kompakt .e-ik { width: 66px; border-radius: 20px; margin-bottom: 8px; }
.esitlik.kompakt .e-deger { font-size: var(--fs-2xl); }
.esitlik.kompakt .e-etk { font-size: var(--fs-xs); }
.esitlik.kompakt .e-op { font-size: var(--fs-2xl); margin-bottom: 34px; }
.esitlik.kompakt .e-satir { grid-template-columns: 1fr 30px 1fr 30px 1fr 30px 1fr; }

@media (max-width: 700px) {
  .e-satir, .esitlik.kompakt .e-satir { grid-template-columns: 1fr 24px 1fr; row-gap: 14px; }
  .e-op { font-size: var(--fs-2xl); margin-bottom: 30px; }
  .e-satir > .e-op:nth-child(4) { grid-column: 1 / -1; margin: -6px 0 -6px; }
  .e-ik { width: 78px; }
  .e-sekme { display: flex; width: 100%; } .e-sekme button { flex: 1; padding: 9px 6px; }
}
@media (prefers-reduced-motion: reduce) { .e-kalem, .e-op { opacity: 1; transform: none; } .ik-su .dalga { transform: none; } .ik-agac .tac { transform: none; } .ik-yigin rect { opacity: 1; transform: none; } }

/* Kastamonu ölçü kartları */
.kars p strong { color: var(--murekkep); }
.kars-bar { margin-top: 16px; height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--c) 14%, #fff); overflow: hidden; position: relative; }
.kars-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--c); transition: width 1.8s cubic-bezier(.2,.8,.2,1); }
.kars-bar::after { content: ""; position: absolute; right: 0; top: -3px; bottom: -3px; width: 2px; background: var(--c); opacity: .5; }
.kars-ik .koltuk { stroke-dasharray: 10; stroke-dashoffset: 10; }
.kars.gorundu .kars-ik .koltuk { animation: e-yaz2 1.2s ease .4s forwards; }
@keyframes e-yaz2 { to { stroke-dashoffset: 0; } }
.kars.gorundu .kars-ik svg { animation: kars-hop .7s cubic-bezier(.3,1.6,.5,1) .2s both; }
@keyframes kars-hop { from { transform: scale(.4) translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }
.kaynak-not { margin-top: 18px; font-size: var(--fs-xs); color: var(--gri); }

/* =========================================================
   v3 — BÜTÜNLÜK: ortak ritim, ızgara ve kart sistemi
   Tüm bölümler aynı boşluk ölçeğini kullanır.
   ========================================================= */
:root {
  --bosluk-bolum: clamp(48px, 6vw, 80px);   /* bölüm üst/alt */
  --bosluk-bas: clamp(20px, 2.6vw, 32px);       /* başlık → içerik */
  --gap: 20px;                                /* tüm ızgaralar */
  --r-buyuk: 28px; --r: 20px; --r-kucuk: 14px;
  --kart-pad: clamp(20px, 2.4vw, 28px);
  --zemin-beyaz: #fbf9f3;
}
body { font-size: var(--fs-base); }
.kap { width: min(var(--max), 100% - 48px); }
@media (max-width: 560px) { .kap { width: calc(100% - 32px); } }

/* Bölüm ritmi */
.bolum { padding: var(--bosluk-bolum) 0; }
.bolum.zemin-beyaz { background: var(--zemin-beyaz); border-block: 1px solid var(--cizgi); }
.bolum.yontem { background: var(--kagit-2); }
.bolum.cta-bolum { padding-top: var(--bosluk-bolum); }
.bolum.oneri-bolum { padding-top: var(--bosluk-bolum); }

/* Tek tip bölüm başlığı */
.bolum-bas { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gap) 48px; align-items: end; margin-bottom: var(--bosluk-bas); }
.bolum-bas .etiket { margin-bottom: 14px; }
.bolum-bas h2 { font-size: var(--fs-4xl); margin-top: 0; line-height: 1.04; }
.bolum-bas p { font-size: var(--fs-lg); line-height: 1.65; max-width: 46ch; justify-self: end; padding-bottom: 6px; }
@media (max-width: 960px) { .bolum-bas { grid-template-columns: 1fr; gap: 16px; } .bolum-bas p { justify-self: start; } }

/* Tek tip kart */
.kart, .orman-kart, .kars, .formul, .oneri, .yil-kart, .akis, .esitlik { border-radius: var(--r); }
.kart { background: #fff; border: 1px solid var(--cizgi); border-radius: var(--r-buyuk); padding: var(--kart-pad); box-shadow: 0 1px 0 rgba(0,0,0,.02), 0 20px 40px -32px rgba(12,34,25,.35); }
.orman-kart, .esitlik { border-radius: var(--r-buyuk); padding: var(--kart-pad); }
.kars, .formul, .oneri { padding: var(--kart-pad); }

/* Tek tip ızgara aralıkları */
.karsilastir, .formul-grid, .oneri-grid, .orman-alt, .hesap-grid, .iki-kolon, .metrik { gap: var(--gap); }
.iki-kolon { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
@media (max-width: 960px) { .iki-kolon { grid-template-columns: 1fr; } }

/* Yöntem bölümü blokları arası eşit */
.yontem .esitlik, .yontem .akis { margin-bottom: var(--gap); }
.ornek-hesap { margin-top: var(--gap); border-radius: var(--r); }
.akis { padding: var(--kart-pad); background: #fff; }

/* Orman kartı */
.orman-ust { margin-bottom: var(--gap); }
.orman-alt { margin-top: var(--gap); }
.orman-alan { border-radius: var(--r); }
.yil-kart { padding: 16px 18px; }

/* Grafik ve tablo kartları */
.grafik-kap.kart { display: flex; flex-direction: column; }
.grafik-kap .grafik { height: auto; flex: 1; min-height: 300px; }
.grafik-kap .lejant { margin-top: 14px; }
.tablo-sar.kart { padding: 8px var(--kart-pad) var(--kart-pad); }
.tablo { font-size: var(--fs-sm); }
.tablo th, .tablo td { padding: 12px 8px; white-space: nowrap; }
.tablo td small.tn { display: block; margin-top: 2px; }
.tablo-not { margin-top: 16px; white-space: normal; }

/* Kastamonu kartları */
.kars > b { font-size: var(--fs-3xl); }
.kaynak-not { margin-top: var(--gap); }

/* Şerit ve canlı bant hizası */
.canli-ic { padding: 20px 0; }
.serit-ic > div { padding: 30px 24px; }

/* CTA */
.cta { border-radius: var(--r-buyuk); gap: 40px; }
.cta h2 { margin-top: 14px; }

/* Alt bilgi */
.alt-bilgi { padding: 40px 0; }

/* ----- Hesaplayıcı sayfası ----- */
.hesap-hero { padding: 132px 0 120px; }
.hesap-hero h1 { font-size: var(--fs-4xl); }
.hesap-govde { padding-bottom: 0; }
.hesap-grid { align-items: start; }
.panel { border-radius: var(--r-buyuk); padding: var(--kart-pad); }
.panel h2 { font-size: var(--fs-xl); }
.panel .panel-alt-bas { margin-top: 28px; }
.grup { padding: 20px 0; }
.tarih-satir { margin-top: 14px; gap: 12px; }
.opsiyonel { border-radius: var(--r); margin-top: 4px; }
.esitlik.kompakt { border-radius: var(--r); }
.katsayi { margin-top: var(--gap); background: #fff; border: 1px solid var(--cizgi); border-radius: var(--r); padding: 18px var(--kart-pad); }
.katsayi summary { list-style: none; display: flex; align-items: center; justify-content: space-between; }
.katsayi summary::after { content: "+"; font-size: var(--fs-xl); color: var(--yaprak); transition: transform .3s; }
.katsayi[open] summary::after { transform: rotate(45deg); }
.katsayi .tablo td { white-space: normal; }
.yontem .formul, .yontem .akis { background: #fff; }
.formul { display: flex; flex-direction: column; }
.formul code { margin-top: auto; }
.formul p { margin-bottom: 16px; }
.esitlik, .orman-kart { box-shadow: 0 1px 0 rgba(0,0,0,.02), 0 20px 40px -32px rgba(12,34,25,.35); }
.cta { padding: clamp(32px, 5vw, 64px); }
.cta-agac { height: 180px; }
.grafik-etk small { white-space: nowrap; font-size: var(--fs-2xs); }
@media (max-width: 960px) { .iki-kolon { grid-template-columns: minmax(0, 1fr); } }
.tablo-sar { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.tahmin-not { display: flex; gap: 10px; align-items: flex-start; background: #f3f7ef; border: 1px solid rgba(63,143,90,.2); border-radius: var(--r-kucuk); padding: 12px 14px; color: var(--murekkep); }
.canli-rozet.mini { font-size: var(--fs-2xs); padding: 4px 8px; flex: none; color: var(--yaprak); background: #e1efdc; }
.canli-rozet.mini i { width: 6px; height: 6px; background: var(--yaprak); }

.mini-buyume { grid-template-columns: repeat(var(--n, 6), 1fr); }
@media (min-width: 1001px) { .orman-alt { grid-template-columns: repeat(var(--n, 6), minmax(0, 1fr)); } }

.grafik, .grafik-etk { grid-template-columns: repeat(var(--n, 6), minmax(0, 1fr)); gap: clamp(8px, 2vw, 24px); }
.grafik-etk small { white-space: normal; }
.sutun .cubuk .yeni.tahmin { background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.28) 0 5px, transparent 5px 10px), linear-gradient(180deg, var(--c), color-mix(in srgb, var(--c) 75%, #000)); outline: 2px dashed rgba(233,162,59,.9); outline-offset: -2px; }

/* =========================================================
   Alt bilgi (footer)
   ========================================================= */
.alt-bilgi { padding: 0; background: transparent; color: rgba(245,240,228,.72); font-size: var(--fs-base); margin-top: 0; }
.alt-bilgi .kap { display: block; }
.ab-orman { height: clamp(70px, 9vw, 100px); position: relative; margin-bottom: -1px; }
.ab-orman > svg:first-child { position: absolute; inset: 0; width: 100%; height: 100%; }
.ab-govde { background: linear-gradient(180deg, #0b1f16, #07150f); position: relative; overflow: hidden; }
.ab-govde::before { content: ""; position: absolute; width: 520px; height: 520px; right: -140px; top: -220px; border-radius: 50%; background: radial-gradient(circle, rgba(143,209,138,.12), transparent 65%); pointer-events: none; }
.alt-bilgi .ab-izgara { display: grid; grid-template-columns: 1.5fr 1fr 1.2fr 1.3fr; gap: 40px; padding: 56px 0 44px; }
.ab-marka .logo { color: var(--kagit); }
.ab-marka p { margin-top: 16px; max-width: 34ch; line-height: 1.6; }
.ab-sayac { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; padding: 8px 14px; border-radius: 999px; background: rgba(143,209,138,.1); border: 1px solid rgba(143,209,138,.22); font-size: var(--fs-sm); color: var(--kagit); }
.ab-sayac b { font-family: var(--serif); font-weight: 500; font-size: var(--fs-lg); color: var(--filiz); }
.ab-sayac .nokta { width: 8px; height: 8px; border-radius: 50%; background: var(--filiz); animation: nabiz 2s infinite; }
.ab-sosyal { display: flex; gap: 10px; margin-top: 22px; }
.ab-sosyal a { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; color: var(--kagit); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); transition: transform .25s, background .25s, color .25s; }
.ab-sosyal a:hover { transform: translateY(-3px); background: var(--filiz); color: var(--gece); }
.ab-sosyal svg { width: 19px; height: 19px; }
.alt-bilgi h4 { margin: 4px 0 16px; font-size: var(--fs-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--filiz); font-weight: 800; }
.alt-bilgi ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.alt-bilgi ul a { color: rgba(245,240,228,.78); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; transition: color .2s, transform .2s; }
.alt-bilgi ul a:hover { color: var(--kagit); transform: translateX(3px); }
.ab-ok svg { width: 12px; height: 12px; opacity: .5; }
.ab-kutu { display: flex; gap: 12px; align-items: flex-start; text-decoration: none; color: var(--kagit); padding: 12px 14px; border-radius: var(--r-kucuk); background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); margin-bottom: 10px; line-height: 1.45; font-size: var(--fs-sm); transition: background .2s, border-color .2s; }
.ab-kutu:hover { background: rgba(255,255,255,.08); border-color: rgba(143,209,138,.3); }
.ab-kutu small { display: block; font-size: var(--fs-2xs); letter-spacing: .1em; text-transform: uppercase; color: rgba(245,240,228,.55); font-weight: 700; margin-bottom: 2px; }
.ab-ik { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: rgba(143,209,138,.12); color: var(--filiz); }
.ab-ik svg { width: 17px; height: 17px; }
.alt-bilgi .ab-alt { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 20px 0 24px; border-top: 1px solid rgba(255,255,255,.08); font-size: var(--fs-sm); }
.ab-imza { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 10px; margin: 0; flex: 1; line-height: 1.9; }
.ab-telif, .ab-imza-not { color: rgba(245,240,228,.55); }
.ab-imza-ayrac { color: rgba(143,209,138,.35); margin: 0 4px; }
.alt-bilgi .ab-alt a { position: relative; display: inline-block; color: var(--filiz); font-weight: 600; text-decoration: none; border: 0; border-radius: 999px; padding: 3px 12px 3px 24px; background: rgba(143,209,138,.035); transition: color .25s, background-color .25s, box-shadow .25s; }
.alt-bilgi .ab-alt a::before { content: ""; position: absolute; left: 10px; top: 50%; width: 7px; height: 10px; border-radius: 9px 1px 9px 1px; background: currentColor; opacity: .5; transform: translateY(-50%) rotate(-30deg) scale(.75); transform-origin: bottom center; transition: transform .3s, opacity .3s; }
.alt-bilgi .ab-alt a:hover, .alt-bilgi .ab-alt a:focus-visible { color: #c7edb9; background: rgba(143,209,138,.1); box-shadow: inset 0 0 0 1px rgba(143,209,138,.15), 0 0 22px rgba(143,209,138,.06); }
.alt-bilgi .ab-alt a:hover::before, .alt-bilgi .ab-alt a:focus-visible::before { opacity: 1; transform: translateY(-50%) rotate(12deg) scale(1); }
.alt-bilgi .ab-alt a:focus-visible { outline: 2px solid var(--filiz); outline-offset: 3px; }
@media (max-width: 560px) { .ab-imza { gap: 6px; } .ab-imza-ayrac { display: none; } .ab-imza > span:last-child { flex-basis: 100%; } }
@media (prefers-reduced-motion: reduce) { .alt-bilgi .ab-alt a, .alt-bilgi .ab-alt a::before { transition: none; } }
.ab-yukari { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,.18); background: transparent; color: var(--kagit); cursor: pointer; display: grid; place-items: center; transition: .25s; }
.ab-yukari:hover { background: var(--amber); color: var(--gece); border-color: var(--amber); transform: translateY(-3px); }
.ab-yukari svg { width: 18px; }
@media (max-width: 960px) { .alt-bilgi .ab-izgara { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .alt-bilgi .ab-izgara { grid-template-columns: 1fr; gap: 30px; padding-top: 40px; } .alt-bilgi .ab-alt { flex-direction: column; align-items: flex-start; } }

/* Yıl sayısı arttıkça uyum */
@media (min-width: 1001px) { .orman-alt { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); } }
.grafik-kap.dar .sutun .deger { font-size: var(--fs-lg); }
.grafik-kap.dar .sutun .cubuk .yeni span { font-size: var(--fs-2xs); }
.grafik-kap.dar .grafik-etk { font-size: var(--fs-xs); letter-spacing: 0; }
.grafik-kap.cok-dar .sutun .cubuk .yeni span { display: none; }
.grafik-kap.cok-dar .sutun .deger { font-size: var(--fs-base); font-family: var(--sans); font-weight: 800; }

.ab-yurutucu { margin-left: auto; display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 999px; background: rgba(143,209,138,.1); border: 1px solid rgba(143,209,138,.22); color: var(--kagit); font-weight: 700; }
.ab-yurutucu small { font-size: var(--fs-2xs); letter-spacing: .1em; text-transform: uppercase; color: var(--filiz); font-weight: 800; }
@media (max-width: 560px) { .ab-yurutucu { margin-left: 0; flex-wrap: wrap; border-radius: var(--r-kucuk); } }

/* =========================================================
   Logo animasyonu + proje penceresi + belge şeridi grupları
   ========================================================= */
.logo-isaret { position: relative; overflow: hidden; cursor: pointer; transition: transform .3s cubic-bezier(.3,1.6,.5,1); isolation: isolate; }
.logo-isaret::before { content: ""; position: absolute; inset: -3px; border-radius: inherit; box-shadow: 0 0 0 0 rgba(143,209,138,.55); animation: logo-nabiz 2.8s ease-out infinite; z-index: -1; }
@keyframes logo-nabiz { 0% { box-shadow: 0 0 0 0 rgba(143,209,138,.5); } 70%, 100% { box-shadow: 0 0 0 12px rgba(143,209,138,0); } }
.logo-isaret svg { transform-origin: 50% 100%; animation: logo-sallan 4s ease-in-out infinite; }
@keyframes logo-sallan { 0%,100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
.logo-isaret img { position: absolute; inset: 12%; width: 76%; height: 76%; object-fit: contain; }
.logo-isaret.gorsel svg { display: none; }
.logo-isaret.gorsel { background: #fff; }
.logo-isaret.gorsel img { animation: logo-yuz 6s ease-in-out infinite; }
@keyframes logo-yuz { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-2px) rotate(3deg); } }
.logo-isaret .parilti { position: absolute; top: -50%; left: -80%; width: 50%; height: 200%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent); transform: rotate(25deg); animation: parilti 4.5s ease-in-out infinite; pointer-events: none; }
@keyframes parilti { 0%, 60% { left: -80%; } 85%, 100% { left: 140%; } }
.logo-isaret:hover { transform: scale(1.1) rotate(-6deg); }
.logo-isaret:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }

.ust-bant-sag { display: inline-flex; align-items: center; gap: 18px; }
.proje-rozet { display: inline-flex; align-items: center; gap: 12px; padding: 6px 16px 6px 6px; border-radius: 999px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16); color: var(--kagit); font: 700 var(--fs-sm) var(--sans); cursor: pointer; text-align: left; transition: background .25s, transform .25s, border-color .25s; }
.proje-rozet:hover { background: rgba(143,209,138,.16); border-color: rgba(143,209,138,.45); transform: translateY(-2px); }
.proje-rozet .logo-isaret { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(150deg, var(--filiz), var(--yaprak)); display: grid; place-items: center; }
.proje-rozet .logo-isaret svg { width: 20px; color: var(--gece); --govde: var(--gece); }
.proje-rozet small { display: block; font-size: var(--fs-2xs); letter-spacing: .1em; text-transform: uppercase; color: var(--filiz); font-weight: 800; }
@media (max-width: 960px) { .ust-bant-sag .yil-aralik { display: none; } }
@media (max-width: 560px) { .ust-bant { flex-wrap: wrap; } .proje-rozet { padding-right: 12px; font-size: var(--fs-sm); } }

/* Pencere */
html.pm-kilit { overflow: hidden; }
.pm-arka { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 20px; background: rgba(6,18,12,.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: 0; transition: opacity .3s; }
.pm-arka.acik { opacity: 1; }
.pm { position: relative; width: min(760px, 100%); max-height: calc(100vh - 40px); overflow: auto; background: var(--kagit); border-radius: var(--r-buyuk); box-shadow: 0 40px 100px -30px rgba(0,0,0,.6); transform: translateY(30px) scale(.96); transition: transform .45s cubic-bezier(.3,1.4,.5,1); outline: none; }
.pm-arka.acik .pm { transform: none; }
.pm-kapat { position: absolute; top: 16px; right: 16px; z-index: 2; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(255,255,255,.12); color: var(--kagit); cursor: pointer; display: grid; place-items: center; transition: background .2s, transform .2s; }
.pm-kapat:hover { background: var(--amber); color: var(--gece); transform: rotate(90deg); }
.pm-kapat svg { width: 18px; }
.pm-bas { display: flex; align-items: center; gap: 18px; padding: 30px 32px 28px; background: radial-gradient(500px 200px at 90% 0%, rgba(143,209,138,.22), transparent 70%), linear-gradient(160deg, #0a1d15, var(--gece-2)); color: var(--kagit); border-radius: var(--r-buyuk) var(--r-buyuk) 0 0; }
.pm-bas .etiket { color: var(--filiz); margin-bottom: 8px; }
.pm-bas h2 { font-size: var(--fs-3xl); font-weight: 500; }
.pm-logo { width: 76px; height: 76px; border-radius: 22px; flex: none; display: grid; place-items: center; background: linear-gradient(150deg, var(--filiz), var(--yaprak)); }
.pm-logo svg { width: 40px; color: var(--gece); --govde: var(--gece); }
.pm-arka.acik .pm-logo { animation: pm-logo .8s cubic-bezier(.3,1.6,.5,1) .1s both; }
@keyframes pm-logo { from { transform: scale(.3) rotate(-30deg); opacity: 0; } to { transform: none; opacity: 1; } }
.pm-govde { padding: 26px 32px 6px; }
.pm-giris { font-size: var(--fs-base); line-height: 1.65; }
.pm-sayilar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 20px 0; }
.pm-sayilar div { background: #fff; border: 1px solid var(--cizgi); border-radius: var(--r-kucuk); padding: 12px 14px; }
.pm-sayilar b { display: block; font-family: var(--serif); font-size: var(--fs-xl); font-weight: 500; color: var(--yaprak); line-height: 1.1; }
.pm-sayilar span { font-size: var(--fs-xs); color: var(--gri); }
.pm-izgara { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; }
.pm-izgara h3 { font-family: var(--sans); font-size: var(--fs-sm); letter-spacing: .1em; text-transform: uppercase; font-weight: 800; color: var(--yaprak); margin-bottom: 4px; }
.pm-izgara p { font-size: var(--fs-sm); color: var(--gri); line-height: 1.6; }
.pm-yurutucu { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 22px; padding: 16px 18px; border-radius: var(--r); background: #e6f2e2; border: 1px solid rgba(63,143,90,.25); }
.pm-yurutucu small { display: block; font-size: var(--fs-2xs); letter-spacing: .1em; text-transform: uppercase; color: var(--yaprak); font-weight: 800; }
.pm-yurutucu b { display: block; font-size: var(--fs-lg); }
.pm-yurutucu span { font-size: var(--fs-sm); color: var(--gri); }
.pm-iletisim { display: flex; flex-direction: column; gap: 4px; text-align: right; font-weight: 700; font-size: var(--fs-sm); }
.pm-iletisim a { color: var(--gece); text-decoration: none; }
.pm-iletisim a:hover { color: var(--yaprak); }
.pm-alt { display: flex; gap: 10px; flex-wrap: wrap; padding: 20px 32px 28px; }
.koyu-hayalet { color: var(--gece) !important; box-shadow: inset 0 0 0 1.5px rgba(12,34,25,.3) !important; }
.pm-arka.acik .pm-sayilar div, .pm-arka.acik .pm-izgara section { animation: e-gir .6s cubic-bezier(.3,1.4,.5,1) both; }
.pm-arka.acik .pm-sayilar div:nth-child(2) { animation-delay: .06s; } .pm-arka.acik .pm-sayilar div:nth-child(3) { animation-delay: .12s; } .pm-arka.acik .pm-sayilar div:nth-child(4) { animation-delay: .18s; }
.pm-arka.acik .pm-izgara section:nth-child(2) { animation-delay: .1s; } .pm-arka.acik .pm-izgara section:nth-child(3) { animation-delay: .2s; } .pm-arka.acik .pm-izgara section:nth-child(4) { animation-delay: .3s; }
@media (max-width: 600px) { .pm-sayilar { grid-template-columns: 1fr 1fr; } .pm-izgara { grid-template-columns: 1fr; } .pm-bas, .pm-govde, .pm-alt { padding-left: 20px; padding-right: 20px; } .pm-iletisim { text-align: left; } .pm-logo { width: 60px; height: 60px; } }


/* Proje logosu */
.ust .logo-isaret.gorsel, .proje-rozet .logo-isaret.gorsel { background: #fff; border-radius: 50%; }
.ust .logo-isaret { width: 46px; height: 46px; }
.logo-isaret.gorsel img { inset: 6%; width: 88%; height: 88%; }
.ab-logo { position: relative; display: block; width: 230px; padding: 14px 18px; border: 0; border-radius: var(--r); background: #fff; cursor: pointer; overflow: hidden; box-shadow: 0 20px 40px -24px rgba(0,0,0,.7); animation: ab-logo-yuz 6s ease-in-out infinite; transition: transform .3s; }
.ab-logo img { width: 100%; height: auto; display: block; }
.ab-logo:hover { animation-play-state: paused; transform: translateY(-4px) scale(1.03); }
@keyframes ab-logo-yuz { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.ab-logo .parilti { position: absolute; top: -50%; left: -80%; width: 40%; height: 200%; background: linear-gradient(90deg, transparent, rgba(143,209,138,.35), transparent); transform: rotate(25deg); animation: parilti 5s ease-in-out infinite; pointer-events: none; }
.ab-logo-ipucu { position: absolute; left: 50%; bottom: 8px; transform: translate(-50%, 6px); font-size: var(--fs-2xs); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: var(--yaprak); padding: 4px 10px; border-radius: 999px; opacity: 0; transition: .25s; white-space: nowrap; }
.ab-logo:hover .ab-logo-ipucu, .ab-logo:focus-visible .ab-logo-ipucu { opacity: 1; transform: translate(-50%, 0); }
.pm-logo.gorsel { background: #fff; border-radius: 50%; }
.pm-arka[hidden] { display: none !important; }
.pm-yurutucu { margin: 18px 0 0; }

.hero { padding-top: clamp(120px, 16vh, 160px); }

/* Üst menü logo yazısı */
.ust .logo { gap: 14px; }
.ust .logo-isaret { width: 52px; height: 52px; }
.logo-yazi b { font-family: var(--serif); font-size: var(--fs-2xl); font-weight: 600; line-height: 1; letter-spacing: -.015em; font-variation-settings: "opsz" 144; }
.logo-yazi b em { font-style: italic; font-weight: 400; color: var(--filiz); }
.logo-yazi small { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .22em; text-transform: uppercase; opacity: .78; }
.logo-yazi small::before { content: ""; width: 16px; height: 1.5px; background: var(--filiz); border-radius: 2px; }
@media (max-width: 560px) { .logo-yazi b { font-size: var(--fs-xl); } .ust .logo-isaret { width: 44px; height: 44px; } .logo-yazi small { display: flex; font-size: var(--fs-2xs); letter-spacing: .16em; } }
.logo-yazi { white-space: nowrap; }
.ust.dolu .logo { gap: 14px; }
@media (max-width: 560px) {
  .logo-yazi b { font-size: var(--fs-lg); }
  .logo-yazi small { display: none; }
  .ust .logo { gap: 10px; }
  .ust .logo-isaret, .ust.dolu .logo-isaret { width: 40px; height: 40px; }
  .menu .buton { padding: 9px 12px; font-size: var(--fs-xs); }
}
.ust .logo-isaret { flex: none; }
.serit b { white-space: nowrap; font-size: var(--fs-3xl); }
.serit-ic > div { display: flex; flex-direction: column; min-width: 0; }

/* =========================================================
   v4 — tüm ekranlar için uyum
   ========================================================= */

.menu .buton .kisa { display: none; }
@media (max-width: 1100px) { .menu a:not(.buton) { display: none; } }
@media (max-width: 400px) {
  .menu .buton .uzun { display: none; } .menu .buton .kisa { display: inline; }
  .logo-yazi b { font-size: var(--fs-lg); }
}
@media (max-width: 760px) {
  :root { --bosluk-bolum: 40px; --bosluk-bas: 20px; --gap: 12px; }
  .hero { min-height: 0; padding-top: 100px; }
  .slayt-kontrol { margin-top: 24px; }
  .peyzaj { margin-top: 0; height: 120px; }
  .serit-ic > div { padding: 22px 18px; }
  .serit .ik { margin-bottom: 10px; width: 28px; height: 28px; }
  .canli-ic { gap: 14px; padding: 18px 0; }
  .cta { padding: 28px 22px; gap: 10px; }
  .cta-agac { height: 90px; }
  .cta-agac svg { width: 40px; height: 60px; }
  .orman-alan { padding: 76px 10px 10px; }
  .yil-kart { padding: 14px; }
  .yil-kart .a { font-size: var(--fs-2xl); }
  .kars > b { font-size: var(--fs-3xl); margin-top: 12px; }
  .grafik-kap .grafik { min-height: 240px; }
  .esitlik { padding: 18px; }
  .akis { padding: 18px; }
  .hesap-hero { padding: 112px 0 96px; }
  .hesap-hero h1 { font-size: var(--fs-3xl); }
}
@media (min-width: 480px) and (max-width: 960px) { .karsilastir { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .sekmeler button span { display: none; } }

/* Canlı bant v2 */
.canli-ic { grid-template-columns: auto 1.2fr 1.2fr 1fr; align-items: start; gap: 28px; }
.canli-rozet { margin-top: 4px; }
.cn { display: flex; flex-direction: column; min-width: 0; }
.cn .ac { font-size: var(--fs-xs); opacity: .65; }
.cn b { font-family: var(--serif); font-weight: 500; font-size: var(--fs-2xl); color: var(--filiz); font-variant-numeric: tabular-nums; line-height: 1.15; white-space: nowrap; }
.cn b em { font-style: normal; font-size: .55em; font-family: var(--sans); font-weight: 700; opacity: .8; }
.cn small { font-size: var(--fs-xs); opacity: .6; margin-top: 4px; }
.cn-bar { height: 5px; border-radius: 999px; background: rgba(255,255,255,.1); margin-top: 8px; overflow: hidden; max-width: 260px; }
.cn-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--yaprak), var(--filiz)); border-radius: inherit; transition: width 1s linear; }
@media (max-width: 860px) { .canli-ic { grid-template-columns: 1fr 1fr; } .canli-rozet { grid-column: 1 / -1; justify-self: start; } .cn:first-of-type { grid-column: 1 / -1; } }
@media (max-width: 480px) { .canli-ic { grid-template-columns: 1fr; } }
@media (max-width: 400px) {
  .girdi { grid-template-columns: 40px minmax(0,1fr); gap: 10px; }
  .girdi .ik { width: 40px; height: 40px; border-radius: 12px; }
  .girdi .ik svg { width: 20px; height: 20px; }
  .girdi .ust-s label { font-size: var(--fs-base); }
  .opsiyonel { padding: 14px 12px 4px; }
  .birlesik input { font-size: var(--fs-base); padding: 11px 10px; }
  .birlesik select, .birlesik .birim { padding: 0 10px; }
  .panel { padding: 18px 16px; }
}

/* Canvas orman */
.orman-alan { position: relative; }
#orman-cnv { display: block; margin: 0 auto; cursor: crosshair; }
.orman-ipucu { position: absolute; transform: translate(-50%, calc(-100% - 8px)); background: var(--gece); color: var(--kagit); font-size: var(--fs-xs); font-weight: 700; padding: 6px 10px; border-radius: 8px; pointer-events: none; opacity: 0; transition: opacity .15s; white-space: nowrap; z-index: 3; }
.orman-ipucu.acik { opacity: 1; }

@media (max-width: 600px) {
  .orman-alt { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; padding-bottom: 6px; margin-inline: -4px; padding-inline: 4px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
  .orman-alt .yil-kart { flex: 0 0 62%; scroll-snap-align: start; }
}
@media (max-width: 600px) {
  .orman-ust { flex-direction: column; align-items: stretch; }
  .yil-sec { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
  .yil-sec::-webkit-scrollbar { display: none; }
  .yil-sec button { flex: none; }
  .oynat { align-self: flex-start; }
}

/* Kompakt orman kartı */
.orman-kart.kompakt { padding: clamp(14px, 1.8vw, 20px); }
.orman-kart.kompakt .orman-ust { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; flex-wrap: nowrap; }
.orman-kart.kompakt .orman-sayac { position: static; flex: none; flex-direction: row; align-items: center; gap: 10px; padding: 8px 14px; border-radius: var(--r-kucuk); box-shadow: none; }
.orman-kart.kompakt .orman-sayac b { font-size: var(--fs-2xl); line-height: 1; }
.orman-kart.kompakt .orman-sayac span { display: flex; flex-direction: column; line-height: 1.2; }
.orman-kart.kompakt .orman-sayac small { font-size: var(--fs-xs); opacity: .85; margin: 0; }
.orman-kart.kompakt .orman-sayac em { font-style: normal; font-size: var(--fs-2xs); opacity: .6; white-space: nowrap; }
.orman-kart.kompakt .yil-sec { flex: 1; min-width: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 6px; }
.orman-kart.kompakt .yil-sec::-webkit-scrollbar { display: none; }
.orman-kart.kompakt .yil-sec button { flex: none; padding: 7px 11px; font-size: var(--fs-sm); gap: 6px; }
.orman-kart.kompakt .yil-sec button small { font-size: var(--fs-2xs); font-weight: 700; opacity: .6; }
.orman-kart.kompakt .yil-sec button[aria-pressed="true"] small { opacity: .8; }
.orman-kart.kompakt .oynat { flex: none; padding: 10px 16px; }
.orman-kart.kompakt .orman-alan { padding: 12px; }
@media (max-width: 760px) {
  .orman-kart.kompakt .orman-ust { flex-wrap: wrap; }
  .orman-kart.kompakt .yil-sec { order: 3; flex-basis: 100%; }
  .orman-kart.kompakt .oynat { margin-left: auto; }
  .orman-kart.kompakt .orman-alan { padding: 8px; }
}
@media (max-width: 760px) {
  .orman-kart.kompakt .orman-ust { flex-direction: row; align-items: center; justify-content: space-between; }
  .orman-kart.kompakt .oynat { align-self: center; }
  .orman-kart.kompakt .orman-sayac b { font-size: var(--fs-xl); }
}

/* Kastamonu ölçüsüyle: 8 kompakt kart */
.karsilastir { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.karsilastir .kars { padding: 18px 18px 16px; display: flex; flex-direction: column; }
.karsilastir .kars::after { width: 80px; height: 80px; right: -26px; top: -26px; }
.karsilastir .kars-ik { width: 42px; height: 28px; }
.karsilastir .kars > b { font-size: var(--fs-3xl); margin-top: 12px; white-space: nowrap; }
.karsilastir .kars > b small { font-size: var(--fs-sm); }
.karsilastir .kars > b .kucuk-on { font-size: .6em; opacity: .7; }
.karsilastir .kars h3 { font-size: var(--fs-sm); margin: 6px 0 4px; }
.karsilastir .kars p { font-size: var(--fs-sm); line-height: 1.5; }
.karsilastir .kars-bar { margin-top: auto; padding-top: 0; transform: translateY(6px); height: 6px; }
.karsilastir .kars p + .kars-bar { margin-top: 12px; }
@media (max-width: 1100px) { .karsilastir { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .karsilastir { grid-template-columns: minmax(0, 1fr); } .karsilastir .kars { padding: 16px; } }
@media (max-width: 560px) {
  .karsilastir { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .karsilastir .kars { padding: 14px 12px 12px; border-radius: var(--r-kucuk); }
  .karsilastir .kars-ik { width: 32px; height: 22px; }
  .karsilastir .kars > b { font-size: var(--fs-xl); margin-top: 8px; white-space: normal; line-height: 1.1; }
  .karsilastir .kars > b small { font-size: var(--fs-2xs); }
  .karsilastir .kars h3 { font-size: var(--fs-xs); }
  .karsilastir .kars p { font-size: var(--fs-2xs); line-height: 1.45; }
}
@media (max-width: 330px) { .karsilastir { grid-template-columns: minmax(0, 1fr); } }

a.ab-yurutucu { text-decoration: none; border-bottom: 1px solid rgba(143,209,138,.22) !important; transition: background .2s, transform .2s; }
a.ab-yurutucu:hover { background: rgba(143,209,138,.2); transform: translateY(-2px); }
a.ab-yurutucu .ab-ok svg { width: 12px; height: 12px; opacity: .7; }
.pm-yurutucu b a { color: inherit; text-decoration: none; }
.pm-yurutucu b a:hover { color: var(--yaprak); }

/* =========================================================
   Yöntem v2 — koyu, etkileşimli
   ========================================================= */
.bolum.yontem2 { position: relative; overflow: hidden; color: var(--kagit);
  background: radial-gradient(900px 500px at 85% 0%, rgba(143,209,138,.14), transparent 60%), radial-gradient(700px 500px at 0% 100%, rgba(233,162,59,.08), transparent 60%), linear-gradient(180deg, #0b1f16, var(--gece-2)); }
.ym-isik { position: absolute; inset: 0; pointer-events: none; opacity: .35;
  background-image: radial-gradient(1.2px 1.2px at 12% 20%, #fff8 50%, transparent 51%), radial-gradient(1px 1px at 70% 12%, #fff6 50%, transparent 51%), radial-gradient(1px 1px at 40% 60%, #fff5 50%, transparent 51%), radial-gradient(1.2px 1.2px at 88% 70%, #fff6 50%, transparent 51%); }
.yontem2 .kap { position: relative; }
.yontem2 .bolum-bas .etiket { color: var(--filiz); }
.yontem2 .bolum-bas h2 em { color: var(--filiz); }
.yontem2 .bolum-bas p { color: rgba(245,240,228,.75); }
.yontem2 .esitlik { box-shadow: 0 30px 60px -30px rgba(0,0,0,.6); color: var(--murekkep); }

/* Yolculuk */
.yolculuk { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); margin: var(--gap) 0 calc(var(--gap) * 2); padding: 28px 24px 24px; border-radius: var(--r-buyuk); background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); }
.yol-hat { position: absolute; left: calc(12.5% + 10px); right: calc(12.5% + 10px); top: 62px; height: 2px; background: repeating-linear-gradient(90deg, rgba(143,209,138,.55) 0 8px, transparent 8px 16px); }
.yol-kagit { position: absolute; top: -13px; left: 0; width: 26px; height: 26px; filter: drop-shadow(0 4px 8px rgba(0,0,0,.4)); animation: yol 6s cubic-bezier(.6,0,.4,1) infinite; }
.yol-kagit svg { width: 100%; height: 100%; }
@keyframes yol { 0% { left: 0; transform: rotate(0); opacity: 0; } 8% { opacity: 1; } 85% { left: calc(100% - 26px); transform: rotate(360deg) scale(1); opacity: 1; } 100% { left: calc(100% - 26px); transform: rotate(360deg) scale(.2); opacity: 0; } }
.yol-adim { position: relative; z-index: 1; text-align: center; display: flex; flex-direction: column; align-items: center; }
.yol-ik { position: relative; width: 68px; height: 68px; border-radius: 22px; display: grid; place-items: center; background: #163a28; border: 1px solid rgba(143,209,138,.3); color: var(--filiz); margin-bottom: 14px; box-shadow: 0 0 0 6px #0f281b; }
.yol-ik svg { width: 32px; height: 32px; }
.yol-ik b { position: absolute; top: -8px; right: -8px; width: 24px; height: 24px; border-radius: 50%; background: var(--amber); color: var(--gece); font-size: var(--fs-xs); display: grid; place-items: center; }
.yol-adim.son .yol-ik { background: var(--filiz); color: var(--gece); --govde: #6b4a2b; }
.yol-adim.son .yol-ik svg { width: 26px; height: 40px; animation: logo-sallan 3s ease-in-out infinite; transform-origin: 50% 100%; }
.yolculuk.gorundu .yol-ik { animation: hop .6s cubic-bezier(.3,1.6,.5,1) calc(var(--i) * .25s) both; }
.yol-adim h4 { margin: 0 0 4px; font-size: var(--fs-base); font-weight: 800; }
.yol-adim p { font-size: var(--fs-sm); color: rgba(245,240,228,.65); max-width: 22ch; }

/* Katsayı kartları */
.kts-bas { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.kts-bas h3 { font-size: var(--fs-2xl); font-weight: 500; }
.kts-bas span { font-size: var(--fs-sm); color: rgba(245,240,228,.6); }
.kts-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.kts { all: unset; box-sizing: border-box; display: block; height: 250px; perspective: 1000px; cursor: pointer; }
.kts:focus-visible { outline: 3px solid var(--amber); outline-offset: 4px; border-radius: var(--r); }
.kts-ic { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .7s cubic-bezier(.3,1.2,.4,1); }
.kts:hover .kts-ic, .kts.cevrik .kts-ic { transform: rotateY(180deg); }
@media (hover: none) { .kts:hover .kts-ic { transform: none; } .kts.cevrik .kts-ic { transform: rotateY(180deg); } }
.kts-on, .kts-arka { position: absolute; inset: 0; display: flex; flex-direction: column; border-radius: var(--r); padding: 20px; backface-visibility: hidden; -webkit-backface-visibility: hidden; border: 1px solid rgba(255,255,255,.1); }
.kts-on { background: linear-gradient(160deg, rgba(255,255,255,.08), rgba(255,255,255,.02)); }
.kts-arka { background: linear-gradient(160deg, color-mix(in srgb, var(--c) 22%, #0c2219), #0c2219); transform: rotateY(180deg); justify-content: space-between; }
.kts-gorsel { display: block; height: 80px; }
.kts-gorsel svg { height: 100%; width: auto; overflow: visible; }
.kts-on b { font-family: var(--serif); font-size: var(--fs-3xl); font-weight: 500; line-height: 1; color: var(--c); margin-top: auto; }
.kts-on em { font-style: normal; font-size: var(--fs-sm); font-weight: 700; margin-top: 6px; color: var(--kagit); }
.kts-cevir { position: absolute; top: 16px; right: 16px; font-style: normal; font-size: var(--fs-2xs); font-weight: 800; letter-spacing: .06em; color: rgba(245,240,228,.55); padding: 4px 8px; border-radius: 999px; border: 1px solid rgba(255,255,255,.12); }
.kts-arka p { font-size: var(--fs-sm); line-height: 1.6; color: rgba(245,240,228,.85); }
.kts-arka code { display: block; padding: 12px 14px; border-radius: 12px; background: rgba(0,0,0,.35); color: var(--c); font: 700 var(--fs-sm)/1.55 ui-monospace, "SF Mono", Menlo, monospace; }
/* katsayı mini animasyonları */
.kts-yigin rect { animation: kts-yigin 3.6s ease-in-out infinite; animation-delay: calc(var(--i) * .12s); transform-box: fill-box; }
@keyframes kts-yigin { 0%, 15% { opacity: 0; transform: translateY(-8px); } 30%, 80% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.kts-agac { animation: kts-agac 3.6s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes kts-agac { 0%, 55% { transform: translate(52px, 4px) scale(0); } 75%, 100% { transform: translate(52px, 4px) scale(.62); } }
.kts-dalga { animation: e-dalga 2.4s linear infinite, kts-dol 3.6s ease-in-out infinite; }
@keyframes kts-dol { 0% { transform: translateY(14px); } 60%, 100% { transform: translateY(-6px); } }
.kts-araba { animation: kts-sars .4s ease-in-out infinite alternate; }
@keyframes kts-sars { to { transform: translateY(-1px); } }
.kts-duman { animation: kts-duman 1.8s ease-out infinite; transform-box: fill-box; transform-origin: center; opacity: 0; }
.kts-duman.d2 { animation-delay: .6s; } .kts-duman.d3 { animation-delay: 1.2s; }
@keyframes kts-duman { 0% { transform: translate(0,0) scale(.4); opacity: .9; } 100% { transform: translate(-12px,-10px) scale(1.8); opacity: 0; } }
.kts-yol { animation: kts-yol .8s linear infinite; }
@keyframes kts-yol { to { stroke-dashoffset: 12; } }
.kts-kapak { transform-box: fill-box; transform-origin: 0 100%; animation: e-kapak 3s ease-in-out infinite; }
.kts-parca { animation: e-dus 3s ease-in infinite; }

/* Hesap fişi */
.fis { margin-top: calc(var(--gap) * 2); border-radius: var(--r-buyuk); background: var(--kagit); color: var(--murekkep); padding: clamp(20px, 3vw, 32px); position: relative; box-shadow: 0 30px 60px -30px rgba(0,0,0,.6); }
.fis::after { content: ""; position: absolute; left: 0; right: 0; bottom: -10px; height: 12px; background: radial-gradient(circle at 10px -2px, transparent 9px, var(--kagit) 10px) repeat-x; background-size: 20px 12px; }
.fis-bas { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; padding-bottom: 18px; border-bottom: 2px dashed var(--cizgi); }
.fis-bas h3 { font-size: var(--fs-2xl); font-weight: 500; margin-top: 8px; }
.fis-yillar { display: flex; flex-wrap: wrap; gap: 6px; }
.fis-yillar button { font: 800 var(--fs-sm) var(--sans); padding: 8px 12px; border-radius: 999px; border: 1.5px solid var(--cizgi); background: #fff; cursor: pointer; transition: .2s; color: var(--murekkep); }
.fis-yillar button[aria-pressed="true"] { background: var(--gece); color: var(--kagit); border-color: var(--gece); }
.fis-yillar button:hover { border-color: var(--gece); }
.fis-satirlar { display: grid; gap: 4px; padding-top: 14px; }
.fis-satir { display: grid; grid-template-columns: 34px minmax(0, 1fr) 30px auto; align-items: center; gap: 10px; padding: 12px 6px; border-bottom: 1px solid var(--cizgi); font-variant-numeric: tabular-nums; animation: fis-gir .5s cubic-bezier(.3,1.3,.5,1) calc(var(--i) * .18s) both; }
@keyframes fis-gir { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
.fs-no { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; background: var(--gece); color: var(--filiz); font-weight: 800; font-size: var(--fs-sm); }
.fs-sol { font-size: var(--fs-base); color: var(--gri); }
.fs-sol b { color: var(--murekkep); }
.fs-ok { color: var(--yaprak); font-weight: 800; text-align: center; }
.fs-sag { font-size: var(--fs-base); font-weight: 700; text-align: right; white-space: nowrap; }
.fs-sag b { font-family: var(--serif); font-size: var(--fs-2xl); font-weight: 500; }
.fis-satir.agac .fs-sag b { color: var(--yaprak); } .fis-satir.su .fs-sag b { color: #2c7fa3; } .fis-satir.co2 .fs-sag b { color: var(--gri); } .fis-satir.atik .fs-sag b { color: #b0751b; }
.fis-toplam { display: flex; gap: 14px; align-items: center; margin-top: 12px; padding: 14px 16px; border-radius: var(--r-kucuk); background: #e6f2e2; animation: fis-gir .5s ease calc(var(--i) * .18s) both; }
.fis-toplam span { font-size: var(--fs-2xs); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--yaprak); }
.fis-toplam p { font-size: var(--fs-base); }
.fis-toplam b { color: var(--yaprak); }

@media (max-width: 960px) {
  .kts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .yolculuk { grid-template-columns: repeat(2, 1fr); row-gap: 28px; }
  .yol-hat { display: none; }
}
@media (max-width: 560px) {
  .yolculuk { grid-template-columns: 1fr 1fr; padding: 20px 14px; gap: 18px 10px; }
  .yol-ik { width: 56px; height: 56px; border-radius: 18px; }
  .yol-adim h4 { font-size: var(--fs-sm); } .yol-adim p { font-size: var(--fs-xs); }
  .kts { height: 220px; }
  .kts-on, .kts-arka { padding: 14px; }
  .kts-gorsel { height: 60px; }
  .kts-on b { font-size: var(--fs-2xl); } .kts-on em { font-size: var(--fs-xs); }
  .kts-arka p { font-size: var(--fs-xs); } .kts-arka code { font-size: var(--fs-2xs); padding: 8px 10px; }
  .kts-cevir { top: 10px; right: 10px; font-size: var(--fs-2xs); }
  .fis-satir { grid-template-columns: 28px minmax(0, 1fr) auto; gap: 8px; }
  .fs-ok { display: none; }
  .fs-sol { font-size: var(--fs-sm); } .fs-sag b { font-size: var(--fs-xl); } .fs-sag { font-size: var(--fs-xs); }
}
@media (prefers-reduced-motion: reduce) { .kts-on, .kts-arka { transition: none; } }
.fis::after { display: none; }
.fis-satir { grid-template-columns: 34px auto minmax(20px, 1fr) auto; }
.fs-ok { color: transparent; border-bottom: 2px dotted rgba(23,37,29,.18); align-self: center; height: 0; margin: 0 6px; }
@media (max-width: 560px) { .fis-satir { grid-template-columns: 28px minmax(0,1fr) auto; } }
.formul-grid, .akis, .ornek-hesap { }

/* Sayfalar arası akıcı geçiş: menü yerinde kalır, içerik süzülür */
@view-transition { navigation: auto; }
.ust { view-transition-name: ust-menu; }
::view-transition-old(root) { animation: sayfa-cik .25s ease both; }
::view-transition-new(root) { animation: sayfa-gir .35s ease both; }
@keyframes sayfa-cik { to { opacity: 0; transform: translateY(-8px); } }
@keyframes sayfa-gir { from { opacity: 0; transform: translateY(12px); } }
main { animation: sayfa-gir .45s ease both; }
@media (prefers-reduced-motion: reduce) { body { animation: none; } ::view-transition-old(root), ::view-transition-new(root) { animation: none; } }
.menu .aktif-buton { box-shadow: 0 0 0 3px rgba(233,162,59,.35), 0 10px 24px -12px rgba(233,162,59,.8); }
.kirinti { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 22px; font-size: var(--fs-sm); font-weight: 700; color: rgba(245,240,228,.7); }
.kirinti a { display: inline-flex; align-items: center; gap: 6px; color: var(--filiz); text-decoration: none; padding: 6px 12px 6px 8px; border-radius: 999px; background: rgba(143,209,138,.1); border: 1px solid rgba(143,209,138,.25); transition: background .2s; }
.kirinti a:hover { background: rgba(143,209,138,.2); }
.kirinti svg { width: 15px; height: 15px; }
.kirinti b { color: var(--kagit); }
section[id] { scroll-margin-top: 72px; }

.logo-not { position: absolute; left: 50%; bottom: 12px; transform: translate(-50%, 8px); z-index: 2; background: rgba(12,34,25,.88); color: var(--kagit); font-size: var(--fs-xs); font-weight: 700; padding: 7px 14px; border-radius: 999px; opacity: 0; transition: opacity .6s, transform .6s; pointer-events: none; white-space: nowrap; max-width: calc(100% - 24px); overflow: hidden; text-overflow: ellipsis; }
.logo-not.acik { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 560px) { .logo-not { font-size: var(--fs-2xs); white-space: normal; text-align: center; width: max-content; } }

@media (max-width: 560px) { .logo-not { white-space: nowrap; font-size: var(--fs-2xs); bottom: 8px; } .logo-not .ln-uzun { display: none; } }

/* =========================================================
   Öneriler v2 — "Küçük adımlar, büyük orman"
   ========================================================= */
.oneri2 { position: relative; overflow: hidden; }
.oneri2::before { content: ""; position: absolute; width: 600px; height: 600px; right: -200px; top: -240px; border-radius: 50%; background: radial-gradient(circle, rgba(143,209,138,.22), transparent 65%); pointer-events: none; }
.oneri2 .kap { position: relative; }
.oneri-ozet { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); grid-template-areas: "m f" "b b"; gap: 14px 24px; align-items: center; padding: 22px 26px; margin-bottom: var(--gap); border-radius: var(--r-buyuk); background: linear-gradient(135deg, var(--gece), #18402b); color: var(--kagit); box-shadow: 0 24px 50px -30px rgba(12,34,25,.7); }
.oz-metin { grid-area: m; } .oz-metin .etiket { color: var(--filiz); }
.oz-metin p { margin-top: 8px; font-size: var(--fs-lg); line-height: 1.5; }
.oz-metin b { color: var(--filiz); font-family: var(--serif); font-weight: 500; font-size: 1.25em; }
.oz-bar { grid-area: b; height: 10px; border-radius: 999px; background: rgba(255,255,255,.1); overflow: hidden; }
.oz-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--yaprak), var(--filiz)); transition: width 1.2s cubic-bezier(.2,.8,.2,1); }
.oz-fidan { grid-area: f; display: flex; align-items: flex-end; justify-content: flex-end; gap: 2px; height: 64px; color: var(--filiz); }
.oz-fidan svg { width: 22px; height: 33px; transform-origin: 50% 100%; animation: fidan 2.8s cubic-bezier(.3,1.5,.5,1) calc(var(--k) * .12s) infinite; }
.oz-fidan svg:nth-child(3n) { width: 28px; height: 42px; } .oz-fidan svg:nth-child(4n) { color: #a9cf5e; }
.oz-fidan.bos svg { opacity: .35; animation-name: fidan-bos; }
@keyframes fidan { 0% { transform: scale(0); } 25%, 85% { transform: scale(1); } 100% { transform: scale(1) rotate(2deg); } }
@keyframes fidan-bos { 0%, 100% { transform: scale(.7); } 50% { transform: scale(.85); } }

.oneri-grid.v2 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.oneri2 .oneri { position: relative; display: flex; flex-direction: column; padding: 0; overflow: hidden; border-radius: var(--r); background: #fff; border: 1px solid var(--cizgi); transition: transform .35s cubic-bezier(.3,1.4,.5,1), box-shadow .35s; animation: e-gir .6s cubic-bezier(.3,1.4,.5,1) calc(var(--i) * .1s) both; }
.oneri2 .oneri:hover { transform: translateY(-6px); box-shadow: 0 26px 46px -28px rgba(12,34,25,.55); }
.o-sahne { position: relative; height: 128px; display: grid; place-items: center; background: radial-gradient(circle at 50% 120%, color-mix(in srgb, var(--c) 22%, #fff), color-mix(in srgb, var(--c) 6%, #fff) 70%); border-bottom: 1px solid var(--cizgi); }
.o-sahne .oi { width: 150px; height: 112px; overflow: visible; }
.o-no { position: absolute; top: 12px; left: 14px; font-family: var(--serif); font-size: var(--fs-xl); color: var(--c); opacity: .55; }
.o-govde { display: flex; flex-direction: column; flex: 1; padding: 16px 18px 18px; }
.o-etiket { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.o-etiket span { font-size: var(--fs-2xs); font-weight: 800; padding: 4px 9px; border-radius: 999px; background: color-mix(in srgb, var(--c) 12%, #fff); color: var(--c); }
.oneri2 .oneri h3 { font-family: var(--sans); font-size: var(--fs-lg); font-weight: 800; margin: 0 0 6px; letter-spacing: 0; }
.oneri2 .oneri p { font-size: var(--fs-sm); color: var(--gri); line-height: 1.55; }
.o-alt { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 16px; }
.o-halka { width: 56px; height: 56px; flex: none; }
.o-halka circle:nth-child(2) { stroke-dashoffset: var(--tam); transition: stroke-dashoffset 1.4s cubic-bezier(.2,.8,.2,1) .3s; }
.oneri2 .oneri:not(.yeni) .o-halka circle:nth-child(2), .oneri2.gorundu .o-halka circle:nth-child(2) { stroke-dashoffset: var(--bos); }
.oneri2 .kazan { margin: 0; font-size: var(--fs-sm); font-weight: 700; color: var(--gri); line-height: 1.35; }
.oneri2 .kazan small { display: block; font-size: var(--fs-2xs); letter-spacing: .1em; text-transform: uppercase; color: var(--c); font-weight: 800; }
.oneri2 .kazan b { font-family: var(--serif); font-size: var(--fs-xl); font-weight: 500; color: var(--murekkep); }

/* illüstrasyon animasyonları */
.oi-sayfa, .oi-arka { transform-box: fill-box; transform-origin: 50% 50%; backface-visibility: hidden; }
.oi-sayfa { animation: oi-cevir1 4s ease-in-out infinite; }
.oi-arka { animation: oi-cevir2 4s ease-in-out infinite; }
@keyframes oi-cevir1 { 0%, 35% { transform: scaleX(1); } 50%, 85% { transform: scaleX(0); } 100% { transform: scaleX(1); } }
@keyframes oi-cevir2 { 0%, 35% { transform: scaleX(0); } 50%, 85% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
.oi-ok { transform-box: fill-box; transform-origin: center; animation: oi-don 4s ease-in-out infinite; }
@keyframes oi-don { 0%, 35% { transform: rotate(0); } 50%, 100% { transform: rotate(360deg); } }
.oi-ucan { animation: oi-ucan 3.4s ease-in infinite; }
@keyframes oi-ucan { 0% { transform: translateY(-10px); opacity: 0; } 15% { opacity: 1; } 45% { transform: translateY(24px) scale(.7); opacity: 1; } 55%, 100% { transform: translateY(30px) scale(.5); opacity: 0; } }
.oi-imza { stroke-dasharray: 80; stroke-dashoffset: 80; animation: oi-imza 3.4s ease-in-out infinite; }
@keyframes oi-imza { 0%, 45% { stroke-dashoffset: 80; } 75%, 100% { stroke-dashoffset: 0; } }
.oi-tik-d, .oi-tik { transform-box: fill-box; transform-origin: center; animation: oi-tik 3.4s ease infinite; }
@keyframes oi-tik { 0%, 75% { transform: scale(0); } 85%, 100% { transform: scale(1); } }
.oi-dongu { transform-box: fill-box; transform-origin: center; animation: oi-dondur 6s linear infinite; }
@keyframes oi-dondur { to { transform: rotate(360deg); } }
.oi-dolum { animation: oi-dol 3s ease-in-out infinite; }
@keyframes oi-dol { 0%, 20% { width: 0; } 70%, 100% { width: 22px; } }
.oi-damla { animation: oi-damla 3s ease-in infinite; }
@keyframes oi-damla { 0% { transform: translateY(-6px); opacity: 0; } 15% { opacity: 1; } 45% { transform: translateY(22px); opacity: 1; } 55%, 100% { transform: translateY(24px); opacity: 0; } }
.oi-hale { transform-box: fill-box; transform-origin: center; animation: oi-hale 2.6s ease-out infinite; }
@keyframes oi-hale { 0% { transform: scale(.7); opacity: .35; } 100% { transform: scale(1.35); opacity: 0; } }
.oi-guc { animation: oi-guc 2.6s ease-in-out infinite; }
@keyframes oi-guc { 0%, 40% { opacity: 1; } 55%, 85% { opacity: .25; } 100% { opacity: 1; } }
.oi-ay { transform-box: fill-box; transform-origin: center; animation: oi-ay 5s ease-in-out infinite; }
@keyframes oi-ay { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-4px) rotate(6deg); } }
.oi-z { animation: oi-z 2.6s ease-in-out infinite; } .oi-z.z2 { animation-delay: .6s; }
@keyframes oi-z { 0% { opacity: 0; transform: translate(0, 4px); } 40% { opacity: 1; } 100% { opacity: 0; transform: translate(4px, -8px); } }

@media (max-width: 1100px) { .oneri-grid.v2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .oneri-ozet { grid-template-columns: 1fr; grid-template-areas: "m" "b" "f"; } .oz-fidan { justify-content: flex-start; height: 48px; } .oz-metin p { font-size: var(--fs-base); } }
@media (max-width: 520px) { .oneri-grid.v2 { grid-template-columns: minmax(0, 1fr); } .o-sahne { height: 110px; } }

/* Logo modu: koyu orman zemini, açık tonlu amblem */
.orman-alan { transition: background .8s ease; }
.orman-alan.logo-modu { background: radial-gradient(circle at 50% 50%, #12432a, #082a1a 75%); }

.fis-yillar .fis-tum { border-color: var(--yaprak); color: var(--yaprak); }
.fis-yillar .fis-tum[aria-pressed="true"] { background: var(--yaprak); color: #fff; border-color: var(--yaprak); }
.logo-not { bottom: auto; top: 12px; transform: translate(-50%, -8px); } .logo-not.acik { transform: translate(-50%, 0); } @media (max-width: 560px) { .logo-not { top: 8px; bottom: auto; } }

.yil-sec button.oynuyor-yil { animation: yil-vurgu .5s cubic-bezier(.3,1.6,.5,1); }
@keyframes yil-vurgu { 0% { transform: scale(.9); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }

/* =========================================================
   Yapışkan menü (her zaman görünür) + mobil menü
   ========================================================= */
.ust { position: fixed; top: 0; }
.menu a.aktif:not(.buton) { background: rgba(143,209,138,.16); color: var(--filiz); opacity: 1; }
.menu a:not(.buton) { position: relative; }
.menu-ac { display: none; width: 44px; height: 44px; border-radius: 12px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); cursor: pointer; flex-direction: column; justify-content: center; align-items: center; gap: 5px; margin-left: auto; }
.menu-ac i { display: block; width: 20px; height: 2px; border-radius: 2px; background: var(--kagit); transition: transform .3s, opacity .3s; }
body.menu-acik .menu-ac i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.menu-acik .menu-ac i:nth-child(2) { opacity: 0; }
body.menu-acik .menu-ac i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 1100px) {
  .menu-ac { display: flex; }
  .ust .kap { gap: 10px; }
  .menu { position: fixed; top: 70px; left: 12px; right: 12px; flex-direction: column; align-items: stretch; gap: 4px; padding: 12px; border-radius: 20px; background: rgba(12,34,25,.97); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 30px 60px -20px rgba(0,0,0,.6); border: 1px solid rgba(255,255,255,.08); opacity: 0; transform: translateY(-10px); pointer-events: none; transition: opacity .25s, transform .3s; }
  body.menu-acik .menu { opacity: 1; transform: none; pointer-events: auto; }
  .menu a:not(.buton) { display: block !important; padding: 14px 16px; font-size: var(--fs-base); border-radius: 12px; }
  .menu .buton { margin-top: 6px; padding: 14px; font-size: var(--fs-base); }
  .menu .buton .uzun { display: inline !important; } .menu .buton .kisa { display: none !important; }
  .ust:has(+ main) { }
}

@keyframes main-gir { from { opacity: 0; } }

/* =========================================================
   "Hemen hesapla" — gösterişli çağrı düğmesi
   ========================================================= */
.sihirli-kap { position: relative; display: inline-block; margin-top: 30px; }
.sh-halka { position: absolute; inset: -4px; border-radius: 999px; border: 2px solid rgba(233,162,59,.6); animation: sh-halka 2.4s cubic-bezier(.2,.6,.3,1) infinite; pointer-events: none; }
.sh-halka.h2 { animation-delay: .8s; } .sh-halka.h3 { animation-delay: 1.6s; }
@keyframes sh-halka { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.35, 1.8); opacity: 0; } }
.sihirli-buton { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; gap: 14px; padding: 12px 14px 12px 12px; border-radius: 999px; text-decoration: none; color: var(--gece);
  background: linear-gradient(110deg, #f3b553, #e9a23b 40%, #ffd27a 50%, #e9a23b 60%, #f3b553); background-size: 250% 100%; animation: sh-akis 3.5s linear infinite, sh-nefes 2.4s ease-in-out infinite;
  box-shadow: 0 0 0 0 rgba(233,162,59,.55), 0 18px 40px -14px rgba(233,162,59,.9), inset 0 -3px 0 rgba(0,0,0,.12); transition: transform .25s cubic-bezier(.3,1.6,.5,1), box-shadow .3s; }
@keyframes sh-akis { to { background-position: -250% 0; } }
@keyframes sh-nefes { 0%, 100% { box-shadow: 0 0 0 0 rgba(233,162,59,.5), 0 18px 40px -14px rgba(233,162,59,.9), inset 0 -3px 0 rgba(0,0,0,.12); } 50% { box-shadow: 0 0 0 10px rgba(233,162,59,0), 0 24px 50px -14px rgba(233,162,59,1), inset 0 -3px 0 rgba(0,0,0,.12); } }
.sh-isik { position: absolute; inset: 0; z-index: -1; background: radial-gradient(140px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.55), transparent 60%); opacity: 0; transition: opacity .3s; }
.sihirli-buton:hover .sh-isik { opacity: 1; }
.sh-agac { width: 50px; height: 50px; border-radius: 50%; background: var(--gece); display: grid; place-items: center; flex: none; box-shadow: inset 0 -4px 8px rgba(0,0,0,.3); }
.sh-agac svg { width: 22px; height: 33px; color: var(--filiz); --govde: #8a5a33; transform-origin: 50% 100%; animation: sh-buyu 2.4s cubic-bezier(.3,1.6,.5,1) infinite; }
@keyframes sh-buyu { 0% { transform: scale(.3); } 30%, 80% { transform: scale(1) rotate(0); } 55% { transform: scale(1) rotate(-6deg); } 100% { transform: scale(1); } }
.sh-metin { display: flex; flex-direction: column; font: 800 var(--fs-lg)/1.1 var(--sans); letter-spacing: -.01em; white-space: nowrap; }
.sh-metin small { font-size: var(--fs-2xs); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; opacity: .65; margin-bottom: 3px; }
.sh-ok { width: 44px; height: 44px; border-radius: 50%; background: rgba(12,34,25,.12); display: grid; place-items: center; transition: background .3s, transform .3s; }
.sh-ok svg { width: 22px; animation: sh-ok 1.4s ease-in-out infinite; }
@keyframes sh-ok { 0%, 100% { transform: translateX(-3px); } 50% { transform: translateX(4px); } }
.sihirli-buton:hover .sh-ok { background: var(--gece); color: var(--amber); transform: rotate(-45deg) scale(1.08); }
.sihirli-buton:hover { box-shadow: 0 0 0 6px rgba(233,162,59,.25), 0 28px 60px -16px rgba(233,162,59,1); }
.sihirli-buton:active { transform: scale(.96) !important; }
.sihirli-buton:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.sh-kivilcim { position: absolute; inset: 0; pointer-events: none; }
.sh-kivilcim i { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #fff; opacity: 0; }
.sh-kivilcim i:nth-child(1) { left: 20%; top: 10%; animation: sh-kiv 2.6s ease-out infinite; }
.sh-kivilcim i:nth-child(2) { left: 45%; top: 80%; animation: sh-kiv 2.6s ease-out .4s infinite; background: var(--filiz); }
.sh-kivilcim i:nth-child(3) { left: 70%; top: 15%; animation: sh-kiv 2.6s ease-out .9s infinite; }
.sh-kivilcim i:nth-child(4) { left: 85%; top: 70%; animation: sh-kiv 2.6s ease-out 1.3s infinite; background: var(--filiz); }
.sh-kivilcim i:nth-child(5) { left: 35%; top: 30%; animation: sh-kiv 2.6s ease-out 1.8s infinite; }
.sh-kivilcim i:nth-child(6) { left: 60%; top: 55%; animation: sh-kiv 2.6s ease-out 2.2s infinite; }
@keyframes sh-kiv { 0% { transform: scale(0); opacity: 0; } 20% { transform: scale(1); opacity: .9; } 100% { transform: translateY(-18px) scale(0); opacity: 0; } }
/* menüden gelindiğinde dikkat çek */
.sihirli-buton.cagir { animation: sh-akis 3.5s linear infinite, sh-cagir .9s cubic-bezier(.3,1.6,.5,1) 2; }
@keyframes sh-cagir { 0%, 100% { transform: scale(1); } 30% { transform: scale(1.14) rotate(-2deg); } 60% { transform: scale(.97) rotate(1deg); } }
.cta-bolum:target .cta, .cta.vurgu { box-shadow: 0 0 0 3px rgba(233,162,59,.5), 0 40px 80px -40px rgba(0,0,0,.6); }
@media (max-width: 560px) { .sh-metin { font-size: var(--fs-lg); } .sh-agac { width: 42px; height: 42px; } .sh-ok { width: 38px; height: 38px; } .sihirli-buton { gap: 10px; } }
@media (prefers-reduced-motion: reduce) { .sihirli-buton, .sh-halka, .sh-agac svg, .sh-ok svg, .sh-kivilcim i { animation: none !important; } }

/* =========================================================
   Hesaplayıcı v2 — sade, adım adım
   ========================================================= */
.hesap-hero.h2v { padding: 124px 0 110px; text-align: center; }
.hesap-hero.h2v .kap { display: flex; flex-direction: column; align-items: center; }
.hesap-hero.h2v h1 { font-size: var(--fs-4xl); max-width: 16ch; }
.hesap-hero.h2v p { margin-top: 14px; font-size: var(--fs-lg); }
.hesap-govde.h2v { margin-top: -64px; padding-bottom: 20px; }
.hesap-govde.h2v .hesap-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 22px; }

/* Sihirbaz */
.sihirbaz { padding: 0; overflow: hidden; display: flex; flex-direction: column; min-height: 560px; }
.sb-ust { padding: 22px 26px 0; }
.sb-adimlar { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sb-adimlar button { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 4px; font-weight: 800; font-size: var(--fs-sm); color: var(--gri); }
.sb-adimlar b { width: 32px; height: 32px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--kagit); border: 2px solid var(--cizgi); font-size: var(--fs-sm); transition: .3s; }
.sb-adimlar small { display: block; font-size: var(--fs-2xs); font-weight: 700; opacity: .7; }
.sb-adimlar li.aktif button { color: var(--murekkep); }
.sb-adimlar li.aktif b { background: var(--gece); color: var(--filiz); border-color: var(--gece); transform: scale(1.1); box-shadow: 0 0 0 5px rgba(63,143,90,.15); }
.sb-adimlar li.bitti b { background: var(--yaprak); border-color: var(--yaprak); color: #fff; font-size: 0; }
.sb-adimlar li.bitti b::after { content: "✓"; font-size: var(--fs-base); }
.sb-cizgi { height: 4px; border-radius: 999px; background: var(--kagit-2); margin: 14px 0 0; overflow: hidden; }
.sb-cizgi i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--yaprak), var(--filiz)); border-radius: inherit; transition: width .5s cubic-bezier(.3,1.2,.5,1); }
.sb-adim { border: 0; margin: 0; padding: 24px 26px 8px; display: none; flex: 1; }
.sihirbaz[data-adim="1"] .sb-adim[data-a="1"], .sihirbaz[data-adim="2"] .sb-adim[data-a="2"], .sihirbaz[data-adim="3"] .sb-adim[data-a="3"] { display: block; animation: sb-gir .45s cubic-bezier(.3,1.2,.5,1); }
@keyframes sb-gir { from { opacity: 0; transform: translateX(24px); } }
.sb-adim legend { padding: 0; font-family: var(--serif); font-size: var(--fs-xl); font-weight: 500; margin-bottom: 14px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sb-adim legend.ikinci { margin-top: 22px; float: none; width: 100%; }
.sb-adim .tarih-satir { margin-top: 14px; }
.alan label small { font-weight: 600; color: var(--gri); }
.kutucuk { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.kutucuk label { cursor: pointer; }
.kutucuk input { position: absolute; opacity: 0; pointer-events: none; }
.kutucuk span { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 8px; border-radius: var(--r-kucuk); border: 2px solid var(--cizgi); background: var(--kagit); font-weight: 800; font-size: var(--fs-sm); transition: .25s; }
.kutucuk span i { font-style: normal; font-size: var(--fs-2xl); transition: transform .3s cubic-bezier(.3,1.6,.5,1); }
.kutucuk label:hover span { border-color: var(--yaprak); }
.kutucuk input:checked + span { background: var(--gece); color: var(--kagit); border-color: var(--gece); box-shadow: 0 12px 24px -14px rgba(12,34,25,.7); }
.kutucuk input:checked + span i { transform: scale(1.2) translateY(-2px); }
.kutucuk input:focus-visible + span { outline: 3px solid var(--amber); outline-offset: 2px; }
.buyuk-girdi { padding: 16px; border-radius: var(--r); background: var(--kagit); border: 1px solid var(--cizgi); margin-bottom: 14px; }
.bg-ust { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.bg-ust .ik, .kucuk-girdi .ik { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--bg); color: var(--fg); flex: none; }
.bg-ust .ik svg, .kucuk-girdi .ik svg { width: 22px; height: 22px; }
.bg-ust label { font-weight: 800; font-size: var(--fs-lg); }
.bg-ust label small { display: block; font-size: var(--fs-xs); font-weight: 600; color: var(--gri); }
.buyuk-girdi .birlesik { background: #fff; }
.buyuk-girdi .birlesik input { font-size: var(--fs-2xl); padding: 12px 16px; font-family: var(--serif); font-weight: 500; }
.hizli { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.hizli button { font: 800 var(--fs-sm) var(--sans); padding: 7px 12px; border-radius: 999px; border: 1.5px solid var(--cizgi); background: #fff; cursor: pointer; color: var(--murekkep); transition: .2s; }
.hizli button:hover { background: var(--gece); color: var(--kagit); border-color: var(--gece); transform: translateY(-2px); }
.hizli button[data-sifir] { margin-left: auto; color: var(--gri); }
input.zipla { animation: zipla-g .4s cubic-bezier(.3,1.8,.5,1); }
@keyframes zipla-g { 40% { transform: scale(1.08); color: var(--yaprak); } }
.sb-not { font-size: var(--fs-sm); color: var(--gri); margin: -4px 0 16px; }
.sb-not b { color: var(--yaprak); }
.uclu { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.kucuk-girdi { padding: 14px; border-radius: var(--r); background: var(--kagit); border: 1px solid var(--cizgi); display: flex; flex-direction: column; gap: 8px; }
.kucuk-girdi label { font-weight: 800; font-size: var(--fs-base); }
.kucuk-girdi .birlesik { background: #fff; }
.kucuk-girdi .birlesik input { font-size: var(--fs-lg); padding: 10px 10px; }
.kucuk-girdi .birlesik .birim { padding: 0 10px; font-size: var(--fs-sm); }
.sb-alt { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 18px 26px 22px; border-top: 1px solid var(--cizgi); background: #fcfbf7; margin-top: auto; }
.sb-alt .buton { padding: 13px 22px; }
#sb-ileri { min-width: 150px; }
.sb-ornek { all: unset; cursor: pointer; font-size: var(--fs-sm); font-weight: 700; color: var(--yaprak); text-decoration: underline; text-underline-offset: 3px; }
.sb-ornek:hover { color: var(--gece); }

/* Sonuç kartı v2 */
.s2v { padding: 26px; display: flex; flex-direction: column; }
.s2-ust { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.s2-sayi { margin: 14px 0 6px; }
.s2v .dev { font-size: var(--fs-4xl); }
.s2v .sahne { margin: 14px 0 14px; }
.s2-cipler { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cip { background: rgba(255,255,255,.06); border-radius: var(--r-kucuk); padding: 10px 12px; font-size: var(--fs-base); line-height: 1.2; }
.cip b { display: block; font-family: var(--serif); font-weight: 500; font-size: var(--fs-xl); margin-top: 4px; white-space: nowrap; }
.cip b small { font-family: var(--sans); font-size: var(--fs-xs); opacity: .7; }
.cip em { display: block; font-style: normal; font-size: var(--fs-2xs); color: var(--filiz); margin-top: 3px; font-weight: 600; }
.cip.su b { color: #8ccde6; } .cip.co2 b { color: #c9d6cd; } .cip.atik b { color: var(--amber); }
.s2-detay { margin-top: 14px; border-top: 1px solid rgba(255,255,255,.1); padding-top: 12px; }
.s2-detay summary { cursor: pointer; font-weight: 800; font-size: var(--fs-sm); color: var(--filiz); list-style: none; display: flex; align-items: center; gap: 8px; }
.s2-detay summary::before { content: "+"; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: rgba(143,209,138,.15); transition: transform .3s; }
.s2-detay[open] summary::before { transform: rotate(45deg); }
.s2-detay .metrik { grid-template-columns: repeat(3, 1fr); }
.s2-detay .metrik b { font-size: var(--fs-xl); }
.s2v .sonuc-eylem { margin-top: auto; padding-top: 16px; }
.s2v.parla { animation: parla-k 1s ease 2; }
@keyframes parla-k { 50% { box-shadow: 0 0 0 6px rgba(143,209,138,.5), var(--golge); } }

/* Mobil alt çubuk */
.mobil-sonuc { display: none; }
@media (max-width: 1000px) {
  .hesap-govde.h2v .hesap-grid { grid-template-columns: minmax(0, 1fr); }
  .sihirbaz { min-height: 0; }
  .mobil-sonuc { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 40; display: flex; align-items: center; gap: 12px; padding: 10px 16px 10px 12px; border-radius: 999px; background: var(--gece); color: var(--kagit); text-decoration: none; box-shadow: 0 20px 40px -12px rgba(0,0,0,.6); transition: transform .35s, opacity .35s; }
  .mobil-sonuc.gizle { transform: translateY(120%); opacity: 0; pointer-events: none; }
  .mobil-sonuc svg { width: 22px; height: 33px; color: var(--filiz); --govde: #8a5a33; }
  .mobil-sonuc span { font-weight: 700; }
  .mobil-sonuc b { font-family: var(--serif); font-size: var(--fs-xl); font-weight: 500; color: var(--amber); }
  .mobil-sonuc em { margin-left: auto; font-style: normal; font-size: var(--fs-sm); font-weight: 800; color: var(--filiz); }
}
@media (max-width: 560px) {
  .hesap-hero.h2v { padding: 104px 0 90px; }
  .sb-ust, .sb-adim { padding-left: 16px; padding-right: 16px; }
  .sb-alt { padding: 14px 16px 16px; flex-wrap: wrap; }
  .sb-ornek { order: 3; width: 100%; text-align: center; }
  .sb-adimlar span { font-size: var(--fs-xs); } .sb-adimlar small { display: none; }
  .sb-adimlar button { flex-direction: column; gap: 4px; text-align: center; }
  .kutucuk { grid-template-columns: repeat(2, 1fr); }
  .uclu { grid-template-columns: minmax(0, 1fr); }
  .s2v { padding: 18px; } .s2-cipler { gap: 6px; } .cip { padding: 8px; font-size: var(--fs-sm); } .cip b { font-size: var(--fs-lg); }
  .s2-detay .metrik { grid-template-columns: 1fr; }
}
.sb-adim legend { float: left; width: 100%; }
.sb-adim legend + * { clear: both; }
.sb-adim .kutucuk, .sb-adim .secim, .sb-adim .buyuk-girdi:first-of-type, .sb-adim .sb-not { clear: both; }
.sb-adim { padding-top: 22px; }
.s2v { align-self: start; }

.sb-baslik { clear: both; font-family: var(--serif); font-size: var(--fs-xl); font-weight: 500; margin: 24px 0 14px; }
/* Ana sayfa (ev) simgesi */
.menu .ev-link { display: inline-grid !important; place-items: center; width: 40px; height: 40px; padding: 0 !important; border-radius: 50% !important; border: 1px solid rgba(255,255,255,.18); }
.menu .ev-link svg { width: 19px; height: 19px; transition: transform .3s cubic-bezier(.3,1.6,.5,1); }
.menu .ev-link span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.menu .ev-link:hover { background: var(--filiz) !important; color: var(--gece) !important; border-color: var(--filiz); }
.menu .ev-link:hover svg { transform: translateY(-2px) scale(1.1); }
.kirinti a svg { width: 16px; height: 16px; }
@media (max-width: 1100px) {
  .menu .ev-link { display: flex !important; width: auto; height: auto; justify-content: flex-start; gap: 10px; padding: 14px 16px !important; border-radius: 12px !important; border: 0; }
  .menu .ev-link span { position: static; width: auto; height: auto; clip: auto; overflow: visible; }
}

/* Sonuç özet cümlesi */
.s2-ozet { margin-top: 12px; padding: 14px 16px; border-radius: var(--r-kucuk); background: rgba(255,255,255,.06); border-left: 3px solid var(--amber); font-size: var(--fs-base); line-height: 1.6; color: rgba(245,240,228,.88); }
.s2-ozet b { color: var(--kagit); }
.s2-ozet b.vurgu { color: var(--amber); font-family: var(--serif); font-size: 1.2em; font-weight: 500; }
.s2-ozet .ozet-ipucu { display: block; margin-top: 8px; color: var(--filiz); font-size: var(--fs-sm); }
.s2-ozet .ozet-ipucu b { color: var(--filiz); }
.sahne-lejant { display: flex; gap: 18px; justify-content: center; margin: -4px 0 14px; font-size: var(--fs-xs); color: rgba(245,240,228,.7); font-weight: 700; }
.sahne-lejant span { display: inline-flex; align-items: center; gap: 7px; }
.sahne-lejant i { width: 12px; height: 12px; border-radius: 3px; }
.lj-kutuk { background: #a8743f; } .lj-agac { background: var(--filiz); border-radius: 50% 50% 2px 2px !important; }

.s2-ozet .oz-cumle, .s2-ozet .oz-bedel { display: block; }
.s2-ozet .oz-bedel { margin-top: 6px; }
.s2-ozet .oz-liste { display: grid; gap: 4px; margin-top: 6px; }
.s2-ozet .oz-kalem { display: flex; gap: 8px; align-items: baseline; font-size: var(--fs-sm); }
.s2-ozet .oz-kalem i { flex: none; width: 9px; height: 9px; border-radius: 3px; transform: translateY(1px); }
.s2-ozet .oz-kalem i.k1 { background: #a8743f; } .s2-ozet .oz-kalem i.k2 { background: #c9d6cd; }
.s2-ozet .oz-not { display: block; margin-top: 8px; font-size: var(--fs-xs); color: rgba(245,240,228,.6); font-style: italic; }

.s2-ozet .oz-kalem { display: block; padding-left: 17px; position: relative; }
.s2-ozet .oz-kalem i { position: absolute; left: 0; top: .45em; transform: none; }

/* =========================================================
   Menü: "filizlenen" hover ve seçili durumu
   Zemin çizgisi soldan çizilir, seçili bölümde çizginin üstünde
   küçük bir fidan büyür ve hafifçe sallanır.
   ========================================================= */
@media (min-width: 1101px) {
  .menu a:not(.buton):not(.ev-link) { background: none !important; padding: 10px 14px 12px; border-radius: 10px; opacity: .78; color: var(--kagit); transition: opacity .25s, color .25s; }
  .menu a:not(.buton):not(.ev-link)::after {
    content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px; border-radius: 2px;
    background: linear-gradient(90deg, var(--filiz), rgba(143,209,138,.35));
    transform: scaleX(0); transform-origin: 0 50%; transition: transform .45s cubic-bezier(.3,1.2,.4,1);
  }
  .menu a:not(.buton):not(.ev-link)::before {
    content: ""; position: absolute; left: 50%; bottom: 5px; width: 14px; height: 18px; margin-left: -7px;
    background: var(--filiz);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 18'%3E%3Cpath d='M7 18V8' stroke='black' stroke-width='1.6' fill='none'/%3E%3Cpath d='M7 9C7 4 3 2 1 2c0 4 2 7 6 7zM7 7c0-4 3-6 6-6 0 4-2 6-6 6z' fill='black'/%3E%3C/svg%3E") center bottom / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 18'%3E%3Cpath d='M7 18V8' stroke='black' stroke-width='1.6' fill='none'/%3E%3Cpath d='M7 9C7 4 3 2 1 2c0 4 2 7 6 7zM7 7c0-4 3-6 6-6 0 4-2 6-6 6z' fill='black'/%3E%3C/svg%3E") center bottom / contain no-repeat;
    transform: translateY(-2px) scale(0); transform-origin: 50% 100%; opacity: 0; transition: transform .5s cubic-bezier(.3,1.7,.5,1), opacity .3s;
  }
  .menu a:not(.buton):not(.ev-link):hover { opacity: 1; }
  .menu a:not(.buton):not(.ev-link):hover::after { transform: scaleX(.6); }
  .menu a.aktif:not(.buton):not(.ev-link) { opacity: 1; color: var(--filiz) !important; font-weight: 700; }
  .menu a.aktif:not(.buton):not(.ev-link)::after { transform: scaleX(1); }
  .menu a.aktif:not(.buton):not(.ev-link)::before { opacity: 1; transform: translateY(-14px) scale(1); animation: fidan-salla 3.2s ease-in-out .5s infinite; }
  @keyframes fidan-salla { 0%, 100% { transform: translateY(-14px) rotate(-6deg); } 50% { transform: translateY(-14px) rotate(6deg); } }
  /* ev simgesi: halka yerine yaprak dokunuşu */
  .menu .ev-link { border-color: rgba(143,209,138,.25); }
  .menu .ev-link:hover { background: rgba(143,209,138,.15) !important; color: var(--filiz) !important; }
  .menu .buton { margin-left: 6px; }
}
/* Fidan simgesini metnin üstüne değil, çizginin ortasından yükselen küçük bir filiz olarak konumla */
@media (min-width: 1101px) {
  .menu a:not(.buton):not(.ev-link)::before { bottom: auto; top: -6px; }
  .menu a.aktif:not(.buton):not(.ev-link)::before { transform: translateY(0) scale(1); animation-name: fidan-salla2; }
  @keyframes fidan-salla2 { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } }
}
/* Mobil panel: seçili satırda sol yeşil çizgi + fidan */
@media (max-width: 1100px) {
  .menu a.aktif:not(.buton) { background: rgba(143,209,138,.1) !important; color: var(--filiz) !important; box-shadow: inset 3px 0 0 var(--filiz); }
  .menu a.aktif:not(.buton)::after { content: "🌱"; margin-left: 8px; font-size: var(--fs-sm); }
}

/* =========================================================
   Büyüt: yıllar tek bir yükleme çubuğu gibi dolar
   ========================================================= */
.yil-sec { position: relative; }
.yil-sec button { position: relative; overflow: hidden; isolation: isolate; }
.yil-sec button::before { content: ""; position: absolute; inset: 0; z-index: -1; transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, color-mix(in srgb, var(--c) 30%, #fff), color-mix(in srgb, var(--c) 55%, #fff)); }
.yil-sec.yukleniyor button[data-yil=""] { opacity: .45; }
.yil-sec.yukleniyor button[data-yil]:not([data-yil=""]) { border-color: transparent; background: rgba(23,37,29,.05); color: rgba(23,37,29,.45); transition: color .4s, background .4s; }
.yil-sec.yukleniyor button[data-yil]:not([data-yil=""]) i { opacity: .35; transition: opacity .4s; }
.yil-sec.yukleniyor button.doluyor { color: var(--murekkep); }
.yil-sec.yukleniyor button.doluyor::before { animation: cip-dol var(--adim, 1.3s) cubic-bezier(.45,0,.3,1) forwards; }
.yil-sec.yukleniyor button.doluyor i { opacity: 1; box-shadow: 0 0 0 0 var(--c); animation: cip-nabiz 1s ease-out infinite; }
.yil-sec.yukleniyor button.doldu { color: var(--murekkep); }
.yil-sec.yukleniyor button.doldu::before { transform: scaleX(1); }
.yil-sec.yukleniyor button.doldu i { opacity: 1; }
@keyframes cip-dol { to { transform: scaleX(1); } }
@keyframes cip-nabiz { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c) 70%, transparent); } 100% { box-shadow: 0 0 0 7px transparent; } }
/* altta ince, kesintisiz ilerleme çizgisi */
.yil-sec::after { content: ""; position: absolute; left: 0; bottom: -7px; height: 3px; width: var(--ilerle, 0%); border-radius: 3px; opacity: 0;
  background: linear-gradient(90deg, #1f5a37, #3f8f5a, #a9cf5e); transition: width var(--adim, 1.3s) cubic-bezier(.45,0,.3,1), opacity .4s; }
.yil-sec.yukleniyor::after { opacity: 1; }
/* bitişte tüm çubuk tek parça yeşil bir dalgayla parlar */
.yil-sec.bitti button.doldu::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent); transform: translateX(-100%); animation: cip-parla .8s ease forwards; }
.yil-sec.bitti button.doldu:nth-of-type(3)::after { animation-delay: .06s; } .yil-sec.bitti button.doldu:nth-of-type(4)::after { animation-delay: .12s; }
.yil-sec.bitti button.doldu:nth-of-type(5)::after { animation-delay: .18s; } .yil-sec.bitti button.doldu:nth-of-type(6)::after { animation-delay: .24s; }
.yil-sec.bitti button.doldu:nth-of-type(7)::after { animation-delay: .3s; } .yil-sec.bitti button.doldu:nth-of-type(n+8)::after { animation-delay: .36s; }
@keyframes cip-parla { to { transform: translateX(100%); } }
.orman-kart.kompakt .yil-sec { padding-bottom: 8px; }
/* Fidan kelimenin başında: seçilince metin hafifçe kayar, filiz solda yükselir */
@media (min-width: 1101px) {
  .menu a:not(.buton):not(.ev-link) { transition: opacity .25s, color .25s, padding .45s cubic-bezier(.3,1.3,.5,1); }
  .menu a:not(.buton):not(.ev-link)::before { top: 50%; bottom: auto; left: 12px; margin: -11px 0 0; width: 14px; height: 18px; transform: scale(0); transform-origin: 50% 100%; }
  .menu a.aktif:not(.buton):not(.ev-link) { padding-left: 32px; }
  .menu a.aktif:not(.buton):not(.ev-link)::before { transform: scale(1); animation: fidan-salla3 3.2s ease-in-out .5s infinite; }
  .menu a.aktif:not(.buton):not(.ev-link)::after { left: 32px; }
  @keyframes fidan-salla3 { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }
}

/* =========================================================
   Yıl seçici: hap düğmeler yerine tek parça zaman şeridi
   Tümü = bütün şerit yeşil · tek yıl = yalnızca o dilim dolu
   ========================================================= */
.orman-kart.kompakt .yil-sec { gap: 0; padding-bottom: 0; align-items: stretch; }
.orman-kart.kompakt .yil-sec::after { display: none; }
.orman-kart.kompakt .yil-sec button { border: 0; border-radius: 0; margin: 0; padding: 9px 16px; min-width: 92px; justify-content: center;
  background: #ebe5d6; color: rgba(23,37,29,.6); box-shadow: inset 1px 0 0 rgba(255,255,255,.7); transition: color .35s; }
.orman-kart.kompakt .yil-sec button[data-yil=""] { border-radius: 999px; margin-right: 10px; min-width: 0; background: var(--kagit); box-shadow: inset 0 0 0 1.5px var(--cizgi); color: var(--murekkep); }
.orman-kart.kompakt .yil-sec button[data-yil=""][aria-pressed="true"] { background: var(--gece); color: var(--kagit); box-shadow: none; }
.orman-kart.kompakt .yil-sec button[data-yil=""] i { display: none; }
.orman-kart.kompakt .yil-sec button:nth-child(2) { border-radius: 999px 0 0 999px; box-shadow: none; }
.orman-kart.kompakt .yil-sec button:last-child { border-radius: 0 999px 999px 0; }
.orman-kart.kompakt .yil-sec button i { width: 7px; height: 7px; background: currentColor; opacity: .5; transition: opacity .3s; }
.orman-kart.kompakt .yil-sec button small { opacity: .75; }
/* dolgu katmanı */
.orman-kart.kompakt .yil-sec button::before { background: linear-gradient(180deg, color-mix(in srgb, var(--c) 92%, #fff), color-mix(in srgb, var(--c) 78%, #0c2219)); transform: scaleX(0); transition: transform .5s cubic-bezier(.45,0,.3,1); }
.orman-kart.kompakt .yil-sec button[aria-pressed="true"]:not([data-yil=""]),
.orman-kart.kompakt .yil-sec.tumu:not(.yukleniyor) button:not([data-yil=""]),
.orman-kart.kompakt .yil-sec.yukleniyor button.doldu,
.orman-kart.kompakt .yil-sec.yukleniyor button.doluyor { color: #fff; }
.orman-kart.kompakt .yil-sec button[aria-pressed="true"]:not([data-yil=""])::before,
.orman-kart.kompakt .yil-sec.tumu:not(.yukleniyor) button:not([data-yil=""])::before,
.orman-kart.kompakt .yil-sec.yukleniyor button.doldu::before { transform: scaleX(1); }
.orman-kart.kompakt .yil-sec.tumu:not(.yukleniyor) button:not([data-yil=""]) i,
.orman-kart.kompakt .yil-sec button[aria-pressed="true"] i { opacity: .9; }
/* yükleme: dilimler sırayla, kesintisiz dolar */
.orman-kart.kompakt .yil-sec.yukleniyor button:not([data-yil=""]) { background: #ebe5d6; color: rgba(23,37,29,.4); border: 0; }
.orman-kart.kompakt .yil-sec.yukleniyor button.doluyor::before { transition: none; animation: cip-dol var(--adim, 1.3s) linear forwards; }
.orman-kart.kompakt .yil-sec.yukleniyor button.doluyor i { animation: none; opacity: 1; }
.orman-kart.kompakt .yil-sec.yukleniyor button.doldu, .orman-kart.kompakt .yil-sec.yukleniyor button.doluyor { color: #fff; }
.orman-kart.kompakt .yil-sec button:hover:not([data-yil=""]) { color: var(--murekkep); }
.orman-kart.kompakt .yil-sec.tumu button:hover:not([data-yil=""]), .orman-kart.kompakt .yil-sec button[aria-pressed="true"]:hover { color: #fff; filter: brightness(1.08); }
@media (max-width: 760px) { .orman-kart.kompakt .yil-sec button { min-width: 78px; padding: 8px 10px; } }

/* =========================================================
   Menü çağrı düğmesi: "yaprak" biçimli, filizlenen ikon
   ========================================================= */
.menu .yaprak-buton { position: relative; overflow: hidden; isolation: isolate; gap: 10px; padding: 6px 18px 6px 6px; margin-left: 10px;
  border-radius: 22px 6px 22px 6px; background: transparent; color: var(--amber); opacity: 1;
  box-shadow: inset 0 0 0 1.5px rgba(233,162,59,.7); transition: border-radius .5s cubic-bezier(.3,1.3,.5,1), color .35s, box-shadow .35s, transform .25s; }
.menu .yaprak-buton::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(120deg, #f3b553, var(--amber)); transform: translateX(-101%); transition: transform .45s cubic-bezier(.6,0,.3,1); }
.yb-ik { width: 32px; height: 32px; flex: none; border-radius: 16px 4px 16px 4px; display: grid; place-items: center; background: var(--amber); color: var(--gece); transition: border-radius .5s, background .35s, color .35s, transform .5s cubic-bezier(.3,1.6,.5,1); }
.yb-ik svg { width: 20px; height: 20px; overflow: visible; }
.yb-ik .yb-y1, .yb-ik .yb-y2 { transform-box: fill-box; transform-origin: 0% 100%; animation: yb-yaprak 3.6s ease-in-out infinite; }
.yb-ik .yb-y1 { transform-origin: 100% 100%; }
.yb-ik .yb-y2 { animation-delay: .3s; }
@keyframes yb-yaprak { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-9deg); } }
.yb-metin { display: flex; flex-direction: column; line-height: 1.05; text-align: left; }
.yb-metin .uzun, .yb-metin .kisa { font-family: var(--serif); font-size: var(--fs-lg); font-weight: 600; letter-spacing: -.01em; }
.yb-metin small { font-size: var(--fs-2xs); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; opacity: .7; margin-top: 2px; }
.menu .yaprak-buton:hover, .menu .yaprak-buton:focus-visible { color: var(--gece); border-radius: 6px 22px 6px 22px; box-shadow: 0 12px 26px -12px rgba(233,162,59,.9); transform: translateY(-1px); }
.menu .yaprak-buton:hover::before, .menu .yaprak-buton:focus-visible::before { transform: none; }
.menu .yaprak-buton:hover .yb-ik { background: var(--gece); color: var(--filiz); border-radius: 4px 16px 4px 16px; transform: rotate(-12deg) scale(1.06); }
/* bulunduğu sayfadaysa dolu */
.menu .yaprak-buton.aktif-buton { color: var(--gece); box-shadow: 0 0 0 3px rgba(233,162,59,.25); }
.menu .yaprak-buton.aktif-buton::before { transform: none; }
.menu .yaprak-buton.aktif-buton .yb-ik { background: var(--gece); color: var(--filiz); }
@media (max-width: 1100px) {
  .menu .yaprak-buton { margin: 8px 0 0; padding: 10px 14px 10px 10px; justify-content: flex-start; border-radius: 18px 6px 18px 6px; }
  .menu .yaprak-buton .yb-metin .uzun { display: inline !important; } .menu .yaprak-buton .yb-metin .kisa { display: none !important; }
}

/* Yıllar bölümü: kısa ekranlarda daha sıkı */
@media (max-height: 900px) and (min-width: 761px) {
  #yillar .bolum-bas { margin-bottom: 26px; }
  #yillar .bolum-bas h2 { font-size: var(--fs-3xl); }
  #yillar .grafik-kap .grafik { min-height: 0; height: clamp(220px, 42vh, 340px); }
  #yillar .tablo th, #yillar .tablo td { padding-top: 9px; padding-bottom: 9px; }
  #yillar .tablo-not { margin-top: 10px; }
}
@media (max-width: 760px) {
  #yillar .grafik-kap .grafik { height: 220px; min-height: 0; }
  #yillar .tablo th, #yillar .tablo td { padding: 8px 6px; font-size: var(--fs-sm); }
}
@media (max-width: 760px) { #yillar .grafik-kap .grafik { flex: none; height: 200px; } }
@media (max-height: 900px) and (min-width: 761px) { #yillar .grafik-kap .grafik { flex: none; } }
@media (max-width: 760px) {
  #yillar .bolum-bas p { display: none; }
  #yillar .bolum-bas { margin-bottom: 14px; }
  #yillar .grafik-kap .grafik { height: 165px; }
  #yillar .grafik-kap.kart, #yillar .tablo-sar.kart { padding: 12px 12px 10px; }
  #yillar .lejant { margin-top: 8px; font-size: var(--fs-2xs); gap: 12px; }
  #yillar .tablo-not { display: none; }
  #yillar .sutun .deger { font-size: var(--fs-base); }
  #yillar .iki-kolon { gap: 10px; }
}

/* =========================================================
   Yöntem: tek ekranlık, 4 adımlı anlatım
   ========================================================= */
.yontem2 .bolum-bas { margin-bottom: 24px; }
.ym-sekmeler { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 5px; border-radius: 18px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); margin-bottom: 18px; }
.ym-sekmeler button { position: relative; z-index: 1; all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 14px; color: rgba(245,240,228,.65); font-weight: 700; font-size: var(--fs-sm); transition: color .3s; z-index: 1; position: relative; }
.ym-sekmeler button b { width: 26px; height: 26px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: var(--fs-xs); background: rgba(255,255,255,.08); transition: background .3s, color .3s; }
.ym-sekmeler button:hover { color: var(--kagit); }
.ym-sekmeler button[aria-selected="true"] { color: var(--gece); }
.ym-sekmeler button[aria-selected="true"] b { background: var(--gece); color: var(--filiz); }
.ym-sekmeler button.bitti b { background: var(--yaprak); color: #fff; font-size: 0; }
.ym-sekmeler button.bitti b::after { content: "✓"; font-size: var(--fs-sm); }
.ym-gosterge { position: absolute; top: 5px; bottom: 5px; left: 0; border-radius: 14px; background: linear-gradient(120deg, var(--filiz), #b9e6a0); transition: transform .5s cubic-bezier(.3,1.2,.4,1), width .5s; z-index: 0; }
.ym-sahne { display: grid; }
.ym-panel { grid-area: 1 / 1; visibility: hidden; opacity: 0; transform: translateX(calc(var(--yon, 1) * 30px)); transition: opacity .45s, transform .55s cubic-bezier(.3,1.2,.4,1), visibility 0s .5s; }
.ym-panel.aktif { visibility: visible; opacity: 1; transform: none; transition: opacity .45s .05s, transform .55s cubic-bezier(.3,1.2,.4,1) .05s; }
.ym-panel .esitlik, .ym-panel .yolculuk, .ym-panel .fis { margin: 0; }
.ym-panel .esitlik.oynat .e-kalem { animation: none; opacity: 1; transform: none; }
.ym-panel.aktif .esitlik .e-kalem { animation: e-gir .7s cubic-bezier(.3,1.5,.5,1) var(--g) both; }
.ym-panel.aktif .esitlik .e-op { animation: e-op .5s cubic-bezier(.3,1.8,.5,1) var(--g) both; }
.ym-panel .kts-bas { margin-top: 0; }
.ym-alt { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 18px; }
.ym-ok { all: unset; cursor: pointer; font-weight: 800; font-size: var(--fs-sm); color: var(--kagit); padding: 11px 18px; border-radius: 999px; border: 1px solid rgba(255,255,255,.2); transition: background .25s, color .25s, transform .25s; }
.ym-ok:hover { background: rgba(255,255,255,.08); }
.ym-ok.ileri { background: var(--filiz); color: var(--gece); border-color: var(--filiz); }
.ym-ok.ileri span { font-family: var(--serif); font-weight: 600; }
.ym-ok.ileri:hover { transform: translateX(3px); background: #a6dc8c; }
.ym-nokta { display: flex; gap: 8px; }
.ym-nokta i { width: 8px; height: 8px; border-radius: 999px; background: rgba(255,255,255,.2); transition: width .4s, background .4s; }
.ym-nokta i.on { width: 26px; background: var(--filiz); }
@media (max-width: 760px) {
  .ym-sekmeler { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .ym-sekmeler button { flex-direction: column; gap: 4px; padding: 8px 4px; font-size: var(--fs-2xs); text-align: center; line-height: 1.2; }
  .ym-alt { flex-wrap: wrap; } .ym-nokta { order: -1; width: 100%; justify-content: center; }
  .ym-ok.ileri { margin-left: auto; font-size: var(--fs-sm); }
}
.ym-panel { align-self: center; }
.ym-panel .fis { padding: 18px 22px; }
.ym-panel .fis-bas { padding-bottom: 12px; }
.ym-panel .fis-satirlar { padding-top: 6px; gap: 0; }
.ym-panel .fis-satir { padding: 8px 6px; }
.ym-panel .fs-sag b { font-size: var(--fs-xl); }
.ym-panel .fis-toplam { margin-top: 8px; padding: 10px 14px; }
.ym-panel .kts { height: 230px; }
.ym-panel .yolculuk { padding: 24px 20px 20px; }
.yontem2 .bolum-bas h2 { font-size: var(--fs-3xl); }
@media (max-width: 760px) { #yontem .bolum-bas p { display: none; } #yontem .bolum-bas { margin-bottom: 14px; } }
/* Çağrı düğmesi: dengeli, simetrik hap */
.menu .yaprak-buton, .menu .yaprak-buton:hover, .menu .yaprak-buton:focus-visible { border-radius: 999px; }
.menu .yaprak-buton { padding: 5px 20px 5px 5px; gap: 11px; }
.yb-ik, .menu .yaprak-buton:hover .yb-ik { border-radius: 50%; width: 34px; height: 34px; }
.menu .yaprak-buton:hover .yb-ik { transform: rotate(-10deg) scale(1.05); }
.yb-metin .uzun, .yb-metin .kisa { font-size: var(--fs-base); }
.yb-metin small { font-size: var(--fs-2xs); letter-spacing: .12em; }
@media (max-width: 1100px) { .menu .yaprak-buton { border-radius: 16px; } }
/* Çağrı düğmesi: yaprak biçimi geri, ama hover'da biçim sabit (dengeli) */
.menu .yaprak-buton, .menu .yaprak-buton:hover, .menu .yaprak-buton:focus-visible { border-radius: 24px 7px 24px 7px; }
.menu .yaprak-buton { padding: 6px 20px 6px 6px; }
.yb-ik, .menu .yaprak-buton:hover .yb-ik { border-radius: 17px 5px 17px 5px; width: 34px; height: 34px; }
.menu .yaprak-buton:hover .yb-ik { transform: scale(1.06); }
.menu .yaprak-buton:hover .yb-ik svg { animation: yb-sallan .9s ease-in-out; }
@keyframes yb-sallan { 30% { transform: rotate(-12deg); } 65% { transform: rotate(8deg); } }
@media (max-width: 1100px) { .menu .yaprak-buton { border-radius: 20px 6px 20px 6px; } }

/* =========================================================
   Yöntem adımları: patika üzerinde dört durak
   ========================================================= */
.ym-sekmeler { background: none; border: 0; padding: 0; gap: 0; margin-bottom: 22px; }
.ym-gosterge { display: none; }
.ym-iz { position: absolute; left: 12.5%; right: 12.5%; top: 21px; height: 3px; border-radius: 3px; background: repeating-linear-gradient(90deg, rgba(245,240,228,.22) 0 6px, transparent 6px 12px); z-index: 0; }
.ym-iz i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--ilerle, 0%); border-radius: inherit; background: linear-gradient(90deg, var(--yaprak), var(--filiz), var(--amber)); transition: width .7s cubic-bezier(.4,0,.2,1); box-shadow: 0 0 12px rgba(233,162,59,.45); }
.ym-sekmeler button { flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 0 8px 12px; border-radius: 16px; color: rgba(245,240,228,.55); }
.ym-sekmeler button b { width: 44px; height: 44px; font-size: var(--fs-base); font-family: var(--serif); font-weight: 600; background: #10291c; color: rgba(245,240,228,.7); box-shadow: 0 0 0 2px rgba(245,240,228,.18), 0 0 0 7px #10291c; transition: background .35s, color .35s, box-shadow .35s, transform .45s cubic-bezier(.3,1.6,.5,1); }
.ym-sekmeler button span { display: flex; flex-direction: column; gap: 3px; font-family: var(--serif); font-size: var(--fs-lg); font-weight: 500; letter-spacing: -.01em; line-height: 1.15; }
.ym-sekmeler button span small { font-family: var(--sans); font-size: var(--fs-2xs); font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: rgba(245,240,228,.4); transition: color .3s; }
.ym-sekmeler button span::after { content: ""; display: block; height: 2px; width: 0; margin: 6px auto 0; border-radius: 2px; background: var(--amber); transition: width .45s cubic-bezier(.3,1.2,.4,1); }
.ym-sekmeler button:hover { color: var(--kagit); }
.ym-sekmeler button:hover b { box-shadow: 0 0 0 2px rgba(233,162,59,.6), 0 0 0 7px #10291c; transform: translateY(-2px); }
.ym-sekmeler button:hover span::after { width: 22px; }
/* seçili durak */
.ym-sekmeler button[aria-selected="true"] { color: var(--kagit); }
.ym-sekmeler button[aria-selected="true"] b { background: var(--amber); color: var(--gece); transform: scale(1.12); box-shadow: 0 0 0 3px rgba(233,162,59,.35), 0 0 0 7px #10291c, 0 10px 24px -6px rgba(233,162,59,.7); animation: durak-nabiz 2.4s ease-out infinite; }
.ym-sekmeler button[aria-selected="true"] span small { color: var(--amber); }
.ym-sekmeler button[aria-selected="true"] span::after { width: 44px; }
@keyframes durak-nabiz { 0% { box-shadow: 0 0 0 3px rgba(233,162,59,.45), 0 0 0 7px #10291c, 0 10px 24px -6px rgba(233,162,59,.7); } 70% { box-shadow: 0 0 0 14px rgba(233,162,59,0), 0 0 0 7px #10291c, 0 10px 24px -6px rgba(233,162,59,.7); } 100% { box-shadow: 0 0 0 3px rgba(233,162,59,0), 0 0 0 7px #10291c, 0 10px 24px -6px rgba(233,162,59,.7); } }
/* geçilen duraklar */
.ym-sekmeler button.bitti { color: rgba(245,240,228,.8); }
.ym-sekmeler button.bitti b { background: var(--yaprak); color: #fff; box-shadow: 0 0 0 2px rgba(143,209,138,.5), 0 0 0 7px #10291c; }
.ym-sekmeler button.bitti span small { color: var(--filiz); }
@media (max-width: 760px) {
  .ym-iz { top: 17px; }
  .ym-sekmeler button { padding: 0 2px 6px; gap: 8px; }
  .ym-sekmeler button b { width: 34px; height: 34px; font-size: var(--fs-sm); box-shadow: 0 0 0 2px rgba(245,240,228,.18), 0 0 0 5px #10291c; }
  .ym-sekmeler button span { font-size: var(--fs-xs); }
  .ym-sekmeler button span small { font-size: var(--fs-2xs); letter-spacing: .1em; }
}
.ym-sekmeler { padding-top: 8px; }
.ym-iz { top: 29px; }
@media (max-width: 760px) { .ym-iz { top: 25px; } }
/* Bekleyen duraklar da net okunsun; dolunca daha da belirginleşsin */
.ym-iz { background: repeating-linear-gradient(90deg, rgba(143,209,138,.45) 0 8px, transparent 8px 14px); height: 3px; }
.ym-sekmeler button { color: rgba(245,240,228,.88); }
.ym-sekmeler button b { background: #173a28; color: var(--kagit); box-shadow: 0 0 0 2px rgba(143,209,138,.55), 0 0 0 7px #10291c; }
.ym-sekmeler button span small { color: rgba(143,209,138,.85); }
.ym-sekmeler button span::after { width: 18px; background: rgba(143,209,138,.35); }
.ym-sekmeler button:hover span::after { width: 30px; background: var(--amber); }
.ym-sekmeler button[aria-selected="true"] { color: #fff; }
.ym-sekmeler button[aria-selected="true"] span { font-weight: 600; }
.ym-sekmeler button[aria-selected="true"] span::after { width: 48px; background: var(--amber); }
.ym-sekmeler button.bitti { color: #fff; }
.ym-sekmeler button.bitti b { background: var(--yaprak); box-shadow: 0 0 0 2px var(--filiz), 0 0 0 7px #10291c; }
.ym-sekmeler button.bitti span::after { width: 30px; background: var(--filiz); }
@media (max-width: 760px) { .ym-sekmeler button b { box-shadow: 0 0 0 2px rgba(143,209,138,.55), 0 0 0 5px #10291c; } }

/* Otomatik geçiş: seçili adımın alt çizgisi 10 sn'de dolar */
.ym-sekmeler button[aria-selected="true"] span::after { width: 48px; background: linear-gradient(90deg, var(--amber) 50%, rgba(233,162,59,.25) 50%) right / 200% 100% no-repeat; }
.ym-sekmeler.sayiyor button[aria-selected="true"] span::after { animation: ym-sure var(--sure, 10s) linear forwards; }
.ym-sekmeler.durdu button[aria-selected="true"] span::after { animation-play-state: paused; }
@keyframes ym-sure { from { background-position: right; } to { background-position: left; } }
.ym-sekmeler.durdu button[aria-selected="true"] b { animation-play-state: paused; }
.ym-sahne { margin-bottom: 4px; }
.ym-panel { align-self: start; }
/* Hesaplayıcı: iki sütun eşit genişlik ve eşit yükseklik */
@media (min-width: 1001px) {
  .hesap-govde.h2v .hesap-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; gap: 24px; }
  .sihirbaz { min-height: 0; height: 100%; }
  .s2v { position: relative; top: 0; align-self: stretch; padding: 24px 26px; }
  .s2-sayi { margin: 6px 0 2px; display: flex; align-items: baseline; gap: 12px; }
  .s2v .dev { font-size: var(--fs-4xl); line-height: .9; }
  .s2-ozet { margin-top: 10px; padding: 12px 14px; font-size: var(--fs-sm); line-height: 1.55; }
  .s2v .sahne { margin: 12px 0 8px; padding: 10px 12px; min-height: 0; }
  .s2v .sahne svg { max-height: 190px; width: 100%; }
  .s2v .bos-sahne { min-height: 150px; }
  .sahne-lejant { margin: 0 0 10px; }
  .cip { padding: 9px 12px; } .cip b { font-size: var(--fs-lg); }
  .s2-detay { margin-top: 10px; padding-top: 10px; }
  .s2v .sonuc-eylem { padding-top: 12px; }
}
@media (min-width: 1001px) {
  .s2v .sahne svg { max-height: 150px; }
  .s2v .sahne { margin: 10px 0 6px; padding: 8px 10px; }
  .sahne-lejant { margin: 0 0 8px; font-size: var(--fs-xs); }
  .s2v .bos-sahne { min-height: 130px; }
}

/* =========================================================
   Hesaplayıcı — minimal sürüm
   ========================================================= */
.hesap-hero.h2v { padding: 108px 0 84px; }
.hesap-hero.h2v h1 { font-size: var(--fs-3xl); max-width: none; }
.hesap-hero.h2v p { font-size: var(--fs-base); margin-top: 10px; opacity: .8; }
.hesap-hero.h2v .kirinti { margin-bottom: 14px; }
.hesap-govde.h2v { margin-top: -48px; }
.hesap-govde.h2v .panel { border-radius: 22px; box-shadow: 0 1px 0 rgba(0,0,0,.02), 0 24px 48px -36px rgba(12,34,25,.45); }
/* adım başlığı */
.sb-ust { padding: 18px 22px 0; }
.sb-adimlar button { font-size: var(--fs-sm); gap: 8px; }
.sb-adimlar b { width: 26px; height: 26px; font-size: var(--fs-xs); border-width: 1.5px; }
.sb-adimlar li.aktif b { transform: none; box-shadow: none; }
.sb-adimlar small { font-size: var(--fs-2xs); }
.sb-cizgi { height: 3px; margin-top: 12px; }
.sb-adim { padding: 18px 22px 6px; }
.sb-adim legend, .sb-baslik { font-family: var(--sans); font-size: var(--fs-sm); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--gri); margin-bottom: 10px; }
.sb-baslik { margin: 18px 0 10px; }
/* yer seçimi: ince yatay çipler */
.kutucuk { gap: 8px; }
.kutucuk span { flex-direction: row; justify-content: center; gap: 8px; padding: 10px 8px; border-width: 1.5px; border-radius: 12px; font-size: var(--fs-sm); background: #fff; }
.kutucuk span i { font-size: var(--fs-lg); }
.kutucuk input:checked + span { box-shadow: none; }
.kutucuk input:checked + span i { transform: none; }
/* alanlar */
.sb-adim .tarih-satir { margin-top: 12px; gap: 10px; }
.sihirbaz .alan label { font-size: var(--fs-xs); color: var(--gri); margin-bottom: 4px; }
.sihirbaz .alan input, .sihirbaz .alan select { padding: 10px 12px; font-size: var(--fs-base); border-radius: 10px; border-width: 1.5px; background: #fff; }
.sihirbaz .secim span { padding: 7px 13px; font-size: var(--fs-sm); border-width: 1.5px; background: #fff; }
.sihirbaz .gun-bilgi { font-size: var(--fs-xs); margin-top: 8px; }
.buyuk-girdi, .kucuk-girdi { background: #fff; border-radius: 14px; padding: 12px 14px; }
.buyuk-girdi { margin-bottom: 10px; }
.bg-ust { margin-bottom: 8px; gap: 10px; }
.bg-ust .ik, .kucuk-girdi .ik { width: 34px; height: 34px; border-radius: 10px; }
.bg-ust .ik svg, .kucuk-girdi .ik svg { width: 18px; height: 18px; }
.bg-ust label { font-size: var(--fs-base); }
.bg-ust label small { font-size: var(--fs-2xs); }
.buyuk-girdi .birlesik input { font-size: var(--fs-lg); padding: 9px 12px; }
.buyuk-girdi .birlesik, .kucuk-girdi .birlesik { border-radius: 10px; border-width: 1.5px; background: var(--kagit); }
.hizli { margin-top: 8px; gap: 5px; }
.hizli button { padding: 5px 10px; font-size: var(--fs-xs); border-width: 1px; }
.sb-alt { padding: 14px 22px 16px; background: transparent; }
.sb-alt .buton { padding: 11px 18px; font-size: var(--fs-sm); }
/* sonuç */
.s2v { padding: 20px 22px; }
.s2v .etiket { font-size: var(--fs-2xs); }
.s2v .rozet { font-size: var(--fs-xs); padding: 6px 10px; }
.s2v .dev { font-size: var(--fs-4xl); }
.s2v .dev-alt { font-size: var(--fs-base); }
.s2-ozet { font-size: var(--fs-sm); border-left-width: 2px; }
.s2v .bos-sahne { min-height: 110px; }
.s2v .bos-sahne b { font-size: var(--fs-lg); }
.cip { font-size: var(--fs-sm); } .cip b { font-size: var(--fs-lg); }
.s2v .sonuc-eylem .buton { padding: 10px 14px; font-size: var(--fs-sm); }

/* =========================================================
   TİPOGRAFİ ÖLÇEĞİ — sitedeki TÜM yazı boyutları yalnızca bu değişkenlerden gelir
   11 · 12 · 13 · 15 · 16 · 18 · 24 · 32 · 42   (sabit px yazmayın)
   2xs: büyük harfli etiket · xs: açıklama/lejant · sm: ikincil metin, düğme
   base: gövde, form · lg: giriş paragrafı, kart başlığı · xl: küçük rakam
   2xl: metrik rakam · 3xl: bölüm başlığı · 4xl: hero / dev rakam
   ========================================================= */
:root {
  --fs-2xs: 11px; --fs-xs: 12px; --fs-sm: 13px; --fs-base: 15px; --fs-lg: 16px;
  --fs-xl: 18px; --fs-2xl: clamp(20px, 1.9vw, 24px);
  --fs-3xl: clamp(24px, 2.6vw, 32px); --fs-4xl: clamp(28px, 3.4vw, 42px);
}
body { font-size: var(--fs-base); }
h1, h2, h3, h4 { font-family: var(--serif); }

/* etiketler (küçük, büyük harf) */
.etiket, .kurum-rozet, .canli-rozet, .ust-satir, .sayac-kart .ust-satir, .e-sekme button, .tablo th, .fis-toplam span, .alt-bilgi h4, .ym-sekmeler button span small, .sb-adim legend, .sb-baslik, .kts-cevir, .o-etiket span { font-size: var(--fs-2xs) !important; letter-spacing: .12em; }

/* sayfa başlıkları */
.hero h1 { font-size: var(--fs-4xl) !important; line-height: 1.04; }
.hesap-hero h1, .hesap-hero.h2v h1 { font-size: var(--fs-3xl) !important; }
.bolum-bas h2, .cta h2 { font-size: var(--fs-3xl) !important; line-height: 1.08; }
.yontem2 .bolum-bas h2 { font-size: var(--fs-3xl) !important; }
#yillar .bolum-bas h2 { font-size: var(--fs-3xl) !important; }

/* giriş paragrafları */
.hero .alt, .hesap-hero p, .hesap-hero.h2v p, .cta p, .bolum-bas p { font-size: var(--fs-lg) !important; line-height: 1.6; }

/* ara başlıklar */
.kts-bas h3, .fis-bas h3, .pm-bas h2 { font-size: var(--fs-2xl) !important; }
.kars h3, .oneri2 .oneri h3, .yol-adim h4, .formul h3, .bg-ust label, .yb-metin .uzun { font-size: var(--fs-lg) !important; }
.ym-sekmeler button span { font-size: var(--fs-lg) !important; }

/* büyük rakamlar: üç kademe */
.sayac-kart .dev, .s2v .dev, .sonuc .dev { font-size: var(--fs-4xl) !important; line-height: .95; }
.sayac-kart .dev.kucuk { font-size: var(--fs-3xl) !important; }
.serit b, .kars > b, .kts-on b, .f-buyuk, .e-deger, .yil-kart .a, .orman-kart.kompakt .orman-sayac b, .onz-sonuc b { font-size: var(--fs-2xl) !important; }
.cn b, .fs-sag b, .sutun .deger, .metrik b, .cip b, .pm-sayilar b, .ab-sayac b, .mobil-sonuc b, .yb-metin .uzun { font-size: var(--fs-lg) !important; }
.serit b small, .kars > b small, .cip b small, .metrik b small { font-size: var(--fs-xs) !important; }

/* gövde metinleri */
.kars p, .oneri2 .oneri p, .yol-adim p, .kts-arka p, .formul p, .pm-izgara p, .tablo, .tablo-not, .e-not, .s2-ozet, .yorum, .kapsam, .alt-bilgi, .ab-kutu, .ab-alt { font-size: var(--fs-sm) !important; }
.tablo td, .tablo th { font-size: var(--fs-sm); }
.tablo th { font-size: var(--fs-2xs) !important; }
.e-etk, .cn small, .cn .ac, .serit-ic > div > span, .metrik > div > span, .lejant, .sahne-lejant, .cip em, .kars-ik + b + h3 + p { font-size: var(--fs-xs) !important; }

/* menü, düğmeler, form */
.menu a:not(.buton) { font-size: var(--fs-base) !important; }
.buton, .sihirli-buton .sh-metin { font-size: var(--fs-base); }
.sh-metin { font-size: var(--fs-lg) !important; }
.yil-sec button, .fis-yillar button, .secim span, .kutucuk span, .hizli button, .sb-adimlar button { font-size: var(--fs-sm) !important; }
.alan input, .alan select, .birlesik input { font-size: var(--fs-base) !important; }
/* form: tüm sayı girişleri aynı yazı, birim ve ipuçları aynı küçük boy */
.birlesik input, .buyuk-girdi .birlesik input, .kucuk-girdi .birlesik input { font-family: var(--sans) !important; font-weight: 700 !important; font-size: var(--fs-lg) !important; }
.birlesik select, .birlesik .birim, .bg-ust label small, .hizli button, .sb-not, .gun-bilgi { font-size: var(--fs-sm) !important; }
.bg-ust label, .kucuk-girdi label { font-size: var(--fs-lg) !important; }

@media (max-width: 760px) {
  :root { --fs-base: 15px; --fs-lg: 15px; --fs-xl: 17px; --fs-2xl: 20px; --fs-3xl: 24px; --fs-4xl: 28px; }
  .ym-sekmeler button span { font-size: var(--fs-sm) !important; }
}
.alt-bilgi h4, .yol-adim h4, .kars h3, .oneri2 .oneri h3, .formul-grid.dort .formul h3, .pm-izgara h3, .dagilim h4 { font-family: var(--sans); }
.alt-bilgi h4 { font-size: var(--fs-2xs) !important; }

/* ===== Logo yazısı: keskin serif kimlik ===== */

/* ölçek dışı kalan küçük parçalar */
.cn b em, .alan label small, .onz-sonuc small { font-size: var(--fs-xs) !important; }
.serit b small, .karsilastir .kars > b .kucuk-on { font-size: var(--fs-xs) !important; }

/* ===== Hesapla: sonuç panelindeki kişisel hesap fişi ===== */
.sonuc .fis.kisisel { margin: 14px 0 16px; padding: 16px 18px; box-shadow: none; }
.fis.kisisel .fis-bas { padding-bottom: 10px; }
.fis.kisisel .fis-bas h3 { font-size: var(--fs-lg) !important; margin-top: 4px; }
.fis.kisisel .fis-satirlar { padding-top: 4px; gap: 0; }
.fis.kisisel .fis-satir { padding: 8px 2px; grid-template-columns: 26px auto minmax(12px, 1fr) auto; gap: 8px; }
.fis.kisisel .fs-no { width: 24px; height: 24px; border-radius: 7px; font-size: var(--fs-xs); }
.fis.kisisel .fs-sol { font-size: var(--fs-sm); }
.fis.kisisel .fs-sag { font-size: var(--fs-sm); }
.fis.kisisel .fs-sag b { font-size: var(--fs-lg) !important; }
.fis.kisisel .fis-toplam { margin-top: 10px; padding: 10px 12px; }
.fis.kisisel .fis-toplam p { font-size: var(--fs-sm); line-height: 1.5; }
.fis-bos { margin: 6px 0 0; font-size: var(--fs-sm); color: var(--gri); }
@media (max-width: 560px) { .fis.kisisel .fis-satir { grid-template-columns: 24px minmax(0,1fr) auto; } }

/* =========================================================
   MEVSİM: kışın ormanlara kar (html[data-hava] — config.js SO.mevsim)
   Saf CSS katmanları: orman yeniden çizilse de silinmez, işlemciyi yormaz.
   ========================================================= */
:root[data-hava] .sahne { overflow: hidden; }
/* Kar katmanları: tane deseni bir kez boyanır, yalnızca transform ile kaydırılır
   (GPU'da, her karede yeniden boyama yok). Katman bir döşeme boyu kadar uzun tutulur;
   tam bir döşeme kaydığında desen başa döner, böylece döngü dikişsiz olur. */
:root[data-hava="kar"] .sahne::before, :root[data-hava="kar"] .orman-alan::before,
:root[data-hava="kar"] .sahne::after, :root[data-hava="kar"] .orman-alan::after {
  content: ""; position: absolute; pointer-events: none; z-index: 1; will-change: transform;
}
/* 1. katman: 180×200 döşeme, sağa doğru süzülür */
:root[data-hava="kar"] .sahne::before, :root[data-hava="kar"] .orman-alan::before {
  top: -600px; left: -180px; right: 0; bottom: 0;
  background-image:
    radial-gradient(2px 2px at 9% 11%, #fff 98%, transparent),
    radial-gradient(1.5px 1.5px at 61% 27%, rgba(255,255,255,.85) 98%, transparent),
    radial-gradient(2.5px 2.5px at 33% 49%, rgba(255,255,255,.9) 98%, transparent),
    radial-gradient(1.8px 1.8px at 83% 63%, rgba(255,255,255,.8) 98%, transparent),
    radial-gradient(2px 2px at 21% 84%, #fff 98%, transparent),
    radial-gradient(1.5px 1.5px at 71% 92%, rgba(255,255,255,.85) 98%, transparent),
    radial-gradient(1.8px 1.8px at 47% 7%, rgba(255,255,255,.8) 98%, transparent);
  background-size: 180px 200px;
  animation: hava-kar 14s linear infinite;
}
/* 2. katman: 230×260 döşeme, daha soluk ve yavaş, sola süzülür */
:root[data-hava="kar"] .sahne::after, :root[data-hava="kar"] .orman-alan::after {
  top: -520px; left: 0; right: -230px; bottom: 0; opacity: .7;
  background-image:
    radial-gradient(2px 2px at 13% 19%, #fff 98%, transparent),
    radial-gradient(1.5px 1.5px at 57% 9%, rgba(255,255,255,.85) 98%, transparent),
    radial-gradient(2.5px 2.5px at 87% 33%, rgba(255,255,255,.9) 98%, transparent),
    radial-gradient(1.8px 1.8px at 39% 41%, rgba(255,255,255,.8) 98%, transparent),
    radial-gradient(2px 2px at 69% 58%, #fff 98%, transparent),
    radial-gradient(1.5px 1.5px at 7% 67%, rgba(255,255,255,.85) 98%, transparent),
    radial-gradient(2.5px 2.5px at 51% 79%, rgba(255,255,255,.9) 98%, transparent),
    radial-gradient(1.8px 1.8px at 93% 88%, rgba(255,255,255,.8) 98%, transparent);
  background-size: 230px 260px;
  animation: hava-kar-2 22s linear infinite;
}
@keyframes hava-kar { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(180px, 600px, 0); } }
@keyframes hava-kar-2 { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-230px, 520px, 0); } }
:root[data-hava="kar"] .sahne { box-shadow: inset 0 -12px 14px -8px rgba(255,255,255,.75); }
:root[data-hava="kar"] .sahne use:not(.kesildi):not(.kutuk) { color: #b6dcbd; }   /* ağaçlara kırağı */
:root[data-hava="kar"] .orman-alan:not(.logo-modu) { background: linear-gradient(180deg, #dfe8ee, #cfdde4); box-shadow: inset 0 -12px 14px -8px #fff; }

/* hero'larda düşen kar taneleri (yaprakların yerine) */
.yapraklar i.kar-tane { border-radius: 50%; background: #fff; box-shadow: 0 0 6px rgba(255,255,255,.6); }

/* sahnedeki etiketler havanın üstünde kalsın */
.sahne .olcek, .orman-alan .logo-not, .orman-ipucu { z-index: 3; }

@media (prefers-reduced-motion: reduce) {
  :root[data-hava] .sahne::before, :root[data-hava] .orman-alan::before,
  :root[data-hava] .sahne::after, :root[data-hava] .orman-alan::after { animation: none; }
}

/* =========================================================
   KAYAN BANT — "Artık kâğıda basılmıyor"
   Sabit başlık ne olduğunu söyler; akış yalnızca örnek gösterir;
   durdur ve "Tümünü gör" ile hareket kullanıcının kontrolündedir.
   ========================================================= */
.bant { background: var(--amber); color: var(--gece); position: relative; z-index: 3; }
.bant-ust { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: stretch; min-height: 68px; }
.bant-etiket { display: flex; align-items: center; gap: 12px; padding: 10px 26px 10px clamp(16px, 3vw, 40px); background: var(--gece); color: var(--kagit); clip-path: polygon(0 0, 100% 0, calc(100% - 16px) 100%, 0 100%); padding-right: 38px; }
.bant-tik { width: 30px; height: 30px; flex: none; padding: 5px; border-radius: 50%; background: var(--filiz); color: var(--gece); }
.bant-etiket h2 { font-family: var(--sans); font-size: var(--fs-base); font-weight: 800; letter-spacing: 0; line-height: 1.2; white-space: nowrap; }
.bant-etiket p { font-size: var(--fs-xs); line-height: 1.3; opacity: .8; white-space: nowrap; }
.bant-etiket p b { color: var(--filiz); font-variant-numeric: tabular-nums; }
.bant-akis { overflow: hidden; display: flex; align-items: center; -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); }
.bant-ic { display: flex; width: max-content; animation: kay 110s linear infinite; }
.bant-ic > div { display: flex; align-items: center; padding-right: 8px; }
.bant:hover .bant-ic, .bant:focus-within .bant-ic, .bant.durdu .bant-ic, .bant.acik .bant-ic { animation-play-state: paused; }
.bt { display: inline-flex; align-items: center; gap: 7px; padding: 0 16px; font-size: var(--fs-base); font-weight: 700; white-space: nowrap; }
.bt svg { width: 15px; height: 15px; flex: none; color: var(--yosun); }
.bt-grup { margin: 0 10px 0 26px; padding: 5px 12px; border-radius: 999px; background: var(--gece); color: var(--amber); font-size: var(--fs-2xs); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.bant-kontrol { display: flex; align-items: center; gap: 8px; padding: 0 clamp(16px, 3vw, 40px) 0 12px; }
.bant-kontrol button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; border: 0; border-radius: 999px; background: rgba(12,34,25,.1); color: var(--gece); font: 800 var(--fs-sm)/1 var(--sans); cursor: pointer; transition: background .2s; }
.bant-kontrol button:hover { background: rgba(12,34,25,.18); }
.bant-kontrol button:focus-visible { outline: 3px solid var(--gece); outline-offset: 2px; }
.bant-kontrol svg { width: 18px; height: 18px; }
.bant-dur { width: 40px; }
.bant-dur .i-oynat, .bant.durdu .bant-dur .i-dur { display: none; }
.bant.durdu .bant-dur .i-oynat { display: inline; }
.bant-tumu-ac { padding: 0 16px; white-space: nowrap; }
.bant-tumu-ac svg { transition: transform .25s; }
.bant.acik .bant-tumu-ac { background: var(--gece); color: var(--amber); }
.bant.acik .bant-tumu-ac svg { transform: rotate(180deg); }
.bant-tumu { border-top: 1px solid rgba(12,34,25,.18); padding: 26px 0 30px; }
.bant-gruplar { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 28px 40px; }
.bant-gruplar h3 { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-family: var(--sans); font-size: var(--fs-2xs); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.bant-gruplar h3 small { padding: 2px 8px; border-radius: 999px; background: var(--gece); color: var(--amber); font-size: inherit; letter-spacing: 0; }
.bant-gruplar ul { list-style: none; margin: 0; padding: 0; font-size: var(--fs-sm); font-weight: 600; line-height: 1.35; }
.bant-gruplar .bg:first-child ul { columns: 2; column-gap: 28px; }
.bant-gruplar li { position: relative; padding: 4px 0 4px 22px; break-inside: avoid; }
.bant-gruplar li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 10px; height: 5px; border: solid var(--yosun); border-width: 0 0 2.4px 2.4px; transform: rotate(-45deg); }
@media (max-width: 860px) {
  .bant-ust { grid-template-columns: 1fr auto; grid-template-areas: "etiket kontrol" "akis akis"; background: var(--gece); }
  .bant-etiket { grid-area: etiket; clip-path: none; padding-right: 12px; }
  .bant-kontrol { grid-area: kontrol; background: var(--gece); }
  .bant-kontrol button { background: rgba(245,240,228,.12); color: var(--kagit); }
  .bant-kontrol button:hover { background: rgba(245,240,228,.2); }
  .bant-kontrol button:focus-visible { outline-color: var(--amber); }
  .bant-akis { grid-area: akis; background: var(--amber); min-height: 52px; }
  .bant-gruplar { grid-template-columns: 1fr 1fr; }
  .bant-gruplar .bg:first-child { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .bant-etiket h2, .bant-etiket p { white-space: normal; }
  .bant-tik { display: none; }
  .bant-kontrol .bant-tumu-ac { width: 40px; padding: 0; font-size: 0; gap: 0; }
  .bant-gruplar { grid-template-columns: 1fr; }
  .bant-gruplar .bg:first-child ul { columns: 1; }
}

/* =========================================================
   PERFORMANS: titreme ve donmaları önleme
   ========================================================= */
/* Ekran dışındaki bölümlerin animasyonları beklemede (config.js → .uyku) */
.uyku, .uyku *, .uyku::before, .uyku::after, .uyku *::before, .uyku *::after { animation-play-state: paused !important; }
/* Hareketli içeriğin (tuval, düşen yapraklar) üstündeki bulanıklık her karede yeniden
   hesaplanıyordu; neredeyse opak zemin aynı görünümü maliyetsiz verir. */
.ust.dolu { background: rgba(12, 34, 25, .96); backdrop-filter: none; -webkit-backdrop-filter: none; }
.orman-sayac { background: rgba(12, 34, 25, .94); backdrop-filter: none; -webkit-backdrop-filter: none; }
/* Orman zemini logo moduna geçerken bir anda açık→koyu "flaş" yapmasın: renkler yumuşak geçsin */
@property --oz1 { syntax: "<color>"; inherits: false; initial-value: #f3f7ef; }
@property --oz2 { syntax: "<color>"; inherits: false; initial-value: #e7efe0; }
.orman-alan { --oz1: #f3f7ef; --oz2: #e7efe0; background: radial-gradient(circle at 50% 50%, var(--oz1), var(--oz2) 75%); transition: --oz1 .9s ease, --oz2 .9s ease; }
.orman-alan.logo-modu { --oz1: #12432a; --oz2: #082a1a; background: radial-gradient(circle at 50% 50%, var(--oz1), var(--oz2) 75%); }

/* =========================================================
   HESAPLAYICI — TEK EKRAN
   Başlık + form + sonuç birlikte görünür alana sığar; hesap yaparken sayfa kaymaz.
   Sığmayan içerik (ör. "Ayrıntılar") sayfayı değil yalnızca kendi panelini kaydırır.
   ========================================================= */
.hesap-ekran { --ust-h: 84px; display: flex; flex-direction: column; }
.hesap-ekran .hesap-hero.h2v { padding: calc(var(--ust-h) + 14px) 0 46px; text-align: left; }
.hesap-ekran .hesap-hero.h2v .kap { flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 14px; row-gap: 4px; }
.hesap-ekran .hesap-hero.h2v .kirinti { margin: 0; width: 100%; font-size: var(--fs-xs); }
.hesap-ekran .hesap-hero.h2v h1 { font-size: var(--fs-2xl) !important; line-height: 1.15; max-width: none; }
.hesap-ekran .hesap-hero.h2v p { margin: 0; font-size: var(--fs-sm) !important; opacity: .7; }
.hesap-ekran .hesap-govde.h2v { margin-top: -34px; padding-bottom: 14px; }
.hesap-ekran .hesap-govde .hesap-grid { gap: 14px; }

/* Panel iskeleti: üst ve alt sabit, orta kısım esner */
.hesap-ekran .sihirbaz, .hesap-ekran .s2v { display: flex; flex-direction: column; min-height: 0; }
.hesap-ekran .sb-ust { padding: 12px 18px 0; flex: none; }
.hesap-ekran .sb-adimlar button { padding: 4px 2px; gap: 8px; }
.hesap-ekran .sb-adimlar b { width: 24px; height: 24px; }
.hesap-ekran .sb-adimlar small { display: inline; margin-left: 4px; }
.hesap-ekran .sb-cizgi { margin-top: 10px; }
.hesap-ekran .sb-adim { padding: 14px 18px 8px; overflow-y: auto; min-height: 0; overscroll-behavior: contain; }
.hesap-ekran .sb-adim legend, .hesap-ekran .sb-baslik { font-size: var(--fs-2xs) !important; margin-bottom: 8px; }
.hesap-ekran .sb-baslik { margin-top: 14px; }
.hesap-ekran .kutucuk span { padding: 8px 6px; }
.hesap-ekran .kutucuk span i { font-size: var(--fs-base); }
.hesap-ekran .sb-adim .tarih-satir { margin-top: 10px; }
.hesap-ekran .sihirbaz .alan input, .hesap-ekran .sihirbaz .alan select { padding: 8px 10px; font-size: var(--fs-sm) !important; }
.hesap-ekran .sihirbaz .secim { gap: 6px; }
.hesap-ekran .sihirbaz .secim span { padding: 6px 12px; }
.hesap-ekran .buyuk-girdi, .hesap-ekran .kucuk-girdi { padding: 10px 12px; }
.hesap-ekran .bg-ust label, .hesap-ekran .kucuk-girdi label { font-size: var(--fs-sm) !important; }
.hesap-ekran .bg-ust .ik, .hesap-ekran .kucuk-girdi .ik { width: 30px; height: 30px; border-radius: 9px; }
.hesap-ekran .birlesik input, .hesap-ekran .buyuk-girdi .birlesik input, .hesap-ekran .kucuk-girdi .birlesik input { font-size: var(--fs-base) !important; padding: 8px 12px; }
.hesap-ekran .sb-not { margin: 0 0 10px; }
.hesap-ekran .sb-alt { flex: none; padding: 10px 18px 12px; }
.hesap-ekran .sb-alt .buton { padding: 9px 16px; }
.hesap-ekran #sb-ileri { min-width: 120px; }

/* Sonuç paneli: rakam → fiş → orman (esner) → eylemler */
.hesap-ekran .s2v { padding: 14px 18px; overflow-y: auto; overscroll-behavior: contain; }
.hesap-ekran .s2-ust, .hesap-ekran .s2-sayi, .hesap-ekran .fis, .hesap-ekran .sahne-lejant, .hesap-ekran .s2-detay, .hesap-ekran .sonuc-eylem { flex: none; }
.hesap-ekran .s2v .rozet { padding: 4px 10px; }
.hesap-ekran .s2-sayi { margin: 4px 0 0; display: flex; align-items: baseline; gap: 10px; }
.hesap-ekran .s2v .dev { font-size: var(--fs-3xl) !important; line-height: 1; }
.hesap-ekran .s2v .dev-alt { font-size: var(--fs-sm); }
.hesap-ekran .sonuc .fis.kisisel { margin: 10px 0; padding: 10px 14px; border-radius: 14px; }
.hesap-ekran .fis.kisisel .fis-bas { padding-bottom: 6px; }
.hesap-ekran .fis.kisisel .fis-bas h3 { font-size: var(--fs-sm) !important; margin-top: 2px; }
.hesap-ekran .fis.kisisel .fis-satir { padding: 5px 2px; }
.hesap-ekran .fis.kisisel .fs-no { width: 20px; height: 20px; border-radius: 6px; }
.hesap-ekran .fis.kisisel .fs-sol, .hesap-ekran .fis.kisisel .fs-sag { font-size: var(--fs-xs); }
.hesap-ekran .fis.kisisel .fs-sag b { font-size: var(--fs-base) !important; }
.hesap-ekran .fis.kisisel .fis-toplam { margin-top: 6px; padding: 8px 10px; }
.hesap-ekran .fis.kisisel .fis-toplam p { font-size: var(--fs-xs); }
.hesap-ekran .s2v .sahne { flex: 1 1 auto; min-height: 96px; margin: 0 0 6px; padding: 8px 10px; display: flex; align-items: center; justify-content: center; }
.hesap-ekran .s2v .sahne svg { width: 100%; height: 100%; max-height: 200px; }
.hesap-ekran .s2v .bos-sahne { min-height: 0; }
.hesap-ekran .s2v .bos-sahne b { font-size: var(--fs-base) !important; }
.hesap-ekran .sahne-lejant { margin: 0 0 6px; }
.hesap-ekran .s2-detay { margin-top: 4px; padding-top: 8px; }
.hesap-ekran .s2v .sonuc-eylem { padding-top: 10px; gap: 8px; }
.hesap-ekran .s2v .sonuc-eylem .buton { padding: 8px 14px; }

/* Masaüstü/dizüstü: iki panel yan yana, ikisi de görünür yüksekliğe tam sığar */
@media (min-width: 1001px) and (min-height: 560px) {
  .hesap-ekran { height: 100vh; height: 100dvh; }
  .hesap-ekran .hesap-hero { flex: none; }
  .hesap-ekran .hesap-govde.h2v { flex: 1 1 auto; min-height: 0; }
  .hesap-ekran .hesap-govde .hesap-grid { height: 100%; grid-template-rows: minmax(0, 1fr); }
  .hesap-ekran .sihirbaz, .hesap-ekran .s2v { height: 100%; align-self: stretch; }
}
/* Tablet ve telefon: form görünür alana sığar, canlı sonuç alttaki çubukta izlenir */
@media (max-width: 1000px) {
  .hesap-ekran { --ust-h: 62px; }
  .hesap-ekran .hesap-hero.h2v { padding-bottom: 40px; }
  .hesap-ekran .sihirbaz { max-height: calc(100dvh - var(--ust-h) - 96px); }
  .hesap-ekran .s2v { overflow: visible; }
  .hesap-ekran .s2v .sahne { min-height: 150px; }
}
@media (max-width: 560px) {
  .hesap-ekran .hesap-hero.h2v p { display: none; }
  .hesap-ekran .sb-adimlar small { display: none; }
  .hesap-ekran .sb-alt { flex-wrap: nowrap; }
  .hesap-ekran .sb-ornek { order: 0; width: auto; font-size: var(--fs-xs); }
}
/* Eylem düğmeleri panel kaysa bile hep görünür kalsın */
.hesap-ekran .s2v .sonuc-eylem { position: sticky; bottom: -14px; margin: 0 -18px -14px; padding: 10px 18px 14px; background: var(--gece); z-index: 2; }
/* Kısa ekranlar (dizüstü, 768 px ve altı yükseklik): ikincil parçaları sadeleştir */
@media (min-width: 1001px) and (max-height: 780px) {
  .hesap-ekran .hesap-hero.h2v { padding-bottom: 40px; }
  .hesap-ekran .hesap-hero.h2v .kirinti { display: none; }
  .hesap-ekran .fis.kisisel .fis-bas { display: none; }
  .hesap-ekran .s2v .sahne { min-height: 72px; }
  .hesap-ekran .sahne-lejant { display: none; }
  .hesap-ekran .bg-ust { margin-bottom: 6px; }
  .hesap-ekran .buyuk-girdi { margin-bottom: 8px; }
  .hesap-ekran .hizli { margin-top: 6px; }
}
/* Telefon: form, alttaki canlı sonuç çubuğunun üstünde kalacak kadar yüksek */
@media (max-width: 1000px) {
  .hesap-ekran .sihirbaz { max-height: calc(100dvh - 200px); min-height: 380px; }
}
@media (max-width: 560px) {
  .hesap-ekran .hesap-hero.h2v { padding-bottom: 38px; }
  .hesap-ekran .hesap-hero.h2v .kirinti { display: none; }
  .hesap-ekran .sihirbaz { max-height: calc(100dvh - 170px); }
  .hesap-ekran .kutucuk { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .hesap-ekran .kutucuk span { flex-direction: column; gap: 2px; padding: 6px 2px; font-size: var(--fs-xs) !important; }
  .hesap-ekran .sb-adim .tarih-satir { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .hesap-ekran .sihirbaz .secim span { padding: 6px 10px; }
  .hesap-ekran .sb-ornek { white-space: nowrap; }
  .hesap-ekran .sb-adim { padding: 12px 14px 8px; }
  .hesap-ekran .sb-ust { padding: 10px 14px 0; }
  .hesap-ekran .sb-alt { padding: 10px 14px 12px; gap: 8px; }
  .hesap-ekran .sb-alt .buton { padding: 9px 12px; }
  .hesap-ekran #sb-ileri { min-width: 0; }
}
@media (max-width: 1000px) {
  .hesap-ekran .s2v .sonuc-eylem { position: static; margin: 0; padding: 10px 0 0; background: none; }
}

/* =========================================================
   PERFORMANS 2: sürekli çalışan süslemeleri hafiflet
   ========================================================= */
/* Üst menü her zaman ekranda olduğu için logosunun animasyonları hiç uyumuyordu:
   parıltı "left" ile (her karede yerleşim + boyama), nabız box-shadow ile (her karede boyama) çalışıyordu.
   İkisi de yalnızca transform/opacity ile ve birkaç turla sınırlı. */
.logo-isaret .parilti, .ab-logo .parilti { left: 0; transform: translateX(-160%) rotate(25deg); animation: parilti-t 4.5s ease-in-out 4; will-change: transform; }
.ab-logo .parilti { animation-duration: 5s; animation-iteration-count: infinite; }
@keyframes parilti-t { 0%, 60% { transform: translateX(-160%) rotate(25deg); } 85%, 100% { transform: translateX(300%) rotate(25deg); } }
.logo-isaret::before { box-shadow: none; border: 2px solid rgba(143,209,138,.55); opacity: 0; animation: logo-nabiz-t 2.8s ease-out 4; }
@keyframes logo-nabiz-t { 0% { transform: scale(1); opacity: .9; } 70%, 100% { transform: scale(1.45); opacity: 0; } }
.logo-isaret svg { animation-iteration-count: 6; }
.logo-isaret.gorsel img { animation-iteration-count: 4; }
/* Diğer nabızlar da box-shadow yerine halka + transform */
.kurum-rozet .nokta { position: relative; animation: none; box-shadow: none; }
.kurum-rozet .nokta::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: rgba(143,209,138,.6); animation: nokta-nabiz 2s ease-out infinite; }
@keyframes nokta-nabiz { from { transform: scale(1); opacity: .8; } to { transform: scale(3.2); opacity: 0; } }
/* Arka plan bulanıklığı (backdrop-filter) altındaki her hareketi yeniden bulanıklaştırır; opak zemin yeterli */
.esitlik.koyu { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(255,255,255,.07); }
.pm-arka { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(6,18,12,.78); }
@media (max-width: 1100px) { .menu { backdrop-filter: none; -webkit-backdrop-filter: none; } }
/* Düşen yapraklar: 3B dönüş yerine düz dönüş (her yaprak için ayrı 3B katman açılmasın) */
@keyframes don { from { transform: rotate(-40deg); } to { transform: rotate(50deg); } }
.yapraklar i { will-change: transform, opacity; }
/* Paralaks kabı GPU katmanında */
.peyzaj { will-change: transform; }
/* Zayıf cihazlarda (config.js → html.hafif) süsleri tamamen kapat */
.hafif .yapraklar { display: none; }
.hafif .sallan, .hafif .logo-isaret *, .hafif .logo-isaret::before, .hafif .kurum-rozet .nokta::after { animation: none !important; }

/* =========================================================
   HARİTA MOZAİĞİ — hediye ibaresi (anasayfa.js → logoNot)
   Harita oluşunca ortada gölgeli belirir, 7 sn sonra kaybolur.
   ========================================================= */
.hediye-not { position: absolute; inset: 0; z-index: 3; padding: 16px; border-radius: inherit;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; color: #f4fbec; pointer-events: none;
  background: radial-gradient(ellipse 62% 58% at 50% 50%, rgba(3,20,11,.86), rgba(3,20,11,.58) 65%, rgba(3,20,11,.32));
  text-shadow: 0 2px 14px rgba(0,0,0,.65), 0 1px 2px rgba(0,0,0,.8);
  opacity: 0; transition: opacity 1s ease; }
.hediye-not > * { transform: translateY(10px); transition: transform 1.2s cubic-bezier(.2,.8,.2,1); }
.hediye-not.acik { opacity: 1; }
.hediye-not.acik > * { transform: none; }
.hediye-not .hn-ust { font-size: clamp(.95rem, 1.55vw, 1.35rem); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #e4f7d6; text-shadow: 0 0 18px rgba(143,209,138,.45), 0 2px 10px rgba(0,0,0,.7); }
.hediye-not b { font-family: var(--serif); font-weight: 500; font-size: clamp(1.35rem, 3.2vw, 2.6rem); line-height: 1.15; }
.hediye-not em { font-style: normal; font-weight: 700; color: #c8ee9e; font-variant-numeric: tabular-nums; }
.hediye-not small { margin-top: 6px; font-size: var(--fs-xs); font-weight: 700; opacity: .7; }
@media (max-width: 560px) { .hediye-not .hn-ust { font-size: .8rem; letter-spacing: .1em; } }

/* =========================================================
   ÜST MENÜ — "Kastamonu Üniversitesi / Sanal Ormanı" yazı imi
   Büyük, iki satır; açılışta harfler sırayla filizlenir, "Ormanı" ışıkla parlar,
   küçük fidan sallanır. Hepsi transform/opacity ile ve birkaç turla sınırlı (sürekli boyama yok).
   ========================================================= */
.ust .logo-yazi { display: flex; flex-direction: column; gap: 5px; white-space: nowrap; }
.ust .logo-yazi small { order: -1; display: flex; align-items: center; gap: 8px; margin: 0; font-family: var(--sans); font-size: clamp(11px, .95vw, 14.5px); font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: #e4f7d6; opacity: 1; }
.ust .logo-yazi small::before { content: ""; width: 18px; height: 2px; border-radius: 2px; background: var(--filiz); transform-origin: 0 50%; animation: ly-cizgi .9s cubic-bezier(.2,.8,.2,1) .1s both; }
.ust .logo-yazi b { position: relative; display: flex; align-items: baseline; gap: .28em; font-family: var(--serif); font-weight: 700; font-size: clamp(1.7rem, 2.5vw, 2.45rem); line-height: .95; letter-spacing: -.01em; font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 144; color: var(--kagit); }
.ust .logo-yazi b em { font-family: "Gloock", var(--serif); font-style: normal; font-weight: 400; font-size: 1.08em; letter-spacing: .01em; color: #8fd18a; }
/* "Ormanı": harflerin üzerinden soldan sağa geçen ışık (3 tur) */
.ust .logo-yazi em .h { animation: ly-harf .7s cubic-bezier(.2,1.4,.4,1) calc(.15s + var(--i) * 45ms) both, ly-isik 3s ease-in-out calc(1.3s + var(--j) * 80ms) 3; }
@keyframes ly-isik { 0%, 100% { color: #8fd18a; text-shadow: none; } 12% { color: #f1ffe6; text-shadow: 0 0 14px rgba(196,240,170,.85); } 28% { color: #8fd18a; text-shadow: none; } }
@keyframes ly-cizgi { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* harf harf filizlenme (config.js harfleri span'e böler) */
.logo-yazi .h { display: inline-block; opacity: 0; transform: translateY(.45em) rotate(6deg); animation: ly-harf .7s cubic-bezier(.2,1.4,.4,1) calc(.15s + var(--i) * 45ms) both; }
@keyframes ly-harf { to { opacity: 1; transform: none; } }
/* "Ormanı"nın ucundaki fidan */
.ly-filiz { width: .62em; height: .62em; align-self: flex-start; margin: -.05em 0 0 -.12em; fill: none; stroke: var(--filiz); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transform-origin: 50% 100%;
  animation: ly-filiz-cik .8s cubic-bezier(.3,1.6,.5,1) 1.1s both, ly-filiz-salla 3.2s ease-in-out 1.9s 5; }
.ly-filiz path:not(:first-child) { fill: rgba(143,209,138,.35); }
@keyframes ly-filiz-cik { from { transform: scale(0); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes ly-filiz-salla { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-12deg); } 65% { transform: rotate(8deg); } }
/* üzerine gelince yeniden canlansın */
/* filizlenme animasyonu da listede kalmalı: yoksa harfler başlangıçtaki opacity: 0'a döner ve kaybolur */
.ust .logo:hover .logo-yazi em .h { animation: ly-harf 0s both, ly-isik 1.6s ease-in-out calc(var(--j) * 60ms); }
.ust .logo:hover .ly-filiz { animation: ly-filiz-salla 1.2s ease-in-out; }
.ust.dolu .logo-yazi b { font-size: clamp(1.5rem, 2.15vw, 2.1rem); }
.ust .logo-yazi b { transition: font-size .35s; }
@media (max-width: 560px) {
  .ust .logo-yazi { gap: 3px; }
  .ust .logo-yazi small { display: flex; font-size: 9.5px; letter-spacing: .14em; gap: 5px; }
  .ust .logo-yazi small::before { width: 10px; }
  .ust .logo-yazi b, .ust.dolu .logo-yazi b { font-size: 1.45rem; }
}
@media (max-width: 400px) { .ust .logo-yazi b, .ust.dolu .logo-yazi b { font-size: 1.25rem; } .ust .logo-yazi small { font-size: 8.5px; letter-spacing: .1em; } }
@media (prefers-reduced-motion: reduce) { .logo-yazi .h, .ust .logo-yazi em .h, .ly-filiz, .ust .logo-yazi small::before { animation: none !important; opacity: 1; transform: none; } }
.hafif .logo-yazi .h { animation-duration: .01s; animation-delay: 0s; }
.hafif .ust .logo-yazi em .h { animation: none; opacity: 1; transform: none; } .hafif .ly-filiz { animation: none; }
/* Harita mozaiğinin hareketli bölgesi (bayrak + yazı) için küçük üst tuval: ana tuval her karede boyanmaz */
.orman-canli { position: absolute; display: none; z-index: 1; pointer-events: none; }

/* =========================================================
   İLK EKRAN: hero + kayan sarı bant + canlı sayaç sayfa açılır açılmaz birlikte görünsün.
   Hero, ekran yüksekliğinden bant ve canlı şeridin boyu (--ilk-alt, anasayfa.js ölçer) kadar kısa;
   orman manzarası (peyzaj) kalan boşluğu esneyerek doldurur.
   ========================================================= */
@media (min-width: 761px) {
  .hero { min-height: calc(100svh - var(--ilk-alt, 190px)); padding-top: clamp(92px, 12vh, 132px); justify-content: flex-start; }
  .hero .ust-bant { margin-bottom: clamp(14px, 3vh, 36px); }
  .hero .slayt-kontrol { margin-top: clamp(16px, 3vh, 36px); }
  .hero .peyzaj { flex: 1 0 auto; height: auto; min-height: clamp(110px, 16vh, 220px); margin-top: -24px; }
}
/* kısa dizüstü ekranları (≈ 768–860 px yükseklik): slayt metnini biraz sıkılaştır ki bant ve sayaç sığsın */
@media (min-width: 761px) and (max-height: 860px) {
  .hero { padding-top: 88px; }
  .hero .peyzaj { min-height: clamp(84px, 11vh, 140px); }
  .hero h1 { font-size: clamp(2.1rem, 5.6vh, 3rem) !important; }
  .hero .etiket { margin-bottom: 12px; }
  .hero .alt { margin-top: 14px; }
  .hero .eylem { margin-top: 20px; }
  .hero .slayt-kontrol { margin-top: 14px; }
}
@media (min-width: 761px) and (max-height: 860px) {
  .hero .sayac-kart { padding: 20px 24px; }
  .hero .hesap-onizleme .onz-satir { padding: 7px 0; }
  .hero .onz-sonuc { margin-top: 6px; }
  .hero .onz-agac { height: 46px; }
  .hero .onz-agac svg { width: 30px; height: 45px; }
  .hero .mini-buyume { height: 100px; margin-top: 14px; padding-top: 12px; }
  .hero .kule { margin-top: 12px; padding-top: 12px; }
}
@media (min-width: 761px) and (max-height: 760px) { .hero .peyzaj { min-height: 56px; } .hero { padding-top: 84px; } .hero .slayt-kontrol { margin-top: 10px; } }
/* ilk ekrana sığsın diye etki şeridi ve canlı satır masaüstünde kompakt: simge solda, sayı ve açıklama sağda */
@media (min-width: 961px) {
  .serit-ic > div { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; align-items: center; padding: 16px 22px; }
  .serit .ik { grid-row: span 2; width: 30px; height: 30px; margin: 0; }
  .serit b, .serit-ic > div > b { font-size: var(--fs-2xl); line-height: 1.1; }
  .serit-ic > div > span { line-height: 1.3; }
}
@media (min-width: 761px) { .canli-ic { padding: 14px 0; } }
/* Peyzaj üstten kesik bitmesin: çizim (1440×330) her zaman doğal oranında kalır, alan kısaysa yukarı taşar;
   üst kenarı gökyüzüne yumuşakça karışır. Alan uzunsa yanlardan kırpılarak doldurur. */
@media (min-width: 761px) {
  .hero .peyzaj > svg { top: auto; bottom: 0; height: auto; aspect-ratio: 1440 / 330; min-height: 100%; max-height: calc(100% + 110px);
    -webkit-mask-image: linear-gradient(to top, #000 58%, rgba(0,0,0,.55) 78%, transparent 100%);
            mask-image: linear-gradient(to top, #000 58%, rgba(0,0,0,.55) 78%, transparent 100%); }
}

/* =========================================================
   HERO SEKMELERİ — tek parça, koyu zeminli sekme çubuğu
   Arkadaki ağaçlar yazıyı bozmasın: neredeyse opak zemin (bulanıklık filtresi yok, işlemciyi yormaz).
   ========================================================= */
.hero .sekmeler { flex-wrap: nowrap; gap: 4px; padding: 5px; border-radius: 18px; background: rgba(7,22,14,.9); border: 1px solid rgba(255,255,255,.1); box-shadow: 0 14px 34px -16px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.05); }
.hero .sekmeler button { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 11px 20px 13px 12px; font-size: var(--fs-base) !important; border: 0; border-radius: 13px; background: transparent; opacity: 1; color: rgba(245,240,228,.68); transition: background .3s, color .3s; }
.hero .sekmeler button span { display: grid; place-items: center; flex: none; width: 26px; height: 26px; margin: 0; border-radius: 50%; background: rgba(255,255,255,.07); color: rgba(245,240,228,.6); font-size: 10.5px; font-weight: 800; letter-spacing: .02em; opacity: 1; transition: background .3s, color .3s; }
.hero .sekmeler button:hover { color: var(--kagit); background: rgba(255,255,255,.05); }
.hero .sekmeler button[aria-selected="true"] { color: #fff; background: linear-gradient(180deg, rgba(143,209,138,.2), rgba(143,209,138,.1)); box-shadow: inset 0 0 0 1px rgba(143,209,138,.38); }
.hero .sekmeler button[aria-selected="true"] span { background: var(--filiz); color: var(--gece); }
/* süre çubuğu: düğmenin içinde, köşelere taşmadan */
.hero .sekmeler button i { left: 14px; right: 14px; width: auto; bottom: 5px; height: 2px; border-radius: 2px; }
.hero .oklar button { background: rgba(7,22,14,.9); border-color: rgba(255,255,255,.14); box-shadow: 0 10px 24px -14px rgba(0,0,0,.75); }
.hero .oklar button:hover { background: var(--kagit); color: var(--gece); }
@media (max-width: 760px) { .hero .sekmeler button { justify-content: center; padding: 9px 6px 11px; gap: 6px; white-space: nowrap; font-size: var(--fs-xs) !important; } .hero .sekmeler button span { width: 20px; height: 20px; font-size: 9px; } }
@media (max-width: 480px) { .hero .sekmeler button span { display: none; } }

/* =========================================================
   YÖNTEM ADIMLARI — büyük duraklar
   Daire 44 → 68 px; numara, "ADIM" etiketi ve başlık da büyüdü. Kesikli iz çizgisi dairelerin ortasından geçer
   (üst boşluk 8 px + daire yarıçapı − çizgi kalınlığının yarısı).
   ========================================================= */
.ym-sekmeler button { gap: 14px; }
.ym-sekmeler button b { width: 68px; height: 68px; font-size: 1.6rem; }
.ym-sekmeler button span { font-size: var(--fs-xl) !important; gap: 5px; }
.ym-sekmeler button span small { font-size: var(--fs-xs); letter-spacing: .18em; }
.ym-iz { top: 40px; }
@media (max-width: 760px) {
  .ym-sekmeler button { gap: 10px; }
  .ym-sekmeler button b { width: 48px; height: 48px; font-size: 1.15rem; }
  .ym-sekmeler button span { font-size: var(--fs-sm) !important; }
  .ym-sekmeler button span small { font-size: var(--fs-2xs); letter-spacing: .1em; }
  .ym-iz { top: 30px; }
}
/* tamamlanan adım: numara yerine büyük ✓ */
.ym-sekmeler button.bitti b { font-size: 0; }
.ym-sekmeler button.bitti b::after { content: "✓"; font-size: 1.55rem; font-family: var(--sans); font-weight: 800; }
@media (max-width: 760px) { .ym-sekmeler button.bitti b::after { font-size: 1.1rem; } }

/* =========================================================
   YÖNTEM — çizgi üzerindeki yolcular (anasayfa.js → yolcuKur)
   Yolcu, adımın süresi (--sure) boyunca iki daire arasındaki çizgide ilerler; varınca adım değişir.
   Yalnızca transform/opacity; durunca (.durdu) o da durur; zayıf cihazda ve hareketi azalt ayarında yok.
   ========================================================= */
.ym-yol { position: absolute; height: 0; z-index: 2; pointer-events: none; }
.ym-yol .yy-arac { position: absolute; left: 0; bottom: -3px; transform-origin: 0 100%; transform: scale(var(--yy-s, 1)); overflow: visible; }
.ym-yol.yuru .yy-arac { animation: yy-git var(--sure, 5s) linear forwards; }
@keyframes yy-git { from { transform: translateX(0) scale(var(--yy-s, 1)); } to { transform: translateX(var(--w)) scale(var(--yy-s, 1)); } }
.ym-sekmeler.durdu .ym-yol, .ym-sekmeler.durdu .ym-yol * { animation-play-state: paused !important; }

/* kamyon: tekerler döner, kasa hafif sarsılır; yolun yarısında tomruklar "puf" ile kâğıda dönüşür */
.yy-teker { fill: #0b1f14; stroke: #cfe9c2; stroke-width: 1.6; stroke-dasharray: 3 2.2; transform-box: fill-box; transform-origin: center; }
.ym-yol.yuru .yy-teker { animation: yy-don .5s linear infinite; }
@keyframes yy-don { to { transform: rotate(360deg); } }
.ym-yol.yuru .yy-govde { animation: yy-sars .32s ease-in-out infinite alternate; }
@keyframes yy-sars { to { transform: translateY(-.8px); } }
.ym-yol.yuru .yy-kutuk { animation: yy-git-yuk var(--sure, 5s) linear forwards; }
.yy-kagitlar { opacity: 0; }
.ym-yol.yuru .yy-kagitlar { animation: yy-gel-yuk var(--sure, 5s) linear forwards; }
@keyframes yy-git-yuk { 0%, 46% { opacity: 1; } 52%, 100% { opacity: 0; } }
@keyframes yy-gel-yuk { 0%, 48% { opacity: 0; } 56%, 100% { opacity: 1; } }
.yy-puf { opacity: 0; transform-box: fill-box; transform-origin: center; }
.ym-yol.yuru .yy-puf { animation: yy-puf var(--sure, 5s) linear forwards; }
@keyframes yy-puf { 0%, 44% { opacity: 0; transform: scale(.2); } 50% { opacity: .9; transform: scale(1); } 58%, 100% { opacity: 0; transform: scale(1.5); } }

/* çiftçi: yürür, kovadan su damlar; geçtiği yerde fidanlar çıkar */
.yy-bacak { transform-box: fill-box; transform-origin: 50% 0; }
.ym-yol.yuru .yy-b1 { animation: yy-adim .5s ease-in-out infinite alternate; }
.ym-yol.yuru .yy-b2 { animation: yy-adim .5s ease-in-out infinite alternate-reverse; }
@keyframes yy-adim { from { transform: rotate(-16deg); } to { transform: rotate(16deg); } }
.yy-damla { opacity: 0; }
.ym-yol.yuru .yy-damla { animation: yy-damla .7s ease-in infinite; }
.ym-yol.yuru .yy-damla.d2 { animation-delay: .23s; } .ym-yol.yuru .yy-damla.d3 { animation-delay: .46s; }
@keyframes yy-damla { 0% { opacity: 1; transform: translate(0, 0); } 100% { opacity: 0; transform: translate(2px, 16px); } }
.yy-fidan { position: absolute; bottom: -2px; left: calc(var(--o) * 100%); width: 16px; height: 20px; margin-left: -8px; transform: scale(0); transform-origin: 50% 100%;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 30'%3E%3Cpath d='M12 30V14' stroke='%235aa765' stroke-width='2.4' stroke-linecap='round'/%3E%3Cpath d='M12 16C12 9 7 6 2 7c0 6 4 9 10 9z' fill='%238fd18a'/%3E%3Cpath d='M12 13c0-6 4-9 10-9 0 6-4 9-10 9z' fill='%237fbf6a'/%3E%3C/svg%3E"); }
.ym-yol.yuru .yy-fidan { animation: yy-filiz .5s cubic-bezier(.3,1.7,.5,1) calc(var(--sure, 5s) * var(--o) * .9) forwards; }
@keyframes yy-filiz { to { transform: scale(var(--yy-s, 1)); } }

/* kâğıt uçak: çizginin üstünde süzülür */
.ym-yol .yy-ucak { bottom: 5px; }
.ym-yol.yuru .yy-ucak { animation: yy-git var(--sure, 5s) linear forwards, yy-suzul 1.1s ease-in-out infinite alternate; }
.yy-ucak path { transform-box: view-box; }
@keyframes yy-suzul { from { translate: 0 -5px; rotate: -4deg; } to { translate: 0 4px; rotate: 3deg; } }

@media (prefers-reduced-motion: reduce) { .ym-yol { display: none; } }
.hafif .ym-yol { display: none; }
.hediye-not b { text-wrap: balance; max-width: 22em; }
.oz-metin .oz-not { display: block; margin-top: 6px; font-size: var(--fs-sm); line-height: 1.45; color: rgba(245,240,228,.62); }

/* =========================================================
   KÜÇÜK DOKUNUŞLAR — mikro etkileşimler
   Hepsi yalnızca transform / opacity / arka plan konumu ile; çoğu yalnızca fareyle üzerine gelince çalışır.
   Zayıf cihazda (.hafif) ve "hareketi azalt" ayarında kapalı.
   ========================================================= */
/* 1 · Düğmeler: yüzeyden geçen ışık, basılma hissi */
.buton { background-image: linear-gradient(110deg, transparent 38%, rgba(255,255,255,.5) 50%, transparent 62%); background-size: 260% 100%; background-position: 135% 0; background-repeat: no-repeat;
  transition: transform .2s, box-shadow .2s, background-color .2s, background-position .75s cubic-bezier(.3,.7,.3,1); }
.buton:hover { background-position: -35% 0; }
.buton:active { transform: translateY(0) scale(.97); transition-duration: .08s; }
.buton svg { transition: transform .3s cubic-bezier(.3,1.6,.5,1); }
.buton:hover svg { transform: translateX(3px); }

/* 2 · Kartlar: simge ve çizimler fareyle hafifçe canlanır */
.kars-ik { transition: transform .45s cubic-bezier(.3,1.6,.5,1); transform-origin: 30% 80%; }
.kars:hover .kars-ik { transform: rotate(-7deg) scale(1.12); }
.oneri .o-sahne svg { transition: transform .5s cubic-bezier(.3,1.5,.5,1); }
.oneri:hover .o-sahne svg { transform: scale(1.06) translateY(-3px); }
.oneri .o-no { transition: transform .4s, color .3s; }
.oneri:hover .o-no { transform: translateY(-2px); color: var(--c); }
.yil-kart .a { transition: transform .35s cubic-bezier(.3,1.6,.5,1); transform-origin: 0 100%; }
.yil-kart:hover .a { transform: scale(1.06); }

/* 3 · Başlıklar: vurgu kelimesinin altına el çizimi gibi bir çizgi çekilir; üstteki etiket çizgisi soldan uzar */
h2 em { background: linear-gradient(currentColor, currentColor) no-repeat 0 94% / 0% .07em; transition: background-size 1s cubic-bezier(.6,0,.2,1) .35s; padding-bottom: .04em; }
h2 em.cizildi { background-size: 100% .07em; }
.belir .etiket::before { transform: scaleX(0); transform-origin: 0 50%; transition: transform .8s cubic-bezier(.3,1,.3,1) .2s; }
.belir.gorundu .etiket::before { transform: none; }

/* 4 · Menü: altta ortadan açılan ince çizgi */
.menu a:not(.buton):not(.ev-link) { background: linear-gradient(var(--filiz), var(--filiz)) no-repeat 50% calc(100% - 4px) / 0 2px; transition: .2s, background-size .3s cubic-bezier(.3,1,.3,1); }
.menu a:not(.buton):not(.ev-link):hover { background-size: 46% 2px; }
.menu a.aktif:not(.buton):not(.ev-link) { background-size: 0 2px; }

/* 5 · Grafik ↔ tablo: aynı yıl birlikte vurgulanır */
.grafik .sutun { transition: opacity .25s; }
.grafik.vurgulu .sutun { opacity: .45; }
.grafik.vurgulu .sutun.vurgu { opacity: 1; }
.grafik .sutun .cubuk { transition: transform .3s cubic-bezier(.3,1.5,.5,1); transform-origin: 50% 100%; }
.grafik .sutun.vurgu .cubuk { transform: scaleX(1.06); }
#tablo tbody tr { transition: background-color .25s; }
#tablo tbody tr.vurgu { background-color: rgba(143,209,138,.16); }
#tablo tbody tr.vurgu td:first-child b { color: var(--yaprak); }

/* 6 · Sayaçlar: saymayı bitirince kısa bir ışıltı */
@keyframes sayi-isilti { 0% { text-shadow: 0 0 0 transparent; } 35% { text-shadow: 0 0 18px rgba(143,209,138,.85), 0 0 2px rgba(143,209,138,.6); } 100% { text-shadow: 0 0 0 transparent; } }
.sayi-isilti { animation: sayi-isilti 1.1s ease-out; }

/* 7 · Koyu kartlarda imleci izleyen yumuşak ışık (yalnızca fare olan cihazlarda) */
.isikli { position: relative; overflow: hidden; }
.isik-iz { position: absolute; left: 0; top: 0; width: 420px; height: 420px; margin: -210px 0 0 -210px; border-radius: 50%; pointer-events: none; z-index: 0;
  background: radial-gradient(closest-side, rgba(143,209,138,.16), rgba(143,209,138,0)); opacity: 0; transition: opacity .4s; will-change: transform; }
.isikli:hover .isik-iz { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .buton, .kars-ik, .oneri .o-sahne svg, .yil-kart .a, h2 em, .belir .etiket::before { transition: none !important; }
  h2 em { background-size: 100% .07em; } .belir .etiket::before { transform: none; } .isik-iz { display: none; }
}
.hafif h2 em { transition: none; background-size: 100% .07em; } .hafif .belir .etiket::before { transition: none; transform: none; } .hafif .isik-iz { display: none; } .hafif .sayi-isilti { animation: none; }

/* =========================================================
   ORMAN SAKİNLERİ — çizgi film hayvanları (config.js → SO.CIZGI / SO.hayvan / SO.yirtici)
   Bacak, kuyruk, kanat ve baş ayrı gruplarda hareket eder; yalnızca transform / opacity.
   Bölüm ekran dışındayken .uyku ile durur; zayıf cihazda ve "hareketi azalt"ta yoklar.
   ========================================================= */
.cz { display: block; }
.cz svg { display: block; width: 100%; height: auto; overflow: visible; }
.cz.zipla { animation: hy-zipla .55s cubic-bezier(.3,1.6,.5,1); }
@keyframes hy-zipla { 30% { transform: translateY(-12%) scale(1.04, .96); } 60% { transform: translateY(0) scale(.97, 1.03); } }
@keyframes hy-gor { 0% { opacity: 0; } 6%, 92% { opacity: 1; } 100% { opacity: 0; } }
/* ortak: bacak salınımı (a1/a2 karşılıklı) */
.cz .a1, .cz .a2 { transform-box: fill-box; transform-origin: 50% 0; }
@keyframes cz-adim { from { transform: rotate(-22deg); } to { transform: rotate(22deg); } }
@keyframes cz-sek { to { transform: translateY(-3%); } }
@keyframes cz-kuyruk { from { transform: rotate(-7deg); } to { transform: rotate(8deg); } }

/* --- Hero --- */
.hayvanlar { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.hy { position: absolute; bottom: 3%; pointer-events: auto; cursor: pointer; opacity: 0; visibility: hidden; }
.hy.oyna { visibility: visible; }
/* sincap: kütüğün arkasından palamuduyla yükselir, bakınır, kuyruğunu sallar */
.hy-sincap { width: clamp(50px, 4.6vw, 74px); left: 30%; }
.cz-sincapKutuk .sc-govde { transform: translateY(46%); }
.hy-sincap.oyna { animation: hy-gor 5.2s linear both; }
.hy-sincap.oyna .sc-govde { animation: sc-cik 5.2s cubic-bezier(.3,1.3,.5,1) both; }
.hy-sincap.oyna .sc-bas { transform-box: fill-box; transform-origin: 50% 90%; animation: sc-bak 5.2s ease-in-out both; }
.hy-sincap.oyna .sc-kuyruk { transform-box: fill-box; transform-origin: 90% 95%; animation: cz-kuyruk .6s ease-in-out 1.2s 5 alternate; }
@keyframes sc-cik { 0%, 6% { transform: translateY(46%); } 18%, 80% { transform: translateY(0); } 90%, 100% { transform: translateY(46%); } }
@keyframes sc-bak { 0%, 24% { transform: none; } 34%, 44% { transform: rotate(-14deg); } 54%, 64% { transform: rotate(10deg); } 72%, 100% { transform: none; } }
/* tilki: soldan sağa tırıs */
.hy-tilki { width: clamp(64px, 6vw, 98px); left: 0; }
.hy-tilki.oyna { animation: tk-yol 11s linear both; }
@keyframes tk-yol { 0% { opacity: 0; transform: translateX(-120px); } 4% { opacity: 1; } 96% { opacity: 1; } 100% { opacity: 0; transform: translateX(calc(100vw + 40px)); } }
.hy-tilki.oyna .tk-govde { animation: cz-sek .34s ease-in-out infinite alternate; }
.hy-tilki.oyna .a1 { animation: cz-adim .34s ease-in-out infinite alternate; }
.hy-tilki.oyna .a2 { animation: cz-adim .34s ease-in-out infinite alternate-reverse; }
.hy-tilki.oyna .tk-kuyruk { transform-box: fill-box; transform-origin: 100% 60%; animation: cz-kuyruk .8s ease-in-out infinite alternate; }
/* ayı: sağ kenardan başını uzatır, el sallar, göz kırpar */
.hy-ayi { width: clamp(64px, 6vw, 100px); right: 1.5%; bottom: 3%; transform-origin: 100% 100%; }
.hy-ayi.oyna { animation: ay-cik 7s cubic-bezier(.3,1.2,.5,1) both; }
@keyframes ay-cik { 0% { opacity: 0; transform: translateX(90%) rotate(10deg); } 12%, 84% { opacity: 1; transform: translateX(0) rotate(-5deg); } 100% { opacity: 0; transform: translateX(90%) rotate(10deg); } }
.cz-ayi .ay-pati { transform-box: fill-box; transform-origin: 50% 100%; }
.hy-ayi.oyna .ay-pati { animation: ay-salla .42s ease-in-out 1s 6 alternate; }
@keyframes ay-salla { from { transform: rotate(-18deg); } to { transform: rotate(16deg); } }
.cz-ayi .ay-goz { transform-box: fill-box; transform-origin: 50% 50%; }
.hy-ayi.oyna .ay-goz { animation: ay-kirp 5.6s linear both; }
@keyframes ay-kirp { 0%, 55% { transform: none; } 57% { transform: scaleY(.1); } 59%, 100% { transform: none; } }
/* geyik: arka planda yürür, yolun ortasında başını eğip otlar */
.hy-geyik { width: clamp(64px, 5.6vw, 92px); left: 0; bottom: 14%; }
.hy-geyik.oyna { animation: gy-yol 15s linear both; }
@keyframes gy-yol { 0% { opacity: 0; transform: translateX(-110px); } 4% { opacity: 1; } 42% { transform: translateX(40vw); } 60% { transform: translateX(40vw); } 96% { opacity: 1; } 100% { opacity: 0; transform: translateX(calc(100vw + 40px)); } }
.hy-geyik.oyna .a1 { animation: cz-adim .5s ease-in-out infinite alternate, gy-dur 15s linear both; }
.hy-geyik.oyna .a2 { animation: cz-adim .5s ease-in-out infinite alternate-reverse, gy-dur 15s linear both; }
@keyframes gy-dur { 0%, 41% { opacity: 1; } 42%, 59% { opacity: 1; } 60%, 100% { opacity: 1; } }
.cz-geyik .gy-bas { transform-box: view-box; transform-origin: 54px 42px; }
.hy-geyik.oyna .gy-bas { animation: gy-otla 15s ease-in-out both; }
@keyframes gy-otla { 0%, 44% { transform: none; } 48%, 56% { transform: rotate(48deg); } 52% { transform: rotate(44deg); } 60%, 100% { transform: none; } }

/* --- Gökyüzü: kanat çırpan kartallar --- */
.gokyuzu { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.yirtici { position: absolute; left: 0; }
.yirtici .y-ic { animation: y-salin 6s ease-in-out infinite alternate; }
.cz-kartal-ic, .yirtici .kt-sol, .yirtici .kt-sag { transform-box: view-box; }
.yirtici .kt-sol { transform-origin: 47px 25px; animation: kt-sol 2.4s ease-in-out infinite; }
.yirtici .kt-sag { transform-origin: 53px 25px; animation: kt-sag 2.4s ease-in-out infinite; }
@keyframes kt-sol { 0%, 40%, 100% { transform: none; } 55% { transform: rotate(18deg) scaleY(.7); } 70% { transform: rotate(-10deg); } 85% { transform: none; } }
@keyframes kt-sag { 0%, 40%, 100% { transform: none; } 55% { transform: rotate(-18deg) scaleY(.7); } 70% { transform: rotate(10deg); } 85% { transform: none; } }
@keyframes y-gec { from { transform: translateX(-160px); } to { transform: translateX(calc(100vw + 160px)); } }
@keyframes y-gec-ters { from { transform: translateX(calc(100vw + 120px)); } to { transform: translateX(-120px); } }
@keyframes y-salin { from { transform: translateY(-10px) rotate(-4deg); } to { transform: translateY(12px) rotate(4deg); } }
.y-kartal { top: 12%; width: clamp(70px, 6vw, 110px); animation: y-gec 32s linear -8s infinite; }
.y-sahin { top: 30%; width: clamp(38px, 3.2vw, 56px); opacity: .85; animation: y-gec-ters 44s linear -26s infinite; }
.y-sahin .kt-sol, .y-sahin .kt-sag { animation-delay: -1.2s; }
.y-bant { top: 14%; width: clamp(40px, 3.4vw, 58px); }

/* --- Ortak: baykuş göz kırpar, başını çevirir; dokununca kanat çırpar --- */
.cz-baykus .bk-kapak { transform-box: fill-box; transform-origin: 50% 0; transform: scaleY(0); animation: bk-kirp 5s ease-in-out infinite; }
.cz-baykus .bk-bas { transform-box: fill-box; transform-origin: 50% 80%; animation: bk-don 9s ease-in-out infinite; }
.cz-baykus .bk-kanat { transform-box: fill-box; }
.cz-baykus .bk-sol { transform-origin: 100% 0; } .cz-baykus .bk-sag { transform-origin: 0 0; }
@keyframes bk-kirp { 0%, 90%, 100% { transform: scaleY(0); } 94% { transform: scaleY(1); } }
@keyframes bk-don { 0%, 40%, 100% { transform: none; } 48%, 58% { transform: rotate(-12deg); } 66%, 74% { transform: rotate(10deg); } }
.cirp .cz-baykus .bk-sol { animation: bk-cirp-sol .15s ease-in-out 6 alternate; }
.cirp .cz-baykus .bk-sag { animation: bk-cirp-sag .15s ease-in-out 6 alternate; }
.cirp .cz-baykus { animation: bk-hop .9s ease-in-out; }
@keyframes bk-cirp-sol { to { transform: rotate(38deg); } }
@keyframes bk-cirp-sag { to { transform: rotate(-38deg); } }
@keyframes bk-hop { 40% { transform: translateY(-16%); } }
/* ortak: kaplumbağa yürüyüşü */
.cz-kaplumbaga .a1 { animation: cz-adim .7s ease-in-out infinite alternate; }
.cz-kaplumbaga .a2 { animation: cz-adim .7s ease-in-out infinite alternate-reverse; }
.cz-kaplumbaga .kp-bas { animation: kp-bas 1.4s ease-in-out infinite alternate; }
@keyframes kp-bas { from { transform: translateX(-1.5px); } to { transform: translateX(1.5px) translateY(-.5px); } }

/* --- Alt bilgi --- */
.ab-orman .ab-baykus { position: absolute; left: 13%; bottom: 6px; width: clamp(28px, 2.6vw, 38px); z-index: 1; }
.ab-orman .ab-kaplumbaga { position: absolute; left: 0; bottom: 4px; width: clamp(34px, 3vw, 46px); z-index: 1; animation: kp-yol 48s linear infinite; }
@keyframes kp-yol { 0% { transform: translateX(-60px); opacity: 0; } 2% { opacity: 1; } 60% { transform: translateX(calc(100vw + 40px)); opacity: 1; } 61%, 100% { transform: translateX(calc(100vw + 40px)); opacity: 0; } }
.ab-orman .y-dogan { top: -22px; width: clamp(40px, 3.4vw, 54px); animation: y-gec 30s linear -14s infinite; }

/* --- Bölüm içi ortak --- */
.sakinli { position: relative; }

/* ateş böcekleri (Yöntem) */
#yontem { position: relative; }
#yontem > .kap { position: relative; z-index: 1; }
.atesbocekleri { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.atesbocekleri i { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #f6ec9c; box-shadow: 0 0 6px 2px rgba(240,226,120,.55), 0 0 16px 4px rgba(200,230,120,.25);
  animation-name: ab-suzul, ab-yan; animation-iteration-count: infinite; animation-direction: alternate; animation-timing-function: ease-in-out; }
@keyframes ab-suzul { to { transform: translate(var(--x), var(--y)); } }
@keyframes ab-yan { 0%, 30% { opacity: .08; } 70%, 100% { opacity: .95; } }

@media (max-width: 760px) { .y-sahin, .hy-geyik { display: none; } }
@media (prefers-reduced-motion: reduce) { .hayvanlar, .gokyuzu, .atesbocekleri, .ab-kaplumbaga, .ab-orman .y-dogan { display: none; } .ab-baykus * { animation: none !important; } }
.hafif .hayvanlar, .hafif .gokyuzu, .hafif .atesbocekleri, .hafif .ab-kaplumbaga, .hafif .ab-orman .y-dogan { display: none; } .hafif .ab-baykus * { animation: none !important; }

/* =========================================================
   PROJE PENCERESİ — ormanın sakinleri ele ele (config.js → .pm-dostlar)
   Hayvanlar yan yana durur; aralarındaki kısa kollar birbirine bağlıdır. Pencere açıkken sırayla dalga yaparlar.
   ========================================================= */
.pm-bas { flex-wrap: wrap; }
.pm-dostlar { flex-basis: 100%; display: flex; align-items: flex-end; justify-content: center; margin: 8px -8px -6px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.08); }
.pm-dostlar .pd { position: relative; z-index: 1; flex: none; height: clamp(38px, 6vw, 58px); display: flex; align-items: flex-end; transform-origin: 50% 100%; }
.pm-dostlar .pd svg { display: block; height: 100%; width: auto; overflow: visible; }
.pm-dostlar .pd-kartal { height: clamp(26px, 4vw, 40px); align-self: center; }
.pm-dostlar .pd-kaplumbaga { height: clamp(24px, 3.4vw, 34px); }
.pm-dostlar .pd-sincap { height: clamp(32px, 5vw, 48px); }
/* kol: iki komşuyu birleştiren kavis; uçlarda küçük pati */
.pm-dostlar .pd-el { position: relative; z-index: 2; flex: none; width: clamp(12px, 2vw, 20px); height: 10px; margin: 0 -7px 18px; border-bottom: 3px solid #e2b77e; border-radius: 0 0 12px 12px; }
.pm-dostlar .pd-el::before, .pm-dostlar .pd-el::after { content: ""; position: absolute; bottom: -5px; width: 7px; height: 7px; border-radius: 50%; background: #e2b77e; }
.pm-dostlar .pd-el::before { left: -3px; } .pm-dostlar .pd-el::after { right: -3px; }
.pm-arka.acik .pm-dostlar .pd { animation: pd-dalga 2.8s ease-in-out calc(.6s + var(--i) * .14s) infinite; }
@keyframes pd-dalga { 0%, 34%, 100% { transform: none; } 12% { transform: translateY(-16%) rotate(-3deg); } 22% { transform: translateY(0) rotate(2deg); } }
/* kartalın kanatları kol gibi açılıp kapanır */
.pm-arka.acik .pm-dostlar .pd-kartal .kt-sol, .pm-arka.acik .pm-dostlar .pd-kartal .kt-sag { transform-box: view-box; animation-duration: 2.8s; }
.pm-dostlar .pd-kartal .kt-sol { transform-origin: 47px 25px; animation: kt-sol 2.8s ease-in-out infinite; }
.pm-dostlar .pd-kartal .kt-sag { transform-origin: 53px 25px; animation: kt-sag 2.8s ease-in-out infinite; }
@media (max-width: 600px) { .pm-dostlar .pd-el { width: 10px; margin: 0 -5px 12px; } }
@media (prefers-reduced-motion: reduce) { .pm-dostlar .pd, .pm-dostlar * { animation: none !important; } }
.hafif .pm-dostlar .pd, .hafif .pm-dostlar * { animation: none !important; }