/* GugLed — statik site
 *
 * Dış bağımlılık yok: font, ikon, betik hiçbir CDN'den çekilmiyor. R2
 * üzerinde duran dosyalar tek başına açılabilir olmalı.
 */

:root {
  --bg: #000000;
  --surface: #0e0e0f;
  --surface-raised: #17171a;
  --stroke: #24242a;
  --text: #f5f5f7;
  --text-dim: #9a9aa4;
  --text-faint: #63636d;
  /* Tabela rengi. Paylaşım sayfasında bu üçü YÜKTEN geliyor (paylasim.js
   * `--led`i ayarlıyor), böylece çerçeve, ışıma, düğme ve bağlantı tabelanın
   * kendi rengini alıyor. Önceden sayfa hangi renk paylaşılsa yeşil
   * parlıyordu: pembe bir tabela yeşil bir çerçevede duruyordu. */
  --led: #1aff4d;
  --led-dim: #1aff4d24;
  --led-soft: #1aff4d14;
  --led-glow: #1aff4d40;
  --gold: #e8b54a;
  --radius: 18px;
  --radius-sm: 12px;
  --w: 860px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
  padding-inline: 20px;
}

.wrap { max-width: var(--w); margin: 0 auto; }

/* ---------- Üst çubuk ---------- */

header.bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-block: 22px;
  flex-wrap: wrap;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.2px;
  color: var(--text);
  text-decoration: none;
}

.logo .pip {
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--led);
  box-shadow: 0 0 10px var(--led);
}

header.bar nav { margin-left: auto; display: flex; gap: 18px; flex-wrap: wrap; }

header.bar nav a,
.langbtn {
  color: var(--text-dim);
  text-decoration: none;
  font-size: 14px;
}
header.bar nav a:hover { color: var(--text); }

.langbtn {
  background: var(--surface-raised);
  border: 1px solid var(--stroke);
  border-radius: 999px;
  padding: 6px 13px;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
}
.langbtn:hover { color: var(--text); }

/* ---------- LED panel ---------- */

.panel {
  background: #07070a;
  border: 1px solid rgba(26, 255, 77, 0.22);
  border-radius: var(--radius);
  box-shadow: 0 0 60px rgba(26, 255, 77, 0.14);
  overflow: hidden;
  margin-block: 8px 34px;
}

.panel canvas { display: block; width: 100%; height: auto; }

/* Dik tabela: telefon dikey tutuluyor, panel de daralıyor.
 *
 * Genişlik daraldığı için hücre boyu küçülmüyor — çizici hücreyi panel
 * genişliğine göre hesaplıyor, yani dar panelde nokta da küçülüyor ve
 * tabela telefonda göründüğü orana yaklaşıyor. */
.panel.dik {
  max-width: 300px;
  margin-inline: auto;
}

/* ---------- Metin ---------- */

h1 {
  font-size: clamp(30px, 6vw, 44px);
  line-height: 1.12;
  letter-spacing: -1px;
  margin: 0 0 14px;
}

h2 {
  font-size: clamp(21px, 3.4vw, 26px);
  letter-spacing: -0.4px;
  margin: 46px 0 14px;
}

h3 { font-size: 17px; margin: 30px 0 8px; }

.lede {
  font-size: clamp(17px, 2.4vw, 19px);
  color: var(--text-dim);
  margin: 0 0 30px;
  max-width: 58ch;
}

p { margin: 0 0 16px; }
ul, ol { margin: 0 0 16px; padding-left: 22px; }
li { margin-bottom: 7px; }
a { color: var(--led); }
strong { color: var(--text); }
code {
  background: var(--surface-raised);
  border: 1px solid var(--stroke);
  border-radius: 6px;
  padding: 1px 6px;
  font-size: 0.9em;
}

.muted { color: var(--text-dim); }
.small { font-size: 14px; }

/* ---------- Kartlar ---------- */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin-block: 22px;
}

