/* ==========================================================================
   Karal Digital — tasarım sistemi
   Faz 2'de onaylanan token seti. Renk çekirdeği #235EC2, logodan ölçüldü.
   ========================================================================== */

/**
 * Archivo — değişken ağırlıklı (100–900), kendi sunucumuzdan.
 *
 * **Neden `@fontsource-variable/archivo` paketi import edilmiyor** (5 Ağu 2026):
 * paketin CSS'i dosyalara derleme karmalı adreslerle bağlanıyor
 * (`archivo-latin-wght-normal.<karma>.woff2`), yani adres her derlemede
 * değişiyor ve fonta `<link rel="preload">` yazılamıyor. Preload olmadan
 * tarayıcı fontu ancak CSS'i indirip ayrıştırdıktan sonra keşfediyor; ölçümde
 * Speed Index'i yukarı çeken şey buydu. Dosyalar `public/varliklar/fontlar/` altına sabit
 * adlarla kopyalandı, düzen dosyaları da o adresleri preload ediyor.
 *
 * İki alt küme ayrı ayrı duruyor — Türkçe ikisini de kullanıyor: `ı` latin'de,
 * `ğ ş İ` latin-ext'te. Tek dosyada birleştirmek `unicode-range`i kaybettirir
 * ve İngilizce sayfalara gereksiz 33 KB indirtirdi.
 *
 * **Dosya güncellenecekse adı da değişmeli** — `next.config.ts` bu adrese
 * bir yıllık `immutable` önbellek veriyor.
 */
@font-face {
  font-family: 'Archivo Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('/varliklar/fontlar/archivo-wght-latin.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Archivo Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('/varliklar/fontlar/archivo-wght-latin-ext.woff2') format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}

/**
 * Archivo yüklenene kadar gösterilecek yedek yüz. Sistem fontunun ölçülerini
 * Archivo'ya yaklaştırıyor, böylece font geldiğinde metin yerinden oynamıyor
 * (CLS). Değerler ölçümle bulundu: Archivo, Segoe UI'ın %99,1'i ve Arial'ın
 * %98,6'sı genişlikte; üst çıkıntı %88, alt sarkma %21.
 */
@font-face {
  font-family: 'Archivo Yedek';
  src:
    local('Segoe UI'),
    local('Helvetica Neue'),
    local('Arial');
  size-adjust: 98.8%;
  ascent-override: 88%;
  descent-override: 21%;
  line-gap-override: 0%;
}

:root {
  /* marka ölçeği */
  --b900: #0b1526;
  --b800: #12213b;
  --b700: #17408a;
  --b600: #1c4ea6;
  --b500: #235ec2;
  --b400: #4e80d6;
  --b300: #8aaee8;
  --b100: #d8e4f6;
  --b050: #edf2fb;

  /* nötrler — maviye doğru hafifçe kaydırılmış, saf gri kullanılmıyor */
  --ink: #0f1b2d;
  --ink2: #33415a;
  --mut: #5d6c84;
  --mut2: #8b99ae;
  --paper: #f8fafc;
  --card: #ffffff;
  --band: #e7eef7;
  --line: #dce4ef;
  --line2: #edf1f6;

  /* eylem renkleri */
  --btn: #235ec2;
  --btnh: #1c4ea6;
  --wa: #128c51;
  --wabg: #e7f6ee;

  /**
   * Tipografi. Archivo kendi sunucumuzdan geliyor (değişken, 100–900), böylece
   * tasarım her işletim sisteminde aynı görünüyor. Tek aile iki rolde
   * kullanılıyor: başlıklarda kalın ve sıkı harf aralığı, gövdede normal.
   * Yedek zincir yalnızca font yüklenemezse devreye girer.
   */
  --disp: 'Archivo Variable', 'Archivo Yedek', system-ui, Arial, sans-serif;
  --body: 'Archivo Variable', 'Archivo Yedek', system-ui, Arial, sans-serif;
  /* Tek satırlık etiketler için; kendi fontunu barındırmaya değmez.
     ui-monospace Apple'da SF Mono'ya, Windows'ta Consolas'a düşer. */
  --mono: ui-monospace, 'Cascadia Mono', 'SF Mono', Menlo, Consolas, monospace;

  /**
   * ölçü
   *
   * 6 Eyl 2026'da 1180'den büyütüldü: 1440 ve üstü ekranlarda sayfa ortada
   * dar bir şerit gibi duruyordu. 1320 bilinçli bir üst sınır — 1440
   * denendi ve geri alındı, 1440 px'lik dizüstü ekranlarda kabuk kenara
   * dayanıp yan boşluk kalmıyordu.
   *
   * Genişlemenin iki yerde karşılığı var, ikisi de aşağıda: proje ızgarası
   * kendiliğinden 4 sütuna düşmesin diye sabitlendi (kartlar küçülüyordu),
   * vaka sayfasının iki sütunu ise 66ch'lik metne göre yeniden ölçüldü.
   */
  --shell: 1320px;

  /* yumuşak geometri — 30 Tem yön değişikliği */
  --r-sm: 10px;
  --r: 18px;
  --r-lg: 30px;
  --golge: 0 24px 60px rgba(15, 27, 45, 0.1);
  --golge-yumusak: 0 14px 34px -18px rgba(15, 27, 45, 0.22);
  --golge-kart: 0 26px 64px -26px rgba(19, 55, 104, 0.3);

  /**
   * 5 Eylül 2026 — görsel yenileme katmanı.
   *
   * Kavis ölçeği genişletildi: iç içe kutularda dış kabuk büyük, iç çekirdek
   * küçük kavis alıyor. Eşmerkezli görünmesi için iç kavis = dış kavis eksi
   * aradaki dolgu; `--r-ic` bunu hesaplıyor, elle sayı yazılmıyor.
   */
  --r-xs: 8px;
  --r-xl: 34px;
  --kabuk-dolgu: 7px;
  --r-ic: calc(var(--r-xl) - var(--kabuk-dolgu));

  /**
   * Ortam gölgeleri. Tek sert gölge yerine üç katman: temas (1–2 px), gövde
   * (orta) ve dağınık ortam (geniş, düşük yoğunluk). Hepsi marka mavisine
   * boyalı — saf siyah gölge açık zeminde gri kir gibi duruyordu.
   * Işık kaynağı tüm sayfada tek: yukarıdan, hafif önden.
   */
  --golge-cevre:
    0 1px 2px -1px rgba(19, 55, 104, 0.06),
    0 10px 22px -10px rgba(19, 55, 104, 0.1),
    0 38px 76px -34px rgba(19, 55, 104, 0.14);
  --golge-yuksek:
    0 2px 5px -2px rgba(19, 55, 104, 0.07),
    0 18px 38px -14px rgba(19, 55, 104, 0.14),
    0 60px 116px -50px rgba(19, 55, 104, 0.2);
  /* Kabuğun üst kenarındaki 1 px'lik iç ışık — yüzeyi fiziksel gösteriyor. */
  --ic-isik: inset 0 1px 0 rgba(255, 255, 255, 0.72);
  --hairline: rgba(19, 55, 104, 0.08);

  /**
   * Hareket. `ease-in-out` kullanılmıyor: simetrik olduğu için hareket
   * mekanik duruyor. Bu eğri sona doğru uzun bir yavaşlama bırakıyor,
   * kütlesi olan bir cisim gibi. `--eas-yay` yalnızca geri bildirim veren
   * küçük öğelerde (buton içi ok) kullanılıyor.
   */
  --eas: cubic-bezier(0.32, 0.72, 0, 1);
  --eas-yay: cubic-bezier(0.34, 1.4, 0.64, 1);
  --sure: 0.5s;
  --sure-yavas: 0.8s;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #e8edf5;
    --ink2: #bac6d8;
    --mut: #8b99ae;
    --mut2: #64748c;
    --paper: #0a1220;
    --card: #101b2e;
    --band: #0f1d33;
    --line: #1e2c42;
    --line2: #1a2431;
    --b050: #15233c;
    --b100: #1c3054;
    --b500: #6c9ae8;
    --b600: #8aaee8;
    --b700: #a8c4f0;
    --btn: #2e6ad1;
    --btnh: #4e80d6;
    --wa: #3fb57e;
    --wabg: #0f2a1e;
    --golge: 0 24px 60px rgba(0, 0, 0, 0.45);
    --golge-yumusak: 0 14px 34px -18px rgba(0, 0, 0, 0.6);
    --golge-kart: 0 26px 64px -26px rgba(0, 0, 0, 0.7);
    /* Karanlıkta gölge görünmez; derinliği kenar ışığı taşıyor. */
    --golge-cevre:
      0 1px 2px -1px rgba(0, 0, 0, 0.5),
      0 12px 28px -12px rgba(0, 0, 0, 0.55),
      0 40px 80px -36px rgba(0, 0, 0, 0.6);
    --golge-yuksek:
      0 2px 6px -2px rgba(0, 0, 0, 0.55),
      0 20px 44px -16px rgba(0, 0, 0, 0.6),
      0 64px 120px -52px rgba(0, 0, 0, 0.7);
    --ic-isik: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    --hairline: rgba(255, 255, 255, 0.09);
  }
}

:root[data-theme='dark'] {
  --ink: #e8edf5;
  --ink2: #bac6d8;
  --mut: #8b99ae;
  --mut2: #64748c;
  --paper: #0a1220;
  --card: #101b2e;
  --band: #0f1d33;
  --line: #1e2c42;
  --line2: #1a2431;
  --b050: #15233c;
  --b100: #1c3054;
  --b500: #6c9ae8;
  --b600: #8aaee8;
  --b700: #a8c4f0;
  --btn: #2e6ad1;
  --btnh: #4e80d6;
  --wa: #3fb57e;
  --wabg: #0f2a1e;
  --golge: 0 24px 60px rgba(0, 0, 0, 0.45);
  --golge-yumusak: 0 14px 34px -18px rgba(0, 0, 0, 0.6);
  --golge-kart: 0 26px 64px -26px rgba(0, 0, 0, 0.7);
}

/* ---------- temel ---------- */

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
  font-family: var(--disp);
  letter-spacing: -0.03em;
  /* Türkçe'de İ'nin noktası ve ğ/ş/ç alt uzantıları sıkı satır aralığında
     komşu satıra giriyor. 1.18 en kötü durumda (…ğ / İ…) bile pay bırakıyor. */
  line-height: 1.18;
  text-wrap: balance;
  margin: 0;
}

p {
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

img,
svg {
  max-width: 100%;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

:focus-visible {
  outline: 3px solid var(--b400);
  outline-offset: 3px;
  border-radius: 4px;
}

/* klavye kullanıcıları için içeriğe atlama bağlantısı */
.skipLink {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 999;
  padding: 11px 18px;
  color: #fff;
  background: var(--b900, #0b1526);
  border-radius: var(--r-sm);
  font-weight: 600;
  font-size: 14px;
  transform: translateY(-160%);
  transition: transform 0.2s ease;
}
.skipLink:focus {
  transform: translateY(0);
}

/* ---------- düzen ---------- */

.shell {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 28px;
}
@media (max-width: 640px) {
  .shell {
    padding: 0 18px;
  }
}

/**
 * Bölüm ritmi (5 Eyl 2026'da 96 px'den büyütüldü).
 *
 * Alt dolgu üstten bir tık fazla: bir bölümün başlığı gözle üst boşluğa
 * yaslanıyor, içeriğin altındaki boşluk ise optik olarak daha dar
 * görünüyor. Matematiksel simetri burada eşit görünmüyordu.
 *
 * Değer bir kez 132/148'e çıkarılıp geri çekildi: iki düz bölüm yan yana
 * geldiğinde alt ve üst dolgular toplanıyor (aşağıdaki kurala bak) ve
 * 250 px'lik ölü alanlar oluşuyordu.
 */
.section {
  padding: 112px 0 124px;
}
.section + .section {
  padding-top: 0;
}

/**
 * Zeminli bölüm. Gövde düz --band; yalnızca üst ve alt 40 px'de sayfa rengine
 * soluyor. Böylece bant net görünür ama kenarda keskin bir çizgi oluşmaz.
 * (Önceki sürüm %9'a kadar soluyordu ve bant fark edilmiyordu.)
 */
.sectionWash {
  background:
    linear-gradient(180deg, var(--paper), transparent 40px),
    linear-gradient(0deg, var(--paper), transparent 40px),
    var(--band);
}

/**
 * İki düz bölüm yan yana geldiğinde renk farkı olmadığı için ayrım kaybolur;
 * araya saç teli kalınlığında bir çizgi koyuyoruz.
 */
/**
 * İki düz bölüm ard arda geldiğinde araya saç teli kalınlığında bir çizgi
 * giriyor. Buradaki üst dolgu, bir önceki bölümün alt dolgusuna **eklenir**;
 * o yüzden tam değil, tamamlayıcı bir pay olmalı. 104 px yazıldığında
 * toplam 228 px'e çıkıyor ve iki blok arasında sayfa boşmuş gibi
 * görünüyordu (5 Eyl 2026, proje detay sayfasında fark edildi).
 */
.section:not(.sectionWash) + .section:not(.sectionWash) {
  padding-top: 44px;
  border-top: 1px solid var(--line2);
}

@media (max-width: 700px) {
  .section {
    padding: 68px 0 76px;
  }
  .section:not(.sectionWash) + .section:not(.sectionWash) {
    padding-top: 30px;
  }
  .sectionWash {
    background:
      linear-gradient(180deg, var(--paper), transparent 28px),
      linear-gradient(0deg, var(--paper), transparent 28px),
      var(--band);
  }
}

/**
 * İç sayfalarda ritim daha sıkı.
 *
 * Anasayfada bir `.section` koca bir blok — proje ızgarası, paket sütunları,
 * süreç panosu — ve etrafında geniş bir nefes payı hak ediyor. İç sayfalarda
 * ise aynı sınıf çoğu zaman küçük bir künye tablosunu ya da tek paragrafı
 * sarıyor; orada aynı pay, sayfa yarım kalmış gibi gösteriyor.
 *
 * Ayrım DOM'dan okunuyor, ek sınıfa gerek yok: anasayfa bölümleri `main`in
 * doğrudan çocuğu ve `.shell`i **içeriyor**; iç sayfalarınki `.shell`in
 * **içinde** duruyor.
 */
.shell .section {
  padding: 64px 0 72px;
}
.shell .section:not(.sectionWash) + .section:not(.sectionWash) {
  padding-top: 34px;
}
@media (max-width: 700px) {
  .shell .section {
    padding: 44px 0 50px;
  }
}

/**
 * `.pageEnd`, kendi alt boşluğu olmayan sayfalar için footer'dan önceki
 * yastık — `/blog`, `/projeler`, `/iletisim` gibi düz `.shell` ile biten
 * sayfalarda gerekiyor.
 *
 * Sayfa bir `.section` ile bitiyorsa o pay zaten var; ikisi toplanınca
 * footer'ın üstünde boş bir şerit kalıyor. İki bitiş biçimi de yakalanıyor:
 * bölüm doğrudan kardeş (`/sss`, `/paketler`, `/teklif-al`) ya da bir
 * `.shell`in son çocuğu (`/projeler/<proje>`).
 */
.section + .pageEnd,
main > div:has(> .section:last-child) + .pageEnd {
  height: 0;
}

/* başlık + yanına açıklama düzeni */
/**
 * Başlık solda, açıklama sağda. Açıklama sütunu 42ch'e indirildi: 460 px'de
 * satırlar ~72 karaktere çıkıyordu, göz satır sonundan başına dönerken
 * kayboluyordu. 60–65 karakter hedef.
 */
.secBlock {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 64px;
  margin-bottom: 64px;
}
.secBlock > p {
  max-width: 42ch;
  color: var(--mut);
  margin-bottom: 8px;
  line-height: 1.7;
  text-wrap: pretty;
}
@media (max-width: 860px) {
  .secBlock {
    display: block;
    margin-bottom: 32px;
  }
  .secBlock > p {
    margin-top: 14px;
  }
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--b600);
  font-weight: 700;
}
.eyebrow::before {
  content: '';
  width: 26px;
  height: 2px;
  background: currentColor;
  flex: none;
}

.secHead {
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
}
.secKicker {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--b500);
  font-weight: 600;
}
/**
 * Başlıklar büyütüldü ve harf aralığı sıkıldı — 46 px'de başlıklar gövde
 * metninin yanında yeterince baskın durmuyordu.
 *
 * `line-height: 1.14` Türkçe için alt sınır: bir satır ğ/ş ile bitip
 * sonraki İ ile başladığında çakışma olmuyor. Hero başlığındaki 1.16 ile
 * aynı gerekçe — oradaki not geçerli, daha aşağı çekilmemeli.
 *
 * `text-wrap: balance` son satırda tek kelime kalmasını (dul kelime)
 * engelliyor; desteklemeyen tarayıcıda görünüm bugünküyle aynı kalıyor.
 */
.secTitle {
  font-size: clamp(31px, 4.7vw, 57px);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.033em;
  max-width: 19ch;
  text-wrap: balance;
}
.lede {
  color: var(--mut);
  max-width: 58ch;
  margin-top: 18px;
  font-size: 17px;
  line-height: 1.75;
  text-wrap: pretty;
}

/* ---------- butonlar ---------- */

/**
 * Butonlar — 5 Eyl 2026 yenilemesi.
 *
 * Üç değişiklik:
 * 1. Hap biçimi (`--r-sm` yerine tam yuvarlak). Sayfadaki tek tam yuvarlak
 *    öğe butonlar; bu onları kart kavislerinden ayırıyor ve "basılabilir"
 *    olduklarını biçim üzerinden anlatıyor.
 * 2. Basma geri bildirimi: `:active`'te 0.98'e küçülüyor. Fiziksel bir tuşa
 *    basma hissi; dokunmatikte tıklamanın kaydedildiğini de gösteriyor.
 * 3. Geçiş eğrisi `ease` yerine `--eas`. Simetrik eğri mekanik duruyordu.
 *
 * `transform` ve `opacity` dışında hiçbir şey animasyona girmiyor — düzen
 * tetikleyen özellikler (width/top) mobilde kare düşürüyor.
 */
.btn {
  position: relative;
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--body);
  font-weight: 650;
  font-size: 15px;
  letter-spacing: -0.006em;
  padding: 0 12px 0 26px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  text-align: center;
  transition:
    background var(--sure) var(--eas),
    border-color var(--sure) var(--eas),
    color var(--sure) var(--eas),
    transform var(--sure) var(--eas),
    box-shadow var(--sure) var(--eas);
}
/* Oku olmayan butonda sağ dolgu solla eşitleniyor. */
.btn:not(:has(> [aria-hidden])) {
  padding: 0 26px;
}

/**
 * Buton içi ok kendi dairesinin içinde duruyor — metnin yanında çıplak
 * durduğunda hizası kayıyor ve ucuz görünüyordu. Daire butonun sağ iç
 * dolgusuna tam oturuyor.
 */
.btn > [aria-hidden] {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
  flex: none;
  background: rgba(255, 255, 255, 0.16);
  /* Ok karakterinin optik merkezi geometrik merkezin 1 px sağında kalıyor. */
  text-indent: -1px;
  transition:
    transform var(--sure) var(--eas-yay),
    background var(--sure) var(--eas);
}
.btn:hover > [aria-hidden] {
  transform: translateX(3px);
  background: rgba(255, 255, 255, 0.26);
}

.btnPrimary {
  background: var(--btn);
  border-color: var(--btn);
  color: #fff;
  box-shadow:
    0 1px 2px rgba(19, 55, 104, 0.16),
    0 10px 24px -10px rgba(35, 94, 194, 0.55);
}
.btnPrimary:hover {
  background: var(--btnh);
  border-color: var(--btnh);
  transform: translateY(-2px);
  box-shadow:
    0 1px 2px rgba(19, 55, 104, 0.16),
    0 18px 34px -12px rgba(35, 94, 194, 0.5);
}
.btnOutline {
  border-color: var(--line);
  color: var(--ink);
  background: transparent;
}
.btnOutline > [aria-hidden],
.btnWa > [aria-hidden] {
  background: color-mix(in srgb, currentColor 12%, transparent);
}
.btnOutline:hover {
  border-color: var(--b400);
  color: var(--b600);
  background: color-mix(in srgb, var(--b500) 5%, transparent);
  transform: translateY(-2px);
}
.btnWa {
  background: var(--wabg);
  color: var(--wa);
}
.btnWa:hover {
  filter: brightness(0.97);
  transform: translateY(-2px);
}

/* Basma anı: yükselme geri alınıp hafif küçülüyor. */
.btn:active {
  transform: translateY(0) scale(0.975);
  transition-duration: 0.09s;
}

/* Klavye odağı — fare kullanıcısını rahatsız etmeden görünür halka. */
.btn:focus-visible {
  outline: 2px solid var(--b500);
  outline-offset: 3px;
}

