@charset "UTF-8";
/* ==========================================================================
   FIMAR HOLDING — "ATLAS" tasarım sistemi
   Soğuk grafit kurumsal palet · Wix Madefor · Geist Mono · GSAP destekli hareket

    1. Değişkenler ve sıfırlama      10. Zaman tüneli / yönetim
    2. Tipografi                     11. Galeri ve ışık kutusu
    3. Yerleşim ve dokular           12. Gündem
    4. Bileşenler                    13. Marka, film, katalog
    5. Başlık kroması                14. İletişim ve formlar
    6. Bölüm gezinmesi               15. Altbilgi ve yüzen ögeler
    7. Video hero                    16. Hareket katmanı (GSAP)
    8. Sayfa başlıkları              17. Duyarlılık ve baskı
    9. Sektörler
   ========================================================================== */

/* ============================================ 1. Değişkenler ve sıfırlama */

:root {
  /* yüzeyler — soğuk grafit */
  --paper:      #F5F7FA;
  --paper-rgb:  245, 247, 250;   /* perde geçişleri için */
  --surface:    #EAEDF2;
  --surface-2:  #DDE2EA;
  --glass:      rgba(255, 255, 255, .62);
  --glass-line: rgba(13, 17, 23, .10);

  /* metin */
  --ink:        #0C1016;
  --ink-2:      #3E4854;
  --ink-3:      #6B7684;

  /* çizgiler */
  --line:       rgba(12, 16, 22, .14);
  --line-2:     rgba(12, 16, 22, .07);
  --grid-line:  rgba(12, 16, 22, .045);

  /* marka */
  --accent:     #F08825;
  --accent-2:   #CE6C0C;
  --accent-3:   #FFB367;
  --on-accent:  #140D04;

  /* koyu bant */
  --deep:       #0A0D12;
  --deep-2:     #12171F;
  --on-deep:    #EDF1F6;
  --on-deep-2:  #96A1B0;

  --shadow-sm:  0 1px 2px rgba(10, 14, 20, .06), 0 6px 16px -10px rgba(10, 14, 20, .28);
  --shadow:     0 2px 4px rgba(10, 14, 20, .06), 0 18px 42px -22px rgba(10, 14, 20, .42);
  --shadow-lg:  0 4px 10px rgba(10, 14, 20, .08), 0 44px 90px -40px rgba(10, 14, 20, .55);

  --sans:  "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  /* Degular yalnızca Adobe Fonts kiti tanımlıysa yüklenir (bkz. config.php);
     yoksa IBM Plex Sans devreye girer. */
  --disp:  degular, "Degular", "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas, monospace;

  --shell: 1380px;
  --gutter: clamp(1.15rem, 3.4vw, 3.25rem);
  --pad: clamp(3.6rem, 6.5vw, 6.4rem);
  --r: 14px;
  --r-sm: 8px;
  --ease: cubic-bezier(.19, 1, .22, 1);
  --ease-io: cubic-bezier(.65, .05, .36, 1);
}

[data-theme="dark"] {
  --paper:      #080A0E;
  --paper-rgb:  8, 10, 14;
  --surface:    #0F141B;
  --surface-2:  #171D26;
  --glass:      rgba(255, 255, 255, .045);
  --glass-line: rgba(255, 255, 255, .10);

  --ink:        #EEF2F7;
  --ink-2:      #A5B0BE;
  --ink-3:      #6C7686;

  --line:       rgba(238, 242, 247, .16);
  --line-2:     rgba(238, 242, 247, .075);
  --grid-line:  rgba(238, 242, 247, .04);

  --deep:       #05070A;
  --deep-2:     #0D1219;
  --on-deep:    #EEF2F7;
  --on-deep-2:  #98A3B2;

  --shadow-sm:  0 1px 2px rgba(0, 0, 0, .5), 0 8px 18px -12px rgba(0, 0, 0, .8);
  --shadow:     0 2px 6px rgba(0, 0, 0, .55), 0 22px 46px -24px rgba(0, 0, 0, .9);
  --shadow-lg:  0 4px 12px rgba(0, 0, 0, .6), 0 48px 96px -44px rgba(0, 0, 0, .95);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Çapa hedefleri hem başlığın hem bölüm gezinmesinin altında kalsın. */
  scroll-padding-top: calc(var(--site-h, 7.2rem) + var(--secnav-h, 0px) + 1rem);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 clamp(.95rem, .24vw + .89rem, 1.02rem)/1.66 var(--sans);
  font-variant-numeric: proportional-nums;
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }
[hidden] { display: none !important; }

img, picture, video, iframe { max-width: 100%; display: block; }
img { height: auto; }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure, p, h1, h2, h3, h4, h5, h6, blockquote { margin: 0; }
hr { border: 0; border-top: 1px solid var(--line); margin: 0; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }
::selection { background: var(--accent); color: var(--on-accent); }

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--surface); }
::-webkit-scrollbar-thumb { background: var(--ink-3); border-radius: 99px; border: 3px solid var(--surface); }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

.skip {
  position: fixed; inset-inline-start: 1rem; top: -6rem; z-index: 300;
  background: var(--accent); color: var(--on-accent);
  padding: .75rem 1.15rem; font: 600 .78rem/1 var(--mono); letter-spacing: .08em;
  text-transform: uppercase; border-radius: var(--r-sm);
  transition: top .3s var(--ease);
}
.skip:focus { top: 1rem; }

.sr {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ============================================================ 2. Tipografi */

.d0, .d1, .d2, .d3 {
  font-family: var(--disp);
  font-weight: 600;
  letter-spacing: -.012em;
  line-height: 1.24;
  /* `balance` başlığı bilerek eşit satırlara bölüyordu: tek satıra sığan
     başlıklar bile ikiye iniyordu. `pretty` yalnızca sığmadığında böler ve
     son satırda tek kelime bırakmaz. */
  text-wrap: pretty;
  /* Türkçe alt uzantı (ğ, ç, ş, y) ve İ/Ş üst işaretleri için kırpma payı */
  padding-bottom: .02em;
}
/* Ölçek ölçülü tutuldu: en büyük başlık masaüstünde 44 px'i aşmaz. */
.d0 { font-size: clamp(2.15rem, 3.2vw + .65rem, 3.4rem); line-height: 1.14; letter-spacing: -.016em; font-weight: 600; }
.d1 { font-size: clamp(1.75rem, 2.3vw + .6rem, 2.55rem); line-height: 1.2;  letter-spacing: -.013em; }
.d2 { font-size: clamp(1.42rem, 1.4vw + .65rem, 1.9rem);  line-height: 1.26; letter-spacing: -.01em; }
.d3 { font-size: clamp(1.12rem, .6vw + .68rem, 1.32rem);  line-height: 1.36; letter-spacing: -.006em; }

.kick {
  display: inline-flex; align-items: center; gap: .7rem;
  font: 500 .69rem/1 var(--mono);
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--ink-3);
}
@property --kickw { syntax: "<length>"; inherits: false; initial-value: 1.9rem; }
.kick::before {
  content: ""; width: var(--kickw, 1.9rem); height: 1px; background: var(--accent); flex: none;
}
.kick--plain::before { display: none; }

.idx {
  font: 500 .69rem/1 var(--mono);
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3);
}

.lead {
  font-size: clamp(1rem, .3vw + .92rem, 1.12rem);
  line-height: 1.56;
  letter-spacing: -.012em;
  color: var(--ink-2);
  font-weight: 400;
  max-width: 46ch;
  text-wrap: pretty;
}

.prose { font-size: 1.075rem; line-height: 1.78; color: var(--ink-2); max-width: 64ch; }
.prose p + p { margin-top: 1.2em; }
.prose strong { color: var(--ink); font-weight: 600; }

.muted { color: var(--ink-3); }
.mono { font-family: var(--mono); font-size: .78rem; letter-spacing: .04em; }

.ico {
  display: inline-grid; place-items: center;
  width: 1.6rem; height: 1.6rem; flex: none;
  border: 1px solid var(--line); border-radius: 5px;
  font: 500 .6rem/1 var(--mono); color: var(--ink-3);
  transition: border-color .3s var(--ease), color .3s var(--ease);
}

/* ==================================================== 3. Yerleşim ve doku */

.shell { width: min(100% - (var(--gutter) * 2), var(--shell)); margin-inline: auto; }

section { position: relative; }
.sec { padding-block: var(--pad); }
.sec--tight { padding-block: clamp(2.5rem, 4.5vw, 4rem); }

.band--surface { background: var(--surface); }
/* Kontrast bandı — aydınlık, tema değişkenleriyle uyumlu.
   Koyu temada otomatik olarak koyu tona döner. */
.band--deep {
  position: relative;
  background: var(--surface-2);
  --paper: var(--surface-2);
  --glass: color-mix(in srgb, var(--paper) 74%, transparent);
}
.band--deep::after {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: linear-gradient(90deg, var(--accent), transparent 45%);
}

/* ince dikey ızgara dokusu — kurumsal mimari his */
.band--grid::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: calc(100% / 6) 100%;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
}
.band--grid > * { position: relative; z-index: 1; }

.rule { height: 1px; background: var(--line); transform-origin: left; }

.sechead { display: grid; gap: 1.1rem; margin-bottom: clamp(1.9rem, 3.2vw, 3rem); grid-auto-columns: minmax(0, 1fr);}
.sechead--split { grid-template-columns: minmax(0, 1fr); align-items: end; }
@media (min-width: 900px) {
  .sechead--split { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 2.5rem 3.5rem; }
  .sechead--split .sechead__aside { justify-self: end; text-align: right; }
}
.sechead__top { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }

.grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1rem, 1.7vw, 1.55rem); }
.g2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
/* auto-fit, kapsayıcı genişliği değiştikçe (kaydırma çubuğu, yazı tipi
   yüklenmesi) sütun sayısını yeniden hesaplıyor ve kartlar bir satır
   aşağı kayıp geri dönüyordu. Kırılımlar sabitlendi. */
.g3 { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 620px)  { .g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1240px) { .grid.g3:has(> .scard) { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.g4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.5rem), 1fr)); }

/* =========================================================== 4. Bileşenler */

.btn {
  --btn-bg: var(--ink); --btn-fg: var(--paper);
  position: relative; display: inline-flex; align-items: center; gap: .75rem;
  padding: 1rem 1.6rem;
  background: var(--btn-bg); color: var(--btn-fg);
  border: 1px solid var(--btn-bg);
  font: 600 .855rem/1 var(--sans); letter-spacing: -.005em;
  border-radius: 99px; overflow: hidden; isolation: isolate;
  will-change: transform;
  transition: color .4s var(--ease), border-color .4s var(--ease), background .4s var(--ease);
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--accent); border-radius: inherit;
  transform: scale(0, 1); transform-origin: right;
  transition: transform .55s var(--ease);
}
.btn:hover::before { transform: scale(1, 1); transform-origin: left; }
.btn i { font-style: normal; transition: transform .45s var(--ease); }
.btn:hover { color: var(--on-accent); border-color: var(--accent); }
.btn:hover i { transform: translateX(5px); }
.btn:active { transform: translateY(1px) scale(.985); }

.btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink); border-color: var(--line); }
.btn--ghost:hover { color: var(--on-accent); }
.btn--accent { --btn-bg: var(--accent); --btn-fg: var(--on-accent); }
.btn--accent::before { background: var(--ink); }
.btn--accent:hover { color: var(--paper); border-color: var(--ink); }
.btn--sm { padding: .7rem 1.15rem; font-size: .795rem; }
.btn--lg { padding: 1.15rem 2rem; font-size: .92rem; }
.btn--block { width: 100%; justify-content: center; }
.btn[disabled] { opacity: .4; pointer-events: none; }

.lnk {
  position: relative; display: inline-flex; align-items: center; gap: .6rem;
  font: 600 .875rem/1 var(--sans);
  padding-bottom: .38rem;
  transition: color .3s var(--ease);
}
.lnk::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 1px;
  background: var(--line);
}
.lnk::before {
  content: ""; position: absolute; inset: auto 0 0 0; height: 1px; z-index: 1;
  background: var(--accent);
  transform: scaleX(0); transform-origin: right;
  transition: transform .5s var(--ease);
}
.lnk i { font-style: normal; transition: transform .35s var(--ease); }
.lnk:hover { color: var(--accent-2); }
.lnk:hover::before { transform: scaleX(1); transform-origin: left; }
.lnk:hover i { transform: translate(3px, -3px); }
.lnk--down:hover i { transform: translateY(3px); }

.chip {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .5rem .9rem;
  border: 1px solid var(--line); border-radius: 99px;
  font: 500 .755rem/1 var(--mono); letter-spacing: .04em; color: var(--ink-2);
  background: transparent;
  transition: background .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease), transform .25s var(--ease);
}
.chip:hover { border-color: var(--ink-3); color: var(--ink); transform: translateY(-2px); }
.chip.is-on { background: var(--ink); border-color: var(--ink); color: var(--paper); }

.tagline { display: flex; flex-wrap: wrap; gap: .4rem; }
.tag {
  font: 500 .715rem/1 var(--mono); letter-spacing: .04em;
  padding: .42rem .68rem; border: 1px solid var(--line-2); border-radius: 99px;
  color: var(--ink-3); background: var(--surface);
}

/* cam kart */
.card {
  position: relative;
  background: var(--glass);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid var(--glass-line);
  border-radius: var(--r);
  overflow: hidden;
  transform-style: preserve-3d;
  transition: border-color .5s var(--ease), box-shadow .5s var(--ease), transform .5s var(--ease);
}
.card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3;
  border-radius: inherit;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%),
              color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%);
  opacity: 0; transition: opacity .5s var(--ease);
}
.card:hover { border-color: color-mix(in srgb, var(--accent) 42%, var(--glass-line)); box-shadow: var(--shadow); }
.card:hover::after { opacity: 1; }

.ph { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease), filter .6s var(--ease); }
.frame {
  position: relative; overflow: hidden; background: var(--surface-2);
  border-radius: var(--r);
}
.frame::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 0 1px var(--line-2); border-radius: inherit;
}
/* SAFARI GUVENLIK AGI: oranla yukseklik alan gorsel kutularinin tum
   cocuklari absolute oldugundan icerik yuksekligi sifirdir; esnetilince
   Safari kutuyu sifira dusurebiliyor. Alt sinir cokmeyi onler. */
.frame[class*="ratio-"] { min-height: 7rem; }
a:hover > .frame .ph, .card:hover .ph { transform: scale(1.06); }

.ratio-16 { aspect-ratio: 16 / 9; }
.ratio-43 { aspect-ratio: 4 / 3; }
.ratio-11 { aspect-ratio: 1 / 1; }
.ratio-34 { aspect-ratio: 3 / 4; }
.ratio-32 { aspect-ratio: 3 / 2; }
.ratio-hero { aspect-ratio: 4 / 3; }
@media (min-width: 760px) { .ratio-hero { aspect-ratio: 21 / 9; } }

.stats { display: flex; flex-wrap: wrap; gap: clamp(1.5rem, 3.4vw, 3.6rem); }
.stat b {
  display: block; font: 600 clamp(1.5rem, 1.6vw + .6rem, 2rem)/1.14 var(--disp);
  letter-spacing: -0.014em; font-variant-numeric: tabular-nums;
}
.stat span {
  display: block; margin-top: .5rem; max-width: 15rem;
  font: 400 .765rem/1.45 var(--mono); letter-spacing: .03em; color: var(--ink-3);
}

/* ----------------------------------------------------------------------
   Sektör sayfası rakam şeridi (.stats--figures)

   Ortak `.stats` düzeni sade bir esnek satırdı: uzun bir etiket iki
   satıra inince sütunlar birbirini tutmuyordu. Bu değiştirici, şeridi
   eşit sütunlu bir ızgaraya çevirir; hücreler aynı yüksekliği paylaştığı
   için etiketler alt kenara hizalanır ve satır atlaması düzeni bozmaz.
   Ortak sınıf olduğu gibi kalır — diğer sayfalar etkilenmez.
   ---------------------------------------------------------------------- */
.stats--figures {
  display: grid; gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  margin-top: clamp(2.4rem, 4vw, 3.4rem);
  border-top: 1px solid var(--line);
}
.stats--figures .stat {
  position: relative; min-width: 0;
  display: flex; flex-direction: column; align-items: flex-start;
  padding: clamp(1.35rem, 2.3vw, 1.9rem) clamp(1.1rem, 2vw, 1.7rem) clamp(1.2rem, 2vw, 1.6rem) 0;
}
.stats--figures .stat + .stat {
  padding-left: clamp(1.1rem, 2vw, 1.7rem);
  border-left: 1px solid var(--line-2);
}

/* Hücrenin üst kenarında, üzerine gelince uzayan vurgu çizgisi */
.stats--figures .stat::before {
  content: ""; position: absolute; top: -1px; left: 0;
  width: 1.6rem; height: 2px; background: var(--line);
  transition: width .5s var(--ease), background .4s var(--ease);
}
.stats--figures .stat + .stat::before { left: clamp(1.1rem, 2vw, 1.7rem); }
.stats--figures .stat:hover::before { width: 3.4rem; background: var(--accent); }

.stats--figures .stat__n {
  display: block; margin: 0 0 .55rem;
  font: 500 .68rem/1 var(--mono); letter-spacing: .18em; color: var(--ink-3);
  transition: color .4s var(--ease);
}
.stats--figures .stat:hover .stat__n { color: var(--accent); }

.stats--figures .stat b {
  font-size: clamp(1.7rem, 2vw + .7rem, 2.5rem);
  transition: color .4s var(--ease);
}
.stats--figures .stat:hover b { color: var(--accent-2); }

/* Etiket alt kenara yaslanır: hücreler eşit yükseklikte olduğu için
   iki satıra inen bir etiket diğerlerinin hizasını bozmaz. */
.stats--figures .stat__l {
  display: block; margin: auto 0 0; padding-top: .85rem; max-width: none;
  font: 400 .755rem/1.5 var(--mono); letter-spacing: .03em; color: var(--ink-3);
}

@media (max-width: 560px) {
  .stats--figures { grid-template-columns: minmax(0, 1fr); }
  .stats--figures .stat { padding-right: 0; }
  .stats--figures .stat + .stat {
    padding-left: 0; border-left: 0; border-top: 1px solid var(--line-2);
  }
  .stats--figures .stat + .stat::before { left: 0; }
  .stats--figures .stat__l { margin-top: 0; }
}

/* akordiyon */
.acc { border-top: 1px solid var(--line); }
.acc__item { border-bottom: 1px solid var(--line); }
.acc__h { margin: 0; font: inherit; font-weight: inherit; letter-spacing: inherit; }
.acc__btn {
  width: 100%; display: flex; align-items: center; gap: 1.15rem; text-align: left;
  padding: 1.4rem 0; color: inherit;
  transition: padding-left .45s var(--ease), color .35s var(--ease);
}
.acc__btn:hover { padding-left: .7rem; color: var(--accent-2); }
.acc__btn b { font: 500 .7rem/1 var(--mono); color: var(--ink-3); letter-spacing: .1em; flex: none; }
/* `.acc__btn span` daha yüksek özgüllükte olduğu için `.acc__sign`in
   `flex: none` değerini eziyordu; artı işareti daire yerine geniş bir
   elipse dönüşüyordu. Kural yalnızca başlık metnini hedefler. */
.acc__btn > span:not(.acc__sign) { flex: 1; font-weight: 600; font-size: 1.04rem; letter-spacing: -.018em; }
.acc__sign {
  position: relative; width: 2rem; height: 2rem; flex: none;
  border: 1px solid var(--line); border-radius: 50%;
  transition: background .35s var(--ease), border-color .35s var(--ease);
}
.acc__sign::before, .acc__sign::after {
  content: ""; position: absolute; inset: 50% auto auto 50%;
  width: 10px; height: 1.4px; background: currentColor;
  transform: translate(-50%, -50%);
  transition: transform .4s var(--ease);
}
.acc__sign::after { transform: translate(-50%, -50%) rotate(90deg); }
.acc__btn:hover .acc__sign { border-color: var(--accent); }
.acc__btn[aria-expanded="true"] .acc__sign { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.acc__btn[aria-expanded="true"] .acc__sign::after { transform: translate(-50%, -50%) rotate(0deg); }
.acc__btn[aria-expanded="true"] span { color: var(--accent-2); }
.acc__panel { overflow: hidden; height: 0; transition: height .5s var(--ease); }
.acc__inner { padding: 0 0 1.9rem; max-width: 64ch; }
.acc__inner h4 { margin: 1.5rem 0 .6rem; font: 600 .96rem/1.4 var(--sans); }
.acc__inner h4:first-child { margin-top: 0; }
.acc__inner p { color: var(--ink-2); }
.acc__inner ul { display: grid; gap: .55rem; margin-top: .55rem; grid-auto-columns: minmax(0, 1fr);}
.acc__inner li { position: relative; padding-left: 1.3rem; color: var(--ink-2); font-size: .96rem; line-height: 1.62; }
.acc__inner li::before {
  content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 6px;
  background: var(--accent); border-radius: 2px; transform: rotate(45deg);
}

/* =================================================== 5. Başlık (kroma) */

.progress {
  position: fixed; inset: 0 0 auto; height: 2px; z-index: 190;
  background: transparent; pointer-events: none;
}
.progress i {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--accent), var(--accent-3));
  box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 60%, transparent);
}

.site {
  position: sticky; top: 0; z-index: 180;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid transparent;
  transition: transform .5s var(--ease), border-color .4s var(--ease), background .4s var(--ease);
}
.site.is-hidden { transform: translateY(-100%); }
/* Tek hairline; gölge yok — kroma tek katman gibi okunur. */
.site.is-stuck { border-bottom-color: var(--line-2); }
/* Altında kırıntı yolu veya bölüm çubuğu varsa çizgiyi onlar taşır. */
.site.is-stuck:has(+ .crumbs), .site.is-stuck:has(+ .secnav) { border-bottom-color: transparent; }

.site__bar { border-bottom: 1px solid var(--line-2); }
.site__bar-in {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  min-height: 2.45rem;
  font: 500 .705rem/1 var(--mono); letter-spacing: .07em; color: var(--ink-3);
}
.site__ticker { display: flex; align-items: center; gap: .75rem; overflow: hidden; white-space: nowrap; }
.site__ticker b { color: var(--accent); }
.site__bar-links { display: flex; align-items: center; gap: 1.35rem; min-width: 0; }
.site__bar-links a { display: inline-flex; align-items: center; gap: .55rem; white-space: nowrap; transition: color .3s var(--ease); }
.site__bar-links a:hover { color: var(--ink); }
.site__bar-links a:hover .ico { border-color: var(--accent); color: var(--accent); }
.site__bar-links .ico { width: 1.3rem; height: 1.3rem; font-size: .55rem; }