.card {
  background: var(--surface);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  padding: 20px;
}
.card h3 { margin: 0 0 6px; font-size: 16px; }
.card p { margin: 0; color: var(--text-dim); font-size: 14.5px; }

/* ---------- Eylem ---------- */

.cta { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-block: 6px 10px; }

.btn {
  display: inline-block;
  background: #ffffff;
  color: #000000;
  text-decoration: none;
  font-weight: 600;
  padding: 14px 26px;
  border-radius: 999px;
}
.btn:hover { opacity: 0.9; }

.btn.ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--stroke);
}

.btn[aria-disabled="true"] {
  background: var(--surface-raised);
  color: var(--text-faint);
  cursor: default;
  pointer-events: none;
}

/* ---------- Tablo ---------- */

.tablewrap { overflow-x: auto; margin-block: 18px; }

table { border-collapse: collapse; width: 100%; font-size: 15px; min-width: 420px; }
th, td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--stroke); }
th { color: var(--text-dim); font-weight: 600; font-size: 13.5px; }
td:first-child { color: var(--text); }

/* ---------- Bilgi kutusu ---------- */

.note {
  background: var(--surface);
  border: 1px solid var(--stroke);
  border-left: 3px solid var(--led);
  border-radius: var(--radius-sm);
  padding: 16px 18px;
  margin-block: 22px;
}
.note p:last-child { margin-bottom: 0; }

/* ---------- SSS ---------- */

details {
  background: var(--surface);
  border: 1px solid var(--stroke);
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  margin-bottom: 10px;
}
summary { cursor: pointer; font-weight: 600; }
summary::marker { color: var(--led); }
details > *:not(summary) { color: var(--text-dim); }
details p:first-of-type { margin-top: 12px; }
details p:last-child { margin-bottom: 0; }

/* ---------- Alt bilgi ---------- */

footer {
  border-top: 1px solid var(--stroke);
  margin-top: 60px;
  padding-block: 26px 46px;
  color: var(--text-faint);
  font-size: 14px;
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  align-items: center;
}
footer nav { display: flex; gap: 18px; flex-wrap: wrap; margin-left: auto; }
footer a { color: var(--text-dim); text-decoration: none; }
footer a:hover { color: var(--text); }

/* ---------- Dil ---------- */

/* `hidden` her zaman kazanmalı.
 *
 * `.cta { display: flex }` ve `.buyut { display: inline-flex }` gibi sınıf
 * kuralları tarayıcının `[hidden] { display: none }` kuralını eziyor —
 * öznitelik dursa da öğe görünüyor. Sonuç: paylaşım sayfasında düğmeler
 * JS çalışmadan önce ve "tabela yok" durumunda da görünüyordu. */
[hidden] { display: none !important; }

[data-lang] { display: none; }
[data-lang].on { display: block; }
span[data-lang].on, a[data-lang].on { display: inline; }

/* ---------- Paylaşım sahnesi (yalnızca g.html) ----------
 *
 * Paylaşılan tabela bir belgenin tepesindeki şerit değil, sayfanın KENDİSİ.
 * Bağlantıyı açan kişi neredeyse her zaman telefonda ve mesajlaşma
 * uygulamasından geliyor; ilk ekranda görmesi gereken tek şey tabela.
 *
 * Ölçü birimi `svh`: mobil tarayıcıda adres çubuğu kayarken `vh` zıplıyor
 * ve ortalanmış içerik oynuyor.
 */

body.sahne { padding-inline: 0; }

/* Güvenli alan. `viewport-fit=cover` sayfayı çentiğin ve ada'nın ALTINA
 * kadar uzatıyor; `env(safe-area-inset-*)` eklenmezse üst çubuk durum
 * çubuğunun arkasında kalıyor. Bu hata bu projede uygulama tarafında da
 * yaşandı (Dynamic Island tabela yazısını kesiyordu). */
body.sahne .wrap {
  padding-inline: max(20px, env(safe-area-inset-left), env(safe-area-inset-right));
}
body.sahne header.bar { padding-top: calc(22px + env(safe-area-inset-top)); }

