/* ==========================================================================
   DSG MEDIA — Demo 1 "Vizör"
   Tasarım fikri: site DSG'nin kendi kamerasından izleniyor. Yapı gerçek
   çekim formatlarından (9:16 / 4:5 / 1:1 / 16:9) türetiliyor — süs değil,
   içeriğin ne olduğunu söyleyen bir bilgi katmanı.
   ========================================================================== */

/* --- 1. Tokenlar ---------------------------------------------------------- */
:root {
  /* Renk — logodan örneklendi (#0E0B0B gövde, #621F21 bordo) */
  --ink:      #12100F;   /* sıcak siyah, saf siyah değil */
  --ink-2:    #1A1615;   /* yükseltilmiş yüzey */
  --ink-3:    #262120;   /* kıl payı çizgi */
  --ox:       #6E2126;   /* bordo — markanın kendi rengi */
  --ember:    #A8323A;   /* kızıl — YALNIZCA aktif/canlı öğelerde */
  --brass:    #B08D57;   /* pirinç — müşteri logolarının altın dünyasından */
  --bone:     #F0EBE4;   /* birincil metin */
  --dim:      #9C938C;   /* ikincil metin */
  --dimmer:   #6B6360;

  /* Tipografi */
  --f-disp: "Archivo", ui-sans-serif, system-ui, sans-serif;
  --f-body: "Schibsted Grotesk", ui-sans-serif, system-ui, sans-serif;
  --f-mono: "Martian Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --t-xs:  clamp(.6875rem, .66rem + .12vw, .75rem);
  --t-sm:  clamp(.8125rem, .78rem + .16vw, .9375rem);
  --t-b:   clamp(1rem, .955rem + .22vw, 1.125rem);
  --t-lg:  clamp(1.125rem, 1.03rem + .48vw, 1.4375rem);
  --t-xl:  clamp(1.5rem, 1.28rem + 1.1vw, 2.25rem);
  --t-2xl: clamp(2rem, 1.5rem + 2.5vw, 3.5rem);
  --t-3xl: clamp(2.75rem, 1.6rem + 5.6vw, 6.5rem);

  /* Ritim */
  --pad:   clamp(1.25rem, 4vw, 3rem);
  --sec-y: clamp(4rem, 7.5vw, 7.5rem);
  --wrap:  1240px;
  --r:     2px;          /* neredeyse köşesiz — optik alet hissi */

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* Film grenini SVG turbulence ile üretiyoruz — görsel dosyası yok */
:root {
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)' opacity='.42'/%3E%3C/svg%3E");
}

/* --- 2. Temel ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--f-body);
  font-size: var(--t-b);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }

h1, h2, h3 {
  font-family: var(--f-disp);
  font-weight: 800;
  font-stretch: 118%;            /* Archivo'nun genişlik ekseni — jenerik title-card hissi */
  line-height: .96;
  letter-spacing: -.022em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

:focus-visible {
  outline: 2px solid var(--ember);
  outline-offset: 3px;
}

.skip {
  position: absolute; left: -999px; top: 0; z-index: 200;
  background: var(--ember); color: var(--bone);
  padding: .75rem 1.25rem; font-size: var(--t-sm);
}
.skip:focus { left: 0; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--pad);
}

/* Küçük teknik etiket — tüm sitede aynı ses */
.eyebrow {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dim);
  display: flex;
  align-items: center;
  gap: .625rem;
  margin: 0 0 1.25rem;
}
.eyebrow .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ember);
  box-shadow: 0 0 0 4px rgba(168, 50, 58, .16);
  flex: none;
}

.note {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: .04em;
  color: var(--dimmer);
  border-left: 2px solid var(--ink-3);
  padding-left: .875rem;
  margin-top: 2.5rem;
  max-width: 56ch;
  line-height: 1.7;
}

/* --- 3. Butonlar ---------------------------------------------------------- */
.btn {
  --btn-bg: transparent;
  --btn-fg: var(--bone);
  --btn-bd: var(--ink-3);
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .875rem 1.5rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  border-radius: var(--r);
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.btn--solid { --btn-bg: var(--ox); --btn-bd: var(--ox); }
.btn--solid:hover { --btn-bg: var(--ember); --btn-bd: var(--ember); }
.btn--ghost:hover { --btn-bd: var(--bone); }

/* --- 4. Başlık ------------------------------------------------------------ */
.hdr {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  transition: background .3s var(--ease), border-color .3s var(--ease);
  border-bottom: 1px solid transparent;
}
.hdr.is-stuck {
  background: rgba(18, 16, 15, .82);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--ink-3);
}
.hdr__in {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: .875rem var(--pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.hdr__logo img { width: 152px; height: auto; }

.nav { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2rem); }
.nav a {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--dim);
  padding: .375rem 0;
  transition: color .2s var(--ease);
}
.nav a:hover { color: var(--bone); }
.nav__cta {
  color: var(--bone) !important;
  border: 1px solid var(--ink-3);
  border-radius: var(--r);
  padding: .625rem 1.125rem !important;
}
.nav__cta:hover { border-color: var(--ember); }

.burger {
  display: none;
  width: 44px; height: 44px;
  background: none; border: 1px solid var(--ink-3); border-radius: var(--r);
  cursor: pointer;
  padding: 0;
  place-items: center;
  gap: 5px;
}
.burger span { display: block; width: 18px; height: 1.5px; background: var(--bone); transition: transform .3s var(--ease); }

/* --- 5. HERO : imza an ---------------------------------------------------- */
/* Kadraj 9:16'dan 16:9'a açılıyor — hizmeti anlatmıyor, gösteriyor. */
.hero { --t: 0; --shift: min(30vw, 430px); position: relative; }
.hero__runway { height: 200svh; }
.hero__stage {
  position: sticky;
  top: 0;
  height: 100svh;
  padding-top: 6.5rem;              /* sabit başlığın altında ortalansın */
  display: grid;
  place-items: center;
  overflow: hidden;
}

.frame {
  grid-area: 1 / 1;
  position: relative;
  /* hedef yükseklikten ve orandan ideal genişliği hesapla, sonra ekranla sınırla */
  width: min(92vw, calc((.5625 + var(--t) * 1.2153) * (70svh - var(--t) * 12svh)));
  aspect-ratio: calc(.5625 + var(--t) * 1.2153);
  /* t=0'da sağda durur (başlıkla çakışmaz), açıldıkça ortaya gelir */
  translate: calc((1 - var(--t)) * var(--shift)) 0;
  border: 1px solid var(--ink-3);
  border-radius: var(--r);
  overflow: hidden;
  will-change: width, translate;
}
.frame__field {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 80% at 22% 18%, rgba(168, 50, 58, .30), transparent 62%),
    radial-gradient(90% 70% at 82% 88%, rgba(176, 141, 87, .16), transparent 60%),
    linear-gradient(168deg, #1E1614 0%, #12100F 55%, #0C0A09 100%);
}
.frame__grain {
  position: absolute; inset: 0;
  background-image: var(--grain);
  opacity: .5;
  mix-blend-mode: overlay;
  pointer-events: none;
}
/* Kadraj genişleyince başlık üstüne biniyor — okunurluk için alt perde */
.frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Kadraj açılınca başlık gerçek görüntünün üstüne biniyor. Alttan perde
     metnin tamamını, soldan perde de sola hizalı bloğu kapsıyor; sağ taraf
     açık kalıyor, film jeneriği gibi. */
  background:
    linear-gradient(to top,  rgba(14, 12, 11, .94) 0%, rgba(14, 12, 11, .8) 26%, rgba(14, 12, 11, .42) 58%, transparent 82%),
    linear-gradient(to right, rgba(14, 12, 11, .82) 0%, rgba(14, 12, 11, .34) 44%, transparent 72%);
  opacity: var(--t);
  pointer-events: none;
}

