/* ============================================================================
   HOLM Digital — pazarlama sitesi katmanı
   Bölüm sırası: hero → hizmetler → start-up'lar → paketler → araçlar →
                 süreç → iletişim → footer
   Her bölüm farklı bir yerleşim ailesi kullanır (tekrar yok).
   ========================================================================== */

/* ============================ 0. Açılış ekranı =============================
   Kinetik tipografi: "HOLM" harfleri difference blend ile çakışan iki katman
   olarak açılır, ardından perde yerçekimiyle yukarı çekilir.                */

.splash {
  position: fixed; inset: 0;
  z-index: var(--z-splash);
  display: grid; place-items: center;
  background: var(--ink-1000);
  overflow: hidden;
}
.splash[hidden] { display: none; }

.splash__field {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 42% at 50% 50%, rgb(255 122 47 / .22), transparent 68%),
    radial-gradient(circle at 50% 50%, rgb(255 240 196 / .10), transparent 34%);
  animation: splash-collapse 2.1s var(--e-out) both;
}
@keyframes splash-collapse {
  from { transform: scale(2.4); opacity: 0; filter: blur(28px); }
  60%  { opacity: 1; }
  to   { transform: scale(1); opacity: .85; filter: blur(0); }
}

.splash__type {
  position: relative;
  isolation: isolate;
  font-family: var(--font-sans);
  font-size: clamp(4rem, 22vw, 16rem);
  font-weight: 700;
  letter-spacing: -0.06em;
  line-height: 1;
  color: var(--text-1);
  user-select: none;
}
/* İkinci katman difference modunda kayarak geçer: harfler kısa süre ters döner. */
.splash__type::after {
  content: attr(data-text);
  position: absolute; inset: 0;
  color: #fff;
  mix-blend-mode: difference;
  animation: splash-sweep 1.9s var(--e-io) both;
}
@keyframes splash-sweep {
  0%   { transform: translateX(-58%) skewX(-9deg); }
  62%  { transform: translateX(4%) skewX(0); }
  100% { transform: translateX(0); opacity: 0; }
}

.splash__caption {
  position: absolute;
  bottom: clamp(2rem, 8vh, 5rem);
  left: 50%; translate: -50% 0;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--text-3);
  animation: fade-up 900ms var(--e-out) 1.1s both;
}
@keyframes fade-up { from { opacity: 0; transform: translateY(12px); } }

.splash.is-leaving {
  animation: splash-lift 900ms var(--e-in) both;
  pointer-events: none;
}
@keyframes splash-lift {
  to { transform: translateY(-100%); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .splash__field, .splash__type::after, .splash__caption { animation: none; }
  .splash.is-leaving { animation: none; opacity: 0; }
}

/* ============================ 1. Navigasyon ================================ */

.nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: var(--z-nav);
  height: 72px;                    /* tavan 80px */
  display: flex; align-items: center;
  transition: background-color var(--t-base) var(--e-out),
              border-color var(--t-base) var(--e-out),
              backdrop-filter var(--t-base) var(--e-out);
  border-bottom: 1px solid transparent;
}
.nav.is-stuck {
  background: rgb(6 7 10 / .72);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom-color: var(--line);
}
@media (prefers-reduced-transparency: reduce) {
  .nav.is-stuck { background: var(--ink-1000); backdrop-filter: none; }
}

.nav__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-6); width: 100%;
}

.brand { display: inline-flex; align-items: center; gap: var(--s-3); flex: none; }
.brand__mark {
  width: 26px; height: 26px; flex: none;
  border-radius: var(--r-pill);
  background:
    radial-gradient(circle at 50% 50%, var(--ink-1000) 0 31%, transparent 31.5%),
    conic-gradient(from 210deg, var(--disk-out), var(--disk-mid) 28%, var(--disk-core) 46%, var(--disk-in) 60%, var(--disk-out) 92%);
  box-shadow: 0 0 22px -4px rgb(255 122 47 / .7);
  animation: mark-spin 26s linear infinite;
}
@keyframes mark-spin { to { rotate: 360deg; } }
@media (prefers-reduced-motion: reduce) { .brand__mark { animation: none; } }

