/* ═══════════════════════════════════════════════════════════════════════
 * STEADING — site.
 *
 * Ev tasarım dili (E:\SinYusWeb\marka\TASARIM-DILI.md) uygulanmıştır:
 *   ⭐ İMZA ETKİLEŞİMİ: **OCAK**. "Bu sektörde insan neyle etkileşir?"
 *      sorusunun cevabı: steading bir yurt, yurdun ocağı vardır. Logodaki
 *      sıcak nokta zaten o. Sayfa dışarıda (soğuk) başlar, kaydırdıkça
 *      ocağa yaklaşır ve ısınır. Ürünün argümanı — DIŞARIDA vs İÇERİDE —
 *      böylece anlatılmadan hissettirilir.
 *   · Arka plan susar, içerik konuşur — renk içerikten gelir
 *   · Parlamaz, mattır — hale yok, yumuşak düşüm var
 *   · Izgara yok — derinlik ışıkla
 *   · Hareket ağır (p += (pHam-p)*0.06) ama BEKLETME yok
 *   · Koyu ↔ açık dönüşü var: son bölüm ısınır
 *   · Bağımlılık yok — tek CSS, birkaç satır JS. "Her satır bizim."
 *
 * 🩸 04.09 — İLK HÂLİ "AI YAPMIŞ" GİBİ DURUYORDU ve Kral yakaladı:
 *    4 kart 3'lü ızgarada → biri altta ÖKSÜZ kalıyordu. Öksüz kart bir
 *    yerleşim kazası değil, DÜŞÜNÜLMEMİŞLİĞİN işareti.
 *    ⭐ Ders: kart sayısı ızgarayı belirler, ızgara kart sayısını değil.
 *    Dört kart → 2×2. Üç olsaydı 3'lü. Sayı uymuyorsa kart eklenmez, ızgara
 *    değişir.
 * ═══════════════════════════════════════════════════════════════════════ */
:root{
  /* Uygulamayla AYNI palet — siteyi görüp indiren aynı yeri görsün. */
  --zemin:#14161a; --yuzey:#1b1e24; --yuzey2:#22262e; --cizgi:#2e333d;
  --murekkep:#e8ecf1; --sonuk:#9aa3b0; --vurgu:#7aa2f7;
  --vurgu-soluk:#1e2740; --sari:#e0af68;
  --yuvarlak:10px;
  /* Ocak — JS kaydırmadan sürüyor. 0 = dışarıda/soğuk, 1 = içeride/sıcak */
  --ocak:0;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--zemin); color:var(--murekkep);
  font:16px/1.65 -apple-system,"Segoe UI",system-ui,sans-serif;
  overflow-x:hidden;
}

/* ⭐ OCAK — sayfanın tek hareket eden şeyi.
   ⚠️ Mat: additive yok, hale yok. Işık YAYAN yüzey ucuz durur; burada
   ışık ARKADAN düşüyor. `fixed` çünkü içerik onun ÜSTÜNDEN akıyor. */
.ocak{
  position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(120% 85% at 50% calc(112% - var(--ocak) * 34%),
      rgba(224,175,104, calc(0.13 + var(--ocak) * 0.16)) 0%,
      rgba(224,175,104, calc(0.05 + var(--ocak) * 0.07)) 32%,
      rgba(20,22,26,0) 68%);
  transition:none;
}
header,main,footer{position:relative; z-index:1}

main{max-width:880px; margin:0 auto; padding:0 20px 40px}
h1{font-size:clamp(30px,5.2vw,46px); line-height:1.16; margin:0 0 16px; letter-spacing:-.02em}
h1 em{color:var(--vurgu); font-style:normal}
h2{font-size:25px; margin:64px 0 18px; letter-spacing:-.01em}
h3{font-size:16px; margin:0 0 7px}
.kucuk{font-size:13px; color:var(--sonuk)}
code{background:var(--yuzey2); padding:3px 7px; border-radius:5px; font-size:12px; word-break:break-all}

.ust{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 22px; border-bottom:1px solid var(--cizgi);
  background:rgba(27,30,36,.86); backdrop-filter:blur(10px);
  position:sticky; top:0; z-index:5;
}
.marka{display:flex; align-items:center; gap:10px; font-size:17px}

.dugme{
  display:inline-block; background:var(--vurgu); color:#0e1116; text-decoration:none;
  font-weight:600; padding:9px 18px; border-radius:var(--yuvarlak); font-size:14px;
  border:0; cursor:pointer; font-family:inherit;
  transition:transform .12s, filter .15s;
}
.dugme:hover{filter:brightness(1.08)}
/* ⭐ MİKRO: basma çökmesi. Tasarım dilinde "en zayıf yerimiz" denen aile.
   Parmak bastığını hissetmeli — 100-200 ms, fark edilmez ama eksikliği hissedilir. */
.dugme:active{transform:translateY(2px)}
.dugme.buyuk{padding:15px 30px; font-size:16px; margin:12px 0}

.kahraman{padding:76px 0 12px; text-align:center}
.kahraman .alt{color:var(--sonuk); max-width:600px; margin:0 auto; font-size:17px}