/* Kadraj köşe işaretleri */
.br { position: absolute; z-index: 2; width: 20px; height: 20px; border: 1.5px solid rgba(240, 235, 228, .5); }
.br--tl { top: 12px; left: 12px;  border-right: 0; border-bottom: 0; }
.br--tr { top: 12px; right: 12px; border-left: 0;  border-bottom: 0; }
.br--bl { bottom: 12px; left: 12px;  border-right: 0; border-top: 0; }
.br--br { bottom: 12px; right: 12px; border-left: 0;  border-top: 0; }

/* Kamera HUD'u */
.hud {
  position: absolute;
  left: 0; right: 0;
  z-index: 2;
  display: flex;
  gap: 1.25rem;
  padding: 1.375rem 2.75rem;
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: .1em;
  color: rgba(240, 235, 228, .72);
}
.hud--top { top: 0; justify-content: space-between; }
/* Alt HUD sağa toplanır — sol alt köşe başlık bloğuna ait */
.hud--bot { bottom: 0; justify-content: flex-end; }
.rec { display: inline-flex; align-items: center; gap: .5rem; color: var(--ember); }
.rec i {
  width: 8px; height: 8px; border-radius: 50%; background: var(--ember);
  animation: blink 1.6s steps(1, end) infinite;
}
@keyframes blink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: .18; } }
.ratio { color: var(--bone); font-weight: 600; }
.ratio__what { color: rgba(240, 235, 228, .6); }

/* Başlık bloğu — film jeneriği gibi sol altta */
.hero__type {
  grid-area: 1 / 1;
  align-self: center;
  justify-self: center;
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: var(--wrap);
  /* Kadrajla AYNI yükseklik: başlık bloğunun tabanı kadrajın tabanına
     oturur, böylece butonlar kadrajın dışına taşmaz. */
  height: calc(70svh - var(--t) * 12svh);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 var(--pad) clamp(1.5rem, 4vh, 3rem);
  pointer-events: none;
}
.hero__type > * { pointer-events: auto; }

.hero__h1 {
  font-size: var(--t-3xl);
  font-weight: 900;
  max-width: 14ch;
  margin-bottom: 1.5rem;
}
.hero__h1 em {
  font-style: normal;
  color: var(--ember);
}
.hero__lead {
  font-size: var(--t-lg);
  color: var(--dim);
  max-width: 46ch;
  line-height: 1.55;
  margin-bottom: 2rem;
}
.hero__cta { display: flex; flex-wrap: wrap; gap: .75rem; }

/* --- 6. Bölüm iskeleti ---------------------------------------------------- */
/* Dolgu TEK yerde tanımlı; modifier'lar yalnızca zemin değiştirir. */
.sec { padding-block: var(--sec-y); position: relative; }
.sec--formats { background: var(--ink-2); border-block: 1px solid var(--ink-3); }
.sec--about   { background: var(--ink-2); border-block: 1px solid var(--ink-3); }

.sec__head { max-width: 62ch; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.sec__head--row {
  max-width: none;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.sec__h2 { font-size: var(--t-2xl); margin-bottom: 1.25rem; }
.sec__intro { color: var(--dim); font-size: var(--t-lg); max-width: 52ch; line-height: 1.55; }

/* --- 7. Formatlar --------------------------------------------------------- */
.formats {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  align-items: end;
}
.fmt__box {
  aspect-ratio: var(--ar);
  width: 100%;
  max-width: 190px;
  border: 1px solid var(--ink-3);
  border-radius: var(--r);
  background:
    linear-gradient(155deg, rgba(110, 33, 38, .22), transparent 70%),
    var(--ink);
  display: grid;
  place-items: center;
  margin-bottom: 1.25rem;
  transition: border-color .3s var(--ease);
}
.fmt:hover .fmt__box { border-color: var(--ox); }
.fmt__box span {
  font-family: var(--f-mono);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--brass);
}
.fmt h3 { font-size: var(--t-lg); margin-bottom: .5rem; }
.fmt p { color: var(--dim); font-size: var(--t-sm); line-height: 1.6; }

/* --- 8. Hizmetler --------------------------------------------------------- */
/* Sütun sayısı açıkça tanımlı: auto-fit ile "drone 2 sütun kaplasın" kuralı
   bazı genişliklerde boş hücre bırakıyordu. 8 kart + 1 geniş = 9 hücre = 3x3. */
.svcs {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  gap: 1px;
  background: var(--ink-3);
  border: 1px solid var(--ink-3);
  border-radius: var(--r);
  overflow: hidden;
  grid-template-columns: 1fr;
}
/* 8 hizmet = 4+4. 3 sütun + geniş kart yerine eşit ızgara.
   4 sütuna 1200px'in altında geçilmiyor: 1040'ta kart 236px'e düşüyor,
   başlıklar ve diyagramlar sıkışıyordu. */
@media (min-width: 640px)  { .svcs { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .svcs { grid-template-columns: repeat(4, 1fr); } }

.svc {
  background: var(--ink);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  display: flex;
  flex-direction: column;
  transition: background .3s var(--ease);
}
.svc:hover { background: var(--ink-2); }
.svc__t { font-size: var(--t-lg); margin-bottom: .875rem; text-wrap: pretty; }
.svc__d { color: var(--dim); font-size: var(--t-sm); line-height: 1.65; flex: 1; margin-bottom: 1.5rem; }
.svc__tags { display: flex; flex-wrap: wrap; gap: .375rem; margin: 0; }
.svc__tags span {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: .06em;
  color: var(--brass);
  border: 1px solid rgba(176, 141, 87, .28);
  border-radius: var(--r);
  padding: .25rem .5rem;
}

/* --- 9. İşler ------------------------------------------------------------- */
.work {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
}
.wk {
  border: 1px solid var(--ink-3);
  border-radius: var(--r);
  padding: clamp(1.5rem, 2.5vw, 2rem);
  background: var(--ink);
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.wk:hover { border-color: var(--ox); background: var(--ink-2); }
.wk__logo {
  height: 120px;
  display: grid;
  place-items: center;
  margin-bottom: 1.75rem;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid var(--ink-3);
}
.wk__logo img {
  max-height: 84px;   /* iç yükseklik 91px — ayıraç çizgisine değmesin */
  width: auto;
  opacity: .82;
  transition: opacity .3s var(--ease);
}
.wk:hover .wk__logo img { opacity: 1; }
.wk__logo--type {
  font-family: var(--f-disp);
  font-weight: 800;
  font-stretch: 118%;
  text-align: center;
  line-height: 1.05;
  letter-spacing: -.01em;
  font-size: 1.375rem;
  color: rgba(240, 235, 228, .82);
}
.wk__logo--type small {
  display: block;
  font-family: var(--f-mono);
  font-size: .625rem;
  font-weight: 400;
  letter-spacing: .22em;
  color: var(--dimmer);
  margin-top: .5rem;
}
.wk__meta {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: .75rem;
}
.wk__sector { color: var(--dim); }
.wk__fmt { color: var(--brass); }
.wk__t { font-size: var(--t-lg); margin-bottom: .625rem; }
.wk__d { color: var(--dim); font-size: var(--t-sm); line-height: 1.6; }

/* --- 10. Reels şeridi ----------------------------------------------------- */
/* Facade: gerçek gömme yerine kapak + oynat; tıklanınca oynatıcı yüklenir.
   Instagram/TikTok'un resmî embed scriptleri LCP'yi bozduğu için. */
.reels {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  gap: clamp(.75rem, 1.5vw, 1.25rem);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.reel__btn {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  padding: 0;
  border: 1px solid var(--ink-3);
  border-radius: var(--r);
  background: none;
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  transition: border-color .3s var(--ease);
}
.reel__btn:hover { border-color: var(--ox); }
.reel__play {
  position: absolute;
  top: 50%; left: 50%;
  translate: -50% -50%;
  width: 54px; height: 54px;
  border: 1px solid rgba(240, 235, 228, .55);
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: background .3s var(--ease), border-color .3s var(--ease), scale .3s var(--ease);
}
.reel__play::before {
  content: "";
  width: 0; height: 0;
  border-left: 11px solid var(--bone);
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  margin-left: 3px;
}
.reel__btn:hover .reel__play { background: var(--ox); border-color: var(--ox); scale: 1.08; }
.reel__cap {
  position: absolute;
  left: 1rem; right: 1rem; bottom: 1rem;
  z-index: 2;
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--bone);
  text-shadow: 0 1px 12px rgba(0, 0, 0, .8);
}
.reel__ratio {
  position: absolute;
  top: 1rem; left: 1rem;
  z-index: 2;
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: .08em;
  color: rgba(240, 235, 228, .6);
}

/* --- 11. Hakkımızda ------------------------------------------------------- */
.about {
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
  grid-template-columns: 1fr;
}
.about__r p { color: var(--dim); line-height: 1.75; margin-bottom: 1.25rem; }
.about__lead { color: var(--bone) !important; font-size: var(--t-lg); line-height: 1.6 !important; }

/* --- 12. Blog ------------------------------------------------------------- */
.posts {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  gap: 1px;
  background: var(--ink-3);
  border-block: 1px solid var(--ink-3);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.post { background: var(--ink); padding: clamp(1.75rem, 3vw, 2.5rem); transition: background .3s var(--ease); }
.post:hover { background: var(--ink-2); }
.post__meta {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--dimmer);
  margin-bottom: 1rem;
}
.post__t { font-size: var(--t-lg); margin-bottom: .75rem; }
.post__t a { text-decoration: none; background-image: linear-gradient(var(--ember), var(--ember)); background-size: 0 1px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size .35s var(--ease); }
.post__t a:hover { background-size: 100% 1px; }
.post__d { color: var(--dim); font-size: var(--t-sm); line-height: 1.6; }

/* --- 13. İletişim --------------------------------------------------------- */
.contact { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); grid-template-columns: 1fr; }

.info { margin: 2.5rem 0 0; display: grid; gap: 1.5rem; }
.info dt {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dimmer);
  margin-bottom: .375rem;
}
.info dd { margin: 0; font-size: var(--t-b); line-height: 1.55; }
.info a { color: var(--bone); text-decoration-color: var(--ox); text-underline-offset: 4px; }
.info a:hover { color: var(--ember); }

.form { display: grid; gap: 1.25rem; grid-template-columns: repeat(2, 1fr); align-content: start; }
.field { display: flex; flex-direction: column; gap: .5rem; }
.field--full { grid-column: 1 / -1; }
.field label {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--dim);
}
.field input, .field select, .field textarea {
  background: var(--ink-2);
  border: 1px solid var(--ink-3);
  border-radius: var(--r);
  padding: .875rem 1rem;
  font-size: var(--t-sm);
  transition: border-color .25s var(--ease);
  width: 100%;
}
.field textarea { resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--ox); outline: none; }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--dim) 50%), linear-gradient(135deg, var(--dim) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; }
.form__note { font-family: var(--f-mono); font-size: var(--t-xs); color: var(--dimmer); margin: 1rem 0 0; line-height: 1.6; }

