/* ==== fonts.css ==== */
/* =====================================================================
   V2 yazı tipleri — self-host (SIL OFL). Ailelere özel ad verildi ki
   bilgisayarda kurulu aynı adlı fontlar karışmasın.
   TR dosyaları yalnız Latin + Türkçe karakterleri içerir (bkz. unicode-range);
   Kiril ve Arapça dosyalar yalnız o karakterler sayfada geçince indirilir.
   ===================================================================== */

/* --- Display: Noto Serif Display (değişken: genişlik 62.5–100, ağırlık 100–900) --- */
@font-face {
  font-family: "GK Display";
  src: url(../../fonts/v2/nsd-tr.woff2) format("woff2");
  font-weight: 100 900;
  font-stretch: 62.5% 100%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0020-007E, U+00A0-00FF, U+011E-011F, U+0130-0131, U+015E-015F, U+2013-2014, U+2018-201E, U+2022, U+2026, U+20AC, U+20BA, U+2190-2193;
}
@font-face {
  font-family: "GK Display";
  src: url(../../fonts/v2/nsd-cyr.woff2) format("woff2");
  font-weight: 100 900;
  font-stretch: 62.5% 100%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "GK Display";
  src: url(../../fonts/v2/nsd-tr-italic.woff2) format("woff2");
  font-weight: 300;
  /* Dosya tek genişlikte; ama başlıklar dar genişlik (75%) istediği için eşleşme
     aralığı geniş bildirilir — yoksa tarayıcı italik yerine sahte eğik üretir. */
  font-stretch: 62.5% 100%;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0020-007E, U+00A0-00FF, U+011E-011F, U+0130-0131, U+015E-015F, U+2013-2014, U+2018-201E, U+2022, U+2026, U+20AC, U+20BA, U+2190-2193;
}
@font-face {
  font-family: "GK Display";
  src: url(../../fonts/v2/nsd-cyr-italic.woff2) format("woff2");
  font-weight: 300;
  font-stretch: 62.5% 100%;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* --- Metin: Onest (değişken 400–600) --- */
@font-face {
  font-family: "GK Sans";
  src: url(../../fonts/v2/onest-tr.woff2) format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0020-007E, U+00A0-00FF, U+011E-011F, U+0130-0131, U+015E-015F, U+2013-2014, U+2018-201E, U+2022, U+2026, U+20AC, U+20BA, U+2190-2193;
}
@font-face {
  font-family: "GK Sans";
  src: url(../../fonts/v2/onest-cyr.woff2) format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* --- Yardımcı: IBM Plex Mono (saat, etiket, sayaç) --- */
@font-face {
  font-family: "GK Mono";
  src: url(../../fonts/v2/plexmono-tr-400.woff2) format("woff2");
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0020-007E, U+00A0-00FF, U+011E-011F, U+0130-0131, U+015E-015F, U+2013-2014, U+2018-201E, U+2022, U+2026, U+20AC, U+20BA, U+2190-2193;
}
@font-face {
  font-family: "GK Mono";
  src: url(../../fonts/v2/plexmono-tr-500.woff2) format("woff2");
  font-weight: 500;
  font-display: swap;
  unicode-range: U+0020-007E, U+00A0-00FF, U+011E-011F, U+0130-0131, U+015E-015F, U+2013-2014, U+2018-201E, U+2022, U+2026, U+20AC, U+20BA, U+2190-2193;
}
@font-face {
  font-family: "GK Mono";
  src: url(../../fonts/v2/plexmono-cyr-400.woff2) format("woff2");
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "GK Mono";
  src: url(../../fonts/v2/plexmono-cyr-500.woff2) format("woff2");
  font-weight: 500;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* --- Arapça başlık: Noto Naskh Arabic (değişken 400–600); metin için mevcut Tajawal --- */
@font-face {
  font-family: "GK Naskh";
  src: url(../../fonts/v2/naskh-ar.woff2) format("woff2");
  font-weight: 400 600;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: "Tajawal";
  src: url(../../fonts/tajawal-arabic-400-normal.woff2) format("woff2");
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: "Tajawal";
  src: url(../../fonts/tajawal-arabic-500-normal.woff2) format("woff2");
  font-weight: 500 600;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

/* ==== tokens.css ==== */
/* =====================================================================
   V2 tasarım tokenları — "Bir Gün"
   Sabit marka renkleri + günün saatlerine göre paletler. Her bölüm
   data-time="…" ile bir palet seçer; bileşenler yalnız --bg/--fg/--muted/
   --accent/--loop/--line değişkenlerini kullanır.
   Metin/zemin kontrastları WCAG AA'ya göre ölçüldü (V2_PLAN.md).
   ===================================================================== */

:root {
  /* --- Marka sabitleri --- */
  --ink: #141210;
  --paper: #F3F4F1;
  --white: #FFFFFF;
  --red: #B8322A;          /* seçim kırmızısı (açık zeminde) */
  --red-on-dark: #F0645A;  /* seçim kırmızısı (koyu zeminde) */
  --window: #2F5F7E;
  --honey: #E0A04E;
  --bulb: #F0C15E;

  /* --- Yazı aileleri --- */
  --f-display: "GK Display", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --f-sans: "GK Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-mono: "GK Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --f-arabic-display: "GK Naskh", "Tajawal", "Geeza Pro", serif;
  --f-arabic: "Tajawal", "Geeza Pro", system-ui, sans-serif;

  /* --- Yazı ölçeği (akışkan) --- */
  --fs-xxl: clamp(4.5rem, 14vw, 13rem);
  --fs-xl: clamp(3rem, 8vw, 7.5rem);
  --fs-h1: clamp(2.5rem, 6vw, 5rem);
  --fs-h2: clamp(2rem, 4.4vw, 4.25rem);
  --fs-h3: clamp(1.6rem, 2.6vw, 2.9rem);
  --fs-h4: clamp(1.15rem, 1.6vw, 1.3rem);
  --fs-lead: clamp(1.1rem, 1.5vw, 1.3rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.9375rem;
  --fs-mono: 0.75rem;

  /* --- Yerleşim --- */
  --maxw: 1344px;
  --gutter: clamp(20px, 3.4vw, 48px);
  --section-y: clamp(88px, 10vw, 140px);
  --header-h: 76px;
  --radius: 2px;

  /* --- Hareket (kamera fiilleri) --- */
  --d-instant: 120ms;
  --d-quick: 240ms;
  --d-base: 480ms;
  --d-slow: 800ms;
  --d-cine: 1200ms;
  --e-settle: cubic-bezier(.22, 1, .36, 1);
  --e-focus: cubic-bezier(.16, 1, .3, 1);
  --e-shutter: cubic-bezier(.83, 0, .17, 1);
  --e-dolly: cubic-bezier(.65, 0, .35, 1);

  /* Varsayılan palet: kâğıt */
  --bg: #F3F4F1; --fg: #15171A; --muted: #565C63; --accent: #B8322A; --loop: #B8322A; --line: #D8DAD5; --surface: #FFFFFF;
  --hour-w: 400; --hour-s: 75%;
  color-scheme: light;
}

/* ---------------- Günün saatleri (bölüm paletleri) ---------------- */
[data-time="an"]      { --bg: #14100C; --fg: #F3E9DA; --muted: #CDBFAE; --accent: #E0A04E; --loop: #F0645A; --line: rgba(243,233,218,.16); --surface: #1E1812; --hour-w: 200; --hour-s: 62.5%; color-scheme: dark; }
[data-time="safak"]   { --bg: #1C2431; --fg: #ECE8E1; --muted: #A9B1BE; --accent: #E3A79B; --loop: #F0645A; --line: rgba(236,232,225,.2); --surface: #252F3E; --hour-w: 200; --hour-s: 62.5%; color-scheme: dark; }
[data-time="sabah"]   { --bg: #F1F2EF; --fg: #16181B; --muted: #565C63; --accent: #2F5F7E; --loop: #B8322A; --line: #D8DAD5; --surface: #FFFFFF; --hour-w: 250; --hour-s: 62.5%; color-scheme: light; }
[data-time="ogle"]    { --bg: #FBFAF7; --fg: #121212; --muted: #5B5752; --accent: #B8322A; --loop: #B8322A; --line: #E4E2DC; --surface: #FFFFFF; --hour-w: 400; --hour-s: 72%; color-scheme: light; }
[data-time="altin"]   { --bg: #EAD9BF; --fg: #2A1C10; --muted: #634C38; --accent: #8A4510; --loop: #A12A22; --line: rgba(42,28,16,.18); --surface: #F3E6D2; --hour-w: 520; --hour-s: 87.5%; color-scheme: light; }
[data-time="gece"]    { --bg: #0E0C12; --fg: #F1EADF; --muted: #A79E92; --accent: #F0C15E; --loop: #F0645A; --line: rgba(241,234,223,.16); --surface: #18151E; --hour-w: 760; --hour-s: 62.5%; color-scheme: dark; }
[data-time="sinema"]  { --bg: #0B0B0C; --fg: #F1EADF; --muted: #A79E92; --accent: #F0C15E; --loop: #F0645A; --line: rgba(241,234,223,.14); --surface: #141416; --hour-w: 700; --hour-s: 62.5%; color-scheme: dark; }
[data-time="yenigun"] { --bg: #0A0A0D; --fg: #FFFFFF; --muted: #B4B0AA; --accent: #F0645A; --loop: #F0645A; --line: rgba(255,255,255,.12); --surface: #131317; --hour-w: 820; --hour-s: 62.5%; color-scheme: dark; }
[data-time="kagit"]   { --bg: #F3F4F1; --fg: #15171A; --muted: #565C63; --accent: #B8322A; --loop: #B8322A; --line: #D8DAD5; --surface: #FFFFFF; --hour-w: 400; --hour-s: 75%; color-scheme: light; }

[data-time] { background-color: var(--bg); color: var(--fg); }

/* Hareket azaltma süreleri sıfırlamaz: "Sade" düzeyde (html.motion-reduced) solma/yerinde geçişler
   kalır, büyük devinim (uçuş, paralaks, eğilme) ilgili kurallarda kapatılır. */

/* ==== base.css ==== */
/* =====================================================================
   V2 temel: sıfırlama, yazı sınıfları, yerleşim, erişilebilirlik.
   ===================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--f-sans);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;   /* görünme animasyonundaki hafif büyütme yatay kaydırma yaratmasın (sticky bozulmaz) */
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
a:hover { color: var(--loop); }
h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
ul[class], ol[class] { margin: 0; padding: 0; list-style: none; }
::selection { background: var(--loop); color: var(--bg); }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--loop); outline-offset: 3px; border-radius: 1px; }

/* --- Yerleşim --- */
.wrap { width: 100%; max-width: calc(var(--maxw) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); }
.section--tight { padding-block: calc(var(--section-y) * .6); }
.grid { display: grid; gap: clamp(16px, 2vw, 24px); }
.split { display: grid; gap: clamp(32px, 5vw, 72px); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 900px) {
  .split--5-7 { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .split--7-5 { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .split--4-8 { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
  .split--6-6 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* --- Yazı --- */
.t-display, .t-xxl, .t-xl, .t-h1, .t-h2, .t-h3 {
  font-family: var(--f-display);
  font-weight: 400;
  font-stretch: 75%;
  letter-spacing: -0.012em;
  text-wrap: balance;
}
.t-xxl { font-size: var(--fs-xxl); line-height: .84; letter-spacing: -0.025em; font-variant-numeric: tabular-nums; }
.t-xl  { font-size: var(--fs-xl); line-height: .9; font-weight: 300; font-stretch: 62.5%; letter-spacing: -0.02em; }
.t-h1  { font-size: var(--fs-h1); line-height: .98; }
.t-h2  { font-size: var(--fs-h2); line-height: 1; }
.t-h3  { font-size: var(--fs-h3); line-height: 1.04; }
.t-h4  { font-family: var(--f-sans); font-size: var(--fs-h4); font-weight: 600; line-height: 1.3; }
.t-lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--muted); max-width: 46ch; }
.t-body { max-width: 62ch; }
.t-muted { color: var(--muted); }
.t-italic { font-style: italic; font-weight: 300; }
.eyebrow, .t-mono {
  font-family: var(--f-mono);
  font-size: var(--fs-mono);
  font-weight: 500;
  letter-spacing: .09em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--muted);
}
.t-mono { font-weight: 400; letter-spacing: .04em; text-transform: none; }
.hour {
  font-family: var(--f-display);
  font-size: var(--fs-xxl);
  line-height: .82;
  font-weight: var(--hour-w);
  font-stretch: var(--hour-s);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.hour--md { font-size: clamp(5.5rem, 11vw, 10.5rem); }

/* Türkçe büyük harf: lang="tr" iken tarayıcı i→İ dönüşümünü doğru yapar */

/* Arapça: başlıklar Naskh, metin Tajawal. Saat rakamları ve marka işareti Latin kalır. */
:lang(ar) body, body:lang(ar) { font-family: var(--f-arabic); }
:lang(ar) .t-display, :lang(ar) .t-xl, :lang(ar) .t-h1, :lang(ar) .t-h2, :lang(ar) .t-h3 { font-family: var(--f-arabic-display); font-stretch: normal; letter-spacing: 0; line-height: 1.25; }
:lang(ar) .eyebrow { letter-spacing: 0; }

/* --- Bağlantılar --- */
.link { text-decoration: underline; text-decoration-color: var(--loop); text-decoration-thickness: 1.5px; text-underline-offset: 6px; }
.link:hover { color: inherit; text-decoration-thickness: 2.5px; }

/* --- Fotoğraf kuralları: köşe yok, gölge yok, boyama yok --- */
.ph { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--surface); }
.frame { position: relative; overflow: hidden; background: var(--surface); }
.frame > img, .frame > picture > img { width: 100%; height: 100%; object-fit: cover; }
.ratio-45 { aspect-ratio: 4 / 5; }
.ratio-23 { aspect-ratio: 2 / 3; }
.ratio-32 { aspect-ratio: 3 / 2; }
.ratio-169 { aspect-ratio: 16 / 9; }
.ratio-916 { aspect-ratio: 9 / 16; }
.ratio-239 { aspect-ratio: 2.39 / 1; }
.ratio-11 { aspect-ratio: 1 / 1; }
.cap { margin-top: 10px; font-family: var(--f-mono); font-size: var(--fs-mono); letter-spacing: .04em; color: var(--muted); }

/* --- Erişilebilirlik --- */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; inset-inline-start: 12px; top: -60px; z-index: 1000; padding: 12px 16px; background: var(--ink); color: var(--white); font-weight: 600; text-decoration: none; }
.skip-link:focus { top: 12px; }

/* --- Sayfa geçişi: tarayıcının yerleşik çapraz-belge geçişi (Chrome/Edge/Safari 18+).
   Kütüphane ve derleme yok; desteklemeyen tarayıcıda normal geçiş. Başlık çubuğu yerinde kalır. --- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: gk-vt-out 320ms var(--e-settle) both; }
  ::view-transition-new(root) { animation: gk-vt-in 560ms var(--e-settle) both; }
  .gk-header { view-transition-name: gk-header; }
}
@keyframes gk-vt-out { to { opacity: 0; transform: translateY(-14px); } }
@keyframes gk-vt-in { from { opacity: 0; transform: translateY(18px); } }

/* --- Görünme (kaydırdıkça): blok yükselerek belirir, aynı gruptakiler sırayla (--i, app.js);
   başlık sözcükleri maskeden kalkar (.wd, app.js böler); fotoğraf perde gibi açılır ve yerine oturur.
   "reveal-on" <head>'de eklenir; app.js çalışmazsa 3 sn sonra her şey görünür (yedek animasyon).
   Sade hareket (motion-reduced): yalnız solma. --- */
.reveal-on [data-reveal] {
  transition: opacity .8s var(--e-settle), transform 1s var(--e-settle);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.reveal-on [data-reveal]:not(.is-in) { opacity: 0; transform: translateY(32px); }
.reveal-on:not(.reveal-ready) [data-reveal]:not(.is-in),
.reveal-on:not(.reveal-ready) [data-reveal]:not(.is-in) :is(.frame, .frame img, .film, .wd > span),
.reveal-on:not(.reveal-ready) .frame[data-reveal]:not(.is-in) img { animation: gk-reveal-failsafe 0s 3s forwards; }   /* yalnız JS hazır değilse */
@keyframes gk-reveal-failsafe { to { opacity: 1; transform: none; clip-path: none; } }

.wd { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .14em; margin-bottom: -.14em; }
.wd > span { display: inline-block; transition: transform 1.1s var(--e-settle), opacity .9s var(--e-settle); transition-delay: calc(var(--i, 0) * 90ms + var(--w, 0) * 55ms); }
.reveal-on [data-reveal]:not(.is-in) .wd > span { transform: translateY(108%); }

.reveal-on [data-reveal] .frame, .reveal-on .frame[data-reveal], .reveal-on [data-reveal] .film {
  clip-path: inset(0 0 0 0); transition: clip-path 1.3s var(--e-settle), opacity .8s var(--e-settle), transform 1s var(--e-settle);
  transition-delay: calc(var(--i, 0) * 90ms + 100ms);
}
.reveal-on [data-reveal]:not(.is-in) .frame, .reveal-on .frame[data-reveal]:not(.is-in), .reveal-on [data-reveal]:not(.is-in) .film { clip-path: inset(100% 0 0 0); }
.reveal-on [data-reveal] .frame img, .reveal-on .frame[data-reveal] img {
  transition: transform 1.8s var(--e-settle), filter var(--d-quick) var(--e-settle);
  transition-delay: calc(var(--i, 0) * 90ms + 100ms);
}
.reveal-on [data-reveal]:not(.is-in) .frame img, .reveal-on .frame[data-reveal]:not(.is-in) img { transform: scale(1.2); }

.motion-reduced.reveal-on [data-reveal]:not(.is-in) { transform: none; }
.motion-reduced.reveal-on [data-reveal]:not(.is-in) .wd > span { transform: none; opacity: 0; }
.motion-reduced.reveal-on [data-reveal]:not(.is-in) .frame,
.motion-reduced.reveal-on .frame[data-reveal]:not(.is-in),
.motion-reduced.reveal-on [data-reveal]:not(.is-in) .film { clip-path: inset(0 0 0 0); }
.motion-reduced.reveal-on [data-reveal]:not(.is-in) .frame img,
.motion-reduced.reveal-on .frame[data-reveal]:not(.is-in) img { transform: none; }

/* Animasyon tercihi düğmesi (menü + footer) */
.motion-toggle { background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: currentColor; }

/* ==== components.css ==== */
/* =====================================================================
   V2 bileşenleri: marka işareti, başlık çubuğu + gün saati, menü,
   mobil dok, butonlar, çipler, form, albüm kartı, sayaç, seçim çemberi,
   odak köşeleri, footer.
   ===================================================================== */

/* ---------- Marka: ü kare içinde ---------- */
.mark {
  --s: 30px;
  display: inline-grid; place-items: center; flex: none;
  width: var(--s); height: var(--s);
  border: calc(var(--s) / 20 + .6px) solid currentColor;
  font-family: var(--f-display); font-weight: 400; font-stretch: 87.5%; font-style: normal;
  font-size: calc(var(--s) * .78); line-height: 1; padding-bottom: calc(var(--s) * .13);
}
.wordmark { font-family: var(--f-display); font-stretch: 87.5%; font-weight: 400; font-size: 1.3rem; letter-spacing: -.005em; white-space: nowrap; }
.wordmark i { font-style: italic; font-weight: 300; }
.brand { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; color: inherit; }
.brand:hover { color: inherit; }
.brand:hover .mark { animation: gk-blink var(--d-slow) var(--e-settle) 1; }
@keyframes gk-blink { 0%, 100% { transform: none; } 45% { transform: scaleY(.86); } }

/* ---------- Seçim çemberi (elle çizilmiş kırmızı halka) ---------- */
.loop { position: absolute; overflow: visible; pointer-events: none; color: var(--loop); }
.loop path { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.loop-wrap { position: relative; display: inline-block; }
.loop-wrap > .loop { inset: -26% -9% -30% -7%; width: 116%; height: 156%; }
/* Çizim: ring.js uzunluğu ekran pikseliyle ölçüp dasharray/offset yazar (pathLength +
   non-scaling-stroke Chrome'da kesik çiziyordu). JS yoksa halka tam görünür. */
.loop[data-draw] path { transition: stroke-dashoffset var(--d-slow) var(--e-dolly); }

/* ---------- Odak köşeleri (AF) ---------- */
.af { position: absolute; inset: -8px; pointer-events: none; }
.af i { position: absolute; width: 16px; height: 16px; border: 0 solid var(--loop); }
.af i:nth-child(1) { inset-inline-start: 0; top: 0; border-inline-start-width: 2px; border-top-width: 2px; }
.af i:nth-child(2) { inset-inline-end: 0; top: 0; border-inline-end-width: 2px; border-top-width: 2px; }
.af i:nth-child(3) { inset-inline-start: 0; bottom: 0; border-inline-start-width: 2px; border-bottom-width: 2px; }
.af i:nth-child(4) { inset-inline-end: 0; bottom: 0; border-inline-end-width: 2px; border-bottom-width: 2px; }

/* ---------- Butonlar ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 24px; border-radius: var(--radius);
  font-family: var(--f-sans); font-size: 1rem; font-weight: 600; line-height: 1.1;
  text-decoration: none; cursor: pointer; border: 1px solid transparent;
  transition: background-color var(--d-quick) var(--e-settle), color var(--d-quick) var(--e-settle), border-color var(--d-quick) var(--e-settle);
}
.btn--solid { background: var(--fg); color: var(--bg); }
.btn--solid:hover { background: var(--loop); color: var(--white); }
.btn--ghost { background: transparent; color: var(--fg); border-color: color-mix(in srgb, var(--fg) 40%, transparent); }
.btn--ghost:hover { color: var(--fg); border-color: var(--fg); }
.btn--sm { min-height: 44px; padding: 0 16px; font-size: .9rem; }
.btn--block { width: 100%; }
.btn svg { width: 18px; height: 18px; flex: none; }

/* ---------- Çipler (seçili = dolu + halka) ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px;
  border: 1px solid var(--line); border-radius: var(--radius); background: transparent; color: var(--fg);
  font-family: var(--f-sans); font-size: .9375rem; font-weight: 500; cursor: pointer; text-decoration: none;
  transition: border-color var(--d-quick) var(--e-settle), background-color var(--d-quick) var(--e-settle);
}
.chip:hover { border-color: var(--fg); color: var(--fg); }
.chip[aria-pressed="true"], .chip.is-active { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.chip > .loop { inset: -26% -10%; width: 120%; height: 152%; display: none; }
.chip[aria-pressed="true"] > .loop, .chip.is-active > .loop { display: block; }

/* ---------- Form ---------- */
.field { display: grid; gap: 8px; }
.field__label { font-family: var(--f-mono); font-size: var(--fs-mono); font-weight: 500; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.input {
  width: 100%; min-height: 54px; padding: 0 16px; border-radius: var(--radius);
  background: var(--surface); color: var(--fg); border: 1px solid color-mix(in srgb, var(--fg) 32%, transparent);
}
textarea.input { padding: 14px 16px; min-height: 120px; resize: vertical; }
.input:focus-visible { outline: 2px solid var(--loop); outline-offset: 2px; border-color: var(--loop); }
.field__error { color: var(--loop); font-size: .875rem; }

/* ---------- Başlık çubuğu ---------- */
.gk-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--bg); color: var(--fg);
  border-bottom: 1px solid var(--line);
  transition: transform var(--d-base) var(--e-settle);
}
.gk-header.is-hidden { transform: translateY(-101%); }
.gk-header__in { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: var(--header-h); }
.gk-header .wordmark { display: none; }
@media (min-width: 560px) { .gk-header .wordmark { display: inline; } }
.gk-nav { display: none; align-items: center; gap: 26px; font-size: .95rem; }
.gk-nav a { text-decoration: none; padding-block: 6px; border-bottom: 1.5px solid transparent; }
.gk-nav a[aria-current="page"] { border-bottom-color: var(--loop); }
.gk-nav a:hover { color: var(--fg); border-bottom-color: var(--fg); }
.gk-tools { display: flex; align-items: center; gap: 14px; }
.gk-menu-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 4px; background: none; border: 0; cursor: pointer; font-size: .9rem; }
.gk-menu-btn svg { width: 26px; height: 14px; }
.gk-header .btn--solid { min-height: 44px; padding: 0 18px; font-size: .9rem; }
@media (min-width: 1100px) { .gk-nav { display: flex; } }
@media (max-width: 759px) { .gk-header .btn--solid, .gk-menu-btn__label { display: none; } }

/* Gün saati */
.clock { display: none; align-items: center; gap: 12px; font-family: var(--f-mono); font-size: var(--fs-mono); color: var(--muted); }
.clock__track { position: relative; width: 150px; height: 1px; background: var(--line); }
.clock__dot { position: absolute; top: -4px; inset-inline-start: var(--p, 59%); width: 9px; height: 9px; margin-inline-start: -4px; border-radius: 50%; background: var(--accent); transition: inset-inline-start var(--d-quick) linear; }
.clock__now { color: var(--fg); font-variant-numeric: tabular-nums; min-width: 5ch; }
@media (min-width: 900px) { .clock { display: inline-flex; } }
.clock--label .clock__track, .clock--label > span:not(.clock__now) { display: none; }

/* Dil seçici */
.lang { position: relative; }
.lang > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; font-family: var(--f-mono); font-size: var(--fs-mono); letter-spacing: .08em; }
.lang > summary::-webkit-details-marker { display: none; }
.lang__menu { position: absolute; inset-inline-end: 0; top: calc(100% + 6px); min-width: 160px; padding: 6px; background: var(--surface); color: var(--fg); border: 1px solid var(--line); box-shadow: 0 18px 40px rgba(0,0,0,.18); z-index: 5; }
.lang__menu a { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; text-decoration: none; font-size: .9rem; }
.lang__menu a[aria-current="true"] { color: var(--loop); }
.lang__menu a:hover { background: color-mix(in srgb, var(--fg) 7%, transparent); color: var(--fg); }

/* ---------- Tam ekran menü (deklanşör perdesi) ---------- */
.gk-menu {
  position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0;
  background: transparent; color: #F1EADF; overflow: hidden;
}
.gk-menu::backdrop { background: transparent; }
.gk-menu__curtain { position: absolute; inset-inline: 0; height: 50.5%; background: #0E0C12; transform: scaleY(0); transition: transform var(--d-slow) var(--e-shutter); }
.gk-menu__curtain--top { top: 0; transform-origin: top; }
.gk-menu__curtain--bottom { bottom: 0; transform-origin: bottom; }
.gk-menu.is-open .gk-menu__curtain { transform: scaleY(1); }
.gk-menu__body { position: relative; height: 100%; display: grid; grid-template-rows: auto 1fr auto; opacity: 0; transition: opacity var(--d-base) var(--e-focus); overflow-y: auto; }
.gk-menu.is-open .gk-menu__body { opacity: 1; transition-delay: calc(var(--d-slow) * .55); }
.gk-menu__top { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); }
.gk-menu__close { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; background: none; border: 0; color: inherit; cursor: pointer; font-size: .9rem; }
.gk-menu__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: center; padding-block: 24px; }
@media (min-width: 1000px) { .gk-menu__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); } }
.gk-menu__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.gk-menu__list a {
  display: inline-block; text-decoration: none;
  font-family: var(--f-display); font-weight: 300; font-stretch: 62.5%; font-size: clamp(2.8rem, 7vw, 5.6rem); line-height: 1.02; letter-spacing: -.015em;
  color: #F1EADF; transition: color var(--d-quick) var(--e-settle), font-weight var(--d-base) var(--e-settle);
}
.gk-menu__list a:hover, .gk-menu__list a:focus-visible { color: var(--bulb); font-weight: 500; }
.gk-menu__list a[aria-current="page"] { color: var(--red-on-dark); }
.gk-menu__sub { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 22px; font-size: 1rem; }
.gk-menu__sub a { color: #CFC6B9; text-decoration: none; }
.gk-menu__preview { display: none; position: relative; aspect-ratio: 4 / 5; max-height: 68vh; overflow: hidden; background: #18151E; }
@media (min-width: 1000px) { .gk-menu__preview { display: block; } }
.gk-menu__preview img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity var(--d-base) var(--e-focus); }
.gk-menu__preview img.is-on { opacity: 1; }
.gk-menu__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px 28px; padding-block: 22px 28px; border-top: 1px solid rgba(241,234,223,.16); font-size: .95rem; color: #CFC6B9; }
.gk-menu__foot a { color: inherit; text-decoration: none; }
.gk-menu__langs { display: flex; gap: 16px; font-family: var(--f-mono); font-size: var(--fs-mono); letter-spacing: .08em; }
.gk-menu__langs a[aria-current="true"] { color: var(--red-on-dark); }
html.menu-open { overflow: hidden; }
.motion-reduced .gk-menu__curtain { transition-duration: 1ms; }
.motion-reduced .gk-menu.is-open .gk-menu__body { transition-delay: 0s; }

/* ---------- Mobil alt dok (başparmak bölgesi) ---------- */
.dock {
  position: fixed; inset-inline: 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); z-index: 90;
  display: grid; grid-template-columns: 1fr 1.3fr 1fr; gap: 6px; padding: 6px;
  background: rgba(20,16,12,.92); color: #F3E9DA; border: 1px solid rgba(243,233,218,.18); border-radius: 4px;
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
  transition: transform var(--d-base) var(--e-settle), opacity var(--d-base) var(--e-settle);
}
.dock a, .dock button { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; background: none; border: 0; color: inherit; text-decoration: none; font-size: .875rem; cursor: pointer; }
.dock .dock__cta { background: #F3E9DA; color: #14100C; font-weight: 600; border-radius: var(--radius); }
.dock svg { width: 18px; height: 18px; }
.dock.is-away { transform: translateY(140%); opacity: 0; }
@media (min-width: 760px) { .dock { display: none; } }
@media (max-width: 759px) { body { padding-bottom: 84px; } }

/* ---------- Albüm kartı + sayaç ---------- */
.album-grid { display: grid; gap: 28px 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 700px) { .album-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .album-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.album-card { display: block; text-decoration: none; color: inherit; }
.album-card:hover { color: inherit; }
.album-card .frame { aspect-ratio: 4 / 5; }
.album-card img { transition: filter var(--d-quick) var(--e-settle); }
.album-card:hover img { filter: brightness(1.06); }
.album-card__title { margin-top: 10px; font-family: var(--f-display); font-stretch: 75%; font-size: 1.45rem; line-height: 1.1; }
.album-card__meta { font-family: var(--f-mono); font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.album-card--more { display: flex; flex-direction: column; justify-content: space-between; aspect-ratio: 4 / 5; padding: 20px; background: var(--fg); color: var(--bg); }
.album-card--more:hover { color: var(--bg); }
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--fg); }
@media (min-width: 900px) { .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stat { padding: 20px 20px 0 0; }
.stat + .stat { padding-inline-start: 20px; border-inline-start: 1px solid var(--line); }
.stat dt { font-family: var(--f-mono); font-size: var(--fs-mono); letter-spacing: .08em; color: var(--muted); text-transform: uppercase; }
.stat dd { margin: 8px 0 0; font-family: var(--f-display); font-weight: 250; font-stretch: 62.5%; font-size: clamp(3rem, 6vw, 4.5rem); line-height: .9; font-variant-numeric: tabular-nums; }

/* ---------- Bölüm başlığı (eyebrow + başlık + bağlantı) ---------- */
.sec-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 18px 32px; }
.sec-head .t-h2 { margin-top: 14px; }

/* ---------- Footer ---------- */
.gk-footer { padding-block: 72px 40px; border-top: 1px solid var(--line); }
.gk-footer__grid { display: grid; gap: 40px; grid-template-columns: minmax(0, 1fr); font-size: .95rem; }
@media (min-width: 900px) { .gk-footer__grid { grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); } }
.gk-footer__grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.gk-footer__grid a { text-decoration: none; }
.gk-footer__grid a:hover { text-decoration: underline; text-decoration-color: var(--loop); }
.gk-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 56px; }

/* ---------- Tam ekran görüntüleyici (viewer.js) ---------- */
.viewer { position: fixed; inset: 0; z-index: 300; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 56px 16px 24px; background: rgba(12,10,9,.92); color: #E9E4DC; }
.viewer[hidden] { display: none; }
.viewer__fig { margin: 0; display: grid; gap: 14px; justify-items: center; min-width: 0; }
.viewer__fig img { max-width: 100%; background: #FFF; padding: 8px; }
.viewer__cap { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 18px; font-size: .92rem; }
.viewer__pos { color: #A79E92; font-size: .78rem; }
.viewer__album { color: #FFF; text-decoration: underline; text-underline-offset: 4px; }
.viewer__album:hover { color: var(--red-on-dark); }
.viewer__album[hidden], .viewer__nav[hidden] { display: none; }
.viewer__close, .viewer__nav { width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); background: transparent; color: #FFF; font-size: 1.05rem; cursor: pointer; transition: background-color var(--d-quick) var(--e-settle); }
.viewer__close:hover, .viewer__nav:hover { background: rgba(255,255,255,.12); }
.viewer__close { position: absolute; top: 14px; inset-inline-end: 14px; }
[dir="rtl"] .viewer__nav { transform: scaleX(-1); }
html.viewer-open { overflow: hidden; }
@media (max-width: 700px) {
  .viewer { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr auto; padding: 60px 12px 16px; }
  .viewer__fig { grid-column: 1 / -1; grid-row: 1; }
  .viewer__nav--prev { grid-row: 2; justify-self: end; }
  .viewer__nav--next { grid-row: 2; justify-self: start; }
}

/* ---------- Çerez bildirimi ---------- */
.consent { position: fixed; inset-inline: 12px; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); z-index: 95; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; max-width: 520px; padding: 14px 16px; background: var(--ink); color: #F3F4F1; border-radius: var(--radius); font-size: .875rem; box-shadow: 0 12px 30px rgba(0,0,0,.3); }
.consent a { color: inherit; }
.consent .btn { min-height: 40px; padding: 0 16px; font-size: .85rem; background: #F3F4F1; color: var(--ink); }
@media (min-width: 760px) { .consent { bottom: 20px; inset-inline-start: 20px; } }
.consent[hidden] { display: none; }

/* ---------- Logo (gerçek marka logosu; zemine göre koyu/beyaz sürüm) ---------- */
.logo { display: block; width: auto; height: 38px; }
.gk-header .logo { height: 36px; }
@media (max-width: 559px) { .gk-header .logo { height: 30px; } }
.logo--beyaz { display: none; }
:is([data-time="an"], [data-time="safak"], [data-time="gece"], [data-time="sinema"], [data-time="yenigun"]) .logo--koyu { display: none; }
:is([data-time="an"], [data-time="safak"], [data-time="gece"], [data-time="sinema"], [data-time="yenigun"]) .logo--beyaz,
.gk-menu .logo--beyaz { display: block; }
.gk-footer .logo { height: 58px; }

/* ==== pages.css ==== */
/* =====================================================================
   V2 sayfa düzenleri: sayfa başlığı, ana sayfa bölümleri, İşlerimiz,
   albüm, Filmler, Hizmetler, Hakkımızda, İletişim, SSS, Gizlilik, 404.
   Bileşenler components.css'te; ağır etkileşimler (duvar, kolaj, açılış)
   kendi dosyalarında ve yalnız gereken sayfada yüklenir.
   ===================================================================== */

/* ---------- Sayfa başlığı ---------- */
.page-head { padding-block: clamp(48px, 9vw, 120px) clamp(28px, 4vw, 48px); }
.page-head .t-h1 { margin-top: 14px; max-width: 16ch; }
.page-head .t-lead { margin-top: 18px; }
.page-head__row { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 24px 40px; }
.page-head .chips { margin-top: 28px; }
.chip__n { margin-inline-start: 6px; font-size: .75rem; }

/* ---------- Kapanış çağrısı (her sayfanın sonunda) ---------- */
.cta-close { padding-block: clamp(72px, 12vw, 160px); border-top: 1px solid var(--line); text-align: center; }
.cta-close .t-xl { max-width: 14ch; margin-inline: auto; }
.cta-close .t-lead { margin: 22px auto 0; }
.cta-close__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 34px; }

/* ---------- Ana sayfa ---------- */
.manifesto { padding-block: clamp(80px, 14vw, 200px); }
.manifesto p { font-family: var(--f-display); font-weight: 300; font-stretch: 62.5%; font-size: clamp(2.1rem, 5.2vw, 4.6rem); line-height: 1.05; letter-spacing: -.015em; max-width: 22ch; text-wrap: balance; }
.manifesto em { font-style: italic; color: var(--loop); }
:lang(ar) .manifesto p { font-family: var(--f-arabic-display); font-stretch: normal; line-height: 1.4; }

.home-topics { border-top: 1px solid var(--line); }
.home-topics__head { padding-block: clamp(56px, 8vw, 96px) 28px; }


.works { padding-block: clamp(64px, 10vw, 128px); border-top: 1px solid var(--line); }
.works .album-grid { margin-top: 36px; }

.film-teaser { padding-block: clamp(64px, 10vw, 128px); }
.film-teaser .film { margin-top: 32px; }

.numbers { padding-block: clamp(56px, 8vw, 96px); }
.numbers .stats { margin-top: 26px; }

.quotes { padding-block: clamp(64px, 10vw, 128px); border-top: 1px solid var(--line); }
.quotes__list { display: grid; gap: 40px 32px; margin-top: 40px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .quotes__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.quote { display: grid; gap: 16px; align-content: start; }
.quote blockquote { font-family: var(--f-display); font-weight: 300; font-stretch: 75%; font-size: 1.45rem; line-height: 1.3; }
.quote blockquote::before { content: "“"; display: block; color: var(--loop); font-size: 3rem; line-height: .6; margin-bottom: 8px; }
.quote figcaption { font-family: var(--f-mono); font-size: var(--fs-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }

/* ---------- Film (tıkla → yükle; gizlilik dostu youtube-nocookie) ---------- */
.film { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: #0B0B0C; border: 0; padding: 0; cursor: pointer; color: #FFF; text-align: start; }
.film img { width: 100%; height: 100%; object-fit: cover; opacity: .9; transition: opacity var(--d-base) var(--e-settle), transform var(--d-cine, 1.2s) var(--e-settle); }
.film:hover img { opacity: 1; transform: scale(1.03); }
.film__play { position: absolute; inset: 0; display: grid; place-items: center; }
.film__play span { display: grid; place-items: center; width: clamp(64px, 8vw, 96px); aspect-ratio: 1; border-radius: 50%; background: rgba(255,255,255,.92); color: #0B0B0C; font-size: 1.4rem; transition: transform var(--d-quick) var(--e-settle); }
.film:hover .film__play span, .film:focus-visible .film__play span { transform: scale(1.08); }
.film__title { position: absolute; inset-inline: 0; bottom: 0; padding: 40px 18px 14px; background: linear-gradient(to top, rgba(0,0,0,.7), transparent); font-size: .95rem; }
.film iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.film.is-playing { cursor: default; }
.film-note { margin-top: 10px; }
.film-grid { display: grid; gap: 28px 20px; grid-template-columns: minmax(0, 1fr); padding-bottom: clamp(64px, 10vw, 128px); }
@media (min-width: 760px) { .film-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .film-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.film-grid .film--lead { grid-column: 1 / -1; }

/* ---------- İşlerimiz + albüm ---------- */
.albums-list { padding-bottom: clamp(64px, 10vw, 128px); }
.album-card .frame { background: var(--surface); }
.album-card__initials { position: absolute; inset-inline-start: 12px; bottom: 10px; color: #FFF; font-family: var(--f-display); font-stretch: 62.5%; font-size: 2.2rem; line-height: 1; text-shadow: 0 2px 18px rgba(0,0,0,.45); }
.empty-note { padding: 48px 0 96px; color: var(--muted); }

.album-hero { padding-block: clamp(36px, 6vw, 72px) clamp(28px, 4vw, 48px); }
.album-hero__back { display: inline-flex; gap: 8px; font-size: .9rem; text-decoration: none; color: var(--muted); }
.album-hero__title { margin-top: 18px; font-family: var(--f-display); font-weight: 300; font-stretch: 62.5%; font-size: clamp(3.4rem, 10vw, 8.5rem); line-height: .9; letter-spacing: -.02em; }
.album-hero__meta { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 22px; }
.album-hero__meta div { display: grid; gap: 2px; }
.album-hero__meta dt { font-family: var(--f-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.album-hero__meta dd { margin: 0; font-size: 1rem; }
.album-hero__note { margin-top: 22px; max-width: 60ch; color: var(--muted); font-size: 1.05rem; }
.album-cover { aspect-ratio: 21 / 9; }
@media (max-width: 700px) { .album-cover { aspect-ratio: 4 / 5; } }

.masonry { columns: 3 280px; column-gap: 14px; padding-block: 32px clamp(48px, 8vw, 96px); }
.masonry__item { display: block; width: 100%; margin: 0 0 14px; padding: 0; border: 0; background: var(--surface); break-inside: avoid; cursor: zoom-in; }
.masonry__item img { width: 100%; height: auto; transition: filter var(--d-quick) var(--e-settle); }
.masonry__item:hover img { filter: brightness(1.06); }
.album-films { display: grid; gap: 20px; padding-bottom: clamp(48px, 8vw, 96px); }
.album-pager { display: flex; justify-content: space-between; gap: 20px; padding-block: 28px; border-top: 1px solid var(--line); }
.album-pager a { display: grid; gap: 4px; text-decoration: none; max-width: 45%; }
.album-pager a:last-child { text-align: end; margin-inline-start: auto; }
.album-pager strong { font-family: var(--f-display); font-stretch: 75%; font-weight: 400; font-size: 1.5rem; }

/* ---------- Hizmetler + paketler ---------- */
.svc-list { display: grid; border-top: 1px solid var(--fg); }
.svc { display: grid; gap: 10px 40px; padding-block: 28px; border-bottom: 1px solid var(--line); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .svc { grid-template-columns: 80px minmax(0, 4fr) minmax(0, 6fr); align-items: baseline; } }
.svc__n { font-family: var(--f-mono); color: var(--muted); }
.svc h2, .svc h3 { font-family: var(--f-display); font-weight: 400; font-stretch: 75%; font-size: clamp(1.8rem, 3vw, 2.4rem); line-height: 1.05; }
.svc p { color: var(--muted); max-width: 60ch; }
.pkgs { padding-block: clamp(64px, 10vw, 128px); }
.pkg-grid { display: grid; gap: 20px; margin-top: 36px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .pkg-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pkg { position: relative; display: grid; gap: 18px; align-content: start; padding: 28px; border: 1px solid var(--line); background: var(--surface); }
.pkg--featured { border-color: var(--fg); }
.pkg__badge { position: absolute; top: -12px; inset-inline-start: 24px; padding: 4px 10px; background: var(--loop); color: #FFF; font-family: var(--f-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.pkg h3 { font-family: var(--f-display); font-weight: 400; font-stretch: 75%; font-size: 2rem; line-height: 1.05; }
.pkg__price { font-family: var(--f-display); font-weight: 250; font-stretch: 62.5%; font-size: 3rem; line-height: .9; font-variant-numeric: tabular-nums; }
.pkg__price small { display: block; margin-bottom: 6px; font-family: var(--f-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.pkg ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: .95rem; }
.pkg li { display: grid; grid-template-columns: 18px 1fr; gap: 8px; }
.pkg li::before { content: "✓"; color: var(--loop); }
.pkg .btn { margin-top: 6px; }

/* ---------- Hakkımızda ---------- */
.story-block { padding-block: clamp(48px, 8vw, 96px); border-top: 1px solid var(--line); }
.story-block .frame { aspect-ratio: 4 / 5; }
.story-block h2 { margin-top: 14px; }
.story-block p { margin-top: 18px; color: var(--muted); font-size: 1.08rem; max-width: 56ch; }

/* ---------- İletişim ---------- */
.contact-grid { padding-bottom: clamp(64px, 10vw, 128px); }
.form { display: grid; gap: 18px; }
.form__row { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) { .form__row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.form select.input { appearance: none; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-inline-end: 40px; }
[dir="rtl"] .form select.input { background-position: 22px 50%, 16px 50%; }
.form__hp { position: absolute !important; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; }
.form-status { min-height: 1.5em; font-size: .95rem; }
.form-status.is-ok { color: #2F7A4A; }
.form-status.is-err { color: var(--loop); }
.contact-direct { display: grid; gap: 22px; align-content: start; }
.contact-direct a { text-decoration: none; }
.contact-direct dd { margin: 4px 0 0; font-size: 1.15rem; }
.contact-direct .btn { justify-self: start; }

/* ---------- SSS + gizlilik ---------- */
.faq-list { border-top: 1px solid var(--fg); margin-bottom: clamp(64px, 10vw, 128px); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { display: flex; justify-content: space-between; gap: 20px; padding-block: 24px; cursor: pointer; list-style: none; font-family: var(--f-display); font-weight: 400; font-stretch: 75%; font-size: clamp(1.35rem, 2.4vw, 1.9rem); line-height: 1.15; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; font-family: var(--f-sans); color: var(--loop); transition: transform var(--d-quick) var(--e-settle); }
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-list details p { padding-bottom: 26px; color: var(--muted); max-width: 64ch; font-size: 1.05rem; }
.prose { padding-bottom: clamp(64px, 10vw, 128px); display: grid; gap: 28px; max-width: 70ch; }
.prose h2 { font-family: var(--f-sans); font-size: 1.2rem; font-weight: 600; }
.prose p { margin-top: 8px; color: var(--muted); }

/* ---------- 404: bulanık kare ---------- */
.nf { min-height: calc(100svh - var(--header-h)); display: grid; align-items: center; padding-block: 48px; }
.nf__frame { aspect-ratio: 4 / 5; max-width: 420px; }
.nf__frame img { filter: blur(14px) saturate(.8); transform: scale(1.1); }
.nf .t-xl { max-width: 12ch; }
.nf__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }