/* Geçici tanıtım sayfası: canlı adres açılana dek. Tek ekran, kaydırma yok: bütün ölçüler ekran yüksekliğine bağlı.
   Renk ve yazı tipleri sitenin (docs/PLAN.md §2.5, site/src/styles/kabuk.css `--gece`). Üçüncü taraf istek ve çerez yok. */
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 200 800; font-display: swap; src: url("/varlik/jakarta-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0; }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 200 800; font-display: swap; src: url("/varlik/jakarta-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: "Fraunces"; font-style: italic; font-weight: 100 900; font-display: swap; src: url("/varlik/fraunces-latin-ext-italic.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+1E00-1E9F; }
@font-face { font-family: "Fraunces"; font-style: italic; font-weight: 100 900; font-display: swap; src: url("/varlik/fraunces-latin-italic.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+2000-206F; }

:root {
  --gece: #15110e; --fildisi: #f7f3ed; --altin: #d4bb92; --altin-koyu: #b18a50; --ikincil: #c9bdae;
  --yazi: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  /* Perdenin alt kenarı ekranın neresinde, gülüş ne kadar derin. */
  --perde: 72%;
  --kavis: clamp(36px, 11vh, 120px);
  --birim: min(1vh, 1.5vw);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; overflow: hidden; overscroll-behavior: none; background: var(--gece); }
body { color: var(--fildisi); font-family: var(--yazi); word-spacing: .07em; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; }
h1, p, ul { margin: 0; padding: 0; }
ul { list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--altin); outline-offset: 3px; border-radius: 2px; }

body[data-dil="tr"] [data-en], body[data-dil="en"] [data-tr] { display: none; }

.sahne { position: fixed; inset: 0; overflow: hidden; }
.foto { position: absolute; left: 0; bottom: 0; display: block; width: 100%; height: calc(100% - var(--perde) + 2px); object-fit: cover; object-position: 50% 62%; filter: saturate(.82) sepia(.1) brightness(.92); }
.perde { position: absolute; inset: 0 0 auto; height: var(--perde); display: flex; align-items: center; justify-content: center; padding: max(env(safe-area-inset-top), 12px) 20px 0; background: radial-gradient(70% 90% at 50% 8%, #2a211a 0%, var(--gece) 72%); }

/* Gülüş kenarı: perdenin devamı, üstünde altın çizgi. */
.kenar, .cizgi { position: absolute; top: 100%; left: 0; display: block; width: 100%; height: var(--kavis); margin-top: -1px; overflow: visible; }
.kenar { fill: var(--gece); }
/* Çizgi soldan sağa açılır. stroke-dasharray kullanılmaz: esneyen SVG'de kesik kesik görünür. */
.cizgi { clip-path: inset(-8px 100% -8px 0); animation: ciz 1.5s .25s cubic-bezier(.65, 0, .35, 1) forwards; }
.cizgi path { fill: none; stroke: url(#altin); stroke-width: 2.5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
@keyframes ciz { to { clip-path: inset(-8px 0 -8px 0); } }

.icerik { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; width: min(100%, 780px); text-align: center; animation: gel .9s .15s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes gel { from { opacity: 0; transform: translateY(10px); } }

.logo { display: block; width: auto; height: clamp(64px, calc(var(--birim) * 16), 190px); }
h1 { margin-top: clamp(10px, calc(var(--birim) * 2.4), 26px); font-size: clamp(23px, calc(var(--birim) * 4.9), 66px); line-height: 1.14; font-weight: 600; letter-spacing: -.02em; word-spacing: .1em; text-wrap: balance; }
h1 em { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; color: var(--altin); }
.not { margin-top: clamp(6px, calc(var(--birim) * 1.3), 14px); max-width: 52ch; color: var(--ikincil); font-size: clamp(14px, calc(var(--birim) * 2), 23px); line-height: 1.45; text-wrap: balance; }

.eylem { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: clamp(10px, calc(var(--birim) * 2.3), 24px); }
.dugme { display: inline-flex; align-items: center; justify-content: center; min-height: max(44px, calc(var(--birim) * 5.4)); padding: 0 clamp(18px, 2.4vw, 34px); border: 1px solid var(--altin-koyu); border-radius: 999px; color: var(--altin); font-size: clamp(15px, calc(var(--birim) * 1.9), 19px); font-weight: 600; text-decoration: none; white-space: nowrap; transition: background-color .25s, color .25s, border-color .25s; }
.dugme:hover { background: rgb(212 187 146 / 14%); border-color: var(--altin); }
.dugme--altin { border-color: transparent; background: linear-gradient(100deg, #b18a50, #e6cf9f 50%, #b18a50); color: var(--gece); }
.dugme--altin:hover { background: linear-gradient(100deg, #c39c62, #f1ddb0 50%, #c39c62); }
.ltr { direction: ltr; unicode-bidi: isolate; }

.bilgi { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 18px; margin-top: clamp(8px, calc(var(--birim) * 2), 22px); color: var(--ikincil); font-size: clamp(12.5px, calc(var(--birim) * 1.7), 18px); line-height: 1.5; }
.bilgi a { text-underline-offset: 3px; text-decoration-color: rgb(212 187 146 / 40%); }
.bilgi a:hover { color: var(--altin); }
.bilgi li:first-child { flex-basis: 100%; }

.dil { position: absolute; top: max(env(safe-area-inset-top), 14px); right: max(env(safe-area-inset-right), 16px); z-index: 2; display: flex; gap: 2px; }
.dil button { min-width: 44px; min-height: 36px; border-radius: 999px; color: var(--ikincil); font-size: 13px; font-weight: 600; letter-spacing: .04em; }
.dil button:hover { color: var(--altin); }
.dil button[aria-pressed="true"] { color: var(--gece); background: var(--altin); }

/* Telefon dikey: yazı için daha çok perde. */
@media (max-width: 640px) {
  :root { --perde: 78%; --kavis: clamp(26px, 6vh, 56px); --birim: min(.92vh, 2.2vw); }
  .perde { padding-inline: 16px; }
  .dugme { flex: 1 1 140px; }
  .eylem { width: 100%; max-width: 340px; }
  .bilgi li:first-child { max-width: 34ch; }
}

/* Kısa dikey ekran (küçük telefon, adres çubuğu açık): ikincil satırlar çıkar, sıkışma olmaz. */
@media (max-height: 620px) and (max-width: 640px) {
  :root { --perde: 84%; --kavis: 22px; }
  .insta { display: none; }
  .logo { height: 58px; }
}

/* Yatay telefon ve çok kısa pencere: fotoğraf çıkar, iki sütun. */
@media (max-height: 520px) and (min-width: 641px) {
  :root { --perde: 100%; }
  .foto, .kenar, .cizgi { display: none; }
  .perde { padding-block: 10px; }
  .icerik { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 32px; align-items: center; width: min(100%, 820px); text-align: left; }
  .logo { grid-row: 1 / span 5; height: clamp(84px, 34vh, 130px); }
  h1 { margin-top: 0; font-size: clamp(20px, 6.4vh, 28px); }
  .not { margin-top: 4px; font-size: 13.5px; }
  .eylem { justify-content: flex-start; margin-top: 8px; }
  .dugme { min-height: 40px; }
  .bilgi { justify-content: flex-start; margin-top: 6px; font-size: 12px; }
}

/* Ortada gülüş perdeyi aşağı uzatır: içerik görsel ortaya insin. */
@media (min-height: 640px) and (min-width: 641px) {
  .perde { padding-top: calc(var(--kavis) * .7); }
}

@media (prefers-reduced-motion: reduce) {
  .icerik { animation: none; }
  .cizgi { animation: none; clip-path: none; }
}