/*
 * tabla.tr stilleri: ana sayfa ve alt sayfalar (gizlilik, koşullar, destek,
 * 404) aynı dosyayı kullanır; tabela, renk, yazı ve alt bilgi tek yerde.
 */
/*
 * Renkler ve yazı uygulamanın paletinden (vitrin/marka/README.md). Apple
 * aygıtlarında SF Pro ve SF Mono (uygulamayla birebir); SF'nin lisansı web'de
 * kullanmaya izin vermiyor. SF'si olmayan aygıta (Windows, Android) Inter ve
 * JetBrains Mono kendi sunucumuzdan gelir (OFL, yazi/); Arial ve Consolas
 * tabelanın görünüşünü bozuyordu. Yazı yalnız gerekince indirilir, üçüncü
 * tarafa istek gitmez. Aralıklar Türkçe harfleri ve ₺'yi kapsar. Inter'in optik
 * boyutlu sürümü: büyük başlıkta harfleri SF gibi sıklaştırır, düz sürümde
 * başlık 45 px uzuyordu.
 */
@font-face { font-family: "Tabla Sans"; font-style: normal; font-display: swap; font-weight: 100 900; src: url(/yazi/inter-latin-opsz-normal.woff2) format("woff2-variations"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Tabla Sans"; font-style: normal; font-display: swap; font-weight: 100 900; src: url(/yazi/inter-latin-ext-opsz-normal.woff2) format("woff2-variations"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Tabla Mono"; font-style: normal; font-display: swap; font-weight: 100 800; src: url(/yazi/jetbrains-mono-latin-wght-normal.woff2) format("woff2-variations"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Tabla Mono"; font-style: normal; font-display: swap; font-weight: 100 800; src: url(/yazi/jetbrains-mono-latin-ext-wght-normal.woff2) format("woff2-variations"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
:root {
  --bg: #0B0B0C; --surface: #161616; --hairline: #2A2A2A;
  --text: #F4F1EA; --meta: #8A8680; --gold: #D4B87A; --gold-bright: #E8D2A0; --down: #B85A4A; --pro: #3D9B8F; --ai: #7C6CFF; --copper: #C4784A;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Tabla Sans", "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", "Tabla Mono", Menlo, Consolas, monospace;
  --ease: cubic-bezier(.2, .8, .2, 1);
  /*
   * Telefonun yüksekliği ekrana göre; ekran oranı simülatör görüntüsünden
   * (1206 × 2622). 430 px'in altına inmez: pencere kısaldıkça telefon
   * okunmaz hâle geliyordu (kullanıcı kararı, 8 Ekim); daha kısa pencerede
   * sayfa kayar. 1366 × 768 dizüstünde (görünür alan ~657 px) telefon 435 px,
   * orası yine kaydırmasız.
   */
  --phone-h: clamp(430px, calc(100svh - 222px), 590px);
}
* { box-sizing: border-box; }
/* Kaydırma çubuğu hiçbir sayfada görünmez (kullanıcı kararı, 8 Ekim); kaydırma çalışır. */
html { scrollbar-width: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; }
html, body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }

/*
 * Sayfa ekranı tam doldurur, sığdığı sürece kaydırma çıkmaz. Kaydırma
 * kapatılmaz: çok küçük ekranda içerik kesilmesin, kaysın.
 */
.page {
  min-height: 100vh; min-height: 100svh; max-width: 1160px; margin: 0 auto;
  padding: 0 max(28px, env(safe-area-inset-left)) env(safe-area-inset-bottom);
  display: grid; grid-template-rows: auto 1fr auto;
}

header { height: 80px; display: flex; align-items: center; justify-content: space-between; }

/*
 * Split-flap tabela, açılış ekranındaki gibi (SplitFlapCell): kart oranı
 * 1,78, harf yüksekliğin 0,48'i, ortada menteşe ve iki pim. Menteşe 1 px:
 * uygulamadaki 2 px bu boyda B'nin orta çizgisini siliyor, harf 8'e
 * benziyordu. Rakam kartları (.digits) aynı yapıda, daha küçük.
 */
.flap { display: flex; gap: 3px; --w: 25px; --h: 44px; }
.flap > span:not(.cell), .digits > span:not(.cell):not(.sep):not(.unit) { width: var(--w); height: var(--h); display: grid; place-items: center; font-weight: 700; font-stretch: condensed; font-size: calc(var(--h) * .48); color: var(--gold); background: var(--surface); border-radius: 3px; }
.cell { position: relative; width: var(--w); height: var(--h); perspective: calc(var(--h) * 3.6); border-radius: 3px; background: var(--bg); box-shadow: 0 0 0 .5px var(--hairline); }
.cell .h { position: absolute; left: 0; right: 0; height: 50%; overflow: hidden; background: var(--surface); }
.cell .t { top: 0; border-radius: 3px 3px 0 0; box-shadow: inset 0 .5px 0 rgba(42, 42, 42, .55); }
.cell .b { bottom: 0; border-radius: 0 0 3px 3px; }
.cell .h i {
  position: absolute; left: 0; right: 0; height: 200%; display: grid; place-items: center; font-style: normal;
  font-family: var(--sans); font-weight: 700; font-stretch: condensed; font-size: calc(var(--h) * .48); color: var(--gold);
}
.cell .t i, .cell .ft i { top: 0; }
.cell .b i, .cell .fb i { bottom: 0; }
.cell .ft { transform-origin: bottom; backface-visibility: hidden; z-index: 2; }
.cell .fb { transform-origin: top; backface-visibility: hidden; z-index: 2; transform: rotateX(90deg); }
.cell .ft, .cell .fb { visibility: hidden; }
.cell::after { content: ""; position: absolute; left: 0; right: 0; top: calc(50% - .5px); height: 1px; background: rgba(11, 11, 12, .9); z-index: 3; }
.cell::before { content: ""; position: absolute; left: 3px; right: 3px; top: calc(50% - 1.5px); height: 3px; z-index: 4;
  background: radial-gradient(circle, var(--hairline) 1.4px, transparent 1.6px) left / 3px 3px no-repeat, radial-gradient(circle, var(--hairline) 1.4px, transparent 1.6px) right / 3px 3px no-repeat; }

main { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; min-height: 0; padding: 4px 0 24px; }

h1 { font-size: clamp(40px, 4.6vw, 62px); line-height: 1.03; letter-spacing: -.03em; font-weight: 700; margin: 0 0 18px; }
h1 .line { white-space: nowrap; }
h1 em { font-style: normal; color: var(--gold); }
.lede { font-size: 17px; line-height: 1.55; color: var(--meta); max-width: 36ch; margin: 0 0 28px; }

/*
 * Apple'ın resmî Türkçe rozeti (toolbox.marketingtools.apple.com), olduğu
 * gibi: renk, gölge, hareket eklenmez. Elle çizilmiş düğme Apple'ın marka
 * kurallarına aykırıydı. Yükseklik 40 px'in altına inmez (Apple'ın alt sınırı).
 */
.store { display: inline-block; line-height: 0; }
.store img { display: block; height: 54px; width: auto; }

/* Ekran dizini: altı ekran, etkin olanın üst çizgisi sahne süresince dolar. */
/* Dizinle düğme arası sol kart bandını da belirler: 44'tü, Windows yazısında (Inter) sol kart dizine 2 px kalıyordu. */
.tour { list-style: none; margin: 56px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 24px; max-width: 480px; }
.tour button { position: relative; width: 100%; text-align: left; background: none; border: 0; padding: 14px 0 10px; cursor: pointer; color: var(--meta); font: inherit; }
.tour button::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: #2c2a26; }
.tour button::after { content: ""; position: absolute; left: 0; top: 0; height: 1px; width: 0; background: var(--gold); }
.tour button[aria-current="true"]::after { animation: fill var(--scene-ms, 2500ms) linear forwards; }
.stage-paused .tour button::after { animation-play-state: paused; }
@keyframes fill { to { width: 100%; } }
/*
 * Başlık faydayı söyler ("Canlı fiyatlar"); sekme adları ("Terminal",
 * "Portal") ilk gelene bir şey anlatmıyordu, sağ köşedeki küçük hâli de
 * kaldırıldı (kullanıcı kararı, 8 Ekim).
 */
.tour .k { display: block; font: 600 10px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; margin-bottom: 7px; transition: color .3s; }
.tour .k b { font-weight: 600; }
.tour .c { display: block; font-size: 14px; line-height: 1.35; transition: color .3s; }
.tour button[aria-current="true"] .k { color: var(--gold); }
.tour button[aria-current="true"] .c, .tour button:hover .c { color: var(--text); }

/*
 * Telefon: iPhone 17 Pro gibi. Titanyum kenar (ince, açık-koyu geçişli),
 * siyah çerçeve, yan tuşlar (solda eylem ve ses, sağda yan tuş), Dynamic
 * Island. Ekran oranı ekran görüntüsünün oranı.
 */
/* Geniş ekranda 40 px sola: sağdaki kart da soldaki gibi 280 px olabilsin (ortadayken sağda ~230 px kalıyordu). */
.stage { position: relative; justify-self: center; left: -40px; }
.phone {
  position: relative; height: var(--phone-h); aspect-ratio: 1206 / 2622;
  box-sizing: content-box; padding: calc(var(--phone-h) * .0175);
  border-radius: calc(var(--phone-h) * .09);
  background:
    linear-gradient(#050505, #050505) padding-box,
    linear-gradient(135deg, #8d8a84 0%, #3a3936 18%, #6f6c66 42%, #2b2a28 63%, #7d7a74 86%, #45433f 100%) border-box;
  border: calc(var(--phone-h) * .0052) solid transparent;
  box-shadow: 0 0 0 .5px rgba(0, 0, 0, .9), inset 0 0 0 1px rgba(255, 255, 255, .06), 0 60px 100px -50px rgba(0, 0, 0, 1);
  cursor: pointer;
}
.btn { position: absolute; width: 3px; border-radius: 2px; background: linear-gradient(90deg, #2c2b29, #7a776f 60%, #4a4844); }
.btn.a { left: calc(-3px - var(--phone-h) * .0052); top: 17%; height: 4.2%; }
.btn.u { left: calc(-3px - var(--phone-h) * .0052); top: 25%; height: 7.4%; }
.btn.d { left: calc(-3px - var(--phone-h) * .0052); top: 34%; height: 7.4%; }
.btn.p { right: calc(-3px - var(--phone-h) * .0052); top: 27%; height: 11.5%; background: linear-gradient(270deg, #2c2b29, #7a776f 60%, #4a4844); }
/* Ekranların çekildiği gün; sayfa canlı değil, kartlardaki "Bugün" bu güne ait. Göze batmasın. */
.shotdate { position: absolute; left: 0; right: 0; top: calc(100% + 14px); margin: 0; text-align: center; font: 500 9.5px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: #5d5a55; }
.screen { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: calc(var(--phone-h) * .072); background: #000; }
.screen > img.shot {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
  opacity: 0; transform: scale(1.025); filter: blur(5px);
  transition: opacity .5s var(--ease), transform .7s var(--ease), filter .5s var(--ease);
}
.screen > img.shot.on { opacity: 1; transform: none; filter: none; }
.island { position: absolute; z-index: 3; top: 1.55%; left: 50%; transform: translateX(-50%); width: 27%; height: 3.35%; border-radius: 99px; background: #000; }

/*
 * Bildirimler telefonun üstüne iner, iOS'taki gibi sırayla yukarıdan düşer.
 * Kutular simülatörün kendi çizdiği bildirimden, açılış ekranının siyahı
 * üstünde kesildi (üçü aynı cam). Ekrandan %12 geniş: çerçevenin iki
 * yanından taşar, telefondan çıkıyor gibi durur. İki kutu: üçüncüsü
 * widget'ı örtüyordu (yığın ekranın %28'inde biter, widget %33'te başlar).
 */
.nstack { position: absolute; z-index: 5; left: -6%; right: -6%; top: 6.5%; display: grid; gap: 8px; pointer-events: none; }
.nstack img { display: block; width: 100%; height: auto; opacity: 0; filter: drop-shadow(0 18px 28px rgba(0, 0, 0, .55)); }
.nstack.on img { animation: dropIn .75s cubic-bezier(.2, 1.15, .3, 1) forwards; }
.nstack.on img:nth-child(1) { animation-delay: .4s; }
.nstack.on img:nth-child(2) { animation-delay: 1.1s; }
@keyframes dropIn { 0% { opacity: 0; transform: translateY(-48px) scale(.96); } 30% { opacity: 1; } 100% { opacity: 1; transform: none; } }

/*
 * Bilgi kartları iki sabit yuvada: sağdaki telefonun üstünde (ekranın
 * başlık çizgisi hizası), soldaki başlıkla dizin arasındaki bantta. Sahne
 * değişince yer aynı kalır, içerik değişir; önce her kart başka yükseklikteydi,
 * göz her sahnede kartı yeniden arıyordu. Kart ekranın üstüne 40 px biner
 * (12 px'ti; kullanıcı kararı, 7 Ekim): telefonla bir bütün durur, yer de
 * açılır. İki yan eşit, 280 px; telefon 40 px sola kaydı (1341 px'te
 * sağda 29 px, solda açıklamaya 29 px pay; seçenek B, 8 Ekim). Opak yüzey: bulanık cam koyu zeminde keskin
 * durmuyordu. Ekranın üstünde ayrışsın diye çerçeve ve gölge belirgin.
 * Kart telefonun kenarından dışa kayarak gelir.
 */
.co {
  position: absolute; z-index: 4; width: 280px; padding: 16px 18px 15px; border-radius: 14px;
  background: #141414; border: 1px solid rgba(255, 255, 255, .11);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .35), 0 24px 48px -16px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .04);
  opacity: 0; pointer-events: none;
  transition: opacity .5s var(--ease), transform .7s var(--ease);
}
.co.r { left: calc(100% - 40px); top: 14%; transform: translateX(-12px); }
.co.l { right: calc(100% - 40px); top: 28%; width: 280px; transform: translateX(12px); }
.co.on { opacity: 1; transform: none; }
.co .k { display: flex; justify-content: space-between; align-items: center; gap: 10px; font: 600 9.5px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--meta); }
.co .k b { color: var(--gold); font-weight: 600; }
.co .row { display: flex; align-items: center; gap: 10px; margin-top: 11px; }
/* Paragraf sınıfı .txt: .t split-flap kutusunun üst yarısı, kart içindeki rakamları bozuyordu. */
.co .txt { margin: 10px 0 0; font-size: 13.5px; line-height: 1.42; color: #ebe6dc; }
.co .f { display: block; margin-top: 10px; font: 500 9.5px/1.3 var(--mono); letter-spacing: .1em; color: var(--meta); text-transform: uppercase; }
/* Gün aralığı: düşük solda, yüksek sağda, nokta şimdiki fiyat. Rakam çifti tek başına "fiyat bugün nerede" demiyordu. */
.px { font: 600 20px/1 var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.range { position: relative; height: 4px; margin-top: 16px; border-radius: 2px; background: linear-gradient(90deg, rgba(184, 90, 74, .55), #3a3832 50%, rgba(212, 184, 122, .55)); }
.range i { position: absolute; top: 50%; left: var(--p); width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 3px #141414; }
.rl { display: flex; justify-content: space-between; margin-top: 10px; }
.rl span { font: 500 9px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--meta); }
.rl span:last-child { text-align: right; }
.rl b { display: block; margin-top: 6px; font: 600 13.5px/1 var(--mono); color: var(--text); letter-spacing: 0; font-variant-numeric: tabular-nums; }
.co .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 11px; }
.co .pair span { font: 500 9px/1 var(--mono); letter-spacing: .12em; color: var(--meta); }
.co .pair b { display: block; margin-top: 6px; font: 600 15px/1 var(--mono); color: var(--text); font-variant-numeric: tabular-nums; }
.chip { font: 600 11px/1 var(--mono); padding: 5px 6px; border-radius: 6px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.chip.dn { color: var(--down); background: rgba(184, 90, 74, .14); }
/* 15x26'ydı: menteşe ve pimler rakamın ortasını kapatıyordu. Kart içinde pim yok; çizgi yeter. */
.digits { display: flex; align-items: flex-end; gap: 2px; --w: 16px; --h: 30px; }
.digits .cell::before { display: none; }
.digits .sep { font: 700 18px/1 var(--sans); color: var(--gold); width: 5px; text-align: center; }
.digits .pre { font: 600 18px/1 var(--sans); color: var(--gold); margin-right: 3px; padding-bottom: 5px; }
.rows { margin-top: 8px; }
.rows div { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; height: 30px; border-top: 1px solid #262522; font-size: 13px; }
.rows div:first-child { border-top: 0; }
.rows .p { font: 500 12px/1 var(--mono); font-variant-numeric: tabular-nums; }
.rows .tm { font: 500 11px/1 var(--mono); color: var(--meta); }
/* Gelişmeler zaman akışı gibi: simge, saat, başlık; en yenisi parlak. Düz liste "son gelişme" hissini vermiyordu. */
.feed { margin-top: 13px; }
.feed > div { position: relative; display: grid; grid-template-columns: 26px 1fr; gap: 11px; padding-bottom: 13px; }
.feed > div:last-child { padding-bottom: 0; }
.feed > div:not(:last-child)::before { content: ""; position: absolute; left: 12.5px; top: 30px; bottom: 3px; width: 1px; background: #2c2a26; }
.feed i { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 12.5px; background: #1d1c1a; border: 1px solid #2c2a26; }
.feed time { display: block; margin-top: 2px; font: 600 10px/1 var(--mono); letter-spacing: .06em; color: var(--gold); }
.feed p { margin: 5px 0 0; font-size: 12.5px; line-height: 1.4; color: #ebe6dc; }
.feed > div + div p { color: #aaa59c; }
.feed > div + div time { color: var(--meta); }
/* Kaynak listesi, uygulamadaki kaynak menüsü gibi: ad, seçili olanda işaret. */
.src { margin-top: 10px; border: 1px solid #262522; border-radius: 10px; overflow: hidden; }
.src div { display: grid; grid-template-columns: 1fr 14px; gap: 10px; align-items: center; height: 32px; padding: 0 12px; border-top: 1px solid #262522; font-size: 13px; color: var(--meta); }
.src div:first-child { border-top: 0; }
.src div.on { background: #1d1c1a; color: var(--text); }
.src svg { width: 12px; height: 12px; stroke: var(--gold); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.spark { display: block; width: 100%; height: 64px; margin-top: 12px; }
.axis { display: flex; justify-content: space-between; margin-top: 4px; font: 500 8.5px/1 var(--mono); letter-spacing: .12em; color: var(--meta); }
.axis.yr { position: relative; display: block; height: 9px; }
.axis.yr span { position: absolute; top: 0; transform: translateX(-50%); }
.axis.yr span:first-child { transform: none; }
.imp { font: 600 8px/1 var(--mono); letter-spacing: .1em; color: var(--down); padding: 3px 4px; border-radius: 4px; background: rgba(184, 90, 74, .14); }
/* Sohbet: odadaki satır gibi; ad kalın, abonelik çerçeveli etiket, Ayar mor. */
.chat { padding-top: 8px; padding-bottom: 6px; }
.msg { display: grid; grid-template-columns: 26px 1fr; gap: 9px; padding: 8px 0; border-top: 1px solid #262522; }
.msg:first-child, .k + .msg { border-top: 0; }
.msg > div { min-width: 0; }
.av { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 600 11px/1 var(--sans); font-style: normal; color: var(--meta); background: #232220; }
.msg.ai .av { color: #fff; background: rgba(124, 108, 255, .55); }
.mh { display: flex; align-items: center; gap: 6px; }
.mh b { font-size: 12.5px; font-weight: 600; }
.msg.ai .mh b { color: var(--ai); }
.mh time { margin-left: auto; font: 500 10px/1 var(--mono); color: var(--meta); }
.tier { font: 600 7.5px/1 var(--mono); letter-spacing: .1em; padding: 2px 4px; border-radius: 3px; color: var(--ai); border: 1px solid rgba(124, 108, 255, .5); }
.tier.plus { color: var(--copper); border-color: rgba(196, 120, 74, .6); }
.tier.pro { color: var(--pro); border-color: rgba(61, 155, 143, .6); }
.msg p { margin: 4px 0 0; font-size: 12.5px; line-height: 1.4; color: #ebe6dc; }
.men { color: var(--ai); }
.msg blockquote { margin: 5px 0 0; padding-left: 7px; border-left: 2px solid rgba(124, 108, 255, .5); font-size: 11.5px; color: var(--meta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Portföy: işlem defteri ve ürün bazında kâr/zarar; artı altın, eksi kırmızı (uygulamadaki gibi). */
.ledger div { grid-template-columns: 54px 1fr auto; height: 27px; font-size: 12.5px; }
.ledger div > span:nth-child(2) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ledger em { font-style: normal; color: var(--meta); font-size: 11.5px; margin-left: 4px; }
.big { margin-top: 10px; font: 600 21px/1 var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.big.up, .bars .p { color: var(--gold); }
.bars { display: grid; gap: 9px; margin-top: 13px; }
.bars div { display: grid; grid-template-columns: 1fr auto; row-gap: 5px; font-size: 12.5px; }
.bars i { grid-column: 1 / -1; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--gold) var(--w), #262522 var(--w)); }
.bars .p { font: 500 12px/1 var(--mono); }
/* Takvim: saat ve önem üstte, ülke ve olay altta; tek satıra sığdırınca yazılar iç içe giriyordu. */
.evs > div { padding: 9px 0; border-top: 1px solid #262522; }
.evs > div:first-child { border-top: 0; padding-top: 10px; }
.eh { display: flex; justify-content: space-between; align-items: center; }
.evs p { margin: 6px 0 0; font-size: 13px; line-height: 1.35; }
.evs em { font: 600 9.5px/1 var(--mono); font-style: normal; letter-spacing: .14em; color: var(--meta); margin-left: 8px; }
.evs .tm { color: var(--gold); }
.done { font: 600 8px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--meta); padding: 3px 4px; border-radius: 4px; background: #1f1e1c; }
/* Açıklanan veri uygulamadaki gibi üç değerle: ne çıktı, ne bekleniyordu, önceki neydi. */
.vals { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 9px; }
.vals span { font: 500 8.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--meta); }
.vals b { display: block; margin-top: 5px; font: 600 13px/1 var(--mono); color: var(--text); letter-spacing: 0; }
.vals b.up { color: var(--gold); }
/* Widget sahnesinde ayar kartı telefonun alt ortasında: bildirimler üstten iner, ortada widget açık kalır; solda dururken sahneyi bölüyordu. */
.co.toggles { left: 50%; top: auto; bottom: 4%; width: min(320px, calc(100% + 40px)); padding: 18px 20px 14px; transform: translate(-50%, 12px); }
.co.toggles div { height: 38px; font-size: 14.5px; }
.co.toggles i { width: 34px; height: 20px; border-radius: 10px; }
.co.toggles i::after { width: 16px; height: 16px; }
.co.toggles.on { transform: translate(-50%, 0); }
.toggles div { display: flex; justify-content: space-between; align-items: center; height: 32px; border-top: 1px solid #262522; font-size: 13px; }
.toggles div:first-child { border-top: 0; }
.toggles i { width: 30px; height: 18px; border-radius: 9px; background: var(--gold); position: relative; }
.toggles i::after { content: ""; position: absolute; right: 2px; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: #1a1916; }

.mcap, .dots { display: none; }

footer {
  height: 62px; border-top: 1px solid var(--hairline); display: flex; align-items: center; justify-content: space-between; gap: 20px;
  font: 500 10.5px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--meta);
}
footer nav { display: flex; gap: 22px; }
footer nav a:hover { color: var(--text); }

/* Kısa dizüstü: dizin sıkışır. */
@media (max-height: 800px) and (min-width: 861px) {
  header { height: 68px; }
  /* Sol kart bandı burada da daralmasın: 40 px'te kartlar dizine biniyordu (1440 × 760). */
  .tour { margin-top: 56px; }
  .co.l { top: 27%; }
  .tour button { padding: 11px 0 8px; }
  .lede { margin-bottom: 22px; }
}

/*
 * Çok kısa ekran (1366 × 768 dizüstüde tarayıcının görünür alanı ~657 px):
 * sayfa kaydırma çıkarıyordu (695 px) ve sol kart bandı 195 px'lik karta
 * yetmiyordu. Giriş sıkışır, sol yuvadaki kartlar gizlenir; sağdaki kart ve
 * telefon kalır.
 */
@media (max-height: 720px) and (min-width: 861px) {
  header { height: 60px; }
  h1 { font-size: clamp(36px, 3.9vw, 50px); margin-bottom: 14px; }
  .lede { font-size: 15.5px; margin-bottom: 20px; }
  .store img { height: 48px; }
  .tour { margin-top: 28px; }
  .tour button { padding: 10px 0 7px; }
  footer { height: 52px; }
  .co.l { display: none; }
}

/*
 * Dar dizüstü: sağ sütun telefona ve iki yandaki kartlara yetmiyor (1024'te
 * kart sayfadan 50 px taşıyordu). Telefon sola yaslanır, kartlar sağda alt
 * alta çıkar; ek kartlar (.x) gizlenir. Eşik 1290'dı: o genişlikte
 * sağdaki kart ekran kenarına yapışıyordu; 1340'ta 24 px pay kalıyor.
 */
@media (max-width: 1340px) and (min-width: 861px) {
  .stage { justify-self: start; left: 0; }
  /* Sağdaki kart üstten, soldaki alttan: kart boyu ne olursa olsun araları açık kalır (yüzdeyle kısa ekranda biniyorlardı). */
  .co { width: 220px; }
  .co.r { top: 5%; }
  .co.l { width: 220px; top: auto; bottom: 5%; right: auto; left: calc(100% - 40px); transform: translateX(-12px); }
  .co.on { transform: none; }
  .co.x { display: none; }
}

/*
 * Telefon: tek sütun, kaydırmasız (kullanıcı kararı, 8 Ekim; küçük telefonda
 * görsel küçülür). Dizin yerine telefonun altında noktalar ve sahnenin adı;
 * her sahnenin bir kartı (.m) telefon ekranının alt kısmına biner. Kartlar
 * kısa olanlar ya da sadeleştirilmiş hâlleri: uzun kart küçük telefonda
 * ekranın yarısını örtüyordu.
 */
@media (max-width: 860px) {
  /*
   * Sahne tam genişlik, telefon ortada: sahne içindekilerin en genişi kadar
   * daralıyordu, en genişi sahnenin adıydı; telefon sola yaslı kalıyor ve
   * ad uzunluğuna göre sahneden sahneye 8-47 px kayıyordu.
   */
  .stage { left: 0; justify-self: stretch; }
  .phone { margin: 0 auto; }
  /* Ana sayfada telefon boyunda her şey tek eksende; tabela da ortada (kullanıcı kararı, 8 Ekim). Alt sayfalarda metin sola yaslı, tabela da solda. */
  .home header { justify-content: center; }
  /*
   * Pay, telefonun dışındaki her şey: tarayıcıda ekrana sığan en büyük
   * telefon aranarak ölçüldü (8 Ekim; giriş cümlesiyle 474-492 px, tarih
   * kalktıktan sonra). Tablette
   * telefon masaüstü boyunu geçmez; alt sınır 150 px, tek ekran kuralı
   * (kullanıcı kararı) iPhone SE'nin Safari'sinde (375 × 553) de taşmasın.
   */
  :root { --phone-h: clamp(150px, calc(100svh - 494px), 590px); }
  .page { padding: 0 20px env(safe-area-inset-bottom); }
  header { height: 60px; }
  .flap { --w: 19px; --h: 34px; }
  main { grid-template-columns: 1fr; gap: 22px; align-content: center; text-align: center; padding: 2px 0 14px; }
  h1 { font-size: clamp(30px, 9vw, 40px); margin-bottom: 12px; }
  .lede { font-size: 15px; margin: 0 auto 20px; }
  .store img { height: 50px; }
  .tour, .co:not(.m) { display: none; }
  .co.m {
    left: 50%; right: auto; top: calc(var(--phone-h) * .955); bottom: auto;
    /* 260 px tasarlanır, site.js telefonun 1,3 katına ölçekler (--k); alt orta noktası yerinde kalır. */
    width: 260px; padding: 13px 15px 12px; text-align: left; transform-origin: 50% 100%;
    transform: translate(-50%, calc(-100% + 10px)) scale(var(--k, 1));
  }
  .co.m.on { transform: translate(-50%, -100%) scale(var(--k, 1)); }
  .co.m .evs > div + div, .co.m.chat .msg:not(.ai), .co.m .bars { display: none; }
  .co.m.chat .msg.ai { border-top: 0; padding-top: 0; }
  /* Bildirimler telefondan %16 geniş, masaüstündeki gibi; %60'tı, telefonun yanında dev duruyordu. */
  .nstack { left: -8%; right: -8%; top: 5%; gap: 5px; }
  .dots { display: flex; justify-content: center; margin-top: 12px; }
  .dots button { position: relative; width: 14px; height: 22px; padding: 0; border: 0; background: none; cursor: pointer; transition: width .35s var(--ease); }
  .dots button[aria-current="true"] { width: 34px; }
  .dots i { position: absolute; left: 4px; right: 4px; top: 8px; height: 6px; border-radius: 3px; background: #34322d; overflow: hidden; }
  .dots button[aria-current="true"] i::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--gold); animation: fill var(--scene-ms, 2500ms) linear forwards; }
  .stage-paused .dots i::after { animation-play-state: paused; }
  .mcap { display: block; margin-top: 8px; }
  .mcap .k { display: block; font: 600 11px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin-bottom: 7px; }
  .mcap .c { font-size: 17px; line-height: 1.3; }
  /* Telefonda tarih yok (kullanıcı kararı, 8 Ekim); yeri telefona kalır. */
  .shotdate { display: none; }
  footer { height: 52px; font-size: 9.5px; letter-spacing: .1em; }
}
/*
 * Kısa ekran (Safari çubuklarıyla bütün iPhone'lar): giriş cümlesi gizli, üst
 * sıkışık; telefon 228'den 360 px'e çıkar (iPhone 16 Pro, 402 × 730; pay
 * 356-366 px ölçüldü). Eşik
 * 700'dü ve pay giriş cümlesi varmış gibi hesaplanıyordu; gerçek cihazda
 * telefon kartların yanında küçük kalıyordu (kullanıcı kararı, 8 Ekim).
 */
@media (max-width: 860px) and (max-height: 800px) {
  .lede { display: none; }
  header { height: 50px; }
  main { gap: 16px; }
  h1 { margin-bottom: 14px; }
  .store img { height: 44px; }
  :root { --phone-h: clamp(150px, calc(100svh - 370px), 590px); }
}

@media (prefers-reduced-motion: reduce) {
  .screen > img.shot { transition: opacity .2s; transform: none; filter: none; }
  .co, .co.on { transition: opacity .2s; transform: none; }
  .co.toggles, .co.toggles.on { transform: translateX(-50%); }
  .nstack.on img { animation: none; opacity: 1; }
  .tour button::after { animation: none !important; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 860px) {
  .co.m, .co.m.on { transform: translate(-50%, -100%) scale(var(--k, 1)); }
  .dots button[aria-current="true"] i::after { animation: none; width: 100%; }
}

/*
 * Alt sayfalar: gizlilik, koşullar, destek (vitrin/web/uret-sayfalar.py
 * üretir) ve 404. Başlık üstte; altında solda bölüm dizini (sayfayla
 * kaymaz, okunan bölüm altın), sağda okuma sütunu. Sütun 680 px: satır
 * 75-80 harf; daha genişte uzun hukuk metninde satır başı kaçıyor.
 * Ana sayfanın kuralları (ortalama, sıkışma) .doc'un üstünde değil.
 */
main.doc { display: block; padding: 36px 0 96px; text-align: left; }
.doc-head { max-width: 720px; margin-bottom: 52px; }
.doc .kicker { margin: 0 0 16px; font: 600 10.5px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
.doc h1 { font-size: clamp(34px, 3.6vw, 48px); line-height: 1.08; letter-spacing: -.025em; margin: 0 0 16px; }
.doc .lede { display: block; max-width: 60ch; margin: 0; font-size: 17px; }
.doc-grid { display: grid; grid-template-columns: 220px minmax(0, 680px); gap: 72px; align-items: start; }
.toc { position: sticky; top: 24px; padding-top: 6px; }
.toc ol { list-style: none; margin: 0; padding: 0; }
.toc a { display: grid; grid-template-columns: 26px 1fr; padding: 6px 0; font-size: 13.5px; line-height: 1.35; color: var(--meta); transition: color .2s; }
.toc a span { font: 500 10.5px/1.75 var(--mono); opacity: .6; }
.toc a:hover { color: var(--text); }
.toc a[aria-current="true"] { color: var(--gold); }
.toc a[aria-current="true"] span { opacity: 1; }
.doc-body section { padding: 26px 0 30px; border-top: 1px solid var(--hairline); scroll-margin-top: 16px; }
.doc-body section:first-child { padding-top: 0; border-top: 0; }
.doc-body h2 { display: grid; grid-template-columns: 36px 1fr; align-items: baseline; margin: 0 0 10px; font-size: 19px; line-height: 1.3; font-weight: 600; letter-spacing: -.01em; }
.doc-body h2 .n { font: 500 11px/1 var(--mono); letter-spacing: .08em; color: var(--gold); }
.doc-body p { margin: 0; padding-left: 36px; font-size: 16px; line-height: 1.7; color: #ebe6dc; }
.doc-body p + p { margin-top: 12px; }
.doc-body a, .doc .lede a { color: var(--gold); text-decoration: underline; text-decoration-color: rgba(212, 184, 122, .4); text-underline-offset: 3px; }
.doc-body a:hover, .doc .lede a:hover { text-decoration-color: var(--gold); }
footer nav a[aria-current="page"] { color: var(--text); }

/* 404: tabelada "404" döner; altında tek yol, ana sayfa. */
main.notfound { display: grid; grid-template-columns: none; place-content: center; justify-items: center; gap: 0; padding: 24px 0 64px; text-align: center; }
.flap.big { --w: 56px; --h: 100px; gap: 6px; margin-bottom: 36px; }
.notfound h1 { font-size: clamp(30px, 3.4vw, 44px); line-height: 1.1; letter-spacing: -.025em; margin: 0 0 12px; }
.notfound .lede { display: block; margin: 0 auto 30px; }
.home-link {
  display: inline-flex; align-items: center; height: 44px; padding: 0 22px; border-radius: 22px; border: 1px solid var(--hairline);
  font: 600 10.5px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); transition: border-color .2s;
}
.home-link:hover { border-color: rgba(212, 184, 122, .55); }

@media (max-width: 860px) {
  main.doc { padding: 20px 0 64px; }
  .doc-head { margin-bottom: 32px; }
  .doc h1 { font-size: clamp(30px, 8.4vw, 38px); }
  .doc .lede { font-size: 15.5px; }
  .doc-grid { display: block; }
  .toc { display: none; }
  .doc-body h2 { grid-template-columns: 30px 1fr; font-size: 17.5px; }
  .doc-body p { padding-left: 0; font-size: 15.5px; }
  .flap.big { --w: 44px; --h: 78px; gap: 5px; }
}