@charset "UTF-8";
/* =========================================================================
   ATOM Reklam — atom.css
   Tek dosyalık tasarım sistemi. Framework yok, derleme adımı yok.
   Fontlar head.php içinde Google Fonts ile yüklenir (@font-face burada yok).
   Site baştan sona koyu temadır; açık tema varyantı yoktur.
   Sınıf envanteri: docs/superpowers/plans/2026-07-25-atomreklam-uygulama-sozlesmesi.md §4
   ========================================================================= */

/* ---- TOKEN'LAR ---- */
:root{
  /* Zemin ve derinlik */
  --indigo-0:#14142e;
  --indigo-1:#1e1e3f;
  --indigo-2:#2d2d63;
  --indigo-line:#39396b;

  /* Vurgu */
  --coral:#e83a39;
  --coral-l:#f66458;
  --coral-t:#ff9a90;      /* yalnızca hata METNİ — koyu zeminde AA geçer */
  --peach:#f4b4a5;
  --peach-1:#ffe5da;
  --pink:#f893ae;

  /* Metin */
  --ink-0:#ffffff;
  --ink-1:#d7d7ea;
  --ink-2:#9a9ac0;
  --ink-3:#6c6c92;        /* gövde metninde KULLANILMAZ; yalnızca pasif/dekoratif */

  /* Tipografi yığınları */
  --display:"Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --body:"Manrope", "Segoe UI", system-ui, sans-serif;
  --mono:"Space Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  /* Akışkan tipografi ölçeği */
  --t-micro:clamp(.625rem, .60rem + .10vw, .6875rem);   /* 10 → 11 */
  --t-mono:clamp(.6875rem, .66rem + .14vw, .75rem);     /* 11 → 12 */
  --t-sm:clamp(.8125rem, .79rem + .12vw, .875rem);      /* 13 → 14 */
  --t-body:clamp(1rem, .97rem + .16vw, 1.0625rem);      /* 16 → 17 */
  --t-lede:clamp(1.0625rem, 1rem + .35vw, 1.25rem);     /* 17 → 20 */
  --t-h3:clamp(1.125rem, 1.06rem + .32vw, 1.3125rem);   /* 18 → 21 */
  --t-h2:clamp(1.75rem, 1.36rem + 1.75vw, 2.75rem);     /* 28 → 44 */
  --t-h1:clamp(2.125rem, 1.66rem + 2.1vw, 3.25rem);     /* 34 → 52 */
  --t-hero:clamp(2.5rem, 1.74rem + 3.4vw, 4.25rem);     /* 40 → 68 */

  /* Bağlama duyarlı yüzeyler — .section--alt bunları ezer */
  --surface:rgba(255,255,255,.045);
  --surface-hi:rgba(255,255,255,.078);
  --line:rgba(215,215,234,.14);
  --line-hi:rgba(215,215,234,.28);
  --field-bg:rgba(10,10,26,.42);

  /* Ölçüler */
  --header-h:66px;
  --shell:1180px;
  --gutter:clamp(18px, 4.4vw, 40px);
  --radius:2px;            /* yapısal yüzeyler keskin */
  --radius-pill:100px;     /* rozet ve butonlar tam yuvarlak — sayfanın imzası */
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---- SIFIRLAMA VE TEMEL ---- */
*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; padding:0; }

html{
  -webkit-text-size-adjust:100%;
  background-color:var(--indigo-0);
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + 20px);
}

body{
  position:relative;
  background-color:transparent;
  color:var(--ink-1);
  font-family:var(--body);
  font-size:var(--t-body);
  line-height:1.65;
  overflow-x:hidden;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
/* clip destekleniyorsa: yatay taşmayı keser ama kaydırma bağlamı yaratmaz
   (sticky başlığı bozma riski ortadan kalkar). */
@supports (overflow:clip){
  body{ overflow-x:clip; }
}

/* Yıldız dokusu — yalnızca sayfa başında; maske ile söner, aşağıda tekrar etmez. */
body::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:clamp(480px, 76vh, 900px);
  z-index:-1;
  pointer-events:none;
  opacity:.55;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 18%, rgba(255,255,255,.55), transparent),
    radial-gradient(1.2px 1.2px at 82% 12%, rgba(255,217,210,.55), transparent),
    radial-gradient(1.5px 1.5px at 68% 48%, rgba(255,255,255,.44), transparent),
    radial-gradient(1.1px 1.1px at 28% 58%, rgba(248,147,174,.42), transparent),
    radial-gradient(1.3px 1.3px at 92% 62%, rgba(255,255,255,.40), transparent),
    radial-gradient(1.1px 1.1px at 42% 32%, rgba(255,255,255,.34), transparent),
    radial-gradient(1.2px 1.2px at 8% 44%, rgba(255,229,218,.40), transparent),
    radial-gradient(1.2px 1.2px at 57% 70%, rgba(255,255,255,.30), transparent);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 58%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 0%,#000 58%,transparent 100%);
  animation:twinkle 7s ease-in-out infinite alternate;
}
@keyframes twinkle{ from{ opacity:.34 } to{ opacity:.62 } }