.site__main-in { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2.2rem); min-height: 4.6rem; }

.brand { position: relative; display: block; flex: none; width: clamp(7.8rem, 11vw, 10rem); }
.brand img { width: 100%; height: auto; transition: transform .5s var(--ease); }
.brand:hover img { transform: scale(1.04); }
.brand__l, [data-theme="dark"] .brand__d { display: none; }
[data-theme="dark"] .brand__l { display: block; }

/* Temaya göre logo değişimi — başlık dışında da kullanılır. Koyu mürekkepli
   sürüm aydınlık temada, açık mürekkepli sürüm koyu temada görünür. */
.logo-d { display: block; }
.logo-l, [data-theme="dark"] .logo-d { display: none; }
[data-theme="dark"] .logo-l { display: block; }
.brandswap { display: block; flex: none; width: clamp(8rem, 12vw, 10rem); }
.brandswap img { width: 100%; height: auto; }

/* Başlığın tüm yüksekliğini kaplasın ki imleç bağlantıdan panele inerken
   <li> alanından çıkmasın; çıkarsa mouseleave/mouseenter çifti paneli
   yeniden açıyor ve animasyon baştan başlıyordu. */
.mainnav { margin-inline-start: auto; align-self: stretch; display: flex; align-items: stretch; }
.mainnav__list { display: none; }
@media (min-width: 1120px) { .mainnav__list { display: flex; align-self: stretch; align-items: stretch; gap: .1rem; } }
/* Bağ: <li> başlığın tüm yüksekliğini kaplar; imleç panele inerken
   ögeden çıkmadığı için panel yeniden açılmaz. */
.mainnav__item { display: flex; align-items: center; }

.mainnav__item { position: static; }
.mainnav__link {
  position: relative; display: inline-flex; align-items: center; gap: .45rem;
  padding: .68rem .9rem; border-radius: 99px;
  font: 600 .875rem/1 var(--sans); letter-spacing: -.008em;
  transition: color .3s var(--ease);
}
.mainnav__link::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1;
  background: var(--surface);
  opacity: 0; transform: scale(.9);
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.mainnav__link .caret {
  width: 5px; height: 5px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-1px); opacity: .4;
  transition: transform .35s var(--ease), opacity .35s var(--ease);
}
.mainnav__link:hover::before, .mainnav__item.is-open .mainnav__link::before { opacity: 1; transform: none; }
.mainnav__link.is-active { color: var(--accent-2); }
.mainnav__link.is-active::before { opacity: 1; transform: none; }
.mainnav__item.is-open .caret { transform: rotate(-135deg) translateY(-1px); opacity: .9; }

.panel {
  position: absolute; inset: 100% 0 auto; z-index: 170;
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  opacity: 0; transform: translateY(-10px);
  transition: opacity .35s var(--ease), transform .45s var(--ease);
}
.panel.is-open { opacity: 1; transform: none; }
.panel__in {
  display: grid; gap: clamp(1.6rem, 3vw, 3.6rem);
  grid-template-columns: minmax(0, .8fr) minmax(0, 2fr);
  padding-block: clamp(1.9rem, 3vw, 3rem);
  align-items: start;
}
/* Mega menüdeki bölüm adı. Eskiden <h2> idi; başlık hiyerarşisini
   bozduğu için <p class="panel__t"> oldu. Görünüm değişmedi — h2 seçicisi
   de duruyor ki başka bir yerde kullanılırsa aynı görünsün. */
.panel__lead h2,
.panel__lead .panel__t { font: 600 1.28rem/1.24 var(--disp); letter-spacing: -.018em; margin: .6rem 0 .75rem; }
.panel__blurb { color: var(--ink-3); font-size: .92rem; max-width: 26ch; margin-bottom: 1.25rem; }

.panel__list { display: grid; gap: .1rem; align-content: start; grid-auto-columns: minmax(0, 1fr);}
.panel__list a {
  display: flex; align-items: center; gap: 1rem;
  padding: .85rem 1rem; border-radius: var(--r-sm);
  border-bottom: 1px solid var(--line-2);
  transition: background .3s var(--ease), padding-left .35s var(--ease);
}
.panel__list a:hover { background: var(--surface); padding-left: 1.4rem; }
.panel__list b { font: 500 .7rem/1 var(--mono); color: var(--ink-3); }
.panel__list span { flex: 1; font-weight: 600; font-size: .95rem; }
.panel__list i { font-style: normal; opacity: 0; transform: translateX(-6px); transition: .3s var(--ease); color: var(--accent); }
.panel__list a:hover i { opacity: 1; transform: none; }

.panel__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .85rem; }
.panel__grid a { display: grid; gap: .7rem; grid-auto-columns: minmax(0, 1fr);}
.panel__thumb {
  display: block; position: relative; overflow: hidden;
  border-radius: var(--r-sm); aspect-ratio: 16/10; background: var(--surface-2);
}
.panel__thumb::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 38%, rgba(6,9,13,.55));
  opacity: .85; transition: opacity .4s var(--ease);
}
.panel__grid a:hover .panel__thumb::after { opacity: .45; }
.panel__grid a:hover .ph { transform: scale(1.09); }
.panel__meta { display: block; }
.panel__meta b { font: 500 .67rem/1 var(--mono); color: var(--accent); }
.panel__meta em { display: block; font-style: normal; font-weight: 600; font-size: .9rem; margin-top: .28rem; letter-spacing: -.018em; }
.panel__meta small { display: block; font: 400 .735rem/1.3 var(--sans); color: var(--ink-3); margin-top: .12rem; }

.site__tools { display: flex; align-items: center; gap: .6rem; margin-inline-start: auto; }
@media (min-width: 1120px) { .site__tools { margin-inline-start: 0; } }
.site__tools .btn { display: none; }
@media (min-width: 620px) { .site__tools .btn { display: inline-flex; } }

/* ------------------------------------------------------- Dil değiştirici
   Tema düğmesinin yanında, onunla aynı yükseklikte duran iki harflik bir
   çift. Mono yazı tipi ve yüzeyi başlıktaki diğer denetimlerle aynı, yani
   tasarım diline yeni bir öğe eklenmiyor. */
.dilsec {
  display: flex; align-items: center; flex: none;
  height: 2.4rem; padding: .2rem; gap: .1rem;
  background: var(--surface); border-radius: 99px;
}
.dilsec__b {
  display: grid; place-items: center; min-width: 2rem; height: 100%;
  padding: 0 .5rem; border-radius: 99px;
  font: 500 .67rem/1 var(--mono); letter-spacing: .08em;
  color: var(--ink-3);
  transition: background .3s var(--ease), color .3s var(--ease);
}
.dilsec__b:hover { color: var(--ink); }
.dilsec__b.is-on { background: var(--ink); color: var(--paper); }

.tgl {
  position: relative; width: 2.4rem; height: 2.4rem; flex: none;
  border-radius: 50%; background: var(--surface); color: var(--ink-2);
  display: grid; place-items: center;
  transition: background .35s var(--ease), color .35s var(--ease);
}
.tgl:hover { background: var(--surface-2); color: var(--ink); }
/* Güneş ve ay ince çizgili ikonlar; ikisi üst üste durur, tema hangisini
   göstereceğini belirler. */
.tgl__sun, .tgl__moon {
  position: absolute; width: 1.05rem; height: 1.05rem;
  background-color: currentColor;
  -webkit-mask: var(--i) center / contain no-repeat;
          mask: var(--i) center / contain no-repeat;
  transition: opacity .3s var(--ease), transform .45s var(--ease);
}
.tgl__sun  { --i: url("../icons/sun.png"); }
.tgl__moon { --i: url("../icons/moon.png"); opacity: 0; transform: rotate(-40deg) scale(.7); }
[data-theme="dark"] .tgl__sun  { opacity: 0; transform: rotate(40deg) scale(.7); }
[data-theme="dark"] .tgl__moon { opacity: 1; transform: none; }


/* `grid-auto-columns: 1fr` çizgileri dairenin içinde yana kaydırıyordu;
   flex ile her iki eksende kesin ortalanır. */
.burger {
  width: 2.45rem; height: 2.45rem; border: 1px solid var(--line); border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; padding: 0;
  transition: border-color .35s var(--ease), background .35s var(--ease);
}
.burger:hover { border-color: var(--accent); background: var(--surface); }
@media (min-width: 1120px) { .burger { display: none; } }
.burger span { display: block; width: 15px; height: 1.5px; background: currentColor; transition: transform .4s var(--ease), opacity .25s; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* ------------------------------------------------------------- Çekmece
   Mobil menü tam ekran bir panel: üstte marka, ortada büyük dokunma
   hedefli gruplar, altta iletişim. Çentikli ekranlar için güvenli alan
   payı bırakılır; gruplar sırayla belirir. */

.drawer {
  position: fixed; inset: 0; z-index: 195;
  background: var(--paper);
  overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  animation: drawerIn .45s var(--ease);
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
}
@keyframes drawerIn { from { opacity: 0; } }

.drawer__in {
  width: min(100% - 2.2rem, 34rem); margin-inline: auto;
  padding: 1rem 0 2.5rem;
  display: grid; gap: 1.25rem; align-content: start;
  grid-auto-columns: minmax(0, 1fr);
}

/* Başlık: marka + kapat */
.drawer__head {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .5rem 0 .9rem;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.drawer__brand { width: 7.6rem; }
.drawer__x {
  width: 2.6rem; height: 2.6rem; flex: none;
  border: 1px solid var(--line); border-radius: 50%;
  display: grid; place-items: center; font-size: 1.05rem;
  transition: background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.drawer__x:hover, .drawer__x:focus-visible { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* Gruplar sırayla belirir */
@media (prefers-reduced-motion: no-preference) {
  .drawer__nav > * { animation: drawerItem .45s var(--ease) backwards; }
  .drawer__nav > *:nth-child(1) { animation-delay: .04s; }
  .drawer__nav > *:nth-child(2) { animation-delay: .08s; }
  .drawer__nav > *:nth-child(3) { animation-delay: .12s; }
  .drawer__nav > *:nth-child(4) { animation-delay: .16s; }
  .drawer__nav > *:nth-child(5) { animation-delay: .20s; }
  .drawer__nav > *:nth-child(6) { animation-delay: .24s; }
}
@keyframes drawerItem { from { opacity: 0; transform: translateY(10px); } }

.drawer__nav { display: grid; gap: 0; }

.drawer__top {
  display: flex; align-items: center; gap: .9rem;
  padding: 1.05rem .2rem; border-bottom: 1px solid var(--line-2);
  font-family: var(--disp); font-weight: 600; font-size: 1.1rem; letter-spacing: -.014em;
  border-radius: var(--r-sm);
  transition: background .25s var(--ease), padding-left .25s var(--ease);
}
.drawer__top:hover { background: var(--surface); padding-left: .7rem; }
.drawer__top b { font: 500 .68rem/1 var(--mono); color: var(--ink-3); letter-spacing: .1em; }

.drawer__grp { border-bottom: 1px solid var(--line-2); }
.drawer__btn {
  width: 100%; display: flex; align-items: center; gap: .9rem;
  padding: 1.05rem .2rem; text-align: left; min-height: 3.4rem;
  border-radius: var(--r-sm);
  transition: background .25s var(--ease), padding-left .25s var(--ease);
}
.drawer__btn:hover, .drawer__btn[aria-expanded="true"] { background: var(--surface); padding-left: .7rem; }
.drawer__btn b { font: 500 .68rem/1 var(--mono); color: var(--ink-3); letter-spacing: .1em; flex: none; }
.drawer__btn span { flex: 1; font-family: var(--disp); font-weight: 600; font-size: 1.1rem; letter-spacing: -.014em; }
.drawer__btn i {
  width: 9px; height: 9px; flex: none;
  border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg) translateY(-2px); opacity: .45;
  transition: transform .35s var(--ease), opacity .3s var(--ease);
}
.drawer__btn[aria-expanded="true"] i { transform: rotate(-135deg) translateY(-2px); opacity: 1; color: var(--accent-2); }

.drawer__sub { padding: .1rem 0 .9rem; display: grid; gap: .1rem; }
.drawer__sub a {
  display: flex; align-items: center; gap: .8rem;
  padding: .72rem .8rem; min-height: 2.9rem;
  color: var(--ink-2); font-size: .95rem;
  border-radius: var(--r-sm);
  transition: background .25s var(--ease), color .25s var(--ease);
}
.drawer__sub a:hover { background: var(--surface); color: var(--accent-2); }
.drawer__sub b { font: 500 .66rem/1 var(--mono); color: var(--ink-3); flex: none; }

/* Alt blok: iletişim */
.drawer__foot {
  display: grid; gap: .6rem; margin-top: .4rem;
  padding-top: 1.2rem; border-top: 1px solid var(--line);
}
.drawer__foot > a:not(.btn) {
  display: flex; align-items: center; gap: .6rem;
  padding: .7rem .2rem; min-height: 2.8rem;
  font: 500 .86rem/1 var(--mono); color: var(--ink-2);
  transition: color .25s var(--ease);
}
.drawer__foot > a:not(.btn):hover { color: var(--accent-2); }

/* ==================================== 6. Kırıntı yolu ve bölüm gezinmesi */

.crumbs { background: transparent; }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; padding: .95rem 0 .5rem; font: 500 .73rem/1.4 var(--mono); letter-spacing: .05em; color: var(--ink-3); }
/* Bölüm çubuğu yoksa alt sınırı kırıntı yolu taşır. */
.crumbs:not(:has(+ .secnav)) { border-bottom: 1px solid var(--line-2); padding-bottom: .35rem; }
.crumbs li + li::before { content: "→"; margin-right: .45rem; opacity: .45; }
.crumbs a:hover { color: var(--accent-2); }
.crumbs [aria-current] span { color: var(--ink); }

.secnav {
  /* --site-h betikle ölçülür; betik çalışmazsa yedek değer kullanılır. */
  position: sticky; top: var(--site-h, 7.2rem); z-index: 160;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(180%) blur(18px); -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid var(--line-2);
  transition: top .5s var(--ease);
}
.site.is-hidden ~ .secnav { top: 0; }
.secnav__in { display: flex; align-items: center; gap: 1.15rem; }
.secnav__label { display: none; font: 500 .66rem/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); flex: none; }
@media (min-width: 860px) { .secnav__label { display: block; } }
.secnav ul { display: flex; gap: .2rem; overflow-x: auto; scrollbar-width: none; padding: .55rem 0; }
.secnav ul::-webkit-scrollbar { display: none; }
.secnav a {
  display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap;
  padding: .52rem .9rem; border-radius: 99px;
  font: 500 .815rem/1 var(--sans); color: var(--ink-2);
  transition: background .3s var(--ease), color .3s var(--ease);
}
.secnav a b { font: 500 .65rem/1 var(--mono); color: var(--ink-3); }
.secnav a:hover { background: var(--surface); color: var(--ink); }
.secnav a.is-on { background: var(--ink); color: var(--paper); }
.secnav a.is-on b { color: var(--accent); }

/* ========================================================= 7. Video hero */

.vhero {
  position: relative; isolation: isolate;
  border-bottom: 1px solid var(--line-2);
  /* Ekrana tam oturur: görünür alandan yapışkan başlığın yüksekliği düşülür.
     --site-h betikle ölçülür (bkz. site.js "header"); betik çalışmazsa
     yedek değer kullanılır. svh, mobil tarayıcı çubuğu açılıp kapanırken
     yüksekliğin zıplamasını önler. */
  min-height: calc(100svh - var(--site-h, 7.2rem));
  display: grid; grid-template-rows: 1fr auto; grid-template-columns: minmax(0, 1fr);
  align-items: end;
  overflow: hidden;
  background: var(--surface-2);
  color: var(--hero-ink); grid-auto-columns: minmax(0, 1fr);}
/* Zemin: fotoğraf ya da film bir an boş kalırsa siyah değil, perdeyle aynı
   ton görünür; böylece sınır çizgisi ya da kararma oluşmaz. */
.vhero__media { position: absolute; inset: -14% 0; z-index: -3; overflow: hidden; container-type: size; background: rgb(var(--veil)); }
/* Görüntünün kendisi de temaya uyar: aydınlıkta biraz daha parlak ve canlı,
   koyuda kısılıp doygunluğu düşürülerek koyu arayüzle aynı tona gelir. */
/* Poster iframe'in ÜSTÜNDE durur. YouTube kutusu hazır olana kadar siyah
   render ettiği için önceden iframe üstteydi ve ilk saniyelerde siyah bir
   dikdörtgen görünüyordu. Artık iframe arkada sessizce yüklenir, oynatma
   gerçekten başladığında poster çözülür. */
.vhero__poster {
  position: absolute; inset: 0; z-index: 2;
  width: 100%; height: 100%; object-fit: cover;
  filter: var(--veil-img);
  transition: filter .5s var(--ease), opacity 1.3s var(--ease);
  /* Fotoğraf ilk andan itibaren durur; film gerçekten oynamaya başlayınca
     onun üstünde çözülür (bkz. .is-video-on). Böylece hero hiçbir anda düz
     zemin göstermez. */
}
.vhero__frame {
  position: absolute; inset: 0; z-index: 1;
  /* Film kutusu kapsayıcıyı orandan bağımsız doldurur; kırpmayı tarayıcı
     yapar. Eskiden YouTube kutusu 16:9 tutulup betikle ölçülüyordu; yerel
     <video> ile buna gerek yok. */
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  max-width: none;
  border: 0; pointer-events: none;
  /* Kutu YALNIZCA film modunda görünür. Poster herhangi bir sebeple yarı
     saydam olduğunda (sahne geçişi, duraklama) altından duraklamış YouTube
     karesi sızıyordu; kaynağı burada kapatmak bu sınıfın tamamını bitirir.
     Kapanış geçişsizdir (duraklayan YouTube arayüzü bir an bile görünmesin);
     açılış, düz zeminden yumuşakça belirsin diye .is-video-on'da tanımlıdır. */
  opacity: 0; transition: none;
}
.vhero.is-video-on .vhero__frame { opacity: 1; transition: opacity 1.3s var(--ease); }
.vhero.is-video-on .vhero__poster { opacity: 0; }
/* Perdenin yoğunluğu temaya bağlı: aydınlık modda görüntü açık kalsın diye
   daha ince, koyu modda sayfayla bütünleşsin diye daha derin. Alt kenar her
   iki temada da sayfa zeminine (--paper) bağlanır, böylece hero aşağıdaki
   bölüme dikişsiz geçer. */
/* KÖK ÇÖZÜM — hero metni beyaza sabitlenmişti; beyaz metin koyu perde
   gerektirdiği için aydınlık modda hero kaçınılmaz olarak karanlık
   kalıyordu. Artık metin de temaya dönüyor:
     aydınlık → kâğıt tonlu ince perde + mürekkep metin + gündüz görseli
     koyu     → koyu perde + beyaz metin + alacakaranlık görseli */
.vhero {
  --veil: 251, 250, 249;        /* kâğıt */
  /* Aydınlıkta perde yalnızca metnin durduğu sol şeridi kapatır ve hızla
     açılır; fotoğrafın sağ tarafı berrak kalsın diye %58'de biter. */
  --veil-x:
    linear-gradient(96deg,
      rgba(var(--veil), .96) 0%,
      rgba(var(--veil), .88) 22%,
      rgba(var(--veil), .42) 42%,
      rgba(var(--veil), 0) 62%);
  --veil-y:
    linear-gradient(180deg,
      rgba(var(--veil), .30) 0%,
      rgba(var(--veil), 0) 26%,
      rgba(var(--veil), 0) 62%,
      rgba(var(--veil), .38) 100%);
  --veil-img: saturate(1.06) contrast(1.03) brightness(1.02);
  --hero-ink:  var(--ink);
  --hero-ink2: var(--ink-2);
  /* Küçük mono etiketler ink-3 ile 4,43 kontrast veriyordu (AA eşiği 4,5).
     Hero'da bir ton koyu kullanılır. */
  --hero-ink3: var(--ink-2);
  --hero-line: var(--line);
  --hero-glass: color-mix(in srgb, var(--paper) 78%, transparent);
  --hero-shadow: none;
}
[data-theme="dark"] .vhero {
  --veil: 8, 11, 16;
  --veil-x:
    linear-gradient(96deg,
      rgba(var(--veil), .90) 0%,
      rgba(var(--veil), .72) 26%,
      rgba(var(--veil), .28) 56%,
      rgba(var(--veil), 0) 84%);
  --veil-y:
    linear-gradient(180deg,
      rgba(var(--veil), .42) 0%,
      rgba(var(--veil), 0) 26%,
      rgba(var(--veil), 0) 58%,
      rgba(var(--veil), .78) 100%);
  --veil-img: saturate(.9) contrast(1.06) brightness(.78);
  --hero-ink:  #fff;
  --hero-ink2: rgba(255, 255, 255, .88);
  --hero-ink3: rgba(255, 255, 255, .74);
  --hero-line: rgba(255, 255, 255, .22);
  --hero-glass: rgba(255, 255, 255, .1);
  --hero-shadow: 0 2px 26px rgba(6, 9, 14, .42);
  --veil-ust: .46;
}
.vhero::after {
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background: var(--veil-x), var(--veil-y);
}
.vhero__in {
  padding-block: clamp(3rem, 10vh, 7rem) clamp(1.6rem, 4vh, 3rem);
  position: relative; z-index: 2; min-width: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.vhero__top { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.35rem; max-width: 56rem; }
/* Zemin, ızgara ögesi olduğu için sütun boyunca uzayıp ince uzun bir
   dikdörtgene dönüşüyordu. Zemin kaldırıldı; yerine metnin genişliğine
   oturan bir alt çizgi kullanılıyor. */
.vhero .kick {
  color: var(--hero-ink3);
  justify-self: start; width: max-content; max-width: 100%;
  padding-bottom: .6rem;
  border-bottom: 1px solid var(--hero-line);
}
.vhero .kick::before { background: var(--accent); }
.vhero h1 { color: var(--hero-ink); text-shadow: var(--hero-shadow); }
.vhero h1 .wln { display: block; overflow: hidden; }
.vhero h1 em { font-style: normal; color: var(--accent); }
.vhero__lead {
  color: var(--hero-ink2); max-width: 44ch;
  font-size: clamp(1.05rem, .5vw + .95rem, 1.3rem); line-height: 1.58;
  text-shadow: var(--hero-shadow);
}
.vhero__act { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.2rem; }
.vhero__act .btn { --btn-bg: var(--accent); --btn-fg: var(--on-accent); border-color: var(--accent); }
.vhero__act .btn::before { background: var(--ink); }
.vhero__act .btn:hover { color: var(--paper); border-color: var(--ink); }
.vhero__act .btn--ghost {
  --btn-bg: var(--hero-glass); --btn-fg: var(--hero-ink);
  border-color: var(--hero-line);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}

.vhero__foot {
  /* İki panelli düzen biraz daha yer kapladığı için üst boşluk kısıldı;
     hero yine ekranın tamamına birebir oturur. */
  margin-top: clamp(1.5rem, 4.2vh, 3rem);
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.1rem, 2vw, 1.9rem); grid-auto-columns: minmax(0, 1fr);
}
@media (min-width: 900px) { .vhero__foot { grid-template-columns: minmax(0, 1fr) auto; align-items: end; } }
.vhero__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; min-width: 0; }
.vhero__facts b {
  display: block; font: 600 clamp(1.08rem, .8vw + .6rem, 1.4rem)/1.2 var(--disp);
  letter-spacing: -0.014em; color: var(--hero-ink); font-variant-numeric: tabular-nums;
  text-shadow: var(--hero-shadow);
}
.vhero__facts span { display: block; margin-top: .4rem; font: 400 .735rem/1.35 var(--mono); color: var(--hero-ink3); letter-spacing: .04em; }
/* Mobil için ikinci bir rakam listesi var; geniş ekranda gizli kalır. */
.vhero__facts--mob { display: none; }