.btn[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ---------- koyu bantlar ---------- */

.darkBand {
  background: var(--b900);
  color: #fff;
}
.darkBand h2,
.darkBand h1 {
  color: #fff;
}
.darkBand p {
  color: #8fa3c4;
}

/* Eski keskin diyagonal kesimlerin yerini yumuşak geometri aldı (30 Tem).
   Sınıflar geriye dönük uyumluluk için duruyor ama artık kesim yapmıyor. */
.clipTop,
.clipBoth {
  clip-path: none;
}

.tabular {
  font-variant-numeric: tabular-nums;
}

/* Sayfa sonu ile footer arasındaki nefes payı. Kendi alt boşluğu olan
   bölümlerle (.section) biten sayfalarda kullanılmaz. */
/* Yalnızca ekran okuyucuların göreceği metin. */
.srOnly {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.pageEnd {
  height: 96px;
}
@media (max-width: 700px) {
  .pageEnd {
    height: 64px;
  }
}

/**
 * Kağıt taneciği (5 Eyl 2026).
 *
 * Tümü düz renk olan bir sayfa ekranda steril duruyor; çok düşük yoğunluklu
 * bir gürültü katmanı yüzeye fiziksel bir doku veriyor. SVG feTurbulence
 * data URI olarak gömülü — ayrı bir istek yok, `img-src 'self' data:`
 * CSP'sine uyuyor.
 *
 * Katman `position: fixed` ve `pointer-events: none`: kaydırılan içeriğe
 * bağlanırsa her karede yeniden boyanır ve mobilde kare düşürür.
 *
 * z-index 45: yapışkan başlığın (50) ve dil menüsünün altında kalıyor;
 * gezinme öğelerinin üstünde tanecik istemiyoruz.
 */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 45;
  pointer-events: none;
  opacity: 0.032;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
  /* Karanlıkta aynı yoğunluk daha çok göze çarpıyor. */
  body::after {
    opacity: 0.045;
  }
}

/**
 * Giriş hareketi. Başlangıç durumu yalnızca `js-hareket` sınıfı varken
 * geçerli; o sınıfı `hareket.js` ekliyor. Betik inmezse öğeler hiç
 * gizlenmiyor — gerekçe hareket.js'in başındaki nota yazıldı.
 *
 * Yalnızca `transform` ve `opacity` animasyona giriyor: ikisi de
 * kompozitörde çalışıyor, yerleşimi ya da boyamayı tetiklemiyor.
 */
.js-hareket .belirir {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity var(--sure-yavas) var(--eas),
    transform var(--sure-yavas) var(--eas);
  will-change: transform, opacity;
}
.js-hareket .belirir.belirdi {
  opacity: 1;
  transform: none;
  /* Hareket bittikten sonra katmanı serbest bırak. */
  will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}


/* ===== anasayfa ===== */
/* =========================================================================
   ANASAYFA — 30 Temmuz yeniden tasarımı
   Yumuşak geometri, blurlu yüzeyler, ferah tipografi.
   Marka rengi (#235EC2) ve logo korundu; tüm içerik panelden gelir.
   ========================================================================= */

/* ---------- HERO ---------- */
.anasayfa-hero {
  position: relative;
  overflow: hidden;
  padding: 76px 0 0;
  background:
    radial-gradient(circle at 82% 18%, color-mix(in srgb, var(--b500) 11%, transparent), transparent 23rem),
    linear-gradient(180deg, var(--card) 0%, var(--paper) 100%);
}
/**
 * Alt kenarda hafif koyulaşma. Eskiden kenardan kenara koyu sayaç şeridine
 * geçişi yumuşatıyordu; şerit yüzen bir levhaya dönüşünce (5 Eyl 2026) bu
 * gölgenin işi levhanın altına zemin hazırlamak oldu, o yüzden daha soluk.
 */
.anasayfa-hero::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 190px;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--b500) 4%, transparent));
  pointer-events: none;
}

/* halka motifi — logodaki yay hareketinin yumuşak yorumu */
.anasayfa-hero::after {
  content: '';
  position: absolute;
  top: 30px;
  right: -70px;
  width: 320px;
  height: 320px;
  border: 1px solid color-mix(in srgb, var(--b500) 16%, transparent);
  border-radius: 50%;
  box-shadow:
    0 0 0 42px color-mix(in srgb, var(--b500) 3%, transparent),
    0 0 0 90px color-mix(in srgb, var(--b500) 2%, transparent);
  pointer-events: none;
}

.anasayfa-heroInner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(380px, 0.95fr);
  align-items: stretch;
  gap: 64px;
}

.anasayfa-heroCopy {
  /* Levha 56 px yukarı bindiği için hero'nun alt payı o kadar artırıldı. */
  padding-bottom: 118px;
}

.anasayfa-heroTitle {
  font-size: clamp(38px, 6.4vw, 74px);
  /**
   * Türkçe'de en kötü durum: bir satır ğ/ş ile bitip sonraki satır İ ile başlıyor.
   * 74 px'de ğ'nin alt uzantısı 16 px, İ'nin noktası 67 px yukarı çıkıyor —
   * toplam 83 px. 1.08 (79.9 px) çakışıyordu; 1.16 (85.8 px) pay bırakıyor.
   * Yazı tipi yedeğe düşse de güvende kalsın diye biraz cömert tutuldu.
   */
  line-height: 1.16;
  font-weight: 700;
  letter-spacing: -0.035em;
  margin-top: 20px;
  max-width: 15ch;
}
.anasayfa-heroTitle em {
  display: block;
  font-style: normal;
  color: var(--b500);
}

.anasayfa-heroSub {
  font-size: clamp(16.5px, 1.6vw, 19px);
  color: var(--mut);
  max-width: 52ch;
  margin-top: 22px;
}

.anasayfa-heroCta {
  display: flex;
  gap: 12px;
  margin: 32px 0 24px;
  flex-wrap: wrap;
}

.anasayfa-micro {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 14.5px;
  color: var(--mut);
}
.anasayfa-micro b {
  color: var(--ink);
  font-weight: 650;
}
.anasayfa-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #0da866;
  border: 4px solid color-mix(in srgb, #0da866 18%, transparent);
  flex: none;
}

.anasayfa-heroShowcase {
  min-width: 0;
  display: flex;
  padding-bottom: 80px;
}

@media (min-width: 981px) {
  .anasayfa-hero {
    display: flex;
    align-items: center;
    min-height: calc(100svh - 76px);
    padding: 0;
  }
  .anasayfa-heroCopy,
  .anasayfa-heroShowcase {
    padding-bottom: 0;
  }
}
@media (max-width: 980px) {
  .anasayfa-heroInner {
    grid-template-columns: 1fr;
    gap: 34px;
  }
  .anasayfa-heroCopy {
    padding-bottom: 8px;
  }
  .anasayfa-heroShowcase {
    width: min(100%, 640px);
    margin-inline: auto;
    padding-bottom: 40px;
  }
  .anasayfa-hero::after {
    display: none;
  }
}
@media (max-width: 700px) {
  .anasayfa-hero {
    padding-top: 48px;
  }
  .anasayfa-heroCta {
    display: grid;
  }
  .anasayfa-heroCta > * {
    width: 100%;
  }
}

/* ---------- GÜVEN ŞERİDİ (sayaçlar) ---------- */
/**
 * KOYU YÜZEY AİLESİ (5 Eyl 2026)
 *
 * Sayfada dört koyu alan var: sayaç levhası, süreç paneli, öne çıkan paket
 * ve iletişim paneli. Önceden her biri kendi reçetesiyle boyanmıştı ve
 * ikisi kenardan kenara düz dikdörtgendi — açık bir sayfanın ortasında
 * aniden beliren koyu bir blok, tasarım kararı değil kaza gibi okunuyordu.
 *
 * Artık dördü de aynı reçeteyi paylaşıyor:
 *   • zemin: --b900 üstüne sağ üstten gelen çok soluk marka ışığı,
 *   • üst kenarda 1 px iç ışık (yüzeyin fiziksel bir levha olduğunu söyler),
 *   • büyük kavis + maviye boyalı geniş gölge,
 *   • kenardan kenara değil, `shell` içinde duran sınırlı bir levha.
 *
 * `--koyu-*` değişkenleri yalnızca bu aile için; sayfa tokenlarıyla
 * karışmasın diye ayrı ön ek taşıyorlar.
 */
:root {
  --koyu-zemin:
    radial-gradient(120% 140% at 82% 0%, rgba(78, 128, 214, 0.24), transparent 58%),
    linear-gradient(180deg, #16294353 0%, transparent 45%), var(--b900);
  --koyu-kenar: 1px solid rgba(255, 255, 255, 0.09);
  --koyu-isik: inset 0 1px 0 rgba(255, 255, 255, 0.13);
  --koyu-golge: 0 30px 70px -34px rgba(11, 21, 38, 0.6);
}

.anasayfa-trust {
  /* Kenardan kenara bant kaldırıldı; levha `shell` içinde duruyor. */
  background: none;
  color: #fff;
}
/**
 * Levha hero'nun içine doğru yükseliyor. Negatif üst boşluk iki bölümü
 * üst üste bindiriyor; sayfa böylece art arda dizilmiş şeritler yerine
 * katmanlı bir yüzey gibi okunuyor.
 */
.anasayfa-trustGrid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: -56px;
  background: var(--koyu-zemin);
  border: var(--koyu-kenar);
  border-radius: var(--r-xl);
  box-shadow: var(--koyu-golge), var(--koyu-isik);
  overflow: hidden;
}
.anasayfa-trustItem {
  padding: 32px 26px;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}
.anasayfa-trustItem:last-child {
  border-right: 0;
}
.anasayfa-trustValue {
  display: block;
  font-family: var(--disp);
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: #fff;
}
.anasayfa-trustValue span {
  color: #8aaee8;
}
.anasayfa-trustLabel {
  display: block;
  margin-top: 4px;
  color: #b9c8de;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  font-family: var(--mono);
}
@media (max-width: 760px) {
  .anasayfa-trustGrid {
    grid-template-columns: repeat(2, 1fr);
    /* Dar ekranda bindirme azaltılıyor: hero metni levhanın altında kalıyordu. */
    margin-top: -30px;
    border-radius: var(--r-lg);
  }
  .anasayfa-trustItem {
    padding: 22px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
  .anasayfa-trustItem:nth-child(2n) {
    border-right: 0;
  }
  .anasayfa-trustItem:nth-last-child(-n + 2) {
    border-bottom: 0;
  }
}

/* ---------- SEÇİLMİŞ PROJELER ---------- */
/**
 * 5 Eyl 2026 — eşit üç sütun yerine asimetrik yerleşim.
 *
 * Üç eşit kart hiçbir projeyi öne çıkarmıyordu; üçü de aynı ağırlıkta
 * okununca göz hiçbirine takılmıyor ve bölüm bir katalog gibi duruyordu.
 * Yeni düzende ilk proje solda büyük, diğer ikisi sağda yatay olarak
 * yığılıyor — sayfada net bir giriş noktası oluşuyor.
 *
 * Yerleşim yalnızca **tam üç kart** varken uygulanıyor (`:has` ile
 * sayılıyor). Panelden seçilmiş proje sayısı değişirse eski eşit ızgaraya
 * düşüyor; kırılmıyor.
 */
.anasayfa-proofGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

@media (min-width: 981px) {
  .anasayfa-proofGrid:has(> :nth-child(3):last-child) {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-rows: minmax(0, 1fr);
  }
  .anasayfa-proofGrid:has(> :nth-child(3):last-child) > :first-child {
    grid-column: 1 / 8;
    grid-row: 1 / 3;
  }
  .anasayfa-proofGrid:has(> :nth-child(3):last-child) > :nth-child(2),
  .anasayfa-proofGrid:has(> :nth-child(3):last-child) > :nth-child(3) {
    grid-column: 8 / 13;
  }

  /* Sağdaki iki kart yatay: görsel solda, metin sağda. */
  .anasayfa-proofGrid:has(> :nth-child(3):last-child) > :nth-child(n + 2) {
    display: grid;
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr);
    align-items: stretch;
  }
  .anasayfa-proofGrid:has(> :nth-child(3):last-child) > :nth-child(n + 2) .anasayfa-art {
    height: 100%;
    min-height: 168px;
  }
}

@media (max-width: 980px) {
  .anasayfa-proofGrid {
    grid-template-columns: 1fr 1fr;
  }
  .anasayfa-proofGrid > *:last-child {
    grid-column: 1 / -1;
  }
}
@media (max-width: 700px) {
  .anasayfa-proofGrid {
    grid-template-columns: 1fr;
  }
  .anasayfa-proofGrid > *:last-child {
    grid-column: auto;
  }
}

/**
 * Kart iki kabuktan oluşuyor: dış kabuk (kartın kendisi) ince bir çerçeve
 * ve büyük kavis taşıyor, iç çekirdek (görsel alanı) kendi küçük kavisiyle
 * onun içinde oturuyor. Aradaki `--kabuk-dolgu` kadarlık boşluk, düz zemine
 * yapıştırılmış bir görsel yerine tepsiye oturtulmuş bir plaka izlenimi
 * veriyor. İç kavis elle yazılmıyor, `--r-ic` dış kavisten hesaplıyor —
 * ikisi eşmerkezli kalıyor.
 */
.anasayfa-proofCard {
  display: flex;
  flex-direction: column;
  padding: var(--kabuk-dolgu);
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--r-xl);
  box-shadow: var(--golge-cevre), var(--ic-isik);
  transition:
    transform var(--sure-yavas) var(--eas),
    box-shadow var(--sure-yavas) var(--eas),
    border-color var(--sure-yavas) var(--eas);
}
.anasayfa-proofCard:hover {
  transform: translateY(-5px);
  border-color: color-mix(in srgb, var(--b500) 22%, transparent);
  box-shadow: var(--golge-yuksek), var(--ic-isik);
}
.anasayfa-proofCard:focus-visible {
  outline: 2px solid var(--b500);
  outline-offset: 3px;
}

/* kart üstü sanat alanı — sektöre göre farklı zemin */
.anasayfa-art {
  position: relative;
  height: 250px;
  overflow: hidden;
  padding: 22px;
  background: var(--b100);
  /* İç çekirdek — dış kabukla eşmerkezli kavis. */
  border-radius: var(--r-ic);
}
/* Soldaki büyük kart daha yüksek bir görsel taşıyor. */
@media (min-width: 981px) {
  .anasayfa-proofGrid:has(> :nth-child(3):last-child) > :first-child .anasayfa-art {
    height: clamp(300px, 30vw, 392px);
  }
}
/**
 * Görsel imleç kartın üstündeyken çok hafif yakınlaşıyor. Kart yükselirken
 * içindeki görselin sabit kalması "yapıştırılmış" duruyordu; birlikte
 * hareket edince katman hissi oluşuyor. Yalnızca `transform` — düzen
 * tetiklemiyor.
 */
.anasayfa-proofCard:hover .anasayfa-artGorsel {
  transform: scale(1.035);
}
.anasayfa-artYurt {
  background: var(--b100);
}
.anasayfa-artEmlak {
  background: color-mix(in srgb, #e9a24a 26%, var(--band));
}
.anasayfa-artKonaklama {
  background: color-mix(in srgb, var(--b400) 24%, var(--band));
}
.anasayfa-artHaber {
  background: color-mix(in srgb, var(--b700) 20%, var(--band));
}
.anasayfa-artHizmet {
  background: color-mix(in srgb, #3fb57e 20%, var(--band));
}

.anasayfa-miniWindow {
  height: 100%;
  overflow: hidden;
  background: var(--card);
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  border-radius: var(--r-sm);
  box-shadow: 0 18px 36px -14px rgba(21, 51, 93, 0.3);
  transform: rotate(-2deg) translateY(10px);
}
.anasayfa-proofCard:nth-child(2n) .anasayfa-miniWindow {
  transform: rotate(2deg) translateY(10px);
}
.anasayfa-miniBar {
  height: 24px;
  background: var(--band);
  border-bottom: 1px solid var(--line);
}
.anasayfa-miniHero {
  height: 84px;
  margin: 10px;
  border-radius: 6px;
  background: linear-gradient(135deg, var(--b500), var(--b700));
}
.anasayfa-miniCols {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 8px;
  margin: 10px;
}
.anasayfa-miniCols i {
  height: 64px;
  display: block;
  background: var(--band);
  border-radius: 5px;
}

.anasayfa-proofBody {
  padding: 24px 20px 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.anasayfa-proofType {
  color: var(--b600);
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.anasayfa-proofBody h3 {
  margin-top: 10px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.24;
  text-wrap: balance;
}
/* Öne çıkan kartın başlığı diğerlerinden bir kademe büyük. */
@media (min-width: 981px) {
  .anasayfa-proofGrid:has(> :nth-child(3):last-child) > :first-child .anasayfa-proofBody h3 {
    font-size: 27px;
  }
}
.anasayfa-proofBody p {
  margin-top: 9px;
  color: var(--mut);
  font-size: 14.5px;
  line-height: 1.55;
  flex: 1;
}
.anasayfa-proofResult {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  padding-top: 17px;
  border-top: 1px solid var(--line);
  color: var(--ink2);
  font-size: 13px;
  font-weight: 650;
}
.anasayfa-proofResult::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #0ca667;
  flex: none;
}

.anasayfa-proofMore {
  margin-top: 28px;
}

/* ---------- HİZMETLER (numaralı liste) ----------
   `.anasayfa-svcLayout` / `.anasayfa-svcIntro` kaldırıldı (3 Ağu 2026): yapışkan sol sütun
   230 px, liste ~800 px, arada 570 px ölü alan kalıyordu. Bölüm, hemen
   altındaki "Sektörel çözümler" ile aynı desene alındı: `secBlock` girişi +
   tam genişlik liste. */
/**
 * Liste geniş ekranda iki sütun.
 *
 * Tek sütunda satırlar 1180 px'e uzuyor; başlık solda, ok sağda kalınca
 * arada büyük bir boşluk oluşuyor ve göz ikisini birbirine bağlayamıyordu.
 * İki sütunda satır ~560 px'e iniyor, bölüm de yarı yüksekliğe.
 *
 * Sütun aralığında kenarlık kesiliyor — iki ayrı liste gibi okunması
 * kasıtlı. Satır alt kenarlıkları ızgara satırı hizasında olduğu için
 * sütunlar arasında çizgiler karşılıklı denk geliyor.
 */
.anasayfa-svcList {
  border-top: 1px solid var(--line);
}
@media (min-width: 981px) {
  .anasayfa-svcList {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 56px;
  }
}
/**
 * Satır üzerine gelindiğinde eskiden `padding-inline` animasyona giriyordu;
 * her karede yeniden yerleşim tetikliyordu (mobilde gözle görülür takılma).
 * Şimdi hareketi `transform` taşıyor, zemini ise mutlak konumlu bir katman
 * — ikisi de kompozitörde çalışıyor, yerleşimi hiç uyandırmıyor.
 */
.anasayfa-svcRow {
  position: relative;
  display: grid;
  grid-template-columns: 58px 1fr auto;
  gap: 20px;
  align-items: center;
  padding: 28px 4px;
  border-bottom: 1px solid var(--line);
  transition: transform var(--sure) var(--eas);
}
.anasayfa-svcRow::before {
  content: '';
  position: absolute;
  inset: 2px -16px;
  z-index: -1;
  border-radius: var(--r);
  background: var(--card);
  box-shadow: var(--golge-cevre);
  opacity: 0;
  transition: opacity var(--sure) var(--eas);
}
.anasayfa-svcRow:hover {
  transform: translateX(6px);
}
.anasayfa-svcRow:hover::before {
  opacity: 1;
}
.anasayfa-svcRow:focus-visible {
  outline: 2px solid var(--b500);
  outline-offset: 4px;
  border-radius: var(--r-xs);
}
.anasayfa-svcIndex {
  color: var(--b600);
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
}
.anasayfa-svcRow h3 {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin-bottom: 6px;
}
.anasayfa-svcRow p {
  color: var(--mut);
  font-size: 14px;
  line-height: 1.5;
}
.anasayfa-svcArrow {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  color: var(--b500);
  border: 1px solid var(--line);
  border-radius: 50%;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  flex: none;
  transition:
    border-color var(--sure) var(--eas),
    background var(--sure) var(--eas),
    color var(--sure) var(--eas),
    transform var(--sure) var(--eas-yay);
}
.anasayfa-svcRow:hover .anasayfa-svcArrow {
  background: var(--b500);
  border-color: var(--b500);
  color: #fff;
  transform: scale(1.08);
}
@media (max-width: 700px) {
  .anasayfa-svcRow {
    grid-template-columns: 40px 1fr auto;
    gap: 12px;
  }
  .anasayfa-svcRow p {
    display: none;
  }
}

/* ---------- SÜREÇ ---------- */
.anasayfa-procWrap {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 66px;
  align-items: start;
}
@media (max-width: 980px) {
  .anasayfa-procWrap {
    grid-template-columns: 1fr;
    gap: 38px;
  }
}
/* Koyu yüzey ailesinin üyesi — reçete için sayaç levhasındaki nota bak. */
.anasayfa-procPanel {
  padding: 40px 36px;
  color: #fff;
  background: var(--koyu-zemin);
  border: var(--koyu-kenar);
  border-radius: var(--r-xl);
  box-shadow: var(--koyu-golge), var(--koyu-isik);
  position: sticky;
  top: 108px;
}
@media (max-width: 980px) {
  .anasayfa-procPanel {
    position: static;
    padding: 30px 26px;
    border-radius: var(--r-lg);
  }
}
.anasayfa-procPanel h2 {
  color: #fff;
  font-size: clamp(26px, 3.4vw, 40px);
  font-weight: 700;
}
.anasayfa-procPanel p {
  color: #b9c8de;
  margin-top: 14px;
}
.anasayfa-procPanel .anasayfa-eyebrow {
  color: #8fc1ff;
}
.anasayfa-procBoxes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 28px;
}
.anasayfa-procBox {
  padding: 16px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--r-sm);
}
.anasayfa-procBox strong {
  display: block;
  color: #fff;
  font-family: var(--disp);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.anasayfa-procBox span {
  display: block;
  margin-top: 3px;
  color: #aebfd7;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.anasayfa-timeline {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: adim;
}
.anasayfa-timeline li {
  position: relative;
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 20px;
  padding-bottom: 30px;
  counter-increment: adim;
}
.anasayfa-timeline li::before {
  content: '0' counter(adim);
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  color: var(--b600);
  background: var(--b050);
  border-radius: 14px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.anasayfa-timeline li:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 50px;
  bottom: 4px;
  left: 22px;
  width: 1px;
  background: var(--line);
}
.anasayfa-timeline h3 {
  margin: 3px 0 6px;
  font-size: 17px;
  font-weight: 700;
}
.anasayfa-timeline p {
  color: var(--mut);
  font-size: 14.5px;
  line-height: 1.55;
}
.anasayfa-timelineVurgu::before {
  color: #fff !important;
  background: var(--b500) !important;
}

/**
 * Tam genişlikte kullanılan çizelge için iki sütun (`.anasayfa-timelineIki`).
 *
 * Yedi adımlık akış tek sütunda 720 px'te kalıyor, sayfanın sağ yarısı boş
 * duruyordu. İki sütunda bağlantı çizgisi kaldırıldı: satır akışında 01'in
 * altına 03 geldiği için çizgi yanlış adımı gösteriyor. Sıra bilgisini zaten
 * 01–07 numaraları taşıyor. 980 px altında tek sütun + çizgi düzenine döner.
 *
 * **Değiştirici sınıf olarak yazıldı, `.anasayfa-timeline`'ın tamamına değil**:
 * anasayfadaki çizelge `procWrap`'in dar sağ sütununda duruyor, orada ikiye
 * bölününce her adım 263 px'e düşüp okunmaz hâle geliyordu.
 */
@media (min-width: 981px) {
  .anasayfa-timelineIki {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 56px;
    align-items: start;
  }
  .anasayfa-timelineIki li {
    padding-bottom: 26px;
  }
  .anasayfa-timelineIki li:not(:last-child)::after {
    display: none;
  }
}

/* ---------- PAKETLER ---------- */
.anasayfa-pakGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 44px;
}
@media (max-width: 980px) {
  .anasayfa-pakGrid {
    grid-template-columns: 1fr 1fr;
  }
  .anasayfa-pakGrid > *:last-child {
    grid-column: 1 / -1;
  }
}
@media (max-width: 700px) {
  .anasayfa-pakGrid {
    grid-template-columns: 1fr;
  }
  .anasayfa-pakGrid > *:last-child {
    grid-column: auto;
  }
}

.anasayfa-pak {
  display: flex;
  flex-direction: column;
  padding: 34px 30px;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--r-xl);
  box-shadow: var(--golge-cevre), var(--ic-isik);
}
/* Koyu yüzey ailesinin üyesi — reçete için sayaç levhasındaki nota bak. */
.anasayfa-pakFeatured {
  color: #fff;
  background: var(--koyu-zemin);
  border: var(--koyu-kenar);
  box-shadow: var(--koyu-golge), var(--koyu-isik);
}
@media (min-width: 981px) {
  .anasayfa-pakFeatured {
    transform: translateY(-14px);
  }
}