img,svg,video{ max-width:100%; height:auto; display:block; }
svg{ flex:none; }
a{ color:var(--peach); text-decoration:none; }
a:hover{ color:var(--peach-1); }
ul,ol{ list-style:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
input,select,textarea{ font:inherit; color:inherit; }
::selection{ background:var(--coral); color:#fff; }

h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:600;
  color:var(--ink-0);
  line-height:1.1;
  letter-spacing:-.018em;
  text-wrap:balance;
}

/* ---- ERİŞİLEBİLİRLİK ---- */
:focus-visible{
  outline:2px solid var(--peach);
  outline-offset:3px;
}
:focus:not(:focus-visible){ outline:none; }

.skip-link{
  position:absolute;
  top:-200px; left:12px;
  z-index:200;
  font-family:var(--mono);
  font-size:var(--t-mono);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#fff;
  background:var(--coral);
  padding:12px 20px;
  border-radius:var(--radius-pill);
  box-shadow:0 12px 30px -10px rgba(232,58,57,.8);
  transition:top .18s var(--ease);
}
.skip-link:focus{ top:12px; color:#fff; }

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

/* ---- DÜZEN ---- */
.container{
  width:100%;
  max-width:var(--shell);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.section{
  position:relative;
  padding-block:clamp(56px, 8.5vw, 108px);
  background-color:var(--indigo-1);
}
.section--alt{
  background-color:var(--indigo-2);
  --surface:rgba(255,255,255,.062);
  --surface-hi:rgba(255,255,255,.10);
  --line:rgba(215,215,234,.18);
  --line-hi:rgba(215,215,234,.34);
  --field-bg:rgba(10,10,26,.34);
}

.section-head{
  max-width:52rem;
  margin-bottom:clamp(30px, 4.4vw, 54px);
}
.section-title{
  font-family:var(--display);
  font-size:var(--t-h2);
  font-weight:600;
  color:var(--ink-0);
  line-height:1.08;
  letter-spacing:-.022em;
  text-wrap:balance;
}
.section-lede{
  margin-top:clamp(12px, 1.6vw, 18px);
  max-width:58ch;
  font-size:var(--t-lede);
  line-height:1.6;
  color:var(--ink-2);
  text-wrap:pretty;
}

/* Ölçüm etiketi — mono, geniş harf aralığı. Sayfanın teknik tonunu taşır. */
.eyebrow{
  display:block;
  font-family:var(--mono);
  font-size:var(--t-mono);
  font-weight:700;
  letter-spacing:.42em;
  text-indent:.42em;
  text-transform:uppercase;
  color:var(--peach);
  margin-bottom:clamp(10px, 1.4vw, 16px);
}

/* Bölüm ayracı: yörünge yayı + üzerinde tek elektron.
   Not: <hr> için tarayıcı varsayılanı overflow:hidden'dır — elips kırpılmasın diye açıyoruz. */
.divider{
  position:relative;
  display:block;
  height:38px;
  border:0;
  overflow:visible;
  margin-block:clamp(40px, 5.4vw, 68px);
  background:linear-gradient(90deg, transparent, var(--line-hi) 20%, var(--line-hi) 80%, transparent)
             center/100% 1px no-repeat;
}
.divider::before{
  content:"";
  position:absolute;
  left:50%; top:50%;
  width:148px; height:38px;
  margin:-19px 0 0 -74px;
  border:1px solid var(--line-hi);
  border-radius:50%;
  transform:rotate(-14deg);
}
/* elipsin -14° döndürülmüş büyük eksen ucu: (74·cos14, -74·sin14) ≈ (71.8, -17.9) */
.divider::after{
  content:"";
  position:absolute;
  left:50%; top:50%;
  width:7px; height:7px;
  margin:-21.4px 0 0 68.3px;
  border-radius:50%;
  background:var(--coral-l);
  box-shadow:0 0 10px 1px rgba(246,100,88,.65);
}

.text-center{ text-align:center; }
.text-center .section-head,
.text-center .section-lede{ margin-inline:auto; }

/* ---- BAŞLIK ---- */
.site-header{
  position:sticky;
  top:0;
  z-index:60;
  border-bottom:1px solid var(--line);
}
/* Bulanıklık başlığın kendisinde DEĞİL, sözde öğede duruyor:
   backdrop-filter, position:fixed olan .nav çekmecesini kapsayıcı bloğa hapsederdi. */
.site-header::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:rgba(20,20,46,.86);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
          backdrop-filter:blur(14px) saturate(140%);
}
.site-header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  min-height:var(--header-h);
}

.brand{
  position:relative;
  z-index:70;            /* çekmece açıkken de logo görünür kalsın */
  display:flex;
  align-items:center;
  gap:12px;
  color:var(--ink-0);
  text-decoration:none;
  flex:none;
}
.brand:hover{ color:var(--ink-0); }
.brand:focus-visible{ outline-offset:6px; border-radius:var(--radius); }

/* Mini atom — logo kilidi */
.mini{
  position:relative;
  width:var(--mini-size, 34px);
  height:var(--mini-size, 34px);
  flex:none;
  display:block;
}
.mini .mr{
  position:absolute; inset:0; margin:auto;
  width:100%; height:40%;
  border:1.5px solid var(--peach);
  border-radius:50%;
  opacity:.9;
}
.mini .mr:nth-child(2){ transform:rotate(60deg); }
.mini .mr:nth-child(3){ transform:rotate(120deg); }
.mini .mn{
  position:absolute; inset:0; margin:auto;
  width:24%; height:24%;
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%, var(--coral-l), var(--coral));
  box-shadow:0 0 10px 1px rgba(232,58,57,.55);
}
.brand:hover .mini .mr{ border-color:var(--peach-1); }

.lockup{ display:block; }
.lockup .n{
  display:block;
  font-family:var(--display);
  font-weight:700;
  font-size:15px;
  letter-spacing:.06em;
  line-height:1;
  color:var(--ink-0);
}
.lockup .n b{ color:var(--peach); font-weight:700; }
.lockup .s{
  display:block;
  font-family:var(--mono);
  font-size:8px;
  letter-spacing:.36em;
  line-height:1;
  margin-top:5px;
  color:var(--ink-2);   /* ink-3 bu boyutta AA'yı geçmiyor */
}
@media (min-width:480px){
  .lockup .n{ font-size:16px; }
  .lockup .s{ font-size:9px; letter-spacing:.42em; }
}

/* Menü — mobilde tam ekran çekmece, 900px üstünde yatay şerit */
.nav{
  position:fixed;
  inset:0;
  z-index:55;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:clamp(20px, 4vh, 34px);
  padding:calc(var(--header-h) + 40px) var(--gutter) 48px;
  background:var(--indigo-0);
  overflow-y:auto;
  opacity:0;
  visibility:hidden;
  transform:translateY(-10px);
  transition:opacity .22s var(--ease), transform .22s var(--ease), visibility 0s linear .22s;
}
.nav.is-open{
  opacity:1;
  visibility:visible;
  transform:none;
  transition-delay:0s, 0s, 0s;
}
body.is-open{ overflow:hidden; }

.nav-list{
  display:flex;
  flex-direction:column;
  gap:4px;
  width:100%;
}
.nav-link{
  display:block;
  font-family:var(--display);
  font-size:clamp(1.375rem, 5vw, 1.75rem);
  font-weight:500;
  letter-spacing:-.01em;
  color:var(--ink-1);
  padding:12px 0;
  border-bottom:1px solid var(--line);
  transition:color .16s var(--ease);
}
.nav-link:hover{ color:var(--peach); }
.nav-link.is-active{ color:var(--ink-0); }
.nav-link.is-active::before{
  content:"◆";
  font-size:.5em;
  color:var(--coral-l);
  vertical-align:middle;
  margin-right:.7em;
}

.nav-toggle{
  position:relative;
  z-index:70;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:44px; height:44px;
  padding:0 9px;
  margin-right:-9px;
  border:1px solid var(--line-hi);
  border-radius:var(--radius-pill);
  flex:none;
}
.nav-toggle-bar{
  display:block;
  width:100%;
  height:1.5px;
  background:var(--ink-0);
  transition:transform .22s var(--ease), opacity .16s linear;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }
.nav-toggle:hover{ border-color:var(--peach); }

.header-cta{ margin-top:8px; }

@media (min-width:900px){
  .nav{
    position:static;
    flex-direction:row;
    align-items:center;
    gap:clamp(18px, 2.4vw, 34px);
    padding:0;
    background:none;
    overflow:visible;
    opacity:1;
    visibility:visible;
    transform:none;
    transition:none;
  }
  .nav-list{
    flex-direction:row;
    align-items:center;
    gap:clamp(14px, 2vw, 28px);
    width:auto;
  }
  .nav-link{
    font-family:var(--mono);
    font-size:var(--t-sm);
    font-weight:400;
    letter-spacing:.06em;
    padding:6px 0;
    border-bottom:0;
    position:relative;
  }
  .nav-link::after{
    content:"";
    position:absolute;
    left:0; right:100%; bottom:0;
    height:1px;
    background:var(--peach);
    transition:right .24s var(--ease);
  }
  .nav-link:hover::after,
  .nav-link.is-active::after{ right:0; }
  .nav-link.is-active::before{ display:none; }
  .nav-toggle{ display:none; }
  .header-cta{ margin-top:0; }
}