/* ── demo ── */
.demo{
  margin:38px 0; padding:18px; background:rgba(27,30,36,.82);
  border:1px solid var(--cizgi); border-radius:16px;
  backdrop-filter:blur(6px);
}
.demo-bas{display:flex; justify-content:space-between; align-items:center; margin-bottom:12px}
.akis{min-height:200px; max-height:340px; overflow-y:auto; padding:4px}
.mesaj{margin-bottom:14px}
.mesaj.ben{display:flex; flex-direction:column; align-items:flex-end}
.mesaj.ben .govde{
  background:var(--vurgu-soluk); border:1px solid var(--cizgi);
  padding:9px 14px; border-radius:var(--yuvarlak); max-width:84%;
}
.mesaj .govde{white-space:pre-wrap; overflow-wrap:anywhere}
.mesaj .kunye{font-size:11.5px; color:var(--sonuk); margin-top:6px}
#giris{display:flex; gap:9px; margin-top:12px}
#kutu{
  flex:1 1 auto; min-width:0; font:inherit; font-size:15px; padding:12px 15px;
  background:var(--yuzey2); color:var(--murekkep);
  border:1px solid var(--cizgi); border-radius:var(--yuvarlak);
  transition:border-color .18s;
}
#kutu:focus{outline:none; border-color:var(--vurgu)}
#kutu:disabled{opacity:.5}
#gonder{font-size:14px; padding:12px 22px}
#gonder:disabled{opacity:.45; cursor:default; transform:none}
.uyari{
  margin:16px 0 0; padding:12px 14px; font-size:13px; line-height:1.55;
  background:rgba(34,38,46,.7); border-left:3px solid var(--sari); border-radius:6px;
}

/* ── karşılaştırma ──
   ⚠️ ✓/✗ karakterleri yazı tipine bırakılmıyor: "X" italik bir harf gibi
   duruyordu. Renk ve ağırlık ANLAM taşıyor, süs değil. */
table{width:100%; border-collapse:collapse; font-size:14.5px}
th,td{padding:12px; border-bottom:1px solid var(--cizgi); text-align:left}
th{color:var(--sonuk); font-weight:600; font-size:13px}
th:last-child{color:var(--vurgu)}
td:not(:first-child){text-align:center}
.var{color:var(--vurgu); font-weight:700}
.yok{color:#5a616e}
.yari{color:var(--sonuk); font-size:13px}
tr:last-child td{border-bottom:0}

/* ── kartlar ──
   🩸 4 kart 3'lü ızgarada öksüz kalıyordu. Sayı ızgarayı belirler. */
.ozellik{display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:26px}
@media (max-width:640px){ .ozellik{grid-template-columns:1fr} }
.kart{
  background:rgba(27,30,36,.72); border:1px solid var(--cizgi);
  border-radius:14px; padding:18px 20px;
  transition:border-color .2s, transform .2s;
}
/* ⭐ MİKRO: kart imlece hafifçe kalkar. Fark edilmez, hissedilir. */
.kart:hover{border-color:#3b4250; transform:translateY(-2px)}
.kart p{margin:0; font-size:14px; color:var(--sonuk)}
.kart h3{display:flex; align-items:center; gap:9px}
/* Abonelik rozeti — kilitli olanı GİZLEMİYORUZ, işaretliyoruz.
   Gizlemek "yok" demek olurdu; işaretlemek hem dürüst hem aboneliğin ne
   sattığını anlatıyor. Sarı: uyarı değil, ayrı kat. */
.kart .rozet{
  margin-left:auto; flex:0 0 auto; font-size:10px; font-weight:600;
  letter-spacing:.04em; text-transform:uppercase;
  color:var(--sari); border:1px solid #4a3f2c; border-radius:999px;
  padding:2px 8px; background:rgba(224,175,104,.07);
}
.kart h3 svg{flex:0 0 auto}

/* ── indirme: KOYU→AÇIK DÖNÜŞÜ ──
   Tasarım dili: "koyu ↔ açık dönüşü zorunludur" — uzun sayfada gözü
   dinlendirir ve "bölüm değişti" der. Burası ocağın yanı: içerisi. */
.indir{
  text-align:center; margin-top:64px; padding:44px 24px;
  background:linear-gradient(180deg, rgba(40,36,32,.92), rgba(31,29,28,.92));
  border:1px solid #3a352e; border-radius:18px;
}
.indir h2{margin-top:0}

/* Lisans notu — indirmenin altında, ocağın sıcak zemininde. Uyarı değil,
   bu yüzden sarı çizgi YOK: bir iddianın gerekçesi, bir ikaz değil. */
.lisans-not{
  max-width:560px; margin:22px auto 0; padding:14px 16px;
  font-size:13px; line-height:1.6; color:var(--sonuk); text-align:left;
  background:rgba(20,22,26,.34); border:1px solid #46403a; border-radius:10px;
}
.lisans-not b{color:var(--murekkep)}

/* Demo kapalıyken akışın içine düşen indirme düğmesi. */
.mesaj .dugme{margin-top:10px}

footer{
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
  max-width:880px; margin:0 auto; padding:24px 20px 44px;
  color:var(--sonuk); font-size:13px; border-top:1px solid var(--cizgi);
}

/* Hareketi kapatanlar için ocak sabit kalır — erişilebilirlik. */
@media (prefers-reduced-motion:reduce){
  .kart,.dugme{transition:none}
}