/* --- 14. Alt bilgi -------------------------------------------------------- */
.ftr { border-top: 1px solid var(--ink-3); padding-block: clamp(2.5rem, 5vw, 4rem); }
.ftr__logo { width: 150px; opacity: .7; }

/* --- 15. Görünüme girme --------------------------------------------------- */
.rv { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.rv.in { opacity: 1; transform: none; }

/* --- 16. Duyarlılık ------------------------------------------------------- */
@media (min-width: 760px) {
  .about   { grid-template-columns: 1fr 1.25fr; }
  .contact { grid-template-columns: 1fr 1.1fr; }
}

/* Hero'nun dikey düzene geçişi 900px — menüden BAĞIMSIZ.
   720'de bırakınca 768px'te kadraj (yan kayma + genişlik) ekranı 24px aşıyordu.
   Ayrıca dar kadrajda başlığı içine yerleştirmek okunmaz hale getiriyor,
   o yüzden burada kadraj üstte, metin altında akıyor. */
@media (max-width: 900px) {
  .hero { --shift: 0px; }
  /* Mobilde yapışkan koşu şeridi yok: kadraj morfu küçük ekranda zaten zor
     fark ediliyordu, buna karşılık kullanıcı içeriğe varmak için iki ekran
     boyu kaydırıyor ve sahnenin boş alt kısmı bölüm başlığının üstünde
     bant olarak görünüyordu. Hero normal akışta, kendi boyunda. */
  .hero__runway { height: auto; }
  .hero__stage {
    position: static;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: clamp(1.125rem, 3vw, 1.75rem);
    padding: 6rem var(--pad) clamp(2.5rem, 6vw, 3.5rem);
  }
  .frame {
    /* Dar ekranda morf yok, kadraj sabit 9:16 durur. Genişlik --t'ye
       bağlanırsa kadrajın yüksekliği hero'nun yüksekliğini değiştirir;
       hero yüksekliği de --t hesabının girdisi olduğu için sayfa kaydırırken
       aşağı yukarı zıplar. 40svh iken açılıştaki CTA'lar alt barda kalıyordu. */
    width: min(92vw, calc(.5625 * 33svh));
    aspect-ratio: .5625;
    margin-inline: auto;
    translate: none;
    will-change: auto;
  }
  .frame::after { opacity: 0; }        /* metin artık üstünde değil */
  .hero__type {
    height: auto;
    width: 100%;
    max-width: 46rem;
    margin-inline: auto;
    padding: 0;
    display: block;
  }
  .ratio__what { display: none; }      /* dar kadrajda sığmıyor */
}

@media (max-width: 720px) {
  .hdr__logo img { width: 128px; }
  .burger { display: grid; }
  .nav {
    position: fixed;
    inset: 0 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 6rem var(--pad) 2rem;
    background: var(--ink);
    border-bottom: 1px solid var(--ink-3);
    transform: translateY(-100%);
    transition: transform .4s var(--ease);
    visibility: hidden;
  }
  .nav.is-open { transform: none; visibility: visible; }
  .nav a { padding: 1rem 0; border-bottom: 1px solid var(--ink-3); font-size: var(--t-sm); }
  .nav__cta { border: 1px solid var(--ink-3) !important; margin-top: 1.25rem; text-align: center; }
  .hud { padding: 1rem 1.25rem; }
  .br { width: 18px; height: 18px; }
  .br--tl, .br--tr { top: 10px; } .br--bl, .br--br { bottom: 10px; }
  .br--tl, .br--bl { left: 10px; } .br--tr, .br--br { right: 10px; }
  .form { grid-template-columns: 1fr; }
  .hero__lead { font-size: var(--t-b); }
}

/* Hareket azaltma: kadraj sabit sinema oranında, koşu şeridi yok */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero { --t: 1 !important; }
  .hero__runway { height: auto; }
  .hero__stage { position: static; height: auto; padding-block: 8rem 4rem; }
  .hero__type { position: static; margin-top: 2.5rem; padding-inline: 0; }
  .rec i { animation: none; }
  .rv { opacity: 1; transform: none; transition: none; }
  * { transition-duration: .01ms !important; }
}

