/* Webflow export'unun üstüne bizim kurallarımız (site.css'ten sonra yüklenir). Önizlemede ne görünüyorsa yayında o.
   Sığmayan dev başlıklar /js/fit-headings.js ile küçülür (kelime bölmek yerine). */

/* Canlı düğme: açılırken etiket kutunun dışında bekliyor; uzun (TR) etiket sayfayı yana kaydırmasın. clip yapışkanlığı bozmaz. */
.pass { overflow-x: clip; }

/* Dil değiştirici (işaretleme ExportPage.astro, davranış /js/lang-switch.js). Serkan 25.10.2026: açılır menü, solda küçük dünya ikonu
   (Phosphor globe), 2–3 dil daha gelince de kalsın. Masaüstü: düğme = ikon + bulunulan dilin kodu; liste = bütün diller, bulunulan işaretli.
   Menü katlıyken (≤991): menünün son satırı "🌐 DİL ··· English" — öteki satırlarla aynı ölçü, etiket ikincil renkte; bulunulan dil satırda yok. */
.nav__lang { display: flex; align-items: center; position: relative; }
.nav__lang-list { display: flex; align-items: center; gap: var(--_hds--spacing---space--md); margin: 0; padding: 0; list-style: none; }
.nav__lang-link { letter-spacing: .04em; }
a.nav__lang-link:hover, a.nav__lang-link:focus-visible, .nav__lang-toggle:hover, .nav__lang-toggle[aria-expanded="true"] { color: var(--_hds--themes---text--brand); }
.nav__lang-label, .nav__lang-name { display: none; }
.nav__lang-toggle { display: inline-flex; align-items: center; gap: var(--_hds--spacing---space--xs); background: none; border: 0; cursor: pointer; letter-spacing: .04em; }
.nav__lang-toggle .dd-icon { margin-left: .1em; } /* ok: Product / Regulatory ile aynı Webflow ikonu (Serkan 27.10) */
.nav__lang-globe { width: 1.15em; height: 1.15em; flex: none; }
@media (min-width: 992px) {
  .nav__lang--menu .nav__lang-list {
    display: none; position: absolute; top: calc(100% + var(--_hds--spacing---space--md)); right: 0; z-index: 2;
    flex-direction: column; align-items: stretch; gap: 0; min-width: 9rem; padding: var(--_hds--spacing---space--xs) 0;
    background: var(--_hds--themes---surface--bg); box-shadow: 0 12px 40px rgba(22, 21, 25, .12);
  }
  .nav__lang--menu .nav__lang-toggle[aria-expanded="true"] + .nav__lang-list { display: flex; }
  /* üstüne gelince açılır, öteki açılır menüler gibi (Serkan 27.10); ::before liste ile düğme arasındaki boşluğu köprüler */
  .nav__lang--menu:hover .nav__lang-list { display: flex; }
  .nav__lang--menu .nav__lang-list::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: var(--_hds--spacing---space--md); }
  .nav__lang--menu:hover .nav__lang-toggle { color: var(--_hds--themes---text--brand); }
  .nav__lang--menu { margin-right: var(--_hds--spacing---space--md); z-index: 901; } /* komşu .w-dropdown (z 900) listenin üstüne biniyor, imleç inerken liste kapanıyordu */
  .nav__lang--menu .nav__lang-link { display: flex; justify-content: space-between; gap: var(--_hds--spacing---space--md); padding: var(--_hds--spacing---space--sm) var(--_hds--spacing---space--md); }
  .nav__lang--menu .nav__lang-name { display: inline; text-transform: none; letter-spacing: 0; font-family: var(--_hds--typography---family--sans); }
  .nav__lang--menu .nav__lang-code { display: none; } /* listede yalnız dil adı; kod düğmede (Serkan 25.10) */
  .nav__lang--menu .nav__lang-link.is--current { color: var(--_hds--themes---text--brand); cursor: default; }
}
@media (max-width: 991px) {
  /* Satır: sol etiket (🌐 DİL), sağda öteki dillerin adları; menü bağlantılarının çizgisi ve iç boşluğu */
  .nav__lang { order: 99; justify-content: space-between; gap: var(--_hds--spacing---space--md); width: 100%;
    padding: var(--_hds--spacing---space--md) 24px; border-bottom: 1px solid var(--_hds--colors---graphite-plum--600); }
  .nav__lang-label { display: inline-flex; align-items: center; gap: var(--_hds--spacing---space--xs); font-family: var(--_hds--typography---family--mono);
    font-size: var(--_hds--typography---fluid--body-sm); letter-spacing: .06em; text-transform: uppercase; color: var(--_hds--themes---text--tertiary); }
  .nav__lang-toggle { display: none; }
  .nav__lang-list { flex-wrap: wrap; justify-content: flex-end; }
  .nav__lang .nav__lang-link { width: auto; padding: 0; border: 0; } /* mavi değil: menüde mavi = bulunduğun sayfa */
  .nav__lang .nav__lang-link.is--current { display: none; }
  .nav__lang-name { display: inline; }
  .nav__lang-code { display: none; }
}

/* 992–1099: dil bağlantısıyla menü sığmıyor, düğmeler iki satıra kırılıyordu → menü aralığı md, düğme yazısı tek satır (ölçüldü 25.10.2026) */
@media (min-width: 992px) and (max-width: 1099px) {
  .nav__menu { column-gap: var(--_hds--spacing---space--md); }
  .nav__cta .btn { white-space: nowrap; }
}

/* ---- Pricing (Serkan, 25.10.2026: "her şey çok yazı dolu"; yapı scripts/pages/pricing.py) ----
   Kart sistemi: iki ses — mono yalnız ad, fiyat, hap, düğme; ara satırların hepsi 14 px sans ikincil renk.
   Düğme kartın ayracı: altında çizgi yok. Dört kartta aynı olan satırlar kartların altındaki tek bantta.
   #plans ile: sayfa gövdesindeki eski <style> kuralları aynı özgüllükte, sonra yükleniyor. */
#plans .plan.plan--featured::after { display: none; }
#plans .plan__adds.plan__adds--rule { border-top: 0; padding-top: 0; }
#plans .plan__per { font-family: var(--_hds--typography---family--sans); font-size: var(--_hds--typography---fluid--body-sm);
  font-weight: var(--_hds--typography---weight--regular); text-transform: none; letter-spacing: 0; color: var(--_hds--themes---text--secondary); }
#plans .plan__unit { display: flex; align-items: center; gap: var(--_hds--spacing---space--xs); margin-top: var(--_hds--spacing---space--xs);
  font-family: var(--_hds--typography---family--sans); font-size: var(--_hds--typography---fluid--body-sm); font-weight: var(--_hds--typography---weight--regular);
  line-height: var(--_hds--typography---lineheight--normal); text-transform: none; letter-spacing: 0; color: var(--_hds--themes---text--secondary); }
#plans .plan__unit .tip { vertical-align: baseline; }
#plans .plan__bill + .plan__unit { margin-top: var(--_hds--spacing---space--xs); }
.tip__box { text-transform: none; letter-spacing: 0; font-family: var(--_hds--typography---family--sans); font-weight: var(--_hds--typography---weight--regular); }

/* Free: aynı kart ölçüsü, üç olgu alt alta, sütunlar üstten hizalı */
#plans .plan.plan--free { padding: var(--_hds--spacing---space--2xl) var(--_hds--spacing---space--xl); align-items: start; }
#plans .plan--free .plan__band-line { font-size: var(--_hds--typography---fluid--body-md); line-height: var(--_hds--typography---lineheight--relaxed); }
#plans .plan--free .plan__bill { margin-top: var(--_hds--spacing---space--md); max-width: 34rem; }
@media (min-width: 1280px) {
  #plans .plan--free > .plan__head { flex-direction: column; align-items: flex-start; gap: var(--_hds--spacing---space--md); align-self: start; }
  #plans .plan--free > .plan__band-text, #plans .plan--free > .plan__actions { align-self: start; }
}
@media (max-width: 767px) { #plans .plan.plan--free { padding: var(--_hds--spacing---space--xl) var(--_hds--spacing---space--lg); } }

/* Dosya kotası: baş satırındaki haptan düğmenin altına; kartı ayıran olgu, vurgulu */
#plans .plan__quota { margin: var(--_hds--spacing---space--md) 0 0; font-family: var(--_hds--typography---family--sans);
  font-size: var(--_hds--typography---fluid--body-md); font-weight: var(--_hds--typography---weight--semibold); line-height: var(--_hds--typography---lineheight--snug);
  color: var(--_hds--themes---text--primary); }
/* Liste: kota bloğundan ince çizgiyle ayrılır, satırlar sık; tik ve ⓘ ilk satırın hizasında (iki satırlık maddede ortada kalmaz) */
#plans .plan__adds.plan__adds--rule { margin-top: var(--_hds--spacing---space--lg); padding-top: var(--_hds--spacing---space--lg);
  border-top: 1px solid var(--_hds--colors---border--default); }
#plans .plan__adds { row-gap: var(--_hds--spacing---space--sm); }
#plans .plan__item { align-items: flex-start; }
#plans .plan__item .plan__mark, #plans .plan__item .plan__item-r { height: 1lh; display: inline-flex; align-items: center; }
/* Kime cümlesi → fiyat: yakın (aynı grubun parçası) */
#plans .plan__pricing { margin-top: var(--_hds--spacing---space--lg); }

/* Enterprise: başlık tek satıra yakın, paragraf ve fiyat nefes alıyor */
#plans .plan__enterprise-text { max-width: 46rem; }
/* Ayaklar yere bassın (Serkan 27.10.2026): masaüstünde yazı ve düğme kartın dibinde, sol sütunda; sağ alttaki küp çizimi boş kalır */
@media (min-width: 992px) {
  #plans .plan.plan--enterprise { grid-template-columns: minmax(0, 1fr); align-content: end; align-items: end; }
  #plans .plan--enterprise > .plan__actions--enterprise { grid-column: 1; justify-self: start; margin-top: var(--_hds--spacing---space--xl); }
}
/* Görsel (Serkan 27.10.2026): masaüstünde %40 → %52 genişlik; telefon/tablette kart görsel kadar uzamıyor, düğme görselin üst kısmına binebilir */
@media (min-width: 992px) {
  #plans .plan.plan--enterprise { background-size: 52vw; min-height: calc(52vw * .479 + 4rem); }
  #plans .plan__enterprise-text { max-width: none; }
}
@media (max-width: 991px) {
  /* Düğme kartın dibinde, kartın iç boşluğu kadar içeride; görsel payı düğmenin üstünde (Serkan 26.10.2026) */
  #plans .plan.plan--enterprise { padding-bottom: var(--_hds--spacing---space--2xl); }
  #plans .plan--enterprise > .plan__actions--enterprise { position: relative; z-index: 1;
    margin-top: max(var(--_hds--spacing---space--xl), calc(80svw * .479 * .5 - var(--_hds--spacing---space--2xl))); }
}
@media (max-width: 767px) { #plans .plan.plan--enterprise { padding-bottom: var(--_hds--spacing---space--xl); } }
#plans .plan__for.plan__for--inverse { margin-top: var(--_hds--spacing---space--xl); max-width: 36rem; }
#plans .plan__unit.plan__unit--inverse { margin-top: var(--_hds--spacing---space--xl); color: var(--_hds--themes---text--secondary-inverse); }

/* Kapanış: deneme cümlesi düğmenin altında, sayılar rakam satırı */
.stats.stats--band.stats--closing { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; max-width: 40rem; margin-top: var(--_hds--spacing---space--3xl); }
/* Kota kutusu (Serkan 27.10.2026): düğme genişliğinde açık mavi kutu (signal-blue/25), düğmeden ayrı; kutu kota ile listeyi ayırdığı için çizgi kalkar */
#plans .plan__quota-block { margin-top: var(--_hds--spacing---space--md); padding: var(--_hds--spacing---space--md) var(--_hds--spacing---space--lg);
  background-color: var(--_hds--colors---signal-blue--25); }
#plans .plan__quota-block .plan__quota { margin-top: 0; font-size: var(--_hds--typography---fluid--h6); line-height: var(--_hds--typography---lineheight--snug);
  font-variant-numeric: tabular-nums; }