/* ---- HERO ---- */
.hero{
  position:relative;
  /* Boşluk hem genişliğe hem YÜKSEKLİĞE bakar: kısa ekranlarda (dizüstü, %125
     ölçekleme) hero tek ekrana sığsın, uzun ekranlarda ferah kalsın. */
  padding-block:clamp(28px, min(8vw, 6.5vh), 96px) clamp(32px, min(9vw, 7.5vh), 112px);
  /* Yarı saydam derinlik: arkadaki yıldız dokusu buradan okunur. */
  background:radial-gradient(1100px 720px at 50% 34%,
              rgba(42,42,85,.90) 0%,
              rgba(28,28,61,.84) 46%,
              rgba(20,20,46,.62) 100%);
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
.hero-inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
/* align-items:center olduğu için çocuklar kapsayıcıya değil kendi içeriklerine
   göre boyutlanır; ch cinsinden max-width'ler dar ekranda taşmaya döner.
   Bu satır taşmayı keser. */
.hero-inner > *{ max-width:100%; }
.hero-title{
  font-family:var(--display);
  /* İki satıra sarınca kısa ekranı taşırmasın diye yükseklik tavanı var. */
  font-size:min(var(--t-hero), 8.4vh);
  font-weight:600;
  line-height:1.02;
  letter-spacing:-.028em;
  color:var(--ink-0);
  max-width:16ch;
  text-wrap:balance;
}
.hero-title b,
.hero-title em,
.hero-title strong{
  font-style:normal;
  font-weight:inherit;
  background:linear-gradient(120deg, var(--coral-l), var(--peach));
  -webkit-background-clip:text;
          background-clip:text;
  color:transparent;
}
.hero-lede{
  margin-top:clamp(14px, 2vw, 22px);
  max-width:56ch;
  font-size:var(--t-lede);
  line-height:1.6;
  color:var(--ink-1);
  text-wrap:pretty;
}
.hero .eyebrow{ color:var(--coral-l); }   /* hero en koyu zemin — sıcak vurgu burada */
.hero .cta-row,
.hero .chip-row{ justify-content:center; }
.hero .cta-row{ margin-top:clamp(22px, 3.2vw, 34px); }
.hero .chip-row{ margin-top:clamp(18px, 2.6vw, 26px); }

/* Atom — anasayfa hero'su. offset-path değerleri site.js tarafından atanır. */
.atom{
  position:relative;
  /* Ekran yüksekliğiyle ölçeklenir — hero'nun tek ekrana sığmasını bu belirler.
     svh, mobil tarayıcı çubuklarını hesaba katar; vh satırı yedektir. */
  width:min(300px, 30vh, 62vw);
  width:min(300px, 30svh, 62vw);
  aspect-ratio:1/1;
  margin-bottom:clamp(8px, 1.6vh, 22px);
  animation:floaty 7s ease-in-out infinite;
}
.halo{
  position:absolute;
  inset:-14%;
  border-radius:50%;
  background:radial-gradient(circle, rgba(232,58,57,.34) 0%, rgba(232,58,57,.10) 38%, transparent 66%);
  filter:blur(6px);
  animation:breathe 4.5s ease-in-out infinite;
}
.ring,
.orbit{
  position:absolute;
  top:50%; left:50%;
  width:100%; height:40%;
  transform:translate(-50%,-50%);
}
.ring{
  border:1.6px solid rgba(244,180,165,.85);
  border-radius:50%;
}
.ring.a{ transform:translate(-50%,-50%) rotate(0deg);   border-color:rgba(244,180,165,.85); }
.ring.b{ transform:translate(-50%,-50%) rotate(60deg);  border-color:rgba(248,147,174,.70); }
.ring.c{ transform:translate(-50%,-50%) rotate(120deg); border-color:rgba(244,180,165,.55); }
.orbit.a{ transform:translate(-50%,-50%) rotate(0deg); }
.orbit.b{ transform:translate(-50%,-50%) rotate(60deg); }
.orbit.c{ transform:translate(-50%,-50%) rotate(120deg); }

.e{
  position:absolute;
  top:0; left:0;
  width:13px; height:13px;
  margin:-6.5px 0 0 -6.5px;
  border-radius:50%;
  offset-rotate:0deg;
  background:radial-gradient(circle at 35% 30%, #fff, var(--coral));
  box-shadow:0 0 12px 2px rgba(232,58,57,.7);
  animation:trip 5.5s linear infinite;
}
.orbit.b .e,
.e.e2{
  background:radial-gradient(circle at 35% 30%, #fff, var(--pink));
  box-shadow:0 0 12px 2px rgba(248,147,174,.6);
  animation-duration:7s;
  animation-delay:-2s;
}
.orbit.c .e,
.e.e3{
  background:radial-gradient(circle at 35% 30%, #fff, var(--peach));
  box-shadow:0 0 12px 2px rgba(244,180,165,.55);
  animation-duration:6.2s;
  animation-delay:-4s;
}
.nucleus{
  position:absolute;
  top:50%; left:50%;
  width:15%; height:15%;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle at 34% 30%, #ff8f84, var(--coral) 62%, #b81f1e);
  box-shadow:0 0 26px 6px rgba(232,58,57,.6), inset 0 0 10px rgba(0,0,0,.25);
  animation:corepulse 3s ease-in-out infinite;
}

@keyframes trip{ from{ offset-distance:0% } to{ offset-distance:100% } }
@keyframes floaty{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-12px) } }
@keyframes breathe{ 0%,100%{ opacity:.7; transform:scale(1) } 50%{ opacity:1; transform:scale(1.05) } }
@keyframes corepulse{
  0%,100%{ box-shadow:0 0 22px 5px rgba(232,58,57,.5), inset 0 0 10px rgba(0,0,0,.25) }
  50%    { box-shadow:0 0 34px 9px rgba(232,58,57,.72), inset 0 0 10px rgba(0,0,0,.25) }
}
/* Masaüstünde büyür ama yükseklik tavanı korunur — geniş ve kısa ekranda
   (tipik dizüstü) atom hero'yu taşırmasın. */
@media (min-width:768px){
  .atom{
    width:min(340px, 32vh, 34vw);
    width:min(340px, 32svh, 34vw);
  }
}
/* Çok kısa ekran (yatay mobil, küçük dizüstü): eyebrow düşer, atom küçülür. */
@media (max-height:560px){
  .atom{
    width:min(180px, 26vh, 34vw);
    width:min(180px, 26svh, 34vw);
  }
  .hero .eyebrow{ display:none; }
}
/* Kısa ekranda hero'yu biraz daha sıkıştır ki alttaki bölümün üst kenarı
   görünsün — sayfanın devamı olduğu belli olur. */
@media (max-height:820px){
  .hero{ padding-block-end:clamp(28px, 5.4vh, 60px); }
  .atom{
    width:min(300px, 28.5vh, 34vw);
    width:min(300px, 28.5svh, 34vw);
  }
}

/* ---- SAYFA HERO (iç sayfalar) ---- */
.page-hero{
  position:relative;
  padding-block:clamp(32px, min(6.5vw, 6vh), 84px) clamp(28px, min(5.5vw, 5vh), 72px);
  background:radial-gradient(900px 520px at 22% 0%,
              rgba(45,45,99,.62) 0%,
              rgba(28,28,61,.55) 52%,
              rgba(20,20,46,.35) 100%);
  border-bottom:1px solid var(--line);
}
.page-hero-inner{ max-width:56rem; }

/* Kapak görselli hero: mobilde metin üstte görsel altta,
   900px üstünde görsel solda (dar sütun), metin sağda.
   Kaynak sırası metin → görsel kalır; h1 belgede önce gelsin diye
   yerleşim grid-column ile çevrilir. Görsel odaklanılabilir değil,
   dolayısıyla sekme sırası bundan etkilenmez. */
.page-hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(24px, 3.4vw, 44px);
  align-items:center;
}
/* Izgara hücrelerinin varsayılan min-width:auto değeri, içindeki görselin
   doğal genişliğini taban kabul edip dar ekranda satırı taşırır. */
.page-hero-grid > *{ min-width:0; }
/* Mobilde görsel tam genişlikte kalmasın; hero'yu aşağı itmesin. */
.page-hero-figure{ max-width:520px; }

@media (min-width:900px){
  .page-hero--media .page-hero-grid{
    grid-template-columns:minmax(0,.66fr) minmax(0,1fr);
  }
  .page-hero--media .page-hero-figure{
    grid-column:1;
    grid-row:1;
    max-width:none;
  }
  .page-hero--media .page-hero-inner{
    grid-column:2;
    grid-row:1;
  }
  .page-hero--media .page-hero-inner h1{ max-width:18ch; }
}
.page-hero h1,
.page-hero-inner h1{
  font-size:var(--t-h1);
  line-height:1.06;
  letter-spacing:-.025em;
  max-width:20ch;
}
.page-hero-inner .cta-row{ margin-top:clamp(20px, 2.6vw, 30px); }
.page-hero-inner > p{
  margin-top:clamp(12px, 1.8vw, 20px);
  max-width:58ch;
  font-size:var(--t-lede);
  line-height:1.6;
  color:var(--ink-1);
  text-wrap:pretty;
}
.page-hero .chip-row{ margin-top:clamp(18px, 2.4vw, 26px); }

/* ---- BUTONLAR ---- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-family:var(--display);
  font-size:1rem;
  font-weight:600;
  letter-spacing:.01em;
  line-height:1;
  text-align:center;
  padding:15px 28px;
  border:1px solid transparent;
  border-radius:var(--radius-pill);
  white-space:nowrap;
  transition:transform .18s var(--ease), box-shadow .18s var(--ease),
             background-color .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}
.btn:focus-visible{ outline:2px solid var(--peach); outline-offset:3px; }

.btn--primary{
  color:#fff;
  background:linear-gradient(120deg, var(--coral), var(--coral-l));
  box-shadow:0 12px 30px -10px rgba(232,58,57,.65);
}
.btn--primary:hover{
  color:#fff;
  transform:translateY(-2px);
  box-shadow:0 18px 40px -10px rgba(232,58,57,.78);
}
.btn--primary:active{ transform:translateY(0); }

.btn--ghost{
  color:var(--ink-0);
  background:transparent;
  border-color:var(--line-hi);
}
.btn--ghost:hover{
  color:var(--peach-1);
  border-color:var(--peach);
  background:rgba(244,180,165,.08);
}

.btn--sm{
  font-size:var(--t-sm);
  padding:10px 18px;
}

.cta-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px 16px;
}
@media (max-width:400px){
  .cta-row{ flex-direction:column; align-items:stretch; }
  .cta-row .btn{ width:100%; }
}

/* ---- ROZET VE ETİKET ---- */
.chip-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.chip{
  display:inline-flex;
  align-items:center;
  font-family:var(--mono);
  font-size:var(--t-mono);
  letter-spacing:.05em;
  color:var(--peach-1);
  background:var(--surface-hi);
  border:1px solid var(--line-hi);
  border-radius:var(--radius-pill);
  padding:8px 15px;
  white-space:nowrap;
}
.chip::before{
  content:"◆";
  font-size:.72em;
  color:var(--coral-l);
  margin-right:.6em;
}

.badge{
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-family:var(--mono);
  font-size:var(--t-micro);
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--peach);
  background:rgba(232,58,57,.12);
  border:1px solid rgba(246,100,88,.45);
  border-radius:var(--radius-pill);
  padding:7px 14px;
  white-space:nowrap;
}
.badge::before{
  content:"";
  width:7px; height:7px;
  border-radius:50%;
  background:var(--coral-l);
  animation:pulse 2.2s ease-out infinite;
}
@keyframes pulse{
  0%  { box-shadow:0 0 0 0 rgba(246,100,88,.55) }
  70% { box-shadow:0 0 0 8px rgba(246,100,88,0) }
  100%{ box-shadow:0 0 0 0 rgba(246,100,88,0) }
}

