/* BUNYAİ 2.0 tanıtım sitesi. 3D harf arazisi. Kömür zemin, düz renkler; gölge/degrade/ince çizgi yok. */
@font-face { font-family: "Panchang"; src: url("yazi/panchang-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("yazi/switzer-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("yazi/switzer-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  --bg: #191919; --surface: #242424; --ink: #ffffff; --muted: #a8a8a8; --kagit: #f4efe1;
  --accent: #0c7866; --accent-ink: #ffffff;
  --kirmizi: #d71e1e; --mavi: #1e4bd7; --yesil: #0c7866; --sari: #ffe927; --sari-ink: #111111;
  --step-small: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-lead: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --step-head: clamp(1.625rem, 1rem + 2.9vw, 3.75rem);
  --kenar: clamp(16px, 2.2vw, 32px);
  --bosluk: clamp(72px, 8vw, 120px);
  --ust: 60px;
  --hiz: cubic-bezier(.2, .7, .2, 1);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--ust) + 16px); overflow-x: clip; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 var(--step-body)/1.5 "Switzer", system-ui, sans-serif; overflow-x: clip; }
img, canvas, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, p, figure, ul, ol { margin: 0; padding: 0; }
ul { list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--sari); outline-offset: 3px; }
::selection { background: var(--sari); color: var(--sari-ink); }
h1, h2 { font-family: "Panchang", "Switzer", sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: -0.02em; line-height: 1.02; }
h2 { font-size: var(--step-head); }
h3 { font-weight: 500; font-size: var(--step-lead); line-height: 1.2; }
.atla { position: fixed; left: var(--kenar); top: -80px; z-index: 40; background: var(--sari); color: var(--sari-ink); padding: 10px 16px; }
.atla:focus { top: 8px; }

.dugme { display: inline-block; background: var(--accent); color: var(--accent-ink); padding: 15px 26px; text-decoration: none; font-weight: 500; transition: background-color .18s, color .18s, translate .18s var(--hiz); }
.dugme:hover { background: var(--ink); color: var(--bg); }
.dugme:active { translate: 0 2px; }
.dugme.kucuk { padding: 9px 18px; }

/* Üst bar */
.ust { position: fixed; inset: 0 0 auto 0; z-index: 30; height: var(--ust); padding: 0 var(--kenar); display: flex; align-items: center; justify-content: space-between; gap: 24px; background: var(--bg); }
.marka { font: 700 14px/1 "Panchang", sans-serif; letter-spacing: -0.01em; text-decoration: none; white-space: nowrap; }
.ust-baglar { display: flex; gap: clamp(16px, 2.4vw, 36px); }
.ust-baglar a { position: relative; text-decoration: none; padding: 10px 0; }
.ust-baglar a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 5px; height: 2px; background: var(--sari); transform: scaleX(0); transform-origin: left; transition: transform .28s var(--hiz); }
.ust-baglar a:hover::after, .ust-baglar a.aktif::after { transform: scaleX(1); }
.ust-sag { display: flex; align-items: center; gap: 14px; }

/* Sahne: varsayılan düz akış (betik yok ya da hareket azaltılmış) */
.sahne { position: relative; padding-top: var(--ust); }
.sahne-sabit { position: relative; }
#kule-tuval { width: 100%; height: 68svh; touch-action: pan-y; }
.kule-yedek { display: none; width: min(70vw, 460px); margin: 0 auto; }
html:not(.js) #kule-tuval, .webgl-yok #kule-tuval { display: none; }
html:not(.js) .kule-yedek, .webgl-yok .kule-yedek { display: block; }
.etiketler { display: none; }

.giris { text-align: center; padding: clamp(12px, 2svh, 24px) var(--kenar) 32px; }
.giris h1 { font-size: clamp(2.3rem, 8.1vw, 11rem); white-space: nowrap; }
.giris-cumle { font-size: var(--step-lead); line-height: 1.3; max-width: 36em; margin: clamp(12px, 2svh, 22px) auto 0; }
.giris-sira { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: clamp(20px, 3.4vw, 48px); margin-top: clamp(14px, 2.6svh, 28px); font-weight: 500; }
.giris-sira span:first-child { justify-self: end; }
.giris-sira span:last-child { justify-self: start; }

.notlar { padding: 0 var(--kenar); display: grid; gap: 48px; margin-top: 48px; }
.not h2 { margin-bottom: 12px; }
.not > p { max-width: 44ch; }

