/* gorunum · Sense'in iki görünümü: Palm (Roots and leaves, DOM + SVG) ve Dune (three.js + HTML etiketler).
   Köşeler: düğme/etiket 4 px, kutu/çerçeve 6 px. Sayılar mono; eksi --eksi, artı --arti, hep işaretli. Mantıksal özellikler (RTL). */
.bolum-gorunum { background: linear-gradient(180deg, var(--gece) 0%, var(--gece-2) 16%, var(--gece-2) 84%, var(--gece) 100%); overflow: clip; }
.bolum-gorunum .bolum-bas { margin-block-end: clamp(44px, 6.5vh, 76px); }

/* iki sütun: yazı dar, sahne geniş; Palm'da sahne başta (ters), Dune'da sonda */
.bolum-gorunum .grn-oge { grid-template-columns: minmax(0, 4.2fr) minmax(0, 7.8fr); gap: clamp(28px, 4.4vw, 76px); }
.bolum-gorunum .grn-oge.ters { grid-template-columns: minmax(0, 7.8fr) minmax(0, 4.2fr); }
.bolum-gorunum .grn-oge + .grn-oge { margin-block-start: clamp(72px, 11vh, 136px); }
.grn-yazi { max-width: 460px; gap: clamp(14px, 2vh, 22px); }
.grn-baslik { font-size: clamp(27px, 2.6vw, 42px); line-height: 1.06; letter-spacing: -.024em; text-wrap: balance; }
.grn-metin { font-size: clamp(17px, 1.3vw, 19px); }

/* ── çerçeve: üst şerit, alt not ── */
.grn-cerceve { container-type: inline-size; display: grid; min-width: 0; background: #0D0A07; }
.grn-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; min-height: 50px; padding: 8px 16px; border-block-end: 1px solid var(--cizgi-soluk); background: linear-gradient(180deg, rgba(244,238,223,.04), rgba(244,238,223,.012)); }
.grn-bar-ad { display: flex; align-items: baseline; gap: 10px; font-size: 14px; line-height: 1.2; color: var(--metin-3); white-space: nowrap; }
.grn-bar-ad b { font-weight: 500; font-size: 15px; color: var(--metin); }
.grn-bar-olcu { margin-inline-start: auto; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--metin-3); text-align: end; }
.grn-kontrol { margin-inline-start: auto; display: flex; align-items: center; gap: 8px; }
.grn-dugme { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 32px; padding: 0 12px; border-radius: 4px; border: 1px solid var(--cizgi-soluk); background: rgba(10,8,6,.45);
  color: var(--metin-2); font: 500 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; cursor: pointer; transition: border-color .25s, color .25s, background .25s; }
.grn-dugme:hover, .grn-dugme:focus-visible { border-color: var(--cizgi); color: var(--metin); }
.grn-dugme:focus-visible { border-radius: 4px; }
.grn-dugme[aria-pressed="true"] { border-color: var(--altin); color: var(--altin); background: rgba(227,179,65,.09); z-index: 1; }
.grn-dugme svg { width: 13px; height: 13px; flex: none; }
.grn-ikili { display: inline-flex; }
.grn-ikili .grn-dugme:first-child { border-start-end-radius: 0; border-end-end-radius: 0; }
.grn-ikili .grn-dugme + .grn-dugme { border-start-start-radius: 0; border-end-start-radius: 0; margin-inline-start: -1px; }
.grn-tekrar { padding-inline: 10px; }
.grn-not { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 18px; padding: 10px 16px 11px; border-block-start: 1px solid var(--cizgi-soluk); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--metin-3); }
.grn-not-tam { flex-basis: 100%; line-height: 1.5; }      /* Dune: yüksekliklerin toplamı (kendi satırında; rakam betikle veriden gelir) */
.grn-not-tam:empty { display: none; }

/* ── Palm · Roots and leaves ── */
.palm { --bag: clamp(40px, 5.6vh, 58px); position: relative; display: grid; grid-template-rows: auto var(--bag) auto var(--bag) auto; align-content: center; min-height: 412px;
  padding: clamp(18px, 2.2vw, 28px) clamp(14px, 1.9vw, 26px); background: radial-gradient(60% 46% at 50% 50%, rgba(227,179,65,.07), transparent 70%); }