.vhero__ctl { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; }
.vhero__now { display: grid; gap: .18rem; padding-right: 1.1rem; border-right: 1px solid var(--hero-line); grid-auto-columns: minmax(0, 1fr);}
.vhero__now b { font-family: var(--disp); font-weight: 600; font-size: .95rem; letter-spacing: -0.014em; color: var(--hero-ink); }
.vhero__now span { font: 400 .715rem/1.3 var(--mono); letter-spacing: .05em; color: var(--hero-ink3); }
@media (max-width: 520px) { .vhero__now { border-right: 0; padding-right: 0; } }
.vhero__btn {
  color: var(--hero-ink); border-color: var(--hero-line); background: var(--hero-glass);
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .6rem 1rem; border-radius: 99px;
  border: 1px solid var(--hero-line);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font: 500 .73rem/1 var(--mono); letter-spacing: .08em;
  transition: background .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease);
}
.vhero__btn:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

/* "Kaydırın" ibaresi ekran kenarına yaslıydı; kabuğun dışına taştığı için
   üstteki başlık ve cam panelle hizasız duruyordu. Artık film şeridiyle
   aynı satırda, kabuğun sağ kenarında. */
.vhero__strip-in { display: flex; align-items: center; gap: 1.2rem; }
.vhero__strip-in .vhero__film { flex: 1 1 auto; min-width: 0; }
.vhero__cue {
  flex: none; display: inline-flex; align-items: center; gap: .55rem;
  font: 500 .64rem/1 var(--mono); letter-spacing: .2em; text-transform: uppercase;
  color: var(--hero-ink3);
}
.vhero__cue i {
  display: block; width: 2.4rem; height: 1px;
  background: linear-gradient(90deg, transparent, currentColor);
  animation: cue 2.4s var(--ease-io) infinite;
}
@keyframes cue {
  0%   { transform: scaleX(0); transform-origin: left; }
  45%  { transform: scaleX(1); transform-origin: left; }
  55%  { transform: scaleX(1); transform-origin: right; }
  100% { transform: scaleX(0); transform-origin: right; }
}
@media (max-width: 860px) { .vhero__cue { display: none; } }

/* sahne şeridi */
.vhero__strip { position: relative; z-index: 2; border-top: 1px solid var(--hero-line); }
.vhero__film { display: flex; gap: .55rem; overflow-x: auto; scrollbar-width: none; padding: .9rem 0; }
.vhero__film::-webkit-scrollbar { display: none; }
.vhero__film button {
  opacity: .82;
  position: relative; flex: none; width: clamp(3.8rem, 6vw, 5.2rem); aspect-ratio: 16/10;
  border-radius: 6px; overflow: hidden; border: 1px solid transparent;
  opacity: .4; transition: opacity .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease);
}
.vhero__film button img { width: 100%; height: 100%; object-fit: cover; }
.vhero__film button:hover { opacity: .9; transform: translateY(-3px); }
.vhero__film button.is-on { opacity: 1; border-color: var(--accent); }

/* ======================================================= 8. Sayfa başlığı */

.phero { position: relative; overflow: hidden; background: var(--deep); color: #fff; isolation: isolate; }
.phero__bg { position: absolute; inset: -12% 0; z-index: -3; overflow: hidden; }
.phero__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .72; will-change: transform; }
.phero::after {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background:
    linear-gradient(96deg, rgba(7,10,14,.78) 0%, rgba(7,10,14,.55) 34%, rgba(7,10,14,.18) 76%),
    linear-gradient(180deg, rgba(7,10,14,.38) 0%, rgba(7,10,14,.12) 40%, rgba(7,10,14,.82) 100%);
}
/* Kabuk hizasını korur (logo, kırıntı yolu ve bölüm çubuğuyla aynı sol kenar);
   okuma ölçüsü sınırı kutunun kendisine değil içeriğine uygulanır, yoksa
   `margin-inline: auto` bloğu kabuğun ortasına kaydırıyordu. */
.phero__in {
  padding-block: clamp(3rem, 6vw, 5rem) clamp(2.4rem, 4.5vw, 3.6rem);
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.35rem;
}
.phero__in > * { max-width: 60rem; }
.phero .kick { color: rgba(255,255,255,.85); }
.phero h1 { color: #fff; }
.phero__lead {
  color: rgba(255,255,255,.92); font-size: clamp(1.04rem, .5vw + .94rem, 1.28rem);
  line-height: 1.58; max-width: 48ch; text-shadow: 0 1px 14px rgba(6,9,14,.45);
}
.phero__meta { display: flex; flex-wrap: wrap; gap: 1.8rem; margin-top: .7rem; padding-top: 1.4rem; border-top: 1px solid rgba(255,255,255,.18); }
.phero__meta div b { display: block; font: 500 .68rem/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.62); }
.phero__meta div span { display: block; margin-top: .42rem; font-weight: 600; font-size: .95rem; }


/* ========================================================== 9. Sektörler */

/* ======================================================================
   SEKTÖR DİZİNİ

   Satır düzeni açıkça tanımlanır. Önceden yalnızca künye için
   `grid-column: 3` yazılıydı; ok da otomatik yerleşimle aynı sütuna
   düştüğü için künye ikinci satıra kayıp okun altında kalıyordu.
   Artık her öge kendi sütununu bilir: künye boş alanı doldurur ve
   sağa, okun hemen soluna yaslanır.
   ====================================================================== */
.sindex { border-top: 1px solid var(--line); }
.sindex__row { position: relative; border-bottom: 1px solid var(--line); }

/* Üzerine gelince soldan içeri akan yumuşak vurgu */
.sindex__row::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 10%, transparent), transparent 55%);
  opacity: 0; transition: opacity .5s var(--ease);
}
.sindex__row:hover::before { opacity: 1; }

/* Sol kenarda aşağıdan yukarı büyüyen vurgu çizgisi */
.sindex__row::after {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; z-index: 1;
  background: var(--accent); transform: scaleY(0); transform-origin: 50% 100%;
  transition: transform .45s var(--ease);
}
.sindex__row:hover::after { transform: scaleY(1); transform-origin: 50% 0; }

.sindex__row > a {
  position: relative; z-index: 2;
  display: grid; align-items: center; gap: .4rem 1.7rem;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  padding: clamp(1.25rem, 2.4vw, 2.15rem) 0;
  transition: padding-left .55s var(--ease);
}
.sindex__row > a:hover { padding-left: clamp(.7rem, 1.8vw, 1.6rem); }

.sindex__n {
  grid-column: 1; grid-row: 1;
  font: 500 .755rem/1 var(--mono); color: var(--ink-3); letter-spacing: .1em;
  transition: color .4s var(--ease);
}
.sindex__row:hover .sindex__n { color: var(--accent); }

.sindex__t {
  grid-column: 2; grid-row: 1;
  font: 600 clamp(1.1rem, 1.1vw + .55rem, 1.5rem)/1.24 var(--disp);
  letter-spacing: -0.014em;
  transition: color .4s var(--ease);
}
.sindex__row:hover .sindex__t { color: var(--accent-2); }

/* Künye: satırın sağ ucunda, okun hemen solunda. Başındaki kısa çizgi
   üzerine gelince uzayıp vurgu rengine döner. */
.sindex__k {
  grid-column: 3; grid-row: 1;
  justify-self: end; min-width: 0;
  display: inline-flex; align-items: center; gap: .65rem;
  font: 400 .78rem/1.4 var(--mono); color: var(--ink-3); letter-spacing: .04em;
  text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: color .4s var(--ease);
}
.sindex__k::before {
  content: ""; flex: none; width: 1.1rem; height: 1px; background: var(--line-2);
  transition: width .45s var(--ease), background .4s var(--ease);
}
.sindex__row:hover .sindex__k { color: var(--ink-2); }
.sindex__row:hover .sindex__k::before { width: 2.6rem; background: var(--accent); }

.sindex__go {
  grid-column: 4; grid-row: 1;
  display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%;
  border: 1px solid var(--line); font-size: .95rem; color: var(--ink-3);
  transition: transform .45s var(--ease), background .4s var(--ease),
              color .4s var(--ease), border-color .4s var(--ease);
}
.sindex__row:hover .sindex__go {
  background: var(--accent); border-color: var(--accent); color: var(--on-accent);
  transform: rotate(45deg);
}

/* --- Zengin sürüm: numara · ikon · başlık · künye · ok ----------------- */
.sindex--rich .sindex__row > a { grid-template-columns: auto auto auto minmax(0, 1fr) auto; }
.sindex--rich .sindex__i  { grid-column: 2; grid-row: 1; }
.sindex--rich .sindex__t  { grid-column: 3; grid-row: 1; }
.sindex--rich .sindex__k  { grid-column: 4; grid-row: 1; }
.sindex--rich .sindex__go { grid-column: 5; grid-row: 1; }

.sindex__thumb { display: none; }

/* --- Dar ekran: künye başlığın altına iner, sola yaslanır -------------- */
@media (max-width: 860px) {
  /* Künye kendi satırına indiğinde tek satıra zorlamak gerekmez; baştaki
     çizgi kaldırılıp normal blok akışına dönülür, böylece uzun künyeler
     kutunun dışına taşmaz. */
  .sindex__k {
    display: block; white-space: normal; overflow: visible; text-overflow: clip;
    max-width: 100%;
  }
  .sindex__k::before { display: none; }

  .sindex--rich .sindex__row > a { grid-template-columns: auto auto minmax(0, 1fr) 4.6rem; }
  .sindex--rich .sindex__i { grid-column: 2; grid-row: 1; }
  .sindex--rich .sindex__t { grid-column: 3; grid-row: 1; }
  .sindex--rich .sindex__k {
    grid-column: 3; grid-row: 2; justify-self: start; text-align: left;
  }
  .sindex--rich .sindex__go { display: none; }
  .sindex__thumb {
    display: block; grid-column: 4; grid-row: 1 / span 2;
    width: 4.6rem; aspect-ratio: 1; overflow: hidden;
    border-radius: var(--r-sm); background: var(--surface-2);
  }
}
@media (max-width: 720px) {
  .sindex:not(.sindex--rich) .sindex__row > a {
    grid-template-columns: auto minmax(0, 1fr) auto; gap: .3rem 1rem;
  }
  .sindex:not(.sindex--rich) .sindex__t { grid-column: 2; grid-row: 1; }
  .sindex:not(.sindex--rich) .sindex__k {
    grid-column: 2; grid-row: 2; justify-self: start; text-align: left;
  }
  .sindex:not(.sindex--rich) .sindex__go { grid-column: 3; grid-row: 1 / span 2; }
  .sindex__k::before { width: .9rem; }
}

.sindex__peek {
  position: fixed; z-index: 140; width: 18rem; aspect-ratio: 4/3; overflow: hidden; border-radius: var(--r);
  pointer-events: none; opacity: 0; transform: translate(-50%, -50%) scale(.86) rotate(-3deg);
  transition: opacity .35s var(--ease), transform .5s var(--ease);
  box-shadow: var(--shadow-lg);
}
.sindex__peek.is-on { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0deg); }
.sindex__peek img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 860px) { .sindex__peek { display: none; } }

.scard { display: grid; grid-template-rows: auto 1fr; grid-auto-columns: minmax(0, 1fr);}
.scard > a { display: grid; grid-template-rows: auto 1fr; height: 100%; grid-auto-columns: minmax(0, 1fr);}
.scard__media { position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--surface-2); }
.scard__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,9,13,.05) 38%, rgba(6,9,13,.72)); }
.scard__n {
  position: absolute; left: 1rem; top: 1rem; z-index: 2;
  font: 500 .705rem/1 var(--mono); letter-spacing: .12em;
  background: color-mix(in srgb, var(--accent) 94%, transparent); color: var(--on-accent);
  padding: .38rem .55rem; border-radius: 5px;
}
.scard__logo { position: absolute; right: 1rem; bottom: 1rem; z-index: 2; width: clamp(5rem, 8vw, 6.8rem); }
.scard__logo img { width: 100%; filter: drop-shadow(0 3px 10px rgba(0,0,0,.5)); }
.scard__body { display: flex; flex-direction: column; gap: .75rem; padding: 1.35rem 1.35rem 1.5rem; }
.scard__body h3 {
  font: 600 1.12rem/1.3 var(--disp); letter-spacing: -.016em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: calc(2 * 1.3em);
}
/* Açıklama üç satıra sabitlenir; metin uzunluğu farkı satır yüksekliğini
   oynatmasın diye min-height ile taban ayrılır.
   `:not(.idx)` şart: bu kural eleman adıyla yazıldığı için üstteki küçük
   etiketi (`p.idx`) de yakalıyor, ona hem .9rem punto hem de üç satırlık
   asgari yükseklik dayatıyordu. Etiket bu yüzden başlıkla yarışacak kadar
   büyük görünüyor ve altında boşluk bırakıyordu. */
.scard__body p:not(.idx) {
  color: var(--ink-2); font-size: .9rem; line-height: 1.6;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden; min-height: calc(3 * 1.6em);
}
/* Etiketler tek satırda kalır: en fazla iki tanesi gösterilir, sığmayan
   metin üç nokta ile kısalır. Sarma serbest bırakılınca kart yüksekliği
   sütun genişliğine göre oynuyordu. */
.scard .tagline {
  flex-wrap: nowrap; align-items: center;
  height: 1.9rem; overflow: hidden;
}
.scard .tagline .tag {
  min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.scard .tagline .tag:nth-child(n+3) { display: none; }
.scard__go { margin-top: auto; align-self: flex-start; }

.approach {
  display: grid; gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
.approach li {
  background: var(--paper); padding: 1.6rem 1.4rem 1.75rem;
  display: grid; gap: .6rem; align-content: start;
  transition: background .4s var(--ease); grid-auto-columns: minmax(0, 1fr);}
.approach li:hover { background: var(--surface); }
.approach b { font: 500 .705rem/1 var(--mono); color: var(--accent); letter-spacing: .12em; }
.approach span { font-weight: 600; font-size: 1rem; letter-spacing: -0.014em; }
.approach small { display: block; }

/* rakam bandı */
/* ------------------------------------------------- Genel merkez bloğu
   Asimetrik editöryel kurgu: solda İstanbul merkez binası tam boy, sağda
   dar bir sütunda metin ve tek bir öne çıkan rakam. Fotoğrafın üstüne
   taşan künye kartı, kompozisyonu ızgaradan çıkarıp tasarlanmış gösterir. */

.hq {
  display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-columns: minmax(0, 1fr);
  gap: clamp(1.4rem, 2.6vw, 2.4rem);
  margin-top: clamp(1.6rem, 2.8vw, 2.4rem);
  align-items: stretch;
}
@media (min-width: 1000px) {
  .hq { grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr); }
}

.hq__shot {
  position: relative; margin: 0; overflow: hidden;
  border-radius: var(--r);
  background: var(--surface-2);
  aspect-ratio: 16 / 10;
  /* SAFARI: Kutunun iki cocugu da (gorsel ve kunye) position:absolute,
     yani icerik yuksekligi sifir; yukseklik yalnizca aspect-ratio dan
     geliyordu. Izgara ogesi align-items:stretch ile esnetildiginde
     Safari aspect-ratio yu yok sayip kutuyu sifira dusuruyor —
     iPhone da bolum hic gorunmuyordu. Stretch iptal, alt sinir eklendi. */
  align-self: start;
  min-height: 11rem;
}
@media (min-width: 1000px) { .hq__shot { aspect-ratio: auto; min-height: 30rem; align-self: stretch; } }
/* .px kendi ölçüsünü verir; buradaki height:100% daha yüksek özgüllükte
   olduğu için paralaks katmanının %130 yüksekliğini eziyordu. */
.hq__shot .ph { object-fit: cover; }

/* Künye kartı: fotoğrafın sol alt köşesine oturur, kâğıt yüzeyde durur. */
.hq__tag {
  position: absolute; left: 0; bottom: 0; z-index: 2;
  display: grid; grid-auto-columns: minmax(0, 1fr); gap: .2rem;
  padding: clamp(.9rem, 1.6vw, 1.2rem) clamp(1.1rem, 2vw, 1.6rem);
  background: var(--paper);
  border-radius: 0 var(--r) 0 0;
}
.hq__tag b { font: 600 .95rem/1.3 var(--disp); letter-spacing: -.012em; }
.hq__tag span { font: 400 .72rem/1.35 var(--mono); color: var(--ink-3); }

.hq__side {
  position: relative;
  display: grid; grid-auto-columns: minmax(0, 1fr); gap: 1.15rem;
  align-content: start;
  padding: clamp(1.4rem, 2.4vw, 2rem);
  background: var(--surface); border-radius: var(--r);
}
.hq__no {
  position: absolute; right: clamp(1rem, 2vw, 1.6rem); top: clamp(.8rem, 1.6vw, 1.2rem);
  font: 500 .7rem/1 var(--mono); letter-spacing: .18em; color: var(--ink-3); opacity: .7;
}
.hq__text { color: var(--ink-2); font-size: .95rem; line-height: 1.68; max-width: 34ch; }

/* Tek öne çıkan rakam — İSO tablosu yerine sade bir istihdam göstergesi */
.hq__fig {
  display: grid; grid-auto-columns: minmax(0, 1fr); gap: .3rem;
  padding-top: 1.1rem; border-top: 2px solid var(--ink);
}
.hq__fig b {
  font: 600 clamp(2.6rem, 3.4vw + .6rem, 4rem)/1 var(--disp);
  letter-spacing: -.024em; font-variant-numeric: tabular-nums;
}
.hq__fig > span {
  font: 500 .7rem/1 var(--mono); letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-3);
}

.hq__list { display: grid; grid-auto-columns: minmax(0, 1fr); gap: 0; }
.hq__list li {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .9rem; align-items: baseline;
  padding: .72rem 0; border-bottom: 1px solid var(--line);
}
.hq__list li:first-child { border-top: 1px solid var(--line); }
.hq__list b { font: 600 .86rem/1.3 var(--disp); letter-spacing: -.01em; min-width: 4.6rem; }
.hq__list span { font-size: .85rem; color: var(--ink-3); line-height: 1.5; }

.hq__side .lnk { justify-self: start; margin-top: .2rem; }

/* ------------------------------------------------------- Zaman tüneli
   Yatay ray + yıl şeridi; üstte sayaç ve gezinme, altta ilerleme çubuğu.
   Yerli kaydırma çubuğu gizlendi, yerini ölçülü bir ilerleme göstergesi
   aldı. Odaktaki kart tam opaklıkta, diğerleri hafifçe geri çekilir. */

.tl__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.2rem; flex-wrap: wrap; margin-bottom: 1.1rem;
}

.tl__nav { display: flex; align-items: center; gap: .5rem; flex: none; }
.tl__count {
  font: 500 .72rem/1 var(--mono); letter-spacing: .12em; color: var(--ink-3);
  margin-right: .35rem; font-variant-numeric: tabular-nums;
}
.tl__btn {
  width: 2.5rem; height: 2.5rem; border-radius: 50%;
  border: 1px solid var(--line); background: var(--paper); color: var(--ink-2);
  display: grid; place-items: center;
  transition: background .3s var(--ease), color .3s var(--ease),
              border-color .3s var(--ease), transform .3s var(--ease);
}
.tl__btn .i { font-size: 1.05rem; }
.tl__btn:hover:not([disabled]) { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.tl__btn:active:not([disabled]) { transform: scale(.94); }
.tl__btn[disabled] { opacity: .34; cursor: default; }

.tl__rail {
  display: flex; gap: clamp(1rem, 1.7vw, 1.55rem);
  overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -ms-overflow-style: none;
  padding-bottom: .35rem;
  cursor: grab;
}
.tl__rail::-webkit-scrollbar { display: none; }
/* Sondaki kartlar da sola hizalanabilsin diye rayın sonuna boşluk bırakılır;
   yoksa kaydırma sonunda son kart hiçbir zaman başa gelmiyor ve sayaç
   12/12'ye ulaşamıyordu. */
.tl__rail::after {
  content: ""; flex: none;
  width: max(0px, calc(100% - min(78vw, 21rem) - clamp(1rem, 1.7vw, 1.55rem)));
}
.tl__rail.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
.tl__rail.is-dragging .tl__item { pointer-events: none; }
.tl__rail:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; border-radius: var(--r); }

.tl__item {
  flex: none; width: min(78vw, 21rem); scroll-snap-align: start;
  display: grid; grid-auto-columns: minmax(0, 1fr); gap: .95rem;
  opacity: .55; transition: opacity .45s var(--ease), transform .45s var(--ease);
}
.tl__item.is-on { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .tl__item { transform: scale(.975); transform-origin: bottom left; }
  .tl__item.is-on { transform: none; }
}