/**
 * Üç sütunun madde listeleri aynı Y'de başlasın diye başlık bloğuna alt
 * sınır veriliyor. `hedef` alanı boş bırakılan bir pakette blok kısalıyor
 * ve listeler kayıyordu; yan yana duran sütunlarda kayan taban çizgisi
 * düzeni bozuk gösteriyor.
 */
@media (min-width: 701px) {
  .anasayfa-pak h3 {
    min-height: 30px;
  }
  .anasayfa-pakFor {
    min-height: 42px;
  }
}
.anasayfa-pakBadge {
  display: inline-flex;
  align-self: flex-start;
  margin-bottom: 20px;
  padding: 6px 10px;
  color: var(--b700);
  background: var(--b050);
  border-radius: 7px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.anasayfa-pakFeatured .anasayfa-pakBadge {
  color: #b9d8ff;
  background: rgba(255, 255, 255, 0.08);
}
.anasayfa-pak h3 {
  font-size: 22px;
  font-weight: 700;
}
.anasayfa-pakFeatured h3 {
  color: #fff;
}
.anasayfa-pakFor {
  margin-top: 8px;
  color: var(--mut);
  font-size: 14px;
}
.anasayfa-pakFeatured .anasayfa-pakFor {
  color: #b9c8de;
}
.anasayfa-pak ul {
  display: grid;
  gap: 11px;
  margin: 24px 0 28px;
  font-size: 14px;
  color: var(--ink2);
  flex: 1;
}
.anasayfa-pakFeatured ul {
  color: #cad6e6;
}
.anasayfa-pak li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.anasayfa-pak li::before {
  content: '✓';
  color: #0a965a;
  font-weight: 800;
  flex: none;
}
.anasayfa-pakFeatured li::before {
  color: #52e4a6;
}
.anasayfa-pakNote {
  margin-top: 20px;
  color: var(--mut2);
  font-size: 13.5px;
}

/* ---------- SSS ---------- */
/* `.anasayfa-faqLayout` kaldırıldı (3 Ağu 2026): iki kolonlu düzende sol sütunun
   altında büyük ölü alan kalıyordu. Giriş tam genişlik `secBlock`, akordeon
   tam genişlik — cevap metni `faqAnswer` içinde 66ch ile sınırlı olduğu için
   satır uzunluğu okunaklı kalıyor. */
.anasayfa-faqList {
  border-top: 1px solid var(--line);
}
.anasayfa-faqList details {
  border-bottom: 1px solid var(--line);
}
/**
 * Akordeon korundu (kaldırılmadı): dört soruluk bir liste için arama
 * kutusu ya da yan yana düzen fayda getirmiyor, `<details>` ise klavye ve
 * ekran okuyucu desteğini tarayıcıdan bedava alıyor. Onun yerine dokunma
 * hedefi, tipografi ve işaretçi geri bildirimi güçlendirildi.
 */
.anasayfa-faqList summary {
  min-height: 82px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  cursor: pointer;
  list-style: none;
  font-size: 18px;
  font-weight: 650;
  letter-spacing: -0.012em;
  color: var(--ink);
  transition: color var(--sure) var(--eas);
}
.anasayfa-faqList summary:hover {
  color: var(--b600);
}
.anasayfa-faqList summary:focus-visible {
  outline: 2px solid var(--b500);
  outline-offset: 4px;
  border-radius: var(--r-xs);
}
.anasayfa-faqList summary::-webkit-details-marker {
  display: none;
}
/* Artı işareti açılırken 45° dönüp çarpıya dönüşüyor — durum değişimi
   anlık değil, izlenebilir oluyor. */
.anasayfa-faqList summary::after {
  content: '+';
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  flex: none;
  color: var(--b500);
  border: 1px solid var(--line);
  border-radius: 50%;
  font-size: 19px;
  font-weight: 400;
  transition:
    transform var(--sure) var(--eas),
    background var(--sure) var(--eas),
    color var(--sure) var(--eas);
}
.anasayfa-faqList details[open] summary::after {
  transform: rotate(45deg);
  background: var(--b500);
  color: #fff;
  border-color: var(--b500);
}
.anasayfa-faqAnswer {
  padding: 0 44px 22px 0;
  max-width: 66ch;
  color: var(--mut);
  font-size: 15px;
  line-height: 1.65;
}
@media (max-width: 700px) {
  .anasayfa-faqAnswer {
    padding-right: 0;
  }
}

/* ---------- KAPANIŞ / İLETİŞİM ---------- */
/* Açık zemin üzerinde yuvarlak, marka mavisi gradyanlı panel.
   Footer düz lacivert olduğu için ikisi artık karışmıyor. */
.anasayfa-contact {
  padding: 96px 0 104px;
  background: linear-gradient(180deg, var(--paper) 0%, var(--band) 100%);
}
@media (max-width: 700px) {
  .anasayfa-contact {
    padding: 60px 0 72px;
  }
}

/**
 * İletişim paneli koyu yüzey ailesinin tek renkli üyesi: burada zemin
 * bilinçli olarak marka mavisine yakın kalıyor, çünkü sayfanın son çağrısı
 * ve markayı hatırlatması isteniyor. Kavis, kenar ve gölge ise ailenin
 * geri kalanıyla aynı.
 */
.anasayfa-contactPanel {
  position: relative;
  overflow: hidden;
  padding: 62px 56px;
  color: #fff;
  border: var(--koyu-kenar);
  border-radius: var(--r-xl);
  background: linear-gradient(132deg, #1c4ea6 0%, #17408a 44%, #0d2448 100%);
  box-shadow: var(--koyu-golge), var(--koyu-isik);
}
/* köşeden gelen yumuşak ışık — panele hacim verir */
.anasayfa-contactPanel::after {
  content: '';
  position: absolute;
  right: -80px;
  top: -120px;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.13), transparent 68%);
  pointer-events: none;
}
@media (max-width: 700px) {
  .anasayfa-contactPanel {
    padding: 34px 24px 36px;
    border-radius: var(--r);
  }
}

.anasayfa-contactGrid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
}
@media (max-width: 980px) {
  .anasayfa-contactGrid {
    grid-template-columns: 1fr;
    gap: 34px;
  }
}
.anasayfa-contact h2 {
  color: #fff;
  font-size: clamp(28px, 4vw, 46px);
  font-weight: 700;
  max-width: 22ch;
}
.anasayfa-contact p {
  color: #cfdcef;
  max-width: 56ch;
  margin-top: 14px;
}
.anasayfa-contact .anasayfa-eyebrow {
  color: #a8cbff;
}
.anasayfa-contactCta {
  margin-top: 28px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.anasayfa-contactCards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 560px) {
  .anasayfa-contactCards {
    grid-template-columns: 1fr;
  }
}
.anasayfa-contactCard {
  min-height: 112px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 18px;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--r-sm);
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
}
a.anasayfa-contactCard:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-3px);
}
.anasayfa-contactCard span {
  color: #9fb4d2;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.anasayfa-contactCard strong {
  font-size: 15px;
  font-weight: 650;
}

/* Kapak görseli varsa .anasayfa-art'ın içini dolduruyor; yoksa mevcut mini pencere
   deseni devrede kalıyor. */
.anasayfa-artGorsel {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform var(--sure-yavas) var(--eas);
}


/* ===== bakim ===== */
.bakim-wrap {
  --b900: #0b1526;
  --b700: #17408a;
  --b500: #235ec2;
  --b400: #4e80d6;
  --b300: #8aaee8;
  --wa: #25d366;

  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 48px 24px;
  overflow: hidden;
  background: var(--b900);
  color: #fff;
  font-family: 'Segoe UI Variable Text', 'Segoe UI', -apple-system, sans-serif;
  text-align: center;
}

/* logodaki kanat motifinden gelen diyagonal katmanlar */
.bakim-wrap::before,
.bakim-wrap::after {
  content: '';
  position: absolute;
  pointer-events: none;
}
.bakim-wrap::before {
  inset: -20% -30% auto auto;
  width: 900px;
  height: 900px;
  background: linear-gradient(
    115deg,
    transparent 44%,
    rgba(78, 128, 214, 0.16) 44.5%,
    rgba(78, 128, 214, 0.16) 56%,
    transparent 56.5%,
    transparent 62%,
    rgba(138, 174, 232, 0.1) 62.5%,
    rgba(138, 174, 232, 0.1) 70%,
    transparent 70.5%
  );
  transform: rotate(8deg);
}
.bakim-wrap::after {
  inset: auto auto -25% -20%;
  width: 700px;
  height: 700px;
  background: radial-gradient(circle at 30% 70%, rgba(35, 94, 194, 0.35), transparent 65%);
}

.bakim-inner {
  position: relative;
  z-index: 1;
  max-width: 560px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.bakim-logo {
  width: 64px;
  height: 64px;
  margin-bottom: 30px;
}

.bakim-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: 'Cascadia Mono', Consolas, ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--b300);
  font-weight: 600;
}

/* nefes alan gösterge — bakımın sürdüğünü anlatır */
.bakim-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--b400);
  animation: breathe 2.4s ease-in-out infinite;
}
@keyframes breathe {
  0%,
  100% {
    opacity: 0.35;
    transform: scale(0.85);
  }
  50% {
    opacity: 1;
    transform: scale(1.15);
  }
}

.bakim-title {
  font-family: 'Bahnschrift', 'Segoe UI Variable Display', 'Segoe UI', sans-serif;
  font-size: clamp(30px, 6vw, 46px);
  line-height: 1.06;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 18px 0 0;
  text-wrap: balance;
}

.bakim-message {
  color: #a9bcd8;
  font-size: 16.5px;
  line-height: 1.65;
  margin: 16px 0 0;
  max-width: 46ch;
}

.bakim-eta {
  margin-top: 26px;
  padding: 11px 20px;
  border: 1px solid rgba(138, 174, 232, 0.3);
  background: rgba(35, 94, 194, 0.14);
  font-family: 'Cascadia Mono', Consolas, ui-monospace, monospace;
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: #d5e0f2;
}
.bakim-eta b {
  color: #fff;
  font-weight: 600;
}

.bakim-actions {
  display: flex;
  gap: 12px;
  margin-top: 34px;
  flex-wrap: wrap;
  justify-content: center;
}

.bakim-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  font-weight: 600;
  padding: 12px 24px;
  border-radius: 3px;
  text-decoration: none;
  transition:
    background 0.15s,
    border-color 0.15s;
}
.bakim-btnPrimary {
  background: var(--b500);
  color: #fff;
}
.bakim-btnPrimary:hover {
  background: var(--b400);
}
.bakim-btnGhost {
  border: 1.5px solid rgba(138, 174, 232, 0.32);
  color: #d5e0f2;
}
.bakim-btnGhost:hover {
  border-color: var(--b300);
  color: #fff;
}
.bakim-btn:focus-visible,
.bakim-mail:focus-visible {
  outline: 2px solid var(--b300);
  outline-offset: 3px;
}

.bakim-mail {
  margin-top: 26px;
  font-size: 14px;
  color: #7e91ae;
  text-decoration: none;
}
.bakim-mail:hover {
  color: #d5e0f2;
}

.bakim-brand {
  margin-top: 44px;
  font-family: 'Cascadia Mono', Consolas, ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #4d5f7d;
}

@media (prefers-reduced-motion: reduce) {
  .bakim-pulse {
    animation: none;
    opacity: 0.9;
  }
}


/**
 * İÇERİK KARTLARI — ORTAK YÜZEY (5 Eyl 2026)
 *
 * Anasayfa yenilendikten sonra alt sayfalardaki kartlar eski görünümde
 * kaldı: aynı sitenin iki sayfası iki ayrı elden çıkmış gibi duruyordu.
 * Aşağıdaki kural yalnızca **sayfa zemini üzerinde tek başına duran**
 * kartların yüzeyini ortak dile çekiyor — kavis bir kademe yumuşuyor,
 * kenarlık saç teline iniyor, gölge maviye boyalı ortam gölgesi oluyor.
 *
 * Bilerek dışarıda bırakılanlar: tablo sarmalları, içindekiler kutusu ve
 * uyarı blokları. Onlar metnin içine gömülü öğeler; yükseltilmiş bir kart
 * gibi görünmeleri okuma akışını bölüyor.
 *
 * Yerleşimi etkileyen hiçbir şey (dolgu, ölçü, ızgara) değişmiyor — bu
 * kural yalnızca yüzeyi boyuyor.
 */
.cozum-cozumKart,
.yazi-projeKart,
.yazi-kart,
.form-kart,
.form-infoCard,
.ic-kart,
.ic-asideCard,
.ic-rel,
.hizmet-adim,
.hesaplayici-form,
.hesaplayici-kapsamBlok,
.kart-kart {
  border-color: var(--hairline);
  border-radius: var(--r-lg);
  box-shadow: var(--golge-cevre), var(--ic-isik);
}

/* ===== kart ===== */
/* =========================================================================
   Sayfa başlığının yanında duran tanıtım kartı ve içindeki desenler.
   Puntolar bilinçli olarak küçük: kart bir özet, başlıkla yarışmamalı.
   ========================================================================= */

.kart-kart {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--golge-kart);
  padding: 24px 26px 26px;
  min-width: 0;
}
@media (max-width: 700px) {
  .kart-kart {
    padding: 20px;
    border-radius: var(--r);
  }
}

.kart-kartBas {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line2);
}
.kart-kartBaslik {
  font-family: var(--disp);
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.kart-kartEtiket {
  flex: none;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--b600);
}

/* ---------- A. Numaralı satırlar (hizmetler, SSS, teklif al) ---------- */
.kart-satirlar {
  display: grid;
  gap: 9px;
  margin-top: 16px;
}
.kart-satir {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 13px;
  align-items: center;
  background: var(--band);
  border-radius: var(--r-sm);
  padding: 11px 13px;
}
.kart-satirNo {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  color: var(--b600);
  background: var(--card);
  border-radius: 6px;
  padding: 4px 7px;
  flex: none;
}
.kart-satirAd {
  font-size: 13.5px;
  font-weight: 650;
  color: var(--ink);
  min-width: 0;
}
.kart-satirNot {
  font-size: 11.5px;
  color: var(--mut);
  text-align: right;
  flex: none;
}
@media (max-width: 420px) {
  .kart-satirNot {
    display: none;
  }
}

