/* ==========================================================================
   coralspeak — ortak tasarım dili
   --------------------------------------------------------------------------
   Referans tasarımdan alınan kimlik: beyaz zemin, siyah metin, beş duraklı
   gökkuşağı vurgusu, çok ince (200) dev başlıklar, buzlu cam paneller,
   gradyan saç çizgileri ve harf harf açılan başlıklar.

   DIŞA BAĞIMLILIK YOK: yazı tipi CDN'den çekilmez (sistem yığını kullanılır),
   arka plan efekti Three.js yerine yerel 2D canvas ile çizilir (fx.js).
   Referanstaki 'Sarabun' harici bir yazı tipi servisinden geldiği için yerel humanist bir
   sans yığınıyla değiştirildi — 200/300 ağırlıkları aynı etkiyi veriyor.
   ========================================================================== */

:root {
  /* Zemin ve metin */
  --paper: #ffffff;
  --wash: #f6fafe;          /* hafif mavi beyaz — arka plan ızgarasının zemini */
  --ink: #000000;
  --muted: rgba(0, 0, 0, 0.62);
  --faint: rgba(0, 0, 0, 0.38);
  --line: rgba(0, 0, 0, 0.12);
  --line-soft: rgba(0, 0, 0, 0.07);

  /* Beş duraklı vurgu — gradyan çizgiler ve efektler bu sırayla kullanır */
  --c-blue: #0091ff;
  --c-cyan: #00aaff;
  --c-purple: #8000ff;
  --c-pink: #ff0099;
  --c-red: #ff0000;
  --rainbow: linear-gradient(to right, #0091ff, #00aaff, #8000ff, #ff0099, #ff0000);

  --ok: #0a7d3e;
  --bad: #d32f2f;
  --warn: #8a5a00;

  /* Referansta 'Sarabun'; yerelde eşdeğer humanist sans yığını */
  --sans: ui-sans-serif, -apple-system, "SF Pro Text", "Segoe UI Variable Text",
          "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 24px;
  --r-pill: 999px;
}

/* Referanstaki ölçek: 1920px'te 16px taban, küçük ekranda 12px'te sabitlenir */
html { font-size: max(12px, 0.833333vw); }

* { box-sizing: border-box; margin: 0; padding: 0; }

/* KRİTİK: `#login { display: flex }` gibi id/sınıf kuralları, tarayıcının
   `hidden` özniteliği için uyguladığı `display: none`u EZER (özgüllük daha
   yüksek). Panelde giriş ekranı bu yüzden gizlenmiyordu. Tek kuralla kapatıyoruz. */
[hidden] { display: none !important; }

body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::-webkit-scrollbar { width: 0; height: 0; }
body { scrollbar-width: none; -ms-overflow-style: none; }

/* --------------------------------------------------------------- tipografi */

.display {
  font-weight: 200;
  font-size: max(2.5rem, 5.5vw);
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 0;
}
.display--hero { font-size: max(2.5rem, 6.4vw); line-height: 1.0; }
.display strong, .display b { font-weight: 500; }

.eyebrow {
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.lede { font-size: 1.0625rem; line-height: 1.6; color: var(--muted); }

/* Gradyan saç çizgisi — bölüm ayırıcısı */
.rainbow-line { height: 1px; background: var(--rainbow); border: 0; }

/* -------------------------------------------------------------- bileşenler */

.pill {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 400;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 0.25rem 0.9rem;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.5);
  white-space: nowrap;
}
.pill.ok { color: var(--ok); border-color: rgba(10, 125, 62, 0.3); background: rgba(10, 125, 62, 0.07); }
.pill.warn { color: var(--warn); border-color: rgba(138, 90, 0, 0.3); background: rgba(138, 90, 0, 0.07); }
.pill.bad { color: var(--bad); border-color: rgba(211, 47, 47, 0.3); background: rgba(211, 47, 47, 0.07); }

/* Buzlu cam yüzey — referanstaki glass panel/footer dili */
.glass {
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: var(--r-lg);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.05);
}

/* Düğmeler — hap biçimli, ince */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.7rem 1.6rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.btn:hover { border-color: var(--ink); transform: translateY(-1px); }
.btn.primary { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn.primary:hover { background: #1a1a1a; }
.btn.wide { width: 100%; }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn.lg { padding: 0.9rem 2.4rem; font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.06em; }

/* İstatistik sütunu — solunda yumuşayan dikey çizgi */
.stat-col {
  position: relative;
  padding-left: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.stat-col::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0; width: 1px;
  background: linear-gradient(to bottom,
    rgba(0,0,0,0), rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.2) 90%, rgba(0,0,0,0));
}
.stat-num { font-size: max(2rem, 3.2vw); font-weight: 200; line-height: 1; letter-spacing: -0.03em; }
.stat-desc { font-size: 0.8125rem; line-height: 1.5; color: var(--muted); }
.stat-sub { color: var(--faint); font-size: 0.7rem; }

/* ------------------------------------------------ harf harf açılan başlıklar */
/* JS (fx.js) başlığı karakterlere böler; maske taşmayı gizler, harf 3B döner */

.char-mask {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-top: 0.2em; margin-top: -0.2em;
  padding-bottom: 0.3em; margin-bottom: -0.3em;
  perspective: 500px;
}
.rv-char {
  display: inline-block;
  transform: translateY(110%) translateZ(-60px) rotateX(-65deg);
  transform-origin: bottom center;
  filter: blur(14px);
  opacity: 0;
  will-change: transform, filter, opacity;
  transition: transform 1.1s cubic-bezier(0.2, 0.8, 0.2, 1),
              filter 1.1s ease, opacity 0.8s ease;
}
.rv-char.revealed { transform: none; filter: blur(0); opacity: 1; }

/* Blok halinde yumuşak giriş (kart, paragraf) */
.rv-block {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .9s ease, transform .9s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: opacity, transform;
}
.rv-block.revealed { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .rv-char, .rv-block { transition: none !important; }
  .rv-char { transform: none; filter: none; opacity: 1; }
  .rv-block { opacity: 1; transform: none; }
}

/* --------------------------------------------------- arka plan ızgara tuvali */
/* fx.js bu tuvale çizer; sayfa içeriği üstünde kalır */
#grid-bg {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  display: block;
  pointer-events: none;
  background: var(--wash);
}