/* deskami.com
 *
 * Renkler uygulamanın paletinden birebir (DeskamiDesign/Palette.swift):
 * site ürüne benzemeli, ona yakın bir şeye değil.
 *
 * Yerleşim baştan sona **mantıksal özelliklerle** yazılı —
 * `margin-inline-start`, `padding-inline`, `text-align: start` — çünkü site
 * otuz altı dili taşıyacak ve ikisi sağdan sola. Bugün uygulamada tam olarak
 * bunun bedelini ödedik: sağdan sola düzen sonradan düşünülünce, yazılmış ve
 * testleri geçen kod hiç çalışmıyordu. Burada `left`/`right` hiçbir özellik
 * adında geçmiyor; tek istisna maske gradyanının yönü, bir değerin içinde
 * ve `dir="rtl"` için ayrı bir kuralla aynalı.
 */

:root {
  --paper: #F4F0E8;
  --sunken: #EAE5DA;
  --ink: #2E2A25;
  --secondary: #6E685C;
  --calm: #7FA08C;
  --attention: #C08457;
  --rest: #6B7A96;
  --line: #C9C2B4;

  --measure: 34rem;
  --gap: clamp(1rem, 3vw, 2rem);
  --radius: 10px;

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #1E1C1A;
    --sunken: #26231F;
    --ink: #E8E3DA;
    --secondary: #8E877B;
    --calm: #5C7A69;
    --attention: #966642;
    --rest: #4E5A70;
    --line: #46423C;
  }
}

*, *::before, *::after { box-sizing: border-box; }

/* Kök 16 piksel kalıyor, gövde 17: `rem` ölçüleri (62rem sütun, 34rem
 * ölçü, boşluklar) 16'nın katı ve görseller o sayılara basılıyor — 62rem
 * = 992 piksel, kesit sütunu 480. Kök 17'ye çekilince sütun 1054 olmuş ve
 * her görsel yüzde altı büyütülerek gösterilmişti; Retina'da bu bulanıklık
 * demek. Okuyucunun tarayıcı yazı boyutu tercihi yine sayılıyor. */
html { font-size: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.65;
  /* Üçüncü taraf font yok. Bir yazı tipini dışarıdan çekmek, "bu sayfa
   * hiçbir yerden bir şey yüklemiyor" cümlesini yalan yapardı. */
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3 { line-height: 1.25; font-weight: 600; text-wrap: balance; }
h1 { font-size: clamp(2rem, 6vw, 3rem); margin: 0 0 0.6em; letter-spacing: -0.02em; }
h2 { font-size: clamp(1.4rem, 3.4vw, 1.9rem); margin: 0 0 0.5em; }
h3 { font-size: 1.1rem; margin: 0 0 0.35em; }
p { margin: 0 0 1em; }
a { color: inherit; text-underline-offset: 3px; }
/* Karakter resimleri iki kopya: açık ve koyu (build.py, "karakterler").
 * Hangisinin görüneceğini zemini boyayan medya sorgusu seçiyor, resmin
 * kendisi ya da `<picture>` değil; ikisi hiç ayrışamıyor. Gizli olan
 * düzende yer tutmuyor. Bu resimlere `display` veren başka kural yok;
 * eklenecekse buradaki iki kuralla birlikte düşünülmeli. */
img[data-scheme="dark"] { display: none; }
@media (prefers-color-scheme: dark) {
  img[data-scheme="light"] { display: none; }
  img[data-scheme="dark"] { display: inline; }
}

.skip {
  position: absolute; inset-inline-start: -9999px;
  background: var(--ink); color: var(--paper); padding: 0.6em 1em; border-radius: var(--radius);
}
.skip:focus { inset-inline-start: 1rem; inset-block-start: 1rem; z-index: 10; }

/* ------------------------------------------------------------- iskelet */
.top, .bottom { max-width: 62rem; margin-inline: auto; padding-inline: var(--gap); }

/* İçerik sütunu şeridin **kendi dolgusuyla** ortalanıyor, çocuklara
 * `margin-inline: auto` vererek değil. Öyleyken dar bloklar (`.lede`,
 * `.prose`) kendi 34rem'leri içinde ortalanıyor ve başlık solda dururken
 * metin ortaya kayıyordu — aynı bölümde iki farklı sol kenar. */
.band { padding-inline: max(var(--gap), calc((100% - 62rem) / 2)); }
.band > * { max-width: 62rem; margin-inline: 0; }
.band > .lede, .band > .prose, .band > figure { max-width: var(--measure); }
.band > figure.shot { max-width: 62rem; }
/* Plus bölümündeki ay görünümü metin sütunundan geniş: hafta kesiti gibi
 * 992 puntoda basılı, 34rem'e sığdırılınca yazısı okunmaz. */
.band > figure.crop[data-shot="month"] { max-width: 62rem; margin-block-start: calc(var(--gap) * 1.5); }

.top {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--gap); padding-block: 1.2rem; flex-wrap: wrap;
}
.wordmark {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-weight: 600; text-decoration: none; letter-spacing: -0.01em;
}
/* Adın altındaki cümle, kurulumun ilk ekranındaki başlık (`ui.tagline`,
 * uygulamadan birebir). Yalnız geniş ekranda: dar ekranda adla yan yana
 * sığmıyor ve bağlantıları alt satıra itiyordu. Cümle görününce yaprak iki
 * satır boyuna büyüyor ki ad, cümle ve yaprak tek blok gibi dursun. */