/* Reels kareleri birbirinin kopyası görünmesin — her biri farklı ışık alır */
.reel:nth-child(2) .reel:nth-child(3) .reel:nth-child(4) 

/* --- Gerçek video: kapak + tıkla-oynat ------------------------------------
   Sayfa açılışında yalnızca kapak JPEG'i yüklenir (lazy). mp4 ancak
   tıklandığında indirilir — üçüncü parti gömme scripti yok.            */
.reel__btn img, .vfeat__btn img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: scale .5s var(--ease);
}
.reel__btn:hover img, .vfeat__btn:hover img { scale: 1.045; }
.reel__btn::before, .vfeat__btn::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  /* alt perde: başlık için. ÜST perde: oran etiketi parlak karelerde
     okunmuyordu, ikinci katman onun için. */
  background:
    linear-gradient(to top, rgba(8,7,6,.9) 0%, rgba(8,7,6,.3) 40%, transparent 66%),
    linear-gradient(to bottom, rgba(8,7,6,.6) 0%, rgba(8,7,6,.15) 14%, transparent 26%);
}
.reel__play, .vplay, .reel__cap, .reel__ratio, .vcap, .vtag { z-index: 3; }
.reel__cap b, .vcap b {
  display: block;
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: .25rem;
}
.reel__cap, .vcap { text-shadow: 0 1px 14px rgba(0,0,0,.85); }

/* 16:9 öne çıkan iş */
.vfeat { margin-bottom: clamp(.75rem, 1.5vw, 1.25rem); }
.vfeat__btn {
  position: relative; display: block; width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0; border: 1px solid var(--ink-3); border-radius: var(--r);
  background: #0B0A09; overflow: hidden; cursor: pointer; text-align: left;
  transition: border-color .3s var(--ease);
}
.vfeat__btn:hover { border-color: var(--ox); }
.vplay {
  position: absolute; top: 50%; left: 50%; translate: -50% -50%;
  width: clamp(56px, 6vw, 74px); aspect-ratio: 1;
  border: 1px solid rgba(245,242,238,.6); border-radius: 50%;
  display: grid; place-items: center;
  transition: background .3s var(--ease), border-color .3s var(--ease), scale .3s var(--ease);
}
.vplay::before {
  content: ""; width: 0; height: 0;
  border-left: 15px solid #F5F2EE;
  border-top: 10px solid transparent; border-bottom: 10px solid transparent;
  margin-left: 4px;
}
.vfeat__btn:hover .vplay { background: var(--ox); border-color: var(--ox); scale: 1.08; }
.vcap {
  position: absolute; left: clamp(1rem,2.5vw,1.75rem); right: clamp(1rem,2.5vw,1.75rem);
  bottom: clamp(.875rem,2vw,1.375rem);
  font-size: var(--t-b); font-weight: 500; color: #F5F2EE;
}
.vtag {
  position: absolute; top: clamp(.875rem,2vw,1.375rem); left: clamp(1rem,2.5vw,1.75rem);
  font-family: var(--f-mono); font-size: var(--t-xs);
  letter-spacing: .08em; color: rgba(245,242,238,.72);
}

/* oynatılırken kapak gizlenir, yerine gerçek oynatıcı gelir */
.is-playing .reel__btn, .is-playing .vfeat__btn { display: none; }
.vplayer {
  display: block; width: 100%; background: #000;
  border: 1px solid var(--ox); border-radius: var(--r);
}
.reel .vplayer  { aspect-ratio: 9 / 16; }
.vfeat .vplayer { aspect-ratio: 16 / 9; }

.reel__ratio, .vtag {
  color: rgba(245, 242, 238, .9);
  text-shadow: 0 1px 10px rgba(0, 0, 0, .9);
}


/* --- Hızlı iletişim -------------------------------------------------------
   Masaüstü: sağ altta dikey haplar, üzerine gelince etiket açılır.
   Mobil: ekranın altına sabit bar (safe-area dahil).
   Hiyerarşi: yeşil = yaz (birincil), bordo = ara, nötr = takip et.      */
.qc {
  position: fixed;
  z-index: 120;
  right: clamp(.75rem, 1.6vw, 1.5rem);
  bottom: clamp(1rem, 3vh, 2rem);
  display: flex;
  flex-direction: column;
  gap: .5rem;
  align-items: flex-end;
}
.qc__a {
  display: flex;
  align-items: center;
  height: 48px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid transparent;
  text-decoration: none;
  overflow: hidden;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .45);
  transition: background .25s var(--ease), border-color .25s var(--ease), translate .25s var(--ease);
}
.qc__a:hover { translate: -2px 0; }
.qc__a svg { width: 21px; height: 21px; fill: currentColor; flex: none; }
.qc__t {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: .07em;
  text-transform: uppercase;
  white-space: nowrap;
  max-width: 0;
  padding-left: 0;
  opacity: 0;
  transition: max-width .3s var(--ease), padding-left .3s var(--ease), opacity .22s var(--ease);
}
.qc__a:hover .qc__t, .qc__a:focus-visible .qc__t { max-width: 10rem; padding-left: .625rem; opacity: 1; }

.qc__a--wa  { background: #1E6F4A; color: #F2F7F4; }
.qc__a--wa:hover  { background: #24895B; }
.qc__a--tel { background: var(--ox); color: var(--bone); }
.qc__a--tel:hover { background: var(--ember); }
.qc__a--ig  { background: var(--ink-2); color: var(--bone); border-color: var(--ink-3); }
.qc__a--ig:hover  { border-color: var(--bone); }

@media (max-width: 720px) {
  /* Alt bar: içerik altında kalmasın diye body'ye dolgu veriliyor */
  .qc {
    right: 0; left: 0; bottom: 0;
    flex-direction: row;
    gap: 0;
    align-items: stretch;
    background: rgba(18,16,15,.94);
    border-top: 1px solid var(--ink-3);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }
  .qc__a {
    flex: 1;
    height: 58px;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    padding: 0;
    border-radius: 0;
    border: 0;
    box-shadow: none;
    background: transparent;
    color: var(--bone);
  }
  .qc__a:hover { translate: none; }
  .qc__a--wa  { color: #35B678; }
  .qc__a--wa:hover, .qc__a--tel:hover, .qc__a--ig:hover { background: transparent; }
  .qc__a + .qc__a { border-left: 1px solid var(--ink-3); }
  .qc__a svg { width: 20px; height: 20px; }
  .qc__t {
    max-width: none;
    padding-left: 0;
    opacity: 1;
    font-size: .625rem;
    letter-spacing: .04em;
  }
  body { padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px)); }
}


/* --- Hikayeler ------------------------------------------------------------
   Halka Instagram'ın degradesi DEĞİL: hikaye ilerleme çubuğu gibi bölmeli
   ve markanın kendi renginde. Tanınırlık biçimden geliyor, renkten değil. */
.stories { padding-block: clamp(2.5rem, 5vw, 4rem); background: var(--ink); border-block: 1px solid var(--ink-3); }
.stories__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap; margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
.stories__h2 { font-size: var(--t-xl); margin: 0; }
.stories__all {
  font-family: var(--f-mono); font-size: var(--t-xs);
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--ember); text-decoration: none;
  border-bottom: 1px solid transparent; padding-bottom: 2px;
  transition: border-color .25s var(--ease);
}
.stories__all:hover { border-bottom-color: var(--ember); }