/* ---------- B. Renkli kutular (çözümler) ---------- */
.kart-kutular {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 11px;
  margin-top: 16px;
}
.kart-kutu {
  border-radius: var(--r-sm);
  padding: 13px 14px 14px;
  min-height: 96px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid transparent;
}
.kart-kutuAd {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}
.kart-kutuNot {
  font-size: 11px;
  color: var(--mut);
  line-height: 1.45;
}
/* Sektör tonları — anasayfadaki proje kartlarıyla aynı mantık */
.kart-tonYurt {
  background: color-mix(in srgb, var(--b400) 14%, var(--card));
}
.kart-tonKonaklama {
  background: color-mix(in srgb, #3fb57e 13%, var(--card));
}
.kart-tonEmlak {
  background: color-mix(in srgb, #e9a24a 16%, var(--card));
}
.kart-tonHaber {
  background: color-mix(in srgb, #8a7ad0 13%, var(--card));
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .kart-tonYurt,
  .kart-tonKonaklama,
  .kart-tonEmlak,
  .kart-tonHaber {
    background: var(--band);
  }
}

/* ---------- C. Sayaç kutuları (hakkımızda) ---------- */
.kart-metrikler {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 11px;
  margin-top: 16px;
}
.kart-metrik {
  background: var(--band);
  border-radius: var(--r-sm);
  padding: 14px 15px 15px;
}
.kart-metrikDeger {
  display: block;
  font-family: var(--disp);
  font-size: 23px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.kart-metrikDeger span {
  color: var(--b500);
}
.kart-metrikEtiket {
  display: block;
  margin-top: 5px;
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mut);
}

/* ---------- D. Mini paket kartları (paketler) ---------- */
.kart-miniPaketler {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  margin-top: 16px;
  align-items: stretch;
}
.kart-miniPaket {
  background: var(--band);
  border-radius: var(--r-sm);
  padding: 13px 12px;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.kart-miniPaketAd {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.25;
}
.kart-miniCizgiler {
  display: grid;
  gap: 5px;
  flex: 1;
}
.kart-miniCizgiler i {
  height: 5px;
  border-radius: 3px;
  background: var(--line);
  display: block;
}
.kart-miniPaketEtiket {
  align-self: flex-start;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--b700);
  background: var(--card);
  border-radius: 5px;
  padding: 3px 7px;
}
.kart-miniPaketOne {
  background: var(--b900);
}
.kart-miniPaketOne .kart-miniPaketAd {
  color: #fff;
}
.kart-miniPaketOne .kart-miniCizgiler i {
  background: rgba(255, 255, 255, 0.22);
}
.kart-miniPaketOne .kart-miniPaketEtiket {
  color: var(--b700);
  background: #fff;
}

/* ---------- E. Tarayıcı önizlemesi (projeler) ---------- */
.kart-tarayici {
  margin-top: 16px;
  border-radius: var(--r-sm);
  overflow: hidden;
  border: 1px solid var(--line);
}
.kart-tarayiciBar {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 11px;
  background: var(--band);
  border-bottom: 1px solid var(--line);
}
.kart-tarayiciBar i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--b300);
  opacity: 0.6;
}
.kart-tarayiciAdres {
  margin-left: 6px;
  font-family: var(--mono);
  font-size: 9.5px;
  color: var(--mut);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kart-tarayiciGovde {
  padding: 18px 16px 20px;
  background: linear-gradient(140deg, #2f6fd8 0%, #1a4f9f 46%, #0d2448 100%);
  color: #fff;
}
.kart-tarayiciUst {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #b9d3f7;
}
.kart-tarayiciBaslik {
  margin-top: 9px;
  font-family: var(--disp);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #fff;
}
.kart-tarayiciKutular {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  padding: 11px;
  background: var(--band);
}
.kart-tarayiciKutular i {
  height: 34px;
  border-radius: 5px;
  background: var(--card);
  border: 1px solid var(--line);
  display: block;
}

/* ---------- F. Kanal listesi (iletişim) ---------- */
.kart-kanallar {
  display: grid;
  gap: 9px;
  margin-top: 16px;
}
.kart-kanal {
  display: flex;
  align-items: baseline;
  gap: 12px;
  background: var(--band);
  border-radius: var(--r-sm);
  padding: 12px 13px;
}
.kart-kanalTur {
  flex: none;
  width: 46px;
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--b600);
}
.kart-kanalDeger {
  font-size: 13.5px;
  font-weight: 650;
  color: var(--ink);
  min-width: 0;
  overflow-wrap: anywhere;
}
a.kart-kanal {
  transition:
    background 0.18s ease,
    transform 0.18s ease;
}
a.kart-kanal:hover {
  background: var(--b050);
  transform: translateX(2px);
}

/* ---------- G. Numaralı akış (teklif sayfası) ----------
   Adımlar arasındaki bağlantı çizgisi ::before ile çiziliyor; son adımda
   kesiliyor ki akış "bitti" hissi versin. */

.kart-akis {
  display: grid;
  gap: 2px;
}

.kart-akisAdim {
  position: relative;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 12px 0;
}

/* bağlantı çizgisi */
.kart-akisAdim:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 13px;
  top: 38px;
  bottom: -2px;
  width: 2px;
  background: linear-gradient(180deg, var(--b300), transparent);
}

.kart-akisNo {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--b500);
  color: #fff;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

.kart-akisGovde {
  display: grid;
  gap: 3px;
  padding-top: 3px;
}

.kart-akisAd {
  color: var(--ink);
  font-size: 14.5px;
  font-weight: 650;
  /* Türkçe satır aralığı kuralı */
  line-height: 1.3;
}

.kart-akisNot {
  color: var(--mut);
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ---------- H. Fiyat aralığı çubukları ---------- */
.kart-araliklar {
  margin-top: 16px;
}

.kart-aralikListe {
  display: grid;
  gap: 12px;
}

/* Ad + değer bir satırda, çubuk altlarında tam genişlikte. */
.kart-aralik {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 12px;
  align-items: baseline;
}

.kart-aralikAd {
  font-size: 13px;
  font-weight: 650;
  color: var(--ink);
  /* Türkçe satır aralığı kuralı */
  line-height: 1.25;
  min-width: 0;
}

.kart-aralikDeger {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--b600);
  white-space: nowrap;
  text-align: right;
}

/* Ray rengi `--band` değil `--line2`: koyu temada band kart zeminiyle aynı
   tona düşüyor, çubuğun neyin içinde durduğu görünmüyordu. */
.kart-aralikRay {
  grid-column: 1 / -1;
  block-size: 6px;
  border-radius: 999px;
  background: var(--line2);
  overflow: hidden;
}

.kart-aralikRay i {
  display: block;
  block-size: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--b500), var(--b600));
}

.kart-aralikNot {
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px solid var(--line2);
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--mut);
}

/* Mobilde kart hesaplayıcının önüne geçiyor; sıkıştırılıp yükseklik
   düşürülüyor ki ziyaretçi asıl araca daha çabuk insin. */
@media (max-width: 700px) {
  .kart-aralikListe {
    gap: 9px;
  }
  .kart-aralikAd {
    font-size: 12.5px;
  }
  .kart-aralikDeger {
    font-size: 11px;
  }
  .kart-aralikRay {
    block-size: 5px;
  }
  .kart-aralikNot {
    margin-top: 12px;
    padding-top: 11px;
  }
}


/* ===== dil ===== */
.dil-secici {
  display: inline-flex;
  flex: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
  background: var(--card);
}

.dil-secenek {
  padding: 7px 12px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--mut);
  transition:
    background 0.18s ease,
    color 0.18s ease;
}
.dil-secenek + .dil-secenek {
  border-left: 1px solid var(--line);
}
.dil-secenek:hover {
  color: var(--b600);
  background: var(--b050);
}
.dil-secenek[aria-current='true'] {
  color: #fff;
  background: var(--b500);
}


/* ===== hesaplayici ===== */
/* Fiyat hesaplayıcı. Renkler yalnızca tema değişkenlerinden — koyu tema
   kendiliğinden çalışsın. */

.hesaplayici-duzen {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
  gap: clamp(24px, 4vw, 48px);
  align-items: start;
}

.hesaplayici-secimler {
  display: grid;
  gap: 18px;
  min-width: 0;
}

/* ---------- adım blokları ---------- */

.hesaplayici-adim {
  margin: 0;
  padding: 24px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
}

.hesaplayici-adim legend {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 0;
  color: var(--ink);
  font-size: 1.06rem;
  font-weight: 700;
}

.hesaplayici-adimNo {
  display: inline-grid;
  width: 30px;
  height: 30px;
  place-items: center;
  color: var(--b500);
  background: var(--b050);
  border-radius: 8px;
  font-family: var(--mono);
  font-size: 0.8rem;
  font-weight: 700;
}

.hesaplayici-adimSpot {
  margin: 12px 0 0;
  color: var(--mut);
  font-size: 0.88rem;
}

/* ---------- seçim hapları (radyo) ---------- */

.hesaplayici-piller {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.hesaplayici-pil {
  position: relative;
  cursor: pointer;
}

.hesaplayici-pil input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.hesaplayici-pil span {
  display: block;
  padding: 9px 15px;
  color: var(--ink2);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 600;
  transition: none;
}

.hesaplayici-pil input:checked + span {
  color: #fff;
  background: var(--b500);
  border-color: var(--b500);
}

/* Klavyeyle gezerken seçili öğe görünmeli — input gizli olduğu için
   odak halkasını etikete taşıyoruz. */
.hesaplayici-pil input:focus-visible + span {
  outline: 3px solid var(--b300);
  outline-offset: 2px;
}

/* ---------- alanlar ---------- */

.hesaplayici-ikili {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 20px;
}

.hesaplayici-alan {
  display: grid;
  gap: 7px;
}

.hesaplayici-alan label {
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 700;
}

.hesaplayici-alan select,
.hesaplayici-alan input[type='text'],
.hesaplayici-alan input[type='tel'],
.hesaplayici-alan input[type='email'] {
  width: 100%;
  min-height: 46px;
  padding: 10px 12px;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  font: inherit;
}

.hesaplayici-alan input[type='range'] {
  width: 100%;
  accent-color: var(--b500);
}

.hesaplayici-deger {
  color: var(--b500);
  font-family: var(--mono);
}

/* Sayfa sayısı değiştirilemeyen türlerde kaydırıcı yerine düz bilgi. */
.hesaplayici-sabitBilgi {
  color: var(--mut);
  font-size: 0.9rem;
}

.hesaplayici-sabitBilgi b {
  color: var(--ink);
  font-family: var(--mono);
}

/* Dil sayısına bağlı olarak kendiliğinden eklenen kalemin bildirimi. */
.hesaplayici-otomatik {
  display: flex;
  gap: 7px;
  margin: 12px 0 0;
  padding: 10px 12px;
  color: var(--mut);
  background: var(--b050);
  border-radius: 8px;
  font-size: 0.83rem;
  line-height: 1.45;
}

.hesaplayici-otomatik b {
  color: var(--ink);
}

/* ---------- kutucuklar ---------- */

.hesaplayici-kutucuklar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 9px;
  margin-top: 16px;
}

.hesaplayici-kutucuk {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px;
  background: var(--paper);
  border: 1px solid var(--line2);
  border-radius: 10px;
  cursor: pointer;
}

.hesaplayici-kutucuk:has(input:checked) {
  background: var(--b050);
  border-color: var(--b300);
}

.hesaplayici-kutucuk input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--b500);
}

.hesaplayici-kutucuk span {
  display: grid;
  gap: 2px;
}

.hesaplayici-kutucuk b {
  color: var(--ink);
  font-size: 0.92rem;
}

.hesaplayici-kutucuk small {
  color: var(--mut);
  font-size: 0.8rem;
}

.hesaplayici-kilitli {
  cursor: default;
  opacity: 0.85;
}

/* ---------- sonuç ---------- */

/* Sütun ekrandan uzun olursa yapışkanlık alt kısmı ulaşılamaz yapıyordu:
   sticky öğe kaydırmayla birlikte hareket ettiği için taşan bölüm hiç
   görünmüyordu. max-height + overflow ile sütun kendi içinde kaydırılabiliyor. */