.wordmark-text { display: flex; flex-direction: column; }
.tagline { display: none; }
/* 40rem: en uzun çeviri (Almanca) bağlantılarla tek satıra 566 pikselde
 * sığıyor; telefonlar dikeyde bunun altında. */
@media (min-width: 40rem) {
  .wordmark-text { line-height: 1.2; }
  .tagline {
    display: block; font-size: 0.8rem; font-weight: 400; letter-spacing: 0;
    color: var(--secondary);
  }
  .wordmark img { inline-size: 38px; block-size: 38px; }
}
/* Bağlantılar adın yanındaki bütün boşluğu alıyor ve sona yaslanıyor.
 * İkisi yan yana sığmazsa önce kendi içinde alt alta diziliyor — sağda,
 * adın hizasında — ve başlık tek şerit kalıyor. Eskiden bütün grup adın
 * altına düşüyordu: 360 pikselde Fransızca, Macarca, Rumence, Rusça,
 * Tayca, Ukraynaca. Tek bir bağlantı bile adın yanına sığmıyorsa (Rusça,
 * ~355 pikselin altında) grup yine alt satıra iniyor; yatay kaydırma hiç
 * yok. Metin kısaltılmıyor: sözcük her dilde uygulamanınki. */
.links {
  display: flex; gap: 0 1.2rem; font-size: 0.95rem;
  flex: 1 1 0; flex-wrap: wrap; justify-content: flex-end;
}
.links a { white-space: nowrap; }
/* Üst ve alt bağlantılar dokunma hedefi olarak 40 piksele yakın: dolgu
 * büyütüyor, eksi kenar boşluğu görünen ritmi olduğu yerde tutuyor. */
.links a, .langs a {
  display: inline-block; padding-block: 0.5em; padding-inline: 0.4em; margin-inline: -0.4em;
}
/* Geçerli sayfanın bağlantısı çizgisiz: gidilecek yer değil, bulunulan yer. */
.links a[aria-current="page"] { text-decoration: none; }

.band { padding-block: clamp(2.5rem, 7vw, 5rem); }
.band + .band { border-block-start: 1px solid var(--line); }
.band.sunken { background: var(--sunken); }
/* Karakter seçici hero'nun devamı: seçilen karakter sahnede de değişiyor.
 * İkisi aynı zeminde tek parça duruyor; aradaki ayraç tam genişlik çizgi
 * değil, sütun genişliğinde, boşluk da şeritler arasındakinden dar. */
.band + .band.joined { border-block-start: 0; padding-block-start: 0; }
.band.joined::before {
  content: ""; display: block; max-width: 62rem;
  border-block-start: 1px solid var(--line);
  margin-block-end: clamp(2rem, 5vw, 3.5rem);
}
.band:has(+ .band.joined) { padding-block-end: clamp(2rem, 5vw, 3.5rem); }

.lede { max-width: var(--measure); font-size: 1.15rem; color: var(--secondary); }
.prose { max-width: var(--measure); }

/* Çökük zeminde ikincil renk yerine mürekkep. Palet uygulamayla birebir ve
 * öyle kalıyor; ama ikincil/çökük çifti 4.40:1 ölçüyor, küçük metinde
 * sınırın hemen üstü. Kâğıt zeminde ikincil kalıyor. */
.band.sunken .lede, .stage .beat, .stage .replay, .beats-static ol,
.states figcaption, .before { color: var(--ink); }

/* --------------------------------------------------------------- hero */
.hero {
  display: grid; gap: clamp(1.5rem, 5vw, 3rem);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 46rem) {
  .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); }
}

/* Durum ve fiyat tek satırda iki ayrı `<span>`; cümleler birleştirilmiyor,
 * yan yana duruyor ve dar ekranda ikincisi alta iniyor. */
.status { display: flex; flex-wrap: wrap; gap: 0 0.6em; color: var(--secondary); }
.hero .fine { font-size: 0.9rem; color: var(--secondary); }