.stories__row {
  list-style: none; margin: 0; padding: 0 0 .5rem;
  display: flex;
  gap: clamp(.75rem, 1.5vw, 1.25rem);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: var(--ink-3) transparent;
  -webkit-overflow-scrolling: touch;
}
.stories__row::-webkit-scrollbar { height: 3px; }
.stories__row::-webkit-scrollbar-thumb { background: var(--ink-3); }

.story { scroll-snap-align: start; flex: none; }
.story__a {
  display: grid; justify-items: center; gap: .625rem;
  text-decoration: none; width: var(--sz, 88px);
}
.story__ring {
  position: relative; display: block;
  width: var(--sz, 88px); aspect-ratio: 1;
}
.story__ring::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  /* 8 bölme: hikaye ilerleme çubuğunun daireye sarılmış hâli */
  background: repeating-conic-gradient(from -90deg, var(--ember) 0deg 39deg, transparent 39deg 45deg);
  transition: rotate .7s var(--ease), opacity .25s var(--ease);
  opacity: .85;
}
.story__a:hover .story__ring::before { rotate: 45deg; opacity: 1; }
.story__ring img {
  position: absolute; top: 5px; left: 5px;
  width: calc(100% - 10px); height: calc(100% - 10px);
  border-radius: 50%; object-fit: cover;
  border: 2px solid var(--ink);
  transition: scale .35s var(--ease);
}
.story__a:hover .story__ring img { scale: 1.04; }
.story__t {
  font-family: var(--f-mono); font-size: .625rem;
  letter-spacing: .04em; color: var(--dim);
  text-align: center; line-height: 1.35;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: color .25s var(--ease);
}
.story__a:hover .story__t { color: var(--bone); }

@media (min-width: 760px) { .story__a, .story__ring { --sz: 96px; } }
@media (max-width: 480px) { .story__a, .story__ring { --sz: 76px; } }

@media (prefers-reduced-motion: reduce) {
  .story__a:hover .story__ring::before { rotate: none; }
}


/* --- Vizördeki görüntü ----------------------------------------------------
   Kadraj dar iken dikey klipler, 16:9'a açılınca yatay çekim. Geçiş
   çapraz sönümle. Gren katmanı DOM'da sonra geldiği için videonun üstünde
   kalır — gerçek görüntüye film greni biner.                            */
.frame__media { position: absolute; inset: 0; }
.frame__v {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .7s var(--ease);
}
.frame__v--dikey { opacity: 1; }
.frame.is-wide .frame__v--dikey { opacity: 0; }
.frame.is-wide .frame__v--yatay { opacity: 1; }
/* HUD yazıları parlak kareye denk gelince okunmuyordu — üst ve alt perde */
.frame__media::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(8, 7, 6, .72) 0%, rgba(8, 7, 6, .3) 12%, transparent 22%),
    linear-gradient(to top,    rgba(8, 7, 6, .68) 0%, rgba(8, 7, 6, .28) 12%, transparent 22%);
}

/* ==========================================================================
   ÖNİZLEME SEÇENEKLERİ — açık/koyu mod ve kadraj deseni
   Müşteri seçimini yaptıktan sonra bu bölüm ve panel kaldırılacak,
   seçilen değerler :root'a sabitlenecek.
   ========================================================================== */

/* --- Açık mod tokenları --------------------------------------------------- */
[data-tema="acik"] {
  --ink:      #F5F2EC;   /* sıcak kağıt */
  --ink-2:    #EBE6DC;
  --ink-3:    #D7D0C3;
  --ox:       #6E2126;
  --ember:    #9E2B33;
  --brass:    #856231;   /* açık zeminde okunması için koyultuldu */
  --bone:     #17140F;
  --dim:      #57504A;
  --dimmer:   #6D665F;   /* WCAG AA: küçük mono etiketler için 4.5+ gerekiyordu */
}

