/* Alfabe sitesi (alfabe.tiyatrotist.com.tr). Tek hikâye, yedi durak; gece (taşlar parlar) ve kâğıt (yazı okunur) bölümleri sırayla.
   Başlık ve rakamlar ailenin yazı tipiyle (Alfabe Taş), anlatı Kaan Yazi (serif), küçük etiketler Kaan Metin. Kaynak: alfabe/ALFABE_OZU.md */
@font-face { font-family: "Alfabe Tas"; src: url("../yazi/AlfabeTas.woff2") format("woff2"); font-display: swap; }

:root {
  --gece: #0E1213;
  --gece-2: #151B1C;
  --gece-yazi: #E7EDEC;
  --gece-soluk: #93A3A1;
  --gece-cizgi: rgba(231, 237, 236, 0.12);
  --kagit: #F2EFE9;
  --kagit-yazi: #161B1C;
  --kagit-soluk: #5C6562;
  --kagit-cizgi: #DCD6CB;
  --firuze: #4FD0BF;
  --firuze-koyu: #066B65;
  --yazi-tas: "Alfabe Tas", "Kaan Baslik", system-ui, sans-serif;
  --yazi-anlati: "Kaan Yazi", "Noto Serif", Georgia, serif;
  --yazi-etiket: "Kaan Metin", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --kenar: max(20px, env(safe-area-inset-left));
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 64px; }
body {
  margin: 0; background: var(--gece); color: var(--gece-yazi);
  font: 400 1rem/1.6 var(--yazi-etiket); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
h1, h2, h3, p, ol, figure { margin: 0; padding: 0; }
ol { list-style: none; }
a { color: inherit; }
canvas.tas-yazi { display: block; }
.gizli { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--firuze); outline-offset: 3px; border-radius: 6px; }
::selection { background: rgba(79, 208, 191, 0.3); }
.atla { position: absolute; left: 16px; top: -48px; z-index: 100; padding: 8px 14px; border-radius: 10px; background: var(--firuze); color: #04201D; text-decoration: none; font-weight: 500; }
.atla:focus { top: 12px; }

/* ---- Üst çubuk: açılışta görünmez, kaydırınca koyu cam */
.ust {
  position: fixed; inset: 0 0 auto; z-index: 50; height: 60px; padding: 0 var(--kenar);
  display: flex; align-items: center; justify-content: space-between;
  transition: background-color 0.35s, border-color 0.35s, backdrop-filter 0.35s; border-bottom: 1px solid transparent;
}
.ust[data-kaydi] { background: rgba(14, 18, 19, 0.93); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-color: var(--gece-cizgi); }
.ust-imza { display: block; opacity: 0; transform: translateY(-4px); transition: opacity 0.35s, transform 0.35s var(--ease); pointer-events: none; }
.ust[data-kaydi] .ust-imza { opacity: 1; transform: none; pointer-events: auto; }
.ust-imza canvas { height: 22px; width: auto; }
.ust-bag { font-size: 0.9375rem; font-weight: 500; text-decoration: none; color: var(--gece-yazi); padding: 8px 2px; border-bottom: 1px solid rgba(231, 237, 236, 0.3); transition: border-color 0.2s; }
.ust-bag:hover { border-color: var(--gece-yazi); }

/* ---- Ortak bölüm düzeni */
.gece { background: var(--gece); color: var(--gece-yazi); }
.kagit { background: var(--kagit); color: var(--kagit-yazi); }
.bolum { padding: clamp(96px, 13vw, 176px) 0; display: grid; gap: clamp(40px, 6vw, 72px); }
.sutun { width: 100%; max-width: calc(44rem + 2 * var(--kenar)); margin: 0 auto; padding: 0 var(--kenar); display: grid; gap: 22px; }
.sutun.orta { justify-items: center; text-align: center; }
.kunye { display: flex; align-items: center; gap: 12px; font: 600 0.75rem/1 var(--yazi-etiket); letter-spacing: 0.26em; text-transform: uppercase; color: var(--gece-soluk); }
.kunye::before { content: ""; width: 28px; height: 1px; background: currentColor; }
.kagit .kunye { color: var(--kagit-soluk); }
.buyuk { font: 500 clamp(2rem, 5vw, 3.5rem)/1.12 var(--yazi-anlati); letter-spacing: -0.015em; text-wrap: balance; }
.metin { font: 400 clamp(1.125rem, 1.7vw, 1.3125rem)/1.7 var(--yazi-anlati); color: var(--gece-soluk); max-width: 38rem; text-wrap: pretty; }
.kagit .metin { color: var(--kagit-soluk); }
.dipnot { font-size: 0.8125rem; color: var(--gece-soluk); opacity: 0.8; }

/* ---- 1. Açılış */
.acilis {
  position: relative; min-height: 100svh; display: grid; place-content: center; justify-items: center; text-align: center;
  padding: 96px var(--kenar) 112px; overflow: hidden;
  background: radial-gradient(80% 60% at 50% 44%, #1C2729 0%, var(--gece) 68%), var(--gece);
}
.logo { width: min(760px, 86vw); }
.logo canvas { width: 100%; filter: drop-shadow(0 24px 60px rgba(190, 210, 225, 0.13)); }
.slogan { margin-top: clamp(28px, 4vw, 40px); font: 500 clamp(1.625rem, 4vw, 2.625rem)/1.15 var(--yazi-anlati); letter-spacing: -0.01em; color: #F5F8F7; }
.alt-slogan { margin-top: 12px; font-size: clamp(1rem, 1.8vw, 1.1875rem); color: var(--gece-soluk); }
.asagi { position: absolute; left: 50%; bottom: max(28px, env(safe-area-inset-bottom)); width: 28px; height: 48px; margin-left: -14px; display: grid; justify-items: center; }
.asagi span { width: 1px; height: 100%; background: linear-gradient(var(--gece-soluk), transparent); transform-origin: top; animation: damla 2.4s var(--ease) infinite; }
@keyframes damla { 0% { transform: scaleY(0); opacity: 1; } 70% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }

/* ---- 2. Tercüme kokusu */
.koku { gap: 0; }
.koku-bas, .koku-satir { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.koku-bas { padding-bottom: 12px; font: 600 0.75rem/1 var(--yazi-etiket); letter-spacing: 0.18em; text-transform: uppercase; color: var(--kagit-soluk); }
.koku-satir { padding: 18px 0; border-top: 1px solid var(--kagit-cizgi); font: 400 clamp(1.0625rem, 1.6vw, 1.25rem)/1.45 var(--yazi-anlati); }
.koku-satir:last-child { border-bottom: 1px solid var(--kagit-cizgi); }
.koku-satir s { color: #8F8A80; text-decoration-color: rgba(143, 138, 128, 0.55); text-decoration-thickness: 1px; }
.koku-satir span { color: var(--kagit-yazi); font-weight: 500; }

/* ---- 3. Tek kelime: taştan kelime, kaydırınca kökü ve eklerine ayrılır */
.bolunme { padding: 0 var(--kenar); display: grid; justify-items: center; gap: clamp(36px, 5vw, 56px); }
.parcalar { --ara: 0px; display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; column-gap: var(--ara); row-gap: 28px; max-width: 1180px; transition: column-gap 1.1s var(--ease); }
.parca { display: grid; justify-items: center; gap: 14px; }
.parca canvas { height: var(--h, 56px); width: auto; }
.parca-ek { font: 500 0.875rem/1.3 var(--yazi-etiket); color: var(--firuze); white-space: nowrap; opacity: 0; transform: translateY(-6px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); transition-delay: calc(0.5s + var(--sira, 0) * 0.12s); }
.parca-ek::before { content: ""; display: block; width: 1px; height: 12px; margin: 0 auto 8px; background: rgba(79, 208, 191, 0.5); }
.bolundu .parcalar { --ara: clamp(14px, 2.6vw, 34px); }
.bolundu .parca-ek { opacity: 1; transform: none; }
.ceviri { display: grid; justify-items: center; gap: 8px; text-align: center; max-width: 40rem; opacity: 0; transition: opacity 0.8s var(--ease) 1.3s; }
.bolundu .ceviri { opacity: 1; }
.ceviri-dil { font: 600 0.75rem/1 var(--yazi-etiket); letter-spacing: 0.2em; text-transform: uppercase; color: var(--gece-soluk); }
.ceviri [lang="en"] { font: italic 400 clamp(1.0625rem, 1.8vw, 1.3125rem)/1.5 var(--yazi-anlati); color: var(--gece-yazi); }
.cevap { margin-top: clamp(24px, 5vw, 56px); padding-top: clamp(48px, 7vw, 80px); border-top: 1px solid var(--gece-cizgi); }
.tersinden { font: 400 clamp(2.5rem, 7.4vw, 5.5rem)/1.05 var(--yazi-tas); letter-spacing: 0.01em; color: #F5F8F7; }

/* ---- 4. İsim */
.yil { font: 400 clamp(5.5rem, 19vw, 13rem)/0.9 var(--yazi-tas); letter-spacing: 0.02em; color: var(--kagit-yazi); margin-bottom: 8px; }
.harfler {
  width: 100%; max-width: calc(64rem + 2 * var(--kenar)); margin: 0 auto; padding: 0 var(--kenar);
  font: 400 clamp(2rem, 5.6vw, 4.5rem)/1.2 var(--yazi-tas); letter-spacing: 0.06em; word-break: break-all; color: var(--kagit-yazi); text-align: center;
}
.harfler .uye-harf { color: var(--firuze-koyu); }
.harfler .harf-satir { display: block; }

/* ---- 5. Aile */
.uyeler {
  width: 100%; max-width: calc(68rem + 2 * var(--kenar)); margin: 0 auto; padding: 0 var(--kenar);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 32px);
}
.uye { display: grid; align-content: start; gap: 10px; padding: clamp(24px, 3vw, 36px); border: 1px solid var(--gece-cizgi); border-radius: 22px; background: linear-gradient(180deg, var(--gece-2), rgba(21, 27, 28, 0.2)); }
.uye-ad { height: 64px; margin-bottom: 14px; }
.uye-ad canvas { height: 64px; width: auto; }
.uye-tas { font: 600 0.75rem/1 var(--yazi-etiket); letter-spacing: 0.2em; text-transform: uppercase; color: var(--gece-soluk); }
.uye-is { font: 400 1.0625rem/1.6 var(--yazi-anlati); color: var(--gece-yazi); }
.uye-durum { justify-self: start; margin-top: 8px; display: inline-flex; align-items: center; gap: 8px; font-size: 0.8125rem; color: var(--gece-soluk); }
.uye-durum::before { content: ""; width: 7px; height: 7px; border-radius: 50%; border: 1px solid var(--gece-soluk); }
.uye-durum.yayinda { color: var(--firuze); }
.uye-durum.yayinda::before { background: var(--firuze); border-color: var(--firuze); box-shadow: 0 0 0 4px rgba(79, 208, 191, 0.14); }

/* ---- 6. Sözler */
.soz-liste { gap: 0; }
.soz-liste li { display: grid; grid-template-columns: clamp(3rem, 8vw, 5rem) 1fr; gap: 8px; padding: clamp(22px, 3vw, 30px) 0; border-top: 1px solid var(--kagit-cizgi); }
.soz-liste li:last-child { border-bottom: 1px solid var(--kagit-cizgi); }
.soz-no { font: 400 clamp(1.75rem, 3.4vw, 2.5rem)/1 var(--yazi-tas); color: var(--firuze-koyu); }
.soz-liste h3 { font: 500 clamp(1.25rem, 2.2vw, 1.625rem)/1.25 var(--yazi-anlati); }
.soz-liste p { margin-top: 6px; font: 400 1.0625rem/1.6 var(--yazi-anlati); color: var(--kagit-soluk); }

/* ---- 7. Kapanış */
.kapanis { background: radial-gradient(70% 70% at 50% 60%, #1A2628 0%, var(--gece) 70%), var(--gece); }
.kurucu { font-size: 0.9375rem; color: var(--gece-soluk); }
.k-isaret { margin: 12px 0 8px; }
.k-isaret canvas { height: 96px; width: auto; filter: drop-shadow(0 16px 40px rgba(79, 208, 191, 0.18)); }
.eylem { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.dugme {
  display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: 0 24px; border-radius: 999px;
  font: 500 1rem/1 var(--yazi-etiket); text-decoration: none; color: var(--gece-yazi); border: 1px solid rgba(231, 237, 236, 0.28);
  transition: background-color 0.2s, transform 0.25s var(--ease), border-color 0.2s;
}
.dugme:hover { background: rgba(231, 237, 236, 0.07); border-color: rgba(231, 237, 236, 0.5); }
.dugme.birincil { background: #F4F2EE; color: #11181A; border-color: transparent; }
.dugme.birincil:hover { background: #fff; transform: translateY(-1px); }

/* ---- Alt bilgi */
.alt { background: #0A0D0E; color: var(--gece-soluk); padding: 40px var(--kenar) max(28px, env(safe-area-inset-bottom)); font-size: 0.875rem; border-top: 1px solid var(--gece-cizgi); }
.alt-ic { max-width: 68rem; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; }
.alt-marka { display: flex; align-items: center; gap: 14px; }
.alt-imza canvas { height: 20px; width: auto; }
.alt-bag { display: flex; flex-wrap: wrap; gap: 20px; }
.alt-bag a { text-decoration: none; }
.alt-bag a:hover { color: var(--gece-yazi); }
.telif { max-width: 68rem; margin: 20px auto 0; font-size: 0.8125rem; opacity: 0.7; }

/* ---- Kaydırınca belirme (yalnız JS çalışınca; hareket azaltılmışsa hiç) */
.js .belir { opacity: 0; transform: translateY(18px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); transition-delay: calc(var(--sira, 0) * 0.08s); }
.js .belir.gor { opacity: 1; transform: none; }

/* ---- Dar ekran */
@media (max-width: 760px) {
  .uyeler { grid-template-columns: 1fr; }
  .uye-ad, .uye-ad canvas { height: 52px; }
  .koku-bas { display: none; }
  .koku-satir { grid-template-columns: 1fr; gap: 6px; }
  .parcalar { row-gap: 20px; }
  .parca-ek { font-size: 0.8125rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .belir, .parca-ek, .ceviri, .parcalar, .ust-imza { transition: none !important; }
  .asagi span { animation: none; }
}

/* ---- İç sayfalar: iletişim, marka kiti, gizlilik (kâğıt zemin, üst çubuk hep görünür) */
.ic-sayfa { background: var(--kagit); }
.sayfa { min-height: 70vh; padding: clamp(120px, 14vw, 168px) 0 clamp(80px, 10vw, 128px); }
.sayfa .sutun { gap: 26px; }
.sayfa a { color: var(--firuze-koyu); text-underline-offset: 3px; }
.not { font-size: 0.9375rem; color: var(--kagit-soluk); }
.bilgi { margin: 8px 0 0; display: grid; }
.bilgi > div { display: grid; grid-template-columns: 12rem 1fr; gap: 6px 24px; padding: 22px 0; border-top: 1px solid var(--kagit-cizgi); }
.bilgi > div:last-child { border-bottom: 1px solid var(--kagit-cizgi); }
.bilgi dt { font: 600 0.8125rem/1.6 var(--yazi-etiket); letter-spacing: 0.08em; text-transform: uppercase; color: var(--kagit-soluk); padding-top: 3px; }
.bilgi dd { margin: 0; display: grid; gap: 4px; font: 400 1.1875rem/1.5 var(--yazi-anlati); }
.bilgi dd > a { font-weight: 500; word-break: break-word; }
.bilgi dd span { font-size: 0.9375rem; color: var(--kagit-soluk); }
.yazi { display: grid; gap: 14px; }
.yazi h2 { margin-top: 18px; font: 500 1.375rem/1.3 var(--yazi-anlati); }
.yazi p { font: 400 1.0625rem/1.7 var(--yazi-anlati); color: #2C3332; }
.yazi p.not { margin-top: 18px; font: 400 0.9375rem/1.5 var(--yazi-etiket); color: var(--kagit-soluk); }
.kit-bolum { display: grid; gap: 16px; margin-top: 28px; padding-top: 32px; border-top: 1px solid var(--kagit-cizgi); }
.kit-bolum h2 { font: 500 1.5rem/1.25 var(--yazi-anlati); }
.tanitim { margin: 0; padding: 22px 24px; border-left: 2px solid var(--firuze-koyu); background: rgba(6, 107, 101, 0.05); border-radius: 0 14px 14px 0; font: 400 1.125rem/1.7 var(--yazi-anlati); }
.kopya { justify-self: start; min-height: 2.5rem; padding: 0 18px; border-radius: 999px; border: 1px solid var(--kagit-cizgi); background: #fff; color: var(--kagit-yazi); font: 500 0.9375rem/1 var(--yazi-etiket); cursor: pointer; }
.kopya:hover { border-color: var(--kagit-soluk); }
.logolar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.logo-kart { display: grid; border: 1px solid var(--kagit-cizgi); border-radius: 18px; overflow: hidden; background: #fff; }
.logo-kart img { display: block; width: 100%; height: 140px; object-fit: contain; padding: 28px; background: #fff; }
.logo-kart.koyu img { background: radial-gradient(80% 80% at 50% 50%, #1C2729, var(--gece)); }
.logo-kart figcaption { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: center; padding: 14px 18px; border-top: 1px solid var(--kagit-cizgi); font-size: 0.875rem; }
.logo-kart figcaption b { font-weight: 600; }
.logo-kart figcaption span { grid-column: 1; color: var(--kagit-soluk); }
.logo-kart figcaption a { grid-column: 2; grid-row: 1 / span 2; font-weight: 500; }
.renkler { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.renkler li { display: grid; gap: 2px; font-size: 0.875rem; }
.renkler .ornek { height: 64px; border-radius: 14px; border: 1px solid rgba(0, 0, 0, 0.08); margin-bottom: 8px; }
.renkler code { font: 0.8125rem/1.4 ui-monospace, monospace; color: var(--kagit-soluk); }
.renkler li > span:last-child { color: var(--kagit-soluk); }
.ilkeler { display: grid; gap: 10px; list-style: disc; padding-left: 1.2em; font: 400 1.0625rem/1.6 var(--yazi-anlati); }
.bulunamadi { gap: 18px; }
.bulunamadi .yok-harf canvas { height: 150px; width: auto; filter: drop-shadow(0 20px 50px rgba(190, 210, 225, 0.14)); }
.bulunamadi .dugme { margin-top: 18px; }
.alt-imza { display: inline-block; }
@media (max-width: 760px) {
  .bilgi > div { grid-template-columns: 1fr; }
  .logolar { grid-template-columns: 1fr; }
  .renkler { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}