/* Çağrı: sessiz bir hap düğme. Dolgu yok, ünlem yok; üstüne gelince
 * mürekkep dolup kâğıt yazıyor. */
.cta {
  display: inline-block; text-decoration: none;
  border: 1px solid var(--ink); border-radius: 999px;
  padding-block: 0.5em; padding-inline: 1.2em;
}
.cta:hover { background: var(--ink); color: var(--paper); }

.stage {
  position: relative;
  display: grid; place-items: center; gap: 1rem;
  background: var(--sunken); border-radius: var(--radius);
  padding: clamp(1.5rem, 5vw, 2.5rem);
}

/* Sahne: masada oturan bir kişi ve karşısında bir Mac. Fotoğraf değil,
 * çizim — kişi, sandalye, masa, dizüstünün çerçevesi tek bir SVG; ekranın
 * içi ise HTML (`.screen`). İkisi aynı ölçeği paylaşıyor: `.scene` SVG'nin
 * `viewBox`'ıyla (480×240) aynı orana sabit ve `.screen` ekran bölgesinin
 * (x 232–400, y 30–136) yüzdeleriyle üstüne oturuyor; böylece boyut ne
 * olursa olsun çerçeve ile ekran birebir çakışıyor. SVG ekranın üstünde
 * çizili (DOM'da sonra geliyor): çerçeve ortası delik bir halka, ekran o
 * delikten görünüyor. Dizüstü kişiye göre küçük tutuldu (ekran deliği
 * dört baş genişliği; gerçek bir MacBook'a yaklaşan en küçük ölçü ki
 * köşedeki karakter dar telefonda hâlâ tanınsın), kişi ise sahnenin
 * yüksekliğini dolduruyor. */
.scene { position: relative; inline-size: 100%; aspect-ratio: 480 / 240; }
.figure {
  position: absolute; inset: 0; inline-size: 100%; block-size: 100%;
  display: block; pointer-events: none;
}
/* Sağdan sola dillerde sahne aynalanıyor: kişi okuma yönünde, dizüstü
 * satır başında. Ekranın kendi içi mantıksal özelliklerle zaten dönüyor. */
[dir="rtl"] .figure { transform: scaleX(-1); }

/* Çizgiler paletten: kişi mürekkep, eşya çizgi rengi, dizüstünün tabanı
 * ikincil; çerçeve kâğıt dolgulu ve mürekkep kenarlı. Koyu kipte hepsi
 * değişkenlerle kendiliğinden dönüyor. Kalınlıklar `viewBox` biriminde. */
.figure .furniture {
  fill: none; stroke: var(--line); stroke-width: 4;
  stroke-linecap: round; stroke-linejoin: round;
}
.figure .bezel { fill: var(--paper); stroke: var(--ink); stroke-width: 1.5; }
.figure .camera { fill: var(--ink); }
.figure .base { fill: var(--secondary); }
.figure .legs, .figure .torso, .figure .arm path {
  fill: none; stroke: var(--ink); stroke-linecap: round; stroke-linejoin: round;
}
.figure .legs { stroke-width: 16; }
.figure .torso { stroke-width: 40; }
.figure .arm path { stroke-width: 14; }
.figure .head circle { fill: var(--ink); }
/* Bakış çizgisi: kameradan yüze, noktalı ve sönük. Kamera kullanılıyor;
 * görüntü hiç gösterilmiyor. Çizgi bunu söylüyor, fazlasını değil. Ekran
 * camının üstünden geçmesin diye yalnız çerçevenin dış kenarından yüze
 * kadar olan parçası çizili; iki hâli var (dik / çökmüş), boşta çökmüş
 * olan görünmüyor. Çökünce yüz çerçeveye yaklaşıyor ve parça kısalıyor —
 * bu da doğru: kamera ile yüz arasında yer kalmıyor. Kısa parça yine de
 * okunsun diye noktalar sık (bir dolu, üç boş) ve renk ikincil metin
 * rengi: sahne telefonda üç yüz piksele sığıyor, çizgi rengiyle seyrek
 * noktalar orada birkaç lekeye iniyordu. */
.figure .sight {
  fill: none; stroke: var(--secondary); stroke-width: 1.5;
  stroke-linecap: round; stroke-dasharray: 1 3;
}
.figure .sight-slumped { opacity: 0; }

/* Duruş. Anlatı `data-pose` yazıyor: vuruşun ağırlığı sıfırdan büyükse
 * "slumped", yoksa dik duruşun adı. Gövde kalçadan 22° öne devriliyor, baş
 * boyundan 14° daha düşüyor; kol gövdenin içinde, omuz gövdeyle gidiyor.
 * El masada kalsın diye üst kol omuzdan 14,43°, ön kol dirsekten −69,76°
 * dönüyor: üç dönüş birleşince el yine (192,147) noktasına geliyor (iki
 * parçalı kolun ters kinematiği, çözüm kayıtlı; geçiş boyunca el en çok
 * iki birim kayıyor, yani masada bir parmak sürükleniyor). Böylece tek bir
 * kol var ve iki kolun birbirine sönmesi yok. `transform-box: view-box`
 * sayesinde eksenler `viewBox` biriminde; iç içe gruplarda eksen yerel
 * uzayda, yani dönmüş omuzun dirseği. Süreler uygulamadan: 500 ms
 * çökerken, 380 ms doğrulurken — kişi karakterden önce ve ondan hızlı
 * hareket ediyor, arada kalan gecikme anlatının kendisi. Bakış çizgisinin
 * iki hâli geçişin tam ortasında 150 ms'de yer değiştiriyor ki iki çizgi
 * bir arada görünmesin. Hepsi hareket azaltılmamışken: azaltılmış kipte
 * bu blok hiç uygulanmıyor, `data-pose` ne derse desin kişi dik ve geçiş
 * yok (anlatı orada zaten oynamıyor). */
@media (prefers-reduced-motion: no-preference) {
  .figure .upper, .figure .head, .figure .arm, .figure .forearm { transform-box: view-box; }
  .figure .upper { transform-origin: 116px 158px; }
  .figure .head { transform-origin: 124px 52px; }
  .figure .arm { transform-origin: 123px 78px; }
  .figure .forearm { transform-origin: 160px 126px; }
  .figure .upper, .figure .head, .figure .arm, .figure .forearm {
    transition: transform 380ms ease-in-out;
  }
  .figure .sight { transition: opacity 150ms ease-in-out 115ms; }
  .scene[data-pose="slumped"] .upper,
  .scene[data-pose="slumped"] .head,
  .scene[data-pose="slumped"] .arm,
  .scene[data-pose="slumped"] .forearm { transition-duration: 500ms; }
  .scene[data-pose="slumped"] .sight { transition-delay: 175ms; }
  .scene[data-pose="slumped"] .upper { transform: rotate(22deg); }
  .scene[data-pose="slumped"] .head { transform: rotate(14deg); }
  .scene[data-pose="slumped"] .arm { transform: rotate(14.43deg); }
  .scene[data-pose="slumped"] .forearm { transform: rotate(-69.76deg); }
  .scene[data-pose="slumped"] .sight-straight { opacity: 0; }
  .scene[data-pose="slumped"] .sight-slumped { opacity: 1; }
}

/* Çizili bir Mac ekranı: ince menü çubuğu, sönük bir pencere ve köşede
 * karakter. Ekran görüntüsü değil, CSS — ürünün nerede durduğunu anlatmak
 * için yeterli ve kırk dilde aynı. Bütün ölçüler ekranın yüzdesi ki dar
 * sahnede de aynı oranlar korunuyor. Çerçeveyi SVG çiziyor; buradaki
 * yüzdeler ekran bölgesinin `viewBox`'a oranı (232/480, 30/240, 168/480,
 * 106/240). */
.screen {
  position: absolute; inset-inline-start: 48.333%; inset-block-start: 12.5%;
  inline-size: 35%; block-size: 44.167%;
  background: var(--paper); overflow: hidden;
}
.screen .menubar {
  block-size: 8%; background: var(--sunken); border-block-end: 1px solid var(--line);
  display: flex; align-items: center; justify-content: flex-end; padding-inline: 2.5%;
}
.screen .menubar img { block-size: 72%; inline-size: auto; }
.screen .window {
  position: absolute; inset-inline-start: 4%; inset-block-start: 14%;
  inline-size: 62%; block-size: 58%;
  background: var(--sunken); opacity: 0.7; border-radius: 4px;
}
/* Karakter ekranın yüzde 44'ü: ekran artık sahnenin üçte biri, dar
 * telefonda ~100 piksel kalıyor ve karakter 44 pikselde hâlâ tanınıyor;
 * 40 pikselin altı okunmuyordu. */
.screen [data-hero-image] {
  position: absolute; inset-inline-end: 3%; inset-block-end: 3%;
  inline-size: 44%; block-size: auto;
}

/* Anlatının metni; yüksekliği sabit ki vuruş değişince sayfa zıplamasın. */
.beat {
  margin: 0; min-height: 4.5em; text-align: center; font-size: 0.98rem;
}