.hesaplayici-sonuc {
  position: sticky;
  top: 88px;
  display: grid;
  gap: 12px;
  max-height: calc(100vh - 104px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.hesaplayici-sonucKart {
  padding: 18px 20px;
  background: var(--b900);
  border-radius: var(--r);
}

.hesaplayici-sonucKart small {
  display: block;
  margin-bottom: 4px;
  color: var(--b300);
  font-size: 0.78rem;
}

.hesaplayici-toplam {
  display: block;
  color: #fff;
  font-family: var(--disp);
  font-size: clamp(1.3rem, 2.8vw, 1.7rem);
  font-weight: 700;
  line-height: 1.18;
}

.hesaplayici-sonucSatir {
  display: grid;
  gap: 6px;
  margin: 12px 0 0;
  padding-top: 11px;
  border-top: 1px solid rgb(255 255 255 / 0.14);
}

.hesaplayici-sonucSatir > div {
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.hesaplayici-sonucSatir dt {
  color: var(--b300);
  font-size: 0.85rem;
}

.hesaplayici-sonucSatir dd {
  margin: 0;
  color: #fff;
  font-size: 0.88rem;
  font-weight: 700;
  text-align: right;
}

.hesaplayici-sonucNot {
  margin: 11px 0 0;
  color: var(--b100);
  font-size: 0.76rem;
  line-height: 1.45;
}

/* ---------- form ---------- */

.hesaplayici-form {
  display: grid;
  gap: 9px;
  padding: 18px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
}

.hesaplayici-form h3 {
  margin: 0;
  font-size: 0.98rem;
}

.hesaplayici-formSpot {
  margin: 0;
  color: var(--mut);
  font-size: 0.8rem;
  line-height: 1.45;
}

/* Formdaki alanlar seçim bölümündekilerden daha sıkı: sağ sütun ekrana
   sığmalı, sığmazsa ziyaretçi gönder düğmesini görmüyor. */
.hesaplayici-form .hesaplayici-alan {
  gap: 5px;
}

.hesaplayici-form .hesaplayici-alan label {
  font-size: 0.84rem;
}

.hesaplayici-form .hesaplayici-alan input {
  min-height: 40px;
  padding: 8px 11px;
}

.hesaplayici-onay {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  color: var(--mut);
  font-size: 0.78rem;
  line-height: 1.45;
  cursor: pointer;
}

.hesaplayici-onay input {
  width: 17px;
  height: 17px;
  margin-top: 2px;
  accent-color: var(--b500);
}

.hesaplayici-hata {
  margin: 0;
  padding: 10px 12px;
  color: #b42318;
  background: #fef3f2;
  border-radius: 8px;
  font-size: 0.85rem;
}

.hesaplayici-basarili {
  padding: 32px 28px;
  color: var(--ink);
  background: var(--b050);
  border: 1px solid var(--b300);
  border-radius: var(--r);
  font-size: 1.05rem;
}

@media (prefers-color-scheme: dark) {
  .hesaplayici-hata {
    color: #ffb4ab;
    background: #3b1512;
  }
}

@media (max-width: 900px) {
  .hesaplayici-duzen {
    grid-template-columns: 1fr;
  }

  /* Mobilde yükseklik sınırı ve iç kaydırma **kaldırılmalı**: sütun akışta
     normal yer kaplamazsa form sayfanın içinde ikinci bir kaydırma alanına
     dönüşüyor ve "Teklif İste" düğmesine sayfayı kaydırarak ulaşılamıyordu. */
  .hesaplayici-sonuc {
    position: static;
    max-height: none;
    overflow-y: visible;
  }

  .hesaplayici-ikili {
    grid-template-columns: 1fr;
  }
}

/* --- öneri rozeti, kapsam özeti, sıfırlama --- */

.hesaplayici-rozet {
  margin-left: 7px;
  padding: 2px 7px;
  color: var(--b500);
  background: var(--b050);
  border-radius: 999px;
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: lowercase;
}

.hesaplayici-ozet {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgb(255 255 255 / 0.14);
}

.hesaplayici-ozetBaslik {
  display: block;
  margin-bottom: 7px;
  color: var(--b300);
  font-size: 0.78rem;
}

.hesaplayici-ozet ul {
  display: grid;
  gap: 3px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hesaplayici-ozet li {
  color: #fff;
  font-size: 0.82rem;
  line-height: 1.4;
}

.hesaplayici-ozet li::before {
  margin-right: 6px;
  color: var(--b300);
  content: '·';
}

.hesaplayici-ozetBos {
  margin: 0;
  color: var(--b100);
  font-size: 0.8rem;
}

.hesaplayici-sifirlaDugme {
  margin-top: 14px;
  padding: 0;
  color: var(--b300);
  background: none;
  border: 0;
  font: inherit;
  font-size: 0.8rem;
  text-decoration: underline;
  cursor: pointer;
}

.hesaplayici-sifirlaDugme:hover {
  color: #fff;
}

/* --- KDV, döküm, dahil/hariç --- */

.hesaplayici-kdv {
  margin: 8px 0 0;
  color: var(--b300);
  font-size: 0.78rem;
}

.hesaplayici-dokum {
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid rgb(255 255 255 / 0.14);
}

.hesaplayici-dokum summary {
  color: var(--b300);
  font-size: 0.8rem;
  cursor: pointer;
}

.hesaplayici-dokum dl {
  display: grid;
  gap: 5px;
  margin: 11px 0 0;
}

.hesaplayici-dokum dl > div {
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.hesaplayici-dokum dt {
  color: var(--b100);
  font-size: 0.8rem;
  line-height: 1.35;
}

.hesaplayici-dokum dt span {
  color: var(--b300);
}

.hesaplayici-dokum dd {
  margin: 0;
  color: #fff;
  font-size: 0.8rem;
  white-space: nowrap;
}

.hesaplayici-dokumToplam {
  margin-top: 4px;
  padding-top: 7px;
  border-top: 1px solid rgb(255 255 255 / 0.14);
  font-weight: 700;
}

.hesaplayici-dokumToplam dt {
  color: #fff;
}

.hesaplayici-kapsamBlok {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  padding: 22px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
}

.hesaplayici-kapsamBlok h3 {
  margin: 0 0 10px;
  font-size: 0.95rem;
}

.hesaplayici-kapsamBlok ul {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hesaplayici-kapsamBlok li {
  position: relative;
  padding-left: 20px;
  color: var(--mut);
  font-size: 0.86rem;
  line-height: 1.45;
}

.hesaplayici-dahil li::before {
  position: absolute;
  left: 0;
  color: var(--wa);
  font-weight: 700;
  content: '✓';
}

.hesaplayici-haric li::before {
  position: absolute;
  left: 0;
  color: var(--mut2);
  font-weight: 700;
  content: '—';
}

@media (max-width: 680px) {
  .hesaplayici-kapsamBlok {
    grid-template-columns: 1fr;
  }
}

/* Honeypot — ekrandan tamamen kaldırılmış. display:none kullanılmıyor:
   bazı botlar gizli alanı atlıyor, konumlandırmayla saklamak daha etkili. */
.hesaplayici-tuzak {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

/* --- adım şeridi --- */

.hesaplayici-adimSeridi ol {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/**
 * Adım numaraları — ad yerine numara.
 *
 * Adlarla birlikte on çip üç satıra yayılıyor ve formun kendisinden çok yer
 * kaplıyordu. Numaralar bölüm başlıklarındakilerle aynı; ad `title` ve
 * ekran okuyucu metninde duruyor.
 */
.hesaplayici-adimSeridi a {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  color: var(--mut2);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 50%;
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 700;
  text-decoration: none;
}

.hesaplayici-adimSeridi a:hover,
.hesaplayici-adimSeridi a:focus-visible {
  color: var(--b500);
  border-color: var(--b400);
}

.hesaplayici-adimTamam a {
  color: #fff;
  background: var(--wa);
  border-color: var(--wa);
}

/* Kaçıncı adımda olunduğu yazıyla da söyleniyor: yalnızca renk farkı,
   renk körü ziyaretçi için ilerleme bilgisi taşımıyor. */
.hesaplayici-adimSayac {
  margin: 8px 0 0;
  color: var(--mut2);
  font-size: 0.8rem;
}

/* --- proje türü kartları --- */

.hesaplayici-turKartlari {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 9px;
  margin-top: 16px;
}

.hesaplayici-turKart {
  position: relative;
  cursor: pointer;
}

.hesaplayici-turKart input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.hesaplayici-turKart span {
  display: grid;
  gap: 5px;
  height: 100%;
  padding: 14px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.hesaplayici-turKart b {
  color: var(--ink);
  font-size: 0.94rem;
}

.hesaplayici-turKart small {
  color: var(--mut);
  font-size: 0.8rem;
  line-height: 1.4;
}

.hesaplayici-turKart em {
  color: var(--b500);
  font-family: var(--mono);
  font-size: 0.74rem;
  font-style: normal;
}

.hesaplayici-turKart input:checked + span {
  background: var(--b050);
  border-color: var(--b500);
  box-shadow: inset 0 0 0 1px var(--b500);
}

.hesaplayici-turKart input:focus-visible + span {
  outline: 3px solid var(--b300);
  outline-offset: 2px;
}

/* --- erişilebilirlik düzeltmeleri --- */

/* Kaydırıcı + sayısal giriş yan yana; ikisi de aynı durumu yazıyor. */
.hesaplayici-sayfaAlani {
  display: grid;
  grid-template-columns: 1fr 76px;
  gap: 10px;
  align-items: center;
}

.hesaplayici-sayfaSayi {
  min-height: 44px;
  padding: 8px 10px;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  font: inherit;
  font-family: var(--mono);
  text-align: center;
}

/* Onay metni 12,5 px'ti — mobilde gereksiz küçük. Dokunma alanı da
   WCAG'ın istediği 44 px'e çıkarıldı. */
.hesaplayici-onay {
  min-height: 44px;
  padding: 6px 0;
  font-size: 0.86rem;
}

.hesaplayici-onay input {
  width: 22px;
  height: 22px;
  margin-top: 1px;
}

/* Kutucukların tamamı tıklanabilir ve yeterli yükseklikte. */
.hesaplayici-kutucuk {
  min-height: 44px;
}

.hesaplayici-kutucuk input {
  width: 20px;
  height: 20px;
}

/* Odak halkası tüm kontrollerde görünür olmalı. */
.hesaplayici-kutucuk input:focus-visible,
.hesaplayici-sayfaSayi:focus-visible,
.hesaplayici-alan select:focus-visible,
.hesaplayici-alan input:focus-visible,
.hesaplayici-onay input:focus-visible,
.hesaplayici-sifirlaDugme:focus-visible,
.hesaplayici-adimSeridi a:focus-visible,
.hesaplayici-dokum summary:focus-visible {
  outline: 3px solid var(--b400);
  outline-offset: 2px;
}

.hesaplayici-hata:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 2px;
}

/* Kutucuklar flex konteynerde eziliyordu: 22 px istenirken 13 px çiziliyordu.
   flex:none büzülmeyi kapatıyor. */
.hesaplayici-onay input,
.hesaplayici-kutucuk input {
  flex: none;
}

/* --- örnek proje, kanallar, güvence, başarı --- */

.hesaplayici-ornek {
  display: grid;
  gap: 3px;
  margin-top: 12px;
  padding: 12px 14px;
  background: rgb(255 255 255 / 0.06);
  border-radius: 10px;
  text-decoration: none;
}

.hesaplayici-ornek:hover {
  background: rgb(255 255 255 / 0.1);
}

.hesaplayici-ornek span {
  color: var(--b300);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.hesaplayici-ornek b {
  color: #fff;
  font-size: 0.9rem;
}

.hesaplayici-ornek small {
  color: var(--b100);
  font-size: 0.78rem;
  line-height: 1.4;
}

.hesaplayici-kanallar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.hesaplayici-kanal {
  padding: 8px 13px;
  color: #fff;
  background: rgb(255 255 255 / 0.1);
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
}

.hesaplayici-kanal:hover {
  background: rgb(255 255 255 / 0.18);
}

.hesaplayici-guvence {
  display: grid;
  gap: 5px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}

.hesaplayici-guvence li {
  position: relative;
  padding-left: 18px;
  color: var(--mut);
  font-size: 0.78rem;
  line-height: 1.45;
}

.hesaplayici-guvence li::before {
  position: absolute;
  left: 0;
  color: var(--wa);
  content: '✓';
}

.hesaplayici-basarili strong {
  display: block;
  margin-bottom: 8px;
  font-size: 1.15rem;
}

.hesaplayici-basarili p {
  margin: 0 0 10px;
  color: var(--ink2);
  font-size: 0.94rem;
}

.hesaplayici-basariAdim {
  color: var(--mut) !important;
  font-size: 0.86rem !important;
}

.hesaplayici-basarili .hesaplayici-dugme {
  margin-top: 6px;
}

.hesaplayici-form textarea {
  width: 100%;
  min-height: 70px;
  padding: 9px 11px;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  font: inherit;
  font-size: 0.9rem;
  resize: vertical;
}

/* Alan bazlı hata: mesaj ilgili alanın hemen altında, tarayıcı balonunda değil. */
.hesaplayici-alanHata {
  display: block;
  color: #b42318;
  font-size: 0.78rem;
  line-height: 1.4;
}

.hesaplayici-grupBaslik {
  margin: 18px 0 0;
  color: var(--ink2);
  font-size: 0.86rem;
  font-weight: 700;
}

@media (prefers-color-scheme: dark) {
  .hesaplayici-alanHata {
    color: #ffb4ab;
  }
}

.hesaplayici-altDugmeler {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 14px;
}

.hesaplayici-altDugmeler .hesaplayici-sifirlaDugme {
  margin-top: 0;
}

/* --- keşif uyarısı ve gizli duyuru --- */

.hesaplayici-rozetKesif {
  color: #8a5a00;
  background: #fff4e0;
}

.hesaplayici-kesifNotu {
  margin: 8px 0 0;
  padding: 9px 11px;
  color: #fff;
  background: rgb(255 255 255 / 0.1);
  border-left: 3px solid #f0b429;
  border-radius: 6px;
  font-size: 0.78rem;
  line-height: 1.45;
}

/* Ekran okuyucuya özel; görsel olarak kaldırılmış. */
.hesaplayici-gizliDuyuru {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

@media (prefers-color-scheme: dark) {
  .hesaplayici-rozetKesif {
    color: #ffd08a;
    background: #3a2a08;
  }
}

/* --- renk dışı seçim göstergesi ---
   Radyo düğmesi görsel olarak gizli olduğu için seçili olma yalnızca arka plan
   rengiyle anlatılıyordu. Renk körlüğü ve yüksek kontrast modunda ayırt
   edilemez; onay işareti ve kalın çerçeve ekleniyor. */

.hesaplayici-pil input:checked + span::before {
  margin-right: 6px;
  font-weight: 700;
  content: '✓';
}

.hesaplayici-pil input:checked + span {
  box-shadow: inset 0 0 0 1px currentColor;
}

.hesaplayici-turKart input:checked + span {
  position: relative;
}

.hesaplayici-turKart input:checked + span::after {
  position: absolute;
  top: 10px;
  right: 12px;
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  color: #fff;
  background: var(--b500);
  border-radius: 50%;
  font-size: 0.7rem;
  font-weight: 700;
  content: '✓';
}

/* Kart başlığı onay işaretinin altına girmesin. */
.hesaplayici-turKart b {
  padding-right: 26px;
}

/* Yüksek kontrast modunda arka plan renkleri düşürülüyor; sınır kalmalı. */
@media (forced-colors: active) {
  .hesaplayici-pil input:checked + span,
  .hesaplayici-turKart input:checked + span,
  .hesaplayici-kutucuk:has(input:checked) {
    border: 2px solid CanvasText;
  }
}

.hesaplayici-aralikNotu {
  margin: 10px 0 0;
  color: var(--b100);
  font-size: 0.76rem;
  line-height: 1.45;
}

/* --- kalem etkisi ve ücretsiz rozeti --- */

.hesaplayici-etki {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 3px;
}

.hesaplayici-etki b {
  color: var(--b600);
  font-family: var(--mono);
  font-size: 0.78rem;
}

.hesaplayici-etki i {
  color: var(--mut);
  font-family: var(--mono);
  font-size: 0.74rem;
  font-style: normal;
}

/* Ücretsiz kalemler bilerek hediye; rozet olarak öne çıkıyor. */
.hesaplayici-ucretsiz {
  padding: 2px 8px;
  color: var(--wa) !important;
  background: var(--wabg);
  border-radius: 999px;
  font-family: var(--body) !important;
  font-size: 0.72rem !important;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.hesaplayici-ucretsizSatir {
  color: #7ee3b0 !important;
  font-weight: 700;
}

/* --- mobil sabit sonuç çubuğu ---
   Masaüstünde gizli: orada sonuç zaten yapışkan sütunda duruyor. */

.hesaplayici-mobilCubuk {
  display: none;
}

@media (max-width: 900px) {
  .hesaplayici-mobilCubuk {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 60;
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    background: var(--card);
    border-top: 1px solid var(--line);
    box-shadow: 0 -8px 24px -12px rgb(15 27 45 / 0.35);
  }

  .hesaplayici-mobilCubuk span {
    display: grid;
    min-width: 0;
  }

  .hesaplayici-mobilCubuk small {
    color: var(--mut);
    font-size: 0.7rem;
  }

  .hesaplayici-mobilCubuk b {
    color: var(--ink);
    font-family: var(--disp);
    font-size: 0.95rem;
    white-space: nowrap;
  }

  .hesaplayici-mobilCubuk button {
    flex: none;
    min-height: 44px;
  }

  /* Sabit çubuk sayfa sonunu örtmesin. */
  .hesaplayici-duzen {
    padding-bottom: 76px;
  }
}

/* --- rozet genişliği düzeltmesi ---
   `.hesaplayici-kutucuk span` seçicisi `.hesaplayici-etki`den yüksek özgüllükte olduğu için etki
   satırı grid'e düşüyordu; rozet de grid öğesi olarak tüm sütunu kaplıyordu
   (167 px'lik yeşil bant). Özgüllük eşitlenip rozet içeriği kadar oluyor. */

.hesaplayici-kutucuk .hesaplayici-etki {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  align-items: baseline;
  margin-top: 5px;
}

.hesaplayici-kutucuk .hesaplayici-etki > * {
  flex: none;
}

.hesaplayici-ucretsiz {
  display: inline-block;
  width: fit-content;
  padding: 1px 8px 2px;
  line-height: 1.5;
}

/* Yıllık giderlerdeki rozet <small> içinde; orada da içerik kadar kalmalı. */
.hesaplayici-kutucuk small .hesaplayici-ucretsiz {
  margin-top: 2px;
}


/* ===== footer ===== */
.footer-footer {
  position: relative;
  overflow: hidden;
  color: #aec0d9;
  background:
    radial-gradient(circle at 92% 6%, color-mix(in srgb, var(--b500) 20%, transparent), transparent 25rem),
    linear-gradient(180deg, #101f36 0%, var(--b900) 40%);
  border-top: 1px solid color-mix(in srgb, var(--b500) 26%, transparent);
  font-size: 13.5px;
}
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  .footer-footer {
    background: linear-gradient(180deg, #101f36 0%, var(--b900) 40%);
    border-top-color: #1e3355;
  }
}

/* logodaki yay hareketinin sessiz yankısı */
.footer-footer::after {
  content: '';
  position: absolute;
  right: -140px;
  bottom: -220px;
  width: 440px;
  height: 440px;
  border: 1px solid rgba(125, 176, 255, 0.12);
  border-radius: 50%;
  box-shadow:
    0 0 0 58px rgba(35, 94, 194, 0.025),
    0 0 0 118px rgba(35, 94, 194, 0.018);
  pointer-events: none;
}

/* ---------- ana ızgara ---------- */
.footer-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.15fr 0.8fr 0.8fr 1fr;
  gap: 56px;
  padding: 52px 0;
}
@media (max-width: 980px) {
  .footer-grid {
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: 36px;
  }
  .footer-brand {
    grid-column: 1 / -1;
  }
}
@media (max-width: 700px) {
  /* Footer mobilde sayfanın beşte birini kaplıyordu; sütunlar tek kolona
     düştüğü için aradaki boşluk masaüstündeki kadar gerekmiyor. */
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 26px;
    padding: 32px 0;
  }
  .footer-brand {
    grid-column: auto;
  }
}

/* ---------- marka sütunu ---------- */
.footer-markaBag {
  display: inline-flex;
  align-items: center;
  gap: 11px;
}
.footer-markaAd {
  font-family: var(--disp);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.01em;
  line-height: 1;
  color: #fff;
}
.footer-markaAd small {
  display: block;
  margin-top: 3px;
  font-size: 9.5px;
  font-weight: 400;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #68a5ff;
}
.footer-brand p {
  max-width: 34ch;
  margin-top: 20px;
  color: #9fb2ce;
  line-height: 1.7;
}
.footer-sozNotu {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 20px;
  color: #c8d7ea;
  font-size: 12.5px;
  font-weight: 650;
}
.footer-sozNotu::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #21cf82;
  border: 4px solid rgba(33, 207, 130, 0.14);
  flex: none;
}

/* ---------- bağlantı sütunları ---------- */
.footer-sutunBaslik {
  margin-bottom: 18px;
  color: #fff;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.footer-baglantilar {
  display: grid;
  gap: 11px;
}
/**
 * Dokunma alanı. Satırlar yalnızca metin yüksekliğindeydi (~22 px) ve parmakla
 * ıskalanıyordu. Görsel boşluk büyümesin diye dikey dolgu negatif kenar
 * boşluğuyla dengelendi: tıklanabilir kutu 44 px'e çıkıyor, düzen aynı kalıyor.
 */
.footer-baglantilar a {
  display: block;
  padding-block: 12px;
  margin-block: -12px;
  color: #a9bdd8;
  transition:
    color 0.2s ease,
    transform 0.2s ease;
}
.footer-baglantilar a:hover {
  color: #fff;
  transform: translateX(3px);
}

/* ---------- iletişim kartları ---------- */
.footer-iletisim {
  display: grid;
  gap: 10px;
}
.footer-iletisimKart {
  padding: 16px 17px;
  color: #fff;
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--r-sm);
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
}
a.footer-iletisimKart:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}
.footer-iletisimKart span {
  display: block;
  margin-bottom: 5px;
  color: #8299ba;
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.footer-iletisimKart strong {
  font-size: 13.5px;
  font-weight: 650;
  overflow-wrap: anywhere;
}

/* Marka sütununda, dönüş notunun altında durur. */
.footer-sosyal {
  display: flex;
  gap: 8px;
  margin-top: 20px;
}
/* 38 px dokunma alanı için küçüktü; 44 px asgari hedefe çıkarıldı. */
.footer-sosyal a {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--r-sm);
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
}
.footer-sosyal a:hover {
  transform: translateY(-2px);
  border-color: transparent;
}
/* Üzerine gelince her platform kendi rengini alıyor. */
.footer-instagram:hover {
  background: linear-gradient(45deg, #f09433, #dc2743 45%, #bc1888);
}
.footer-facebook:hover {
  background: #1877f2;
}
.footer-whatsapp:hover {
  background: #25d366;
}

/* ---------- alt şerit ---------- */
.footer-altSerit {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 0;
  color: #7188a8;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  font-size: 12px;
}
.footer-yasal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
}
/* Yasal bağlantılar 19 px yüksekliğindeydi; dokunma alanı 44 px'e çıkarıldı,
   dolgu negatif kenar boşluğuyla dengelendiği için şerit uzamıyor. */
.footer-yasal a {
  display: inline-block;
  padding-block: 13px;
  margin-block: -13px;
}
.footer-yasal a:hover {
  color: #fff;
}
@media (max-width: 700px) {
  .footer-altSerit {
    align-items: flex-start;
    flex-direction: column;
    gap: 14px;
    padding: 18px 0;
  }
}


/* ===== header ===== */
.header-nav {
  border-bottom: 1px solid color-mix(in srgb, var(--line) 86%, transparent);
  background: color-mix(in srgb, var(--card) 88%, transparent);
  backdrop-filter: blur(18px);
  position: sticky;
  top: 0;
  z-index: 50;
}
/* color-mix desteklemeyen tarayıcılarda saydam olmayan zemin */
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  .header-nav {
    background: var(--card);
  }
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 30px;
  min-height: 76px;
}
@media (max-width: 700px) {
  .header-inner {
    min-height: 66px;
    gap: 14px;
  }
}

.header-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-right: auto;
  flex: none;
}
.header-wordmark {
  font-family: var(--disp);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: 0.01em;
  line-height: 1;
}
.header-wordmark small {
  display: block;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--b500);
  margin-top: 2px;
}

.header-links {
  display: flex;
  gap: 26px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink2);
}
.header-links a {
  transition: color 0.2s ease;
}
.header-links a:hover {
  color: var(--b500);
}
.header-links a[aria-current='page'] {
  color: var(--b600);
  font-weight: 700;
}
.header-sheet a[aria-current='page'] {
  color: var(--b600);
}

/* --- "Paketler ve Fiyatlar" açılır grubu --- */

.header-grup {
  position: relative;
}

/* Düğme yanındaki bağlantılarla aynı görünmeli; tarayıcının buton
   varsayılanları sıfırlanıyor. */
.header-grupDugme {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  padding: 0;
  color: inherit;
  background: none;
  border: 0;
  font: inherit;
  cursor: pointer;
  transition: color 0.2s ease;
}
.header-grupDugme:hover {
  color: var(--b500);
}
.header-grupDugme[aria-current='page'] {
  color: var(--b600);
  font-weight: 700;
}

.header-ok {
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}
.header-grupDugme[aria-expanded='true'] .header-ok {
  transform: translateY(1px) rotate(-135deg);
}

.header-grupPanel {
  position: absolute;
  top: calc(100% + 14px);
  left: -14px;
  z-index: 40;
  display: grid;
  gap: 2px;
  min-width: 210px;
  padding: 8px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  box-shadow: var(--golge);
}
.header-grupPanel a {
  padding: 9px 11px;
  border-radius: 7px;
  white-space: nowrap;
}
.header-grupPanel a:hover {
  background: var(--b050);
}

@media (max-width: 940px) {
  .header-links {
    display: none;
  }
}

.header-cta {
  flex: none;
  min-height: 44px;
  padding: 0 18px;
  font-size: 14.5px;
}
@media (max-width: 700px) {
  .header-cta {
    min-height: 42px;
    padding: 0 14px;
    font-size: 13.5px;
  }
}
/**
 * 560 px altında üst satırda logo + menü düğmesinden başkası kalmıyor.
 * 320 px'de logo, dil seçici, CTA ve menü düğmesi yan yana sığmıyordu; belge
 * 400 px'e taşıp menü düğmesini ekranın dışına atıyordu. İkisi de menünün
 * içine indi.
 */
@media (max-width: 560px) {
  /* Özgüllük bilerek iki sınıf: global `.header-btn` kuralı da tek sınıf ve kaynak
     sırasında sonra geldiği için `.header-cta { display: none }` geçmiyordu. */
  .header-inner .header-cta {
    display: none;
  }
}

/* mobil menü — CSS-only, details/summary ile */
.header-mobile {
  display: none;
  margin-left: auto;
  /* Açılır panel .header-nav'a göre konumlansın. */
  position: static;
}
@media (max-width: 940px) {
  .header-mobile {
    display: block;
  }
}
.header-mobile > summary {
  list-style: none;
  cursor: pointer;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--card);
}
.header-mobile > summary::-webkit-details-marker {
  display: none;
}
.header-burger,
.header-burger::before,
.header-burger::after {
  display: block;
  width: 17px;
  height: 1.5px;
  background: var(--ink);
  content: '';
}
.header-burger::before {
  transform: translateY(-5.5px);
}
.header-burger::after {
  transform: translateY(4px);
}
/**
 * Kapalı menü düzene hiç girmemeli. Tarayıcılar kapalı <details> içeriğine
 * `content-visibility: hidden` uyguluyor; bu kutuyu yok etmiyor, dolayısıyla
 * panel belge genişliğini büyütebiliyordu. `display: none` bunu kesin çözüyor.
 */
.header-mobile:not([open]) .header-sheet {
  display: none;
}

.header-sheet {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  max-width: 100%;
  background: var(--card);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--golge-yumusak);
  padding: 8px 0 16px;
}
.header-sheet a {
  display: block;
  padding: 13px 28px;
  font-size: 15px;
  font-weight: 500;
  border-bottom: 1px solid var(--line2);
}
.header-sheet a:last-child {
  border-bottom: 0;
}

/* menü içindeki eylem satırı */
.header-sheetAlt {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 16px 28px 4px;
}
.header-sheetAlt a {
  border-bottom: 0;
}
.header-sheetCta {
  display: inline-flex;
  min-height: 44px;
  padding: 0 20px;
  font-size: 14.5px;
}
/* 560 px üstünde CTA ve dil seçici zaten üst satırda; menüde tekrar etmesin. */
@media (min-width: 561px) {
  .header-sheet .header-sheetAlt {
    display: none;
  }
}

/* Üst satırdaki dil seçici — dar ekranda menüye devrediyor. */
@media (max-width: 560px) {
  .header-ustDil {
    display: none;
  }
}


/* ===== vitrin ===== */
.vitrin-wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  width: 100%;
}
.vitrin-cap {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mut2);
  margin-bottom: 12px;
}

/* dış tarayıcı kartı — cam etkili çerçeve */
.vitrin-stage {
  position: relative;
  padding: 14px;
  background: color-mix(in srgb, var(--card) 84%, transparent);
  border: 1px solid color-mix(in srgb, var(--b300) 55%, transparent);
  border-radius: 24px;
  box-shadow: var(--golge-kart);
  backdrop-filter: blur(10px);
}
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  .vitrin-stage {
    background: var(--card);
    border-color: var(--line);
  }
}

.vitrin-stageInner {
  position: relative;
  aspect-ratio: 16 / 10;
}
@media (max-width: 980px) {
  .vitrin-stageInner {
    aspect-ratio: 16 / 11;
  }
}

.vitrin-frame {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 0.5s,
    transform 0.5s;
  pointer-events: none;
}
.vitrin-frameOn {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.vitrin-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 2px 4px 13px;
  flex: none;
}
.vitrin-bar i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--line);
}
.vitrin-bar i:first-child {
  background: var(--b300);
}
.vitrin-url {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--mut);
  background: var(--band);
  border-radius: 6px;
  padding: 5px 11px;
  margin-left: 8px;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vitrin-weeks {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #fff;
  background: var(--b500);
  padding: 4px 9px;
  border-radius: 6px;
  flex: none;
}

.vitrin-body {
  flex: 1;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-height: 0;
  border-radius: 14px;
  background: linear-gradient(145deg, #367de6 0%, #1457b8 42%, #08234b 100%);
  overflow: hidden;
}
/* --- maket iç öğeleri: koyu mavi zemin üzerinde açık tonlar --- */
.vitrin-nav {
  height: 20px;
  display: flex;
  gap: 7px;
  align-items: center;
  padding: 0 9px;
  flex: none;
  background: rgba(255, 255, 255, 0.09);
  border-radius: 5px;
}
.vitrin-nav b {
  width: 34px;
  height: 5px;
  border-radius: 2px;
  background: #fff;
}
.vitrin-nav i {
  width: 22px;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.32);
}

.vitrin-showHero {
  flex: 2.2;
  position: relative;
  overflow: hidden;
  min-height: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
}
.vitrin-showHero::after {
  content: '';
  position: absolute;
  right: -30px;
  top: -30px;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
}
.vitrin-showHero s {
  position: absolute;
  left: 12px;
  display: block;
  height: 7px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.92);
  text-decoration: none;
}
.vitrin-showHero s:nth-of-type(1) {
  top: 16px;
  width: 46%;
}
.vitrin-showHero s:nth-of-type(2) {
  top: 31px;
  width: 30%;
  opacity: 0.55;
  height: 6px;
}
.vitrin-showHero u {
  position: absolute;
  left: 12px;
  top: 48px;
  width: 56px;
  height: 15px;
  border-radius: 4px;
  background: #fff;
  display: block;
}

.vitrin-row {
  display: flex;
  gap: 8px;
  flex: 1.4;
  min-height: 0;
}
.vitrin-row div {
  flex: 1;
  position: relative;
  overflow: hidden;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.13);
}
.vitrin-row div::after {
  content: '';
  position: absolute;
  inset: auto 7px 7px 7px;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.5);
}

.vitrin-searchRow {
  height: 24px;
  display: flex;
  gap: 7px;
  align-items: center;
  padding: 0 9px;
  flex: none;
  background: rgba(255, 255, 255, 0.09);
  border-radius: 5px;
}
.vitrin-searchRow b {
  flex: 1;
  height: 9px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.28);
}
.vitrin-searchRow u {
  width: 36px;
  height: 11px;
  border-radius: 3px;
  background: #fff;
  display: block;
}

.vitrin-listGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  flex: 1;
  min-height: 0;
}
.vitrin-listGrid div {
  position: relative;
  overflow: hidden;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.11);
}
.vitrin-listGrid div::before {
  content: '';
  position: absolute;
  inset: 0 0 42% 0;
  background: rgba(255, 255, 255, 0.14);
}
.vitrin-listGrid div::after {
  content: '';
  position: absolute;
  left: 7px;
  bottom: 8px;
  width: 44%;
  height: 5px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.72);
}

.vitrin-article {
  display: flex;
  gap: 8px;
  flex: 1;
  min-height: 0;
}
.vitrin-article .vitrin-txt {
  flex: 1.6;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 9px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.09);
  justify-content: center;
}
.vitrin-article .vitrin-txt s {
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.8);
  display: block;
  text-decoration: none;
}
.vitrin-article .vitrin-txt s.vitrin-thin {
  height: 4px;
  opacity: 0.4;
}
.vitrin-article .vitrin-txt s.vitrin-short {
  width: 60%;
}
.vitrin-article .vitrin-thumb {
  flex: 1;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.16);
}

.vitrin-waDot {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #25d366;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.3);
}

.vitrin-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
  margin-top: 14px;
}
.vitrin-tab {
  border: 1px solid var(--line);
  background: var(--card);
  border-radius: var(--r-sm);
  padding: 9px 11px 8px;
  cursor: pointer;
  text-align: left;
  font-family: var(--body);
  transition:
    border-color 0.18s ease,
    background 0.18s ease;
}
.vitrin-tab:hover {
  border-color: var(--b300);
}
.vitrin-tab .vitrin-n {
  font-family: var(--disp);
  font-weight: 700;
  font-size: 11.5px;
  line-height: 1.2;
  color: var(--ink);
  display: block;
}
.vitrin-tab .vitrin-d {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--mut2);
  letter-spacing: 0.06em;
  display: block;
  margin-top: 3px;
}
.vitrin-tab[aria-pressed='true'] {
  border-color: var(--b500);
  background: var(--b050);
}
.vitrin-tab[aria-pressed='true'] .vitrin-d {
  color: var(--b600);
}
@media (max-width: 560px) {
  .vitrin-tabs {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --- gerçek ekran görüntüsü ---
   Görsel varsa maketin yerini alıyor: .vitrin-body'nin dolgusu ve mavi degradesi
   kalkıyor, görüntü çerçeveyi baştan sona dolduruyor. */
.vitrin-body:has(.vitrin-kapak) {
  padding: 0;
  background: var(--band);
}

.vitrin-kapak {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  border-radius: 14px;
}

/* :has() desteklemeyen tarayıcıda görsel yine dolduruyor, yalnızca
   arkasındaki degrade görünmüyor — kırılma yaratmıyor. */
@supports not selector(:has(*)) {
  .vitrin-kapak {
    margin: -14px;
    width: calc(100% + 28px);
    height: calc(100% + 28px);
  }
}


/* ===== gorsel ===== */
/* ==========================================================================
   Hizmet kartlarının üst görseli.

   Görseller SVG; dosya yüklenmiyor, tema değişkenleriyle boyanıyor. Böylece
   koyu temada ayrı bir varlık üretmek gerekmiyor ve panelde görsel yönetmeye
   gerek kalmıyor — bunlar içerik değil, kart deseni.

   Ton sınıfları mevcut sektör tonlarıyla aynı kalıpta (color-mix + @supports
   yedeği), böylece proje genelinde tek bir renk mantığı var.
   ========================================================================== */

.gorsel-cerceve {
  position: relative;
  overflow: hidden;
  /* Kartın kolon akışında ezilmesin; oran korunsun. */
  flex: none;
  aspect-ratio: 320 / 150;
  /* Kart dolgusunu (26px) iptal edip kenarlara dayanıyor. */
  margin: -26px -26px 22px;
  border-bottom: 1px solid var(--line);
  border-radius: var(--r) var(--r) 0 0;
}

.gorsel-cizim {
  display: block;
  width: 100%;
  height: 100%;
}

/* Üstten aşağı çok hafif bir aydınlanma — düz zemini kırıyor. */
.gorsel-cerceve::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.28), transparent 62%);
  pointer-events: none;
}
@media (prefers-color-scheme: dark) {
  .gorsel-cerceve::after {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 62%);
  }
}
:global(:root[data-theme='dark']) .gorsel-cerceve::after {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 62%);
}

/* ---------- ton zeminleri ---------- */

.gorsel-tonTasarim {
  background: color-mix(in srgb, var(--b400) 18%, var(--card));
}
.gorsel-tonAltyapi {
  background: color-mix(in srgb, #3fb57e 15%, var(--card));
}
.gorsel-tonYenileme {
  background: color-mix(in srgb, #e9a24a 17%, var(--card));
}
.gorsel-tonBuyume {
  background: color-mix(in srgb, #8a7ad0 15%, var(--card));
}
.gorsel-tonDanismanlik {
  background: color-mix(in srgb, var(--b700) 16%, var(--card));
}
.gorsel-tonDestek {
  background: color-mix(in srgb, #4aa5c7 16%, var(--card));
}

@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .gorsel-tonTasarim,
  .gorsel-tonAltyapi,
  .gorsel-tonYenileme,
  .gorsel-tonBuyume,
  .gorsel-tonDanismanlik,
  .gorsel-tonDestek {
    background: var(--band);
  }
}

/* ---------- hareket ----------
   Hepsi döngüsel ve yavaş; kart üstünde dikkat çekmeden "canlı" duruyor.
   Azaltılmış hareket tercihinde tamamı duruyor, görseller statik okunuyor. */

.gorsel-yanip {
  animation: yanip 2.4s ease-in-out infinite;
}
.gorsel-gecikme1 {
  animation-delay: 0.3s;
}
.gorsel-gecikme2 {
  animation-delay: 0.6s;
}
.gorsel-gecikme3 {
  animation-delay: 0.9s;
}

@keyframes yanip {
  0%,
  100% {
    opacity: 0.35;
  }
  50% {
    opacity: 1;
  }
}

/* Seçim çerçevesinin akan kesik çizgisi (tasarım kartı). */
.gorsel-akanCerceve {
  stroke-dasharray: 5 4;
  animation: akan 3s linear infinite;
}
@keyframes akan {
  to {
    stroke-dashoffset: -18;
  }
}

/* Çizilen yol: SEO trend çizgisi ve bakım nabzı. */
.gorsel-cizilen {
  stroke-dasharray: var(--uzunluk, 260);
  stroke-dashoffset: var(--uzunluk, 260);
  animation: ciz 3.2s ease-in-out infinite;
}
@keyframes ciz {
  0% {
    stroke-dashoffset: var(--uzunluk, 260);
  }
  45%,
  75% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: calc(var(--uzunluk, 260) * -1);
  }
}

/* Sütunların tabandan büyümesi (SEO). */
.gorsel-buyuyen {
  transform-origin: center bottom;
  animation: buyu 3.4s ease-in-out infinite;
}
@keyframes buyu {
  0%,
  100% {
    transform: scaleY(0.72);
  }
  50% {
    transform: scaleY(1);
  }
}

/* Yenileme kartındaki perde — eski yüzü tamamen açıp kapatıyor.
   Eski panel x=40'ta başlıyor ve 126 birim geniş; -126 kaydırınca kağıdın
   sol kenarından tümüyle çıkıyor, yeni yüz temiz kalıyor. */
.gorsel-perde {
  animation: perde 5s ease-in-out infinite;
}
@keyframes perde {
  0%,
  38% {
    transform: translateX(0);
  }
  62%,
  100% {
    transform: translateX(-126px);
  }
}

/* İmleç ve nabız noktası. */
.gorsel-nabiz {
  animation: nabiz 2.4s ease-in-out infinite;
}
@keyframes nabiz {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.9;
  }
  50% {
    transform: scale(1.35);
    opacity: 0.45;
  }
}

.gorsel-imlec {
  animation: imlec 1.1s steps(1) infinite;
}
@keyframes imlec {
  0%,
  49% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gorsel-yanip,
  .gorsel-akanCerceve,
  .gorsel-cizilen,
  .gorsel-buyuyen,
  .gorsel-perde,
  .gorsel-nabiz,
  .gorsel-imlec {
    animation: none;
  }
  /* Hareket kapalıyken çizilen yollar tam görünsün. */
  .gorsel-cizilen {
    stroke-dashoffset: 0;
  }
  .gorsel-yanip {
    opacity: 1;
  }
}


/* ===== cozum ===== */
.cozum-pain {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin-top: 28px;
}
.cozum-pain > div {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 20px 22px;
  font-size: 14px;
  color: var(--ink2);
}
.cozum-pain h3 {
  font-family: var(--disp);
  font-size: 15.5px;
  color: var(--ink);
  margin-bottom: 6px;
}

.cozum-refCase {
  margin-top: 48px;
  background: linear-gradient(132deg, #1c4ea6 0%, #17408a 44%, #0d2448 100%);
  box-shadow: var(--golge-kart);
  color: #fff;
  padding: 34px 34px 30px;
  border-radius: var(--r-lg);
  display: grid;
  grid-template-columns: minmax(0, 7fr) auto;
  gap: 24px;
  align-items: center;
}
@media (max-width: 720px) {
  .cozum-refCase {
    grid-template-columns: 1fr;
  }
}
.cozum-refKicker {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  color: #8aaee8;
  text-transform: uppercase;
  font-weight: 700;
}
.cozum-refCase h3 {
  font-size: 22px;
  margin-top: 8px;
  color: #fff;
}
.cozum-refCase p {
  color: #8fa3c4;
  font-size: 14px;
  margin-top: 8px;
  max-width: 56ch;
}
.cozum-refList {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.cozum-refList a {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: #b9c8e2;
  border: 1px solid #2c3e5e;
  padding: 5px 11px;
  border-radius: 999px;
}
.cozum-refList a:hover {
  border-color: #8aaee8;
  color: #fff;
}

.cozum-cozumGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin-top: 40px;
}
.cozum-cozumKart {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 26px 24px 22px;
  position: relative;
  display: flex;
  flex-direction: column;
  transition: border-color 0.15s;
}
.cozum-cozumKart:hover {
  border-color: var(--b500);
}
.cozum-cozumKart::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 34px;
  height: 3px;
  background: var(--b500);
}
.cozum-cozumKart h2 {
  font-size: 17.5px;
  font-weight: 700;
}
.cozum-cozumKart p {
  font-size: 14px;
  color: var(--mut);
  margin-top: 9px;
  line-height: 1.55;
  flex: 1;
}
.cozum-cozumKart .cozum-ref {
  margin-top: 16px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--b500);
  letter-spacing: 0.05em;
}
.cozum-cozumKart .cozum-ref b {
  color: var(--ink2);
  font-weight: 600;
}


/* ===== hizmet ===== */
/* ==========================================================================
   Hizmet detay sayfasına özel bloklar: künye şeridi, kapsam kartları ve
   numaralı süreç akışı.

   Ayrı dosyada çünkü `ic.hizmet-module.hizmet-css` tüm iç sayfaların ortak zemini; buradaki
   desenler yalnızca hizmet detayında kullanılıyor.
   ========================================================================== */

/* ---------- künye şeridi ----------
   Başlığın altında duran ölçülebilir bilgiler. Sayaç değil: rakamı büyütüp
   vitrine çevirmiyoruz, satır satır okunan bir künye. */

.hizmet-kunye {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin-top: 30px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--card);
  overflow: hidden;
}

.hizmet-kunyeOge {
  flex: 1 1 150px;
  padding: 14px 18px;
  border-right: 1px solid var(--line);
}
.hizmet-kunyeOge:last-child {
  border-right: 0;
}

.hizmet-kunyeEtiket {
  display: block;
  color: var(--mut2);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.hizmet-kunyeDeger {
  display: block;
  margin-top: 5px;
  color: var(--ink);
  font-size: 14.5px;
  font-weight: 650;
  /* Türkçe satır aralığı kuralı: 1.18'in altına inilmiyor. */
  line-height: 1.32;
}

/* Dar ekranda ikişerli; tek sütuna düşürmek şeridi gereksiz uzatıyor. */
@media (max-width: 720px) {
  .hizmet-kunyeOge {
    flex: 1 1 45%;
    border-bottom: 1px solid var(--line);
  }
  .hizmet-kunyeOge:nth-child(2n) {
    border-right: 0;
  }
  .hizmet-kunyeOge:nth-last-child(-n + 2) {
    border-bottom: 0;
  }
}

/* ---------- kapsam kartları ("Neler dahil?") ---------- */

.hizmet-dahilIzgara {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin-top: 26px;
}

.hizmet-dahilOge {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  padding: 18px 18px 18px 16px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--ink2);
  font-size: 14.5px;
  line-height: 1.5;
}

/* Onay işareti — ::before yerine gerçek bir öğe, hizalaması daha güvenli. */
.hizmet-dahilTik {
  flex: none;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--b050);
  color: var(--b600);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}

/* ---------- süreç akışı ---------- */

.hizmet-akis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 18px;
  margin-top: 30px;
  counter-reset: adim;
}

.hizmet-adim {
  position: relative;
  padding: 24px 22px 22px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}

/* Kartın üstündeki ince marka çizgisi — sırayı görsel olarak taşıyor. */
.hizmet-adim::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--b500), var(--b300));
}

.hizmet-adimNo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--b600);
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Arkadaki büyük rakam: dekoratif, ekran okuyucuya verilmiyor. */
.hizmet-adimHayalet {
  position: absolute;
  right: 14px;
  bottom: -14px;
  color: var(--b500);
  opacity: 0.07;
  font-size: 76px;
  font-weight: 800;
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

.hizmet-adim h3 {
  margin: 12px 0 8px;
  font-size: 17px;
  font-weight: 700;
  /* ğ/ş alt uzantısı ile İ noktası çakışmasın. */
  line-height: 1.24;
}

.hizmet-adim p {
  position: relative;
  color: var(--mut);
  font-size: 14px;
  line-height: 1.55;
}

/* ---------- başlık yanındaki görsel ---------- */

.hizmet-basGorsel {
  align-self: start;
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--golge-kart);
}
/* Görsel bileşeni kart içindeyken negatif kenar boşluğu kullanıyor;
   burada kart yok, o yüzden sıfırlıyoruz. */
.hizmet-basGorsel > div {
  margin: 0;
  border-bottom: 0;
  border-radius: var(--r);
}

@media (max-width: 900px) {
  .hizmet-basGorsel {
    display: none;
  }
}


/* ===== ic ===== */
/* ---------- ortak sayfa başlığı ---------- */
/* Kart renginden sayfa rengine kısa bir solma + saç teli çizgi: geçiş hem
   yumuşak hem fark edilir kalıyor. */
.ic-pageHead {
  padding: 30px 0 48px;
  background: linear-gradient(180deg, var(--card) 0%, var(--card) 72%, var(--paper) 100%);
  border-bottom: 1px solid var(--line2);
}
.ic-pageHead h1 {
  font-size: clamp(28px, 4.4vw, 44px);
  font-weight: 700;
  margin-top: 14px;
  max-width: 24ch;
}

/**
 * Başlık + yanında özet kartı. Kart sağda, metin solda; başlığın yanındaki
 * boşluk doluyor. 980 px altında kart metnin altına iniyor.
 */
.ic-headGrid {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
  gap: 56px;
  align-items: center;
}
@media (max-width: 980px) {
  .ic-headGrid {
    grid-template-columns: 1fr;
    gap: 34px;
  }
}
.ic-headGrid > :first-child {
  min-width: 0;
}
.ic-pageSub {
  font-size: 16.5px;
  color: var(--mut);
  max-width: 58ch;
  margin-top: 16px;
}
.ic-crumb {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--mut2);
  letter-spacing: 0.05em;
  padding-top: 22px;
}
.ic-crumb a:hover {
  color: var(--b500);
}
.ic-crumb b {
  color: var(--ink2);
  font-weight: 600;
}

/* Kırıntı yolu `nav > ol` olarak yazıldığında görünüm aynı kalsın:
   madde imi yok, ayraç `·` olarak üretiliyor. */
.ic-crumbListe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  list-style: none;
}
.ic-crumbListe li + li::before {
  content: '·';
  margin-inline-end: 8px;
  color: var(--mut2);
}

/* ---------- hizmet detay ---------- */
.ic-split {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: 56px;
  padding-top: 56px;
}
@media (max-width: 860px) {
  .ic-split {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/**
 * Geniş kabukta sütunlar oransal değil, ölçülü.
 *
 * 7fr/4fr, kabuk 1320'ye çıkınca metin sütununu 769 px yaptı; `.ic-prose p`
 * 66ch'te (605 px) durduğu için sütunun sağında 164 px kör boşluk kalıyor
 * ve iki sütunun arası kazara açılmış gibi görünüyordu.
 *
 * Artan yerin toplamı sabit (1264 − 605 − 420 = 239 px); mesele onu nereye
 * koyduğumuz. Sütunlar metnin ve kartın gerçek ölçüsüne sabitlenip artan
 * `space-between` ile tek bir aralığa toplanıyor: boşluk sütunun içinde
 * dağılmak yerine ikisinin arasında bilinçli bir oluk oluyor.
 *
 * Hem hizmet detayı hem proje vaka sayfası bu düzeni kullanıyor.
 */
@media (min-width: 1240px) {
  .ic-split {
    grid-template-columns: minmax(0, 640px) minmax(0, 420px);
    justify-content: space-between;
  }
}
.ic-prose p {
  margin-bottom: 16px;
  color: var(--ink2);
  max-width: 66ch;
}

/**
 * Anlatı bloğunun başlığı: etiket + başlık yığılmış, metinle aynı sol hizada.
 *
 * Genişlik sınırı **yok**. Denendi ve geri alındı: `ch` birimi kapsayıcının
 * kendi puntosuna (16 px) göre çözülüyor, başlığınkine göre değil — 26ch
 * 208 px'e denk gelip başlığı dört satıra bölüyordu. Başlık zaten kısa,
 * doğal genişliğinde duruyor.
 */
.ic-anlatiBaslikBlogu {
  margin-bottom: 28px;
}

/**
 * İki paragraflık anlatı için yan yana düzen.
 *
 * Tek sütunda 66ch'lik metin geniş ekranda sayfanın sol yarısında kalıyor,
 * sağ yarısı boş duruyordu. Izgara kullanıldı (CSS `columns` değil): iki
 * paragraf garantili biçimde iki sütuna düşüyor, dengeleme sürprizi olmuyor.
 * 980 px altında tek sütuna iner.
 */
@media (min-width: 981px) {
  .ic-proseIki {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 56px;
  }
  .ic-proseIki p {
    max-width: none;
    margin-bottom: 0;
  }
}
.ic-prose h2,
.ic-prose h3 {
  margin: 28px 0 10px;
  font-size: 19px;
}
.ic-prose ul {
  margin-bottom: 16px;
  padding-left: 20px;
  list-style: disc;
}
.ic-prose li {
  margin-bottom: 6px;
  color: var(--ink2);
}

.ic-chk {
  margin-top: 20px;
}

/**
 * Kısa maddeli kontrol listesi geniş ekranda iki sütun. Tek sütunda 680 px'te
 * kalıp sağ yarıyı boş bırakıyordu; maddeler kısa olduğu için ikiye bölmek
 * hem boşluğu kapatıyor hem listeyi yarı yüksekliğe indiriyor.
 * `column-gap` içinde ayırıcı çizgi maddelerin kendi alt kenarlığından geliyor.
 */
@media (min-width: 981px) {
  .ic-chkIki {
    columns: 2;
    column-gap: 56px;
  }
  .ic-chkIki li {
    break-inside: avoid;
  }
}
.ic-chk li {
  padding: 9px 0 9px 26px;
  position: relative;
  border-bottom: 1px solid var(--line);
  font-size: 14.5px;
  color: var(--ink2);
}
.ic-chk li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 16px;
  width: 10px;
  height: 10px;
  background: linear-gradient(135deg, var(--b500) 50%, transparent 50%);
}

.ic-asideCard {
  background: var(--card);
  border: 1px solid var(--line);
  border-top: 3px solid var(--b500);
  border-radius: var(--r);
  padding: 24px;
  position: sticky;
  top: 84px;
}
.ic-asideCard h2 {
  font-size: 16px;
}
.ic-asideCard p {
  font-size: 13.5px;
  color: var(--mut);
  margin-top: 8px;
}
.ic-asideCard .ic-btn {
  width: 100%;
  margin-top: 16px;
}
.ic-asideAlt {
  text-align: center;
  font-size: 12.5px;
  color: var(--mut2);
  margin-top: 10px;
}
.ic-asideAlt a {
  color: var(--wa);
  font-weight: 600;
}

.ic-relGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
  margin-top: 24px;
}
.ic-rel {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 18px 20px;
  transition: border-color 0.15s;
}
.ic-rel:hover {
  border-color: var(--b500);
}
.ic-relTitle {
  font-weight: 700;
  font-size: 15px;
  font-family: var(--disp);
}
.ic-relSub {
  font-size: 12.5px;
  color: var(--mut);
  margin-top: 4px;
}
.ic-relGo {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--b500);
  margin-top: 12px;
  font-weight: 600;
}