/* Kart tıklanabilir olduğunu belli etsin ve basıldığında ANINDA tepki
   versin. Önceden tıklama yalnızca etkin durumu değiştiriyordu; kart
   zaten görünürdeyse ray da kaymadığı için tepkisiz duruyordu. */
.tl__item { cursor: pointer; }
.tl__item:hover { opacity: .8; }
.tl__item.is-on:hover { opacity: 1; }
.tl__item:active { transition-duration: .1s; }
@media (prefers-reduced-motion: no-preference) {
  .tl__item:active { transform: scale(.955); }
  .tl__item.is-on:active { transform: scale(.982); }
}

/* Etkin kart yükselir: görselin çevresinde gölge, künyede vurgu. */
.tl__item .tl__media {
  transition: box-shadow .45s var(--ease);
  box-shadow: 0 0 0 rgba(12, 16, 22, 0);
}
.tl__item.is-on .tl__media { box-shadow: 0 14px 34px -16px rgba(12, 16, 22, .5); }
.tl__y { transition: transform .35s var(--ease), background .35s var(--ease); }
.tl__item.is-on .tl__y { transform: scale(1.06); transform-origin: left bottom; }
.tl__item:not(.is-on) .tl__y { background: color-mix(in srgb, var(--accent) 62%, var(--surface-2)); }

.tl__media {
  position: relative; aspect-ratio: 3/2; overflow: hidden;
  border-radius: var(--r); background: var(--surface-2);
}
.tl__item:hover .ph { transform: scale(1.05); }
.tl__y {
  position: absolute; left: .85rem; bottom: .85rem; z-index: 2;
  background: var(--accent); color: var(--on-accent);
  font: 600 .75rem/1 var(--mono); letter-spacing: .04em;
  padding: .5rem .75rem; border-radius: 99px;
}
.tl__n {
  position: absolute; right: .85rem; top: .8rem; z-index: 2;
  font: 500 .68rem/1 var(--mono); letter-spacing: .1em; color: #fff;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .75);
}
.tl__item h3 { font: 600 1.06rem/1.3 var(--disp); letter-spacing: -.012em; }
.tl__item p { color: var(--ink-2); font-size: .91rem; line-height: 1.6; }

/* İlerleme çubuğu — rayın kaydırma konumunu izler */
.tl__bar {
  position: relative; height: 2px; margin-top: 1.4rem;
  background: var(--line); border-radius: 99px; overflow: hidden;
}
.tl__bar i {
  position: absolute; inset: 0 auto 0 0; display: block;
  width: 18%; border-radius: 99px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transform: translateX(0);
}
@media (prefers-reduced-motion: no-preference) {
  .tl__bar i { transition: transform .28s var(--ease), width .28s var(--ease); }
}

.tl__years { display: flex; gap: .3rem; overflow-x: auto; scrollbar-width: none; padding: 0 0 .2rem; min-width: 0; }
.tl__years::-webkit-scrollbar { display: none; }
.tl__years button {
  flex: none; padding: .48rem .9rem; border-radius: 99px; border: 1px solid transparent;
  background: transparent; font: 500 .75rem/1 var(--mono); letter-spacing: .02em; color: var(--ink-3);
  transition: .3s var(--ease);
}
.tl__years button:hover { color: var(--ink); background: var(--surface-2); }
.tl__years button.is-on { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }

.people { display: grid; gap: clamp(1rem, 2vw, 1.6rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.person__media { position: relative; aspect-ratio: 3/4; overflow: hidden; border-radius: var(--r); background: var(--surface-2); }
.person__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(6,9,13,.7)); }
.person:hover .ph { transform: scale(1.05); }

.person__body { padding-top: 1rem; display: grid; gap: .3rem; grid-auto-columns: minmax(0, 1fr);}
.person__body h3 { font: 600 1.08rem/1.2 var(--disp); letter-spacing: -0.014em; }
.person__body p { font-size: .875rem; color: var(--ink-2); line-height: 1.45; }
.person__body small { font: 400 .77rem/1.4 var(--mono); color: var(--ink-3); }

/* ------------------------------------------------- Organizasyon listesi
   Yöneticiler faaliyet alanına göre gruplanır. Kademe, rozet veya vurgu
   kutusuyla değil yapının kendisiyle okunur: her grubun başlığı, altında
   iki sütunlu isim–ünvan satırları. Yıllık faaliyet raporu düzeni. */

.org { border-top: 2px solid var(--ink); }
.org__g { border-bottom: 1px solid var(--line); }

.org__h {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem 1.5rem; flex-wrap: wrap;
  padding: 1.15rem 0 .65rem;
}
/* Başlık artık küçük bir sektör görseli taşıyabildiği için görsel ve yazı
   tek bir kutuda toplanır; sağdaki bağlantı yerinde kalır. */
.org__ad { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.org__ph {
  flex: 0 0 auto; display: block; width: 4rem; aspect-ratio: 16 / 10;
  border-radius: 7px; overflow: hidden;
  background: color-mix(in srgb, var(--ink) 7%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 12%, transparent);
}
/* Küçük kutuda fotoğraf çamurlaşıyor: hafif açılıp doygunluğu artırılınca
   sektör tek bakışta ayırt ediliyor. */
.org__ph img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: brightness(1.08) saturate(1.12) contrast(1.04);
}
@media (max-width: 560px) {
  .org__ph { width: 3rem; }
}
.org__h h4 {
  font: 500 .72rem/1.3 var(--mono); letter-spacing: .16em; text-transform: uppercase;
  /* Sektörün vurgu rengi mürekkeple karıştırılır: renk okunur, küçük
     puntolu büyük harf metinde kontrast korunur. --org-accent yoksa
     (holding geneli) marka turuncusu kullanılır. */
  /* %60 karışım: en açık vurgu olan sarıda bile zeminle kontrast
     4,77:1 çıkıyor (AA eşiği 4,5). Saf renk, başlıktaki noktada
     korunduğu için kimlik kaybolmuyor. */
  color: color-mix(in srgb, var(--org-accent, var(--accent)) 60%, var(--ink));
}
/* Sektör noktası: çevresinde ince bir çember ve yavaş bir nabız.

   Hem çember hem nabız `box-shadow` ile çiziliyor. Ayrı, konumlandırılmış
   bir halka da denenebilirdi ama nokta satır içi bir `::before`: başlık dar
   ekranda sarınca yeri değişiyor ve mutlak konumlu bir halka hizadan
   kayardı. Gölge noktayı her zaman takip eder, ayrıca yerleşimi hiç
   etkilemez — kutunun dışına taşar, satır yüksekliğini değiştirmez. */
.org__h h4::before {
  content: ""; display: inline-block; vertical-align: middle;
  width: .5rem; height: .5rem; margin-right: .6rem; border-radius: 50%;
  background: var(--org-accent, var(--accent));
  --org-halka: color-mix(in srgb, var(--org-accent, var(--accent)) 38%, transparent);
  --org-nabiz: color-mix(in srgb, var(--org-accent, var(--accent)) 42%, transparent);
  box-shadow: 0 0 0 1px var(--org-halka);
  animation: org-nabiz 2.8s var(--ease) infinite;
}
/* Nabız en geniş hâlinde .4rem: noktayla yazı arasındaki .6rem boşluğu
   aşmıyor, dolayısıyla harflere değmiyor. */
@keyframes org-nabiz {
  0%   { box-shadow: 0 0 0 1px var(--org-halka), 0 0 0 0 var(--org-nabiz); }
  70%  { box-shadow: 0 0 0 1px var(--org-halka), 0 0 0 .4rem transparent; }
  100% { box-shadow: 0 0 0 1px var(--org-halka), 0 0 0 0 transparent; }
}
/* Hepsi aynı anda atınca göz tırmalıyor; küçük gecikmeler dalgayı dağıtıyor. */
.org__g:nth-child(2n) .org__h h4::before { animation-delay: .7s; }
.org__g:nth-child(3n) .org__h h4::before { animation-delay: 1.4s; }

@media (prefers-reduced-motion: reduce) {
  /* Hareket kapalıyken çember kalır, nabız durur. */
  .org__h h4::before { animation: none; }
}
.org__link, .org__tag {
  font: 400 .71rem/1 var(--mono); letter-spacing: .06em; color: var(--ink-3);
  display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap;
}
.org__link { transition: color .3s var(--ease); }
.org__link:hover { color: var(--accent-2); }
.org__link .i { font-size: .85em; }

.org__list { display: grid; grid-auto-columns: minmax(0, 1fr); }
.org__list li {
  display: grid; align-items: baseline; gap: .2rem 1.6rem;
  grid-template-columns: minmax(0, 1fr);
  padding: .62rem 0 .78rem;
}
@media (min-width: 780px) {
  .org__list li { grid-template-columns: minmax(0, 16rem) minmax(0, 1fr); }
}
.org__list li + li { border-top: 1px solid var(--line-2); }
.org__list strong {
  font-family: var(--disp); font-weight: 600; font-size: 1rem; letter-spacing: -.012em;
}
.org__list span { color: var(--ink-2); font-size: .93rem; line-height: 1.55; }

/* En üstteki grup holding geneli; bir tık ağırlıklı */
.org__g:first-child .org__h { padding-top: 1.35rem; }
.org__g:first-child .org__list strong { font-size: 1.06rem; }


/* ======================================================================
   POLİTİKA KARTLARI

   Önce tek parça, saç teli çizgilerle bölünmüş düz bir bloktu. Artık her
   politika kendi kartında: köşede dolu ikon çipi, üstte büyüyen vurgu
   çizgisi, üzerine gelince derinlik kazanan yumuşak bir ışık.
   ====================================================================== */
.policy {
  display: grid; gap: clamp(.9rem, 1.6vw, 1.35rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}
.policy article {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(1.7rem, 2.6vw, 2.5rem);
  display: grid; gap: .8rem; align-content: start;
  transition: border-color .45s var(--ease), box-shadow .45s var(--ease),
              transform .45s var(--ease);
}
/* Sağ üstten yayılan vurgu ışığı */
.policy article::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(120% 82% at 100% 0%,
    color-mix(in srgb, var(--accent) 13%, transparent), transparent 62%);
  opacity: 0; transition: opacity .5s var(--ease);
}
/* Üst kenarda kartın tamamına uzanan çizgi */
.policy article::after {
  content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 2.6rem;
  background: var(--accent); transition: width .55s var(--ease);
}
.policy article:hover {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
  box-shadow: 0 20px 46px -26px rgba(12, 16, 22, .42);
  transform: translateY(-3px);
}
.policy article:hover::before { opacity: 1; }
.policy article:hover::after { width: 100%; }

.policy__top {
  display: flex; align-items: center; gap: .9rem;
  margin-bottom: .35rem;
}
.policy__chip {
  flex: none; display: grid; place-items: center;
  width: 2.7rem; height: 2.7rem; border-radius: 14px; font-size: 1.2rem;
  background: color-mix(in srgb, var(--accent) 13%, transparent);
  color: var(--accent);
  transition: background .4s var(--ease), color .4s var(--ease), transform .45s var(--ease);
}
.policy article:hover .policy__chip {
  background: var(--accent); color: var(--on-accent); transform: rotate(-6deg);
}
.policy b {
  font: 500 .705rem/1 var(--mono); color: var(--ink-3); letter-spacing: .16em;
  transition: color .4s var(--ease);
}
.policy article:hover b { color: var(--accent); }

.policy h3 { font: 600 1.3rem/1.18 var(--disp); letter-spacing: -0.016em; }
.policy p { color: var(--ink-2); font-size: .95rem; line-height: 1.68; }
.policy p + p { margin-top: .2rem; }

.policy__list {
  display: grid; gap: .6rem; margin-top: .5rem;
  padding-top: .9rem; border-top: 1px solid var(--line-2);
}
.policy__list li {
  position: relative; padding-left: 1.25rem;
  color: var(--ink-2); font-size: .92rem; line-height: 1.6;
}
.policy__list li::before {
  content: ""; position: absolute; left: 0; top: .6em;
  width: 6px; height: 6px; border-radius: 2px;
  background: var(--accent); transform: rotate(45deg);
}

@media (prefers-reduced-motion: reduce) {
  .policy article, .policy article::after, .policy__chip { transition: none; }
  .policy article:hover { transform: none; }
}

/* ----------------------------------------------------------------------
   Görselli politika kartları (Kurumsal › Politikalarımız). Her kartın
   üstünde politikayı anlatan mermer ocağı illüstrasyonu durur; görselin
   alt kenarı maskeyle kart zeminine erir, numara ve ikon görselin üstünde
   buzlu cam bir rozet olarak taşınır. Metin bloğu görselin altına biner.
   ---------------------------------------------------------------------- */
.policy--visual article { padding: 0; gap: 0; }
.policy__fig {
  position: relative; margin: 0; aspect-ratio: 16 / 10; overflow: hidden;
  background: #F3EFE9;                       /* illüstrasyonun kendi zemini */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 74%, rgba(0, 0, 0, .5) 88%, rgba(0, 0, 0, 0) 100%);
          mask-image: linear-gradient(180deg, #000 0%, #000 74%, rgba(0, 0, 0, .5) 88%, rgba(0, 0, 0, 0) 100%);
}
.policy__fig img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.001); transition: transform 1.2s var(--ease), filter .5s var(--ease);
}
.policy--visual article:hover .policy__fig img { transform: scale(1.045); }
.policy--visual .policy__top {
  position: absolute; top: 1rem; left: 1rem; z-index: 2; margin: 0;
  gap: .55rem; padding: .3rem .85rem .3rem .3rem; border-radius: 999px;
  background: rgba(255, 255, 255, .8); border: 1px solid rgba(12, 16, 22, .06);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 8px 22px -14px rgba(12, 16, 22, .5);
}
.policy--visual .policy__chip { width: 2.1rem; height: 2.1rem; border-radius: 10px; font-size: 1rem; }
.policy--visual b { color: var(--ink-2); }
.policy__body {
  position: relative; z-index: 1; margin-top: -.9rem;
  padding: 0 clamp(1.4rem, 2.2vw, 2rem) clamp(1.5rem, 2.2vw, 2.1rem);
  display: grid; gap: .7rem; align-content: start;
}
/* Koyu temada illüstrasyon hafifçe kısılır, rozet koyu cama döner */
[data-theme="dark"] .policy__fig { background: #171D26; }
[data-theme="dark"] .policy__fig img { filter: brightness(.84) saturate(.95); }
[data-theme="dark"] .policy--visual .policy__top {
  background: rgba(23, 29, 38, .74); border-color: rgba(255, 255, 255, .09);
}
@media (prefers-reduced-motion: reduce) {
  .policy__fig img { transition: none; }
  .policy--visual article:hover .policy__fig img { transform: none; }
}

/* ================================================ 11. Galeri ve ışık kutusu */

.filters { display: flex; flex-wrap: wrap; gap: .45rem; }
.gcount { font: 500 .755rem/1 var(--mono); color: var(--ink-3); letter-spacing: .08em; }

/* ------------------------------------------- Galeri filtre çubuğu (yapışkan)
   Kategori düğmeleri kaydırma boyunca ekranda kalır; uzun bir ızgarada
   filtre değiştirmek için başa dönmek gerekmiyor.

   Bölüm çubuğunun (.secnav) TAM ALTINA oturur. İki ölçü de betikle yazılıyor
   (bkz. site.js "header"); betik çalışmazsa yedek değerler devreye giriyor —
   --secnav-h için 0 değil 3.2rem, yoksa çubuk bölüm çubuğunun üstüne biner.

   z-index bölüm çubuğunun (160) ALTINDA: ikisi bir araya gelirse üstte
   kalması gereken bölüm çubuğu. Işık kutusu 250 ile ikisinin de üstünde. */
.galbar {
  position: sticky;
  top: calc(var(--site-h, 7.2rem) + var(--secnav-h, 3.2rem));
  z-index: 150;
  margin-bottom: 1.6rem; padding: .7rem 0;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid var(--line-2);
  transition: top .5s var(--ease);
}
/* Başlık kaydırmada gizlenince çubuk onun payı kadar yukarı çıkar —
   .secnav ile aynı davranış, aynı süre. */
.site.is-hidden ~ main .galbar { top: var(--secnav-h, 3.2rem); }

/* Düğmeler HER genişlikte tek satır. Sarmaya bırakılınca 390px'te yedi
   düğme dört satıra çıkıyor ve çubuk 178px oluyordu; başlık yığınıyla
   birlikte ekranın %40'ı gidiyordu. Kırılım koymak da yetmiyor: 860–1180px
   arasında düğmeler iki satıra sarıyor. Bunun yerine sarma tamamen kapalı,
   taşan kısım yatay kayıyor — bölüm çubuğunun kendi şeridiyle aynı çözüm.
   Geniş ekranda taşma olmadığı için kaydırma kendiliğinden devre dışı. */
.galbar { flex-wrap: nowrap; gap: .9rem; }
.galbar .filters {
  flex: 1 1 auto; min-width: 0;
  flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain;
  scrollbar-width: none;
  /* Kesme sınırı sert bir kırpma gibi durmasın: sağ uçta yumuşak geçiş
     "devamı var" diyor. Taşma yokken şerit zaten boş alana denk geldiği
     için görünmüyor. */
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 1.7rem), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 1.7rem), transparent);
}
.galbar .filters::-webkit-scrollbar { display: none; }
.galbar .chip { flex: none; }
.galbar .gcount { flex: none; }

.gal { columns: 1; column-gap: clamp(.7rem, 1.4vw, 1.15rem); }
@media (min-width: 560px) { .gal { columns: 2; } }
@media (min-width: 940px) { .gal { columns: 3; } }
@media (min-width: 1300px) { .gal { columns: 4; } }
.gal__item { break-inside: avoid; margin-bottom: clamp(.7rem, 1.4vw, 1.15rem); }
.gal__item.is-off { display: none; }
.gal__btn { display: block; width: 100%; position: relative; overflow: hidden; border-radius: var(--r); background: var(--surface-2); }
.gal__btn img { width: 100%; height: auto; display: block; transition: transform .9s var(--ease), filter .5s var(--ease); }
.gal__btn:hover img { transform: scale(1.06); }
.gal__ov {
  position: absolute; inset: auto 0 0 0; padding: 2.6rem 1rem 1rem;
  background: linear-gradient(180deg, transparent, rgba(6,9,13,.88));
  color: #fff; display: grid; gap: .2rem; text-align: left;
  opacity: 0; transform: translateY(10px); transition: .5s var(--ease); grid-auto-columns: minmax(0, 1fr);}
.gal__btn:hover .gal__ov, .gal__btn:focus-visible .gal__ov { opacity: 1; transform: none; }
.gal__ov b { font: 600 .93rem/1.25 var(--sans); }
.gal__ov span { font: 400 .71rem/1.3 var(--mono); color: rgba(255,255,255,.7); letter-spacing: .05em; }
.gal__n { position: absolute; left: .85rem; top: .85rem; font: 500 .67rem/1 var(--mono); color: #fff; letter-spacing: .12em; text-shadow: 0 1px 8px rgba(0,0,0,.7); }
.gal__empty { padding: 3rem 0; text-align: center; color: var(--ink-3); }

/* eşit yükseklikli kare ızgarası (sektör / marka sayfaları) */
/* Künye kutunun İÇİNDE kalır. Önce düğmede `height: 100%` vardı; ızgara
   satırı figürü künye dâhil yüksekliğe göre ölçtüğü için düğme figürün
   tamamını kaplıyor, künye de kutunun dışına taşıp bir sonraki fotoğrafın
   altında kalıyordu (mobilde tek sütun olduğu için görünür hâle geldi).
   Figür artık esnetilmez; yükseklik içerikten gelir, oran düğmeyi belirler. */
.shotgrid > figure { align-self: start; }
.shotgrid .gal__btn { aspect-ratio: 4 / 3; }
/* Künyesiz ızgaralarda (sektör ve marka sayfaları) düğme doğrudan ızgara
   öğesi; orada eşit yükseklik davranışı korunur. */
.shotgrid > .gal__btn { height: 100%; }
.shotgrid .gal__btn img { width: 100%; height: 100%; object-fit: cover; }

/* --------------------------------------------------------- Işık kutusu
   Alt kontrol çubuğu her ekranda görünür: gezinme, slayt gösterisi,
   çerçeve önizlemesi (serbest / yatay / dikey) ve uyum (sığdır / doldur).
   Yan oklar yalnızca geniş ekranda; dar ekranda çubuktakiler kullanılır. */

.lightbox {
  position: fixed; inset: 0; z-index: 250;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%);
  display: grid; grid-template-rows: 1fr auto; align-items: center; justify-items: center;
  padding: clamp(3.2rem, 7vh, 4.5rem) clamp(.7rem, 3vw, 2.5rem) clamp(.7rem, 2vh, 1.2rem);
  /* Üst pay kapatma düğmesinin kendi ölçüsünden türetilir; düğmenin bittiği
     yerin altından başlar. Sabit bir clamp ile 7vh düşük ekranlarda alt
     sınıra (3.2rem = 51px) iniyor, düğme ise 72px'de bitiyordu: geniş ama
     kısa pencerelerde (ör. 1280×700) düğme görselin sağ üst köşesine
     biniyordu. */
  padding-top: calc(clamp(.7rem, 2vw, 1.6rem) + 2.9rem + .7rem);
  padding-bottom: max(clamp(.7rem, 2vh, 1.2rem), env(safe-area-inset-bottom));
  animation: fade .3s var(--ease);
}
@keyframes fade { from { opacity: 0; } }

/* Sahnenin kullanabileceği yükseklik = ekran − çevredeki parçalar.
   `--lb-cevre` o parçaların toplamı: üst pay, künye, denetim çubuğu ve
   aralarındaki boşluklar. Kısa ekranda bunlar küçüldüğü için değer orada
   yeniden yazılıyor (bkz. @media (max-height: 560px)). */
.lightbox { --lb-cevre: 14rem; }
.lightbox__fig {
  display: grid; gap: .85rem; justify-items: center; align-content: center;
  max-width: min(100%, 1200px); min-height: 0; width: 100%;
}
.lightbox__stage {
  display: grid; place-items: center;
  width: 100%; min-height: 0; overflow: hidden; border-radius: var(--r);
}
/* İkinci `max-height` satırı `svh` destekleyen tarayıcılarda kazanır;
   desteklemeyenler onu yok sayıp `vh` olan ilk satırda kalır. Mobilde
   `svh` önemli: adres çubuğu görünürken `vh` ekrandan daha uzun oluyor. */