#plans .plan__quota-block .plan__unit { margin-top: var(--_hds--spacing---space--xs); line-height: var(--_hds--typography---lineheight--snug); }
#plans .plan__quota-block + .plan__adds.plan__adds--rule, #plans .plan__adds.plan__adds--rule { border-top: 0; padding-top: 0; }
#plans .plan__quota-line { display: block; }
#plans .plan__quota-block .plan__unit { margin-top: var(--_hds--spacing---space--sm); }
@media (max-width: 991px) { #plans .plan__quota-block { padding: var(--_hds--spacing---space--md); } }
/* Kartlar satır satır hizalı (sayfa kodu: subgrid, 12 satır); kota bloğu bir satır daha ekledi */
@supports (grid-template-rows: subgrid) { @media (min-width: 768px) { #plans .plans > .plan--tier { grid-row: span 13; } } }
/* Hizmet kartlarında kota bloğu yok: düğme ayraç, çizgi yok */
#plans .plan--service .plan__adds.plan__adds--rule { border-top: 0; padding-top: 0; margin-top: var(--_hds--spacing---space--xl); }

/* Canlı düğme (pass): görünür hâl. Betik .is--visible ekliyor; Webflow'da bu combo yalnız çalışma anında kullanıldığı için yayın CSS'ine hiç girmedi
   (9 Ekim'den beri staging'de de düğme saydam kalıyordu). Hareket burada da tanımlı ve sayfa <style>'ından güçlü (.pass >): sayfa kodu
   animasyonu kısa yazımla verip fill-mode'u sıfırlıyordu. */
/* opacity sabit 1 değil: animasyon bir kare geç başlayınca düğme önce opak çiziliyor, sonra 0'dan yeniden beliriyordu ("beliriyor, kayboluyor",
   Serkan 25.10.2026). fill-mode both: ilk karede animasyonun başı (saydam), sonunda son karesi (opak) kalır. Sınıf kalkınca 320 ms solar. */
.pass > .pass__btn.is--visible { pointer-events: auto; animation: pass-in 650ms both; }
@media (prefers-reduced-motion: reduce) { .pass > .pass__btn.is--visible { animation: pass-fade 400ms ease both; } }
@keyframes pass-in {
  0% { opacity: 0; transform: scale(.8); animation-timing-function: cubic-bezier(.33, 0, .2, 1); }
  60% { opacity: 1; transform: scale(1.04); animation-timing-function: cubic-bezier(.3, 0, .3, 1); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes pass-fade { from { opacity: 0; } to { opacity: 1; } }

/* ---- Pah: küçük kartlar da (Serkan, 25.10.2026; 05.10'daki "yalnız büyük nesne kesik" kuralının yerine) ----
   Webflow'da kesik, kartın üstüne zemin renginde bir üçgen koyarak taklit ediliyordu (corner-cut; clip-path orada çizilmiyordu).
   Burada gerçek kesik: kartın sol üst köşesi kırpılır, arkadaki zemin ne olursa görünür. Ölçü sitedeki gibi space/xl (32 px).
   Çerçeveli kartta kesik kenara çerçeve renginde bir çizgi (::before), çerçeve kopmasın. */
.resource-card, .tile.tile--dark, .log__row, .tile__body.tile__body--lg-frame, .tile:has(> .tile__body.tile__body--lg-frame) {
  --cut: var(--_hds--spacing---space--xl);
  clip-path: polygon(var(--cut) 0, 100% 0, 100% 100%, 0 100%, 0 var(--cut));
  position: relative;
}
.resource-card::before, .tile__body.tile__body--lg-frame::before {
  content: ""; position: absolute; top: -1px; left: -1px; z-index: 1; pointer-events: none;
  width: calc(var(--cut) * 1.4142); height: 1px; background: var(--cut-line, transparent);
  transform-origin: 0 0; transform: translateY(var(--cut)) rotate(-45deg);
}
.tile__body.tile__body--lg-frame { --cut-line: var(--_hds--colors---graphite-plum--500); }
.resource-card:hover { --cut-line: var(--_hds--themes---text--brand); }

/* Mega menü (Product ▾, Regulatory ▾): masaüstünde iç kutu yan dolgusuzdu, kart metni ekran kenarına yapışıktı.
   Yan boşluk = nav'ın kendi kenar boşluğu (logo 24 px içeride) → ilk kartın metni logoyla aynı çizgide başlar. */
@media (min-width: 992px) {
  .nav__mega-inner { padding-left: var(--_hds--spacing---space--lg); padding-right: var(--_hds--spacing---space--lg); }
}

/* Enterprise fiyatı: öteki kartlardaki gibi büyük rakam; "From" küçük, rakamın önünde */
#plans .plan__price.plan__price--enterprise { margin-top: var(--_hds--spacing---space--xl); display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 var(--_hds--spacing---space--sm); }
#plans .plan__price--enterprise .plan__from { font-family: var(--_hds--typography---family--sans); font-size: var(--_hds--typography---fluid--body-sm); text-transform: none; letter-spacing: 0;
  color: var(--_hds--themes---text--secondary-inverse); }
#plans .plan__price--enterprise .plan__amount, #plans .plan__price--enterprise .plan__per { color: var(--_hds--colors---neutral--0); }
#plans .plan__price--enterprise .plan__per { margin-left: 0; color: var(--_hds--themes---text--secondary-inverse); }

/* Uzman hizmetleri başlığı (Serkan 27.10.2026): başlık solda, "Hizmetlere bakın" sağda, aynı satırda; telefonda alt alta */
@media (min-width: 768px) {
  #plans .services-row__intro { flex-direction: row; justify-content: space-between; align-items: baseline; gap: var(--_hds--spacing---space--xl); }
  #plans .services-row__intro > .text-link { margin-top: 0; }
}
/* Başlık ile kartlar arası 16 → 48 px (Serkan 27.10.2026); ≥1280'de başlık kartların solunda, ayrı aralık gerekmez */
@media (max-width: 1279px) { #plans .services-row__intro { padding-bottom: var(--_hds--spacing---space--xl); } }
/* Karşılaştırma şeridi: pah (sol üst, sayfa zemini) + sütun ikonu (Serkan 27.10.2026) */
#plans .compare__toggle { position: relative; }
#plans .compare__title { display: inline-flex; align-items: center; gap: var(--_hds--spacing---space--sm); }
#plans .compare__icon { width: 1.25em; height: 1.25em; flex: 0 0 auto; }
/* Karşılaştırma tablosu bir ölçü küçük (Serkan 27.10.2026): satır ve değer 17,6 → 14–16 px (kota satırlarıyla aynı) */
#plans .compare__panel .datasheet__key, #plans .compare__panel .datasheet__val { font-size: var(--_hds--typography---fluid--h6); }

/* ===== Başlıklar sans (Serkan 27.10.2026): h1–h4 düzeyindeki başlıklar Inter 600, büyük harf yok, sıkı harf aralığı.
   Mono yalnız küçük ve büyük harfli yazılarda kalır: etiket/eyebrow, hero kicker, düğme, hap, plan adı, tablo başlığı, rakamlar. ===== */
.heading--display-3xl, .heading--display-2xl, .heading--display-xl, .heading--display-l, .heading--display, .heading--display-home,
.type-display, .type-h1, .type-h2, .type-h3, .type-h4, .type-h5, .type-h6, .hero__headline,
.glossary__term, .glossary__letter, .steps__title, .log__title, .entry__title, .market__name {
  font-family: var(--_hds--typography---family--sans); font-weight: var(--_hds--typography---weight--semibold); text-transform: none; text-wrap: balance; }
.heading--display-3xl, .heading--display-2xl, .heading--display-xl, .heading--display-l, .heading--display, .heading--display-home,
.type-display, .glossary__letter { letter-spacing: -.035em; line-height: 1.05; }
.type-h1, .type-h2, .hero__headline { letter-spacing: -.03em; line-height: 1.1; }
.type-h3, .type-h4, .steps__title, .market__name { letter-spacing: -.025em; line-height: 1.15; }
.type-h5, .type-h6, .glossary__term, .log__title, .entry__title { letter-spacing: -.015em; line-height: 1.25; }

/* ===== Büyük rakamlar sans (Serkan 27.10.2026: "büyük mono rakamları da sans yap") — başlıklarla aynı aile/ağırlık; sayaçlarda tabular-nums
   (sayarken genişlik oynamasın). Mono kalan: kod ve sembol (key__code CAS/EC/INCI, equation__sym), kart numarası steps__num. ===== */
.stat__value, .plan__amount, .fact__value, .entry__clock-value, .clock__value, .pp-credit__ex-pr {
  font-family: var(--_hds--typography---family--sans); font-weight: var(--_hds--typography---weight--semibold);
  letter-spacing: -.035em; font-variant-numeric: tabular-nums; text-transform: none; }
/* Rakamın altındaki etiket cümledir → sans (mono'yu kapsayıcıdan devralıyordu) */
.stat__label { font-family: var(--_hds--typography---family--sans); }

/* ===== Asistan sayfası (Serkan 27.10.2026; scripts/pages/assistant.py) ===== */
/* Asistan hero (Serkan 27.10.2026): dev tek kelime, üstünde dönen UA işareti, arkasında platformdaki nabız (NoktaAlani.tsx sabitleri) */
.ahero { position: relative; overflow: hidden; background: var(--_hds--colors---surface--tertiary); /* açık gri (Serkan 27.10) */
  padding: clamp(5rem, 3rem + 8vw, 11rem) var(--_hds--spacing---space--lg) clamp(4rem, 2rem + 6vw, 8rem); text-align: center; }
.ahero__field { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ahero__inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; }
.ahero__mark { width: clamp(3.5rem, 2.5rem + 3vw, 5.5rem); height: auto; color: var(--_hds--colors---signal-blue--300); }
.ahero__mark svg { display: block; width: 100%; height: auto; fill: currentColor; animation: ahero-spin 9.6s linear infinite; transform-origin: 50% 50%; }
@keyframes ahero-spin { to { transform: rotate(360deg); } }
.ahero__wordbox { position: relative; display: inline-block; }
.ahero__ai { position: absolute; left: 100%; font-size: .2em; /* 1em = kelimenin 0,2'si */
  /* üst kenar = 't'nin tepesi (Serkan 27.10): satır .9em, Inter yükseliş .97 / iniş .24 → taban çizgisi kutunun .815em altında; 't' .676em → tepe .139em = .695 rozet-em */
  top: .695em; margin-left: .3em; padding: .2em .32em .16em; background: var(--_hds--colors---signal-blue--300); color: #fff; /* mavi zemin: işaretle aynı renk (Serkan 27.10 denemesi; önce siyahtı) */
  font-weight: 600; letter-spacing: .02em; line-height: 1; }
.ahero__word { margin: var(--_hds--spacing---space--2xl) 0 0; font-family: var(--_hds--typography---family--sans); font-weight: 600;
  font-size: clamp(3rem, 1rem + 12.5vw, 13rem); line-height: .9; /* tek kelime: ekranla büyür (token tavanı 7rem dev değil) */ letter-spacing: -.045em; text-transform: none;
  color: var(--_hds--themes---text--primary); }
.ahero__sub { margin: var(--_hds--spacing---space--xl) auto 0; max-width: 40rem; text-wrap: balance; }
.ahero__actions { margin-top: var(--_hds--spacing---space--2xl); }
@media (prefers-reduced-motion: reduce) { .ahero__mark svg { animation: none; } }

/* 01 · Neler sorabilirsiniz: uygulamadaki öneri hapları (cümle → sans 14, gri zemin beyaz kartta) */
.ask__list { display: flex; flex-direction: column; align-items: flex-start; gap: var(--_hds--spacing---space--sm); margin: var(--_hds--spacing---space--lg) 0 0; padding: 0; list-style: none; }
.ask__q { background: var(--_hds--colors---surface--tertiary); color: var(--_hds--themes---text--primary); font-family: var(--_hds--typography---family--sans);
  font-size: var(--_hds--typography---fluid--body-md); line-height: 1.4; padding: var(--_hds--spacing---space--sm) var(--_hds--spacing---space--md); }
.ask__group .guide-card__label { margin: 0; }
/* 02 · Soru balonu + sonuç kartı (sohbet sırası: soru sağda, cevap kartı solda) */
.chat { max-width: 44rem; margin-left: auto; margin-right: auto; display: flex; flex-direction: column; gap: var(--_hds--spacing---space--md); }
.chat__q { align-self: flex-end; max-width: 80%; margin: 0; background: var(--_hds--colors---signal-blue--300); color: #fff; font-family: var(--_hds--typography---family--sans);
  font-size: var(--_hds--typography---fluid--body-md); padding: var(--_hds--spacing---space--md) var(--_hds--spacing---space--lg); }
.chat__card { position: relative; background: var(--_hds--colors---surface--tertiary); }
.chat__card .type-h4 { margin: 0; }
.chat__note { display: flex; align-items: center; gap: var(--_hds--spacing---space--sm); margin: 0; }
.chat__note-icon { width: 1rem; height: 1rem; flex: none; }
/* 03 · Canlı ayrıntı = sohbet akışı (Serkan 27.10: "3 kere baktıktan sonra soru cevap olduğunu anladım", pah yok) —
   solda dört adım (okunan adım beyaz), sağda konuşma: siz → modele giden (yer tutuculu) → Asistan izin ister → cevap. Tek pah, panelde. */
.ademo { position: relative; display: grid; grid-template-columns: 16rem 1fr; gap: var(--_hds--spacing---space--3xl);
  background: var(--_hds--colors---graphite-plum--300); padding: var(--_hds--spacing---space--3xl) var(--_hds--spacing---space--2xl); }
.ademo__side .guide-card__label { margin: 0; }
.ademo__steps { margin: var(--_hds--spacing---space--lg) 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--_hds--spacing---space--md); }
.ademo__step { display: flex; gap: var(--_hds--spacing---space--sm); font-family: var(--_hds--typography---family--sans); font-size: var(--_hds--typography---fluid--body-md);
  color: var(--_hds--themes---text--tertiary); transition: color .3s; }
.ademo__n { font-family: var(--_hds--typography---family--mono); font-size: var(--_hds--typography---fluid--body-sm); padding-top: .15em; }
.ademo[data-state="ask"] .ademo__step:nth-child(-n+3), .ademo:not([data-state="ask"]) .ademo__step { color: var(--_hds--themes---text--primary); }
.ademo[data-state="ask"] .ademo__step:nth-child(3) .ademo__n, .ademo:not([data-state="ask"]) .ademo__step:nth-child(4) .ademo__n { color: var(--_hds--colors---signal-blue--100); }
.ademo__chat { display: flex; flex-direction: column; gap: var(--_hds--spacing---space--xl); max-width: 40rem; }
.ademo__msg { display: flex; flex-direction: column; align-items: flex-start; }
.ademo__msg--you { align-items: flex-end; }
.ademo__who { margin: 0 0 var(--_hds--spacing---space--sm); font-family: var(--_hds--typography---family--mono); font-weight: 500; font-size: var(--_hds--typography---fluid--body-xsm);
  text-transform: uppercase; letter-spacing: .04em; color: var(--_hds--themes---text--tertiary); }
.ademo .chat__q { align-self: auto; }
.ademo__sent { margin: 0; font-family: var(--_hds--typography---family--sans); font-size: var(--_hds--typography---fluid--body-md); color: var(--_hds--themes---text--secondary);
  border-left: 2px solid var(--_hds--colors---graphite-plum--400); padding: var(--_hds--spacing---space--xs) 0 var(--_hds--spacing---space--xs) var(--_hds--spacing---space--md); }
.ademo__token { font-family: var(--_hds--typography---family--mono); font-weight: 500; font-size: .85em; color: var(--_hds--colors---signal-blue--100); background: rgba(126,149,251,.14); padding: .1em .35em; }
.ademo__perm, .ademo__bubble { background: var(--_hds--colors---graphite-plum--200); padding: var(--_hds--spacing---space--xl) var(--_hds--spacing---space--lg); width: 100%; box-sizing: border-box; }
.ademo__perm-head { display: flex; align-items: flex-start; gap: var(--_hds--spacing---space--md); }
.ademo__perm-head .tile__icon { flex: none; margin: .15em 0 0; color: var(--_hds--colors---signal-blue--100); }
.ademo__perm-head .type-h4 { margin: 0; }
.ademo__perm .text-secondary { margin: var(--_hds--spacing---space--md) 0 0; }
.ademo__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--_hds--spacing---space--sm) var(--_hds--spacing---space--md); margin-top: var(--_hds--spacing---space--xl); }
.ademo__actions .ademo__no { flex-basis: 100%; margin-top: var(--_hds--spacing---space--md); }  /* metin düğmesi her genişlikte kendi satırında, düğmelerden ayrışsın (Serkan 28.10) */
.ademo__actions button, .ademo__again { cursor: pointer; } /* yazı tipi .btn / .text-link sınıfından */
.ademo__no, .ademo__again { background: none; border: 0; padding: 0; }
/* koyu zeminde ikincil düğme: hover koyulaşmaz, dolar (Serkan 27.10) */
.ademo .btn--secondary:hover { background-color: var(--_hds--colors---signal-blue--200); border-color: var(--_hds--colors---signal-blue--200); color: var(--_hds--colors---signal-blue--25); }
.ademo__answer { display: none; }
.ademo:not([data-state="ask"]) .ademo__answer { display: flex; }
.ademo:not([data-state="ask"]) .ademo__actions { display: none; }
.ademo__answer-text { margin: 0; font-family: var(--_hds--typography---family--sans); font-weight: var(--_hds--typography---weight--semibold); font-size: var(--_hds--typography---fluid--h4); line-height: 1.3; color: var(--_hds--themes---text--primary); }
.ademo__note { margin: var(--_hds--spacing---space--md) 0 0; font-family: var(--_hds--typography---family--sans); font-size: var(--_hds--typography---fluid--body-sm); color: var(--_hds--themes---text--secondary); }
.ademo[data-state="sent"] .ademo__note::before { content: "✓ "; color: var(--_hds--colors---mint-green--200); }
.ademo__again { margin-top: var(--_hds--spacing---space--lg); }
/* sırayla belirme (sitenin "stagger" sözlüğü): panel görününce mesajlar 180 ms arayla yükselir; yalnız JS + hareket serbestken */
.ademo.is--armed .ademo__msg { opacity: 0; transform: translateY(1rem); transition: opacity .5s, transform .5s; }
.ademo.is--armed.is--in .ademo__msg { opacity: 1; transform: none; }
.ademo.is--armed.is--in .ademo__msg:nth-child(2) { transition-delay: .18s; }
.ademo.is--armed.is--in .ademo__msg:nth-child(3) { transition-delay: .36s; }
.ademo.is--armed.is--in .ademo__answer { transition-delay: 0s; }
@media (max-width: 991px) { .ademo { grid-template-columns: 1fr; gap: var(--_hds--spacing---space--2xl); padding: var(--_hds--spacing---space--2xl) var(--_hds--spacing---space--xl); }
  .ademo__steps { flex-direction: row; flex-wrap: wrap; gap: var(--_hds--spacing---space--sm) var(--_hds--spacing---space--lg); } }
@media (max-width: 767px) { .ademo { padding: var(--_hds--spacing---space--xl) var(--_hds--spacing---space--lg); } .ademo__steps { flex-direction: column; }
  .ademo__perm, .ademo__bubble { padding: var(--_hds--spacing---space--lg); } .chat__q { max-width: 92%; } }
/* 04 · Onay kartı (örnek; düğmeler görsel) */
.confirm { margin: 0; }
.confirm .type-h4 { margin: 0; }
.confirm__actions { display: flex; align-items: center; gap: var(--_hds--spacing---space--lg); margin-top: var(--_hds--spacing---space--xl); }
.confirm__actions .btn { pointer-events: none; }

/* ===== Asistan temas noktaları (scripts/pages/assistant_touch.py, Serkan 27.10.2026) ===== */
/* Nav · Product: dört kart (masaüstünde dört eşit kolon; Regulatory menüsü üç kalır) */
/* 992–1279: 2×2 (dört kolonda "Regulatory Watch ↗" ~1150 px altında iki satıra kırılıp hizayı bozuyordu, Serkan 27.10); ≥1280 dört kolon */
@media (min-width: 992px) { .nav__mega-inner:has(> .nav__mega-card:nth-child(4)) { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1280px) { .nav__mega-inner:has(> .nav__mega-card:nth-child(4)) { grid-template-columns: repeat(4, 1fr); } }
/* Ana sayfa · Asistan: hero'nun küçük hali — dönen işaret + kelime + siyah AI; sağda üç soru → sonuç satırı */
.hask__brand { display: flex; align-items: center; gap: var(--_hds--spacing---space--sm); margin: 0; font-family: var(--_hds--typography---family--sans);
  font-weight: var(--_hds--typography---weight--semibold); font-size: var(--_hds--typography---fluid--h2); letter-spacing: -.035em; line-height: .9; color: var(--_hds--themes---text--primary); }
.hask__mark { width: 1.3em; flex: none; color: var(--_hds--colors---signal-blue--300); }
.hask__mark svg { display: block; width: 100%; height: auto; fill: currentColor; animation: ahero-spin 9.6s linear infinite; }
/* küçük ölçüde AI kelimenin %38'i (hero'da %20; burada %20 okunmuyordu); üst kenar yine 't'nin tepesinde: .139 kelime-em ÷ .38 = .366 rozet-em */
.hask__brand .ahero__ai { font-size: .38em; top: .366em; margin-left: .25em; }
.hask__brand .ahero__wordbox { margin-right: 2em; }
.hask { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--_hds--spacing---space--2xl); }
.hask__pair { display: flex; flex-direction: column; gap: var(--_hds--spacing---space--sm); }
.hask .chat__q { align-self: flex-end; }
.hask__a { margin: 0; align-self: flex-start; max-width: 88%; background: var(--_hds--colors---surface--tertiary); color: var(--_hds--themes---text--primary);
  font-family: var(--_hds--typography---family--sans); font-size: var(--_hds--typography---fluid--body-md); padding: var(--_hds--spacing---space--md) var(--_hds--spacing---space--lg); }
@media (prefers-reduced-motion: reduce) { .hask__mark svg { animation: none; } }
/* Features · geniş kart (CosIng bloğunun altı) */
.fask { position: relative; }
.fask .feature__head { margin-top: 0; }
.fask .type-h3 { margin: 0; }

/* Çerçeveli karo gövdesi kartın tamamını doldurur (Features Set up: kısa metinli kartın altında gri zemin kalıyordu, Serkan 27.10) */
.tile > .tile__body--lg-frame, .tile > .tile__body--lg { flex: 1; } /* görselli kartta görsel dibe oturur (Label Check / SDS: kısa metinli kartta altta beyaz şerit kalıyordu) */

/* SplitText satır maskesi (IX3 `lines`/`hero-lines`): maske satır yüksekliği kadar ve overflow:clip → sans başlıklarda g/ş/y kuyruğu ve
   İ/Ş/Ç işaretleri kesiliyordu (Serkan 27.10; mono büyük harfte kuyruk yoktu). Kesme alanı iç boşlukla genişler, eksi dış boşluk
   yerleşimi aynı tutar (satır aralığı değişmez). */
.gsap_split_line-mask { padding: .14em 0 .26em; margin: -.14em 0 -.26em; }
/* Asistan sayfası: başlık bloklarında sağdaki paragraf başlığın alt sınırına yaslı (Serkan 27.10); tek kolonda (≤991) etkisiz */
.ahero ~ section .feature__head { align-items: last baseline; } /* son satırların taban çizgisi aynı hizada (kutu alt kenarı satır aralığı farkıyla kayıyordu) */

/* Ana sayfa görselleri (Serkan 27.10.2026; scripts/pages/home_media.py). Statement laptopu CSS arka planı → dile göre.
   Görsel 3:2, laptop sağda, zemin beyaz: 16:9'da alt kenara yaslı (masa görünür), telefonda (4:5) laptop kadrajda kalsın diye sağa kayık. */
.statement__media { background-color: #fff; background-image: url('/images/home/laptop-en-2000.webp'); }
html[lang^="tr"] .statement__media { background-image: url('/images/home/laptop-tr-2000.webp'); }
/* Telefon (Serkan 28.10): 4:5 kutuda laptopun üstünde büyük beyaz boşluk kalıyor, ekran kenarlara değiyordu → 5:4 kutu, ekranın çevresinde
   eşit pay. Ölçü (2000×1330 görsel): ekran x 671–1715, üstü y 394. Görünen genişlik 1305 px (ekran %80) → background-size 2000/1305 = %153;
   sol kenar 671 − 130 = 541 → konum 541/(2000−1305) = %78; kutu yüksekliği 1044 px → görünen y 286–1330 (üstte ~108 px pay). */
@media (max-width: 767px) { .statement__media { aspect-ratio: 5 / 4; background-size: 153% auto; background-position: 78% 100%; } }
.hask__img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Telefonda dönen rozet (piktogram + yazı halkası) gizli: dar görselde yer kaplıyor (Serkan 27.10) */
@media (max-width: 767px) { .statement__badge { display: none; } }
/* Ana sayfa §4 Monitor (beyaz bölüm): Komuta Merkezi ve Denetim Kütüğü çizimlerinin (eskiden kare ekran görüntüleri) zemini de beyaz →
   açık gri çerçeve (Serkan 27.10). outline içe çizilir (kutu ölçüsü değişmez). */
.img-ph.hlive {
  outline: 1px solid var(--_hds--colors---border--subtle); outline-offset: -1px; }
/* Ana sayfa Asistan paneli: görsel yerine canlı cevap (Serkan 28.10.2026; scripts/pages/home_media.py chat(), public/js/live-panels.js).
   CSS yalnız son hâli çizer; hareketi GSAP verir (JS yoksa ya da hareket azaltılmışsa panel son hâliyle durur). */
.img-ph.hchat { display: flex; flex-direction: column; justify-content: center; align-items: stretch; text-align: left; aspect-ratio: auto; min-height: 0;
  background: var(--_hds--colors---surface--primary); padding: var(--_hds--spacing---space--2xl) var(--_hds--spacing---space--xl);
  font-family: var(--_hds--typography---family--sans); color: var(--_hds--themes---text--primary); }
@media (min-width: 1280px) { .img-ph.hchat { aspect-ratio: 1; padding: var(--_hds--spacing---space--2xl); } }
.hchat p { margin: 0; }
.hchat__q { align-self: flex-end; max-width: 85%; background: var(--_hds--colors---surface--tertiary); padding: .7em 1.1em; font-size: 1.0625rem; line-height: 1.4; }
.hchat__typing { display: flex; gap: 5px; height: 0; overflow: hidden; margin-top: var(--_hds--spacing---space--lg); opacity: 0; }
.hchat__typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--_hds--themes---text--tertiary); }
.hchat.is--typing .hchat__typing span { animation: hchat-dot 1s ease-in-out infinite; }
.hchat__typing span:nth-child(2) { animation-delay: .15s; } .hchat__typing span:nth-child(3) { animation-delay: .3s; }
@keyframes hchat-dot { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-4px); opacity: 1; } }
.hchat__a { margin-top: var(--_hds--spacing---space--lg); }
.hchat__line { font-size: 1.0625rem; line-height: 1.5; }
.hchat__line + .hchat__line { margin-top: .6em; }
.hchat__bar { display: flex; gap: var(--_hds--spacing---space--md); height: 2.5rem; margin-top: var(--_hds--spacing---space--xl); }
.hchat__seg { flex-basis: 0; min-width: 0; }
.hchat__seg--none, .hchat__key--none { background: radial-gradient(circle, var(--_hds--colors---signal-blue--300) 1.2px, transparent 1.6px) 0 0 / 10px 10px; }
.hchat__seg--wait, .hchat__key--wait { background: radial-gradient(circle, var(--_hds--colors---signal-blue--300) 1.1px, transparent 1.5px) 0 0 / 5px 5px; }
.hchat__seg--ok, .hchat__key--ok { background: var(--_hds--colors---signal-blue--300); }
.hchat__legend { display: flex; flex-wrap: wrap; gap: var(--_hds--spacing---space--sm) var(--_hds--spacing---space--xl); margin: var(--_hds--spacing---space--lg) 0 0; padding: 0; list-style: none; }
.hchat__item { display: flex; align-items: center; gap: .55em; font-size: 1rem; font-weight: 500; }
.hchat__key { width: 1.1em; height: 1.1em; flex: none; outline: 1px solid var(--_hds--colors---border--default); outline-offset: -1px; }
.hchat__key--none { background-position: center; background-size: 100% 100%; }
.hchat__key--ok { outline: none; }
.hchat__n { margin-left: .2em; font-variant-numeric: tabular-nums; }
.hchat__src, .hchat__note { display: flex; align-items: center; gap: .45em; font-size: .875rem; line-height: 1.4; }
.hchat__src { margin-top: var(--_hds--spacing---space--lg) !important; color: var(--_hds--themes---text--secondary); }
.hchat__note { margin-top: var(--_hds--spacing---space--xs) !important; color: var(--_hds--colors---signal-blue--300); }
.hchat__icon { width: 1.1em; height: 1.1em; flex: none; }
.hchat.is--typing .hchat__typing { height: 6px; opacity: 1; transition: opacity .2s; }
.hchat.is--typing .hchat__a { margin-top: var(--_hds--spacing---space--sm); }

/* Ana sayfa §4 Komuta Merkezi + Denetim Kütüğü: görsel yerine canlı çizim (Serkan 28.10.2026; home_media.py cc(), alog(); js/live-panels.js).
   1200 birimlik çizim alanı, 1em = 24 birim = kutu genişliğinin %2'si → her ekranda görsel gibi ölçeklenir. Kırpık kenarlar overflow ile.
   CSS yalnız son hâli çizer; hareket js/live-panels.js'te (GSAP). */
.img-ph.hlive { display: block; position: relative; overflow: hidden; container-type: inline-size; text-align: left; padding: 0;
  font-family: var(--_hds--typography---family--sans); color: var(--_hds--themes---text--primary); line-height: 1.25; }
.hlive > * { font-size: 12px; font-size: 2cqw; }
.hlive p { margin: 0; }
.hlive svg { flex: none; }
.hlive__i { width: .75em; height: .75em; color: var(--_hds--colors---signal-blue--300); margin-left: .4em; vertical-align: -.05em; }
.hlive__arr { width: .6em; height: .6em; }
/* Komuta Merkezi */
.hcc { background: var(--_hds--colors---surface--tertiary); }
.hcc > .hcc__card { position: absolute; width: 37.58em; background: var(--_hds--colors---surface--primary);
  clip-path: polygon(1.667em 0, 100% 0, 100% 100%, 0 100%, 0 1.667em); }