.brand__text { font-weight: 600; letter-spacing: -0.02em; font-size: 1.0625rem; }
.brand__text span { color: var(--text-3); font-weight: 400; }

.nav__links { display: flex; align-items: center; gap: var(--s-6); }
.nav__links a {
  position: relative;
  font-size: var(--fs-sm);
  color: var(--text-2);
  padding-block: var(--s-2);
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 2px;
  height: 1px; background: var(--accent);
  transition: right var(--t-base) var(--e-out);
}
.nav__links a:hover { color: var(--text-1); }
.nav__links a:hover::after { right: 0; }

.nav__actions { display: flex; align-items: center; gap: var(--s-3); flex: none; }

.nav__toggle { display: none; }

@media (max-width: 900px) {
  .nav__links { display: none; }
  .nav__toggle {
    display: grid; place-items: center;
    width: 42px; height: 42px;
    border: 1px solid var(--line-2); border-radius: var(--r-pill);
    background: none; color: var(--text-1); cursor: pointer; font-size: 1.25rem;
  }
  .nav__drawer {
    position: fixed; inset: 72px 0 auto 0;
    /* z-index şart: bu değer olmadan hero canvas'ı (konumlandırılmış ve
       z-index'i olan bir kardeş) menünün üstüne boyanıyor ve menü açık
       olduğu halde görünmüyor. Navigasyonun hemen altında duruyor. */
    z-index: calc(var(--z-nav) - 1);
    display: grid; gap: var(--s-2);
    padding: var(--s-5) var(--gutter) var(--s-7);
    background: rgb(6 7 10 / .96);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--line);
    transform: translateY(-12px); opacity: 0; visibility: hidden;
    transition: opacity var(--t-base) var(--e-out), transform var(--t-base) var(--e-out), visibility var(--t-base);
  }
  .nav__drawer.is-open { transform: none; opacity: 1; visibility: visible; }
  .nav__drawer a { padding: var(--s-3) 0; font-size: 1.15rem; border-bottom: 1px solid var(--line); }
}
@media (min-width: 901px) { .nav__drawer { display: none; } }

/* ============================ 2. Hero ======================================
   Yerleşim ailesi: tam genişlik WebGL zemin + sola yaslanmış asimetrik metin  */

/* svh — dvh DEĞİL. Bu tek harf mobildeki en görünür hatayı çözüyor.

   `dvh` "dinamik görünüm yüksekliği"dir: iOS Safari'de adres çubuğu kaydırma
   sırasında büzülüp genişledikçe DEĞER DE DEĞİŞİR. Hero belgenin en üstünde
   ve tam ekran olduğu için, çubuk her hareket ettiğinde hero ~90px büyüyüp
   küçülüyor ve ALTINDAKİ HER ŞEY o kadar kayıyordu. Kayma çubuğu tekrar
   tetikliyor, o da yeniden kaydırıyor: kara deliğin ve sayfanın git-gel
   yapmasının sebebi bu geri besleme döngüsü. Ölçüldü: 812 → 902px yükseklik,
   altındaki başlık tam 90px yer değiştiriyor.

   `svh` "küçük görünüm yüksekliği"dir: adres çubuğu AÇIKKEN kalan alan. Sabit
   bir sayıdır, kaydırırken hiç değişmez. Yerleşim donuyor, döngü kırılıyor.
   Ayrıca hero en dar durumda bile tam sığdığı için "Paketleri gör" düğmesi
   ilk ekranda kalmayı garanti ediyor — `lvh` bunu bozardı. */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: center;
  padding-top: 72px;               /* nav yüksekliği; ek üst dolgu yok */
  overflow: hidden;
}

.hero__canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 0;
}
/* Metnin okunması için diskin üzerine soldan sağa doğru açılan bir perde. */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(93deg,
      var(--ink-1000) 0 18%,
      rgb(6 7 10 / .55) 38%,
      rgb(6 7 10 / .15) 56%,
      transparent 70%),
    linear-gradient(to top, var(--ink-1000), transparent 26%);
}

.hero__inner { position: relative; z-index: 2; width: 100%; }