.lightbox__stage img {
  max-width: 100%;
  max-height: min(72vh, 900px, calc(100vh - var(--lb-cevre)));
  max-height: min(72svh, 900px, calc(100svh - var(--lb-cevre)));
  width: auto; height: auto; object-fit: contain;
  border-radius: var(--r); box-shadow: var(--shadow-lg);
}
/* Çerçeve önizlemesi: yatay ve dikey ekran oranını taklit eder */
.lightbox[data-frame="wide"] .lightbox__stage,
.lightbox[data-frame="tall"] .lightbox__stage {
  background: var(--surface-2); box-shadow: var(--shadow-lg);
}
/* Yatay çerçeve GENİŞLİKTEN sürülür, yükseklik orandan gelir; bu yüzden
   genişliğe ayrıca bir tavan konuyor: kalan yüksekliğin 16/9 karşılığı.
   Böylece oran hiç bozulmadan kutu asla taşmıyor. (Önce yalnız `min(100%,
   1100px)` vardı ve 1440×900'de bile kutu 619px çıkıp künyeye değiyordu;
   yatay tutulan telefonda ise 449px'e çıkıp çubuğu tamamen örtüyordu.) */
.lightbox[data-frame="wide"] .lightbox__stage {
  aspect-ratio: 16 / 9;
  width: min(100%, 1100px, calc((100vh - var(--lb-cevre)) * 16 / 9));
  width: min(100%, 1100px, calc((100svh - var(--lb-cevre)) * 16 / 9));
}
/* Dikey çerçeve de yatay gibi GENİŞLİKTEN sürülür. Önce yükseklikten
   sürülüyordu ve genişlik oranla türediği için ekranı aşabiliyordu:
   430×932'de kutu 435px'e çıkıp 390px'lik alana sığmıyor, iki yandan
   2'şer piksel taşıyordu. Genişlik sürücü olunca hem ekran hem yükseklik
   bütçesi aynı anda gözetiliyor ve oran hiç bozulmuyor. */
.lightbox[data-frame="tall"] .lightbox__stage {
  aspect-ratio: 3 / 4; height: auto;
  width: min(100%, 615px, calc((100vh - var(--lb-cevre)) * 3 / 4));
  width: min(100%, 615px, calc((100svh - var(--lb-cevre)) * 3 / 4));
}
.lightbox[data-frame="wide"] .lightbox__stage img,
.lightbox[data-frame="tall"] .lightbox__stage img {
  width: 100%; height: 100%; max-height: none; border-radius: 0; box-shadow: none;
}
/* Uyum: sığdır / doldur */
.lightbox[data-fit="cover"] .lightbox__stage img { object-fit: cover; }

/* Serbest çerçevede "Doldur" ölü bir düğmeydi. Sebep: serbest modda sahne
   görselin KENDİ oranında ölçülüyor, yani kutu ile görsel aynı orana sahip
   oluyor ve `object-fit: cover` kırpacak bir şey bulamıyor — ölçümde kutu
   1027×577, doğal oran 1.778; ikisi birebir aynı, dolayısıyla sığdır ile
   doldur aynı kareyi veriyordu. (Yatay ve Dikey'de düğme çalışıyordu,
   çünkü orada sahnenin sabit bir oranı var.)

   Doldur seçilince sahne, önizleme alanının tamamını kaplayan gerçek bir
   çerçeveye dönüşüyor; görsel de onu kırpılarak dolduruyor. Yatay/Dikey'den
   farkı: onlar sabit bir oranı (16/9, 3/4) taklit eder, bu ise ekranın
   kendi oranını alır — telefonda uzun, geniş ekranda enli olur. */
.lightbox[data-fit="cover"]:not([data-frame="wide"]):not([data-frame="tall"]) .lightbox__stage {
  position: relative;
  height: min(72vh, 900px, calc(100vh - var(--lb-cevre)));
  height: min(72svh, 900px, calc(100svh - var(--lb-cevre)));
  background: var(--surface-2); box-shadow: var(--shadow-lg);
}
/* Kutu ızgaraya değil, sahnenin kendisine sabitleniyor. `height: 100%` ile
   denendi ama tutmadı: sahne `place-items: center` ile hizalanan bir ızgara
   ve görsel `width`/`height` niteliklerinden gelen bir en-boy oranı taşıyor;
   yüzde yükseklik çözülmeyip yükseklik orandan geliyordu (ölçüm: sahne
   1200×577 iken görsel 1200×675 çıkıp sahneyi taşıyordu). */
.lightbox[data-fit="cover"]:not([data-frame="wide"]):not([data-frame="tall"]) .lightbox__stage img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; max-width: none; max-height: none;
  border-radius: 0; box-shadow: none;
}

.lightbox figcaption {
  display: grid; gap: .3rem; text-align: center; color: var(--ink); max-width: 60ch;
}
.lightbox figcaption b { font: 600 1rem/1.35 var(--sans); }
.lightbox figcaption span { font: 400 .78rem/1.45 var(--mono); color: var(--ink-3); }
.lightbox figcaption em { font: 500 .72rem/1 var(--mono); font-style: normal; color: var(--accent-2); letter-spacing: .12em; }

/* Kapat düğmesi */
.lightbox__x {
  position: absolute; top: clamp(.7rem, 2vw, 1.6rem); right: clamp(.7rem, 2vw, 1.6rem);
  width: 2.9rem; height: 2.9rem; border-radius: 50%;
  border: 1px solid var(--line); background: var(--paper); color: var(--ink);
  display: grid; place-items: center; box-shadow: var(--shadow-sm);
  transition: .3s var(--ease);
}
.lightbox__x:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* Yan oklar — yalnızca geniş ekranda */
.lightbox__nav { display: none; }
@media (min-width: 900px) {
  .lightbox__nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    display: grid; place-items: center;
    width: 3rem; height: 3rem; border-radius: 50%;
    border: 1px solid var(--line); background: var(--paper); color: var(--ink);
    box-shadow: var(--shadow-sm); transition: .3s var(--ease);
  }
  .lightbox__nav:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); transform: translateY(-50%) scale(1.06); }
  .lightbox__nav--prev { left: clamp(.7rem, 2vw, 1.7rem); }
  .lightbox__nav--next { right: clamp(.7rem, 2vw, 1.7rem); }
}

/* Alt kontrol çubuğu */
.lightbox__bar {
  display: flex; align-items: center; justify-content: center; gap: .5rem 1rem;
  flex-wrap: wrap; margin-top: .9rem;
}
.lightbox__grp { display: flex; align-items: center; gap: .4rem; }
.lightbox__grp--seg {
  gap: 0; padding: .2rem; border-radius: 99px;
  background: var(--surface); border: 1px solid var(--line-2);
}
.lb__b {
  width: 2.7rem; height: 2.7rem; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--line); background: var(--paper); color: var(--ink);
  transition: .28s var(--ease);
}
.lb__b .i { font-size: 1.05rem; }
.lb__b:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.lb__b--play[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.lb__s {
  padding: .5rem .85rem; border-radius: 99px; min-height: 2.75rem;
  font: 500 .73rem/1 var(--mono); letter-spacing: .02em; color: var(--ink-2);
  transition: .25s var(--ease);
}
.lb__s:hover { color: var(--ink); }
.lb__s.is-on { background: var(--ink); color: var(--paper); }

@media (max-width: 560px) {
  /* Üst pay kapatma düğmesinin ALTINDAN başlar. 3.6rem iken düğmenin tam
     bittiği yere denk geliyordu (11.2 + 46.4 = 57.6px) ve görselin üst
     kenarı düğmeye değiyordu. Pay düğmenin kendi ölçüsünden türetiliyor;
     düğme büyürse boşluk da büyür. */
  /* Sahne ölçüsü artık sabit `52vh`/`50vh` ile değil, ortak yükseklik
     bütçesiyle sürülüyor. O sabitler bağlayıcı olduğu için görseller
     olduğundan küçük kalıyordu: 390×844'te künye + çubuk + paylar 272px
     yer tutarken görsele yalnızca 439px ayrılıyor, 150px boşa gidiyordu.

     22rem (352px) dar ekranın en kötü hâlini karşılıyor. En kötü hâl 35
     görselin tamamı taranarak bulundu: 360px genişlikte denetim çubuğu üç
     satıra sarıyor (166px) ve en uzun künye iki satıra çıkıyor (75px);
     toplam çevre 341px. 21rem denenmişti, o künyede 5px taşıyordu. */
  .lightbox {
    padding-top: calc(clamp(.7rem, 2vw, 1.6rem) + 2.9rem + .85rem);
    /* Yanlarda nefes payı. Önce .7rem (11px) vardı; görsel neredeyse
       ekran kenarına dayanıyor ve kadraj kenarlardan kesilmiş gibi
       duruyordu. Pay ekranla ölçekleniyor: 360px'te 18px, 430px'te 21px. */
    padding-inline: clamp(1.1rem, 5vw, 1.6rem);
    --lb-cevre: 22rem;
  }
  .lightbox figcaption b { font-size: .93rem; }
  .lightbox figcaption span { font-size: .72rem; }
  .lightbox__bar { gap: .45rem .6rem; }
  /* Dokunma hedefi 44 px'in altına düşmesin */
  .lb__s { padding: .55rem .72rem; font-size: .69rem; min-height: 2.75rem; }
  .lb__b { width: 2.9rem; height: 2.9rem; }
}

/* ---------------------------------------------- Kısa ekran (yatay telefon)
   Telefon yan çevrildiğinde yükseklik ~390px'e düşüyor ama genişlik 850px
   oluyor; yukarıdaki `max-width: 560px` kırılımı devreye girmiyor. Ölçüt
   genişlik değil YÜKSEKLİK olmalı.

   Ölçümde (849×392) üç ayrı çakışma vardı:
     · künye denetim çubuğunun üstüne biniyordu (7008px² kesişim),
     · "Yatay" çerçevesi 16/9 oranını GENİŞLİKTEN türettiği için 449px
       yüksekliğe çıkıp çubuğu tamamen örtüyordu (22554px²),
     · sahne kapatma düğmesinin altına giriyordu.

   Çözüm: bu boyda çerçeve yükseklikten türetilir (genişlik orandan gelir)
   ve çevredeki parçalar küçültülür. 10.5rem, üst pay + künye + çubuk +
   boşlukların toplamı; sahneye kalan yer bundan sonrası. */
@media (max-height: 560px) {
  .lightbox {
    padding-top: calc(clamp(.4rem, 1.6vh, .8rem) + 2.3rem + .5rem);
    padding-bottom: max(.45rem, env(safe-area-inset-bottom));
  }
  .lightbox__x {
    width: 2.3rem; height: 2.3rem;
    top: clamp(.4rem, 1.6vh, .8rem); right: clamp(.5rem, 1.6vw, 1rem);
  }
  .lightbox__fig { gap: .45rem; }

  /* Çevredeki parçalar küçüldü, dolayısıyla sahneye kalan pay büyüdü.
     Ölçüler yukarıdaki ortak kurallardan geliyor; burada yalnız bütçe
     yeniden yazılıyor. */
  .lightbox { --lb-cevre: 10.5rem; }

  .lightbox figcaption { gap: .1rem; }
  .lightbox figcaption b { font-size: .84rem; }
  .lightbox figcaption span { font-size: .67rem; }
  .lightbox__bar { gap: .3rem .45rem; }
  .lb__s { padding: .4rem .6rem; font-size: .66rem; min-height: 2.1rem; }
  .lb__b { width: 2.3rem; height: 2.3rem; }
  /* Yan oklar bu boyda sahnenin üstüne biniyor; çubuktakiler yeterli. */
  .lightbox__nav { display: none; }
}

/* ============================================================ 12. Gündem */

.nlist { border-top: 1px solid var(--line); }
.nlist__row { position: relative; border-bottom: 1px solid var(--line); }
.nlist__row::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 8%, transparent), transparent 50%);
  opacity: 0; transition: opacity .5s var(--ease);
}
.nlist__row:hover::before { opacity: 1; }
.nlist__row > a {
  position: relative; z-index: 1;
  display: grid; gap: .6rem 1.7rem; padding: clamp(1.35rem, 2.4vw, 2.1rem) 0;
  grid-template-columns: minmax(0, 1fr);
  transition: padding-left .5s var(--ease);
}
@media (min-width: 900px) {
  .nlist__row > a { grid-template-columns: 8.5rem minmax(0, 1fr) auto; align-items: start; }
  .nlist__row > a:hover { padding-left: 1.1rem; }
}
.nlist__date { font: 500 .755rem/1.4 var(--mono); color: var(--ink-3); letter-spacing: .04em; }
.nlist__main { display: grid; gap: .5rem; grid-auto-columns: minmax(0, 1fr);}
.nlist__cat { font: 500 .69rem/1 var(--mono); letter-spacing: .13em; text-transform: uppercase; color: var(--accent-2); }
.nlist__t { font: 600 clamp(1.02rem, .7vw + .6rem, 1.24rem)/1.34 var(--disp); letter-spacing: -.014em; text-wrap: pretty; transition: color .4s var(--ease); }
.nlist__row:hover .nlist__t { color: var(--accent-2); }
.nlist__ex { color: var(--ink-2); font-size: .95rem; line-height: 1.6; max-width: 62ch; }
.nlist__src { font: 400 .735rem/1 var(--mono); color: var(--ink-3); letter-spacing: .05em; }
.nlist__thumb { display: none; }
@media (min-width: 900px) {
  .nlist__thumb { display: block; width: 9.5rem; aspect-ratio: 4/3; overflow: hidden; border-radius: var(--r-sm); background: var(--surface-2); }
  .nlist__row:hover .nlist__thumb .ph { transform: scale(1.08); }
}

.ncard { display: grid; gap: 1rem; align-content: start; grid-auto-columns: minmax(0, 1fr);}
.ncard__media { position: relative; aspect-ratio: 16/10; overflow: hidden; border-radius: var(--r); background: var(--surface-2); }
.ncard:hover .ph { transform: scale(1.06); }
.ncard__cat {
  position: absolute; left: .9rem; top: .9rem; z-index: 2;
  background: color-mix(in srgb, var(--paper) 92%, transparent); color: var(--ink);
  backdrop-filter: blur(8px);
  font: 500 .67rem/1 var(--mono); letter-spacing: .1em; padding: .42rem .6rem; border-radius: 99px;
}
.ncard h3 { font: 600 1.16rem/1.18 var(--disp); letter-spacing: -0.014em; transition: color .35s var(--ease); }
.ncard:hover h3 { color: var(--accent-2); }
.ncard p { color: var(--ink-2); font-size: .93rem; line-height: 1.58; }
.ncard time { font: 500 .735rem/1 var(--mono); color: var(--ink-3); letter-spacing: .05em; }

.article { max-width: 45rem; margin-inline: auto; }
.article__meta { display: flex; flex-wrap: wrap; gap: 1.6rem 2.6rem; padding-bottom: 1.7rem; border-bottom: 1px solid var(--line); margin-bottom: 2.3rem; }
.article__meta div b { display: block; font: 500 .67rem/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.article__meta div span { display: block; margin-top: .4rem; font-weight: 600; font-size: .93rem; }
.article__body { font-size: 1.11rem; line-height: 1.78; color: var(--ink-2); max-width: 66ch; }
.article__body > p + p { margin-top: 1.3em; }
.article__body p:first-child { font-size: 1.22rem; line-height: 1.62; color: var(--ink); font-weight: 500; letter-spacing: -.012em; }
.article figure { margin: 2.8rem 0; display: grid; gap: .85rem; grid-auto-columns: minmax(0, 1fr);}
.article figure img { width: 100%; border-radius: var(--r); }
.article figcaption { font: 400 .845rem/1.6 var(--sans); color: var(--ink-3); display: grid; gap: .3rem; grid-auto-columns: minmax(0, 1fr);}
.article figcaption b { font-weight: 500; color: var(--ink-2); }
.article figcaption a { color: var(--accent-2); border-bottom: 1px solid var(--line); }

.shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 8rem), 1fr)); gap: .65rem; margin-top: 1.3rem; }
.shots button { position: relative; aspect-ratio: 4/3; overflow: hidden; border-radius: var(--r-sm); background: var(--surface-2); }
.shots img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.shots button:hover img { transform: scale(1.09); }
.shots b { position: absolute; left: .55rem; top: .5rem; font: 500 .65rem/1 var(--mono); color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.8); }

.srcbox { border: 1px solid var(--line); border-radius: var(--r); padding: clamp(1.4rem, 2.4vw, 2.1rem); display: grid; gap: 1rem; background: var(--surface); grid-auto-columns: minmax(0, 1fr);}
.srcbox p { color: var(--ink-2); font-size: .95rem; }
.srcbox__links { display: flex; flex-wrap: wrap; gap: .7rem; }