/* ---- GÖRSELLER ----
   Site koyu temadır; fotoğraflar olduğu gibi konursa sayfadan kopar.
   Her görsel iki katmandan geçer: doygunluğu kırılmış bir taban ve üstünde
   indigo→mercan yıkaması. Böylece stok fotoğraf değil, sayfanın kendi dili olur. */
.media{
  position:relative;
  display:block;
  isolation:isolate;
}
.media picture{
  display:block;
  overflow:hidden;                     /* hover'daki büyüme buradan kırpılır */
  background:var(--indigo-0);          /* yüklenene kadar zemin, beyaz sıçrama yok */
}
.media img{
  display:block;
  width:100%;
  height:auto;
  filter:saturate(.72) contrast(1.06) brightness(.9);
  transition:filter .3s var(--ease), transform .5s var(--ease);
}
.media::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(20,20,46,0) 42%, rgba(20,20,46,.80) 100%),
    linear-gradient(148deg, rgba(45,45,99,.48) 0%, rgba(20,20,46,.10) 46%, rgba(232,58,57,.32) 100%);
  transition:opacity .3s var(--ease);
}

/* Hizmet sayfası hero'sundaki kapak */
.page-hero-figure .media{
  border:1px solid var(--line-hi);
  border-radius:var(--radius);
  box-shadow:0 26px 60px -30px rgba(0,0,0,.75);
}