/* ---------- proje detay sayfası ---------- */
.ic-caseHead {
  background: linear-gradient(160deg, #17408a 0%, #102a52 46%, var(--b900) 100%);
  color: #fff;
  padding: 40px 0 56px;
}
.ic-caseHead .ic-crumb,
.ic-caseHead .ic-crumb a {
  color: #5d6f8e;
}
.ic-caseHead .ic-crumb b {
  color: #b9c8e2;
}
.ic-caseHead h1 {
  font-size: clamp(28px, 4.4vw, 44px);
  line-height: 1.06;
  margin-top: 14px;
  max-width: 26ch;
  font-weight: 700;
}
.ic-caseHead .ic-pageSub {
  color: #8fa3c4;
}
.ic-caseMeta {
  display: flex;
  gap: 34px;
  flex-wrap: wrap;
  margin-top: 30px;
}
.ic-caseMeta > div {
  min-width: 120px;
}
.ic-caseMeta dt {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #5d6f8e;
}
.ic-caseMeta dd {
  margin: 5px 0 0;
  font-weight: 650;
  font-size: 15px;
  color: #fff;
}
.ic-caseMeta dd a {
  color: #8aaee8;
  font-family: var(--mono);
  font-size: 13px;
}
.ic-caseMeta dd a:hover {
  color: #fff;
}

.ic-quote {
  margin-top: 48px;
  border-left: 3px solid var(--b500);
  padding: 6px 0 6px 24px;
}
.ic-quote blockquote {
  margin: 0;
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink);
}
.ic-quoteWho {
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--mut);
}

/* --- panelden yüklenen kapak görseli --- */
.ic-kapak {
  margin: -58px 0 0;
  border-radius: var(--r);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--card);
  box-shadow: var(--golge-kart);
}
.ic-kapakGorsel {
  display: block;
  width: 100%;
  height: auto;
}
@media (max-width: 700px) {
  .ic-kapak {
    margin-top: -34px;
    border-radius: var(--r-sm);
  }
}

/* Koyu başlık alanındaki üst etiket; rengi şablonda gömülüydü. */
.ic-caseEyebrow {
  margin-top: 26px;
  color: var(--b300);
}

/**
 * Vaka sayfasının iki sütunu.
 *
 * `.ic-split` hizmet detayından geliyor; tek farkı üst boşluk. Kapak
 * görseli koyu başlığın üstüne `-58px` biniyor ve `.ic-split`in 56 px'i
 * metni görsele fazla yaklaştırıyordu.
 */
.ic-caseSplit {
  padding-top: 44px;
}

/* Geniş ekrandaki sütun ölçüleri `.ic-split`te; hizmet detayıyla ortak. */

/**
 * Yan sütundaki künye — sayfa sonundaki tam genişlikte `.ic-metaGrid`in
 * yerini aldı. Aynı dört alan hem başta hem sonda iki kez yazılıyordu;
 * artık anlatının yanında bir kez duruyor.
 *
 * Izgara değil satır satır: 380 px'lik sütunda iki sütunlu bir ızgara
 * "Teslim süresi" gibi etiketleri iki satıra kırıyordu.
 */
.ic-asideMeta {
  margin: 16px 0 20px;
  border-top: 1px solid var(--line);
}
.ic-asideMeta > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}
.ic-asideMeta dt {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--mut2);
}
.ic-asideMeta dd {
  margin: 0;
  font-weight: 650;
  font-size: 13.5px;
  text-align: right;
}

/* Karttaki tek eylem sütunun tamamını kaplıyor; yarı genişlikte bir düğme
   kartın içinde ortada kalmış gibi duruyordu. */
.ic-caseSplit .ic-asideCard .btn {
  width: 100%;
  margin-top: 4px;
}

/**
 * Önce/sonra: aynı işin iki sürümü yan yana.
 *
 * `.ic-split`le aynı kırılma noktasında (860 px) tek sütuna iniyor. Daha
 * dar bir yerde yan yana duran iki ekran görüntüsünde ikisi de okunmuyor.
 */
.ic-surumSpot {
  max-width: 66ch;
  color: var(--ink2);
  margin-bottom: 24px;
}
.ic-surumler {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-top: 20px;
}
@media (max-width: 860px) {
  .ic-surumler {
    grid-template-columns: 1fr;
  }
}
.ic-surum {
  margin: 0;
}
.ic-surum img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: var(--card);
  box-shadow: var(--golge-kart);
}
.ic-surum figcaption {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 14px;
  font-size: 13.5px;
  color: var(--ink2);
}
.ic-surum figcaption b {
  font-weight: 650;
}

/**
 * "Önce" ve "Sonra" rozetleri: aynı biçim, farklı renk — eskisi nötr,
 * yenisi marka mavisi. Renk tek ayrım değil, etiket zaten yazıyor;
 * renk körlüğünde bilgi kaybolmasın.
 */
.ic-surumEtiket {
  flex: none;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--band);
  color: var(--mut);
}
.ic-surumSon .ic-surumEtiket {
  background: var(--b050);
  color: var(--b500);
}

/* ---------- kapanış CTA ---------- */
.ic-ctaFoot {
  margin-top: 72px;
  padding: 60px 0 56px;
}
.ic-ctaFoot h2 {
  font-size: clamp(24px, 3.2vw, 34px);
  font-weight: 700;
}
.ic-ctaFoot p {
  margin-top: 12px;
  max-width: 54ch;
}
.ic-ctaRow {
  display: flex;
  gap: 14px;
  margin-top: 26px;
  flex-wrap: wrap;
}
.ic-ctaGhost {
  border-color: #2c3e5e !important;
  color: #d5e0f2 !important;
}
.ic-ctaGhost:hover {
  border-color: #8aaee8 !important;
  color: #fff !important;
}

/* ==========================================================================
   30 Temmuz eki — gönderilen sayfa tasarımlarından uyarlanan bölümler
   ========================================================================== */

/* --- kart ızgaraları --- */
.ic-g2,
.ic-g3,
.ic-g4 {
  display: grid;
  gap: 18px;
  margin-top: 36px;
}
.ic-g2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ic-g3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.ic-g4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 980px) {
  .ic-g3,
  .ic-g4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 700px) {
  .ic-g2,
  .ic-g3,
  .ic-g4 {
    grid-template-columns: 1fr;
  }
}

/* --- genel kart --- */
.ic-kart {
  display: flex;
  flex-direction: column;
  padding: 26px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}
.ic-kart p {
  color: var(--mut);
  font-size: 14px;
  line-height: 1.55;
}
a.ic-kart:hover {
  transform: translateY(-4px);
  border-color: var(--b300);
  box-shadow: var(--golge);
}
.ic-kartIndex {
  display: block;
  margin-bottom: 18px;
  color: var(--b600);
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
}
.ic-kart h2,
.ic-kart h3 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 8px;
}
.ic-etiket {
  display: inline-flex;
  align-self: flex-start;
  padding: 6px 10px;
  color: var(--b700);
  background: var(--b050);
  border-radius: 7px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

/* --- ✓ işaretli özellik listesi --- */
.ic-ozellikListesi {
  display: grid;
  gap: 10px;
  margin-top: 20px;
  font-size: 13.5px;
  color: var(--ink2);
}
.ic-ozellikListesi li {
  display: flex;
  gap: 9px;
  align-items: flex-start;
}
.ic-ozellikListesi li::before {
  content: '✓';
  color: #0a965a;
  font-weight: 800;
  flex: none;
}

/* `.ic-ikiKolon` / `.ic-yapiskan` kaldırıldı (3 Ağu 2026).
   Yapışkan sol kolon deseni kısa bir giriş metninin altında büyük ölü alan
   bırakıyordu — SSS'te 520 px, Hakkımızda'da 290 px, Hizmetler'de 172 px.
   Üç bölüm de tam genişlik `secBlock` girişine + tam genişlik ızgaraya
   alındı; site zaten Çözümler, Paketler ve Blog'da bu deseni kullanıyordu.
   Yeni bir bölümde aynı ihtiyaç doğarsa `secBlock` + `.ic-g2/.ic-g3/.ic-g4` kullanın. */

/* --- sayaç şeridi (iç sayfalar) --- */
.ic-sayacSerit {
  background: linear-gradient(180deg, #14273f 0%, var(--b900) 62%);
  border-top: 2px solid var(--b500);
  color: #fff;
}
.ic-sayacIzgara {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.ic-sayacOge {
  padding: 26px 22px;
  border-right: 1px solid rgba(255, 255, 255, 0.12);
}
.ic-sayacOge:last-child {
  border-right: 0;
}
.ic-sayacDeger {
  display: block;
  font-family: var(--disp);
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.ic-sayacDeger span {
  color: #8aaee8;
}
.ic-sayacEtiket {
  display: block;
  margin-top: 4px;
  color: #b9c8de;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
@media (max-width: 760px) {
  .ic-sayacIzgara {
    grid-template-columns: repeat(2, 1fr);
  }
  .ic-sayacOge {
    padding: 20px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }
  .ic-sayacOge:nth-child(2n) {
    border-right: 0;
  }
  .ic-sayacOge:nth-last-child(-n + 2) {
    border-bottom: 0;
  }
}

/* --- karşılaştırma tablosu --- */
.ic-tabloSarmal {
  margin-top: 36px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--card);
}
.ic-tablo {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  min-width: 560px;
}
.ic-tablo th,
.ic-tablo td {
  padding: 15px 18px;
  text-align: left;
  border-bottom: 1px solid var(--line2);
}
.ic-tablo thead th {
  background: var(--b050);
  color: var(--ink);
  font-family: var(--disp);
  font-size: 13.5px;
  font-weight: 700;
  white-space: nowrap;
  border-bottom: 1px solid var(--line);
}
.ic-tablo tbody tr:last-child td {
  border-bottom: 0;
}
.ic-tablo td:not(:first-child),
.ic-tablo th:not(:first-child) {
  text-align: center;
}
.ic-tablo td:first-child {
  color: var(--ink2);
  font-weight: 600;
}
.ic-tabloVar {
  color: #0a965a;
  font-weight: 800;
}
.ic-tabloYok {
  color: var(--mut2);
}
.ic-tabloOps {
  color: var(--b600);
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 700;
}
.ic-tabloNot {
  margin-top: 16px;
  color: var(--mut2);
  font-size: 13px;
}

/* --- kendi sözümüz (alıntı paneli) --- */
.ic-sozPanel {
  margin-top: 40px;
  padding: 44px 46px;
  color: #fff;
  border-radius: var(--r-lg);
  background: linear-gradient(132deg, #1c4ea6 0%, #17408a 44%, #0d2448 100%);
  box-shadow: var(--golge-kart);
  position: relative;
  overflow: hidden;
}
.ic-sozPanel::after {
  content: '';
  position: absolute;
  right: -80px;
  top: -120px;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.12), transparent 68%);
  pointer-events: none;
}
.ic-sozPanel blockquote {
  position: relative;
  z-index: 1;
  margin: 0;
  font-family: var(--disp);
  font-size: clamp(19px, 2.4vw, 27px);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.02em;
}
.ic-sozPanel cite {
  position: relative;
  z-index: 1;
  display: block;
  margin-top: 20px;
  color: #b9d3f7;
  font-family: var(--mono);
  font-size: 11.5px;
  font-style: normal;
  letter-spacing: 0.08em;
}
@media (max-width: 700px) {
  .ic-sozPanel {
    padding: 28px 24px;
    border-radius: var(--r);
  }
}

/* `.ic-listGrid` / `.ic-listItem` kaldırıldı: tek kullanıcısı blog listesiydi,
   o da kapak görselli kart ızgarasına geçti (`components/YaziIzgarasi`).
   `.ic-go` duruyor — çözüm ve hizmet kartları kullanıyor. */

/* ---------- kurumsal künye (hakkımızda) ----------
   Tedarikçi değerlendiren ekibin aradığı satırlar. Tanım listesi kullanıldı:
   ad ↔ değer ilişkisi işaretlemede de duruyor. */
.ic-kunye {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  margin-top: 8px;
}
.ic-kunye > div {
  background: var(--card);
  padding: 20px 22px;
}
.ic-kunye dt {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mut2);
}
.ic-kunye dd {
  margin-top: 8px;
  font-size: 15px;
  font-weight: 650;
  color: var(--ink);
  /* Türkçe satır aralığı kuralı */
  line-height: 1.35;
}

/* Başlık kartının altındaki açıklama notu (çözümler sayfası). */
.ic-kartNot {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line2);
  font-size: 12px;
  line-height: 1.5;
  color: var(--mut);
}


/* ===== proje ===== */
.proje-filters {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin-top: 26px;
}
.proje-filters button {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--mut);
  padding: 9px 16px;
  cursor: pointer;
  transition: all 0.18s ease;
}
.proje-filters button:hover {
  color: var(--b500);
  border-color: var(--b300);
}
.proje-filters button[aria-pressed='true'] {
  background: var(--b500);
  border-color: var(--b500);
  color: #fff;
}

.proje-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 18px;
  margin-top: 22px;
}

/**
 * Geniş ekranda üç sütun — `auto-fill`e bırakılmıyor.
 *
 * Kabuk 1320'ye çıkınca 1264 px'lik içerik 290 px'lik en küçük ölçüye
 * dört kez sığıyor ve ızgara kendiliğinden 4 sütuna düşüyordu; kart
 * 363'ten 303 px'e iniyor, yani sayfayı genişletmek portföydeki ekran
 * görüntülerini **küçültüyordu**. Bu sayfada asıl işi gören şey o
 * görüntüler, o yüzden sütun sayısı sabit ve kart 409 px'e çıkıyor.
 *
 * Eşik 1240: dört sütuna geçiş 1270 px görüntü alanında oluyor, kural
 * onun altında devreye giriyor. Daha dar ekranlarda `auto-fill` kendi
 * kırılmalarını sürdürüyor (2 sütun, sonra 1).
 */
@media (min-width: 1240px) {
  .proje-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/**
 * Proje listesi kartı — anasayfadaki seçilmiş proje kartıyla aynı dili
 * kullanıyor (5 Eyl 2026). İki sayfada iki farklı kart görünümü olması
 * siteyi iki ayrı yerde yapılmış gibi gösteriyordu.
 *
 * Dış kabuk + iç çekirdek: gerekçe `.anasayfa-proofCard` üzerindeki nota
 * yazıldı, kavis değerleri oradan geliyor.
 */
.proje-card {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--r-xl);
  padding: var(--kabuk-dolgu);
  box-shadow: var(--golge-cevre), var(--ic-isik);
  display: flex;
  flex-direction: column;
  transition:
    border-color var(--sure-yavas) var(--eas),
    transform var(--sure-yavas) var(--eas),
    box-shadow var(--sure-yavas) var(--eas);
}
.proje-card:hover {
  border-color: color-mix(in srgb, var(--b500) 22%, transparent);
  transform: translateY(-5px);
  box-shadow: var(--golge-yuksek), var(--ic-isik);
}
.proje-card:focus-visible {
  outline: 2px solid var(--b500);
  outline-offset: 3px;
}
.proje-card:hover .proje-kapakGorsel {
  transform: scale(1.035);
}

/* stilize önizleme — Faz 4'te gerçek ekran görüntüsüyle değişecek */
.proje-preview {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--band);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  padding: 9px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.proje-preview::after {
  content: '';
  position: absolute;
  right: -40px;
  top: -40px;
  width: 150px;
  height: 150px;
  transform: rotate(8deg);
  background: linear-gradient(
    115deg,
    transparent 46%,
    rgba(35, 94, 194, 0.07) 46.5%,
    rgba(35, 94, 194, 0.07) 60%,
    transparent 60.5%
  );
}
.proje-bar {
  display: flex;
  gap: 4px;
  align-items: center;
  flex: none;
}
.proje-bar i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--b300);
  opacity: 0.55;
}
.proje-bar u {
  flex: 1;
  height: 8px;
  background: var(--card);
  border: 1px solid var(--line);
  margin-left: 4px;
  display: block;
}
.proje-band {
  background: linear-gradient(120deg, var(--b700), var(--b500) 65%, var(--b400));
  flex: 1.5;
  position: relative;
  overflow: hidden;
  min-height: 0;
}
.proje-band s {
  position: absolute;
  left: 8px;
  height: 5px;
  background: rgba(255, 255, 255, 0.9);
  display: block;
  text-decoration: none;
}
.proje-band s:nth-child(1) {
  top: 12px;
  width: 48%;
}
.proje-band s:nth-child(2) {
  top: 24px;
  width: 28%;
  opacity: 0.55;
  height: 4px;
}
.proje-tiles {
  display: flex;
  gap: 6px;
  flex: 1;
  min-height: 0;
}
.proje-tiles span {
  flex: 1;
  background: linear-gradient(135deg, var(--b100), var(--band));
  border: 1px solid var(--line);
}
.proje-rows {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1.6;
  min-height: 0;
  justify-content: center;
}
.proje-rows span {
  height: 7px;
  background: var(--line);
  display: block;
}
.proje-rows span:nth-child(1) {
  width: 82%;
  background: var(--b300);
}
.proje-rows span:nth-child(2) {
  width: 64%;
}
.proje-rows span:nth-child(3) {
  width: 73%;
}
.proje-grid4 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  flex: 1.6;
  min-height: 0;
}
.proje-grid4 span {
  background: linear-gradient(135deg, var(--b100), var(--band));
  border: 1px solid var(--line);
}
.proje-search {
  display: flex;
  gap: 5px;
  align-items: center;
  flex: none;
  height: 14px;
}
.proje-search b {
  flex: 1;
  height: 8px;
  background: var(--card);
  border: 1px solid var(--line);
}
.proje-search u {
  width: 26px;
  height: 8px;
  background: var(--b500);
  display: block;
}
.proje-chip {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 2;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--b900);
  color: #fff;
  padding: 4px 9px;
  border-radius: 6px;
}

.proje-body {
  padding: 16px 18px 0;
  flex: 1;
}
.proje-body h3 {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.008em;
}
.proje-body p {
  font-size: 12.5px;
  color: var(--mut);
  margin-top: 5px;
  line-height: 1.5;
}
.proje-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 14px 18px 15px;
  margin-top: 14px;
  border-top: 1px solid var(--line2);
}
.proje-year {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--mut2);
  font-variant-numeric: tabular-nums;
}
.proje-go {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--b500);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.proje-card:hover .proje-go {
  color: var(--b600);
}
.proje-note {
  font-size: 13px;
  color: var(--mut2);
  margin-top: 20px;
}
.proje-empty {
  color: var(--mut);
  margin-top: 26px;
}

/* --- panelden yüklenen kapak görseli ---
   Görsel varsa sektöre göre çizilen .proje-preview deseninin yerini alıyor; oran
   ekran görüntüsüyle aynı (16:8.1) olduğu için kartlar aynı yükseklikte kalıyor. */

.proje-kapak {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1600 / 810;
  background: var(--band);
  /* İç çekirdek: dış kabukla eşmerkezli kavis; alt çizgiye gerek kalmadı. */
  border-radius: var(--r-ic);
}

.proje-kapakGorsel {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--sure-yavas) var(--eas);
  object-position: top center;
  transition: transform 0.35s ease;
}

.proje-card:hover .proje-kapakGorsel {
  transform: scale(1.03);
}

@media (prefers-reduced-motion: reduce) {
  .proje-kapakGorsel,
  .proje-card:hover .proje-kapakGorsel {
    transition: none;
    transform: none;
  }
}

/* Sektör etiketi görselin üstünde; .proje-chip ile aynı dil. */
.proje-kapakEtiket {
  position: absolute;
  left: 12px;
  top: 12px;
  padding: 5px 10px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--b900) 78%, transparent);
  color: #fff;
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  backdrop-filter: blur(6px);
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .proje-kapakEtiket {
    background: #0b1526;
  }
}


/* ===== form ===== */
.form-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 56px;
  padding-top: 48px;
}
@media (max-width: 860px) {
  .form-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}

.form-form {
  display: grid;
  gap: 18px;
}
.form-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
@media (max-width: 560px) {
  .form-pair {
    grid-template-columns: 1fr;
  }
}

.form-form label {
  font-size: 13px;
  font-weight: 650;
  display: block;
}
.form-form label small {
  color: var(--mut2);
  font-weight: 400;
}
.form-form input,
.form-form select,
.form-form textarea {
  width: 100%;
  margin-top: 7px;
  padding: 11px 13px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  font: inherit;
  font-size: 14.5px;
  border-radius: var(--r-sm);
}
.form-form textarea {
  min-height: 120px;
  resize: vertical;
}
.form-form input:focus-visible,
.form-form select:focus-visible,
.form-form textarea:focus-visible {
  border-color: var(--b500);
}

.form-consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 12.5px;
  color: var(--mut);
  font-weight: 400;
}
.form-consent input {
  width: auto;
  margin-top: 3px;
}
.form-consent a {
  color: var(--b500);
}