.hcc__card--a { left: 1.25em; top: 2.333em; height: 18.42em; }
.hcc__card--b { left: 39.67em; top: 2.333em; height: 18.42em; }
.hcc > .hcc__card--axes { left: 1.25em; top: 21.58em; height: 18.25em; width: 62em; background: var(--_hds--colors---signal-blue--300); color: #fff; }
.hcc__card--c { left: 1.25em; top: 40.67em; height: 12em; }
.hcc__card--d { left: 39.67em; top: 40.67em; height: 12em; }
.hcc__head { display: flex; align-items: center; justify-content: space-between; height: 4.625em; margin: 0 1.25em; padding: .2em .833em 0;
  border-bottom: 1px solid var(--_hds--colors---border--subtle); white-space: nowrap; }
.hcc__card--axes .hcc__head { border-color: rgba(255,255,255,.35); }
.hcc__title { font-size: 1.1em; font-weight: 600; display: flex; align-items: center; }
.hcc__title .hlive__i { width: .64em; height: .64em; }
.hcc__meta { display: flex; align-items: center; gap: 1.6em; font-family: var(--_hds--typography---family--mono); font-size: .55em; letter-spacing: .1em;
  text-transform: uppercase; color: var(--_hds--themes---text--secondary); }
.hcc__link { display: flex; align-items: center; gap: .9em; color: var(--_hds--colors---signal-blue--300); font-weight: 500; }
.hcc__link .hlive__arr { width: 1em; height: 1em; }
.hcc__rows { padding: 1.85em 2.083em 0; }
.hcc__row + .hcc__row { margin-top: 1.72em; }
.hcc__lab { display: flex; justify-content: space-between; font-size: .833em; white-space: nowrap; }
.hcc__val { color: var(--_hds--themes---text--secondary); font-variant-numeric: tabular-nums; }
.hcc__track { display: block; height: .333em; margin-top: .55em; background: #ebeae7; }
.hcc__fill { display: block; height: 100%; background: var(--_hds--colors---signal-blue--300); transform: scaleX(var(--p)); transform-origin: left; }
.hcc__axes { display: flex; gap: 1.667em; padding: 2.15em 2.083em 0; }
.hcc__ax { width: 10.58em; flex: none; display: flex; flex-direction: column; align-items: center; }
.hcc__axn, .hcc__axl { font-size: .833em; }
.hcc__axl { opacity: .85; margin-top: .65em; }
.hcc__axbar { position: relative; width: 100%; height: 6.25em; margin-top: .45em;
  background: radial-gradient(circle, rgba(255,255,255,.4) .09em, transparent .11em) 0 0 / .42em .42em; }
.hcc__axfill { position: absolute; left: 0; right: 0; bottom: 0; height: 100%; background: #fff; transform: scaleY(var(--p)); transform-origin: bottom; }
.hcc__reg { position: relative; padding: 2.15em 2.083em 0; }
.hcc__regmeta { font-family: var(--_hds--typography---family--mono); font-size: .55em; letter-spacing: .1em; text-transform: uppercase; color: var(--_hds--themes---text--secondary); }
.hcc__regname { font-size: .833em; margin-top: .6em !important; }
.hcc__reg > .hlive__arr { position: absolute; right: 1.25em; top: 2.9em; width: .75em; height: .75em; color: var(--_hds--colors---signal-blue--300); }
.hcc__none { display: flex; align-items: center; font-size: .833em; padding: 2.5em 0 0 2.5em; white-space: nowrap; }
/* Denetim Kütüğü */
.hal { background: var(--_hds--colors---surface--primary); }
.hal__top { position: absolute; left: 0; right: 0; top: 0; height: 5.167em; display: flex; align-items: center; gap: .8em; padding: .5em 0 0 1.667em;
  border-bottom: 1px solid var(--_hds--colors---border--subtle); }
.hal__side { width: .9em; height: .9em; }
.hal__title { font-size: 1.083em; font-weight: 600; }
.hal__body { position: absolute; left: 0; right: 0; top: 5.167em; bottom: 0; background: var(--_hds--colors---surface--tertiary); padding: 1.625em 0 0 1.667em; }  /* sol kenar: eskiden uygulamanın kenar çubuğu payı (40 birim) beyazdı, Serkan 28.10 kapattı; gri pay 96 → 40 birim (Serkan 28.10) */
.hal__filters { display: flex; gap: .833em; }
.hal__f { display: flex; align-items: center; gap: .55em; height: 2.93em; padding: 0 .85em; background: #fff; border: 1px solid var(--_hds--colors---border--default);
  font-size: .71em; white-space: nowrap; }
.hal__f.is--on { background: var(--_hds--colors---signal-blue--25); }
.hal__caret { width: .7em; height: .7em; }
.hal__table { margin-top: 1.25em; width: 60em; }
.hal__cols, .hal__row { display: grid; grid-template-columns: 12.6em 17.04em 1fr; }
.hal__cols { height: 1.75em; align-items: center; padding-left: .833em; border-bottom: 1px solid var(--_hds--colors---border--subtle); }
.hal__cols span { font-family: var(--_hds--typography---family--mono); font-size: .55em; letter-spacing: .14em; text-transform: uppercase; color: var(--_hds--themes---text--tertiary); }
.hal__row { height: 4.208em; padding: 1.15em 0 0 .833em; background: #fff; border-bottom: 1px solid var(--_hds--colors---border--subtle); }
.hal__row.is--hl { background: var(--_hds--colors---signal-blue--25); }
.hal__new { overflow: hidden; }
.hal__t { font-size: .75em; font-weight: 500; letter-spacing: .01em; }
.hal__redact { display: block; width: 9.33em; height: 1em; margin: -.35em 0 0 -.15em; background: var(--_hds--colors---surface--tertiary); }
.hal__role { font-size: .625em; color: var(--_hds--themes---text--secondary); margin-top: .65em !important; }
.hal__act { font-size: .71em; font-weight: 600; }
.hal__det { font-size: .6em; color: var(--_hds--themes---text--secondary); margin-top: .75em !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 32em; }
/* How it works §1 Setup: sonucun çizimi — gri masada üç ÜGDR sayfası, öndeki Kısım B imza sayfası (Serkan 28.10.2026; home_media.py
   setup_panel(); js/live-panels.js). 4:5 kutu, çizim alanı 1000 × 1250, 1em = 24 birim (2.4cqw). Mavi zeminli değerler Firma Bilgileri'nden gelir.
   Kâğıt gri masada durduğu için beyaz bölümle karışmaz (form panelinde sınır kayboluyordu). */
.hrep > * { font-size: 14px; font-size: 2.4cqw; }
.hrep { background: var(--_hds--colors---surface--tertiary); }
.hrep__sheet { position: absolute; width: 30.8em; height: 43.6em; filter: drop-shadow(0 .15em .5em rgba(22, 21, 25, .09)); }
/* Pah sol üstte (sitenin kart dili). clip-path gölgeyi de keser → gölge dış kapta (.hrep__sheet), pah iç kâğıtta. Çerçeve yok (gri üstünde beyaz kart kuralı). */
.hrep__paper { position: relative; height: 100%; padding: 2.2em 2.3em; background: var(--_hds--colors---surface--primary);
  clip-path: polygon(1.6em 0, 100% 0, 100% 100%, 0 100%, 0 1.6em); }
.hrep__sheet--front { left: 2.9em; top: 6.4em; }
.hrep__sheet--1 { left: 4.8em; top: 4.5em; }
.hrep__sheet--2 { left: 6.7em; top: 2.6em; }
.hrep__sheet--back .hrep__paper { padding-top: .55em; }
.hrep__doc { font-family: var(--_hds--typography---family--mono); font-size: .46em; letter-spacing: .12em; text-transform: uppercase;
  color: var(--_hds--themes---text--tertiary); white-space: nowrap; }
.hrep__sheet--back .hrep__doc { text-align: right; }
.hrep__v { background: var(--_hds--colors---signal-blue--25); box-decoration-break: clone; -webkit-box-decoration-break: clone; padding: 0 .15em; }
.hrep__head { display: flex; align-items: flex-start; gap: .8em; padding-bottom: 1.1em; border-bottom: 1px solid var(--_hds--colors---border--subtle); }
.hrep__logo { flex: none; display: flex; align-items: center; justify-content: center; width: 2.5em; height: 2.5em; padding: 0;
  background: var(--_hds--colors---signal-blue--300); color: #fff; font-family: var(--_hds--typography---family--mono); font-weight: 500; font-size: 1em; }
.hrep__co { flex: 1; min-width: 0; }
.hrep__coname { font-size: .82em; font-weight: 600; }
.hrep__addr { font-size: .6em; color: var(--_hds--themes---text--secondary); margin-top: .4em !important; }
.hrep__doc--right { margin-top: .3em !important; }
.hrep__rows { display: grid; gap: .85em; margin-top: 1.4em; }
.hrep__row { display: grid; grid-template-columns: 8.4em 1fr; align-items: baseline; gap: .8em; }
.hrep__k { font-family: var(--_hds--typography---family--mono); font-size: .48em; letter-spacing: .12em; text-transform: uppercase; color: var(--_hds--themes---text--tertiary); }
.hrep__d { font-size: .67em; line-height: 1.5; }
.hrep__h { font-size: .7em; font-weight: 600; margin-top: 2.2em !important; padding-top: 1.2em; border-top: 1px solid var(--_hds--colors---border--subtle); }
.hrep__lines { display: grid; gap: .5em; margin-top: .9em; }
.hrep__lines span { display: block; height: .32em; background: #ecebe8; }
.hrep__lines span:nth-child(2) { width: 92%; } .hrep__lines span:nth-child(4) { width: 64%; }
.hrep__v--sign { display: inline-block; padding: .1em .3em; color: var(--_hds--colors---signal-blue--700); }
.hrep__sign { display: block; width: 9.5em; height: auto; }
.hrep__foot { position: absolute; left: 2.3em; right: 2.3em; bottom: 1.6em; display: flex; justify-content: space-between; align-items: center;
  font-family: var(--_hds--typography---family--mono); font-size: .44em; letter-spacing: .1em; text-transform: uppercase; color: var(--_hds--themes---text--tertiary); }
.hrep__row:has(.hrep__v--sign) { align-items: center; }
/* How it works §3 Documents: bir belge → onu kullanan ürünler (Serkan 28.10.2026; home_media.py docs_panel(); js/live-panels.js).
   Masaüstü çizim alanı 62.5 × 33.6em (1em = 1.6cqw ≈ 22 px @1440). Üç kart aynı boyda (19.88 × 26em, y 1.2): belge x 0 (mavi), ürün A
   x 22.03, ürün B x 42.62 → belge→ürün 2.15em ≈ 48 px, ürün↔ürün .72em ≈ 16 px. Modül belgenin altında, aynı genişlikte (y 29–32).
   Zincir: belge dibi → modül; modülün sağından alt hat (y 30.5) → ürün dipleri (y 27.2). Uç noktaları yok.
   Ürün kartının başı 04/Storage'ın dosya kapağı gibi (PIF kodu, marka + ad); pastel zemin yok (gri bölümde kayboluyordu).
   Ürün satırları tek satır (ad · durum).
   Ölçü değişirse home_media.py yollarını da güncelle.
   Telefon (≤767): 1em = 3.8cqw ≈ 12.4 px @375, alan 26.3 × 48em (belge 0–13.4, modül 16–18.4, alt hat 19.7, ürünler 21–48, 12.5em + 1.29em ≈ 16 px ara); belge üstte (12.4em), ürünler 15.2em'den yan yana, T biçiminde bağ; kartlar binmez.
   Gölge ve çerçeve yok: beyaz pahlı kartlar gri bölümde. Kesikli çizgi yalnız panel ekrandayken kayar (.is--on). */
.img-ph.hlive.hdoc { aspect-ratio: 62.5 / 33.6; background: transparent; outline: none; }
.hdoc > * { font-size: 10px; font-size: 1.6cqw; }
.hdoc__lines { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; fill: none; pointer-events: none; stroke: var(--_hds--colors---signal-blue--300); }
.hdoc__lines path { stroke-width: .07; stroke-dasharray: .32 .24; }
.hdoc.is--on .hdoc__lines path { animation: hdoc-march 1.1s linear infinite; }
@keyframes hdoc-march { to { stroke-dashoffset: -.56; } }
.hdoc__lines--m { display: none; }
.hdoc__card { position: absolute; top: 1.2em; width: 19.88em; height: 26em; }
.hdoc__card--doc { left: 0; } .hdoc__card--p0 { left: 22.03em; } .hdoc__card--p1 { left: 42.62em; }
.hdoc__in { display: flex; flex-direction: column; height: 100%; padding: 2.2em 2.2em; background: var(--_hds--colors---surface--primary);
  clip-path: polygon(1.2em 0, 100% 0, 100% 100%, 0 100%, 0 1.2em); }
.hdoc__dhead { display: flex; align-items: center; justify-content: space-between; height: 1.4em; }
.hdoc__icon { width: 1.4em; height: 1.4em; color: var(--_hds--themes---text--primary); }
.hdoc__pill { font-family: var(--_hds--typography---family--mono); font-weight: 500; font-size: .5em; letter-spacing: .1em; padding: .45em .9em;
  background: var(--_hds--colors---signal-blue--25); color: var(--_hds--colors---signal-blue--700); }
.hdoc__dname { font-size: 1.5em; font-weight: 600; line-height: 1.2; margin-top: 1.0667em !important; }  /* = 1.6em taban */
.hdoc__ver { font-size: .62em; color: var(--_hds--themes---text--secondary); margin-top: .3em !important; }
.hdoc__meta { display: flex; justify-content: space-between; gap: 1em; padding: .75em 0; border-top: 1px solid var(--_hds--colors---border--subtle); }
.hdoc__ver + .hdoc__meta { margin-top: 1.6em; }
.hdoc__meta span { font-size: .6em; } .hdoc__meta span:first-child { color: var(--_hds--themes---text--secondary); }
.hdoc__used { font-family: var(--_hds--typography---family--mono); font-weight: 500; font-size: .5em; letter-spacing: .1em; text-transform: uppercase;
  color: var(--_hds--colors---signal-blue--300); margin-top: auto !important; white-space: nowrap; }  /* eski sürüm satırının hemen üstünde */
/* Ürün kapağı: 04/Storage'daki dosya kartının ön kapağı gibi (ürün renginde açık ton, mono PIF kodu, kalın marka + ad); kartın üstüne taşar */
.hdoc__cover { margin: -.4em 0 0; }
.hdoc__tab { font-family: var(--_hds--typography---family--mono); font-size: .46em; letter-spacing: .1em; text-transform: uppercase; text-align: right;
  color: var(--_hds--themes---text--primary); }
.hdoc__brand { font-size: .6em; font-weight: 700; margin-top: 1.4em !important; }
.hdoc__pname { font-size: 1.15em; font-weight: 500; line-height: 1.25; margin-top: .15em !important; }
.hdoc__sub { font-family: var(--_hds--typography---family--mono); font-size: .46em; line-height: 1.4; letter-spacing: .1em; text-transform: uppercase;
  color: var(--_hds--themes---text--tertiary); margin: 3.4em 0 1.4em !important; }
.hdoc__row { display: flex; align-items: center; justify-content: space-between; gap: 1em; height: 2.6em; border-top: 1px solid var(--_hds--colors---border--subtle); }
.hdoc__row--old { margin-top: 1.1em; }
.hdoc__ing { font-size: .66em; line-height: 1.4; white-space: nowrap; }
.hdoc__kind { font-family: var(--_hds--typography---family--mono); font-size: .78em; letter-spacing: .08em; color: var(--_hds--themes---text--tertiary); margin-left: .8em; text-transform: uppercase; }
.hdoc__st { display: inline-flex; font-family: var(--_hds--typography---family--mono); font-weight: 500; font-size: .48em; letter-spacing: .08em;
  text-transform: uppercase; padding: .4em .85em; white-space: nowrap; }
.hdoc__st--miss { background: var(--_hds--colors---coral-red--25); color: var(--_hds--colors---coral-red--700); }
.hdoc__st--cur { background: var(--_hds--colors---mint-green--25); color: var(--_hds--colors---mint-green--700); }
.hdoc__st--ends { background: var(--_hds--colors---warm-orange--25); color: var(--_hds--colors---warm-orange--700); }
.hdoc__st--arch { background: var(--_hds--colors---surface--tertiary); color: var(--_hds--themes---text--secondary); }
.hdoc__was { display: none; }
.hdoc__now { display: inline-flex; }  /* hap satır ortasında kalsın (inline kutu taban çizgisine oturup aşağı kayıyordu) */
.hdoc__foot { margin-top: auto; padding-top: 1.2em; border-top: 1px solid var(--_hds--colors---border--subtle); }
.hdoc__count { display: flex; justify-content: space-between; font-family: var(--_hds--typography---family--mono); font-size: .5em; letter-spacing: .1em;
  text-transform: uppercase; color: var(--_hds--themes---text--secondary); }
.hdoc__bar { display: block; height: .3em; margin-top: .9em; background: #ecebe8; }
.hdoc__fill { display: block; height: 100%; background: var(--_hds--colors---signal-blue--300); }
/* Data Distribution Engine: belge → sistem → ürünler. Mavi, belge kartı genişliğinde; Asistan'ın işareti yavaş ve sürekli döner */
.hdoc__hub { position: absolute; left: 0; top: 29em; width: 19.88em; height: 3em; display: flex; align-items: center; gap: .8em; padding: 0 2.2em;
  background: var(--_hds--colors---signal-blue--300); color: #fff; clip-path: polygon(.8em 0, 100% 0, 100% 100%, 0 100%, 0 .8em); }
.hdoc__hubmark { flex: none; width: 1.5em; height: 1.5em; color: #fff; }
.hdoc__hubmark svg { display: block; width: 100%; height: 100%; fill: currentColor; transform-origin: 50% 50%; animation: ahero-spin 9.6s linear infinite; }
@media (prefers-reduced-motion: reduce) { .hdoc__hubmark svg { animation: none; } }
.hdoc__hubtext { font-family: var(--_hds--typography---family--mono); font-weight: 500; font-size: .62em; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
/* Belge kartı mavi (Serkan 28.10): kaynak ilk bakışta ayrışsın; ana sayfadaki mavi Uygunluk Boyutları kartıyla aynı dil */
.hdoc__card--doc .hdoc__in { background: var(--_hds--colors---signal-blue--300); color: #fff; }
.hdoc__card--doc .hdoc__icon { color: #fff; }
.hdoc__card--doc .hdoc__pill { background: #fff; color: var(--_hds--colors---signal-blue--700); }
.hdoc__card--doc .hdoc__ver, .hdoc__card--doc .hdoc__meta span:first-child { color: rgba(255, 255, 255, .75); }
.hdoc__card--doc .hdoc__meta, .hdoc__card--doc .hdoc__row { border-color: rgba(255, 255, 255, .28); }
.hdoc__card--doc .hdoc__used { color: #fff; }
.hdoc__card--doc .hdoc__st { background: rgba(255, 255, 255, .16); color: #fff; }
@media (max-width: 767px) {
  .img-ph.hlive.hdoc { aspect-ratio: 26.3 / 48; }
  .hdoc > * { font-size: 3.8cqw; }
  .hdoc__lines--d { display: none; }
  .hdoc__lines--m { display: block; }
  .hdoc__lines path { stroke-width: .07; stroke-dasharray: .26 .2; }  /* .1 telefonda kaba duruyordu */
  @keyframes hdoc-march { to { stroke-dashoffset: -.46; } }
  .hdoc__in { padding: 1.4em 1.4em; }
  .hdoc__card { top: 21em; width: 12.5em; height: 27em; }
  .hdoc__pname { font-size: 1.05em; }
  .hdoc__cover { margin: 0; min-height: 4.4em; }  /* iki satırlık ad iki kartta aynı yeri kaplasın */
  .hdoc__sub { margin: 1.8em 0 .6em !important; }
  .hdoc__hubtext { font-size: .55em; }
  .hdoc__row { display: block; height: auto; padding: .55em 0 .6em; }  /* dar kartta durum adın altında */
  .hdoc__row--old { display: flex; padding: .5em 0; }
  .hdoc__row:not(.hdoc__row--old) .hdoc__st { margin-top: .9em; }
  .hdoc__card--p0 { left: 0; } .hdoc__card--p1 { left: 13.8em; }  /* ara 1.29em ≈ 16 px */
  .hdoc__card--doc { left: 0; top: 0; width: 26.3em; height: 13.4em; }
  .hdoc__hub { left: 0; top: 16em; width: 26.3em; height: 2.4em; padding: 0 1.4em; }
  .hdoc__dname { font-size: 1.2em; margin-top: .4em !important; }
  .hdoc__ver + .hdoc__meta { margin-top: .8em; }
  .hdoc__meta + .hdoc__meta { display: none; }
  .hdoc__used { margin-top: auto !important; }
  .hdoc__row--old { margin-top: .6em; }
}
/* How it works §6 Takip karoları (Serkan 28.10.2026; home_media.py glyph()): ekran görüntüsü yerine sol üstte tek ikon, ikonla başlık arası
   geniş; kart iç boşluğu sitenin kart kuralı (üst/alt 48, yan 32 · telefon 32/24). */
.tile__body.tile__body--glyph { flex: 1; padding: var(--_hds--spacing---space--2xl) var(--_hds--spacing---space--xl); }
.tile__glyph { width: 2rem; height: 2rem; flex: none; margin-bottom: var(--_hds--spacing---space--3xl); color: var(--_hds--colors---signal-blue--300); }
@media (max-width: 767px) { .tile__body.tile__body--glyph { padding: var(--_hds--spacing---space--xl) var(--_hds--spacing---space--lg); }
  .tile__glyph { margin-bottom: var(--_hds--spacing---space--2xl); } }


/* ===== Portal sayfaları (Serkan 30.10.2026; scripts/pages/portals.py) — /raw-portal, /maker-portal ===== */
.phero { position: relative; overflow: hidden; background: var(--_hds--colors---surface--tertiary); }
.phero__title { margin: var(--_hds--spacing---space--lg) 0 0; text-wrap: balance; }  /* H1 = display-2xl, sayfanın en büyük yazısı (Serkan 04.11.2026) */
.phero__actions { margin-top: var(--_hds--spacing---space--3xl); }  /* başlık → düğme 64 px (Serkan 04.11.2026: "biraz daha aç") */
/* portal logosu ortada: logo nesne, altında tek mesaj */
/* sadeleşince kısa kaldı (Serkan 04.11.2026) → ekranın büyük kısmı, içerik dikeyde ortada */
.phero--center { display: flex; align-items: center; min-height: min(78svh, 52rem);
  padding: clamp(4.5rem, 2.5rem + 5vw, 8rem) var(--_hds--spacing---space--lg); text-align: center; }
.phero--center .phero__inner { width: 100%; }
.phero--center .phero__inner { display: flex; flex-direction: column; align-items: center; max-width: 72rem; margin: 0 auto; }
.phero__logo { display: block; width: clamp(15rem, 8rem + 24vw, 30rem); height: auto; }
.phero--center .phero__title { margin-top: clamp(1.75rem, 1rem + 2vw, 3rem); }
.phero--center .phero__actions { justify-content: center; }
/* Ekosistem: sayfanın kendi tarafı beyaz karo + mavi hap, ötekiler gri zeminde bağlantılı */
.peco__tile .tile__body { height: 100%; }
.peco__tile .text-link { margin-top: auto; padding-top: var(--_hds--spacing---space--md); }
.peco__tile--here { background: var(--_hds--colors---surface--primary); outline: 1px solid var(--_hds--colors---signal-blue--300); outline-offset: -1px; }
/* 01 · Talep durumları: beyaz kartta renkli hap + cümle; ilk satırın üst çizgisi yok (kart başlığı ayırır) */
.pstates .guide-card__label { margin: 0; }
.pstates__item:first-child { border-top: 0; }
.pstates__key { margin: 0; }
/* sarı hap (Serkan 30.10: "Bekliyor" sarı): sitenin paletinde sarı yok → platformun uyarı hapıyla aynı değerler (--uq-pill-uyari-bg / -text) */
.tile__module.tile__module--yellow { background-color: #fff4d1; color: #5c4100; }
/* Üçlü karolar tablette sıkışıyordu (768'de 8–10 satır) → ≤991 tek sütun */
@media screen and (max-width: 991px) { .tiles.ptiles { grid-template-columns: 1fr; } }
/* Footer alt şeridi (Serkan 30.10): solda iki portal logosu, ödeme logolarıyla aynı 24 px; telif satırı en altta, tek başına */
.footer__portals { display: flex; flex-wrap: wrap; align-items: center; gap: var(--_hds--spacing---space--lg); }
.footer__portal { display: block; transition: opacity .15s; }
.footer__portal:hover { opacity: .75; }
.footer__portal:focus-visible { outline: 2px solid var(--_hds--colors---signal-blue--300); outline-offset: 4px; }
.footer__portal img { display: block; height: 24px; width: auto; }
.footer__copyright { flex-basis: 100%; margin-top: var(--_hds--spacing---space--md); }
/* telefonda iki logo yan yana sığsın (24 px'te alt alta iniyor, aralık öbür satırlardan büyük kalıyordu) */
@media screen and (max-width: 479px) { .footer__portals { gap: var(--_hds--spacing---space--md); } .footer__portal img { height: 20px; } }

/* Ölçüm damgası ("Counted …", "Measured …"): 11 px mono metin üçüncül renkte (#848499) beyazda 3,6:1 kalıyordu (PageSpeed 31.10.2026,
   WCAG 1.4.3 en az 4,5:1). İkincil renk (#585866, ~7:1); tarih değeri birincil kalır. Koyu bölümlerde token koyu temaya döner. */
.datasheet__date { color: var(--_hds--themes---text--secondary); }

/* Karşılaştırma dizini (31.10.2026, compare_index.py): her genişlikte bizim sütun + seçilen rakip; seçici her genişlikte, dar ekranda yatay kayar */
.versus[data-show] .versus__picker { display: block; overflow-x: auto; scrollbar-width: none; }
.versus[data-show] .versus__picker::-webkit-scrollbar { display: none; }
.versus[data-show] .billing__track.versus__track,
.versus[data-show] .versus__track .billing__thumb-inner { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: auto; }
.versus[data-show] .billing__track.versus__track { width: max-content; }
@media screen and (min-width: 1280px) {
  .versus[data-show] .versus__corner { width: 40%; }
  .versus[data-show] .versus__src-row { grid-template-columns: 40% minmax(0, 1fr); }
}

/* Rehber açılış görseli (scripts/pages/guide_media.py): 16:9 kutuyu doldurur */
.img-ph.guide-hero { padding: 0; }
.guide-hero__img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Regulatory Watch bulgusu, canlı çizim (scripts/pages/live_rw.py; hareket js/live-panels.js `rw`). Kart yok: tek bulgu koyu gri yüzeyin (graphite-plum/300, çerçevesiz) tamamına yayılır
   (Serkan 03.11.2026: "zoom in", sonra "beyaz çerçeve ve pahlı kart çıksın, bilgi tüm alana yayılsın"). Asıl öğe ölçek: %0–%6 çizgisi üstünde sınır çentiği ve
   formüldeki oranın noktası; aşım mercan çizgiyle görünür. Kutu 2,4:1 (Özellikler) ve 1:1 (Regulatory Watch); 1em = kutu genişliğinin %1,55'i / %2,6'sı (dar sütunda kalan gün sayacı yok). CSS son hâli çizer. */
.img-ph.hlive.hrw { aspect-ratio: 2.4 / 1; background: var(--_hds--colors---graphite-plum--300); outline: none; color: var(--_hds--colors---graphite-plum--700); }
.img-ph.hlive.hrw--fixed { aspect-ratio: 1; min-height: 0; clip-path: polygon(2em 0, 100% 0, 100% 100%, 0 100%, 0 2em); }
.hrw > .hrw__in { font-size: 1.55cqw; }
.hrw--fixed > .hrw__in { font-size: 2.6cqw; }
.hrw__in { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 3.4em; padding: 0 3.6em; }
.hrw--fixed .hrw__in { gap: 2.8em; padding: 2.6em; }
.hrw__top { display: flex; align-items: center; justify-content: space-between; gap: 1em; }
.hrw .hrw__src { font-family: var(--_hds--typography---family--mono); font-weight: 500; font-size: .8em; letter-spacing: .08em; text-transform: uppercase;
  color: var(--_hds--colors---graphite-plum--600); white-space: nowrap; }
.hrw__ref { margin-left: 1.2em; color: var(--_hds--colors---graphite-plum--500); }
.hrw__pills { display: inline-flex; gap: .5em; }
.hrw__sev, .hrw__st { font-family: var(--_hds--typography---family--mono); font-weight: 500; font-size: .72em; letter-spacing: .08em; text-transform: uppercase;
  padding: .55em .9em; line-height: 1; white-space: nowrap; }
.hrw__sev { background: var(--_hds--colors---coral-red--300); color: var(--_hds--colors---surface--primary); }
.hrw__status { display: inline-grid; }
.hrw__status > .hrw__st { grid-area: 1 / 1; }
.hrw__st--open { box-shadow: inset 0 0 0 1px var(--_hds--colors---graphite-plum--400); color: var(--_hds--colors---graphite-plum--600); }
.hrw__st--fixed { background: var(--_hds--colors---mint-green--25); color: var(--_hds--colors---mint-green--700); }
.hrw__mid { display: flex; align-items: flex-end; justify-content: space-between; gap: 2em; }
.hrw .hrw__prod { font-weight: 600; font-size: 3em; line-height: 1.05; letter-spacing: -.02em; }
.hrw .hrw__subst { margin-top: .5em; font-size: 1.3em; color: var(--_hds--colors---graphite-plum--600); }
.hrw__clock { text-align: right; }
.hrw .hrw__big { font-family: var(--_hds--typography---family--mono); font-weight: 400; font-size: 4.4em; line-height: .9; letter-spacing: -.03em; }
.hrw .hrw__cap { margin-top: .7em; font-family: var(--_hds--typography---family--mono); font-weight: 500; font-size: .82em; letter-spacing: .08em; text-transform: uppercase;
  color: var(--_hds--colors---graphite-plum--500); }
.hrw__date { margin-left: .8em; color: var(--_hds--colors---graphite-plum--600); }
/* Ölçek: çizgi 5.2em'de; nokta ve üst etiket --p'de, sınır çentiği ve alt etiket --lim'de; aşım (sınırdan noktaya) mercan */
.hrw__meter { position: relative; height: 8em; }
.hrw__track { position: absolute; left: 0; right: 0; top: 5.2em; height: 1px; background: var(--_hds--colors---graphite-plum--400); }
.hrw__over { position: absolute; top: calc(5.2em - 1px); height: 3px; left: calc(var(--lim) * 100%); width: max(0%, calc((var(--p) - var(--lim)) * 100%));
  background: var(--_hds--colors---coral-red--300); }
.hrw__tick { position: absolute; left: calc(var(--lim) * 100%); top: 4.4em; width: 1px; height: 1.6em; background: var(--_hds--colors---graphite-plum--700); }
.hrw__lab { position: absolute; transform: translateX(-50%); white-space: nowrap; font-family: var(--_hds--typography---family--mono); font-weight: 500;
  font-size: .82em; letter-spacing: .08em; text-transform: uppercase; color: var(--_hds--colors---graphite-plum--500); text-align: center; }
.hrw__lab b { font-weight: 500; color: var(--_hds--colors---graphite-plum--700); }
.hrw__lab--lim { top: 2.9em; left: 0; transform: translateX(calc(var(--lim) * -100%)); }
.hrw__mark { position: absolute; left: calc(var(--p) * 100%); top: 0; }
/* etiket noktanın konumu kadar kayar: solda sola, sağda sağa yaslı → kenardan taşmaz */
.hrw__lab--now { top: 0; display: flex; flex-direction: column; align-items: center; gap: .3em; transform: translateX(calc(var(--p) * -100%)); }
.hrw__lab--now b { display: block; font-weight: 400; font-size: 3.6em; letter-spacing: -.03em; line-height: 1; text-transform: none; color: var(--_hds--colors---coral-red--300); }
.hrw__dot { position: absolute; left: 0; top: 5.2em; width: 1.1em; height: 1.1em; border-radius: 50%; transform: translate(-50%, -50%);
  background: var(--_hds--colors---coral-red--300); box-shadow: 0 0 0 .45em rgba(255, 255, 255, .06); }
.hrw .hrw__closed { font-size: 1.2em; font-weight: 600; color: var(--_hds--colors---mint-green--300); }
/* 1:1 (Regulatory Watch sayfası, dar sütun): kimlik ve sayaç alt alta */
.hrw--fixed .hrw__top { flex-direction: column; align-items: flex-start; gap: .9em; }
.hrw--fixed .hrw__ref { display: block; margin: .5em 0 0; }
/* "Formül düzeltildi" son hâli (JS yokken de doğru okunur) */
.hrw--fixed .hrw__sev, .hrw--fixed .hrw__st--open { visibility: hidden; }
.hrw--fixed .hrw__lab--now b { color: var(--_hds--colors---mint-green--300); }
.hrw--fixed .hrw__dot { background: var(--_hds--colors---mint-green--300); }
/* Ürün görseli varsa (live_rw.py PRODUCT): bulgu solda, ürün fotoğrafı sağ kolonu üstten alta doldurur (pahlı, sitenin kart köşesi) */
.hrw--shot > .hrw__in { right: 45%; font-size: 1.1cqw; }
.hrw__shot { position: absolute; top: 0; bottom: 0; right: 0; width: 45%; overflow: hidden;
  clip-path: polygon(2.2cqw 0, 100% 0, 100% 100%, 0 100%, 0 2.2cqw); }
.hrw__shot-img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Fotoğraftaki ürün kartı: sol alt, beyaz, pahlı; PIF numarası mavi sekme gibi üstte */
.hrw__tag { position: absolute; left: 1.6em; bottom: 1.6em; display: flex; flex-direction: column; gap: .35em; padding: 1.1em 1.4em 1.2em;
  font-size: 1.1cqw; background: var(--_hds--colors---surface--primary); color: var(--_hds--colors---graphite-plum--200);
  clip-path: polygon(.9em 0, 100% 0, 100% 100%, 0 100%, 0 .9em); box-shadow: 0 1em 2.4em rgba(22, 21, 25, .18); }
.hrw__tag-pif { align-self: flex-start; margin-bottom: .45em; padding: .4em .7em; background: var(--_hds--colors---signal-blue--300); color: #fff;
  font-family: var(--_hds--typography---family--mono); font-weight: 500; font-size: .78em; letter-spacing: .08em; text-transform: uppercase; line-height: 1; }
.hrw__tag-name { font-weight: 600; font-size: 1.35em; line-height: 1.1; letter-spacing: -.01em; }
.hrw__tag-meta { font-family: var(--_hds--typography---family--mono); font-weight: 500; font-size: .78em; letter-spacing: .08em; text-transform: uppercase;
  color: var(--_hds--colors---graphite-plum--400); }
/* Telefon (≤767): Özellikler paneli alt alta — fotoğraf üstte, bulgu altında, yazılar okunur ölçüde */
@media (max-width: 767px) {
  .img-ph.hlive.hrw--open { aspect-ratio: auto; display: flex; flex-direction: column; }
  .hrw--open > .hrw__in, .hrw--shot > .hrw__in { position: relative; inset: auto; font-size: 3.2cqw; gap: 2.6em; padding: 2.4em 1.8em 2.4em; }
  .hrw--open .hrw__mid { flex-direction: column; align-items: flex-start; gap: 1.8em; }
  .hrw--open .hrw__clock { text-align: left; }
  .hrw--open .hrw__top { flex-direction: column; align-items: flex-start; gap: .9em; }
  .hrw--open .hrw__ref { display: block; margin: .5em 0 0; }
  .hrw--shot .hrw__shot { position: relative; order: -1; width: 100%; height: 72cqw; clip-path: polygon(6cqw 0, 100% 0, 100% 100%, 0 100%, 0 6cqw); }
  .hrw__tag { font-size: 2.5cqw; }
}

/* Özellikler · Etiket Kontrolü (hlc) ve GBF Hazırlama (hsd) kartları, canlı çizim (scripts/pages/live_cards.py; hareket js/live-panels.js `lc`, `sds`).
   Regulatory Watch bulgusuyla aynı dil, açık zeminde: panel kartın beyazında (gri yüzey sayfa zemininde kaybolup kartın dışında kalmış gibi duruyordu); tek an, büyük tipografi.
   1em = kutu genişliğinin %2,6'sı (telefonda %3,6). CSS son hâli çizer. */
.img-ph.hlive.hlc, .img-ph.hlive.hsd { aspect-ratio: 5 / 4; min-height: 0; background: var(--_hds--colors---surface--primary); outline: none; }
.hlc > .hlc__in, .hsd > .hsd__in { font-size: 2.6cqw; }
.hlc__in, .hsd__in { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 1.5em; padding: 2.6em 2.8em; }
.hpn__top { display: flex; align-items: center; justify-content: space-between; gap: 1em; }
.hlive .hpn__src, .hlive .hpn__k { font-family: var(--_hds--typography---family--mono); font-weight: 500; font-size: .74em; letter-spacing: .08em; text-transform: uppercase;
  color: var(--_hds--colors---graphite-plum--400); white-space: nowrap; }
.hpn__pills { display: inline-flex; align-items: center; gap: .9em; }
.hpn__sev, .hpn__act { font-family: var(--_hds--typography---family--mono); font-weight: 500; font-size: .7em; letter-spacing: .08em; text-transform: uppercase; line-height: 1; }
.hpn__sev { padding: .55em .9em; background: var(--_hds--colors---coral-red--300); color: var(--_hds--colors---surface--primary); }
.hpn__act { color: var(--_hds--colors---graphite-plum--500); }
/* Etiket Kontrolü */
.hlive .hlc__where { margin-top: -.7em; font-size: .95em; color: var(--_hds--colors---graphite-plum--400); }
.hlc__row { display: grid; gap: .45em; }
.hlive .hlc__on { position: relative; justify-self: start; font-weight: 600; font-size: 1.8em; line-height: 1.15; letter-spacing: -.01em; color: var(--_hds--colors---graphite-plum--500); }
.hlc__on-text { background: linear-gradient(var(--_hds--colors---coral-red--300), var(--_hds--colors---coral-red--300)) no-repeat 0 58% / 100% .09em; }  /* üstü çizgi, satır satır */
.hlive .hlc__sug { font-weight: 600; font-size: 1.8em; line-height: 1.15; letter-spacing: -.01em; color: var(--_hds--colors---graphite-plum--200); }
.hlive .hlc__why { font-size: .98em; line-height: 1.4; color: var(--_hds--colors---graphite-plum--400); max-width: 30em; }
.hlc__row--why { padding-top: 1.2em; border-top: 1px solid var(--_hds--colors---border--default); }
/* GBF: açık kırmızı (coral-red/25; Serkan 03.11.2026, tehlike simgesiyle aynı dil) zeminde tek beyaz pahlı kart — simge ve sınıf büyük, gerisi tek satır */
.img-ph.hlive.hsd { background: var(--_hds--colors---coral-red--25); }
.hsd__in { align-items: center; }
.hsd__card { width: 78%; display: grid; gap: 1.8em; padding: 1.8em 2em 1.9em; background: var(--_hds--colors---surface--primary);
  clip-path: polygon(1.1em 0, 100% 0, 100% 100%, 0 100%, 0 1.1em); box-shadow: 0 1em 2.4em rgba(147, 49, 49, .08); }
.hsd__cls { display: flex; align-items: center; gap: 1.6em; }
.hsd__ghs { flex: none; width: 6.4em; height: 6.4em; }
.hlive .hsd__code { font-family: var(--_hds--typography---family--mono); font-weight: 500; font-size: 1.1em; letter-spacing: .02em;  /* CLP kodu, büyük harfe çevrilmez (TR'de Liq → LİQ oluyordu) */
  color: var(--_hds--colors---graphite-plum--400); white-space: nowrap; }
.hlive .hsd__h { margin-top: .1em; font-family: var(--_hds--typography---family--mono); font-weight: 400; font-size: 3.6em; line-height: 1; letter-spacing: -.03em;
  color: var(--_hds--colors---coral-red--300); }
.hsd__foot { display: grid; gap: .6em; padding-top: 1.2em; border-top: 1px solid var(--_hds--colors---border--default); }
.hlive .hsd__line { display: flex; justify-content: space-between; align-items: baseline; gap: 1em; }
.hsd__from, .hsd__un { font-family: var(--_hds--typography---family--mono); font-weight: 500; font-size: .8em; white-space: nowrap; }
.hsd__from { color: var(--_hds--colors---signal-blue--300); }
.hsd__un { color: var(--_hds--colors---graphite-plum--200); }
@media (max-width: 767px) {
  .hlc > .hlc__in, .hsd > .hsd__in { font-size: 3.6cqw; }
  .img-ph.hlive.hlc, .img-ph.hlive.hsd { aspect-ratio: auto; }
  .hlc__in, .hsd__in { position: relative; inset: auto; padding: 2.4em 2em; }
  .hsd > .hsd__in { font-size: 3cqw; padding: 2.4em 1.6em; }
  .hsd__card { width: 100%; }
}
/* Etiket Kontrolü · kutu açılımı (hlb): okunan bölgeler çerçeveli, sonuç durum adıyla; son hâlde görüntü sağ alt çeyreğe (iddia) 2× yaklaşır ve
   düzeltme kartı sol altta. Kırpım 1815×1361 → kutu bu oranda; GBF paneli de aynı oranda (iki kart yan yana eşit). */
.img-ph.hlive.hlb, .img-ph.hlive.hsd { aspect-ratio: 1815 / 1361; }
.img-ph.hlive.hlb { min-height: 0; background: var(--_hds--colors---surface--primary); outline: none; }
.hlb > * { font-size: 1.9cqw; }
.hlb > .hlb__card { font-size: 2.05cqw; }
.hlb__view { position: absolute; inset: 0; overflow: hidden; }
.hlb__stage { position: absolute; inset: 0; transform-origin: 100% 100%; transform: scale(2); }
.hlb__box--ok { opacity: 0; }  /* son hâl: yalnız eksik satır */
.hlb__img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hlb__box { position: absolute; box-shadow: inset 0 0 0 1px var(--_hds--colors---signal-blue--300); background: rgba(70, 58, 237, .06); }
.hlb__box--ok { box-shadow: inset 0 0 0 1px var(--_hds--colors---mint-green--400); background: rgba(46, 160, 110, .07); opacity: 0; }
.hlb__box--miss { box-shadow: inset 0 0 0 1.5px var(--_hds--colors---coral-red--300); background: rgba(232, 78, 78, .08); }
.hlb__chip { position: absolute; left: -1px; bottom: 100%; margin-bottom: .25em; padding: .35em .55em; white-space: nowrap; line-height: 1;
  font-family: var(--_hds--typography---family--mono); font-weight: 500; font-size: .5em; letter-spacing: .06em; text-transform: uppercase; }
.hlb__box--ok .hlb__chip { background: var(--_hds--colors---mint-green--25); color: var(--_hds--colors---mint-green--700); }
.hlb__box--miss .hlb__chip { background: var(--_hds--colors---coral-red--300); color: var(--_hds--colors---surface--primary); }
.hlb__box--miss { opacity: 0; }
/* eklenen satır: boş yerde, kutunun mono diliyle; soldan yazılır */
.hlb__add { position: absolute; left: 6%; right: 4%; top: 50%; transform: translateY(-50%); font-family: var(--_hds--typography---family--mono); font-weight: 500;
  font-size: .55em; line-height: 1.35; letter-spacing: .02em; text-transform: uppercase; color: var(--_hds--colors---signal-blue--300); }
.hlb__card { position: absolute; left: 3%; bottom: 4%; width: 49%; display: grid; gap: 1.1em; padding: 1.5em 1.6em 1.6em; background: var(--_hds--colors---surface--primary);
  clip-path: polygon(1em 0, 100% 0, 100% 100%, 0 100%, 0 1em); box-shadow: 0 1em 2.4em rgba(22, 21, 25, .12); }
.hlb__pair { display: grid; gap: .8em; }
.hlb .hlc__on, .hlb .hlc__sug { font-size: 1.6em; }
.hlb .hlc__why { font-size: .9em; }
.hlive .hlb__none { font-size: 1.05em; color: var(--_hds--colors---graphite-plum--500); }
@media (max-width: 767px) {
  .hlb > * { font-size: 2.6cqw; }
  /* telefonda kart görüntünün altında (üstüne binince iddiayı örtüyordu) */
  .img-ph.hlive.hlb { aspect-ratio: auto; display: flex; flex-direction: column; align-items: stretch; background: var(--_hds--colors---surface--primary); }
  .hlb__view { position: relative; inset: auto; aspect-ratio: 1815 / 1361; }
  .hlb > .hlb__card { position: relative; left: auto; bottom: auto; width: auto; margin-top: -1.2em; margin-inline: 1em; font-size: 3.2cqw; }
}
/* Maker Portal · Formüllerim: veri dağıtımı (scripts/pages/live_portals.py; hareket js/live-panels.js `formulas`). Gri panelde sitenin kartları (tile, pah):
   solda tek formül (4 sütun) → ortada dağıtım işareti (3) → sağda üç talep (5); düz mavi çizgi işaretten bir omurgaya, omurgadan her talebe.
   CSS yalnız son hâli çizer. ≤991: alt alta; çizgi işaretin ekseninden dikey akar, talepler omurgadan sağa dallanır. */
.hfm { --hfm-line: var(--_hds--colors---signal-blue--300); --hfm-gap: var(--_hds--spacing---space--xl);
  display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--hfm-gap); align-items: center;
  padding: var(--_hds--spacing---space--4xl) var(--_hds--spacing---space--3xl); background: var(--_hds--colors---surface--tertiary); }
.hfm p { margin: 0; }
.hfm .tile { position: relative; }
.hfm .tile__body { display: flex; flex-direction: column; gap: var(--_hds--spacing---space--md); }
.hfm__lib .tile__body { padding-left: var(--_hds--spacing---space--lg); padding-right: var(--_hds--spacing---space--lg); }
.hfm .tile__head { height: 1.75rem; margin-bottom: var(--_hds--spacing---space--sm); }
.hfm__lib { grid-column: 1 / 5; }
.hfm__rows { margin: var(--_hds--spacing---space--xl) 0 0; padding: 0; list-style: none; }
.hfm__rows li { display: flex; justify-content: space-between; gap: var(--_hds--spacing---space--md); padding: var(--_hds--spacing---space--md) 0;
  border-top: 1px solid var(--_hds--colors---border--default); font-size: var(--_hds--typography---fluid--body-md); color: var(--_hds--themes---text--primary); }
.hfm__rows li.hfm__rows-head { padding-top: 0; border-top: 0; font-family: var(--_hds--typography---family--mono); font-weight: 500;
  font-size: var(--_hds--typography---fluid--body-xsm); letter-spacing: .08em; text-transform: uppercase; color: var(--_hds--themes---text--tertiary); }
.hfm__pct { font-family: var(--_hds--typography---family--mono); color: var(--_hds--themes---text--secondary); }
.hfm__dist { grid-column: 5 / 8; align-self: stretch; position: relative; display: flex; align-items: center; justify-content: center; }
.hfm__line { position: absolute; top: 50%; left: calc(var(--hfm-gap) * -1); right: -1px;  /* omurgada biter */
  height: 2px; margin-top: -1px; }
.hfm__hub { position: relative; z-index: 1; width: 4.5rem; height: 4.5rem; display: grid; place-items: center; background: var(--hfm-line); color: #fff;
  clip-path: polygon(.9rem 0, 100% 0, 100% 100%, 0 100%, 0 .9rem); }
.hfm__hub svg { display: block; width: 2.25rem; height: 2.25rem; fill: currentColor; animation: ahero-spin 9.6s linear infinite; }
@media (prefers-reduced-motion: reduce) { .hfm__hub svg { animation: none; } }
.hfm__reqs { grid-column: 8 / 13; position: relative; display: grid; grid-auto-rows: 1fr; gap: var(--_hds--spacing---space--lg); }
.hfm .hfm__q { overflow: visible; }
/* omurga: talepler eşit boyda (1fr) → ilk ve son talebin ortası hesaplanır; dal: talebin solunda, işaretten gelen çizgiyle aynı kalınlık */
.hfm__spine { position: absolute; left: calc(var(--hfm-gap) * -1 - 1px); width: 2px;
  top: calc((100% - 2 * var(--_hds--spacing---space--lg)) / 6); bottom: calc((100% - 2 * var(--_hds--spacing---space--lg)) / 6); }
.hfm__branch { position: absolute; right: 100%; top: 50%; width: var(--hfm-gap); height: 2px; margin-top: -1px; }
/* Çizgi kesikli ve sürekli akar (Serkan 04.11.2026: "dashed line sürekli akış"; How it works belge dağıtımıyla aynı dil): karttan sağa,
   omurgada işaretin hizasından yukarı ve aşağı, dallardan taleplere. ≤991'de hep aşağı. */
.hfm { --hfm-dash: 8px; --hfm-step: 14px; }
.hfm__line, .hfm__branch { background: repeating-linear-gradient(90deg, var(--hfm-line) 0 var(--hfm-dash), transparent var(--hfm-dash) var(--hfm-step));
  animation: hfm-right .8s linear infinite; }
.hfm__spine::before, .hfm__spine::after { content: ""; position: absolute; left: 0; width: 2px;
  background: repeating-linear-gradient(180deg, var(--hfm-line) 0 var(--hfm-dash), transparent var(--hfm-dash) var(--hfm-step)); }
.hfm__spine::before { top: 0; bottom: 50%; animation: hfm-up .8s linear infinite; }
.hfm__spine::after { top: 50%; bottom: 0; animation: hfm-down .8s linear infinite; }
@keyframes hfm-right { from { background-position: 0 0; } to { background-position: var(--hfm-step) 0; } }
@keyframes hfm-up { from { background-position: 0 0; } to { background-position: 0 calc(var(--hfm-step) * -1); } }
@keyframes hfm-down { from { background-position: 0 0; } to { background-position: 0 var(--hfm-step); } }
@media (prefers-reduced-motion: reduce) { .hfm__line, .hfm__branch, .hfm__spine::before, .hfm__spine::after { animation: none; } }
.hfm__q-in { display: flex; flex-direction: column; align-items: flex-start; gap: var(--_hds--spacing---space--md); padding: var(--_hds--spacing---space--lg); }
.hfm__q-brand { font-family: var(--_hds--typography---family--mono); font-weight: 500; font-size: var(--_hds--typography---fluid--body-xsm); letter-spacing: .08em;
  text-transform: uppercase; color: var(--_hds--themes---text--tertiary); }
.hfm .hfm__q-name { margin-top: var(--_hds--spacing---space--sm); font-weight: 600; font-size: var(--_hds--typography---fluid--h5); line-height: 1.25; color: var(--_hds--themes---text--primary); }
/* talebin dibinde soldaki formülün adı, aynı mavi: ürün adı ayrı, formül aynı */
.hfm .hfm__q-ok { display: inline-flex; align-items: center; gap: var(--_hds--spacing---space--sm); font-weight: 600;
  font-size: var(--_hds--typography---fluid--body-sm); color: var(--_hds--themes---text--brand); }
.hfm__q-ok svg { width: 1.1em; height: 1.1em; }
.hfm__cap { grid-column: 1 / -1; margin-top: var(--_hds--spacing---space--2xl) !important; text-align: center; font-family: var(--_hds--typography---family--mono); font-weight: 500;
  font-size: var(--_hds--typography---fluid--body-sm); letter-spacing: .08em; text-transform: uppercase; color: var(--_hds--themes---text--secondary); }
.hfm__cap b { font-weight: 500; color: var(--_hds--themes---text--brand); }
@media (max-width: 991px) {
  .hfm { --hfm-x: 2.25rem; grid-template-columns: 1fr; padding: var(--_hds--spacing---space--2xl) var(--_hds--spacing---space--lg); }
  .hfm__lib, .hfm__dist, .hfm__reqs { grid-column: 1; }
  .hfm__dist { justify-content: flex-start; padding: var(--_hds--spacing---space--lg) 0; }
  .hfm__line { top: 0; bottom: 0; left: calc(var(--hfm-x) - 1px); right: auto; width: 2px; height: auto; margin-top: 0; }
  .hfm__reqs { margin-left: calc(var(--hfm-x) + var(--hfm-gap)); }
  .hfm__spine { top: 0; }
  .hfm__line { background: repeating-linear-gradient(180deg, var(--hfm-line) 0 var(--hfm-dash), transparent var(--hfm-dash) var(--hfm-step)); animation-name: hfm-down; }
  .hfm__spine::before { animation-name: hfm-down; }
}
@media (max-width: 767px) {
  /* telefonda talepler dar: işaret küçülür, dal kısalır */
  .hfm { --hfm-x: 1.5rem; --hfm-gap: var(--_hds--spacing---space--lg); padding: var(--_hds--spacing---space--2xl) var(--_hds--spacing---space--md); }
  .hfm__hub { width: 3rem; height: 3rem; clip-path: polygon(.6rem 0, 100% 0, 100% 100%, 0 100%, 0 .6rem); }
  .hfm__hub svg { width: 1.5rem; height: 1.5rem; }
  .hfm__q-in { padding: var(--_hds--spacing---space--lg) var(--_hds--spacing---space--md); }
}
/* Raw Portal · Talep Edilenler (scripts/pages/live_portals.py raw_requests; hareket js/live-panels.js `rawreq`): gri bölümde doğrudan tek beyaz pahlı kart (çerçeve yok: "kart içinde kart", Serkan 04.11.2026),
   uygulamanın listesi gibi. Durum hapları sayfadaki durum kartıyla aynı renklerde. */
.hrq { padding: 0; }
.hrq p, .hrl p { margin: 0; }
.hrq__card { position: relative; padding: var(--_hds--spacing---space--xl); }
.hrq__head { display: flex; justify-content: space-between; align-items: center; gap: var(--_hds--spacing---space--md); }
.hrq__k { font-family: var(--_hds--typography---family--mono); font-weight: 500; font-size: var(--_hds--typography---fluid--body-xsm); letter-spacing: .08em; text-transform: uppercase; color: var(--_hds--themes---text--tertiary); }
.hrq__btn, .hrl__btn { font-family: var(--_hds--typography---family--mono); font-weight: 500; font-size: var(--_hds--typography---fluid--body-xsm); letter-spacing: .08em; text-transform: uppercase;
  background: var(--_hds--colors---signal-blue--300); color: #fff; padding: .75em 1.1em; white-space: nowrap; }
.hrq .hrq__title { margin-top: var(--_hds--spacing---space--xl); }
.hrq__rows { margin: var(--_hds--spacing---space--xl) 0 0; padding: 0; list-style: none; }
.hrq__row { display: flex; justify-content: space-between; align-items: center; gap: var(--_hds--spacing---space--md); padding: var(--_hds--spacing---space--md) 0; border-top: 1px solid var(--_hds--colors---border--default); }
.hrq .hrq__firm { font-weight: 600; font-size: var(--_hds--typography---fluid--body-md); color: var(--_hds--themes---text--primary); }
.hrq .hrq__what { margin-top: .15em; font-size: var(--_hds--typography---fluid--body-sm); color: var(--_hds--themes---text--secondary); }
.hrq__state { display: flex; align-items: center; gap: var(--_hds--spacing---space--sm); flex: none; }
.hrq__age { font-family: var(--_hds--typography---family--mono); font-size: var(--_hds--typography---fluid--body-xsm); color: var(--_hds--themes---text--tertiary); }
@media (max-width: 767px) {
  .hrq__card { padding: var(--_hds--spacing---space--xl) var(--_hds--spacing---space--lg); }
  .hrq__head { flex-direction: column; align-items: flex-start; }
  .hrq__row { flex-direction: column; align-items: flex-start; gap: var(--_hds--spacing---space--sm); }
}
/* Raw Portal · Belge Kütüphanesi (live_portals.py raw_library; döngü js/live-panels.js `rawlib`). İki eş kart, aynı iskelet: baş satırı (ikon · hap), büyük ad,
   durum satırı; aralarında kesikli akan çizgi. CSS son hâli çizer (kütüphanede belge + ilk isteyen); döngüyü JS kurar. ≤767'de kartlar alt alta, çizgi dikey. */
.hrl { --hrl-line: var(--_hds--colors---signal-blue--300); --hrl-gap: var(--_hds--spacing---space--xl); --hfm-step: 14px;  /* akış kareleri Formüllerim'le ortak (hfm-right, hfm-down) */
  display: grid; grid-template-columns: 1fr 5rem 1fr; column-gap: var(--hrl-gap); align-items: stretch;
  padding: var(--_hds--spacing---space--4xl); background: var(--_hds--colors---surface--tertiary); }
.hrl .tile { position: relative; }
.hrl__in { display: flex; flex-direction: column; height: 100%; padding: var(--_hds--spacing---space--2xl) var(--_hds--spacing---space--xl); }
.hrl__head { height: 1.75rem; display: flex; justify-content: space-between; align-items: center; }
.hrl__pills { display: grid; }
.hrl__pill { grid-area: 1 / 1; justify-self: end; }
.hrl__pill[data-s="up"], .hrl__pill[data-s="ai"] { visibility: hidden; }
.hrl__win { position: relative; height: 9.5rem; margin-top: var(--_hds--spacing---space--2xl); overflow: hidden; }
.hrl__slide { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; }
.hrl__slide--up, .hrl__req:not(:first-child) { visibility: hidden; }
.hrl .hrl__big { font-weight: 600; font-size: var(--_hds--typography---fluid--h3); line-height: 1.15; letter-spacing: -.01em; color: var(--_hds--themes---text--primary); }
.hrl__foot { min-height: 2.5rem; display: flex; align-items: center; border-top: 1px solid var(--_hds--colors---border--default); padding-top: var(--_hds--spacing---space--md); }
.hrl__fn { font-family: var(--_hds--typography---family--mono); font-size: var(--_hds--typography---fluid--body-sm); color: var(--_hds--themes---text--tertiary); overflow-wrap: anywhere; }
.hrl__upl { display: grid; gap: var(--_hds--spacing---space--sm); width: 100%; }
.hrl__bar { display: block; width: 100%; height: 3px; background: var(--_hds--colors---border--default); }
.hrl__bar-fill { display: block; height: 100%; background: var(--hrl-line); transform-origin: 0 50%; }
.hrl__link { align-self: center; height: 2px; margin: 0 calc(var(--hrl-gap) * -1); transform-origin: 0 50%;
  background: repeating-linear-gradient(90deg, var(--hrl-line) 0 8px, transparent 8px 14px); animation: hfm-right .8s linear infinite; }
.hrl__auto { display: inline-flex; align-items: center; gap: var(--_hds--spacing---space--xs); font-weight: 600; font-size: var(--_hds--typography---fluid--body-md); color: var(--_hds--colors---mint-green--700); }
.hrl__auto svg { width: 1.1em; height: 1.1em; }
@media (prefers-reduced-motion: reduce) { .hrl__link { animation: none; } }
@media (max-width: 991px) { .hrl { padding: var(--_hds--spacing---space--2xl) var(--_hds--spacing---space--xl); grid-template-columns: 1fr 3rem 1fr; } }
@media (max-width: 767px) {
  .hrl { grid-template-columns: 1fr; padding: var(--_hds--spacing---space--lg) var(--_hds--spacing---space--md); }
  .hrl__in { padding: var(--_hds--spacing---space--xl) var(--_hds--spacing---space--lg); }
  .hrl__win { height: 7.5rem; margin-top: var(--_hds--spacing---space--xl); }
  .hrl__link { justify-self: center; width: 2px; height: 3rem; margin: 0; transform-origin: 50% 0;
    background: repeating-linear-gradient(180deg, var(--hrl-line) 0 8px, transparent 8px 14px); animation-name: hfm-down; }
}

/* ===== Ana sayfa · Etiket Kontrolü bölümü (scripts/pages/home_label.py, 04.11.2026) — metin solda, canlı etiket paneli sağda; ≤991 alt alta ===== */
.home-label { column-gap: var(--_hds--spacing---gap--lg); }
.home-label .tile__tags { justify-content: flex-start; }  /* site kuralı kart başı için sağa yaslı */
@media (max-width: 991px) { .home-label { grid-template-columns: 1fr; row-gap: var(--_hds--spacing---space--2xl); } }