/* "Neler dahil" bölümünün üstündeki geniş şerit */
.media-band{
  margin-bottom:clamp(24px, 3.2vw, 38px);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
}

/* ---- KARTLAR ---- */
.card-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(14px, 1.8vw, 22px);
}
@media (min-width:600px){
  .card-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (min-width:1000px){
  .card-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); }
}
.card-grid--2{ grid-template-columns:1fr; }
@media (min-width:700px){
  .card-grid--2{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
.card-grid--3{ grid-template-columns:1fr; }
@media (min-width:600px){
  .card-grid--3{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (min-width:1000px){
  .card-grid--3{ grid-template-columns:repeat(3, minmax(0,1fr)); }
}

.card{
  --card-pad:clamp(20px, 2.6vw, 30px);
  position:relative;
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:var(--card-pad);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  color:inherit;
  text-decoration:none;
  transition:transform .2s var(--ease), border-color .2s var(--ease), background-color .2s var(--ease);
}
/* üst kenardaki mercan kılcalı — yalnızca hover'da belirir */
.card::before{
  content:"";
  position:absolute;
  left:-1px; right:-1px; top:-1px;
  z-index:4;                 /* görselli kartlarda fotoğrafın üstünde kalır */
  height:2px;
  background:linear-gradient(90deg, var(--coral), var(--coral-l));
  opacity:0;
  transition:opacity .2s var(--ease);
}
.card:hover{
  transform:translateY(-4px);
  border-color:var(--line-hi);
  background:var(--surface-hi);
  color:inherit;
}
.card:hover::before{ opacity:1; }
.card:focus-visible{ outline:2px solid var(--peach); outline-offset:3px; }

.card--flat{
  background:rgba(232,58,57,.09);
  border-color:rgba(246,100,88,.32);
}
.card--flat:hover{
  transform:none;
  background:rgba(232,58,57,.09);
  border-color:rgba(246,100,88,.32);
}
.card--flat:hover::before{ opacity:0; }

/* İkon kutusu daire — logodaki yörünge halkasının küçük hâli.
   İçindeki mercan nokta (.ic-dot) atomun çekirdeğini taşır. */
.card-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:none;
  width:52px; height:52px;
  border-radius:50%;
  color:var(--peach);
  background:
    radial-gradient(circle at 50% 42%, rgba(232,58,57,.16) 0%, rgba(232,58,57,0) 70%),
    rgba(20,20,46,.55);
  border:1px solid rgba(244,180,165,.24);
  margin-bottom:4px;
  transition:border-color .2s var(--ease), background-color .2s var(--ease);
}
.card-icon svg{ display:block; width:25px; height:25px; }
.card-icon .ic-dot{ fill:var(--coral-l); }
.card:hover .card-icon{ border-color:rgba(246,100,88,.5); }
.card--flat .card-icon{ color:var(--coral-l); border-color:rgba(246,100,88,.34); }

/* Görselli kart: fotoğraf kartın üst kenarına dayanır, ikon rozeti fotoğrafın
   alt kenarına biner. Rozet logodaki çekirdeğin kart üzerindeki karşılığıdır. */
.card .media--kart{
  margin:calc(var(--card-pad) * -1) calc(var(--card-pad) * -1) 28px;
}
.card .media--kart .card-icon{
  position:absolute;
  left:var(--card-pad);
  bottom:-26px;
  z-index:3;
  margin-bottom:0;
  /* Fotoğrafın üzerinde durduğu için zemin saydam değil, tam opak. */
  background:
    radial-gradient(circle at 50% 42%, rgba(232,58,57,.22) 0%, rgba(232,58,57,0) 70%),
    var(--indigo-0);
  box-shadow:0 10px 24px -12px rgba(0,0,0,.9);
}
.card:hover .media img{
  filter:saturate(.96) contrast(1.03) brightness(1);
  transform:scale(1.045);
}
.card:hover .media::after{ opacity:.74; }
/* Farklılaştırıcı kart bir bağlantı değil; hover'da da sabit durur. */
.card--flat:hover .media img{
  filter:saturate(.72) contrast(1.06) brightness(.9);
  transform:none;
}
.card--flat:hover .media::after{ opacity:1; }

.card-title{
  font-family:var(--display);
  font-size:var(--t-h3);
  font-weight:600;
  color:var(--ink-0);
  line-height:1.2;
  letter-spacing:-.015em;
}
.card-text{
  font-size:var(--t-sm);
  line-height:1.62;
  color:var(--ink-2);
}
.card-link{
  margin-top:auto;
  padding-top:6px;
  font-family:var(--mono);
  font-size:var(--t-mono);
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--peach);
}
.card-link::after{
  content:"→";
  display:inline-block;
  margin-left:.55em;
  transition:transform .2s var(--ease);
}
.card:hover .card-link{ color:var(--peach-1); }
.card:hover .card-link::after{ transform:translateX(4px); }

/* ---- TAAHHÜTLER ---- */
.promise{
  display:grid;
  grid-template-columns:1fr;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.promise-item{
  padding:clamp(20px, 2.6vw, 28px) 0;
  border-top:1px solid var(--line);
}
.promise-item:first-child{ border-top:0; }
.promise-title{
  font-family:var(--display);
  font-size:var(--t-h3);
  font-weight:600;
  color:var(--ink-0);
  letter-spacing:-.015em;
}
.promise-title::before{
  content:"";
  display:block;
  width:26px; height:2px;
  margin-bottom:12px;
  background:var(--coral-l);
}
.promise-text{
  margin-top:8px;
  font-size:var(--t-sm);
  line-height:1.62;
  color:var(--ink-2);
}
@media (min-width:768px){
  .promise{ grid-template-columns:repeat(3, minmax(0,1fr)); }
  .promise-item{
    border-top:0;
    border-left:1px solid var(--line);
    padding:clamp(20px, 2.6vw, 28px) clamp(20px, 2.6vw, 32px);
  }
  .promise-item:first-child{ border-left:0; padding-left:0; }
  .promise-item:last-child{ padding-right:0; }
}

/* ---- SÜREÇ (gerçek bir sıra olduğu için numaralandırılır) ---- */
.steps{
  --step-gap:clamp(24px, 3vw, 34px);
  display:grid;
  grid-template-columns:1fr;
  gap:var(--step-gap);
}
.step{
  position:relative;
  padding-left:62px;
}
.step-num{
  position:absolute;
  left:0; top:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px; height:44px;
  font-family:var(--mono);
  font-size:var(--t-mono);
  font-weight:700;
  letter-spacing:.06em;
  color:var(--peach);
  background:var(--surface-hi);
  border:1px solid var(--line-hi);
  border-radius:50%;
}
/* adımları birbirine bağlayan ince yörünge çizgisi */
.step::after{
  content:"";
  position:absolute;
  left:21.5px; top:52px;
  width:1px;
  bottom:calc(0px - var(--step-gap));
  background:linear-gradient(180deg, var(--line-hi), transparent);
}
.step:last-child::after{ display:none; }
.step-title{
  font-family:var(--display);
  font-size:var(--t-h3);
  font-weight:600;
  color:var(--ink-0);
  line-height:1.25;
  letter-spacing:-.015em;
  padding-top:9px;
}
.step-text{
  margin-top:8px;
  font-size:var(--t-sm);
  line-height:1.62;
  color:var(--ink-2);
}
@media (min-width:900px){
  .steps{
    --step-gap:clamp(20px, 2.2vw, 30px);
    grid-template-columns:repeat(4, minmax(0,1fr));
  }
  .step{ padding-left:0; padding-top:60px; }
  .step-num{ top:0; }
  .step::after{
    left:52px; top:21.5px;
    width:auto; height:1px; bottom:auto;
    right:calc(0px - var(--step-gap));
    background:linear-gradient(90deg, var(--line-hi), transparent);
  }
  .step-title{ padding-top:0; }
}

/* ---- KONTROL LİSTESİ ---- */
.checklist{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(16px, 2vw, 24px);
}
@media (min-width:700px){
  .checklist{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:clamp(18px, 2.2vw, 28px); }
}
.checklist-item{
  position:relative;
  padding-left:26px;
  border-top:1px solid var(--line);
  padding-top:16px;
}
.checklist-item::before{
  content:"◆";
  position:absolute;
  left:0; top:17px;
  font-size:10px;
  line-height:1.6;
  color:var(--coral-l);
}
.checklist-title{
  font-family:var(--display);
  font-size:1.0625rem;
  font-weight:600;
  color:var(--ink-0);
  line-height:1.3;
}
.checklist-text{
  margin-top:5px;
  font-size:var(--t-sm);
  line-height:1.6;
  color:var(--ink-2);
}

/* ---- SSS ---- */
.faq{
  max-width:52rem;
  border-top:1px solid var(--line);
}
.faq-item{
  border-bottom:1px solid var(--line);
}
.faq-q{
  position:relative;
  display:block;              /* varsayılan disclosure üçgenini kaldırır */
  list-style:none;
  cursor:pointer;
  padding:20px 52px 20px 0;
  font-family:var(--display);
  font-size:clamp(1rem, .96rem + .35vw, 1.1875rem);
  font-weight:600;
  line-height:1.35;
  letter-spacing:-.012em;
  color:var(--ink-0);
  transition:color .16s var(--ease);
}
.faq-q::-webkit-details-marker{ display:none; }
.faq-q::marker{ content:""; }
.faq-q:hover{ color:var(--peach); }
.faq-q:focus-visible{ outline:2px solid var(--peach); outline-offset:3px; }
/* + / − göstergesi: yatay çubuk sabit, dikey çubuk dönerek eksiye iner */
.faq-q::before{
  content:"";
  position:absolute;
  right:8px; top:50%;
  width:14px; height:1.5px;
  margin-top:-.75px;
  background:var(--peach);
}
.faq-q::after{
  content:"";
  position:absolute;
  right:14.25px; top:50%;
  width:1.5px; height:14px;
  margin-top:-7px;
  background:var(--peach);
  transform-origin:center;
  transition:transform .22s var(--ease);
}
.faq-item[open] > .faq-q::after{ transform:rotate(90deg); }
.faq-a{
  padding:0 52px 22px 0;
  font-size:var(--t-sm);
  line-height:1.7;
  color:var(--ink-1);
  max-width:66ch;
}
.faq-a p + p{ margin-top:12px; }
.faq-a a{ text-decoration:underline; text-underline-offset:3px; }

/* ---- TEKLİF BLOĞU ---- */
/* .section'dan sonra tanımlıdır; zemini bilerek ezer (çekirdek parıltısı). */
.cta-block{
  background:
    radial-gradient(760px 420px at 50% 106%, rgba(232,58,57,.28) 0%, rgba(232,58,57,0) 70%),
    radial-gradient(900px 600px at 50% 0%, rgba(45,45,99,.7) 0%, rgba(20,20,46,0) 72%),
    var(--indigo-0);
  border-top:1px solid var(--line);
  overflow:hidden;
}
.cta-block-inner{
  max-width:46rem;
  text-align:center;
}
.cta-block-inner .eyebrow{ color:var(--peach); }
.cta-block-inner .section-lede{ margin-inline:auto; }
.cta-block-inner .cta-row{
  justify-content:center;
  margin-top:clamp(22px, 3vw, 32px);
}

/* ---- FORM ---- */
.form{ max-width:44rem; }
.form-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(14px, 1.8vw, 20px);
}
@media (min-width:640px){
  .form-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
.field{
  display:flex;
  flex-direction:column;
  gap:7px;
  min-width:0;
}
.field--full{ grid-column:1 / -1; }

.field-label{
  font-family:var(--mono);
  font-size:var(--t-mono);
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-2);
}
.field-input,
.field-select,
.field-textarea{
  width:100%;
  font-family:var(--body);
  font-size:1rem;
  line-height:1.5;
  color:var(--ink-0);
  background:var(--field-bg);
  border:1px solid var(--line-hi);
  border-radius:var(--radius);
  padding:13px 15px;
  transition:border-color .16s var(--ease), background-color .16s var(--ease), box-shadow .16s var(--ease);
  -webkit-appearance:none;
          appearance:none;
}
.field-input::placeholder,
.field-textarea::placeholder{ color:var(--ink-2); opacity:1; }
.field-input:hover,
.field-select:hover,
.field-textarea:hover{ border-color:rgba(244,180,165,.5); }
.field-input:focus,
.field-select:focus,
.field-textarea:focus{
  outline:none;
  border-color:var(--peach);
  background:rgba(10,10,26,.6);
  box-shadow:0 0 0 3px rgba(244,180,165,.18);
}
.field-input:focus-visible,
.field-select:focus-visible,
.field-textarea:focus-visible{ outline:2px solid var(--peach); outline-offset:3px; }
.field-textarea{
  min-height:150px;
  resize:vertical;
}
.field-select{
  padding-right:42px;
  background-image:linear-gradient(45deg, transparent 50%, var(--peach) 50%),
                   linear-gradient(135deg, var(--peach) 50%, transparent 50%);
  background-position:calc(100% - 20px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px);
  background-size:6px 6px, 6px 6px;
  background-repeat:no-repeat;
}
.field-select option{ background:var(--indigo-1); color:var(--ink-0); }

.field-error{
  font-family:var(--mono);
  font-size:var(--t-mono);
  letter-spacing:.02em;
  color:var(--coral-t);
}
.field-error::before{
  content:"!";
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:14px; height:14px;
  margin-right:7px;
  font-weight:700;
  color:#fff;
  background:var(--coral);
  border-radius:50%;
  vertical-align:-2px;
}
/* hata durumu: kenarlık --coral */
.field-input[aria-invalid="true"],
.field-select[aria-invalid="true"],
.field-textarea[aria-invalid="true"]{
  border-color:var(--coral);
  background:rgba(232,58,57,.09);
}
.field-input[aria-invalid="true"]:focus,
.field-select[aria-invalid="true"]:focus,
.field-textarea[aria-invalid="true"]:focus{
  box-shadow:0 0 0 3px rgba(232,58,57,.22);
}

.consent{
  display:flex;
  align-items:flex-start;
  gap:12px;
  font-size:var(--t-sm);
  line-height:1.6;
  color:var(--ink-1);
}
.consent input[type="checkbox"]{
  flex:none;
  width:19px; height:19px;
  margin-top:3px;
  accent-color:var(--coral);
  cursor:pointer;
}
.consent a{ text-decoration:underline; text-underline-offset:3px; }

/* bot tuzağı — görünmez ama display:none değil */
.honeypot{
  position:absolute !important;
  left:-5000px;
  width:1px; height:1px;
  overflow:hidden;
  opacity:0;
  pointer-events:none;
}

.form-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:14px 18px;
  margin-top:clamp(20px, 2.6vw, 28px);
}
.form-actions p{
  font-family:var(--mono);
  font-size:var(--t-mono);
  letter-spacing:.04em;
  color:var(--ink-2);
}

.alert{
  position:relative;
  padding:16px 18px 16px 46px;
  margin-bottom:clamp(20px, 2.6vw, 28px);
  font-size:var(--t-sm);
  line-height:1.6;
  color:var(--ink-1);
  background:var(--surface-hi);
  border:1px solid var(--line-hi);
  border-left-width:3px;
  border-radius:var(--radius);
}
/* Renk tek başına ayırt edici değildir; her uyarının bir de işareti var. */
.alert::before{
  content:"◆";
  position:absolute;
  left:18px; top:16px;
  font-family:var(--mono);
  font-weight:700;
  line-height:1.6;
  color:var(--peach);
}
.alert--ok{
  border-color:var(--peach);
  background:rgba(244,180,165,.12);
}
.alert--ok::before{ content:"✓"; color:var(--peach); }
.alert--err{
  border-color:var(--coral);
  background:rgba(232,58,57,.13);
  color:var(--peach-1);
}
.alert--err::before{ content:"✕"; color:var(--coral-t); }
.alert a{ text-decoration:underline; text-underline-offset:3px; }

/* ---- İLETİŞİM ---- */
.contact-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(14px, 1.8vw, 20px);
}
@media (min-width:560px){
  .contact-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (min-width:960px){
  .contact-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); }
}
.contact-card{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:clamp(18px, 2.2vw, 26px);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
}
.contact-card-label{
  font-family:var(--mono);
  font-size:var(--t-mono);
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink-2);
}
.contact-card-value{
  font-family:var(--display);
  font-size:1.0625rem;
  font-weight:500;
  line-height:1.45;
  color:var(--ink-0);
  overflow-wrap:anywhere;
}
.contact-card-value a{
  color:var(--peach);
  border-bottom:1px solid transparent;
  transition:color .16s var(--ease), border-color .16s var(--ease);
}
.contact-card-value a:hover{ color:var(--peach-1); border-bottom-color:var(--peach); }
.contact-card-address{ font-style:normal; max-width:46ch; }