.form-hata {
  background: #fbedeb;
  border: 1px solid #f3cec9;
  color: #ac3025;
  padding: 12px 14px;
  font-size: 14px;
  border-radius: var(--r-sm);
}
:global(:root[data-theme='dark']) .form-hata,
:global(html) .form-hata {
  /* koyu temada okunur kalsın */
}
@media (prefers-color-scheme: dark) {
  .form-hata {
    background: #2a1614;
    border-color: #52251f;
    color: #e8887c;
  }
}

.form-basarili {
  border: 1px solid var(--b100);
  background: var(--b050);
  border-radius: var(--r);
  padding: 30px 28px;
}
.form-basarili h2 {
  font-size: 22px;
  font-weight: 700;
}
.form-basarili p {
  color: var(--ink2);
  margin-top: 12px;
  max-width: 52ch;
}
.form-basarili .form-row {
  display: flex;
  gap: 12px;
  margin-top: 22px;
  flex-wrap: wrap;
}
.form-tick {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  background: var(--b500);
  border-radius: var(--r-sm);
  color: #fff;
  font-size: 17px;
  margin-bottom: 16px;
}

/* yan panel */
.form-infoCard {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 26px;
}
.form-infoCard + .form-infoCard {
  margin-top: 16px;
}
.form-infoCard h2 {
  font-size: 15px;
  margin-bottom: 14px;
}
.form-infoCard li {
  margin-bottom: 11px;
  font-size: 14.5px;
  color: var(--ink2);
  display: flex;
  gap: 10px;
  align-items: baseline;
}
.form-infoCard .form-ic {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--b500);
  letter-spacing: 0.08em;
  flex: none;
  width: 46px;
  font-weight: 700;
}
.form-infoCard a:hover {
  color: var(--b500);
}
.form-sla {
  background: var(--b050);
  border: 1px solid var(--b100);
  border-radius: var(--r-sm);
  padding: 16px 18px;
  font-size: 13.5px;
  color: var(--ink2);
  margin-top: 16px;
}
.form-sla b {
  color: var(--b700);
}

/* ==========================================================================
   Formun bölümlenmesi.

   Alanlar tek yığın hâlinde duruyordu; "sizi tanıyalım / projeniz hakkında"
   ayrımı formu iki kısa adıma indiriyor. Ziyaretçi uzun bir form yerine iki
   küçük blok görüyor — dönüşüm sayfasında bu fark ediliyor.
   ========================================================================== */

.form-kart {
  padding: 30px 30px 32px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--golge-yumusak);
}
@media (max-width: 560px) {
  .form-kart {
    padding: 22px 20px 24px;
  }
}

.form-bolum + .form-bolum {
  margin-top: 28px;
  padding-top: 26px;
  border-top: 1px solid var(--line2);
}

.form-bolumBas {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.form-bolumNo {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--b050);
  color: var(--b600);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

.form-bolumAd {
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

/* Odaklanmada belirgin halka — klavyeyle dolduranlar için. */
.form-form input:focus-visible,
.form-form select:focus-visible,
.form-form textarea:focus-visible {
  outline: none;
  border-color: var(--b500);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--b500) 22%, transparent);
}

/* Gönder satırı: buton ve söz notu yan yana. */
.form-gonderSatiri {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 4px;
}

.form-gonderNot {
  color: var(--mut);
  font-size: 12.5px;
  line-height: 1.45;
}

/* ---------- söz kartı (yan panel) ---------- */

.form-sozListesi {
  display: grid;
  gap: 12px;
}

.form-sozOge {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  color: var(--ink2);
  font-size: 14px;
  line-height: 1.5;
}

.form-sozTik {
  flex: none;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--wabg);
  color: var(--wa);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}


/* ===== yazi ===== */
/* Blog yazısı gövdeleri.
   Renkler yalnızca tema değişkenlerinden geliyor — düz #fff yazmak koyu temayı
   bozuyor, değişkenler ikisini birden çözüyor. */

.yazi-bolum {
  padding: 0 0 56px;
}

.yazi-bolum + .yazi-bolum {
  padding-top: 56px;
  border-top: 1px solid var(--line);
}

.yazi-bolumGiris {
  max-width: 760px;
  color: var(--mut);
  font-size: 1.02rem;
}

/* ---------- içindekiler ---------- */

.yazi-icindekiler {
  position: sticky;
  top: 100px;
  padding: 22px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--golge-yumusak);
}

.yazi-icindekiler strong {
  display: block;
  margin-bottom: 12px;
}

.yazi-icindekiler ol {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: madde;
}

.yazi-icindekiler li {
  counter-increment: madde;
}

.yazi-icindekiler a {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 8px;
  padding: 7px 8px;
  border-radius: 8px;
  color: var(--ink2);
  font-size: 0.86rem;
  line-height: 1.4;
  text-decoration: none;
}

.yazi-icindekiler a::before {
  color: var(--b500);
  font-weight: 700;
  content: counter(madde, decimal-leading-zero);
}

.yazi-icindekiler a:hover {
  color: var(--b500);
  background: var(--b050);
}

/* ---------- tablo ---------- */

.yazi-tabloSarmal {
  overflow-x: auto;
  margin: 24px 0 14px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  -webkit-overflow-scrolling: touch;
}

.yazi-tabloSarmal table {
  width: 100%;
  min-width: 680px;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.yazi-tabloSarmal caption {
  padding: 15px 17px;
  color: var(--mut);
  font-size: 0.82rem;
  text-align: left;
}

.yazi-tabloSarmal th,
.yazi-tabloSarmal td {
  padding: 15px 17px;
  border-bottom: 1px solid var(--line2);
  text-align: left;
  vertical-align: top;
}

.yazi-tabloSarmal th {
  color: var(--ink);
  background: var(--b050);
  font-weight: 700;
}

.yazi-tabloSarmal tbody tr:last-child td {
  border-bottom: 0;
}

.yazi-fiyat {
  color: var(--b600);
  font-weight: 700;
  white-space: nowrap;
}

.yazi-not {
  padding: 15px 17px;
  color: var(--mut);
  background: var(--b050);
  border-radius: 12px;
  font-size: 0.88rem;
}

/* Arama sonucunda öne çıkması hedeflenen doğrudan cevap. */
.yazi-kisaCevap {
  margin: 18px 0 26px;
  padding: 20px 22px;
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 5px solid var(--b500);
  border-radius: var(--r);
}

.yazi-kisaCevap strong {
  display: block;
  margin-bottom: 8px;
  color: var(--b500);
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.yazi-kisaCevap p {
  margin-bottom: 0;
  color: var(--ink2);
  font-size: 1.02rem;
}

.yazi-kisaCevap b {
  color: var(--b600);
  white-space: nowrap;
}

/* ---------- kart ızgaraları ---------- */

.yazi-izgara2,
.yazi-izgara3 {
  display: grid;
  gap: 16px;
  margin-top: 24px;
}

.yazi-izgara2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.yazi-izgara3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.yazi-miniKart,
.yazi-senaryo {
  padding: 20px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
}

.yazi-miniKart h3,
.yazi-senaryo h3 {
  margin: 0 0 8px;
  font-size: 1.08rem;
}

.yazi-miniKart p,
.yazi-senaryo p {
  margin-bottom: 0;
  color: var(--mut);
  font-size: 0.92rem;
}

.yazi-numara {
  display: inline-grid;
  width: 36px;
  height: 36px;
  margin-bottom: 14px;
  place-items: center;
  color: var(--b500);
  background: var(--b050);
  border-radius: 10px;
  font-family: var(--mono);
  font-weight: 700;
}

.yazi-senaryoKapsam {
  display: block;
  margin-bottom: 12px;
  color: var(--b500);
  font-family: var(--mono);
  font-size: 0.76rem;
  letter-spacing: 0.04em;
}

/* ---------- proje kartları ---------- */

.yazi-projeKart {
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
}

.yazi-projeGorsel {
  width: 100%;
  height: auto;
  aspect-ratio: 848 / 432;
  object-fit: cover;
  background: var(--b050);
}

.yazi-projeGovde {
  padding: 19px;
}

.yazi-projeEtiket {
  display: inline-block;
  margin-bottom: 10px;
  color: var(--b500);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.yazi-projeRozetler {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 14px;
}

.yazi-projeRozetler span {
  padding: 5px 9px;
  color: var(--ink2);
  background: var(--b050);
  border-radius: 7px;
  font-size: 0.76rem;
  font-weight: 700;
}

.yazi-projeBaglanti {
  display: inline-block;
  margin-top: 14px;
  color: var(--b500);
  font-weight: 700;
  text-decoration: none;
}

.yazi-projeBaglanti:hover {
  text-decoration: underline;
}

/* ---------- uyarı ve liste ---------- */

.yazi-uyari {
  padding: 22px;
  color: var(--ink2);
  background: var(--b050);
  border: 1px solid var(--line);
  border-left: 5px solid var(--b500);
  border-radius: var(--r);
}

.yazi-isaretListe {
  display: grid;
  gap: 11px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.yazi-isaretListe li {
  position: relative;
  padding-left: 30px;
}

.yazi-isaretListe li::before {
  position: absolute;
  top: 3px;
  left: 0;
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  color: var(--b500);
  background: var(--b050);
  border-radius: 50%;
  font-size: 0.7rem;
  font-weight: 700;
  content: '✓';
}

/* ---------- hesaplayıcı ---------- */

.yazi-hesaplayici {
  padding: clamp(22px, 5vw, 34px);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--golge-kart);
}

.yazi-hesapIzgara {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(250px, 0.7fr);
  gap: 28px;
  align-items: start;
}

.yazi-alan {
  display: grid;
  gap: 8px;
  margin-bottom: 17px;
}

.yazi-alan label,
.yazi-kutucuklar legend {
  color: var(--ink);
  font-weight: 700;
}

.yazi-alan select,
.yazi-alan input[type='range'] {
  width: 100%;
  font: inherit;
}

.yazi-alan select {
  min-height: 46px;
  padding: 10px 12px;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
}

.yazi-alan input[type='range'] {
  accent-color: var(--b500);
}

.yazi-aralikDeger {
  color: var(--b500);
  font-weight: 700;
}

.yazi-kutucuklar {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  border: 0;
}

.yazi-kutucuk {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 11px;
  border: 1px solid var(--line2);
  border-radius: 10px;
  cursor: pointer;
}

.yazi-kutucuk input {
  width: 18px;
  height: 18px;
  margin-top: 3px;
  accent-color: var(--b500);
}

.yazi-hesapSonuc {
  position: sticky;
  top: 100px;
  padding: 24px;
  background: var(--b900);
  border-radius: var(--r);
}

.yazi-hesapSonuc small {
  display: block;
  margin-bottom: 8px;
  color: var(--b300);
}

.yazi-hesapToplam {
  display: block;
  margin-bottom: 12px;
  color: #fff;
  font-family: var(--disp);
  font-size: clamp(1.5rem, 4vw, 2.1rem);
  font-weight: 700;
  line-height: 1.18;
}

.yazi-hesapSonuc p {
  color: var(--b100);
  font-size: 0.86rem;
}

/* ---------- düğmeler ---------- */

.yazi-dugme {
  display: inline-flex;
  min-height: 48px;
  gap: 8px;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  font-size: 0.94rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
}

.yazi-dugmeWa {
  color: var(--wa);
  background: var(--wabg);
}

/* ---------- sıralı liste ----------
   İşaret listesinin numaralı hâli. Sıra bilgi taşıdığında (acil müdahale
   adımları gibi) onay işareti yanlış sinyal veriyor. */
.yazi-siraliListe {
  display: grid;
  gap: 11px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: adim;
}

.yazi-siraliListe li {
  position: relative;
  padding-left: 30px;
  counter-increment: adim;
  color: var(--ink2);
  font-size: 14.5px;
  /* Türkçe satır aralığı kuralı */
  line-height: 1.5;
}

.yazi-siraliListe li::before {
  position: absolute;
  top: 2px;
  left: 0;
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  color: var(--b500);
  background: var(--b050);
  border-radius: 50%;
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 700;
  content: counter(adim);
}

/* ---------- kapanış eylemleri ---------- */

.yazi-kapanisEylemler {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
}

/* ---------- hazırlık kontrol listesi ---------- */

.yazi-kontrol {
  margin-top: 22px;
  padding: 22px 24px 24px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
}

.yazi-kontrolBas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line2);
}

.yazi-kontrolBas strong {
  color: var(--ink);
  font-size: 15px;
}

.yazi-kontrolSayac {
  color: var(--b600);
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.yazi-kontrolSifirla {
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  color: var(--mut);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}

.yazi-kontrolSifirla:hover:not(:disabled) {
  background: var(--band);
  color: var(--ink);
}

.yazi-kontrolSifirla:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.yazi-kontrolKutular {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 24px;
  margin-top: 16px;
}

@media (max-width: 680px) {
  .yazi-kontrolKutular {
    grid-template-columns: 1fr;
  }
}

.yazi-kontrolKutu {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--ink2);
  font-size: 14.5px;
  /* Türkçe satır aralığı kuralı */
  line-height: 1.4;
  cursor: pointer;
}

.yazi-kontrolKutu input {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--b500);
}

/* ---------- SSS ---------- */

.yazi-sss {
  display: grid;
  gap: 11px;
  margin-top: 22px;
}

.yazi-sss details {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
}

.yazi-sss summary {
  position: relative;
  padding: 18px 50px 18px 19px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.yazi-sss summary::-webkit-details-marker {
  display: none;
}

.yazi-sss summary::after {
  position: absolute;
  top: 16px;
  right: 18px;
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  color: var(--b500);
  background: var(--b050);
  border-radius: 8px;
  content: '+';
}

.yazi-sss details[open] summary::after {
  content: '−';
}

.yazi-sssCevap {
  padding: 0 19px 19px;
  color: var(--mut);
}

/* ---------- düzen ---------- */

.yazi-duzen {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: clamp(30px, 5vw, 64px);
  align-items: start;
}

/**
 * Geniş kabukta gövde sütunu serbest bırakılmıyor.
 *
 * `1fr` kabuk 1320'ye çıkınca gövdeyi 800'den 940 px'e taşıdı. Yazının
 * kendi paragrafları 760 px'lik kendi sınırında kaldığı için sorun orada
 * değil; kutucuklar, tablolar ve SSS blokları gövdenin tamamını kapladığı
 * için onların içindeki metin 750'den 850 px'e (yaklaşık 95 karakter)
 * çıkıyordu — okunur satır uzunluğunun epey üstü.
 *
 * Gövde eski ölçüsünde sabitlendi; genişlemenin payı içindekiler sütununa
 * (260 → 300, başlıklar daha az sarıyor) ve aradaki oluğa gidiyor.
 */
@media (min-width: 1240px) {
  .yazi-duzen {
    grid-template-columns: minmax(0, 800px) 300px;
    justify-content: space-between;
  }
}

.yazi-govde {
  min-width: 0;
}

@media (max-width: 960px) {
  .yazi-duzen,
  .yazi-hesapIzgara {
    grid-template-columns: 1fr;
  }

  .yazi-icindekiler,
  .yazi-hesapSonuc {
    position: static;
  }

  .yazi-icindekiler {
    order: -1;
  }

  .yazi-izgara3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .yazi-izgara2,
  .yazi-izgara3 {
    grid-template-columns: 1fr;
  }
}


/* ===== yazi ===== */
/* =========================================================================
   Blog listesinin kart ızgarası. Proje kartlarıyla aynı dil: aynı kenarlık,
   aynı yükselme, aynı kapak oranı — iki liste yan yana görüldüğünde tek
   sistemden çıktığı belli olsun.
   ========================================================================= */

.yazi-izgara {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 18px;
}

.yazi-kart {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition:
    border-color 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
}
.yazi-kart:hover {
  border-color: var(--b300);
  transform: translateY(-5px);
  box-shadow: var(--golge);
}

/* Kapak oranı 1,91:1 — panelde önerilen ölçüyle (1200 × 630) aynı, böylece
   paylaşım kartında ne görünüyorsa listede de o görünüyor. */
.yazi-kapak {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1200 / 630;
  background: var(--band);
  border-bottom: 1px solid var(--line);
}

.yazi-kapakGorsel {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.35s ease;
}

.yazi-kart:hover .yazi-kapakGorsel {
  transform: scale(1.03);
}

/* Kapağı olmayan yazı için dekoratif desen — kart yüksekliği şaşmasın. */
.yazi-desen {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      115deg,
      transparent 46%,
      color-mix(in srgb, var(--b500) 8%, transparent) 46.5%,
      color-mix(in srgb, var(--b500) 8%, transparent) 60%,
      transparent 60.5%
    ),
    linear-gradient(160deg, var(--band), var(--card));
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .yazi-desen {
    background: var(--band);
  }
}

@media (prefers-reduced-motion: reduce) {
  .yazi-kapakGorsel,
  .yazi-kart:hover .yazi-kapakGorsel {
    transition: none;
    transform: none;
  }
}

.yazi-metin {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.yazi-govde {
  padding: 20px 20px 0;
  flex: 1;
}

/* `.yazi-tarih` kaldırıldı: kartlarda tarih basılmıyor (3 Ağu 2026). */

.yazi-govde h2 {
  margin-top: 10px;
  font-size: 17.5px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
  /* Türkçe satır aralığı kuralı: ğ/ş alt uzantısı ile İ noktası çakışmasın */
  line-height: 1.28;
}

.yazi-govde p {
  margin-top: 9px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--mut);
}

.yazi-git {
  display: block;
  padding: 16px 20px 20px;
  font-size: 13.5px;
  font-weight: 650;
  color: var(--b500);
}
.yazi-kart:hover .yazi-git {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- öne çıkan (en yeni) yazı ----------
   Satırın tamamını kaplıyor, görsel solda. Tek yazı varken ızgarada yalnız
   duran dar kart sorununu çözüyor; yazı sayısı arttığında da en günceli
   ayırt ediyor. 860 px altında normal kart düzenine dönüyor. */
.yazi-oneCikan {
  grid-column: 1 / -1;
}

@media (min-width: 861px) {
  .yazi-oneCikan {
    flex-direction: row;
    align-items: stretch;
  }
  .yazi-oneCikan .yazi-kapak {
    flex: 0 0 46%;
    border-bottom: none;
    border-inline-end: 1px solid var(--line);
  }
  .yazi-oneCikan .yazi-metin {
    justify-content: center;
    padding: 8px 12px;
  }
  .yazi-oneCikan .yazi-govde {
    flex: none;
    padding: 20px 26px 0;
  }
  .yazi-oneCikan .yazi-govde h2 {
    font-size: 22px;
    max-width: 24ch;
  }
  .yazi-oneCikan .yazi-govde p {
    font-size: 15px;
    max-width: 52ch;
  }
  .yazi-oneCikan .yazi-git {
    padding: 18px 26px 20px;
  }
}

@media (max-width: 700px) {
  .yazi-izgara {
    grid-template-columns: 1fr;
  }
  .yazi-govde {
    padding: 18px 18px 0;
  }
  .yazi-git {
    padding: 14px 18px 18px;
  }
}

/* ===== taşıma eki =====
   React sürümünde açılır panel koşullu basılıyordu (hiç DOM'da yoktu).
   PHP'de panel her zaman basılıp `hidden` ile gizleniyor; modül CSS'indeki
   `display` kuralı `hidden`ı ezdiği için bu kural gerekli. */
[hidden] { display: none !important; }

/* Vitrin duraklatma denetimi. Sekmelerin yanında ama onlardan ayrı: bu bir
   gezinme değil, oynatma denetimi. */
.vitrin-durdur {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 10px 0 0; padding: 5px 12px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--card); color: var(--mut2);
  font: inherit; font-size: 12.5px; cursor: pointer;
}
.vitrin-durdur:hover { color: var(--ink2); border-color: var(--b400); }
.vitrin-durdur::before {
  content: ''; width: 8px; height: 8px; border-radius: 1px;
  background: currentColor;
}
/* Duraklatılmışken kare yerine üçgen: durum simgeden de okunmalı. */
.vitrin-durdur[aria-pressed="true"]::before {
  width: 0; height: 0; border-radius: 0; background: none;
  border-block: 5px solid transparent;
  border-inline-start: 8px solid currentColor;
}

/* Döküm çarpan satırı: ara toplamdan sonra geldiği için üstünde ayraç var. */
.hesaplayici-dokumCarpan dd { font-variant-numeric: tabular-nums; color: var(--b500); }
.hesaplayici-dokumCarpan dt { color: var(--mut2); }

/* Adet girişli soru grubu (ürün/ilan/oda sayısı). Kaydırıcı yerine sayı
   kutusu: aralık 0–2000 gibi geniş olabiliyor ve kaydırıcıyla 500'ü tam
   tutturmak imkânsız. */
.hesaplayici-sayiAlan {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 6px;
}
.hesaplayici-sayiAlan label { font-weight: 600; font-size: 14px; }
.hesaplayici-sayiAlan input {
  width: 140px; font: inherit; font-variant-numeric: tabular-nums;
  padding: 9px 11px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--card); color: var(--ink);
}
.hesaplayici-sayiAlan input:focus-visible { outline: 2px solid var(--b400); outline-offset: 1px; }
.hesaplayici-sayiAlan > span { color: var(--mut2); font-size: 13.5px; }