.article__nav { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; margin-top: 2.8rem; padding-top: 1.9rem; border-top: 1px solid var(--line); }
@media (min-width: 700px) { .article__nav { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.article__nav a { display: grid; gap: .45rem; padding: 1.1rem 1.25rem; border: 1px solid var(--line-2); border-radius: var(--r); transition: .4s var(--ease); grid-auto-columns: minmax(0, 1fr);}
.article__nav a:hover { border-color: var(--accent); background: var(--surface); transform: translateY(-3px); }
.article__nav b { font: 500 .69rem/1 var(--mono); letter-spacing: .13em; color: var(--ink-3); }
.article__nav span { font-family: var(--disp); font-weight: 600; font-size: .98rem; line-height: 1.25; letter-spacing: -0.014em; }
.article__nav .is-next { text-align: right; }

/* ================================================= 13. Marka, film, katalog */

.logogrid { display: grid; gap: clamp(1rem, 2vw, 1.55rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.logocard { border: 1px solid var(--line-2); border-radius: var(--r); overflow: hidden; display: grid; transition: .45s var(--ease); grid-auto-columns: minmax(0, 1fr);}
.logocard:hover { border-color: var(--accent); transform: translateY(-4px); box-shadow: var(--shadow); }
.logocard__view { display: grid; place-items: center; padding: clamp(1.7rem, 3vw, 2.5rem); min-height: 8.5rem; grid-auto-columns: minmax(0, 1fr);}
.logocard__view img { width: min(100%, 13rem); max-height: 5.5rem; object-fit: contain; }
.logocard__view--l { background: #F2F4F7; }
.logocard__view--d { background: #0A0D12; }
.logocard__body { padding: 1.1rem 1.2rem 1.25rem; border-top: 1px solid var(--line-2); display: grid; gap: .55rem; background: var(--paper); grid-auto-columns: minmax(0, 1fr);}
.logocard__body b { font-family: var(--disp); font-weight: 600; font-size: .98rem; letter-spacing: -0.014em; }
.logocard__body small { font: 400 .73rem/1.4 var(--mono); color: var(--ink-3); }
.logocard__act { display: flex; gap: 1rem; margin-top: .2rem; }
.logocard__act a { font: 500 .77rem/1 var(--mono); color: var(--ink-2); border-bottom: 1px solid var(--line); padding-bottom: .28rem; letter-spacing: .04em; transition: .3s var(--ease); }
.logocard__act a:hover { color: var(--accent-2); border-color: var(--accent); }

.film { position: relative; display: grid; gap: .95rem; grid-auto-columns: minmax(0, 1fr);}
.film__stage { position: relative; aspect-ratio: 16/9; overflow: hidden; border-radius: var(--r); background: #000; }
.film__stage img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease), opacity .35s; }
.film:hover .film__stage img { transform: scale(1.05); }
.film__stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Oynatma kontrolü minimal: ince halkalı küçük bir daire, üstünde hafif
   bir karartma yok denecek kadar az. "Tıklayınca yüklenir" notu ortadan
   alınıp kartın sağ alt köşesine küçük bir etiket olarak yerleştirildi. */
.film__play {
  position: absolute; inset: 0; z-index: 2;
  display: grid; place-items: center;
  background: linear-gradient(180deg, rgba(6, 9, 13, .06), rgba(6, 9, 13, .28));
  transition: background .4s var(--ease);
  grid-auto-columns: minmax(0, 1fr);
}
.film__play:hover { background: linear-gradient(180deg, rgba(6, 9, 13, .1), rgba(6, 9, 13, .38)); }
.film__disc {
  display: grid; place-items: center;
  width: 3rem; aspect-ratio: 1; border-radius: 50%;
  background: rgba(10, 13, 18, .55);
  border: 1px solid rgba(255, 255, 255, .75);
  color: #fff; padding-left: .1em;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: background .35s var(--ease), color .35s var(--ease),
              border-color .35s var(--ease), transform .35s var(--ease);
  grid-auto-columns: minmax(0, 1fr);
}
.film__disc .i { font-size: .95rem; }
.film__play:hover .film__disc,
.film__play:focus-visible .film__disc {
  background: var(--accent); border-color: var(--accent); color: #0C1016; transform: scale(1.08);
}
/* Not: kartın sağ alt köşesinde, küçük ve sessiz */
.film__play em {
  position: absolute; right: .7rem; bottom: .65rem;
  font-style: normal; font: 500 .6rem/1 var(--mono);
  letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255, 255, 255, .82);
  background: rgba(10, 13, 18, .5);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  padding: .34rem .5rem; border-radius: 6px;
}
@media (hover: none) {
  .film__disc { background: rgba(10, 13, 18, .72); border-color: rgba(255, 255, 255, .9); }
}

.film__body { display: grid; gap: .38rem; grid-auto-columns: minmax(0, 1fr);}
.film__body b { font-family: var(--disp); font-weight: 600; font-size: 1.02rem; letter-spacing: -0.014em; }
.film__body small { font: 400 .735rem/1.4 var(--mono); color: var(--ink-3); letter-spacing: .04em; }
.film__body .lnk { margin-top: .45rem; justify-self: start; }

.catalog { display: grid; gap: clamp(1.2rem, 2.5vw, 2rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.catcard {
  display: grid; gap: 1.35rem; grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr);
  align-items: start; border: 1px solid var(--line-2); border-radius: var(--r);
  padding: clamp(1.15rem, 2vw, 1.7rem); background: var(--paper); transition: .45s var(--ease);
}
.catcard:hover { border-color: var(--accent); box-shadow: var(--shadow); transform: translateY(-4px); }
.catcard__cover { overflow: hidden; border-radius: var(--r-sm); box-shadow: var(--shadow); }
.catcard:hover .catcard__cover .ph { transform: scale(1.05); }
.catcard__body { display: grid; gap: .6rem; align-content: start; grid-auto-columns: minmax(0, 1fr);}
.catcard__body b { font: 600 1.08rem/1.2 var(--disp); letter-spacing: -0.014em; }
.catcard__body p { color: var(--ink-2); font-size: .9rem; line-height: 1.56; }
.catcard__meta { font: 400 .725rem/1.4 var(--mono); color: var(--ink-3); letter-spacing: .04em; }
.catcard__act { display: flex; gap: .9rem; flex-wrap: wrap; margin-top: .35rem; }

/* ================================================= 14. İletişim ve formlar */

/* --------------------------------------------------------- Konum kartları
   Etiket–değer ikilisi iki sütuna sıkıştırıldığında "E-POSTA" alt alta
   bölünüyordu. Etiket artık değerin üstünde tam satır; kart yüksekliği
   eşitlenip eylem düğmeleri en alta sabitlendi. */

.locs {
  display: grid; grid-auto-columns: minmax(0, 1fr);
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(.9rem, 1.5vw, 1.3rem);
}
@media (min-width: 620px)  { .locs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .locs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.loc {
  display: flex; flex-direction: column; gap: .85rem;
  padding: clamp(1.25rem, 2vw, 1.7rem);
  background: var(--paper); border: 1px solid var(--line-2);
  border-radius: var(--r);
  transition: border-color .4s var(--ease), transform .4s var(--ease), box-shadow .4s var(--ease);
}
.loc:hover { border-color: var(--line); transform: translateY(-3px); box-shadow: var(--shadow-sm); }

.loc__top { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.loc__brand {
  font: 500 .64rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase;
  padding: .42rem .65rem; border-radius: 99px; background: var(--ink); color: var(--paper);
}
.loc__brand[data-b="Bakraç"] { background: #0075BE; color: #fff; }
.loc__badge { font: 400 .68rem/1.3 var(--mono); color: var(--ink-3); }

.loc h3 { font: 600 1rem/1.38 var(--disp); letter-spacing: -.01em; }

/* Adres: ikon sabit sütunda, metin serbestçe sarar */
.loc__adr {
  display: grid; grid-template-columns: 1.1rem minmax(0, 1fr); gap: .55rem;
  color: var(--ink-2); font-size: .88rem; line-height: 1.6;
  /* Satır sonlarını dengeler: tek kelimelik sarkmaları azaltır.
     Bölünmemesi gereken öbekler ayrıca adr() ile bağlanır. */
  text-wrap: pretty;
}
.loc__adr .i { font-size: .95rem; color: var(--ink-3); margin-top: .18em; }

.loc__dl {
  display: grid; grid-auto-columns: minmax(0, 1fr); gap: .8rem; margin: 0;
  padding-top: .85rem; border-top: 1px solid var(--line-2);
}
.loc__f { display: grid; grid-auto-columns: minmax(0, 1fr); gap: .25rem; }
/* Etiket tam satır — iki sütunlu düzende "E-POSTA" bölünüyordu */
.loc__f dt {
  display: flex; align-items: center; gap: .45rem;
  font: 500 .63rem/1 var(--mono); letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-3); white-space: nowrap;
}
.loc__f dt .i { font-size: .8rem; }
.loc__f dd {
  margin: 0; display: grid; grid-auto-columns: minmax(0, 1fr); gap: .12rem;
  font-size: .92rem; line-height: 1.5; overflow-wrap: anywhere;
}
.loc__f dd a { transition: color .3s var(--ease); }
.loc__f dd a:hover { color: var(--accent-2); }

/* Eylemler her kartta aynı hizada dursun */
.loc__act {
  display: flex; flex-wrap: wrap; gap: .5rem;
  margin-top: auto; padding-top: 1rem;
}
.loc__act .btn { flex: 1 1 auto; justify-content: center; white-space: nowrap; }

/* Harita ve yanındaki iletişim kartı aynı yüksekliği paylaşır. Önceden
   harita sabit yükseklikteydi ve `align-items: start` ile hizalandığı için
   kartın altında boşluk kalıyordu. */
.mapgrid { align-items: stretch; }
.mapwrap {
  position: relative; height: 100%;
  border: 1px solid var(--line); border-radius: var(--r);
  overflow: hidden; background: var(--surface-2);
}
.mapwrap iframe {
  width: 100%; height: 100%;
  /* Tek sütuna inen dar ekranlarda satır yüksekliği içerikten geldiği için
     taban ölçü şart; aksi hâlde çerçeve sıfıra iner. */
  min-height: clamp(20rem, 46vh, 30rem);
  border: 0; display: block;
  filter: grayscale(.3) contrast(1.05); transition: filter .5s var(--ease);
}
.mapwrap:hover iframe { filter: none; }

.form { display: grid; gap: 1.1rem; grid-auto-columns: minmax(0, 1fr);}
.form__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.1rem; }
@media (min-width: 660px) { .form__row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .form__row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.field { display: grid; gap: .48rem; grid-auto-columns: minmax(0, 1fr);}
.field__lab { display: flex; align-items: baseline; gap: .55rem; font: 500 .725rem/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.field__lab b { color: var(--accent); font-weight: 500; }
.field__req { margin-left: auto; text-transform: none; letter-spacing: .04em; font-size: .67rem; color: var(--ink-3); }
/* Alanların zemini bulundukları bölümle aynıydı ve kenarlığı şeffaftı;
   nereye tıklanacağı görünmüyordu. Artık her alan kâğıt zeminde, görünür
   bir kenarlıkla ve hafif iç gölgeyle çukurda duruyor — hem kâğıt hem
   yüzey tonlu bölümlerde ayırt ediliyor. */
.field input, .field select, .field textarea {
  width: 100%; padding: .95rem 1.05rem;
  font: 400 .97rem/1.5 var(--sans); color: var(--ink);
  background: var(--paper);
  border: 1px solid color-mix(in srgb, var(--ink) 22%, transparent); border-radius: var(--r-sm);
  box-shadow: inset 0 1px 2px rgba(20, 17, 15, .06);
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
  appearance: none;
}
[data-theme="dark"] .field input,
[data-theme="dark"] .field select,
[data-theme="dark"] .field textarea {
  background: var(--surface-2);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .35);
}
.field textarea { min-height: 8.5rem; resize: vertical; }
.field select {
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 1.2rem) 1.4rem, calc(100% - .88rem) 1.4rem;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
  padding-right: 2.5rem;
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--ink-3); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 0; border-color: var(--accent); background: var(--paper);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent);
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-3); opacity: .8; }
.field.is-bad input, .field.is-bad select, .field.is-bad textarea { border-color: #D2453A; }
.field__err { font: 500 .76rem/1.4 var(--sans); color: #D2453A; display: none; }
.field.is-bad .field__err { display: block; }

.check { display: grid; grid-template-columns: auto 1fr; gap: .8rem; align-items: start; cursor: pointer; }
.check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.check__box {
  width: 1.25rem; height: 1.25rem; border: 1px solid color-mix(in srgb, var(--ink) 30%, transparent); border-radius: 5px;
  display: grid; place-items: center; margin-top: .12rem; flex: none;
  background: var(--paper); box-shadow: inset 0 1px 2px rgba(20, 17, 15, .06);
  transition: .3s var(--ease); grid-auto-columns: minmax(0, 1fr);}
.check__box::after { content: "✓"; font-size: .72rem; color: var(--on-accent); opacity: 0; transform: scale(.5); transition: .25s var(--ease); }
.check input:checked + .check__box { background: var(--accent); border-color: var(--accent); }
.check input:checked + .check__box::after { opacity: 1; transform: none; }
.check input:focus-visible + .check__box { outline: 2px solid var(--accent); outline-offset: 2px; }
.check span { font-size: .9rem; line-height: 1.58; color: var(--ink-2); }
.check.is-bad .check__box { border-color: #D2453A; }

.hp { position: absolute !important; left: -9999px; opacity: 0; height: 0; width: 0; }

.formnote { font: 400 .82rem/1.62 var(--sans); color: var(--ink-3); }
.formmsg { padding: 1.05rem 1.2rem; border-radius: var(--r-sm); font-size: .93rem; line-height: 1.55; display: none; }
.formmsg.is-ok { display: block; background: color-mix(in srgb, #2E9E5B 14%, transparent); border: 1px solid color-mix(in srgb, #2E9E5B 42%, transparent); color: #1E7A43; }
.formmsg.is-err { display: block; background: color-mix(in srgb, #D2453A 14%, transparent); border: 1px solid color-mix(in srgb, #D2453A 42%, transparent); color: #B3382E; }
[data-theme="dark"] .formmsg.is-ok { color: #7FD9A0; }
[data-theme="dark"] .formmsg.is-err { color: #F3968D; }

/* Başvuru formu */
.apply { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.6rem, 3vw, 2.9rem); align-items: start; }
@media (min-width: 1000px) { .apply { grid-template-columns: minmax(0, 1fr) minmax(0, 19rem); } }
.apply__main { min-width: 0; }
.step { border: 0; margin: 0; padding: 0; }

.steps { display: flex; gap: .35rem; overflow-x: auto; scrollbar-width: none; padding-bottom: .4rem; }
.steps::-webkit-scrollbar { display: none; }
.steps button {
  flex: none; display: inline-flex; align-items: center; gap: .55rem;
  padding: .65rem 1rem; border: 1px solid var(--line); border-radius: 99px;
  font: 500 .8rem/1 var(--sans); color: var(--ink-2); white-space: nowrap;
  transition: .35s var(--ease);
}
.steps button b { font: 500 .67rem/1 var(--mono); color: var(--ink-3); }
.steps button.is-on { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.steps button.is-on b { color: var(--accent); }
.steps button.is-done { border-color: var(--accent); color: var(--accent-2); }
.steps button.is-done b { color: var(--accent); }

.stepbar { height: 3px; background: var(--line); border-radius: 99px; overflow: hidden; margin: 1.2rem 0 1.9rem; }
.stepbar i { display: block; height: 100%; width: 20%; background: linear-gradient(90deg, var(--accent), var(--accent-3)); transition: width .6s var(--ease); }

.step { display: none; }
.step.is-on { display: grid; gap: 1.3rem; animation: stepIn .5s var(--ease); grid-auto-columns: minmax(0, 1fr);}
@keyframes stepIn { from { opacity: 0; transform: translateY(14px); } }
.step__head { display: grid; gap: .42rem; padding-bottom: .5rem; grid-auto-columns: minmax(0, 1fr);}
.step__head b { font: 500 .705rem/1 var(--mono); color: var(--accent); letter-spacing: .13em; }
.step__head h3 { font: 600 1.32rem/1.1 var(--disp); letter-spacing: -0.014em; }
.step__head p { color: var(--ink-3); font-size: .92rem; }

.photo { display: grid; gap: .85rem; grid-template-columns: minmax(0, 9rem) minmax(0, 1fr); align-items: start; }
.photo__drop {
  position: relative; aspect-ratio: 3/4; border: 1.5px dashed var(--line);
  border-radius: var(--r); display: grid; place-items: center; text-align: center;
  padding: .8rem; cursor: pointer; overflow: hidden; background: var(--surface);
  transition: .4s var(--ease); grid-auto-columns: minmax(0, 1fr);}
.photo__drop:hover, .photo__drop.is-over { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, var(--surface)); }
.photo__drop span { font: 500 .73rem/1.45 var(--mono); color: var(--ink-3); }
.photo__drop img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.photo__drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.photo__side { display: grid; gap: .5rem; align-content: start; grid-auto-columns: minmax(0, 1fr);}
.photo__side b { font: 500 .73rem/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.photo__side p { font-size: .85rem; color: var(--ink-3); line-height: 1.58; }
.photo__clear { justify-self: start; font: 500 .755rem/1 var(--mono); color: var(--accent-2); border-bottom: 1px solid var(--line); padding-bottom: .22rem; }

.stepnav { display: flex; gap: .75rem; justify-content: space-between; padding-top: 1.5rem; border-top: 1px solid var(--line); margin-top: .6rem; }

.summary {
  position: sticky; top: 8.5rem; border: 1px solid var(--line); border-radius: var(--r);
  padding: 1.4rem; display: grid; gap: .95rem; background: var(--surface); grid-auto-columns: minmax(0, 1fr);}
.summary h3 { font: 600 1.02rem/1.15 var(--disp); letter-spacing: -0.014em; }
.summary dl { display: grid; gap: .62rem; margin: 0; grid-auto-columns: minmax(0, 1fr);}
.summary dt { font: 500 .66rem/1.3 var(--mono); letter-spacing: .11em; text-transform: uppercase; color: var(--ink-3); }
.summary dd { margin: 0; font-size: .92rem; font-weight: 500; }
.summary__ph { aspect-ratio: 3/4; border-radius: var(--r-sm); overflow: hidden; background: var(--surface-2); display: grid; place-items: center; grid-auto-columns: minmax(0, 1fr);}
.summary__ph img { width: 100%; height: 100%; object-fit: cover; }
.summary__ph span { font: 500 .69rem/1 var(--mono); color: var(--ink-3); }

.result { display: grid; gap: 1.15rem; text-align: center; padding: clamp(2rem, 5vw, 3.5rem) 0; grid-auto-columns: minmax(0, 1fr);}
.result__code { font: 500 1.1rem/1 var(--mono); letter-spacing: .16em; color: var(--accent-2); padding: .9rem 1.2rem; border: 1px dashed var(--accent); border-radius: var(--r-sm); justify-self: center; }

.notice {
  position: relative; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); border-radius: var(--r);
  background: color-mix(in srgb, var(--accent) 8%, var(--paper));
  padding: clamp(1.6rem, 3vw, 2.5rem); display: grid; gap: .95rem; grid-auto-columns: minmax(0, 1fr);}
.notice::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--accent);
}
.notice__tag {
  justify-self: start; font: 500 .69rem/1 var(--mono); letter-spacing: .15em; text-transform: uppercase;
  background: var(--accent); color: var(--on-accent); padding: .45rem .65rem; border-radius: 99px;
}
.notice p { color: var(--ink-2); max-width: 68ch; }
.notice strong { color: var(--ink); font-weight: 600; }
.notice__act { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .6rem; }


/* --------------------------------------------------- Telif şeridi ve metni
   Şerit logo ızgarasının hemen üstünde durur: özet her zaman görünür,
   tamamı düğmeyle açılan pencerede. Dar ekranda alt alta diziliyor ve
   düğme tam genişliğe yayılıyor — başparmakla vurulacak hedef küçük
   kalmasın. */
.telifbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.4rem;
  justify-content: space-between;
  margin-bottom: clamp(1.4rem, 3vw, 2.2rem);
  padding: clamp(.95rem, 2vw, 1.25rem) clamp(1.1rem, 2.4vw, 1.5rem);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  border-left-width: 3px; border-left-color: var(--accent);
  border-radius: var(--r);
  background: color-mix(in srgb, var(--accent) 8%, var(--paper));
}
.telifbar__ozet {
  /* Genişlik sınırı yok: metin tek satıra sığdığı sürece sarmıyor.
     62ch sınırı varken geniş ekranda bile ikiye bölünüyordu. Dar ekranda
     satır sarması gerekiyor, o yüzden `nowrap` değil sınırın kalkması. */
  margin: 0; color: var(--ink-2);
  font-size: .92rem; line-height: 1.6;
}
.telifbar__ozet strong { color: var(--ink); font-weight: 600; }
.telifbar__ac { flex: 0 0 auto; }
@media (max-width: 620px) {
  .telifbar__ac { flex: 1 1 100%; justify-content: center; }
}

/* Pencerenin içindeki metin. Panelin kendi iç boşluğu yok (sektör özeti
   kenara dayanan bir görselle başlıyor), bu yüzden boşluğu metin kendi
   veriyor. Sağ üstteki kapatma düğmesinin altına girmemek için ilk
   satırın sağında pay var. */
.telif { display: grid; gap: .95rem; padding: clamp(1.5rem, 4vw, 2.4rem); }
.telif__tag {
  justify-self: start; margin: 0;
  font: 500 .69rem/1 var(--mono); letter-spacing: .15em; text-transform: uppercase;
  background: var(--accent); color: var(--on-accent);
  padding: .45rem .65rem; border-radius: 99px;
}
.telif__t { margin: 0; padding-right: 2.6rem; font: 600 clamp(1.15rem, 2.4vw, 1.5rem)/1.28 var(--sans); }
.telif p { margin: 0; color: var(--ink-2); max-width: 68ch; }
.telif strong { color: var(--ink); font-weight: 600; }
.telif__act { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .35rem; }

/* Yasak listesi. Madde imi olarak vurgu renginde kısa bir çizgi: nokta
   imleri metnin soluna taşıp sol kenarla çakışıyordu. Çizgi 2px, çünkü
   1px'lik kural kesirli satır yüksekliğinde yarım piksele düşüp bazı
   maddelerde soluk görünüyordu. */
.telif__kural {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: .55rem; max-width: 68ch;
}
.telif__kural li {
  position: relative; padding-left: 1.35rem;
  color: var(--ink-2); font-size: .94rem; line-height: 1.62;
}
.telif__kural li::before {
  content: ""; position: absolute; left: 0; top: .7em;
  width: .7rem; height: 2px; border-radius: 2px; background: var(--accent);
}

/* Betik yokken aynı metin sayfada düz bir kutu olarak görünür. */
.telif--duz {
  margin-bottom: clamp(1.4rem, 3vw, 2.2rem);
  border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: var(--r); background: var(--surface);
}
.telif--duz .telif__t { padding-right: 0; }

/* Kültür sekmeleri */
.culture { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.4rem, 3vw, 2.8rem); }
@media (min-width: 880px) { .culture { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: start; } }
.culture__tabs { display: grid; gap: .1rem; border-top: 1px solid var(--line); grid-auto-columns: minmax(0, 1fr);}
.culture__tabs button {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem;
  padding: 1.2rem .2rem; text-align: left; border-bottom: 1px solid var(--line);
  transition: padding-left .45s var(--ease), color .35s var(--ease);
}
.culture__tabs button b { font: 500 .705rem/1 var(--mono); color: var(--ink-3); letter-spacing: .1em; }
.culture__tabs button span { font-family: var(--disp); font-weight: 600; font-size: 1.06rem; letter-spacing: -0.014em; }
.culture__tabs button i { font-style: normal; opacity: 0; color: var(--accent); transition: .35s var(--ease); }
.culture__tabs button:hover { padding-left: .85rem; }
.culture__tabs button.is-on { padding-left: .85rem; color: var(--accent-2); }
.culture__tabs button.is-on b { color: var(--accent); }
.culture__tabs button.is-on i { opacity: 1; }
.culture__panes > div { display: grid; gap: .95rem; align-content: start; animation: stepIn .5s var(--ease); grid-auto-columns: minmax(0, 1fr);}
.culture__panes p:last-child { color: var(--ink-2); }

/* Şerit */
.marquee { border-block: 1px solid var(--line-2); overflow: hidden; padding-block: 1.5rem; }
.marquee__row { display: flex; gap: clamp(2.4rem, 5vw, 4.5rem); width: max-content; will-change: transform; }
.marquee--text .marquee__row { align-items: center; }
.marquee--text span {
  display: inline-flex; align-items: center; gap: clamp(2.4rem, 5vw, 4.5rem);
  font: 500 .775rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3);
  white-space: nowrap;
}
.marquee--text span::after { content: "◆"; font-size: .5em; color: var(--accent); }
.marquee img { height: clamp(1.5rem, 2.2vw, 2rem); width: auto; opacity: .4; filter: grayscale(1); transition: .4s var(--ease); }
.marquee a:hover img { opacity: 1; filter: none; }
.marquee__d { display: block; }
.marquee__l { display: none; }
[data-theme="dark"] .marquee__d { display: none; }
[data-theme="dark"] .marquee__l { display: block; }

/* ============================================= 15. Altbilgi ve yüzen ögeler */

.cta {
  position: relative; padding-block: var(--pad); overflow: hidden;
  background: var(--surface);
  border-top: 1px solid var(--line-2);
}
.cta::before {
  content: ""; position: absolute; inset: -34% -10% auto; height: 62rem; pointer-events: none;
  background: radial-gradient(46% 46% at 50% 50%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 70%);
  opacity: .8;
}
.cta__in { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 4vw, 3.5rem); }
@media (min-width: 960px) { .cta__in { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; } }
.cta h2 { margin: 1.05rem 0 1.15rem; }
.cta .lead { max-width: 40ch; }
.cta__act { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.9rem; }
.cta__act .btn { --btn-bg: var(--accent); --btn-fg: var(--on-accent); border-color: var(--accent); }
.cta__act .btn::before { background: var(--ink); }
.cta__act .btn:hover { color: var(--paper); border-color: var(--ink); }
.cta__act .btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink); border-color: var(--line); }
/* ----------------------------------------------------------------------
   İLETİŞİM KANALI KARTLARI

   Sütun tanımı olmadığı için üç kanal her ekranda alt alta diziliyor ve
   tek bir bloğa dönüşüyordu. Artık geniş ekranda üç ayrı kart yan yana;
   ikon dolu bir çipte duruyor, etiket ile değerler ayrışıyor.
   ---------------------------------------------------------------------- */
.cta__cards {
  display: grid; gap: clamp(.7rem, 1.3vw, 1.1rem);
  /* Sütun sayısı, kartların GERÇEK genişliğine göre seçilir:

     · 960 px üstünde kartlar sağdaki dar yan sütunda durur (~470–570 px);
       üçe bölünürse her kart 120–180 px kalıyor ve telefon numarası ile
       e-posta sığmıyordu. Bu yüzden orada ALT ALTA dizilir.
     · 560–959 px arasında blok tek sütuna iner, kartlar tüm şerit
       genişliğini alır (~500–820 px); orada üç kart yan yana rahat durur.
     · 560 px altında yine alt alta. */
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 560px) and (max-width: 959.98px) {
  .cta__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* Üç sütuna geçince ikon üste alınır, metin altına iner. Kart daralınca
     değerler tek satıra zorlanamaz; sarmalarına izin verilir. */
  .cta__cards li { grid-template-columns: minmax(0, 1fr); }
  .cta__cards .ico { grid-row: auto; margin-bottom: .6rem; }
}
.cta__cards li {
  position: relative; overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--r);
  padding: clamp(1.15rem, 2vw, 1.5rem);
  /* Tek sütun `minmax(0,1fr)`: içerik kart genişliğini aşıp kırpılmasın,
     uzun etiket ve adresler düzgün sarsın. */
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: .18rem 1rem; align-content: start; align-items: start;
  transition: border-color .4s var(--ease), box-shadow .4s var(--ease),
              transform .4s var(--ease);
}
.cta__cards li::after {
  content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 1.9rem;
  background: var(--accent); transition: width .5s var(--ease);
}
.cta__cards li:hover {
  border-color: color-mix(in srgb, var(--accent) 38%, var(--line));
  box-shadow: 0 16px 36px -24px rgba(12, 16, 22, .4);
  transform: translateY(-2px);
}
.cta__cards li:hover::after { width: 100%; }

/* İkon: ince kenarlıklı küçük rozet yerine dolu çip */
.cta__cards .ico {
  grid-row: 1 / span 3; align-self: start;
  width: 2.5rem; height: 2.5rem; border-radius: 12px;
  border-color: transparent;
  background: color-mix(in srgb, var(--accent) 13%, transparent);
  color: var(--accent);
  transition: background .4s var(--ease), color .4s var(--ease);
}
.cta__cards .ico::before { width: 1.15rem; height: 1.15rem; }
.cta__cards li:hover .ico { background: var(--accent); color: var(--on-accent); }

.cta__cards b {
  font: 500 .64rem/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: .35rem; overflow-wrap: anywhere;
}
.cta__cards a {
  color: var(--ink); font: 600 clamp(.82rem, .35vw + .72rem, .95rem)/1.5 var(--disp);
  letter-spacing: -.014em; overflow-wrap: anywhere;
  transition: color .3s var(--ease);
  overflow-wrap: anywhere;
}
.cta__cards a:hover { color: var(--accent-2); }
.cta__cards .muted {
  color: var(--ink-3); font: 400 .78rem/1.5 var(--mono);
  /* Adres öbekleri bölünmez boşlukla bağlı; dar kartta kelime içi
     kırılmaya izin verilmezse kutuyu taşırıyor. */
  overflow-wrap: anywhere;
}

/* Kartlar alt alta olduğunda (dar ekran ya da 960 px üstü yan sütun)
   kart genişliği 390 px'i aşıyor; telefon ve e-posta tek satırda durur. */
@media (max-width: 559.98px), (min-width: 960px) {
  .cta__cards a { white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
  .cta__cards li, .cta__cards li::after, .cta__cards .ico { transition: none; }
  .cta__cards li:hover { transform: none; }
}

.foot { background: var(--surface); border-top: 1px solid var(--line-2); padding-block: clamp(3rem, 6vw, 5rem) 2rem; }
.foot__top { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2.2rem, 4vw, 3.5rem); padding-bottom: clamp(2.2rem, 4vw, 3.2rem); border-bottom: 1px solid var(--line); }
@media (min-width: 940px) { .foot__top { grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr); } }
.foot__logo { width: clamp(9rem, 14vw, 11.5rem); height: auto; }
.foot__logo--l, [data-theme="dark"] .foot__logo--d { display: none; }
[data-theme="dark"] .foot__logo--l { display: block; }
.foot__brand p { margin-top: 1.15rem; max-width: 38ch; color: var(--ink-2); font-size: .93rem; line-height: 1.64; }
.foot__since { font: 500 .755rem/1 var(--mono) !important; color: var(--ink-3) !important; letter-spacing: .14em; margin-top: 1.25rem !important; }
.foot__since span { color: var(--accent); }
.foot__cols { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); }
.foot__cols h3 { font: 500 .7rem/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 1.1rem; }
.foot__cols ul { display: grid; gap: .62rem; grid-auto-columns: minmax(0, 1fr);}
.foot__cols a { font-size: .93rem; color: var(--ink-2); transition: color .3s var(--ease), padding-left .3s var(--ease); }
.foot__cols a:hover { color: var(--accent-2); padding-left: .32rem; }
.foot__contact { font-size: .9rem; color: var(--ink-2); }
.foot__contact strong { color: var(--ink); font-weight: 600; }
.foot__contact span { line-height: 1.58; display: block; }
/* Merkez adı + adres tek öbek; ad ile adres arası liste boşluğundan dar. */
.foot__yer strong { display: block; margin-bottom: .2rem; }
.foot__bottom { display: flex; flex-wrap: wrap; gap: 1rem 1.6rem; align-items: center; justify-content: space-between; padding-top: 1.8rem; font: 500 .775rem/1.5 var(--mono); color: var(--ink-3); letter-spacing: .03em; }
/* Sağ alttaki yukarı-çık düğmesi sayfa sonunda bu satırın üzerine
   biniyor ve son bağlantıyı tıklanamaz kılıyordu; düğme yeri kadar
   boşluk bırakılıyor. */