.hero__copy {
  position: relative;
  max-width: 45rem;
  display: grid; gap: var(--s-5); justify-items: start;
}
/* Metin sütununu takip eden gölge. Perde sabit yüzdeye, sütun ise rem'e bağlı
   olduğu için dar ekranlarda ayrışıyorlardı; bu katman her genişlikte kontrastı
   garanti eder.

   İki kural belirliyor:
   1. Tepe opaklık .88 — tam siyah dolgu, diskin üzerinde dikdörtgen bir levha
      gibi okunuyordu. Bu değerde diskin parıltısı metnin arkasından hafifçe
      geçiyor ve katman bir kutu değil atmosfer gibi duruyor.
   2. Yatay gradyan tam olarak kutunun sağ kenarında sıfıra iniyor, dikeyde ise
      maske kenarları eritiyor. Böylece katmanın kendi sınırı hiçbir yerde
      görünür bir dikiş bırakmıyor. Sönüm ~900px'e yayılıyor. */
.hero__copy::before {
  content: "";
  position: absolute;
  inset: -60% -70% -60% -70vw;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(94deg,
    rgb(6 7 10 / .88) 0 68%,
    rgb(6 7 10 / .62) 76%,
    rgb(6 7 10 / .28) 86%,
    rgb(6 7 10 / .08) 93%,
    transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 16%, #000 84%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 16%, #000 84%, transparent 100%);
}
.hero__copy > * { position: relative; }

/* İkinci savunma hattı: gölge katmanını hafifletebilmek için metnin kendisine
   çok yumuşak bir dış gölge. Görünmez, ama parlak disk üzerinde okunurluğu
   garantiye alır. */
.hero__copy .eyebrow,
.hero__title,
.hero__copy .lead {
  text-shadow: 0 2px 28px rgb(6 7 10 / .72), 0 1px 3px rgb(6 7 10 / .5);
}

.hero__title {
  font-size: var(--fs-display);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: -0.042em;
  margin: 0;
}
.hero__title em {
  font-style: normal;
  color: var(--accent);
}

/* Alt metin başlıktan dar: sağa doğru uzayınca diskin parlak çekirdeğine
   giriyor ve gölge katmanını gereğinden fazla büyütmek zorunda kalıyorduk. */
.hero__copy .lead { max-width: 30rem; }

.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-2); }

/* Giriş koreografisi: başlık → alt metin → butonlar. Hero öncelikli. */
.hero__copy > * { animation: hero-rise 900ms var(--e-out) both; }
.hero__copy > :nth-child(1) { animation-delay: 120ms; }
.hero__copy > :nth-child(2) { animation-delay: 220ms; }
.hero__copy > :nth-child(3) { animation-delay: 340ms; }
.hero__copy > :nth-child(4) { animation-delay: 440ms; }
@keyframes hero-rise { from { opacity: 0; transform: translateY(26px); } }
@media (prefers-reduced-motion: reduce) { .hero__copy > * { animation: none; } }

/* ============================ 3. Bölüm başlıkları ========================== */

.sec-head {
  display: grid; gap: var(--s-4);
  max-width: 46rem;
  margin-bottom: var(--s-8);
}
.sec-head h2 { text-wrap: balance; }

/* ============================ 4. Hizmetler (bento) =========================
   6 içerik → tam 6 hücre. Boş hücre yok, satır ritmi değişiyor.              */

.bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--s-4);
}
.bento__cell {
  position: relative;
  /* isolation şart: hücre bir yığınlama bağlamı oluşturmazsa içindeki
     z-index:-1 katmanları (canvas, halftone, karartma) hücrenin opak arka
     planının ARKASINA boyanır ve hiç görünmez. Beliriş animasyonu sırasında
     opacity/transform geçici bir bağlam yarattığı için katmanlar bir an
     görünüp animasyon bitince kayboluyordu. */
  isolation: isolate;
  display: flex; flex-direction: column; justify-content: flex-end;
  gap: var(--s-3);
  min-height: 250px;
  padding: var(--s-6);
  border: 1px solid var(--line);
  border-radius: var(--r-box);
  background: var(--ink-800);
  overflow: hidden;
  transition: border-color var(--t-base) var(--e-out), transform var(--t-base) var(--e-out);
}
.bento__cell:hover { border-color: var(--line-2); transform: translateY(-3px); }

.bento__cell[data-span="7"] { grid-column: span 7; }
.bento__cell[data-span="5"] { grid-column: span 5; }
.bento__cell[data-span="4"] { grid-column: span 4; }
.bento__cell[data-span="8"] { grid-column: span 8; }
.bento__cell--tall { min-height: 380px; }

.bento__icon {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: var(--r-tiny);
  background: var(--accent-dim);
  color: var(--accent);
  font-size: 1.35rem;
  margin-bottom: auto;
}
.bento__cell h3 { max-width: 22ch; }
.bento__cell p { color: var(--text-2); font-size: var(--fs-sm); max-width: 44ch; }

/* Hücre arka planları: her hücrede üretken bir canvas ya da desen.
   Stok fotoğraf yerine markaya ait, deterministik olarak üretilen görsel. */
.bento__media {
  position: absolute; inset: 0; z-index: -1;
  /* width/height şart: canvas değiştirilmiş (replaced) bir öğe, `inset: 0`
     tek başına onu germiyor; içsel 300x150 boyutunda kalıyor. */
  width: 100%; height: 100%;
  opacity: .9;
  transition: opacity var(--t-slow) var(--e-out), transform var(--t-slow) var(--e-out);
}
.bento__cell:hover .bento__media { opacity: 1; transform: scale(1.03); }

/* Metnin okunması için alttan gelen karartma. Yalnızca yazının oturduğu
   alt bölgede tam opak; yukarıda hızla açılıyor ki animasyon görünsün. */
.bento__cell::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to top,
    var(--ink-800) 0 26%,
    rgb(15 18 24 / .58) 52%,
    rgb(15 18 24 / .18) 76%,
    transparent 94%);
}

/* Halftone deseni (Figma "Halftone" referansı) */
.bento__halftone {
  position: absolute; inset: 0; z-index: -1;
  background-image: radial-gradient(circle at center, var(--accent) 1.1px, transparent 1.4px);
  background-size: 13px 13px;
  -webkit-mask-image: radial-gradient(ellipse 84% 68% at 76% 24%, #000, transparent 76%);
          mask-image: radial-gradient(ellipse 84% 68% at 76% 24%, #000, transparent 76%);
  opacity: .62;
}

@media (max-width: 1000px) {
  .bento__cell[data-span] { grid-column: span 6; }
  .bento__cell--tall { min-height: 300px; }
}
@media (max-width: 700px) {
  .bento__cell[data-span] { grid-column: 1 / -1; min-height: 220px; }
  .bento__cell--tall { min-height: 260px; }
}

/* ============================ 5. Start-up'lar (kart destesi) ================
   Sürüklenebilir deste (Figma "Card Stack" referansı). Üstteki kart yana
   sürüklendiğinde destenin arkasına düşer.                                   */

.stack-wrap {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(var(--s-6), 6vw, var(--s-9));
  align-items: center;
}

.stack {
  position: relative;
  height: clamp(420px, 52vw, 520px);
  touch-action: pan-y;
}

.stack__card {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  gap: var(--s-4);
  padding: var(--s-6);
  border: 1px solid var(--line-2);
  border-radius: var(--r-box);
  background: var(--ink-800);
  box-shadow: var(--shadow-3);
  cursor: grab;
  overflow: hidden;
  user-select: none;
  /* Merkeze yakın pivot: 120% (kartın altında) küçük dönüşlerde bile kartı
     yana savuruyor ve deste dağınık görünüyordu. */
  transform-origin: 50% 65%;
  will-change: transform, opacity;
  /* Geçiş süreleri JS tarafından satır içi verilir; çıkış ile yerine oturma
     farklı easing ve süre kullandığı için tek bir CSS kuralı yetmiyor
     (bkz. js/cardstack.js). */
}
.stack__card:active { cursor: grabbing; }

.stack__glow {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse 90% 62% at 78% 8%, color-mix(in oklab, var(--card-accent) 46%, transparent), transparent 66%),
    linear-gradient(to top, var(--ink-800) 26%, transparent 78%);
}
.stack__rings {
  position: absolute; top: -22%; right: -14%; z-index: -1;
  width: 66%; aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid color-mix(in oklab, var(--card-accent) 34%, transparent);
  box-shadow:
    0 0 0 22px color-mix(in oklab, var(--card-accent) 7%, transparent),
    0 0 0 44px color-mix(in oklab, var(--card-accent) 4%, transparent),
    inset 0 0 60px color-mix(in oklab, var(--card-accent) 22%, transparent);
}

.stack__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.stack__card h3 { font-size: clamp(1.5rem, 3vw, 2rem); letter-spacing: -0.03em; }
.stack__code { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-3); }
.stack__card p { color: var(--text-2); font-size: var(--fs-sm); max-width: 46ch; }
.stack__foot { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; margin-top: var(--s-2); }

.stack__hint {
  display: flex; align-items: center; gap: var(--s-2);
  font-family: var(--font-mono); font-size: var(--fs-micro);
  letter-spacing: .16em; text-transform: uppercase; color: var(--text-3);
}
.stack__nav { display: flex; gap: var(--s-2); }
.stack__dots { display: flex; gap: var(--s-2); align-items: center; }
.stack__dot {
  width: 26px; height: 3px; border-radius: var(--r-pill);
  border: 0; padding: 0; cursor: pointer;
  background: var(--line-3);
  transition: background-color var(--t-base) var(--e-out), width var(--t-base) var(--e-out);
}
.stack__dot[aria-current="true"] { background: var(--accent); width: 40px; }

.stack-side { display: grid; gap: var(--s-5); align-content: center; }
.stack-side__list { display: grid; gap: var(--s-4); }
.stack-side__row {
  display: grid; grid-template-columns: auto 1fr; gap: var(--s-4);
  align-items: start;
  padding-block: var(--s-3);
  border-top: 1px solid var(--line);
}
.stack-side__row i { color: var(--accent); font-size: 1.1rem; margin-top: 3px; }
.stack-side__row span { font-size: var(--fs-sm); color: var(--text-2); }

@media (max-width: 940px) {
  .stack-wrap { grid-template-columns: 1fr; gap: var(--s-7); }
  .stack { height: 460px; }
}

/* ============================ 6. Paketler (karşılaştırma rayı) =============
   Kart kutusu yok; sütunlar 1px dikey çizgilerle ayrılıyor. Öne çıkan sütun
   tonlu zemin ve vurgu çizgisiyle ayrışıyor.                                 */

.plans {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--line);
  border-radius: var(--r-box);
  overflow: hidden;
  background: var(--ink-900);
}
.plan {
  display: flex; flex-direction: column; gap: var(--s-5);
  padding: var(--s-7) var(--s-5);
  border-left: 1px solid var(--line);
  transition: background-color var(--t-base) var(--e-out);
}
.plan:first-child { border-left: 0; }
.plan:hover { background: rgb(255 255 255 / .015); }

.plan--featured {
  background: linear-gradient(to bottom, var(--accent-dim), transparent 46%), var(--ink-800);
  box-shadow: inset 0 2px 0 var(--accent);
}
.plan--featured:hover { background: linear-gradient(to bottom, var(--accent-dim), transparent 46%), var(--ink-800); }