.replay {
  font: inherit; font-size: 0.9rem;
  background: none; border: 1px solid var(--line); border-radius: 999px;
  padding: 0.35em 1em; cursor: pointer;
}
.replay:hover { border-color: var(--secondary); }
/* Düğme anlatı bir kez bitene kadar görünmüyor. `visibility`, `display`
 * değil: yeri dolu kalıyor ve sahne yüksekliği zıplamıyor. */
.stage:not([data-playing="false"]) .replay { visibility: hidden; }

/* Dört vuruşun metin karşılığı. Betik çalışmadıysa olduğu gibi görünür.
 * Betik çalışınca (`data-hero-js`) yalnız gözden çekiliyor; ekran okuyucu
 * listeye yine ulaşıyor, çünkü görsel ve alt yazı süs. */
.beats-static ol { margin: 0; padding-inline-start: 1.2em; }
@media (prefers-reduced-motion: no-preference) {
  .stage[data-hero-js="true"] .beats-static {
    position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
}
/* Hareket bir tercih değil: sistemde azaltılmışsa anlatı oynamıyor ve
 * dört vuruş liste olarak duruyor — uygulamanın `Reduce Motion`
 * davranışının aynısı. */
@media (prefers-reduced-motion: reduce) {
  .stage .beat, .stage .replay { display: none; }
}

/* ------------------------------------------------------------ kartlar */
.grid {
  display: grid; gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}
.card {
  background: var(--sunken); border-radius: var(--radius);
  padding: 1.4rem; border: 1px solid transparent;
}
.card p:last-child { margin-block-end: 0; }

/* Karakter seçici. Betik yokken düğmeler görünmüyor ve üç sıra adıyla
 * alt alta duruyor; betik çalışınca (`data-picker-js`) düğmeler çıkıyor,
 * adlar ve seçilmeyen sıralar `hidden` alıyor. Seçili olan mürekkep
 * çerçeveli; dokunma hedefi 44 piksel. */
.characters { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-block-end: 1.2rem; }
[data-characters]:not([data-picker-js="true"]) .characters { display: none; }
.characters button {
  font: inherit; font-size: 0.95rem; color: inherit; cursor: pointer;
  display: inline-flex; align-items: center; gap: 0.5rem;
  min-block-size: 44px; padding-block: 0.3em; padding-inline: 0.6em 0.9em;
  background: none; border: 1px solid var(--line); border-radius: 999px;
}
.characters button img { inline-size: 1.8rem; block-size: auto; }
.characters button:hover { border-color: var(--secondary); }
.characters button[aria-pressed="true"] { border-color: var(--ink); }
.states-name { font-size: 1rem; margin-block: 1.2rem 0.5rem; }
.states-name:first-of-type { margin-block-start: 0; }
.states-name[hidden], .states[hidden] { display: none; }

/* Karakter tablosu: üç karakter, yedi durum.
 *
 * Dar ekranda yedi sütun her karakteri 45 piksele indiriyor ve alt
 * yazılar sarıyordu. `auto-fit` ile sarıyor: yedi durumu tek satırda
 * görmek güzel ama okunmaz hâlde görmekten iyi değil. */
.states {
  display: grid; gap: 0.6rem;
  grid-template-columns: repeat(auto-fit, minmax(4.5rem, 1fr));
}
@media (min-width: 40rem) {
  .states { grid-template-columns: repeat(7, 1fr); }
}
.states img { width: 100%; height: auto; }
.states figure { margin: 0; }
.states figcaption { font-size: 0.8rem; text-align: center; }

/* Gün kartından kesitler: her biri okunur boyutta, altında bir cümle.
 * `hover` kesiti kendi boyutunda ve ortada — küçük bir panel, hücreyi
 * doldurunca bulanıklaşırdı. */
.shots { display: grid; gap: var(--gap); grid-template-columns: 1fr; margin-block-end: var(--gap); }
@media (min-width: 46rem) {
  .shots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.crop { margin: 0; }
/* Çerçeve `border` değil dış halka: kenarlık kutunun içinden yer alıyor
 * ve 480 piksele basılmış kesit 478'de gösteriliyordu — iki piksel için
 * bütün yazı yeniden örnekleniyor. Halka dışarıda, görsel bire bir. */
.crop img {
  display: block; inline-size: 100%; block-size: auto; border-radius: var(--radius);
  box-shadow: 0 0 0 1px var(--line); background: var(--sunken);
}
.crop[data-shot="hover"] { grid-column: 1 / -1; }
.crop[data-shot="hover"] img { inline-size: auto; max-inline-size: 100%; margin-inline: auto; }
/* Hafta görünümü 992 puntoda basılıyor: yarım hücreye sığdırınca yazı
 * yarıya iner ve okunmaz. Tam satır alıyor; dar ekranda gün kartı gibi
 * yana kayıyor. */
.crop:is([data-shot="week"], [data-shot="month"]) { grid-column: 1 / -1; overflow-x: auto; }
.crop:is([data-shot="week"], [data-shot="month"]) img { min-inline-size: 34rem; }
.crop figcaption, figure.shot figcaption {
  font-size: 0.9rem; color: var(--secondary); margin-block-start: 0.6rem;
}

/* Gün kartı yoğun bir görsel: 1800 piksel genişliğinde ve dar ekrana
 * sığdırılınca okunmaz bir lekeye dönüyordu. Gizlemek yerine kaydırılıyor
 * — ürünün asıl kanıtı o kart, küçültüp göstermiş gibi yapmak işe
 * yaramıyor. */
figure.shot { margin: 0; overflow-x: auto; }
figure.shot img {
  /* `block`: satır içi görselin taban çizgisi altında kalan 7 piksellik
   * boşluk `<picture>` kutusunu uzatıyor ve "i" katmanı o kadar aşağı
   * kayıyordu. Kesitlerde zaten blok. */
  display: block; width: 100%; min-width: 34rem; height: auto; border-radius: var(--radius);
  box-shadow: 0 0 0 1px var(--line);
  /* PNG gelene kadar çerçeve boş kalmasın. */
  background: var(--sunken);
}
/* Dar ekranda kaydırma ipucu ve kenarda solma: kartın devam ettiği
 * görünsün. Geniş ekranda ikisi de yok, kart zaten sığıyor. */
.scroll-hint { display: none; font-size: 0.9rem; color: var(--secondary); margin-block: 0.3rem 0; }
@media (max-width: 40rem) {
  .scroll-hint { display: block; }
  /* Maskede mantıksal yön yok; gradyan yönü değer olarak yazılıyor ve
   * sağdan sola için ikinci kural aynalıyor. Bu dosyada `left`/`right`
   * yalnız burada, bir değerin içinde geçiyor — özellik adında değil. */
  figure.shot, .crop:is([data-shot="week"], [data-shot="month"]) {
    mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
  }
  [dir="rtl"] figure.shot, [dir="rtl"] .crop:is([data-shot="week"], [data-shot="month"]) {
    mask-image: linear-gradient(to left, #000 calc(100% - 2.5rem), transparent);
  }
  /* Solan şerit yalnız görselin üstüne düşsün; yazılar oraya girmiyor. */
  figure.shot figcaption, figure.shot .scroll-hint,
  .crop:is([data-shot="week"], [data-shot="month"]) figcaption { padding-inline-end: 2.5rem; }
}

/* ------------------------------------------------------ "i" noktaları */
/* Görsellerdeki "i" işaretleri görselin kendisinde basılı; üstlerine
 * görselle aynı `viewBox`'ta bir SVG katmanı oturuyor ve her nokta bir
 * bağlantı. `.hot` görselin kutusu: katman onu birebir dolduruyor, görsel
 * ne kadar ölçeklenirse katman da o kadar — noktalar yerinden oynamıyor.
 * Hafta görünümü ve tam kart dar ekranda yana kayıyor; sarmalayıcı
 * görselle aynı en az genişliği alıyor ki katman görselle değil kaydırma
 * kabıyla aynı boyda kalmasın. */
.hot { position: relative; inline-size: 100%; }
.hot picture { display: block; }
.crop:is([data-shot="week"], [data-shot="month"]) .hot, figure.shot .hot { min-inline-size: 34rem; }
.hotspots {
  position: absolute; inset: 0; inline-size: 100%; block-size: 100%;
  overflow: visible;
}
/* Nokta çizilmiyor, görselde zaten var; dikdörtgen yalnız imleç ve klavye
 * için. Odak halkası SVG'nin kendi çizgisiyle: `outline` SVG içinde
 * güvenilir değil. */
.hotspots a { cursor: help; outline: none; }
.hotspots a rect { fill: transparent; stroke: none; pointer-events: all; }
.hotspots a:focus-visible rect { stroke: var(--ink); stroke-width: 2; }

/* Balon — uygulamanın kendi balonunun ölçüleriyle (InfoDot.swift): 320
 * punto, 14 dolgu, kâğıt zemin, başlık gövde boyunda, metin ikincil; bölüm
 * başlıkları ikincil ve orta ağırlıkta, bölümler arası 4, başlıkla metin
 * arası 3 punto. Ok 10 piksellik çevrilmiş bir kare; noktaya betik
 * hizalıyor (`--arrow`), balon noktanın altında; sığmazsa üstünde ve ok
 * alt kenarda. */
.info-pop {
  position: absolute; z-index: 5;
  inline-size: min(320px, calc(100vw - 2rem));
  padding: 14px;
  background: var(--paper); border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
  font-size: 0.9rem; line-height: 1.5; color: var(--secondary);
  text-align: start; text-wrap: pretty;
  opacity: 0;
}
.info-pop[data-open] { opacity: 1; }
.info-pop[hidden] { display: none; }
.info-pop p { margin: 0; }
.info-pop .info-title { font-size: 1rem; color: var(--ink); margin-block-end: 6px; }
.info-pop p + p { margin-block-start: 4px; }
.info-pop strong { display: block; font-weight: 500; margin-block-end: 3px; }
.info-pop::before {
  content: ""; position: absolute;
  inline-size: 10px; block-size: 10px;
  inset-inline-start: var(--arrow, calc(50% - 5px));
  inset-block-start: -6px;
  background: var(--paper); border: 1px solid var(--line);
  border-inline-end: 0; border-block-end: 0;
  transform: rotate(45deg);
}
.info-pop[data-place="above"]::before {
  inset-block-start: auto; inset-block-end: -6px;
  border: 1px solid var(--line); border-inline-start: 0; border-block-start: 0;
}
/* Okun kenarları mantıksal (başlangıç + üst); 45° dönüş fiziksel. Sağdan
 * sola yazıda başlangıç kenarı sağ olunca kare öbür yöne dönüyor ki
 * çizgili köşe yine yukarı (ya da aşağı) baksın. */
[dir="rtl"] .info-pop::before { transform: rotate(-45deg); }
@media (prefers-color-scheme: dark) {
  .info-pop { box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5); }
}
@media (prefers-reduced-motion: no-preference) {
  .info-pop { transition: opacity 120ms ease-out; }
}

/* Sözlük: balonların metni sayfada bir kez. Betik yokken noktalar buraya
 * bağlanıyor; başlığın kimliği var, üst kenara yapışmasın. */
/* Balon metinlerinin kaynağı sayfada görünmüyor; balon ve ekran okuyucu
 * buradan okuyor. */
.glossary-source[hidden] { display: none; }

/* ------------------------------------------------------------- yazılar */
/* Metin sayfaları: gizlilik ve destek. Sütun 34rem — 17 puntoda satırda
 * yaklaşık 65 Latin, 32 CJK karakter. Başlıklar ana sayfadaki afiş boyunda
 * değil belge boyunda; hiyerarşi boyuttan çok ağırlık ve boşlukla. */
.prose { max-width: var(--measure); }
.prose p, .prose li { text-wrap: pretty; }
.prose h1 { font-size: clamp(1.9rem, 5vw, 2.5rem); }
/* Tarih satırı başlığın alt yazısı — başlığa yakın, metinden uzak — ki
 * "yukarıdaki tarih" denince göz onu bulsun. */
.prose h1:has(+ .updated) { margin-block-end: 0.3em; }
.prose .updated { color: var(--secondary); font-size: 0.95rem; margin-block-end: 2.5em; }
/* Bölüm başlığı bir etiket, afiş değil. Soru başlığı gövde boyunda ve
 * kalın: yanıtının ilk satırı gibi okunuyor. Yanıtlar arası 32, bölümler
 * arası 62 piksel — uzun bir SSS'de gözün tuttuğu şey bu ikisinin oranı. */
.prose h2 { font-size: clamp(1.3rem, 2.6vw, 1.5rem); margin-block: 2.6em 0.6em; }
.prose h3 { font-size: 1.0625rem; line-height: 1.4; margin-block: 1.9em 0.45em; }
/* Bölüm başlığının hemen altındaki soru başlığı: iki başlık kopmasın. */
.prose h2 + h3 { margin-block-start: 1.2em; }
/* Sayfanın son paragrafı şeridin dolgusuna yaslanıyor. */
.prose > :last-child { margin-block-end: 0; }
/* Başlıkların kimliği var (`#kamera-izni-reddedildi`); bağlantıyla gelince
 * başlık üst kenara yapışmasın. */
.prose h2, .prose h3 { scroll-margin-block-start: 1.5rem; }
/* Listeler: im ikincil renkte, maddeler arası boşluk son maddeden sonra
 * yok. Numaralı adımlar (kaldırma sırası) eş genişlikli rakamla hizalı. */
.prose ul, .prose ol { padding-inline-start: 1.4em; margin-block: 0 1em; }
.prose li { margin-block-end: 0.45em; }
.prose li:last-child { margin-block-end: 0; }
.prose li::marker { color: var(--secondary); }
.prose ol li::marker { font-variant-numeric: tabular-nums; }
.before li { margin-block-end: 0.6em; }
.prose hr { border: 0; border-block-start: 1px solid var(--line); margin-block: 2em; }
/* Metin içi bağlantı: ince, ikincil renkte çizgi; üstüne gelince mürekkep.
 * Üst ve alt banttaki bağlantılar genel kuralda kalıyor. */
.prose a {
  text-decoration-thickness: 0.06em; text-underline-offset: 0.18em;
  text-decoration-color: var(--secondary);
}
.prose a:hover, .prose a:focus-visible { text-decoration-color: currentColor; }
/* Dosya yolları: sistem eş aralıklı yazısı, çökük zemin. Yol dar ekrana
 * sığmıyor; `anywhere` herhangi bir karakterden kırılmasına izin veriyor,
 * yoksa satır taşıp sayfayı yana kaydırıyordu. */
.prose code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.88em;
  background: var(--sunken);
  padding-block: 0.08em; padding-inline: 0.35em;
  border-radius: 4px;
  overflow-wrap: anywhere;
}
/* İçindekiler: sahne ve kartlarla aynı çökük yüzey. Gizlilikte bölümler,
 * destekte bölümler ve altlarında sorular — bir kademe içeride, biraz
 * küçük. Bu kurallar `.prose` kurallarından sonra geliyor ki aynı
 * özgüllükteki liste ve bağlantı kurallarını geçsin. */
.contents {
  background: var(--sunken); border-radius: var(--radius);
  padding-block: 1rem 1.1rem; padding-inline: 1.25rem;
  margin-block: 1.5rem 2.5rem; font-size: 0.95rem;
}
.contents p { margin-block-end: 0.5em; font-size: 0.85rem; font-weight: 600; }
.contents ol { margin: 0; padding-inline-start: 0; list-style: none; }
.contents li { margin-block: 0; }
.contents li + li { margin-block-start: 0.35em; }
.contents ol ol { margin-block-start: 0.35em; padding-inline-start: 1rem; font-size: 0.92em; }
.contents a { display: inline-block; padding-block: 0.15em; text-decoration: none; }
.contents a:hover, .contents a:focus-visible { text-decoration: underline; }
/* On dört soru tek sütunda ekranı dolduruyordu; geniş ekranda iki sütun.
 * Madde sütun sınırında bölünmüyor. */
@media (min-width: 40rem) {
  .contents ol ol { columns: 2; column-gap: 1.5rem; }
  .contents ol ol li { break-inside: avoid; }
}

/* --------------------------------------------------------------- alt */
.bottom {
  border-block-start: 1px solid var(--line);
  padding-block: 2rem 3rem; color: var(--secondary); font-size: 0.9rem;
}
.promise { max-width: var(--measure); }
.langs { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; margin-block: 1rem; }
.lang-current { color: var(--ink); }
.fine { margin-block-end: 0; }

/* ----------------------------------------------------------------- 404 */
/* Kutu 34rem, sütun 62rem: `.band > *` onu sütunun başına yaslıyordu ve
 * geniş ekranda karakter ile cümle sola kayıyordu. Kendi kenar boşluğuyla
 * sütunun, dolayısıyla sayfanın ortasında. */
.missing { max-width: var(--measure); margin-inline: auto; text-align: center; }
.missing img { width: clamp(96px, 20vw, 140px); height: auto; margin-block-end: 1rem; }
.missing p { margin-block-end: 0.4em; }

:where(a):focus-visible, :where(button):focus-visible {
  outline: 2px solid var(--ink); outline-offset: 3px;
}

/* Hafta kesiti ve tam kart yatay kaydırma kabı içinde; kabın taşma
 * kırpması dıştaki halkanın (box-shadow) kaba değen kenarlarını siliyordu
 * ve çerçeve yarım görünüyordu. Bu ikisinde çerçeve içeride: outline,
 * kutunun bir piksel içine çekilmiş; görselin ölçüsüne dokunmuyor, kenar
 * pikselleri zaten kâğıt rengi. */
.crop:is([data-shot="week"], [data-shot="month"]) img, figure.shot img {
  box-shadow: none; outline: 1px solid var(--line); outline-offset: -1px;
}

/* Plus bölümü, uygulamadaki sayfayla aynı düzen: ücretsiz kalan tek
 * cümle, ikincil renkte küçük başlık, beş madde, ikincil renkte not. */
.prose.plus h3 { color: var(--secondary); font-weight: 400; font-size: 1rem; margin-block: 1.4em 0.5em; }
.prose.plus li { margin-block-end: 0.55em; }
.plus-note { color: var(--secondary); margin-block-start: 1.4rem; }

/* Karakter düğmesinde ikinci satır: Tüylü'nün altında "Deskami Plus'ta". */
.characters button span { display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1.15; }
.characters button small { font-size: 0.72em; color: var(--secondary); }