.sahne-ic {
  min-height: calc(100svh - 76px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 26px;
  padding: 10px max(20px, env(safe-area-inset-left), env(safe-area-inset-right))
           calc(40px + env(safe-area-inset-bottom));
  position: relative;
  text-align: center;
}

/* Karanlık odada duran bir ışık kaynağı. Rengi tabeladan geliyor.
 *
 * Sahneye değil EKRANA sabitleniyor: sahnenin içinde kalınca ışıma üst
 * çubuğun altında kesiliyor ve başlıkla sahne arasında sert bir dikiş
 * görünüyordu. */
.isik {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 42% at 50% 42%, var(--led-glow) 0%, transparent 72%),
    radial-gradient(120% 70% at 50% 40%, var(--led-soft) 0%, transparent 100%);
  z-index: 0;
}

.sahne-ic > *:not(.isik) { position: relative; z-index: 1; }

/* Tabela kutusu: sahnede kendi payı, altında belge boşluğu yok.
 *
 * `max-width` ŞART. Hücre boyu panel genişliğinden türediği için sınırsız
 * panel sınırsız nokta demek: geniş bir masaüstünde tabela 1.544px genişlik
 * ve 711px yükseklikle bütün ekranı kaplıyordu, sayfanın gerisi görünmüyordu.
 * Sınır telefon ekranı kadar bir nesne bırakıyor — duvar değil. */
.sahne-ic .panel {
  margin-block: 0;
  width: 100%;
  max-width: 760px;
  box-shadow: 0 0 90px var(--led-soft), 0 20px 60px #00000099;
}

/* Tam ekranda sınır kalkıyor: orada amaç tam olarak ekranı kaplamak. */
body.tam .sahne-ic .panel { max-width: none; }

/* Telefonda kenar boşluğu tabeladan çalıyor: nokta ne kadar büyükse o
 * kadar iyi okunuyor. Kenarlara yalnızca 10px bırakılıyor. */
@media (max-width: 560px) {
  .sahne-ic {
    padding-inline: max(10px, env(safe-area-inset-left), env(safe-area-inset-right));
    gap: 20px;
  }
  .sahne-ic .panel { border-radius: 14px; }
}

.yapan {
  font-size: clamp(16px, 4.4vw, 20px);
  color: var(--text);
  margin: 0;
  letter-spacing: -0.2px;
}
.yapan .mesaj {
  display: block;
  color: var(--text-dim);
  font-size: 0.82em;
  margin-top: 4px;
}

.sahne-ic .cta { margin: 0; justify-content: center; }

/* "Hiçbir şey yüklenmedi" ince yazı değil, ürünün farkı — rozet olarak. */
.rozet {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 7px 14px 7px 11px;
  border: 1px solid var(--stroke);
  border-radius: 999px;
  background: #0b0b0daa;
  color: var(--text-dim);
  font-size: 13px;
  line-height: 1.45;
  text-align: left;
  max-width: 44ch;
}
.rozet .pip {
  flex: 0 0 auto;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--led);
  box-shadow: 0 0 8px var(--led);
}

/* ---------- Büyüt ---------- */

/* Tam ekran düğmesi panelin ALTINDA duruyor.
 *
 * Panelin içine konduğunda telefonda yanan noktaların üstüne biniyordu ve
 * yarı saydam bir leke gibi görünüyordu. Dışarıda tabela temiz kalıyor,
 * dokunma hedefi de büyüyor. */
.buyut {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: -10px 0 0;
  padding: 8px 15px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: #0b0b0daa;
  color: var(--text-dim);
  cursor: pointer;
  font: inherit;
  font-size: 13.5px;
  transition: color 0.18s ease, border-color 0.18s ease;
}
.buyut:hover, .buyut:focus-visible { color: var(--text); border-color: var(--led-dim); }
.buyut .ikon { font-size: 15px; line-height: 1; }
.buyut .etiket { display: none; }
.buyut .etiket.on { display: inline; }