/* Koyu zemin varsayan sabit renkler — açık modda elle çevrilmesi gerekenler */
[data-tema="acik"] .hdr.is-stuck { background: rgba(245, 242, 236, .86); }
[data-tema="acik"] .skip { color: #F5F2EC; }
[data-tema="acik"] .btn--solid,
[data-tema="acik"] .nav__cta { --btn-fg: #F5F2EC; color: #F5F2EC !important; }
[data-tema="acik"] .qc { background: rgba(245, 242, 236, .95); }
[data-tema="acik"] .qc__a--tel { color: #F5F2EC; }
[data-tema="acik"] .qc__a--wa  { background: #196547; }
[data-tema="acik"] .qc__a--wa:hover { background: #1E7A55; }
@media (max-width: 720px) {
  [data-tema="acik"] .qc__a    { color: var(--bone); }
  [data-tema="acik"] .qc__a--wa { color: #196547; }
  /* Hap zeminleri yalnızca masaüstü içindir. Açık mod kuralları medya
     sorgusu dışında ve daha yüksek özgüllükte olduğu için alt barda da
     uygulanıyor, WhatsApp düğmesi yeşil bir blok hâline geliyordu. */
  [data-tema="acik"] .qc__a--wa,
  [data-tema="acik"] .qc__a--tel,
  [data-tema="acik"] .qc__a--ig,
  [data-tema="acik"] .qc__a--wa:hover,
  [data-tema="acik"] .qc__a--tel:hover,
  [data-tema="acik"] .qc__a--ig:hover { background: transparent; }
}
[data-tema="acik"] .nav { background: var(--ink); }

/* Vizör: açık modda HUD ve perdeler de aydınlanır — parlak mod ekranı gibi */
[data-tema="acik"] .frame::after {
  background:
    linear-gradient(to top,   rgba(245, 242, 236, .95) 0%, rgba(245, 242, 236, .82) 26%, rgba(245, 242, 236, .44) 58%, transparent 82%),
    linear-gradient(to right, rgba(245, 242, 236, .84) 0%, rgba(245, 242, 236, .36) 44%, transparent 72%);
}
[data-tema="acik"] .frame__media::after {
  background:
    linear-gradient(to bottom, rgba(245, 242, 236, .8) 0%, rgba(245, 242, 236, .34) 12%, transparent 22%),
    linear-gradient(to top,    rgba(245, 242, 236, .78) 0%, rgba(245, 242, 236, .32) 12%, transparent 22%);
}
[data-tema="acik"] .hud   { color: rgba(23, 20, 15, .78); }
[data-tema="acik"] .ratio { color: var(--bone); }
[data-tema="acik"] .ratio__what { color: rgba(23, 20, 15, .58); }
[data-tema="acik"] .br { border-color: rgba(23, 20, 15, .45); }

/* Video kapaklarının üstündeki yazılar her modda açık kalır (zemin koyu) */
.reel__cap { color: #F2EFEA; }

/* --- Teklif alın: dikkat çeken buton -------------------------------------- */
/* Dolgulu bordo + periyodik ışık geçişi. Optik alet temasına uyuyor:
   metalin üstünden geçen parlama. Hover'da kızıla döner.                */
.nav__cta {
  position: relative;
  overflow: hidden;
  background: var(--ox);
  border-color: var(--ox) !important;
  color: #F5F2EC !important;
  transition: background .25s var(--ease), border-color .25s var(--ease), scale .25s var(--ease);
}
.nav__cta::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 34%, rgba(255, 255, 255, .38) 50%, transparent 66%);
  translate: -130% 0;
  animation: cta-parla 5.5s var(--ease) infinite;
  pointer-events: none;
}
@keyframes cta-parla {
  0%, 68%   { translate: -130% 0; }
  86%, 100% { translate:  130% 0; }
}
.nav__cta:hover { background: var(--ember); border-color: var(--ember) !important; scale: 1.04; }
.nav__cta:hover::after { animation-play-state: paused; }

/* --- Kadraj arkaplan desenleri -------------------------------------------- */
:root            { --desen-renk: rgba(240, 235, 228, .07); }
[data-tema="acik"] { --desen-renk: rgba(23, 20, 15, .07); }

.hero__stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: var(--desen, none);
  background-size: var(--desen-boyut, auto);
  opacity: var(--desen-op, 0);
  transition: opacity .35s var(--ease);
}
[data-desen="izgara"] {
  --desen: repeating-linear-gradient(0deg,  var(--desen-renk) 0 1px, transparent 1px 56px),
           repeating-linear-gradient(90deg, var(--desen-renk) 0 1px, transparent 1px 56px);
  --desen-op: 1;
}
[data-desen="nokta"] {
  --desen: radial-gradient(var(--desen-renk) 1.1px, transparent 1.2px);
  --desen-boyut: 22px 22px;
  --desen-op: 1;
}
[data-desen="tarama"] {
  --desen: repeating-linear-gradient(0deg, var(--desen-renk) 0 1px, transparent 1px 4px);
  --desen-op: 1;
}
[data-desen="capraz"] {
  --desen: repeating-linear-gradient(45deg, var(--desen-renk) 0 1px, transparent 1px 13px);
  --desen-op: 1;
}

@media (prefers-reduced-motion: reduce) {
  .nav__cta::after { animation: none; opacity: 0; }
}

/* --- Önizleme paneli (geçici) --------------------------------------------- */
.op {
  position: fixed;
  left: clamp(.75rem, 1.6vw, 1.5rem);
  bottom: clamp(1rem, 3vh, 2rem);
  z-index: 130;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .625rem;
}
.op__btn {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 999px;
  border: 1px solid var(--ink-3);
  background: var(--ink-2);
  color: var(--dim);
  cursor: pointer;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .32);
  transition: color .25s var(--ease), border-color .25s var(--ease), rotate .35s var(--ease);
}
.op__btn svg { width: 20px; height: 20px; }
.op__btn:hover { color: var(--bone); border-color: var(--ox); }
.op[data-acik="1"] .op__btn { color: var(--bone); border-color: var(--ox); rotate: 90deg; }

.op__panel {
  order: -1;                       /* panel butonun ÜSTÜNDE açılır */
  background: var(--ink-2);
  border: 1px solid var(--ink-3);
  border-radius: 4px;
  padding: 1rem 1.125rem 1.125rem;
  min-width: 232px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, .42);
}
.op__panel[hidden] { display: none; }
.op__t {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dimmer);
  margin: 0 0 .5rem;
}
.op__t + .op__grup { margin-bottom: 1rem; }
.op__grup { display: flex; flex-wrap: wrap; gap: .375rem; }
.op__grup:last-child { margin-bottom: 0; }
.op__c {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: .04em;
  color: var(--dim);
  background: var(--ink);
  border: 1px solid var(--ink-3);
  border-radius: 2px;
  padding: .4375rem .625rem;
  cursor: pointer;
  transition: color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}
.op__c:hover { color: var(--bone); border-color: var(--dimmer); }
.op__c.is-on { color: #F5F2EC; background: var(--ox); border-color: var(--ox); }

@media (max-width: 720px) {
  /* Alt bar var — panelin üstüne çıkması gerek */
  .op { bottom: calc(58px + env(safe-area-inset-bottom, 0px) + .75rem); }
  .op__panel { min-width: 208px; }
}

/* --- Film şeridi ---------------------------------------------------------- */
/* Perforasyonlar şeridin ARKAPLANINDA: kareler kayarken delikler de aynı
   elemanla kaydığı için ayrı animasyon senkron sorunu doğmuyor.          */
.sec--serit { padding-block: clamp(2.5rem, 5vw, 4rem); }
.sec--serit .eyebrow { margin-bottom: 1.5rem; }
.serit {
  overflow: hidden;
  border-block: 1px solid var(--ink-3);
  background: var(--ink-2);
}
.serit__ray {
  display: flex;
  width: max-content;
  margin: 0;
  padding: 26px 0;
  list-style: none;
  background-image:
    repeating-linear-gradient(to right, transparent 0 15px, var(--ink) 15px 31px, transparent 31px 46px),
    repeating-linear-gradient(to right, transparent 0 15px, var(--ink) 15px 31px, transparent 31px 46px);
  background-size: 100% 11px, 100% 11px;
  background-position: 0 8px, 0 calc(100% - 8px);
  background-repeat: repeat-x, repeat-x;
  animation: serit-kay 52s linear infinite;
}
/* gap yerine margin: 18 karenin yarısı tam 9 kare eder, döngü kusursuz kapanır */
.serit__k {
  flex: none;
  width: clamp(148px, 16vw, 216px);
  aspect-ratio: 4 / 3;
  margin-right: 8px;
  overflow: hidden;
  background: var(--ink);
  position: relative;
}
.serit__k img { width: 100%; height: 100%; object-fit: cover; }
.serit__k::after {
  content: "";
  position: absolute; inset: 0;
  background-image: var(--grain);
  opacity: .28;
  mix-blend-mode: overlay;
  pointer-events: none;
}
@keyframes serit-kay { to { transform: translateX(-50%); } }
.serit:hover .serit__ray { animation-play-state: paused; }

/* --- Kart görselleri ------------------------------------------------------ */
.svc { padding: 0; overflow: hidden; }
.post__g {
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--ink-2);
  margin-bottom: clamp(1.25rem, 2vw, 1.5rem);
}
.post__g img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: scale .6s var(--ease);
}
.post:hover .post__g img { scale: 1.05; }

/* Hizmet diyagramları: fotoğraf değil, çizim. Optik alet/kamera kılavuzu
   diline uyuyor, vektör olduğu için her boyutta net ve temayla renk alıyor. */
.svc__g {
  /* aspect-ratio yerine KESİN yükseklik: yüzde yükseklik aspect-ratio'dan
     türeyen kutuya karşı belirsiz kalıp SVG'nin doğal boyutuna düşüyordu,
     kutu belirtilenden uzun çıkıyordu. Kesin değerle hem sorun bitiyor hem
     geniş kart yanındaki normal kartla tam aynı yükseklikte oluyor. */
  height: clamp(150px, 13vw, 192px);
  display: grid;
  place-items: center;
  padding: clamp(1.25rem, 2.6vw, 2.125rem);
  margin-bottom: clamp(1.25rem, 2vw, 1.5rem);
  border-bottom: 1px solid var(--ink-3);
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(110, 33, 38, .18), transparent 64%),
    var(--ink-2);
}
.svc__g svg { width: 100%; height: 100%; color: var(--bone); }
.d-yapi  { stroke: currentColor; stroke-opacity: .24; stroke-width: 1.25; }
.d-ana   { stroke: currentColor; stroke-opacity: .5;  stroke-width: 1.5; }
.d-ana-dolu   { fill: currentColor; fill-opacity: .22; }
.d-vurgu      { stroke: var(--ember); stroke-width: 1.75; }
.d-vurgu-dolu, .d-vurgu-dolu-c { fill: var(--ember); }
.svc__g svg * { transition: stroke-opacity .35s var(--ease), fill-opacity .35s var(--ease); }
.svc:hover .d-yapi { stroke-opacity: .38; }
.svc:hover .d-ana  { stroke-opacity: .68; }
/* Görsel tam kenara dayansın, metin içeride kalsın */
.svc__t, .svc__d, .svc__tags { margin-inline: clamp(1.75rem, 3vw, 2.5rem); }
.svc__tags { margin-bottom: clamp(1.75rem, 3vw, 2.5rem); }
.post { padding-top: 0; }
.post__g { margin-top: 0; }