.palm-baglar { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.palm-bag { fill: none; stroke: rgba(227,179,65,.42); stroke-width: 1; transition: stroke .25s, stroke-width .25s, opacity .3s; }
.palm-dugum { fill: var(--altin); transition: opacity .3s, r .25s; }
.palm-kivilcim { fill: var(--altin-acik); opacity: 0; }
.palm-bag.vurgu { stroke: var(--altin-acik); stroke-width: 1.8; }
.palm.vurgulu .palm-bag:not(.vurgu), .palm.vurgulu .palm-dugum:not(.vurgu) { opacity: .28; }
.palm-ust { grid-row: 1; }
.palm-merkez-sar { grid-row: 3; display: grid; justify-items: center; min-width: 0; }
.palm-alt { grid-row: 5; }
.palm-yan { display: grid; gap: 10px; min-width: 0; }
.palm-bas { display: flex; align-items: baseline; gap: 10px; min-height: 16px; font: 500 10.5px/1.5 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--metin-3); transition: opacity .6s var(--yay); }
.palm-bas-ad { color: var(--altin); }
.palm-sigma { margin-inline-start: auto; letter-spacing: .04em; white-space: nowrap; color: var(--metin-2); }
.palm-sigma b { font-weight: 500; }
.palm-sira { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; min-height: 66px; }
.palm-kutu { --renk: var(--metin-3); --ton: .4; position: relative; display: grid; align-content: start; gap: 7px; min-width: 0; padding: 11px clamp(10px, 1.5cqi, 13px) 12px; border-radius: 6px;
  border: 1px solid color-mix(in srgb, var(--renk) calc(20% + var(--ton) * 44%), transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--renk) calc(5% + var(--ton) * 21%), var(--yuzey)), color-mix(in srgb, var(--renk) calc(2% + var(--ton) * 11%), var(--yuzey)));
  outline-offset: 2px; cursor: default; transition: opacity .3s, border-color .25s, box-shadow .25s, transform .6s var(--yay); }
.palm-kutu.eksi { --renk: var(--eksi); }
.palm-kutu.arti { --renk: var(--arti); }
.palm-kutu.diger { border-style: dashed; border-color: rgba(244,238,223,.22); background: none; }
.palm-kutu:focus-visible, .palm-merkez:focus-visible { border-radius: 6px; }
.palm-kutu.vurgu { border-color: var(--altin); border-style: solid; box-shadow: 0 0 0 1px rgba(227,179,65,.22), 0 12px 32px -16px rgba(227,179,65,.55); }
.palm.vurgulu .palm-kutu:not(.vurgu) { opacity: .5; }
.palm-ad { font: 500 14px/1.25 var(--govde); color: var(--metin); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.palm-deger { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 6px; font-family: var(--mono); font-feature-settings: 'tnum' 1, 'zero' 0; line-height: 1.3; }
.palm-deger b { font-weight: 500; font-size: clamp(12px, 1.7cqi, 13px); color: var(--renk); white-space: nowrap; }
.palm-deger i { font-style: normal; font-size: clamp(11px, 1.55cqi, 12px); color: color-mix(in srgb, var(--renk) 72%, var(--metin)); white-space: nowrap; }
.palm-merkez { display: grid; justify-items: center; gap: 3px; min-width: min(250px, 100%); padding: 13px 22px 14px; border-radius: 6px; border: 1px solid var(--altin); text-align: center; cursor: default; outline-offset: 3px;
  background: radial-gradient(120% 150% at 50% 0%, rgba(227,179,65,.17), rgba(227,179,65,.035) 62%), var(--yuzey-2);
  box-shadow: 0 0 0 1px rgba(227,179,65,.1), 0 22px 60px -26px rgba(227,179,65,.6); transition: opacity .55s var(--yay), transform .75s var(--yay), box-shadow .3s; }
.palm-merkez.vurgu { box-shadow: 0 0 0 1px rgba(227,179,65,.4), 0 22px 64px -22px rgba(227,179,65,.8); }
.palm-merkez-ad { font: 500 17px/1.2 var(--govde); color: var(--metin); }
.palm-merkez-deger { font-weight: 500; font-size: clamp(21px, 1.9vw, 27px); line-height: 1.15; letter-spacing: -.01em; }
.palm-merkez-not { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--metin-3); }
.bolum-gorunum .eksi-yazi { color: var(--eksi); }
.bolum-gorunum .arti-yazi { color: var(--arti); }
/* giriş: ortadaki kutu → bağlar → kutular sırayla (bir kez; data-durum: bos → bekle → oyna → hazir) */
.palm[data-durum="bos"] > *, .palm[data-durum="bekle"] .palm-bas { opacity: 0; }
.palm[data-durum="bekle"] .palm-merkez { opacity: 0; transform: scale(.9); }
.palm[data-durum="bekle"] .palm-kutu { opacity: 0; transform: translateY(var(--kay, 12px)); }
.palm[data-durum="bekle"] .palm-dugum { opacity: 0; }
.palm[data-durum="oyna"] .palm-kutu { transition: opacity .5s var(--yay) var(--g, 0ms), transform .65s var(--yay) var(--g, 0ms); }
.palm[data-durum="oyna"] .palm-bas { transition-delay: var(--g, 0ms); }
.palm[data-durum="oyna"] .palm-bag { transition: stroke-dashoffset .75s var(--yay) var(--g, 0ms); }
.palm[data-durum="oyna"] .palm-dugum { transition: opacity .4s var(--g, 0ms); }
.palm-ust .palm-kutu { --kay: 14px; }
.palm-alt .palm-kutu { --kay: -14px; }