/* Tam ekranda düğme ekranın köşesine sabitleniyor ve yalnızca simge kalıyor:
 * orada amaç tabelayı hiçbir şeyle bölmemek. */
body.tam .buyut {
  position: fixed;
  top: calc(14px + env(safe-area-inset-top));
  right: calc(14px + env(safe-area-inset-right));
  margin: 0;
  z-index: 52;
  opacity: 0.4;
}
body.tam .buyut:hover, body.tam .buyut:focus-visible { opacity: 1; }
body.tam .buyut .etiket { display: none !important; }

/* Tam ekran: tabela ekranı kaplar, sayfanın gerisi çekilir.
 *
 * Fullscreen API kullanılmıyor — iPhone'da Safari rastgele bir öğeyi tam
 * ekrana almıyor (yalnızca video). CSS ile yapılınca her yerde çalışıyor. */
body.tam { overflow: hidden; }
body.tam .wrap,
body.tam footer,
body.tam .yapan,
body.tam .cta,
body.tam .rozet { display: none; }

body.tam .sahne-ic {
  position: fixed;
  inset: 0;
  min-height: 0;
  /* Yatayda çentik/ada YANDA duruyor ve tam kenara dayanan tabelanın
   * harflerini kesiyor. Uygulamada aynı hata yaşandı; burada baştan
   * güvenli alan bırakılıyor. Dikeyde boşluk yok: bant zaten ortada. */
  padding: 0 env(safe-area-inset-right) 0 env(safe-area-inset-left);
  gap: 0;
  z-index: 50;
  background: #000;
}
body.tam .sahne-ic .panel {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: #000;
}
/* Tam ekranda ışıma kapalı: orada amaç en yüksek karşıtlık, tabelanın
 * kendi ışıması yeter. */
body.tam .isik { display: none; }

/* Tabela yok: ışıma da yok. Hata durumu kutlama gibi parlamamalı. */
body.bos .isik { display: none; }

/* Yan çevirme ipucu: yatay tabela dik telefonda küçük kalıyor. Yalnızca
 * tam ekranda ve gerçekten dar-yüksek ekranda görünüyor. */
.cevir {
  position: fixed;
  left: 50%;
  bottom: calc(26px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 51;
  margin: 0;
  padding: 8px 15px;
  border-radius: 999px;
  background: #0b0b0dcc;
  border: 1px solid var(--stroke);
  color: var(--text-dim);
  font-size: 13px;
  display: none;
}
body.tam.yatay-tabela .cevir { display: block; }
@media (min-aspect-ratio: 1/1) {
  body.tam.yatay-tabela .cevir { display: none; }
}

/* ---------- Açılış: panel yanıyor ----------
 *
 * Gerçek bir neon tabela bir anda değil, tutuklukla yanıyor. Efekt
 * uygulamadaki "Neon Vızıltı"nın sayfa karşılığı ve yalnızca AÇILIŞTA bir
 * kez çalışıyor; sürekli olsaydı okumayı zorlaştırırdı.
 */
@keyframes yanma {
  0%   { opacity: 0; filter: brightness(0.2); }
  14%  { opacity: 1; filter: brightness(1.5); }
  22%  { opacity: 0.25; filter: brightness(0.3); }
  34%  { opacity: 1; filter: brightness(1.35); }
  44%  { opacity: 0.55; filter: brightness(0.6); }
  100% { opacity: 1; filter: brightness(1); }
}

.sahne-ic .panel.yaniyor { animation: yanma 820ms ease-out both; }

@keyframes suzul {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.sahne-ic .yapan,
.sahne-ic .cta,
.sahne-ic .rozet { animation: suzul 520ms ease-out 620ms both; }

@media (prefers-reduced-motion: reduce) {
  .sahne-ic .panel.yaniyor,
  .sahne-ic .yapan,
  .sahne-ic .cta,
  .sahne-ic .rozet { animation: none; }
  .isik { display: none; }
}

/* ---------- Hareket tercihi ---------- */

@media (prefers-reduced-motion: reduce) {
  .panel { box-shadow: none; }
}