/* ==========================================================================
   HYDROTRUST — Design System
   Ported from the medical2000 design system for the same agency; palette
   retargeted to the HydroTrust gold/charcoal brand. Bootstrap grid stays
   loaded; this layers the full visual language on top. Tokens are hardcoded
   (HydroTrust has no theme-colour field in the database).
   ========================================================================== */

:root{
  /* Brand — HydroTrust "Golden" (#FFB909) */
  --c-primary:        #FFB909;
  --c-primary-d:      #D89B00;
  --c-primary-l:      #FFD152;
  --c-primary-soft:   #FFF4D6;
  /* Altın rengi METİN olarak açık zeminde okunmuyordu (#FFB909 beyaz üstünde
     1,7:1). Dolgu/çizgi/ikon altın kalır; yazı bu koyu altın tonunu kullanır
     (beyazda 5,7:1, Cloud Pearl'de 4,9:1 — WCAG AA). */
  --c-primary-ink:    #8C5D00;
  /* Metin rengi altın zeminde: beyaz sarı üstünde okunmuyor, kömür siyahı marka standardı */
  --c-on-primary:     #14140F;
  --c-ink:            #14140F;
  --c-ink-soft:       #242216;
  --c-ink-2:          #1E1C13;

  /* Neutrals — "Cloud Pearl" (#F2F5F7) zemin ailesi */
  --c-bg:        #F2F5F7;
  --c-surface:   #E9EEF2;
  --c-surface-2: #DFE6EB;
  --c-line:      #DCE3E8;
  --c-line-2:    #C5D0D8;
  --c-text:      #1F272B;
  --c-muted:     #5A666D;
  --c-muted-2:   #8A959C;

  /* Type */
  --f-head: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
  --f-body: 'Bricolage Grotesque', 'Inter', 'Segoe UI', system-ui, sans-serif;

  /* Radius */
  --r-xs: 6px;  --r-sm: 10px; --r: 16px; --r-lg: 24px; --r-xl: 34px; --r-pill: 999px;

  /* Shadow */
  --sh-xs: 0 1px 2px rgba(20,20,15,.05);
  --sh-sm: 0 4px 14px rgba(20,20,15,.06);
  --sh:    0 10px 30px rgba(20,20,15,.08);
  --sh-lg: 0 24px 60px rgba(20,20,15,.12);
  --sh-primary: 0 14px 30px rgba(255,185,9,.28);

  /* Layout */
  --container: 1280px;
  --gut: clamp(16px, 4vw, 28px);
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset / base ---------- */
*{ box-sizing:border-box; }
/* Ekran okuyucu ve arama motoru görsün, tasarımda yer kaplamasın */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
/* Yalnız yakalama noktası TANIMLI bölümler (şimdilik .mroom) kadraja oturur;
   diğer her yerde kaydırma tamamen serbest kalır. Masaüstünde ve yeterince
   yüksek ekranda açık — kısa/dokunmatik ekranda yapış-kal hissi verirdi. */
@media (min-width:993px) and (min-height:700px) and (pointer:fine){
  html{ scroll-snap-type:y proximity; }
}
body{
  margin:0; background:var(--c-bg); color:var(--c-text);
  font-family:var(--f-body); font-size:16px; line-height:1.65;
  font-weight:400; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; transition:color .2s var(--ease); }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
/* text-wrap:balance — çok satırlı başlıklarda son satıra tek kelime düşmesini
   (öksüz satır) engeller; desteklemeyen tarayıcıda yok sayılır. */
h1,h2,h3,h4,h5,h6{ font-family:var(--f-head); color:var(--c-ink); margin:0 0 .5em; line-height:1.12; font-weight:700; letter-spacing:-.02em; text-wrap:balance; }
p{ margin:0 0 1rem; }
::selection{ background:var(--c-primary); color:var(--c-on-primary); }
:focus-visible{ outline:2px solid var(--c-primary); outline-offset:3px; }

/* ---------- Layout helpers ---------- */
.mx{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gut); }
.mx-wide{ max-width:1480px; }
.section{ padding:clamp(56px,8vw,110px) 0; position:relative; }
.section--alt{ background:var(--c-surface); }
.section--ink{ background:var(--c-ink); color:#E9E6DB; }
.section--ink h1,.section--ink h2,.section--ink h3,.section--ink h4{ color:#fff; }
.section--tight{ padding:clamp(40px,5vw,70px) 0; }

/* Section header */
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--f-head); font-size:.78rem; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--c-primary-ink); margin-bottom:18px;
}
.eyebrow::before{ content:""; width:30px; height:2px; background:var(--c-primary); border-radius:2px; }
.eyebrow--num{ color:var(--c-muted-2); }
.eyebrow--light{ color:#FFD873; }
.eyebrow--light::before{ background:#FFD873; }
.sec-head{ max-width:760px; margin-bottom:clamp(34px,4vw,58px); }
.sec-head.center{ margin-inline:auto; text-align:center; }
.sec-head h2{ font-size:clamp(1.8rem,3.6vw,2.9rem); }
.sec-head p{ color:var(--c-muted); font-size:1.05rem; margin-bottom:0; }
.sec-head--row{ display:flex; align-items:flex-end; justify-content:space-between; gap:30px; flex-wrap:wrap; max-width:none; }

/* ---------- Buttons ---------- */
.btn{
  --bg:var(--c-primary); --fg:var(--c-on-primary); --bd:var(--c-primary);
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--f-head); font-weight:600; font-size:.95rem; line-height:1;
  padding:15px 28px; border-radius:var(--r-pill); cursor:pointer;
  background:var(--bg); color:var(--fg) !important; border:1.5px solid var(--bd);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
  white-space:nowrap;
}
/* buton metni her zaman kendi --fg rengini korur (kapsayıcı 'a{color}' kurallarını ezmesin) */
.btn i, .btn svg{ color:var(--fg) !important; }
.btn i,.btn svg{ transition:transform .25s var(--ease); }
.btn:hover{ transform:translateY(-2px); box-shadow:var(--sh-primary); }
.btn:hover i.arr,.btn:hover svg.arr{ transform:translateX(4px); }
.btn--primary{ --bg:var(--c-primary); --fg:var(--c-on-primary); --bd:var(--c-primary); }
.btn--dark{ --bg:var(--c-ink); --fg:#fff; --bd:var(--c-ink); }
.btn--dark:hover{ box-shadow:0 14px 30px rgba(20,20,15,.3); }
.btn--outline{ --bg:transparent; --fg:var(--c-ink); --bd:var(--c-line-2); }
.btn--outline:hover{ --bd:var(--c-primary); --fg:var(--c-primary); box-shadow:none; }
.btn--ghost-light{ --bg:rgba(255,255,255,.1); --fg:#fff; --bd:rgba(255,255,255,.3); backdrop-filter:blur(6px); }
.btn--ghost-light:hover{ --bg:#fff; --fg:var(--c-ink); --bd:#fff; box-shadow:none; }
.btn--lg{ padding:18px 34px; font-size:1rem; }
.btn--sm{ padding:11px 20px; font-size:.85rem; }
.btn--block{ width:100%; }

/* Text link */
.tlink{ display:inline-flex; align-items:center; gap:8px; font-family:var(--f-head); font-weight:600; color:var(--c-primary-ink); font-size:.95rem; }
.tlink:hover{ color:var(--c-ink); }
.tlink i,.tlink svg{ transition:transform .25s var(--ease); }
.tlink:hover i,.tlink:hover svg{ transform:translateX(4px); }

/* Pills / badges */
.pill{ display:inline-flex; align-items:center; gap:7px; font-size:.74rem; font-weight:600; letter-spacing:.04em; padding:6px 13px; border-radius:var(--r-pill); background:var(--c-primary-soft); color:var(--c-primary-ink); font-family:var(--f-head); }
.pill--new{ background:var(--c-primary); color:var(--c-on-primary); }
.pill--ink{ background:rgba(255,255,255,.12); color:#fff; }

/* ==========================================================================
   HEADER
   ========================================================================== */
.m-topbar{ position:relative; z-index:1001; background:#fff; color:var(--c-muted); font-size:.83rem; border-bottom:1px solid var(--c-line); }
.m-topbar .mx{ display:flex; align-items:center; justify-content:space-between; min-height:42px; gap:18px; }
.m-topbar a{ color:var(--c-text); }
.m-topbar a:hover{ color:var(--c-primary); }
.m-topbar__info{ display:flex; gap:22px; align-items:center; flex-wrap:wrap; }
.m-topbar__info i{ color:var(--c-primary); margin-right:7px; }
.m-topbar__social{ display:flex; gap:6px; align-items:center; }
.m-topbar__social a{ width:30px; height:30px; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; background:var(--c-surface-2); color:var(--c-muted); font-size:.8rem; }
.m-topbar__social a:hover{ background:var(--c-primary); color:var(--c-on-primary); }
.m-topbar__right{ display:flex; align-items:center; gap:16px; }
.m-lang--top{ position:relative; }
.m-lang--top .m-lang__btn{ height:auto; padding:5px 11px; background:#fff; font-size:.82rem; border:1px solid var(--c-line-2); border-radius:999px; color:var(--c-text); gap:6px; transition:border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease); }
.m-lang--top .m-lang__btn:hover{ border-color:var(--c-primary); color:var(--c-primary); background:#fff; }
.m-lang--top .m-lang__btn .caret{ transition:transform .25s var(--ease); }
.m-lang--top:hover .m-lang__btn .caret{ transform:rotate(180deg); }
.m-lang--top .m-lang__menu{ top:calc(100% + 8px); inset-inline-end:0; z-index:20; }
.is-home .m-topbar__right .m-lang__btn{ color:var(--c-ink); }
.is-home .m-topbar__right .m-lang__btn:hover{ background:rgba(255,255,255,.5); }
/* round flags */
.m-flag{ width:19px; height:19px; border-radius:50%; overflow:hidden; display:inline-flex; flex:none; box-shadow:0 0 0 1px rgba(20,20,15,.12); }
.m-flag svg{ width:100%; height:100%; display:block; }
.m-lang__menu a .m-flag{ width:20px; height:20px; }
/* topbar CTA + menü butonu */
.m-topbar .mx{ min-height:48px; }
.m-topbar__right .m-quote{ padding:8px 16px; font-size:.8rem; color:var(--c-on-primary); }
.m-topbar__right .m-quote:hover, .is-home .m-topbar__right .m-quote, .is-home .m-topbar__right .m-quote:hover{ color:var(--c-on-primary); }
.m-menu-btn{ display:inline-flex; align-items:center; gap:9px; height:44px; padding:0 20px; border-radius:var(--r-pill); background:var(--c-ink); color:#fff; font-family:var(--f-head); font-weight:600; font-size:.9rem; letter-spacing:.01em; cursor:pointer; border:none; transition:background .25s var(--ease), transform .25s var(--ease); }
.m-menu-btn:hover{ background:var(--c-primary); transform:translateY(-1px); }
.m-menu-btn i{ font-size:.95rem; }

.m-header{ position:sticky; top:0; z-index:1000; background:rgba(255,255,255,.92); backdrop-filter:blur(14px); border-bottom:1px solid var(--c-line); transition:box-shadow .3s var(--ease); }
.m-header.is-stuck{ box-shadow:var(--sh-sm); }
.m-header__bar{ display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:84px; }

/* Logo — kural 5.8:1'lik bir marka SVG'sine göre yazılmıştı; panelden gelen
   dosya 16:9 (1920x1080) ve yazı markası tuvalin ortasında duruyor. 42px
   yükseklikte yazı yalnız ~70px genişliğe düşüyordu. Yükseklik biraz
   artırıldı — kutu şeffaf olduğu için başlık yüksekliği değişmiyor. */
.m-logo{ display:inline-flex; align-items:center; gap:12px; flex-shrink:0; min-width:0; }
.m-logo img{ height:clamp(52px,5.4vw,78px); width:auto; max-width:min(330px,56vw); object-fit:contain; }
/* Footer'da zemin koyu; logo hem beyaza çevriliyor hem biraz daha iri duruyor. */
.m-footer .m-logo img{ height:clamp(58px,6vw,86px); max-width:min(360px,64vw); }

/* Nav */
.m-nav{ display:flex; align-items:center; gap:4px; }
/* Menü etiketleri tek satırda kalsın: Rusça/Fransızca karşılıklar uzun
   ("О компании", "Découvrir") ve sarınca başlık yüksekliği bozuluyordu. */
.m-nav > a, .m-nav__item > a{ white-space:nowrap; }
.m-nav > a{ position:relative; font-family:var(--f-head); font-weight:600; font-size:.95rem; color:var(--c-ink); padding:30px 16px; display:inline-flex; align-items:center; gap:6px; }
.m-nav > a .caret{ width:9px; height:9px; opacity:.55; transition:transform .25s var(--ease); }
.m-nav__item{ position:relative; }
.m-nav__item > a{ position:relative; font-family:var(--f-head); font-weight:600; font-size:.95rem; color:var(--c-ink); padding:30px 16px; display:inline-flex; align-items:center; gap:6px; }
.m-nav__item > a::after{ content:""; position:absolute; left:16px; right:16px; bottom:24px; height:2px; background:var(--c-primary); border-radius:2px; transform:scaleX(0); transform-origin:left; transition:transform .28s var(--ease); }
.m-nav__item:hover > a{ color:var(--c-primary); }
.m-nav__item:hover > a::after{ transform:scaleX(1); }
.m-nav__item:hover > a .caret{ transform:rotate(180deg); }

/* Dropdown (simple) */
.m-drop{ position:absolute; top:100%; left:0; min-width:240px; background:#fff; border:1px solid var(--c-line); border-radius:var(--r); box-shadow:var(--sh-lg); padding:10px; opacity:0; visibility:hidden; transform:translateY(10px); transition:all .26s var(--ease); }
.m-nav__item:hover .m-drop{ opacity:1; visibility:visible; transform:translateY(0); }
.m-drop a{ display:flex; align-items:center; gap:10px; padding:11px 14px; border-radius:var(--r-sm); font-size:.92rem; font-weight:500; color:var(--c-text); }
.m-drop a:hover{ background:var(--c-surface); color:var(--c-primary-ink); }

/* Mega menu (products) */
.m-mega{ position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(12px); width:min(1140px,calc(100vw - 40px)); background:#fff; border:1px solid var(--c-line); border-radius:var(--r-xl); box-shadow:var(--sh-lg); padding:22px 22px 16px; opacity:0; visibility:hidden; transition:opacity .28s var(--ease), transform .28s var(--ease), visibility .28s; }
.m-nav__item:hover .m-mega{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(10px); }
.m-mega__grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:12px; }
.m-mega__cat{ display:flex; flex-direction:column; align-items:stretch; text-align:center; gap:0; padding:0; border-radius:var(--r); transition:transform .25s var(--ease); }
.m-mega__cat:hover{ transform:translateY(-4px); }
.m-mega__ic{ width:100%; height:152px; border-radius:16px; background:linear-gradient(140deg,#FAF9F4,#EDEAE0); border:1px solid var(--c-line); display:grid; place-items:center; color:var(--c-primary-d); overflow:hidden; transition:border-color .25s var(--ease), box-shadow .25s var(--ease); }
.m-mega__ic img{ width:100%; height:100%; object-fit:contain; padding:6px; transition:transform .4s var(--ease); }
.m-mega__cat:hover .m-mega__ic img{ transform:scale(1.06); }
.m-mega__ic i{ font-size:2rem; }
.m-mega__cat:hover .m-mega__ic{ border-color:var(--c-primary); box-shadow:var(--sh); }
.m-mega__cat:hover .m-mega__ic img{ transform:scale(1.08); }
.m-mega__cat > span{ display:block; padding:12px 6px 2px; }
.m-mega__cat b{ font-family:var(--f-head); font-size:.9rem; color:var(--c-ink); display:block; line-height:1.28; }
.m-mega__cat > span span{ font-size:.75rem; color:var(--c-muted); display:block; margin-top:3px; }
.m-mega__foot{ margin-top:18px; padding-top:18px; border-top:1px solid var(--c-line); display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; }
.m-mega__foot p{ margin:0; font-size:.9rem; color:var(--c-muted); }

/* Header actions */
.m-actions{ display:flex; align-items:center; gap:8px; }
/* Başlıktaki dil seçici: üst şerit ekrandayken gereksiz (orada zaten var),
   kaydırılıp başlık yapışınca beliriyor. Yer kaplamasın diye display ile
   yönetiliyor — başlık yüksekliği değişmiyor. */
.m-lang--head{ display:none; }
.m-header.is-stuck .m-lang--head,
.m-lang--head.is-always{ display:block; }
.m-lang--head .m-lang__btn{ height:40px; padding:0 11px; font-size:.82rem; background:var(--c-surface); border-radius:var(--r-pill); gap:6px; }
.m-lang--head .m-lang__btn .caret{ transition:transform .25s var(--ease); }
.m-lang--head:hover .m-lang__btn{ color:var(--c-primary-ink); }
.m-lang--head:hover .m-lang__btn .caret{ transform:rotate(180deg); }
.m-lang--head .m-lang__menu{ z-index:30; }
@media (max-width:575px){ .m-lang--head .m-lang__btn{ padding:0 8px; } }
.m-icon-btn{ width:44px; height:44px; border-radius:12px; display:inline-flex; align-items:center; justify-content:center; color:var(--c-ink); border:1px solid transparent; background:transparent; cursor:pointer; transition:all .2s var(--ease); }
.m-icon-btn:hover{ background:var(--c-surface); color:var(--c-primary); }
.m-lang{ position:relative; }
.m-lang__btn{ display:inline-flex; align-items:center; gap:7px; padding:0 12px; height:44px; border-radius:12px; font-family:var(--f-head); font-weight:600; font-size:.85rem; color:var(--c-ink); background:var(--c-surface); }
.m-lang__btn:hover{ color:var(--c-primary-ink); }
.m-lang__menu{ position:absolute; top:calc(100% + 8px); inset-inline-end:0; inset-inline-start:auto; background:#fff; border:1px solid var(--c-line); border-radius:var(--r-sm); box-shadow:var(--sh); padding:6px; min-width:140px; opacity:0; visibility:hidden; transform:translateY(8px); transition:all .22s var(--ease); }
.m-lang:hover .m-lang__menu{ opacity:1; visibility:visible; transform:translateY(0); }
.m-lang__menu a{ display:flex; align-items:center; gap:9px; padding:9px 12px; border-radius:var(--r-xs); font-size:.88rem; font-weight:500; }
.m-lang__menu a:hover{ background:var(--c-surface); color:var(--c-primary-ink); }
.m-lang__menu a.active{ color:var(--c-primary-ink); font-weight:600; }

/* Search overlay */
.m-search{ max-height:0; overflow:hidden; background:var(--c-surface); border-top:1px solid transparent; transition:max-height .3s var(--ease); }
.m-search.open{ max-height:130px; border-top-color:var(--c-line); }

.m-burger{ display:none; flex-direction:column; gap:5px; width:46px; height:46px; border-radius:12px; background:var(--c-surface); border:none; cursor:pointer; align-items:center; justify-content:center; }
.m-burger span{ width:22px; height:2px; background:var(--c-ink); border-radius:2px; transition:.25s var(--ease); }

/* Mobile drawer */
.m-drawer{ position:fixed; inset:0 0 0 auto; width:min(380px,86vw); background:#fff; z-index:2000; transform:translateX(100%); transition:transform .35s var(--ease); display:flex; flex-direction:column; box-shadow:var(--sh-lg); overflow-y:auto; }
/* Kapalıyken yalnız ekranın dışındaydı: bağlantıları hâlâ sekme sırasındaydı
   ve belge genişliğine ekleniyordu. */
.m-drawer{ visibility:hidden; }
.m-drawer.open{ transform:translateX(0); visibility:visible; }
.m-drawer__head{ display:flex; align-items:center; justify-content:space-between; padding:18px 20px; border-bottom:1px solid var(--c-line); }
.m-drawer__body{ padding:14px 12px 30px; }
.m-drawer .dl{ display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; padding:13px 14px; font-family:var(--f-head); font-weight:600; font-size:1rem; color:var(--c-ink); border-radius:var(--r-sm); text-align:start; }
.m-drawer .dl:hover{ background:var(--c-surface); color:var(--c-primary-ink); }
.m-drawer .sub{ margin:2px 0 6px; border-inline-start:2px solid var(--c-line); margin-inline-start:20px; }
.m-drawer .sub a{ display:block; padding-block:9px; padding-inline:14px 10px; font-size:.9rem; color:var(--c-muted); font-weight:500; }
.m-drawer .sub a:hover{ color:var(--c-primary-ink); }
.m-drawer [data-acc][aria-expanded="true"] .fa-chevron-down{ transform:rotate(180deg); }
.m-drawer [data-acc] .fa-chevron-down{ transition:transform .25s var(--ease); }
/* Çekmecenin alt bloğu: gerçek iletişim bilgileri + dil seçimi. */
.m-drawer__foot{ margin-top:26px; padding-top:20px; border-top:1px solid var(--c-line); }
.m-drawer__foot a{ display:flex; align-items:center; gap:10px; padding:8px 14px; font-size:.92rem; color:var(--c-text); }
.m-drawer__foot a:hover{ color:var(--c-primary-ink); }
.m-drawer__foot p{ display:flex; gap:10px; padding:8px 14px; margin:0; font-size:.88rem; color:var(--c-muted); line-height:1.55; }
.m-drawer__foot i{ width:16px; text-align:center; color:var(--c-primary-ink); flex:none; margin-top:.2em; }
.m-drawer__lang{ display:flex; flex-wrap:wrap; gap:8px; padding:14px 14px 0; }
.m-drawer__lang a{ padding:7px 11px; border:1px solid var(--c-line); border-radius:var(--r-pill); font-family:var(--f-head); font-weight:600; font-size:.78rem; }
.m-drawer__lang a.active{ border-color:var(--c-primary); color:var(--c-primary-ink); }
.m-drawer__lang .m-flag{ width:18px; height:18px; }
/* tel:/mailto: bağlantılarına numaraların ters dönmemesi için direction:ltr
   veriliyor; ikon bağlantının İÇİNDE olduğu için RTL'de sola kaçıyordu.
   Satırı ters çevirerek ikon yine sağda kalıyor, numara LTR okunuyor. */
[dir="rtl"] .m-drawer__foot a,
[dir="rtl"] .mnav__info > a{ flex-direction:row-reverse; justify-content:flex-start; }
.m-overlay{ position:fixed; inset:0; background:rgba(20,20,15,.45); backdrop-filter:blur(2px); z-index:1999; opacity:0; visibility:hidden; transition:.3s var(--ease); }
.m-overlay.open{ opacity:1; visibility:visible; }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{ position:relative; background:var(--c-ink); color:#fff; overflow:hidden; }
.hero__slide{ position:relative; min-height:min(86vh,760px); display:flex; align-items:center; }
.hero__bg{ position:absolute; inset:0; z-index:0; }
.hero__bg img{ width:100%; height:100%; object-fit:cover; }
.hero__bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(100deg, rgba(14,14,10,.94) 0%, rgba(16,15,11,.82) 42%, rgba(20,20,15,.45) 100%); }
.hero__bg--plain{ background:radial-gradient(120% 120% at 0% 0%, #1D1B12 0%, #14140F 45%, #0C0C08 100%); }
.hero__inner{ position:relative; z-index:2; padding:clamp(60px,9vw,120px) 0; max-width:760px; }
.hero h1{ color:#fff; font-size:clamp(2.1rem,5.2vw,4rem); line-height:1.04; margin-bottom:22px; }
.hero h1 em{ font-style:normal; color:#FFD873; }
.hero__lead{ font-size:clamp(1rem,1.6vw,1.18rem); color:#D2CCB8; max-width:560px; margin-bottom:34px; }
.hero__cta{ display:flex; gap:14px; flex-wrap:wrap; }
.hero__stats{ display:flex; gap:40px; flex-wrap:wrap; margin-top:54px; padding-top:32px; border-top:1px solid rgba(255,255,255,.14); }
.hero__stat b{ font-family:var(--f-head); font-size:clamp(1.7rem,3vw,2.4rem); color:#fff; font-weight:800; display:block; line-height:1; }
.hero__stat span{ font-size:.85rem; color:#B2AC96; letter-spacing:.02em; }
.hero__dots{ position:absolute; z-index:3; bottom:26px; left:50%; transform:translateX(-50%); display:flex; gap:9px; }
.hero__dots .swiper-pagination-bullet{ width:9px; height:9px; background:#fff; opacity:.4; transition:.3s; }
.hero__dots .swiper-pagination-bullet-active{ opacity:1; width:26px; border-radius:5px; background:var(--c-primary-l); }
.hero__arrow{ position:absolute; z-index:3; top:50%; transform:translateY(-50%); width:50px; height:50px; border-radius:50%; border:1px solid rgba(255,255,255,.3); color:#fff; display:grid; place-items:center; cursor:pointer; background:rgba(255,255,255,.06); transition:.25s; }
.hero__arrow:hover{ background:var(--c-primary); border-color:var(--c-primary); }

/* trust strip */
.trust{ background:var(--c-ink-2); }
.trust .mx{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; }
.trust__item{ display:flex; gap:16px; align-items:center; padding:26px 24px; }
.trust__item i{ font-size:1.7rem; color:var(--c-primary-l); }
.trust__item b{ color:#fff; font-family:var(--f-head); font-size:1rem; display:block; }
.trust__item span{ color:#B2AC96; font-size:.84rem; }

/* ==========================================================================
   CARDS
   ========================================================================== */
.grid{ display:grid; gap:24px; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
/* Öğe sayısı sabit sütun sayısına bölünmediğinde son satır yarım kalıyordu;
   kendiliğinden sarmalayan ızgara (belge/sertifika listeleri gibi sayısı
   panelden değişen bloklar için). */
.grid-auto{ grid-template-columns:repeat(auto-fit,minmax(212px,1fr)); }

/* Category card */
.cat-card{ position:relative; border-radius:var(--r-lg); overflow:hidden; background:linear-gradient(165deg,#ffffff,#EEF2F5); border:1px solid var(--c-line); min-height:300px; display:flex; align-items:flex-end; isolation:isolate; transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease); }
.cat-card:hover{ transform:translateY(-5px); box-shadow:var(--sh-lg); border-color:var(--c-line-2); }
.cat-card img{ position:absolute; inset:0 0 60px 0; width:100%; height:calc(100% - 60px); object-fit:contain; padding:22px; z-index:0; transition:transform .6s var(--ease); }
.cat-card::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:104px; z-index:0; background:linear-gradient(to top, #ffffff 44%, rgba(255,255,255,0)); }
.cat-card:hover img{ transform:scale(1.06); }
.cat-card__body{ position:relative; z-index:1; padding:20px 24px; width:100%; display:flex; align-items:center; gap:13px; }
.cat-card__count{ flex:none; width:42px; height:42px; border-radius:12px; background:var(--c-primary-soft); color:var(--c-primary-d); display:grid; place-items:center; font-size:1.05rem; }
.cat-card h3{ color:var(--c-ink); font-size:1.16rem; margin:0; line-height:1.2; }
.cat-card__go{ position:absolute; top:18px; right:18px; width:42px; height:42px; border-radius:50%; background:#fff; border:1px solid var(--c-line); display:grid; place-items:center; color:var(--c-primary-d); transition:.3s var(--ease); box-shadow:0 4px 14px rgba(22,21,15,.08); }
.cat-card:hover .cat-card__go{ background:var(--c-primary); color:var(--c-on-primary); border-color:var(--c-primary); transform:rotate(-45deg); }
.cat-card--sm{ min-height:220px; }

/* ==========================================================================
   HOME CATEGORY SHOWCASE — genişleyen akordeon panelleri (hover ile açılır)
   ========================================================================== */
/* Kategori akordiyonu tek ekrana kilitli — .mroom ile aynı mantık:
   bölüm yapışkan başlığın altına oturur, artan dikey alanı akordiyon yutar. */
.hcxs{
  --hcxs-hdr:88px;
  min-height:calc(100vh  - var(--hcxs-hdr));
  min-height:calc(100svh - var(--hcxs-hdr));
  display:flex; flex-direction:column; justify-content:center;
  padding-block:clamp(26px,4vh,72px) clamp(22px,3.5vh,60px);
  scroll-margin-top:var(--hcxs-hdr);
  scroll-snap-align:start;
  scroll-snap-stop:normal;
}
.hcxs > .mx{ display:flex; flex-direction:column; flex:1 1 auto; min-height:0; width:100%; }
.hcxs .sec-head{ flex:none; margin-bottom:clamp(18px,2.6vh,40px); }
.hcxs .hcx{ flex:1 1 auto; }
.hcxs__cta{ flex:none; text-align:center; margin-top:clamp(18px,2.6vh,36px); }

.hcx{ display:flex; gap:12px; min-height:clamp(260px,34vh,540px); }
.hcx__panel{ position:relative; flex:1 1 0; min-width:64px; overflow:hidden; border-radius:22px; cursor:pointer; isolation:isolate;
  background:linear-gradient(160deg,#EEF2F5,#E4EAEF); border:1px solid rgba(20,20,15,.06);
  transition:flex .55s var(--ease), box-shadow .45s var(--ease), background .45s var(--ease); }
.hcx:not(:hover) .hcx__panel:first-child,
.hcx__panel:focus-visible,
.hcx__panel:hover{ flex:3.4 1 0; background:#fff; box-shadow:var(--sh-lg); }

.hcx__panel-plus{ position:absolute; top:16px; inset-inline-end:16px; z-index:4; width:38px; height:38px; border-radius:50%; background:rgba(20,20,15,.07); color:var(--c-ink); display:grid; place-items:center; font-size:.85rem; transition:.45s var(--ease); }
.hcx:not(:hover) .hcx__panel:first-child .hcx__panel-plus,
.hcx__panel:focus-visible .hcx__panel-plus,
.hcx__panel:hover .hcx__panel-plus{ background:var(--c-primary); color:var(--c-on-primary); transform:rotate(135deg); box-shadow:var(--sh-primary); }

.hcx__panel-label{ position:absolute; left:0; bottom:0; z-index:3; padding:26px 0 26px 30px; writing-mode:vertical-rl; transform:rotate(180deg); font-family:var(--f-head); font-weight:600; font-size:1.05rem; color:var(--c-ink); white-space:nowrap; transition:opacity .3s var(--ease); }
.hcx:not(:hover) .hcx__panel:first-child .hcx__panel-label,
.hcx__panel:focus-visible .hcx__panel-label,
.hcx__panel:hover .hcx__panel-label{ opacity:0; }

.hcx__panel-media{ position:absolute; inset:3% 4% 26% 4%; z-index:1; display:grid; place-items:center; opacity:0; transform:scale(.92); transition:opacity .5s var(--ease) .06s, transform .6s var(--ease); }
.hcx__panel-media img{ align-self:stretch; justify-self:stretch;
  width:100%; height:100%; min-width:0; min-height:0;
  object-fit:contain; }
.hcx__panel-media i{ font-size:4rem; color:rgba(20,20,15,.12); }
.hcx:not(:hover) .hcx__panel:first-child .hcx__panel-media,
.hcx__panel:focus-visible .hcx__panel-media,
.hcx__panel:hover .hcx__panel-media{ opacity:1; transform:none; }

.hcx__panel-body{ position:absolute; left:0; right:0; bottom:0; z-index:3; padding:26px 30px; opacity:0; transform:translateY(12px); transition:.45s var(--ease); pointer-events:none; }
.hcx:not(:hover) .hcx__panel:first-child .hcx__panel-body,
.hcx__panel:focus-visible .hcx__panel-body,
.hcx__panel:hover .hcx__panel-body{ opacity:1; transform:none; }
.hcx__panel-num{ font-family:var(--f-head); font-weight:600; font-size:.78rem; letter-spacing:.05em; color:var(--c-primary-ink); }
/* nowrap: uzun kategori adları (Almanca/Fransızca) panelin dışına taşıp
   kırpılıyordu. Sarmaya izin veriliyor, satır sonu dengeleniyor. */
.hcx__panel-body h3{ font-size:clamp(1.15rem,1.6vw,1.5rem); margin:8px 0 8px; color:var(--c-ink); text-wrap:balance; }
.hcx__panel-go{ display:inline-flex; align-items:center; gap:8px; color:var(--c-primary-ink); font-family:var(--f-head); font-weight:600; font-size:.92rem; }
.hcx__panel-go i{ transition:transform .25s var(--ease); }
.hcx__panel:hover .hcx__panel-go i{ transform:translateX(4px); }

@media (max-width:860px){
  .hcx{ flex-direction:column; min-height:0; }
  .hcx__panel{ flex:none !important; min-height:148px; background:#fff !important; box-shadow:var(--sh-sm) !important; }
  .hcx__panel-label{ display:none; }
  /* Fiziksel inset'ler RTL'de aynalanmıyordu: Arapçada görsel yine solda,
     metin sağda kalıp panelin kenarına dayanıyor ve kırpılıyordu. */
  .hcx__panel-media{ opacity:1 !important; transform:none !important;
    inset:auto; inset-block:14%; inset-inline:7% 48%; }
  .hcx__panel-body{ opacity:1 !important; transform:none !important;
    inset-inline:auto 0; width:54%; padding:22px 26px; }
  .hcx__panel-body h3{ white-space:normal; }
  .hcx__panel-plus{ background:var(--c-primary) !important; color:var(--c-on-primary) !important; transform:none !important; }
}

/* Product card */
.product-card{ background:#fff; border:1px solid var(--c-line); border-radius:var(--r-lg); overflow:hidden; display:flex; flex-direction:column; transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); height:100%; }
.product-card:hover{ transform:translateY(-6px); box-shadow:var(--sh-lg); border-color:transparent; }
.product-card__media{ position:relative; aspect-ratio:1/1; background:var(--c-surface); display:grid; place-items:center; padding:14px; overflow:hidden; }
/* Kutunun place-items:center'ı görseli esnetmediği için yüzde yükseklik
   belirsiz kalıyor, kare (600x600) ürün render'ları 4:3 kutudan taşıp
   altından kırpılıyordu. Bu görsel için hizalamayı stretch'e çeviriyoruz;
   object-fit:contain oranı koruyup boşluğu kendisi bırakıyor. */
.product-card__media img{
  align-self:stretch; justify-self:stretch;
  width:100%; height:100%; min-width:0; min-height:0;
  object-fit:contain; transition:transform .45s var(--ease);
}
.product-card:hover .product-card__media img{ transform:scale(1.06); }
.product-card__badges{ position:absolute; top:14px; left:14px; display:flex; gap:6px; flex-wrap:wrap; z-index:2; }

/* ---- Kart alt satırındaki eylemler: broşür işareti + teklif düğmesi ---- */
.product-card__acts{ display:inline-flex; align-items:center; gap:6px; }
/* Broşür işareti: tıklanacak bir şey değil, yalnız "PDF'i var" bilgisi.
   Yanındaki teklif düğmesiyle karışmasın diye zemini/çerçevesi yok. */
.product-card__pdf{
  display:inline-grid; place-items:center;
  width:26px; height:26px; color:#c8342b; font-size:.92rem;
  opacity:.72; transition:opacity .25s var(--ease);
}
.product-card:hover .product-card__pdf{ opacity:1; }

/* ---- "videosu var" işareti (görselin köşesinde) ---- */
.product-card__vid{
  position:absolute; inset-inline-end:14px; bottom:14px; z-index:2;
  width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  background:var(--c-primary); color:var(--c-on-primary); font-size:.72rem;
  box-shadow:0 4px 14px rgba(255,185,9,.38);
  transition:transform .3s var(--ease), background .3s var(--ease);
}
/* Oynat üçgeni optik olarak sola kaçık durur; 1px sağa alınca ortalanır */
.product-card__vid i{ margin-inline-start:2px; }
/* Dikkat çeken nabız: halka dışa doğru büyüyüp söner, ikon sabit kalır */
.product-card__vid::before{
  content:""; position:absolute; inset:0; border-radius:50%;
  border:2px solid var(--c-primary);
  animation:vidNabiz 2s var(--ease) infinite;
}
@keyframes vidNabiz{
  0%   { transform:scale(1);    opacity:.65; }
  70%  { transform:scale(1.65); opacity:0; }
  100% { transform:scale(1.65); opacity:0; }
}
.product-card:hover .product-card__vid{ transform:scale(1.12); background:var(--c-primary-d, #8A651A); }
@media (prefers-reduced-motion: reduce){
  .product-card__vid::before{ animation:none; opacity:.4; }
  .product-card__vid{ transition:none; }
}
@media (max-width:480px){
  .product-card__isaret{ inset-inline-end:10px; bottom:10px; gap:5px; }
  .product-card__vid,
  .product-card__pdf{ width:28px; height:28px; font-size:.62rem; }
}
.product-card__body{ padding:20px 22px 22px; display:flex; flex-direction:column; flex:1; }
.product-card__cat{ font-size:.74rem; letter-spacing:.06em; text-transform:uppercase; color:var(--c-primary-ink); font-weight:600; font-family:var(--f-head); }
.product-card h3{ font-size:1.05rem; margin:8px 0 6px; }
.product-card h3 a:hover{ color:var(--c-primary); }
.product-card__code{ font-size:.78rem; color:var(--c-muted); margin-bottom:14px; }
.product-card__foot{ margin-top:auto; padding-top:14px; border-top:1px solid var(--c-line); display:flex; align-items:center; justify-content:space-between; }
.product-card__foot .tlink{ font-size:.85rem; }

/* Post (blog) card */
.post-card{ background:#fff; border:1px solid var(--c-line); border-radius:var(--r-lg); overflow:hidden; display:flex; flex-direction:column; transition:transform .3s var(--ease), box-shadow .3s var(--ease); height:100%; }
.post-card:hover{ transform:translateY(-6px); box-shadow:var(--sh); }
.post-card__media{ aspect-ratio:16/10; overflow:hidden; background:var(--c-surface); }
.post-card__media img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.post-card:hover .post-card__media img{ transform:scale(1.06); }
.post-card__body{ padding:22px; display:flex; flex-direction:column; flex:1; }
.post-card__date{ font-size:.78rem; color:var(--c-muted-2); font-weight:500; margin-bottom:10px; }
.post-card h3{ font-size:1.08rem; margin-bottom:10px; }
.post-card h3 a:hover{ color:var(--c-primary); }
.post-card p{ color:var(--c-muted); font-size:.92rem; margin-bottom:16px; }
.post-card .tlink{ margin-top:auto; }

/* Tek yazı varken: üç sütunluk ızgarada kart solda kalıp sağı boş bırakmasın.
   Görsel solda, metin sağda, yatay "öne çıkan yazı" kartı olur. */
.post-solo{ grid-template-columns:1fr; }
.post-solo .post-card{ flex-direction:row; align-items:stretch; }
.post-solo .post-card__media{ flex:0 0 46%; aspect-ratio:16/10; min-height:0; }
.post-solo .post-card__body{ padding:34px 38px; justify-content:center; }
.post-solo .post-card h3{ font-size:1.5rem; line-height:1.28; margin-bottom:14px; }
.post-solo .post-card p{ font-size:1rem; max-width:60ch; margin-bottom:0; }
/* Dikey ortalanan gövdede "margin-top:auto" bağlantıyı en dibe itip
   metinle arasında kocaman boşluk bırakıyordu. */
.post-solo .post-card .tlink{ margin-top:20px; }
@media (max-width:820px){
  .post-solo .post-card{ flex-direction:column; }
  .post-solo .post-card__media{ flex:none; aspect-ratio:16/10; min-height:0; }
  .post-solo .post-card__body{ padding:22px; }
  .post-solo .post-card h3{ font-size:1.15rem; }
  .post-solo .post-card p{ font-size:.92rem; }
}

/* Feature / value card */
.feature-card{ background:#fff; border:1px solid var(--c-line); border-radius:var(--r-lg); padding:30px; transition:transform .3s var(--ease), box-shadow .3s var(--ease); height:100%; }
.feature-card:hover{ transform:translateY(-5px); box-shadow:var(--sh); }
.feature-card__ic{ width:58px; height:58px; border-radius:16px; background:var(--c-primary-soft); color:var(--c-primary-d); display:grid; place-items:center; font-size:1.4rem; margin-bottom:20px; }
.feature-card h3{ font-size:1.12rem; margin-bottom:10px; }
.feature-card p{ color:var(--c-muted); font-size:.93rem; margin:0; }

/* ==========================================================================
   SİLİNDİR TİPLERİ (.cylx)
   Tam genişlik koyu bant; kart/kutu yok. Solda sade tip listesi, sağda asıl
   kahraman olan teknik çizim, altta tam genişlik değer şeridi. Taşıyan şey
   boşluk ve tipografi; altın yalnız vurgu olarak kullanılır.
   ========================================================================== */
.cylx{
  position:relative; isolation:isolate; overflow:hidden;
  padding:clamp(70px, 8vw, 132px) 0 clamp(56px, 6vw, 96px);
  background:
    radial-gradient(90% 62% at 78% 6%, rgba(255,185,9,.075) 0%, transparent 62%),
    linear-gradient(168deg, #17171200 0%, #0E0E0B 42%, #08080600 100%),
    #0C0C09;
  color:#fff;
}
/* Ölçü ızgarası tüm banda yayılır, kenarlara doğru söner. */
.cylx__grid{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    repeating-linear-gradient(0deg,  rgba(255,255,255,.038) 0 1px, transparent 1px 30px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.038) 0 1px, transparent 1px 30px),
    repeating-linear-gradient(0deg,  rgba(255,255,255,.07) 0 1px, transparent 1px 150px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.07) 0 1px, transparent 1px 150px);
  -webkit-mask-image:radial-gradient(ellipse 82% 74% at 56% 44%, #000 18%, rgba(0,0,0,.42) 58%, transparent 92%);
          mask-image:radial-gradient(ellipse 82% 74% at 56% 44%, #000 18%, rgba(0,0,0,.42) 58%, transparent 92%);
}
.cylx__in{ position:relative; z-index:1; }

/* Hafif dokunuşlar: bandın üst ve alt kenarında yumuşak geçiş, altta çok
   soluk bir altın ufuk çizgisi. Izgarayı bastırmadan derinlik veriyor. */
.cylx::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(12,12,9,.9) 0%, transparent 16%),
    linear-gradient(0deg,   rgba(12,12,9,.9) 0%, transparent 14%);
}
.cylx::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:34%;
  z-index:0; pointer-events:none;
  background:
    radial-gradient(120% 100% at 50% 122%, rgba(255,185,9,.10) 0%, rgba(255,185,9,.03) 42%, transparent 72%);
}

/* Başlık diğer bölümlerle aynı: ortalı, tek satır. Daha önce sola dayalı ve
   dar olduğu için dört satıra bölünüyordu. */
.cylx__head{ margin-bottom:clamp(34px, 4vw, 58px); }
.cylx__head h2{
  color:#fff; margin:0;
  font-size:clamp(1.95rem, 3.4vw, 2.95rem);
  line-height:1.1; letter-spacing:-.028em;
  text-wrap:balance;
}

.cylx__body{
  display:grid; grid-template-columns:minmax(230px, 300px) minmax(0,1fr);
  gap:clamp(30px, 5vw, 82px); align-items:center;
}

/* --- Sol: tip listesi (kutu yok, sadece tipografi) --- */
.cylx__nav{ display:flex; flex-direction:column; }
.cylx__t{
  position:relative; display:flex; align-items:baseline; gap:16px;
  padding:15px 2px 15px 0; border:0; background:none; cursor:pointer;
  font-family:inherit; text-align:left; width:100%;
  color:rgba(255,255,255,.34);
  border-top:1px solid rgba(255,255,255,.08);
  transition:color .28s var(--ease);
}
.cylx__nav .cylx__t:last-child{ border-bottom:1px solid rgba(255,255,255,.08); }
.cylx__t:hover{ color:rgba(255,255,255,.72); }
.cylx__t.is-active{ color:#fff; }
.cylx__no{
  flex:0 0 auto; font-family:var(--f-head); font-weight:600;
  font-size:.74rem; letter-spacing:.16em; color:rgba(255,255,255,.28);
  transition:color .28s var(--ease);
}
.cylx__t.is-active .cylx__no{ color:var(--c-primary, #FFB909); }
.cylx__lbl{
  flex:1; font-family:var(--f-head); font-weight:600;
  font-size:clamp(1rem, 1.25vw, 1.22rem); line-height:1.2; letter-spacing:-.014em;
}
/* Kalan süre: satırın altında soldan sağa dolan altın çizgi. */
.cylx__prog{
  position:absolute; left:0; right:0; bottom:-1px; height:1px;
  transform:scaleX(0); transform-origin:left center;
  background:var(--c-primary, #FFB909);
  box-shadow:0 0 10px rgba(255,185,9,.6);
  opacity:0;
}
.cylx__t.is-active .cylx__prog{ opacity:1; animation:cylx-prog 5.2s linear forwards; }
.cylx.is-paused .cylx__t.is-active .cylx__prog{ animation-play-state:paused; }
@keyframes cylx-prog{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }

/* --- Sağ: sahne --- */
.cylx__stage{ position:relative; min-height:clamp(320px, 38vw, 460px); display:grid; }
.cylx__pane{ display:none; }
.cylx__pane.is-active{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0, 268px);
  gap:clamp(20px, 3vw, 54px); align-items:center; position:relative;
}
/* Arkadaki dev tip kodu: kontur, dolgusuz — derinlik verir, okumayı bozmaz. */
.cylx__ghost{
  position:absolute; left:-2%; top:50%; transform:translateY(-52%);
  z-index:0; pointer-events:none; user-select:none;
  font-family:var(--f-head); font-weight:800;
  font-size:clamp(9rem, 20vw, 20rem); line-height:.8; letter-spacing:-.05em;
  color:transparent;
  -webkit-text-stroke:1px rgba(255,255,255,.085);
}
.cylx__art{
  position:relative; z-index:1; display:grid; place-items:center;
  animation:cylx-art .58s var(--ease) both;
}
.cylx__art img{
  max-width:100%; max-height:clamp(330px, 46vw, 560px);
  width:auto; height:auto; min-width:0; min-height:0;
  object-fit:contain; display:block;
  filter:drop-shadow(0 14px 34px rgba(0,0,0,.55));
}
.cylx__lead{
  position:relative; z-index:1; margin:0;
  color:rgba(255,255,255,.58); font-size:1rem; line-height:1.68;
  border-left:2px solid rgba(255,185,9,.5); padding-left:20px;
  animation:cylx-up .5s var(--ease) .08s both;
}
@keyframes cylx-art{ from{ opacity:0; transform:translateX(22px) scale(.97); } to{ opacity:1; transform:none; } }
@keyframes cylx-up{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }

/* --- Alt: tam genişlik değer şeridi --- */
.cylx__data{ margin-top:clamp(38px, 4.5vw, 70px); }
.cylx__specs{ display:none; margin:0; }
.cylx__specs.is-active{
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr)) auto;
  gap:0 clamp(18px, 2.6vw, 44px); align-items:end;
  border-top:1px solid rgba(255,255,255,.12);
  padding-top:26px;
}
.cylx__specs > div{ animation:cylx-up .48s var(--ease) both; }
.cylx__specs > div:nth-child(1){ animation-delay:.04s; }
.cylx__specs > div:nth-child(2){ animation-delay:.10s; }
.cylx__specs > div:nth-child(3){ animation-delay:.16s; }
.cylx__specs > div:nth-child(4){ animation-delay:.22s; }
.cylx__specs > div:nth-child(5){ animation-delay:.28s; }
.cylx__specs dt{
  font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.36); margin:0 0 9px;
}
.cylx__specs dd{
  margin:0; font-family:var(--f-head); font-weight:700;
  font-size:clamp(1.1rem, 1.6vw, 1.44rem); color:#fff; letter-spacing:-.02em;
}
.cylx__go{ justify-self:end; }
.cylx__go a{
  display:inline-flex; align-items:center; gap:10px;
  padding:13px 24px; border-radius:var(--r-pill);
  border:1px solid rgba(255,185,9,.45); color:var(--c-primary, #FFB909);
  font-weight:600; font-size:.92rem; white-space:nowrap;
  transition:background .24s var(--ease), color .24s var(--ease), border-color .24s var(--ease);
}
.cylx__go a:hover{
  background:var(--c-primary, #FFB909); color:var(--c-ink, #14140F);
  border-color:var(--c-primary, #FFB909);
}
.cylx__go a:hover .arr{ transform:translateX(4px); }
.cylx__go .arr{ transition:transform .24s var(--ease); }

@media (max-width:1000px){
  .cylx__body{ grid-template-columns:1fr; gap:30px; }
  /* Dar ekranda liste yatay şeride değil, iki sütuna dönüyor: altı tipin
     hepsi tek bakışta görünsün. */
  .cylx__nav{ display:grid; grid-template-columns:1fr 1fr; column-gap:22px; }
  .cylx__nav .cylx__t:last-child{ border-bottom:0; }
  .cylx__nav .cylx__t:nth-last-child(-n+2){ border-bottom:1px solid rgba(255,255,255,.08); }
  .cylx__pane.is-active{ grid-template-columns:1fr; gap:24px; }
  .cylx__ghost{ font-size:clamp(7rem, 26vw, 13rem); left:auto; right:2%; top:34%; }
  .cylx__specs.is-active{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:24px; }
  .cylx__go{ grid-column:1 / -1; justify-self:stretch; }
  .cylx__go a{ justify-content:center; }
}
@media (max-width:560px){
  .cylx__nav{ grid-template-columns:1fr; }
  .cylx__nav .cylx__t:nth-last-child(-n+2){ border-bottom:0; }
  .cylx__nav .cylx__t:last-child{ border-bottom:1px solid rgba(255,255,255,.08); }
  .cylx__lead{ font-size:.94rem; padding-left:16px; }
}
@media (prefers-reduced-motion: reduce){
  .cylx__art, .cylx__lead, .cylx__specs > div{ animation:none; }
}

/* ==========================================================================
   ÇÖZÜM ALANLARI — BENTO (.sbx)
   ARTIK KULLANILMIYOR: 02 bölümü .cyl tip seçicisine geçti. Kurallar başka
   yerde kullanılabilsin diye duruyor.
   HydroTrust'a özel asimetrik ızgara: solda koyu öne çıkan kart (iki satır
   boyu), ortada iki açık kart, sağda tam boy fotoğraf + teklif çağrısı.
   Açık zemin bilinçli: önündeki ve arkasındaki bölümler koyu, ritmi kırıyor.
   ========================================================================== */
.sbx{ background:var(--c-surface, #F2F5F7); }
.sbx__grid{
  display:grid;
  grid-template-columns:1.55fr 1fr 1.1fr;
  grid-template-rows:auto auto;
  gap:16px;
  align-items:stretch;
}
.sbx-tile{
  position:relative; overflow:hidden;
  border-radius:var(--r-lg);
  padding:30px 32px;
  display:flex; flex-direction:column;
  background:#fff; border:1px solid var(--c-line);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.sbx-tile:hover{ transform:translateY(-5px); box-shadow:var(--sh); }
.sbx__n{
  font-size:.76rem; font-weight:700; letter-spacing:.16em;
  color:var(--c-primary-d, #B4841A); margin-bottom:14px;
}
.sbx-tile h3{ font-size:1.24rem; line-height:1.25; margin:0 0 12px; }
.sbx-tile p{ color:var(--c-muted); font-size:.95rem; margin:0; max-width:46ch; }
.sbx__go{
  margin-top:auto; padding-top:20px;
  display:inline-flex; align-items:center; gap:8px;
  font-size:.9rem; font-weight:600; color:var(--c-primary-d, #B4841A);
}
.sbx-tile:hover .sbx__go .arr{ transform:translateX(4px); }
.sbx__go .arr{ transition:transform .25s var(--ease); }

/* 01 — koyu öne çıkan kart, iki satır boyu */
.sbx-tile--lead{
  grid-row:span 2;
  background:var(--c-ink, #14140F); border-color:transparent; color:#fff;
  padding:36px 38px;
}
.sbx-tile--lead h3{ color:#fff; font-size:1.7rem; }
.sbx-tile--lead p{ color:rgba(255,255,255,.72); font-size:1rem; }
.sbx-tile--lead .sbx__n,
.sbx-tile--lead .sbx__go{ color:var(--c-primary, #FFB909); }
/* Şeffaf ürün PNG'si köşede siluet gibi durur; metnin altında kalır.
   Ürün koyu gövdeli olduğu için koyu kartta kaybolmasın diye arkasına
   yumuşak bir altın ışık konuyor. */
.sbx-tile--lead::after{
  content:''; position:absolute; right:-10%; bottom:-18%;
  width:66%; aspect-ratio:1; border-radius:50%; z-index:0; pointer-events:none;
  background:radial-gradient(circle, rgba(255,185,9,.20) 0%, rgba(255,185,9,.07) 45%, transparent 70%);
  transition:opacity .4s var(--ease);
}
/* Katalogdan alınmış beyaz çizgili ölçü çizimi (oran ~1:2,9), yüksekliğe
   göre ölçekleniyor. Filtre yok: çizgiler zaten beyaz, koyu kartta net. */
.sbx__obj{
  position:absolute; right:30px; bottom:20px;
  width:auto; height:min(66%, 280px); opacity:.55;
  pointer-events:none; z-index:0;
  transition:opacity .4s var(--ease), transform .5s var(--ease);
}
.sbx-tile--lead:hover .sbx__obj{ opacity:.8; transform:translateY(-4px); }
.sbx-tile--lead > *:not(.sbx__obj){ position:relative; z-index:1; }

/* 02 — kalite rozetleri */
.sbx__chips{ display:flex; flex-wrap:wrap; gap:7px; }
.sbx__chip{
  display:inline-flex; align-items:center;
  padding:5px 12px; border-radius:var(--r-pill);
  background:var(--c-primary-soft, #FFF4D6); color:var(--c-primary-d, #8A6412);
  border:1px solid rgba(255,185,9,.42);
  font-size:.78rem; font-weight:700; letter-spacing:.02em; white-space:nowrap;
}

/* 03 — servis: telefon öne çıkar */
.sbx__tel{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--f-head); font-size:1.28rem; font-weight:700;
  color:var(--c-ink); letter-spacing:-.01em;
}
.sbx__tel i{ font-size:.9rem; color:var(--c-primary-d, #B4841A); }
.sbx__tel:hover{ color:var(--c-primary-d, #B4841A); }

/* Yerleşim açıkça verilir: otomatik yerleştirme 02 ve 03'ü yan yana koyup
   fotoğrafı alt satıra düşürüyordu. */
.sbx-tile--quality{ grid-column:2; grid-row:1; }
.sbx-tile--service{ grid-column:2; grid-row:2; }

/* Fotoğraf + teklif çağrısı, iki satır boyu */
.sbx-tile--photo{
  grid-column:3; grid-row:1 / span 2; padding:0; border-color:transparent;
  min-height:340px; justify-content:flex-end;
}
.sbx__photo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.sbx-tile--photo:hover .sbx__photo{ transform:scale(1.05); }
.sbx__veil{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(9,9,6,.06) 0%, rgba(9,9,6,.52) 52%, rgba(9,9,6,.86) 100%);
}
.sbx__cta{ position:relative; z-index:1; padding:32px; display:block; }
.sbx__cta-t{
  display:block; color:#fff; font-family:var(--f-head);
  font-size:1.32rem; font-weight:700; line-height:1.22; margin-bottom:18px;
  text-shadow:0 2px 16px rgba(9,9,6,.5);
}
.sbx__cta-b{
  display:inline-flex; align-items:center; gap:9px;
  padding:12px 22px; border-radius:var(--r-pill);
  background:var(--c-primary, #FFB909); color:var(--c-ink);
  font-weight:700; font-size:.92rem;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.sbx-tile--photo:hover .sbx__cta-b{ transform:translateY(-2px); box-shadow:0 12px 26px rgba(255,185,9,.34); }

@media (max-width:1100px){
  .sbx__grid{ grid-template-columns:1fr 1fr; grid-template-rows:none; }
  .sbx-tile--lead{ grid-row:auto; grid-column:1 / -1; }
  .sbx-tile--quality{ grid-column:1; grid-row:auto; }
  .sbx-tile--service{ grid-column:2; grid-row:auto; }
  .sbx-tile--photo{ grid-column:1 / -1; grid-row:auto; min-height:280px; }
}
@media (max-width:640px){
  .sbx__grid{ grid-template-columns:1fr; gap:12px; }
  .sbx-tile{ padding:24px 22px; }
  .sbx-tile--lead{ padding:28px 24px; }
  .sbx-tile--lead h3{ font-size:1.35rem; }
  .sbx__obj{ width:44%; right:-18px; bottom:-16px; opacity:.42; }
  .sbx__cta{ padding:24px 22px; }
  .sbx__cta-t{ font-size:1.1rem; }
}

/* ==========================================================================
   SOLUTION SHOWCASE (.solz) — klinik ortam vitrini
   ARTIK KULLANILMIYOR: anasayfadaki 02 bölümü .sbx bento düzenine geçti.
   Kurallar başka sayfada kullanılırsa diye duruyor.
   Tam genişlikte ortam fotoğrafı; altındaki kartlardan birine gelince kart
   yukarı doğru açılır, arkadaki fotoğraf o alanın ortamına geçer.
   ========================================================================== */
/* Ortam fotoğrafları artık 1376x768 (16:9) klinik sahneler — eskiden 3.56:1
   bant vardı. 16:9 kaynak geniş bir şeride cover ile oturunca üst/alttan
   kırpılır. Bölüm ne kadar yüksekse o kadar AZ kırpılır, sahne o kadar çok
   görünür — bu yüzden yükseklik cömert tutuldu. Odak ayrıca merkezden biraz
   YUKARI alınıyor: sahnedeki kişi ve ekipman üst yarıda kaldığı için
   merkezden hizalanınca baş kırpılıyordu. */
.solz{
  position:relative; isolation:isolate; overflow:hidden;
  min-height:clamp(480px,39.5vw,747px);
  display:flex; background:var(--c-ink);
}

/* ---------- Ortam fotoğrafları ---------- */
.solz__media{ position:absolute; inset:0; z-index:0; }
/* Çıkan kare kaybolmadan yenisi üstüne biner: hayalet/çift görüntü olmaz. */
.solz__frame{
  position:absolute; inset:0; z-index:1; opacity:0;
  /* 38%: 16:9 sahnelerde kişi ve ekipman üst yarıda; merkezden hizalanınca
     baş kesiliyordu, odak biraz yukarı çekildi. */
  background-size:cover; background-position:center 38%;
  background-color:#1C1A11;
  /* Gecikme, giren karenin .9sn'lik açılışından uzun tutulur; eşit olursa
     iki kare aynı anda sönerek bir kare boyunca zemin sızar (flaş). */
  transition:opacity 0s var(--ease) 1.05s;
}
.solz__frame.is-active{
  opacity:1; z-index:2;
  transition:opacity .9s var(--ease);
}
/* Ortam fotoğrafı yoksa: markanın degrade sahnesi */
.solz__frame--art{
  background-color:transparent;
  background-image:
    radial-gradient(80% 120% at 78% 108%, rgba(228,185,74,.34) 0%, transparent 58%),
    radial-gradient(60% 90% at 12% -10%, rgba(240,207,126,.16) 0%, transparent 60%),
    linear-gradient(150deg, #1F1D13 0%, #12110C 55%, #0C0C08 100%);
}
/* Perde: yalnız başlığın oturduğu sol üst köşeyi karartır,
   sağ taraf açık kalır ki ortam fotoğrafı görünsün. */
.solz__scrim{
  position:absolute; inset:0; z-index:3;
  background:
    linear-gradient(97deg, rgba(14,14,10,.84) 0%, rgba(14,14,10,.55) 24%, rgba(14,14,10,.16) 48%, rgba(14,14,10,0) 72%),
    /* alt bant: cam kartlardaki beyaz metin her fotoğrafta okunaklı kalsın */
    linear-gradient(0deg, rgba(14,14,10,.70) 0%, rgba(14,14,10,.36) 22%, rgba(14,14,10,.06) 44%),
    linear-gradient(180deg, rgba(14,14,10,.30) 0%, rgba(14,14,10,0) 40%);
}


/* ---------- İçerik ---------- */
.solz__inner{
  position:relative; z-index:4; width:100%;
  display:flex; flex-direction:column; justify-content:space-between;
  padding-top:clamp(48px,5.2vw,78px); padding-bottom:clamp(28px,3vw,42px);
}
.solz__head{ max-width:620px; }
.solz__head h2{
  color:#fff; font-size:clamp(1.6rem,2.9vw,2.35rem); margin-bottom:0;
  text-shadow:0 2px 24px rgba(14,14,10,.45);
}

/* ---------- Kart destesi ---------- */
.solz__deck{
  display:flex; align-items:flex-end;
  gap:clamp(8px,.8vw,12px);
  margin-top:clamp(24px,3.2vw,44px);
}

/* Kart genişliği sabit. Eskiden aktif kart flex-grow ile büyüyordu; sınırlar
   imlecin altından kayınca tarayıcı imleç hiç kıpırdamadan yeni mouseenter
   üretiyor, kartlar iki hedef arasında gidip geliyordu (titreme). Ayrıca her
   karede yeniden düzen + backdrop blur hesabı gerekiyordu. Artık yalnızca
   renk/gölge ve dikey açılım animasyonu var — düzen sabit. */
.solz__card{
  flex:1 1 0; min-width:0;
  position:relative; overflow:hidden; border-radius:15px;
  padding:12px clamp(12px,1vw,16px) 13px;
  color:#fff;
  /* Beyaz cam, altındaki fotoğraf aydınlıkken (gökyüzü) zemini daha da
     açıyor, beyaz başlık 2:1'in altına düşüyordu. Koyu cam her karede
     beyaz metni AA üstünde tutuyor. */
  background:linear-gradient(178deg, rgba(14,14,10,.46) 0%, rgba(14,14,10,.60) 100%);
  border:1px solid rgba(255,255,255,.26);
  box-shadow:0 8px 20px rgba(9,9,6,.30), inset 0 1px 0 rgba(255,255,255,.22);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
          backdrop-filter:blur(18px) saturate(150%);
  transition:background .4s var(--ease), border-color .4s var(--ease),
             box-shadow .4s var(--ease), transform .4s var(--ease);
}
/* aktif kart: cam berraklaşır, markanın turkuazı sızar */
.solz__card.is-active{
  background:linear-gradient(178deg, rgba(14,14,10,.44) 0%, rgba(112,76,0,.66) 100%);
  border-color:rgba(255,201,84,.62);
  box-shadow:0 18px 38px rgba(9,9,6,.34), inset 0 1px 0 rgba(255,255,255,.55);
  transform:translateY(-3px);
}
/* aktif kartın üstünde ince marka çizgisi */
.solz__card::before{
  content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background:linear-gradient(90deg, var(--c-primary-l), var(--c-primary));
  transform:scaleX(0); transform-origin:left; transition:transform .45s var(--ease);
}
.solz__card.is-active::before{ transform:scaleX(1); }

.solz__top{ display:flex; align-items:center; justify-content:space-between; gap:9px; }
.solz__meta{ min-width:0; }
.solz__num{
  display:block; font-family:var(--f-head); font-weight:600; font-size:.62rem; letter-spacing:.16em;
  color:rgba(255,255,255,.72); transition:color .3s var(--ease);
}
.solz__card.is-active .solz__num{ color:var(--c-primary-l); }
/* iki satırlık yer ayrılır ki kartların üst hizası şaşmasın */
.solz__t{
  display:block; font-family:var(--f-head); font-weight:600; font-size:clamp(.82rem,.92vw,.95rem);
  color:#fff; line-height:1.3; margin-top:2px; min-height:2.6em;
  text-shadow:0 1px 10px rgba(9,9,6,.45);
}

.solz__plus{
  position:relative; flex:none; width:29px; height:29px; border-radius:50%;
  display:grid; place-items:center; font-size:.68rem;
  background:rgba(255,255,255,.16); color:#fff;
  border:1px solid rgba(255,255,255,.22);
  transition:background .4s var(--ease), color .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.solz__plus i{ grid-area:1/1; transition:opacity .3s var(--ease), transform .4s var(--ease); }
.solz__plus i:last-child{ opacity:0; transform:translateX(-6px); }
.solz__card.is-active .solz__plus{
  background:var(--c-primary); color:var(--c-on-primary); border-color:transparent; box-shadow:var(--sh-primary);
}
.solz__card.is-active .solz__plus i:first-child{ opacity:0; transform:rotate(90deg); }
.solz__card.is-active .solz__plus i:last-child{ opacity:1; transform:none; }

/* açılan gövde — metin, kart yüksekliği otururken belirsin ki
   satır kaymaları göze çarpmasın */
.solz__fold{
  display:grid; grid-template-rows:0fr; opacity:0;
  transition:grid-template-rows .45s var(--ease), opacity .28s var(--ease);
}
.solz__fold > *{ overflow:hidden; }
.solz__card.is-active .solz__fold{
  grid-template-rows:1fr; opacity:1;
  transition:grid-template-rows .45s var(--ease), opacity .28s var(--ease) .14s;
}
.solz__foldin{
  display:flex; align-items:flex-end; gap:12px;
  margin-top:12px; padding-top:11px; border-top:1px solid rgba(255,255,255,.18);
}
.solz__d{ flex:1 1 auto; color:rgba(255,255,255,.90); font-size:.77rem; line-height:1.52; }
.solz__thumb{
  flex:none; width:68px; height:52px; object-fit:contain; object-position:bottom right;
  filter:drop-shadow(0 8px 12px rgba(9,9,6,.42));
}
.solz__thumb--ic{
  display:grid; place-items:center; height:auto; font-size:1.35rem;
  color:rgba(255,255,255,.34); filter:none;
}

/* ---------- Duyarlı ---------- */
@media (max-width:991px){
  .solz{ min-height:clamp(340px,48vw,440px); }
  .solz__inner{ padding-bottom:clamp(28px,5vw,40px); }
  .solz__head{ max-width:none; }
  .solz__deck{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  /* hepsi açık olduğu için iki satırlık başlık payına gerek yok */
  .solz__t{ min-height:0; }
  /* dokunmatikte hover yok — hepsi açık dursun */
  .solz__fold{ grid-template-rows:1fr; opacity:1; transition:none; }
  .solz__card{
    transform:none !important; flex:none;
    background:linear-gradient(178deg, rgba(255,255,255,.24) 0%, rgba(228,185,74,.16) 100%);
    border-color:rgba(255,255,255,.34);
  }
  .solz__card::before{ transform:scaleX(1); }
  .solz__plus i:first-child{ opacity:0; }
  .solz__plus i:last-child{ opacity:1; transform:none; }
  .solz__plus{ background:var(--c-primary); color:var(--c-on-primary); border-color:transparent; }
  .solz__num{ color:var(--c-primary-l); }
}
@media (max-width:575px){
  .solz__deck{ grid-template-columns:1fr; gap:9px; margin-top:30px; }
  .solz__card{ padding:13px 15px; border-radius:14px; }
  .solz__t{ min-height:0; }
  .solz__head p{ font-size:.96rem; }
  .solz__thumb{ width:56px; height:44px; }
}
@media (prefers-reduced-motion:reduce){
  .solz__frame{ transition:none; }
}

/* ==========================================================================
   PAGE HERO (inner breadcrumb)
   ========================================================================== */
.page-hero{ position:relative; background:var(--c-ink); color:#fff; padding:clamp(54px,8vw,96px) 0 clamp(40px,6vw,64px); overflow:hidden; }
.page-hero::before{ content:""; position:absolute; inset:0; background:radial-gradient(120% 140% at 100% 0%, rgba(228,185,74,.22), transparent 55%); }
.page-hero__inner{ position:relative; z-index:2; }
.page-hero h1{ color:#fff; font-size:clamp(1.9rem,4vw,3rem); margin-bottom:14px; }
.crumb{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; font-size:.86rem; color:#B2AC96; }
.crumb a{ color:#D2CCB8; }
.crumb a:hover{ color:#fff; }
.crumb i{ font-size:.6rem; opacity:.6; }
.crumb .cur{ color:#FFD873; }

/* ==========================================================================
   PRODUCT DETAIL
   ========================================================================== */
.pd-gallery{ position:sticky; top:104px; }
.pd-stage{ position:relative; background:linear-gradient(160deg,#F8F7F2 0%,#EAEFF3 100%); border:1px solid var(--c-line); border-radius:var(--r-xl); aspect-ratio:4/3; display:grid; place-items:center; padding:clamp(20px,3vw,44px); overflow:hidden; isolation:isolate; }
.pd-stage::before{ content:""; position:absolute; z-index:0; width:72%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle, rgba(255,255,255,.92), rgba(255,255,255,0) 66%); }
.pd-stage img{ position:relative; z-index:1; align-self:stretch; justify-self:stretch;
  width:100%; height:100%; min-width:0; min-height:0;
  object-fit:contain; cursor:zoom-in; }
.pd-videobtn{ position:absolute; z-index:3; right:20px; bottom:20px; display:inline-flex; align-items:center; gap:12px; padding:8px 20px 8px 8px; border-radius:var(--r-pill); background:rgba(255,255,255,.72); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border:1px solid rgba(22,21,15,.08); box-shadow:0 12px 30px rgba(22,21,15,.16); cursor:pointer; transition:.28s var(--ease); }
.pd-videobtn:hover{ background:#fff; transform:translateY(-2px); box-shadow:0 18px 38px rgba(22,21,15,.22); }
.pd-videobtn__ic{ width:40px; height:40px; border-radius:50%; background:var(--c-primary); color:var(--c-on-primary); display:grid; place-items:center; font-size:.9rem; padding-left:3px; box-shadow:var(--sh-primary); transition:transform .28s var(--ease); }
.pd-videobtn:hover .pd-videobtn__ic{ transform:scale(1.08); }
.pd-videobtn__tx{ font-family:var(--f-head); font-weight:600; font-size:.88rem; color:var(--c-ink); }
.pd-thumbs{ display:flex; gap:12px; margin-top:16px; flex-wrap:wrap; }
.pd-thumb{ width:92px; height:92px; border-radius:var(--r); overflow:hidden; border:2px solid var(--c-line); cursor:pointer; background:#fff; transition:border-color .2s var(--ease), transform .2s var(--ease); padding:8px; }
.pd-thumb img{ width:100%; height:100%; object-fit:contain; }
.pd-thumb.active,.pd-thumb:hover{ border-color:var(--c-primary); transform:translateY(-2px); }

/* video lightbox */
.pd-lb{ position:fixed; inset:0; z-index:4000; background:#F2F5F7; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); display:grid; place-items:center; padding:20px; opacity:0; visibility:hidden; transition:opacity .3s var(--ease), visibility .3s; }
.pd-lb.open{ opacity:1; visibility:visible; }
.pd-lb__stage{ width:min(1040px,94vw); }
.pd-lb__ratio{ position:relative; width:100%; aspect-ratio:16/9; border-radius:var(--r-lg); overflow:hidden; box-shadow:0 40px 80px rgba(0,0,0,.5); background:#000; }
.pd-lb__ratio iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
/* Görsel modu: video için tanımlı 16/9 oran + siyah zemin ürün PNG'sini
   kutuluyor, dikey görselde iki yanda siyah bant bırakıyordu. Görselde oran
   serbest, zemin şeffaf. */
.pd-lb__ratio.is-image{ position:relative; aspect-ratio:auto; overflow:visible; background:transparent; box-shadow:none; display:grid; place-items:center; }
.pd-lb__ratio.is-image img{ display:block; width:auto; height:auto; max-width:100%; max-height:86vh; border-radius:var(--r-lg); }
.pd-lb__close{ position:absolute; top:22px; right:26px; width:48px; height:48px; border-radius:50%; border:1px solid var(--c-line); background:#fff; color:var(--c-ink); box-shadow:var(--sh-sm); display:grid; place-items:center; cursor:pointer; font-size:1.3rem; transition:.2s var(--ease); }
.pd-lb__close:hover{ background:var(--c-primary); border-color:var(--c-primary); }

/* --- premium ürün sayfası --- */
.pd-section{ background:linear-gradient(180deg,#FBFAF5 0%, #ffffff 55%); }
.pd-crumb{ background:linear-gradient(160deg,#F6F2E8 0%,#FBF3E6 55%,#FAF4E8 100%); border-bottom:1px solid var(--c-line); }
.pd-crumb .mx{ display:flex; flex-wrap:wrap; align-items:center; gap:9px; padding-block:16px; font-size:.86rem; color:var(--c-muted); }
.pd-crumb a{ color:var(--c-ink-soft); font-weight:500; }
.pd-crumb a:hover{ color:var(--c-primary-ink); }
.pd-crumb i{ font-size:.58rem; opacity:.5; }
.pd-crumb .cur{ color:var(--c-primary-ink); font-weight:600; max-width:60vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pd-cat{ display:inline-flex; align-items:center; gap:8px; font-family:var(--f-head); font-weight:600; font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; color:var(--c-primary-ink); background:var(--c-primary-soft); padding:7px 14px; border-radius:var(--r-pill); margin-bottom:16px; }
.pd-cat::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--c-primary); }
.pd-info h1{ font-size:clamp(1.6rem,2.6vw,2.3rem); line-height:1.16; margin:0 0 14px; }
.pd-features{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:26px; }
.pd-feature{ display:flex; align-items:center; gap:12px; padding:13px 15px; background:#fff; border:1px solid var(--c-line); border-radius:var(--r); transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease); }
.pd-feature:hover{ border-color:var(--c-primary); box-shadow:var(--sh-sm); transform:translateY(-2px); }
.pd-feature__ic{ flex:none; width:38px; height:38px; border-radius:11px; background:var(--c-primary-soft); color:var(--c-primary-d); display:grid; place-items:center; font-size:1rem; }
.pd-feature__tx{ display:flex; flex-direction:column; min-width:0; }
.pd-feature__tx b{ font-family:var(--f-head); font-size:.98rem; color:var(--c-ink); line-height:1.25; }
.pd-feature__tx small{ font-size:.77rem; color:var(--c-muted-2); margin-top:2px; }
.pd-trust{ display:flex; flex-wrap:wrap; gap:12px 22px; margin:22px 0 6px; padding-top:22px; border-top:1px solid var(--c-line); }
.pd-trust span{ display:inline-flex; align-items:center; gap:9px; font-size:.86rem; color:var(--c-ink-soft); font-weight:500; }
.pd-trust i{ color:var(--c-primary); font-size:1rem; }
@media (max-width:480px){ .pd-features{ grid-template-columns:1fr; } }
.pd-info{ padding-left:clamp(0px,2vw,30px); }
.pd-info h1{ font-size:clamp(1.6rem,3vw,2.3rem); margin:12px 0; }
.pd-spot{ color:var(--c-muted); font-size:1.02rem; line-height:1.7; margin-bottom:24px; }
.pd-meta{ display:flex; gap:24px; flex-wrap:wrap; padding:18px 0; border-block:1px solid var(--c-line); margin-bottom:24px; }
.pd-meta div span{ font-size:.76rem; color:var(--c-muted); text-transform:uppercase; letter-spacing:.05em; display:block; }
.pd-meta div b{ font-family:var(--f-head); color:var(--c-ink); font-size:1rem; }
.pd-cta{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:26px; }
.pd-share{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.pd-share > span{ font-size:.85rem; color:var(--c-muted); font-weight:600; font-family:var(--f-head); }
.pd-share a{ width:44px; height:44px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; background:var(--c-surface); color:var(--c-ink); border:1px solid var(--c-line); font-size:1.1rem; line-height:1; transition:.2s var(--ease); }
.pd-share a i{ font-size:1.1rem; line-height:1; }
.pd-share a:hover{ background:var(--c-primary); color:var(--c-on-primary); border-color:var(--c-primary); transform:translateY(-2px); }
.pd-highlights{ list-style:none; padding:0; margin:0 0 26px; display:grid; gap:12px; }
.pd-highlights li{ display:flex; gap:12px; align-items:flex-start; font-size:.94rem; color:var(--c-text); }
.pd-highlights li i{ color:var(--c-primary); margin-top:3px; }

/* ---- Ürün sekmeleri: hap biçimli segment çubuğu + kayan gösterge ----
   Önceki hâli düz yazı + ince alt çizgiydi; sayfanın geri kalanının yanında
   zayıf kalıyordu. Gösterge ayrı bir katman: aktif hap renk geçişiyle değil,
   sekmeden sekmeye KAYARAK gidiyor. */
.pd-tabs{ margin-top:clamp(50px,6vw,80px); }
/* Şerit içeriğini sarsın: iki sekme varken kapsayıcı genişliğinde uzayan hap,
   sağ tarafta 700px boş yüzey bırakıyordu. Dar ekranda yine kaydırılabilir. */
.pd-tabnav{
  position:relative; display:flex; gap:2px; flex-wrap:nowrap;
  width:max-content; max-width:100%;
  padding:6px; border-radius:999px;
  background:linear-gradient(180deg,#F8F7F2 0%,#F4F3EC 100%);
  border:1px solid var(--c-line);
  box-shadow:inset 0 1px 2px rgba(24,22,16,.05);
  overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.pd-tabnav::-webkit-scrollbar{ display:none; }

/* Kayan gösterge */
.pd-tabnav__ind{
  position:absolute; top:6px; bottom:6px; left:0; width:0;
  border-radius:999px; background:var(--c-primary);
  box-shadow:0 4px 14px rgba(255,185,9,.34);
  transition:transform .38s cubic-bezier(.4,.9,.25,1), width .38s cubic-bezier(.4,.9,.25,1);
  pointer-events:none; z-index:0;
}
.pd-tabnav__ind.is-hazir{ opacity:1; }
.pd-tabnav__ind:not(.is-hazir){ opacity:0; }

.pd-tabnav button{
  position:relative; z-index:1; flex:0 0 auto;
  display:inline-flex; align-items:center; gap:9px; white-space:nowrap;
  font-family:var(--f-head); font-weight:600; font-size:.92rem;
  color:var(--c-muted); background:none; border:none; cursor:pointer;
  padding:12px 22px; border-radius:999px;
  transition:color .28s var(--ease);
}
.pd-tabnav button i{ font-size:.86rem; opacity:.75; transition:opacity .28s var(--ease); }
.pd-tabnav button:hover{ color:var(--c-ink); }
.pd-tabnav button:hover i{ opacity:1; }
.pd-tabnav button.active{ color:var(--c-on-primary); }
.pd-tabnav button.active i{ opacity:1; }
.pd-tabnav button:focus-visible{ outline:2px solid var(--c-primary-d, #8A651A); outline-offset:2px; }

/* Sekme üstündeki sayaç (ör. kaç opsiyon var) */
.pd-tabnav__n{
  font-style:normal; font-size:.68rem; font-weight:700; line-height:1;
  padding:3px 7px; border-radius:99px;
  background:var(--c-primary-soft); color:var(--c-primary-d, #8A651A);
  transition:background .28s var(--ease), color .28s var(--ease);
}
.pd-tabnav button.active .pd-tabnav__n{ background:rgba(20,20,15,.14); color:var(--c-on-primary); }

/* Teklif sekmesi eylem sekmesi: pasifken bile hafifçe öne çıksın */
.pd-tabnav__cta:not(.active){ color:var(--c-primary-ink); }

@media (prefers-reduced-motion: reduce){
  .pd-tabnav__ind{ transition:none; }
  .pd-tabnav button{ transition:none; }
}
@media (max-width:760px){
  .pd-tabnav{ border-radius:var(--r-sm); }
  .pd-tabnav__ind{ border-radius:calc(var(--r-sm) - 4px); }
  .pd-tabnav button{ padding:11px 16px; font-size:.86rem; }
  .pd-tabnav button i{ font-size:.8rem; }
}
.pd-panel{ display:none; padding:34px 0; animation:fadeUp .4s var(--ease); }
.pd-panel.active{ display:block; }
.pd-rich{ color:var(--c-text); line-height:1.85; }
.pd-rich h2,.pd-rich h3{ margin-top:1.4em; }
.pd-rich img{ border-radius:var(--r); margin:1em 0; }

/* Spec table */
/* Teknik özellikler — iki sütunlu veri sayfası ızgarası. */
.spec-grid{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
  gap:0 28px; margin:0;
  border:1px solid var(--c-line); border-radius:var(--r); overflow:hidden;
  background:#fff;
}
.spec-grid__row{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:14px; align-items:baseline;
  padding:15px 20px; border-bottom:1px solid var(--c-line);
}
/* Şerit gölgesi satır sırasına göre değil, GÖRSEL satıra göre olmalı:
   iki sütunda yan yana duran iki hücre aynı zemini paylaşır. */
.spec-grid__row:nth-child(4n+1),
.spec-grid__row:nth-child(4n+2){ background:var(--c-surface); }
.spec-grid__row:nth-last-child(-n+2){ border-bottom:none; }
.spec-grid dt{
  font-family:var(--f-head); font-weight:600; color:var(--c-ink);
  font-size:.92rem; margin:0;
}
.spec-grid dd{ margin:0; color:var(--c-muted); font-size:.92rem; }
@media (max-width:820px){
  .spec-grid{ grid-template-columns:1fr; gap:0; }
  .spec-grid__row{ padding:13px 16px; }
  .spec-grid__row:nth-child(4n+1),
  .spec-grid__row:nth-child(4n+2){ background:transparent; }
  .spec-grid__row:nth-child(even){ background:var(--c-surface); }
  .spec-grid__row:nth-last-child(-n+2){ border-bottom:1px solid var(--c-line); }
  .spec-grid__row:last-child{ border-bottom:none; }
}

.spec-table{ width:100%; border-collapse:collapse; border:1px solid var(--c-line); border-radius:var(--r); overflow:hidden; }
.spec-table tr{ border-bottom:1px solid var(--c-line); }
.spec-table tr:nth-child(even){ background:var(--c-surface); }
.spec-table th{ text-align:left; font-family:var(--f-head); font-weight:600; color:var(--c-ink); width:42%; padding:15px 20px; font-size:.92rem; vertical-align:top; }
.spec-table td{ padding:15px 20px; color:var(--c-muted); font-size:.92rem; }
.spec-cols{ display:grid; grid-template-columns:1fr 1fr; gap:0 40px; }

/* Doc list */
.doc-row{ display:flex; align-items:center; gap:16px; padding:18px 20px; border:1px solid var(--c-line); border-radius:var(--r); margin-bottom:12px; transition:.2s var(--ease); }
.doc-row:hover{ border-color:var(--c-primary); box-shadow:var(--sh-sm); }
/* Rozet FontAwesome'ın PDF kırmızısındaydı (#fde8e8/#d33): paletin dışında,
   ürün sayfasında pembe bir leke gibi duruyordu. Marka altınına alındı. */
.doc-row__ic{ width:46px; height:46px; border-radius:12px; background:var(--c-primary-soft); color:var(--c-primary-ink); display:grid; place-items:center; font-size:1.2rem; }
.doc-row b{ font-family:var(--f-head); font-size:.95rem; color:var(--c-ink); }
.doc-row span{ font-size:.8rem; color:var(--c-muted); }

/* ==========================================================================
   FORMS
   ========================================================================== */
.field{ margin-bottom:16px; }
.field label{ display:block; font-size:.85rem; font-weight:600; font-family:var(--f-head); color:var(--c-ink); margin-bottom:7px; }
.input,.field input,.field select,.field textarea{ width:100%; padding:13px 16px; border:1.5px solid var(--c-line-2); border-radius:var(--r-sm); font-family:var(--f-body); font-size:.95rem; color:var(--c-text); background:#fff; transition:border-color .2s var(--ease), box-shadow .2s var(--ease); }
.input:focus,.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--c-primary); box-shadow:0 0 0 3px var(--c-primary-soft); }
.field textarea{ resize:vertical; min-height:120px; }
.form-card{ background:#fff; border:1px solid var(--c-line); border-radius:var(--r-lg); padding:clamp(24px,4vw,40px); box-shadow:var(--sh-sm); }

/* Teklif formunun hangi ürün için açıldığını gösteren kilitli alan */
.quote-for{
  display:flex; flex-direction:column; gap:9px;
  margin:0 0 22px; padding:14px 16px;
  background:var(--c-primary-soft); border:1px solid color-mix(in srgb, var(--c-primary) 22%, transparent);
  border-radius:var(--r-sm);
}
.quote-for__label{
  font-family:var(--f-head); font-weight:600; font-size:.7rem;
  text-transform:uppercase; letter-spacing:.1em; color:var(--c-primary);
}
.quote-for__item{ display:flex; align-items:center; gap:12px; min-width:0; }
.quote-for__item img{
  flex:none; width:44px; height:44px; object-fit:contain;
  background:#fff; border:1px solid var(--c-line); border-radius:10px; padding:4px;
}
.quote-for__item b{
  font-family:var(--f-head); font-weight:600; font-size:.98rem; color:var(--c-ink);
  overflow:hidden; text-overflow:ellipsis;
}
.quote-for__item i{
  flex:none; font-style:normal; font-size:.74rem; font-weight:600; letter-spacing:.04em;
  color:var(--c-primary); background:#fff; border:1px solid color-mix(in srgb, var(--c-primary) 30%, transparent);
  padding:3px 9px; border-radius:var(--r-pill);
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.m-footer{ background:var(--c-ink); color:#B2AC96; }
.m-footer__cta{ background:linear-gradient(120deg,var(--c-primary-d),var(--c-primary)); }
.m-footer__cta .mx{ display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap; padding-block:clamp(34px,5vw,54px); }
/* Beyaz metin altın zeminde 1,7:1 okunuyordu (AA sınırı 3/4,5). Marka
   standardı zaten "altın üstü kömür siyahı" (--c-on-primary). */
.m-footer__cta h2{ color:var(--c-on-primary); font-size:clamp(1.5rem,3vw,2.2rem); margin:0; }
.m-footer__cta p{ color:rgba(20,20,15,.76); margin:8px 0 0; }
.m-footer__cta .btn--ghost-light{ --bg:rgba(255,255,255,.55); --fg:var(--c-on-primary); --bd:rgba(20,20,15,.28); }
.m-footer__cta .btn--ghost-light:hover{ --bg:var(--c-ink); --fg:#fff; --bd:var(--c-ink); }
.m-footer__main{ padding:clamp(50px,7vw,84px) 0 0; }
.m-footer__grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.4fr; gap:40px; }
.m-footer h4{ color:#fff; font-size:1rem; margin-bottom:20px; font-family:var(--f-head); }
.m-footer p{ font-size:.92rem; line-height:1.8; }
.m-footer a{ color:#B2AC96; }
.m-footer a:hover{ color:#fff; }
.m-footer__links{ list-style:none; padding:0; margin:0; display:grid; gap:11px; }
.m-footer__links a{ display:inline-flex; align-items:center; gap:9px; font-size:.92rem; }
.m-footer__links i{ color:var(--c-primary-l); font-size:.65rem; }
.m-footer__contact{ display:grid; gap:16px; }
.m-footer__contact li{ display:flex; gap:13px; align-items:flex-start; list-style:none; font-size:.92rem; }
.m-footer__contact i{ color:var(--c-primary-l); margin-top:4px; }
.m-footer__news{ display:flex; gap:8px; margin-top:14px; }
.m-footer__news input{ flex:1; padding:12px 15px; border-radius:var(--r-sm); border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.05); color:#fff; font-size:.9rem; }
.m-footer__news input::placeholder{ color:#8B8574; }
.m-footer__news button{ width:48px; border:none; border-radius:var(--r-sm); background:var(--c-primary); color:var(--c-on-primary); cursor:pointer; transition:.2s; }
.m-footer__news button:hover{ background:var(--c-primary-l); }
.m-footer__soc{ margin-top:22px; }
.m-footer__soc-t{
  display:block; margin-bottom:10px;
  font-size:.72rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.42);
}
/* Arapçada harf aralığı bitişik yazıyı kopartır, büyütme zaten karşılıksız */
[dir="rtl"] .m-footer__soc-t{ letter-spacing:0; text-transform:none; font-size:.8rem; }
.m-footer__social{ display:flex; gap:8px; flex-wrap:wrap; }
.m-footer__social a{
  width:42px; height:42px; border-radius:12px; display:grid; place-items:center;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08);
  color:#D9D3C0; font-size:1.02rem;
  transition:background .25s var(--ease), color .25s var(--ease),
             border-color .25s var(--ease), transform .25s var(--ease);
}
.m-footer__social a:hover{ transform:translateY(-2px); color:#fff; border-color:transparent; }
/* Marka renkleri: ikon tanınırlığı hover'da devreye girsin, dururken
   footer'ın sakin paletini bozmasın. */
.m-footer__social .soc--facebook:hover { background:#1877f2; }
.m-footer__social .soc--instagram:hover{ background:linear-gradient(45deg,#f09433,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888); }
.m-footer__social .soc--youtube:hover  { background:#ff0000; }
.m-footer__social .soc--linkedin:hover { background:#0a66c2; }
.m-footer__social .soc--twitter:hover  { background:#000; }
.m-footer__social a:focus-visible{ outline:2px solid var(--c-primary); outline-offset:3px; }
@media (prefers-reduced-motion: reduce){ .m-footer__social a{ transition:none; } .m-footer__social a:hover{ transform:none; } }
.m-footer__bottom{ margin-top:clamp(40px,5vw,64px); border-top:1px solid rgba(255,255,255,.1); padding:24px 0; }
.m-footer__bottom .mx{ display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; font-size:.85rem; }

/* Floating WhatsApp */
.m-wa{ position:fixed; bottom:24px; inset-inline-end:24px; z-index:900; width:56px; height:56px; border-radius:50%; background:#25d366; color:#fff; display:grid; place-items:center; font-size:1.6rem; box-shadow:0 10px 26px rgba(37,211,102,.45); transition:transform .25s var(--ease); }
.m-wa:hover{ transform:scale(1.08); color:#fff; }
/* Sol altta tek başına duruyordu ve koyu altbilginin üstünde daire tamamen
   kayboluyordu (yalnız ok kalıyordu). Konvansiyonel köşeye alındı, WhatsApp
   varsa onun üstüne biner; ince halka her zeminde kenarı belli eder. */
.m-totop{ position:fixed; bottom:24px; inset-inline-end:24px; z-index:900; width:48px; height:48px; border-radius:50%; background:var(--c-ink); color:#fff; display:grid; place-items:center; opacity:0; visibility:hidden; transform:translateY(12px); transition:.3s var(--ease); cursor:pointer; box-shadow:0 10px 26px rgba(20,20,15,.32), 0 0 0 1px rgba(255,255,255,.16); }
.m-totop:hover{ background:var(--c-primary); color:var(--c-on-primary); }
body:has(.m-wa) .m-totop{ bottom:92px; }
.m-totop.show{ opacity:1; visibility:visible; transform:translateY(0); }

/* ==========================================================================
   LISTING (products)
   ========================================================================== */
.listing-search{ display:flex; gap:8px; margin:0 0 22px; }
.listing-search input{
  flex:1 1 auto; min-width:0; height:44px; padding:0 14px;
  border:1px solid var(--c-line); border-radius:var(--r-sm); background:#fff;
  font:inherit; font-size:.92rem; color:var(--c-ink); outline:none;
  transition:border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.listing-search input:focus{ border-color:var(--c-primary); box-shadow:0 0 0 3px rgba(255,185,9,.22); }
.listing-search button{
  flex:none; width:44px; height:44px; border:0; border-radius:var(--r-sm);
  background:var(--c-primary); color:var(--c-on-primary); cursor:pointer;
  display:grid; place-items:center; transition:filter .18s var(--ease);
}
.listing-search button:hover{ filter:brightness(1.06); }
.listing-search__clear{
  display:inline-flex; align-items:center; gap:7px; margin:-12px 0 20px;
  font-size:.85rem; color:var(--c-muted);
}
.listing-search__clear:hover{ color:var(--c-primary-ink, var(--c-primary-d)); }
.listing-empty{ color:var(--c-muted); text-align:center; padding:48px 16px; }

.listing-side{ position:sticky; top:104px; }
.listing-side h4{ font-size:.95rem; text-transform:uppercase; letter-spacing:.06em; color:var(--c-muted); margin-bottom:16px; }
.listing-side ul{ list-style:none; padding:0; margin:0 0 26px; border:1px solid var(--c-line); border-radius:var(--r); overflow:hidden; }
.listing-side li + li{ border-top:1px solid var(--c-line); }
.listing-side li a{ display:flex; align-items:center; justify-content:space-between; padding:13px 18px; font-family:var(--f-head); font-weight:500; font-size:.92rem; color:var(--c-text); transition:.2s var(--ease); }
.listing-side li a::after{ content:"\f054"; font-family:"Font Awesome 6 Free"; font-weight:900; font-size:.65rem; opacity:0; color:var(--c-primary); transition:.2s var(--ease); }
.listing-side li a:hover{ background:var(--c-surface); color:var(--c-primary); padding-left:22px; }
/* !important şart: tema dosyasındaki genel "a:hover { color: ... !important }"
   kuralı buradaki beyazı da eziyor, yazı turkuaz zemin üstünde turkuaza düşüp
   okunmaz hâle geliyordu. Kapsam bilerek yalnızca bu satırla sınırlı — genel
   kural olduğu gibi bırakıldı. */
.listing-side li a.active{ background:var(--c-primary); color:var(--c-on-primary) !important; }
.listing-side li a.active::after,.listing-side li a:hover::after{ opacity:1; }
.listing-side li a.active::after{ color:#fff; }
/* Sayfalama kalktı; kaç ürün listelendiği burada belirtiliyor */
.listing-count{
  font-family:var(--f-head); font-weight:600; font-size:.86rem;
  text-transform:uppercase; letter-spacing:.08em; color:var(--c-muted);
  margin:0 0 20px;
}
.listing-cta{ background:var(--c-ink); border-radius:var(--r-lg); padding:28px; color:#fff; }
/* Kural kutunun BAŞINDAKİ kulaklık ikonu içindi; alttaki iki düğmenin
   ikonlarını da 28,8px'e büyütüp orantıyı bozuyordu. Yalnız doğrudan
   çocuğa uygulanıyor. */
.listing-cta > i{ font-size:1.8rem; color:var(--c-primary-l); margin-bottom:14px; display:block; }
.listing-cta h5{ color:#fff; font-size:1.05rem; margin-bottom:8px; }
.listing-cta p{ color:#B2AC96; font-size:.86rem; margin-bottom:16px; }

/* ==========================================================================
   ANASAYFA REFERANS BLOĞU (.hrf)
   Logo yerine gerçek referans verisi: kurum sayısı, kurum türleri, ülkeler.
   ========================================================================== */
/* ---- Arka plan videosu ve koyu perde ---- */
.hrf{ position:relative; isolation:isolate; overflow:hidden; background:var(--c-ink); }
.hrf__bg{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.hrf__video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  display:block; opacity:0; transition:opacity 1.1s var(--ease);
}
.hrf__video.is-on{ opacity:1; }
/* Perde ölçülü: video görünsün ama metin kontrastı kaybolmasın.
   Kenarlarda koyu, ortada açık — başlık ve kartların arkasındaki okunabilirliği
   perde değil, aşağıdaki cam yüzeyler taşıyor. */
.hrf__veil{
  position:absolute; inset:0;
  background:
    /* Metin sütununun arkasında ek yumuşak karartma: başlık ve spot,
       fotoğrafın aydınlık bölgesine denk geldiğinde 1,4:1'e düşüyordu. */
    radial-gradient(58% 62% at 50% 42%, rgba(13,12,9,.62) 0%, rgba(13,12,9,0) 78%),
    linear-gradient(180deg, rgba(15,14,10,.76) 0%, rgba(15,14,10,.58) 45%, rgba(15,14,10,.80) 100%),
    radial-gradient(70% 60% at 50% 40%, rgba(255,185,9,.16) 0%, rgba(255,185,9,0) 70%);
}
/* Başlık bloğu videonun üstünde her koşulda okunsun */
.hrf .sec-head h2,
.hrf .sec-head p,
.hrf__geot{ text-shadow:0 2px 14px rgba(9,9,6,.55); }
.hrf > .mx{ position:relative; z-index:1; }

/* Koyu zeminde metinler */
.hrf .sec-head h2{ color:#fff; }
.hrf .sec-head p{ color:rgba(255,255,255,.76); }
.hrf .eyebrow{ color:var(--c-primary-l, #EEC96F); }

.hrf__stats{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
  gap:clamp(14px,2vw,22px); margin:clamp(28px,4vw,44px) 0 clamp(22px,3vw,34px);
}
.hrf__stat{
  text-align:center; padding:clamp(20px,2.6vw,30px) 18px;
  /* Perde açıldığı için okunabilirliği kartın kendi cam yüzeyi taşıyor */
  background:rgba(12,12,8,.42); border:1px solid rgba(255,255,255,.18);
  border-radius:var(--r-lg);
  -webkit-backdrop-filter:blur(14px) saturate(1.2); backdrop-filter:blur(14px) saturate(1.2);
}
.hrf__stat b{
  display:block; font-family:var(--f-head); font-weight:800; line-height:1;
  font-size:clamp(2.1rem,4vw,3rem); color:#fff; letter-spacing:-.02em;
}
.hrf__stat b i{ font-style:normal; font-size:.55em; vertical-align:super; margin-inline-start:2px; color:var(--c-primary-l, #EEC96F); }
.hrf__stat span{ display:block; margin-top:9px; color:rgba(255,255,255,.72); font-size:.92rem; line-height:1.45; }

.hrf__types{
  list-style:none; padding:0; margin:0 0 clamp(26px,3.4vw,40px);
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px;
}
.hrf__types li{
  display:inline-flex; align-items:center; gap:9px;
  padding:9px 16px; border-radius:var(--r-pill);
  background:#fff; border:1px solid var(--c-line);
  font-family:var(--f-head); font-weight:600; font-size:.88rem; color:var(--c-ink);
}
.hrf__types li i{ font-size:.82rem; color:var(--c-primary); }

.hrf__geot{
  text-align:center; margin:0 0 18px;
  font-family:var(--f-head); font-weight:600; font-size:1.02rem;
  text-transform:uppercase; letter-spacing:.1em; color:rgba(255,255,255,.6);
}
/* --- Kalite belgeleri: koyu perde üstünde cam kart, belge beyaz plakada --- */
.hrf__certs{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr));
  gap:16px; margin:0 0 42px; justify-content:center;
}
.hrf-cert{
  position:relative; display:flex; flex-direction:column; gap:12px;
  padding:16px; border-radius:var(--r-lg);
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  cursor:zoom-in; text-align:center; font-family:inherit;
  transition:transform .28s var(--ease), border-color .28s var(--ease), box-shadow .28s var(--ease), background .28s var(--ease);
}
.hrf-cert:hover{
  transform:translateY(-6px);
  background:rgba(255,255,255,.11);
  border-color:var(--c-primary);
  box-shadow:0 20px 42px rgba(0,0,0,.38);
}
/* Belgeler beyaz zeminli taranmış evrak; koyu perdede okunmaları için
   kendi beyaz plakalarında durur. */
.hrf-cert__plate{
  display:grid; place-items:center; padding:10px;
  background:#fff; border-radius:var(--r-md, 12px);
  aspect-ratio:1 / 1.24; overflow:hidden;
}
.hrf-cert__plate img{
  width:100%; height:100%; min-width:0; min-height:0;
  object-fit:contain; display:block;
}
.hrf-cert__t{
  font-size:.86rem; line-height:1.4; color:rgba(255,255,255,.86);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.hrf-cert__zoom{
  position:absolute; top:24px; right:24px;
  width:32px; height:32px; border-radius:50%;
  display:grid; place-items:center; font-size:.72rem;
  background:rgba(9,9,6,.55); color:#fff; border:1px solid rgba(255,255,255,.28);
  opacity:0; transform:scale(.9); transition:opacity .25s var(--ease), transform .25s var(--ease);
}
.hrf-cert:hover .hrf-cert__zoom, .hrf-cert:focus-visible .hrf-cert__zoom{ opacity:1; transform:none; }

/* --- Sürüklenebilir kayan şerit (.hmq) ---------------------------------
   Kendiliğinden kayar, fareyle/parmakla tutup sürüklenebilir, üstüne
   gelince durur. Kaydırma CSS animasyonuyla değil scrollLeft ile yapılır;
   böylece sürükleme ile otomatik kayma birbiriyle çakışmaz (hydro.js).   */
.hmq{
  position:relative; margin:0 0 42px;
  overflow-x:auto; overflow-y:hidden;
  cursor:grab; -webkit-overflow-scrolling:touch;
  scrollbar-width:none; -ms-overflow-style:none;
  overscroll-behavior-x:contain;
  -webkit-mask-image:linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
          mask-image:linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
}
.hmq::-webkit-scrollbar{ display:none; }
.hmq.is-drag{ cursor:grabbing; }
/* Sürüklerken içerideki bağlantı/görseller "sürükle-bırak"a kapanmalı. */
.hmq.is-drag *{ pointer-events:none; user-select:none; }
.hmq__track{ display:flex; align-items:center; gap:18px; width:max-content; padding:2px 0; }

/* --- Referans logoları --- */
.hrf-logo{
  flex:0 0 auto; display:grid; place-items:center;
  width:158px; height:86px; padding:14px;
  background:rgba(255,255,255,.94); border-radius:var(--r-md, 12px);
  border:1px solid rgba(255,255,255,.2);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.hrf-logo:hover{ transform:translateY(-4px); box-shadow:0 16px 32px rgba(0,0,0,.35); }
.hrf-logo img{
  width:100%; height:100%; min-width:0; min-height:0;
  object-fit:contain; display:block;
}
/* --- Ülke rozetleri şeritte: daha iri ve okunur --- */
.hmq .hrf__flag{
  flex:0 0 auto; padding:11px 20px; font-size:.98rem; gap:11px;
  transition:transform .22s var(--ease), border-color .22s var(--ease), background .22s var(--ease);
}
.hmq .hrf__flag:hover{
  transform:translateY(-3px);
  border-color:var(--c-primary); background:rgba(12,12,8,.62);
}
/* flag-icons bayrağı rozetle orantılı büyür. */
.hmq .hrf__flag .fi{ width:26px; height:19px; border-radius:3px; flex-shrink:0; }

/* Sürükleme ipucu: şerit ilk kez göründüğünde kısa bir el imleci mesajı */
.hmq__hint{
  display:flex; align-items:center; justify-content:center; gap:7px;
  margin:-30px 0 42px; font-size:.8rem; color:rgba(255,255,255,.5);
}
.hmq__hint i{ font-size:.9rem; }

/* Hareket azaltma tercihinde şerit kendiliğinden kaymaz; elle sürüklenir. */
@media (prefers-reduced-motion: reduce){
  .hrf-cert{ transition:none; }
  .hrf-cert:hover{ transform:none; }
  .hmq .hrf__flag{ transition:none; }
}
@media (max-width:640px){
  .hrf__certs{ grid-template-columns:repeat(2, 1fr); gap:12px; margin-bottom:32px; }
  .hrf-cert{ padding:12px; }
  .hrf-cert__t{ font-size:.78rem; }
  /* Dokunmatikte hover yok; büyütme simgesi hep görünsün. */
  .hrf-cert__zoom{ opacity:1; transform:none; top:18px; right:18px; width:28px; height:28px; }
  .hrf-logo{ width:126px; height:70px; padding:11px; }
  .hmq{ margin-bottom:32px; }
  .hmq__hint{ margin:-24px 0 32px; }
  .hmq .hrf__flag{ padding:9px 16px; font-size:.9rem; }
}

.hrf__flags{ display:flex; flex-wrap:wrap; justify-content:center; gap:9px; }
.hrf__flag{
  display:inline-flex; align-items:center; gap:9px;
  padding:7px 14px; border-radius:var(--r-pill);
  background:rgba(12,12,8,.46); border:1px solid rgba(255,255,255,.18);
  font-size:.87rem; color:#fff;
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
.hrf__flag .fi{ width:20px; height:15px; border-radius:2px; box-shadow:0 0 0 1px rgba(255,255,255,.22); }
/* Türkiye — üretim merkezi; haritadaki kırmızıyla aynı dil */
.hrf__flag--home{
  background:#e30a17; border-color:#e30a17; color:#fff; font-weight:600;
  box-shadow:0 8px 20px rgba(227,10,23,.25);
}
.hrf__flag--home i{
  font-style:normal; font-size:.72rem; opacity:.85;
  padding-inline-start:9px; margin-inline-start:2px;
  border-inline-start:1px solid rgba(255,255,255,.35);
}
.hrf__cta{ text-align:center; margin-top:clamp(28px,3.6vw,44px); }

/* ==========================================================================
   VİDEO GALERİ (.vgal) — kanal videoları sırayla, tıklayınca katmanda oynar
   ========================================================================== */
/* Ürün grubuna göre süzme şeridi */
.vgal__filtre{ display:flex; flex-wrap:wrap; gap:9px; margin:0 0 20px; }
.vgal__f{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  padding:9px 16px; border-radius:var(--r-pill);
  background:#fff; border:1px solid var(--c-line);
  font-family:var(--f-head); font-weight:600; font-size:.86rem; color:var(--c-ink);
  transition:background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.vgal__f:hover{ border-color:var(--c-primary); color:var(--c-primary); }
.vgal__f span{
  padding:1px 8px; border-radius:var(--r-pill); font-size:.74rem;
  background:var(--c-surface); color:var(--c-muted);
}
.vgal__f.is-on{ background:var(--c-primary); border-color:var(--c-primary); color:var(--c-on-primary); }
.vgal__f.is-on span{ background:rgba(255,255,255,.22); color:#fff; }

.vgal__count{
  font-family:var(--f-head); font-weight:600; font-size:.86rem;
  text-transform:uppercase; letter-spacing:.08em; color:var(--c-muted); margin:0 0 20px;
}
.vgal{ display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:clamp(18px,2.2vw,28px); }
.vgal__item{
  display:flex; flex-direction:column; text-align:start; padding:0; cursor:pointer;
  background:#fff; border:1px solid var(--c-line); border-radius:var(--r-lg); overflow:hidden;
  box-shadow:var(--sh-xs);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.vgal__item:hover{ transform:translateY(-4px); box-shadow:var(--sh-md); border-color:color-mix(in srgb, var(--c-primary) 35%, transparent); }
.vgal__item:focus-visible{ outline:2px solid var(--c-primary); outline-offset:3px; }
.vgal__thumb{ position:relative; display:block; aspect-ratio:16/9; background:var(--c-surface); overflow:hidden; }
.vgal__thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.vgal__item:hover .vgal__thumb img{ transform:scale(1.05); }
/* hqdefault yedeğine düşüldüyse görsel 4:3'tür; yan bantları kırp */
.vgal__thumb img.is-4x3{ transform:scale(1.34); }
.vgal__item:hover .vgal__thumb img.is-4x3{ transform:scale(1.4); }
.vgal__play{
  position:absolute; inset:0; margin:auto; width:60px; height:60px; border-radius:50%;
  display:grid; place-items:center; color:#fff; font-size:1.05rem; padding-left:4px;
  background:rgba(20,20,15,.55); border:1.5px solid rgba(255,255,255,.65);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  transition:background .25s var(--ease), transform .25s var(--ease);
}
.vgal__item:hover .vgal__play{ background:var(--c-primary); border-color:var(--c-primary); transform:scale(1.08); }
.vgal__no{
  position:absolute; inset-inline-start:12px; top:12px;
  font-family:var(--f-head); font-weight:700; font-size:.72rem; letter-spacing:.06em;
  color:#fff; background:rgba(20,20,15,.62); padding:3px 9px; border-radius:var(--r-pill);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.vgal__body{ display:flex; flex-direction:column; gap:10px; padding:18px 20px 20px; }
.vgal__body b{ font-family:var(--f-head); font-weight:600; font-size:1rem; line-height:1.35; color:var(--c-ink); }
.vgal__body > span{ font-family:var(--f-head); font-weight:600; font-size:.85rem; color:var(--c-primary); display:inline-flex; align-items:center; gap:8px; }
.vgal__item:hover .vgal__body > span .arr{ transform:translateX(4px); }

/* ---- Oynatıcı katmanı ---- */
.vlb{
  position:fixed; inset:0; z-index:2000; display:none;
  align-items:center; justify-content:center; gap:clamp(6px,2vw,26px);
  padding:clamp(16px,4vw,48px);
  background:rgba(12,12,8,.9); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
.vlb.is-on{ display:flex; }
.vlb__stage{ width:min(1100px, 100%); }
.vlb__frame{ position:relative; aspect-ratio:16/9; border-radius:var(--r-lg); overflow:hidden; background:#000; box-shadow:0 30px 80px rgba(0,0,0,.5); }
.vlb__frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.vlb__title{ margin:16px 0 0; text-align:center; color:#fff; font-family:var(--f-head); font-weight:600; font-size:1.02rem; }
.vlb__yt{
  display:flex; align-items:center; justify-content:center; gap:9px;
  margin:12px auto 0; width:fit-content; padding:8px 18px; border-radius:var(--r-pill);
  color:rgba(255,255,255,.82); font-size:.86rem; font-weight:600;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2);
  transition:background .25s var(--ease), color .25s var(--ease);
}
.vlb__yt:hover{ background:#ff0000; border-color:#ff0000; color:#fff; }
.vlb__yt i{ font-size:1.05rem; }
.vlb__close{
  position:absolute; top:clamp(12px,2vw,26px); inset-inline-end:clamp(12px,2vw,26px);
  width:46px; height:46px; border-radius:50%; display:grid; place-items:center; cursor:pointer;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.28); color:#fff; font-size:1.1rem;
  transition:background .25s var(--ease);
}
.vlb__close:hover{ background:var(--c-primary); border-color:var(--c-primary); }
.vlb__nav{
  flex:none; width:clamp(40px,4vw,52px); aspect-ratio:1; border-radius:50%; cursor:pointer;
  display:grid; place-items:center; color:#fff; font-size:1rem;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.26);
  transition:background .25s var(--ease);
}
.vlb__nav:hover{ background:var(--c-primary); border-color:var(--c-primary); }
[dir="rtl"] .vlb__nav i{ transform:scaleX(-1); }
@media (max-width:640px){
  .vlb{ flex-direction:column; }
  .vlb__nav{ position:absolute; bottom:clamp(16px,5vh,40px); }
  .vlb__prev{ inset-inline-start:22%; }
  .vlb__next{ inset-inline-end:22%; }
}


/* Bootstrap pagination polish */
.pagination{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; padding:0; list-style:none; }
.pagination .page-link{ border:1px solid var(--c-line); color:var(--c-ink); border-radius:var(--r-sm) !important; padding:10px 16px; font-family:var(--f-head); font-weight:600; font-size:.9rem; }
.pagination .page-item.active .page-link{ background:var(--c-primary); border-color:var(--c-primary); color:var(--c-on-primary); }
.pagination .page-link:hover{ background:var(--c-surface); color:var(--c-primary); }
.pagination .page-item.disabled .page-link{ opacity:.45; }

/* Rich content (CMS body) */
.rich{ line-height:1.85; color:var(--c-text); font-size:1.02rem; }
.rich h2,.rich h3,.rich h4{ margin:1.5em 0 .6em; }
.rich p{ margin-bottom:1.1em; }
.rich img{ border-radius:var(--r); margin:1.2em 0; max-width:100%; }
.rich ul,.rich ol{ margin:0 0 1.1em 1.2em; }
.rich li{ margin-bottom:.5em; }
.rich a{ color:var(--c-primary); text-decoration:underline; }
.rich blockquote{ border-left:3px solid var(--c-primary); padding:6px 0 6px 20px; margin:1.4em 0; color:var(--c-muted); font-style:italic; }
.rich table{ width:100%; border-collapse:collapse; margin:1.2em 0; }
.rich table td,.rich table th{ border:1px solid var(--c-line); padding:10px 14px; }

/* ==========================================================================
   FAQ / CONTACT / BLOG / DOC
   ========================================================================== */
.faq-item{ border:1px solid var(--c-line); border-radius:var(--r); margin-bottom:12px; overflow:hidden; background:#fff; }
.faq-item summary{ list-style:none; cursor:pointer; padding:20px 24px; font-family:var(--f-head); font-weight:600; color:var(--c-ink); display:flex; align-items:center; justify-content:space-between; gap:16px; }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:"\f067"; font-family:"Font Awesome 6 Free"; font-weight:900; color:var(--c-primary); font-size:.85rem; transition:transform .25s var(--ease); }
.faq-item[open] summary::after{ content:"\f068"; }
.faq-item[open] summary{ color:var(--c-primary); }
.faq-item__body{ padding:0 24px 22px; color:var(--c-muted); line-height:1.8; }

/* height:100% bu kartı Bootstrap sütununun TAMAMI kadar uzatıyordu: iletişim
   sayfasında üç kart alt alta gelince sütun üç katına çıkıp bölümün dışına,
   haritanın ve altbilginin üstüne taşıyordu. Izgarada zaten stretch var. */
.contact-card{ background:#fff; border:1px solid var(--c-line); border-radius:var(--r-lg); padding:30px; }
.grid > .contact-card{ height:100%; }
.contact-card__ic{ width:54px; height:54px; border-radius:14px; background:var(--c-primary-soft); color:var(--c-primary-ink); display:grid; place-items:center; font-size:1.3rem; margin-bottom:18px; }
.contact-card h4{ font-size:1.05rem; margin-bottom:6px; }
.contact-card a, .contact-card p{ color:var(--c-muted); font-size:.95rem; margin:0; }
.contact-card a:hover{ color:var(--c-primary-ink); text-decoration:underline; }
.map-wrap{ border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--c-line); line-height:0; }
.map-wrap iframe{ width:100%; height:420px; border:0; display:block; }

.doc-card{ background:#fff; border:1px solid var(--c-line); border-radius:var(--r-lg); overflow:hidden; transition:transform .3s var(--ease), box-shadow .3s var(--ease); height:100%; display:flex; flex-direction:column; }
.doc-card:hover{ transform:translateY(-5px); box-shadow:var(--sh); }
.doc-card__media{ aspect-ratio:3/4; background:var(--c-surface); display:grid; place-items:center; overflow:hidden; }
/* place-items:center kutusunda yüzdelik yükseklik çözülemiyor; görsel kendi
   boyunda kalıp aşağıdan kırpılıyordu (1280x1760 kare 381px kutuda 393px).
   Izgara hücresine gerdiriliyor. */
.doc-card__media img{ align-self:stretch; justify-self:stretch; width:100%; height:100%; min-width:0; min-height:0; object-fit:cover; }
.doc-card__media i{ font-size:3rem; color:var(--c-line-2); }
.doc-card__body{ padding:18px 20px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.doc-card__body b{ font-family:var(--f-head); font-size:.95rem; color:var(--c-ink); }

/* Article */
.article{ max-width:820px; }
.article__meta{ display:flex; gap:18px; color:var(--c-muted-2); font-size:.88rem; margin-bottom:24px; }
.article__cover{ border-radius:var(--r-lg); overflow:hidden; margin-bottom:30px; }
.article__nav{ display:flex; justify-content:space-between; gap:16px; margin-top:40px; padding-top:24px; border-top:1px solid var(--c-line); }
.side-widget{ background:#fff; border:1px solid var(--c-line); border-radius:var(--r-lg); padding:24px; position:sticky; top:104px; }
.side-widget h4{ font-size:1rem; margin-bottom:16px; }
.side-post{ display:flex; gap:12px; align-items:center; padding:10px 0; border-bottom:1px solid var(--c-line); }
.side-post:last-child{ border-bottom:0; }
.side-post img{ width:64px; height:54px; border-radius:var(--r-sm); object-fit:cover; flex-shrink:0; background:var(--c-surface); }
.side-post b{ font-family:var(--f-head); font-size:.85rem; color:var(--c-ink); font-weight:600; line-height:1.4; }
.side-post:hover b{ color:var(--c-primary); }

/* logos marquee */
.logos{ display:flex; gap:50px; align-items:center; flex-wrap:wrap; justify-content:center; }
.logos img{ height:46px; width:auto; opacity:.55; filter:grayscale(1); transition:.3s; }
.logos img:hover{ opacity:1; filter:none; }

/* ==========================================================================
   ANIMATION / REVEAL
   ========================================================================== */
@keyframes fadeUp{ from{ opacity:0; transform:translateY(14px);} to{ opacity:1; transform:translateY(0);} }
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-visible{ opacity:1; transform:none; }
.reveal[data-d="1"]{ transition-delay:.08s; }
.reveal[data-d="2"]{ transition-delay:.16s; }
.reveal[data-d="3"]{ transition-delay:.24s; }
.reveal[data-d="4"]{ transition-delay:.32s; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none; } html{ scroll-behavior:auto; scroll-snap-type:none; } }

/* ==========================================================================
   HERO SHOWCASE — yumuşak & hareketli renk zemini (Malvestio esintili)
   ========================================================================== */
.hxs{
  position:relative; overflow:hidden; isolation:isolate;
  background:linear-gradient(162deg, #F2F5F7 0%, #F4F6F8 55%, #FAF6EC 100%);
}
.hxs__swiper{ position:relative; z-index:2; width:100%; }
.hxs__slide{ position:relative; overflow:hidden; min-height:clamp(500px,64vh,600px); background:transparent; }
.hxs__slide::before, .hxs__slide::after{ display:none; }

/* Swiper HENÜZ başlamadan slaytlar alt alta yığılıyordu: bölüm 2138px açılıp
   init olunca 807px'e düşüyor, altındaki her şey zıplıyordu (CLS 0,96 — Google
   eşiği 0,1). Init öncesinde de slaytları yan yana diziyoruz; yükseklik baştan
   doğru, taşan kısmı .swiper zaten kırpıyor. Swiper slaytları ölçebilsin diye
   gizlemiyoruz, yalnız satıra alıyoruz. */
.hxs__swiper:not(.swiper-initialized) .swiper-wrapper{ display:flex; flex-direction:row; }
.hxs__swiper:not(.swiper-initialized) .swiper-slide{ flex:0 0 100%; max-width:100%; }

/* ---- hareketli renk kümeleri (arka plan animasyonu) ---- */
.hxs__aura{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.hxs__blob{ position:absolute; border-radius:50%; filter:blur(74px); opacity:.62; will-change:transform; mix-blend-mode:multiply; }
.hxs__blob--1{ width:min(64vw,760px); aspect-ratio:1; left:-10%; top:-24%;
  background:radial-gradient(circle at 42% 42%, rgba(255,185,9,.20), rgba(255,185,9,0) 62%);
  animation:hxsDrift1 26s ease-in-out infinite alternate; }
.hxs__blob--2{ width:min(60vw,720px); aspect-ratio:1; right:-8%; top:-12%;
  background:radial-gradient(circle at 50% 50%, rgba(255,209,82,.22), rgba(255,209,82,0) 62%);
  animation:hxsDrift2 32s ease-in-out infinite alternate; }
.hxs__blob--3{ width:min(66vw,780px); aspect-ratio:1; left:8%; bottom:-34%;
  background:radial-gradient(circle at 50% 50%, rgba(255,185,9,.16), rgba(255,185,9,0) 62%);
  animation:hxsDrift3 38s ease-in-out infinite alternate; }
@keyframes hxsDrift1{ 0%{ transform:translate(0,0) scale(1);} 100%{ transform:translate(16%,20%) scale(1.14);} }
@keyframes hxsDrift2{ 0%{ transform:translate(0,0) scale(1.05);} 100%{ transform:translate(-18%,14%) scale(1.16);} }
@keyframes hxsDrift3{ 0%{ transform:translate(0,0) scale(1);} 100%{ transform:translate(14%,-16%) scale(1.12);} }

/* ---- grid ---- */
.hxs__grid{
  position:relative; z-index:3; display:grid; grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);
  align-items:center; gap:clamp(20px,4vw,60px);
  min-height:inherit; padding:clamp(8px,1.5vh,20px) 0 clamp(80px,9vh,104px);
}

/* ---- left content (koyu lacivert metin, açık zemin) ---- */
.hxs__content{ position:relative; z-index:4; max-width:560px; }
.hxs__eyebrow{ display:inline-flex; align-items:center; gap:12px; color:rgba(20,20,15,.66); font-family:var(--f-head); font-weight:600; letter-spacing:.16em; text-transform:uppercase; font-size:.74rem; margin-bottom:22px; }
.hxs__title{ color:var(--c-ink); font-family:var(--f-head); font-weight:300; font-size:clamp(1.7rem,3vw,2.7rem); line-height:1.12; margin:0 0 16px; letter-spacing:-.01em; }
.hxs__lead{ color:rgba(20,20,15,.66); font-size:clamp(1rem,1.4vw,1.14rem); line-height:1.62; margin:0 0 24px; max-width:492px; }
.hxs__chips{ list-style:none; display:flex; flex-wrap:wrap; gap:10px; padding:0; margin:0 0 28px; }
.hxs__chips li{ display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.55); border:1px solid rgba(20,20,15,.10); color:var(--c-ink); font-size:.85rem; font-weight:600; padding:9px 15px; border-radius:var(--r-pill); backdrop-filter:blur(6px); }
.hxs__chips li::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--acc); box-shadow:0 0 10px var(--acc); }
.hxs__cta{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
.hxs__code{ display:block; margin-top:24px; color:rgba(20,20,15,.42); font-size:.76rem; letter-spacing:.12em; text-transform:uppercase; }

/* ---- right stage ---- */
.hxs__stage{ position:relative; z-index:3; align-self:center; min-height:inherit; display:flex; align-items:center; justify-content:center; }
.hxs__stage::before{ content:""; position:absolute; z-index:0; width:82%; aspect-ratio:1; left:52%; top:50%; transform:translate(-50%,-50%); border-radius:50%; background:radial-gradient(circle, rgba(255,255,255,.9) 0%, rgba(255,255,255,0) 66%); }
.hxs__ring{ position:absolute; z-index:0; left:50%; top:46%; transform:translate(-50%,-50%); font-family:var(--f-head); font-weight:700; font-size:clamp(3.5rem,9vw,8rem); letter-spacing:-.03em; text-transform:uppercase; color:#14140F; opacity:.05; white-space:nowrap; pointer-events:none; user-select:none; max-width:100%; overflow:hidden; }
.hxs__glow{ position:absolute; z-index:1; width:70%; aspect-ratio:1; left:52%; top:50%; transform:translate(-50%,-50%); border-radius:50%; background:radial-gradient(circle, color-mix(in srgb, var(--acc) 22%, transparent) 0%, transparent 62%); filter:blur(28px); opacity:.7; }
/* Sabit yükseklikli görsel kutusu + contain: vitrindeki ürünlerin en/boy oranı
   birbirinden farklı (yatay yataklar ~1.33, dikey PC-01 ~0.82). height:auto
   iken Swiper autoHeight kapalı olduğu için sarmalayıcı EN UZUN slayta göre
   şişiyordu; yatay slaytlarda ~190px ölü boşluk kalıyor, görsel küçük
   duruyordu. Kutu sabitlenince tüm slaytlar aynı yükseklikte oluyor, geçişte
   zıplama da bitiyor. contain şart: sabit yükseklikle birlikte varsayılan
   object-fit:fill dikey görseli yatay eziyor. */
.hxs__img{
  position:relative; z-index:3; display:block;
  width:100%; max-width:700px; height:clamp(300px,42vw,500px);
  object-fit:cover; object-position:center;
  border-radius:clamp(16px,2.2vw,28px);
  /* Kenarlar zemine eriyor: kutu hissi kalkıyor, fotoğraf zemine gömülüyor. */
  -webkit-mask-image:radial-gradient(125% 125% at 58% 42%, #000 62%, rgba(0,0,0,.6) 84%, transparent 100%);
          mask-image:radial-gradient(125% 125% at 58% 42%, #000 62%, rgba(0,0,0,.6) 84%, transparent 100%);
  filter:drop-shadow(0 34px 46px rgba(22,21,15,.28));
}
.hxs__badge{ position:absolute; z-index:4; right:6%; bottom:9%; display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.9); backdrop-filter:blur(8px); border:1px solid rgba(22,21,15,.08); color:var(--c-ink); font-family:var(--f-head); font-weight:600; font-size:.8rem; padding:9px 15px; border-radius:var(--r-pill); box-shadow:0 12px 30px rgba(22,21,15,.14); }
.hxs__badge i{ color:var(--acc); }

/* ---- entrance motion (active slide). Default-visible for resilience: if JS/Swiper
       fails, content still shows; the animation only enhances the active slide. ---- */
.swiper-slide-active .hxs__content > *{ animation:hxsUp .7s var(--ease) both; }
.swiper-slide-active .hxs__content > *:nth-child(1){ animation-delay:.06s; }
.swiper-slide-active .hxs__content > *:nth-child(2){ animation-delay:.13s; }
.swiper-slide-active .hxs__content > *:nth-child(3){ animation-delay:.20s; }
.swiper-slide-active .hxs__content > *:nth-child(4){ animation-delay:.27s; }
.swiper-slide-active .hxs__content > *:nth-child(5){ animation-delay:.34s; }
.swiper-slide-active .hxs__img{ animation:hxsImg 1s var(--ease) .1s both; }
.swiper-slide-active .hxs__badge{ animation:hxsUp .7s var(--ease) .5s both; }
@keyframes hxsUp{ from{ opacity:0; transform:translateY(20px);} to{ opacity:1; transform:translateY(0);} }
@keyframes hxsImg{ from{ opacity:0; transform:translateX(46px) scale(.95);} to{ opacity:1; transform:translateX(0) scale(1);} }

/* ---- bottom nav: ürün sekmeleri + progress + arrows (açık tema) ---- */
.hxs__navwrap{ position:absolute; left:0; right:0; bottom:clamp(24px,4vh,44px); z-index:7; }
.hxs__nav{ display:flex; align-items:center; gap:16px; }
.hxs__arrow{ flex:none; width:48px; height:48px; border-radius:50%; border:1px solid rgba(255,255,255,.65); background:linear-gradient(135deg, rgba(255,255,255,.5), rgba(255,255,255,.22)); color:var(--c-ink); display:grid; place-items:center; cursor:pointer; -webkit-backdrop-filter:blur(20px) saturate(1.6); backdrop-filter:blur(20px) saturate(1.6); box-shadow:0 8px 26px rgba(22,21,15,.12), inset 0 1px 0 rgba(255,255,255,.7); transition:.25s var(--ease); }
.hxs__arrow:hover{ background:var(--c-primary); border-color:var(--c-primary); color:var(--c-on-primary); transform:translateY(-2px); }
/* flex:1 tek başına min-width:auto bırakıyor: sekmeler içerik genişliğinin
   altına inemeyip 834px'te şerit ile "ileri" okunu ekranın dışına itiyordu. */
.hxs__tabs{ display:flex; gap:10px; flex:1 1 0; min-width:0; }
.hxs__tab{ flex:1; min-width:0; cursor:pointer; color:var(--c-ink);
  display:flex; align-items:stretch; justify-content:space-between; gap:12px; padding:11px; border-radius:18px;
  background:linear-gradient(135deg, rgba(255,255,255,.5), rgba(255,255,255,.2));
  border:1px solid rgba(255,255,255,.65);
  -webkit-backdrop-filter:blur(22px) saturate(1.7); backdrop-filter:blur(22px) saturate(1.7);
  box-shadow:0 10px 34px rgba(22,21,15,.12), inset 0 1px 0 rgba(255,255,255,.7);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease); }
.hxs__tab:hover{ transform:translateY(-3px); background:linear-gradient(135deg, rgba(255,255,255,.68), rgba(255,255,255,.38)); box-shadow:0 18px 46px rgba(22,21,15,.18), inset 0 1px 0 rgba(255,255,255,.85); }
.hxs__tab.is-active{ background:linear-gradient(135deg, rgba(255,255,255,.82), rgba(255,255,255,.55)); border-color:color-mix(in srgb, var(--c-primary) 45%, rgba(255,255,255,.6)); box-shadow:0 20px 48px rgba(22,21,15,.2), inset 0 1px 0 rgba(255,255,255,.9); }
.hxs__tabmain{ display:flex; flex-direction:column; justify-content:center; gap:6px; min-width:0; flex:1; padding:3px 0 3px 7px; }
.hxs__tabdesc{
  font-size:.7rem; line-height:1.25; color:rgba(20,20,15,.55);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.hxs__tab.is-active .hxs__tabdesc{ color:rgba(20,20,15,.7); }
.hxs__tabname{ font-family:var(--f-head); font-weight:600; font-size:1rem; color:var(--c-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hxs__progress{ display:block; height:3px; border-radius:3px; background:rgba(20,20,15,.14); overflow:hidden; }
.hxs__fill{ display:block; height:100%; width:100%; border-radius:3px; background:var(--c-primary); transform:scaleX(0); transform-origin:left; }
.hxs__tabthumb{ flex:none; width:74px; align-self:stretch; border-radius:13px; overflow:hidden; display:grid; place-items:center;
  background:linear-gradient(150deg, rgba(255,255,255,.55), rgba(255,255,255,.22));
  border:1px solid rgba(255,255,255,.6); box-shadow:inset 0 1px 4px rgba(22,21,15,.10); }
.hxs__tabthumb img{ width:100%; height:100%; object-fit:contain; padding:6px; transition:transform .4s var(--ease); }
.hxs__tab:hover .hxs__tabthumb img{ transform:scale(1.09); }
.hxs__tab.is-active .hxs__fill{ animation:hxsFill 6s linear forwards; }
@keyframes hxsFill{ from{ transform:scaleX(0);} to{ transform:scaleX(1);} }

@media (prefers-reduced-motion: reduce){
  .hxs__content > *, .hxs__img, .hxs__badge{ opacity:1 !important; transform:none !important; animation:none !important; }
  .hxs__blob{ animation:none !important; }
}

/* ---- responsive ---- */
@media (max-width:980px){
  .hxs__slide{ min-height:0; }
  /* Dikkat: 4 değerli padding kısayolu .mx'in yan boşluğunu siliyordu ve
     metin ekran kenarına yapışıp kırpılmış görünüyordu. */
  .hxs__grid{ grid-template-columns:1fr; gap:0; padding:clamp(54px,8vh,80px) var(--gut) 132px; text-align:center; }
  .hxs__content{ max-width:640px; margin:0 auto; }
  .hxs__eyebrow, .hxs__cta, .hxs__chips{ justify-content:center; }
  .hxs__lead{ margin-left:auto; margin-right:auto; }
  .hxs__stage{ min-height:0; margin-top:6px; }
  .hxs__img{ max-width:min(560px,84vw); height:clamp(240px,56vw,400px); }
  .hxs__ring{ font-size:clamp(3rem,18vw,7rem); top:60%; }
}
@media (max-width:560px){
  .hxs__nav{ gap:9px; }
  .hxs__arrow{ width:42px; height:42px; }
  .hxs__tabname{ display:none; }
  .hxs__tabdesc{ display:none; }
  .hxs__tab{ padding:8px; }
  .hxs__tabmain{ padding-left:4px; }
  .hxs__tabthumb{ width:46px; }
}

/* ==========================================================================
   HOME — şeffaf üst alan (header, hero gradyanının üstünde yüzer)
   Menü yapısına dokunmaz; yalnızca ana sayfada renk/konumlama değişir.
   ========================================================================== */
.is-home{ --home-top:126px; }
.is-home .m-topbar{ position:relative; z-index:1001; background:transparent; border-bottom-color:rgba(20,20,15,.08); }
.is-home .m-topbar a{ color:var(--c-ink); }
.is-home .m-topbar__social a{ background:rgba(255,255,255,.55); color:var(--c-ink); }
.is-home .m-topbar__social a:hover{ background:var(--c-primary); color:var(--c-on-primary); }
.is-home .m-header{ background:transparent; border-bottom-color:transparent; box-shadow:none; }
.is-home .m-header.is-stuck{ background:rgba(255,255,255,.82); backdrop-filter:blur(16px) saturate(1.3); border-bottom-color:var(--c-line); box-shadow:var(--sh-sm); }
.is-home .hxs{ margin-top:calc(-1 * var(--home-top)); padding-top:var(--home-top); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1100px){
  .m-footer__grid{ grid-template-columns:1fr 1fr; gap:34px; }
  .trust .mx{ grid-template-columns:repeat(2,1fr); }
  .grid-4{ grid-template-columns:repeat(2,1fr); }
  .m-mega{ width:min(980px,calc(100vw - 40px)); }
  .m-mega__grid{ grid-template-columns:repeat(4,1fr); }
}
@media (max-width:992px){
  .m-nav,.m-search-btn{ display:none; }
  .m-burger{ display:flex; }
  .grid-3{ grid-template-columns:repeat(2,1fr); }
  .pd-gallery{ position:static; }
  .pd-info{ padding-left:0; }
  .spec-cols{ grid-template-columns:1fr; }
}
@media (max-width:768px){
  .m-topbar__info{ gap:14px; }
  .m-topbar__social{ display:none; }
  .hero__stats{ gap:26px; }
  .m-footer__cta .mx{ flex-direction:column; align-items:flex-start; }
}
@media (max-width:640px){
  .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; }
  .m-footer__grid{ grid-template-columns:1fr; }
  .trust .mx{ grid-template-columns:1fr; }
  .sec-head--row{ flex-direction:column; align-items:flex-start; }
}



/* ==========================================================================
   POPUP / açılır mesaj (admin: Modül alan14 + Ayarlar > Açılır Mesaj)
   ========================================================================== */
.m-popup{ position:fixed; inset:0; z-index:5000; display:grid; place-items:center; padding:20px; visibility:hidden; opacity:0; transition:opacity .35s var(--ease), visibility .35s; }
.m-popup.open{ visibility:visible; opacity:1; }
.m-popup__ov{ position:absolute; inset:0; background:rgba(12,12,9,.72); -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px); cursor:pointer; }
.m-popup__box{ position:relative; z-index:1; max-width:min(560px,92vw); background:#fff; border-radius:var(--r-lg); overflow:hidden; box-shadow:0 40px 80px rgba(12,12,9,.5); transform:translateY(16px) scale(.97); transition:transform .4s var(--ease); }
.m-popup.open .m-popup__box{ transform:none; }
.m-popup__media{ display:block; }
.m-popup__media img{ width:100%; height:auto; display:block; }
.m-popup__title{ padding:16px 22px; font-family:var(--f-head); font-weight:600; font-size:1.05rem; color:var(--c-ink); text-align:center; }
.m-popup__close{ position:absolute; top:12px; right:12px; z-index:2; width:40px; height:40px; border-radius:50%; border:none; background:rgba(255,255,255,.92); color:var(--c-ink); display:grid; place-items:center; cursor:pointer; font-size:1.1rem; box-shadow:0 6px 18px rgba(12,12,9,.2); transition:.25s var(--ease); }
.m-popup__close:hover{ background:var(--c-primary); color:var(--c-on-primary); transform:rotate(90deg); }

/* ==========================================================================
   REFERANSLAR — Türkiye + Dünya haritası, bölge sekmeleri, bayrak kartları
   ========================================================================== */
.rx-hero{ padding-bottom:clamp(28px,4vw,46px); }

/* ---- Referanslar sayfası başlığında arka plan videosu ----
   Bölüm açık zeminliydi; video koyu olduğu için metin ve sayı kartları
   aydınlık sürüme geçiyor. Anasayfadaki .hrf ile aynı kurgu. */
.rx-hero--video{ position:relative; isolation:isolate; overflow:hidden; background:var(--c-ink); }
.rx-hero__bg{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.rx-hero__video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  display:block; opacity:0; transition:opacity 1.1s var(--ease);
}
.rx-hero__video.is-on{ opacity:1; }
.rx-hero__veil{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(15,14,10,.78) 0%, rgba(15,14,10,.52) 45%, rgba(15,14,10,.82) 100%),
    radial-gradient(70% 60% at 50% 40%, rgba(255,185,9,.20) 0%, rgba(255,185,9,0) 70%);
}
.rx-hero--video > .mx{ position:relative; z-index:1; }
.rx-hero--video .sec-head h2{ color:#fff; }
.rx-hero--video .sec-head p{ color:rgba(255,255,255,.82); }
.rx-hero--video .eyebrow{ color:#F2D488; }
.rx-hero--video .eyebrow::before{ background:#F2D488; }
/* Sayı kartları cam yüzey: video üstünde okunur kalsın */
.rx-hero--video .rx-stats > div{
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.rx-hero--video .rx-stats b{ color:#fff; }
.rx-hero--video .rx-stats span{ color:rgba(255,255,255,.72); }
@media (prefers-reduced-motion: reduce){ .rx-hero__video{ transition:none; } }
.rx-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:12px; }
.rx-stats > div{ text-align:center; padding:26px 16px; background:#fff; border:1px solid var(--c-line); border-radius:var(--r-lg); box-shadow:var(--sh-sm); }
.rx-stats b{ display:block; font-family:var(--f-head); font-weight:700; font-size:clamp(1.8rem,3.2vw,2.6rem); color:var(--c-primary); line-height:1; }
.rx-stats span{ display:block; margin-top:8px; font-size:.86rem; color:var(--c-muted); }

.rx-dom{ max-width:1140px; margin-inline:auto; }
.rx-map{ position:relative; max-width:900px; margin:0 auto clamp(30px,4vw,46px); }
.rx-tr{ position:relative; }
.rx-tr .tr-il-map{ width:100%; height:auto; overflow:visible; filter:drop-shadow(0 18px 36px rgba(22,21,15,.12)); }
/* iller — bölgeye göre renk (fill g'den path'e miras geçer) */
.rx-tr .il{ stroke:#fff; stroke-width:.6; cursor:pointer; transition:opacity .35s var(--ease), filter .2s var(--ease); }
.rx-tr .il--marmara-ege{ fill:#5b8def; }
.rx-tr .il--karadeniz{ fill:#D3A233; }
.rx-tr .il--ic-anadolu-akdeniz{ fill:#e0a13c; }
.rx-tr .il--dogu-guneydogu{ fill:#dd6b7a; }
/* aktif olmayan bölgeler soluk, aktif bölge tam renk */
.rx-tr[data-active] .il{ opacity:.28; }
.rx-tr[data-active="marmara-ege"] .il--marmara-ege,
.rx-tr[data-active="karadeniz"] .il--karadeniz,
.rx-tr[data-active="ic-anadolu-akdeniz"] .il--ic-anadolu-akdeniz,
.rx-tr[data-active="dogu-guneydogu"] .il--dogu-guneydogu{ opacity:1; }
.rx-tr[data-active] .il:hover{ opacity:1; filter:brightness(1.08); }
/* lejant */
.rx-legend{ display:flex; flex-wrap:wrap; gap:8px 14px; margin-top:18px; justify-content:center; }
.rx-leg{ display:inline-flex; align-items:center; gap:8px; background:none; border:none; cursor:pointer; font-family:var(--f-head); font-weight:600; font-size:.82rem; color:var(--c-muted); padding:5px 8px; border-radius:var(--r-sm); transition:.2s var(--ease); }
.rx-leg span{ width:13px; height:13px; border-radius:4px; flex:none; }
.rx-leg--marmara-ege span{ background:#5b8def; }
.rx-leg--karadeniz span{ background:#D3A233; }
.rx-leg--ic-anadolu-akdeniz span{ background:#e0a13c; }
.rx-leg--dogu-guneydogu span{ background:#dd6b7a; }
.rx-leg:hover, .rx-leg.is-active{ color:var(--c-ink); }
.rx-leg.is-active{ background:var(--c-surface-2); }
/* bölge sekmelerine renk noktası */
.rx-tab::before{ content:""; width:9px; height:9px; border-radius:3px; flex:none; }
.rx-tab[data-region="marmara-ege"]::before{ background:#5b8def; }
.rx-tab[data-region="karadeniz"]::before{ background:#D3A233; }
.rx-tab[data-region="ic-anadolu-akdeniz"]::before{ background:#e0a13c; }
.rx-tab[data-region="dogu-guneydogu"]::before{ background:#dd6b7a; }

.rx-tabs{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; justify-content:center; }
.rx-tab{ display:inline-flex; align-items:center; gap:9px; padding:10px 16px; border-radius:var(--r-pill); border:1px solid var(--c-line); background:#fff; cursor:pointer; font-family:var(--f-head); font-weight:600; font-size:.86rem; color:var(--c-ink); transition:.25s var(--ease); }
.rx-tab span{ font-size:.72rem; background:var(--c-surface-2); color:var(--c-muted); padding:2px 8px; border-radius:var(--r-pill); }
.rx-tab:hover{ border-color:var(--c-primary); color:var(--c-primary); }
.rx-tab.is-active{ background:var(--c-primary); border-color:var(--c-primary); color:var(--c-on-primary); box-shadow:var(--sh-primary); }
.rx-tab.is-active span{ background:rgba(255,255,255,.2); color:#fff; }
.rx-toggle{ display:flex; width:max-content; background:var(--c-surface-2); border-radius:var(--r-pill); padding:4px; margin:0 auto 22px; }
.rx-toggle button{ border:none; background:none; cursor:pointer; padding:9px 18px; border-radius:var(--r-pill); font-family:var(--f-head); font-weight:600; font-size:.82rem; color:var(--c-muted); display:inline-flex; align-items:center; gap:8px; transition:.25s var(--ease); }
.rx-toggle button.is-active{ background:#fff; color:var(--c-ink); box-shadow:var(--sh-sm); }
.rx-list{ display:none; }
.rx-list.is-active{ display:block; animation:fadeUp .4s var(--ease); }
.rx-items{ display:none; }
.rx-items.is-active{ display:block; columns:3; column-gap:28px; }
.rx-item{ display:flex; gap:9px; align-items:flex-start; break-inside:avoid; padding:7px 0; font-size:.9rem; color:var(--c-text); line-height:1.4; }
.rx-item i{ color:var(--c-primary); font-size:.72rem; margin-top:5px; flex:none; }

.rx-world{ position:relative; margin:12px auto clamp(28px,4vw,42px); max-width:1000px; min-height:220px; }
.rx-world svg{ width:100%; height:auto; display:block; }
.rx-world svg path{ fill:#E7E2D4; stroke:#fff; stroke-width:.3; transition:fill .3s var(--ease); }
.rx-world svg path.on{ fill:var(--c-primary); }
.rx-world svg path.on:hover{ fill:var(--c-primary-l); }
/* Türkiye — üretim merkezi. İhracat ülkelerinden ayrışsın diye bayrak kırmızısı. */
.rx-world svg path.is-home,
.rx-world svg path.is-home.on{ fill:#e30a17; }
.rx-world svg path.is-home:hover,
.rx-world svg path.is-home.on:hover{ fill:#ff2233; }
.rx-world__load{ position:absolute; inset:0; display:grid; place-items:center; }
.rx-world.is-ready .rx-world__load, .rx-world.is-error .rx-world__load{ display:none; }
.rx-world__load span{ width:34px; height:34px; border:3px solid var(--c-line-2); border-top-color:var(--c-primary); border-radius:50%; animation:rxSpin .8s linear infinite; }
@keyframes rxSpin{ to{ transform:rotate(360deg); } }

.rx-flags{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.rx-flag{ display:inline-flex; align-items:center; gap:9px; padding:9px 15px; border-radius:var(--r-pill); background:#fff; border:1px solid var(--c-line); font-family:var(--f-head); font-weight:600; font-size:.85rem; color:var(--c-ink); transition:.25s var(--ease); }
.rx-flag:hover{ border-color:var(--c-primary); box-shadow:var(--sh-sm); transform:translateY(-2px); }
.rx-flag .fi{ width:22px; height:16px; border-radius:3px; box-shadow:0 0 0 1px rgba(20,20,15,.1); }

@media (max-width:900px){
  .rx-map{ max-width:620px; }
  .rx-items.is-active{ columns:2; }
  .rx-stats{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px){
  .rx-items.is-active{ columns:1; }
}

/* ==========================================================================
   TEKLİF İSTE — özel teklif formu
   ========================================================================== */
.qform-grid{ display:grid; grid-template-columns:.82fr 1.18fr; gap:clamp(22px,4vw,46px); align-items:start; max-width:1080px; margin-inline:auto; }
.qform-aside{ position:relative; overflow:hidden; background:linear-gradient(160deg,#111009 0%,#1D1B12 100%); color:#fff; border-radius:var(--r-lg); padding:clamp(26px,3vw,36px) clamp(24px,3vw,32px); isolation:isolate; }
.qform-aside::before{ content:""; position:absolute; inset:0; z-index:0; background:radial-gradient(90% 80% at 100% 0%, rgba(228,185,74,.24), transparent 55%); }
.qform-aside > *{ position:relative; z-index:1; }
.qform-aside h3{ color:#fff; font-size:1.3rem; margin:0 0 20px; }
.qform-aside .pd-highlights{ margin:0; }
.qform-aside .pd-highlights li{ color:#DCD7C6; font-size:.95rem; }
.qform-aside .pd-highlights li i{ color:#FFD873; }
.qform-contact{ margin-top:24px; padding-top:22px; border-top:1px solid rgba(255,255,255,.14); display:grid; gap:13px; }
.qform-contact a{ display:flex; align-items:center; gap:11px; color:#fff; font-weight:500; font-size:.96rem; }
.qform-contact a:hover{ color:#FFD873; }
.qform-contact a i{ color:#FFD873; width:18px; text-align:center; }
.qform-success{ max-width:1080px; margin:0 auto 24px; background:#e7f6ec; border:1px solid #b6e0c4; color:#1c7a3f; padding:15px 22px; border-radius:var(--r); display:flex; align-items:center; gap:12px; font-weight:600; }
.qform-error{ max-width:1080px; margin:0 auto 24px; background:#fdecec; border:1px solid #f3c4c4; color:#b3261e; padding:15px 22px; border-radius:var(--r); display:flex; align-items:center; gap:12px; font-weight:600; }
@media (max-width:820px){
  .qform-grid{ grid-template-columns:1fr; }
  .qform-aside{ order:2; }
}

/* ==========================================================================
   KALİTE POLİTİKAMIZ
   ========================================================================== */
.qp-head{ display:grid; grid-template-columns:1fr auto; gap:30px; align-items:center; margin-bottom:clamp(30px,4vw,48px); }
.qp-head h1{ font-size:clamp(1.8rem,3.4vw,2.7rem); margin:6px 0 16px; }
.qp-head > div:first-child p{ color:var(--c-muted); font-size:1.05rem; line-height:1.75; max-width:680px; }
.qp-badges{ display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.qp-badges span{ display:inline-flex; align-items:center; gap:9px; padding:9px 16px; border-radius:var(--r-pill); background:var(--c-primary-soft); color:var(--c-primary-d); font-family:var(--f-head); font-weight:600; font-size:.85rem; }
.qp-mark{ width:130px; height:130px; border-radius:32px; background:linear-gradient(155deg,var(--c-primary),var(--c-primary-d)); display:grid; place-items:center; color:var(--c-on-primary); font-size:3.4rem; box-shadow:var(--sh-primary); flex:none; }
.qp-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.qp-card{ position:relative; background:#fff; border:1px solid var(--c-line); border-radius:var(--r-lg); padding:26px 24px 24px; overflow:hidden; transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); }
.qp-card:hover{ transform:translateY(-5px); box-shadow:var(--sh); border-color:transparent; }
.qp-num{ position:absolute; top:14px; right:18px; font-family:var(--f-head); font-weight:800; font-size:2.2rem; color:var(--c-primary); opacity:.1; line-height:1; }
.qp-ic{ width:52px; height:52px; border-radius:15px; background:var(--c-primary-soft); color:var(--c-primary-d); display:grid; place-items:center; font-size:1.35rem; margin-bottom:16px; }
.qp-card p{ color:var(--c-text); font-size:.98rem; line-height:1.6; margin:0; }
.qp-cta{ display:flex; align-items:center; justify-content:space-between; gap:26px; flex-wrap:wrap; background:linear-gradient(150deg,#111009,#1D1B12); border-radius:var(--r-xl); padding:clamp(28px,4vw,44px); color:#fff; position:relative; overflow:hidden; isolation:isolate; }
.qp-cta::before{ content:""; position:absolute; inset:0; z-index:0; background:radial-gradient(90% 100% at 100% 0%, rgba(228,185,74,.24), transparent 55%); }
.qp-cta > *{ position:relative; z-index:1; }
.qp-cta h3{ color:#fff; font-size:clamp(1.3rem,2.4vw,1.9rem); margin:0 0 8px; }
.qp-cta p{ color:#C7C1AC; margin:0; max-width:520px; }
.qp-cta__act{ display:flex; gap:12px; flex-wrap:wrap; }
@media (max-width:900px){ .qp-grid{ grid-template-columns:repeat(2,1fr); } .qp-head{ grid-template-columns:1fr; } .qp-mark{ display:none; } }
@media (max-width:560px){ .qp-grid{ grid-template-columns:1fr; } }
/* çevre politikası varyantı (yeşil) */
.qp-card--env .qp-ic{ background:#e5f6ea; color:#1f8a4c; }
.qp-card--env .qp-num{ color:#2fa860; }
/* sertifikalar */
.cert-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:16px; margin-bottom:26px; }
.cert-card{ display:grid; place-items:center; background:#fff; border:1px solid var(--c-line); border-radius:var(--r); overflow:hidden; aspect-ratio:1/1; padding:14px; transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease); }
.cert-card:hover{ transform:translateY(-4px); box-shadow:var(--sh-sm); border-color:var(--c-primary); }
.cert-card img{ max-width:100%; max-height:100%; object-fit:contain; }
.cert-badges{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.cert-badges span{ display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border-radius:var(--r-pill); background:var(--c-surface-2); color:var(--c-ink-soft); font-family:var(--f-head); font-weight:600; font-size:.85rem; }
.cert-badges span i{ color:var(--c-primary); }
@media (max-width:1100px){ .cert-grid{ grid-template-columns:repeat(4,1fr); } }
@media (max-width:820px){ .cert-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:520px){ .cert-grid{ grid-template-columns:repeat(2,1fr); } }

/* ==========================================================================
   ONLINE CATALOG — profesyonel e-katalog tanıtımı
   ========================================================================== */
.catx{ position:relative; overflow:hidden; background:linear-gradient(150deg,#111009 0%,#1D1B12 100%); border-radius:var(--r-xl); color:#fff; isolation:isolate; }
.catx::before{ content:""; position:absolute; inset:0; z-index:0; background:radial-gradient(90% 120% at 100% 0%, rgba(228,185,74,.26), transparent 55%); }
.catx__grid{ position:relative; z-index:1; display:grid; grid-template-columns:1.12fr .88fr; align-items:center; gap:clamp(24px,4vw,56px); padding:clamp(34px,5vw,60px); }
.catx__body{ max-width:520px; }
.catx__body .eyebrow{ color:#FFD873; }
.catx__body .eyebrow::before{ background:#FFD873; }
.catx__body h2{ color:#fff; font-size:clamp(1.6rem,3vw,2.35rem); margin:0 0 14px; }
.catx__body p{ color:#C7C1AC; font-size:1.02rem; line-height:1.7; margin:0 0 26px; }
.catx__cta{ display:flex; flex-wrap:wrap; gap:14px; }
.catx__feats{ display:flex; gap:26px; flex-wrap:wrap; margin-top:26px; padding-top:22px; border-top:1px solid rgba(255,255,255,.12); }
.catx__feat{ display:flex; align-items:center; gap:10px; font-size:.9rem; color:#D9D3C0; }
.catx__feat i{ color:#FFD873; }
.catx__cover{ display:grid; place-items:center; perspective:1200px; }
.catx__book{ position:relative; width:min(270px,74%); aspect-ratio:3/4; border-radius:5px 12px 12px 5px; transform:rotateY(-22deg) rotateX(5deg); transform-style:preserve-3d;
  background:linear-gradient(135deg,#D89B00,#FFD152); box-shadow:0 40px 70px rgba(12,12,9,.5), inset 0 0 0 1px rgba(255,255,255,.12);
  transition:transform .55s var(--ease); }
.catx__cover:hover .catx__book{ transform:rotateY(-13deg) rotateX(3deg) translateY(-6px); }
.catx__book::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:13px; background:rgba(0,0,0,.22); border-radius:5px 0 0 5px; }
.catx__book::after{ content:""; position:absolute; inset:0; border-radius:inherit; background:radial-gradient(80% 60% at 28% 18%, rgba(255,255,255,.28), transparent 60%); }
.catx__book-in{ position:absolute; inset:0; z-index:2; padding:30px 24px 26px 30px; display:flex; flex-direction:column; justify-content:space-between; }
/* Kapak altın; beyaz logo ve yazı altının üstünde 1,7:1 okunuyordu. Marka
   kuralı gereği altın yüzeyde metin kömür siyahı. */
.catx__book-in img{ width:100%; max-width:170px; filter:brightness(0); opacity:.92; }
.catx__book-in b{ font-family:var(--f-head); font-weight:700; font-size:1.15rem; color:var(--c-on-primary); display:block; }
.catx__book-in span{ font-size:.7rem; letter-spacing:.24em; text-transform:uppercase; color:rgba(20,20,15,.72); }
@media (max-width:820px){ .catx__grid{ grid-template-columns:1fr; text-align:center; } .catx__body{ margin-inline:auto; } .catx__body .eyebrow,.catx__cta,.catx__feats{ justify-content:center; } .catx__cover{ order:-1; margin-bottom:8px; } }

/* ==========================================================================
   MODERN FULL-SCREEN MENU — sağdan açılır, pastel zemin (bizim slider rengi)
   ========================================================================== */
.mnav{ position:fixed; inset:0; z-index:3000; visibility:hidden; }
.mnav__inner{ position:absolute; inset:0; overflow-x:hidden; overflow-y:auto; transform:translateX(100%);
  transition:transform .55s var(--ease), visibility .55s;
  background:linear-gradient(162deg,#F5F1E7 0%,#FBF3E6 46%,#FAF4E8 100%);
  display:flex; flex-direction:column; }
.mnav.open{ visibility:visible; }
.mnav.open .mnav__inner{ transform:translateX(0); }
.mnav__blob{ position:absolute; border-radius:50%; filter:blur(80px); pointer-events:none; z-index:0; mix-blend-mode:multiply; opacity:.85; }
.mnav__blob--1{ width:min(60vw,700px); aspect-ratio:1; right:-8%; top:-16%; background:radial-gradient(circle,rgba(240,205,140,.8),rgba(240,205,140,0) 62%); }
.mnav__blob--2{ width:min(56vw,640px); aspect-ratio:1; left:-10%; bottom:-20%; background:radial-gradient(circle,rgba(225,190,120,.82),rgba(225,190,120,0) 62%); }

.mnav__head{ position:relative; z-index:2; padding:16px 0; }
.mnav__head .mx{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.mnav__logo img{ height:44px; width:auto; }
.mnav__close{ display:inline-flex; align-items:center; gap:10px; height:46px; padding:0 20px; border-radius:var(--r-pill); background:var(--c-ink); color:#fff; font-family:var(--f-head); font-weight:600; font-size:.92rem; cursor:pointer; border:none; transition:background .25s var(--ease); }
.mnav__close:hover{ background:var(--c-primary); }
.mnav__close i{ font-size:1.15rem; }

.mnav__body{ position:relative; z-index:2; flex:1; display:flex; align-items:center; padding:clamp(20px,4vh,50px) 0 clamp(30px,6vh,60px); }
.mnav__grid{ display:grid; grid-template-columns:1.4fr .9fr; gap:clamp(30px,5vw,80px); align-items:center; width:100%; }
.mnav__links{ display:flex; flex-direction:column; gap:clamp(4px,1vh,14px); }
.mnav__links a{ font-family:var(--f-head); font-weight:300; font-size:clamp(1.9rem,5vw,3.7rem); line-height:1.1; letter-spacing:-.02em; color:var(--c-ink); width:max-content; max-width:100%; transition:color .25s var(--ease), transform .25s var(--ease); opacity:0; transform:translateX(28px); }
.mnav.open .mnav__links a{ animation:mnavLink .55s var(--ease) forwards; animation-delay:calc(.25s + var(--i) * .06s); }
@keyframes mnavLink{ to{ opacity:1; transform:none; } }
.mnav__links a:hover{ color:var(--c-primary); transform:translateX(10px); }

/* Tam-ekran menüde alt öğeler: ana başlığın altında tek satır, küçük punto.
   --i ana gruptan miras alınır, böylece grup ve altları birlikte belirir. */
.mnav__grp{ display:flex; flex-direction:column; gap:2px; }
.mnav__sub{ display:flex; flex-wrap:wrap; gap:5px 15px; margin:5px 0 13px 3px; }
.mnav__sub a{
  font-size:clamp(.82rem,1.35vw,.98rem); font-weight:500; line-height:1.35;
  letter-spacing:0; color:var(--c-text); transform:translateX(20px);
}
.mnav__sub a i{ font-size:.86em; margin-inline-end:6px; color:var(--c-primary); opacity:.75; }
.mnav__sub a:hover{ color:var(--c-primary); transform:translateX(5px); }
.mnav__sub a:hover i{ opacity:1; }

.mnav__aside{ display:flex; flex-direction:column; gap:22px; opacity:0; transform:translateY(20px); }
.mnav.open .mnav__aside{ animation:mnavAside .6s var(--ease) .5s forwards; }
@keyframes mnavAside{ to{ opacity:1; transform:none; } }
.mnav__info h4{ font-size:.78rem; text-transform:uppercase; letter-spacing:.16em; color:var(--c-primary); margin-bottom:16px; }
.mnav__info p{ color:var(--c-ink-soft); font-size:.98rem; line-height:1.6; margin:0 0 14px; max-width:330px; display:flex; gap:10px; }
.mnav__info p i{ color:var(--c-primary); margin-top:4px; }
.mnav__info > a{ display:flex; align-items:center; gap:11px; color:var(--c-ink); font-size:.98rem; margin-bottom:11px; font-weight:500; }
.mnav__info > a i{ color:var(--c-primary); width:18px; text-align:center; }
.mnav__info > a:hover{ color:var(--c-primary); }
.mnav__maps{ font-family:var(--f-head); font-weight:600; }
.mnav__maps .fa-arrow-up-right-from-square{ font-size:.7em; }
.mnav__cta{ align-self:flex-start; }
.mnav__foot{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; padding-top:22px; border-top:1px solid rgba(20,20,15,.12); }
.mnav__social{ display:flex; gap:9px; }
.mnav__social a{ width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,.6); border:1px solid rgba(20,20,15,.1); display:grid; place-items:center; color:var(--c-ink); transition:.25s var(--ease); }
.mnav__social a:hover{ background:var(--c-primary); color:var(--c-on-primary); border-color:var(--c-primary); }
.mnav__lang{ display:flex; gap:8px; }
.mnav__lang a{ display:inline-flex; align-items:center; gap:7px; padding:7px 12px; border-radius:var(--r-pill); background:rgba(255,255,255,.6); border:1px solid rgba(20,20,15,.1); font-family:var(--f-head); font-weight:600; font-size:.8rem; color:var(--c-ink); }
.mnav__lang a.active,.mnav__lang a:hover{ border-color:var(--c-primary); color:var(--c-primary); }

@media (max-width:860px){
  .mnav__body{ align-items:flex-start; }
  .mnav__grid{ grid-template-columns:1fr; gap:26px; align-items:start; }
}
@media (prefers-reduced-motion: reduce){
  .mnav__inner{ transition:none; }
  .mnav__links a, .mnav__aside{ animation:none !important; opacity:1 !important; transform:none !important; }
}

/* topbar mobil sadeleştirme (Menü butonu her boyutta görünür) */
@media (max-width:768px){
  .m-topbar__info a[href^="mailto"]{ display:none; }
}
@media (max-width:560px){
  .m-topbar__right .m-quote{ display:none; }
  .m-topbar .mx{ gap:10px; }
  .m-menu-btn span{ display:none; }
  .m-menu-btn{ padding:0 12px; }
}

/* ============================================================
   RTL — Arapça (dir="rtl")
   ============================================================ */
[dir="rtl"]{ text-align:right; }
html[lang="ar"] body{ font-family:'Tajawal','Cairo','Inter',sans-serif; letter-spacing:0; }
html[lang="ar"] :is(h1,h2,h3,h4,h5,h6),
html[lang="ar"] .btn,
html[lang="ar"] .m-nav__item > a,
html[lang="ar"] .eyebrow,
html[lang="ar"] .hxs__title,
html[lang="ar"] .sec-head h2{ font-family:'Cairo','Tajawal',sans-serif; letter-spacing:0; }

/* Yön belirten okları çevir */
[dir="rtl"] .arr,
[dir="rtl"] .tlink i,
[dir="rtl"] .tlink svg,
[dir="rtl"] .hcx__panel-go i,
[dir="rtl"] .solz__plus i:last-child,
[dir="rtl"] .qp-cta__act .arr{ transform:scaleX(-1); }
[dir="rtl"] .btn:hover i.arr,
[dir="rtl"] .btn:hover svg.arr{ transform:scaleX(-1) translateX(4px); }
[dir="rtl"] .tlink:hover i,
[dir="rtl"] .tlink:hover svg{ transform:scaleX(-1) translateX(4px); }
/* Breadcrumb ayıraçları */
[dir="rtl"] .pd-crumb i.fa-chevron-right{ transform:scaleX(-1); }

/* Latince/numerik içerik LTR kalsın */
[dir="rtl"] .hxs__ring,
[dir="rtl"] .rx-stats b,
[dir="rtl"] .solz__num,
[dir="rtl"] .qp-num,
[dir="rtl"] [href^="tel:"],
[dir="rtl"] [href^="mailto:"]{ direction:ltr; unicode-bidi:embed; }

/* Merkezlenmiş başlıklar ortada kalsın */
[dir="rtl"] .sec-head.center{ text-align:center; }

/* Modern sağdan açılan menü — RTL'de soldan açılsın */
[dir="rtl"] .mnav{ }
[dir="rtl"] .mnav__links a{ text-align:right; }

/* Form alanları */
[dir="rtl"] .input,
[dir="rtl"] .field input,
[dir="rtl"] .field select,
[dir="rtl"] .field textarea{ text-align:right; }

/* Liste ikon boşlukları (flex gap zaten yönsüz) */
[dir="rtl"] .rx-item i,
[dir="rtl"] .qp-badges i{ margin-left:0; }

/* Çözüm alanları vitrini — yön çevirileri */
[dir="rtl"] .solz__scrim{
  background:
    linear-gradient(266deg, rgba(14,14,10,.90) 0%, rgba(14,14,10,.72) 28%, rgba(14,14,10,.28) 58%, rgba(14,14,10,.10) 100%),
    linear-gradient(0deg, rgba(14,14,10,.62) 0%, rgba(14,14,10,0) 42%);
}
[dir="rtl"] .solz__card::before{ transform-origin:right; }
[dir="rtl"] .solz__thumb{ object-position:bottom left; }

/* ==========================================================================
   KLİNİK ALAN VİTRİNİ (.mroom)
   Arkada tek kaçış noktalı mimari tel-kafes oda çizimi, önde coverflow
   ürün karuseli. Ürün görselleri şeffaf PNG render — çizimin üstünde
   "odanın içinde duruyor" gibi okunsun diye çerçevesiz bırakıldı.
   ========================================================================== */
.mroom{
  --mroom-ease: cubic-bezier(.32,.72,.28,1);
  --mroom-hdr: 88px;     /* yapışkan başlığın kapattığı şerit */
  /* Sahnenin TABAN yüksekliği. Gerçek yükseklik flex ile artan alandan gelir:
     ekran ne kadar yüksekse ürün render'ı o kadar büyür. */
  --mroom-h:  clamp(240px, min(43vw, 46vh), 620px);
  --mroom-w:  clamp(300px, 52vw, 780px);
  --mroom-side-x: 60%;   /* yan kartların merkeze göre kayması */
  --mroom-side-s: .44;   /* yan kartların ölçeği */

  position:relative; isolation:isolate; overflow:hidden;
  /* Bölüm tek ekrana sığsın: buraya kaydırıldığında ürün adı, açıklaması ve
     noktalar da görünür kalmalı — eskiden başlık ekranın ~70px altında kalıyordu. */
  min-height: calc(100vh  - var(--mroom-hdr));
  min-height: calc(100svh - var(--mroom-hdr));
  display:flex; flex-direction:column;
  padding: clamp(28px,4.5vh,80px) 0 clamp(24px,4vh,68px);
  /* Hem #klinik-alanlar çapası hem de aşağıdaki yakalama için: yapışkan
     başlığın altına hizalar, bölümün üstü başlığın arkasında kalmaz. */
  scroll-margin-top:var(--mroom-hdr);
  /* Tekerlek bu bölümün yakınında durduğunda tam kadraja oturur.
     'proximity' bilinçli: 'mandatory' sayfanın geri kalanında kaydırmayı
     ele geçirip kullanıcıyı zorlar. */
  scroll-snap-align:start;
  scroll-snap-stop:normal;
  background:
    radial-gradient(120% 92% at 80% 100%, rgba(255,185,9,.13) 0%, rgba(255,185,9,0) 60%),
    radial-gradient(85% 65% at 8% 4%,     rgba(20,20,15,.045) 0%, rgba(20,20,15,0) 62%),
    linear-gradient(180deg, #ffffff 0%, #FCFCF9 52%, #F4F2EA 100%);
}

/* ---------- Arka plan çizimi ---------- */
.mroom__art{
  position:absolute; inset:-9% -7%; z-index:0;
  color:var(--c-ink); pointer-events:none;
  transition:transform 1.1s var(--mroom-ease);
  will-change:transform;
}
.mroom__art svg{ width:100%; height:100%; display:block; }
.mroom .ln--struct{ opacity:.155; }
.mroom .ln--grid{   opacity:.085; }
.mroom .ln--detail{ opacity:.17;  }
.mroom .ln--hatch{  opacity:.07;  }

/* Çizilme animasyonu yalnızca JS uzunlukları ölçtükten sonra devreye girer;
   JS kapalıyken çizim tam görünür kalsın diye .can-draw'a bağlandı. */
.mroom.can-draw .mroom__art [data-draw]{
  stroke-dasharray:var(--l); stroke-dashoffset:var(--l);
}
.mroom.can-draw.is-in .mroom__art [data-draw]{
  stroke-dashoffset:0;
  transition:stroke-dashoffset 1.15s var(--ease);
  transition-delay:var(--dly,0ms);
}

/* ---------- Yerleşim ---------- */
.mroom__inner{
  position:relative; z-index:1;
  display:flex; flex-direction:column; flex:1 1 auto; min-height:0;
}
/* Geniş bırakıldı: 860px'te üç satıra kırılıp sahneden ~30px çalıyordu */
.mroom__head{ position:relative; z-index:2; margin-bottom:6px; }
.mroom__lead{
  flex:none;
  width:100%; max-width:min(1040px, 90vw); margin:0 auto clamp(16px,2.6vh,40px);
  padding-inline:var(--gut);
  text-align:center; font-family:var(--f-head);
  font-size:clamp(1rem, min(1.45vw, 2.2vh), 1.5rem); font-weight:600; line-height:1.4;
  letter-spacing:-.015em; color:var(--c-ink); text-wrap:balance;
}

/* ---------- Sahne ---------- */
/* Artan dikey alanın tamamını sahne yutar; başlık bloğu hep ekranda kalır. */
.mroom__stage{
  position:relative; flex:1 1 auto; min-height:var(--mroom-h);
  touch-action:pan-y; user-select:none; -webkit-user-select:none;
}
.mroom__track{ position:absolute; inset:0; }
.mroom__item{
  position:absolute; left:50%; top:0;
  width:var(--mroom-w); height:100%;
  margin-left:calc(var(--mroom-w) / -2);
  display:block;
  transform-origin:50% 50%; opacity:0;
  transition:transform .8s var(--mroom-ease), opacity .55s var(--ease), filter .55s var(--ease);
  will-change:transform,opacity;
}
/* object-fit ile kutuyu doldur: yüzdeli max-height, içerikle boyutlanan bir
   kapsayıcıya karşı çözülemediği için görsel eskiden kutuyu taşırıyordu. */
.mroom__item img{
  width:100%; height:100%; object-fit:contain; object-position:center;
  -webkit-user-drag:none; user-drag:none;
}
/* Render'lar kendi temas gölgesini taşıyor; aktif kartta hafif bir kaldırma yeter */
.mroom__item.is-active{ filter:drop-shadow(0 26px 20px rgba(20,20,15,.20)); }
.mroom__item:not(.is-active){ cursor:pointer; }
.mroom__item.is-side:hover{ opacity:.85 !important; }
.mroom__item:focus-visible{ outline:2px solid var(--c-primary); outline-offset:6px; border-radius:var(--r); }

/* ---------- Oklar ---------- */
.mroom__nav{
  /* Kartların z-index'i 10–30 arası; oklar her koşulda üstte ve tıklanabilir kalmalı */
  position:absolute; top:50%; z-index:40;
  width:clamp(44px,4.4vw,58px); aspect-ratio:1; margin-top:-.5em;
  display:grid; place-items:center; border-radius:var(--r-pill);
  background:rgba(255,255,255,.72); border:1px solid var(--c-line);
  color:var(--c-ink); font-size:.95rem; box-shadow:var(--sh-xs);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  transform:translateY(-50%);
  transition:background .25s var(--ease), border-color .25s var(--ease),
             color .25s var(--ease), box-shadow .25s var(--ease);
}
.mroom__nav:hover{
  background:var(--c-primary); border-color:var(--c-primary);
  color:#fff; box-shadow:var(--sh-primary);
}
.mroom__nav--prev{ left:clamp(10px, 3vw, 56px); }
.mroom__nav--next{ right:clamp(10px, 3vw, 56px); }
[dir="rtl"] .mroom__nav i{ transform:scaleX(-1); }

/* ---------- Başlık / açıklama (grid ile üst üste, en uzunu yüksekliği belirler) ---------- */
.mroom__caps{
  flex:none;
  display:grid; text-align:center;
  margin-top:clamp(8px,1.6vh,22px);
  padding-inline:var(--gut);
}
.mroom__cap{
  grid-area:1 / 1; justify-self:center; width:100%; max-width:640px;
  opacity:0; transform:translateY(12px); pointer-events:none;
  transition:opacity .45s var(--ease), transform .55s var(--mroom-ease);
}
.mroom__cap.is-active{ opacity:1; transform:none; pointer-events:auto; }
.mroom__t{
  font-size:clamp(1.5rem, min(3.4vw, 4.6vh), 2.75rem); font-weight:600;
  line-height:1.14;
  letter-spacing:-.025em; color:var(--c-ink); margin:0 0 .3em;
}
.mroom__d{
  font-size:clamp(.92rem, 1.1vw, 1.06rem); color:var(--c-muted);
  line-height:1.5;
  margin:0 0 .95em; text-wrap:balance;
}
.mroom__d b{ color:var(--c-ink); font-weight:600; }
.mroom__more{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--f-head); font-weight:600; font-size:.95rem;
  color:var(--c-ink);
}
.mroom__more i{ font-size:.72rem; color:var(--c-primary); transition:transform .3s var(--ease); }
.mroom__more:hover{ color:var(--c-primary); }
.mroom__more:hover i{ transform:translateX(4px); }
[dir="rtl"] .mroom__more i{ transform:scaleX(-1); }
[dir="rtl"] .mroom__more:hover i{ transform:scaleX(-1) translateX(4px); }

/* ---------- Noktalar ---------- */
.mroom__dots{
  flex:none;
  display:flex; justify-content:center; gap:8px;
  margin-top:clamp(12px,2.2vh,30px);
}
.mroom__dot{ padding:8px 4px; line-height:0; }
.mroom__dot span{
  display:block; width:22px; height:3px; border-radius:2px;
  background:var(--c-line-2); transition:background .3s var(--ease), width .3s var(--ease);
}
.mroom__dot:hover span{ background:var(--c-muted-2); }
.mroom__dot.is-active span{ width:38px; background:var(--c-primary); }

/* ---------- Duyarlılık ---------- */
@media (max-width: 992px){
  .mroom{ --mroom-side-x:72%; --mroom-side-s:.40; }
}
@media (max-width: 640px){
  .mroom{
    --mroom-hdr: 68px;
    --mroom-h: clamp(210px, min(62vw, 38vh), 380px);
    --mroom-w: clamp(250px, 82vw, 420px);
    --mroom-side-x:82%; --mroom-side-s:.36;
  }
  /* Oklar sahnenin altına iner; başlık bloğu onlara yer açsın */
  /* Oklar sahnenin İÇİNDE kalıp ürünün gövdesine biniyordu; tamamen
     sahnenin altına indirildi, başlık bloğu da onlara yer açıyor. */
  .mroom__nav{ top:auto; bottom:-54px; margin-top:0; transform:none; }
  .mroom__nav--prev{ left:calc(50% - 62px); }
  .mroom__nav--next{ right:calc(50% - 62px); }
  .mroom__caps{ margin-top:clamp(80px,12vh,104px); }
}

@media (prefers-reduced-motion: reduce){
  .mroom__art, .mroom__item, .mroom__cap{ transition-duration:.01ms !important; }
  .mroom.can-draw .mroom__art [data-draw]{ stroke-dasharray:none; stroke-dashoffset:0; }
}

/* ---------- Genel Özellikler (açıklamanın altındaki madde listesi) ---------- */
.pd-feat{ margin-top:clamp(30px,3.6vw,46px); max-width:900px; }
.pd-feat__t{
  display:flex; align-items:center; gap:10px; margin:0 0 18px;
  font-family:var(--f-head); font-weight:600; font-size:1.08rem; color:var(--c-ink);
}
.pd-feat__t i{ font-size:.92rem; color:var(--c-primary); }
.pd-feat__list{
  list-style:none; padding:0; margin:0;
  display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:2px 28px;
}
.pd-feat__list li{
  position:relative; padding:9px 0 9px 26px;
  font-size:.95rem; line-height:1.55; color:var(--c-text);
  border-bottom:1px solid var(--c-line);
}
.pd-feat__list li::before{
  content:"\f00c"; font-family:"Font Awesome 6 Free"; font-weight:900;
  position:absolute; inset-inline-start:0; top:11px;
  font-size:.72rem; color:var(--c-primary);
}
[dir="rtl"] .pd-feat__list li{ padding:9px 26px 9px 0; }
/* Sekme içinde tek başına dururken üst boşluk gerekmez */
.pd-feat--flush{ margin-top:0; max-width:none; }
.pd-feat__lead{ color:var(--c-muted); font-size:.98rem; margin:0 0 20px; max-width:640px; }
/* Opsiyonel maddeler: standart donanımdan ayrışsın diye onay yerine artı */
.pd-feat__list--opt li::before{ content:"\2b"; color:var(--c-primary); font-size:.78rem; }

/* ---- Kategori üzerine gelince liste değişirken yumuşak geçiş ---- */
[data-urun-icerik]{ transition:opacity .18s var(--ease); }
[data-urun-icerik].is-yukleniyor{ opacity:.35; pointer-events:none; }
@media (prefers-reduced-motion: reduce){ [data-urun-icerik]{ transition:none; } }

/* ---------- Opsiyonel özellik kartları (solda görsel, sağda metin) ----------
   Önceki kurgu başlık üstte / görsel altındaydı; kart yüksekliği içeriğe göre
   oynadığı ve görsel kutusu boş kaldığı için satır gibi duruyordu. Yatay
   kurguda görsel sabit ölçüde, metin dikeyde ortalı — ızgara hizalı kalıyor. */
.pd-opt{
  display:grid; gap:clamp(12px,1.2vw,16px); margin:0 0 clamp(26px,3vw,38px);
  grid-template-columns:repeat(auto-fill, minmax(352px, 1fr));
}
/* overflow görünür: üzerine gelince görsel kartın dışına taşarak büyüyor.
   Köşe yuvarlaması bu yüzden görsel alanının kendisinde. */
.pd-opt__card{
  position:relative; margin:0; display:flex; align-items:stretch; gap:0; overflow:visible;
  background:#fff; border:1px solid var(--c-line); border-radius:var(--r-sm);
  box-shadow:var(--sh-xs);
  transition:transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
}
.pd-opt__card:hover{
  transform:translateY(-2px); box-shadow:var(--sh-sm); border-color:var(--c-primary);
  z-index:5;                       /* büyüyen görsel komşu kartların üstünde kalsın */
}

/* Görsel alanı sabit: farklı en-boy oranları kartı bozmasın */
.pd-opt__shot{
  flex:0 0 152px; align-self:stretch; display:grid; place-items:center;
  padding:12px 14px; background:#F8F8F5; border-inline-end:1px solid var(--c-line);
  border-start-start-radius:calc(var(--r-sm) - 1px);
  border-end-start-radius:calc(var(--r-sm) - 1px);
}
.pd-opt__shot img{
  max-width:100%; max-height:112px; width:auto; height:auto;
  object-fit:contain; display:block; mix-blend-mode:multiply;
  border-radius:6px;
  transition:transform .34s cubic-bezier(.34,1.2,.4,1), box-shadow .34s var(--ease);
  will-change:transform;
}
/* Üzerine gelince büyüt: küçük parça görselleri okunur hâle geliyor.
   Karışım kipi kapanıyor — büyüyen görsel komşu kartın üstüne taştığında
   çarpma karışımı zemini emip lekeli görünmesine yol açıyordu. */
.pd-opt__card:hover .pd-opt__shot img{
  transform:scale(2);
  mix-blend-mode:normal;
  background:#fff;
  outline:1px solid var(--c-line);      /* taşan görsel zeminden ayrışsın */
  box-shadow:0 10px 26px rgba(24,22,16,.24);
}
/* Şerit görsel zaten tam genişlikte; büyütmek taşma yaratır, hafif kalsın */
.pd-opt__card--serit:hover .pd-opt__shot img{
  transform:scale(1.03); box-shadow:none; background:none; mix-blend-mode:multiply;
}

.pd-opt__tx{
  flex:1; min-width:0; display:flex; flex-direction:column; justify-content:center;
  gap:5px; padding:14px 16px;
}
.pd-opt__no{
  font-family:var(--f-head); font-size:.66rem; font-weight:700; letter-spacing:.14em;
  color:var(--c-primary); opacity:.75;
}
.pd-opt__name{
  font-family:var(--f-head); font-size:.94rem; font-weight:600; line-height:1.35;
  color:var(--c-ink); overflow-wrap:anywhere;
}
.pd-opt__note{
  display:inline-flex; align-items:center; gap:6px; align-self:flex-start;
  margin:3px 0 0; padding:4px 10px; border-radius:99px;
  font-size:.71rem; line-height:1.35; font-weight:600;
  color:#8a5a12; background:#fff5e2; border:1px solid #f4dcae;
}
.pd-opt__note::before{ content:"\f06a"; font-family:"Font Awesome 6 Free"; font-weight:900; font-size:.68rem; }

/* Görseli olmayan madde: boş kutu bırakma, metin tüm kartı kullansın */
.pd-opt__card--yalin .pd-opt__tx{ padding-inline-start:18px; }
.pd-opt__card--yalin{ border-inline-start:3px solid var(--c-primary-soft); }

/* Şerit görsel (en/boy ≥ 3, ör. 657x127 renk kartelası): dar kutuda
   yüksekliği 19 piksele düşüp okunmaz oluyordu. Satırın tamamını kaplar,
   görsel üstte kendi genişliğinde durur. */
.pd-opt__card--serit{ grid-column:1 / -1; flex-direction:column; }
.pd-opt__card--serit .pd-opt__shot{
  flex:none; width:100%; padding:16px 18px;
  border-inline-end:none; border-bottom:1px solid var(--c-line);
}
.pd-opt__card--serit .pd-opt__shot img{ max-height:none; max-width:min(100%, 660px); }
.pd-opt__card--serit .pd-opt__tx{ padding:12px 18px 14px; }
@media (max-width:600px){
  .pd-opt__card--serit .pd-opt__shot{ padding:12px; }
}

@media (prefers-reduced-motion: reduce){
  .pd-opt__card, .pd-opt__shot img{ transition:none; }
  .pd-opt__card:hover{ transform:none; }
  .pd-opt__card:hover .pd-opt__shot img{ transform:none; box-shadow:none; }
}
/* Dokunmatikte kalıcı hover yok; büyütme yalnızca gerçek imleçte */
@media (hover: none){
  .pd-opt__card:hover .pd-opt__shot img{ transform:none; box-shadow:none; mix-blend-mode:multiply; background:none; }
}
@media (max-width:600px){
  .pd-opt{ grid-template-columns:1fr; }
  .pd-opt__shot{ flex-basis:96px; padding:10px; }
  .pd-opt__shot img{ max-height:74px; }
  .pd-opt__tx{ padding:12px 14px; }
  .pd-opt__name{ font-size:.88rem; }
}

/* ---------- Ürün ayar pozisyonları (şema kareleri) ---------- */
.pd-pos{ margin-top:clamp(28px,3.5vw,44px); }
.pd-pos__t{
  font-size:1.05rem; font-weight:600; letter-spacing:.02em;
  color:var(--c-ink); margin:0 0 16px; padding-bottom:12px;
  border-bottom:1px solid var(--c-line);
}
.pd-pos__grid{
  display:grid; gap:12px;
  grid-template-columns:repeat(auto-fill, minmax(180px, 1fr));
}
.pd-pos__item{
  margin:0; border-radius:var(--r-sm); overflow:hidden;
  background:#1c1c1c; border:1px solid rgba(255,255,255,.06);
  box-shadow:var(--sh-xs);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.pd-pos__item:hover{ transform:translateY(-3px); box-shadow:var(--sh-sm); }
.pd-pos__item img{ width:100%; height:auto; display:block; }
@media (prefers-reduced-motion: reduce){ .pd-pos__item{ transition:none; } }

/* ==========================================================================
   ÜRÜNE YAKINDAN BAKIŞ (.pdx) — koyu sahne vitrini
   Solda parça görseli, sağda o parçanın kartı; ikisi birlikte, yönlü geçişle
   değişir ve kendiliğinden ilerler. Oklarla elle de gezilir.
   Zemin koyu: detay görselleri şeffaf PNG, beyaz gövdeler burada çok daha
   güçlü okunuyor. İçerik panelden gelir (urun_detay).
   ========================================================================== */
.pdx{ margin-top:clamp(50px,7vw,90px); }

.pdx__panel{
  position:relative; isolation:isolate; overflow:hidden;
  border-radius:clamp(20px,2.4vw,34px);
  padding:clamp(26px,3.4vw,52px);
  background:
    radial-gradient(120% 150% at 88% -20%, rgba(228,185,74,.30) 0%, transparent 55%),
    radial-gradient(90% 120% at -10% 110%, rgba(255,185,9,.26) 0%, transparent 60%),
    linear-gradient(148deg, #16150E 0%, #14140F 46%, #0C0C08 100%);
  box-shadow:0 30px 70px rgba(20,20,15,.28);
  color:#fff;
}
/* İnce üst kenar ışığı — cam gövde hissi */
.pdx__panel::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  border-radius:inherit;
  border:1px solid rgba(255,255,255,.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
}
/* Sahnenin arkasındaki huzme: açık kutuyu koyu panele bağlar */
.pdx__glow{
  position:absolute; z-index:0; pointer-events:none;
  left:-6%; top:2%; width:70%; height:96%;
  background:radial-gradient(closest-side, rgba(240,207,126,.22) 0%, rgba(240,207,126,.08) 50%, transparent 76%);
  filter:blur(10px);
}

/* ---------- Üst şerit ---------- */
.pdx__top{
  position:relative; z-index:2;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  margin-bottom:clamp(18px,2.4vw,30px);
}
.pdx__eyebrow{
  display:inline-flex; align-items:center; gap:12px; margin:0;
  font-family:var(--f-head); font-weight:600;
  font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  color:#FFD873;
}
.pdx__eyebrow::before{
  content:""; width:30px; height:2px; border-radius:2px;
  background:linear-gradient(90deg, #FFD873, rgba(240,207,126,0));
}
.pdx__count{
  font-family:var(--f-head); font-weight:600; font-size:.8rem; letter-spacing:.1em;
  color:rgba(255,255,255,.42); font-variant-numeric:tabular-nums;
}
.pdx__count b{ color:#fff; font-weight:700; }
.pdx__count i{ font-style:normal; margin:0 5px; color:rgba(255,255,255,.28); }

/* ---------- Opsiyonel donanım maddeleri (koyu zeminde rozet listesi) ---------- */
.pdx__opts{
  position:relative; z-index:2; list-style:none; padding:0;
  margin:0 0 clamp(22px,3vw,38px);
  display:flex; flex-wrap:wrap; gap:10px;
}
.pdx__opts li{
  display:inline-flex; align-items:center; gap:9px;
  padding:9px 16px; border-radius:var(--r-pill);
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16);
  color:rgba(255,255,255,.92); font-size:.9rem; line-height:1.3;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.pdx__opts li i{ font-size:.66rem; color:var(--c-primary-l, #EEC96F); }
/* Kart vitrini yoksa liste bölümün tek içeriği — alt boşluk gerekmez */
.pdx__panel.is-single .pdx__opts:last-child{ margin-bottom:0; }

/* ---------- Yerleşim ---------- */
.pdx__grid{
  position:relative; z-index:2;
  display:grid; gap:clamp(22px,3.4vw,52px);
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  align-items:center;
}

/* ---------- Sol: parça sahnesi ----------
   ÖNEMLİ: Katalogdaki ürün PNG'lerinin içine yarı saydam AÇIK bir stüdyo
   zemini gömülü (piksellerin ~%20'si kısmi alfa). Doğrudan koyu panele
   konursa bu zemin dikdörtgen bir leke olarak sırıtıyor. Bu yüzden görsel,
   köşeleri yuvarlatılmış AÇIK bir cam sahnenin üstünde durur: gömülü zemin
   sahneye karışır, kenar da bilinçli bir biçime dönüşür. Panelin koyu olması
   kontrastı ve "üst düzey" havayı verir. Aynı çözüm, arka planı ne olursa
   olsun sonradan yüklenecek parça fotoğraflarında da güvenle çalışır. */
.pdx__media{ min-width:0; }
.pdx__frame{
  position:relative; aspect-ratio:4/3; overflow:hidden;
  border-radius:clamp(14px,1.6vw,22px);
  background:linear-gradient(158deg,#ffffff 0%,#F9F8F3 52%,#E9EEF2 100%);
  box-shadow:0 26px 54px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.9);
}
/* Sahnenin üst köşesine düşen yumuşak ışık */
.pdx__frame::after{
  content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
  background:radial-gradient(80% 60% at 20% 0%, rgba(255,255,255,.85) 0%, transparent 60%);
}
/* Ürünün zeminde durduğu hissini veren eliptik gölge */
.pdx__pedestal{
  position:absolute; z-index:1; left:18%; right:18%; bottom:9%; height:22px;
  border-radius:50%;
  background:radial-gradient(closest-side, rgba(20,20,15,.20) 0%, transparent 72%);
  filter:blur(4px);
}
/* Kareler üst üste; giren yönünden kayarak gelir, çıkan yerinde solar.
   ÖNEMLİ: max-width/max-height:100% KULLANILMIYOR. Ürün fotoğraflarımız kare
   (600x600) ve yüzde yükseklik çözülemediğinde görsel doğal boyutunda basılıp
   kutunun overflow:hidden'ına takılıyor. Bu yüzden kutuyu tam kaplayıp
   object-fit:contain ile içeri sığdırıyoruz — .pd-stage img ile aynı desen.
   Kenar boşluğunu padding veriyor; object-fit içerik kutusuna uygulandığı için
   görsel çerçevenin kenarına yapışmaz. */
.pdx__shot{
  position:absolute; inset:0; z-index:2;
  width:100%; height:100%; min-width:0; min-height:0;
  object-fit:contain; padding:clamp(14px,2.4vw,34px);
  opacity:0; transform:translateX(var(--pdx-in,26px)) scale(.97);
  transition:opacity .42s var(--ease), transform 0s .45s;
}
.pdx__shot.is-active{
  opacity:1; transform:none; z-index:2;
  transition:opacity .55s var(--ease), transform .75s var(--ease);
}
/* Geri giderken görsel ters yönden girsin */
.pdx__panel.is-prev .pdx__shot{ --pdx-in:-26px; }

/* ---------- Sağ: bilgi kartı ---------- */
.pdx__side{ position:relative; min-width:0; }
/* Filigran rakam — sahneye derinlik katar, metnin arkasında durur */
.pdx__ghost{
  position:absolute; z-index:0; inset-inline-start:-10px; top:-78px;
  font-family:var(--f-head); font-weight:700; line-height:1;
  font-size:clamp(84px,9vw,132px);
  color:rgba(255,255,255,.05);
  letter-spacing:-.04em; pointer-events:none; user-select:none;
}
/* Kartlar üst üste; en uzunu yüksekliği belirler, geçişte kutu zıplamaz. */
.pdx__cards{ position:relative; z-index:1; display:grid; }
.pdx__card{
  grid-area:1/1; min-width:0;
  opacity:0; visibility:hidden; transform:translateX(var(--pdx-in,22px));
  transition:opacity .4s var(--ease), transform 0s .45s, visibility 0s .45s;
}
.pdx__card.is-active{
  opacity:1; visibility:visible; transform:none;
  transition:opacity .5s var(--ease) .1s, transform .62s var(--ease) .1s, visibility 0s;
}
.pdx__panel.is-prev .pdx__card{ --pdx-in:-22px; }

.pdx__t{
  font-size:clamp(1.3rem,2.1vw,1.85rem); line-height:1.2;
  margin:0; color:#fff; letter-spacing:-.01em;
}
.pdx__d{
  margin:16px 0 0; font-size:1.02rem; line-height:1.72;
  color:rgba(255,255,255,.74);
}

/* ---------- Geçiş okları ---------- */
.pdx__nav{
  position:relative; z-index:1;
  display:flex; align-items:center; gap:12px;
  margin-top:clamp(24px,3.2vw,38px);
}
.pdx__arrow{
  flex:none; width:46px; height:46px; border-radius:var(--r-pill);
  display:grid; place-items:center; cursor:pointer;
  font-size:.82rem; color:#fff;
  background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.20);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  transition:background .3s var(--ease), border-color .3s var(--ease),
             transform .3s var(--ease), box-shadow .3s var(--ease);
}
.pdx__arrow:hover{
  background:var(--c-primary-l); border-color:transparent;
  transform:translateY(-2px); box-shadow:0 12px 26px rgba(228,185,74,.42);
}
.pdx__arrow:active{ transform:translateY(0); }
.pdx__arrow:focus-visible{ outline:2px solid #FFD873; outline-offset:3px; }
/* Sağdan-sola dillerde oklar yön değiştirir */
[dir="rtl"] .pdx__arrow i{ transform:scaleX(-1); }

/* Kalan süre çizgisi — dolunca sıradaki parçaya geçilir */
.pdx__line{
  position:relative; flex:1 1 auto; height:2px; min-width:40px;
  border-radius:2px; overflow:hidden;
  background:rgba(255,255,255,.13);
}
.pdx__line i{
  position:absolute; inset:0; transform:scaleX(0); transform-origin:left;
  background:linear-gradient(90deg, var(--c-primary-l), #FFD873);
}
.pdx__panel.is-live .pdx__line i{
  animation:pdxbar var(--pdx-sure,8s) linear forwards;
}
.pdx__panel.is-paused .pdx__line i{ animation-play-state:paused; }
@keyframes pdxbar{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }

/* ---------- Duyarlı ---------- */
@media (max-width: 900px){
  .pdx__grid{ grid-template-columns:1fr; gap:26px; }
  .pdx__frame{ aspect-ratio:16/10; }
  .pdx__ghost{ top:-34px; font-size:clamp(70px,16vw,110px); }
}
@media (max-width: 575px){
  .pdx__d{ font-size:.95rem; }
  .pdx__arrow{ width:42px; height:42px; }
  .pdx__ghost{ display:none; }
}
@media (prefers-reduced-motion: reduce){
  .pdx__shot, .pdx__card, .pdx__arrow{ transition:none; }
  /* Animasyon kapalıyken 'animationend' gelmez: bölüm kendiliğinden ilerlemez,
     yalnız oklarla gezilir. Yarım çizgi bozuk görünmesin diye gizlenir. */
  .pdx__line{ visibility:hidden; }
}

/* ---------- Dünya haritası: ülke adı ipucu ---------- */
.rx-world svg path{ cursor:default; }
.rx-world svg path:hover{ fill:#D2CCB9; }
.rx-world svg path.on:hover{ fill:var(--c-primary-l); }
.rx-tip{
  position:absolute; z-index:5; pointer-events:none;
  transform:translate(-50%,-100%);
  display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
  padding:7px 12px; border-radius:var(--r-pill);
  background:rgba(20,20,15,.94); color:#fff;
  font-family:var(--f-head); font-weight:600; font-size:.8rem; letter-spacing:.01em;
  box-shadow:var(--sh); opacity:0;
  transition:opacity .18s var(--ease);
}
.rx-tip.is-on{ opacity:1; }
.rx-tip.is-ours{ background:var(--c-primary); }
.rx-tip.is-home{ background:#e30a17; }
.rx-tip__f{ width:0; height:0; border-radius:2px; }
.rx-tip__f.fi{ width:18px; height:13px; box-shadow:0 0 0 1px rgba(255,255,255,.25); }
.rx-tip::after{
  content:""; position:absolute; left:50%; top:100%;
  transform:translateX(-50%);
  border:5px solid transparent; border-top-color:rgba(20,20,15,.94);
}
.rx-tip.is-ours::after{ border-top-color:var(--c-primary); }
.rx-tip.is-home::after{ border-top-color:#e30a17; }
@media (prefers-reduced-motion: reduce){ .rx-tip{ transition:none; } }

/* ==========================================================================
   HAKKIMIZDA — sessiz video hero (.abv) + sollu sağlı hikaye (.abs)
   + vizyon/misyon (.abm) + neden biz (.abn)
   ========================================================================== */

/* ---------- Video hero ---------- */
.abv{
  position:relative; isolation:isolate; overflow:hidden;
  min-height:clamp(460px,62vh,720px);
  display:flex; align-items:flex-end;
  background:var(--c-ink);
  padding-bottom:clamp(34px,5vw,70px);
}
/* Video kutuyu doldurur; oran uyuşmazlığında kenarlardan kırpılır. */
.abv__media{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%; object-fit:cover; object-position:center;
  /* Hafif koyulaştırma: üstündeki beyaz metin her karede okunaklı kalsın */
  filter:saturate(1.05) contrast(1.02);
}
/* Perde: video her karede farklı parlaklıkta olduğu için soldan da
   karartılır — başlık hangi kareye denk gelirse gelsin okunaklı kalsın. */
.abv__scrim{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(0deg, rgba(14,14,10,.94) 0%, rgba(14,14,10,.62) 34%, rgba(14,14,10,.22) 66%, rgba(14,14,10,.40) 100%),
    linear-gradient(96deg, rgba(14,14,10,.80) 0%, rgba(14,14,10,.50) 34%, rgba(14,14,10,.10) 66%, rgba(14,14,10,0) 88%),
    radial-gradient(90% 70% at 12% 100%, rgba(255,185,9,.34) 0%, transparent 62%);
}
.abv__inner{ position:relative; z-index:2; width:100%; color:#fff; }
.abv__t{
  color:#fff; margin:10px 0 0; max-width:16ch;
  font-size:clamp(2rem,4.6vw,3.6rem); line-height:1.06; letter-spacing:-.02em;
  text-shadow:0 2px 30px rgba(14,14,10,.5);
}
.abv__d{
  margin:18px 0 0; max-width:56ch;
  font-size:clamp(1rem,1.35vw,1.18rem); line-height:1.68;
  color:rgba(255,255,255,.86);
}

/* Künye şeridi */
.abv__stats{
  display:flex; flex-wrap:wrap; gap:clamp(18px,3.4vw,54px);
  margin-top:clamp(26px,3.6vw,44px);
  padding-top:clamp(20px,2.6vw,30px);
  border-top:1px solid rgba(255,255,255,.18);
}
.abv__stats b{
  display:block; font-family:var(--f-head); font-weight:700;
  font-size:clamp(1.5rem,2.6vw,2.1rem); line-height:1; color:#fff;
  letter-spacing:-.02em;
}
.abv__stats b i{
  font-style:normal; font-size:.5em; margin-inline-start:3px;
  color:var(--c-primary-l); vertical-align:super;
}
.abv__stats span{
  display:block; margin-top:7px;
  font-size:.82rem; letter-spacing:.04em; color:rgba(255,255,255,.66);
}

/* ---------- Sollu sağlı hikaye ---------- */
.abs__row{
  display:grid; align-items:center;
  gap:clamp(24px,4vw,72px);
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
}
.abs__row + .abs__row{ margin-top:clamp(48px,7vw,110px); }
/* Çift sıralarda görsel sağa geçer — okuma ritmi zikzak olsun */
.abs__row.is-flip .abs__media{ order:2; }

.abs__media{ position:relative; min-width:0; }
.abs__frame{
  position:relative; overflow:hidden;
  border-radius:var(--r-lg);
  aspect-ratio:4/3;
  box-shadow:var(--sh-lg);
  background:var(--c-surface);
}
.abs__frame img{ width:100%; height:100%; object-fit:cover; display:block; }
/* Tanıtım videosu çerçeveyi görsel gibi DOLDURUR.
   YouTube 16:9 verir, çerçeve 4:3 → yükseklik %100k, genişlik 16/9 ÷ 4/3 = %133,34k.
   k=1.2 ile %20 büyütülür: üstteki başlık şeridi ile sağ alttaki YouTube logosu
   çerçevenin dışında kalır, "gömülü film" gibi görünür.
   pointer-events:none → tıklama almaz, kullanıcı müdahale edemez. */
.abs__frame--video{ --abv-k:1.2; }
.abs__frame--video iframe{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  height:calc(100% * var(--abv-k));
  width:calc(133.34% * var(--abv-k));
  border:0; display:block;
  pointer-events:none;
}
/* Video yüklenince kapak görseli yumuşakça çekilir */
.abs__frame--video[data-yuklendi] img{ opacity:0; transition:opacity .6s var(--ease); }

/* Yerel mp4: çerçeveyi görsel gibi doldurur, tıklama almaz.
   Poster görseli altta durur; video oynamaya başlayınca üstünü örter. */
.abs__mp4{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  display:block; border:0; pointer-events:none;
  opacity:0; transition:opacity .8s var(--ease);
}
.abs__frame.is-oynuyor .abs__mp4{ opacity:1; }
/* Dev sıra numarası — içi boş, konturlu; çerçevenin alt köşesinden taşar.
   İçi beyaz doldurulursa beyaz zeminde kaybolup kazara duruyor gibi görünüyor,
   o yüzden dolgu yok: yalnız kontur. */
.abs__no{
  position:absolute; z-index:2; inset-block-end:-.26em; inset-inline-start:-.04em;
  font-family:var(--f-head); font-weight:700; line-height:.8;
  font-size:clamp(74px,9vw,132px);
  color:transparent;
  -webkit-text-stroke:2px var(--c-line-2);
  letter-spacing:-.02em;
  pointer-events:none; user-select:none;
}
.abs__body{ min-width:0; }
.abs__t{
  font-size:clamp(1.4rem,2.5vw,2.1rem); line-height:1.2;
  margin:10px 0 0; letter-spacing:-.015em;
}
.abs__body p{
  margin:16px 0 0; color:var(--c-muted);
  font-size:1.02rem; line-height:1.76;
}

/* ---------- Vizyon / Misyon ---------- */
.abm{ background:var(--c-surface); }
.abm__grid{
  display:grid; gap:clamp(16px,2.4vw,28px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));
}
.abm__card{
  background:var(--c-bg); border:1px solid var(--c-line);
  border-radius:var(--r-lg); padding:clamp(24px,3vw,40px);
  box-shadow:var(--sh-sm);
}
.abm__ic{
  width:52px; height:52px; border-radius:var(--r-pill);
  display:grid; place-items:center; font-size:1.15rem;
  background:var(--c-primary-soft); color:var(--c-primary);
}
.abm__card h2{ font-size:clamp(1.15rem,1.7vw,1.45rem); margin:18px 0 0; }
.abm__card p{ margin:12px 0 0; color:var(--c-muted); line-height:1.74; }

/* ---------- Neden biz ---------- */
.abn__grid{
  display:grid; gap:clamp(14px,2vw,24px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
}
.abn__item{
  display:flex; gap:16px; align-items:flex-start;
  padding:clamp(18px,2.2vw,26px);
  border:1px solid var(--c-line); border-radius:var(--r);
  background:var(--c-bg);
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease);
}
.abn__item:hover{
  border-color:var(--c-primary-l); box-shadow:var(--sh); transform:translateY(-3px);
}
.abn__ic{
  flex:none; width:42px; height:42px; border-radius:var(--r-sm);
  display:grid; place-items:center; font-size:1rem;
  background:var(--c-primary-soft); color:var(--c-primary);
}
/* Metin sütunu içeriğinden daha dar olabilsin: flex çocuğunun varsayılan
   min-width:auto'su, içindeki 2582px'lik kayan şeridi "en az bu kadar
   olmalı" diye okuyup kartı şeridin boyuna kadar genişletiyordu. */
.abn__item > div{ min-width:0; }
.abn__item h3{ font-size:1rem; margin:0; }
.abn__item p{ margin:6px 0 0; color:var(--c-muted); font-size:.94rem; line-height:1.6; }

/* Belge markaları — kartın içinde kayan şerit.
   mask: iki kenarda yumuşak sönme, aksi halde markalar kart kenarında
   kesikmiş gibi duruyor. width:max-content şart: flex track içerik kadar
   uzamalı, yoksa -%50'lik kaydırma yanlış mesafeye denk geliyor. */
.abn__marq{ display:block; position:relative; margin-top:12px; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); }
.abn__marq-track{ display:flex; align-items:center; gap:14px; width:max-content; animation:abnMarq 30s linear infinite; }
/* Ölçü sabit veriliyor (kaynaklar tümü 400x300 -> 34px yükseklikte 45px eder).
   width:auto ile lazy görseller yüklenene kadar genişlik 0 kalıyor, track
   yalnızca boşluklar kadar oluyor ve şerit kayacak yer bulamıyordu. */
.abn__marq img{ flex:none; width:45px; height:34px; object-fit:contain; opacity:.85; transition:opacity .2s var(--ease); }
.abn__marq:hover img{ opacity:1; }
.abn__marq:hover .abn__marq-track{ animation-play-state:paused; }
@keyframes abnMarq{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){
  .abn__marq-track{ animation:none; }
  .abn__marq{ overflow-x:auto; }
}

.abn__cta{
  display:flex; flex-wrap:wrap; gap:12px; justify-content:center;
  margin-top:clamp(34px,4.6vw,60px);
}

/* ---------- Duyarlı ---------- */
@media (max-width: 900px){
  .abs__row{ grid-template-columns:1fr; gap:22px; }
  /* Mobilde görsel her zaman üstte kalsın; sıralama karışmasın */
  .abs__row.is-flip .abs__media{ order:0; }
  .abs__frame{ aspect-ratio:16/10; }
  /* 16:10 çerçevede yatay kırpma payı düşer: 16/9 ÷ 16/10 = %111,2 */
  .abs__frame--video iframe{ width:calc(111.2% * var(--abv-k)); }
  .abv{ min-height:clamp(420px,72vh,600px); }
}
@media (max-width: 575px){
  .abv__stats{ gap:18px 26px; }
  .abs__no{ font-size:64px; }
  .abn__item{ gap:13px; }
}

/* Kaynak tasarımda .abv arka planı videoydu ve hareket azaltmada gizlenip
   yerine poster görseli konuyordu. Burada zaten duran bir fotoğraf var:
   gizlenecek hareket yok, gizlense arka plan boş kalırdı. */
@media (prefers-reduced-motion: reduce){
  .abn__item{ transition:none; }
}

/* ==========================================================================
   HYDROTRUST EKLERİ
   Kaynak tasarımda karşılığı olmayan, bu projeye özgü birkaç kural.
   ========================================================================== */

/* Aktif üst menü öğesi: hover'daki vurgu alt çizgisi kalıcı olarak açık. */
.m-nav__item.is-active > a{ color:var(--c-primary); }
.m-nav__item.is-active > a::after{ transform:scaleX(1); }

/* Referans bölümünün arka planı: kaynakta video vardı, burada fotoğraf.
   .hrf__video ile aynı yerleşim, opaklık geçişi olmadan. */
.hrf__photo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }

/* Mobil çekmecedeki akordiyon başlıkları <button>; .dl zaten <a> için
   yazılmıştı, düğmede varsayılan zemin/çerçeve sızmasın. */
.m-drawer button.dl{ background:transparent; border:0; font-family:var(--f-head); }

/* İç sayfa başlığındaki isteğe bağlı zemin fotoğrafı: koyu bandın altında,
   altın radyal ışığın arkasında kalır. */
.page-hero__bg{ position:absolute; inset:0; z-index:0; overflow:hidden; display:block; }
/* Zemin görseli yönetim panelinden geliyor; ürün çekimi de olabilir manzara da.
   Hafif bulanıklık + büyütme, yakın plan bir ürün fotoğrafının "kocaman kırpılmış"
   durmasını engelliyor, başlık her durumda okunur kalıyor. */
.page-hero__bg img{
  width:100%; height:100%; object-fit:cover; opacity:.26;
  filter:blur(4px) saturate(.9); transform:scale(1.08);
}

/* Kategori kartındaki sayaç kutusu burada ikon taşıyor (ürün sayısı her
   sorguda yüklenmiyor); ikon kutuya ortalansın. */
.cat-card__count i{ font-size:1rem; }

/* Aktif menü öğesi altın YAZI ile işaretleniyordu (beyaz üstünde 1,7:1).
   Vurgu zaten altın alt çizgide; yazı kömür siyahı kalıyor. */
.m-nav__item.is-active > a{ color:var(--c-ink); }
.m-nav__item:hover > a{ color:var(--c-primary-ink); }

/* Logo tek renk (kırmızı) bir yazı markası. Kırmızı hero'nun ve koyu
   altbilginin üstünde neredeyse görünmüyordu; oralarda beyaza çevriliyor. */
.is-home .m-header:not(.is-stuck) .m-logo img,
.m-footer .m-logo img{ filter:brightness(0) invert(1); }
.is-home .m-header .m-logo img{ transition:filter .3s var(--ease); }

/* Dar ekranda hem "Menü" düğmesi hem hamburger görünüyordu — iki ayrı
   gezinme kontrolü. 992px altında tek kontrol kalıyor: yan çekmece
   (ürün kategorilerini de taşıyan tek menü). */
@media (max-width:992px){
  .m-menu-btn{ display:none; }
}
/* Hamburger ana sayfada koyu hero'nun üstünde açık gri bir kutuydu;
   üst şeritteki cam yüzeylerle aynı dile alındı.
   Çubukların rengi hero katmanından geliyor (--c-on-hero); katman
   kaldırılırsa #fff'e düşüyor, böylece çubuklar hiçbir durumda kaybolmuyor —
   eskiden silinmiş bir değişkene bağlıydı ve görünmez oluyorlardı. */
.is-home .m-header:not(.is-stuck) .m-burger{
  background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.34);
}
.is-home .m-header:not(.is-stuck) .m-burger span{ background:var(--c-on-hero, #fff); }

/* Bootstrap .g-5 satırlarının negatif kenar boşluğu (-24px) kapsayıcının
   16px iç boşluğundan büyük olunca 390px'te 8px yatay kaydırma açıyordu. */
@media (max-width:640px){
  .mx .row{ --bs-gutter-x:1.5rem; }
}

/* Tam ekran menüdeki dil rozetleri 390px'te tek satıra sığmıyor, sonuncusu
   kesiliyordu. */
.mnav__lang{ flex-wrap:wrap; }
.mnav__info h4{ color:var(--c-primary-ink); }
.mnav__info > a:hover{ color:var(--c-primary-ink); }
.mnav__lang a.active,.mnav__lang a:hover{ border-color:var(--c-primary); color:var(--c-primary-ink); }

/* Sekme şeridindeki pasif "Teklif Formu" ve belge kartındaki indirme oku */
.doc-card__body a,.doc-card__body i{ color:var(--c-primary-ink); }

/* Yatay akordiyonun KAPALI panelleri bomboş açık kutulardı; kategorinin
   kendi görseli soluk bir filigran olarak duruyor — uydurma içerik değil,
   aynı görselin sönük hâli. */
.hcx__panel-media{ opacity:.12; filter:grayscale(1); transition:opacity .5s var(--ease) .06s, transform .6s var(--ease), filter .5s var(--ease); }
.hcx:not(:hover) .hcx__panel:first-child .hcx__panel-media,
.hcx__panel:focus-visible .hcx__panel-media,
.hcx__panel:hover .hcx__panel-media{ opacity:1; filter:none; }
@media (max-width:900px){ .hcx__panel-media{ opacity:1 !important; filter:none !important; } }

/* Dar ekranda çözüm kartları tam genişlikte ve hepsi açık; fotoğrafın
   aydınlık bölgelerinde beyaz metin 2,8:1'e düşüyordu. Cam koyulaştırıldı. */
@media (max-width:900px){
  .solz__card{ background:linear-gradient(178deg, rgba(12,12,8,.72) 0%, rgba(12,12,8,.84) 100%); }
  .solz__card.is-active{ background:linear-gradient(178deg, rgba(12,12,8,.70) 0%, rgba(96,65,0,.86) 100%); }
  .solz__num{ color:#FFE08A; }
}

/* Boş durum kartı — blog henüz yazı içermiyor. Sayfanın ortasında yalnız
   bir ikon + tek satır vardı; bir hata gibi duruyordu. */
.empty-state{
  max-width:640px; margin-inline:auto; text-align:center;
  background:#fff; border:1px solid var(--c-line); border-radius:var(--r-lg);
  padding:clamp(34px,5vw,56px) clamp(22px,4vw,48px); box-shadow:var(--sh-sm);
}
.empty-state__ic{
  width:74px; height:74px; margin:0 auto 22px; border-radius:22px;
  background:var(--c-primary-soft); color:var(--c-primary-ink);
  display:grid; place-items:center; font-size:1.7rem;
}
.empty-state h3{ font-size:clamp(1.15rem,2vw,1.45rem); margin-bottom:10px; }
.empty-state p{ color:var(--c-muted); margin:0 auto 24px; max-width:44ch; }
.empty-state__acts{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* ==========================================================================
   MOBİL İYİLEŞTİRMELERİ
   Telefon genişliklerinde sayfa gereğinden uzun ve üst alan israflıydı:
   ürün ızgarası tek sütuna düşüyor, üst bar ve güven rozetleri ikinci
   satıra taşıyordu. Aşağısı yalnız ≤640px'i etkiler, masaüstü değişmez.
   ========================================================================== */
@media (max-width:640px){
  /* Kart ızgaraları tek sütun yerine iki sütun: sayfa yarı yarıya kısalıyor. */
  .grid-3, .grid-4{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
  .grid-auto{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }

  /* İki sütuna sığması için kart içi ölçüler biraz kısılıyor. */
  .product-card__media{ padding:10px; }
  .product-card__body{ padding:14px 14px 16px; }
  .product-card__cat{ font-size:.62rem; letter-spacing:.06em; }
  .product-card__body h3{ font-size:.95rem; line-height:1.25; }
  .product-card__code{ font-size:.72rem; }
  .product-card__foot{ flex-wrap:wrap; gap:8px; }

  /* Üst bar tek satır: çalışma saati ve e-posta telefonla aynı hizada
     sığmıyordu, ikinci satıra düşüp ilk ekrandan yer çalıyordu. */
  .m-topbar__info{ flex-wrap:nowrap; gap:14px; }
  .m-topbar__info > *:nth-child(n+2){ display:none; }
  .m-topbar .mx{ min-height:38px; }

  /* Hero tipografisi: telefonda masaüstü ölçeğine yakın duruyordu. */
  .hxs__title{ font-size:clamp(1.5rem,7.2vw,2rem); }
  .hxs__lead{ font-size:.96rem; line-height:1.55; }
  .hxs__eyebrow{ font-size:.66rem; margin-bottom:14px; }

  /* Güven rozetleri: 2+1 kırılıp yalnız kalan üçüncü satır bırakıyordu. */
  .hxs__chips{ flex-wrap:nowrap; justify-content:center; gap:7px; margin-bottom:22px; }
  .hxs__chips li{ font-size:.68rem; padding:7px 10px; gap:6px; white-space:nowrap; }
  .hxs__chips li::before{ width:5px; height:5px; }

  /* Ürün listesinde yan sütun ızgaranın üstüne yığılıyor; oradaki büyük koyu
     "Bilgi & Teklif Al" kutusu ürünleri bir ekran aşağı itiyordu. Arama ve
     kategoriler üstte kalıyor, bu kutu gizleniyor: aynı çağrı zaten footer
     bandında ve sabit WhatsApp/telefon düğmelerinde var. */
  .listing-cta{ display:none; }
}

@media (max-width:339px){
  /* Yalnız çok dar (≤339px) ekranlarda tek sütuna iniyor; 360px telefonlar
     iki sütunda kalıyor, sayfa gereksiz uzamıyor. */
  .grid-3, .grid-4, .grid-auto{ grid-template-columns:1fr; }
}

/* ==========================================================================
   HAKKIMIZDA — MODERN KATMAN
   Kaynak tasarımın (.abv/.abs/.abm/.abn) iskeletine dokunmadan üstüne binen
   bitiş katmanı: yalnız görsel dokunuşlar, hiçbir yerleşim kuralı ezilmiyor.
   Kaldırmak için bu bloğu silmek yeterli.
   ========================================================================== */

/* ---------- Hero: çok yavaş yakınlaşma ----------
   Duran bir fotoğrafa hafif hareket katıyor. Hareket azaltma açıkken hiç
   başlamıyor: kural bilerek no-preference sorgusunun içinde. */
@media (prefers-reduced-motion: no-preference){
  .abv__media{
    animation:abvYakinlas 26s ease-in-out infinite alternate;
    transform-origin:60% 45%;
    will-change:transform;
  }
}
@keyframes abvYakinlas{ from{ transform:scale(1); } to{ transform:scale(1.09); } }

/* Künye şeridi: rakamların altına altın bir vurgu, aralarına ince ayraç. */
.abv__stats b{ position:relative; padding-bottom:9px; }
.abv__stats b::after{
  content:""; position:absolute; inset-inline-start:0; bottom:0;
  width:26px; height:2px; border-radius:2px;
  background:linear-gradient(90deg, var(--c-primary), transparent);
}
.abv__stats > div + div{
  padding-inline-start:clamp(18px,3.4vw,54px);
  border-inline-start:1px solid rgba(255,255,255,.16);
}
/* gap zaten aralığı veriyordu; ayraç eklenince ikisi üst üste binmesin */
.abv__stats{ gap:0 clamp(18px,3.4vw,54px); }

/* ---------- Hikâye blokları ---------- */
/* Çerçeveye altın saç teli + daha yumuşak, daha derin gölge. */
.abs__frame{
  border:1px solid var(--c-line);
  box-shadow:0 30px 60px -28px rgba(20,20,15,.42);
}
.abs__frame img{ transition:transform .8s var(--ease); }
.abs__row:hover .abs__frame img{ transform:scale(1.04); }
/* Dev sıra numarası kaynakta gri konturluydu; altın kontur marka rengine
   bağlıyor. Ama rakam görselin köşesine taşıyor ve altındaki zemin her blokta
   farklı: kromda koyu gri, katalogdan gelen mühendislik fotoğrafında ise sarı.
   Sarının üstünde altın kontur tamamen kayboluyordu. Konturun etrafına koyu
   bir hale konuyor — hem sarıda hem kromda hem de açık sayfa zemininde
   rakamın kenarı ayrışıyor. */
.abs__no{
  -webkit-text-stroke:2px rgba(255,185,9,.85);
  filter:drop-shadow(0 0 2px rgba(20,20,15,.55)) drop-shadow(0 1px 4px rgba(20,20,15,.35));
}

/* ---------- Vizyon / Misyon ----------
   Kaynakta iki eş beyaz kart vardı. Vizyon kartı firmanın kendi slogan
   cümlesini taşıdığı için koyu zemine alındı: iki kart arasında hiyerarşi
   oluşuyor ve bölüm düz bir kutu dizisi olmaktan çıkıyor. */
.abm{ position:relative; isolation:isolate; }
.abm::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(70% 120% at 15% 0%, rgba(255,185,9,.13), transparent 60%);
}
.abm__grid{ align-items:stretch; }
.abm__card{ display:flex; flex-direction:column; }

.abm__card--ink{
  background:linear-gradient(160deg, var(--c-ink-soft) 0%, var(--c-ink) 62%);
  border-color:rgba(255,255,255,.10);
  box-shadow:0 30px 60px -30px rgba(20,20,15,.55);
  /* Slogan, karşısındaki misyon metninden çok daha kısa; kart eşit yükseklikte
     uzayınca altta boşluk kalıyordu. İçerik dikeyde ortalanıyor. */
  justify-content:center;
}
.abm__card--ink h2{ color:#fff; }
.abm__card--ink p{
  color:rgba(255,255,255,.80);
  /* Slogan cümlesi: gövde metninden bir tık iri, bölümün ağırlık merkezi. */
  font-size:clamp(1.02rem,1.35vw,1.16rem);
}
.abm__card--ink .abm__ic{
  background:rgba(255,185,9,.16); color:var(--c-primary-l);
}

/* ---------- Neden biz ---------- */
/* Üstte hover'da açılan altın çizgi + biraz daha iri simge kutusu. */
.abn__item{ position:relative; overflow:hidden; }
.abn__item::before{
  content:""; position:absolute; inset-block-start:0; inset-inline:0; height:2px;
  background:linear-gradient(90deg, var(--c-primary), var(--c-primary-l));
  transform:scaleX(0); transform-origin:left;
  transition:transform .4s var(--ease);
}
.abn__item:hover::before{ transform:scaleX(1); }
.abn__ic{
  width:46px; height:46px; font-size:1.1rem;
  background:linear-gradient(150deg, var(--c-primary-soft), #FFFDF7);
  border:1px solid rgba(255,185,9,.30);
  transition:background .3s var(--ease), color .3s var(--ease);
}
.abn__item:hover .abn__ic{
  background:linear-gradient(150deg, var(--c-primary), var(--c-primary-l));
  color:var(--c-ink);
}
/* Belge şeridi kaynakta çok küçüktü; belgeler seçilebilsin diye büyütüldü.
   Yükseklik/genişlik sabit kalmalı — açıklaması .abn__marq img kuralında. */
.abn__marq{ margin-top:14px; }
.abn__marq img{ width:62px; height:46px; }

@media (prefers-reduced-motion: reduce){
  .abs__frame img, .abn__item::before, .abn__ic{ transition:none; }
}

/* ==========================================================================
   MODEL TABLOSU (.mdt) — ürün sayfasındaki tam model listesi
   Kaynak tasarımda karşılığı yok; eski sitedeki WordPress eklentisiyle
   basılan çıplak tablonun yerini alıyor.
   ========================================================================== */

.mdt{ --mdt-bd:var(--c-line); }

.mdt__head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:18px; flex-wrap:wrap; margin-bottom:18px;
}
.mdt__title{ font-size:clamp(1.15rem,1.8vw,1.5rem); margin:0; letter-spacing:-.01em; }
.mdt__lead{ margin:7px 0 0; color:var(--c-muted); font-size:.95rem; max-width:60ch; }
.mdt__count{
  flex:none; font-family:var(--f-head); font-weight:700; font-size:.85rem;
  padding:7px 14px; border-radius:var(--r-pill);
  background:var(--c-primary-soft); color:#7A5600;
  border:1px solid rgba(255,185,9,.35); white-space:nowrap;
}

/* ---------- Araç çubuğu ---------- */
.mdt__bar{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  margin-bottom:14px;
}
.mdt__search{
  display:flex; align-items:center; gap:9px; flex:1 1 260px; min-width:0;
  padding:0 14px; height:44px;
  background:var(--c-bg); border:1px solid var(--mdt-bd); border-radius:var(--r-pill);
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.mdt__search:focus-within{
  border-color:var(--c-primary);
  box-shadow:0 0 0 3px rgba(255,185,9,.18);
}
.mdt__search i{ color:var(--c-muted-2); font-size:.9rem; flex:none; }
.mdt__search input{
  flex:1; min-width:0; border:0; background:none; outline:none;
  font:inherit; font-size:.95rem; color:var(--c-ink);
}
/* Tarayıcının kendi temizleme çarpısı iki ayrı ikon gibi duruyordu. */
.mdt__search input::-webkit-search-cancel-button{ -webkit-appearance:none; }

.mdt__chips{ display:flex; gap:7px; flex-wrap:wrap; }
.mdt__chip{
  font:inherit; font-size:.85rem; font-weight:600; cursor:pointer;
  padding:9px 15px; border-radius:var(--r-pill);
  background:var(--c-bg); color:var(--c-muted);
  border:1px solid var(--mdt-bd);
  transition:background .22s var(--ease), color .22s var(--ease), border-color .22s var(--ease);
}
.mdt__chip span{ opacity:.62; font-weight:500; }
.mdt__chip:hover{ border-color:var(--c-primary-l); color:var(--c-ink); }
.mdt__chip.is-on{
  background:var(--c-ink); color:#fff; border-color:var(--c-ink);
}
.mdt__chip.is-on span{ opacity:.7; }

/* ---------- Tablo ----------
   Yatay kaydırma tablonun KENDİ kutusunda; sayfa gövdesi asla yana kaymıyor.
   overscroll-behavior-x: şeridin sonuna gelince tarayıcının geri gitmesini
   engelliyor (dokunmatikte kazara sayfa değiştiriyordu). */
.mdt__scroll{
  overflow:auto; overscroll-behavior:contain;
  /* Yükseklik sınırı şart: yapışkan başlık ancak kendi kaydırma kutusunda
     iş görür, sınır olmayınca hiç ayrılmaz. Ayrıca TC tipinin 104 satırı
     sayfayı gereksiz uzatıyordu. */
  max-height:min(68vh, 680px);
  border:1px solid var(--mdt-bd); border-radius:var(--r);
  background:var(--c-bg);
  box-shadow:0 18px 40px -30px rgba(20,20,15,.45);
}
.mdt__table{
  width:100%; border-collapse:separate; border-spacing:0;
  font-size:.9rem; white-space:nowrap;
}
.mdt__table th,
.mdt__table td{ padding:11px 16px; text-align:start; }

.mdt__table thead th{
  position:sticky; top:0; z-index:2;
  background:var(--c-ink); color:#fff;
  font-family:var(--f-head); font-weight:600; font-size:.78rem;
  letter-spacing:.03em; text-transform:uppercase;
  cursor:pointer; user-select:none;
  border-bottom:1px solid var(--c-ink);
}
.mdt__table thead th:hover{ background:var(--c-ink-soft); }
.mdt__table thead th:focus-visible{ outline:2px solid var(--c-primary); outline-offset:-2px; }

/* Sıralama oku: yön verilmemişken soluk çift ok, verilince tek yön. */
.mdt__arrow{
  display:inline-block; width:0; height:0; margin-inline-start:7px;
  vertical-align:middle; opacity:.35;
  border-inline:4px solid transparent;
  border-block-end:5px solid currentColor;
}
th.is-desc .mdt__arrow{ transform:rotate(180deg); }
th.is-asc .mdt__arrow, th.is-desc .mdt__arrow{ opacity:1; color:var(--c-primary-l); }

.mdt__table tbody tr{ transition:background .18s var(--ease); }
.mdt__table tbody tr.is-alt{ background:var(--c-surface); }
.mdt__table tbody tr:hover{ background:var(--c-primary-soft); }
.mdt__table tbody td{ border-block-start:1px solid var(--mdt-bd); color:var(--c-ink); }

.mdt__table .is-num{ text-align:end; font-variant-numeric:tabular-nums; }
/* Ürün kodu: rakam dizisi, tek aralıklı yazıyla okunması kolaylaşıyor. */
.mdt__table td.is-code{
  font-family:ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-weight:600; letter-spacing:-.01em; color:var(--c-ink);
}

/* Ürün kodu sütunu yatay kaydırmada yerinde kalır: 9-10 sütunlu tabloda
   sağa kayınca hangi satırda olunduğu tamamen kayboluyordu.
   Yapışkan hücre satırın zeminini örttüğü için zebra/hover renkleri burada
   ayrıca tanımlanmak zorunda — inherit boş geliyor. */
.mdt__table .is-code{
  position:sticky; inset-inline-start:0; z-index:1;
  background:var(--c-bg);
}
.mdt__table tbody tr.is-alt .is-code{ background:var(--c-surface); }
.mdt__table tbody tr:hover .is-code{ background:var(--c-primary-soft); }
.mdt__table thead th.is-code{ z-index:3; background:var(--c-ink); }
.mdt__table thead th.is-code:hover{ background:var(--c-ink-soft); }
/* Kaydırınca sabit sütunun sağında ince bir ayrım kalsın. */
.mdt__table .is-code::after{
  content:""; position:absolute; inset-block:0; inset-inline-end:0;
  width:1px; background:var(--mdt-bd);
}
.mdt__table thead th.is-code::after{ background:rgba(255,255,255,.16); }

.mdt__empty{
  margin:0; padding:38px 20px; text-align:center;
  color:var(--c-muted); font-size:.95rem;
}

.mdt__hint{
  display:flex; align-items:flex-start; gap:9px;
  margin:14px 0 0; color:var(--c-muted); font-size:.88rem; line-height:1.6;
}
.mdt__hint i{ color:var(--c-primary); margin-top:3px; flex:none; }

@media (max-width: 700px){
  .mdt__table th, .mdt__table td{ padding:10px 13px; }
  .mdt__table{ font-size:.85rem; }
  .mdt__head{ align-items:flex-start; }
  .mdt__scroll{ max-height:70vh; }
}
@media (prefers-reduced-motion: reduce){
  .mdt__chip, .mdt__search, .mdt__table tbody tr{ transition:none; }
}

/* ==========================================================================
   YETKİLİ SERVİS AĞI
   .svm — koyu harita bandı (sayfa başlığıyla aynı zeminde birleşir)
   .svl — altındaki aranabilir nokta listesi
   .trh — haritanın kendi çizimi (partial ile ortak)

   Marka renkleri bilgi taşıyor: il merkezinde servis olan iller ALTIN,
   ilçesinde de servis olanlar KIRMIZI.
   ========================================================================== */

.svm{
  position:relative; isolation:isolate;
  background:var(--c-ink); color:#fff;
  padding:clamp(30px,5vw,60px) 0 clamp(26px,4vw,48px);
}
/* Zemine hafif derinlik: düz koyu blok sert duruyordu. */
.svm::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(90% 120% at 12% 0%, rgba(255,185,9,.14), transparent 58%),
    radial-gradient(70% 100% at 88% 100%, rgba(231,67,54,.12), transparent 60%);
}

.svm__head{ max-width:820px; }
.crumb--light a{ color:rgba(255,255,255,.62); }
.crumb--light a:hover{ color:var(--c-primary-l); }
.crumb--light span{ color:var(--c-primary-l); }
.crumb--light i{ color:rgba(255,255,255,.34); }

.svm__title{
  color:#fff; margin:14px 0 0;
  font-size:clamp(1.9rem,3.6vw,3rem); line-height:1.08; letter-spacing:-.02em;
}
.svm__lead{
  margin:16px 0 0; max-width:62ch;
  color:rgba(255,255,255,.74); font-size:clamp(1rem,1.3vw,1.12rem); line-height:1.68;
}

/* Künye: sayı önde, etiket altında. */
.svm__stats{
  display:flex; flex-wrap:wrap; gap:clamp(20px,3.6vw,54px);
  margin-top:clamp(24px,3vw,38px); padding-top:clamp(18px,2.4vw,26px);
  border-top:1px solid rgba(255,255,255,.16);
}
.svm__stats b{
  display:block; font-family:var(--f-head); font-weight:700;
  font-size:clamp(1.6rem,2.8vw,2.3rem); line-height:1; letter-spacing:-.02em;
  color:var(--c-primary-l);
}
.svm__stats span{
  display:block; margin-top:7px;
  font-size:.8rem; letter-spacing:.05em; text-transform:uppercase;
  color:rgba(255,255,255,.58);
}

/* Harita: kenar payı dar, koyu zeminde tam genişlik. Beyaz kart kalktı. */
.svm__mapwrap{
  position:relative;
  width:min(1320px, 100% - 2 * var(--gut));
  margin:clamp(22px,3.4vw,40px) auto 0;
}

.svm__legend{
  display:flex; align-items:center; gap:clamp(16px,2.6vw,30px); flex-wrap:wrap;
  margin-top:clamp(16px,2.4vw,26px);
  font-size:.86rem; color:rgba(255,255,255,.66);
}
.svm__legend span{ display:inline-flex; align-items:center; gap:8px; }
.svm__dot{ width:12px; height:12px; border-radius:4px; flex:none; }
.svm__dot--il{ background:var(--c-primary); }
.svm__dot--ilce{ background:#E74336; }

/* ---------- Harita çizimi ---------- */
/* Çizim kaynağı değişti: iller artık ortak kenar paylaşıyor (bkz. partial'ın
   başındaki not). Önceki kaynakta komşular birbirine değmiyordu, aradaki
   2,7–6 birimlik boşluk koyu zeminde siyah yarık gibi duruyordu ve kontur
   numarasıyla kapanmıyordu. Şimdi sınır gerçek ortak kenar: ince, her yerde
   aynı kalınlıkta tek bir çizgi yetiyor. */
.trh__svg{ width:100%; height:auto; display:block; overflow:visible; }
.trh__il path{
  /* Servis yok: koyu zeminde belli belirsiz. Panelden il pasife alınabiliyor. */
  fill:#34322B;
  stroke:rgba(20,20,15,.62); stroke-width:.7;
  stroke-linejoin:round; vector-effect:non-scaling-stroke;
  transition:fill .2s var(--ease);
}
.trh__il.is-var path{ fill:var(--c-primary); }
.trh__il.is-ilce path{ fill:#E74336; }

/* İl adları ayrı katta (partial'da da öyle basılıyor): iller tek tek
   çizilirken bir ilin yazısı sonraki ilin dolgusunun altında kalıyordu.
   pointer-events:none şart, yoksa yazı imleci yakalayıp altındaki ilin
   hover'ını yiyor — baloncuk açılmıyor.

   Punto tek tek partial'da yazılı: her ilin iç çemberine göre seçildi
   (Konya 9, Yalova 5.2). Hepsi tek boy olunca küçük illerde yazı ilin
   dışına taşıyordu. Başlık fontu (Bricolage) bu boyutta tıknaz duruyor;
   gövde fontu çok daha temiz çiziliyor. */
.trh__ad{
  font-family:var(--f-body); font-weight:600; letter-spacing:.005em;
  text-anchor:middle; dominant-baseline:middle;
  fill:#14140F; pointer-events:none; user-select:none;
  /* Altın ilde HALE YOK: koyu yazı altında 9,7:1, kontur sadece bulandırıyor. */
  stroke:none;
}
/* Kırmızı ilde koyu yazı 4:1'e düşüyor. Dar ve tam opak açık kontur
   okunurluğu kurtarıyor; linejoin:round köşelerde diken çıkmasını önler. */
.trh__ad.on-red{
  paint-order:stroke; stroke:#fff; stroke-width:1.5px;
  stroke-linejoin:round; stroke-linecap:round;
}
/* Küçük illerin yazısı komşuya taşabiliyor; ince açık kontur ayırıyor. */
.trh__ad--dar{ paint-order:stroke; stroke:rgba(255,255,255,.75); stroke-width:1.1px; stroke-linejoin:round; }
.trh__ad--dar.on-red{ stroke:#fff; stroke-width:1.3px; }

/* Dar ekranda harita ~340px'e iniyor; 1000 birimlik viewBox'ta 9 birimlik
   yazı 3px'e düşüp okunmaz oluyor. Etiketler gizlenir, il adı dokunma
   baloncuğundan ve alttaki listeden okunur. */
@media (max-width: 900px){
  .trh__adlar{ display:none; }
}
.svl__search{
  display:flex; align-items:center; gap:10px; flex:1 1 280px; min-width:0;
  padding:0 16px; height:48px;
  background:var(--c-bg); border:1px solid var(--c-line); border-radius:var(--r-pill);
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.svl__search:focus-within{ border-color:var(--c-primary); box-shadow:0 0 0 3px rgba(255,185,9,.18); }
.svl__search i{ color:var(--c-muted-2); font-size:.92rem; flex:none; }
.svl__search input{ flex:1; min-width:0; border:0; background:none; outline:none; font:inherit; font-size:.98rem; color:var(--c-ink); }
.svl__search input::-webkit-search-cancel-button{ -webkit-appearance:none; }
.svl__count{ font-size:.86rem; color:var(--c-muted); white-space:nowrap; }

/* Kutu değil, ince ayraçlı satırlar. 83 kayıt kutu kutu basılınca sayfa bir
   kutu duvarına dönüyordu. */
.svl__list{
  list-style:none; margin:0; padding:0;
  display:grid; gap:0 clamp(24px,3vw,48px);
  grid-template-columns:repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  border-top:1px solid var(--c-line);
}
.svl__item{
  display:flex; align-items:center; gap:12px;
  padding:13px 4px;
  border-bottom:1px solid var(--c-line);
  transition:background .2s var(--ease);
}
.svl__item:hover{ background:var(--c-surface); }
/* Haritadan tıklanınca ilgili satır kısa süre vurgulanıyor. */
.svl__item.is-vurgu{ background:var(--c-primary-soft); }

.svl__plate{
  flex:none; width:26px;
  font-family:ui-monospace, Menlo, Consolas, monospace;
  font-size:.74rem; font-weight:700; color:var(--c-muted-2);
}
.svl__name{ font-weight:600; color:var(--c-ink); font-size:.95rem; }
/* İlçe rozeti kırmızı: haritadaki kırmızı illerle aynı bilgiyi taşıyor. */
.svl__district{
  margin-inline-start:auto;
  font-size:.76rem; font-weight:700; color:#B02A1F;
  background:rgba(231,67,54,.10);
  padding:3px 9px; border-radius:var(--r-pill); white-space:nowrap;
}

.svl__empty{ margin:24px 0 0; padding:30px; text-align:center; color:var(--c-muted); }

.svl__hint{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  margin:clamp(26px,3.4vw,40px) 0 0;
  padding:clamp(16px,2.2vw,22px) clamp(18px,2.4vw,26px);
  background:var(--c-surface); border-radius:var(--r);
  color:var(--c-muted); font-size:.92rem; line-height:1.6;
}
.svl__hint i{ color:var(--c-primary); flex:none; }
.svl__hint span{ flex:1 1 260px; }
.btn--sm{ padding:9px 18px; font-size:.86rem; }

@media (max-width: 700px){
  .svm__stats{ gap:18px 30px; }
  .svl__list{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion: reduce){
  .trh__il path, .svl__item, .svl__search{ transition:none; }
}

/* ---------- Üst düzey etkileşim: harita ↔ liste çift yönlü ----------
   Haritada bir ile gelince listedeki satırı, listede bir satıra gelince
   haritadaki ili vurguluyor. Vurgu sınıfı JS tarafından konuyor (.is-on),
   çünkü etiketler ayrı katta duruyor ve CSS ile kardeş seçilemiyor. */

/* Vurgulanan il: koyu zemin, beyaz etiket. Açık panelde hover'ı beyaz
   yapmak görünmez oluyordu. */
.trh__il.is-on path{ fill:var(--c-ink); stroke:var(--c-primary); stroke-width:1.1; }
.trh__ad.is-on{ fill:#fff; stroke:rgba(20,20,15,.85); }

/* Vurgulanan liste satırı */
.svl__item.is-on{ background:var(--c-primary-soft); }
.svl__item.is-on .svl__plate{ color:#8C5D00; }

/* Haritadaki il tıklanabilir olduğu için imleç de öyle görünmeli */
.trh__il.is-var{ cursor:pointer; }

/* ---------- Baloncuk: koyu cam kart ---------- */
.trh__tip{
  position:absolute; z-index:5; pointer-events:none;
  transform:translate(-50%, calc(-100% - 14px));
  display:flex; align-items:center; gap:9px;
  background:rgba(20,20,15,.94);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.12);
  padding:9px 13px; border-radius:var(--r-sm);
  box-shadow:0 18px 40px rgba(0,0,0,.45);
  white-space:nowrap;
}
.trh__tip::after{
  content:""; position:absolute; left:50%; top:100%;
  transform:translateX(-50%);
  border:6px solid transparent; border-top-color:rgba(20,20,15,.94);
}
.trh__tip-plate{
  font-family:ui-monospace, Menlo, Consolas, monospace;
  font-size:.7rem; font-weight:700; color:var(--c-ink);
  background:var(--c-primary); padding:2px 6px; border-radius:5px;
}
.trh__tip-name{ color:#fff; font-weight:700; font-size:.86rem; }
.trh__tip-ilce{
  color:var(--c-primary-l); font-weight:600; font-size:.78rem;
  padding-inline-start:9px; margin-inline-start:2px;
  border-inline-start:1px solid rgba(255,255,255,.18);
}
.trh__tip-ilce[hidden]{ display:none; }

/* ---------- Gösterge: kapsül ---------- */
.svm__legend span{
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.12);
  padding:7px 14px; border-radius:var(--r-pill);
}

@media (prefers-reduced-motion: reduce){
  .trh__il.is-on path{ transition:none; }
}

/* ==========================================================================
   SİTE İÇİ ARAMA — menüdeki kutular
   Sonuç sayfasının kendi stili sayfanın içinde (frontend/search/index).
   ========================================================================== */

/* Tam ekran menünün üstündeki arama */
.mnav__search{
  /* Izgaranın ilk satırı, iki sütunu birden kaplıyor. */
  grid-column:1 / -1;
  display:flex; align-items:center; gap:12px;
  margin:0 0 clamp(8px,1.5vw,18px);
  padding:0 20px; height:58px;
  background:rgba(20,20,15,.04);
  border:1px solid var(--c-line); border-radius:var(--r-pill);
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
}
.mnav__search:focus-within{
  background:#fff; border-color:var(--c-primary); box-shadow:0 0 0 3px rgba(255,185,9,.18);
}
.mnav__search > i{ color:var(--c-muted-2); flex:none; }
.mnav__search input{
  flex:1; min-width:0; border:0; background:none; outline:none;
  font:inherit; font-size:1.02rem; color:var(--c-ink);
}
.mnav__search input::-webkit-search-cancel-button{ -webkit-appearance:none; }
.mnav__search button{
  flex:none; border:0; cursor:pointer;
  padding:10px 20px; border-radius:var(--r-pill);
  background:var(--c-primary); color:var(--c-on-primary);
  font:inherit; font-weight:700; font-size:.9rem;
  transition:filter .2s var(--ease);
}
.mnav__search button:hover{ filter:brightness(.94); }

/* Dar ekrandaki yan çekmecede arama */
.m-drawer__search{
  display:flex; align-items:center; gap:10px;
  margin-bottom:14px; padding:0 14px; height:46px;
  background:var(--c-surface); border:1px solid var(--c-line); border-radius:var(--r-pill);
}
.m-drawer__search:focus-within{ border-color:var(--c-primary); }
.m-drawer__search > i{ color:var(--c-muted-2); flex:none; font-size:.9rem; }
.m-drawer__search input{
  flex:1; min-width:0; border:0; background:none; outline:none;
  font:inherit; font-size:.95rem; color:var(--c-ink);
}
.m-drawer__search input::-webkit-search-cancel-button{ -webkit-appearance:none; }

@media (max-width: 560px){
  .mnav__search{ height:52px; padding:0 14px; }
  .mnav__search button{ padding:9px 14px; font-size:.84rem; }
}

/* ==========================================================================
   AÇILIŞ MESAJI (.pop)
   Üstte görsel, altında bağlantı. Görsel kare de olsa dikey de olsa
   taşmasın diye yükseklik ekrana göre sınırlanıyor.
   ========================================================================== */

.pop{ position:fixed; inset:0; z-index:1200; display:grid; place-items:center; padding:20px; }
.pop[hidden]{ display:none; }
/* Açıkken arka sayfa kaymasın. */
html.pop-acik{ overflow:hidden; }

.pop__perde{
  position:absolute; inset:0; background:rgba(20,20,15,.72);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  animation:popPerde .25s var(--ease) both;
}
@keyframes popPerde{ from{ opacity:0 } to{ opacity:1 } }

.pop__kutu{
  position:relative; z-index:1; width:min(560px, 100%);
  max-height:calc(100dvh - 40px); overflow:auto;
  background:#fff; border-radius:var(--r-lg);
  box-shadow:0 30px 70px rgba(0,0,0,.42);
  animation:popKutu .32s var(--ease) both;
}
@keyframes popKutu{ from{ opacity:0; transform:translateY(16px) scale(.97) } to{ opacity:1; transform:none } }

.pop__kapat{
  position:absolute; top:12px; inset-inline-end:12px; z-index:2;
  width:38px; height:38px; border:0; border-radius:50%; cursor:pointer;
  background:rgba(20,20,15,.55); color:#fff; font-size:1rem;
  display:grid; place-items:center;
  transition:background .2s var(--ease);
}
.pop__kapat:hover{ background:rgba(20,20,15,.8); }

.pop__gorsel{ display:block; }
.pop__gorsel img{
  display:block; width:100%; height:auto;
  border-radius:var(--r-lg) var(--r-lg) 0 0;
}

.pop__alt{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  padding:18px 22px 22px; text-align:center;
}
.pop__alt .btn{ width:100%; justify-content:center; }
.pop__gec{
  border:0; background:none; cursor:pointer;
  font:inherit; font-size:.86rem; color:var(--c-muted);
  padding:4px 8px; border-radius:var(--r-sm);
  transition:color .2s var(--ease);
}
.pop__gec:hover{ color:var(--c-ink); }

@media (max-width: 560px){
  .pop{ padding:14px; }
  .pop__kutu{ width:100%; }
  .pop__alt{ padding:14px 16px 18px; }
}
@media (prefers-reduced-motion: reduce){
  .pop__perde, .pop__kutu{ animation:none; }
}

/* Mobil başlık: yabancı dillerde "Teklif Al" çevirisi uzun (Angebot Anfordern,
   Запросить Предложение…) ve dar ekranda menü düğmesini ekran dışına itiyordu.
   Türkçe görünüme dokunmadan, diğer dillerde düğme küçülüp gerekirse iki satıra
   iniyor; menü düğmesi her zaman ekranda kalıyor. */
@media (max-width:575px){
    html:not([lang="tr"]) .m-actions{ gap:6px; min-width:0; }
    html:not([lang="tr"]) .m-quote-mob{
        padding:6px 11px; font-size:.74rem; line-height:1.15; white-space:normal;
        max-width:8.6em; text-align:center; min-height:40px; flex-shrink:1;
    }
    html:not([lang="tr"]) .m-burger{ flex-shrink:0; }
}