/* =========================================================
   Vibe to Brands — Design System
   Salt Kreatif alt markası
   ========================================================= */

/* ---------- Yazı tipi (kendi sunucumuzda) ----------
   Google Fonts bağlantısı KALDIRILDI: ziyaretçi çerez bandında henüz seçim
   yapmadan tarayıcı fonts.gstatic.com'a gidiyor ve IP adresi Google'a
   ulaşıyordu. "Rıza vermeden hiçbir veri gitmez" cümlesini doğru kılmak için
   yazı tipi buraya taşındı. Değişken font: tek dosya 200-800 ağırlık.
   Üretimi: python3 -m fontTools.subset (bkz. site/assets/fonts/BENIOKU yok —
   kaynak tools/assets/PlusJakartaSans.ttf). */
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../fonts/plus-jakarta-sans.woff2") format("woff2-variations"),
       url("../fonts/plus-jakarta-sans.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

/* ---------- Design Tokens ---------- */
:root {
  /* Brand palette */
  --coral:   #f37255;
  --coral-d: #e05a3c;
  --teal:    #6ec8bf;
  --teal-d:  #4fb0a6;
  --yellow:  #d3d840;
  --yellow-d:#bcc02e;
  --indigo:  #4f60ac;
  --indigo-d:#3d4d92;
  --ink:     #231f20;

  /* Neutrals (Start Kit referansına göre) */
  --paper:   #ffffff;
  --white:   #ffffff;
  --gray:    #f7f7f8;   /* açık gri bölüm zemini */
  --muted:   #6f6f6f;
  --line:    #ececec;
  --line-2:  #e0e0e0;

  /* Semantic */
  --bg:        #ffffff;
  --surface:   var(--white);
  --text:      #0d0d0d;   /* başlık siyahı */
  --text-body: #3a3a3a;   /* gövde metni */
  --text-soft: var(--muted);
  --primary:   var(--coral);
  --primary-d: var(--coral-d);
  --on-primary:#ffffff;
  --dark:      #0d0d0d;

  /* Konsept teması (her açılışta JS ile data-theme değişir) */
  /* Metin içi link rengi — TEMAYA GÖRE değişir (aşağıdaki data-theme
     blokları). --primary-d doğrudan kullanılamıyor: beyaz zeminde teal
     2.59:1, sarı 1.96:1 kalıyor ve gövde metninde okunmuyor. Buradaki
     tonlar aynı renklerin koyultulmuşu, hepsi ≥4.5:1. */
  --link: #c94a2e;
  --hero-base: var(--coral);
  --hero-ink:  #ffffff;
  --hero-sub-c: rgba(255,255,255,.92);
  --brand-logo: url("../img/brand-coral.svg?v=20260930");

  /* Type */
  --font: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Radius & shadow */
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 28px;
  --r-xl: 40px;
  --shadow-sm: 0 2px 10px rgba(13,13,13,.05);
  --shadow-md: 0 16px 40px rgba(13,13,13,.08);
  --shadow-lg: 0 30px 70px rgba(13,13,13,.12);

  /* Durum renkleri — HEPSİ marka paletinden.
     Kehribar/amber (#e6a817) BİLEREK YOK: müşteri tarafında "sayfa hata
     verdi" hissi yaratıyordu. Beklemede/bilgilendirme artık marka
     indigosu (sitede zaten .sub-note--info bu renkti), olumlu turkuaz,
     gerçek hata mercan. Yeni bir durum rengi gerekirse buradan alınır. */
  --info:      var(--indigo);
  --info-d:    var(--indigo-d);
  --info-bg:   rgba(79,96,172,.08);
  --info-bg-2: rgba(79,96,172,.14);
  --info-line: rgba(79,96,172,.26);

  --ok:        var(--teal-d);
  --ok-bg:     rgba(110,200,191,.16);
  --ok-line:   rgba(79,176,166,.3);

  --err:       var(--coral-d);
  --err-bg:    rgba(224,90,60,.08);
  --err-line:  rgba(224,90,60,.3);

  /* Layout */
  --maxw: 1290px;
  --gutter: clamp(18px, 4vw, 44px);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
/* BODY'DE YATAY KESME YOK — BİLEREK.
   9 Eyl 2026'da "ikinci emniyet" diye eklendi ve iPhone'da parmakla
   küçültülen sayfa bir daha büyütülemez oldu: iOS, kök öğeler kesme
   yapınca görsel görüntü alanının yakınlaştırma/kaydırma davranışını
   kısıtlıyor. Yatay taşmayı zaten html'deki clip ve tablonun kendi
   overscroll-behavior kuralı hallediyor. Buraya bir daha eklemeyin. */
body {
  margin: 0;
  font-family: var(--font);
  color: var(--text-body);
  background: var(--bg);
  line-height: 1.67;
  font-size: 18px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 { margin: 0; line-height: 1.08; font-weight: 700; letter-spacing: -0.02em; color: var(--text); }
p { margin: 0; }

/* ---------- Utilities ---------- */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(56px, 9vw, 110px); }
.section--tight { padding-block: clamp(40px, 6vw, 72px); }
.center { text-align: center; }
.mx-auto { margin-inline: auto; }
.measure { max-width: 620px; }
.stack > * + * { margin-top: 1rem; }
.hidden { display: none !important; }

/* Etiket (eyebrow): RENKLİ ZEMİN YOK.
   Kırmızı/pembe tonlu pill uyarı kutusu gibi okunuyordu. Artık nötr gri bir
   çip: sakin, her sayfada aynı, tema rengiyle yarışmıyor.
   Renk varyantları bilerek etkisiz bırakıldı — HTML'deki eski
   .eyebrow--coral gibi sınıflar zemini geri getirmesin. */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-body);
  background: rgba(35,31,32,.06);
  padding: 7px 14px; border-radius: 999px;
}
.eyebrow--coral,
.eyebrow--teal,
.eyebrow--indigo,
.eyebrow--yellow { background: rgba(35,31,32,.06); color: var(--text-body); }

h1 { font-size: clamp(2.6rem, 6.2vw, 5.1rem); }
h2 { font-size: clamp(2rem, 4.6vw, 3.85rem); }
h3 { font-size: clamp(1.15rem, 1.8vw, 1.45rem); }
.lead { font-size: clamp(1.05rem, 1.4vw, 1.2rem); color: var(--text-body); }
.text-soft { color: var(--text-soft); }
.section-head { max-width: 640px; }
.section-head.center { margin-inline: auto; }
.section-head p { margin-top: 14px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-weight: 600; font-size: 1rem; line-height: 1;
  padding: 15px 26px; border-radius: 999px; border: 2px solid transparent;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--primary); color: var(--on-primary); box-shadow: 0 8px 20px rgba(13,13,13,.12); }
.btn--primary:hover { background: var(--primary-d); box-shadow: 0 12px 26px rgba(13,13,13,.18); transform: translateY(-2px); }
.btn--dark { background: var(--ink); color: #fff; }
.btn--dark:hover { background: #000; transform: translateY(-2px); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
/* Fare varsa vurgulan. DOKUNMATİKTE DEĞİL: telefonda bir düğmeye
   basınca tarayıcı :hover durumunu ÜSTÜNDE BIRAKIYOR — "Ücretsiz Ön
   Görüşme" bir kez dokunulduktan sonra siyah kalıyordu (9 Eyl 2026,
   canlıda görüldü). */
@media (hover: hover) {
  .btn--ghost:hover { border-color: var(--ink); background: var(--ink); color: #fff; }
}
.btn--light { background: #fff; color: var(--ink); }
.btn--light:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn--block { width: 100%; }
.btn--sm { padding: 11px 18px; font-size: .92rem; }

/* ---------- Header / Nav ---------- */
/* =========================================================
   HEADER — scroll'a duyarlı
   Sayfa tepesinde hero, header'ın ALTINDAN başlayan yuvarlak bir kart;
   yani header'ın arkasında renkli hiçbir şey yok, düz beyaz. O yüzden
   tepede ne buzlu cama ne kenara ihtiyaç var: bar hiç çizilmez.
   Bar ancak sayfa kaydırıldığında (html.is-scrolled) belirir — net bir
   buzlu şerit ve altında yumuşak gölge. Degradeli sönme YOK: maskelenmiş
   blur yarı-bulanık kirli bir bant bırakıyordu.
   ========================================================= */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: transparent;
  border-bottom: none;
  isolation: isolate;        /* ::before yalnız header'ın içinde kalsın */
}
.site-header::before {
  content: ""; position: absolute; inset: 0;
  z-index: -1; pointer-events: none;
  background: rgba(255,255,255,.86);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
          backdrop-filter: saturate(180%) blur(22px);
  box-shadow: 0 6px 24px rgba(13,13,13,.10);
  /* Tepede yok; kaydırınca yumuşakça gelir. */
  opacity: 0; transition: opacity .22s ease;
}
html.is-scrolled .site-header::before { opacity: 1; }
/* JS tamamen kapalıysa (i18n de çalışmaz zaten) bar sabit kalsın. */
@media (scripting: none) {
  .site-header::before { opacity: 1; }
}
/* Header'ı hero banner ile aynı sol hizaya çek (logo banner kenarına bloklu) */
.site-header .container { max-width: calc(1360px + 2 * var(--gutter)); }
.nav {
  display: flex; align-items: center; gap: 24px;
  min-height: 108px;          /* = .brand__logo yüksekliği → üstte boşluk yok */
  padding-bottom: 26px;       /* nefes payı yalnızca ALTTA */
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; flex: 0 0 auto; }
.brand img { height: 40px; width: auto; border-radius: 9px; }
.brand span { font-size: 1.05rem; letter-spacing: -.02em; white-space: nowrap; }
/* Header logosu: yazısız, büyük, tema rengine göre (CSS ile, flash yok) */
.brand__logo {
  display: block; width: 108px; height: 108px;
  background: var(--brand-logo) left center / contain no-repeat;
}
@media (max-width: 640px) {
  .brand__logo { width: 72px; height: 72px; }
  .nav { min-height: 72px; padding-bottom: 16px; }
}
.nav-links { display: flex; align-items: center; gap: 4px; margin-left: 12px; }
.nav-links a {
  padding: 9px 14px; border-radius: 999px; font-weight: 500; font-size: .96rem;
  color: var(--ink); transition: background .2s, color .2s;
}
.nav-links a:hover, .nav-links a.is-active { background: rgba(35,31,32,.06); }
.nav-actions { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.lang-switch { display: flex; align-items: center; }
.lang-select {
  appearance: none; -webkit-appearance: none;
  border: 1px solid var(--line, #e6e6ea); border-radius: 999px;
  background: #fff; color: var(--ink, #0d0d0d);
  font: inherit; font-size: .82rem; font-weight: 600;
  padding: 7px 26px 7px 12px; cursor: pointer; line-height: 1;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230d0d0d' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right 9px center;
}
.lang-select:hover { border-color: var(--ink, #0d0d0d); }
.nav-toggle { display: none; background: none; border: 0; padding: 8px; }
.nav-toggle span { display: block; width: 24px; height: 2px; background: var(--ink); margin: 5px 0; border-radius: 2px; transition: .25s; }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; padding-block: clamp(48px, 7vw, 96px); }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(30px, 5vw, 64px); align-items: center; }
.hero h1 { margin-top: 18px; }
.hero h1 .hl { color: var(--coral); }
.hero p.lead { margin-top: 20px; max-width: 520px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.hero-trust { display: flex; align-items: center; gap: 18px; margin-top: 28px; color: var(--text-soft); font-size: .9rem; }
.hero-trust strong { color: var(--ink); }
.hero-art { position: relative; }
.blob {
  position: absolute; inset: -8% -6% -6% -6%; z-index: 0;
  background:
    radial-gradient(closest-side, rgba(110,200,191,.55), transparent 70%) 20% 25% / 60% 60% no-repeat,
    radial-gradient(closest-side, rgba(211,216,64,.5), transparent 70%) 85% 30% / 55% 55% no-repeat,
    radial-gradient(closest-side, rgba(79,96,172,.35), transparent 70%) 60% 90% / 60% 60% no-repeat;
  filter: blur(6px);
}
.hero-art .art-card { position: relative; z-index: 1; border-radius: var(--r-xl); box-shadow: var(--shadow-lg); }

/* ---------- Logo strip ---------- */
.logostrip { border-block: 1px solid var(--line); background: var(--white); }
.logostrip .container { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; justify-content: center; padding-block: 26px; }
.logostrip p { font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-soft); font-weight: 600; }
.logostrip .marks { display: flex; gap: 34px; flex-wrap: wrap; align-items: center; }
.logostrip .marks span { font-weight: 700; font-size: 1.15rem; color: var(--line-2); }

/* ---------- Cards / Features ---------- */
.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 28px; box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.card h3 { margin-bottom: 10px; }
.card p { color: var(--text-soft); font-size: .96rem; }
.ic {
  width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center;
  margin-bottom: 18px; color: #fff;
}
.ic svg { width: 26px; height: 26px; }
.ic--coral  { background: var(--coral); }
.ic--teal   { background: var(--teal); }
.ic--yellow { background: var(--yellow); color: var(--ink); }
.ic--indigo { background: var(--indigo); }

/* ---------- Split feature ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 70px); align-items: center; }
.split--reverse .split-media { order: 2; }
.split-media { border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-md); }
.checklist li { display: flex; gap: 12px; align-items: flex-start; margin-top: 14px; color: var(--text-soft); }
.checklist svg { flex: 0 0 auto; width: 22px; height: 22px; color: var(--teal-d); margin-top: 2px; }
.checklist strong { color: var(--ink); display: block; }

/* ---------- Stats band ---------- */
.band { background: var(--ink); color: #fff; }
.band .eyebrow { background: rgba(255,255,255,.12); color: #fff; }
.band h2 { color: #fff; }
.band p { color: rgba(255,255,255,.72); }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.stat { text-align: center; }
.stat .num { font-size: clamp(2.4rem, 5vw, 3.4rem); font-weight: 700; letter-spacing: -.03em; }
.stat:nth-child(1) .num { color: var(--coral); }
.stat:nth-child(2) .num { color: var(--teal); }
.stat:nth-child(3) .num { color: var(--yellow); }
.stat span { color: rgba(255,255,255,.7); font-size: .95rem; }

/* ---------- Steps ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; counter-reset: step; }
.step { position: relative; padding-top: 8px; }
.step .n {
  width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center;
  font-weight: 700; font-size: 1.15rem; color: #fff; background: var(--indigo); margin-bottom: 16px;
}
.step:nth-child(2) .n { background: var(--teal); }
.step:nth-child(3) .n { background: var(--coral); }
.step h3 { margin-bottom: 8px; }
.step p { color: var(--text-soft); font-size: .96rem; }

/* ---------- Pricing ---------- */
.cat-tabs { display: inline-flex; padding: 6px; background: var(--white); border: 1px solid var(--line); border-radius: 999px; gap: 4px; box-shadow: var(--shadow-sm); }
.cat-tab {
  border: 0; background: transparent; padding: 12px 22px; border-radius: 999px;
  font-weight: 600; font-size: .98rem; color: var(--text-soft); transition: .2s;
}
.cat-tab.is-active { background: var(--ink); color: #fff; }

.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }
.plan {
  display: flex; flex-direction: column; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-lg); padding: 32px 28px;
  box-shadow: var(--shadow-sm); position: relative;
}
/* Önerilen paket: sadece çerçeve değil, hafif dolgu da alır — kart
   uzaktan bakıldığında da öne çıkar. Renk temadan gelir; eskiden sabit
   coral'dı ve diğer dört temada kartla logo birbirini tutmuyordu. */
.plan--featured {
  border: 2px solid var(--primary);
  background: var(--primary-soft, var(--surface));
  box-shadow: var(--shadow-md);
}
.plan__badge {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  background: var(--primary); color: var(--on-primary); font-size: .78rem; font-weight: 700;
  padding: 6px 16px; border-radius: 999px; letter-spacing: .02em;
}
.plan__name { font-size: 1.15rem; font-weight: 700; }
.plan__tier {
  display: inline-block; margin-top: 6px; font-size: .74rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--primary-d, var(--primary));
}
.plan__tag { color: var(--text-soft); font-size: .92rem; margin-top: 8px; min-height: 56px; }
.plan__delivery {
  font-size: .82rem; color: var(--text-soft); line-height: 1.5;
  background: var(--gray); border-radius: 12px; padding: 10px 12px; margin: -8px 0 20px;
}
.plan__price { margin: 18px 0 4px; display: flex; align-items: baseline; gap: 6px; }
.plan__price .amt { font-size: 2.5rem; font-weight: 700; letter-spacing: -.03em; white-space: nowrap; }
.plan__price .cur { font-size: 1.3rem; font-weight: 700; }
.plan__price .per { color: var(--text-soft); font-size: .9rem; font-weight: 500; }
.plan__note { color: var(--text-soft); font-size: .84rem; }
.plan__features { margin: 22px 0 26px; display: grid; gap: 12px; align-content: start; }
.plan { display: flex; flex-direction: column; }
.plan .plan__features { flex: 1 1 auto; }
.plan__features li { display: flex; gap: 10px; align-items: flex-start; font-size: .95rem; }
.plan__features svg { flex: 0 0 auto; width: 20px; height: 20px; color: var(--teal-d); margin-top: 2px; }
.plan__features li.off { color: var(--line-2); }
.plan__features li.off svg { color: var(--line-2); }
.plan .btn { margin-top: auto; }

/* ---------- Tek başına satılan hizmetler ("Ek Hizmetler" sekmesi) ----------
   Paket kartından daha küçük bir kart: burada özellik listesi yok, tek bir
   iş satılıyor. Kartlar otomatik sığar — kalem sayısı admin panelinden
   değiştiği için sabit sütun sayısı vermiyoruz. */
.solo-grid {
  display: grid; gap: 24px; align-items: stretch;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.solo-card {
  display: flex; flex-direction: column; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px 26px;
  box-shadow: var(--shadow-sm);
}
/* İki satırlık yer ayrılır: adı tek satır olan kartla iki satır olan kartın
   açıklaması aynı hizadan başlasın. */
.solo-card__name { font-size: 1.15rem; font-weight: 700; min-height: 2.6em; }
/* Açıklama boşluğu doldurur: kalemlerin metni farklı uzunlukta olsa da
   fiyat satırı ve buton kartlar arasında aynı hizada kalır. */
.solo-card__desc {
  flex: 1 1 auto; color: var(--text-soft); font-size: .92rem; margin-top: 10px;
  /* Admin metinleri uzun olabiliyor; kartta 4 satır görünür, tamamı
     "Detay" penceresinde açılır. */
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.solo-card__price { margin: 18px 0 4px; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.solo-card__price .amt { font-size: 2rem; font-weight: 700; letter-spacing: -.03em; }
.solo-card__meta { display: flex; align-items: center; gap: 8px; }
.solo-card__price .per { color: var(--text-soft); font-size: .88rem; font-weight: 500; }
/* "Detay" bir bağlantı gibi durur: kartta tek bir asıl eylem (Satın Al) olsun. */
.solo-card__more {
  align-self: flex-start; margin: 10px 0 20px; padding: 0; border: 0; background: none;
  color: var(--primary-d, var(--primary)); font: inherit; font-size: .86rem; font-weight: 600;
  text-decoration: underline; cursor: pointer;
}
.solo-card .btn { margin-top: auto; }

/* ---- EK HİZMET KARTLARI: MOBİLDE KATLANIR (CRO #02 Ek 1) ----
   Paket kartlarındaki desenin aynısı: kapalıyken ad + fiyat, dokununca
   açıklama ve düğmeler. Masaüstünde iki sarmalayıcı da display:contents
   ile yok sayılır — kart bugünkü düzeninde kalır. */
.solo-card__head, .solo-card__body { display: contents; }
.solo-card__chev { display: none; }

@media (max-width: 780px) {
  .solo-card__head {
    display: grid; grid-template-columns: 1fr auto; align-items: center;
    column-gap: 12px; cursor: pointer; user-select: none;
  }
  .solo-card__head:focus-visible { outline: 2px solid var(--primary); outline-offset: 4px; border-radius: 12px; }
  .solo-card__head .solo-card__name  { grid-column: 1; min-height: 0; }
  .solo-card__head .solo-card__price { grid-column: 1; margin: 10px 0 0; }
  .solo-card__chev {
    display: block; grid-column: 2; grid-row: 1 / span 2;
    width: 24px; height: 24px; color: var(--text-soft);
    transition: transform .25s ease;
  }
  .solo-card.is-kapali .solo-card__chev { transform: rotate(-90deg); }
  .solo-card.is-kapali .solo-card__body { display: none; }
  /* Kapalı kart: fiyat ve birimi tek satırda, alt boşluk derli toplu. */
  .solo-card.is-kapali { padding-bottom: 22px; }
  .solo-card.is-kapali .solo-card__price { flex-direction: row; align-items: baseline; gap: 8px; }
  .solo-card.is-kapali .solo-card__price .amt { font-size: 1.7rem; }
}

/* ---------- FAQ ---------- */
.faq { max-width: 780px; margin-inline: auto; }
.qa { border-bottom: 1px solid var(--line); }
.qa summary {
  list-style: none; cursor: pointer; padding: 22px 4px; display: flex;
  justify-content: space-between; align-items: center; gap: 16px; font-weight: 600; font-size: 1.08rem;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary .plus { flex: 0 0 auto; width: 26px; height: 26px; position: relative; transition: .2s; }
.qa summary .plus::before, .qa summary .plus::after { content:""; position:absolute; background: var(--coral); border-radius: 2px; }
.qa summary .plus::before { inset: 12px 4px auto 4px; height: 2px; }
.qa summary .plus::after { inset: 4px auto 4px 12px; width: 2px; }
.qa[open] summary .plus::after { transform: scaleY(0); }
.qa p { padding: 0 4px 22px; color: var(--text-soft); }

/* ---------- CTA band ---------- */
.cta {
  background: linear-gradient(120deg, var(--indigo), #6172c4);
  color: #fff; border-radius: var(--r-xl); padding: clamp(38px, 6vw, 66px);
  text-align: center; position: relative; overflow: hidden;
}
.cta::before {
  content:""; position: absolute; width: 340px; height: 340px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(211,216,64,.5), transparent); top: -120px; right: -80px;
}
.cta::after {
  content:""; position: absolute; width: 300px; height: 300px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(243,114,85,.5), transparent); bottom: -120px; left: -70px;
}
.cta > * { position: relative; z-index: 1; }
.cta h2 { color: #fff; }
.cta p { color: rgba(255,255,255,.85); margin: 14px auto 0; max-width: 560px; }
.cta .hero-cta { justify-content: center; }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: rgba(255,255,255,.72); padding-block: 60px 30px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 28px; }
.site-footer .brand span { color: #fff; }
.site-footer h4 { color: #fff; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 12px; font-weight: 600; }
/* Footer bağlantıları gövde metninden küçük: burada beş sütun yan yana
   duruyor, gövde ölçüsünde yazıldığında sütunlar uzun adlarla iki katına
   çıkıp alan dağılıyordu. */
.site-footer a { color: rgba(255,255,255,.72); display: inline-block; padding: 4px 0; font-size: .88rem; }
.site-footer a:hover { color: #fff; }
.footer-about { max-width: 300px; margin-top: 16px; font-size: .88rem; }
/* Sosyal profiller: marka varlığının dış dünyaya bağı (schema sameAs ile eşleşir).
   Yuvarlak çerçeveli ikon; ikon rengi currentColor olduğu için hover'da beraber açılır. */
.footer-social { display: flex; gap: 10px; margin-top: 18px; }
.site-footer .footer-social a {
  width: 36px; height: 36px; padding: 0; display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.2); border-radius: 50%;
  transition: border-color .18s ease, background-color .18s ease, color .18s ease;
}
.site-footer .footer-social a:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.45); color: #fff; }
.footer-social svg { width: 17px; height: 17px; fill: currentColor; display: block; }
.footer-bottom {
  margin-top: 46px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.12);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: .88rem;
}
.footer-bottom a { display: inline; }
/* Alt şeritteki yasal satır: düz metin değil, gerçekten tıklanan linkler.
   Ayraç "·" CSS'ten gelir; çeviriye ayraç gömmek yerine her link ayrı anahtar. */

/* Devre dışı buton devre dışı GÖRÜNSÜN: paket seçilmeden "Siparişi Oluştur"
   normal duruyordu, tıklanabilir sanılıyordu. */
.btn[disabled], .btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }

/* Kart ödemesi kapalıyken özet altındaki bilgilendirme */
.pay-later {
  margin-top: 14px; font-size: .84rem; line-height: 1.5;
  color: var(--text-soft); text-align: center;
}
/* =========================================================
   TAKSİT TABLOSU (ödeme özeti)
   Katlanır duruyor: tek çekimle ödeyecek müşteriyi rakam duvarıyla
   karşılamak istemiyoruz, ama taksiti merak eden tek tıkla görüyor.
   ========================================================= */
.pay-inst { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; }
.pay-inst__toggle {
  display: flex; align-items: center; gap: 6px; width: 100%;
  background: none; border: 0; padding: 4px 0; cursor: pointer;
  font: inherit; font-size: .87rem; font-weight: 700; color: var(--coral-d);
}
.pay-inst__toggle svg { width: 16px; height: 16px; transition: transform .2s; }
.pay-inst__toggle.is-open svg { transform: rotate(180deg); }
.pay-inst__body { margin-top: 8px; }
.pay-inst__row {
  display: grid; grid-template-columns: 3.5em 1fr auto; gap: 10px;
  align-items: baseline; padding: 6px 0; font-size: .86rem;
  border-bottom: 1px solid var(--line);
}
.pay-inst__row:last-of-type { border-bottom: 0; }
.pay-inst__row--head {
  font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--text-soft); border-bottom-color: var(--line-2);
}
.pay-inst__n { font-weight: 700; }
.pay-inst__x { color: var(--text-soft); }
.pay-inst__t { font-weight: 700; text-align: right; white-space: nowrap; }
.pay-inst__note { margin-top: 10px; font-size: .76rem; line-height: 1.55; color: var(--text-soft); }

/* Abonelik bilgilendirmesi: onay kutusunun hemen altında, kaçırılmayacak
   ama korkutmayan bir ton. Otomatik tahsilatın ödemeden önce okunması şart. */
.pay-recurring {
  /* Abonelik açıklaması BİLGİDİR, uyarı değil. Mercan zemin bu kutuyu
     ödeme düğmesinin hemen altında "dikkat" gibi gösteriyordu; mercan
     artık yalnız hata ve birincil eylem için ayrıldı. */
  margin-top: 12px; padding: 11px 13px; border-radius: 12px;
  font-size: .82rem; line-height: 1.55; color: var(--text-body);
  background: var(--info-bg); border: 1px solid var(--info-line);
}
/* Talimat satırı bilgi metninden ayrışır: müşterinin ATMASI GEREKEN adım bu.
   Kutu işaretlenmezse abonelik açılıyor ama yenileme çekilemiyor. */
.pay-recurring__do { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--info-line); color: var(--ink); }
.pay-recurring__do strong { font-weight: 700; }

/* ---------------------------------------------------------------------------
   GİRİŞLİ ÖDEME FORMU — kilitli alanlar ve düzenleme penceresi
   Alanlar hesaptan geliyor; kilitli görünmeleri gerekiyor ki müşteri
   yazmaya çalışıp "neden olmuyor" demesin.
   --------------------------------------------------------------------------- */
.field input[readonly], .field textarea[readonly] {
  background: rgba(0,0,0,.04); color: var(--text-soft); cursor: not-allowed;
}
.inv-type.is-locked { opacity: .55; cursor: not-allowed; }
.inv-type.is-locked .inv-type__box { pointer-events: none; }
.acc-hint__edit {
  margin-left: auto; flex: none; border: 0; background: none; padding: 0;
  font: inherit; font-size: .82rem; font-weight: 600; color: var(--coral-d);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.acc-hint__lock {
  margin: 8px 0 16px; font-size: .78rem; line-height: 1.5; color: var(--text-soft);
}
/* Eksik bilgi hâli: nötr değil, uyarı. Sipariş bu hâlde tamamlanamıyor. */
.acc-hint__lock--eksik {
  color: var(--text-body); background: var(--info-bg);
  border: 1px solid var(--info-line); border-radius: 12px; padding: 10px 13px;
}

.acc-modal {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
  padding: 20px; background: rgba(20,20,25,.45); backdrop-filter: blur(2px);
}
.acc-modal__box {
  width: min(560px, 100%); max-height: 88vh; display: flex; flex-direction: column;
  background: var(--bg, #fff); border-radius: 18px; overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,.28);
}
.acc-modal__head {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 22px 0;
}
.acc-modal__head h3 { margin: 0; flex: 1; }
.acc-modal__x {
  border: 0; background: none; font-size: 26px; line-height: 1;
  color: var(--text-soft); cursor: pointer; padding: 0 4px;
}
.acc-modal__note { margin: 8px 22px 0; font-size: .82rem; line-height: 1.55; color: var(--text-soft); }
/* Gövde KAYAR: küçük ekranda yurt dışı + kurumsal alanlar açılınca
   pencere ekranı taşıyordu, kaydet düğmesine ulaşılamıyordu. */
.acc-modal__body { padding: 16px 22px; overflow-y: auto; }
.acc-modal__mail { margin: 4px 0 0; font-size: .78rem; line-height: 1.5; color: var(--text-soft); }
.acc-modal__foot {
  display: flex; gap: 10px; justify-content: flex-end;
  padding: 14px 22px 20px; border-top: 1px solid rgba(0,0,0,.07);
}
.acc-modal__foot .btn { flex: 1; }
@media (min-width: 560px) { .acc-modal__foot .btn { flex: none; min-width: 140px; } }

/* ---------------------------------------------------------------------------
   Sonuç ekranı ikonu — emoji yerine SVG. İki hâl: ödeme alındı (yeşil onay)
   ve ödeme alınmadı (nötr bekleme). Renk farkı bilerek: biri bitmiş bir işi,
   diğeri bekleyen bir işi anlatıyor.
   --------------------------------------------------------------------------- */
.thanks-icon {
  width: 68px; height: 68px; margin: 0 auto 4px; border-radius: 50%;
  display: grid; place-items: center;
}
.thanks-icon svg { width: 32px; height: 32px; }
.thanks-icon--ok { background: var(--ok-bg); color: var(--ok); }
.thanks-icon--bekliyor { background: var(--info-bg-2); color: var(--info-d); }

/* ---------------------------------------------------------------------------
   Havale bilgileri kutusu (sonuç ekranı). Sola hizalı: IBAN ve tutar
   ortalanmış metin içinde okunmuyor, kopyalanırken de göz kayıyor.
   --------------------------------------------------------------------------- */
.havale {
  max-width: 460px; margin: 4px auto 24px; padding: 16px 18px;
  text-align: left; border-radius: 14px;
  background: var(--info-bg); border: 1px solid var(--info-line);
}
.havale__t { margin: 0 0 12px; font-size: .95rem; color: var(--info-d); }
.havale__row {
  display: flex; gap: 12px; justify-content: space-between; align-items: baseline;
  padding: 7px 0; border-bottom: 1px solid var(--info-line);
}
.havale__row:last-of-type { border-bottom: 0; }
.havale__k { font-size: .8rem; color: var(--text-soft); flex: 0 0 auto; }
.havale__v {
  font-size: .88rem; font-weight: 600; color: var(--text); text-align: right;
  overflow-wrap: anywhere;
}
.havale__cp {
  margin-left: 6px; border: 0; background: none; padding: 0; cursor: pointer;
  font: inherit; font-size: .76rem; font-weight: 600; color: var(--info);
  text-decoration: underline; text-underline-offset: 3px;
}
.havale__not {
  margin: 12px 0 0; font-size: .82rem; line-height: 1.55; color: var(--text-body);
}

/* Sonuç ekranında "kartından para çekilmedi" cümlesi. Bilerek kuvvetli:
   müşterinin bu ekrandan çıkarken tek bir soru işareti kalmamalı. */
.pay-nocharge {
  max-width: 460px; margin: 0 auto 16px; padding: 12px 16px; border-radius: 12px;
  font-size: .9rem; font-weight: 600; line-height: 1.5;
  color: var(--text-body); background: var(--info-bg-2);
  border: 1px solid var(--info-line);
}

/* Sepet kartla tek seferde tahsil edilemiyorsa çıkan uyarı. Kırmızı DEĞİL:
   bir hata değil, akışın farklı ilerleyeceğinin haberi. */
.pay-limit {
  margin-top: 12px; padding: 11px 13px; border-radius: 12px;
  font-size: .82rem; line-height: 1.55; color: var(--text-body);
  background: var(--info-bg); border: 1px solid var(--info-line);
}

/* Form altındaki yasal cümle içindeki link görünür olsun */
.form-legal:not(:last-child) { margin-bottom: 16px; }
.form-legal a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.form-legal a:hover { color: var(--hero-base, var(--coral)); }

/* ---------- Checkout ---------- */
.checkout-grid { display: grid; grid-template-columns: 1.4fr .9fr; gap: 36px; align-items: start; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px; box-shadow: var(--shadow-sm); }
.panel h3 { margin-bottom: 18px; }
.summary-row { display: flex; justify-content: space-between; gap: 14px; padding: 8px 0; color: var(--text-soft); }
/* Uzun paket adı fiyatın üstüne binmesin: ad sarar, tutar tek satırda kalır. */
.summary-row > span:last-child { white-space: nowrap; }
.summary-row.total { border-top: 1px solid var(--line); margin-top: 10px; padding-top: 16px; color: var(--ink); font-weight: 700; font-size: 1.25rem; }
/* Ek hizmetlerin ara toplamı: üstündeki kalem satırları soluk ve girintili,
   bu satır onları toparlar — o yüzden tam renkte ve kalın. */
.summary-row--addons { color: var(--ink); font-weight: 600; border-top: 1px dashed var(--line); padding-top: 10px; }

.field { margin-bottom: 16px; }
.field label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: 6px; }
.field input, .field textarea, .field select {
  width: 100%; padding: 13px 15px; border: 1px solid var(--line-2); border-radius: var(--r-sm);
  font-family: inherit; font-size: 1rem; background: #fff; color: var(--ink); transition: border .2s, box-shadow .2s;
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--indigo); box-shadow: 0 0 0 3px rgba(79,96,172,.14);
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
/* Kilitli alan (girişli müşteride hesaptan gelen bilgi) ve henüz
   seçilemeyen ilçe kutusu aynı dili konuşsun: soluk ama okunur. */
.field select:disabled, .field input:disabled {
  background: var(--gray); color: var(--text-soft); cursor: not-allowed;
}
.pay-note { display: flex; gap: 10px; align-items: flex-start; background: rgba(110,200,191,.12); border: 1px solid rgba(110,200,191,.4); border-radius: var(--r-sm); padding: 14px; font-size: .88rem; color: var(--teal-d); margin-top: 6px; }
.pay-note svg { flex: 0 0 auto; width: 20px; height: 20px; }

/* ---------- Page hero (inner) ---------- */
.page-hero { padding-block: clamp(44px, 6vw, 80px) clamp(30px, 4vw, 48px); text-align: center; }
.page-hero .eyebrow { margin-bottom: 16px; }
.page-hero p { margin: 16px auto 0; }

/* ---------- Contact ---------- */
/* Sağ sütunda artık yalnızca hızlı başlangıç kutusu var (iletişim bilgisi listesi
   kaldırıldı), o yüzden form ağırlıklı bir bölünme ve yapışkan yan kutu. */
.contact-grid { display: grid; grid-template-columns: 1.35fr .85fr; gap: 36px; align-items: start; }
.contact-aside { position: sticky; top: 132px; }

/* ---------- Toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 20px);
  background: var(--ink); color: #fff; padding: 14px 22px; border-radius: 999px;
  box-shadow: var(--shadow-lg); font-weight: 600; font-size: .95rem; z-index: 200;
  opacity: 0; pointer-events: none; transition: .3s;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Reveal on scroll ---------- */
/* Scroll animasyonları — kenarlardan/aşağıdan gelen (Start Kit tarzı) */
.reveal {
  opacity: 0; transform: translateY(38px);
  transition: opacity .7s ease, transform .85s cubic-bezier(.16,.72,.3,1);
  transition-delay: var(--rd, 0s); will-change: opacity, transform;
}
.reveal--left  { transform: translateX(-72px); }
.reveal--right { transform: translateX(72px); }
.reveal--up    { transform: translateY(52px); }
.reveal--scale { transform: scale(.9); }
.reveal.in { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-art { order: -1; max-width: 480px; }
  .split, .contact-grid, .checkout-grid { grid-template-columns: 1fr; }
  .split--reverse .split-media { order: 0; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 780px) {
  .nav-links, .nav-actions .btn { display: none; }
  .nav-toggle { display: block; }
  /* top SABİT 84px'ti; başlık 112px olduğu için panel başlığın İÇİNE taşıyor,
     altındaki buzlu cam şeridi kapatıyordu. Artık başlığın gerçek yüksekliği. */
  .nav.open .nav-links {
    display: flex; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column;
    background: rgba(255,255,255,.82);
    -webkit-backdrop-filter: saturate(180%) blur(22px);
            backdrop-filter: saturate(180%) blur(22px);
    border-bottom: 1px solid var(--line); padding: 14px var(--gutter); gap: 4px; box-shadow: var(--shadow-md);
  }
  .nav.open .nav-links a { padding: 12px 14px; }
  .grid-3, .grid-2, .price-grid, .steps, .stats { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: 1fr 1fr; }
  .field-row { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .grid-4 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* =========================================================
   HOME — Start Kit birebir uyarlama bileşenleri
   ========================================================= */

/* Nav: referans hizası (Get in touch koyu pill zaten .btn--dark) */
/* Zemin ::before katmanında; gövde saydam kalmalı yoksa maske işe yaramaz. */
.nav-links a { font-size: .95rem; color: #0d0d0d; }

/* ---------- HERO (renkli blob + eğri) ---------- */
.hero-v2 { padding: clamp(26px, 3.4vw, 48px) var(--gutter) 0; }
.hero-stage {
  position: relative; max-width: 1360px; margin-inline: auto;
  border-radius: 40px; overflow: hidden; background: var(--hero-base);
  padding: clamp(60px, 8vw, 100px) clamp(20px, 5vw, 60px) 0;
  isolation: isolate;
}
.hero-stage .blobs {
  position: absolute; inset: 0; z-index: 0;
  /* DAİRELER ARKA PLAN OLARAK ÇİZİLİYOR (15.09.2026).
     Eskiden her daire kartın dışına TAŞAN ayrı bir öğeydi ve kesilmesi kartın
     overflow:hidden + border-radius'una kalıyordu. iPhone'daki siyah kare
     sorununda (asıl sebep tablet gölge filtresiydi, bkz. .hero-scene__tablet)
     o kesmeyi zorlamak sayfayı genişletip ekranda küçültmüştü. Arka plan
     hiçbir motorda taşma üretmez ve kartın köşesine göre kesilir; geometri
     öncekiyle aynı:
       merkez = sol/üst yüzde + yarıçap, yarıçap = genişliğin yarısı (cqw).
     Katman sırası: listede İLK yazılan en üstte (eski DOM sırasının tersi).
     Kap sorgusu KABIN KENDİSİNDE, çizim ::before'da: cqw en yakın ATA kaba
     bakar ve içerik kutusunu ölçer. Kartın kendisi kap olsaydı yan dolgusu
     düşülürdü ve yüzdelerle (dolgu dahil) yarıçaplar uyuşmazdı. Bu kap
     inset:0 ile kartı dolgusuz dolduruyor. */
  container-type: inline-size;
  --d-i-x: -30%; --d-i-y: -42%; --d-i-r: 31cqw;       /* lacivert, sol üst */
  --d-s-x: -13%; --d-s-b: 6%;   --d-s-r: 11.5cqw;     /* sarı, sol alt */
  --d-t-r: -12%; --d-t-b: 22%;  --d-t-r2: 10.5cqw;    /* şeffaf, sağ */
  --d-i-renk: rgba(79, 96, 172, .92);
}
.hero-stage .blobs::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(circle at calc(100% - var(--d-t-r) - var(--d-t-r2)) calc(100% - var(--d-t-b) - var(--d-t-r2)),
      color-mix(in srgb, var(--hero-ink, #fff) 16%, transparent) var(--d-t-r2), transparent calc(var(--d-t-r2) + 1px)),
    radial-gradient(circle at calc(var(--d-s-x) + var(--d-s-r)) calc(100% - var(--d-s-b) - var(--d-s-r)),
      var(--marka-sari) var(--d-s-r), transparent calc(var(--d-s-r) + 1px)),
    radial-gradient(circle at calc(var(--d-i-x) + var(--d-i-r)) calc(var(--d-i-y) + var(--d-i-r)),
      var(--d-i-renk) var(--d-i-r), transparent calc(var(--d-i-r) + 1px));
  background-repeat: no-repeat;
}
/* Eski öğeler DOM'da duruyor ama çizilmiyor: taşma üretmesinler. */
.hero-stage .hero-blob { display: none; }
/* ---------- Hero'nun dekoratif daireleri ----------
   Üç tane, hepsi TAM DAİRE ve hepsinin YARISINDAN FAZLASI kartın dışında:
   kenardan içeri giren bir yay olarak okunuyorlar, "sayfaya kondurulmuş
   balon" gibi değil. Ölçüler kart genişliğine oranlı; her ekranda aynı
   kompozisyon çıkıyor. Küçük halka ve nokta kaldırıldı — yüzey kalabalıktı.
   ------------------------------------------------------------------ */
:root { --marka-sari: #d3d840; }
.hero-blob {
  position: absolute; display: block;
  border-radius: 50%; aspect-ratio: 1;   /* kural: her zaman tam daire */
}
/* Sol ÜST köşedeki büyük kütle. Eskiden organik bir "dalga" yoluydu; artık
   dev bir daire ve merkezi kartın dışında kaldığı için köşeden içeri giren
   bir yay olarak okunuyor (yaklaşık üçte ikisi dışarıda). */
.hero-blob--indigo {
  left: -30%; top: -42%; width: 62%;
  background: #4f60ac; opacity: .92;
}
/* Indigo temada zemin de indigo olduğu için büyük daire kayboluyordu:
   yalnız o temada bir ton koyusu kullanılıyor. */
html[data-theme="indigo"] .hero-stage .blobs { --d-i-renk: #3d4d92; }
/* Sol alt: marka sarısı, yarıdan fazlası kenarda */
.hero-blob--yellow { left: -13%; bottom: 6%; width: 23%; background: var(--marka-sari); }
/* Sağ: mürekkebin şeffaf hâli — sabit teal coral zeminde çamurlu bir haki
   tona düşüyordu; bu haliyle beş temada da temiz. */
.hero-blob--teal {
  right: -12%; bottom: 22%; width: 21%;
  background: color-mix(in srgb, var(--hero-ink, #fff) 16%, transparent);
}
@media (max-width: 780px) {
  /* Dar ekranda daireler metnin arkasına giriyordu: büyüyüp daha çok dışarı
     çıkıyorlar, yalnız kenar yayları görünüyor. */
  .hero-stage .blobs {
    --d-i-x: -42%; --d-i-y: -30%; --d-i-r: 40cqw;
    --d-s-x: -20%; --d-s-b: 4%;   --d-s-r: 18cqw;
    --d-t-r: -20%; --d-t-b: 26%;  --d-t-r2: 17cqw;
  }
}
.hero-inner { position: relative; z-index: 2; text-align: center; max-width: 920px; margin-inline: auto; }
/* Hero başlığı artık hizmet adlarını taşıyor ("Sabit fiyatlı sosyal medya /
   ve kurumsal kimlik"): genel h1 ölçeği (max 5.1rem) bu uzunlukta satırı
   ortadan bölüyordu. Hero'ya özel biraz küçük ölçek + geniş kutu ile
   <br>'deki kırılım korunuyor, alt satır sarkmıyor. */
.hero-inner h1 { color: var(--hero-ink); font-size: clamp(2.1rem, 4.6vw, 3.7rem); }
/* Başlıktaki <br> masaüstünde dengeli iki satır veriyor; dar ekranda ise
   satırı erken kesip tek kelime sarkmasına yol açıyor — mobilde doğal
   sarmaya bırak. */
@media (max-width: 700px) { .hero-inner h1 br { display: none; } }
/* Satır sonları anlamı bölmesin:
   • balance → başlıkta satırlar eşit uzunlukta bölünür, tek kelimelik "dul"
     satır kalmaz.
   • pretty  → alt metinde son satıra tek kelime düşmesi engellenir.
   Metnin içindeki bölünmez boşluklar (\u00a0) da "profesyonel ajans" ve
   "işe koyulalım" gibi birlikte okunması gereken öbekleri bir arada tutuyor.
   Destelemeyen tarayıcıda ikisi de sessizce yok sayılır, düzen bozulmaz. */
.hero-inner h1 { text-wrap: balance; }
.hero-inner .hero-sub {
  color: var(--hero-sub-c); font-size: clamp(1.05rem, 1.5vw, 1.22rem);
  max-width: 620px; margin: 22px auto 0; text-wrap: pretty;
}
.hero-btns { display: flex; gap: 14px; justify-content: center; margin-top: 30px; flex-wrap: wrap; }
.hero-mockups { position: relative; z-index: 2; margin-top: clamp(30px, 5vw, 56px); }
.hero-mockups img { width: 100%; display: block; }

/* ---------- Hero sahnesi: ok · tablet · asistan sohbeti ----------
   Ölçüler referans kompozisyondan alındı (kart genişliğine oran olarak):
     ok      → sol kenardan %8, genişlik %29
     tablet  → sol kenardan %37,7, genişlik %29,5; yüksekliğinin dörtte biri
               kartın alt kenarından taşıp kırpılıyor
     sohbet  → sol kenardan %66,6, genişlik %22,5, sağda %11 boşluk
   Sahne yüksekliği = tabletin GÖRÜNEN kısmı; bu yüzden oran sabit tutuluyor
   ve üç öğe de yüzdeyle konumlanıyor — ekran büyüyüp küçülürken kompozisyon
   bozulmuyor. */
.hero-scene {
  position: relative; z-index: 2;
  /* Tablet %45'e çıkınca sahne de yükseldi: aksi hâlde tabletin üst kenarı
     butonların üzerine taşıyordu (ölçtük: 132px). */
  aspect-ratio: 100 / 38;
  margin-top: clamp(20px, 3vw, 38px);
}
.hero-scene__ok {
  /* Kartın SOL KENARINA yaslanır: sahne, hero kutusunun iç boşluğunun
     içinde başlıyor; o boşluğu negatif konumla geri alıyoruz. */
  position: absolute; left: calc(-1 * clamp(20px, 5vw, 60px)); bottom: 10%;
  width: 32%; height: auto; display: block;
}
/* Gölge PNG'ye gömülü değil: alfa şeklini takip eden CSS gölgesi hem temiz
   hem de tema zemini değişince doğru duruyor. */
.hero-scene__tablet {
  /* Tablet balonların ÖNÜNDE: balonlar arkasından çıkıp yerine kayıyor.
     Görsel tam olarak cihazın kendisi kadar kırpıldı (PNG'de sağ-alta doğru
     asimetrik bir gölge vardı; kutu cihazdan geniş olduğu için tablet sola
     kaçık duruyordu ve CSS gölgesiyle çift gölge oluyordu). Artık kutu = cihaz:
     konum değerleri doğrudan tabletin kendisini hizalıyor. */
  position: absolute; left: 30%; bottom: -52%; z-index: 2;
  width: 41%; height: auto; display: block;
  filter: drop-shadow(0 26px 46px rgba(8, 12, 28, .34));
}
.hero-chat {
  position: absolute; left: 73%; bottom: 18%; z-index: 1;
  /* Referanstaki dizilim: balonlar arası boşluk kutu genişliğinin ~%4'ü.
     Genişlik 23'ten 27'ye çıkarıldı — dar kutuda cümleler beş satıra
     bölünüyordu, referansta iki-üç satır. Sol kenar tabletin arkasına
     Kolon artık tabletin SAĞINDA başlıyor (tablet %27-%72 arasını kaplıyor):
     balonlar hiçbir yerde tabletin arkasına girmiyor, hepsi tam okunuyor.
     Daralan kutuya karşılık yazı ölçüsü bir tık küçültüldü. */
  width: 23%;
}

/* Üç sohbet üst üste değil, SIRAYLA: biri biterken diğeri devralıyor.
   Renk paleti sette tanımlanıp balonlara değişkenle iniyor — yeni bir sohbet
   eklemek için tek satır renk seti yazmak yeterli. */
.hero-chat__set { display: grid; gap: 4%; }
.hero-chat__set[hidden] { display: none; }
.hero-chat__set[data-renk="sari"] {
  --sohbet-bg: var(--marka-sari); --sohbet-ink: #14161c;
  --sohbet-glif: var(--marka-sari); --sohbet-plus: var(--indigo, #4f60ac);
}
.hero-chat__set[data-renk="teal"] {
  --sohbet-bg: #6ec8bf; --sohbet-ink: #14161c;
  --sohbet-glif: var(--indigo, #4f60ac); --sohbet-plus: #35a99d;
}
.hero-chat__set[data-renk="coral"] {
  --sohbet-bg: #f37255; --sohbet-ink: #fff;
  --sohbet-glif: #f37255; --sohbet-plus: #f37255;
}

.hero-bubble {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: clamp(8px, .85vw, 12px);
  background: #fff; color: #14161c;
  border-radius: clamp(12px, 1.4vw, 20px);
  padding: clamp(8px, .95vw, 13px) clamp(10px, 1.2vw, 17px);
  box-shadow: 0 12px 30px rgba(10, 14, 30, .16);
  /* Animasyon açıkken JS kontrol eder; kapalıyken (JS yok / hareket azaltma)
     balonlar doğrudan görünür kalır. */
  transition: opacity .4s ease, transform .55s cubic-bezier(.22,.85,.3,1);
}
/* Referanstaki kaydırmalı dizilim: soru balonu sağa, cevap balonları sola
   dayalı. Kolonların hepsi aynı hizada durunca sohbet değil liste gibi
   okunuyordu. */
.hero-bubble[data-who="user"] { margin-left: 13%; }
.hero-bubble[data-who="bot"]  { margin-right: 7%; }

/* Balonlar sırayla SAĞDAN kayarak giriyor. Önce dönüşümlüydü (çiftler
   soldan): sola giden balon girişte tabletin arkasına düşüyordu. Kolon
   tabletin sağına alındığına göre giriş de tek yönlü. */
.hero-bubble { --gir: 44px; }
.hero-chat.is-anim .hero-bubble { opacity: 0; transform: translateX(var(--gir, 54px)); }
.hero-chat.is-anim .hero-bubble.is-in { opacity: 1; transform: none; }

/* ASİSTANIN cevapları dolu marka sarısı, ziyaretçinin sorusu beyaz.
   (Önceden yalnız son balon sarıydı; referansta bütün cevaplar sarı.) */
.hero-bubble[data-who="bot"] {
  background: var(--sohbet-bg, var(--marka-sari)); color: var(--sohbet-ink, #14161c);
  box-shadow: 0 10px 26px rgba(10, 14, 30, .14);
}
/* Sarı temada zemine karışmasın diye ince beyaz halka. */
html[data-theme="yellow"] .hero-chat__set[data-renk="sari"] .hero-bubble[data-who="bot"] {
  box-shadow: 0 0 0 3px rgba(255,255,255,.95), 0 10px 26px rgba(10,14,30,.14);
}

/* Soru balonunda avatar sarının yumuşak tonu, ikon koyu; cevaplarda beyaz
   daire içinde marka amblemi. */
.hero-bubble__ava {
  width: clamp(26px, 2.6vw, 36px); aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center; flex: 0 0 auto;
  background: color-mix(in srgb, var(--sohbet-bg, var(--marka-sari)) 45%, #fff);
  color: color-mix(in srgb, var(--sohbet-glif, var(--marka-sari)) 78%, #14161c);
}
.hero-bubble__ava svg { width: 52%; height: 52%; }
.hero-bubble[data-who="bot"] .hero-bubble__ava { background: #fff; color: var(--sohbet-glif, var(--marka-sari)); }
.hero-bubble__txt { font-size: clamp(.66rem, .78vw, .84rem); line-height: 1.45; }
/* Referanstaki "+" iri ve kalın: soru balonunda indigo, cevaplarda beyaz. */
.hero-bubble__plus {
  font-weight: 700; line-height: 1; opacity: 1;
  font-size: clamp(.95rem, 1.35vw, 1.35rem); color: var(--sohbet-plus, var(--indigo, #4f60ac));
}
.hero-bubble[data-who="bot"] .hero-bubble__plus { color: #fff; }

/* Yazarken yanıp sönen imleç */
.hero-bubble.is-typing .hero-bubble__txt::after {
  content: ""; display: inline-block; width: 2px; height: 1em;
  background: currentColor; margin-left: 2px; vertical-align: -2px;
  animation: hero-caret 1s steps(1) infinite;
}
@keyframes hero-caret { 0%, 50% { opacity: 1 } 50.01%, 100% { opacity: 0 } }
/* Asistan cevabı gelmeden önceki üç nokta */
.hero-dots { display: inline-flex; gap: 5px; align-items: center; height: 1.42em; }
.hero-dots i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--text-soft); opacity: .45;
  animation: hero-dot 1.1s ease-in-out infinite;
}
.hero-dots i:nth-child(2) { animation-delay: .15s }
.hero-dots i:nth-child(3) { animation-delay: .3s }
@keyframes hero-dot { 0%, 60%, 100% { transform: translateY(0); opacity: .45 } 30% { transform: translateY(-4px); opacity: .9 } }

@media (max-width: 1080px) {
  /* Ok gizlenince kalan iki öğe ortaya toplanır; oranlar korunur. */
  .hero-scene { aspect-ratio: 100 / 44; }
  .hero-scene__ok { display: none; }
  .hero-scene__tablet { left: 6%; width: 52%; bottom: -70%; }
  .hero-chat { left: 60%; width: 35%; bottom: 14%; }
}
@media (max-width: 760px) {
  /* Dar ekranda üst üste binme yerine alt alta akış. */
  .hero-scene { aspect-ratio: auto; height: auto; display: flex; flex-direction: column; align-items: center; gap: 22px; }
  .hero-scene__ok, .hero-scene__tablet, .hero-chat { position: static; transform: none; }
  /* GÖLGE FİLTRESİZ. drop-shadow filtresi iPhone'da (Safari ve iOS Chrome)
     sayfanın SOL ÜST köşesine SİYAH bir kare bırakıyordu: filtreli görsel,
     overflow:hidden + border-radius'lu kartın içinde ayrı katman oluyor ve
     motor o katmanın bir parçasını yanlış yere boyuyor (15.09.2026, Melih'in
     telefonunda: sahne kapatılınca kare kayboldu, filtre kalkınca da). Görsel tam
     cihaz kadar kırpıldığı için köşeyi izleyen box-shadow aynı görünüyor. */
  .hero-scene__tablet {
    width: min(66%, 288px); filter: none;
    border-radius: 4.5%; box-shadow: 0 18px 30px rgba(8,12,28,.3);
  }
  .hero-chat { width: 100%; gap: 12px; }
  /* Telefonda balonlar kartın dibine yapışıp birbirine giriyordu:
     • kaydırmalı hizalama (sağa/sola kaçık) burada anlamsız — tam genişlik,
     • masaüstü için küçültülen yazı bu boyutta okunmuyordu — geri büyütülüyor,
     • kartın altına nefes payı bırakılıyor. */
  .hero-bubble[data-who="user"], .hero-bubble[data-who="bot"] { margin: 0; }
  .hero-bubble { padding: 11px 14px; gap: 11px; border-radius: 16px; }
  .hero-bubble__txt { font-size: .85rem; line-height: 1.5; }
  .hero-bubble__ava { width: 32px; }
  .hero-bubble__plus { font-size: 1.15rem; }
  .hero-stage { padding-bottom: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-chat.is-anim .hero-bubble { opacity: 1; transform: none; }
  .hero-dots i { animation: none; }
}

/* ---------- Genel bölüm başlığı (referans: ortalı, iri) ---------- */
.sec-head-center { text-align: center; max-width: 760px; margin: 0 auto clamp(40px, 6vw, 64px); }
.sec-head-center h2 { margin: 0; }
/* Global `p { margin: 0 }` yüzünden başlıkla alt metin sıfır boşlukla
   yapışıyordu (.page-hero kendi boşluğunu veriyor, bu kapsayıcı vermiyordu).
   Boşluk başlık ölçüsüyle birlikte büyüsün diye clamp. */
.sec-head-center .eyebrow { margin-bottom: clamp(14px, 1.4vw, 20px); }
.sec-head-center > h2 + p,
.sec-head-center > h2 + .lead { margin-top: clamp(16px, 1.8vw, 24px); }

/* ---------- Buton referans stilleri ---------- */
.btn--dark { background: #0d0d0d; }
.btn--outline { background: #fff; color: #0d0d0d; border-color: var(--line-2); }
.btn--outline:hover { border-color: #0d0d0d; background: #fff; color: #0d0d0d; transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.btn--outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }
.btn--outline-light:hover { background: #fff; color: #0d0d0d; }

/* ---------- FEATURES (highlight + 4 özellik) ---------- */
.features-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: center; }
.feature-highlight {
  background: var(--gray); border-radius: 32px; padding: 40px; position: relative; overflow: hidden;
}
.feature-highlight .fh-media { border-radius: 20px; overflow: hidden; margin-bottom: 26px; box-shadow: var(--shadow-md); background:#fff; }
/* Fotoğraf 3:2, eski illüstrasyon ise 640×460'tı. Sabit oran vermezsek sağdaki
   4 özellik sütunuyla hizalama kayıyor; cover ile kırpıp oranı koruyoruz. */
.feature-highlight .fh-media { aspect-ratio: 4 / 3; }
.feature-highlight .fh-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.feature-highlight h3 { font-size: 1.5rem; margin-bottom: 10px; }
.feature-highlight p { color: var(--text-soft); }
.feature-highlight .hero-btns { justify-content: flex-start; margin-top: 24px; }
.feature-list { display: grid; grid-template-columns: 1fr 1fr; gap: 30px 34px; }
.feat { }
.feat .fic {
  width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; color: #fff; margin-bottom: 18px;
}
.feat .fic svg { width: 26px; height: 26px; }
.feat h3 { font-size: 1.15rem; margin-bottom: 8px; }
.feat p { color: var(--text-soft); font-size: .98rem; }

/* ---------- PROSPECTS (gri konteyner, dashboard + arrow) ---------- */
.prospects { background: var(--gray); border-radius: 40px; padding: clamp(30px, 4vw, 56px); }
.prospects-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(30px, 5vw, 64px); align-items: center; }
.prospects-media { position: relative; border-radius: 24px; overflow: visible; }
.prospects-media img { width: 100%; border-radius: 24px; display: block; box-shadow: var(--shadow-md); background:#fff; }
.arrow-btn {
  position: absolute; right: -18px; bottom: -18px; width: 84px; height: 84px; border-radius: 50%;
  background: #0d0d0d; color: #fff; display: grid; place-items: center;
}
.arrow-btn svg { width: 30px; height: 30px; }
.prospects h2 { margin-bottom: 24px; }
.prospects .feat + .feat { margin-top: 26px; }

/* ---------- BENTO (Close more deals) ---------- */
.bento { display: grid; grid-template-columns: 1fr 1fr 1fr 1.3fr; grid-template-rows: auto auto; gap: 22px; }
/* Metin kartı temanın açık tonunu alıyor; sayısal kutular gri kalıyor ki
   blokta bir hiyerarşi olsun (önce vaat, sonra rakamlar). */
.bento-text { grid-column: 1 / 4; background: var(--primary-soft, var(--gray)); border-radius: 28px; padding: 40px; }
.bento-text h3 { font-size: 1.6rem; margin-bottom: 12px; }
.bento-text p { color: var(--text-soft); }
.bento-stat {
  background: var(--gray); border-radius: 28px; padding: 36px 32px;
  display: flex; flex-direction: column; justify-content: center; min-height: 220px;
  transition: transform .3s ease, box-shadow .3s ease, background .3s ease;
}
/* Rakam kutuları imleç üstüne gelince öne çıkıyor: blok tamamen durağan
   olduğu için sayfa burada "ölü" hissettiriyordu. */
.bento-stat:hover { transform: translateY(-4px); background: #fff; box-shadow: var(--shadow-md); }
/* Sayaç dönerken kutu genişliği zıplamasın diye rakam tabular hizalı. */
.bento-stat .big [data-sayac] { font-variant-numeric: tabular-nums; }
/* Metin kartındaki iç link: bölümün sonunda okuyucuyu paketlere taşır. */
.bento-link {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 20px;
  font-weight: 700; color: var(--indigo, #4f60ac); text-decoration: none;
}
.bento-link svg { width: 18px; height: 18px; transition: transform .25s ease; }
.bento-link:hover svg { transform: translateX(4px); }
.bento-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.bento-stat .big { font-size: clamp(2.6rem, 4vw, 3.4rem); font-weight: 800; letter-spacing: -.03em; color: #0d0d0d; line-height: 1; }
.bento-stat .big em { font-style: normal; color: var(--coral); }
.bento-stat .big i { font-style: normal; color: var(--indigo); }
.bento-stat .big b { font-weight: inherit; color: var(--teal); }
.bento-stat > span { margin-top: 10px; font-weight: 600; color: #0d0d0d; }
/* Sağdaki uzun kutu: eskiden renkli bir yer tutucu SVG'ydi, sabit teal olduğu
   için diğer temalarda sayfayla kavga ediyordu. Artık tema renginde bir grafik.
   Mürekkep --hero-ink'ten geliyor: teal/sarıda koyu, coral/indigoda beyaz. */
.bento-viz {
  grid-column: 4; grid-row: 1 / 3;
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: 28px; padding: 34px;
  background: var(--hero-base, var(--teal));
  box-shadow: var(--shadow-md);
  display: flex; flex-direction: column; min-height: 320px;
}
/* Dekoratif daireler — hero'daki blob diliyle aynı */
.bento-viz::before, .bento-viz::after {
  content: ""; position: absolute; z-index: -1; border-radius: 50%;
  background: var(--hero-ink, #fff); opacity: .12;
}
.bento-viz::before { width: 190px; height: 190px; top: -60px; right: -50px; }
.bento-viz::after { width: 110px; height: 110px; bottom: 26%; left: -46px; opacity: .09; }
.bento-viz__mark {
  width: 46px; height: 46px; flex: 0 0 auto; opacity: .9;
  background: var(--hero-ink, #fff);
  -webkit-mask: url("../img/amblem.svg") center / contain no-repeat;
          mask: url("../img/amblem.svg") center / contain no-repeat;
}
.bento-viz__bars { margin-top: auto; display: flex; align-items: flex-end; gap: 12px; height: 62%; }
.bento-viz__bars i {
  flex: 1 1 0; height: var(--h, 50%);
  border-radius: 12px 12px 5px 5px;
  background: var(--hero-ink, #fff); opacity: .3;
  transition: height .9s cubic-bezier(.22, 1, .36, 1), opacity .3s ease;
}
.bento-viz__bars i:last-child { opacity: 1; }
.bento-viz__bars i:nth-last-child(2) { opacity: .55; }
/* Sütunlar kutu ekrana girince tabandan yükselir. "hazir" sınıfını betik
   ekliyor: betik hiç çalışmazsa sütunlar doğrudan son boyunda durur, ezik
   bir grafik kalmaz. */
.bento-viz__bars.hazir i { height: 8%; }
.bento-viz__bars.hazir.is-in i { height: var(--h, 50%); }
.bento-viz__bars.hazir i:nth-child(1) { transition-delay: .05s; }
.bento-viz__bars.hazir i:nth-child(2) { transition-delay: .13s; }
.bento-viz__bars.hazir i:nth-child(3) { transition-delay: .21s; }
.bento-viz__bars.hazir i:nth-child(4) { transition-delay: .29s; }
.bento-viz__bars.hazir i:nth-child(5) { transition-delay: .37s; }
/* İmleç bir sütunun üstündeyken o sütun öne çıkar — grafiğe dokunulabilir
   bir his katıyor, bilgi kaybı yok (kutu zaten dekoratif). */
.bento-viz__bars i:hover { opacity: .85; }
.bento-viz__bars i:last-child:hover { opacity: 1; }

/* ---------- BÜYÜK CTA BAND (mavi, çentikli, blob) ---------- */
.cta-band {
  position: relative; border-radius: 44px; overflow: hidden;
  background: var(--indigo); color: #fff; text-align: center;
  padding: clamp(56px, 8vw, 104px) clamp(24px, 6vw, 80px);
  isolation: isolate;
}
.cta-band .cta-blobs { position: absolute; inset: 0; z-index: 0; }
.cta-band .cta-blobs svg { width: 100%; height: 100%; }
.cta-band > .cta-inner { position: relative; z-index: 2; max-width: 780px; margin-inline: auto; }
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255,255,255,.9); margin: 20px auto 0; max-width: 560px; }
.cta-band .hero-btns { justify-content: center; margin-top: 30px; }

/* Bandın içine alınan 3 adım. Bant metni ortalıyor ama adım listesi sola
   dayalı okunmalı; numara rozeti sayıyı taşıdığı için başlıklarda artık
   "1." öneki yok. */
.cta-band--flow > .cta-inner { max-width: 1000px; }
.cta-steps {
  list-style: none; margin: 40px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; text-align: left;
}
/* Her adımın görsel karesi: yarı saydam cam kutu + içinde adımı anlatan
   çizim. Yükseklik sabit (124px) çünkü adımlar arası akış çizgisi bu
   kutunun tam ortasına konumlanıyor — oransal yükseklikte kaçardı. */
.cta-steps__art {
  position: relative; height: 124px; margin-bottom: 18px;
  border-radius: 18px; background: rgba(255,255,255,.13);
  display: grid; place-items: center;
}
/* Çizim tuvali 200×84 (yatay) — kutu geniş ve alçak olduğu için kare tuval
   ortada küçük kalıyordu. max-height kutudan taşmayı kesin olarak engeller. */
.cta-steps__art svg { width: 88%; height: auto; max-height: 80%; display: block; }
.cta-steps__n {
  position: absolute; top: -11px; left: -11px; z-index: 2;
  display: grid; place-items: center; width: 32px; height: 32px;
  border-radius: 50%; background: #0d0d0d; color: #fff;
  font-weight: 800; font-size: .92rem; line-height: 1;
}
/* Adımlar arası kesikli akış çizgisi — tam olarak grid boşluğunu kaplar. */
@media (min-width: 861px) {
  .cta-steps li:not(:last-child) .cta-steps__art::after {
    content: ""; position: absolute; top: 50%; left: 100%; width: 28px;
    border-top: 2px dashed rgba(255,255,255,.32);
  }
}
.cta-band .cta-steps h3 { color: #fff; font-size: 1.08rem; margin-bottom: 8px; }
.cta-band .cta-steps p {
  margin: 0; max-width: none; font-size: .95rem; line-height: 1.6;
  color: rgba(255,255,255,.86);
}
@media (max-width: 860px) {
  .cta-steps { grid-template-columns: 1fr; gap: 26px; margin-top: 32px; }
  .cta-steps__art { height: 112px; margin-bottom: 14px; }
}

/* STEPS OVERLAY kuralları kaldırıldı: 3 adım artık CTA bandının içinde
   (.cta-steps). Foto + kayan kartlar düzeni ve ph-indigo yer tutucusu
   kullanımdan çıktı. */

/* ---------- TEAMS CAROUSEL ---------- */
.teams-wrap { background: var(--gray); border-radius: 40px; padding: clamp(30px, 4vw, 56px); }
.teams-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 40px; flex-wrap: wrap; }
.teams-top h2 { margin: 0; }
.teams-sub { color: var(--text-soft); margin: 10px 0 0; max-width: 46ch; }
/* Kartlar taşıyıcının KENDİ kaydırmasıyla geziliyor: parmakla kaydırma ve
   trackpad kendiliğinden çalışır, noktalar yalnız aynı kaydırmayı tetikler.
   (Eskiden transform ile taşınıyordu; mobilde kaydırma hiç çalışmıyordu.) */
.teams-viewport {
  display: flex; gap: 26px; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.teams-viewport::-webkit-scrollbar { display: none; }
.team-card {
  flex: 0 0 calc(100% - 100px); max-width: 900px; background: #fff; border-radius: 30px; padding: 30px;
  display: grid; grid-template-columns: 360px 1fr; gap: 34px; align-items: center; position: relative;
  scroll-snap-align: start; color: inherit; text-decoration: none;
  transition: box-shadow .25s ease, transform .25s ease;
}
/* Kartın tamamı link: imleç ve gölge bunu belli etsin, ok düğmesi de yanıt versin. */
a.team-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
a.team-card:hover .arrow-btn { background: var(--primary-d, var(--primary)); color: var(--on-primary, #fff); }
.team-card .arrow-btn { transition: background .25s ease, color .25s ease; }
/* Kart görselleri 5:4 yatay — SVG sahneler de bu oranda üretiliyor
   (tools/gen_sector_art.py), fotoğraf/video gelince de aynı oran istenir. */
.team-card .tc-photo { border-radius: 20px; overflow: hidden; aspect-ratio: 5/4; background: var(--gray); }
.team-card .tc-photo img,
.team-card .tc-photo video { width: 100%; height: 100%; object-fit: cover; display: block; }
.team-card h3 { font-size: 1.5rem; margin-bottom: 12px; }
/* Sağ alt köşedeki ok düğmesine yer ayır: 26px kenar + 64px düğme + boşluk.
   Ok MUTLAK konumlu; metin sütunu kartın sağ kenarına kadar uzandığı için
   son satırlar okun altından geçiyordu. Yükseklik ayarıyla çözmek kırılgan
   olurdu (her kartın metni farklı uzunlukta) — metni okun yatay bandından
   çıkarmak çakışmayı imkânsız kılıyor. */
.team-card p { color: var(--text-soft); padding-right: 74px; }
.team-card .arrow-btn { position: absolute; right: 26px; bottom: 26px; width: 64px; height: 64px; }
.teams-dots { display: flex; gap: 10px; justify-content: center; margin-top: 32px; }
.teams-dots button { width: 10px; height: 10px; border-radius: 50%; border: 0; background: var(--line-2); cursor: pointer; padding: 0; }
.teams-dots button.active { background: #0d0d0d; width: 26px; border-radius: 6px; }

/* ---------- NASIL ÇALIŞIYOR (video anlatımlar) ----------
   Solda tek bir sahne, sağda bölüm listesi. Dört ayrı gömülü oynatıcı yerine
   tek sahne: sayfa hafif kalıyor ve ziyaretçi hangi videoyu izlediğini
   kaybetmiyor. */
.howto { display: grid; grid-template-columns: 1.35fr 1fr; gap: 30px; align-items: start; }
.howto-stage { position: sticky; top: 96px; }

/* Sahne bir düğme: tıklayınca gömülü oynatıcı kurulur. */
.howto-screen {
  display: block; position: relative; width: 100%; padding: 0; border: 0;
  background: var(--gray); border-radius: 26px; overflow: hidden; cursor: pointer;
  aspect-ratio: 16/9; box-shadow: var(--shadow-sm);
}
.howto-screen img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* hidden niteliği yukarıdaki display kurallarını YENEBİLMELİ.
   Yenemediğinde şu oluyordu: video açılınca kapak gizlenmiyor, oynatıcı da
   akışta kapağın altına düşüp overflow:hidden ile kırpılıyordu — ses geliyor,
   görüntü hiç görünmüyordu. */
.howto-screen[hidden], .howto-screen img[hidden] { display: none; }

/* Oynatıcı sahnenin İÇİNE değil, kapağın YERİNE geliyor.
   (Ayrıca <button> içinde iframe geçerli HTML değil; oradayken YouTube'un
   kendi kontrol çubuğunun üstünü de bizim oynat şeridimiz kapatıyordu.) */
.howto-frame {
  display: block; width: 100%; aspect-ratio: 16/9; border: 0;
  border-radius: 26px; background: #000; box-shadow: var(--shadow-sm);
}
/* Video yokken sahne bilgi veriyor, oynat vaadi vermiyor. */
.howto-screen[disabled] { cursor: default; }
.howto-screen[disabled] .howto-screen__cta { display: none; }
.howto-screen:not([disabled]) .howto-soon { display: none; }

.howto-screen__cta {
  position: absolute; inset: auto 0 0 0; display: flex; align-items: center; gap: 14px;
  padding: 22px 24px; color: #fff; text-align: left;
  background: linear-gradient(to top, rgba(10,12,18,.72), rgba(10,12,18,0));
}
.howto-screen__icon {
  flex: 0 0 auto; width: 58px; height: 58px; border-radius: 50%;
  background: #fff; color: #14161c; display: grid; place-items: center;
  transition: transform .25s ease;
}
.howto-screen__icon svg { width: 26px; height: 26px; margin-left: 3px; }
.howto-screen:hover .howto-screen__icon { transform: scale(1.08); }
.howto-screen__label { font-weight: 600; font-size: 1.02rem; }
.howto-soon {
  position: absolute; left: 20px; bottom: 20px;
  background: rgba(255,255,255,.92); color: #14161c;
  font-size: .78rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  padding: 7px 14px; border-radius: 999px;
}

/* Ray sahne kadar yüksek: video ile liste aynı hizada başlayıp bitiyor.
   Kaydırma çubuğu gizli, üstte ve altta soluklaşan kenar kaydırılabildiğini
   söylüyor. Yükseklik JS'te sahneden ölçülüp --howto-h'ye yazılıyor. */
.howto-rail {
  max-height: var(--howto-h, 420px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%);
}
.howto-rail::-webkit-scrollbar { display: none; }
.howto-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.howto-item {
  width: 100%; text-align: left; display: grid; gap: 4px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line); border-radius: 18px;
  padding: 18px 20px; font: inherit; color: inherit;
  transition: border-color .2s ease, background .2s ease;
}
.howto-item:hover { border-color: var(--line-2); }
.howto-item.is-active { border-color: var(--primary); background: var(--primary-soft, var(--gray)); }
.howto-item__cat {
  font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--primary-d, var(--primary));
}
.howto-item__title { font-weight: 700; font-size: 1.02rem; }
/* Açıklama her kartta iki satır: kartlar eşit yükseklikte kalıyor, sonsuz
   döngüde zıplama olmuyor. */
.howto-item__desc {
  color: var(--text-soft); font-size: .9rem; line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* Seçili bölümün açıklaması TAM görünür — uzun anlatım iki satırda kesilmesin.
   Diğerleri iki satırda kalıyor ki liste bir bakışta taranabilsin. */
.howto-item.is-active .howto-item__desc { -webkit-line-clamp: unset; overflow: visible; }

/* Video yokken gösterilen alternatif alt başlık — yalnız telefonda ve yalnız
   .howto--static durumunda açılır (aşağıdaki medya sorgusunda). */
.howto-sub--steps { display: none; }

@media (max-width: 900px) {
  /* Sahne ile liste GRID'in ayrı satırlarındayken sticky iş görmez: her satır
     kendi içeriği kadar yüksek, videonun gidecek yolu yok — liste uzadıkça
     video yukarıda kalıyor, aşağıdaki karta basan kimse ne değiştiğini
     göremiyordu. Blok akışına alınca sahnenin kapsayıcısı .howto'nun tamamı
     oluyor ve video liste boyunca ekranda asılı kalıyor. */
  .howto { display: block; }
  .howto-stage {
    position: sticky; top: 96px; z-index: 5;   /* başlık z-index 60 → altında kalır */
    margin-bottom: 18px;
  }
  /* Kartlar videonun yuvarlatılmış köşelerinden sızmasın: sahnenin arkasına
     sayfa zemini serilir. */
  .howto-stage::before {
    content: ""; position: absolute; z-index: -1;
    inset: -14px calc(var(--gutter) * -1) -18px;   /* -18px = sahnenin alt boşluğu */
    background: var(--bg);
  }
  .howto-screen { box-shadow: var(--shadow-md); }
  /* Dar ekranda liste kendi boyunda aksın: sayfa zaten dikey kaydırılıyor,
     iç içe iki kaydırma alanı parmakla kullanımda kilitleniyor. */
  .howto-rail { max-height: none; overflow: visible; -webkit-mask-image: none; mask-image: none; }

  /* ---- TELEFON DÜZENİ ----
     Masaüstünde bölüm "sabit sahne + yanında sonsuz dönen ray" olarak
     kurgulanmış. Telefonda ray kaydırmayı bıraktığı için sonsuz döngünün
     kopyaları olduğu gibi sayfaya seriliyordu: aynı dört adım ÜÇ KEZ, 2000px
     boyunca. Bölüm burada olması gerektiği şeye dönüyor — numaralı dört adım. */
  .howto-list > li[aria-hidden="true"] { display: none; }

  .howto-list { counter-reset: howto; gap: 12px; }
  .howto-item { position: relative; padding: 16px 18px 18px 62px; border-radius: 16px; }
  .howto-item::before {
    counter-increment: howto; content: counter(howto);
    position: absolute; left: 18px; top: 17px;
    width: 30px; height: 30px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--ink); color: #fff;
    font-size: .86rem; font-weight: 700; line-height: 1;
  }
  /* İki satırlık kırpma sonsuz döngüde kartları eşit boyda tutmak içindi;
     döngü kalkınca geriye yarım kalmış cümleler kaldı ("…üye"). Telefonda beş
     satır: kısa metinler tam görünüyor, adminden gelen uzun paragraflar da
     kartı 600px'e şişirmiyor — devamı videoda. */
  .howto-item__desc { -webkit-line-clamp: 5; }

  /* Video eklenmemişken: sahne boş bir kutu ve "YAKINDA" rozetinden ibaret.
     Telefonda 190px ölü alan demek; gizliyoruz ve alt başlığı videodan söz
     etmeyen sürümüyle değiştiriyoruz. Karta dokunmak da görünür bir şey
     yapmadığı için kart "seçili" görünmüyor. */
  .howto--static .howto-stage { display: none; }
  .howto--static .howto-sub { display: none; }
  .howto--static .howto-sub--steps { display: block; }
  .howto--static .howto-item { cursor: default; }
  /* Video yoksa metnin devamını gösterecek bir yer de yok: tamamı görünsün. */
  .howto--static .howto-item__desc { display: block; overflow: visible; -webkit-line-clamp: none; }
  .howto--static .howto-item.is-active { border-color: var(--line); background: var(--surface); }
}

/* ---------- BLOG ---------- */
.blog-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.post { border-radius: 24px; overflow: hidden; background: #fff; }
.post .post-img { aspect-ratio: 16/11; overflow: hidden; border-radius: 24px; }
.post .post-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.post:hover .post-img img { transform: scale(1.04); }
.post .post-body { padding: 22px 4px 0; }
.post .post-cat { font-size: .8rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--coral-d); }
.post h3 { font-size: 1.25rem; margin-top: 10px; }

/* ---------- FOOTER renkli kart ---------- */
.footer-card {
  position: relative; border-radius: 30px; overflow: hidden; padding: 36px 34px; color: #fff;
  background: var(--indigo); isolation: isolate; min-height: 300px;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.footer-card .fc-blobs { position: absolute; inset: 0; z-index: 0; }
.footer-card .fc-blobs svg { width: 100%; height: 100%; }
.footer-card > * { position: relative; z-index: 2; }
.footer-card h3 { color: #fff; font-size: 1.6rem; margin-bottom: 12px; }
.footer-card p { color: rgba(255,255,255,.9); font-size: .96rem; }
/* Beş sütun: marka · sosyal medya · kurumsal kimlik · kurumsal · yasal.
   Yasal sütunu en uzun metinleri taşıdığı için biraz daha geniş. */
.site-footer .footer-grid { grid-template-columns: 1.35fr .85fr .95fr .8fr 1.05fr; align-items: start; }
/* Altı sütun: üçüncü paket kategorisi (web sitesi) yayına girince footer'a
   kendi sütunu eklenir. Beş sütunluk şablonda altıncı sütun (yasal) ikinci
   satıra, marka bloğunun altına düşüyordu. Yalnız geniş ekranda: :has()
   özgüllüğü yüksek, aşağıdaki dar ekran kurallarını ezmesin. */
@media (min-width: 1181px) {
  .site-footer .footer-grid:has(> div:nth-child(6)) { grid-template-columns: 1.2fr .9fr .95fr .85fr .75fr 1fr; gap: 24px; }
}
.site-footer .footer-grid > div > a { display: block; }
.footer-card a { display: inline-flex !important; }
.footer-card .btn--light { color: #0d0d0d; }
.footer-card .btn--light:hover { color: #0d0d0d; }

/* ---------- Responsive (home bileşenleri) ---------- */
@media (max-width: 960px) {
  .features-grid, .prospects-grid { grid-template-columns: 1fr; }
  .feature-list { grid-template-columns: 1fr 1fr; }
  .bento { grid-template-columns: 1fr 1fr; }
  .bento-text { grid-column: 1 / 3; }
  /* Üç rakam kutusu iki sütuna sığmıyor: sonuncusu satırı tek başına alıyor. */
  .bento-stat--son { grid-column: 1 / 3; min-height: 160px; }
  .bento-viz { grid-column: 1 / 3; grid-row: auto; min-height: 300px; }
  .bento-viz__bars { height: 58%; }
  /* Tek sütuna inince ok düğmesi metnin üstüne biniyordu: kartın altına
     düğme kadar boşluk bırakıyoruz. */
  .team-card { grid-template-columns: 1fr; padding-bottom: 104px; }
  .team-card .tc-photo { max-width: 400px; }
}
@media (max-width: 640px) {
  .feature-list { grid-template-columns: 1fr; }
  .bento { grid-template-columns: 1fr; }
  .bento-text, .bento-viz, .bento-stat--son { grid-column: 1; }
  .blog-grid { grid-template-columns: 1fr; }
  .team-card { flex: 0 0 calc(100% - 30px); }
}

/* =========================================================
   KONSEPT TEMALARI — her açılış/refresh'te JS rastgele seçer
   (data-theme <html> üzerinde). Kurumsal renkler + eşleşen logo.
   ========================================================= */
html[data-theme="coral"] {
  --hero-base:#f37255; --hero-ink:#fff; --hero-sub-c:rgba(255,255,255,.92);
  --primary:#f37255; --primary-d:#e05a3c; --on-primary:#fff;
  --primary-soft:#fdece8;
  --link:#c94a2e;                    /* beyaz zeminde 4.66:1 */
  --brand-logo:url("../img/brand-coral.svg?v=20260930");
}
html[data-theme="teal"] {
  /* Hero yazısı her temada BEYAZ. Marka teali (#6ec8bf) üzerinde beyaz 1.97:1
     kalıyordu — okunmuyor. Bu yüzden yalnız HERO zemini bir ton koyultuldu
     (3.25:1, coral temanın üstünde); sayfanın geri kalanı marka tealinde. */
  --hero-base:#3f9d94; --hero-ink:#fff; --hero-sub-c:rgba(255,255,255,.92);
  --primary:#6ec8bf; --primary-d:#4fb0a6; --on-primary:#0d0d0d;
  --primary-soft:#e6f6f4;
  --link:#2f7d76;                    /* beyaz zeminde 4.87:1 */
  --brand-logo:url("../img/brand-teal.svg?v=20260930");
}
html[data-theme="yellow"] {
  /* Aynı gerekçe: marka sarısında beyaz 1.54:1 ile hiç okunmuyordu.
     Hero zemini sarının koyu tonuna çekildi (3.48:1); sarı kimliği duruyor. */
  --hero-base:#8a8f22; --hero-ink:#fff; --hero-sub-c:rgba(255,255,255,.92);
  --primary:#d3d840; --primary-d:#bcc02e; --on-primary:#0d0d0d;
  --primary-soft:#f7f8de;
  --link:#6f7317;                    /* beyaz zeminde 5.07:1 */
  --brand-logo:url("../img/brand-yellow.svg?v=20260930");
}
html[data-theme="indigo"] {
  --hero-base:#4f60ac; --hero-ink:#fff; --hero-sub-c:rgba(255,255,255,.92);
  --primary:#4f60ac; --primary-d:#3d4d92; --on-primary:#fff;
  --primary-soft:#eaedf7;
  --link:#3d4d92;                    /* beyaz zeminde 7.85:1 */
  --brand-logo:url("../img/brand-indigo.svg?v=20260930");
}
html[data-theme="mixed"] {
  --hero-base:#f37255; --hero-ink:#fff; --hero-sub-c:rgba(255,255,255,.92);
  --primary:#4f60ac; --primary-d:#3d4d92; --on-primary:#fff;
  --primary-soft:#eaedf7;
  --link:#3d4d92;                    /* beyaz zeminde 7.85:1 */
  --brand-logo:url("../img/brand-mixed.svg?v=20260930");
}
/* Eskiden teal/sarı temada hero zemini açık olduğu için sağdaki beyaz buton
   siyaha çevriliyordu — iki buton da siyah oluyor, sayfa temaya göre başka
   görünüyordu. Hero zemini artık o temalarda da koyu (bkz. yukarıdaki tema
   blokları), bu yüzden kural KALDIRILDI: sağdaki buton her temada beyaz. */

/* =========================================================
   LOGO CLOUD (markalar) — sonsuz kayan şerit (admin'den beslenir)
   ========================================================= */
.logo-cloud-sec .lc-head {
  text-align: center; font-weight: 500; letter-spacing: -.02em;
  font-size: clamp(1.25rem, 2.6vw, 1.95rem); line-height: 1.28; margin: 0 auto;
}
.logo-cloud-sec .lc-sub { color: var(--text-soft); display: block; }
.logo-cloud-sec .lc-strong { color: var(--text); font-weight: 700; display: block; }
.logo-cloud-sec .lc-rule {
  height: 1px; max-width: 380px; margin: 22px auto; background: var(--line-2);
  -webkit-mask-image: linear-gradient(to right, transparent, #000, transparent);
          mask-image: linear-gradient(to right, transparent, #000, transparent);
}
/* =========================================================
   SON İŞLER ŞERİDİ — üstüne gelinen kart genişler
   Genişlemeyi width yerine flex-grow ile yapıyoruz: kalan kartlar
   kendiliğinden daralıyor, toplam genişlik sabit kalıyor ve layout
   zıplamıyor. Kartlar arasında min-width:0 şart, yoksa img'in kendi
   genişliği daralmayı engelliyor.
   ========================================================= */
.works-strip {
  display: flex; gap: 10px; height: 420px;
}
.ws-item {
  position: relative; display: block; min-width: 0; overflow: hidden;
  flex: 1 1 0; border-radius: var(--r-md);
  background: var(--line);           /* görsel yüklenene kadar boşluk gri kalsın */
  transition: flex-grow .5s ease;
}
.works-strip:hover .ws-item:hover { flex-grow: 3.2; }
.ws-item img {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  display: block;
}
/* Şerit SAF GÖRSEL: başlık/kategori/müşteri metni DOM'da KALIR — arama motoru
   ve ekran okuyucu okumaya devam eder — ama kullanıcıya gösterilmez.
   (Gizleme için display:none/visibility kullanmıyoruz; ikisi de metni ekran
   okuyucudan da kaldırır. opacity:0 erişilebilirliği korur.) */
.ws-cap {
  position: absolute; inset: auto 0 0 0; padding: 46px 16px 14px;
  background: linear-gradient(to top, rgba(13,13,13,.78), rgba(13,13,13,0));
  color: #fff; pointer-events: none;
  opacity: 0;
}
.ws-cat {
  display: block; font-size: .68rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.72); margin-bottom: 4px;
  /* Kart daralmışken "KURUMSAL KİMLİK" iki satıra kırılıp başlığı aşağı itiyordu */
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ws-title {
  display: block; font-weight: 700; font-size: 1rem; line-height: 1.25;
  /* Kart daralmışken başlık taşmasın */
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ws-client {
  display: block; font-size: .84rem; color: rgba(255,255,255,.8);
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .35s ease, opacity .35s ease, margin-top .35s ease;
}
.ws-item:hover .ws-client { max-height: 2.4em; opacity: 1; margin-top: 5px; }

/* Dokunmatikte hover yok: yatay kaydırmalı şeride dönüyor. */
@media (hover: none), (max-width: 860px) {
  .works-strip {
    height: 340px; gap: 12px;
    overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    /* container'ın kenarına yapışmasın, kaydırma payı bırak */
    padding-bottom: 6px;
  }
  .ws-item { flex: 0 0 78%; scroll-snap-align: center; }
  .works-strip:hover .ws-item:hover { flex-grow: 0; }
  .ws-client { max-height: 2.4em; opacity: 1; margin-top: 5px; }
  /* Kaydırmalı modda kart geniş; kısaltmaya gerek yok. */
  .ws-title, .ws-cat { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
  .ws-item, .ws-client { transition: none; }
}

.logo-cloud {
  overflow: hidden; padding: 20px 0; min-height: 92px; display: flex; align-items: center;
  position: relative;
}
/* Kenar solması: mask yerine gradient overlay (mask+transform ghosting'i önler) */
.logo-cloud::before, .logo-cloud::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 12%; z-index: 3; pointer-events: none;
}
.logo-cloud::before { left: 0;  background: linear-gradient(to right, var(--bg), transparent); }
.logo-cloud::after  { right: 0; background: linear-gradient(to left,  var(--bg), transparent); }
.logo-track {
  display: flex; align-items: center; width: max-content;
  will-change: transform; backface-visibility: hidden;
  animation: lc-scroll 34s linear infinite;
}
.logo-set { display: flex; align-items: center; gap: 56px; padding-right: 56px; flex: 0 0 auto; }
.logo-cloud:hover .logo-track { animation-play-state: paused; }  /* hover'da duraklar (sıçramasız) */
/* Yatay ve DİKEY logolar bir arada: SABİT yükseklik (SVG en-boyu viewBox'tan gelir,
   böylece intrinsic boyutu olmayan görseller 0'a çökmez), genişlik oranla + tavan. */
.logo-track img {
  height: 68px; width: auto; max-width: 232px; object-fit: contain;
  display: block; flex: 0 0 auto;
  opacity: .72; filter: grayscale(100%); transition: opacity .3s, filter .3s;
  -webkit-user-select: none; user-select: none; pointer-events: none;
}
.logo-track a { display: inline-flex; align-items: center; }
.logo-track a:hover img, .logo-track img:hover { opacity: 1; filter: none; }
@keyframes lc-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .logo-track { animation: none; flex-wrap: wrap; justify-content: center; }
}
@media (max-width: 640px) { .logo-set { gap: 38px; padding-right: 38px; } .logo-track img { height: 52px; max-width: 172px; } .logo-cloud { min-height: 74px; } }

/* =========================================================
   Müşteri hesabı — header bağlantısı, giriş/kayıt, hesabım
   ========================================================= */
/* =========================================================
   HEADER İKİZ BUTONLARI — "Giriş Yap" + "Bize Ulaş"
   Ortak geometri tek yerde: dikey padding YOK, yükseklik min-height ile
   sabitlendi. Sebebi: "Giriş Yap"ın içinde 17px'lik ikon var, "Bize Ulaş"ta
   yok — padding'e bırakılsa ikonlu olan ~2px daha uzun kalırdı. Sabit
   yükseklik ikisini birebir eşitler.
   Renk dağılımı: GİRİŞ YAP dolu (tema rengi), BİZE ULAŞ çerçeveli.
   Hover davranışı ikisinde aynı: aynı süre, aynı 1px yukarı hareket.
   ========================================================= */
.acc-link, .nav-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 42px; padding: 0 18px;
  border-radius: 999px; border: 2px solid transparent;
  font-weight: 600; font-size: .95rem; line-height: 1;
  white-space: nowrap; box-shadow: none;
  transition: background .2s, border-color .2s, color .2s, transform .15s ease;
}
.acc-link:hover, .nav-cta:hover { transform: translateY(-1px); }

/* Giriş Yap — dolu, sayfanın o anki tema renginde */
.acc-link {
  background: var(--primary); border-color: var(--primary); color: var(--on-primary);
}
.acc-link:hover { background: var(--primary-d); border-color: var(--primary-d); }
/* Oturum açıkken aynı biçim, bir ton koyu: ayrım rengin tonundan gelir,
   biçim bozulmaz (etiket de adla değişiyor). */
.acc-link.is-auth { background: var(--primary-d); border-color: var(--primary-d); }
.acc-link.is-auth:hover { background: var(--primary); border-color: var(--primary); }
.acc-link svg { flex: 0 0 auto; }
/* Mobil avatar: masaüstünde hiç görünmez (orada ad yazıyor). */
.acc-avatar { display: none; }

/* Bize Ulaş — çerçeveli, zeminsiz */
.nav-cta { background: transparent; border-color: var(--line-2); color: var(--ink); }
.nav-cta:hover { border-color: var(--ink); }

.auth-wrap { max-width: 620px; }
.auth-wrap--wide { max-width: 820px; }
.auth-tabs {
  display: flex; gap: 6px; padding: 6px; margin-bottom: 20px;
  background: var(--gray); border-radius: 999px;
}
.auth-tab {
  flex: 1; border: 0; background: transparent; cursor: pointer;
  font: inherit; font-weight: 600; font-size: .95rem; color: var(--text-body);
  padding: 11px 14px; border-radius: 999px; transition: background .2s, color .2s, box-shadow .2s;
}
.auth-tab:hover { color: var(--ink); }
.auth-tab.is-active { background: #fff; color: var(--ink); box-shadow: var(--shadow-sm); }
.auth-panel { padding: 30px; }

/* Bireysel / Kurumsal seçici */
.type-label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: 8px; }
/* Üç hesap türü (bireysel / kurumsal / yurt dışı) yan yana. İki sütunda
   üçüncüsü tek başına alt satıra düşüyor ve seçenek değil ek bir uyarı
   gibi duruyordu. Dar ekranda tek sütuna iniyor (aşağıdaki medya kuralı). */
.type-switch { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 22px; }
.type-opt {
  text-align: left; cursor: pointer; font: inherit;
  border: 2px solid var(--line); background: #fff; border-radius: 16px;
  padding: 14px 16px; transition: border-color .2s, background .2s, box-shadow .2s;
  /* BAŞLIKLAR AYNI HİZADA DURSUN. Kartlar ızgarada aynı boya çekiliyor ama
     <button> içeriğini kendiliğinden DİKEYDE ORTALIYOR: açıklaması iki
     satır olan kartın başlığı, üç satır olanınkinden aşağı kayıyordu.
     Sütun yönünde başa yaslamak bu davranışı kapatıyor. */
  display: flex; flex-direction: column; justify-content: flex-start;
}
.type-opt strong { display: block; font-size: .98rem; margin-bottom: 3px; color: var(--ink); }
.type-opt span { display: block; font-size: .8rem; line-height: 1.4; color: var(--text-body); }
.type-opt:hover { border-color: var(--line-2); }
.type-opt.is-active { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 7%, #fff); box-shadow: var(--shadow-sm); }

/* Form mesajları */
.form-msg { font-size: .88rem; font-weight: 600; margin: 4px 0 14px; min-height: 1em; }
.form-msg:empty { margin: 0; min-height: 0; }
.form-msg--err { color: #c0392b; }
.form-msg--ok { color: #1e8a5f; }
.link-btn {
  border: 0; background: none; padding: 0; font: inherit; font-weight: 700;
  color: var(--primary-d, var(--primary)); cursor: pointer; text-decoration: underline;
}
.auth-alt { text-align: center; font-size: .9rem; margin-top: 16px; }

/* GOOGLE İLE GİRİŞ
   Düğme Google'ın marka kuralına göre beyaz zemin + gri çerçeve + resmî
   dört renkli "G" ile duruyor; markamızın rengine boyamak kuralları ihlal
   eder ve kullanıcı için de tanıdıklığını kaybederdi. */
.auth-oauth { margin-top: 18px; }
.auth-sep {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 14px; color: var(--muted, #6b6b6b); font-size: .85rem;
}
.auth-sep::before, .auth-sep::after {
  content: ""; flex: 1; height: 1px; background: var(--line, #ececec);
}
.btn--google {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: #fff; color: #3c4043;
  border: 1px solid var(--line-2, #e0e0e0);
  font-weight: 600;
}
.btn--google:hover { border-color: var(--ink, #231f20); background: #fff; color: #3c4043; }
.btn--google svg { flex: 0 0 auto; }

/* Sipariş geçmişi */
.order-row {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 18px;
  padding: 16px 0; border-bottom: 1px solid var(--line);
}
.order-row:last-child { border-bottom: 0; padding-bottom: 0; }
.order-date { font-size: .82rem; color: var(--text-body); margin-left: 10px; }
.order-items { font-size: .88rem; color: var(--text-body); margin-top: 4px; }
.order-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; white-space: nowrap; }
.order-status {
  font-size: .74rem; font-weight: 700; padding: 4px 10px; border-radius: 999px;
  background: var(--gray); color: var(--text-body);
}
/* Sipariş durumu rozetleri — akış boyunca renk KOYULAŞIR, tür değişmez:
   hepsi marka indigosunun tonları, biten iş turkuaz, iptal mercan.
   Eskiden "yeni" ve "üretim" kehribardı; müşteri kendi siparişine bakarken
   iki satırın sarı yanması "bir sorun var" gibi okunuyordu. */
.order-status--odeme-bekliyor { background: var(--gray); color: var(--text-soft); }
.order-status--yeni       { background: rgba(79,96,172,.08); color: var(--info-d); }
.order-status--hazirlik   { background: rgba(79,96,172,.12); color: var(--info-d); }
.order-status--inceleme   { background: rgba(79,96,172,.16); color: var(--info-d); }
.order-status--uretim     { background: rgba(79,96,172,.20); color: var(--info-d); }
.order-status--islemde    { background: rgba(79,96,172,.20); color: var(--info-d); }
.order-status--revize     { background: rgba(79,96,172,.16); color: var(--info-d); }
.order-status--kismen-teslim { background: rgba(110,200,191,.10); color: var(--teal-d); }
.order-status--tamamlandi { background: var(--ok-bg);  color: var(--ok); }
.order-status--iptal      { background: var(--err-bg); color: var(--err); }

/* Hesap sayfası veri gelene kadar içerik titremesin */
main[data-account-page].is-loading .auth-panel { opacity: .45; pointer-events: none; }

/* Checkout: oturum bilgisi notu */
.acc-hint {
  /* Sarma: içine "Bilgilerimi güncelle" düğmesi de giriyor, dar ekranda
     e-posta satırıyla yan yana sığmıyor. */
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: .86rem;
  background: var(--gray); border-radius: 12px; padding: 10px 14px; margin-bottom: 16px;
  color: var(--text-body);
}

@media (max-width: 780px) {
  /* Mobilde yalnız ikon kalır; yükseklik korunur, yatay padding daralır.
     Gizlenen YALNIZ ad etiketi: eskiden ".acc-link span" düğmedeki bütün
     span'leri, bildirim rozetini (.acc-dot) de gizliyordu — telefonda
     okunmamış bildirim sayısı hiç görünmüyordu. */
  .acc-link [data-acc-label] { display: none; }
  .acc-link { padding: 0 13px; }
  /* Oturum açıkken kişi ikonu yerine BAŞ HARFLER: giriş yapıldığı ilk
     bakışta anlaşılsın. Düğme tam daire olur (42 × 42). */
  .acc-link.is-auth { padding: 0; width: 42px; }
  .acc-link.is-auth > svg { display: none; }
  .acc-link.is-auth .acc-avatar {
    display: grid; place-items: center;
    font-size: .88rem; font-weight: 700; letter-spacing: .02em; line-height: 1;
  }
  .type-switch { grid-template-columns: 1fr; }
  .auth-panel { padding: 22px 18px; }
  .order-row { flex-direction: column; }
  .order-meta { flex-direction: row; align-items: center; gap: 12px; }
}

/* =========================================================
   Yasal sayfalar, SSS, portfolyo, 404, güven öğeleri
   ========================================================= */

/* --- Yasal metinler --- */
.legal-wrap { max-width: 780px; }
.legal-wrap h2 {
  font-size: 1.18rem; margin: 34px 0 12px; padding-top: 22px;
  border-top: 1px solid var(--line);
}
.legal-wrap h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 8px; }
.legal-wrap p, .legal-wrap li { color: var(--text-body); line-height: 1.75; font-size: .96rem; }
.legal-wrap p { margin-bottom: 12px; }
.legal-wrap ul { margin: 0 0 16px; padding-left: 20px; list-style: disc; }
.legal-wrap li { margin-bottom: 7px; }
.legal-wrap a { color: var(--primary-d, var(--primary)); text-decoration: underline; }
.legal-note {
  background: var(--gray); border-left: 3px solid var(--primary);
  border-radius: 0 12px 12px 0; padding: 14px 18px; margin-bottom: 28px;
  font-size: .9rem; line-height: 1.6; color: var(--text-body);
}
/* Yasal not kutusundaki "İngilizce özeti e-postayla al" formu.
   Dar ekranda alanlar alt alta geçer (flex-wrap), buton tam genişlik olur. */
.legal-en { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
.legal-en input[type="email"] {
  flex: 1 1 220px; min-width: 0; padding: 11px 14px; font: inherit;
  border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink);
}
.legal-en input[type="email"]:focus {
  outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(0, 0, 0, .06);
}
.legal-en .btn { flex: 0 0 auto; padding: 11px 20px; font-size: .9rem; }
@media (max-width: 480px) { .legal-en .btn { flex: 1 1 100%; } }
.legal-en-msg { margin: 12px 0 0 !important; font-size: .88rem; line-height: 1.55; font-weight: 600; }
.legal-en-msg.is-wait { color: var(--text-soft, #6b6b6b); font-weight: 500; }
.legal-en-msg.is-ok { color: #1a7f4b; }
.legal-en-msg.is-err { color: #b3261e; }
.legal-en-fine { margin: 10px 0 0 !important; font-size: .82rem; line-height: 1.55; color: var(--text-soft, #6b6b6b); }
.legal-table { width: 100%; border-collapse: collapse; margin: 8px 0 20px; font-size: .93rem; }
.legal-table th, .legal-table td {
  text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top;
}
.legal-table thead th { background: var(--gray); font-weight: 700; }
.legal-table tbody th { width: 38%; font-weight: 600; color: var(--ink); background: transparent; }
/* Doldurulmamış firma bilgisi — yayına çıkmadan gözden kaçmasın */
.co-todo {
  /* Yalnız biz görüyoruz (firma bilgisi eksikse), ama yine de marka
     paletinden: mercan "eksik" demenin doğru rengi. */
  background: var(--err-bg); color: var(--err); border-radius: 5px;
  padding: 1px 6px; font-size: .88em; font-weight: 600;
}
/* Değeri henüz girilmemiş satır tamamen gizlenir (company.js). `hidden`
   niteliği tek başına yetmez: tabloda `display: table-row` onu ezebiliyor. */
.co-missing { display: none !important; }

/* Footer'daki yasal firma künyesi — ödeme kuruluşu bu bilgileri ana sayfadan
   doğrudan görebilmeli. Bilinçli olarak sönük: bilgi orada ama tasarımı ezmiyor. */
/* Künye tek bir akan satır gibi dizilir: başlık ve maddeler aynı paragrafın
   parçası, aralarında nokta. Blok hâlinde dururken footer'ın yarısını
   kaplıyordu; bilgi aynen yerinde, görsel ağırlığı yok. */
.footer-legal { border-top: 1px solid rgba(255,255,255,.12); margin-top: 30px; padding-top: 18px; }
.footer-legal h4 {
  display: inline; font-size: .72rem; letter-spacing: .04em; text-transform: uppercase;
  margin: 0 10px 0 0; color: rgba(255,255,255,.6); font-weight: 600;
}
.footer-legal ul { display: inline; list-style: none; margin: 0; padding: 0; }
/* Her madde KENDİ İÇİNDE bölünmez (18.09.2026): satır sonu "Ticaret sicil"i
   bir satırda, "no: 224624"ü diğerinde bırakıyordu — künye okunmaz hâle
   geliyordu. Satır sonu artık yalnız maddeler ARASINDA veriliyor. */
.footer-legal li { display: inline; white-space: nowrap; font-size: .72rem; line-height: 1.9; color: rgba(255,255,255,.45); }
/* Ayraç maddenin SONUNDA duruyor (::after), başında değil: böylece nokta
   önceki satırın sonunda kalıyor, yeni satır madde adıyla başlıyor. */
.footer-legal li:not(:last-child)::after { content: "·"; margin: 0 4px 0 8px; opacity: .55; }
/* Değeri girilmemiş madde (company.js .co-missing ile gizler) sonda kalırsa
   bir önceki maddede boşta nokta kalmasın. */
.footer-legal li:has(+ li.co-missing:last-child)::after { content: none; }
/* Dar telefonda (≤420px) tek maddeler bile satıra sığmıyor; bölünmez tutmak
   yatay kaydırma doğururdu. Orada künye ALT ALTA diziliyor: her madde kendi
   satırında, ayraç noktalarına gerek kalmıyor. */
@media (max-width: 420px) {
  .footer-legal ul { display: block; }
  .footer-legal li { display: block; white-space: normal; line-height: 1.55; }
  .footer-legal li::after { content: none !important; }
}
/* Künye içindeki tek link (meslek odası) — sütun linklerinden ayrışsın diye satır içi. */
.footer-legal li a { color: rgba(255,255,255,.72); text-decoration: underline; }
/* Kabul edilen ödeme yöntemleri. `height` sabit, `width:auto` — üç markanın
   en-boy oranı farklı, sabit genişlik verirsek logolar ezilir. */
.pay-marks { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 16px; }
.pay-marks img { height: 22px; width: auto; display: block; }
.pay-marks img[alt="Visa"] { height: 15px; }

/* --- SSS --- */
/* margin-inline: auto ŞART. Bu sınıf iki farklı yerde kullanılıyor:
   sss.html'de `container faq-wrap` (container ortalıyor), paketler.html ve paket
   sayfalarında tek başına `faq-wrap` (ortalayan yok). İkincisinde içerik sola
   yaslanıyordu. */
.faq-wrap { max-width: 780px; margin-inline: auto; }
.faq-item {
  border: 1px solid var(--line); border-radius: 16px; margin-bottom: 12px;
  background: var(--surface); overflow: hidden; transition: border-color .2s, box-shadow .2s;
}
.faq-item[open] { border-color: var(--line-2); box-shadow: var(--shadow-sm); }
.faq-item summary {
  cursor: pointer; list-style: none; padding: 18px 22px; font-weight: 600; font-size: 1rem;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary svg { width: 20px; height: 20px; flex: 0 0 auto; color: var(--text-soft); transition: transform .25s; }
.faq-item[open] summary svg { transform: rotate(180deg); }
.faq-item summary:hover { background: var(--gray); }
.faq-a { padding: 0 22px 20px; }
.faq-a p { color: var(--text-body); line-height: 1.7; font-size: .96rem; max-width: 66ch; }
.faq-cta {
  margin-top: 36px; text-align: center; background: var(--gray);
  border-radius: 24px; padding: 38px 28px;
}
.faq-cta h3 { margin-bottom: 8px; }
.faq-cta p { color: var(--text-body); max-width: 52ch; margin: 0 auto 22px; line-height: 1.6; }
.faq-cta .btn + .btn { margin-left: 10px; }

/* --- Portfolyo / işler --- */
.work-filters { display: flex; gap: 10px; justify-content: center; margin-bottom: 30px; flex-wrap: wrap; }
.work-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.work-card {
  border-radius: 24px; overflow: hidden; background: var(--surface);
  border: 1px solid var(--line); cursor: pointer;
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.work-card:hover, .work-card:focus-visible {
  transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--line-2); outline: none;
}
.work-cover { aspect-ratio: 4/3; overflow: hidden; background: var(--gray); }
.work-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.work-cover--ph {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  font-size: 3rem; font-weight: 800; color: #fff; background: var(--primary);
}
.work-body { padding: 20px 22px 24px; }
.work-cat {
  display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--primary-d, var(--primary)); margin-bottom: 8px;
}
.work-body h3 { font-size: 1.08rem; margin-bottom: 4px; }
.work-client { font-size: .88rem; color: var(--text-soft); margin-bottom: 10px; }
.work-sum { font-size: .93rem; color: var(--text-body); line-height: 1.6; }
.work-metrics { display: flex; gap: 20px; margin-top: 16px; flex-wrap: wrap; }
.work-metric strong { display: block; font-size: 1.3rem; font-weight: 800; letter-spacing: -.02em; }
.work-metric span { font-size: .76rem; color: var(--text-soft); }
.work-empty {
  text-align: center; background: var(--gray); border-radius: 24px; padding: 52px 28px;
}
.work-empty p { max-width: 50ch; margin: 10px auto 22px; color: var(--text-body); line-height: 1.6; }

.work-modal {
  position: fixed; inset: 0; z-index: 100; background: rgba(13,13,13,.6);
  display: flex; align-items: center; justify-content: center; padding: 24px;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}
/* Modal ÜÇ parçalı: sabit kapak + kayan metin + sabit alt buton.
   Eskiden kutunun tamamı kayıyordu ve kapak görseli (5:4, 1500×1200) kutu
   genişliğinde basıldığı için tek başına ekranın tamamını dolduruyordu:
   başlık ekranın altında kalıyor, içerik az olduğunda da kocaman boş bir
   görselden ibaret bir kutu görünüyordu. Artık kapak bir bant, metin kendi
   içinde kayıyor, buton her zaman görünür. */
.work-modal__box {
  background: var(--surface); border-radius: 26px; max-width: 720px; width: 100%;
  max-height: min(88vh, 760px); position: relative; overflow: hidden;
  display: flex; flex-direction: column;
}
/* Kapatma çarpısı ESKİDEN "&times;" karakteriydi: yazı tipinin çarpı glifi
   kendi em kutusunda ortada durmuyor, yuvarlak düğmede gözle görülür biçimde
   kayık görünüyordu. Artık çizilmiş SVG ve düğme flex ile ortalıyor. */
.work-modal__close {
  position: absolute; top: 14px; right: 16px; z-index: 3;
  width: 38px; height: 38px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255,255,255,.92); color: var(--ink);
  display: flex; align-items: center; justify-content: center; padding: 0;
  box-shadow: var(--shadow-sm);
}
.work-modal__close svg { display: block; }
/* Modal gövdesi HTML'de tek bir sarmalayıcı div; kapak/metin/alt bant onun
   içinde. display:contents ile bu sarmalayıcı düzenden çekiliyor ki üç parça
   doğrudan kutunun flex çocuğu olsun (yoksa yükseklik sınırı işlemiyor). */
#wm-body { display: contents; }
.wm-cover { flex: 0 0 auto; background: var(--gray); }
/* Kapak bir BANT: yüksekliği sınırlı, ortadan kırpılır. Görsellerde marka
   ortada durduğu için kırpma logoyu kesmiyor. */
.wm-cover img {
  width: 100%; display: block;
  height: clamp(180px, 34vh, 300px); object-fit: cover; object-position: center;
}
.wm-text {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  padding: 26px 32px 8px;
  overscroll-behavior: contain;
}
/* Modal başlığı sayfa h2'sinin boyutunu almasın — kutuya göre ölçeklenir. */
.wm-text h2 {
  font-size: clamp(1.3rem, 2.4vw, 1.75rem); line-height: 1.22;
  margin: 6px 0 4px; letter-spacing: -.02em;
}
.wm-text p { color: var(--text-body); line-height: 1.7; margin-bottom: 12px; }
.wm-text > p:last-child { margin-bottom: 0; }
.wm-body { margin: 14px 0 0; }
/* İçerik az olduğunda kutu kısalsın diye metin alanı esnemiyor; buton her
   durumda altta ve görünür kalıyor. */
.wm-foot {
  flex: 0 0 auto; padding: 18px 32px 24px;
  background: var(--surface);
}
.wm-foot::before {
  content: ""; display: block; height: 1px; background: var(--line);
  margin: 0 0 18px;
}
/* Aşağıda okunacak metin kaldıysa alt kenar yumuşayarak biter — cümlenin
   çizgide kesilmesi "bitti mi, devamı mı var?" belirsizliği yaratıyordu.
   Sona gelindiğinde solma kalkar. */
.wm-text { position: relative; }
.wm-foot { position: relative; }
.wm-foot::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 42px;
  background: linear-gradient(to bottom, transparent, var(--surface));
  opacity: 0; transition: opacity .18s ease; pointer-events: none;
}
.work-modal__box.has-more .wm-foot::after { opacity: 1; }

@media (max-width: 640px) {
  .work-modal { padding: 12px; }
  .work-modal__box { max-height: 92vh; border-radius: 20px; }
  .wm-cover img { height: clamp(140px, 26vh, 220px); }
  .wm-text { padding: 20px 20px 6px; }
  .wm-foot { padding: 14px 20px 18px; }
}

/* --- 404 --- */
.nf-code {
  font-size: clamp(90px, 18vw, 190px); font-weight: 800; line-height: 1;
  letter-spacing: -.05em; color: var(--primary); opacity: .18; margin-bottom: -14px;
}
.nf-links { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.nf-list {
  display: flex; gap: 18px; justify-content: center; flex-wrap: wrap;
  margin-top: 32px; padding-top: 22px; border-top: 1px solid var(--line);
}
.nf-list a { color: var(--text-soft); font-size: .92rem; }
.nf-list a:hover { color: var(--ink); }

/* --- Güven rozetleri (footer) --- */
.trust-badges { display: flex; gap: 14px; margin-top: 18px; flex-wrap: wrap; }
.trust-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .74rem; font-weight: 600; color: rgba(255,255,255,.62);
  border: 1px solid rgba(255,255,255,.18); border-radius: 999px; padding: 6px 12px;
}
.trust-badge svg { width: 13px; height: 13px; }

/* --- Honeypot: ekranda ve ekran okuyucuda görünmez, botlar doldurur --- */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 980px) {
  .work-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 780px) {
  .work-grid { grid-template-columns: 1fr; }
  .legal-table tbody th { width: 44%; }
  .faq-cta .btn + .btn { margin: 10px 0 0; }
  .wm-text { padding: 24px 20px 28px; }
}

/* Ekran okuyucular için görünmez başlık (görsel düzeni bozmaz) */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Footer sütunları mobilde alt alta insin.
   NOT: .site-footer .footer-grid kuralı medya sorgularındaki .footer-grid'den
   daha yüksek özgüllükte; bu yüzden aynı özgüllükle burada tekrar tanımlanıyor. */
/* Beş sütun ~1180px altında sıkışıyor: önce üçe, sonra ikiye, sonra tek
   sütuna iner. */
@media (max-width: 1180px) {
  .site-footer .footer-grid { grid-template-columns: repeat(3, 1fr); gap: 30px 28px; }
}
@media (max-width: 980px) {
  .site-footer .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  /* Marka bloğu tam genişlik: yanındaki tek link sütunu yalnız kalıyordu. */
  .site-footer .footer-grid > div:first-child { grid-column: 1 / -1; }
}
/* Tek sütun, telefonda footer'ı ~1400px'lik bir kuyruğa çeviriyordu; sayfanın
   dibi satın alma akışının son adımı olduğu için bu kuyruk pahalı. Bağlantı
   adları kısa — 360px'te iki sütun rahat sığıyor. */
@media (max-width: 560px) {
  .site-footer .footer-grid { grid-template-columns: 1fr 1fr; gap: 22px 18px; }
  .site-footer .footer-grid > div:first-child { margin-bottom: 4px; }
}

/* =========================================================
   Ana sayfa paket bölümü
   ========================================================= */
.home-pricing .sec-head-center { margin-bottom: 26px; }
/* Ortalama KOMŞULUĞA BAĞLANMAZ. Eskiden `.sec-head-center + .cat-tabs` idi;
   9 Eyl 2026'da başlıkla sekmelerin arasına taksit bandı girince kural
   düştü ve sekmeler sola yapıştı. Kural artık bölümün içinde olmalarına
   bakıyor, araya ne girdiğine değil. */
.home-pricing .cat-tabs { display: flex; width: fit-content; margin: 0 auto 34px; }
/* Dört sekme (web sitesi yayına girince: sosyal medya, kimlik, web, ek
   hizmetler) telefonda tek satıra sığmıyor; son sekme ekran dışında kalıyor
   ve sayfa yana kaymadığı için hiç ulaşılamıyordu. Dört ve daha fazla
   GÖRÜNÜR sekmede 2×2 ızgara. Üç sekmede bugünkü düzen aynen kalır. */
@media (max-width: 560px) {
  .home-pricing .cat-tabs:has(> .cat-tab:not(.hidden) ~ .cat-tab:not(.hidden) ~ .cat-tab:not(.hidden) ~ .cat-tab:not(.hidden)) {
    display: grid; grid-template-columns: 1fr 1fr; width: 100%; border-radius: 26px;
  }
  .home-pricing .cat-tabs:has(> .cat-tab:not(.hidden) ~ .cat-tab:not(.hidden) ~ .cat-tab:not(.hidden) ~ .cat-tab:not(.hidden)) .cat-tab {
    padding: 11px 10px;
  }
}
.home-pricing [data-cat-panel] { margin: 0 auto; }
.home-pricing-foot {
  text-align: center; margin-top: 30px; font-size: .93rem; color: var(--text-soft);
}
.home-pricing-foot a { color: var(--primary-d, var(--primary)); font-weight: 600; text-decoration: underline; }
.home-pricing-foot .dot { margin: 0 8px; opacity: .5; }
.hero-note {
  margin-top: 18px; font-size: .84rem; font-weight: 500;
  color: var(--hero-sub-c, rgba(255,255,255,.75));
}

/* Sabit menü, çapa (#paketler gibi) hedeflerinin başlığını örtmesin */
[id] { scroll-margin-top: 152px; }
@media (max-width: 640px) { [id] { scroll-margin-top: 106px; } }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Mesafeli satış sözleşmesi onay kutusu (zorunlu).
   Kutu metinle aynı satırda başlasın diye margin-top ile optik hizalanıyor;
   dokunmatikte kaçırılmasın diye tıklama alanı bilerek geniş. */
.consent {
  display: flex; align-items: flex-start; gap: 10px;
  margin-top: 16px; padding: 12px 14px;
  background: var(--gray); border-radius: 12px;
  font-size: .84rem; line-height: 1.5; color: var(--text-body); cursor: pointer;
}
.consent input { width: 18px; height: 18px; margin: 1px 0 0; flex: 0 0 auto; accent-color: var(--primary); cursor: pointer; }
.consent a { color: var(--primary-d, var(--primary)); font-weight: 600; text-decoration: underline; }
.consent input:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* Sınır uyarısının onay kutusu: uyarının hemen altında, onun devamı gibi
   dursun diye aynı kehribar zeminde. */
.consent--limit {
  margin-top: 8px; background: var(--info-bg);
  border: 1px solid var(--info-line);
}
.consent--limit input { accent-color: var(--info); }

/* İşaretlenmemiş zorunlu onay — düğmeye basınca burası işaretlenir. */
.consent--eksik {
  border: 1px solid var(--coral, #e05a3c);
  box-shadow: 0 0 0 3px rgba(224,90,60,.14);
  animation: consentSil .3s ease;
}
@keyframes consentSil {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}
@media (prefers-reduced-motion: reduce) { .consent--eksik { animation: none; } }

/* Onaylar eksikken gönder düğmesi: sönük ama TIKLANABİLİR. Gerçekten
   disabled yapsak, basan kullanıcı neyin eksik olduğunu hiç öğrenemezdi;
   tıklama eksik kutuyu işaretleyip ekrana getiriyor. */
.btn.is-inactive {
  opacity: .5; box-shadow: none;
}
.btn.is-inactive:hover { transform: none; filter: none; }

/* Ödeme sayfası: karar öncesi güven şeridi */
.pay-trust {
  display: flex; justify-content: center; gap: 30px; flex-wrap: wrap;
  margin: 34px auto 0; padding: 20px 24px; max-width: 900px;
  background: var(--gray); border-radius: 18px;
}
.pay-trust li { display: flex; align-items: center; gap: 9px; font-size: .89rem; color: var(--text-body); font-weight: 500; }
.pay-trust svg { width: 17px; height: 17px; color: var(--teal-d, var(--teal)); flex: 0 0 auto; }

/* Karar destek kartları artık bağlantı — tıklanabilir olduğu belli olsun */
a.post { display: block; color: inherit; transition: transform .25s, box-shadow .25s; }
a.post:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
a.post:hover h3 { color: var(--primary-d, var(--primary)); }

@media (max-width: 640px) {
  .pay-trust { flex-direction: column; gap: 14px; align-items: flex-start; }
}

/* =========================================================
   PAKET SAYFALARI — fiyat karşılaştırma, detay sayfası, SEO metni
   (tools/gen_packages.py ile üretilen sayfalar bu bloğu kullanır)
   ========================================================= */

.btn--ghost-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.btn--ghost-light:hover { background: #fff; color: var(--ink); border-color: #fff; }

/* ---- MOBİL AKORDİYON: paket kartları (CRO #02) ----
   Telefonda üç kart alt alta ~2600 piksel tutuyordu; "hangi paketler var,
   kaça?" sorusunu cevaplamak için sayfayı üç ekran kaydırmak gerekiyordu.
   Kapalı kartta ad + seviye + FİYAT (+ KDV) duruyor — fiyat asla
   katlamanın arkasına saklanmaz, sitede fiyatın yazıyor olması bizim
   vaadimiz. Açık kart bugünkü düzenin aynısı.

   MASAÜSTÜ HİÇ DEĞİŞMEZ: iki sarmalayıcı da display:contents ile
   layout'tan çıkar, çocuklar doğrudan .plan'ın flex öğeleri olarak kalır.

   JS ÇALIŞMAZSA HER ŞEY AÇIK: kapanma "is-kapali" sınıfına bağlı ve o
   sınıfı yalnız JS basıyor. Arama motoru ve JavaScript'siz ziyaretçi
   kartın tamamını görür. */
.plan__head, .plan__body { display: contents; }
/* Akordiyonda açılan karta kaydırırken sabit başlığın altında kalmasın.
   ÖLÇÜLDÜ: telefonda başlık 88px; 84 yazılıydı ve kartın tepesi başlığın
   4 piksel ARKASINDA kalıyordu. 96 = başlık + bir tutam nefes. */
.plan { scroll-margin-top: 96px; }
.plan__chev { display: none; }

@media (max-width: 780px) {
  /* NEGATİF BOŞLUK YOK. İlk sürümde başlık, kartın iç boşluğunu da
     dokunma hedefine katmak için negatif margin kullanıyordu; kapalı
     kartta bu, başlığı kartın 31 piksel DIŞINA taşırdı ve "/ aylık + KDV"
     satırı kartın çizgisinin üstüne oturdu. Hedefi büyütmenin bedeli
     taşan bir kutuysa vazgeçilir: kapalı kartın kendi boşluğu zaten
     rahat bir dokunma alanı. */
  .plan__head {
    display: grid; grid-template-columns: 1fr auto; align-items: center;
    column-gap: 12px; cursor: pointer; user-select: none;
  }
  .plan__head:focus-visible { outline: 2px solid var(--primary); outline-offset: 4px; border-radius: 12px; }
  .plan__head .plan__name  { grid-column: 1; }
  .plan__head .plan__tier  { grid-column: 1; }
  .plan__head .plan__price { grid-column: 1; margin: 12px 0 0; }
  .plan__chev {
    display: block; grid-column: 2; grid-row: 1 / span 3;
    width: 24px; height: 24px; color: var(--text-soft);
    transition: transform .25s ease;
  }
  .plan.is-kapali .plan__chev { transform: rotate(-90deg); }
  /* Kapalı kart: gövde gider, kart derli toplu bir başlığa iner. */
  .plan.is-kapali .plan__body { display: none; }
  .plan.is-kapali { padding: 24px 24px 22px; }
  /* Kapalı kartta fiyat ve birimi AYNI SATIRDA kalır: "39.900 ₺" bir
     satır, "/ aylık + KDV" alt satır olunca sayı ile birimi arasındaki
     bağ kopuyor ve kart alttan sıkışık görünüyordu. */
  .plan.is-kapali .plan__price { flex-wrap: nowrap; gap: 8px; }
  /* 560px altındaki kural tutarı KENDİ SATIRINA alıyor (uzun tutarlar
     satır ortasında kırılmasın diye, bkz. aşağıdaki blok). Kapalı kartta
     bu gereksiz: yazı zaten küçülüyor ve üç parça tek satıra sığıyor —
     "flex: 0 0 100%" burada tutarın satırı doldurup birimi dışarı
     itiyordu. */
  .plan.is-kapali .plan__price .amt { flex: 0 0 auto; font-size: 1.7rem; }
  .plan.is-kapali .plan__price .per,
  .plan.is-kapali .plan__price .vat-tag { white-space: nowrap; }
}

/* ---- İKİNCİL AKSİYON: Ücretsiz Ön Görüşme (CRO #02, 09.09.2026) ----
   Sayfadaki tek adım 11.900 ₺ + KDV'lik satın almaydı; 14 günde 110 reklam
   tıkı geldi ve kimse ödemeye yaklaşmadı. Soğuk ziyaretçiye ikinci, düşük
   taahhütlü bir kapı: görüşme talebi.
   Hiyerarşi korunuyor — "Satın Al" dolgulu birincil, bu çerçeveli ikincil.
   (Bu yüzden öne çıkmayan kartlardaki "Satın Al" da artık dolgulu: iki
   çerçeveli düğme yan yana durunca hangisinin asıl aksiyon olduğu
   kayboluyordu.) */
/* Kartta `.plan .btn { margin-top: auto }` var: ilk düğmeyi kartın
   altına iter. İkinci düğme de aynı kuralı yiyince "auto" boş alanı
   paylaşıyor ve aradaki boşluk sıfıra düşüyordu — iki düğme yapışıktı.
   Bu yüzden seçici aynı ağırlıkta yazıldı (.plan .plan__cta2). */
.plan .plan__cta2 { margin-top: 10px; }
.plan__cta2-hint {
  margin: 8px 0 0; text-align: center;
  font-size: .82rem; line-height: 1.5; color: var(--text-soft);
}

/* ---- MOBİLDE KAPSAM LİSTESİ KATLANIR ----
   Tıkların %65'i mobilden geliyor ve düğmeye ulaşmak ~15 madde kaydırmak
   demekti; fiyat ile aksiyon arasındaki mesafe kararı öldürüyordu.
   İlk 5 madde açık, gerisi düğmeyle açılıyor. MASAÜSTÜNDE KATLAMA YOK:
   orada yer var ve kapsamın tamamı satış argümanı. */
.plan__more-feats {
  display: none;
  width: 100%; margin: -14px 0 18px; padding: 10px 8px;
  background: none; border: 0; cursor: pointer;
  font: inherit; font-size: .88rem; font-weight: 700; color: var(--indigo);
  text-decoration: underline; text-underline-offset: 3px;
}
.plan__more-feats:hover { color: var(--indigo-d); }
@media (max-width: 780px) {
  .plan__more-feats { display: block; }
  /* Katlıyken gizlenen maddeler; düğmeye basınca .is-acik ile geri gelir. */
  .plan:not(.is-acik) .plan__features li.is-fazla { display: none; }
}

/* ---- kart altındaki "detayları gör" linki ---- */
.plan__more {
  display: block; margin-top: 12px; text-align: center;
  font-size: .88rem; font-weight: 600; color: var(--text-soft);
  text-decoration: none; transition: color .2s;
}
.plan__more:hover { color: var(--ink); }
/* Telefonda 24px'lik bir dokunma hedefiydi; "Satın Al"ın hemen altında
   duruyor ve yanlış düğmeye basmak kolaydı. */
@media (max-width: 780px) {
  .plan__more { padding: 12px 8px; margin-top: 6px; }
}
.plan__more span[aria-hidden] { display: inline-block; transition: transform .2s; }
.plan__more:hover span[aria-hidden] { transform: translateX(3px); }

/* ---- paketler sayfası: hızlı geçiş ---- */
/* Kategori sekmeleri başlık bloğunun altında, paket kartlarının üstünde.
   Üstteki boşluk metinden ayırmaya, alttaki kartlara nefes vermeye yarar. */
.pkg-jump { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 34px 0 4px; }
.pkg-cat + section { padding-top: 0; }

/* ---- karşılaştırma tablosu ---- */
.cmp-head { text-align: center; margin-bottom: 28px; font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
/* KARŞILAŞTIRMA TABLOSU — YATAY KAYDIRMA SAYFAYA BULAŞMASIN.
   Telefonda tabloyu yana kaydırınca bütün sayfa yana kayıyordu (başlık
   dahil): parmak tablonun sonuna geldiğinde tarayıcı hareketi SAYFAYA
   devrediyor (scroll chaining). overscroll-behavior bunu keser — tablo
   kendi sınırında durur, sayfa yerinde kalır.
   overflow-y'ye dokunulmuyor: başlık satırı sticky, onu kırardı. */
.cmp-scroll {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain; overscroll-behavior-y: auto;
  border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface);
}
.cmp-table { width: 100%; min-width: 660px; border-collapse: collapse; font-size: .94rem; }
.cmp-table th, .cmp-table td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--line); }
.cmp-table thead th { position: sticky; top: 0; background: var(--surface); z-index: 2; border-bottom: 2px solid var(--line-2); vertical-align: bottom; }
.cmp-table thead th:first-child { font-weight: 600; color: var(--text-soft); }
.cmp-table td, .cmp-table tbody th { vertical-align: top; }
.cmp-table tbody th { font-weight: 500; color: var(--text-body); width: 34%; }
.cmp-table tbody td { text-align: center; width: 22%; }
.cmp-table thead th:not(:first-child) { text-align: center; }
.cmp-tier { display: block; font-size: 1.02rem; font-weight: 700; color: var(--ink); }
.cmp-price { display: block; margin-top: 4px; font-size: .88rem; font-weight: 600; color: var(--text-soft); }
/* Fiyatın geçtiği HER yerde "+ KDV" görünmeli — tablo başlığı da dahil.
   Rakamın altında ayrı satır: dar sütunda yan yana sığmıyor. */
.cmp-vat { display: block; margin-top: 2px; font-size: .74rem; font-weight: 600;
  letter-spacing: .02em; color: var(--text-soft); opacity: .8; }
.cmp-group th { background: var(--gray); font-size: .78rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--text-soft); padding-block: 11px; }
.cmp-table .is-yes svg { width: 20px; height: 20px; color: var(--teal-d); display: block; margin-inline: auto; }
.cmp-table .is-no { color: var(--line-2); font-weight: 700; }
.cmp-table tfoot td { padding: 18px; border-bottom: 0; }

/* =========================================================
   ÖNERİLEN SÜTUN VURGUSU
   Upwork'ün pricing tablosundaki fikir: önerilen paketin sütunu baştan
   sona ayrı bir yüzey gibi durur; göz tabloyu tararken hangi kolonda
   olduğunu kaybetmez. Renk sayfanın temasından gelir (--primary-soft),
   yan çizgiler --primary. Onay işaretleri BİLEREK tema rengine
   bağlanmadı: sarı temada sarı tik beyaz zeminde okunmuyor, "dahil"
   göstergesi her temada aynı yeşil kalmalı.
   ========================================================= */
.cmp-table .cmp-pop {
  background: var(--primary-soft, var(--gray));
  box-shadow: inset 2px 0 0 var(--primary), inset -2px 0 0 var(--primary);
}
.cmp-table thead th.cmp-pop {
  box-shadow: inset 2px 0 0 var(--primary), inset -2px 0 0 var(--primary), inset 0 3px 0 var(--primary);
  border-top-left-radius: var(--r-md); border-top-right-radius: var(--r-md);
  padding-top: 12px;
}
.cmp-table tfoot td.cmp-pop {
  box-shadow: inset 2px 0 0 var(--primary), inset -2px 0 0 var(--primary), inset 0 -3px 0 var(--primary);
  border-bottom-left-radius: var(--r-md); border-bottom-right-radius: var(--r-md);
}
/* Sütun başlığındaki "En popüler" etiketi — markanın kesik köşe dilini
   yineleyen asimetrik rozet. */
.cmp-badge {
  display: inline-block; margin-bottom: 8px;
  padding: 4px 11px; font-size: .66rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
  background: var(--primary); color: var(--on-primary);
  border-radius: 0 10px 0 10px;
}
/* Grup satırı artık 4 hücre: başlık ilk hücrede, kalanlar boş geçiyor ki
   vurgulu sütun kesintiye uğramasın. Gri bant yalnız başlık hücresinde. */
.cmp-table .cmp-group td { background: var(--gray); }
.cmp-table .cmp-group td.cmp-pop {
  background: var(--primary-soft, var(--gray));
  box-shadow: inset 2px 0 0 var(--primary), inset -2px 0 0 var(--primary);
}
.cmp-note { margin-top: 14px; font-size: .85rem; color: var(--text-soft); text-align: center; }
/* Paket seçici YALNIZ telefonda işe yarar (tablo tek sütuna iniyor).
   Masaüstünde üç sütun da açık; düğmeler orada hiçbir şey yapmaz,
   o yüzden hiç görünmezler. */
.cmp-sec { display: none; }

/* ---- SEO uzun metin blokları ---- */
.prose p { color: var(--text-body); line-height: 1.75; margin-bottom: 18px; max-width: 68ch; }
.prose h3 { margin: 30px 0 10px; font-size: 1.1rem; }
.prose--wide { max-width: 820px; margin-inline: auto; }
.prose--wide h2 { margin-bottom: 22px; }
.seo-block { background: var(--gray); }
/* Telefonda uzun SEO yazısı katlanır (main.js sınıfı basar, kural burada
   ekran genişliğine bağlı — masaüstünde sınıf etkisizdir). */
.prose__more { display: none; }
@media (max-width: 780px) {
  .prose--clamped { max-height: 380px; overflow: hidden; }
  /* Kesik metnin "burada devamı var" demesi için alt kenar söner. */
  .prose--clamped {
    -webkit-mask-image: linear-gradient(#000 62%, transparent 100%);
            mask-image: linear-gradient(#000 62%, transparent 100%);
  }
  .prose__more {
    display: block; margin: 14px auto 0; padding: 12px 22px;
    background: var(--surface); border: 1px solid var(--line-2, var(--line));
    border-radius: 999px; font: inherit; font-size: .9rem; font-weight: 700;
    color: var(--ink); cursor: pointer;
  }
}

/* ---- breadcrumb ---- */
.crumbs { padding-top: 134px; font-size: .85rem; color: var(--text-soft); }
.crumbs a { color: var(--text-soft); text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }
.crumbs span { margin: 0 7px; }
.crumbs span[aria-current] { margin: 0; color: var(--ink); font-weight: 600; }

/* ---- paket detay sayfası ---- */
/* Ürün sayfası hero'su sola hizalı: altındaki iki kolonlu içerikle aynı eksen */
.pd-hero { padding-top: 22px; text-align: left; }
.pd-hero .lead { margin-inline: 0; }
.pd-hero h1 { margin-inline: 0; max-width: 18ch; }
.pd-hero p { margin-inline: 0; }
.pd-section { padding-top: 10px; }
.pd-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 56px; align-items: start; }
.pd-main h2 { font-size: clamp(1.3rem, 2.2vw, 1.75rem); margin: 52px 0 18px; }
.pd-main > h2:first-child { margin-top: 0; }

.pd-included { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 26px; }
.pd-included li, .pd-features li { display: flex; gap: 11px; align-items: flex-start; font-size: .97rem; line-height: 1.55; }
.pd-included svg, .pd-features svg { flex: 0 0 auto; width: 20px; height: 20px; color: var(--teal-d); margin-top: 3px; }
.pd-included li { font-weight: 600; }
.pd-features { display: grid; gap: 13px; margin-top: 18px; }
.pd-delivery { margin-top: 20px; padding: 14px 18px; background: var(--gray); border-radius: var(--r-md); font-size: .9rem; color: var(--text-body); }

.pd-who .card h3 { font-size: 1.02rem; }
.pd-steps { display: grid; gap: 18px; counter-reset: pdstep; list-style: none; }
.pd-step { position: relative; padding-left: 54px; }
.pd-step::before {
  counter-increment: pdstep; content: counter(pdstep);
  position: absolute; left: 0; top: 0; width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 700; font-size: .95rem;
  background: var(--ink); color: #fff;
}
.pd-step h3 { font-size: 1.02rem; margin-bottom: 10px; }
.pd-step p { color: var(--text-soft); font-size: .95rem; line-height: 1.6; max-width: 62ch; }
.pd-faq { max-width: none; }

/* satın alma kutusu */
.pd-side { position: sticky; top: 108px; }
.pd-buy { background: var(--surface); border: 2px solid var(--ink); border-radius: var(--r-lg); padding: 26px; box-shadow: var(--shadow-md); }
.pd-buy__tier { font-size: .78rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--text-soft); }
.pd-buy .plan__price { margin: 6px 0 2px; }
.pd-buy__note { font-size: .82rem; color: var(--text-soft); margin-bottom: 18px; }
/* Paketin admin'den girilen kısa tanımı: satın alma kutusunda, tam olarak
   neyi satın aldığın. Tek kaynak veritabanı — admin'de değişince burası da
   değişir (bkz. tools/sync_pkg_i18n.py). */
.pd-buy__desc { font-size: .9rem; line-height: 1.5; color: var(--text-soft); margin: 8px 0 14px; }
.pd-buy__trust { display: grid; gap: 9px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.pd-buy__trust li { display: flex; gap: 9px; align-items: flex-start; font-size: .84rem; color: var(--text-soft); }
.pd-buy__trust svg { flex: 0 0 auto; width: 16px; height: 16px; color: var(--teal-d); margin-top: 2px; }
/* Satın alma kutusu dar (≈285 px) — burada da 2 satır yeter. */
.pd-buy .addon__desc { -webkit-line-clamp: 2; }
.pd-buy__cmp { display: block; margin-top: 16px; text-align: center; font-size: .86rem; font-weight: 600; color: var(--text-soft); text-decoration: none; }
.pd-buy__cmp:hover { color: var(--ink); text-decoration: underline; }

/* ---------------------------------------------------------------------------
   EK HİZMETLER (alt kalemler)
   Paketin altına takılan isteğe bağlı kalemler: "Marka adı oluşturma",
   "Slogan yazımı"… Kutu, kalem yoksa JS tarafından tamamen boş bırakılır —
   burada "boş hâli" için ayrı bir stil yok, çünkü hiç basılmıyor.
--------------------------------------------------------------------------- */
.addons { display: grid; gap: 8px; margin: 16px 0 4px; }
/* display:grid, tarayıcının [hidden]{display:none} kuralını ezerdi — kalem
   olmayan kartta boş bir kutu (ve boşluğu) kalırdı. Açıkça kapatıyoruz. */
.addons[hidden] { display: none; }
.addons__head { display: grid; gap: 2px; margin-bottom: 2px; }
.addons__title { font-size: .82rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ink); }
.addons__lead { font-size: .8rem; color: var(--text-soft); line-height: 1.45; }

.addon {
  display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
  padding: 11px 12px; border: 1px solid var(--line); border-radius: var(--r-sm, 12px);
  background: var(--surface); transition: border-color .16s, background .16s;
}
.addon:hover { border-color: var(--line-2); }
/* Seçili kalem görsel olarak da ayrışsın: müşteri neyi eklediğini listeye
   bakmadan görsün (fiyat farkının sebebi burada).
   Renk SABİT DEĞİL: sayfa her açılışta bir konsept temasına giriyor
   (coral/teal/yellow/indigo) ve tema rengi --primary'de duruyor. Sabit coral
   yazılırsa yeşil temalı bir sayfada tek başına kırmızı bir kutu kalıyordu. */
.addon:has(input:checked) {
  border-color: var(--primary); background: var(--primary-soft, var(--surface));
  /* Çerçeveyi kalınlaştırır ama yer kaplamaz — border genişletmek satırı 1 px
     oynatıp listeyi zıplatırdı. */
  box-shadow: inset 0 0 0 1px var(--primary);
}
/* Öne çıkan kartın zemini zaten --primary-soft; seçili kutu aynı rengi alınca
   zeminle kaynaşıp "seçili" bilgisi kayboluyordu. Orada kutu beyaz kalır,
   ayrımı çerçeve taşır. */
.plan--featured .addon:has(input:checked) { background: var(--surface); }
.addon input { flex: 0 0 auto; width: 17px; height: 17px; margin-top: 2px; accent-color: var(--primary); }
.addon__body { display: grid; gap: 2px; flex: 1 1 auto; min-width: 0; }
.addon__name { font-size: .89rem; font-weight: 700; color: var(--ink); line-height: 1.35; }
/* Seçim kutusu bir KARAR satırıdır, makale değil: uzun açıklama artık burada
   değil, "Detay" penceresinde. (.addon__desc kuralı, açıklamayı satır içi
   gösteren eski sürümlerden kalan sayfalar için duruyor.) */
.addon__desc {
  font-size: .78rem; color: var(--text-soft); line-height: 1.45;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4;
  overflow: hidden;
}
.addon__info {
  /* .addon__body bir grid: yatay hizayı justify-self belirler. align-self ile
     buton satırın tamamına yayılıyor ve "Detay" ortalanmış görünüyordu. */
  justify-self: start; text-align: left;
  margin-top: 1px; padding: 0; border: 0; background: none;
  font: inherit; font-size: .76rem; font-weight: 600; color: var(--text-soft);
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.addon__info:hover { color: var(--ink); }
.addon__price {
  flex: 0 0 auto; display: grid; justify-items: end; gap: 1px;
  font-size: .88rem; font-weight: 700; color: var(--ink); white-space: nowrap;
}
.addon__vat { font-size: .7rem; font-weight: 500; color: var(--muted); letter-spacing: .01em; }

/* ADETLİ KALEM (ek dil): onay kutusu yerine sayaç. Satır bir etiket değil
   (tıklanınca bir şey çevirmez); seçili görünümü adet > 0 iken alır. */
.addon--adet { cursor: default; }
.addon--adet.is-secili {
  border-color: var(--primary); background: var(--primary-soft, var(--surface));
  box-shadow: inset 0 0 0 1px var(--primary);
}
.plan--featured .addon--adet.is-secili { background: var(--surface); }
/* Ek dil sayacının altındaki bilgi: pakette kaç dil var, seçimle toplam kaç. */
.addon__not { display: block; margin-top: 6px; font-size: .74rem; line-height: 1.4; font-weight: 500; color: var(--muted); }
.adet {
  justify-self: start; display: inline-flex; align-items: center; gap: 2px; margin-top: 6px;
  padding: 2px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--surface);
}
.adet__btn {
  width: 32px; height: 32px; padding: 0; border: 0; border-radius: 999px; background: none;
  font: inherit; font-size: 1.05rem; font-weight: 700; line-height: 1; color: var(--ink); cursor: pointer;
}
.adet__btn:hover:not(:disabled) { background: var(--primary-soft, var(--line)); }
.adet__btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.adet__btn:disabled { color: var(--muted); cursor: default; }
.adet__val { min-width: 24px; text-align: center; font-size: .9rem; font-weight: 700; font-variant-numeric: tabular-nums; }

/* NOT: Kutuda ara toplam satırı YOK (bilerek). Kartta paketin fiyatı ve
   butondaki tutar zaten var; üçüncü bir rakam hangisinin ödenecek toplam
   olduğunu bulandırıyordu. Toplam tek yerde, sipariş özetinde görünür. */

/* Paket kartı içinde (paketler + ana sayfa): kutu ile "Satın Al" butonu ALTA
   birlikte yapışır. Kartta zaten `.plan .btn { margin-top:auto }` var; kalem
   kutusu eklenince o boşluğu kutu devralmalı, yoksa kutu metnin hemen altında
   kalıp butondan kopuyor ve kartlar hizasız görünüyordu.
   Kart dar olduğu için ölçüler biraz kısılır; kalem yoksa kart eskisi gibi. */
.plan .addons { margin-top: auto; padding-top: 16px; border-top: 1px dashed var(--line-2); }
/* Yalnız kutu GÖRÜNÜRKEN butonun otomatik boşluğunu devral; kalem olmayan
   kartta buton eskisi gibi alta yapışmaya devam etmeli. */
.plan .addons:not([hidden]) + .btn { margin-top: 12px; }
.plan .addon { padding: 9px 10px; gap: 9px; }
.plan .addon__name { font-size: .85rem; }
.plan .addon__desc { font-size: .75rem; -webkit-line-clamp: 2; }
.plan .addon__price { font-size: .84rem; }

/* ---------------------------------------------------------------------------
   EK HİZMET DETAY PENCERESİ
   Kalem açıklamasının tamamı burada okunur; kutuda yalnız ad ve fiyat kalır.
--------------------------------------------------------------------------- */
/* Sitenin onay / bilgi penceresi (VTB.onayla, VTB.bilgi — main.js). Tarayıcının
   confirm()/alert() penceresi yerine; ödeme sayfası ve Hesabım ortak kullanır. */
.vdlg { position: fixed; inset: 0; z-index: 260; display: grid; place-items: center; padding: 20px; }
.vdlg__back { position: absolute; inset: 0; background: rgba(13, 13, 13, .55); backdrop-filter: blur(2px); }
.vdlg__box {
  position: relative; width: min(440px, 100%); background: var(--bg, #fff); border-radius: 18px;
  padding: 24px 24px 20px; box-shadow: 0 24px 60px rgba(0,0,0,.28);
  animation: vdlg-gir .16s ease-out;
}
.vdlg__title { font-size: 1.15rem; line-height: 1.3; margin: 0 0 8px; }
.vdlg__text { margin: 0; font-size: .95rem; line-height: 1.6; color: var(--text-body); white-space: pre-line; overflow-wrap: anywhere; }
.vdlg__input {
  display: block; width: 100%; margin-top: 14px; font: inherit; font-size: .95rem; line-height: 1.5;
  color: var(--ink); background: #fff; border: 1px solid var(--line-2); border-radius: 12px; padding: 10px 12px;
}
textarea.vdlg__input { resize: vertical; min-height: 96px; }
.vdlg__input:focus { outline: 2px solid var(--ink); outline-offset: 1px; border-color: var(--ink); }
.vdlg__input[readonly] { background: var(--gray); }
.vdlg__foot { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; margin-top: 22px; }
.vdlg__foot .btn { min-width: 120px; }
/* Odak çerçevesi bizden: tarayıcının varsayılanı işletim sisteminin vurgu
   rengini alıyor (macOS'ta turuncu olabiliyor — kehribar yasak). */
.vdlg__foot .btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
@media (max-width: 420px) { .vdlg__foot .btn { flex: 1; } }
html.vdlg-open { overflow: hidden; }
@keyframes vdlg-gir { from { opacity: 0; transform: translateY(6px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .vdlg__box { animation: none; } }

.amodal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 20px; }
.amodal[hidden] { display: none; }
.amodal__back { position: absolute; inset: 0; background: rgba(13, 13, 13, .55); }
.amodal__box {
  position: relative; background: var(--surface); border-radius: var(--r-lg);
  box-shadow: var(--shadow-md); padding: 30px 28px 26px;
  width: min(560px, 100%); max-height: min(80vh, 720px); overflow-y: auto;
}
.amodal__close {
  position: absolute; top: 12px; right: 14px; border: 0; background: none;
  font-size: 1.7rem; line-height: 1; color: var(--text-soft); cursor: pointer; padding: 4px 8px;
}
.amodal__close:hover { color: var(--ink); }
.amodal__title { font-size: 1.25rem; margin: 0 32px 4px 0; }
.amodal__price { font-size: 1.05rem; font-weight: 700; color: var(--ink); margin-bottom: 16px; }
.amodal__body p { font-size: .92rem; line-height: 1.65; color: var(--text-body); margin: 0 0 12px; }
.amodal__body p:last-child { margin-bottom: 0; }
.amodal__act { margin-top: 22px; }
/* Pencere açıkken arka plan kaymasın */
html.amodal-open, html.amodal-open body { overflow: hidden; }

@media (max-width: 560px) {
  .amodal { padding: 0; place-items: end stretch; }
  .amodal__box { border-radius: var(--r-lg) var(--r-lg) 0 0; max-height: 86vh; padding: 26px 20px 22px; }
}

/* diğer paketler */
.pd-others-sec h2 { text-align: center; margin-bottom: 28px; }
.pd-others { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.pd-other {
  display: flex; flex-direction: column; gap: 7px; text-decoration: none;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 22px; transition: transform .2s, box-shadow .2s, border-color .2s;
}
.pd-other:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--line-2); }
.pd-other__cat { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-soft); }
.pd-other strong { font-size: 1rem; color: var(--ink); }
.pd-other__desc { font-size: .87rem; color: var(--text-soft); line-height: 1.5; flex: 1 1 auto; }
.pd-other__price { font-size: 1.05rem; font-weight: 700; color: var(--ink); margin-top: 6px; }

@media (max-width: 1080px) {
  .pd-layout { grid-template-columns: 1fr; gap: 40px; }
  /* order:-1 → fiyat + "Satın Al" kutusu, 4500 px'lik anlatımın ALTINDA değil
     ÜSTÜNDE durur. Tek sütuna düşen düzende kutu sayfanın en dibine gidiyordu:
     telefonda fiyatı görmek için 6 ekran kaydırmak gerekiyordu. */
  .pd-side { position: static; order: -1; }
  .pd-buy { max-width: 460px; }
  .pd-others { grid-template-columns: repeat(2, 1fr); }
}

/* ---------------------------------------------------------------------------
   YAPIŞKAN SATIN ALMA ÇUBUĞU (paket detay, ≤1080px)
   Kutu yukarı alındı ama okuyucu aşağı indikçe fiyat da ekrandan çıkıyor.
   Çubuk, asıl "Satın Al" düğmesi görüş alanından çıkınca aşağıdan gelir;
   düğme aynı [data-buy] kancasını kullanır — dönem ve ek hizmet seçimi aynen
   geçerlidir. Masaüstünde hiç basılmaz (sağdaki sticky kutu zaten duruyor).
--------------------------------------------------------------------------- */
.buybar {
  /* Çerez bandı açıkken onun ÜSTÜNDE durur (pixel.js --vtb-ck-h yazar);
     bant kapanınca değişken silinir ve çubuk dibe döner. */
  position: fixed; left: 0; right: 0; bottom: var(--vtb-ck-h, 0px); z-index: 70;
  display: none; align-items: center; gap: 14px;
  padding: 10px var(--gutter);
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(255,255,255,.94);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
          backdrop-filter: saturate(180%) blur(18px);
  border-top: 1px solid var(--line);
  box-shadow: 0 -6px 24px rgba(13,13,13,.12);
  transform: translateY(115%); transition: transform .24s ease;
}
.buybar.is-on { transform: none; }
.buybar__price { min-width: 0; }
/* Fiyat, kutudan klonlanan .plan__price düğümüdür. Dar telefonda tek satıra
   sığmayıp üç satıra bölünüyordu; iki satıra SABİTLİYORUZ: üstte tutar, altta
   dönem + KDV notu. Çubuğun yüksekliği böylece ekrandan ekrana oynamıyor. */
.buybar .buybar__price .plan__price { display: flex; flex-wrap: wrap; align-items: baseline; margin: 0; column-gap: 5px; row-gap: 0; }
.buybar .buybar__price .amt { flex: 0 0 100%; font-size: 1.3rem; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.buybar .buybar__price .per, .buybar .buybar__price .vat-tag { font-size: .72rem; font-weight: 500; color: var(--text-soft); }
.buybar .buybar__price .vat-tag { padding: 0; background: none; }
/* Uzun dönemde büyük rakam AYLIK karşılık; toplam notu çubukta da durmalı,
   yoksa "ne ödeyeceğim" sorusu cevapsız kalır. Tek satır, taşarsa kırpılır. */
.buybar .buybar__price .term-note {
  display: block; margin: 0; font-size: .7rem; line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.buybar .buybar__price .term-note__save { display: none; }
.buybar__btn { margin-left: auto; flex: 0 0 auto; min-height: 48px; padding-inline: 24px; }
@media (max-width: 1080px) {
  .buybar { display: flex; }
  /* Çubuk sayfanın son satırlarını örtmesin. */
  body.has-buybar { padding-bottom: 74px; }
}
@media (prefers-reduced-motion: reduce) { .buybar { transition: none; } }
/* Çok dar telefonlarda (≤360px) çubuk ekranın altını yemesin. */
@media (max-width: 380px) {
  .buybar, .paybar { gap: 10px; padding-inline: 14px; }
  .buybar .buybar__price .amt, .paybar__total strong { font-size: 1.12rem; }
  .buybar__btn, .paybar__btn { padding-inline: 16px; font-size: .92rem; }
}

/* ---------------------------------------------------------------------------
   YAPIŞKAN ÖDEME ÇUBUĞU (odeme.html, ≤980px)
   Tek sütunda sipariş özeti formun altına düşüyor; toplam ve gönder düğmesi
   ~1100 px aşağıda kalıyordu. Çubuk toplamı ekranda tutar.
--------------------------------------------------------------------------- */
.paybar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  display: none; align-items: center; gap: 14px;
  padding: 10px var(--gutter);
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(255,255,255,.94);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
          backdrop-filter: saturate(180%) blur(18px);
  border-top: 1px solid var(--line);
  box-shadow: 0 -6px 24px rgba(13,13,13,.12);
  transform: translateY(115%); transition: transform .24s ease;
}
.paybar.is-on { transform: none; }
.paybar__total { display: grid; gap: 1px; min-width: 0; line-height: 1.15; }
.paybar__total span { font-size: .74rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-soft); }
.paybar__total strong { font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.paybar__btn { margin-left: auto; flex: 0 0 auto; min-height: 48px; padding-inline: 24px; }
@media (max-width: 980px) {
  .paybar { display: flex; }
  body.has-paybar { padding-bottom: 76px; }
}
@media (prefers-reduced-motion: reduce) { .paybar { transition: none; } }

/* Uzun tutarlar telefonda satır ortasında kırılıyordu: "29.900" bir satır,
   "₺" alt satır. Tutar kendi satırını alır, dönem + KDV notu altına iner. */
@media (max-width: 560px) {
  .plan__price { flex-wrap: wrap; row-gap: 0; }
  .plan__price .amt { flex: 0 0 100%; font-size: 2.1rem; }
}
/* Tablet genişliğinde (781–1180px) üç kart yan yana sığmıyordu: fiyat satırı
   ("17.900 ₺ / tek seferlik + KDV") kırılmadığı için ızgara sütunları içerik
   kadar genişliyor ve sayfa yana taşıyordu — 1024px pencerede sayfa 1074px
   (2 Eki 2026, /paketler kurumsal kimlik sekmesinde ölçüldü). Sütunlar artık
   daralabiliyor; dönem + KDV notu gerekirse tutarın altına iniyor.
   Mobil akordiyonun (≤780px) kurallarına dokunulmuyor. */
@media (min-width: 781px) and (max-width: 1180px) {
  .price-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .plan__price { flex-wrap: wrap; row-gap: 0; }
}

/* Ödeme sayfası telefonda: dev başlık ilk ekranın yarısını yiyordu. Buradaki
   iş "okumak" değil "formu doldurmak" — başlık küçülür, form yukarı gelir.
   Ayrıca tek sütuna düşen alan satırlarında grid boşluğu ile alanın kendi alt
   boşluğu üst üste binip her alan arasında ~45px açıyordu. */
@media (max-width: 640px) {
  .checkout-page .page-hero { padding-block: 22px 6px; }
  .checkout-page .page-hero h1 { font-size: 1.9rem; }
  .checkout-page .page-hero .eyebrow { margin-bottom: 10px; }
}
@media (max-width: 780px) {
  .field-row { gap: 0; }
  .panel { padding: 20px 18px; }
}

/* Onay kutusuna dokunma alanı: 18px'lik kare telefonda ıskalanıyordu.
   Etiketin tamamı zaten tıklanabilir; kutunun kendisini de büyütüyoruz. */
@media (max-width: 780px) {
  .consent input { width: 22px; height: 22px; }
}

@media (max-width: 720px) {
  .pd-included { grid-template-columns: 1fr; }
  .pd-others { grid-template-columns: 1fr; }
  /* Başlık sticky, yani akışın içinde: 104px'lik üst boşluk telefonda paket
     sayfasının ilk ekranından ~90px'i boşuna yiyordu. */
  .crumbs { padding-top: 18px; }
  .cmp-table thead th { position: static; }

  /* KARŞILAŞTIRMA — TELEFONDA TEK PAKET
     Üç aşamadan geçti, ikisi de yanlıştı:
       1) Yatay kaydırmalı tablo → parmak sona gelince hareket sayfaya
          devrediliyor, bütün sayfa yana kayıyordu.
       2) Üç değeri alt alta yazan blok düzen → her özellik üç satır
          oldu, liste üç katına çıkıp aşağı uzadı.
     Doğrusu: üstte paket seçici, altında YALNIZ seçilen paketin sütunu.
     Özellik başına tek satır — liste yatay da uzamıyor, dikey de. */
  .cmp-scroll { overflow-x: visible; border: 0; background: none; border-radius: 0; }
  .cmp-table { min-width: 0; width: 100%; display: block; font-size: .92rem; }
  .cmp-table thead { display: none; }
  .cmp-table tbody, .cmp-table tfoot { display: block; }
  .cmp-table tr { display: block; }

  /* ÖNERİLEN SÜTUN VURGUSU BLOK DÜZENDE KAPALI.
     Masaüstünde vurgulu sütunun iki yanında dikey çizgi var (inset
     box-shadow). Tablo bloklara açılınca bu çizgiler her değerin
     etrafında birer çubuk olarak çıkıyordu — telefonda "garip çizgiler"
     tam olarak buydu. Zaten hangi paketi okuduğunu üstteki seçici
     söylüyor, ayrıca vurgulamaya gerek yok. */
  .cmp-table .cmp-pop { background: none; box-shadow: none; border-radius: 0; padding-top: 0; }

  /* KARŞILAŞTIRMA BAŞLIĞI + SEÇİCİ YUKARI YAPIŞIR.
     Uzun listede aşağı inerken hangi paketi okuduğun kayboluyordu.
     Yapışkan kutu bölümün İÇİNDE duruyor: karşılaştırma bitince
     kendiliğinden çözülüp sayfayla birlikte yukarı kayar.
     top = sabit site başlığının yüksekliği (88px). */
  .cmp-sticky {
    position: sticky; top: 88px; z-index: 3;
    background: var(--bg); padding: 10px 0 8px; margin-bottom: 2px;
    box-shadow: 0 8px 12px -10px rgba(13,13,13,.25);
  }
  /* Yapışkan hâlde başlık küçülür: ekranın üstünü başlık yığını yemesin. */
  .cmp-sticky .cmp-head { font-size: 1.05rem; margin: 0 0 10px; }

  /* Paket seçici — JS kuruyor (main.js → cmpSecici) */
  .cmp-sec { display: flex; gap: 6px; margin: 0; }
  .cmp-sec button {
    flex: 1 1 0; min-width: 0; padding: 9px 6px;
    font: inherit; font-size: .82rem; font-weight: 700; line-height: 1.25;
    color: var(--text-soft); background: var(--gray);
    border: 1px solid transparent; border-radius: 999px; cursor: pointer;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .cmp-sec button.is-secili {
    color: var(--on-primary); background: var(--primary); border-color: var(--primary);
  }

  /* Grup başlığı: bölüm ayracı */
  .cmp-table .cmp-group { margin: 20px 0 2px; }
  .cmp-table .cmp-group th {
    display: block; background: none; padding: 0 2px 6px;
    border-bottom: 1px solid var(--line-2);
  }
  .cmp-table .cmp-group td { display: none; }

  /* Özellik satırı: ad solda, değer sağda — tek satır. */
  .cmp-table tbody tr:not(.cmp-group) {
    display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
    padding: 11px 2px; border-bottom: 1px solid var(--line);
  }
  .cmp-table tbody tr:not(.cmp-group) th {
    display: block; position: static; width: auto; box-shadow: none;
    padding: 0; border: 0; font-weight: 500; color: var(--text-body);
  }
  /* Yalnız seçili paketin hücresi görünür. */
  .cmp-table tbody td { display: none; }
  .cmp-table[data-cmp-secili="1"] tbody td[data-cmp-i="1"],
  .cmp-table[data-cmp-secili="2"] tbody td[data-cmp-i="2"],
  .cmp-table[data-cmp-secili="3"] tbody td[data-cmp-i="3"] {
    display: block; width: auto; padding: 0; border: 0; background: none;
    text-align: right; white-space: normal; flex: 0 0 auto; max-width: 52%;
    font-weight: 600; color: var(--ink);
  }
  /* Blok düzende paket adını tekrar yazmaya gerek yok: seçici zaten söylüyor. */
  .cmp-table tbody td::before { content: none; }

  /* Satın alma: yalnız seçili paketin düğmesi. */
  .cmp-table tfoot tr { display: block; margin-top: 20px; }
  .cmp-table tfoot td { display: none; }
  .cmp-table[data-cmp-secili="1"] tfoot td[data-cmp-i="1"],
  .cmp-table[data-cmp-secili="2"] tfoot td[data-cmp-i="2"],
  .cmp-table[data-cmp-secili="3"] tfoot td[data-cmp-i="3"] {
    display: block; width: auto; padding: 0; border: 0; background: none; box-shadow: none;
  }
  .cmp-table tfoot td::before { content: none; }
}

/* Dar telefonlarda başlık taşıyordu: menü düğmesi ekranın dışında kalıyordu.
   Boşlukları daraltarak hepsi 360px'e sığar. */
@media (max-width: 430px) {
  .nav { gap: 10px; }
  .nav-actions { gap: 8px; }
  .nav-toggle { padding: 8px 0 8px 6px; }
}

/* =========================================================
   ABONELİK KARTLARI (hesabim.html → Aboneliklerim)
   Tasarım niyeti: her karar "ne zaman geçerli olacak" bilgisiyle
   birlikte görünür; iptal tek tıkla değil, onay panelinden yapılır.
   ========================================================= */
.sub-rule {
  font-size: .88rem; line-height: 1.6; background: var(--gray);
  padding: 14px 16px; border-radius: var(--r-md); margin-bottom: 22px;
}
.sub-card {
  border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 20px; margin-bottom: 16px; background: var(--surface);
}
.sub-card:last-child { margin-bottom: 0; }
.sub-card__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; }
.sub-card__head strong { font-size: 1.02rem; }
.sub-card__price { margin-top: 4px; font-size: 1.25rem; font-weight: 700; }
.sub-card__price span { font-size: .8rem; font-weight: 500; color: var(--text-soft); }
.sub-card__period { margin-top: 10px; font-size: .87rem; color: var(--text-soft); }
/* Otomatik tahsilat bilgisi: uyarı değil ama gözden kaçmamalı — kart
   ekstresindeki tutarın karşılığı burada yazıyor. */
.sub-card__renew {
  margin-top: 8px; font-size: .84rem; line-height: 1.55; color: var(--text-body);
  padding: 9px 12px; border-radius: 10px; background: var(--gray);
}

.sub-badge {
  flex: 0 0 auto; font-size: .74rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; padding: 6px 11px; border-radius: 999px; white-space: nowrap;
}
.sub-badge--aktif        { background: rgba(110,200,191,.18); color: var(--teal-d); }
.sub-badge--durduruluyor { background: rgba(243,114,85,.14);  color: var(--coral-d); }
.sub-badge--degisiyor    { background: rgba(79,96,172,.14);   color: var(--indigo-d); }
.sub-badge--iptal        { background: var(--gray);           color: var(--text-soft); }

.sub-note {
  margin-top: 16px; padding: 14px 16px; border-radius: var(--r-md);
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between;
}
.sub-note p { font-size: .88rem; line-height: 1.6; margin: 0; flex: 1 1 260px; }
.sub-note--warn { background: rgba(243,114,85,.09); }
.sub-note--info { background: rgba(79,96,172,.08); }
/* Kart kaydı başarıyla tamamlandı — durum rengi marka paletinden (--ok). */
.sub-note--ok { background: var(--ok-bg); }

/* ---------- Teklifler (hesabim → Teklifler; account.js) ---------- */
.teklif-form { display: grid; gap: 4px; }
.teklif-form__baslik { display: block; margin-bottom: 8px; }
.teklif-form textarea { min-height: 120px; resize: vertical; }
.teklif-form .sub-note { margin-top: 4px; }
.teklif-form .btn { justify-self: start; margin-top: 6px; }
.teklif-alt {
  margin: 14px 0 6px; font-size: .74rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-soft);
}
.teklif-kapsam { margin: 0; padding-left: 20px; font-size: .9rem; line-height: 1.65; color: var(--text-body); }
.teklif-fiyat {
  margin-top: 14px; padding: 12px 14px; border-radius: var(--r-md); background: var(--gray);
  font-size: .88rem;
}
.teklif-fiyat__satir { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; color: var(--text-soft); }
.teklif-fiyat__satir span:last-child { white-space: nowrap; }
.teklif-fiyat__satir.is-toplam {
  margin-top: 6px; padding-top: 9px; border-top: 1px solid var(--line-2);
  color: var(--text); font-weight: 700;
}
.teklif-meta { margin-top: 10px; font-size: .84rem; color: var(--text-soft); }
.teklif-talep { margin-top: 14px; font-size: .88rem; }
.teklif-talep summary { cursor: pointer; font-weight: 600; color: var(--text-body); }
.teklif-talep p { margin: 8px 0 0; white-space: pre-wrap; line-height: 1.6; color: var(--text-body); }
.teklif-ekler { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.teklif-ekler img {
  width: 96px; height: 72px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line);
}
.teklif-ekler__dosya {
  font-size: .8rem; padding: 6px 10px; border-radius: 8px; background: var(--gray); color: var(--text-body);
}
.teklif-not { margin-top: 14px; font-size: .88rem; line-height: 1.6; }
.teklif-dugmeler { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.teklif-kabul { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.teklif-kabul .pay-inst { margin-top: 0; border-top: 0; padding-top: 0; margin-bottom: 14px; }
.teklif-kabul .consent { margin-top: 0; }

/* ---------- Web sitesi aşamaları (hesabim → iş kartı; account.js asamaBlogu) ---------- */
.asama-liste { margin-top: 14px; display: grid; gap: 10px; }
.asama { border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px 14px; }
.asama--sirada { opacity: .72; }
.asama--bekliyor { border-color: rgba(243,114,85,.45); }
.asama__bas { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.asama__bas strong { font-size: .95rem; }
.asama__bas .sub-badge { font-size: .66rem; padding: 4px 8px; }
.asama__no {
  width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-size: .78rem; font-weight: 700; background: var(--gray); color: var(--text-body); flex: 0 0 auto;
}
.asama--onayli .asama__no, .asama--yayinda .asama__no { background: rgba(110,200,191,.22); color: var(--teal-d); }
.asama--bekliyor .asama__no { background: rgba(243,114,85,.16); color: var(--coral-d); }
.asama__ac { margin-left: auto; }
.asama__not { margin: 8px 0 0; font-size: .86rem; line-height: 1.55; color: var(--text-body); }
/* Aşamanın ne olduğu: numaranın hizasından (24px + 10px boşluk) başlar. */
.asama__acik { margin: 4px 0 0 34px; font-size: .8rem; line-height: 1.5; color: var(--muted); }
.asama .teslim__files, .asama .rev { margin-top: 10px; }
/* Ekibin aşama notu (teslim = bağlantı + açıklama). Satır sonları korunur. */
.asama__ekip { margin: 10px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--gray); }
.asama__ekip-bas { display: block; font-size: .74rem; font-weight: 700; color: var(--muted); margin-bottom: 4px; }
.asama__ekip p { margin: 0; font-size: .88rem; line-height: 1.55; color: var(--text-body); white-space: pre-line; overflow-wrap: anywhere; }

/* Barındırma sayacı (web sitesi kartı). Renk evreden: iyi = teal, yakın =
   indigo (30–16 gün), acil = coral (15 gün ve altı, süre bitti). */
.barindirma { margin-top: 14px; border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px 14px; }
.barindirma__bas { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.barindirma__bas strong { font-size: .95rem; }
.barindirma__site { font-size: .82rem; color: var(--text-soft); }
.barindirma__gun { margin-left: auto; font-size: .86rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.barindirma__cubuk { margin-top: 8px; height: 6px; border-radius: 999px; background: var(--gray); overflow: hidden; }
.barindirma__cubuk span { display: block; height: 100%; border-radius: inherit; }
.barindirma__not { margin: 8px 0 0; font-size: .86rem; line-height: 1.55; color: var(--text-body); }
.barindirma--iyi   .barindirma__cubuk span { background: var(--teal-d); }
.barindirma--yakin .barindirma__cubuk span { background: var(--indigo-d); }
.barindirma--yakin .barindirma__gun { color: var(--indigo-d); }
.barindirma--acil  { border-color: rgba(243,114,85,.45); }
.barindirma--acil  .barindirma__cubuk span { background: var(--coral-d); }
.barindirma--acil  .barindirma__gun { color: var(--coral-d); }

/* ---------- Blog paneli (hesabim → Blog; account.js) ---------- */
.blog-ust { margin: 0 0 16px; }
.blog-kart { display: flex; gap: 14px; align-items: flex-start; }
.blog-kart__kapak { width: 96px; height: 64px; object-fit: cover; border-radius: 8px; flex: 0 0 auto; border: 1px solid var(--line); }
.blog-kart__govde { flex: 1 1 auto; min-width: 0; }
.blog-kart__govde > strong { display: block; margin-bottom: 6px; }
.blog-satir {
  display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 0; border-top: 1px solid var(--line); font-size: .88rem;
}
.blog-satir .sub-badge { font-size: .66rem; padding: 4px 8px; margin-right: 4px; }
.blog-form { display: grid; gap: 4px; }
.blog-form textarea { resize: vertical; }
.blog-govde { min-height: 320px; line-height: 1.6; }
.blog-sekme { margin: 0 0 8px; }
.blog-onizleme {
  min-height: 320px; padding: 14px 16px; border: 1px solid var(--line-2); border-radius: var(--r-md);
  font-size: .95rem; line-height: 1.7; color: var(--text-body); overflow-wrap: anywhere;
}
.blog-onizleme h3, .blog-onizleme h4, .blog-onizleme h5 { margin: 18px 0 8px; color: var(--text); }
.blog-onizleme p, .blog-onizleme ul, .blog-onizleme ol { margin: 0 0 12px; }
.blog-onizleme ul, .blog-onizleme ol { padding-left: 22px; }
.blog-onizleme blockquote { margin: 0 0 12px; padding-left: 14px; border-left: 3px solid var(--line-2); color: var(--text-soft); }
.blog-onizleme a { color: var(--link); text-decoration: underline; }
.blog-sayac { font-weight: 400; font-size: .8rem; color: var(--text-soft); margin-left: 6px; }
.blog-sayac.is-uyari { color: var(--coral-d); font-weight: 600; }
.blog-kapak { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.blog-kapak img { width: 240px; max-width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); }
.blog-form .teklif-dugmeler { margin-top: 10px; }
.blog-sil { color: var(--err); }

.sub-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.sub-switch, .sub-cancel {
  margin-top: 18px; padding: 18px; border-radius: var(--r-md);
  background: var(--gray); border: 1px solid var(--line);
}
.sub-switch__lead { font-size: .88rem; line-height: 1.6; color: var(--text-body); margin-bottom: 14px; }

.sub-opt {
  display: flex; align-items: center; gap: 12px; padding: 13px 15px; margin-bottom: 9px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  cursor: pointer; transition: border-color .18s, box-shadow .18s;
}
.sub-opt:hover { border-color: var(--line-2); }
.sub-opt:has(input:checked) { border-color: var(--ink); box-shadow: var(--shadow-sm); }
.sub-opt input { accent-color: var(--coral); flex: 0 0 auto; }
.sub-opt__body { display: flex; flex-direction: column; gap: 3px; flex: 1 1 auto; }
.sub-opt__name { font-weight: 600; font-size: .95rem; }
.sub-opt__dir { font-size: .74rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.sub-opt__dir--up   { color: var(--teal-d); }
.sub-opt__dir--down { color: var(--text-soft); }
.sub-opt__price { font-weight: 700; white-space: nowrap; }

.sub-immediate {
  display: flex; gap: 10px; align-items: flex-start; margin: 14px 0 4px;
  font-size: .86rem; line-height: 1.5; color: var(--text-body); cursor: pointer;
}
.sub-immediate input { accent-color: var(--coral); margin-top: 2px; flex: 0 0 auto; }
.sub-cancel .field { margin-top: 4px; }
.sub-cancel .field span { display: block; font-size: .86rem; font-weight: 600; margin-bottom: 7px; }

@media (max-width: 560px) {
  .sub-card__head { flex-direction: column; }
  .sub-actions .btn { flex: 1 1 100%; }
}

/* =========================================================
   MARKA BRIEF'İ — sohbet arayüzü (brief.html) ve hesaptaki uyarı kartı
   ========================================================= */

/* ---- hesabim.html: bekleyen brief uyarısı ---- */
.brief-alert {
  display: flex; align-items: center; gap: 16px; margin-bottom: 16px;
  padding: 18px 20px; border-radius: var(--r-md);
  background: rgba(243,114,85,.08); border: 1px solid rgba(243,114,85,.24);
}
.brief-alert--done { background: var(--gray); border-color: var(--line); }
.brief-alert__icon {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 12px;
  display: grid; place-items: center; background: var(--coral); color: #fff; font-weight: 700;
}
.brief-alert--done .brief-alert__icon { background: var(--teal-d); }
.brief-alert__icon svg { width: 21px; height: 21px; }
.brief-alert__body { flex: 1 1 auto; min-width: 0; }
.brief-alert__body strong { display: block; font-size: 1rem; }
.brief-alert__body p { font-size: .88rem; color: var(--text-soft); line-height: 1.5; margin-top: 3px; }
.brief-alert__bar { height: 5px; border-radius: 999px; background: rgba(13,13,13,.09); margin-top: 10px; overflow: hidden; }
.brief-alert__bar span { display: block; height: 100%; background: var(--coral); border-radius: 999px; }
.brief-alert .btn { flex: 0 0 auto; }

/* =========================================================
   İŞİN DURUMU — ilerleme kartı (hesabim.html, sekmelerin üstü)
   ---------------------------------------------------------
   Tasarım niyeti: müşteri "sıra kimde" sorusunu tek bakışta cevaplasın.
   Bar tamamlanma oranını, adım şeritleri hangi adımın eksik olduğunu
   söylüyor; eksik adımın butonu da kartın içinde.
   ========================================================= */
/* Kart, sayfanın o anki konsept rengini kullanır (data-theme ile geliyor):
   mercan sabitlenirse teal/sarı/indigo temalarda sayfaya yabancı duruyordu.
   color-mix desteklenmeyen tarayıcıda ilk border satırı geçerli kalır. */
.svc-prog {
  margin-bottom: 16px; padding: 18px 20px; border-radius: var(--r-md);
  background: var(--primary-soft, rgba(243,114,85,.08));
  border: 1px solid var(--line-2);
  border-color: color-mix(in srgb, var(--primary) 34%, transparent);
}
.svc-prog--done { background: var(--gray); border-color: var(--line); }
.svc-prog__head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.svc-prog__title { flex: 1 1 auto; min-width: 0; }
.svc-prog__title strong { font-size: 1rem; }
.svc-prog__id {
  display: block; font-size: .78rem; color: var(--text-soft);
  font-variant-numeric: tabular-nums; margin-top: 2px;
}
/* Yüzde ve bağlantı metni tema rengini alır ama okunur kalması için
   koyulaştırılır: sarı temada saf --primary açık zeminde okunmuyordu. */
.svc-prog__pct {
  flex: 0 0 auto; font-weight: 800; font-size: 1.05rem;
  color: var(--primary-d, var(--primary));
  color: color-mix(in srgb, var(--primary-d, var(--primary)) 62%, #0d0d0d);
}
.svc-prog--done .svc-prog__pct { color: var(--teal-d); }
.svc-prog .brief-progress { background: rgba(13,13,13,.09); }
.svc-prog .brief-progress__fill { background: var(--primary); }
.svc-prog--done .brief-progress__fill { background: var(--teal-d); }

.svc-steps { display: flex; flex-wrap: wrap; gap: 7px; margin: 12px 0 0; }
.svc-step {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px 5px 6px; border-radius: 999px;
  font-size: .8rem; font-weight: 600; color: var(--text-soft);
  background: var(--paper); border: 1px solid var(--line);
}
.svc-step__dot {
  width: 19px; height: 19px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(13,13,13,.07); color: var(--text-soft); font-size: .7rem; font-weight: 800;
}
.svc-step__dot svg { width: 12px; height: 12px; }
/* Tamamlanan adım tealde (bitti), süren adım coralde (sıra sende) */
.svc-step--tamam { color: var(--ink); border-color: rgba(79,176,166,.5); }
.svc-step--tamam .svc-step__dot { background: var(--teal-d); color: #fff; }
.svc-step--kismi { color: var(--ink); border-color: color-mix(in srgb, var(--primary) 45%, transparent); }
.svc-step--kismi .svc-step__dot { background: var(--primary); color: var(--on-primary); }

.svc-prog__next { font-size: .89rem; line-height: 1.55; color: var(--text-body); margin: 14px 0 12px; }
.svc-prog .btn { margin-right: 8px; }
.svc-prog__msg {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 10px;
  border: 0; cursor: pointer; font: inherit; font-size: .84rem; font-weight: 700;
  color: var(--primary-d, var(--primary));
  color: color-mix(in srgb, var(--primary-d, var(--primary)) 62%, #0d0d0d);
  background: transparent; text-decoration: underline;
  text-underline-offset: 3px; padding: 0;
}
.svc-prog__link {
  display: inline-block; margin-top: 10px; font-size: .84rem; font-weight: 600;
  color: var(--text-soft); text-decoration: underline; text-underline-offset: 3px;
}
/* İkisi yan yana geldiğinde birbirine yapışmasın */
.svc-prog__msg + .svc-prog__link,
.svc-prog__link + .svc-prog__link { margin-left: 18px; }


/* =========================================================
   İŞ PANOSU — açılır kapanır satırlar (hesabim.html)
   ---------------------------------------------------------
   Her iş bir satır: ilerleme halkası + ad + "sıra kimde" rozeti.
   Ayrıntı (adımlar, teslim dosyaları, revize) satırın içinde açılıyor.
   Açık kart yığını sayfayı metrelerce uzatıyordu; burada bir ekranda
   bütün işler görünüyor, sıra müşterideki satır kendiliğinden açık.
   ========================================================= */
.jobs { margin-bottom: 26px; }
.jobs__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 10px;
}
.jobs__head h2 { font-size: 1.05rem; letter-spacing: -.01em; }
.jobs__meta { font-size: .82rem; color: var(--text-soft); text-align: right; }
.jobs__meta--wait { color: var(--text-body); font-weight: 600; }

.job {
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); margin-bottom: 8px; overflow: hidden;
  transition: border-color .18s, box-shadow .18s, background .18s;
}
.job:last-child { margin-bottom: 0; }
/* Sıra müşterideyse satır sayfanın konsept rengini alır — göz önce oraya
   gitsin. Diğer satırlar nötr kalıyor ki vurgu tek yerde olsun. */
.job--you, .job--pay {
  background: var(--primary-soft, rgba(243,114,85,.07));
  border-color: color-mix(in srgb, var(--primary) 32%, transparent);
}
.job.is-open { box-shadow: var(--shadow-sm); }

.job__sum {
  display: flex; align-items: center; gap: 13px; width: 100%;
  padding: 12px 14px; background: transparent; border: 0; cursor: pointer;
  font: inherit; color: inherit; text-align: left;
}
.job__sum:hover .job__name strong { text-decoration: underline; text-underline-offset: 3px; }

/* İlerleme halkası: kapalı satırda çubuk kadar yer kaplamadan aynı bilgi. */
.job__ring {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center; position: relative;
  background:
    conic-gradient(var(--primary) calc(var(--p, 0) * 1%), rgba(13,13,13,.09) 0);
}
.job__ring::after {
  content: ""; position: absolute; inset: 3px; border-radius: 50%;
  background: var(--surface);
}
.job--you .job__ring::after, .job--pay .job__ring::after { background: var(--paper); }
.job__ring__n, .job__ring svg { position: relative; z-index: 1; }
.job__ring__n {
  font-size: .74rem; font-weight: 800; font-variant-numeric: tabular-nums;
  color: var(--text-body); letter-spacing: -.02em;
}
.job--done .job__ring { background: var(--teal-d); }
.job--done .job__ring svg { width: 15px; height: 15px; color: var(--teal-d); }

.job__t { flex: 1 1 auto; min-width: 0; }
.job__name { display: flex; align-items: center; gap: 7px; }
.job__name strong {
  font-size: .95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.job__id {
  display: block; font-size: .74rem; color: var(--text-soft);
  font-variant-numeric: tabular-nums; margin-top: 1px;
}

/* Rozet "sıra kimde" sorusunu cevaplar; renkler durum jetonlarından. */
.job__state {
  flex: 0 0 auto; font-size: .74rem; font-weight: 700; letter-spacing: .02em;
  padding: 5px 10px; border-radius: 999px; white-space: nowrap;
  background: var(--gray); color: var(--text-soft);
}
.job--you .job__state, .job--pay .job__state {
  background: var(--surface); color: var(--ink);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 40%, transparent);
}
.job--done .job__state { background: var(--ok-bg); color: var(--ok); }
.job--rev  .job__state { background: var(--info-bg); color: var(--info); }

.job__chev {
  flex: 0 0 auto; width: 18px; height: 18px; color: var(--text-soft);
  transition: transform .22s ease;
}
.job.is-open .job__chev { transform: rotate(180deg); }

/* Açılma: grid satırı 0fr → 1fr. max-height tahmini gerektirmiyor,
   teslim listesi sonradan dolduğu için yüksekliği bilmiyoruz. */
.job__wrap {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .26s ease;
}
.job.is-open .job__wrap { grid-template-rows: 1fr; }
.job__body { overflow: hidden; min-height: 0; visibility: hidden; }
.job.is-open .job__body { visibility: visible; }
.job__body > *:first-child { margin-top: 0; }
.job__inner { padding: 2px 16px 16px 16px; }
.job__steps { margin-top: 0 !important; }
.job .svc-prog__next { margin: 12px 0 10px; }
.job .btn { margin-right: 8px; }
.job .teslim { margin-top: 14px; }

@media (max-width: 560px) {
  .job__sum { gap: 11px; padding: 11px 12px; flex-wrap: wrap; }
  .job__state { order: 3; margin-left: 51px; }
  .job__chev { margin-left: auto; }
  .jobs__head { flex-direction: column; align-items: flex-start; gap: 2px; }
  .jobs__meta { text-align: left; }
}

/* "Hizmetlerim" listesi iki sütun: kartlar artık eşit yükseklikte (ilerleme
   notu panoya taşındı), alt alta dizilince panel boşuna uzuyordu. Dar
   ekranda tek sütuna düşer. */
#acc-services {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: 12px; align-items: start;
}
#acc-services .sub-card { margin-bottom: 0; padding: 16px 17px; }
/* Dar sütunda rozet başlığı sıkıştırıyordu; küçültüldü ve fiyat satırı
   bölünmesin diye tek satırda tutuluyor.

   Rozet KENDİ SATIRINDA: "DOSYALAR HAZIRLANIYOR" gibi uzun bir etiket
   nowrap olduğu için iki sütunlu kartta dışarı taşıyordu. Üste alınca
   ne taşıyor ne de başlığı sıkıştırıyor. */
#acc-services .sub-card__head {
  gap: 8px; flex-direction: column-reverse; align-items: flex-start;
  justify-content: flex-start;
}
#acc-services .sub-card__head > div { width: 100%; }
#acc-services .sub-badge { max-width: 100%; white-space: normal; }
#acc-services .sub-card__head strong { font-size: .94rem; line-height: 1.35; }
#acc-services .sub-badge { font-size: .64rem; padding: 5px 8px; letter-spacing: .03em; }
#acc-services .sub-card__price { font-size: 1.1rem; white-space: nowrap; }
#acc-services .sub-card__period { font-size: .8rem; margin-top: 8px; }

/* Yapışkan eylem çubuğu — teşekkür ekranında asıl düğme ekranın dışına
   kaydığında beliriyor. Sayfa akışını değiştirmiyor, yalnız erişimi
   garantiliyor: mobilde düğme footer'ın dibinde kalıyordu. */
.cta-sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: flex; justify-content: center;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  background: var(--surface);
  border-top: 1px solid var(--line);
  box-shadow: 0 -8px 24px rgba(13, 13, 13, .07);
  transform: translateY(120%);
  transition: transform .24s ease;
  pointer-events: none;
}
.cta-sticky.is-on { transform: none; pointer-events: auto; }
.cta-sticky .btn { width: 100%; max-width: 420px; }
@media (prefers-reduced-motion: reduce) { .cta-sticky { transition: none; } }

/* ---- Hesap başlığı: selam + e-posta tek satır ----
   Ortalanmış dev başlık ilk ekranın yarısını yiyordu; işler ekranın
   dışında kalıyordu. Panelle aynı genişlikte, sola hizalı, tek satır. */
.acc-hero { padding-block: clamp(24px, 3vw, 38px) 6px; text-align: left; }
.acc-head {
  max-width: 820px; margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
}
.acc-head h1 { font-size: clamp(1.5rem, 3.4vw, 2rem); line-height: 1.15; }
.acc-head p { margin: 3px 0 0; font-size: .88rem; }
.acc-hero .eyebrow { margin-bottom: 0; }

/* Sekmedeki okunmamış mesaj sayacı */
.auth-tab { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.tab-dot {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  display: inline-grid; place-items: center; background: #e0452b; color: #fff;
  font-size: .7rem; font-weight: 800; margin-left: 7px; vertical-align: middle;
}
.tab-dot.hidden { display: none; }
.auth-tab { display: inline-flex; align-items: center; }

/* =========================================================
   SİPARİŞ YAZIŞMASI (hesabim.html → Mesajlar)
   Ekip ile müşteri arasındaki konuşma. Balon düzeni brief sohbetiyle
   aynı mantıkta: karşı taraf solda, kendi mesajın sağda.
   ========================================================= */
.othread { padding: 18px 0; border-top: 1px solid var(--line); }
.othread:first-child { border-top: 0; padding-top: 0; }
.othread__head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.othread__head > div { flex: 1 1 auto; min-width: 0; }
.othread__dot {
  flex: 0 0 auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  display: grid; place-items: center; background: var(--coral); color: #fff;
  font-size: .72rem; font-weight: 800;
}
.othread__list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.othread__empty { font-size: .89rem; margin-bottom: 14px; }
/* Sipariş yazışması: brief sohbetiyle aynı avatar dili (bkz. .bmsg).
   Ekip tarafında marka amblemi coral zeminde, müşteri tarafında baş
   harfler teal zeminde — iki taraf bir bakışta ayrılıyor. */
.omsg { display: flex; gap: 10px; align-items: flex-start; }
.omsg--me { justify-content: flex-end; }
.omsg__avatar {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; margin-top: 2px;
  background: color-mix(in srgb, var(--coral) 16%, var(--paper)); color: var(--coral);
  font-size: .66rem; font-weight: 800; letter-spacing: .02em;
}
.omsg__avatar--me {
  background: color-mix(in srgb, var(--teal) 24%, var(--paper)); color: var(--teal-d);
}
.omsg__avatar svg { width: 16px; height: 16px; display: block; }
.omsg__body {
  max-width: 78%; padding: 11px 15px; border-radius: 16px;
  background: var(--gray); border: 1px solid var(--line);
}
.omsg__body p { font-size: .92rem; line-height: 1.6; color: var(--text-body); }
.omsg--me .omsg__body { background: var(--ink); border-color: var(--ink); }
.omsg--me .omsg__body p { color: #fff; }
.omsg__ts { display: block; margin-top: 5px; font-size: .72rem; color: var(--text-soft); }
.omsg--me .omsg__ts { color: rgba(255,255,255,.62); }
.othread__form { display: flex; gap: 10px; align-items: flex-end; }
.othread__form textarea {
  flex: 1 1 auto; resize: vertical; min-height: 46px; font: inherit; font-size: .93rem;
  padding: 11px 14px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--paper);
}
.othread__form textarea:focus { outline: 0; border-color: var(--ink); }
.othread__form .btn { flex: 0 0 auto; }
@media (max-width: 640px) {
  .othread__form { flex-wrap: wrap; }
  .othread__form .btn { width: 100%; justify-content: center; }
}

/* Tek seferlik hizmet kartı: yönetilecek bir şey yok, bu yüzden eylem
   satırı da yok — abonelik kartından bu yönüyle ayrılıyor. */
.sub-card--once .sub-card__price span { font-weight: 600; }

/* ---- brief.html ---- */
.brief-section { padding-top: 118px; }
.brief-wrap { max-width: 780px; }
.brief-head { margin-bottom: 26px; }
.brief-back {
  display: inline-flex; align-items: center; gap: 5px; margin-bottom: 14px;
  font-size: .87rem; font-weight: 600; color: var(--text-soft); text-decoration: none;
}
.brief-back:hover { color: var(--ink); }
.brief-back svg { width: 16px; height: 16px; }
.brief-head h1 { font-size: clamp(1.6rem, 3.4vw, 2.2rem); margin-bottom: 10px; }
.brief-head > p { font-size: .94rem; line-height: 1.6; max-width: 62ch; }
.brief-progress {
  height: 7px; border-radius: 999px; background: var(--line); overflow: hidden; margin-top: 20px;
}
.brief-progress__fill { height: 100%; background: var(--coral); border-radius: 999px; transition: width .45s ease; }
.brief-progress__label { margin-top: 7px; font-size: .8rem; font-weight: 600; color: var(--text-soft); }

.brief-chat { display: flex; flex-direction: column; gap: 16px; margin-bottom: 20px; }
.bmsg { display: flex; gap: 11px; align-items: flex-start; max-width: 100%; }
.bmsg--me { justify-content: flex-end; }
/* Ajan avatarında baş harf ("VB") yerine marka amblemi var; renkler bu yüzden
   sohbet kutusundaki (chat.css) düzenle aynı: amblem kendi renginde coral
   zeminde, müşterinin baş harfleri teal zeminde. İkisi bir bakışta ayrılıyor. */
.bmsg__avatar {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; margin-top: 2px;
  background: color-mix(in srgb, var(--coral) 16%, var(--paper)); color: var(--coral);
  font-size: .7rem; font-weight: 800; letter-spacing: .02em;
}
.bmsg__avatar--me {
  background: color-mix(in srgb, var(--teal) 24%, var(--paper)); color: var(--teal-d);
}
/* Amblem dairenin içinde nefes alsın: yazı boyutundan bağımsız sabit ölçü. */
.bmsg__avatar svg { width: 18px; height: 18px; display: block; }
.bmsg__body {
  padding: 14px 17px; border-radius: 18px; max-width: 76%;
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm);
}
.bmsg__body p { font-size: .96rem; line-height: 1.62; color: var(--text-body); }
.bmsg__body p + p { margin-top: 10px; }
.bmsg--me .bmsg__body { background: var(--ink); border-color: var(--ink); }
.bmsg--me .bmsg__body p { color: #fff; }
.bmsg--error .bmsg__body,
.bmsg--error { width: 100%; }
.bmsg--error p {
  font-size: .88rem; color: var(--coral-d); background: rgba(243,114,85,.1);
  padding: 12px 16px; border-radius: 12px;
}

/* "yazıyor" göstergesi */
.bmsg__body--typing { display: flex; gap: 5px; align-items: center; padding: 18px 17px; }
.bmsg__body--typing span {
  width: 7px; height: 7px; border-radius: 50%; background: var(--line-2);
  animation: btype 1.2s infinite ease-in-out;
}
.bmsg__body--typing span:nth-child(2) { animation-delay: .18s; }
.bmsg__body--typing span:nth-child(3) { animation-delay: .36s; }
@keyframes btype { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-5px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .bmsg__body--typing span { animation: none; } }

.brief-composer {
  display: flex; flex-direction: column; gap: 10px;
  padding: 12px; border-radius: 20px; background: var(--surface);
  border: 1px solid var(--line-2); box-shadow: var(--shadow-md);
  position: sticky; bottom: 16px; z-index: 3;
}
.brief-composer__row { display: flex; gap: 12px; align-items: flex-end; }
/* İlerleme, yapışkan yazma kutusunun üst kenarında — sohbet ne kadar
   uzarsa uzasın gözün önünde kalır. */
.brief-composer__bar { display: flex; align-items: center; gap: 11px; padding: 2px 6px 0; }
.brief-composer__bar .brief-progress { flex: 1 1 auto; height: 6px; margin-top: 0; }
.brief-composer__bar .brief-progress__label { flex: 0 0 auto; margin-top: 0; white-space: nowrap; font-size: .76rem; }
.brief-composer textarea {
  flex: 1 1 auto; border: 0; outline: 0; resize: none; background: transparent;
  font: inherit; font-size: .97rem; line-height: 1.55; padding: 8px 6px; max-height: 180px;
}
.brief-composer .btn { flex: 0 0 auto; }
.brief-composer textarea:disabled { opacity: .5; }

.brief-hint {
  display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center;
  margin-top: 14px; font-size: .85rem; color: var(--text-soft);
}
.brief-hint.is-ready { justify-content: space-between; }
.brief-hint .link-btn { font-size: .85rem; }

/* Ekleme turunda sohbetin altındaki hatırlatma satırı. */
.brief-note {
  margin: 6px 0 0; padding: 12px 14px; border-radius: var(--r-md);
  background: var(--info-bg); color: var(--text-body);
  font-size: .85rem; line-height: 1.55;
}

/* Aylık pakette kaçıncı dönemin teslimi olduğu — "Eylül mü Ekim mi"
   sorusunu kart içinde cevaplıyor. */
.teslim__donem {
  font-size: .74rem; font-weight: 700; letter-spacing: .04em;
  color: var(--info); background: var(--info-bg);
  padding: 3px 8px; border-radius: 999px; margin-left: 8px;
}

/* Henüz teslim edilmemiş işler: kutu değil, tek satır. Müşteri
   "diğerleri unutuldu mu" diye düşünmesin diye görünüyorlar. */
.teslim--bekleyen { border-style: dashed; }
.teslim__row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 4px 0; font-size: .9rem;
}
.teslim__row + .teslim__row { border-top: 1px dashed var(--line); margin-top: 4px; padding-top: 8px; }
.teslim__wait { font-size: .78rem; color: var(--text-soft); white-space: nowrap; }

/* HAZIR paneli — sorular bitti, gönderim müşterinin elinde.
   Yazma alanının yerini alır: aynı anda iki "gönder" görünmesin. */
.brief-ready {
  margin-top: 14px; padding: 18px 20px; border-radius: var(--r-md);
  background: var(--ok-bg); border: 1px solid var(--ok-line, rgba(110,200,191,.45));
}
.brief-ready__head { display: flex; gap: 14px; align-items: flex-start; }
.brief-ready__icon {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; background: var(--ok); color: #fff;
}
.brief-ready__icon svg { width: 18px; height: 18px; }
.brief-ready__head strong { display: block; font-size: 1rem; }
.brief-ready__head p { font-size: .89rem; line-height: 1.55; color: var(--text-body); margin-top: 4px; }
.brief-ready__actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 0 48px; }
@media (max-width: 560px) {
  .brief-ready__actions { margin-left: 0; }
  .brief-ready__actions .btn { flex: 1 1 100%; }
}

.brief-done { text-align: center; padding: 20px 0; }
.brief-done__icon {
  width: 66px; height: 66px; border-radius: 50%; margin: 0 auto 18px;
  display: grid; place-items: center;
  background: rgba(110,200,191,.2); color: var(--teal-d);
}
.brief-done__icon svg { width: 30px; height: 30px; }
/* İptal edilen brief: aynı kutu, tamamlanma yeşili yerine nötr uyarı rengi. */
.brief-done--iptal .brief-done__icon { background: rgba(0,0,0,.06); color: var(--text-soft); }
.brief-done h2 { margin-bottom: 10px; }
.brief-done > p { color: var(--text-soft); max-width: 52ch; margin: 0 auto; line-height: 1.65; }
.brief-doc { margin-top: 42px; text-align: left; }
.brief-doc h3 { margin-bottom: 18px; font-size: 1.15rem; }
.brief-doc__row {
  padding: 16px 20px; border: 1px solid var(--line); border-radius: var(--r-md);
  margin-bottom: 12px; background: var(--surface);
}
.brief-doc__row h4 {
  font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-soft); margin-bottom: 7px;
}
.brief-doc__row p, .brief-doc__row li { font-size: .94rem; line-height: 1.6; color: var(--text-body); }
.brief-doc__row ul { padding-left: 18px; list-style: disc; display: grid; gap: 5px; }

@media (max-width: 640px) {
  .brief-section { padding-top: 110px; }
  .bmsg__body { max-width: 86%; }
  .brief-alert { flex-wrap: wrap; }
  .brief-alert .btn { width: 100%; }
}

/* =========================================================
   MÜŞTERİ DOSYA YÜKLEME (hesabim.html → Dosyalarım)
   Tasarım niyeti: boş bir yükleme alanı değil, NE İSTEDİĞİMİZİ söyleyen
   etiketli kutular. Müşteri ne göndereceğini bilsin diye.
   ========================================================= */
/* .up-group / .up-group__title kaldırıldı: dosya kutuları artık kategoriye
   göre gruplanmıyor, tek liste halinde duruyor (aynı logo iki başlık altında
   tekrar ediyordu). Aradaki boşluğu .up-box'ın kendi margin'i veriyor. */
.up-box {
  border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 18px; margin-bottom: 14px; background: var(--surface);
  transition: border-color .18s, background .18s;
}
.up-box.is-drag { border-color: var(--coral); background: rgba(243,114,85,.05); }
.up-box.has-files { border-color: var(--line-2); }
.up-box__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; }
.up-box__head strong { font-size: .98rem; }
.up-box__head p { font-size: .86rem; color: var(--text-soft); line-height: 1.55; margin-top: 4px; max-width: 60ch; }
.up-box__count {
  flex: 0 0 auto; min-width: 26px; height: 26px; padding: 0 8px; border-radius: 999px;
  display: grid; place-items: center; font-size: .8rem; font-weight: 700;
  background: var(--gray); color: var(--text-soft);
}
.up-box.has-files .up-box__count { background: rgba(110,200,191,.2); color: var(--teal-d); }
.up-req {
  font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--coral-d); background: rgba(243,114,85,.13); padding: 3px 7px; border-radius: 5px;
  vertical-align: middle; margin-left: 6px;
}
/* "Çekimi biz yapıyoruz" — zorunluluk değil, bilgi. Bu yüzden uyarı
   renginde değil olumlu renkte: müşteriden bir şey beklenmiyor. */
.up-tag {
  font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ok); background: var(--ok-bg); padding: 3px 7px; border-radius: 5px;
  vertical-align: middle; margin-left: 6px;
}

/* minmax(0, 1fr): grid hücresinin varsayılan alt sınırı min-content olduğu için
   uzun dosya adları ve hata metinleri satırı kutunun DIŞINA taşırıyordu
   (metinde ellipsis olmasına rağmen). Sütunu 0'a kadar daraltılabilir
   yapınca içerideki min-width:0 + ellipsis devreye giriyor. */
.up-files { margin: 14px 0 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 7px; }
.up-file {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px;
  background: var(--gray); border-radius: 10px; font-size: .88rem;
}
/* Dosya türü ikonu artık SVG (emoji değil) — kutu ölçüsü sabit,
   rengi metinden gelir. */
.up-file__icon { flex: 0 0 auto; display: inline-flex; color: var(--text-soft); }
.up-file__icon svg { width: 17px; height: 17px; display: block; }
.up-file__name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.up-file__size { flex: 0 0 auto; color: var(--text-soft); font-size: .8rem; }
.up-file__rm {
  flex: 0 0 auto; background: none; border: 0; padding: 4px; cursor: pointer;
  color: var(--text-soft); border-radius: 6px; line-height: 0;
}
.up-file__rm svg { width: 15px; height: 15px; }
.up-file__rm:hover { color: var(--coral-d); background: rgba(243,114,85,.12); }

.up-drop {
  margin-top: 14px; padding: 20px; border: 1.5px dashed var(--line-2); border-radius: 12px;
  display: flex; flex-direction: column; align-items: center; gap: 5px; cursor: pointer;
  text-align: center; transition: border-color .18s, background .18s;
}
.up-drop:hover, .up-drop:focus-visible { border-color: var(--ink); background: var(--gray); outline: none; }
.up-drop svg { width: 24px; height: 24px; color: var(--text-soft); }
.up-drop span { font-size: .88rem; font-weight: 600; }
.up-drop small { font-size: .72rem; color: var(--text-soft); letter-spacing: .04em; }

.up-queue { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: 12px; }
.up-prog { display: flex; align-items: center; gap: 11px; font-size: .84rem; }
.up-prog__name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.up-prog__bar { flex: 0 0 130px; height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; }
.up-prog__bar i { display: block; height: 100%; background: var(--coral); transition: width .2s; }
.up-prog__pct { flex: 0 0 42px; text-align: right; font-weight: 700; color: var(--text-soft); }
/* Yükleme bitince yüzde yerine onay tiki gelir; hizası bozulmasın. */
.up-prog__pct svg { width: 17px; height: 17px; display: inline-block; vertical-align: -3px; }
.up-prog.is-done .up-prog__bar i { background: var(--teal-d); }
.up-prog.is-done .up-prog__pct { color: var(--teal-d); }
.up-prog.is-error { align-items: flex-start; }
/* Hata metni bilgi taşıyor (hangi türler kabul ediliyor); tek satıra
   sıkıştırıp "…" ile kesmek yerine sarmasına izin veriyoruz. */
.up-prog.is-error .up-prog__name {
  color: var(--coral-d); white-space: normal; overflow: visible; line-height: 1.5;
}
.up-prog.is-error .up-prog__bar i { background: var(--coral-d); }
.up-prog.is-error .up-prog__pct { color: var(--coral-d); }

.up-quota { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); }
.up-quota__bar { height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; }
.up-quota__bar span { display: block; height: 100%; background: var(--teal-d); border-radius: 999px; }
.up-quota p { margin-top: 8px; font-size: .8rem; color: var(--text-soft); }
.up-quota__note { margin-top: 4px; font-size: .78rem; line-height: 1.5; }

@media (max-width: 560px) {
  .up-box__head { flex-direction: column-reverse; align-items: flex-start; }
  .up-prog__bar { flex: 0 0 70px; }
}

/* Dosya pencereye sürüklendiği an kutular belirginleşir — kullanıcı nereye
   bırakacağını görsün. Kutu dışına bırakma tarayıcının dosyayı açmasına yol
   açardı; JS bunu engelliyor, buradaki uyarı da nedenini söylüyor. */
#acc-files.is-dragging-file .up-drop { border-color: var(--coral); background: rgba(243,114,85,.06); }
#acc-files.is-dragging-file .up-box { border-color: var(--line-2); }
.up-miss {
  display: none; margin-bottom: 14px; padding: 12px 16px; border-radius: var(--r-md);
  background: rgba(243,114,85,.12); color: var(--coral-d);
  font-size: .88rem; font-weight: 600;
}
.up-miss.show { display: block; }

/* =========================================================
   ÇAPRAZ ÖNERİ — satın alma sonrası "diğer hizmet" kartı
   (teşekkür ekranı + ödeme sonucu sayfası). Teşekkür paneli
   ortalanmış olduğu için kart bilinçli olarak SOLA hizalı:
   okunacak bir metin, kutlama satırı değil.
   ========================================================= */
.xsell {
  text-align: left;
  margin-top: 34px;
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--gray);
}
.xsell h3 { margin: 12px 0 0; font-size: 1.22rem; line-height: 1.3; }
.xsell p { color: var(--text-soft); margin: 10px 0 20px; font-size: .95rem; }
.xsell .btn { width: 100%; justify-content: center; }
.xsell__note {
  margin: 16px 0 0; font-size: .84rem; line-height: 1.55;
}
.xsell__note a { color: var(--primary-d, var(--primary)); font-weight: 600; text-decoration: underline; }

@media (max-width: 560px) {
  .xsell { padding: 20px; }
  .xsell h3 { font-size: 1.1rem; }
}

/* Paket detay sayfasındaki kategori önerisi (kimlik ↔ web): masaüstünde
   yatay bant — metin solda, düğme sağda; dar ekranda alt alta. */
.xsell--pd {
  margin-top: 0; padding: 28px 32px;
  display: grid; grid-template-columns: 1fr auto; column-gap: 32px; align-items: center;
}
.xsell--pd > :not(.btn) { grid-column: 1; }
.xsell--pd .eyebrow { justify-self: start; }
.xsell--pd p { margin-bottom: 0; }
.xsell--pd .btn { grid-column: 2; grid-row: 1 / span 3; width: auto; white-space: nowrap; }
@media (max-width: 780px) {
  .xsell--pd { grid-template-columns: 1fr; padding: 22px; }
  .xsell--pd .btn { grid-column: 1; grid-row: auto; width: 100%; margin-top: 18px; white-space: normal; }
}

/* İki sütunlu kart ızgarasında tek kalan son kart tam genişlik
   (Özel Projeler: dört karta yayın günü beşincisi ekleniyor). */
.grid-2 > .card--genis:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* Ana sayfa paket sekmesi altında kategori sayfasına bağlantı */
.home-pricing-hub { text-align: center; margin: 22px 0 0; }
.home-pricing-hub .plan__more { display: inline-flex; }

/* =========================================================
   KDV — fiyat etiketi ve fatura tipi seçimi
   ========================================================= */
.vat-tag {
  display: inline-block; margin-left: 7px;
  font-size: .78rem; font-weight: 600; color: var(--muted);
  letter-spacing: .01em; white-space: nowrap;
}

/* Fatura tipi: üç kutulu radyo seçici (görsel olarak kart, işlevi radio) */
.inv-types { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 20px; }
.inv-type { display: block; cursor: pointer; }
.inv-type input { position: absolute; opacity: 0; width: 0; height: 0; }
.inv-type__box {
  display: block; height: 100%; padding: 13px 14px;
  border: 2px solid var(--line-2); border-radius: var(--r-sm);
  transition: border-color .18s, background .18s;
}
.inv-type__name { display: block; font-weight: 700; font-size: .94rem; }
.inv-type__hint { display: block; margin-top: 3px; font-size: .78rem; color: var(--text-soft); }
.inv-type:hover .inv-type__box { border-color: var(--ink); }
/* Seçili fatura tipi: zemin de temadan gelsin. Kenarlık --primary'yken zemin
   sabit pembeydi; teal/sarı temada yeşil kenarlık + pembe zemin çıkıyordu. */
.inv-type input:checked + .inv-type__box {
  border-color: var(--primary-d, var(--primary));
  background: var(--primary-soft, var(--gray));
}
/* Klavye ile gezenler seçimi görebilsin (radio gizli olduğu için outline kaybolur) */
.inv-type input:focus-visible + .inv-type__box { outline: 3px solid var(--teal); outline-offset: 2px; }

.inv-hint {
  margin: 4px 0 0; font-size: .84rem; line-height: 1.55; color: var(--text-soft);
}

@media (max-width: 560px) {
  .inv-types { grid-template-columns: 1fr; }
  .inv-type__box { padding: 11px 13px; }
}

/* =========================================================
   DÖNEM SEÇİCİ (3 / 6 / 12 ay) + avantaj rozeti
   Sekmeler main.js tarafından basılır; fiyatı girilmemiş dönem hiç çıkmaz.
   ========================================================= */
/* Kendi kendini ortalar: blok seviyesinde flex + fit-content genişlik +
   margin-inline auto. Eskiden inline-flex'ti ve ortalanması ebeveynin
   text-align:center'ına bağlıydı — main.js sarmalayıcının KENDİSİNİ
   .term-switch yaptığı için ([data-term-switch] sınıfı eziliyor) o kural
   elemanın kendisine uygulanıyor, ebeveyne değil. Ana sayfada ebeveyn
   text-align:start olduğu için seçici sola yapışıyordu. */
.term-switch {
  display: flex; flex-wrap: wrap; gap: 4px;
  width: fit-content; margin: 0 auto 28px; padding: 5px;
  background: var(--gray); border-radius: 999px;
}

.term-opt {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 17px; border: 0; border-radius: 999px;
  background: transparent; color: var(--text-body);
  font: inherit; font-size: .92rem; font-weight: 600; cursor: pointer;
  transition: background .18s, color .18s, box-shadow .18s;
}
.term-opt:hover { color: var(--ink); }
.term-opt.is-active {
  background: #fff; color: var(--ink); box-shadow: var(--shadow-sm);
}
.term-opt__save {
  font-size: .74rem; font-weight: 700; letter-spacing: .01em;
  padding: 3px 8px; border-radius: 999px;
  background: rgba(110, 200, 191, .22); color: var(--teal-d, var(--teal));
  white-space: nowrap;
}
.term-opt.is-active .term-opt__save { background: rgba(110, 200, 191, .32); }

/* Fiyatın altındaki "aylığı ≈ X · %N daha ucuz" satırı */
.term-note {
  margin: -2px 0 14px; font-size: .84rem; color: var(--text-soft); line-height: 1.5;
}
.term-note__save { color: var(--teal-d, var(--teal)); font-weight: 700; }
/* Ayraç metne değil stile yazılı: yapışkan çubukta tasarruf gizlenince
   ortada sahipsiz bir nokta kalmasın. */
.term-note__save::before { content: "· "; color: var(--text-soft); font-weight: 500; }

/* DAR ALAN: alt alta dört satır yerine 2x2 ızgara.
   Dikey liste 196 px yer kaplıyordu ve fiyat zaten seçicinin ÜSTÜNDE
   duruyor, yani bu alan yalnız bir seçim aracı — o kadar yer hak etmiyor.
   Ayrıca satır düzeninde rozetler sağa yaslanıyor, "%7" ile "%28" farklı
   genişlikte olduğu için sol kenarları kayıyor ve liste dağınık duruyordu.
   Izgarada ad ile oran alt alta, hücreler eşit; kenar düz çıkıyor.
   Ortak kural: hem detay sayfasının yapışkan kutusu hem telefon. */
.pd-buy .term-switch {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
  width: 100%; margin: 0 0 14px; border-radius: var(--r-sm);
}
.pd-buy .term-opt { border-radius: calc(var(--r-sm) - 4px); }

/* Izgara hücresi: ad üstte, avantaj altta. Rozet zemini burada kalkıyor —
   dört hücrenin dördünde rozet olunca gürültü oluyor, düz yazı daha sakin. */
.pd-buy .term-opt {
  flex-direction: column; align-items: flex-start; justify-content: center;
  gap: 1px; padding: 9px 12px; min-height: 50px; text-align: left;
}
.pd-buy .term-opt__save {
  padding: 0; background: none; font-size: .72rem; font-weight: 700;
}
.pd-buy .term-opt.is-active .term-opt__save { background: none; }

@media (max-width: 560px) {
  .term-switch {
    display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
    width: 100%; border-radius: var(--r-sm);
  }
  .term-opt {
    flex-direction: column; align-items: flex-start; justify-content: center;
    gap: 1px; padding: 9px 12px; min-height: 50px; text-align: left;
    border-radius: calc(var(--r-sm) - 4px);
  }
  .term-opt__save { padding: 0; background: none; font-size: .72rem; font-weight: 700; }
  .term-opt.is-active .term-opt__save { background: none; }
}
/* Seçilen dönem o pakette yoksa: uyarı tonu, "avantaj" yeşili değil */
.term-note--missing { color: var(--muted); font-style: italic; }

/* =========================================================
   AMBLEM — yıldız işareti TEK BAŞINA, zemin karosu olmadan.
   Renk CSS'ten gelir (mask + background), böylece 5 temanın hepsinde
   ve koyu/açık zeminde aynı dosya kullanılır.
   ========================================================= */
.amblem {
  display: block; flex: 0 0 auto;
  width: 46px; height: 46px;
  background: var(--hero-base, var(--coral));
  -webkit-mask: url("../img/amblem.svg") center / contain no-repeat;
          mask: url("../img/amblem.svg") center / contain no-repeat;
}

/* Footer marka kilidi: eskiden 332px'lik logo karosu 38px'e sıkıştırılıp
   yanına aynı yazı tekrar ediliyordu — içindeki kelime okunmuyordu.
   Artık amblem + gerçekten okunan bir marka yazımı. */
/* Zeminsiz (flat) logo. Footer her temada SİYAH olduğu için tema logosu değil
   SABİT coral kullanılıyor: sarı/mixed/indigo varyantlarında kelime lacivert ve
   koyu zeminde okunmuyor (ölçüldü). Coral hem birincil marka rengi hem en okunaklısı. */
.brand--footer { flex-direction: column; align-items: flex-start; gap: 9px; }
.brand--footer .brand__flat { display: block; height: 52px; width: auto; border-radius: 0; }
.brand--footer .brand__tag {
  display: block;
  font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.5);
}
@media (max-width: 560px) {
  .brand--footer .brand__flat { height: 44px; }
}
/* 404: marka amblemi, sayfa temasının rengiyle */
.amblem--xl { width: 84px; height: 84px; margin: 0 auto 20px; }

/* =========================================================
   MÜŞTERİ YORUMLARI (animasyonlu)
   21st.dev / Aceternity "animated testimonials" bileşeninin vanilla karşılığı.
   Değerler kaynak koddan alındı (cdn.21st.dev/user_aceternity/animated-testimonials.tsx):
     • yığındaki pasif fotoğraflar: opacity .7, scale .95, rastgele 2B eğim
     • aktif: opacity 1, scale 1, eğim 0 + y ekseninde [0,-80,0] zıplama
     • geçiş 0.4s ease-in-out; metin bloğu 0.2s; kelime gecikmesi 0.02×sıra
     • otomatik geçiş 5 sn
   Bilerek AYRILDIĞIMIZ yer: oklar. Kaynakta 28×28px, dokunmatikte hedef çok
   küçük kalıyor (44px önerilir); 40px yaptık, görünüm aynı kalıyor.
   ========================================================= */
/* Ölçüler kaynaktaki Tailwind sınıflarının birebir karşılığı:
   max-w-sm md:max-w-4xl  → 384px / 896px
   px-4 md:px-8 lg:px-12  → 16px / 32px / 48px
   grid-cols-1 md:grid-cols-2, gap-20 → 80px
   h-80 (fotoğraf alanı) → 320px, rounded-3xl → 24px */
.tst {
  display: grid; grid-template-columns: 1fr; gap: 80px;
  align-items: center;
  max-width: 384px; margin-inline: auto; padding-inline: 16px;
}
@media (min-width: 768px) {
  .tst { grid-template-columns: 1fr 1fr; max-width: 896px; padding-inline: 32px; }
}
@media (min-width: 1024px) { .tst { padding-inline: 48px; } }
/* Kaynakta perspective YOK: motion.div'in z (translateZ) değeri perspective
   veren bir ata olmadığı için görsel bir etki üretmiyor. Biz perspective
   koyunca arka kartlar orijinalden fazla içeri kaçıyordu — kaldırıldı ki
   fark yalnız opacity/scale/rotate'ten gelsin, kaynaktaki gibi. */
.tst-media { }
/* Yükseklik kaynaktan sabit (h-80 = 320px), genişlik sütun kadar. Kaynağın
   kendi demosunda sütun dar kaldığı için fotoğraf DİKEY duruyor (ölçtük:
   292×320). Bizim kabımız tam 896px olduğundan sütun 360'a çıkıyor ve kare
   görünüyordu; demodaki dikey oranı korumak için genişliği sınırlıyoruz. */
.tst-stack {
  position: relative; width: 100%; max-width: 292px; height: 320px;
  margin-inline: auto;
  /* Kendi yığma bağlamını kurar: öne gelen kartın z-index:999'u burada
     kalır, yoksa kart yukarı sıçrarken yapışkan başlığın (z-index:60)
     üstüne biniyordu. */
  isolation: isolate;
}
.tst-photo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  border-radius: 24px; transform-origin: bottom;
  user-select: none; -webkit-user-drag: none;
  /* Pasif hâl: opacity .7, scale .95, rastgele eğim. Eğim JS tarafından
     HER GEÇİŞTE yenilenir — kaynakta randomRotateY() her render'da yeniden
     çağrıldığı için arka kartlar sürekli yeni açılara kayıyor. */
  opacity: .7; z-index: var(--z, 1);
  transform: scale(.95) rotate(var(--rot, 0deg));
  transition: opacity .4s ease-in-out, transform .4s ease-in-out;
}
.tst-photo.is-active {
  opacity: 1; z-index: 999;
  transform: scale(1) rotate(0deg);
  animation: tst-pop .4s ease-in-out;
}
/* Öne gelirken: eski açısından düzelirken y ekseninde zıplar (y: [0,-80,0]).
   --rot burada kartın AKTİF OLMADAN ÖNCEKİ açısıdır; JS aktif karta yeni
   açı atamaz, böylece animasyon doğru yerden başlar. */
@keyframes tst-pop {
  0%   { transform: scale(.95) rotate(var(--rot, 0deg)) translateY(0); }
  50%  { transform: scale(1) rotate(0deg) translateY(-80px); }
  100% { transform: scale(1) rotate(0deg) translateY(0); }
}
/* İlk yüklenişte kaynaktaki initial: opacity 0, scale .9 */
.tst-stack.is-mounting .tst-photo { opacity: 0; transform: scale(.9) rotate(var(--rot, 0deg)); }

/* Metin sütunu: önce ad, sonra ünvan, en altta alıntı (kaynaktaki sıra) */
.tst-body { display: flex; flex-direction: column; justify-content: center; }
.tst-who { display: flex; flex-direction: column; gap: 2px; }
.tst-name { font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; color: var(--text); }
.tst-role { font-size: .875rem; color: var(--text-soft); }
.tst-quote {
  margin: 32px 0 0; padding: 0; border: 0;
  font-size: 1.125rem; line-height: 1.6; color: var(--text-body);
}
/* Ad + ünvan bloğu her geçişte aşağıdan belirir (kaynakta y:20 → 0, .2s) */
.tst-who.is-in { animation: tst-rise .2s ease-in-out; }
@keyframes tst-rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }

/* Alıntı kelime kelime: blur 10px → 0, y 5 → 0, kelime başına 0.02s gecikme */
.tst-word {
  display: inline-block;
  opacity: 0; filter: blur(10px); transform: translateY(5px);
  animation: tst-word-in .2s ease-in-out forwards;
  animation-delay: var(--d, 0s);
}
@keyframes tst-word-in {
  to { opacity: 1; filter: blur(0); transform: translateY(0); }
}

.tst-nav { display: flex; gap: 16px; margin-top: 48px; }
.tst-arrow {
  width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center; color: var(--ink);
  background: var(--gray); transition: background .2s, color .2s;
}
.tst-arrow svg { width: 20px; height: 20px; transition: transform .3s; }
.tst-arrow:hover { background: var(--primary); color: var(--on-primary); }
/* Kaynaktaki yön: sol ok +12°, sağ ok -12° */
#tst-prev:hover svg { transform: rotate(12deg); }
#tst-next:hover svg { transform: rotate(-12deg); }
.tst-arrow:focus-visible { outline: 2px solid var(--primary-d, var(--primary)); outline-offset: 3px; }

/* Tek sütuna düştüğünde (kaynakta md kırılımı): dikey boşluk 80px fazla
   kaçıyor, oklar da kaynakta pt-12 ile ayrılıyor. */
@media (max-width: 767px) {
  .tst { gap: 40px; }
  .tst-nav { margin-top: 48px; }
}
/* Hareket azaltma: yığın ve kelime animasyonu kapanır, içerik yerinde durur */
@media (prefers-reduced-motion: reduce) {
  .tst-photo { transition: opacity .2s ease; transform: none; }
  .tst-photo.is-active { transform: none; animation: none; }
  .tst-who.is-in { animation: none; }
  .tst-word { animation: none; opacity: 1; filter: none; transform: none; }
  .tst-arrow svg { transition: none; }
}

/* =========================================================
   HESAP MENÜSÜ (header)
   ---------------------------------------------------------
   Oturum açıkken header'daki isim bir açılır menü açar. Önceden isim doğrudan
   /hesabim'a gidiyordu ve "Çıkış yap" sayfanın ortasında, e-postanın yanında
   küçük bir bağlantıydı — kullanıcı çıkışı orada aramaz. Artık oturumla ilgili
   her şey tek yerde: adın altında.
   ========================================================= */
.acc-menu-wrap { position: relative; display: inline-flex; }
.acc-menu {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 60;
  min-width: 232px; padding: 8px;
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 18px 40px rgba(10, 14, 30, .16);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.acc-menu.is-open { opacity: 1; visibility: visible; transform: none; }
.acc-menu__head {
  padding: 10px 12px 12px; border-bottom: 1px solid var(--line); margin-bottom: 6px;
}
.acc-menu__head b { display: block; font-size: .95rem; color: var(--ink); }
.acc-menu__head span {
  display: block; font-size: .8rem; color: var(--text-soft, #6b7280);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.acc-menu a, .acc-menu button {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px 12px; border: 0; border-radius: 10px;
  background: transparent; color: var(--text-body); text-align: left;
  font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer;
}
.acc-menu a:hover, .acc-menu button:hover { background: var(--gray); color: var(--ink); }
.acc-menu svg { width: 16px; height: 16px; flex: 0 0 auto; opacity: .7; }
.acc-menu__sep { height: 1px; background: var(--line); margin: 6px 4px; }
.acc-menu__cikis { color: var(--coral, #f37255); }
.acc-menu__cikis:hover { background: rgba(243, 114, 85, .1); color: var(--coral, #f37255); }
/* Mobilde menü ekranın dışına taşmasın: sağa yaslı ama genişliği sınırlı. */
@media (max-width: 480px) {
  .acc-menu { min-width: 0; width: min(78vw, 260px); }
}

/* ---------- "Bende yok" anahtarı ve dosya durumu ----------
   Zorunlu olmayan bir bölümde gönderecek bir şeyi olmayan müşteri kutuyu
   kapatabiliyor; o bölüm artık beklenmiyor sayılıyor. */
.up-skip {
  display: inline-flex; align-items: center; gap: 9px; margin-top: 12px;
  cursor: pointer; user-select: none; color: var(--text-soft); font-size: .86rem;
}
.up-skip input { position: absolute; opacity: 0; width: 0; height: 0; }
.up-skip__track {
  position: relative; flex: none; width: 38px; height: 22px; border-radius: 999px;
  background: var(--line-2); transition: background .18s;
}
.up-skip__track::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px;
  border-radius: 50%; background: #fff; transition: transform .18s;
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.up-skip input:checked + .up-skip__track { background: var(--teal, #6ec8bf); }
.up-skip input:checked + .up-skip__track::after { transform: translateX(16px); }
.up-skip input:focus-visible + .up-skip__track { outline: 2px solid var(--coral); outline-offset: 2px; }
.up-skip input:disabled + .up-skip__track { opacity: .5; }

/* Beklenen kutu: dosyası da yok, "bende yok" da denmemiş */
.up-box.is-waiting { border-color: var(--coral); }
.up-box.is-waiting.is-drag { background: rgba(243,114,85,.05); }

.up-box.is-skipped { background: var(--gray, #f5f5f7); border-style: dashed; }
.up-box.is-skipped .up-box__head strong,
.up-box.is-skipped .up-box__head p { opacity: .65; }
.up-box__skipped {
  margin-top: 12px; padding: 12px 14px; border-radius: var(--r-sm, 10px);
  background: var(--surface); color: var(--text-soft); font-size: .88rem; text-align: center;
}

/* Başlıktaki durum rozeti: "Dosyalarınız bekleniyor" / "Dosyalar tamam" */
.up-status {
  display: inline-flex; align-items: center; gap: 6px; vertical-align: middle;
  margin-left: 8px; padding: 4px 11px; border-radius: 999px;
  font-size: .72rem; font-weight: 700; letter-spacing: .01em;
}
.up-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.up-status.is-wait { color: var(--info-d); background: var(--info-bg-2); }
.up-status.is-done { color: var(--ok); background: var(--ok-bg); }
.up-status.hidden { display: none; }

/* ---------- Bildirim noktaları ----------
   Zincir: sağ üstteki hesap düğmesi → sekme → kart. Hepsi aynı kırmızı,
   çünkü hepsi aynı şeyi söylüyor: "burada senin bakmadığın bir şey var". */
.acc-dot {
  position: absolute; top: -6px; right: -6px;
  min-width: 18px; height: 18px; padding: 0 5px;
  display: grid; place-items: center;
  border-radius: 999px; background: #e0452b; color: #fff;
  font-size: .68rem; font-weight: 800; line-height: 1;
  border: 2px solid var(--bg, #fff);
}
[data-acc-link] { position: relative; }

.kart-dot {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  background: #e0452b; margin-left: 8px; vertical-align: middle;
  box-shadow: 0 0 0 3px rgba(224,69,43,.16);
}

/* ---------- Teslim ve revize (müşteri paneli) ---------- */
.teslim {
  margin-top: 14px; padding: 14px 16px; border-radius: var(--r-sm, 12px);
  background: var(--surface); border: 1px solid var(--line);
}
.teslim__head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.teslim__head strong { font-size: .95rem; }
.teslim__date { font-size: .8rem; color: var(--text-soft); }
.teslim__rev { font-size: .88rem; color: var(--text-body); margin: 12px 0 8px; }

/* Teslim dosyaları listesi — Drive bağlantısı yerine gerçek dosya listesi */
.teslim__hint { font-size: .86rem; margin: 0; }
.teslim__count { font-size: .82rem; color: var(--text-soft); margin: 0 0 8px; }
.dl-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.dl-item {
  display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center;
  font-size: .86rem; padding: 8px 12px; border-radius: 10px; background: var(--gray, #f5f5f7);
}
.dl-item__name { min-width: 0; overflow-wrap: anywhere; line-height: 1.4; }
.dl-item__path { color: var(--text-soft); }
.dl-item__size { color: var(--text-soft); font-size: .78rem; white-space: nowrap; }
@media (max-width: 560px) {
  .dl-item { grid-template-columns: 1fr auto; }
  .dl-item .btn { grid-column: 1 / -1; justify-self: start; }
}
/* ---------- Revize (müşteri paneli) ----------
   Bir madde = ekran görüntüsü + yanına yazılan istek. Ekran bu iki şeyin
   yan yana durduğu bir listeden ibaret; başka alan yok, çünkü daha fazlası
   denendi ve doldurulmadı. Form denetimleri sitenin .field görünümünü
   kullanıyor: paneldeki eski .inp sınıfı YALNIZCA admin.css'te tanımlıydı,
   bu yüzden kutular müşteri panelinde çıplak ve okunmaz çıkıyordu. */
.rev { margin-top: 4px; }
.rv-round {
  margin-top: 12px; padding: 14px 16px; border-radius: 12px;
  background: var(--gray, #f5f5f7); border: 1px solid transparent;
}
.rv-round--draft { border-color: var(--line); background: var(--surface); }
.rv-round--open { border-color: var(--info-line); }
.rv-round__head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.rv-round__head strong { font-size: .95rem; }
.rv-hint { font-size: .84rem; margin: 10px 0 0; line-height: 1.55; }

/* --- madde listesi --- */
.rv-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rv-item {
  display: grid; grid-template-columns: 72px 1fr auto auto; gap: 12px; align-items: center;
  font-size: .9rem; padding: 10px 12px; border-radius: 10px; background: var(--bg);
  border: 1px solid var(--line);
}
.rv-item__shot {
  width: 72px; height: 72px; border-radius: 8px; overflow: hidden; display: block;
  background: var(--gray, #f0f0f2); border: 1px solid var(--line);
}
.rv-item__shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rv-item__shot--bos { opacity: .5; }
.rv-item__body { min-width: 0; display: grid; gap: 4px; }
.rv-item__want { line-height: 1.5; overflow-wrap: anywhere; }
.rv-item__team { font-size: .8rem; color: var(--text-soft); line-height: 1.45; overflow-wrap: anywhere; }
.rv-item__st {
  font-weight: 700; font-size: .72rem; padding: 3px 9px; border-radius: 999px;
  background: var(--info-bg-2); color: var(--info-d); white-space: nowrap;
}
.rv-item--yapildi .rv-item__st { background: var(--ok-bg); color: var(--ok); }
.rv-item--yapilmadi .rv-item__st { background: var(--err-bg); color: var(--err); }
.rv-item__del {
  border: 0; background: none; cursor: pointer; font-size: 1.3rem; line-height: 1;
  color: var(--text-soft); padding: 0 4px;
}
.rv-item__del:hover { color: var(--ink, var(--text)); }

/* --- madde ekleme: solda görsel, sağda metin --- */
.rv-add {
  display: grid; grid-template-columns: 132px 1fr; gap: 14px; align-items: start;
  margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--line);
}
.rv-add__shot { display: block; cursor: pointer; }
.rv-add__shot-inner {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  width: 132px; height: 132px; border-radius: 10px; overflow: hidden; text-align: center;
  border: 2px dashed var(--line-2); background: #fff; color: var(--text-soft);
  font-size: .76rem; line-height: 1.3; padding: 8px; transition: border-color .2s, color .2s;
}
.rv-add__shot:hover .rv-add__shot-inner { border-color: var(--indigo); color: var(--ink, var(--text)); }
.rv-add__shot-inner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rv-add.has-shot .rv-add__shot-inner { border-style: solid; padding: 0; }
.rv-add__plus { font-size: 1.5rem; line-height: 1; font-weight: 300; }

/* Metin kutusu sitenin form görünümünü aynen kullanıyor (.field) */
.rv-add__text { margin-bottom: 0; }
.rv-add__text label { display: block; font-weight: 600; font-size: .88rem; margin-bottom: 6px; }
.rv-add__text textarea {
  width: 100%; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: var(--r-sm);
  font-family: inherit; font-size: .95rem; line-height: 1.5; resize: vertical;
  background: #fff; color: var(--ink); transition: border .2s, box-shadow .2s;
}
.rv-add__text textarea:focus {
  outline: none; border-color: var(--indigo); box-shadow: 0 0 0 3px rgba(79,96,172,.14);
}
.rv-add__act { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.rv-add__msg { font-size: .82rem; color: var(--text-soft); }

/* --- gönderim --- */
.rv-submit { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.rv-submit .field { margin-bottom: 10px; }
.rv-submit label { display: block; font-weight: 600; font-size: .88rem; margin-bottom: 6px; }
.rv-submit textarea {
  width: 100%; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: var(--r-sm);
  font-family: inherit; font-size: .95rem; line-height: 1.5; resize: vertical;
  background: #fff; color: var(--ink); transition: border .2s, box-shadow .2s;
}
.rv-submit textarea:focus {
  outline: none; border-color: var(--indigo); box-shadow: 0 0 0 3px rgba(79,96,172,.14);
}
.rv-submit__act { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.rv-submit__hint, .rv-submit__msg { font-size: .82rem; }
.rv-submit__msg { display: block; margin-top: 8px; color: var(--text-soft); }

/* İş kapandı: revize kutusu yerine veda mesajı */
.rv-kapali {
  margin-top: 12px; padding: 14px 16px; border-radius: 12px;
  background: rgba(47,184,122,.10); border: 1px solid rgba(47,184,122,.35);
}
.rv-kapali strong { display: block; font-size: .95rem; margin-bottom: 6px; }
.rv-kapali p { font-size: .86rem; line-height: 1.6; margin: 0; color: var(--text-body); }
/* =========================================================
   GÖRÜNÜR SORU-CEVAP (paket sayfaları + paketler.html)
   ---------------------------------------------------------
   Akordeon DEĞİL, düz metin. Sebep: bu blok öncelikle yapay zeka arama
   motorları (ChatGPT, Perplexity, Gemini) ve arama motoru tarayıcıları
   için var — onlar sayfanın ham HTML'ini okuyor. Katlanmış içerik hem
   "gizli" sayılabiliyor hem de kullanıcı için fazladan bir tık.
   Sohbet asistanı bu bloğun ALTINDA duruyor; biri diğerinin yerine
   geçmiyor: burası tarayıcılar ve hızlı okuyucular, orası konuşma.
   ========================================================= */
.sss { margin-top: 40px; }
.sss__head { font-size: 1.5rem; margin: 0 0 20px; }
.sss__liste { display: grid; gap: 22px; }
@media (min-width: 860px) {
  .sss__liste { grid-template-columns: 1fr 1fr; gap: 22px 40px; }
}
.sss__oge { max-width: 62ch; }
.sss__q {
  font-size: 1rem; line-height: 1.4; margin: 0 0 6px;
  color: var(--text);
}
.sss__a {
  font-size: .92rem; line-height: 1.65; margin: 0;
  color: var(--text-body);
}
/* Cevabın içindeki iç linkler.
   Site genelinde `a { text-decoration: none }` olduğu için bu linkler düz
   metinden ayırt edilemiyordu. Marka kararı: ALT ÇİZGİ YOK — renk + kalın.
   Renk sayfanın o anki konsept temasından geliyor (--link, her açılışta
   değişiyor); üzerine gelince siyaha dönüyor.
   Kalınlık renkten bağımsız ikinci işaret: yalnız renkle işaretlenen link
   renk körü okuyucuda kaybolurdu. */
.sss__a a {
  color: var(--link);
  font-weight: 600;
  text-decoration: none;
  transition: color .12s ease;
}
.sss__a a:hover { color: var(--text); }
.sss__a a:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 2px;
  border-radius: 3px;
}
@media (prefers-reduced-motion: reduce) { .sss__a a { transition: none; } }
/* Asistan kapalıyken: soru-cevap zaten yukarıda, yalnız kısa not kalır. */
.vtb-chat__fallback--sade { margin-top: 18px; font-size: .9rem; color: var(--text-soft); }

/* =========================================================
   MÜŞTERİ ONAYI
   ---------------------------------------------------------
   Kutu bilerek "olumlu" renkte (marka yeşili) ama düğmenin yanındaki
   uyarı susturulmuyor: onay revize hakkını kapatıyor.
   Kehribar/amber kullanılmıyor — durum renkleri marka paletinden.
   ========================================================= */
.onay {
  margin-top: 14px; padding: 16px; border-radius: 12px;
  background: rgba(110,200,191,.10); border: 1px solid rgba(110,200,191,.45);
}
.onay__head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.onay__ikon { display: inline-flex; color: var(--teal-d); }
.onay__head strong { font-size: .95rem; }
.onay__body { font-size: .86rem; line-height: 1.6; margin: 0 0 12px; color: var(--text-body); }

.onay__puan { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.onay__label { font-size: .82rem; color: var(--text-soft); }
.onay__yildizlar { display: inline-flex; gap: 2px; }
.onay__yildiz {
  background: none; border: 0; padding: 2px; cursor: pointer; line-height: 0;
  color: var(--line-2); transition: color .12s ease, transform .12s ease;
}
.onay__yildiz:hover { transform: translateY(-1px); }
.onay__yildiz.is-on { color: var(--yellow-d); }
.onay__yildiz:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; border-radius: 4px; }

.onay__not { margin-bottom: 12px; }
.onay__not label { display: block; font-size: .82rem; color: var(--text-soft); margin-bottom: 4px; }
.onay__not textarea {
  width: 100%; border: 1px solid var(--line-2); border-radius: 10px;
  padding: 10px 12px; font: inherit; font-size: .88rem; resize: vertical;
}
.onay__not textarea:focus {
  outline: none; border-color: var(--indigo); box-shadow: 0 0 0 3px rgba(79,96,172,.14);
}
.onay__act { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.onay__warn { font-size: .82rem; color: var(--text-body); }
.onay__msg { display: block; margin-top: 8px; font-size: .82rem; color: var(--text-soft); }

/* Onayla kapanan iş: veda kutusunun onaylı hâli */
.rv-kapali--onay .onay-tik { display: inline-flex; color: var(--teal-d); margin-bottom: 4px; }
.onay__undo { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 12px 0 0; }
.onay__hint { font-size: .8rem; }

/* Onay anındaki küçük kutlama: tik bir kez çizilip yerine oturur. */
@keyframes onayTik {
  0%   { transform: scale(.4); opacity: 0; }
  55%  { transform: scale(1.25); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.onay-tik.is-yeni { animation: onayTik .55s cubic-bezier(.2,.9,.3,1.4) both; }
@media (prefers-reduced-motion: reduce) {
  .onay-tik.is-yeni { animation: none; }
  .onay__yildiz:hover { transform: none; }
}

/* Teslim dosyalarının kullanım hakkı notu */
.dl-original { font-size: .8rem; color: var(--text-soft); line-height: 1.5; margin: 10px 0 0; }

.rv-past { margin-top: 12px; }
.rv-past > summary { cursor: pointer; font-size: .85rem; color: var(--text-soft); }

@media (max-width: 560px) {
  /* Dar ekranda üç sütun metni iğne deliğine sıkıştırıyordu: görsel ve
     rozet üstte yan yana, istek metni ALTTA tam genişlikte. */
  .rv-item { grid-template-columns: 56px 1fr auto; row-gap: 10px; align-items: start; }
  .rv-item__shot { width: 56px; height: 56px; grid-row: 1; grid-column: 1; }
  .rv-item__st { grid-row: 1; grid-column: 2; justify-self: start; }
  .rv-item__del { grid-row: 1; grid-column: 3; }
  .rv-item__body { grid-row: 2; grid-column: 1 / -1; }
  .rv-add { grid-template-columns: 1fr; }
  .rv-add__shot-inner { width: 100%; height: 110px; }
}

/* =========================================================
   TAKİP ÇAĞRISI (follow-band)
   ---------------------------------------------------------
   Footer'daki ikon şeridi "varız" der; bu blok "takip et" der. Farkı da
   biçiminden gelsin diye ikonun yanında kanalın ADI yazıyor ve öğeler
   düğme büyüklüğünde (dokunma hedefi 44px).
   ========================================================= */
.follow-band {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 22px;
  padding: 26px clamp(20px, 3vw, 34px);
  border: 1px solid var(--line); border-radius: 22px;
  background: var(--surface);
}
.follow-band__txt h3 { margin: 0 0 4px; font-size: clamp(1.05rem, 1.8vw, 1.25rem); }
.follow-band__txt p { margin: 0; color: var(--text-body); font-size: .93rem; max-width: 46ch; }
.follow-band__links { display: flex; flex-wrap: wrap; gap: 10px; }
.follow-link {
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 44px; padding: 0 16px; border-radius: 999px;
  border: 1px solid var(--line-2); background: #fff; color: var(--ink);
  font-size: .9rem; font-weight: 600; text-decoration: none;
  transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
}
.follow-link svg { width: 17px; height: 17px; fill: currentColor; flex: 0 0 auto; }
.follow-link:hover { transform: translateY(-2px); border-color: currentColor; }
/* Hover'da kanalın kendi rengi: tanıma bir anda oluyor, ama sayfa dururken
   dört farklı marka rengi yan yana durmasın diye yalnız hover'da. */
.follow-link--instagram:hover { color: #c13584; }
.follow-link--linkedin:hover  { color: #0a66c2; }
.follow-link--facebook:hover  { color: #1877f2; }
.follow-link--youtube:hover   { color: #ff0000; }

@media (max-width: 720px) {
  .follow-band { flex-direction: column; align-items: flex-start; gap: 16px; padding: 22px 18px; }
  .follow-band__links { width: 100%; }
  .follow-link { flex: 1 1 calc(50% - 5px); justify-content: center; }
}

/* ===== Bakış modu şeridi (ekip müşterinin panelini görüyor) =====
   Alta sabit: sitenin yapışkan başlığıyla çakışmıyor, sayfanın üstündeki
   içeriği örtmüyor ve her an görünür kalıyor — hangi hesaba baktığın
   sorusu bir saniye bile belirsiz kalmamalı. */
.bakis-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 18px; background: #2b2f3a; color: #fff;
  box-shadow: 0 -2px 14px rgba(0,0,0,.18);
  font-size: .9rem; line-height: 1.35;
}
.bakis-bar svg { width: 20px; height: 20px; flex: 0 0 auto; opacity: .85; }
.bakis-bar__t { flex: 1; min-width: 0; }
.bakis-bar__t small { display: block; opacity: .72; font-size: .78rem; }
.bakis-bar__x {
  flex: 0 0 auto; border: 1px solid rgba(255,255,255,.35); background: transparent;
  color: #fff; border-radius: 999px; padding: 7px 14px; font: inherit; font-weight: 600;
  cursor: pointer; transition: background-color .18s ease;
}
.bakis-bar__x:hover { background: rgba(255,255,255,.14); }
/* Şerit sayfanın son satırını örtmesin. */
body.has-bakis-bar { padding-bottom: 68px; }
@media (max-width: 620px) {
  .bakis-bar { align-items: flex-start; padding: 10px 14px; }
  .bakis-bar svg { display: none; }
  body.has-bakis-bar { padding-bottom: 92px; }
}

/* =========================================================
   RAKAMLAR KARTI (statband) — hakkımızda
   ---------------------------------------------------------
   Eski hâli sayfayı boydan boya kesen düz siyah bir şeritti. Sayfanın geri
   kalanı yuvarlak kartlardan oluştuğu için o keskin blok yamalı duruyordu.
   Yeni hâli sitenin kendi dilinde: yuvarlatılmış koyu kart + marka lekeleri.
   ========================================================= */
.statband {
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: clamp(24px, 3vw, 40px);
  background: var(--ink); color: #fff;
  padding: clamp(38px, 5vw, 64px) clamp(24px, 5vw, 64px);
}
.statband__blobs { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
/* Lekeler bilerek çok yumuşak: rakamların okunurluğunu düşürmeden koyu
   zemine derinlik veriyor. */
.statband__blob { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .26; }
.statband__blob--coral  { width: 30%; aspect-ratio: 1; left: -4%;  top: -55%; background: var(--coral); }
.statband__blob--teal   { width: 30%; aspect-ratio: 1; left: 38%;  bottom: -55%; background: var(--teal); }
.statband__blob--yellow { width: 24%; aspect-ratio: 1; right: -3%; top: -45%; background: var(--yellow); }
.statband__inner { position: relative; z-index: 1; }
.statband .eyebrow { background: rgba(255,255,255,.12); color: #fff; }
.statband__grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  margin-top: clamp(24px, 3vw, 38px);
}
/* Sütun ayracı: kart içinde üç blok yan yana dururken göz nereye ait
   olduğunu ayıramıyordu. Çizgi ilk sütunda yok. */
.statband__item + .statband__item {
  border-left: 1px solid rgba(255,255,255,.14);
}
.statband__item { padding: 4px clamp(12px, 2vw, 28px); text-align: center; }
.statband__num {
  font-size: clamp(2.6rem, 6vw, 4rem); font-weight: 800; line-height: 1;
  letter-spacing: -.04em; font-variant-numeric: tabular-nums;
}
.statband__item:nth-child(1) .statband__num { color: var(--coral); }
.statband__item:nth-child(2) .statband__num { color: var(--teal); }
.statband__item:nth-child(3) .statband__num { color: var(--yellow); }
.statband__item span {
  display: block; margin-top: 10px;
  color: rgba(255,255,255,.72); font-size: .95rem; line-height: 1.45;
}

@media (max-width: 700px) {
  /* Telefonda üç sütun rakamları iğne deliğine sıkıştırıyor: alt alta,
     ayraç da yataya döner. */
  .statband__grid { grid-template-columns: 1fr; gap: 22px; }
  .statband__item { padding: 0; }
  .statband__item + .statband__item {
    border-left: 0; border-top: 1px solid rgba(255,255,255,.14); padding-top: 22px;
  }
}

/* =========================================================
   ÖZEL PROJELER ÇAĞRI BANDI (ozel-band)
   ---------------------------------------------------------
   Paketler kendi kendine satılan iş; bu bant paket satın almayacak, konuşmak
   isteyen müşteri için. Bu yüzden fiyat kartlarının diliyle DEĞİL, koyu ve
   sakin bir yüzeyle ayrışıyor — sayfadaki satın alma çağrısıyla yarışmasın.
   ========================================================= */
.ozel-band {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 26px;
  padding: clamp(26px, 3.5vw, 40px) clamp(22px, 3.5vw, 44px);
  border-radius: clamp(20px, 2.5vw, 28px);
  background: var(--ink); color: #fff;
}
.ozel-band .eyebrow { background: rgba(255,255,255,.12); color: #fff; margin-bottom: 12px; }
.ozel-band__txt { max-width: 56ch; }
.ozel-band__txt h3 { margin: 0 0 8px; font-size: clamp(1.15rem, 2vw, 1.5rem); color: #fff; }
.ozel-band__txt p { margin: 0; color: rgba(255,255,255,.74); font-size: .95rem; line-height: 1.6; }
.ozel-band__cta { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
/* Koyu zeminde tema rengi düğme: her temada okunur çünkü metin rengi
   --on-primary ile birlikte geliyor. */
.ozel-band__cta .btn--primary { white-space: nowrap; }
.ozel-band__link {
  font-size: .88rem; font-weight: 600; color: rgba(255,255,255,.72);
  border-bottom: 1px solid rgba(255,255,255,.32); text-decoration: none;
}
.ozel-band__link:hover { color: #fff; border-bottom-color: #fff; }

@media (max-width: 780px) {
  .ozel-band { flex-direction: column; align-items: stretch; }
  .ozel-band__cta { align-items: stretch; }
  .ozel-band__cta .btn--primary { text-align: center; }
  .ozel-band__link { align-self: center; }
}

/* =========================================================
   ŞİFRE ALANI — göster/gizle düğmesi + Caps Lock uyarısı
   main.js, data-goz taşıyan her şifre alanına bunu kurar.
   Renkler marka paletinden; ayrı bir uyarı rengi tanımlanmadı.
   ========================================================= */
.sifre-alan { position: relative; display: block; }
.sifre-alan > input { width: 100%; padding-right: 44px; }
.sifre-goz {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; padding: 0; display: grid; place-items: center;
  background: none; border: 0; border-radius: 8px; cursor: pointer;
  color: var(--muted, #6b6b76); opacity: .75;
}
.sifre-goz:hover { opacity: 1; background: rgba(0,0,0,.05); }
.sifre-goz:focus-visible { outline: 2px solid var(--coral, #e8734a); outline-offset: 1px; opacity: 1; }
.sifre-goz svg { width: 18px; height: 18px; display: block; }
/* Dokunmatik ekranda 32px parmak için küçük kalıyordu (05.10.2026): dokunma
   alanı 42px, simge aynı boyda. Metin göz düğmesinin altına girmesin diye
   sağ pay da büyür. */
@media (pointer: coarse) {
  .sifre-goz { width: 42px; height: 42px; right: 4px; }
  .sifre-alan > input { padding-right: 50px; }
}
.sifre-caps {
  margin: 6px 0 0; font-size: .78rem; font-weight: 600;
  color: var(--coral-d, #c9542c); display: flex; align-items: center; gap: 6px;
}
/* display:flex, hidden ÖZNİTELİĞİNİ ezer (tarayıcının [hidden] kuralı daha
   zayıf). Bu satır olmadan uyarı Caps Lock kapalıyken de duruyordu. */
.sifre-caps[hidden] { display: none; }
.sifre-caps::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; flex: 0 0 auto;
}

/* ---------- Mobil menüdeki çağrı düğmesi ----------
   780px altında .nav-actions .btn gizleniyor (başlık sığmıyor), ama düğme
   menüye de konmadığı için mobilde "Bize Ulaş" hiçbir yerde görünmüyordu.
   Aynı bağlantının menü içindeki kopyası: masaüstünde gizli, açık menüde
   dolu düğme olarak en altta. Metni ve hedefi sayfa belirliyor — iletişim
   sayfasında "Paketleri Gör" oluyor. */
.nav-links__cta { display: none; }
@media (max-width: 780px) {
  /* Menü öğeleri içerik genişliğinde ve ortalı (.nav-links{align-items:center});
     ayırıcı çizgi yalnız düğmenin genişliği kadar uzayıp kaza gibi duruyordu,
     bu yüzden ayırma işini boşluk yapıyor. */
  .nav.open .nav-links .nav-links__cta { display: block; margin-top: 10px; }
  .nav.open .nav-links .nav-links__cta a {
    background: var(--primary); color: var(--on-primary);
    font-weight: 600; text-align: center; border-radius: 999px;
    padding: 12px 26px;
  }
  .nav.open .nav-links .nav-links__cta a:hover,
  .nav.open .nav-links .nav-links__cta a:focus-visible {
    background: var(--primary-d); color: var(--on-primary);
  }
}

/* ---------- Mobil menü paneli (25.09.2026) ----------
   Eski hâli: öğeler ortada dar hap düğmeler, üst üste yapışık; dokunulan
   öğe (mobilde :hover takılı kalıyor) ile seçili öğenin hapları birbirine
   değiyor, yarı saydam zeminden alttaki metin okunuyordu.
   Yeni hâli: tam genişlik, sola hizalı, satır ayırıcılı bir liste. Her satır
   ekranın eni boyunca dokunulabilir (≥52px), seçili sayfa marka renginde ve
   solunda bir çizgiyle işaretli. Panelin altı karartılır; menünün sayfanın
   ÜSTÜNDE durduğu belli olur. Hamburger X'e dönüşür. */
@media (max-width: 780px) {
  .nav.open .nav-links {
    /* margin-left: masaüstü kuralından (.nav-links 12px) geliyordu; panel
       soldan 12px içeride başlıyor, sağa yaslı duruyordu. */
    left: 0; right: 0; margin-left: 0;
    align-items: stretch; gap: 0;
    padding: 6px var(--gutter) 22px;
    background: var(--surface, #fff);
    -webkit-backdrop-filter: none; backdrop-filter: none;
    border-bottom: 0;
    /* Karartma: gölge yalnız panelin ALTINA düşer (y kayması = yayılma),
       başlık kararmaz. Tıklama main.js'te menüyü kapatıyor. */
    box-shadow: 0 100vmax 0 100vmax rgba(13, 13, 13, .32);
    max-height: calc(100dvh - 100%); overflow-y: auto; overscroll-behavior: contain;
    animation: menuAc .18s ease-out;
  }
  .nav.open .nav-links > li { border-bottom: 1px solid var(--line); }
  .nav.open .nav-links > li.nav-links__cta { border-bottom: 0; }
  .nav.open .nav-links > li:not(.nav-links__cta) > a {
    display: flex; align-items: center; justify-content: space-between;
    min-height: 54px; padding: 14px 4px 14px 14px;
    border-radius: 0; background: none;
    font-size: 1.08rem; font-weight: 600; color: var(--ink);
    position: relative;
  }
  /* Satır sonu ok: "bu bir bağlantı" işareti, emoji değil çizgi. */
  .nav.open .nav-links > li:not(.nav-links__cta) > a::after {
    content: ""; width: 8px; height: 8px; margin-right: 6px;
    border-top: 2px solid currentColor; border-right: 2px solid currentColor;
    transform: rotate(45deg); opacity: .35;
  }
  .nav.open .nav-links > li:not(.nav-links__cta) > a.is-active {
    color: var(--link, var(--ink));
  }
  .nav.open .nav-links > li:not(.nav-links__cta) > a.is-active::before {
    content: ""; position: absolute; left: 0; top: 14px; bottom: 14px;
    width: 3px; border-radius: 3px; background: currentColor;
  }
  .nav.open .nav-links > li:not(.nav-links__cta) > a:active { background: rgba(35, 31, 32, .05); }
  .nav.open .nav-links .nav-links__cta { margin-top: 18px; }
  .nav.open .nav-links .nav-links__cta a { display: block; padding: 15px 26px; font-size: 1rem; }

  /* Hamburger → X */
  .nav-toggle span { transform-origin: center; }
  .nav.open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav.open .nav-toggle span:nth-child(2) { opacity: 0; }
  .nav.open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* Menü açıkken sayfa arkada kaymasın. */
  html.menu-acik, html.menu-acik body { overflow: hidden; }
}
@keyframes menuAc { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .nav.open .nav-links { animation: none; }
}

/* Sipariş kartındaki fatura satırı: belge türü/numarası solda, indirme
   düğmesi yanında. Fatura yalnız resmileşince basılıyor, o yüzden bu blok
   çoğu kartta hiç görünmüyor — kart yüksekliğini sabit tutmuyoruz. */
.order-invoice {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 8px; font-size: .84rem;
}
.order-invoice__btn { padding: 6px 12px; font-size: .82rem; gap: 6px; }
.order-invoice__btn svg { width: 15px; height: 15px; }

/* =========================================================
   BLOG — liste ve yazı sayfası
   Düzen ve ölçüler referans tasarımdan birebir alındı: görsel ve metin
   AYRI iki blok (24px ara), ikisi de 36px yuvarlatılmış; metin bloğu açık
   gri zeminde; sağ altta yuvarlak ok düğmesi. Başlık ölçüleri de referanstan
   (h1 82px, bölüm başlığı 62px, kart başlığı 40px, hepsi 600 ağırlık).
   Renkler bizim: kategori etiketi tema rengi (--primary), zemin --gray.
   Ok düğmesi sitenin kendi .arrow-btn bileşeni — sektör kartlarındaki ile
   aynı, ayrı bir stil üretmiyoruz.
   Sayfalar tools/gen_blog.py ile üretiliyor — HTML elle düzenlenmez.
   ========================================================= */
.blog-hero h1 { font-size: clamp(2.4rem, 6.4vw, 5.125rem); line-height: 1.1; letter-spacing: -.02em;
  font-weight: 600; margin: 0 0 8px; }
.blog-hero .lead { margin-top: 12px; }

/* ---- kart ---- */
.post-card { display: flex; flex-direction: column; color: inherit; text-decoration: none; }
/* Süzgeç kartı `hidden` ile gizliyor ama yukarıdaki `display: flex`
   tarayıcının [hidden] kuralından daha güçlü — kart ekranda kalıyordu ve
   süzgeç hiç çalışmıyor görünüyordu. Kuralı burada geri alıyoruz. */
.post-card[hidden] { display: none !important; }
.post-card__cover { overflow: hidden; border-radius: 36px; background: var(--gray); margin-bottom: 24px; }
.post-card__cover img { display: block; width: 100%; height: auto; aspect-ratio: 592 / 418; object-fit: cover;
  transition: transform .5s cubic-bezier(.22,.61,.36,1); }
@media (hover: hover) { .post-card:hover .post-card__cover img { transform: scale(1.04); } }

.post-card__body { position: relative; flex: 1; display: flex; flex-direction: column; gap: 12px;
  background: var(--gray); border-radius: 36px; padding: 36px 36px 40px; }
.post-card__meta { display: flex; align-items: center; gap: 8px; margin: 0;
  font-size: .95rem; font-weight: 700; }
.post-card__cat { color: var(--primary); }
.post-card__dash { color: var(--text-soft); font-weight: 400; }
.post-card__date { color: var(--ink); }
.post-card__title { margin: 0; font-size: clamp(1.5rem, 3.2vw, 2.5rem); line-height: 1.25;
  letter-spacing: -.015em; color: var(--ink); font-weight: 600;
  /* Ok düğmesine yer: son satır okun altına girmesin (sektör kartlarındaki
     çakışmanın aynısı burada da olurdu). */
  padding-right: 74px; }
@media (hover: hover) { .post-card:hover .post-card__title { color: var(--primary); } }
.post-card__excerpt { margin: 0; color: var(--text-body); line-height: 1.65; padding-right: 74px; }
.post-card .arrow-btn { position: absolute; right: 26px; bottom: 26px; width: 64px; height: 64px;
  transition: background .25s ease, color .25s ease; }
.post-card .arrow-btn svg { width: 24px; height: 24px; }
@media (hover: hover) { .post-card:hover .arrow-btn { background: var(--primary-d, var(--primary)); color: var(--on-primary, #fff); } }

/* ---- öne çıkan yazı: görsel solda, metin sağda ---- */
.post-card--one { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: stretch; }
/* Öne çıkan görselin oranı referanstan: 596x694 (dikeye yakın). */
.post-card--one .post-card__cover { aspect-ratio: 596 / 694; margin-bottom: 0; }
.post-card--one .post-card__cover img { height: 100%; aspect-ratio: auto; min-height: 100%; }
.post-card--one .post-card__body { justify-content: center; gap: 16px; padding: clamp(32px, 4vw, 56px); }
.post-card--one .post-card__title { font-size: clamp(1.8rem, 3.9vw, 3.125rem); line-height: 1.16; }

/* ---- liste başlığı + kategori süzgeci ---- */
.blog-list__top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 18px; margin-bottom: clamp(28px, 4vw, 44px); }
.blog-list__top h2 { margin: 0; font-size: clamp(1.9rem, 5vw, 3.875rem); line-height: 1.13; letter-spacing: -.02em; }
.blog-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.blog-tab { padding: 9px 16px; border: 0; border-radius: 999px; background: transparent;
  color: var(--text-soft); font: inherit; font-size: .92rem; font-weight: 600; cursor: pointer;
  transition: background .18s, color .18s; }
.blog-tab:hover { color: var(--ink); }
.blog-tab.is-active { background: var(--ink); color: #fff; }

.blog-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px 48px; }
.blog-empty { margin-top: 28px; color: var(--text-soft); }

/* ---- yazı sayfası ---- */
.post__back { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 22px;
  color: var(--text-soft); font-size: .9rem; font-weight: 600; text-decoration: none; }
.post__back:hover { color: var(--ink); }
.post__meta { display: flex; align-items: center; gap: 8px; margin: 0 0 14px;
  font-size: .95rem; font-weight: 700; }
.post__title { max-width: 20ch; font-size: clamp(2.1rem, 5.2vw, 4.25rem); line-height: 1.1;
  letter-spacing: -.02em; margin: 0 0 8px; font-weight: 600; }
.post__lead { max-width: 62ch; margin-top: 18px; }
.post__cover { margin: clamp(32px, 5vw, 56px) 0; border-radius: 36px; overflow: hidden; background: var(--gray); }
.post__cover img { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 520; object-fit: cover; }

/* Gövde ölçüsü: satır 65-70 karakteri geçmesin diye ayrı bir genişlik. */
.post-body { max-width: 68ch; }
.post-body h2 { margin: 42px 0 12px; font-size: clamp(1.35rem, 2.4vw, 1.9rem); line-height: 1.28;
  letter-spacing: -.015em; font-weight: 600; }
.post-body p { margin: 0 0 18px; line-height: 1.75; color: var(--text-body); }
.post-body__list { margin: 0 0 22px; padding: 0; list-style: none; display: grid; gap: 10px; }
.post-body__list li { position: relative; padding-left: 26px; line-height: 1.7; color: var(--text-body); }
.post-body__list li::before { content: ""; position: absolute; left: 6px; top: .68em;
  width: 7px; height: 7px; border-radius: 999px; background: var(--primary); }
.post-body__quote { margin: 30px 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--primary);
  font-size: 1.12rem; line-height: 1.6; font-weight: 600; color: var(--ink); }
.blog-more { padding-top: clamp(56px, 8vw, 96px); }
.blog-more h2 { margin: 0 0 clamp(24px, 3vw, 36px); font-size: clamp(1.7rem, 4vw, 2.75rem);
  line-height: 1.16; letter-spacing: -.02em; }

@media (max-width: 860px) {
  .post-card--one { grid-template-columns: 1fr; gap: 24px; }
  /* Tek sütuna düşünce dikey oran kartı gereksiz uzatıyor; yatay orana dön. */
  .post-card--one .post-card__cover { aspect-ratio: 592 / 418; }
  .post-card--one .post-card__cover img { min-height: 0; aspect-ratio: 592 / 418; }
  .blog-grid { grid-template-columns: 1fr; gap: 40px; }
  .post__title { max-width: none; }
}
@media (max-width: 560px) {
  .post-card__body { padding: 26px 24px 30px; border-radius: 28px; }
  .post-card__cover, .post__cover { border-radius: 28px; }
  .post-card .arrow-btn { right: 18px; bottom: 18px; width: 52px; height: 52px; }
  .post-card .arrow-btn svg { width: 20px; height: 20px; }
  .post-card__title, .post-card__excerpt { padding-right: 56px; }
  /* Süzgeç çubuğu telefonda taşmasın: kaydırılabilir ama sayfayı sürüklemesin
     (paketlerdeki karşılaştırma tablosunda yaşanan sorunun aynısı). */
  .blog-tabs { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch; width: 100%; padding-bottom: 4px; }
  .blog-tab { flex: 0 0 auto; }
}

/* ---- Blog yazısı içindeki satış çağrıları ----
   İnce satır gövdenin içinde, kutu yazının sonunda. İkisi de yazının
   kategorisine göre ilgili paket grubuna gidiyor (bkz. tools/gen_blog.py).
   Kutuda iki düğme var: dolgulu birincil + çerçeveli ikincil. Gerekçesi
   paket kartlarındakiyle aynı (CRO #02) — tek adım soğuk ziyaretçi için
   fazla büyük. */
.post-cta-inline { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px;
  margin: 30px 0; padding: 18px 22px; border-radius: 20px;
  background: var(--gray); border-left: 3px solid var(--primary);
  font-size: .96rem; line-height: 1.6; color: var(--text-body); }
.post-cta-inline a { color: var(--ink); font-weight: 700; text-decoration: none;
  border-bottom: 2px solid var(--primary); }
.post-cta-inline a:hover { color: var(--primary); }

.post-cta__box { max-width: 820px; margin-inline: auto; text-align: center;
  background: var(--gray); border-radius: 36px; padding: clamp(32px, 5vw, 64px); }
.post-cta__box h2 { margin: 0; font-size: clamp(1.5rem, 3vw, 2.25rem); line-height: 1.2;
  letter-spacing: -.02em; font-weight: 600; }
.post-cta__box p { margin: 14px auto 0; max-width: 54ch; color: var(--text-body); line-height: 1.7; }
.post-cta__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 26px; }
.post-cta__hint { font-size: .86rem; color: var(--text-soft); margin-top: 14px !important; }
@media (max-width: 560px) {
  .post-cta__box { border-radius: 28px; }
  .post-cta__btns { flex-direction: column; }
  .post-cta__btns .btn { width: 100%; }
}

/* ---- Taksit bandı (ana sayfa, fiyat bölümünün üstünde) ----
   Fiyat itirazının oluştuğu yerde duruyor. Rozet/aciliyet yok, düz bilgi.
   Oran metne yazılmıyor; kesin tutar ödeme adımında canlı sorgudan geliyor. */
/* BOŞLUK TEK KAYNAKTAN. Bandın altındaki aralık üç yerden birikiyordu:
   kendi payı + bölümün alt dolgusu + alttaki bölümün üst dolgusu. Üstte ise
   tek kaynak vardı, bu yüzden alt boşluk üstün üç katı görünüyordu
   (masaüstünde 32'ye karşı 158 px). Komşuların katkısı sıfırlandı; üstte de
   altta da tek ölçü var, ikisi eşit. */
.page-hero:has(.taksit-band) { padding-bottom: 0; }
.page-hero:has(.taksit-band) ~ .pkg-panel .pkg-cat { padding-top: 0; }
.home-pricing:has(.taksit-band) .sec-head-center { margin-bottom: 0; }

.taksit-band { display: flex; align-items: center; gap: 18px;
  max-width: 760px; margin-inline: auto; margin-block: clamp(22px, 3vw, 32px);
  padding: 20px 24px; border-radius: 22px;
  /* Paketler sayfasında kapsayıcı metni ORTALIYOR (.page-hero). Bant o hizayı
     miras alınca ikon solda, yazı ortada kalıyor ve kutu bozuk görünüyordu.
     Hizayı burada sabitliyoruz — bant nereye konursa konsun aynı duruyor. */
  text-align: left;
  background: color-mix(in srgb, var(--primary) 8%, #fff);
  border: 1px solid color-mix(in srgb, var(--primary) 26%, #fff); }
.taksit-band__ic { flex: 0 0 auto; display: grid; place-items: center;
  width: 48px; height: 48px; border-radius: 14px;
  background: var(--primary); color: var(--on-primary, #fff);
  box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--primary) 70%, transparent); }
.taksit-band__ic svg { width: 24px; height: 24px; }
/* Başlık VURGU RENGİNDE DEĞİL. Tema coral/teal/yellow/indigo arasında
   dönüyor; açık zeminde vurgu rengiyle yazılan başlık yalnız indigoda
   okunuyordu (teal 2,5:1, sarı 1,9:1 — WCAG alt sınırı 4,5:1). Renk ikonda
   duruyor, orada metin yok. Mürekkep rengiyle dört temada da 14:1 üstü. */
.taksit-band__txt strong { display: block; font-size: 1.14rem; font-weight: 700;
  letter-spacing: -.01em; color: var(--ink); }
.taksit-band__txt p { margin: 6px 0 0; font-size: .9rem; line-height: 1.6; color: var(--text-body); }
.taksit-band__note { font-size: .82rem !important; color: var(--text-soft) !important; }
@media (max-width: 560px) {
  .taksit-band { flex-direction: column; gap: 12px; padding: 16px 18px; border-radius: 18px; }
}

/* ===================================================== GÜVENCE BLOĞU (CRO-03)
   Satın alma düğmesinin dibinde "vazgeçersem ne olur" sorusunun cevabı.
   Metinler /iptal-iade ve /mesafeli-satis'ten bire bir geliyor.

   TİK/ONAY İKONU YOK — bilerek. Kapsam listesindeki yeşil tikler "bu var"
   der; buradaki satırlar ise koşullu haklar. Aynı işareti kullanmak
   "garanti" izlenimi verirdi. Nötr madde imi kullanılıyor.

   Blok, kapsam listesinin KATLAMASININ DIŞINDA (CRO-02): .plan__features
   içine girmediği için "Tüm kapsamı gör" kapalıyken de görünür. */
.plan__assure,
.pd-assure {
  margin-top: 14px; padding-top: 14px;
  border-top: 1px solid var(--line);
  color: #3a3a3a; font-size: .82rem; line-height: 1.55;
}
.plan__assure ul,
.pd-assure ul { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.plan__assure li,
.pd-assure li { display: flex; gap: 8px; align-items: flex-start; }
/* Madde imi ::before ile — <li> içindeki metin data-i18n ile
   değiştirildiği için imin metnin İÇİNDE olmaması gerekiyor. */
.plan__assure li::before,
.pd-assure li::before {
  content: ""; flex: 0 0 auto; width: 4px; height: 4px; margin-top: .55em;
  border-radius: 50%; background: #9a9a9a;
}
.plan__assure__link,
.pd-assure__link {
  display: inline-block; margin-top: 10px;
  font-size: .8rem; color: var(--indigo); text-decoration: underline;
  text-underline-offset: 2px;
}
.plan__assure__link:hover,
.pd-assure__link:hover { color: var(--indigo-d); }
/* İngilizce tarafta aynı cümle düz yazı: /iptal-iade'nin İngilizcesi
   yayında değil, var olmayan adrese link verilmiyor. */
.plan__assure__link.is-duz,
.pd-assure__link.is-duz { color: #3a3a3a; text-decoration: none; }
/* build_lang.py eşleşmeyen düğümü zaten siliyor; bu kural yalnız
   üretim öncesi yerel bakış için emniyet kemeri. */
html[lang="en"] [data-lang-only="tr"],
html[lang="tr"] [data-lang-only="en"] { display: none; }

/* Ödeme güveni notu: kart ızgarasının altında BİR KEZ. Rozet, kilit
   simgesi veya iyzico logosu yok — marka kullanımı ayrı izin konusu. */
.pkg-pay-note {
  margin: 22px auto 0; max-width: 46ch;
  text-align: center; font-size: .82rem; line-height: 1.6; color: #3a3a3a;
}

/* ============ ÜCRETSİZ HESAP ANALİZİ BANDI (KAMPANYA-01) ============
   Özel Projeler bandıyla aynı sayfada duruyor; ikisi aynı görünürse sayfa
   iki koyu blokla bitiyor. Bu yüzden bu bant AÇIK zeminli: mercan tonlu
   yumuşak bir kart, koyu bandın karşısında kendi ağırlığı var ama onunla
   yarışmıyor.

   YASAK OLANLAR (04 sahte kıtlık kuralı): geri sayım, azalan ilerleme
   çubuğu, yanıp sönme, renk değiştiren uyarı. Sayaç düz bir rozet. */
.analiz-band {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 26px;
  padding: clamp(24px, 3.2vw, 36px) clamp(22px, 3.5vw, 40px);
  border-radius: clamp(20px, 2.5vw, 28px);
  background: color-mix(in srgb, var(--coral) 7%, #fff);
  border: 1px solid color-mix(in srgb, var(--coral) 22%, #fff);
}
.analiz-band__txt { max-width: 56ch; }
/* CRO-04 (25.09.2026): /paketler'de bant hero'nun İÇİNDE, sekmelerin
   üstünde duruyor. Hero metni ortalı; bant kendi sol hizasını geri alır,
   yoksa başlık ve açıklama ortalanıp kart düzeni dağılıyor.
   Yuvanın alt payı yok: hemen altındaki .pkg-jump kendi 34px üst payını
   getiriyor. */
.analiz-yuva { margin: clamp(20px, 3vw, 28px) 0 0; }
.analiz-yuva .analiz-band { text-align: left; }
/* Rozetin altında pay YOK'tu: .eyebrow kendi payını taşımıyor, her bölüm
   kendi aralığını veriyor (page-hero 16, sec-head-center ~16, ozel-band 12).
   Bant bu listede olmadığı için "ÜCRETSİZ" ile başlık dipdibe duruyordu. */
.analiz-band .eyebrow { margin-bottom: 12px; }
.analiz-band__txt h3 {
  margin: 0 0 8px; font-size: clamp(1.15rem, 2vw, 1.5rem); color: var(--ink);
}
.analiz-band__txt p { margin: 0; color: var(--text-soft); font-size: .95rem; line-height: 1.6; }
.analiz-band__cta { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
/* Sayaç: rozet değil, düz sayı. Rakam sütunlarda kaymasın diye tabular. */
.analiz-band__sayac,
.analiz-sayac {
  margin: 0; font-size: .84rem; font-weight: 600; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.analiz-sayac { margin-top: 14px; text-align: center; }
@media (max-width: 720px) {
  .analiz-band { flex-direction: column; align-items: flex-start; }
  .analiz-band__cta { width: 100%; }
  .analiz-band__cta .btn { width: 100%; }
}

/* ---- /ucretsiz-analiz form sayfası ---- */
.analiz-wrap { max-width: 620px; }
.analiz-wrap .panel { padding: clamp(24px, 3vw, 36px); }
.analiz-durum h3 { margin: 0 0 10px; }
.analiz-durum p { margin: 0 0 18px; }
.analiz-not {
  margin: 4px 0 18px; padding: 12px 14px;
  background: var(--gray); border-radius: 12px;
  font-size: .84rem; line-height: 1.55; color: var(--text-soft);
}
.analiz-hata {
  margin: 12px 0 0; padding: 10px 12px; border-radius: 10px;
  font-size: .86rem; color: #fff; background: var(--coral-d, var(--coral));
}

/* ---- Analiz yazışması ----
   Balonlar sipariş yazışmasının .omsg bileşenini kullanıyor: aynı avatar
   dili, aynı hizalama. Buradaki kurallar yalnız kapsayıcı ve boş durum. */
.analiz-yazisma { margin-top: 18px; }
.analiz-yazisma h3 { margin: 0 0 8px; }
.analiz-yazisma > p { margin: 0 0 16px; }
.analiz-mesajlar {
  display: flex; flex-direction: column; gap: 12px;
  max-height: 340px; overflow-y: auto; overscroll-behavior: contain;
  padding: 4px 2px 12px; margin-bottom: 14px;
}
.analiz-bos { margin: 0; padding: 12px 0; text-align: center; font-size: .88rem; }
/* Liste boşken kutu kendi dolgusunu da eklemesin: "hazırlanıyor" notu ile
   "henüz mesaj yok" arasındaki boşluk üç yerden birikiyordu — notun alt
   payı, listenin dolgusu ve boş durumun kendi dolgusu. */
.analiz-mesajlar:has(.analiz-bos) { padding-block: 0; margin-bottom: 12px; }
/* Teşekkür kartındaki iki düğme yan yana; dar ekranda alt alta iner. */
.analiz-durum__cta { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 480px) {
  .analiz-durum__cta { flex-direction: column; align-items: stretch; }
  .analiz-durum__cta .btn { width: 100%; justify-content: center; }
}

/* Panel içi yazışma (yönetim ekranı) */

/* ---- Analiz bandının çizimi ----
   Renkler tema değişkenlerinden: beş temanın hepsinde bandın kendi
   rengiyle çıkıyor, sabit renk gömülü değil. Çizim bandın SOLUNDA durur;
   dar ekranda metnin üstüne geçer ve küçülür — metin her zaman önce gelir,
   çünkü teklifi anlatan o.

   Çizim BEZEME DEĞİL: kutulardan üçü vurgulu ve yanlarında 1-2-3 rozetleri
   var; bu, metindeki "üç tespit" ifadesinin birebir görsel karşılığı. */
.analiz-band__gorsel { flex: 0 0 auto; line-height: 0; }
.analiz-gorsel { display: block; width: 168px; height: 140px; }
@media (max-width: 900px) {
  .analiz-gorsel { width: 126px; height: 105px; }
}
.ag-kart {
  fill: #fff;
  stroke: color-mix(in srgb, var(--primary) 30%, #fff);
  stroke-width: 1.5;
}
.ag-avatar { fill: color-mix(in srgb, var(--primary) 30%, #fff); }
.ag-satir { fill: color-mix(in srgb, var(--ink) 12%, #fff); }
.ag-satir--kisa { fill: color-mix(in srgb, var(--ink) 8%, #fff); }
.ag-kutu { fill: color-mix(in srgb, var(--ink) 7%, #fff); }
.ag-kutu--vurgu { fill: color-mix(in srgb, var(--primary) 22%, #fff); }
.ag-cizgi {
  stroke: color-mix(in srgb, var(--primary) 35%, #fff);
  stroke-width: 1.5; stroke-linecap: round; fill: none;
}
.ag-rozet { fill: var(--primary); }
/* Rozet numarası: düğme metniyle aynı kural — zemin tema rengi olduğu için
   metin rengi de düğmeden okunur, sarı temada siyah, koyu temalarda beyaz. */
.ag-no {
  fill: var(--on-primary, #fff);
  font: 700 15px/1 "Plus Jakarta Sans", system-ui, sans-serif;
  text-anchor: middle;
}

/* Çizim gelince bant üç parçalı oldu: çizim · metin · çağrı.
   Metin esner, diğer ikisi kendi boyunda kalır. */
.analiz-band:has(.analiz-band__gorsel) { gap: clamp(20px, 3vw, 34px); }
.analiz-band__txt { flex: 1 1 320px; }
@media (max-width: 900px) {
  /* Dar ekranda önce metin okunsun: çizim yana geçemiyorsa küçülür ve
     başlığın üstünde durur, metnin altına itilmez. */
  .analiz-band { flex-wrap: wrap; }
  .analiz-band__gorsel { order: -1; }
}
@media (max-width: 480px) {
  /* Çok dar ekranda çizim yer kaplamaktan başka iş görmüyor. */
  .analiz-band__gorsel { display: none; }
}

/* ---- Hesabım · Analizim ---- */
.analiz-kart {
  border: 1px solid var(--line); border-radius: 18px;
  padding: 20px 22px; margin-bottom: 16px;
}
.analiz-kart:last-child { margin-bottom: 0; }
.analiz-kart__ust { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 16px; }
.analiz-kart__ust h4 { margin: 0; font-size: 1.05rem; }
.analiz-kart__ust span { font-size: .84rem; }
/* Hazır rapor: kartın içindeki tek eylem, o yüzden ayrı bir zemini var. */
.analiz-rapor {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px;
  background: var(--gray); border-radius: 14px; padding: 14px 16px; margin-bottom: 16px;
}
.analiz-rapor__bilgi { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.analiz-rapor__bilgi strong { font-size: .92rem; word-break: break-word; }
.analiz-rapor__bilgi span { font-size: .78rem; }
.analiz-bekliyor {
  margin: 0 0 12px; padding: 12px 14px; border-radius: 12px;
  background: var(--gray); font-size: .86rem; line-height: 1.55; color: var(--text-soft);
}
.analiz-kart__form { display: flex; gap: 10px; align-items: flex-end; margin-top: 14px; }
/* Kutu .field sarmalayıcısının DIŞINDA: font-family verilmezse tarayıcı
   textarea'yı kendi tek aralıklı yazı tipiyle çiziyor ve alan sitenin
   geri kalanına yabancı duruyordu. Diğer form alanlarıyla aynı kurallar. */
.analiz-kart__form textarea {
  flex: 1 1 auto; min-width: 0; resize: vertical; min-height: 46px;
  padding: 12px 15px; border: 1px solid var(--line-2); border-radius: var(--r-sm);
  font-family: inherit; font-size: .95rem; line-height: 1.5;
  background: #fff; color: var(--ink); transition: border .2s, box-shadow .2s;
}
.analiz-kart__form textarea:focus {
  outline: none; border-color: var(--indigo); box-shadow: 0 0 0 3px rgba(79,96,172,.14);
}
.analiz-kart__form textarea::placeholder { color: var(--text-soft); }
@media (max-width: 560px) {
  .analiz-kart__form { flex-direction: column; align-items: stretch; }
}

/* ---- Analiz bandı: kapsam kuralı + hatırlatma ---- */
.analiz-band__kural {
  margin-top: 8px !important;
  font-size: .82rem !important;
  color: var(--text-soft);
}
/* Kota doluyken açılan form. Bandın çağrı sütununda duruyor; dar ekranda
   tam genişliğe yayılıyor çünkü e-posta alanı sıkışınca yazılamıyor. */
.analiz-hatirlat { display: block; margin-top: 4px; max-width: 340px; }
.analiz-hatirlat__et {
  display: block; font-size: .78rem; font-weight: 600;
  color: var(--ink); margin-bottom: 6px;
}
.analiz-hatirlat__satir { display: flex; gap: 8px; }
.analiz-hatirlat__satir input {
  flex: 1 1 auto; min-width: 0;
  padding: 10px 12px; border: 1px solid var(--line-2); border-radius: var(--r-sm);
  font-family: inherit; font-size: .9rem; background: #fff; color: var(--ink);
}
.analiz-hatirlat__satir input:focus {
  outline: none; border-color: var(--indigo); box-shadow: 0 0 0 3px rgba(79,96,172,.14);
}
.analiz-hatirlat__satir .btn { flex: 0 0 auto; }
.analiz-hatirlat__not { margin: 8px 0 0; font-size: .74rem; line-height: 1.5; color: var(--text-soft); }
.analiz-hatirlat__not a { color: inherit; text-decoration: underline; }
.analiz-hatirlat__durum { margin: 8px 0 0; font-size: .82rem; line-height: 1.5; }
.analiz-hatirlat__durum.is-ok { color: var(--teal-d, var(--ink)); font-weight: 600; }
.analiz-hatirlat__durum.is-hata { color: var(--coral-d, var(--coral)); }
@media (max-width: 720px) {
  .analiz-hatirlat { max-width: none; width: 100%; }
}

/* Hatırlatma alanının başlığı ve açıklaması. Eskiden yalnız "E-posta
   adresin" etiketi vardı; adresi verince ne olacağını söylemiyordu. */
.analiz-hatirlat__bas { display: block; font-size: .95rem; font-weight: 700; color: var(--ink); }
.analiz-hatirlat__ac {
  margin: 6px 0 12px; font-size: .84rem; line-height: 1.55; color: var(--text-soft);
}

/* =========================================================
   ANALİZ BANDI — görünüm revizyonu (25.09.2026)
   ---------------------------------------------------------
   1) Zemin: sabit mercan karışımıydı; temadan bağımsız pembe bir kutu
      uyarı mesajı gibi okunuyordu (etiketlerdeki pembe zemin de aynı
      sebeple kaldırılmıştı, bkz. .eyebrow). Genel görünüm artık nötr açık
      yüzey; rengi düğme taşıyor.
   2) /paketler'de bant hero'nun hemen altında, sayfanın ana çağrısı
      (CRO-04). Orada KOYU kart: uyarı değil, dikkat çeken bir teklif.
      Diğer sayfalarda koyu yapılmadı — orada koyu "Özel projeler" bandının
      ve koyu footer'ın arasında duruyor, üç koyu blok üst üste binerdi.
   3) Dar ekranda metin sütununun esneme payı (flex: 1 1 320px) sütun
      yönünde YÜKSEKLİĞE dönüşüyordu: 200px'lik metin 320px yer tutuyor,
      metinle sayaç arasında boş bir alan kalıyordu.
   ========================================================= */
.analiz-band {
  background: color-mix(in srgb, var(--ink) 3.5%, #fff);
  border-color: var(--line);
}
@media (max-width: 720px) {
  .analiz-band__txt { flex: 0 0 auto; max-width: none; }
  .analiz-band__txt h3 { font-size: 1.4rem; line-height: 1.2; letter-spacing: -.02em; }
}

/* --- /paketler: koyu teklif kartı --- */
.analiz-yuva .analiz-band {
  background: var(--ink); border: 0; color: #fff;
  box-shadow: 0 18px 40px rgba(13, 13, 13, .18);
}
.analiz-yuva .analiz-band .eyebrow {
  background: var(--primary); color: var(--on-primary);
}
.analiz-yuva .analiz-band__txt h3 { color: #fff; }
.analiz-yuva .analiz-band__txt p { color: rgba(255, 255, 255, .74); }
.analiz-yuva .analiz-band__kural { color: rgba(255, 255, 255, .5) !important; }
/* Sayaç: düz bilgi çipi. Nokta sabit — yanıp sönme yok (sahte kıtlık kuralı). */
.analiz-yuva .analiz-band__sayac {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 13px; border-radius: 999px;
  background: rgba(255, 255, 255, .1); color: #fff; font-weight: 600;
}
.analiz-yuva .analiz-band__sayac::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--primary); flex: 0 0 auto;
}
.analiz-yuva .analiz-band__sayac[hidden] { display: none; }
/* Bant hero'nun İÇİNDE: .page-hero p { margin: 16px auto 0 } bandın
   paragraflarına da işliyor — sayacı ortalıyor ve üstüne 16px ekliyordu.
   Yatay payı sıfırla; sayacın dikey payını sütunun gap'i veriyor. */
.analiz-yuva .analiz-band p { margin-left: 0; margin-right: 0; }
.analiz-yuva .analiz-band__sayac { margin: 0; }
.analiz-yuva .analiz-band .btn--primary { box-shadow: none; }
/* Kota dolunca açılan hatırlatma formu koyu zeminde okunsun. */
.analiz-yuva .analiz-hatirlat__bas,
.analiz-yuva .analiz-hatirlat__et { color: #fff; }
.analiz-yuva .analiz-hatirlat__ac,
.analiz-yuva .analiz-hatirlat__not,
.analiz-yuva .analiz-hatirlat__durum { color: rgba(255, 255, 255, .72); }
.analiz-yuva .analiz-hatirlat .btn--dark { background: #fff; color: var(--ink); }
@media (max-width: 720px) {
  .analiz-yuva .analiz-band { padding: 26px 22px 24px; gap: 18px; }
  .analiz-yuva .analiz-band__txt h3 { font-size: 1.62rem; line-height: 1.14; margin-bottom: 10px; }
  /* Sayaç metinle aynı sol hizada; ortada kalınca metinden kopuk duruyordu. */
  .analiz-yuva .analiz-band__cta { gap: 12px; align-items: stretch; text-align: left; }
  .analiz-yuva .analiz-band__sayac { align-self: flex-start; }
  .analiz-yuva .analiz-band__cta .btn { min-height: 52px; font-size: 1.02rem; }
}

/* =====================================================================
   KATEGORİ SAYFASI (.wh) — tools/gen_packages.py → build_hub()
   ---------------------------------------------------------------------
   Kahraman ana sayfanın renkli kartını (hero-v2/hero-stage) aynen kullanır;
   tema rengi, daireler ve tipografi oradan gelir. Burada yalnız sayfaya
   özel parçalar var: sahne, süreç, sahiplik, ham HTML bölümü, mobil bandı.
   ===================================================================== */
.wh-eyebrow {
  display: inline-block; margin-bottom: 18px; padding: 7px 14px; border-radius: 999px;
  font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--hero-ink, #fff); background: color-mix(in srgb, var(--hero-ink, #fff) 16%, transparent);
}
/* Sahne kartın altına oturur ve alt kenardan kırpılır (ana sayfadaki tablet gibi).
   SVG'de filtre YOK — iPhone'da filtreli görseller siyah kare çiziliyordu. */
.wh-scene { position: relative; z-index: 2; margin-top: clamp(28px, 4vw, 48px); }
.wh-scene svg { display: block; width: 100%; max-width: 980px; height: auto; margin-inline: auto; }

.wh-head { margin-bottom: clamp(26px, 4vw, 40px); }
.wh-head h2 { text-wrap: balance; }

/* Paket kartı ve detay sayfasındaki "mobil uygulama için yaz" bağlantısı:
   satın alma ve görüşme düğmelerinin altında, bilerek DÜĞME DEĞİL. */
.plan__mobil, .pd-mobil {
  display: block; margin-top: 12px; font-size: .86rem; line-height: 1.45; color: var(--text-soft);
  text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-2);
  text-wrap: balance;
}
.plan__mobil:hover, .pd-mobil:hover { color: var(--ink); text-decoration-color: currentColor; }
.plan__mobil { text-align: center; }

/* Süreç: beş adım yan yana; daralınca 3 / 2 / 1. Izgara değil esnek kutu:
   son satır (ör. 3 + 2) boş yuva bırakmadan ORTALANIR. */
.wh-steps { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.wh-step { flex: 0 1 calc((100% - 64px) / 5);
  position: relative; padding: 22px 20px 24px; border-radius: var(--r-lg);
  background: var(--gray); border: 1px solid var(--line);
}
.wh-step__no {
  display: inline-grid; place-items: center; width: 34px; height: 34px; margin-bottom: 14px;
  border-radius: 50%; background: var(--ink); color: #fff; font-weight: 700; font-size: .95rem;
}
.wh-step h3 { font-size: 1.05rem; margin-bottom: 8px; }
.wh-step p { color: var(--text-soft); font-size: .93rem; }

.wh-own h3 { font-size: 1.08rem; }
.wh-own .ic { margin-bottom: 16px; }

/* Ham HTML bölümü: solda anlatım, sağda madde kartı. */
.wh-geo-sec { background: var(--gray); }
.wh-geo { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.wh-geo .prose h2 { margin-bottom: 18px; text-wrap: balance; font-size: clamp(1.7rem, 3.2vw, 2.5rem); }
.wh-geo__card {
  padding: clamp(22px, 3vw, 32px); border-radius: var(--r-xl); background: #fff;
  border: 1px solid var(--line); box-shadow: var(--shadow-sm);
}
.wh-geo__card .pd-included { margin: 0; grid-template-columns: 1fr; }
.wh-geo__note { margin-top: 16px; font-size: .88rem; color: var(--text-soft); }

/* Mobil uygulama bandı: satılmıyor, iletişime yönlendiriyor. */
.wh-mobil {
  display: grid; grid-template-columns: auto 1fr auto; gap: clamp(18px, 3vw, 32px); align-items: center;
  padding: clamp(22px, 3.4vw, 36px); border-radius: var(--r-xl);
  border: 1px solid var(--line); background: #fff;
}
.wh-mobil .ic { margin: 0; }
.wh-mobil__txt h2 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); margin-bottom: 8px; }
.wh-mobil__txt p { color: var(--text-soft); max-width: 640px; }

@media (max-width: 1100px) {
  .wh-step { flex-basis: calc((100% - 32px) / 3); }
}
@media (max-width: 780px) {
  .wh-step { flex-basis: calc((100% - 16px) / 2); }
  .wh-geo { grid-template-columns: 1fr; }
  .wh-mobil { grid-template-columns: 1fr; text-align: left; }
  .wh-mobil .btn { justify-self: start; }
  /* Sahne dar ekranda kod kartı ve telefonla birlikte küçülüyor; kırpılan
     alt kısım artmasın diye biraz daha yukarı oturuyor. */
  .wh-scene { margin-top: 22px; }
}
@media (max-width: 560px) {
  .wh-step { flex-basis: 100%; }
}

/* Hakkımızda → Özel projeler: iletişim düğmesi (05.10.2026). Bölüm ortalı
   kurulu; düğme de ortada, iki blok arasında nefes payıyla. */
.ozel-cta { display: flex; justify-content: center; margin-top: 28px; }
.steps + .ozel-cta { margin-top: 44px; }

/* İletişim formu: talep türü (09.10.2026). İki seçenek yan yana, seçili
   olan dolu; gerçek radyo düğmeleri, klavye ve ekran okuyucu ile çalışır. */
.talep-tur { border: 0; margin: 0 0 18px; padding: 0; min-width: 0; min-inline-size: 0; }
/* legend ızgaraya katılamıyor (tarayıcı onu fieldset'in kenarına yapıştırıyor):
   seçenekler ayrı bir ızgarada. fieldset'in min-content genişliği de sıfırlandı,
   yoksa paneli ekrandan taşırıyordu. */
.talep-tur__secenek { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.talep-tur__bas { font-size: .88rem; font-weight: 600; color: var(--ink); margin-bottom: 8px; padding: 0; }
.talep-tur__opt { position: relative; display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 48px; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 12px;
  font-weight: 600; font-size: .92rem; cursor: pointer; transition: border-color .15s, background .15s; }
.talep-tur__opt input { position: absolute; opacity: 0; pointer-events: none; }
.talep-tur__opt:has(input:checked) { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, #fff); }
.talep-tur__opt:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 2px; }
.field[hidden] { display: none; }

/* Ön görüşme randevu seçici (09.10.2026): günler ve saatler ızgara, sığmayan
   alt satıra geçer. Seçili olan marka renginde. */
/* Gün şeridi kendi içinde kayar; kapsayıcıları en geniş hâli kadar açılmasın. */
.contact-grid > *, .slot-sec { min-width: 0; }
.slot-sec__bas { display: block; font-size: .88rem; font-weight: 600; color: var(--ink); margin-bottom: 8px; }
/* Gün şeridi (09.10.2026): yatay kayar, fareyle sürüklenir. Kaydırma
   çubuğu gizli; devamı kenardaki solmayla ve yuvarlak oklarla belli olur
   (solma yalnız o yönde gün varsa açılır: .var-sol / .var-sag). */
.slot-ay { font-size: .8rem; font-weight: 600; color: var(--text-soft); margin: 0 0 8px; text-transform: capitalize; min-height: 1.2em; }
.slot-serit-sar { position: relative; }
.slot-serit {
  display: flex; gap: 8px; overflow-x: auto; scroll-behavior: smooth;
  scrollbar-width: none; -ms-overflow-style: none;
  padding: 2px 2px 4px; cursor: grab; outline: none;
  -webkit-mask-image: linear-gradient(90deg, var(--m-sol, #000) 0, #000 36px, #000 calc(100% - 36px), var(--m-sag, #000) 100%);
          mask-image: linear-gradient(90deg, var(--m-sol, #000) 0, #000 36px, #000 calc(100% - 36px), var(--m-sag, #000) 100%);
}
.slot-serit::-webkit-scrollbar { display: none; }
.slot-serit.is-suruk { cursor: grabbing; scroll-behavior: auto; user-select: none; }
.slot-serit:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 14px; }
.var-sol .slot-serit { --m-sol: transparent; }
.var-sag .slot-serit { --m-sag: transparent; }
.slot-ok {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; padding: 0;
  border: 1px solid var(--line); background: #fff; color: var(--ink); cursor: pointer;
  box-shadow: 0 4px 14px rgba(13, 13, 13, .12); transition: transform .15s, box-shadow .15s;
}
.slot-ok[hidden] { display: none; }
.slot-ok--sol { left: -6px; }
.slot-ok--sag { right: -6px; }
.slot-ok:hover { box-shadow: 0 6px 18px rgba(13, 13, 13, .18); }
.slot-ok:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
/* Dokunmatik ekranda ok yok: parmakla kaydırmak doğal, oklar kenardaki
   kartın (çoğu zaman seçili günün) üstüne biniyordu. Solma yerinde kalır. */
@media (hover: none) { .slot-ok, .slot-ok:not([hidden]) { display: none; } }
/* Gün kartı: gün adı · büyük gün numarası · ay. */
.slot-gun {
  flex: 0 0 66px; padding: 9px 4px 8px; border: 1.5px solid var(--line); border-radius: 14px;
  background: #fff; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 1px;
  font: inherit; color: var(--ink); transition: border-color .15s, background .15s, transform .15s;
}
.slot-serit.is-suruk .slot-gun { cursor: grabbing; }
.slot-gun:not(.is-dolu):not(.is-on):hover { border-color: var(--primary); transform: translateY(-1px); }
.slot-gun .g-ad { font-size: .72rem; color: var(--text-soft); text-transform: capitalize; }
.slot-gun .g-no { font-size: 1.35rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.slot-gun .g-ay { font-size: .7rem; color: var(--text-soft); text-transform: capitalize; }
.slot-gun.is-on .g-ad, .slot-gun.is-on .g-ay { color: inherit; opacity: .85; }
.slot-saatler { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; margin-top: 10px; }
.slot-saat { min-height: 42px; border: 1.5px solid var(--line); border-radius: 10px; background: #fff; cursor: pointer;
  font: inherit; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); }
.slot-gun.is-on, .slot-saat.is-on { border-color: var(--primary); background: var(--primary); color: var(--on-primary); }
.slot-gun:focus-visible, .slot-saat:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.slot-not, .slot-yok { margin: 10px 0 0; font-size: .8rem; color: var(--text-soft); }
.slot-hata { margin: 8px 0 0; font-size: .84rem; font-weight: 600; color: var(--coral-d, #c9542c); }
.slot-yok[hidden], .slot-hata[hidden] { display: none; }

/* Dolu saat ve gün (09.10.2026): görünür ama seçilemez; yalnız renge dayanmaz,
   altında "Dolu" yazar ve saat üstü çizilir. */
.slot-saat.is-dolu, .slot-gun.is-dolu {
  cursor: not-allowed; background: #f4f4f6; border-color: transparent; color: #9a9aa3;
  display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1;
}
/* Çizgi yalnız saatte; ebeveyne verilince alttaki "Dolu" da çiziliyordu. */
.slot-saat.is-dolu s { text-decoration-thickness: 1px; }
.slot-saat.is-dolu small, .slot-gun.is-dolu small { font-size: .66rem; font-weight: 600; text-decoration: none; display: block; margin-top: 2px; }