/* Sahne: kaydırmalı */
.sahneli .sahne { height: 750svh; padding-top: 0; }
.sahneli .sahne-sabit { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.sahneli #kule-tuval { position: absolute; inset: 0; height: 100%; }
.sahneli .giris { position: absolute; left: 0; right: 0; bottom: clamp(14px, 3.4svh, 40px); padding-block: 0; }
.sahneli .notlar { position: absolute; inset: var(--ust) 0 0 0; margin: 0; pointer-events: none; display: block; }
.sahneli .not { position: absolute; left: var(--kenar); top: clamp(12px, 3svh, 36px); width: min(42vw, 620px); padding: clamp(16px, 1.6vw, 24px); background: var(--bg); opacity: 0; visibility: hidden; pointer-events: auto; }
.sahneli .secici { top: clamp(8px, 1.5svh, 16px); }

.sahneli .etiketler { display: block; position: absolute; inset: 0; pointer-events: none; overflow: hidden; visibility: hidden; opacity: 0; }
.etiket { position: absolute; left: 0; top: 0; padding: 4px 10px; background: var(--ink); color: var(--bg); font-size: 15px; font-weight: 500; white-space: nowrap; }

/* Gerçek cevap kartı */
.kart { background: var(--kagit); color: #141414; padding: 18px 20px; margin-top: 16px; font-size: 16px; line-height: 1.45; }
.kart > * + * { margin-top: 10px; }
.kart ol { padding-left: 22px; }
.kart li + li { margin-top: 6px; }
.kart b { font-weight: 500; }
.balon { background: var(--mavi); color: #fff; padding: 9px 13px; margin-left: 10%; }
.kaynak { color: var(--mavi); font-weight: 500; }
.kaynak-satir { font-size: var(--step-small); }
.kalem { color: var(--kirmizi); font-weight: 500; font-size: 18px; }
.kart code { font: 14.5px/1.5 ui-monospace, Consolas, monospace; background: #e4dec9; padding: 1px 5px; }
.kart pre { background: #141414; color: #e8e8e8; padding: 12px 14px; overflow-x: auto; }
.kart pre code { background: none; padding: 0; }

.dersler { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 14px; }
.dersler button { padding: 9px 13px; background: var(--surface); font-weight: 500; font-size: 16px; transition: background-color .18s, color .18s, translate .18s var(--hiz); }
.dersler button:hover { background: #3a3a3a; }
.dersler button:active { translate: 0 2px; }
.dersler button.koyu-yazi { color: #111; }

/* Nasıl kullanılır */
.pencere { background: var(--surface); padding: var(--bosluk) var(--kenar); }
.pencere > h2 { margin-bottom: clamp(32px, 4vw, 64px); }
.pencere-izgara { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px) minmax(0, 1fr); grid-template-rows: repeat(3, minmax(170px, auto)); gap: 0 clamp(24px, 4vw, 72px); max-width: 1376px; margin: 0 auto; }
.uyg { grid-column: 2; grid-row: 1 / span 3; background: #f6f6f4; color: #141414; display: flex; flex-direction: column; min-height: 640px; font-size: 16px; }
.pnot { padding: 8px; cursor: default; }
.pnot h3 { transition: color .18s; }
.pnot p { margin-top: 6px; max-width: 30ch; }
.pnot.sol { grid-column: 1; text-align: right; }
.pnot.sol p { margin-left: auto; }
.pnot.sag { grid-column: 3; }
.n1, .n4 { grid-row: 1; } .n2, .n5 { grid-row: 2; } .n3, .n6 { grid-row: 3; }
.pnot:hover h3, .pnot:focus-visible h3 { color: var(--sari); }
.uyg-ust { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: #eaeae6; }
.uyg-marka { font-weight: 500; margin-right: auto; }
.uyg-marka b { color: #b9770e; font-weight: 500; }
.uyg-dil b { font-weight: 500; }
.uyg-yeni { font-size: 22px; line-height: 1; }
.uyg-akis { flex: 1; padding: 18px 16px; }
.uyg-cevap { margin-top: 12px; }
.uyg-cevap b { font-weight: 500; }
.uyg-alt { padding: 12px 16px 16px; }
.uyg-kutu { display: flex; align-items: center; gap: 10px; background: #fff; padding: 10px 12px; }
.uyg-yer { flex: 1; color: #5c5c5c; }
.uyg-resim svg, .uyg-gonder svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.uyg-gonder { background: #141414; color: #fff; width: 34px; height: 34px; display: grid; place-items: center; }
.uyg-satir { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin-top: 12px; font-size: 14px; }
.uyg-anahtar { display: inline-flex; align-items: center; gap: 7px; }
.uyg-anahtar i { width: 28px; height: 16px; background: #bdbdb8; position: relative; }
.uyg-anahtar i::after { content: ""; position: absolute; width: 12px; height: 12px; top: 2px; left: 2px; background: #fff; }
.uyg-anahtar.acik i { background: #0c7866; }
.uyg-anahtar.acik i::after { left: 14px; }
.uyg-kalan { width: 100%; color: #5c5c5c; }
.uyg [data-parca], .uyg-akis { transition: opacity .22s; }
.uyg.vurgulu [data-parca]:not(.hedef), .uyg.vurgulu .uyg-akis { opacity: .28; }
.uyg.vurgulu [data-parca="yazi"]:has(.hedef) { opacity: 1; }
.uyg.vurgulu [data-parca="yazi"]:has(.hedef) > :not(.hedef) { opacity: .28; }

/* Yalnız ?kalite= ile açılınca görünür */
.kalite-etiket { position: fixed; left: 8px; right: 8px; bottom: 8px; z-index: 50; background: #111; color: #fff; padding: 6px 10px; font-size: 13px; line-height: 1.35; pointer-events: none; }

/* 3D tuvaller: betik ya da WebGL yoksa yer kaplamaz */
.u3 canvas { width: 100%; height: 100%; }
html:not(.js) .u3, .webgl-yok .u3 { display: none; }

/* Karne */
.karne { background: var(--sari); color: var(--sari-ink); padding: var(--bosluk) var(--kenar); }
.karne h2 { font-size: clamp(2.2rem, 5.6vw, 6.4rem); }
.girinti { display: inline-block; margin-left: 16.6%; }
.karne-giris { margin-top: 24px; font-size: var(--step-lead); line-height: 1.3; max-width: 38em; }
.tablo-sar { margin-top: clamp(40px, 5vw, 72px); }
/* Benchmark 3D: ekranda sabit kalır, kaydırdıkça sıradaki ölçüt öne gelir */
.b3 { height: 340svh; margin: clamp(32px, 4vw, 56px) calc(-1 * var(--kenar)) 0; }
.b3-sabit { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.b3-tuval { position: absolute; inset: 0; touch-action: pan-y; }
.b3-tuval canvas { width: 100%; height: 100%; }
.b3-sayilar { position: absolute; inset: 0; pointer-events: none; }
.b3-sayi { position: absolute; left: 0; top: 0; background: #111; color: #fff; padding: 2px 8px; font-weight: 500; font-size: 16px; font-variant-numeric: tabular-nums; will-change: transform; }
.b3-bilgi { position: absolute; left: var(--kenar); top: calc(var(--ust) + 20px); width: min(35vw, 480px); }
.b3-sira { font-weight: 500; }
.b3-olcut { font: 700 clamp(1.5rem, 2.9vw, 3rem)/1.05 "Panchang", sans-serif; letter-spacing: -0.02em; text-transform: uppercase; margin-top: 8px; }
.b3-ne { margin-top: 10px; font-size: var(--step-lead); line-height: 1.25; }
.b3-liste { list-style: none; margin: clamp(14px, 2.4svh, 28px) 0 0; padding: 0; display: grid; gap: 4px; }
.b3-liste li { position: relative; display: flex; justify-content: space-between; gap: 12px; background: #e9d31a; padding: 6px 10px 13px; font-weight: 500; overflow: hidden; color: #111; }
.b3-liste i { position: absolute; left: 0; right: 0; bottom: 0; height: 7px; background: #111; transform-origin: left; transition: transform .45s var(--hiz); }
.b3-liste li.biz i { background: var(--mavi); }
.b3-liste li.en i { background: var(--kirmizi); }
.b3-liste b { font-weight: 500; font-variant-numeric: tabular-nums; }
.b3-anahtar { margin-top: 12px; font-size: var(--step-small); }
.gizli { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.bench-ozet { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin-top: clamp(28px, 3vw, 44px); }
.bench-ozet li { background: #111; color: #fff; padding: clamp(16px, 1.6vw, 24px); }
.bench-ozet b { display: block; font-weight: 500; font-size: var(--step-lead); color: var(--sari); margin-bottom: 6px; }
.bench-tablo { width: 100%; border-collapse: collapse; font-size: 16px; }
.bench-tablo th, .bench-tablo td { padding: 14px 10px; text-align: left; font-weight: 400; }
.bench-tablo thead th { font-weight: 500; vertical-align: bottom; line-height: 1.2; }
.bench-tablo tbody th { font-weight: 500; }
.bench-tablo tbody tr:nth-child(odd) { background: #f2dc14; }
.bench-tablo .say { text-align: right; font-variant-numeric: tabular-nums; }
.bench-tablo td.say { font-size: var(--step-body); white-space: nowrap; }
.bench-tablo th.bizim { font-weight: 500; text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 5px; }
.bench-tablo td.bizim { font-weight: 500; }
.bench-tablo td.kazan { background: #111; color: var(--sari); font-weight: 500; }
.karne-not { margin-top: 24px; max-width: 70ch; font-size: var(--step-lead); line-height: 1.3; }
.karne-dip { margin-top: 14px; max-width: 70ch; font-size: var(--step-small); }

/* Model kartı */
.model { padding: var(--bosluk) var(--kenar); }
.model-giris { font-size: var(--step-lead); line-height: 1.3; max-width: 40em; margin-top: 16px; }
.model-3b { height: clamp(280px, 56svh, 620px); margin: clamp(12px, 2vw, 28px) calc(-1 * var(--kenar)) 0; touch-action: pan-y; }
.model-not { font-size: var(--step-small); color: var(--muted); }
.model-sayilar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin-top: clamp(20px, 2.4vw, 36px); }
.model-sayilar div { padding: clamp(18px, 2vw, 28px); }
.model-sayilar div:nth-child(1) { background: var(--mavi); }
.model-sayilar div:nth-child(2) { background: var(--kirmizi); }
.model-sayilar div:nth-child(3) { background: var(--sari); color: var(--sari-ink); }
.model-sayilar div:nth-child(4) { background: var(--yesil); }
.model-sayilar b { display: block; font: 700 clamp(1.625rem, 3.2vw, 3rem)/1.05 "Panchang", sans-serif; letter-spacing: -0.02em; white-space: nowrap; }
.model-sayilar span { display: block; margin-top: 8px; font-weight: 500; }
.model-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 4vw, 64px); margin: clamp(24px, 3vw, 40px) 0 0; }
.model-liste div { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 16px; padding: 12px; }
.model-liste div:nth-child(4n+1), .model-liste div:nth-child(4n+2) { background: var(--surface); }
.model-liste dt { font-weight: 500; }
.model-liste dd { margin: 0; }

/* PRO */
.pro { background: var(--ink); color: #111; padding: var(--bosluk) var(--kenar); overflow: hidden; }
.pro-baslik { font-size: var(--step-head); }
.pro-sar { position: relative; margin-top: 8px; }
.pro-soz { display: inline-block; font: 700 40vw/1 "Panchang", sans-serif; letter-spacing: -0.03em; white-space: nowrap; }
.pro-sar.hazir .pro-soz { visibility: hidden; }
.pro-3b { position: absolute; inset: -14% calc(-1 * var(--kenar)); touch-action: pan-y; }
.pro-govde { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(24px, 4vw, 64px); margin-top: clamp(24px, 3vw, 40px); }
.pro-giris { font-size: var(--step-lead); line-height: 1.3; }
.pro-liste li { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 16px; padding: 12px; align-items: center; }
.pro-liste li:nth-child(odd) { background: #efefef; }
.pro-liste b { font-weight: 500; }
.gizli-bar { display: block; height: 1.3em; background: #111; transform-origin: left; }

/* Tek kelime düğme */
.eylem { position: relative; display: flex; align-items: flex-end; min-height: 52svh; background: var(--accent); color: #fff; text-decoration: none; overflow: hidden; padding: 0 var(--kenar) 16px; }
.eylem-cumle { position: absolute; left: var(--kenar); top: 24px; font-size: var(--step-body); }
.eylem-ok { position: absolute; right: var(--kenar); top: 24px; width: 48px; height: 48px; fill: none; stroke: currentColor; stroke-width: 3.4; transition: translate .25s var(--hiz); }
.eylem:hover .eylem-ok, .eylem:focus-visible .eylem-ok { translate: 6px -6px; }
.eylem-soz { display: inline-block; font: 700 22vw/1.14 "Panchang", sans-serif; letter-spacing: -0.03em; white-space: nowrap; }
.eylem:hover, .eylem:focus-visible { background: #fff; color: var(--accent); }

/* Son */
.son { background: var(--kirmizi); color: #fff; min-height: 60svh; padding: 40px var(--kenar) 24px; display: flex; flex-direction: column; justify-content: space-between; gap: 48px; }
.son-ust { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) auto; gap: 24px; font-size: 16px; }
.son-yukari { white-space: nowrap; font-weight: 500; }
.son-ad { align-self: flex-start; font: 700 8.6vw/1 "Panchang", sans-serif; letter-spacing: -0.02em; text-decoration: none; white-space: nowrap; transition: color .18s; }
.son-ad:hover { color: var(--sari); }
.son-alt { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 14px 32px; font-size: 14px; }
.son-bag { display: flex; gap: 16px; font-weight: 500; }

/* Telefon */
@media (max-width: 820px) {
  .ust-baglar { display: none; }
  .giris-sira { display: flex; flex-direction: column; gap: 10px; font-size: 16px; }
  .giris-sira .dugme { width: 100%; text-align: center; }
  .giris h1 { font-size: 11.2vw; }
  .sahneli .not { left: 0; right: 0; top: auto; bottom: 0; width: auto; padding: 14px var(--kenar) 18px; background: var(--bg); }
  .sahneli .secici { top: auto; }
  .sahneli .not > p { display: none; }
  .sahneli .not:first-child > p { display: block; }
  .kart { margin-top: 10px; padding: 14px; font-size: 15px; }
  .kart > * + * { margin-top: 8px; }
  .dersler { margin-top: 8px; }
  .dersler button { padding: 7px 10px; font-size: 15px; }
  .etiket { font-size: 13px; padding: 3px 7px; }
  .pencere-izgara { display: flex; flex-direction: column; gap: 22px; }
  .uyg { order: -1; min-height: 560px; }
  .pnot.sol { text-align: left; }
  .pnot.sol p { margin-left: 0; }
  .pnot p { max-width: none; }
  .b3-bilgi { width: auto; right: var(--kenar); top: calc(var(--ust) + 8px); }
  .b3-olcut { font-size: 1.25rem; margin-top: 2px; }
  .b3-ne { font-size: 15px; margin-top: 4px; }
  .b3-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 8px; gap: 3px; }
  .b3-liste li { padding: 2px 6px 7px; font-size: 13px; gap: 6px; }
  .b3-liste i { height: 4px; }
  .b3-liste span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .b3-anahtar { font-size: 13px; margin-top: 6px; }
  .b3-sayi { font-size: 13px; padding: 1px 5px; }
  .karne h2 { font-size: 8.2vw; }
  .girinti { margin-left: 0; }
  .bench-ozet { grid-template-columns: minmax(0, 1fr); }
  .bench-tablo thead { display: none; }
  .bench-tablo, .bench-tablo tbody { display: block; }
  .bench-tablo tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 12px 8px; gap: 4px; }
  .bench-tablo tbody th, .bench-tablo tbody td.ne { grid-column: 1 / -1; padding: 0; }
  .bench-tablo td.say { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 5px 7px; font-size: 16px; }
  .bench-tablo td.say::before { content: attr(data-et); font-size: 13px; font-weight: 400; }
  .model-3b { height: 300px; }
  .model-sayilar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .model-sayilar b { font-size: 1.3rem; }
  .model-liste { grid-template-columns: minmax(0, 1fr); }
  .model-liste div:nth-child(4n+1), .model-liste div:nth-child(4n+2) { background: none; }
  .model-liste div:nth-child(odd) { background: var(--surface); }
  .pro-govde { grid-template-columns: minmax(0, 1fr); }
  .eylem { min-height: 46svh; }
  .eylem-cumle { font-size: 17px; max-width: 70%; }
  .eylem-ok { width: 32px; height: 32px; }
  .son-ust { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .son-alt { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  /* transition-duration kısaltmak yetmez: yazı boyutu da geçişe girer, sigdir yanlış ölçer */
  *, *::before, *::after { transition: none !important; }
}