/* ── Dune ── (sahne sürüklenerek döner: tuvalde yalnız dikey kaydırma tarayıcıya bırakılır, tekerlek hiç dinlenmez) */
.dune-sahne { position: relative; aspect-ratio: 16 / 10; overflow: hidden; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; background:
  radial-gradient(80% 60% at 50% 112%, rgba(227,179,65,.12), transparent 64%), radial-gradient(110% 80% at 50% -24%, rgba(59,82,121,.14), transparent 62%), #0A0705; }
.dune-sahne:focus-visible { outline-offset: -2px; border-radius: 0; }      /* çerçeve taşanı kırptığı için odak halkası içeride */
.dune-sahne canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: pan-y; outline: none; cursor: grab; }
.dune-sahne.tutuldu canvas { cursor: grabbing; }
.dune-sahne.yok .dune-katman { display: none; }
.dune-katman { position: absolute; inset: 0; pointer-events: none; }
.dune-cizgiler { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transition: opacity .25s ease; }
.dune-cizgiler line { stroke: rgba(244,238,223,.5); stroke-width: 1; }
.dune-cizgiler circle { fill: var(--altin-acik); }
.dune-katman > p, .dune-katman > div { position: absolute; inset-block-start: 0; left: 0; margin: 0; white-space: nowrap; will-change: transform, opacity; }
/* eksen rakamları ve adları: yeri ve görünürlüğü her karede betik verir (geçiş de betikte) */
.dune-tik { font: 400 10.5px/1.2 var(--mono); font-feature-settings: 'tnum' 1, 'zero' 0; color: var(--metin-3); opacity: 0; }
.dune-ozel { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--altin); }      /* "plan" ve "medyan": kesik altın çizgilerin adı */
.dune-eksen { display: flex; align-items: center; gap: .7em; font-size: 10px; line-height: 1.2; letter-spacing: .12em; text-transform: uppercase; color: var(--metin-2); opacity: 0; }
.dune-eksen.ok-once { flex-direction: row-reverse; }
.dune-eksen i { display: block; font-style: normal; font-family: var(--govde); line-height: 1; letter-spacing: 0; color: var(--altin); }      /* ok: betik eksenin artı yönüne çevirir */
/* sürükleme ipucu: ilk döndürmeye kadar üst ortada */
.dune-surukle { display: flex; align-items: center; gap: 7px; padding: 5px 10px 5px 8px; border-radius: 4px; border: 1px solid var(--cizgi); background: rgba(13,10,7,.82); font-size: 10px; line-height: 1.2; letter-spacing: .12em; text-transform: uppercase; color: var(--altin); opacity: 0; transition: opacity .4s ease; }
.dune-surukle.acik { opacity: 1; }
.dune-surukle.ortulu { opacity: 0; transition: none; }      /* imleç ipucu üstüne geldiğinde */
.dune-surukle svg { flex: none; width: 15px; height: 15px; }
.dune-etiket { display: grid; gap: 2px; padding: 7px 10px 8px; border-radius: 4px; border: 1px solid var(--cizgi); background: rgba(13,10,7,.9); color: var(--metin); font-size: 13px; line-height: 1.25; opacity: 0; transition: opacity .3s ease; }
.dune-etiket.acik { opacity: 1; }
.dune-katman.hareket .dune-etiket.acik, .dune-katman.hareket .dune-cizgiler { opacity: .42; }      /* döndürülürken etiketler soluk izler, durunca yerine oturur */
.dune-etiket small { font: 500 9.5px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--altin); }
.dune-etiket b { font: 500 13px/1.3 var(--mono); font-feature-settings: 'tnum' 1, 'zero' 0; }
.dune-ipucu { display: grid; gap: 6px; min-width: 196px; padding: 10px 12px 11px; border-radius: 6px; border: 1px solid var(--cizgi); background: rgba(16,12,8,.96); box-shadow: 0 18px 44px -18px rgba(0,0,0,.9); color: var(--metin); font-size: 13px; line-height: 1.25; opacity: 0; visibility: hidden; transition: opacity .18s ease, visibility .18s; z-index: 3; }
.dune-ipucu.acik { opacity: 1; visibility: visible; }
.dune-ipucu-ad { font-weight: 500; }
.dune-ipucu-grup { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--metin-2); }
.dune-ipucu-grup i, .dune-lejant i { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--renk); box-shadow: 0 0 0 2px rgba(10,8,6,.9); }
.dune-ipucu dl { display: grid; grid-template-columns: auto auto; gap: 3px 16px; margin: 2px 0 0; padding-block-start: 7px; border-block-start: 1px solid var(--cizgi-soluk); }
.dune-ipucu dt { font-size: 11.5px; color: var(--metin-3); }
.dune-ipucu dd { margin: 0; text-align: end; font: 500 12px/1.3 var(--mono); font-feature-settings: 'tnum' 1, 'zero' 0; }
.dune-lejant { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 12px 16px 13px; font-size: 12.5px; line-height: 1.3; color: var(--metin-2); }
.dune-lejant li { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.dune-uyari { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; text-align: center; font-size: 15px; color: var(--metin-2); }

/* ── dar çerçeve (telefon ve dar sütun): Palm kutuları iki sütun, ortada gövde çizgisi ── */
@container (max-width: 560px) {
  .palm { --bag: 30px; min-height: 0; padding-inline: 12px; }
  .palm-sira { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 30px; row-gap: 10px; min-height: 168px; }
  .palm-deger { flex-direction: column; align-items: flex-start; gap: 1px; }
  .palm-merkez { padding-inline: 16px; }
  .grn-bar-olcu { margin-inline-start: 0; flex-basis: 100%; order: 3; text-align: start; }
  .grn-tekrar { margin-inline-start: auto; }
  .grn-dugme { min-height: 40px; }
  .dune-sahne { aspect-ratio: 1 / 1; }      /* dar çerçevede kare: döndürmeye ve üç etikete yer kalır */
  .dune-lejant { gap: 6px 14px; font-size: 12px; }
  .dune-etiket { gap: 1px; padding: 4px 7px 5px; font-size: 11.5px; }
  .dune-etiket small { font-size: 9px; letter-spacing: .1em; }
  .dune-etiket b { font-size: 11.5px; }
  .dune-surukle { letter-spacing: .08em; }
  .dune-ipucu { gap: 4px; min-width: 0; padding: 8px 10px 9px; font-size: 12px; }
  .dune-ipucu dl { gap: 2px 12px; }
  .dune-ipucu dt { font-size: 11px; }
  .dune-ipucu dd { font-size: 11.5px; }
  .grn-bar-olcu { letter-spacing: .05em; }
  .grn-not { font-size: 10px; letter-spacing: .04em; padding-inline: 14px; }
}
@media (max-width: 960px) {
  .bolum-gorunum .grn-oge, .bolum-gorunum .grn-oge.ters { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .grn-yazi { max-width: 620px; }
}
@media (prefers-reduced-motion: reduce) {
  .palm *, .dune-etiket, .dune-ipucu { transition: none !important; }
  .dune-surukle, .dune-cizgiler { transition: none !important; }
}

/* giriş yeniden kurulurken geçiş yok */
.palm.sifir, .palm.sifir * { transition: none !important; }

/* yalnız ekran okuyucu için tablo: görünmez, yer kaplamaz (tablo 1 px'e sığmadığı için sarmalayıcıyla kırpılır) */
.grn-gizli { position: absolute; inset-block-end: 0; inset-inline-start: 0; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); opacity: 0; pointer-events: none; white-space: nowrap; }

/* betik kapalıysa */
.grn-yokjs { padding: 28px 16px; font-size: 15px; color: var(--metin-2); }
html:not(.js) .palm, html:not(.js) .dune-sahne, html:not(.js) .dune-lejant { display: none; }