.foot__bottom ul { display: flex; flex-wrap: wrap; gap: 1.3rem; padding-right: 3.8rem; }
.foot__bottom a:hover { color: var(--accent-2); }
/* Telif ve imza tek blokta; alt bar iki sütunlu düzenini koruyor. */
.foot__legal { display: grid; gap: .3rem; }
.foot__imza { opacity: .72; letter-spacing: .02em; }

.totop {
  position: fixed; right: clamp(.9rem, 2vw, 1.7rem); bottom: clamp(.9rem, 2vw, 1.7rem); z-index: 170;
  width: 3rem; height: 3rem; border-radius: 50%;
  background: var(--ink); color: var(--paper); display: grid; place-items: center;
  box-shadow: var(--shadow); animation: fade .35s var(--ease);
  transition: background .4s var(--ease), transform .4s var(--ease); grid-auto-columns: minmax(0, 1fr);}
.totop:hover { background: var(--accent); color: var(--on-accent); transform: translateY(-4px) scale(1.06); }

.cookie {
  position: fixed; left: clamp(.9rem, 2vw, 1.7rem); bottom: clamp(.9rem, 2vw, 1.7rem); z-index: 175;
  width: min(100% - 1.8rem, 27rem);
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow-lg); padding: 1.2rem 1.3rem; display: grid; gap: .95rem;
  animation: cookieIn .6s var(--ease) .9s backwards; grid-auto-columns: minmax(0, 1fr);}
@keyframes cookieIn { from { opacity: 0; transform: translateY(18px); } }
.cookie p { font-size: .87rem; line-height: 1.62; color: var(--ink-2); }
.cookie a { color: var(--accent-2); border-bottom: 1px solid var(--line); }
.cookie__act { display: flex; gap: .6rem; }

/* =========================================== 16. Hareket katmanı (GSAP) */

/* açılış perdesi */
.intro {
  position: fixed; inset: 0; z-index: 400; display: grid; place-items: center;
  /* align-content olmadan satırlar ekran boyunca esniyor ve logo ile yükleme
     göstergesi ekranın iki ayrı yarısına dağılıyordu; satırlar birlikte
     ortalanır ve aralarındaki mesafe gap ile verilir. */
  align-content: center; gap: 1.45rem;
  /* Zemin sayfanın kendi kâğıdı: aydınlık temada açık, koyu temada koyu.
     Böylece perde kalktığında renk sıçraması olmaz. */
  background: var(--paper); pointer-events: none;}
.intro__mark { width: min(46vw, 15rem); opacity: 0; }

/* Logonun altındaki yükleme göstergesi: ince ray, dolan çubuk ve yüzde.
   Değer gerçek yükleme durumundan gelir (bkz. site.js "intro"). */
.intro__load {
  display: grid; justify-items: center; gap: .62rem;
  width: min(46vw, 15rem); opacity: 0;
}
.intro__track {
  width: 100%; height: 2px; border-radius: 2px; overflow: hidden;
  background: color-mix(in srgb, var(--ink) 14%, transparent);
}
.intro__fill {
  display: block; width: 100%; height: 100%;
  background: var(--accent);
  transform: scaleX(0); transform-origin: left;
}
.intro__pct {
  font: 500 .68rem/1 var(--mono); letter-spacing: .16em;
  color: var(--ink-3); font-variant-numeric: tabular-nums;
}
.intro__bar { position: absolute; inset: auto 0 0 0; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; }
html.is-ready .intro { display: none; }

/* özel imleç — yalnızca hassas işaretçide */
.cursor, .cursor-dot {
  position: fixed; top: 0; left: 0; z-index: 350; pointer-events: none;
  border-radius: 50%; opacity: 0;
  will-change: transform;
}
.cursor { width: 2.4rem; height: 2.4rem; border: 1px solid var(--accent); margin: -1.2rem 0 0 -1.2rem; }
.cursor-dot { width: 5px; height: 5px; background: var(--accent); margin: -2.5px 0 0 -2.5px; }
@media (hover: none), (pointer: coarse) { .cursor, .cursor-dot { display: none; } }

/* satır maskesi ile başlık açılışı */
.wln { display: block; overflow: hidden; padding-bottom: .16em; margin-bottom: -.16em; }
.wln > span { display: block; }