.plan__name { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.plan__name h3 { font-size: 1.25rem; }
.plan__tag { font-size: var(--fs-sm); color: var(--text-2); min-height: 3.2em; }

.plan__price { display: flex; align-items: baseline; gap: var(--s-2); flex-wrap: wrap; }
.plan__amount {
  font-family: var(--font-mono);
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.plan__period { font-size: var(--fs-xs); color: var(--text-3); font-family: var(--font-mono); }
/* Rakam olmayan fiyat ("Teklife göre") sütunu taşırmasın. */
.plan__amount--text { font-family: var(--font-sans); font-size: 1.375rem; letter-spacing: -0.02em; }

.plan__features { display: grid; gap: var(--s-3); margin-top: var(--s-2); flex: 1; }
.plan__features li {
  display: grid; grid-template-columns: auto 1fr; gap: var(--s-3);
  font-size: var(--fs-sm); color: var(--text-2); line-height: 1.5;
}
.plan__features i { color: var(--accent); font-size: .95rem; margin-top: 5px; }

@media (max-width: 1080px) {
  .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plan:nth-child(3) { border-top: 1px solid var(--line); }
  .plan:nth-child(4) { border-top: 1px solid var(--line); }
  .plan:nth-child(odd) { border-left: 0; }
}
@media (max-width: 640px) {
  .plans { grid-template-columns: 1fr; }
  .plan { border-left: 0; border-top: 1px solid var(--line); }
  .plan:first-child { border-top: 0; }
}

/* ============================ 7. Araçlar (yatay ray) ======================= */

.rail-head {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  justify-content: space-between; gap: var(--s-5);
  margin-bottom: var(--s-6);
}
.filters { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.filters .chip { cursor: pointer; background: none; }
.filters .chip[aria-pressed="true"] {
  border-color: var(--accent-line); color: var(--accent); background: var(--accent-dim);
}

.rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(292px, 1fr);
  gap: var(--s-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--s-4);
  margin-inline: calc(-1 * var(--gutter));
  padding-inline: var(--gutter);
  scrollbar-width: thin;
}
.rail > * { scroll-snap-align: start; }

.tool {
  display: flex; flex-direction: column; gap: var(--s-3);
  padding: var(--s-5);
  min-height: 236px;
}
.tool__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3); }
.tool__icon {
  width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: var(--r-tiny);
  background: var(--accent-dim); color: var(--accent); font-size: 1.25rem;
}
.tool h3 { font-size: 1.0625rem; }
.tool p { font-size: var(--fs-sm); color: var(--text-2); flex: 1; }
.tool__foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding-top: var(--s-3); border-top: 1px solid var(--line);
}
.tool__count { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-3); }

/* ============================ 8. Süreç (yapışkan ray) ====================== */

.process { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(var(--s-6), 6vw, var(--s-9)); }
.process__aside { position: sticky; top: 120px; align-self: start; display: grid; gap: var(--s-4); }
.process__steps { display: grid; }
.process__step {
  display: grid; grid-template-columns: auto 1fr; gap: var(--s-5);
  padding-block: var(--s-6);
  border-top: 1px solid var(--line);
}
.process__step:last-child { border-bottom: 1px solid var(--line); }
.process__step h3 { margin-bottom: var(--s-2); }
.process__step p { color: var(--text-2); font-size: var(--fs-sm); max-width: 52ch; }
.process__num {
  font-family: var(--font-mono); font-size: var(--fs-xs);
  color: var(--accent); padding-top: 6px; font-variant-numeric: tabular-nums;
}
@media (max-width: 900px) {
  .process { grid-template-columns: 1fr; gap: var(--s-6); }
  .process__aside { position: static; }
}

/* ============================ 9. İletişim ================================== */

.contact { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(var(--s-6), 6vw, var(--s-9)); align-items: start; }
.contact__aside { display: grid; gap: var(--s-6); }
.contact__points { display: grid; gap: var(--s-4); }
.contact__point { display: grid; grid-template-columns: auto 1fr; gap: var(--s-4); align-items: start; }
.contact__point i { color: var(--accent); font-size: 1.15rem; margin-top: 3px; }
.contact__point strong { display: block; font-weight: 500; margin-bottom: 2px; }
.contact__point span { font-size: var(--fs-sm); color: var(--text-2); }

