/* =========================================================
   VENÜS SİGORTA — v3 "MERİDYEN FERAH" · İÇ SAYFA İSKELETİ
   style.css'in üzerine biner. Anasayfada olmayan ama birden
   fazla iç sayfada tekrar eden her parça burada tanımlıdır:
   mega menü, sayfa hero'su, kırıntı, koyu bölüm, bölüm içi
   sekme çubuğu, ortak kart/ızgara kalıpları ve CTA bandı.

   Kural: burada SAYFAYA ÖZGÜ hiçbir stil olmaz. Tek sayfada
   kullanılan blok, o sayfanın kendi CSS dosyasına yazılır.
   ========================================================= */

/* ---------- 0. LİSTE SIFIRLAMA (style.css yalnızca ul'yi sıfırlıyor) ---------- */
ol{ margin:0; padding:0; list-style:none; }

/* =========================================================
   1. MEGA MENÜ (masaüstü)
   Panel .hdr__pill'e göre konumlanır; hangi menü öğesinden
   açılırsa açılsın ortalanır ve dar ekranda taşmaz.
   ========================================================= */
.hdr__pill{ position:relative; }

.nav__has > a{ display:inline-flex; align-items:center; gap:.3rem; }
.nav__caret{
  width:13px; height:13px; margin-top:1px; opacity:.55;
  transition:transform var(--t-fast) var(--e-out), opacity var(--t-fast) var(--e-out);
}
.nav__has.is-open > a{ background:var(--paper-2); color:var(--ink); }
.nav__has.is-open .nav__caret{ transform:rotate(180deg); opacity:1; }

.mega{
  position:absolute; z-index:5;
  top:calc(100% + .55rem); left:50%;
  width:min(880px, calc(100vw - 2rem));
  transform:translateX(-50%) translateY(-8px);
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--shadow-lift);
  padding:.75rem;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity var(--t) var(--e-out), transform var(--t) var(--e-out), visibility 0s var(--t);
}
.nav__has.is-open .mega{
  opacity:1; visibility:visible; pointer-events:auto;
  transform:translateX(-50%); transition-delay:0s;
}
/* fare köprüsü: menü ile panel arasındaki boşlukta hover kopmasın */
.mega::before{
  content:""; position:absolute; left:0; right:0; top:-.75rem; height:.75rem;
}

.mega__inner{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.5fr);
  gap:.75rem; align-items:stretch;
}
/* .hdr öneki şart: style.css'teki ".nav ul" ve ".nav a" kuralları
   aynı özgüllükte olduğu için önek olmadan ızgara flex'e düşüyor. */