/* Kart ızgarasının altındaki gömülü harita */
.contact-map{
  position:relative;
  margin-top:clamp(14px, 1.8vw, 20px);
  height:clamp(280px, 32vw, 420px);
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--indigo-1);
  overflow:hidden;
}
.contact-map iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  display:block;
  filter:grayscale(.22) saturate(.9) contrast(1.02);
}

/* ---- UZUN METİN ---- */
.prose{
  max-width:68ch;
  font-size:var(--t-body);
  line-height:1.75;
  color:var(--ink-1);
}
.prose > * + *{ margin-top:1.05em; }
.prose h2{
  font-size:clamp(1.375rem, 1.2rem + .8vw, 1.75rem);
  line-height:1.2;
  margin-top:2.1em;
}
.prose h3{
  font-size:var(--t-h3);
  line-height:1.3;
  margin-top:1.7em;
}
.prose h2 + *,
.prose h3 + *{ margin-top:.65em; }
.prose p{ text-wrap:pretty; }
.prose strong{ color:var(--ink-0); font-weight:600; }
.prose a{
  color:var(--peach);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
}
.prose a:hover{ color:var(--peach-1); }
.prose ul,
.prose ol{
  padding-left:0;
  counter-reset:prose-ol;
}
.prose li{
  position:relative;
  padding-left:26px;
}
.prose li + li{ margin-top:.55em; }
.prose ul > li::before{
  content:"◆";
  position:absolute;
  left:0; top:0;
  font-size:10px;
  line-height:2.1;
  color:var(--coral-l);
}
.prose ol > li{ counter-increment:prose-ol; padding-left:32px; }
.prose ol > li::before{
  content:counter(prose-ol, decimal-leading-zero);
  position:absolute;
  left:0; top:0;
  font-family:var(--mono);
  font-size:.78em;
  color:var(--peach);
}
.prose hr{
  border:0;
  height:1px;
  background:var(--line-hi);
  margin-block:2em;
}
.prose blockquote{
  padding-left:20px;
  border-left:2px solid var(--coral);
  color:var(--ink-1);
}
.prose table{
  width:100%;
  border-collapse:collapse;
  font-size:var(--t-sm);
  display:block;
  overflow-x:auto;
}
.prose th,
.prose td{
  text-align:left;
  padding:10px 14px;
  border-bottom:1px solid var(--line);
}
.prose th{
  font-family:var(--mono);
  font-size:var(--t-mono);
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-2);
}