.form { display: grid; gap: var(--s-5); padding: var(--s-7); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
@media (max-width: 760px) {
  .contact { grid-template-columns: 1fr; }
  .form { padding: var(--s-5); }
  .form__row { grid-template-columns: 1fr; }
}

/* ============================ 10. Footer =================================== */

.footer {
  border-top: 1px solid var(--line);
  padding-block: var(--s-8) var(--s-6);
  background: var(--ink-900);
}
.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: var(--s-7);
  margin-bottom: var(--s-8);
}
.footer__about { display: grid; gap: var(--s-4); max-width: 34ch; }
.footer__about p { font-size: var(--fs-sm); color: var(--text-2); }
.footer__col h4 { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .14em; color: var(--text-3); font-family: var(--font-mono); font-weight: 400; margin-bottom: var(--s-4); }
.footer__col ul { display: grid; gap: var(--s-3); }
.footer__col a { font-size: var(--fs-sm); color: var(--text-2); }
.footer__col a:hover { color: var(--accent); }
.footer__base {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding-top: var(--s-5); border-top: 1px solid var(--line);
  font-size: var(--fs-xs); color: var(--text-3);
}
@media (max-width: 860px) {
  .footer__grid { grid-template-columns: 1fr 1fr; gap: var(--s-6); }
  .footer__about { grid-column: 1 / -1; }
}

/* ============================ Modal içerikleri ============================= */

.detail__head { display: grid; gap: var(--s-3); }
.detail__tags { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.detail__body { color: var(--text-2); font-size: var(--fs-sm); line-height: 1.72; }
.detail__list { display: grid; gap: var(--s-3); }
.detail__list li { display: grid; grid-template-columns: auto 1fr; gap: var(--s-3); font-size: var(--fs-sm); color: var(--text-2); }
.detail__list i { color: var(--accent); margin-top: 4px; }
.detail__foot { display: flex; flex-wrap: wrap; gap: var(--s-3); padding-top: var(--s-4); border-top: 1px solid var(--line); }

/* ============================ Araç kütüphanesi sayfası ===================== */

.page-head {
  padding-top: calc(72px + var(--s-9));
  padding-bottom: var(--s-7);
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.page-head__canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: .5; }
.page-head::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to top, var(--ink-1000) 8%, rgb(6 7 10 / .6) 52%, transparent);
}
.page-head .shell { position: relative; z-index: 2; }
.page-head__grid { display: grid; gap: var(--s-5); max-width: 44rem; }

.lib-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4);
  justify-content: space-between;
  margin-bottom: var(--s-6);
}
.lib-search { position: relative; flex: 1 1 260px; max-width: 360px; }
.lib-search i {
  position: absolute; left: 0.95rem; top: 50%; translate: 0 -50%;
  color: var(--text-3); pointer-events: none;
}
.lib-search .input { padding-left: 2.6rem; }

.library {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--s-4);
}
.library .tool { min-height: 250px; }
.library .tool:target { border-color: var(--accent); box-shadow: var(--glow); }

/* ============================ Hero: dar ekran kadrajı =====================
   Mobilde disk üstte, metin altta. Gölge katmanı yatay yerine dikey söner. */

@media (max-width: 900px) {
  .hero { align-items: flex-end; padding-bottom: var(--s-9); }

  .hero__copy::before {
    inset: -22% -40vw -70% -40vw;
    /* Masaüstündeki gibi tam opak değil: disk metnin üstünde kaldığı için
       geçiş dikey, ama zemin yine de nefes alıyor. */
    background: linear-gradient(to top,
      rgb(6 7 10 / .92) 0 58%,
      rgb(6 7 10 / .70) 78%,
      rgb(6 7 10 / .28) 92%,
      transparent 100%);
    /* Masaüstündeki dikey maske burada kapatılmalı: gradyan zaten dikey
       yönde sönüyor, maske üstüne binerse metnin altındaki zemini de siler. */
    -webkit-mask-image: none;
            mask-image: none;
  }

  .hero::after {
    background: linear-gradient(to top,
      var(--ink-1000) 2%,
      rgb(6 7 10 / .30) 42%,
      transparent 74%);
  }
}

/* Paket rayı: KDV dahil karşılığı ve eylem düğmeleri */
.plan__gross {
  font-size: var(--fs-xs);
  color: var(--text-3);
  margin-top: calc(-1 * var(--s-3));
}
.plan__actions { display: grid; gap: var(--s-2); }

/* iyzico ödeme formu kabı */
#iyzipay-checkout-form { position: relative; z-index: var(--z-modal); }