/* --- Bölüm göstergesi ----------------------------------------------------- */
.ray {
  position: fixed;
  right: clamp(.75rem, 2vw, 1.75rem);
  top: 46%;
  translate: 0 -50%;
  z-index: 90;
}
.ray__cizgi {
  position: relative;
  width: 1px;
  height: min(52vh, 430px);
  background: var(--ink-3);
  margin-right: 1.125rem;
}
.ray__t {
  position: absolute;
  right: 0;
  top: calc(var(--p, 0) * 100%);
  translate: 0 -50%;
  padding-right: .75rem;
  white-space: nowrap;
  font-family: var(--f-mono);
  font-size: .5625rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dimmer);
  text-decoration: none;
  transition: color .25s var(--ease);
}
.ray__t::after {
  content: "";
  position: absolute; right: -5px; top: 50%; translate: 0 -50%;
  width: 9px; height: 1px; background: var(--ink-3);
  transition: background .25s var(--ease), width .25s var(--ease);
}
.ray__t:hover { color: var(--dim); }
.ray__t.is-on { color: var(--bone); }
.ray__t.is-on::after { background: var(--ember); width: 14px; }
.ray__nokta {
  position: absolute;
  right: -3.5px;
  top: calc(var(--ilerleme, 0) * 100%);
  translate: 0 -50%;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--ember);
  box-shadow: 0 0 0 4px rgba(168, 50, 58, .16);
  transition: top .15s linear;
}

/* Etiketler dar ekranda içeriğe biner — ölçülüp eşik belirlendi */
@media (max-width: 1360px) { .ray__t { display: none; } .ray__cizgi { margin-right: 0; } }
@media (max-width: 900px)  { .ray { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .serit__ray { animation: none; }
}

/* Gösterge etiketleri tam-taşan içeriğin (film şeridi) üstüne biniyor —
   okunurluk için HUD tarzı zemin. Kamera arayüzü diline de uyuyor. */
.ray__t b {
  display: block;
  font-weight: 500;
  background: rgba(18, 16, 15, .74);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  padding: .25rem .4375rem;
  border-radius: 2px;
}
[data-tema="acik"] .ray__t b { background: rgba(245, 242, 236, .8); }

/* Gösterge hero'da gizli: orada işaretlenecek bölüm yok ve etiketler
   vizör kadrajının üstüne biniyordu. İlk bölüm yaklaşınca beliriyor. */
.ray { opacity: 0; pointer-events: none; transition: opacity .45s var(--ease); }
.ray.is-acik { opacity: 1; pointer-events: auto; }

/* İki öne çıkan 16:9 iş yan yana */
.vfeats {
  list-style: none;
  margin: 0 0 clamp(.75rem, 1.5vw, 1.25rem);
  padding: 0;
  display: grid;
  gap: clamp(.75rem, 1.5vw, 1.25rem);
  grid-template-columns: 1fr;
}
@media (min-width: 760px) { .vfeats { grid-template-columns: repeat(2, 1fr); } }
.vfeats .vfeat { margin-bottom: 0; }

/* --- Makale sayfası -------------------------------------------------------- */
.yazi { padding-block: clamp(7rem, 14vh, 10rem) var(--sec-y); }
.yazi__in { max-width: 46rem; }

.geri {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--f-mono); font-size: var(--t-xs);
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--dim); text-decoration: none;
  margin-bottom: 2.5rem;
  transition: color .25s var(--ease);
}
.geri:hover { color: var(--ember); }