.hdr .mega__list{ display:grid; grid-template-columns:1fr 1fr; gap:.1rem; }
.hdr .mega__list > li{ min-width:0; }
.hdr .mega__list a{
  display:grid; grid-template-columns:36px minmax(0,1fr); gap:.7rem; align-items:start;
  padding:.6rem .7rem; border-radius:var(--r-md);
  text-decoration:none; color:var(--ink);
  font-size:1rem; font-weight:400; white-space:normal; line-height:1.4;
  background:transparent;
  transition:background var(--t-fast) var(--e-out);
}
.hdr .mega__list a:hover{ background:var(--paper-2); }
.hdr .mega__list a[aria-current="page"]{ background:var(--brand-wash); }
.mega__ico{
  width:36px; height:36px; border-radius:var(--r-sm);
  display:grid; place-items:center;
  background:var(--brand-wash); color:var(--brand);
  transition:background var(--t-fast) var(--e-out), color var(--t-fast) var(--e-out);
}
.mega__ico svg{ width:19px; height:19px; }
.hdr .mega__list a:hover .mega__ico{ background:var(--brand); color:#fff; }
.mega__txt{ min-width:0; display:block; padding-top:.1rem; }
.mega__txt b{ display:block; font-size:.92rem; font-weight:700; letter-spacing:-.01em; line-height:1.3; }
.mega__txt span{
  display:block; margin-top:.15rem; font-size:.78rem; line-height:1.4;
  color:var(--ink-soft);
}

.mega__aside{
  display:flex; flex-direction:column; align-items:flex-start;
  background:var(--ink); color:rgba(255,255,255,.72);
  border-radius:var(--r-md); padding:1.1rem 1.2rem 1.2rem;
}
.mega__eyebrow{
  font-size:.68rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:#FF6B64;
}
.mega__aside b{
  display:block; margin-top:.6rem; color:#fff;
  font-size:1rem; font-weight:800; letter-spacing:-.02em; line-height:1.3;
}
.mega__aside p{ margin-top:.5rem; font-size:.8rem; line-height:1.55; }
.hdr .mega__cta{
  display:inline-flex; align-items:center; gap:.45rem; margin-top:auto; padding:1rem 0 0;
  font-size:.85rem; font-weight:700; color:#fff; text-decoration:none;
  background:transparent; border-radius:0; white-space:normal;
}
.hdr .mega__cta:hover{ background:transparent; color:#fff; }
.hdr .mega__cta svg{ width:15px; height:15px; transition:transform var(--t-fast) var(--e-out); }
.hdr .mega__cta:hover svg{ transform:translateX(3px); }
.hdr .mega__all{
  align-self:flex-start;
  margin-top:.7rem; padding:0 0 .15rem; font-size:.78rem; font-weight:600; text-decoration:none;
  color:rgba(255,255,255,.62); background:transparent; border-radius:0; white-space:normal;
  border-bottom:1px solid rgba(255,255,255,.25);
  transition:color var(--t-fast) var(--e-out), border-color var(--t-fast) var(--e-out);
}
.hdr .mega__all:hover{ color:#fff; border-color:#fff; background:transparent; }

/* =========================================================
   2. MOBİL MENÜ GENİŞLETMELERİ
   style.css'teki .mnav dikey ortalanıyordu; alt menüyle
   birlikte içerik uzadığı için kaydırılabilir hale getirildi.
   ========================================================= */
.mnav{ display:block; padding:0; }
.mnav__scroll{
  height:100%; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
  display:flex; flex-direction:column; gap:.1rem;
  padding:5.5rem var(--gutter) 2.5rem;
}
.mnav__scroll > a{ font-size:clamp(1.35rem, 4.6vw, 1.85rem); }

.mnav__group{ display:flex; flex-direction:column; }
.mnav__toggle{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  width:100%; padding:.45rem 0; background:none; border:0; text-align:left;
  color:var(--ink); font-size:clamp(1.35rem, 4.6vw, 1.85rem); font-weight:800;
  letter-spacing:-.02em; line-height:1.12;
}
.mnav__toggle svg{
  width:20px; height:20px; flex:none; color:var(--ink-soft);
  transition:transform var(--t) var(--e-out);
}
.mnav__toggle[aria-expanded="true"]{ color:var(--brand); }
.mnav__toggle[aria-expanded="true"] svg{ transform:rotate(180deg); color:var(--brand); }

.mnav__sub{
  height:0; overflow:hidden;
  transition:height var(--t) var(--e-out);
}
.mnav .mnav__sub a{
  display:flex; align-items:center; min-height:44px;
  padding:.15rem 0 .15rem 1rem; margin-left:.15rem;
  border-left:2px solid var(--line);
  font-size:1rem; font-weight:600; letter-spacing:0; color:var(--ink-2);
}
.mnav .mnav__sub a:first-child{ padding-top:.5rem; }
.mnav .mnav__sub a:hover{ color:var(--brand); border-left-color:var(--brand); }
.mnav .mnav__suball{ color:var(--brand); font-weight:700; }

.mnav__foot{
  display:flex; flex-direction:column; align-items:stretch; gap:1rem;
  margin-top:2rem; padding-top:1.6rem; border-top:1px solid var(--line);
}
.mnav .mnav__foot .btn{ margin-top:0; align-self:stretch; font-size:1rem; }
.mnav .mnav__tel{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font-size:1rem; font-weight:700; color:var(--ink-2); padding:0;
}
.mnav .mnav__tel svg{ width:17px; height:17px; color:var(--brand); }

/* =========================================================
   3. SAYFA HERO (.phero) + KIRINTI (.crumb)
   Anasayfa hero'sunun kart dili korunur: yuvarlatılmış koyu
   kart, üstüne binen fotoğraf ve sola hizalı metin.
   ========================================================= */
.phero{ padding:calc(clamp(4.6rem, 8vw, 6rem) + .4rem) var(--gutter) 0; }
.phero__card{
  position:relative; overflow:hidden;
  max-width:calc(var(--maxw) - var(--gutter) * 2); margin-inline:auto;
  border-radius:var(--r-xl); background:var(--ink);
  min-height:clamp(400px, 56vh, 600px);
  display:flex; align-items:flex-end;
}
.phero__media{ position:absolute; inset:0; }
.phero__media img{
  width:100%; height:100%; object-fit:cover; object-position:center 38%;
  animation:pheroZoom 9s var(--e-soft) both;
}
@keyframes pheroZoom{ from{ transform:scale(1.06); } to{ transform:scale(1); } }
.phero__media::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(72deg, rgba(14,16,21,.86) 6%, rgba(14,16,21,.5) 48%, rgba(14,16,21,.12) 82%),
    linear-gradient(0deg, rgba(14,16,21,.62), transparent 46%);
}
/* dev, içi boş rakam/sözcük damgası — isteğe bağlı */
.phero__stamp{
  position:absolute; z-index:1; pointer-events:none; user-select:none;
  right:clamp(.5rem, 2vw, 2.5rem); bottom:clamp(1rem, 3vw, 2.5rem);
  font-size:clamp(5rem, 15vw, 12rem); font-weight:800; line-height:.78; letter-spacing:-.05em;
  color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.14);
}

.phero__inner{
  position:relative; z-index:2; width:100%;
  padding:clamp(2.4rem, 5vw, 4rem) clamp(1.6rem, 4.5vw, 4.5rem) clamp(2.2rem, 4vw, 3.4rem);
}
.phero__inner > *{ max-width:min(820px, 100%); }
.phero .eyebrow{ margin-top:1.4rem; margin-bottom:1.2rem; }
.phero h1{
  color:#fff; font-size:var(--h1); letter-spacing:-.028em; line-height:1.08;
  text-wrap:balance;
}
.phero h1 .accent{
  color:#fff;
  background:linear-gradient(transparent 62%, rgba(208,32,26,.85) 62%);
  padding-inline:.08em;
}
.phero__lead{
  margin-top:1.25rem; max-width:min(58ch, 100%);
  color:rgba(255,255,255,.86); font-size:clamp(1rem, 1.3vw, 1.14rem); line-height:1.7;
}
.phero__meta{ display:flex; flex-wrap:wrap; gap:.5rem .6rem; margin-top:2rem; }
.phero__meta li{
  border:1px solid rgba(255,255,255,.24); border-radius:var(--r-pill);
  padding:.42rem 1rem; font-size:.8rem; font-weight:600; color:rgba(255,255,255,.85);
  backdrop-filter:blur(6px);
}
.phero__cta{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.9rem; }

/* giriş animasyonu */
.phero__inner > *{ animation:pheroUp 700ms var(--e-out) both; }
.phero__inner > *:nth-child(1){ animation-delay:60ms; }
.phero__inner > *:nth-child(2){ animation-delay:150ms; }
.phero__inner > *:nth-child(3){ animation-delay:240ms; }
.phero__inner > *:nth-child(4){ animation-delay:330ms; }
.phero__inner > *:nth-child(5){ animation-delay:420ms; }
.phero__inner > *:nth-child(6){ animation-delay:510ms; }
@keyframes pheroUp{ from{ opacity:0; transform:translateY(22px); } to{ opacity:1; transform:none; } }

.crumb ol{ display:flex; flex-wrap:wrap; align-items:center; gap:.45rem; }
.crumb li{
  display:flex; align-items:center; gap:.45rem;
  font-size:.78rem; font-weight:600; color:rgba(255,255,255,.62);
}
.crumb li + li::before{ content:"/"; color:rgba(255,255,255,.35); }
/* dokunma hedefi: metin küçük, tıklanabilir alan 44px'e tamamlanır */
.crumb a{
  display:inline-flex; align-items:center; min-height:44px;
  color:rgba(255,255,255,.75); text-decoration:none;
  transition:color var(--t-fast) var(--e-out);
}
.crumb a:hover{ color:#fff; }
.crumb li[aria-current]{ color:#fff; }

/* =========================================================
   4. KOYU BÖLÜM
   ========================================================= */
.sec--dark{
  position:relative; overflow:hidden;
  background:var(--ink); color:rgba(255,255,255,.76);
}
.sec--dark h2, .sec--dark h3, .sec--dark h4{ color:#fff; }
.sec--dark h2 em, .sec--dark h3 em{ color:#FF6B64; }
.sec--dark .sechead p{ color:rgba(255,255,255,.7); }
.sec--dark .eyebrow{ color:#FF6B64; }
/* .sechead dışında kalan metin sütunlarına da dikey ritim ver:
   koyu bölümlerde eyebrow + h2 + paragraf sırası sık kullanılıyor. */
.sec--dark .eyebrow + h2,
.sec--dark .eyebrow + h3{ margin-top:1.1rem; }
.sec--dark h2 + p,
.sec--dark h3 + p{ margin-top:1.1rem; color:rgba(255,255,255,.76); max-width:62ch; }
.sec--dark p + p{ margin-top:1rem; }
.sec--dark .btn--ghost{ background:transparent; border-color:rgba(255,255,255,.35); color:#fff; }
.sec--dark .btn--ghost:hover{ border-color:#fff; background:rgba(255,255,255,.08); }
.sec--dark > .wrap{ position:relative; z-index:1; }

/* =========================================================
   4b. BAŞLIK TABANI
   style.css yalnızca bileşen içindeki başlıkları boyutlandırıyor
   (.sechead h2, .up__block > h2, .hc h2 …). Bileşen dışında kalan
   çıplak başlıklar boyutsuz kalmasın diye zayıf bir taban veriyoruz;
   özgüllüğü düşük olduğu için mevcut bileşen kuralları hep kazanır.
   ========================================================= */
main h2{ font-size:var(--h2); }
main h3{ font-size:var(--h3); }

/* =========================================================
   4c. SSS AKORDİYONU — ERİŞİLEBİLİRLİK
   .fq__a kapalıyken yalnızca height:0 + overflow:hidden idi;
   içerik görünmüyordu ama ekran okuyucu okumaya devam ediyordu.
   visibility:hidden onu erişilebilirlik ağacından da çıkarır.
   ========================================================= */
.fq__q[aria-expanded="false"] + .fq__a{
  visibility:hidden;
  transition:height var(--t) var(--e-out), visibility 0s var(--t);
}
.fq__q[aria-expanded="true"] + .fq__a{
  visibility:visible;
  transition:height var(--t) var(--e-out), visibility 0s 0s;
}

/* =========================================================
   5. METİN KALIPLARI
   ========================================================= */
.lead{
  font-size:clamp(1.05rem, 1.55vw, 1.28rem); line-height:1.6;
  color:var(--ink-2); max-width:62ch;
}
.prose > * + *{ margin-top:1.1rem; }
.prose p{ color:var(--ink-soft); max-width:68ch; }
.prose h3{ font-size:var(--h3); margin-top:2rem; }
.prose ul{ display:grid; gap:.65rem; }
.prose ul li{
  position:relative; padding-left:1.6rem; color:var(--ink-soft); max-width:64ch;
}
.prose ul li::before{
  content:""; position:absolute; left:.15rem; top:.62em;
  width:7px; height:7px; border-radius:50%; background:var(--brand);
}
.prose strong{ color:var(--ink); font-weight:700; }
/* koyu zemin karşılıkları */
.sec--dark .prose p{ color:rgba(255,255,255,.76); }
.sec--dark .prose ul li{ color:rgba(255,255,255,.76); }
.sec--dark .prose ul li::before{ background:#FF6B64; }
.sec--dark .prose strong{ color:#fff; }
.sec--dark .lead{ color:rgba(255,255,255,.88); }

.pull{
  padding:1.1rem 1.4rem; margin-top:1.6rem;
  border-left:3px solid var(--brand); border-radius:0 var(--r-md) var(--r-md) 0;
  background:var(--brand-wash);
  font-size:clamp(1.02rem, 1.45vw, 1.18rem); font-weight:700; color:var(--ink);
  letter-spacing:-.01em; line-height:1.5;
}
.sec--dark .pull{ background:rgba(255,255,255,.06); color:#fff; }

.note{
  margin-top:1.2rem; font-size:.82rem; line-height:1.6; color:var(--ink-soft);
  max-width:72ch;
}
.sec--dark .note{ color:rgba(255,255,255,.65); }

/* =========================================================
   6. İKON KART IZGARASI (.tiles)
   ========================================================= */
.tiles{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:clamp(1rem, 2vw, 1.6rem);
}
.tiles--3{ grid-template-columns:repeat(3, minmax(0,1fr)); }
.tiles--4{ grid-template-columns:repeat(4, minmax(0,1fr)); }
.tile{
  position:relative; min-width:0; height:100%;
  display:flex; flex-direction:column;
  padding:clamp(1.4rem, 2.2vw, 1.85rem);
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg);
  text-decoration:none; color:inherit;
  transition:transform var(--t) var(--e-out), border-color var(--t) var(--e-out), box-shadow var(--t) var(--e-out);
}
.tile::before{
  content:""; position:absolute; left:-1px; right:-1px; top:-1px; height:3px;
  background:var(--brand); border-radius:var(--r-lg) var(--r-lg) 0 0;
  transform:scaleX(0); transform-origin:left;
  transition:transform var(--t) var(--e-out);
}
a.tile:hover, .tile--hover:hover{
  transform:translateY(-5px); border-color:transparent; box-shadow:var(--shadow-lift);
}
a.tile:hover::before, .tile--hover:hover::before{ transform:scaleX(1); }
.tile__ico{
  width:46px; height:46px; border-radius:var(--r-md); margin-bottom:1.1rem;
  display:grid; place-items:center;
  background:var(--brand-wash); color:var(--brand);
  transition:background var(--t) var(--e-out), color var(--t) var(--e-out);
}
.tile__ico svg{ width:23px; height:23px; }
a.tile:hover .tile__ico, .tile--hover:hover .tile__ico{ background:var(--brand); color:#fff; }
.tile h3{ font-size:1.1rem; letter-spacing:-.02em; }
.tile p{ margin-top:.6rem; font-size:.93rem; line-height:1.6; color:var(--ink-soft); }
.tile__link{
  display:inline-flex; align-items:center; gap:.45rem; margin-top:auto; padding-top:1rem;
  font-size:.88rem; font-weight:700; color:var(--brand);
}
/* kartın kendisi bağlantı değilse bu satır tek dokunma hedefi olur */
a.tile__link{ min-height:44px; text-decoration:none; }
.tile__link svg{ width:16px; height:16px; transition:transform var(--t-fast) var(--e-out); }
a.tile:hover .tile__link svg{ transform:translateX(3px); }

.sec--dark .tile{ background:rgba(255,255,255,.04); border-color:var(--line-dark); }
.sec--dark .tile h3{ color:#fff; }
.sec--dark .tile p{ color:rgba(255,255,255,.68); }
.sec--dark .tile__ico{ background:rgba(255,255,255,.08); color:#FF6B64; }
.sec--dark a.tile:hover{ border-color:transparent; box-shadow:none; background:rgba(255,255,255,.08); }
/* marka kırmızısı koyu zeminde 3.3:1 kalıyor; açık tonu 5.8:1 veriyor */
.sec--dark .tile__link{ color:#FF6B64; }

/* numaralı varyant: ikon yerine sıra numarası */
.tile__no{
  font-size:.75rem; font-weight:800; letter-spacing:.14em; color:var(--brand);
  font-variant-numeric:tabular-nums; margin-bottom:.9rem;
}

/* =========================================================
   7. GÖRSEL + METİN İKİLİSİ (.split)
   ========================================================= */
.split{
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(2.2rem, 5vw, 4.5rem); align-items:center;
}
.split--rev .split__media{ order:-1; }
.split--wide{ grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); }
.split__media{ position:relative; min-width:0; }
.split__media img{
  width:100%; aspect-ratio:4/3.2; object-fit:cover; border-radius:var(--r-xl);
}
.split__media--tall img{ aspect-ratio:4/4.6; }
.split__tag{
  position:absolute; left:clamp(1rem, 2vw, 1.5rem); right:clamp(1rem, 2vw, 1.5rem);
  bottom:clamp(1rem, 2vw, 1.5rem);
  display:flex; flex-direction:column; gap:.15rem;
  background:rgba(255,255,255,.94); backdrop-filter:blur(8px);
  border-radius:var(--r-md); padding:.9rem 1.15rem;
  box-shadow:var(--shadow-card);
}
.split__tag b{ font-size:.94rem; color:var(--ink); }
.split__tag span{ font-size:.82rem; color:var(--ink-soft); }
.sec--dark .split__tag{
  background:rgba(20,23,28,.82); border:1px solid var(--line-dark);
}
.sec--dark .split__tag b{ color:#fff; }
.sec--dark .split__tag span{ color:rgba(255,255,255,.65); }

/* =========================================================
   8. ETİKET LİSTESİ / ÖZELLİK SATIRLARI
   ========================================================= */
.chips{ display:flex; flex-wrap:wrap; gap:.55rem; }
.chips li{
  padding:.5rem 1rem; border-radius:var(--r-pill);
  background:var(--paper); border:1px solid var(--line);
  font-size:.86rem; font-weight:600; color:var(--ink-2);
}
.sec--dark .chips li{ background:rgba(255,255,255,.05); border-color:var(--line-dark); color:rgba(255,255,255,.9); }

.checks{ display:grid; gap:.8rem; }
.checks li{ display:flex; align-items:flex-start; gap:.75rem; font-size:.95rem; color:var(--ink-2); }
.checks svg{ width:18px; height:18px; flex:none; margin-top:.25rem; color:var(--brand); }
.sec--dark .checks li{ color:rgba(255,255,255,.86); }
.sec--dark .checks svg{ color:#FF6B64; }

.kv{ display:grid; gap:0; }
.kv > div{
  display:grid; grid-template-columns:minmax(120px,.55fr) minmax(0,1fr);
  gap:.4rem 1.5rem; align-items:baseline;
  padding-block:.95rem; border-top:1px solid var(--line);
}
.kv > div:last-child{ border-bottom:1px solid var(--line); }
.kv dt{ font-size:.82rem; font-weight:700; letter-spacing:.02em; color:var(--ink-soft); }
.kv dd{ margin:0; font-size:.95rem; color:var(--ink); }
.kv dd a{
  display:inline-flex; align-items:center; min-height:44px;
  font-weight:700; color:var(--ink); text-decoration:none;
  box-shadow:inset 0 -1px 0 var(--line);
  transition:color var(--t-fast) var(--e-out), box-shadow var(--t-fast) var(--e-out);
}
.kv dd a:hover{ color:var(--brand); box-shadow:inset 0 -1px 0 var(--brand); }
.sec--dark .kv > div{ border-color:var(--line-dark); }
.sec--dark .kv dt{ color:rgba(255,255,255,.5); }
.sec--dark .kv dd{ color:#fff; }

/* =========================================================
   9. BÖLÜM İÇİ GEZİNME ÇUBUĞU (.pgnav)
   Uzun sayfalarda başlıklara atlar, aktif bölümü işaretler.
   ========================================================= */
.pgnav{
  position:sticky; top:0; z-index:40;
  background:rgba(255,255,255,.92); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.pgnav__inner{
  display:flex; align-items:center; gap:1.2rem;
  max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter);
}
.pgnav__lbl{
  flex:none; font-size:.76rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-soft);
}
.pgnav__list{
  display:flex; gap:.2rem; overflow-x:auto; scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.pgnav__list::-webkit-scrollbar{ display:none; }
.pgnav__list a{
  display:block; white-space:nowrap; padding:1rem .85rem;
  font-size:.88rem; font-weight:600; color:var(--ink-soft); text-decoration:none;
  border-bottom:2px solid transparent;
  transition:color var(--t-fast) var(--e-out), border-color var(--t-fast) var(--e-out);
}
.pgnav__list a:hover{ color:var(--ink); }
.pgnav__list a.is-on{ color:var(--brand); border-bottom-color:var(--brand); }
.pgnav__cta{ margin-left:auto; flex:none; }
.pgnav__cta .btn{ padding:.7rem 1.3rem; font-size:.88rem; }

/* pgnav sabitlenince başlıklar altına gizlenmesin */
[id]{ scroll-margin-top:112px; }

/* =========================================================
   10. CTA BANDI
   style.css'teki .hc bloğunun görseli değiştirilebilir sürümü.
   Kullanım: <section class="hc hc--var" style="--bg:url('...')">
   ========================================================= */
.hc--var .hc__inner::before{ background-image:var(--bg); }
.hc--var .hc__inner::after{
  background:linear-gradient(80deg, rgba(14,16,21,.9) 18%, rgba(14,16,21,.6) 58%, rgba(14,16,21,.38));
}
/* tek sütunlu, ortalanmış sürüm */
.hc--solo .hc__grid{ grid-template-columns:minmax(0,1fr); max-width:760px; }

/* =========================================================
   11. SAYFA İÇİ DANIŞMANLIK FORMU
   Anasayfadaki .qbar kartı, hero'ya binmeyen düz sürüm.
   ========================================================= */
.qbar--flat{ margin-top:0; padding-block:clamp(3.5rem, 6.5vw, 6rem); background:var(--paper-2); }
.qbar--flat .qbar__card{ box-shadow:var(--shadow-card); }

/* =========================================================
   12. İLGİLİ SAYFA KARTLARI (.rel)
   ========================================================= */
.rel__grid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(1rem, 2vw, 1.6rem); }
.rel__card{
  display:flex; flex-direction:column; min-width:0;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg);
  overflow:hidden; text-decoration:none; color:inherit;
  transition:transform var(--t) var(--e-out), box-shadow var(--t) var(--e-out), border-color var(--t) var(--e-out);
}
.rel__card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lift); border-color:transparent; }
.rel__media{ position:relative; display:block; aspect-ratio:16/10; overflow:hidden; }
.rel__media img{ width:100%; height:100%; object-fit:cover; transition:transform 600ms var(--e-out); }
.rel__card:hover .rel__media img{ transform:scale(1.05); }
.rel__body{ display:flex; flex-direction:column; gap:.5rem; padding:1.2rem 1.3rem 1.4rem; flex:1; }
.rel__body h3{ font-size:1.08rem; letter-spacing:-.02em; }
.rel__body p{ font-size:.9rem; color:var(--ink-soft); }
.rel__more{
  display:inline-flex; align-items:center; gap:.45rem; margin-top:auto; padding-top:.7rem;
  font-size:.88rem; font-weight:700; color:var(--brand);
}
.rel__more svg{ width:16px; height:16px; transition:transform var(--t-fast) var(--e-out); }
.rel__card:hover .rel__more svg{ transform:translateX(3px); }

/* =========================================================
   13. HENÜZ YAYINDA OLMAYAN İÇERİK
   Bilgi Merkezi yazıları hazır değil. Kart görünümü korunur
   ama tıklanabilir gibi durmaz: kaldırma efekti ve ok kalkar.
   ========================================================= */
.bl__soon{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.7rem 1.2rem; border-radius:var(--r-pill);
  border:1px dashed var(--line); background:var(--paper);
  font-size:.88rem; font-weight:600; color:var(--ink-soft);
}
.bl__soon svg{ width:17px; height:17px; color:var(--brand); }
.bl__card--soon{ cursor:default; }
.bl__card--soon:hover{ transform:none; box-shadow:none; border-color:var(--line); }
.bl__card--soon:hover .bl__media img{ transform:none; }
.bl__more--soon{
  color:var(--ink-soft); font-weight:600; font-size:.85rem;
  border-top:1px dashed var(--line); margin-top:auto; padding-top:.9rem; width:100%;
}

/* =========================================================
   14. RESPONSIVE
   ========================================================= */
@media (max-width: 1180px){
  .tiles--4{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .split, .split--wide{ grid-template-columns:minmax(0,1fr); }
  .split--rev .split__media{ order:0; }
  .split__media img, .split__media--tall img{ aspect-ratio:16/10; }
  .rel__grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}

@media (max-width: 1024px){
  /* mega menü yalnızca masaüstünde; .nav zaten gizleniyor */
  .mega{ display:none; }
  .tiles--3{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .pgnav{ display:none; }
  [id]{ scroll-margin-top:88px; }
}

@media (max-width: 680px){
  .phero{ padding-inline:.75rem; }
  .phero__card{ min-height:clamp(380px, 62svh, 520px); }
  .phero__cta .btn{ width:100%; }
  .phero__meta li{ font-size:.75rem; padding:.35rem .8rem; }
  .tiles, .tiles--3, .tiles--4{ grid-template-columns:minmax(0,1fr); }
  .rel__grid{ grid-template-columns:minmax(0,1fr); }
  .kv > div{ grid-template-columns:minmax(0,1fr); gap:.25rem; }
}

/* =========================================================
   15. HAREKET AZALTMA
   ========================================================= */
@media (prefers-reduced-motion: reduce){
  .phero__media img,
  .phero__inner > *{ animation:none; opacity:1; transform:none; }
}