/* kaydırmayla görünüme giriş (GSAP yoksa da çalışır) */
.rv { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
/* Betik çalışmazsa içerik gizli kalmasın: JS yoksa animasyon da yok. */
@media (scripting: none) { .rv { opacity: 1; transform: none; } }
.rv.is-in { opacity: 1; transform: none; }
.rv-d1 { transition-delay: .06s; }
.rv-d2 { transition-delay: .12s; }
.rv-d3 { transition-delay: .18s; }
.rv-d4 { transition-delay: .24s; }
.rv-d5 { transition-delay: .30s; }
.rv-d6 { transition-delay: .36s; }

/* IZGARA KARTLARI DİKEY KAYMADAN AÇILIR

   Ortak açılış 26 px aşağıdan geliyor ve her kartın gecikmesi farklı.
   Aynı satırdaki kartlar bu yüzden bir saniye boyunca farklı yüksekliklerde
   duruyor; en son açılan kart satırdan kopmuş gibi görünüp sonra yerine
   oturuyordu. Kartlarda dikey kayma yerine çok hafif bir büyüme kullanılır:
   ölçek kartın merkezine göre çalıştığı için satır tabanı hiç bozulmaz. */
.card.rv, .policy article.rv, .cta__cards li.rv {
  transform: scale(.988);
}
.card.rv.is-in, .policy article.rv.is-in, .cta__cards li.rv.is-in {
  transform: none;
}

/* paralaks katmanı */
.px { will-change: transform; }
/* Paralaks katmanı: %30 fazla yükseklik, dikeyde ortalanmış.
   NOT: yüzde `margin-top` genişliğe göre çözülür; bu yüzden mutlak konum ve
   `top` yüzdesi kullanılır — o, kapsayıcının YÜKSEKLİĞİNE göre hesaplanır.
   GSAP ±8 yPercent oynatır → 0,104H hareket, 0,15H boşluk payı. */
/* Kural kapsayıcı sınıfına bağlıydı; listede olmayan yeni bir blok
   eklendiğinde görsel kutuyu doldurmuyor ve altında zemin görünüyordu.
   Artık .px'in kendisi hedefleniyor — kapsayıcı ne olursa olsun geçerli. */
.px {
  position: absolute; left: 0; right: 0; top: -15%;
  width: 100%; height: 130%; margin-top: 0;
  object-fit: cover;
}
/* Paralaks katmanı taşıyan her kutu konumlandırılmış ve taşmayı kesiyor
   olmalı; aksi hâlde katman kutunun dışına çıkar. */
:has(> .px) { position: relative; overflow: hidden; }

/* ============================================= 17. Duyarlılık ve baskı */


@media (max-width: 760px) {
  .site__ticker { display: none; }
  .site__bar-in { justify-content: flex-end; gap: 1rem; }
  .site__bar-links { gap: .9rem; font-size: .655rem; }
  .site__bar-links .ico { width: 1.15rem; height: 1.15rem; font-size: .5rem; }
}
@media (max-width: 480px) { .site__bar-links a:last-child .site__bar-t { display: none; } }

@media (max-width: 700px) {
  .vhero__facts { grid-template-columns: repeat(2, 1fr); }
  .vhero__facts > :last-child { grid-column: span 2; }
  .catcard { grid-template-columns: minmax(0, 6.5rem) minmax(0, 1fr); }
  .photo { grid-template-columns: minmax(0, 7rem) minmax(0, 1fr); }
  /* Başvuru özetindeki önizleme 3:4 olduğu için kart genişliğinde çok uzun
     bir blok oluşturuyordu; genişliği sınırlanır. */
  .summary__ph { max-width: 11rem; }
  /* Adres kartlarındaki etiket/değer satırları dar ekranda da ALT ALTA
     kalır. Önce iki sütuna alınmıştı (etiket 3.6rem = 57.6px), ama etiketin
     üzerinde `white-space: nowrap` var ve etiketler o sütuna sığmıyor:
     ölçümle "Telefon" 66px, "E-posta" 69px, "Çalışma saatleri" 124px
     istiyor. Sığmayanlar sütunlarını taşıp değerin altına giriyor, yazılar
     iç içe geçmiş görünüyordu — yalnızca kısa olan "Faks" düzgündü.

     Sabit sütunu genişletmek çözüm değil: en uzun etikete göre 7.75rem
     ayırmak 390px'lik bir ekranda değere ~170px bırakıyor ve "Faks"
     satırında koca bir boşluk kalıyor. Etiketi sarmalamak da denenmişti,
     "E-POSTA" ortadan bölünüyordu (bkz. .loc__f dt). Alt alta dizmek
     hem hizayı düzeltiyor hem de etiket metni ileride uzarsa bozulmuyor. */
}

@media (max-width: 460px) {
  .photo { grid-template-columns: minmax(0, 1fr); }
  /* Tek sütuna düşünce 3:4 kutu ekran genişliğinde devasa bir dikdörtgen
     oluyordu; genişlik sınırlanıp sola yaslanır. */
  .photo__drop { max-width: 10rem; }
  .catcard { grid-template-columns: minmax(0, 1fr); }
  .stepnav { flex-direction: column-reverse; }
  .stepnav .btn { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
  .rv { opacity: 1; transform: none; }
  .intro { display: none; }
  .cursor, .cursor-dot { display: none; }
  .vhero__cue i { animation: none; }
}

@media print {
  .site, .secnav, .cta, .totop, .cookie, .drawer, .lightbox, .intro,
  .vhero__ctl, .vhero__film, .vhero__cue, .cursor, .cursor-dot { display: none !important; }
  body { background: #fff; color: #000; }
  .rv { opacity: 1 !important; transform: none !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; }
}

/* ==========================================================================
   19. İkonlar — Tabler Icons (MIT), PNG maske olarak

   İkonlar derleme sırasında PNG'ye rasterize edildi; sitede SVG yok.
   `mask-image` yalnızca alfa kanalını kullandığı için renk `currentColor`
   üzerinden gelir: açık/koyu tema, hover ve odak durumları kendiliğinden
   doğru renge döner.
   ========================================================================== */

.i {
  display: inline-block; flex: none;
  width: 1em; height: 1em;
  background-color: currentColor;
  vertical-align: -.145em;
  -webkit-mask: var(--i) center / contain no-repeat;
          mask: var(--i) center / contain no-repeat;
}
.i--lg { width: 1.25em; height: 1.25em; }

.i--phone         { --i: url("../icons/phone.png"); }
.i--mail          { --i: url("../icons/mail.png"); }
.i--map-pin       { --i: url("../icons/map-pin.png"); }
.i--printer       { --i: url("../icons/printer.png"); }
.i--world         { --i: url("../icons/world.png"); }
.i--clock         { --i: url("../icons/clock.png"); }
.i--arrow-right   { --i: url("../icons/arrow-right.png"); }
.i--arrow-up-right{ --i: url("../icons/arrow-up-right.png"); }
.i--arrow-up      { --i: url("../icons/arrow-up.png"); }
.i--arrow-down    { --i: url("../icons/arrow-down.png"); }
.i--download      { --i: url("../icons/download.png"); }
.i--external-link { --i: url("../icons/external-link.png"); }
.i--chevron-left  { --i: url("../icons/chevron-left.png"); }
.i--chevron-right { --i: url("../icons/chevron-right.png"); }
.i--x             { --i: url("../icons/x.png"); }
.i--player-play   { --i: url("../icons/player-play.png"); }
.i--player-pause  { --i: url("../icons/player-pause.png"); }
.i--check         { --i: url("../icons/check.png"); }
.i--mountain      { --i: url("../icons/mountain.png"); }
.i--building      { --i: url("../icons/building-skyscraper.png"); }
.i--pick          { --i: url("../icons/pick.png"); }
.i--gas-station   { --i: url("../icons/gas-station.png"); }
.i--milk          { --i: url("../icons/milk.png"); }
.i--plant         { --i: url("../icons/plant-2.png"); }
.i--solar         { --i: url("../icons/solar-panel.png"); }
.i--users         { --i: url("../icons/users.png"); }
.i--coins         { --i: url("../icons/coins.png"); }
.i--ship          { --i: url("../icons/ship.png"); }
.i--award         { --i: url("../icons/award.png"); }
.i--briefcase     { --i: url("../icons/briefcase.png"); }
.i--user          { --i: url("../icons/user.png"); }
.i--photo         { --i: url("../icons/photo.png"); }
.i--pdf           { --i: url("../icons/file-type-pdf.png"); }
.i--search        { --i: url("../icons/search.png"); }
.i--menu          { --i: url("../icons/menu-2.png"); }
.i--factory       { --i: url("../icons/building-factory-2.png"); }
.i--target        { --i: url("../icons/target-arrow.png"); }
.i--shield        { --i: url("../icons/shield-check.png"); }
.i--certificate   { --i: url("../icons/certificate.png"); }
.i--leaf          { --i: url("../icons/leaf.png"); }
.i--route         { --i: url("../icons/route.png"); }

/* Yuvarlak rozet içindeki ikonlar (üst bar, kapanış kartları) */
.ico { position: relative; }
.ico::before {
  /* Rozetin yazı boyutu .6rem olduğu için em değil mutlak ölçü kullanılır. */
  content: ""; width: .95rem; height: .95rem; display: block;
  background-color: currentColor;
  -webkit-mask: var(--i) center / contain no-repeat;
          mask: var(--i) center / contain no-repeat;
}
.ico--tel  { --i: url("../icons/phone.png"); }
.ico--mail { --i: url("../icons/mail.png"); }
.ico--pin  { --i: url("../icons/map-pin.png"); }

/* Maske desteklenmiyorsa ikon görünmez kalır; hepsi aria-hidden olduğu için
   anlam kaybı olmaz. Yine de kritik düğmelerde metin etiketi bulunur. */
@supports not ((-webkit-mask-image: url("#")) or (mask-image: url("#"))) {
  .i { display: none; }
}


/* ------------------------------------------- İkonların yerleştiği noktalar */

/* Sektör dizini satırı */
.sindex__i { font-size: 1.35rem; color: var(--ink-3); transition: color .4s var(--ease); }
.sindex__row:hover .sindex__i { color: var(--accent); }

/* Sektör kartı — numaranın yanında alan işareti */
.scard__i {
  position: absolute; left: 1rem; top: 1rem; z-index: 2;
  margin-left: 2.9rem; font-size: 1.15rem;
  color: #fff; opacity: .92;
  filter: drop-shadow(0 2px 8px rgba(8, 6, 5, .55));
}


/* Politika kartı */

/* Yön ikonları düğme ve bağlantı içinde metinle aynı hizada */
.btn .i, .lnk .i, .vhero__btn .i, .film__play .i { font-size: 1.05em; }
.lightbox__x .i, .lightbox__nav .i, .totop .i, .drawer__x .i { font-size: 1.1rem; }
.article__nav b .i { font-size: .95em; vertical-align: -.1em; }

/* Tanım listesi etiketlerindeki küçük ikonlar */
.loc dt { display: flex; align-items: center; gap: .4rem; }
.loc dt .i { font-size: .85rem; color: var(--ink-3); opacity: .85; }


/* ================== Hero'nun kısa ekranlara sığması ==================== */

/* Yatay telefon, küçük dizüstü ve 13" ekranlarda hero içeriği ekranı
   taşırmasın diye kademeli olarak sıkışır. Ölçüler yükseklikle tetiklenir,
   genişlikle değil: aynı genişlikte farklı yükseklikler olabiliyor. */
@media (max-height: 820px) {
  .vhero__in { padding-block: clamp(1.8rem, 5.5vh, 3.4rem) clamp(1rem, 2.4vh, 1.6rem); }
  .vhero__top { gap: 1rem; }
  .vhero__foot { margin-top: clamp(1rem, 2.4vh, 1.7rem); }
  .vhero__panel { padding: .8rem 1rem; gap: .6rem; }
}
@media (max-height: 700px) {
  .vhero__lead { display: none; }
  .vhero__facts { gap: .8rem; }
  .vhero__strip { display: none; }
}
@media (max-height: 560px) {
  .vhero__foot { margin-top: .8rem; }
  .vhero__panel { padding: .6rem .85rem; gap: .45rem; }
  .vhero__facts b { font-size: 1rem; }
  .vhero__cue { display: none; }
}


/* ============ Hero'nun dar ekranlara sığması (yükseklik + genişlik) ====== */






/* -------- Hero alt panelleri --------------------------------------------
   Rakamlar ile o an görüntülenen sahne aynı kutudaydı; "850 Çalışan"
   sahneye aitmiş gibi okunuyordu. İkisi ayrı kutuya alındı ve her kutu
   neyi anlattığını söyleyen bir başlık taşıyor. */

@media (min-width: 960px) {
  .vhero__foot { grid-template-columns: minmax(0, 1fr) minmax(0, auto); align-items: stretch; }
}

.vhero__panel {
  display: grid; grid-auto-columns: minmax(0, 1fr); gap: .85rem; align-content: start;
  padding: clamp(1rem, 1.8vw, 1.3rem) clamp(1.1rem, 2vw, 1.5rem);
  background: var(--hero-glass);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid var(--hero-line);
  border-radius: var(--r);
}
.vhero__panel-t {
  font: 500 .63rem/1 var(--mono); letter-spacing: .18em; text-transform: uppercase;
  color: var(--hero-ink3);
}
.vhero__panel--scene { min-width: min(100%, 21rem); }
.vhero__panel--scene .vhero__ctl { gap: 1rem; }
.vhero__panel--scene .vhero__now { border-right: 0; padding-right: 0; }


/* İki panel mobilde alt alta gelince hero ekranı 66 px taşırıyordu;
   dar ekranda paneller sıkışır. */
@media (max-width: 640px) {
  .vhero__foot { gap: .7rem; margin-top: clamp(.9rem, 2.4vh, 1.5rem); }
  .vhero__panel { padding: .75rem .9rem; gap: .55rem; }
  .vhero__panel-t { font-size: .6rem; }
  .vhero__panel--scene { min-width: 0; }
  .vhero__in { padding-bottom: clamp(.9rem, 2.2vh, 1.4rem); }
  .vhero__act .btn { padding: .82rem 1.15rem; }
}


/* 700–780 px yükseklikteki dizüstü ekranları: içerik gizlemeden sıkıştır.
   Bu aralıkta spot metin iki satıra iner, başlık ve boşluklar kısılır;
   hero yine ekranın tamamına birebir oturur. */
@media (max-height: 780px) and (min-height: 701px) {
  .vhero__in { padding-block: clamp(1.4rem, 4vh, 2.4rem) clamp(.8rem, 2vh, 1.2rem); }
  .vhero__top { gap: .8rem; }
  .vhero h1 { font-size: clamp(1.9rem, 2.6vw + .6rem, 2.6rem); }
  .vhero__lead {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; line-height: 1.5;
  }
  .vhero__act { margin-top: .3rem; }
  .vhero__act .btn { padding: .8rem 1.3rem; }
  .vhero__foot { margin-top: clamp(.8rem, 2vh, 1.2rem); }
  .vhero__panel { padding: .7rem .95rem; gap: .5rem; }
  .vhero__film { padding: .6rem 0; }
}


/* Şerit satırındaki gezinme ve oynatma kontrolleri --------------------- */
.vhero__nav { flex: none; display: flex; align-items: center; gap: .4rem; }
.vhero__nb {
  width: 2.2rem; height: 2.2rem; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--hero-line); background: var(--hero-glass);
  color: var(--hero-ink2);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: background .3s var(--ease), color .3s var(--ease),
              border-color .3s var(--ease), transform .25s var(--ease);
}
.vhero__nb .i { font-size: .95rem; }
.vhero__nb:hover:not([disabled]) { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.vhero__nb:active:not([disabled]) { transform: scale(.93); }
.vhero__nb[disabled] { opacity: .35; cursor: default; }
.vhero__nb--play { margin-left: .3rem; }


/* ======================================================================
   MOBİL HERO — en sonda durur ki yukarıdaki panel tanımlarını ezebilsin
   ====================================================================== */
@media (max-width: 640px) {
  /* Mobilde hero üç satır: film, sahne şeridi, içerik. Film satırı 1fr
     olduğu için kalan boşluğu o emer; hero her cihazda ekrana birebir
     oturur. Metin hiçbir yerde görüntünün üstüne binmez. */
  .vhero {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(9rem, 1fr) auto auto;
    align-items: stretch;
    background: var(--paper);
    color: var(--ink);
  }
  .vhero__media {
    position: relative; inset: auto; z-index: 0;
    border-radius: 0;              /* alt kenarı perde çözüyor, köşe gerekmez */
    overflow: hidden;
    /* Negatif alt boşluk: görüntünün kutusu küçük resim şeridinin satırına
       taşar. Satır yükseklikleri değişmediği için yerleşim kaymaz; film
       fiilen uzar ve şerit, perdenin kâğıda döndüğü yerde durur. */
    margin-bottom: -2.9rem;
  }
  /* Görüntünün alt kenarı kâğıt zemine erir.

     Teknik: üstüne kâğıt renginde bir perde BOYAMAK yerine görüntünün
     kendisi maskeleniyor. Boyanan perdede iki kusur riski vardı — kutu
     kesirli piksel yüksekliğinde bittiği için alt kenarda yarım saydam
     bir satır kalabiliyor, ayrıca perdenin son rengi ile sayfa zemini
     birbirini tutmazsa ince bir bant oluşuyordu. Maskede boyanan bir
     katman yok: görüntünün pikselleri kademeli olarak saydamlaşır ve
     altından sayfanın kendi zemini görünür. Zemin ile perde aynı boya
     olduğundan sınır çizgisi tanım gereği oluşamaz; tema değişse de
     kendiliğinden doğru renge kapanır. */
  .vhero__media {
    -webkit-mask-image: linear-gradient(180deg,
      #000 0%, #000 62%, rgba(0, 0, 0, .38) 76%, rgba(0, 0, 0, 0) 86%, rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(180deg,
      #000 0%, #000 62%, rgba(0, 0, 0, .38) 76%, rgba(0, 0, 0, 0) 86%, rgba(0, 0, 0, 0) 100%);
    -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  }
  /* Maskeyi uygulayamayan eski tarayıcılar için boyanan yedek perde.
     Maske çalıştığında bu katman da maskelendiği için görünmez. */
  @supports not ((mask-image: linear-gradient(#000, transparent)) or
                 (-webkit-mask-image: linear-gradient(#000, transparent))) {
    .vhero__media::after {
      content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
      height: 38%; z-index: 3; pointer-events: none;
      background: linear-gradient(180deg,
        rgba(var(--paper-rgb), 0) 0%,
        rgba(var(--paper-rgb), .32) 28%,
        rgba(var(--paper-rgb), .8) 46%,
        rgba(var(--paper-rgb), 1) 62%,
        rgba(var(--paper-rgb), 1) 100%);
    }
  }
  .vhero::after { content: none; }     /* perde gerekmez */
  .vhero__poster { filter: none; }

  /* Sahne şeridi: diğer sektörler buradan gezilir */
  .vhero__strip { display: block; padding: .4rem 0 0; border-top: 0; position: relative; z-index: 4; background: none; }
  /* Şerit satırı: küçük resimler solda kayar, yön düğmeleri sağda sabit.
     Aynı satırı paylaştıkları için ek yükseklik doğurmazlar. */
  .vhero__strip-in { display: flex; align-items: center; gap: .35rem; }
  /* Küçük resimlerin altında nefes payı: hero'nun alt çizgisi doğrudan
     resimlerin kenarına yapışıyor ve çizgi resimlerin üstünden geçiyormuş
     gibi duruyordu. */
  .vhero__film { flex: 1 1 auto; min-width: 0; display: flex; gap: .4rem; overflow-x: auto; scrollbar-width: none; padding: 0 0 .55rem var(--gutter); }
  .vhero__nav { margin-bottom: .55rem; }
  .vhero__nav { flex: none; display: flex; gap: .3rem; padding-right: var(--gutter); }
  .vhero__nb { width: 1.85rem; height: 1.85rem; }
  .vhero__nb .i { font-size: .8rem; }
  .vhero__nb--play { display: none; }   /* oynat/durdur künyede zaten var */
  .vhero__film::-webkit-scrollbar { display: none; }
  .vhero__film button { width: 3.4rem; border-radius: 8px; opacity: .5; }
  .vhero__film button.is-on { opacity: 1; }
  .vhero__cue { display: none; }

  /* İçerik düz kâğıt zeminde */
  .vhero__in {
    padding: .55rem var(--gutter) .8rem;
    justify-content: flex-start; gap: .35rem;
  }
  /* Üst etiket mobilde satır atlamaz: çizgi kısaltılır, punto ve harf
     aralığı 320 px'de bile tek satıra sığacak ölçüye çekilir. */
  .vhero .kick {
    color: var(--ink-3); border-bottom: 0; padding-bottom: 0;
    display: flex; align-items: center; gap: .5rem;
    --kickw: 1.2rem;
    font-size: clamp(.5rem, 2.5vw, .6rem); letter-spacing: .115em; line-height: 1.2;
    white-space: nowrap; text-wrap: nowrap;
  }
  .vhero h1 { max-width: none; font-size: clamp(1.85rem, 8.4vw, 2.35rem); line-height: 1.05; }
  .vhero__lead {
    color: var(--ink-2); font-size: .88rem; line-height: 1.5;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .vhero__act { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; margin-top: .35rem; }
  .vhero__act .btn { justify-content: center; padding: .72rem .6rem; font-size: .79rem; }
  .vhero__act .btn i { display: none; }

  /* Rakamlar tek satırda etiket–değer çiftleri */
  /* Rakamlar: sayılar tek sütunda sağa hizalı, açıklamalar solda hizalı.
     `display: contents` ile dl > div > dd sarmalayıcıları ızgaradan çıkar,
     böylece üç satırın da sayı ve etiket kenarları birbirini tutar. Sayı
     sütunu sola dayalıdır: blok, spot metinle aynı sol hizada başlar. */
  .vhero__facts--mob {
    display: grid; grid-template-columns: max-content minmax(0, 1fr);
    column-gap: .55rem; row-gap: .24rem; align-items: baseline;
    padding-top: .5rem; border-top: 1px solid var(--line-2); margin-top: .4rem;
  }
  .vhero__facts--mob > div,
  .vhero__facts--mob dd { display: contents; }
  .vhero__facts--mob b { justify-self: start; font-size: .92rem; line-height: 1.2; }
  .vhero__facts--mob span {
    display: block; margin: 0; font-size: .64rem; line-height: 1.2;
    white-space: nowrap; color: var(--ink-3);
  }

  /* Sahne künyesi ve oynatma kumandası: içeriğin altında tek sıra */
  .vhero__foot {
    margin: .5rem 0 0; padding: .55rem 0 0; gap: .55rem;
    display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap;
    background: none; border: 0; border-top: 1px solid var(--line-2);
    border-radius: 0; backdrop-filter: none;
  }
  .vhero__panel {
    padding: 0; gap: .15rem; min-width: 0;
    background: none; border: 0;
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  .vhero__panel--facts { display: none; }
  .vhero__panel-t { display: none; }
  .vhero__ctl { gap: .55rem; align-items: center; flex-wrap: nowrap; width: 100%; justify-content: space-between; }
  .vhero__now { border: 0; padding: 0; min-width: 0; gap: .1rem; }
  .vhero__now b { font-size: .8rem; white-space: nowrap; }
  .vhero__now span { font-size: .55rem; letter-spacing: .03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .vhero__btn { padding: .46rem .66rem; font-size: .6rem; flex: none; white-space: nowrap; }
}


/* Kısa mobil ekranlar (iPhone SE, 720–780 px yükseklik): içerik olduğu gibi
   kalırsa film satırı eziliyor, 720 px'de hero 17 px taşıyordu. Bu aralıkta
   spot metin tek satıra iner, başlık ve boşluklar kısılır; film yine ekranın
   dörtte birinden fazlasını korur. */
@media (max-width: 640px) and (max-height: 800px) {
  .vhero__in { padding: .6rem var(--gutter) .7rem; gap: .35rem; }
  .vhero h1 { font-size: clamp(1.6rem, 7.6vw, 2.05rem); }
  .vhero .kick { font-size: clamp(.48rem, 2.4vw, .57rem); letter-spacing: .1em; }
  .vhero__lead { -webkit-line-clamp: 1; font-size: .84rem; }
  .vhero__facts--mob { padding-top: .45rem; margin-top: .35rem; row-gap: .22rem; }
  .vhero__facts--mob b { font-size: .86rem; }
  .vhero__act { margin-top: .35rem; gap: .45rem; }
  .vhero__act .btn { padding: .62rem .5rem; font-size: .75rem; }
  .vhero__foot { margin-top: .4rem; padding-top: .45rem; }
  .vhero__film button { width: 3.1rem; }
}


/* iPhone SE sınıfı çok kısa ekranlar (≤700 px): spot metin gizlenir,
   başlık bir kademe daha küçülür. Hero yine tek ekrana sığar. */
@media (max-width: 640px) and (max-height: 700px) {
  .vhero { grid-template-rows: minmax(4.5rem, 1fr) auto auto; }
  .vhero__in { padding: .5rem var(--gutter) .6rem; }
  .vhero h1 { font-size: clamp(1.45rem, 7vw, 1.8rem); }
  .vhero__lead { display: none; }
  .vhero__facts--mob { padding-top: .4rem; margin-top: .3rem; }
  .vhero__act .btn { padding: .56rem .5rem; font-size: .72rem; }
  .vhero__film button { width: 2.8rem; }
}

/* ======================================================================
   KEN BURNS — durağan fotoğraf akışlarında yavaş yaklaşma/kayma

   Yalnızca `transform` canlandırılır; bu özellik derleyici (compositor)
   üzerinde çalıştığı için ana iş parçacığında kare başına iş çıkmaz,
   yeniden yerleşim (layout) veya boyama (paint) tetiklenmez. Her karede
   stil yazan bir JS döngüsü YOKTUR.

   Üç ayrı yön tanımlıdır; sahneler sırayla değiştiği için ardışık iki
   fotoğraf aynı yöne hareket etmez.

   En küçük ölçek 1.035: `object-fit: cover` ile birlikte her kenarda
   %1,75 pay bırakır, kaydırma en fazla %0,8 olduğu için kenarda boşluk
   açılamaz.
   ====================================================================== */
@keyframes kb-a {
  from { transform: scale(1.100) translate3d(-.8%, -.6%, 0); }
  to   { transform: scale(1.035) translate3d(.7%, .5%, 0); }
}
@keyframes kb-b {
  from { transform: scale(1.035) translate3d(.7%, .5%, 0); }
  to   { transform: scale(1.105) translate3d(-.6%, -.7%, 0); }
}
@keyframes kb-c {
  from { transform: scale(1.090) translate3d(.8%, -.5%, 0); }
  to   { transform: scale(1.040) translate3d(-.7%, .6%, 0); }
}

.vhero__poster.kb-a { animation: kb-a var(--kb, 13s) cubic-bezier(.22,.61,.36,1) forwards; }
.vhero__poster.kb-b { animation: kb-b var(--kb, 13s) cubic-bezier(.22,.61,.36,1) forwards; }
.vhero__poster.kb-c { animation: kb-c var(--kb, 13s) cubic-bezier(.22,.61,.36,1) forwards; }

/* Film oynarken poster görünmez; boşuna canlandırma yapılmaz. */
.vhero.is-video-on .vhero__poster { animation: none; }
/* Hero ekrandan çıkınca canlandırma duraklar — görünmeyen bir katman için
   derleyici çalıştırmanın anlamı yok. */
.vhero.kb-dur .vhero__poster { animation-play-state: paused; }

/* Işık kutusu slayt gösterisi: yalnızca otomatik akış sürerken. */
@keyframes kb-lb {
  from { transform: scale(1) translate3d(0, 0, 0); }
  to   { transform: scale(1.06) translate3d(-.6%, -.5%, 0); }
}
.lightbox__stage img.kb { animation: kb-lb 4.6s ease-out forwards; }

@media (prefers-reduced-motion: reduce) {
  .vhero__poster, .lightbox__stage img { animation: none !important; }
}

/* ======================================================================
   SEKTÖR ÖZET PENCERESİ — zaman çizelgesi kartlarından açılır
   ====================================================================== */
.tl__item--sec .tl__more {
  display: inline-flex; align-items: center; gap: .4rem;
  font: 500 .7rem/1 var(--mono); letter-spacing: .06em; color: var(--ink-3);
  opacity: 0; transform: translateY(4px);
  transition: opacity .35s var(--ease), transform .35s var(--ease), color .3s var(--ease);
}
.tl__item--sec.is-on .tl__more,
.tl__item--sec:hover .tl__more { opacity: 1; transform: none; }
.tl__item--sec:hover .tl__more { color: var(--accent); }

.secmodal {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center; padding: clamp(1rem, 4vw, 2.5rem);
}
.secmodal__veil {
  position: absolute; inset: 0; background: rgba(8, 10, 14, .62);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  opacity: 0; transition: opacity .3s var(--ease);
}
.secmodal.is-on .secmodal__veil { opacity: 1; }
.secmodal__panel {
  position: relative; z-index: 1;
  width: min(100%, 58rem); max-height: min(88svh, 46rem); overflow: auto;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  opacity: 0; transform: translateY(14px) scale(.985);
  transition: opacity .32s var(--ease), transform .38s var(--ease);
}
.secmodal.is-on .secmodal__panel { opacity: 1; transform: none; }
.secmodal__x {
  position: absolute; right: .8rem; top: .8rem; z-index: 3;
  width: 2.3rem; height: 2.3rem; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--line); background: var(--paper); color: var(--ink-2);
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.secmodal__x:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* --- içerik --- */
.smx { display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .smx { grid-template-columns: 26rem minmax(0, 1fr); } }
/* Sol sütun: üstte büyük görsel, altta üç kareli şerit. Izgara satırları
   1fr/auto olduğu için şerit her zaman görünür, büyük görsel kalanı doldurur. */
.smx__media {
  position: relative; background: var(--surface-2);
  display: grid; grid-template-rows: minmax(0, 1fr) auto; min-height: 0;
}
.smx__hero { width: 100%; height: 100%; min-height: 12rem; object-fit: cover; display: block; }
.smx__strip {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px;
  padding: 2px; background: var(--line);
}
.smx__strip img { width: 100%; aspect-ratio: 3/2; object-fit: cover; display: block; }

.smx__body { padding: clamp(1.4rem, 3vw, 2.1rem); display: grid; gap: .75rem; align-content: start; }
.smx__logo { display: block; width: 8.5rem; }
.smx__logo img { width: 100%; height: auto; }
.smx__t { font: 600 clamp(1.3rem, 1.4vw + .8rem, 1.7rem)/1.2 var(--disp); letter-spacing: -.018em; margin: 0; }
.smx__lead { color: var(--ink-2); font-size: .95rem; line-height: 1.6; margin: 0; }

.smx__stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  gap: .9rem 1.2rem; margin: .4rem 0 0;
  padding-top: .9rem; border-top: 1px solid var(--line-2);
}
.smx__stats div { min-width: 0; }
.smx__stats dt { font: 600 1.05rem/1.2 var(--disp); letter-spacing: -.012em; color: var(--accent-2); }
.smx__stats dd { margin: .3rem 0 0; font: 400 .7rem/1.4 var(--mono); color: var(--ink-3); }
.smx__tags { margin-top: .3rem; }
.smx__act { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .9rem; }

@media (prefers-reduced-motion: reduce) {
  .secmodal__veil, .secmodal__panel { transition: none; }
}
/* ==========================================================================
   18. Mobil tipografi düzeltmeleri

   Mono etiketlerin geniş harf aralığı (.03em–.18em) dar ekranda metni
   ikinci satıra taşırıyordu; iki kelimelik bir etiketin alt alta düşmesi
   hizayı bozuyor. Aralık daraltılıp satır bölünmesi dengelendi — punto
   ve tasarım dili aynı kaldı, yalnızca sıkışma giderildi.
   ========================================================================== */
@media (max-width: 620px) {

  /* Bölüm numaraları / küçük başlıklar: "BİRİM GENEL MÜDÜRLERİ VE
     DEPARTMAN YÖNETİCİLERİ" gibi uzun etiketler dengeli bölünür. */
  .idx {
    letter-spacing: clamp(.03em, .32vw, .085em);
    font-size: clamp(.555rem, 2.75vw, .625rem);
    line-height: 1.5;
    text-wrap: balance;
  }

  /* İstatistik/ilke açıklamaları: "Güvenli çalışma ve sürekli eğitim"
     gibi satırlar artık tek satıra sığıyor. */
  .stat span {
    letter-spacing: 0;
    font-size: clamp(.615rem, 3.1vw, .715rem);
    max-width: none;
    text-wrap: pretty;
  }

  /* Genel kural: mono gövde metinleri dar ekranda dengeli sarsın. */
  .kick, .hq__tag span, .loc dd, .formnote { text-wrap: pretty; }
  .kick { letter-spacing: .1em; }
}

/* ------------------------------------------------ İletişim öbeği · mobil
   Satırlar tek tek liste öğesiydi; her birinin arasına aynı boşluk girince
   blok dağınık görünüyordu. Aralıklar daraltıldı, adres öbeği başlığına
   bağlandı ve numara/e-posta satırlarının bölünmesi engellendi. */
@media (max-width: 620px) {
  .foot__cols h3 { margin-bottom: .7rem; }
  .foot__cols ul { gap: .5rem; }

  .foot__contact { font-size: .862rem; }
  .foot__contact span { line-height: 1.48; }
  .foot__yer span { text-wrap: balance; }

  .foot__yer { margin-bottom: .28rem; }
  .foot__yer strong { margin-bottom: .1rem; }

  .foot__contact a,
  .foot__contact li > span:only-child { white-space: nowrap; }

  /* İLETİŞİM KANALLARI YAN YANA.
     Telefon, ikinci numara, e-posta ve faks tek tek alt alta diziliyordu;
     dördü de kısa olduğu hâlde blok dört satır uzuyordu. Artık satır
     boyunca akıyorlar, yalnızca sığmayan bir sonrakine geçiyor. */
  .foot__cols ul.foot__contact {
    display: flex;
    flex-wrap: wrap;
    gap: .34rem .72rem;
    align-items: baseline;
    font-size: .845rem;
  }
  .foot__cols ul.foot__contact > .foot__yer { flex: 1 0 100%; }
  .foot__cols ul.foot__contact > li { flex: 0 0 auto; }
}

/* ------------------------------------------------ Alt bilgi · mobil
   İmza küçültülüp ortalandı; yasal bağlantılar tek sıraya alındı ve
   sağ alttaki yukarı-çık düğmesi için altta boşluk bırakıldı. */
@media (max-width: 620px) {
  .foot__bottom {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .85rem;
    /* Sağ alttaki yukarı-çık düğmesi için yalnızca gerektiği kadar yer:
       düğme alttan .9rem + 3rem yer kaplıyor, üstünde ~1 satır boşluk
       kalacak şekilde ayarlandı. Daha azı düğmeyle üst üste bindiriyor. */
    padding-bottom: 2.9rem;
  }
  .foot__legal { justify-items: center; gap: .25rem; }

  /* TELİF ve İMZA tek satırda kalır. İkisi de mono ve uzun; sabit puntoda
     dar ekranda ortadan bölünüyor, ortalanmış iki satır hizayı bozuyordu.
     Punto ekran genişliğine bağlandı, harf aralığı sıfırlandı. */
  .foot__legal p {
    white-space: nowrap;
    letter-spacing: 0;
  }
  .foot__legal > p:first-child {
    font-size: clamp(.6rem, 3.05vw, .775rem);
  }
  .foot__imza {
    font-size: clamp(.5rem, 2.5vw, .655rem);
    line-height: 1.45;
  }
  .foot__bottom ul {
    padding-right: 0;
    justify-content: center;
    gap: .55rem .85rem;
    font-size: .68rem;
    letter-spacing: .01em;
  }
}
@media (max-width: 380px) {
  .foot__bottom ul { font-size: .625rem; gap: .5rem .6rem; }
}