/* ==========================================================================
   MEDICAL 2000 — Design System
   Premium clinical aesthetic. Bootstrap grid stays loaded; this layers the
   full visual language on top. Theme accent is DB-driven (--color-theme).
   ========================================================================== */

:root{
  /* Brand (DB renk1/renk2 fall through via dynamic-style.blade.php) */
  --c-primary:        var(--color-theme, #0E7C86);
  --c-primary-d:      #0a5b63;
  --c-primary-l:      #1aa0ad;
  --c-primary-soft:   #e6f3f4;
  --c-ink:            var(--color-secondary, #0A2540);
  --c-ink-soft:       #143a52;
  --c-ink-2:          #12324a;

  /* Neutrals */
  --c-bg:        #ffffff;
  --c-surface:   #f5f8f9;
  --c-surface-2: #eaf0f2;
  --c-line:      #e3eaed;
  --c-line-2:    #d3dde1;
  --c-text:      #1d2b33;
  --c-muted:     #5d6e76;
  --c-muted-2:   #8a99a0;

  /* Type */
  --f-head: 'Poppins', 'Segoe UI', system-ui, sans-serif;
  --f-body: '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(10,37,64,.05);
  --sh-sm: 0 4px 14px rgba(10,37,64,.06);
  --sh:    0 10px 30px rgba(10,37,64,.08);
  --sh-lg: 0 24px 60px rgba(10,37,64,.12);
  --sh-primary: 0 14px 30px rgba(14,124,134,.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; }
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; }
p{ margin:0 0 1rem; }
::selection{ background:var(--c-primary); color:#fff; }
: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:#dfe8ec; }
.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); 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:#7fd3da; }
.eyebrow--light::before{ background:#7fd3da; }
.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:#fff; --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:#fff; --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(10,37,64,.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); font-size:.95rem; }
.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-d); font-family:var(--f-head); }
.pill--new{ background:var(--c-primary); color:#fff; }
.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:#fff; }
.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); right: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(10,37,64,.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:#fff; }
.m-topbar__right .m-quote:hover, .is-home .m-topbar__right .m-quote, .is-home .m-topbar__right .m-quote:hover{ color:#fff; }
.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 — marka SVG'si 721x125 (≈5.8:1). Yüksekliğe göre ölçeklenir;
   dar ekranda menüyü sıkıştırmasın diye genişlik de sınırlanır. */
.m-logo{ display:inline-flex; align-items:center; gap:12px; flex-shrink:0; min-width:0; }
.m-logo img{ height:clamp(30px,3.2vw,42px); width:auto; max-width:min(260px,46vw); object-fit:contain; }

/* 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); }

/* 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,#f3f9fa,#e3eef2); 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); }
.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); }
.m-lang__menu{ position:absolute; top:calc(100% + 8px); right:0; 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); }
.m-lang__menu a.active{ color:var(--c-primary); 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; }
.m-drawer.open{ transform:translateX(0); }
.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 a.dl{ display:block; padding:13px 14px; font-family:var(--f-head); font-weight:600; color:var(--c-ink); border-radius:var(--r-sm); }
.m-drawer a.dl:hover{ background:var(--c-surface); color:var(--c-primary); }
.m-drawer .sub a{ display:block; padding:9px 14px 9px 28px; font-size:.9rem; color:var(--c-muted); font-weight:500; }
.m-drawer .sub a:hover{ color:var(--c-primary); }
.m-overlay{ position:fixed; inset:0; background:rgba(10,37,64,.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(7,26,42,.94) 0%, rgba(8,32,50,.82) 42%, rgba(10,37,64,.45) 100%); }
.hero__bg--plain{ background:radial-gradient(120% 120% at 0% 0%, #103a4a 0%, #0a2540 45%, #071a2b 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:#7fd3da; }
.hero__lead{ font-size:clamp(1rem,1.6vw,1.18rem); color:#c5d4db; 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:#9fb4bd; 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:#9fb4bd; 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); }

/* Category card */
.cat-card{ position:relative; border-radius:var(--r-lg); overflow:hidden; background:linear-gradient(165deg,#ffffff,#e9f1f4); 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(13,40,60,.08); }
.cat-card:hover .cat-card__go{ background:var(--c-primary); color:#fff; 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,#eef1fb,#e2e8f6); border:1px solid rgba(10,37,64,.06);
  transition:flex .55s var(--ease), box-shadow .45s var(--ease), background .45s var(--ease); }
.hcx:not(:hover) .hcx__panel:first-child,
.hcx__panel:hover{ flex:3.4 1 0; background:#fff; box-shadow:var(--sh-lg); }

.hcx__panel-plus{ position:absolute; top:16px; right:16px; z-index:4; width:38px; height:38px; border-radius:50%; background:rgba(10,37,64,.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:hover .hcx__panel-plus{ background:var(--c-primary); color:#fff; 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: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{ max-width:100%; max-height:100%; object-fit:contain; filter:drop-shadow(0 24px 34px rgba(13,40,60,.16)); }
.hcx__panel-media i{ font-size:4rem; color:rgba(10,37,64,.12); }
.hcx:not(:hover) .hcx__panel:first-child .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: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); }
.hcx__panel-body h3{ font-size:clamp(1.2rem,1.7vw,1.6rem); margin:8px 0 8px; color:var(--c-ink); white-space:nowrap; }
.hcx__panel-go{ display:inline-flex; align-items:center; gap:8px; color:var(--c-primary); 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; }
  .hcx__panel-media{ opacity:1 !important; transform:none !important; inset:14% 46% 14% 7%; }
  .hcx__panel-body{ opacity:1 !important; transform:none !important; left:auto; right:0; width:52%; }
  .hcx__panel-body h3{ white-space:normal; }
  .hcx__panel-plus{ background:var(--c-primary) !important; color:#fff !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:4/3; background:var(--c-surface); display:grid; place-items:center; padding:22px; overflow:hidden; }
.product-card__media img{ max-height:100%; width:auto; 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:#fff; font-size:.72rem;
  box-shadow:0 4px 14px rgba(14,124,134,.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, #0b6169); }
@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); 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-2); 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; }

/* 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; }

/* ==========================================================================
   SOLUTION SHOWCASE (.solz) — klinik ortam vitrini
   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:#123243;
  /* 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(26,160,173,.34) 0%, transparent 58%),
    radial-gradient(60% 90% at 12% -10%, rgba(127,211,218,.16) 0%, transparent 60%),
    linear-gradient(150deg, #12384c 0%, #0b2438 55%, #071c2c 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(7,28,44,.84) 0%, rgba(7,28,44,.55) 24%, rgba(7,28,44,.16) 48%, rgba(7,28,44,0) 72%),
    /* alt bant: cam kartlardaki beyaz metin her fotoğrafta okunaklı kalsın */
    linear-gradient(0deg, rgba(7,28,44,.58) 0%, rgba(7,28,44,.24) 22%, rgba(7,28,44,0) 44%),
    linear-gradient(180deg, rgba(7,28,44,.30) 0%, rgba(7,28,44,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(7,28,44,.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;
  background:linear-gradient(178deg, rgba(255,255,255,.15) 0%, rgba(255,255,255,.06) 100%);
  border:1px solid rgba(255,255,255,.20);
  box-shadow:0 8px 20px rgba(4,18,30,.24), inset 0 1px 0 rgba(255,255,255,.28);
  -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(255,255,255,.30) 0%, rgba(26,160,173,.22) 100%);
  border-color:rgba(255,255,255,.48);
  box-shadow:0 18px 38px rgba(4,18,30,.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,.52); 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(4,18,30,.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:#fff; 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,.80); 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(4,18,30,.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(26,160,173,.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:#fff; 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(26,160,173,.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:#9fb4bd; }
.crumb a{ color:#c5d4db; }
.crumb a:hover{ color:#fff; }
.crumb i{ font-size:.6rem; opacity:.6; }
.crumb .cur{ color:#7fd3da; }

/* ==========================================================================
   PRODUCT DETAIL
   ========================================================================== */
.pd-gallery{ position:sticky; top:104px; }
.pd-stage{ position:relative; background:linear-gradient(160deg,#f4f8fb 0%,#e8eff6 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; max-width:100%; max-height:100%; object-fit:contain; cursor:zoom-in; filter:drop-shadow(0 30px 42px rgba(13,40,60,.15)); }
.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(13,40,60,.08); box-shadow:0 12px 30px rgba(13,40,60,.16); cursor:pointer; transition:.28s var(--ease); }
.pd-videobtn:hover{ background:#fff; transform:translateY(-2px); box-shadow:0 18px 38px rgba(13,40,60,.22); }
.pd-videobtn__ic{ width:40px; height:40px; border-radius:50%; background:var(--c-primary); color:#fff; 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:rgba(6,20,32,.86); -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); filter:drop-shadow(0 30px 60px rgba(0,0,0,.45)); }
.pd-lb__close{ position:absolute; top:22px; right:26px; width:48px; height:48px; border-radius:50%; border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.08); color:#fff; 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,#f6f8fc 0%, #ffffff 55%); }
.pd-crumb{ background:linear-gradient(160deg,#eef1fb 0%,#f5ecef 55%,#e8f1fb 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); }
.pd-crumb i{ font-size:.58rem; opacity:.5; }
.pd-crumb .cur{ color:var(--c-primary); 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-d); 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-2); 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:#fff; 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); }
.pd-tabnav{
  position:relative; display:flex; gap:2px; flex-wrap:nowrap;
  padding:6px; border-radius:999px;
  background:linear-gradient(180deg,#f4f8f8 0%,#eef4f4 100%);
  border:1px solid var(--c-line);
  box-shadow:inset 0 1px 2px rgba(16,44,50,.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(14,124,134,.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:#fff; }
.pd-tabnav button.active i{ opacity:1; }
.pd-tabnav button:focus-visible{ outline:2px solid var(--c-primary-d, #0b6169); 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, #0b6169);
  transition:background .28s var(--ease), color .28s var(--ease);
}
.pd-tabnav button.active .pd-tabnav__n{ background:rgba(255,255,255,.24); color:#fff; }

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

@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 */
.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); }
.doc-row__ic{ width:46px; height:46px; border-radius:12px; background:#fde8e8; color:#d33; 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-2); }

/* ==========================================================================
   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:#9fb4bd; }
.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); }
.m-footer__cta h2{ color:#fff; font-size:clamp(1.5rem,3vw,2.2rem); margin:0; }
.m-footer__cta p{ color:rgba(255,255,255,.85); margin:8px 0 0; }
.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:#9fb4bd; }
.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:#7d909a; }
.m-footer__news button{ width:48px; border:none; border-radius:var(--r-sm); background:var(--c-primary); color:#fff; 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:#cdd9de; 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; right: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; }
.m-totop{ position:fixed; bottom:24px; left: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; }
.m-totop.show{ opacity:1; visibility:visible; transform:translateY(0); }

/* ==========================================================================
   LISTING (products)
   ========================================================================== */
.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:#fff !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; }
.listing-cta i{ font-size:1.8rem; color:var(--c-primary-l); margin-bottom:14px; }
.listing-cta h5{ color:#fff; font-size:1.05rem; margin-bottom:8px; }
.listing-cta p{ color:#9fb4bd; 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:
    linear-gradient(180deg, rgba(8,26,44,.72) 0%, rgba(8,26,44,.42) 45%, rgba(8,26,44,.76) 100%),
    radial-gradient(70% 60% at 50% 40%, rgba(14,124,134,.20) 0%, rgba(14,124,134,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(4,16,28,.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, #57d5db); }

.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(6,22,38,.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, #57d5db); }
.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);
}
.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(6,22,38,.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:#fff; }
.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(10,37,64,.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(10,37,64,.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(6,22,38,.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%; }
}

.empty-state{ text-align:center; padding:80px 20px; border:1px dashed var(--c-line-2); border-radius:var(--r-lg); }
.empty-state i{ font-size:3rem; color:var(--c-line-2); margin-bottom:18px; }
.empty-state h3{ font-size:1.3rem; margin-bottom:8px; }
.empty-state p{ color:var(--c-muted); }

/* 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:#fff; }
.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; }

.contact-card{ background:#fff; border:1px solid var(--c-line); border-radius:var(--r-lg); padding:30px; height:100%; }
.contact-card__ic{ width:54px; height:54px; border-radius:14px; background:var(--c-primary-soft); color:var(--c-primary-d); 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); }
.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; }
.doc-card__media img{ width:100%; height:100%; 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, #edeffb 0%, #f5ecef 46%, #e8f1fb 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:.9; 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(140,152,235,.82), rgba(140,152,235,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(246,186,196,.84), rgba(246,186,196,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(150,196,246,.84), rgba(150,196,246,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(10,37,64,.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(10,37,64,.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(10,37,64,.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(10,37,64,.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:#0a2540; 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:contain; object-position:center; filter:drop-shadow(0 40px 54px rgba(13,40,60,.22)); }
.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(13,40,60,.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(13,40,60,.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(13,40,60,.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:#fff; transform:translateY(-2px); }
.hxs__tabs{ display:flex; gap:10px; flex:1; }
.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(13,40,60,.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(13,40,60,.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(13,40,60,.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(10,37,64,.55);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.hxs__tab.is-active .hxs__tabdesc{ color:rgba(10,37,64,.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(10,37,64,.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(13,40,60,.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; }
  .hxs__grid{ grid-template-columns:1fr; gap:0; padding:clamp(54px,8vh,80px) 0 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(10,37,64,.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:#fff; }
.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; }
}

/* ==========================================================================
   SPLASH / INTRO — 1 sn animasyonlu açılış (oturumda bir kez)
   ========================================================================== */
#splash{ position:fixed; inset:0; z-index:99999; display:grid; place-items:center;
  background:linear-gradient(160deg,#eef1fb 0%,#f5ecef 48%,#e8f1fb 100%);
  animation:splashOut .6s var(--ease) 1.15s forwards; }
.no-splash #splash{ display:none; }
.splash__inner{ display:flex; flex-direction:column; align-items:center; gap:26px; }
.splash__logo{ width:min(340px,64vw); height:auto; opacity:0; transform:translateY(10px) scale(.96); animation:splashLogo .9s var(--ease) .05s forwards; }
.splash__bar{ width:150px; height:3px; border-radius:3px; background:rgba(12,121,176,.16); overflow:hidden; }
.splash__bar span{ display:block; height:100%; width:100%; border-radius:3px; background:linear-gradient(90deg,#0C79B0,#7ABA49); transform:translateX(-100%); animation:splashBar 1.1s var(--ease) .1s forwards; }
@keyframes splashLogo{ to{ opacity:1; transform:none; } }
@keyframes splashBar{ to{ transform:translateX(0); } }
@keyframes splashOut{ to{ opacity:0; visibility:hidden; } }
@media (prefers-reduced-motion: reduce){ #splash{ animation-delay:.3s; } .splash__logo{ animation:none; opacity:1; transform:none; } .splash__bar span{ animation-duration:.4s; } }

/* ==========================================================================
   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(6,20,32,.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(6,20,32,.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(6,20,32,.2); transition:.25s var(--ease); }
.m-popup__close:hover{ background:var(--c-primary); color:#fff; 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(8,26,44,.78) 0%, rgba(8,26,44,.52) 45%, rgba(8,26,44,.82) 100%),
    radial-gradient(70% 60% at 50% 40%, rgba(14,124,134,.20) 0%, rgba(14,124,134,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:#7fd8de; }
.rx-hero--video .eyebrow::before{ background:#7fd8de; }
/* 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(13,40,60,.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:#17a5a0; }
.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:#17a5a0; }
.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:#17a5a0; }
.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:#fff; 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:#dde5ee; 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(10,37,64,.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,#0a2135 0%,#103a4e 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(26,160,173,.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:#cddbe2; font-size:.95rem; }
.qform-aside .pd-highlights li i{ color:#7fd3da; }
.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:#7fd3da; }
.qform-contact a i{ color:#7fd3da; 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:#fff; 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,#0a2135,#103a4e); 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(26,160,173,.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:#b9cad3; 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,#0a2135 0%,#103a4e 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(26,160,173,.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:#7fd3da; }
.catx__body .eyebrow::before{ background:#7fd3da; }
.catx__body h2{ color:#fff; font-size:clamp(1.6rem,3vw,2.35rem); margin:0 0 14px; }
.catx__body p{ color:#b9cad3; 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:#cdd9de; }
.catx__feat i{ color:#7fd3da; }
.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,#0C79B0,#15A3DE); box-shadow:0 40px 70px rgba(6,20,32,.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; }
.catx__book-in img{ width:100%; max-width:170px; filter:brightness(0) invert(1); opacity:.97; }
.catx__book-in b{ font-family:var(--f-head); font-weight:700; font-size:1.15rem; color:#fff; display:block; }
.catx__book-in span{ font-size:.7rem; letter-spacing:.24em; text-transform:uppercase; color:rgba(255,255,255,.82); }
@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,#edeffb 0%,#f5ecef 46%,#e8f1fb 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(246,186,196,.8),rgba(246,186,196,0) 62%); }
.mnav__blob--2{ width:min(56vw,640px); aspect-ratio:1; left:-10%; bottom:-20%; background:radial-gradient(circle,rgba(150,196,246,.82),rgba(150,196,246,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(10,37,64,.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(10,37,64,.1); display:grid; place-items:center; color:var(--c-ink); transition:.25s var(--ease); }
.mnav__social a:hover{ background:var(--c-primary); color:#fff; 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(10,37,64,.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(7,28,44,.90) 0%, rgba(7,28,44,.72) 28%, rgba(7,28,44,.28) 58%, rgba(7,28,44,.10) 100%),
    linear-gradient(0deg, rgba(7,28,44,.62) 0%, rgba(7,28,44,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(14,124,134,.13) 0%, rgba(14,124,134,0) 60%),
    radial-gradient(85% 65% at 8% 4%,     rgba(10,37,64,.045) 0%, rgba(10,37,64,0) 62%),
    linear-gradient(180deg, #ffffff 0%, #f8fbfc 52%, #ecf5f7 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__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 34px 46px rgba(10,37,64,.11)); }
.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 */
  .mroom__nav{ top:auto; bottom:-6px; margin-top:0; transform:none; }
  .mroom__nav--prev{ left:calc(50% - 62px); }
  .mroom__nav--next{ right:calc(50% - 62px); }
  .mroom__caps{ margin-top:clamp(40px,7vh,58px); }
}

@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:#f5f8f8; 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(16,44,50,.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(26,160,173,.30) 0%, transparent 55%),
    radial-gradient(90% 120% at -10% 110%, rgba(14,124,134,.26) 0%, transparent 60%),
    linear-gradient(148deg, #0d2b45 0%, #0a2540 46%, #071a2c 100%);
  box-shadow:0 30px 70px rgba(10,37,64,.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(127,211,218,.22) 0%, rgba(127,211,218,.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:#7fd3da;
}
.pdx__eyebrow::before{
  content:""; width:30px; height:2px; border-radius:2px;
  background:linear-gradient(90deg, #7fd3da, rgba(127,211,218,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, #57d5db); }
/* 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%,#f2f7f9 52%,#e7f0f3 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(10,37,64,.20) 0%, transparent 72%);
  filter:blur(4px);
}
/* Kareler üst üste; giren yönünden kayarak gelir, çıkan yerinde solar. */
.pdx__shot{
  position:absolute; inset:0; margin:auto; z-index:2;
  max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain;
  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(26,160,173,.42);
}
.pdx__arrow:active{ transform:translateY(0); }
.pdx__arrow:focus-visible{ outline:2px solid #7fd3da; 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), #7fd3da);
}
.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:#c3d0de; }
.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(10,37,64,.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(10,37,64,.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(7,26,44,.94) 0%, rgba(7,26,44,.62) 34%, rgba(7,26,44,.22) 66%, rgba(7,26,44,.40) 100%),
    linear-gradient(96deg, rgba(7,26,44,.80) 0%, rgba(7,26,44,.50) 34%, rgba(7,26,44,.10) 66%, rgba(7,26,44,0) 88%),
    radial-gradient(90% 70% at 12% 100%, rgba(14,124,134,.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(7,26,44,.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; }
}

/* Hareket azaltma: videoyu durdurup poster karesinde bırak. Kullanıcı
   hareket istemiyorsa arka planda dönen bir video en rahatsız edici olan. */
@media (prefers-reduced-motion: reduce){
  .abv__media{ display:none; }
  .abv{
    background:var(--c-ink) url('/assets/video/medical2000-kurumsal-poster.jpg') center/cover no-repeat;
  }
  .abn__item{ transition:none; }
}