/* ---- ALT BİLGİ ---- */
.site-footer{
  position:relative;
  background:var(--indigo-0);
  border-top:1px solid var(--line);
  padding-top:clamp(40px, 5.5vw, 68px);
}
.footer-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(28px, 3.6vw, 40px);
  padding-bottom:clamp(32px, 4.4vw, 52px);
}
@media (min-width:640px){
  .footer-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (min-width:1000px){
  .footer-grid{ grid-template-columns:1.5fr 1fr 1fr 1.15fr; gap:clamp(24px, 3vw, 44px); }
}
.footer-col{ min-width:0; }
.footer-brand{ --mini-size:40px; }
.footer-tagline{
  margin-top:16px;
  max-width:34ch;
  font-size:var(--t-sm);
  line-height:1.62;
  color:var(--ink-2);
}
.footer-title{
  font-family:var(--mono);
  font-size:var(--t-mono);
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--peach);
  margin-bottom:16px;
}
.footer-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.footer-list a{
  font-size:var(--t-sm);
  color:var(--ink-1);
  border-bottom:1px solid transparent;
  transition:color .16s var(--ease), border-color .16s var(--ease);
}
.footer-list a:hover{ color:var(--peach); border-bottom-color:var(--peach); }
.footer-contact a{
  font-family:var(--mono);
  letter-spacing:.03em;
  overflow-wrap:anywhere;
}
.footer-address{ margin-top:4px; }
.footer-address address{ font-style:normal; }
.footer-address a{
  display:block;
  font-family:var(--body);
  letter-spacing:0;
  line-height:1.6;
  color:var(--ink-2);
  max-width:30ch;
}
.footer-address a:hover{ color:var(--peach); border-bottom-color:transparent; }