.yazi__ust {
  font-family: var(--f-mono); font-size: var(--t-xs);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--dimmer); margin-bottom: 1.25rem;
}
.yazi__h1 {
  font-size: clamp(1.875rem, 1.3rem + 2.6vw, 3.25rem);
  margin-bottom: clamp(2rem, 4vw, 2.75rem);
  text-wrap: balance;
}
.yazi__gorsel {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: var(--r);
  background: var(--ink-2);
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.yazi__gorsel img { width: 100%; height: 100%; object-fit: cover; }

.yazi__govde p {
  font-size: var(--t-lg);
  line-height: 1.72;
  color: var(--dim);
  margin-bottom: 1.5rem;
  text-wrap: pretty;
}
/* İlk paragraf giriş cümlesi: bir tık daha güçlü */
.yazi__govde p:first-child { color: var(--bone); }

.yazi__vurgu {
  font-family: var(--f-disp);
  font-weight: 800;
  font-stretch: 118%;
  font-size: var(--t-xl) !important;
  line-height: 1.25 !important;
  color: var(--bone) !important;
  border-left: 3px solid var(--ember);
  padding-left: clamp(1rem, 2.5vw, 1.75rem);
  margin-block: clamp(2rem, 4vw, 2.75rem) !important;
}
.yazi__kapanis {
  background: var(--ink-2);
  border: 1px solid var(--ink-3);
  border-radius: var(--r);
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  font-size: var(--t-b) !important;
  color: var(--dim) !important;
  margin-bottom: 0 !important;
}

.yazi__alt {
  display: flex; flex-wrap: wrap; gap: .75rem;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: clamp(2rem, 4vw, 2.5rem);
  border-top: 1px solid var(--ink-3);
}

/* Bal küpü alanı: ekranda görünmez ama ekran okuyucudan da gizli değil */
.tuzak { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --- İç sayfa girişi ------------------------------------------------------ */
.sec--sayfa { padding-block: clamp(7rem, 14vh, 10rem) clamp(2rem, 4vw, 3rem); }
.sayfa__h1 {
  font-family: var(--f-disp); font-weight: 800; font-stretch: 118%;
  font-size: var(--t-2xl); line-height: .98; letter-spacing: -.022em;
  margin: 0 0 1.25rem; max-width: 18ch; text-wrap: balance;
}
.sayfa__giris { color: var(--dim); font-size: var(--t-lg); max-width: 56ch; line-height: 1.55; margin: 0; }
/* İç sayfada ilk bölüm üstten boşluk almasın, giriş bloğu zaten verdi */
.sec--sayfa + .sec, .sec--sayfa + .stories { padding-top: 0; }

/* Anasayfadan iç sayfaya geçiş bağlantısı */
.tumu { margin-top: clamp(2rem, 4vw, 2.75rem); display: flex; }
.tumu .btn { gap: .625rem; }
.tumu .btn::after { content: "→"; font-size: .875rem; }

/* --- Hizmet detay --------------------------------------------------------- */
.svc__bag { display: block; text-decoration: none; color: inherit; }
.svc__bag .svc__t { transition: color .25s var(--ease); }
.svc:hover .svc__bag .svc__t { color: var(--ember); }
.hizmet__etiket { margin-top: 1.5rem; }

.hizmet__in { display: grid; gap: clamp(2rem, 5vw, 3.5rem); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 860px) { .hizmet__in { grid-template-columns: 1fr 1.15fr; } }
.hizmet__gorsel { border: 1px solid var(--ink-3); border-radius: var(--r); overflow: hidden; background: var(--ink-2); }
.hizmet__gorsel img { width: 100%; height: auto; display: block; }
.hizmet__cizim { aspect-ratio: 3 / 2; display: grid; place-items: center;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background: radial-gradient(120% 100% at 50% 0%, rgba(110,33,38,.18), transparent 64%), var(--ink-2); }
.hizmet__cizim svg { width: 100%; height: 100%; color: var(--bone); }
.hizmet__metin p { font-size: var(--t-lg); line-height: 1.72; color: var(--dim); margin-bottom: 1.25rem; text-wrap: pretty; }
.hizmet__metin p:first-child { color: var(--bone); }

.hizmet__galeri { list-style: none; margin: clamp(2rem,4vw,3rem) 0 0; padding: 0;
  display: grid; gap: clamp(.75rem,1.5vw,1.25rem);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.hizmet__galeri li { border: 1px solid var(--ink-3); border-radius: var(--r); overflow: hidden; background: var(--ink-2); }
.hizmet__galeri img { width: 100%; aspect-ratio: 3/2; object-fit: cover; display: block; }

/* Hakkımızda kendi sayfasındayken sol sütun yok — metin tek kolon akar */
.about--tek { grid-template-columns: 1fr !important; }
.about--tek .about__r { max-width: 62ch; }

/* --- Hizmet detayında diğer hizmetler ------------------------------------- */
.sec--diger { border-top: 1px solid var(--ink-3); }
/* Gerçek boşluklu kartlar: 7 öğe 3 sütuna bölününce son sıradaki boşluk
   dolu bir hücre gibi görünmesin diye 1px-boşluk hilesi kullanılmadı. */
.diger { list-style: none; margin: clamp(1.25rem,2.5vw,1.75rem) 0 0; padding: 0;
  display: grid; gap: clamp(.625rem, 1.2vw, .875rem);
  grid-template-columns: 1fr; }
@media (min-width: 640px)  { .diger { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .diger { grid-template-columns: repeat(3, 1fr); } }
.diger__a {
  display: flex; align-items: center; gap: 1rem; height: 100%;
  padding: 1.125rem 1.25rem; background: var(--ink);
  border: 1px solid var(--ink-3); border-radius: var(--r);
  text-decoration: none; color: inherit;
  transition: background .25s var(--ease), border-color .25s var(--ease);
}
.diger__a:hover { background: var(--ink-2); border-color: var(--ox); }
.diger__c {
  flex: none; width: 54px; height: 40px; display: grid; place-items: center;
  border: 1px solid var(--ink-3); border-radius: var(--r);
  background: var(--ink-2); overflow: hidden;
}
.diger__c svg { width: 84%; height: 84%; color: var(--bone); }
.diger__b { min-width: 0; }
.diger__b strong { display: block; font-size: var(--t-sm); font-weight: 600; line-height: 1.3; }
.diger__a:hover .diger__b strong { color: var(--ember); }
.diger__b small { display: block; font-size: .75rem; color: var(--dim); line-height: 1.45; margin-top: .1875rem; }

/* --- Menüdeki anasayfa düğmesi -------------------------------------------- */
/* Masaüstünde yalnızca ikon; mobil menüde diğer bağlantılar gibi yazılı. */
.nav__ev {
  display: inline-flex; align-items: center; gap: .5rem;
  color: var(--dim); text-decoration: none;
  padding: .375rem 0;
  transition: color .2s var(--ease);
}
.nav__ev svg { width: 19px; height: 19px; flex: none; }
.nav__ev:hover { color: var(--bone); }
.nav__ev[aria-current="page"] { color: var(--ember); }
.nav__evYazi {
  font-family: var(--f-mono); font-size: var(--t-xs);
  letter-spacing: .06em; text-transform: uppercase;
}
@media (min-width: 721px) {
  /* Dar menüde yer kazanmak için yazı gizli, erişilebilirlik title ile korunuyor */
  .nav__evYazi { position: absolute; width: 1px; height: 1px; overflow: hidden;
                 clip-path: inset(50%); white-space: nowrap; }
}
@media (max-width: 720px) {
  .nav__ev { padding: 1rem 0; border-bottom: 1px solid var(--ink-3); font-size: var(--t-sm); }
  .nav__ev svg { width: 17px; height: 17px; }
}

/* --- Alt bilgi ------------------------------------------------------------ */
.ftr__ust {
  display: grid; gap: clamp(1.75rem, 4vw, 3rem);
  grid-template-columns: 1fr;
  padding-bottom: clamp(1.75rem, 3.5vw, 2.5rem);
  border-bottom: 1px solid var(--ink-3);
}
@media (min-width: 700px) {
  .ftr__ust { grid-template-columns: 1fr auto; align-items: start; }
  .ftr__iletisim { text-align: right; justify-items: end; }
}
.ftr__logo { width: 150px; opacity: .8; }

/* İletişim: telefon ve Instagram ikonlu, alt alta; adres altlarında */
.ftr__iletisim { display: grid; gap: .5rem; font-style: normal; }
.ftr__satir {
  display: inline-flex; align-items: center; gap: .5625rem;
  text-decoration: none; color: var(--bone);
  font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: .04em;
  transition: color .2s var(--ease);
}
.ftr__satir svg { width: 15px; height: 15px; fill: currentColor; flex: none; opacity: .7; }
.ftr__satir:hover { color: var(--ember); }
.ftr__satir:hover svg { opacity: 1; }
.ftr__adres {
  margin: .375rem 0 0; font-size: var(--t-xs); line-height: 1.6; color: var(--dimmer);
  font-family: var(--f-mono); letter-spacing: .03em;
}

.ftr__orta {
  display: flex; flex-wrap: wrap; gap: .625rem 1.5rem;
  justify-content: space-between; align-items: center;
  padding-block: clamp(1rem, 2vw, 1.375rem);
}
.ftr__c, .ftr__yasal {
  margin: 0; font-family: var(--f-mono); font-size: var(--t-xs);
  letter-spacing: .05em; color: var(--dimmer);
}
.ftr__yasal a { text-decoration: none; border-bottom: 1px solid var(--ink-3); padding-bottom: 1px; }
.ftr__yasal a:hover { color: var(--bone); border-bottom-color: var(--ember); }

.ftr__imza {
  margin: 0; padding-top: clamp(.875rem, 2vw, 1.25rem);
  border-top: 1px solid var(--ink-3);
  text-align: center;
  font-family: var(--f-mono); font-size: var(--t-xs);
  letter-spacing: .05em; color: var(--dimmer);
}
.ftr__imza a { text-decoration: none; color: var(--dim); border-bottom: 1px solid var(--ink-3); padding-bottom: 1px; }
.ftr__imza a:hover { color: var(--ember); border-bottom-color: var(--ember); }

/* Yasal metin başlıkları */
.yasal__h2 {
  font-size: var(--t-lg); margin: clamp(2rem, 4vw, 2.5rem) 0 .875rem;
  padding-top: clamp(1rem, 2vw, 1.25rem); border-top: 1px solid var(--ink-3);
}
.yasal__h2:first-of-type { border-top: 0; padding-top: 0; }


/* --- Dar ekranda kaydırma akıcılığı ---------------------------------------
   Sabit konumlu bir öğenin arkasını bulanıklaştırmak, sayfa onun altından
   kayarken her karede yeniden hesaplanmayı gerektirir. Safari'de bu iş
   kaydırma ipliğini bekletip gözle görülür tutukluğa yol açıyor. Alt bar ve
   başlık zaten neredeyse opak; blur yerine biraz daha opak bir zemin
   kullanınca görünüm aynı kalıyor, maliyet kalkıyor.                      */
@media (max-width: 720px) {
  .qc {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .hdr.is-stuck {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(18, 16, 15, .95);
  }
  [data-tema="acik"] .hdr.is-stuck { background: rgba(245, 242, 236, .96); }
}