.social{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:20px;
}
.social a{
  font-family:var(--mono);
  font-size:var(--t-micro);
  font-weight:700;
  letter-spacing:.14em;
  color:var(--ink-1);
  border:1px solid var(--indigo-line);
  border-radius:var(--radius-pill);
  padding:8px 14px;
  transition:color .16s var(--ease), border-color .16s var(--ease), background-color .16s var(--ease);
}
.social a:hover{
  color:var(--peach-1);
  border-color:var(--peach);
  background:rgba(244,180,165,.08);
}

.footer-bottom{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:10px 20px;
  padding-block:20px clamp(22px, 3vw, 30px);
  border-top:1px solid var(--line);
}
.footer-bottom p{
  font-family:var(--mono);
  font-size:var(--t-micro);
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-2);
}
.footer-bottom a{ color:var(--ink-2); }
.footer-bottom a:hover{ color:var(--peach); }
@media (max-width:520px){
  .footer-bottom{ justify-content:flex-start; }
}

/* ---- REFERANSLAR ---- */
.ref-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(16px, 1.9vw, 24px);
}
/* Uzun alan adı taşıyan kartlar dar ekranda ızgara sütununu genişletmesin. */
.ref-grid > *{ min-width:0; }
@media (min-width:640px){
  .ref-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (min-width:1000px){
  .ref-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); }
}

.ref-card{
  position:relative;
  display:flex;
  flex-direction:column;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  transition:transform .22s var(--ease), border-color .22s var(--ease), background-color .22s var(--ease);
}
/* üst kenardaki mercan kılcalı — .card ile aynı imza */
.ref-card::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  z-index:5;
  height:2px;
  background:linear-gradient(90deg, var(--coral), var(--coral-l));
  opacity:0;
  transition:opacity .22s var(--ease);
}
.ref-card:hover{
  transform:translateY(-4px);
  border-color:var(--line-hi);
  background:var(--surface-hi);
}
.ref-card:hover::before{ opacity:1; }
.ref-card:focus-within{ border-color:var(--line-hi); }

/* Tarayıcı çerçevesi — ekran görüntüsünün "site" olduğunu okutur. */
.ref-chrome{
  display:flex;
  align-items:center;
  gap:10px;
  padding:11px 14px;
  background:rgba(10,10,26,.5);
  border-bottom:1px solid var(--line);
}
.ref-dots{ display:flex; gap:6px; flex:none; }
.ref-dots span{
  width:8px; height:8px;
  border-radius:50%;
  background:var(--indigo-line);
}
.ref-dots span:first-child{ background:rgba(246,100,88,.7); }
.ref-url{
  flex:1 1 auto;
  min-width:0;
  font-family:var(--mono);
  font-size:var(--t-mono);
  letter-spacing:.04em;
  color:var(--ink-2);
  background:rgba(10,10,26,.55);
  border:1px solid var(--line);
  border-radius:var(--radius-pill);
  padding:4px 13px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.ref-card:hover .ref-url{ color:var(--peach); }

.ref-shot{
  position:relative;
  display:block;
  isolation:isolate;
  overflow:hidden;
  background:var(--indigo-0);
}
/* Referans görselinde amaç müşterinin kendi kimliğini görmesi; bu yüzden
   hizmet kartlarındaki (.media) ağır renk muamelesi burada uygulanmaz.
   Zemine oturması için hafif bir kısma ve alt kenarda okunabilirlik
   gradyanı vardır, hover'da ikisi de kalkar. */
.ref-shot img{
  display:block;
  width:100%;
  aspect-ratio:16/10;
  object-fit:cover;
  object-position:top center;
  filter:saturate(.94) brightness(.97);
  transition:filter .35s var(--ease), transform .55s var(--ease);
}
.ref-shot::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(20,20,46,0) 62%, rgba(20,20,46,.55) 100%);
  transition:opacity .3s var(--ease);
}
.ref-card:hover .ref-shot img{
  filter:none;
  transform:scale(1.035);
}
.ref-card:hover .ref-shot::after{ opacity:.55; }

.ref-type{
  position:absolute;
  z-index:2;
  left:16px; bottom:14px;
  font-family:var(--mono);
  font-size:var(--t-micro);
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#fff;
  background:var(--coral);
  border-radius:var(--radius-pill);
  padding:6px 14px;
  box-shadow:0 10px 26px -12px rgba(232,58,57,.9);
}

.ref-body{
  display:flex;
  flex-direction:column;
  gap:11px;
  padding:clamp(20px, 2.2vw, 26px);
  flex:1 1 auto;
}
.ref-sector{
  font-family:var(--mono);
  font-size:var(--t-micro);
  font-weight:700;
  letter-spacing:.3em;
  text-indent:.3em;
  text-transform:uppercase;
  color:var(--peach);
}
.ref-title{
  font-family:var(--display);
  font-size:var(--t-h3);
  font-weight:600;
  color:var(--ink-0);
  line-height:1.2;
  letter-spacing:-.015em;
}
.ref-text{
  font-size:var(--t-sm);
  line-height:1.65;
  color:var(--ink-2);
}
.ref-tags{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:2px;
}
.ref-tags li{
  font-family:var(--mono);
  font-size:var(--t-micro);
  letter-spacing:.08em;
  color:var(--ink-1);
  background:var(--surface-hi);
  border:1px solid var(--line);
  border-radius:var(--radius-pill);
  padding:5px 12px;
}
.ref-visit{
  margin-top:auto;
  padding-top:14px;
  font-family:var(--mono);
  font-size:var(--t-mono);
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--peach);
}
.ref-visit::after{
  content:"↗";
  display:inline-block;
  margin-left:.55em;
  transition:transform .2s var(--ease);
}
.ref-card:hover .ref-visit{ color:var(--peach-1); }
.ref-card:hover .ref-visit::after{ transform:translate(3px,-3px); }

/* Kartın tamamı tıklanabilir; odak sırası tek bağlantıda kalır. */
.ref-visit::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:6;
}

.ref-note{
  max-width:60ch;
  margin-top:clamp(28px, 3.6vw, 44px);
  padding-left:clamp(16px, 2vw, 22px);
  border-left:2px solid rgba(246,100,88,.5);
  font-size:var(--t-sm);
  line-height:1.7;
  color:var(--ink-2);
}

/* ---- HAREKET AZALTMA ---- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .e{ display:none; }          /* elektronlar gizlenir; yörüngeler ve çekirdek kalır */
  .atom,.halo,.nucleus,body::before{ animation:none !important; }
  .card:hover{ transform:none; }
  .card:hover .media img{ transform:none; }
  .ref-card:hover{ transform:none; }
  .ref-card:hover .ref-shot img{ transform:none; }
  .ref-card:hover .ref-visit::after{ transform:none; }
  .btn--primary:hover{ transform:none; }
}