/* ===================================================================
   VOIS Süite — çok sayfalı tanıtım sitesi
   Marka: amber #F5BA12 + siyah + beyaz · Font: Inter · Emoji yok
=================================================================== */

:root{
  /* Madde içi kıl çizgisinin içerikle mesafesi — TEK yerden (kural 7). */
  --kil-ara:14px;
  --accent:#F5BA12;--accent-d:#E0A800;--accent-ink:#1c1500;
  /* amber DOLGU için --accent, beyaz zeminde METİN için --accent-text (AA) */
  --accent-text:#8A6200;
  --accent-soft:#FEF6E0;--accent-soft-line:#F3E3AD;
  --black:#0E0E0E;--dark:#171717;--dark-2:#212121;
  --ink:#1F2937;--ink-2:#374151;--muted:#6B7280;--muted-2:#9CA3AF;
  --line:#E8E9ED;--line-2:#EFF0F3;--canvas:#FBFBFC;--surface:#FFFFFF;
  --radius:16px;--radius-lg:24px;--radius-sm:10px;
  --shadow-sm:0 1px 2px rgba(16,16,16,.05),0 1px 3px rgba(16,16,16,.04);
  --shadow:0 8px 24px -8px rgba(16,16,16,.12),0 2px 6px rgba(16,16,16,.05);
  --shadow-lg:0 40px 80px -24px rgba(16,16,16,.26),0 12px 28px -12px rgba(16,16,16,.15);
  --shadow-amber:0 16px 36px -14px rgba(245,186,18,.55);
  --maxw:1180px;--ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:'Inter',system-ui,sans-serif;color:var(--ink);background:var(--canvas);
  font-size:16.5px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  line-height:1.6;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 24px}

/* icons */
.ic{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ic--xs{width:15px;height:15px}
.ic--caret{width:14px;height:14px;opacity:.55;transform:rotate(90deg);transition:transform .25s}
.stars .ic{fill:currentColor;stroke:none}
.svc__ic .ic,.feat__ic .ic,.integ-card>.ic,.floatcard>.ic,.fcard__ic .ic{stroke-width:1.9}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:15px;
  padding:11px 20px;border-radius:999px;transition:.25s var(--ease);white-space:nowrap;
  border:1.5px solid transparent;line-height:1}
.btn--lg{padding:15px 28px;font-size:16px}
.btn--block{width:100%;justify-content:center}
.btn--amber{background:var(--accent);color:var(--accent-ink);box-shadow:var(--shadow-amber)}
.btn--amber:hover{background:var(--accent-d);transform:translateY(-2px)}
.btn--dark{background:var(--black);color:#fff}
.btn--dark:hover{background:var(--dark-2);transform:translateY(-2px)}
.btn--outline{background:#fff;color:var(--ink);border-color:var(--line)}
.btn--outline:hover{border-color:var(--black);transform:translateY(-2px)}
.btn--ghost-d{background:transparent;color:#fff;border-color:rgba(255,255,255,.22)}
.btn--ghost-d:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.4)}
.btn .ic{transition:transform .25s var(--ease)}
.btn:hover .ic{transform:translateX(3px)}

.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:18px}
.eyebrow .dot{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.eyebrow--amber{color:var(--accent-text)} .eyebrow--amber .ic{color:var(--accent-text)}
.eyebrow--amber-on-dark{color:var(--accent)}

.h2{font-size:clamp(26px,3.4vw,40px);font-weight:800;letter-spacing:-.022em;line-height:1.12;margin:0 0 16px}
.h2--light{color:#fff}
.h3{font-size:clamp(20px,2.2vw,26px);font-weight:800;letter-spacing:-.018em;margin:0 0 12px}
.lead{font-size:17px;color:var(--muted);max-width:560px;margin:0 0 26px;line-height:1.65}
.lead--center{margin-left:auto;margin-right:auto;text-align:center}
.lead--light{color:rgba(255,255,255,.66)}
.section-head{margin-bottom:48px} .section-head.center{text-align:center}
.link-cta{display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:15px;color:var(--accent-text)}
.link-cta .ic{transition:transform .25s var(--ease)} .link-cta:hover .ic{transform:translateX(4px)}

/* ===================== TOP STRIP ===================== */
/* Şerit AMBER zemin — "Vois Business" etiketi kaldırıldı (logo zaten hemen altta,
   iki kez marka adı gereksizdi). Zemin amber olunca tüm yazı SİYAHA çevrildi;
   marka kuralı gereği üçüncü renk yok. */
.topstrip{background:var(--accent);color:var(--black);font-size:12.5px;border-bottom:1px solid rgba(0,0,0,.10)}
.topstrip__in{display:flex;align-items:center;gap:0;height:38px;overflow:hidden}
.topstrip__trackwrap{flex:1;overflow:hidden;position:relative;
  mask-image:linear-gradient(90deg,transparent,#000 3%,#000 94%,transparent)}
.topstrip__track{display:flex;gap:14px;align-items:center;color:rgba(0,0,0,.78);white-space:nowrap;
  font-weight:600;width:max-content;animation:marquee 38s linear infinite}
.topstrip__track i{color:rgba(0,0,0,.38);font-style:normal}.topstrip__track span{flex:none}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.topstrip__login{flex:none;display:inline-flex;align-items:center;gap:6px;color:var(--black);font-weight:700;
  padding-left:18px}
.topstrip__login:hover{opacity:.7}

/* ===================== HEADER ===================== */
.header{position:sticky;top:0;z-index:90;background:var(--black);color:#fff;
  border-bottom:1px solid rgba(255,255,255,.07);transition:box-shadow .3s}
.header.is-stuck{box-shadow:0 10px 30px -12px rgba(0,0,0,.6)}
.header__in{display:flex;align-items:center;gap:22px;height:68px;position:relative}
.logo{display:inline-flex;align-items:center;flex:none}
/* YENI LOGO YATAY (12 Eyl 2026): eski logo 256x256 KARE tuvaldi, height:64 ile
   64px genislige denk geliyordu. Yeni yazi-logo 512x288 yatay -> ayni yukseklikte
   114px genisledi ve baslikta buyuk durdu. 64 -> 48 (olcumle secildi). */
.logo__img{height:48px;width:auto;display:block}

.nav{display:flex;align-items:center;gap:2px;margin-left:6px}
.nav__item{position:relative}
.nav__link{display:inline-flex;align-items:center;gap:5px;color:rgba(255,255,255,.8);
  font-size:15px;font-weight:500;padding:9px 13px;border-radius:10px;transition:.2s}
.nav__link:hover{color:#fff;background:rgba(255,255,255,.06)}
.nav__link.is-current{color:var(--accent)}
.has-mega:hover .ic--caret,.has-drop:hover .ic--caret{transform:rotate(-90deg)}
.header__cta{margin-left:auto;display:flex;align-items:center;gap:10px}
.header__cta .btn--ghost-d{font-size:14.5px;padding:10px 16px}

/* simple dropdown */
.drop{position:absolute;top:calc(100% + 12px);left:0;min-width:250px;background:#fff;color:var(--ink);
  border-radius:16px;padding:10px;box-shadow:var(--shadow-lg);border:1px solid var(--line);
  opacity:0;visibility:hidden;transform:translateY(8px);transition:.22s var(--ease);z-index:80}
.drop::before{content:'';position:absolute;top:-12px;left:0;right:0;height:12px}
.has-drop:hover .drop,.has-drop:focus-within .drop{opacity:1;visibility:visible;transform:translateY(0)}
.drop__a{display:block;padding:11px 13px;border-radius:11px;transition:.18s}
.drop__a b{font-size:14.5px;font-weight:700;display:block}
.drop__a span{font-size:12.5px;color:var(--muted)}
.drop__a:hover{background:var(--accent-soft)}

/* MEGA MENU (chexta tarzı) — header konteynerine hizalı, taşmaz */
.has-mega{position:static}
.mega{position:absolute;top:calc(100% + 12px);left:0;right:0;transform:translateY(8px);
  background:#fff;color:var(--ink);border-radius:20px;border:1px solid var(--line);
  box-shadow:var(--shadow-lg);padding:0;opacity:0;visibility:hidden;transition:.24s var(--ease);
  z-index:80;overflow:hidden}
.mega::before{content:'';position:absolute;top:-12px;left:0;right:0;height:12px}
.has-mega:hover .mega,.has-mega:focus-within .mega{opacity:1;visibility:visible;transform:translateY(0)}
.mega{display:grid;grid-template-columns:248px 1fr;grid-template-rows:1fr auto}
.mega__promo{grid-row:1;background:linear-gradient(160deg,#232323,#0c0c0c);color:#fff;padding:26px 24px;
  display:flex;flex-direction:column;position:relative;overflow:hidden}
.mega__promo::after{content:'';position:absolute;inset:0;background:radial-gradient(70% 60% at 30% 0%,rgba(245,186,18,.18),transparent 60%)}
.mega__eyebrow{position:relative;z-index:1;display:inline-flex;align-items:center;gap:8px;font-size:11px;
  font-weight:700;letter-spacing:.1em;color:rgba(255,255,255,.7);margin-bottom:14px}
.mega__eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--accent)}
.mega__promo b{position:relative;z-index:1;font-size:21px;font-weight:800;letter-spacing:-.02em}
.mega__promo p{position:relative;z-index:1;font-size:13.5px;color:rgba(255,255,255,.62);margin:10px 0 0;line-height:1.55}
.mega__kesfet{position:relative;z-index:1;margin-top:auto;padding-top:18px;display:inline-flex;align-items:center;
  gap:7px;font-weight:700;font-size:14px;color:var(--accent)}
.mega__kesfet .ic{transition:transform .25s} .mega__kesfet:hover .ic{transform:translateX(4px)}
.mega__cols{grid-row:1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;padding:22px 20px;min-width:0}
.mega__label{display:block;font-size:11px;font-weight:700;letter-spacing:.1em;color:var(--muted-2);
  padding:0 12px;margin-bottom:8px}
.mega__item{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:12px;transition:.16s;min-width:0}
.mega__chip{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;
  color:var(--ink-2);flex:none;transition:.18s}
.mega__chip .ic{width:17px;height:17px}
.mega__t b{display:block;font-size:13.5px;font-weight:700;line-height:1.25}
/* min-width:0 + normal sarma: uzun alt yazi sutunu genisletip paneli TASIRAMAZ;
   sigmayan yazi kirpilmak yerine alt satira iner (metin kaybi yok). */
.mega__t{min-width:0}
.mega__t small{font-size:11.5px;color:var(--muted);line-height:1.35;
  /* NİZAM: alt metin sarmalanırsa son kelime tek başına alt satıra düşüyor
     ve menü dağınık görünüyordu. Sarma kapatıldı; metinler tek satıra
     sığacak şekilde kısaltıldı, taşma ihtimaline karşı üç nokta var. */
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mega__item:hover{background:var(--accent-soft)}
.mega__item:hover .mega__chip{border-color:var(--accent);color:var(--accent-d);background:#fff}
.mega__item.is-current .mega__chip{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.mega__item.is-current b{color:var(--accent-d)}
.mega__foot{grid-column:1/-1;grid-row:2;display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:var(--kil-ara) 22px;background:var(--canvas);border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
.mega__foot>span{display:inline-flex;align-items:center;gap:8px}
.mega__foot .ic{color:var(--accent-d)}
.mega__foot-cta{display:flex;align-items:center;gap:14px}
.mega__foot-cta a{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:13.5px;color:var(--ink)}
.mega__foot-cta a:hover{color:var(--accent-d)}
.mega__foot-amber{background:var(--accent);color:var(--accent-ink)!important;padding:8px 16px;border-radius:999px;
  box-shadow:var(--shadow-amber)}
.mega__foot-amber:hover{background:var(--accent-d)}

/* mobile nav */
.burger{display:none;width:42px;height:42px;border-radius:10px;color:#fff;background:rgba(255,255,255,.08);place-items:center}
.burger .ic{width:22px;height:22px}
/* ── AÇILIR MENÜ TASARIMI ─────────────────────────────────────────────────
   Eskiden tek kural vardı (`.mobnav a`) ve 16 madde düz alt alta diziliyordu:
   ürün, şirket ve hesap bağlantıları aynı sırada, hiçbir hiyerarşi yok.
   Menü artık dört öbek; her öbek küçük bir bölüm etiketi taşır, ürünler
   ikon + ad + alt etiketle gelir. Menü tam yükseklik kaplar; üst kenardaki
   maske, kayan maddenin bıçakla kesilmiş görünmesini engeller. */
.mobnav{display:none;position:fixed;inset:106px 0 0 0;z-index:85;background:var(--black);
  flex-direction:column;overflow:hidden}
.mobnav.is-open{display:flex}
.mobnav__in{flex:1;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  padding:6px 18px 40px;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 14px);
          mask-image:linear-gradient(to bottom,transparent 0,#000 14px)}

.mobnav__grp{padding:18px 0 6px}
.mobnav__grp + .mobnav__grp{border-top:1px solid rgba(255,255,255,.09);padding-top:22px;margin-top:10px}
.mobnav__lbl{margin:0 0 10px;font-size:11px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.38)}

.mobnav__it{display:flex;align-items:center;gap:13px;padding:11px 0;
  color:rgba(255,255,255,.92);border-bottom:1px solid rgba(255,255,255,.06)}
.mobnav__grp .mobnav__it:last-child{border-bottom:0}
.mobnav__ic{flex:none;width:34px;height:34px;display:grid;place-items:center;border-radius:10px;
  background:rgba(255,255,255,.06);color:var(--accent)}
.mobnav__tx{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.mobnav__tx b{font-size:16px;font-weight:700;letter-spacing:-.01em;line-height:1.25}
.mobnav__tx small{font-size:12.5px;font-weight:500;color:rgba(255,255,255,.44);line-height:1.3}
.mobnav__it--sade{padding:13px 0}
.mobnav__it--sade .mobnav__tx b{font-size:16.5px}
.mobnav__dis{flex:none;color:rgba(255,255,255,.3);transform:rotate(-45deg)}

.mobnav__it.is-current{color:var(--accent)}
.mobnav__it.is-current .mobnav__tx b{color:var(--accent)}
.mobnav__it.is-current .mobnav__ic{background:rgba(245,186,18,.14)}

/* ===================== GENERIC HERO ===================== */
.hero{position:relative;padding:74px 0 0;overflow:hidden;background:var(--canvas)}
.hero__bg{position:absolute;inset:0;z-index:0;
  background:radial-gradient(60% 55% at 78% 8%,rgba(245,186,18,.2),transparent 60%),
  radial-gradient(50% 45% at 8% 0%,rgba(245,186,18,.09),transparent 55%),
  radial-gradient(40% 40% at 90% 60%,rgba(245,186,18,.09),transparent 60%)}
.hero__bg::after{content:'';position:absolute;inset:0;
  background-image:linear-gradient(var(--line-2) 1px,transparent 1px),linear-gradient(90deg,var(--line-2) 1px,transparent 1px);
  background-size:46px 46px;mask-image:radial-gradient(70% 60% at 50% 30%,#000,transparent 75%);opacity:.5}
.hero__in{position:relative;z-index:1;display:grid;grid-template-columns:1.02fr 1.16fr;gap:48px;align-items:center;padding-bottom:24px}
.hero__title{font-size:clamp(38px,5vw,58px);font-weight:900;letter-spacing:-.035em;line-height:1.05;margin:0 0 20px}
.hero__title .hl{color:var(--accent-d);position:relative;white-space:nowrap}
.hero__title .hl::after{content:'';position:absolute;left:0;right:0;bottom:.05em;height:.16em;background:var(--accent);opacity:.32;border-radius:2px;z-index:-1}
.hero__sub{font-size:18px;color:var(--muted);max-width:520px;margin:0 0 28px;line-height:1.62}
.hero__btns{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:34px}
.hero__stats{display:flex;gap:34px;flex-wrap:wrap}
.hero__stats div{display:flex;flex-direction:column}
.hero__stats b{font-size:25px;font-weight:800;letter-spacing:-.02em}
.hero__stats span{font-size:13px;color:var(--muted)}
.hero__right{position:relative}

/* browser mockup */
.browser{background:#fff;border-radius:14px;box-shadow:var(--shadow-lg);overflow:hidden;border:1px solid var(--line);transition:transform .4s var(--ease)}
.browser__bar{display:flex;align-items:center;gap:7px;padding:11px 14px;background:#f4f4f6;border-bottom:1px solid var(--line)}
.browser__bar .d{width:11px;height:11px;border-radius:50%}
.browser__bar .r{background:#ff5f57}.browser__bar .y{background:#febc2e}.browser__bar .g{background:#28c840}
.browser__url{margin-left:10px;display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--muted);
  background:#fff;border:1px solid var(--line);padding:5px 12px;border-radius:7px;flex:1;max-width:360px;overflow:hidden;white-space:nowrap}
.browser__url .ic{color:#28c840;width:13px;height:13px}
.browser img{width:100%;display:block}
.browser--hero{transform:perspective(1600px) rotateY(-7deg) rotateX(2deg)}
.browser--hero:hover{transform:perspective(1600px) rotateY(-3deg) rotateX(1deg) translateY(-4px)}

.floatcard{position:absolute;display:flex;align-items:center;gap:11px;background:#fff;padding:12px 15px;
  border-radius:14px;box-shadow:var(--shadow-lg);border:1px solid var(--line);z-index:3;
  /* Kart zemini her zaman BEYAZ. Koyu bir bölümün içinde durduğunda metin
     rengi mirasla #fff geliyor ve beyaz üstüne beyaz okunmuyordu (Akıllı Ev
     hero'sundaki "Canlı enerji"). Rengi kartın kendisi sabitler. */
  color:var(--ink)}
.floatcard b{display:block;font-size:14px;font-weight:700;line-height:1.2;color:var(--ink)}
.floatcard small{font-size:12px;color:var(--muted)}
.floatcard>.ic{color:var(--accent-d);background:var(--accent-soft);border-radius:9px;padding:7px;box-sizing:content-box;width:18px;height:18px}
.floatcard--call{bottom:-22px;left:-26px;animation:floaty 5s ease-in-out infinite}
.floatcard--call .floatcard__pulse{width:11px;height:11px;border-radius:50%;background:#28c840;position:relative}
.floatcard--call .floatcard__pulse::after{content:'';position:absolute;inset:-5px;border-radius:50%;border:2px solid #28c840;opacity:.5;animation:pulse 1.8s ease-out infinite}
.floatcard--sync{top:30px;right:-22px;animation:floaty 6s ease-in-out infinite .6s}
.floatcard--step{bottom:-20px;right:-12px;animation:floaty 5.5s ease-in-out infinite .3s}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes pulse{from{transform:scale(.7);opacity:.6}to{transform:scale(1.8);opacity:0}}

.trustbar{display:flex;align-items:center;gap:26px;padding:30px 24px;margin-top:30px;border-top:1px solid var(--line);flex-wrap:wrap}
.trustbar>span{font-size:11.5px;font-weight:700;letter-spacing:.12em;color:var(--muted)}
.trustbar__items{display:flex;gap:26px;flex-wrap:wrap}
.trustbar__items i{display:inline-flex;align-items:center;gap:8px;font-style:normal;font-size:14px;font-weight:600;color:var(--ink)}
.trustbar__items .ic{color:var(--accent-d);width:18px;height:18px}

/* ===================== PRODUCT HERO ===================== */
.phero{position:relative;overflow:hidden;background:var(--black);color:#fff;padding:64px 0 72px}
.phero__bg{position:absolute;inset:0;background:radial-gradient(50% 60% at 80% 0%,rgba(245,186,18,.2),transparent 60%),radial-gradient(40% 50% at 0% 100%,rgba(245,186,18,.08),transparent 60%)}
.phero__in{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1.12fr;gap:48px;align-items:center}
.phero__badge{display:inline-flex;align-items:center;gap:9px;background:rgba(245,186,18,.13);color:var(--accent);
  border:1px solid rgba(245,186,18,.28);padding:7px 14px;border-radius:999px;font-size:13px;font-weight:700;margin-bottom:20px}
.phero__badge .ic{width:16px;height:16px}
.phero h1{font-size:clamp(34px,4.6vw,52px);font-weight:900;letter-spacing:-.035em;line-height:1.06;margin:0 0 18px}
.phero h1 .hl{color:var(--accent)}
.phero__sub{font-size:18px;color:rgba(255,255,255,.68);max-width:520px;margin:0 0 28px;line-height:1.62}
.phero__btns{display:flex;gap:13px;flex-wrap:wrap;margin-bottom:30px}
.phero__chips{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:440px}
.phero__chips span{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:rgba(255,255,255,.82);
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);padding:9px 14px;border-radius:12px}
.phero__chips .ic{color:var(--accent);width:15px;height:15px}
.phero__shot{position:relative}
.phero .browser{transform:perspective(1600px) rotateY(-6deg) rotateX(2deg)}
.phero .browser:hover{transform:perspective(1600px) rotateY(-2deg) translateY(-4px)}

/* stat band under product hero */
.stat-band{display:grid;grid-template-columns:repeat(4,1fr);gap:0;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;margin-top:-36px;position:relative;z-index:5;box-shadow:var(--shadow)}
.stat-band>div{padding:24px 26px;border-right:1px solid var(--line)}
.stat-band>div:last-child{border-right:none}
.stat-band b{display:block;font-size:28px;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.stat-band span{font-size:13.5px;color:var(--muted)}

/* ===================== FEATURE ROWS (alternating) ===================== */
.frows{padding:88px 0}
.frow{display:grid;grid-template-columns:1fr 1.12fr;gap:56px;align-items:center;margin-bottom:84px}
.frow:last-child{margin-bottom:0}
.frow--rev .frow__media{order:-1}
.frow__eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--accent-d);margin-bottom:14px}
.frow__eyebrow .ic{width:16px;height:16px}
.frow h3{font-size:clamp(22px,2.6vw,30px);font-weight:800;letter-spacing:-.02em;margin:0 0 14px;line-height:1.15}
.frow>div>p{font-size:16.5px;color:var(--muted);margin:0 0 20px;line-height:1.62;max-width:480px}
.frow__media{position:relative}
.frow .browser{box-shadow:var(--shadow-lg)}
.ticklist{list-style:none;padding:0;margin:0 0 24px;display:grid;gap:12px}
.ticklist li{display:flex;align-items:flex-start;gap:11px;font-size:15.5px;color:var(--ink-2)}
.ticklist li .ic{color:var(--accent-d);margin-top:2px;background:var(--accent-soft);border-radius:50%;padding:4px;box-sizing:content-box;width:13px;height:13px}

/* ===================== FEATURE CARDS ===================== */
.fcards-sec{padding:88px 0;background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.fcards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.fcard{padding:24px;border-radius:var(--radius);border:1px solid var(--line);background:var(--surface);transition:.26s var(--ease);position:relative;overflow:hidden}
.fcard::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.fcard:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--accent-soft-line)}
.fcard:hover::before{transform:scaleX(1)}
.fcard__ic{width:46px;height:46px;border-radius:12px;background:var(--accent-soft);color:var(--accent-d);display:grid;place-items:center;margin-bottom:16px}
.fcard__ic .ic{width:23px;height:23px}
.fcard h4{font-size:17px;font-weight:800;letter-spacing:-.01em;margin:0 0 8px}
.fcard p{font-size:14px;color:var(--muted);margin:0;line-height:1.55}

/* ===================== SERVICES GRID (landing) ===================== */
.services{padding:90px 0;background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.svc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.svc{padding:24px;border-radius:var(--radius);border:1px solid var(--line);background:var(--surface);transition:.28s var(--ease);position:relative;overflow:hidden;display:flex;flex-direction:column}
.svc::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.svc:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:var(--accent-soft-line)}
.svc:hover::before{transform:scaleX(1)}
.svc__ic{width:48px;height:48px;border-radius:12px;background:var(--accent-soft);color:var(--accent-d);display:grid;place-items:center;margin-bottom:16px}
.svc__ic .ic{width:24px;height:24px}
.svc h3{font-size:17.5px;font-weight:800;letter-spacing:-.01em;margin:0 0 8px}
.svc p{font-size:14px;color:var(--muted);margin:0 0 16px;line-height:1.55;flex:1}
.svc .link-cta{font-size:14px}

/* ===================== TABS (landing) ===================== */
.tabs{padding:36px 0 90px}
.tabbar{display:flex;justify-content:center;gap:6px;flex-wrap:wrap;margin-bottom:42px;background:#fff;padding:8px;
  border-radius:999px;border:1px solid var(--line);box-shadow:var(--shadow-sm);width:fit-content;margin-left:auto;margin-right:auto;max-width:100%}
.tab{display:inline-flex;align-items:center;gap:8px;padding:11px 19px;border-radius:999px;font-size:15px;font-weight:600;color:var(--muted);transition:.22s var(--ease)}
.tab .ic{color:var(--muted-2)} .tab:hover{color:var(--ink)}
.tab.is-active{background:var(--black);color:#fff} .tab.is-active .ic{color:var(--accent)}
.tabpane{display:none;grid-template-columns:1fr 1.16fr;gap:52px;align-items:center;animation:fadeUp .5s var(--ease)}
.tabpane.is-active{display:grid}
.tabpane__copy p{color:var(--muted);font-size:16px;margin:0 0 20px;max-width:460px}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* ===================== WHY (dark) ===================== */
.why{position:relative;padding:94px 0;background:var(--black);color:#fff;overflow:hidden}
.why__bg{position:absolute;inset:0;background:radial-gradient(50% 50% at 50% -10%,rgba(245,186,18,.16),transparent 60%),radial-gradient(40% 50% at 100% 100%,rgba(245,186,18,.07),transparent 60%)}
.why .wrap{position:relative;z-index:1}
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.feat{padding:24px;border-radius:var(--radius);background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08);transition:.28s var(--ease)}
.feat:hover{background:rgba(255,255,255,.06);border-color:rgba(245,186,18,.3);transform:translateY(-4px)}
.feat__ic{width:44px;height:44px;border-radius:11px;display:grid;place-items:center;background:rgba(245,186,18,.14);color:var(--accent);margin-bottom:16px}
.feat__ic .ic{width:22px;height:22px}
.feat b{display:block;font-size:16px;font-weight:700;margin-bottom:7px}
.feat span{font-size:13.5px;color:rgba(255,255,255,.6);line-height:1.5}

/* ===================== INTEGRATIONS ===================== */
.integ{padding:90px 0}
.integ__in{display:grid;grid-template-columns:.85fr 1.15fr;gap:52px;align-items:center}
.integ__grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.integ-card{display:flex;flex-direction:column;gap:4px;padding:22px;border-radius:var(--radius);background:#fff;border:1px solid var(--line);transition:.26s var(--ease)}
.integ-card:hover{border-color:var(--accent-soft-line);box-shadow:var(--shadow);transform:translateY(-3px)}
.integ-card>.ic{width:30px;height:30px;color:var(--accent-d);margin-bottom:8px}
.integ-card b{font-size:16px;font-weight:700}.integ-card span{font-size:13px;color:var(--muted)}

/* ===================== TESTIMONIALS ===================== */
.testi{padding:90px 0;background:#fff;border-top:1px solid var(--line)}
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.quote{margin:0;padding:30px;border-radius:var(--radius-lg);background:var(--canvas);border:1px solid var(--line);display:flex;flex-direction:column;gap:18px;transition:.26s var(--ease)}
.quote:hover{box-shadow:var(--shadow);transform:translateY(-4px);border-color:var(--accent-soft-line)}
.stars{display:flex;gap:3px;color:var(--accent)}.stars .ic{width:18px;height:18px}
.quote blockquote{margin:0;font-size:16px;line-height:1.6;color:var(--ink);font-weight:500}
.quote figcaption{display:flex;align-items:center;gap:13px;margin-top:auto}
.av{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:15px;color:#fff;flex:none}
.av--1{background:linear-gradient(140deg,#3a3a3a,#101010)}
.av--2{background:linear-gradient(140deg,var(--accent),var(--accent-d));color:var(--accent-ink)}
.av--3{background:linear-gradient(140deg,#4b4b4b,#1a1a1a)}
.quote figcaption b{display:block;font-size:15px;font-weight:700}
.quote figcaption small{font-size:12.5px;color:var(--muted)}

/* ===================== PRICING ===================== */
.pricing{padding:90px 0;background:var(--canvas)}
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:start}
.price{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:32px 28px;display:flex;flex-direction:column;transition:.28s var(--ease)}
.price:hover{box-shadow:var(--shadow);transform:translateY(-4px)}
.price__tag{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-d)}
.price h3{font-size:20px;font-weight:800;letter-spacing:-.01em;margin:10px 0 6px}
.price__d{font-size:14px;color:var(--muted);margin:0 0 20px;min-height:42px}
.price ul{list-style:none;padding:0;margin:0 0 26px;display:grid;gap:11px}
.price li{display:flex;align-items:center;gap:10px;font-size:14.5px}
.price li .ic{color:var(--accent-d);background:var(--accent-soft);border-radius:50%;padding:3px;box-sizing:content-box;width:12px;height:12px}
.price a{margin-top:auto}
.price--featured{background:var(--black);color:#fff;border-color:var(--black);box-shadow:var(--shadow-lg);transform:translateY(-10px)}
.price--featured:hover{transform:translateY(-14px)}
.price--featured .price__tag{color:var(--accent)}
.price--featured .price__d{color:rgba(255,255,255,.6)}
.price--featured li .ic{color:var(--accent);background:rgba(245,186,18,.16)}
.price__badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--accent);color:var(--accent-ink);font-size:12px;font-weight:800;padding:6px 16px;border-radius:999px;box-shadow:var(--shadow-amber);white-space:nowrap}

/* ===================== CTA ===================== */
.cta{position:relative;padding:90px 0;background:var(--black);color:#fff;overflow:hidden;text-align:center}
.cta__bg{position:absolute;inset:0;background:radial-gradient(45% 60% at 50% 0%,rgba(245,186,18,.24),transparent 62%),radial-gradient(40% 50% at 12% 100%,rgba(245,186,18,.1),transparent 60%),radial-gradient(40% 50% at 88% 100%,rgba(245,186,18,.1),transparent 60%)}
.cta__in{position:relative;z-index:1;max-width:760px;margin:0 auto}
.cta__title{font-size:clamp(28px,4vw,46px);font-weight:900;letter-spacing:-.03em;line-height:1.1;margin:0 0 16px}
.cta__title .hl{color:var(--accent)}
.cta__sub{font-size:17.5px;color:rgba(255,255,255,.66);margin:0 0 30px}
.cta__form{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;max-width:620px;margin:0 auto}
.cta__form input{flex:1;min-width:200px;padding:15px 20px;border-radius:999px;border:1.5px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);color:#fff;font-size:15px;font-family:inherit}
.cta__form input::placeholder{color:rgba(255,255,255,.45)}
.cta__form input:focus{outline:none;border-color:var(--accent);background:rgba(255,255,255,.1)}
.cta__note{margin:20px 0 0;font-size:13.5px;color:rgba(255,255,255,.55);display:inline-flex;align-items:center;gap:8px}
.cta__note .ic{color:var(--accent)}.cta__note.ok{color:var(--accent)}

/* ===================== FOOTER ===================== */
.footer{position:relative;background:var(--black);color:#fff;padding:68px 0 0;overflow:hidden}
.footer__top{display:grid;grid-template-columns:1.3fr 2fr;gap:48px;position:relative;z-index:1}
.logo--footer .logo__txt{font-size:19px}
.footer__tag{font-size:14.5px;color:rgba(255,255,255,.6);max-width:340px;margin:18px 0 20px;line-height:1.6}
.footer__contact{display:flex;flex-direction:column;gap:10px;margin-bottom:22px}
.footer__contact a{display:inline-flex;align-items:center;gap:9px;font-size:14.5px;color:rgba(255,255,255,.78);font-weight:500;width:fit-content}
.footer__contact a:hover{color:var(--accent)}.footer__contact .ic{color:var(--accent)}
.footer__news{display:flex;gap:8px;max-width:380px}
.footer__news input{flex:1;padding:12px 16px;border-radius:999px;border:1.5px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);color:#fff;font-size:14px;font-family:inherit}
.footer__news input::placeholder{color:rgba(255,255,255,.4)}
.footer__news input:focus{outline:none;border-color:var(--accent)}
.footer__news .btn{padding:11px 18px;font-size:14px}
.footer__newsnote{font-size:13px;color:var(--accent);margin:10px 2px 0;min-height:18px}
.footer__cols{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.footer__col h4{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.5);margin:0 0 16px}
.footer__col a{display:block;font-size:14.5px;color:rgba(255,255,255,.78);padding:7px 0;font-weight:500}
.footer__col a:hover{color:var(--accent)}
.footer__bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:26px 24px;margin-top:54px;border-top:1px solid rgba(255,255,255,.08);position:relative;z-index:1}
.footer__legal{display:flex;gap:18px;flex-wrap:wrap;align-items:center;font-size:13px;color:rgba(255,255,255,.5)}
.footer__legal a:hover{color:var(--accent)}
.footer__badges{display:flex;gap:10px;flex-wrap:wrap}
.tbadge{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:rgba(255,255,255,.7);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);padding:6px 12px;border-radius:999px}
.tbadge .ic{color:var(--accent)}
.footer__watermark{position:absolute;bottom:-3.2vw;left:50%;transform:translateX(-50%);font-size:25vw;font-weight:900;letter-spacing:-.04em;color:rgba(255,255,255,.022);line-height:.8;pointer-events:none;z-index:0;white-space:nowrap}

/* ===================== AKILLI EV PANEL MOCKUP (CSS) ===================== */
.hpanel{background:#fff;border-radius:14px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-lg);display:grid;grid-template-columns:172px 1fr;min-height:430px}
.browser .hpanel{border:none;border-radius:0;box-shadow:none;min-height:400px}
.hpanel__brand img{height:22px;width:auto}
.hpanel__side{background:#141414;color:#fff;padding:16px 12px;display:flex;flex-direction:column;gap:3px}
.hpanel__brand{display:flex;align-items:center;gap:9px;padding:6px 8px 16px}
.hpanel__brand .logo__mark{width:30px;height:30px;border-radius:8px}
.hpanel__brand b{font-size:14px;font-weight:800}.hpanel__brand small{display:block;font-size:10px;color:rgba(255,255,255,.5)}
.hpanel__nav{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:9px;font-size:12.5px;color:rgba(255,255,255,.7);font-weight:500}
.hpanel__nav .ic{width:16px;height:16px;color:rgba(255,255,255,.5)}
.hpanel__nav.on{background:var(--accent);color:var(--accent-ink)}.hpanel__nav.on .ic{color:var(--accent-ink)}
.hpanel__main{padding:18px 20px;background:var(--canvas)}
.hpanel__h{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.hpanel__h b{font-size:16px;font-weight:800}.hpanel__h small{font-size:11px;color:var(--muted)}
.hpanel__h .pill{font-size:11px;font-weight:700;color:var(--accent-ink);background:var(--accent);padding:5px 11px;border-radius:999px}
.hpanel__kpi{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
.hpanel__kpi div{background:#fff;border:1px solid var(--line);border-radius:11px;padding:12px}
.hpanel__kpi b{font-size:19px;font-weight:800;display:block}.hpanel__kpi span{font-size:10.5px;color:var(--muted)}
.hpanel__rooms{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.hroom{background:#fff;border:1px solid var(--line);border-radius:11px;padding:13px;display:flex;align-items:center;gap:11px}
.hroom__ic{width:36px;height:36px;border-radius:9px;background:var(--accent-soft);color:var(--accent-d);display:grid;place-items:center;flex:none}
.hroom__ic .ic{width:18px;height:18px}
.hroom b{font-size:13px;font-weight:700;display:block}.hroom small{font-size:11px;color:var(--muted)}
.hroom__sw{margin-left:auto;width:34px;height:19px;border-radius:999px;background:var(--accent);position:relative;flex:none}
.hroom__sw.off{background:var(--line)}
.hroom__sw::after{content:'';position:absolute;top:2px;left:17px;width:15px;height:15px;border-radius:50%;background:#fff;transition:.2s;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.hroom__sw.off::after{left:2px}

/* ===================== CROP / ZOOM SHOT (anlatılan noktaya odak) ===================== */
.crop{position:relative;aspect-ratio:16/10;overflow:hidden;background:#fff}
.crop img{display:block;width:100%;height:auto;transform:scale(var(--z,1));
  transform-origin:var(--fx,50%) var(--fy,50%);transition:transform .5s var(--ease)}
.browser:hover .crop img{transform:scale(calc(var(--z,1) * 1.04))}
.crop--tall{aspect-ratio:4/3}
.crop--wide{aspect-ratio:16/9}
.crop__tag{position:absolute;left:12px;bottom:12px;z-index:2;display:inline-flex;align-items:center;gap:7px;
  background:rgba(14,14,14,.86);color:#fff;font-size:12px;font-weight:600;padding:6px 12px;border-radius:999px;backdrop-filter:blur(4px)}
.crop__tag .ic{color:var(--accent);width:14px;height:14px}

/* ===================== CANLI DEMO — randevu takvimi (gantt) ===================== */
.demo{padding:90px 0;background:var(--canvas)}
.demo--dark{background:var(--black);color:#fff}
.demo__badge{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);
  color:var(--accent-d);font-size:12px;font-weight:700;letter-spacing:.06em;padding:7px 15px;border-radius:999px;box-shadow:var(--shadow-sm)}
.demo--dark .demo__badge{background:rgba(245,186,18,.13);border-color:rgba(245,186,18,.28);color:var(--accent)}
.demo__badge .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.demo--dark .demo__badge .dot{box-shadow:0 0 0 3px rgba(245,186,18,.18)}
.gantt{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-lg);overflow:hidden}
.gantt__scroll{overflow-x:auto}
.gantt__head{display:grid;background:var(--canvas);border-bottom:1px solid var(--line);min-width:760px}
.gantt__corner{padding:14px 18px;font-size:12.5px;font-weight:700;color:var(--muted);border-right:1px solid var(--line)}
.gantt__day{padding:10px 4px;text-align:center;border-right:1px solid var(--line-2)}
.gantt__day small{display:block;font-size:10.5px;color:var(--muted-2)}
.gantt__day b{font-size:14px;font-weight:700}
.gantt__row{display:grid;position:relative;border-bottom:1px solid var(--line-2);min-width:760px}
.gantt__row:last-child{border-bottom:none}
.gantt__rowlabel{grid-column:1;grid-row:1;padding:12px 16px;border-right:1px solid var(--line);display:flex;flex-direction:column;justify-content:center;background:#fff;z-index:2}
.gantt__rowlabel b{font-size:13.5px;font-weight:700}.gantt__rowlabel small{font-size:11.5px;color:var(--muted)}
.gantt__cellbg{grid-row:1;border-right:1px solid var(--line-2);min-height:58px}
.gantt__cellbg[data-today]{background:var(--accent-soft)}
.gbar{grid-row:1;align-self:center;margin:6px 4px;height:34px;border-radius:8px;border:none;color:#fff;
  font-size:11.5px;font-weight:600;padding:0 10px;text-align:left;cursor:pointer;overflow:hidden;white-space:nowrap;
  text-overflow:ellipsis;z-index:3;transition:.18s var(--ease);box-shadow:0 2px 6px rgba(0,0,0,.12)}
.gbar:hover{transform:translateY(-2px);box-shadow:0 8px 18px -4px rgba(0,0,0,.28);filter:brightness(1.05)}
.gbar.on{outline:2.5px solid var(--accent);outline-offset:2px}
.g-ok{background:var(--accent);color:var(--accent-ink)}
.g-go{background:#3b82f6}
.g-done{background:#10b981}
.g-wait{background:#94a3b8}
.gantt__legend{display:flex;gap:18px;flex-wrap:wrap;padding:var(--kil-ara) 18px;border-top:1px solid var(--line);font-size:12.5px;color:var(--muted)}
.lg{display:inline-flex;align-items:center;gap:7px}
.lg::before{content:'';width:11px;height:11px;border-radius:3px;display:inline-block}
.lg-ok::before{background:var(--accent)}.lg-go::before{background:#3b82f6}.lg-done::before{background:#10b981}.lg-wait::before{background:#94a3b8}
.gantt__detail{padding:var(--kil-ara) 18px;border-top:1px solid var(--line);background:var(--canvas);min-height:50px;display:flex;align-items:center}
.gantt__hint{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.gantt__hint .ic{color:var(--accent-d)}
.gantt__chosen{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--ink);
  background:#fff;border:1px solid var(--accent-soft-line);padding:8px 14px;border-radius:10px}

/* ===================== AGENT KONSOLU MOCKUP ===================== */
.acon{display:grid;grid-template-columns:150px 1fr;min-height:400px;background:var(--canvas)}
.browser .acon{min-height:380px}
.acon__side{background:#141414;color:#fff;padding:14px 11px;display:flex;flex-direction:column;gap:3px}
.acon__id{display:flex;align-items:center;gap:9px;padding:4px 6px 14px}
.acon__av{width:30px;height:30px;border-radius:50%;background:linear-gradient(140deg,var(--accent),var(--accent-d));display:grid;place-items:center;font-weight:800;font-size:12px;color:var(--accent-ink);flex:none}
.acon__id b{font-size:12.5px;font-weight:700;display:block}.acon__id small{font-size:10px;color:#10b981}
.acon__nav{display:flex;align-items:center;gap:9px;padding:8px 9px;border-radius:8px;font-size:12px;color:rgba(255,255,255,.7);font-weight:500}
.acon__nav .ic{width:15px;height:15px;color:rgba(255,255,255,.5)}
.acon__nav.on{background:var(--accent);color:var(--accent-ink)}.acon__nav.on .ic{color:var(--accent-ink)}
.acon__main{padding:16px 18px}
.acon__status{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.acon__pill{display:inline-flex;align-items:center;gap:7px;background:#d1fae5;color:#047857;font-size:12px;font-weight:700;padding:6px 13px;border-radius:999px}
.acon__pill::before{content:'';width:8px;height:8px;border-radius:50%;background:#10b981}
.acon__timer{margin-left:auto;font-size:13px;font-weight:700;color:var(--muted)}
.acall{background:#fff;border:1px solid var(--line);border-radius:13px;padding:16px;box-shadow:var(--shadow-sm);margin-bottom:12px}
.acall__top{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.acall__ic{width:42px;height:42px;border-radius:11px;background:var(--accent-soft);color:var(--accent-d);display:grid;place-items:center;flex:none}
.acall__ic .ic{width:21px;height:21px}
.acall__top b{font-size:16px;font-weight:800;display:block}.acall__top small{font-size:12px;color:var(--muted)}
.acall__t{margin-left:auto;text-align:right}.acall__t b{font-size:17px;color:var(--accent-d)}.acall__t small{display:block;font-size:10.5px;color:var(--muted-2)}
.acall__btns{display:flex;gap:8px;flex-wrap:wrap}
.acall__btns span{flex:1;text-align:center;font-size:12px;font-weight:600;padding:9px 6px;border-radius:9px;border:1px solid var(--line);color:var(--ink-2);min-width:64px}
.acall__btns .red{background:#fee2e2;border-color:#fecaca;color:#b42318}
.acall__btns .amber{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.adisp{display:flex;gap:7px;flex-wrap:wrap}
.adisp span{font-size:11.5px;font-weight:600;color:var(--muted);background:#fff;border:1px solid var(--line);padding:6px 11px;border-radius:999px}
.adisp span.on{background:var(--accent-soft);border-color:var(--accent-soft-line);color:var(--accent-d)}

/* ===================== SUPERVISOR WALLBOARD MOCKUP ===================== */
.wall{background:#0e0e0e;color:#fff;padding:18px 20px;min-height:400px}
.browser .wall{min-height:380px}
.wall__h{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.wall__h b{font-size:15px;font-weight:800}
.wall__h .live{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:700;color:var(--accent)}
.wall__h .live::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px rgba(245,186,18,.25)}
.wall__kpi{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}
.wall__kpi div{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:11px;padding:12px 13px}
.wall__kpi b{font-size:22px;font-weight:800;display:block;letter-spacing:-.02em}
.wall__kpi .amber{color:var(--accent)}.wall__kpi .green{color:#34d399}
.wall__kpi span{font-size:10.5px;color:rgba(255,255,255,.55)}
.wall__agents{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.agc{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:10px 11px}
.agc b{font-size:12px;font-weight:700;display:flex;align-items:center;gap:7px}
.agc b::before{content:'';width:7px;height:7px;border-radius:50%;flex:none}
.agc.busy b::before{background:#3b82f6}.agc.idle b::before{background:#10b981}.agc.brk b::before{background:var(--accent)}.agc.off b::before{background:#64748b}
.agc small{font-size:10.5px;color:rgba(255,255,255,.5)}

/* ===================== FAQ ACCORDION ===================== */
.faq-sec{padding:88px 0;background:#fff;border-top:1px solid var(--line)}
.faq{max-width:840px;margin:0 auto;display:grid;gap:12px}
.faq__item{border:1px solid var(--line);border-radius:14px;background:var(--surface);overflow:hidden;transition:border-color .2s}
.faq__item.open{border-color:var(--accent-soft-line)}
.faq__q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:19px 22px;font-weight:700;font-size:16px;text-align:left;color:var(--ink)}
.faq__q .ic{width:20px;height:20px;color:var(--accent-d);flex:none;transition:transform .25s var(--ease)}
.faq__item.open .faq__q .ic{transform:rotate(45deg)}
.faq__a{max-height:0;overflow:hidden;transition:max-height .3s var(--ease),padding .3s var(--ease);padding:0 22px;color:var(--muted);font-size:15px;line-height:1.6}
.faq__item.open .faq__a{max-height:260px;padding-bottom:20px}

/* ===================== İNTERAKTİF PROTOTİPLER ===================== */
.proto{background:#fff;font-size:13px;color:var(--ink);min-height:420px;display:flex;flex-direction:column}
.browser .proto{min-height:400px}
.proto__h{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:15px 18px;border-bottom:1px solid var(--line);background:var(--canvas)}
.proto__h b{font-size:15px;font-weight:800;display:block}
.proto__h small{font-size:11.5px;color:var(--muted)}
.proto__filters{display:flex;gap:6px;flex-wrap:wrap}
.pf{font-size:12px;font-weight:600;color:var(--muted);background:#fff;border:1px solid var(--line);padding:6px 12px;border-radius:999px;transition:.16s}
.pf:hover{color:var(--ink)} .pf.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}

/* CDR */
.cdr-wrap{overflow:auto;flex:1}
.cdr{width:100%;border-collapse:collapse;min-width:560px}
.cdr th{text-align:left;font-size:10.5px;font-weight:700;letter-spacing:.05em;color:var(--muted-2);padding:11px 16px;border-bottom:1px solid var(--line);position:sticky;top:0;background:#fff}
.cdr td{padding:12px 16px;border-bottom:1px solid var(--line-2);font-size:13px}
.cdr tr:hover td{background:var(--accent-soft)}
.cdr-num{font-variant-numeric:tabular-nums;font-weight:600}
.cdr-dir{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600}
.cdr-in{color:#047857}.cdr-out{color:#1d4ed8}.cdr-out .ic{transform:rotate(-45deg)}
.cdr-badge{font-size:11px;font-weight:700;padding:4px 10px;border-radius:999px}
.cdr-ok{background:#d1fae5;color:#047857}.cdr-miss{background:#fee2e2;color:#b42318}.cdr-busy{background:var(--accent-soft);color:var(--accent-d)}
.cdr-play{width:30px;height:30px;border-radius:8px;background:var(--accent-soft);color:var(--accent-d);display:grid;place-items:center;border:1px solid var(--accent-soft-line);transition:.16s}
.cdr-play:hover{background:var(--accent);color:var(--accent-ink)} .cdr-play.playing{background:var(--accent);color:var(--accent-ink)}
.cdr-mut{color:var(--muted-2)}

/* AGENT */
.proto--agent{padding:0}
.ag-top{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 18px;border-bottom:1px solid var(--line);background:var(--canvas);flex-wrap:wrap}
.ag-id{display:flex;align-items:center;gap:11px}
.ag-av{width:38px;height:38px;border-radius:50%;background:linear-gradient(140deg,var(--accent),var(--accent-d));display:grid;place-items:center;font-weight:800;font-size:13px;color:var(--accent-ink)}
.ag-id b{font-size:14px;font-weight:700;display:block}.ag-id small{font-size:11.5px;color:var(--muted)}
.ag-states{display:flex;gap:6px;flex-wrap:wrap}
.ag-st{font-size:12px;font-weight:600;padding:7px 13px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--muted);transition:.16s}
.ag-st.on{background:#10b981;border-color:#10b981;color:#fff}
.ag-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:14px;padding:16px 18px;flex:1}
.ag-call{border:1px solid var(--line);border-radius:13px;padding:15px;display:flex;flex-direction:column}
.ag-call-h{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;color:var(--muted);margin-bottom:13px}
.ag-pulse{width:9px;height:9px;border-radius:50%;background:#10b981;box-shadow:0 0 0 3px rgba(16,185,129,.2)}
.ag-caller{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.ag-cic{width:42px;height:42px;border-radius:11px;background:var(--accent-soft);color:var(--accent-d);display:grid;place-items:center;flex:none}
.ag-cic .ic{width:21px;height:21px}
.ag-caller b{font-size:16px;font-weight:800;display:block}.ag-caller small{font-size:12px;color:var(--muted)}
.ag-time{margin-left:auto;font-size:18px;font-weight:800;color:var(--accent-d);font-variant-numeric:tabular-nums}
.ag-tags{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:14px}
.ag-tag{font-size:11px;font-weight:700;padding:4px 10px;border-radius:6px;background:var(--raise,#f3f4f6);color:var(--muted)}
.ag-tag.vip{background:#1a1a1a;color:#fff}.ag-tag.amber{background:var(--accent-soft);color:var(--accent-d)}
.ag-btns{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.ag-btns button{flex:1;min-width:70px;font-size:12.5px;font-weight:600;padding:10px 8px;border-radius:9px;border:1px solid var(--line);background:#fff;color:var(--ink-2);transition:.16s}
.ag-btns button:hover{border-color:var(--ink)}
.ag-btns .amber{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.ag-btns .red{background:#fee2e2;border-color:#fecaca;color:#b42318}
.ag-disp-l{font-size:10.5px;font-weight:700;letter-spacing:.05em;color:var(--muted-2);margin:auto 0 8px}
.ag-disp{display:flex;gap:7px;flex-wrap:wrap}
.ag-disp button{font-size:11.5px;font-weight:600;color:var(--muted);background:#fff;border:1px solid var(--line);padding:7px 12px;border-radius:999px;transition:.16s}
.ag-disp button.on{background:var(--accent-soft);border-color:var(--accent-soft-line);color:var(--accent-d)}
.ag-dial{border:1px solid var(--line);border-radius:13px;padding:14px;display:flex;flex-direction:column;gap:11px}
.ag-dout{background:var(--canvas);border:1px solid var(--line);border-radius:9px;padding:12px;font-size:16px;font-weight:700;color:var(--muted-2);text-align:center;font-variant-numeric:tabular-nums}
.ag-dout.has{color:var(--ink)}
.ag-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.ag-key{aspect-ratio:1.7;border:1px solid var(--line);border-radius:9px;background:#fff;font-size:16px;font-weight:700;color:var(--ink);transition:.12s}
.ag-key:hover{background:var(--accent-soft);border-color:var(--accent-soft-line)} .ag-key:active{transform:scale(.95)}
.ag-call-btn{display:flex;align-items:center;justify-content:center;gap:8px;background:var(--accent);color:var(--accent-ink);font-weight:700;font-size:14px;padding:12px;border-radius:10px;box-shadow:var(--shadow-amber)}

/* HOME */
.proto--home{padding:0}
.home-h{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:15px 18px;border-bottom:1px solid var(--line);background:var(--canvas);flex-wrap:wrap}
.home-h b{font-size:15px;font-weight:800;display:block}.home-h small{font-size:11.5px;color:var(--muted)}
.home-scenes{display:flex;gap:6px}
.hs{font-size:12px;font-weight:600;padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--muted);transition:.16s}
.hs.on{background:#1a1a1a;border-color:#1a1a1a;color:#fff}
.home-kpi{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:14px 18px 4px}
.home-kpi div{background:var(--canvas);border:1px solid var(--line);border-radius:11px;padding:12px 14px}
.home-kpi b{font-size:21px;font-weight:800}.home-kpi i{font-size:12px;font-style:normal;color:var(--muted);font-weight:600}
.home-kpi span{display:block;font-size:11px;color:var(--muted)}
.home-rooms{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:14px 18px 18px;flex:1}
.hd{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:13px 15px;transition:.18s}
.hd:has(.hd-sw:not(.off)){border-color:var(--accent-soft-line);background:var(--accent-soft)}
.hd-ic{width:38px;height:38px;border-radius:10px;background:var(--canvas);color:var(--muted);display:grid;place-items:center;flex:none;transition:.18s}
.hd:has(.hd-sw:not(.off)) .hd-ic{background:#fff;color:var(--accent-d)}
.hd-t b{font-size:13.5px;font-weight:700;display:block}.hd-t small{font-size:11.5px;color:var(--muted)}
.hd-sw{margin-left:auto;width:42px;height:24px;border-radius:999px;background:var(--accent);position:relative;flex:none;transition:.2s;cursor:pointer;border:none}
.hd-sw.off{background:#cbd0d8}
.hd-sw::after{content:'';position:absolute;top:2px;left:20px;width:20px;height:20px;border-radius:50%;background:#fff;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.hd-sw.off::after{left:2px}

/* POS */
.proto--pos{padding:0;flex-direction:row;display:flex}
.pos-left{flex:1.5;padding:14px 16px;border-right:1px solid var(--line);display:flex;flex-direction:column;min-width:0}
.pos-chan{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.pos-chan span{font-size:11px;font-weight:600;color:var(--muted);background:#fff;border:1px solid var(--line);padding:6px 11px;border-radius:999px}
.pos-chan-on{background:var(--accent-soft)!important;border-color:var(--accent-soft-line)!important;color:var(--accent-d)!important;display:inline-flex;align-items:center;gap:5px}
.pos-cats{display:flex;gap:6px;margin-bottom:12px}
.pos-cat{font-size:12.5px;font-weight:600;color:var(--muted);padding:7px 14px;border-radius:9px;background:var(--canvas);border:1px solid var(--line)}
.pos-cat.on{background:#1a1a1a;border-color:#1a1a1a;color:#fff}
.pos-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;overflow:auto;align-content:start;flex:1}
.pos-item{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:13px 14px;border:1px solid var(--line);border-radius:11px;background:#fff;text-align:left;transition:.14s}
.pos-item:hover{border-color:var(--accent);background:var(--accent-soft);transform:translateY(-2px)}
.pos-item b{font-size:13.5px;font-weight:700}.pos-item span{font-size:13px;color:var(--accent-d);font-weight:700}
.pos-right{flex:1;display:flex;flex-direction:column;padding:14px 16px;background:var(--canvas);min-width:0}
.pos-cust{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:12px;color:var(--muted);padding:11px 13px;background:#fff;border:1px solid var(--line);border-radius:10px;margin-bottom:12px}
.pos-cust b{font-size:13px;color:var(--ink)}.pos-cust small{width:100%;color:var(--muted)}
.pos-cust .ic{color:var(--accent-d)}
.pos-adis{flex:1;overflow:auto;display:flex;flex-direction:column;gap:7px}
.pos-empty{margin:auto;text-align:center;color:var(--muted-2);display:flex;flex-direction:column;align-items:center;gap:8px;font-size:12.5px}
.pos-empty .ic{width:32px;height:32px;opacity:.5}
.pos-line{display:flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--line);border-radius:9px;padding:9px 11px}
.pos-q{font-size:12px;font-weight:800;color:var(--accent-d);min-width:24px}
.pos-n{font-size:13px;font-weight:600;flex:1}
.pos-s{font-size:13px;font-weight:700;font-variant-numeric:tabular-nums}
.pos-rm{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;color:var(--muted-2);background:var(--canvas);border:none}
.pos-rm:hover{color:#b42318;background:#fee2e2}
.pos-sum{padding:12px 0 10px;border-top:1px solid var(--line);margin-top:10px}
.pos-sum>div{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--muted);padding:3px 0}
.pos-sum b{font-weight:700;color:var(--ink)}
.pos-tot{font-size:15px!important;color:var(--ink)!important;font-weight:800;margin-top:4px}
.pos-tot b{font-size:18px;color:var(--accent-d)}
.pos-pay{display:flex;align-items:center;justify-content:center;gap:8px;background:var(--accent);color:var(--accent-ink);font-weight:700;font-size:14px;padding:12px;border-radius:10px;margin-top:10px;box-shadow:var(--shadow-amber)}

@media(max-width:560px){
  .ag-grid{grid-template-columns:1fr}
  .proto--pos{flex-direction:column}.pos-left{border-right:none;border-bottom:1px solid var(--line)}
  .home-rooms{grid-template-columns:1fr}
}

/* ===================== SANTRAL PANELİ (gerçek ekranlara birebir) ===================== */
.spanel{display:grid;grid-template-columns:198px 1fr;min-height:560px;background:#f7f8fa;font-size:13px;color:#1f2937}
.browser .spanel{min-height:540px}
.spanel svg{width:16px;height:16px;stroke-width:2}
.sp-side{background:#161616;color:#fff;padding:12px 10px;display:flex;flex-direction:column;gap:2px;overflow:auto}
.sp-brand{display:flex;align-items:center;gap:9px;padding:6px 8px 14px;font-weight:800;font-size:14px}
.sp-brand svg{color:var(--accent);width:18px;height:18px}
.sp-nav{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:9px;color:rgba(255,255,255,.62);font-size:12.5px;font-weight:500;text-align:left;width:100%;transition:.14s}
.sp-nav svg{color:rgba(255,255,255,.5);width:16px;height:16px}
.sp-nav:hover{background:rgba(255,255,255,.06);color:#fff}
.sp-nav.on{background:var(--accent);color:var(--accent-ink);font-weight:600}
.sp-nav.on svg{color:var(--accent-ink)}
.sp-main{padding:18px 20px;overflow:auto}
@keyframes spFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.sp-main.sp-anim{animation:spFade .3s var(--ease)}
.sp-nav{cursor:pointer}

/* tekil ekran prototipi (alternatif satırlarda · sabit yükseklik) */
.spane{height:440px;overflow:auto;background:#f7f8fa;padding:16px 18px;font-size:13px;color:#1f2937}
.spane svg{width:16px;height:16px;stroke-width:2}
.spane .sp-h{margin-bottom:14px}
.spane .sp-h b{font-size:17px}
.spane::-webkit-scrollbar{width:8px;height:8px}
.spane::-webkit-scrollbar-thumb{background:#d7dbe0;border-radius:8px}
.spane .sp-fgrid{grid-template-columns:1fr 1fr}
.spane .sp-kpi{gap:10px}
.spane .sp-kc{padding:13px 13px}
.spane .sp-kc b{font-size:23px}
.spane .sp-kc-t span{font-size:11px}
.spane .sp-kc-ic{width:26px;height:26px;border-radius:8px}
.spane .sp-kc-ic svg{width:14px;height:14px}
@media(max-width:680px){.spane .sp-kpi{grid-template-columns:repeat(2,minmax(0,1fr))!important}}

/* Genel Bakış dashboard bileşenleri (Test_Musteri'ye birebir) */
.sp-kc--chart{position:relative;overflow:hidden}
.sp-spark{position:absolute;left:0;right:0;bottom:0;width:100%;height:24px;opacity:.55}
.sp-live0{display:inline-flex;align-items:center;gap:6px;color:#059669;font-weight:700;font-size:11.5px}
.sp-live0::before{content:'';width:7px;height:7px;border-radius:50%;background:#10b981}
.sp-exts2{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;padding:14px 16px}
.sp-ext2{border:1px solid var(--line);border-left:3px solid #ef4444;border-radius:10px;padding:11px 12px}
.sp-ext2.on{border-left-color:#10b981}
.sp-ext2h{display:flex;align-items:center;gap:7px;margin-bottom:2px}
.sp-ed{width:7px;height:7px;border-radius:50%;background:#ef4444;flex:none}
.sp-ext2.on .sp-ed{background:#10b981}
.sp-ext2 b{font-size:15px;font-weight:800}
.sp-ext2 small{display:block;font-size:10.5px;color:var(--muted);line-height:1.3}
.sp-ext2 .sp-ec{color:var(--ink-2);font-weight:600;margin-top:3px}
.sp-stack{display:flex;flex-direction:column;gap:14px}
.sp-stack .sp-card{margin:0}
.sp-traffic{padding:16px}
.sp-tbars{display:flex;align-items:flex-end;gap:3px;height:128px;border-bottom:1px solid var(--line)}
.sp-tb{flex:1;display:flex;flex-direction:column;justify-content:flex-end;height:100%}
.sp-tb-t{background:#f5ba12;border-radius:2px 2px 0 0}
.sp-tb-c{background:#ef4444;border-radius:2px 2px 0 0}
.sp-taxis{display:flex;justify-content:space-between;font-size:10px;color:var(--muted-2);margin-top:7px}
.sp-tleg{display:flex;gap:16px;margin-top:11px}
.sp-dl{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--muted)}
.sp-dl i{width:9px;height:9px;border-radius:2px}
.sp-hbars{padding:18px 16px}
.sp-hb{display:flex;align-items:center;gap:12px;padding:7px 0}
.sp-hb-l{font-size:12.5px;color:var(--ink-2);min-width:46px;font-weight:600}
.sp-hb-t{flex:1;height:9px;border-radius:5px;background:#f0f1f3;overflow:hidden}
.sp-hb-t i{display:block;height:100%;border-radius:5px}
.sp-hb b{font-size:13px;font-weight:700;min-width:48px;text-align:right}
.sp-son{padding:6px 16px 14px}
.sp-sonr{display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid var(--line-2)}
.sp-sonr:last-child{border-bottom:none}
.sp-soni{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;flex:none}
.sp-soni.out{background:#eef2ff;color:#3b82f6}
.sp-soni.miss{background:#fee2e2;color:#dc2626}
.sp-soni svg{width:16px;height:16px}
.sp-sonr>div{flex:1}
.sp-sonr b{font-size:13.5px;font-weight:700;display:block}
.sp-sonr small{font-size:11.5px;color:var(--muted)}
.sp-sont{font-size:12px;color:var(--muted-2)}
.sp-trend{display:flex;align-items:flex-end;justify-content:space-around;gap:14px;height:150px;padding:18px 16px 8px}
.sp-trc{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:6px;flex:1;height:100%}
.sp-trc b{font-size:12px;font-weight:700}
.sp-trb{width:60%;max-width:46px;background:linear-gradient(180deg,#f5ba12,#e0a800);border-radius:5px 5px 0 0;min-height:4px}
.sp-trc small{font-size:11px;color:var(--muted)}
@media(max-width:680px){.sp-exts2{grid-template-columns:repeat(2,1fr)}}

/* ===================== SANTRAL SLIDER (tek laptop + ekran geçişi) ===================== */
.slider__pills{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 20px;scrollbar-width:none}
.slider__pills::-webkit-scrollbar{display:none}
.slpill{flex:none;display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--muted);background:#fff;border:1px solid var(--line);padding:9px 15px;border-radius:999px;transition:.16s;cursor:pointer}
.slpill svg{width:15px;height:15px;color:var(--muted-2)}
.slpill:hover{color:var(--ink);border-color:var(--muted-2)}
.slpill.on{background:var(--black);border-color:var(--black);color:#fff}
.slpill.on svg{color:var(--accent)}
.slider__desc{text-align:center;max-width:800px;margin:6px auto 24px;min-height:118px;animation:fadeUp .35s var(--ease)}
.slider__desc .spd-badge{margin-bottom:14px}
.slider__desc .screen__title{font-size:clamp(22px,2.6vw,30px);font-weight:800;letter-spacing:-.02em;margin:0 0 16px}
.slider__desc .screen__bul{list-style:none;padding:0;margin:0;display:flex;gap:22px;justify-content:center;flex-wrap:wrap}
.slider__desc .screen__bul li{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;color:var(--ink-2);font-weight:500}
.slider__desc .screen__bul li .ic{color:var(--accent-d)}
.slider__stage{display:flex;align-items:center;gap:16px}
.slarrow{flex:none;width:50px;height:50px;border-radius:50%;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);display:grid;place-items:center;color:var(--ink);transition:.18s;cursor:pointer}
.slarrow:hover{background:var(--black);color:#fff;transform:scale(1.06)}
.slarrow svg{width:22px;height:22px}
.laptop{flex:1;min-width:0}
.laptop__lid{position:relative;background:#0b0b0d;border-radius:24px;padding:14px;box-shadow:0 34px 60px -18px rgba(16,16,16,.42),inset 0 0 0 1.5px #2a2a2e}
.laptop__bar{display:flex;align-items:center;gap:7px;padding:11px 15px;background:#e9ebef;border:none;border-radius:9px 9px 0 0}
/* adres çubuğu görünümü kaldırıldı — yalnız ekran adı etiketi (panel adresi ifşa edilmez) */
.laptop__url{margin-left:12px;font-size:12.5px;font-weight:700;color:var(--ink-2);letter-spacing:-.01em;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.laptop__count{font-size:11.5px;font-weight:700;color:var(--muted);margin-left:auto;flex:none}
.laptop__screen{border:none;background:#f7f8fa;overflow:hidden;border-radius:0 0 9px 9px}
.spane--lap{height:540px}
.spane--lap .sp-2col{grid-template-columns:1fr 1fr}
.lap-shot{width:100%;height:540px;object-fit:cover;object-position:top center;display:block;background:#f7f8fa}
@media(max-width:760px){.lap-shot{height:380px}}
/* MacBook alt gövde (deck) — lid'den geniş, ortada çentik */
.laptop__base{height:16px;background:linear-gradient(180deg,#e3e6ea,#b9bfc8 60%,#9aa1ab);border-radius:0 0 12px 12px;margin:0 -3.4%;position:relative;box-shadow:0 3px 5px rgba(0,0,0,.18)}
.laptop__base::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:#f1f3f5;opacity:.7}
.laptop__base::after{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:120px;height:9px;background:#9097a1;border-radius:0 0 10px 10px}
.slider__dots{display:flex;gap:7px;justify-content:center;flex-wrap:wrap;margin-top:22px}
.sldot{width:8px;height:8px;border-radius:50%;background:var(--line);border:none;padding:0;cursor:pointer;transition:.18s}
.sldot.on{background:var(--accent);width:24px;border-radius:5px}
@media(max-width:760px){
  .slider__stage{gap:8px}
  .slarrow{width:40px;height:40px}
  .spane--lap{height:480px}
  .laptop__base{margin:0 -10px}
}
.sp-h{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:16px}
.sp-h b{font-size:19px;font-weight:800;letter-spacing:-.01em;display:block}
.sp-h small{font-size:12.5px;color:#6b7280}
.sp-btn{display:inline-flex;align-items:center;gap:7px;background:var(--accent);color:var(--accent-ink);font-weight:700;font-size:12.5px;padding:9px 14px;border-radius:9px;white-space:nowrap}
.sp-gbtn{display:inline-flex;align-items:center;gap:7px;background:#fff;color:#374151;border:1px solid #e5e7eb;font-weight:600;font-size:12.5px;padding:9px 13px;border-radius:9px;white-space:nowrap}
.sp-btn svg,.sp-gbtn svg{width:15px;height:15px}

.sp-kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:16px}
.sp-kc{background:#fff;border:1px solid #eceef1;border-radius:14px;padding:15px 16px}
.sp-kc-t{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.sp-kc-t span{font-size:12px;color:#6b7280;font-weight:500}
.sp-kc-ic{width:30px;height:30px;border-radius:9px;background:var(--accent-soft);color:var(--accent-d);display:inline-grid;place-items:center}
.sp-kc-ic svg{width:16px;height:16px}
.sp-kc b{font-size:27px;font-weight:800;letter-spacing:-.02em;display:block;line-height:1.1}
.sp-kc small{font-size:11.5px;color:#9ca3af}

.sp-card{background:#fff;border:1px solid #eceef1;border-radius:14px;margin-bottom:14px;overflow:hidden}
.sp-card-h{display:flex;align-items:center;gap:9px;padding:15px 17px;border-bottom:1px solid #f0f1f3}
.sp-card-h svg{color:#6b7280;width:16px;height:16px}
.sp-card-h b{font-size:14.5px;font-weight:700}
.sp-cnt{font-size:11.5px;color:#9ca3af;font-weight:600}
.sp-ca{margin-left:auto}

.sp-tw{overflow-x:auto}
.sp-table{width:100%;border-collapse:collapse;min-width:540px}
.sp-table th{text-align:left;font-size:10.5px;font-weight:700;letter-spacing:.04em;color:#9ca3af;padding:12px 17px;border-bottom:1px solid #f0f1f3}
.sp-table td{padding:13px 17px;border-bottom:1px solid #f4f5f7;font-size:13px;vertical-align:middle}
.sp-table tbody tr:last-child td{border-bottom:none}
.sp-table tbody tr:hover td{background:#fafbfc}
.sp-table td b{font-weight:700}
.sp-num{font-variant-numeric:tabular-nums;font-weight:600}
.sp-mut{color:#9ca3af}
.sp-sub{color:#9ca3af;font-weight:500;margin-left:7px;font-size:12px}
.sp-iq{width:34px;height:34px;border-radius:9px;background:#1a1a1a;color:var(--accent);display:inline-grid;place-items:center;vertical-align:middle;margin-right:11px}
.sp-iq svg{width:17px;height:17px}
.sp-badge{display:inline-block;font-size:11px;font-weight:700;padding:4px 11px;border-radius:999px;background:#eef0f3;color:#6b7280}
.sp-res{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700}
.sp-res::before{content:'';width:7px;height:7px;border-radius:50%}
.sp-res.ok{color:#059669}.sp-res.ok::before{background:#10b981}
.sp-res.miss{color:#dc2626}.sp-res.miss::before{background:#ef4444}
.sp-res.busy{color:var(--accent-d)}.sp-res.busy::before{background:var(--accent)}
.sp-dir{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600}
.sp-dir svg{width:15px;height:15px}
.sp-dir.in{color:#059669}.sp-dir.out{color:#059669}
.sp-tag{display:inline-block;font-size:11.5px;font-weight:600;padding:4px 10px;border-radius:7px;background:#eef2ff;color:#4338ca}
.sp-file{font-size:11px;font-family:ui-monospace,monospace;color:#6b7280;background:#f3f4f6;padding:4px 9px;border-radius:6px}
.sp-act{display:inline-flex;gap:8px;color:#9ca3af}
.sp-act svg{width:16px;height:16px;cursor:pointer}
.sp-act svg:hover{color:#374151}
.sp-wait{display:inline-grid;place-items:center;min-width:22px;height:22px;border-radius:6px;background:#fef2f2;color:#dc2626;font-weight:700;font-size:12px;padding:0 6px}

.sp-toolbar{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.sp-search{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid #e5e7eb;border-radius:9px;padding:9px 13px;flex:1;min-width:200px;max-width:340px;color:#9ca3af}
.sp-search svg{width:16px;height:16px}
.sp-search input{border:none;background:none;outline:none;font-size:13px;color:#374151;width:100%;font-family:inherit}
.sp-chips{display:inline-flex;gap:3px;background:#eef0f3;border-radius:9px;padding:3px}
.sp-chip{font-size:12px;font-weight:600;color:#6b7280;padding:6px 14px;border-radius:7px}
.sp-chip.on{background:#fff;color:#1f2937;box-shadow:0 1px 2px rgba(0,0,0,.08)}

.sp-2col{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.sp-2col--wz{grid-template-columns:1.5fr 1fr}
.sp-exts{display:flex;flex-wrap:wrap;gap:9px;padding:15px 17px}
.sp-ext{display:flex;align-items:center;gap:8px;border:1px solid #eceef1;border-radius:10px;padding:9px 13px;font-size:12px}
.sp-ext b{font-weight:700}.sp-ext small{color:#9ca3af}
.sp-edot{width:8px;height:8px;border-radius:50%}.sp-edot.on{background:#10b981}.sp-edot.off{background:#cbd5e1}
.sp-recent{padding:8px 17px 15px}
.sp-rrow{display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid #f4f5f7;font-size:12.5px}
.sp-rrow:last-child{border-bottom:none}
.sp-rrow .sp-num{flex:1}

.sp-wz{padding:16px 17px;display:flex;flex-direction:column;gap:14px}
.sp-step{display:flex;gap:12px}
.sp-step>div{flex:1}
.sp-step b{font-size:13.5px;font-weight:700;display:block;margin-bottom:9px}
.sp-sb{width:24px;height:24px;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font-weight:800;font-size:12px;flex:none}
.sp-inp{display:inline-flex;align-items:center;gap:8px;background:#f7f8fa;border:1px solid #e5e7eb;border-radius:9px;padding:10px 13px;font-size:13px;font-weight:600}
.sp-inp svg{color:var(--accent-d);width:15px;height:15px}
.sp-inp-row{display:flex;gap:10px;flex-wrap:wrap}
.sp-targets{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.sp-target{display:flex;flex-direction:column;align-items:flex-start;gap:2px;border:1.5px solid #e5e7eb;border-radius:11px;padding:12px 13px;background:#fff;text-align:left;transition:.15s}
.sp-target svg{width:18px;height:18px;color:#9ca3af;margin-bottom:4px}
.sp-target b{font-size:13px;margin:0}.sp-target small{color:#9ca3af;font-size:11.5px}
.sp-target.on{border-color:var(--accent);background:var(--accent-soft)}
.sp-target.on svg{color:var(--accent-d)}
.sp-journey .sp-jrow{display:flex;align-items:center;gap:12px;padding:12px 17px;border-bottom:1px solid #f4f5f7}
.sp-journey .sp-jrow:last-child{border-bottom:none}
.sp-jrow svg{color:var(--accent-d);width:18px;height:18px}
.sp-jrow small{font-size:11px;color:#9ca3af;display:block}
.sp-jrow b{font-size:13px;font-weight:700}

.sp-note{margin:16px 17px;background:var(--accent-soft);border:1px solid var(--accent-soft-line);border-radius:11px;padding:13px 15px;font-size:12.5px;color:#5c4a12;line-height:1.5}
.sp-note b{color:#3d3208}
.sp-empty-s{padding:24px 17px;text-align:center;color:#9ca3af;font-size:12.5px;line-height:1.6}
.sp-foot{padding:12px 17px;font-size:11.5px;color:#9ca3af}
.sp-wave{display:inline-flex;align-items:center;gap:2px;margin-left:10px;vertical-align:middle}
.sp-wave i{width:2.5px;background:var(--accent);border-radius:2px;display:inline-block}
.sp-play{width:30px;height:30px;border-radius:8px;background:var(--accent-soft);color:var(--accent-d);display:inline-grid;place-items:center;border:1px solid var(--accent-soft-line);vertical-align:middle}
.sp-play.sm{width:27px;height:27px}
.sp-play svg{width:15px;height:15px}
.sp-play.on{background:var(--accent);color:var(--accent-ink)}
.sp-kayit{display:inline-flex;align-items:center;gap:9px;color:#9ca3af}
.sp-kayit svg{width:16px;height:16px;cursor:pointer}
.sp-unread{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;color:#dc2626;background:#fef2f2;padding:3px 9px;border-radius:999px}
.sp-unread svg{width:7px;height:7px;fill:#ef4444}
.sp-bar{display:inline-block;width:64px;height:5px;border-radius:3px;background:#f0f1f3;margin-left:9px;vertical-align:middle;overflow:hidden}
.sp-bar i{display:block;height:100%;background:#ef4444;max-width:100%}

.sp-filters{background:#fff;border:1px solid #eceef1;border-radius:14px;padding:17px;margin-bottom:14px}
.sp-fgrid{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin-bottom:14px}
.sp-fgrid label{font-size:12px;color:#6b7280;font-weight:600;display:flex;flex-direction:column;gap:6px}
.sp-sel{display:flex;align-items:center;justify-content:space-between;background:#fff;border:1px solid #e5e7eb;border-radius:9px;padding:10px 13px;font-size:13px;font-weight:500;color:#374151}
.sp-sel svg{color:#9ca3af}
.sp-inp2{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid #e5e7eb;border-radius:9px;padding:10px 13px;color:#9ca3af}
.sp-inp2 .sp-ph{font-size:13px}
.sp-fbtns{display:flex;gap:9px;justify-content:flex-end;flex-wrap:wrap}
.sp-fgrid--2{grid-template-columns:1fr 1fr}

/* brand logo + donut + chart-empty + legend */
.sp-brand{flex-direction:column;align-items:flex-start;gap:2px}
.sp-brand .sp-logo{height:34px!important;width:auto!important;max-width:130px;object-fit:contain;display:block}
.sp-brand small{font-size:10px;color:rgba(255,255,255,.5);font-weight:500}
.sp-donut-row{display:flex;align-items:center;gap:22px;padding:20px 17px}
.sp-donut{width:92px;height:92px;border-radius:50%;border:13px solid #eceef1;display:flex;flex-direction:column;align-items:center;justify-content:center;flex:none}
.sp-donut b{font-size:17px;font-weight:800;line-height:1}.sp-donut small{font-size:10px;color:#9ca3af}
.sp-legend{display:flex;flex-direction:column;gap:11px;flex:1}
.sp-leg{display:flex;align-items:center;gap:10px;font-size:12.5px}
.sp-leg i{width:11px;height:11px;border-radius:3px;flex:none}
.sp-leg span{flex:1;color:#374151}.sp-leg b{font-weight:700}
.sp-chart-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:54px 17px;color:#cbd5e1}
.sp-chart-empty svg{width:34px;height:34px;opacity:.45}
.sp-chart-empty span{font-size:13px;color:#9ca3af}
.sp-empty-c{padding:44px 17px;text-align:center;color:#9ca3af;font-size:13px}
.sp-gbtn--sm{padding:7px 11px;font-size:11.5px}.sp-gbtn--sm svg{width:14px;height:14px}
.sp-rcount{color:#dc2626;font-weight:700;font-size:11.5px}

@media(max-width:760px){
  .spanel{grid-template-columns:1fr}
  .sp-side{flex-direction:row;overflow-x:auto;gap:4px}
  .sp-nav{white-space:nowrap}
  .sp-2col,.sp-2col--wz,.sp-fgrid,.sp-targets{grid-template-columns:1fr}
}

/* ===================== PANEL ÜSTÜ DİNAMİK AÇIKLAMA (menüye göre değişir · ortalı) ===================== */
.spanel-desc{max-width:740px;margin:0 auto 22px;text-align:center;animation:fadeUp .35s var(--ease)}
.spd-badge{display:inline-flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-sm);
  color:var(--accent-d);font-size:13px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:9px 18px;border-radius:999px;margin-bottom:16px}
.spd-badge svg{width:17px;height:17px;color:var(--accent-d)}
.spanel-desc p{font-size:17px;color:var(--muted);margin:0;line-height:1.6}

/* ===================== MENÜ AÇIKLAMALARI (alt alta) ===================== */
.menuex{padding:84px 0;background:#fff;border-top:1px solid var(--line)}
.menuex__list{max-width:840px;margin:0 auto;display:flex;flex-direction:column;gap:13px}
.menuex__item{display:flex;gap:16px;align-items:flex-start;background:var(--canvas);border:1px solid var(--line);border-radius:14px;padding:18px 20px;transition:.22s var(--ease)}
.menuex__item:hover{border-color:var(--accent-soft-line);box-shadow:var(--shadow);transform:translateX(3px)}
.menuex__ic{width:42px;height:42px;border-radius:11px;background:var(--accent-soft);color:var(--accent-d);display:grid;place-items:center;flex:none}
.menuex__ic .ic{width:21px;height:21px}
.menuex__item b{font-size:15.5px;font-weight:800;display:block;margin-bottom:4px}
.menuex__item p{font-size:14px;color:var(--muted);margin:0;line-height:1.55}

/* ===================== BÖLÜM ARKA PLAN ÇEŞİTLİLİĞİ ===================== */
.sec-tint{position:relative;background:linear-gradient(180deg,#fff8ea,#fbfbfc 55%)}
.sec-tint::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(40% 50% at 88% 6%,rgba(245,186,18,.16),transparent 60%),radial-gradient(35% 45% at 6% 96%,rgba(245,186,18,.1),transparent 60%)}
.sec-tint>.wrap{position:relative;z-index:1}
.sec-canvas{background:var(--canvas)}

/* ===================== ÇAĞRI AKIŞI ŞEMASI ===================== */
.flow{position:relative;padding:90px 0;overflow:hidden;background:var(--canvas)}
.flow__bg{position:absolute;inset:0;background:radial-gradient(45% 55% at 50% 0%,rgba(245,186,18,.14),transparent 62%)}
.flow__bg::after{content:'';position:absolute;inset:0;background-image:linear-gradient(var(--line-2) 1px,transparent 1px),linear-gradient(90deg,var(--line-2) 1px,transparent 1px);background-size:42px 42px;mask-image:radial-gradient(70% 70% at 50% 40%,#000,transparent 75%);opacity:.45}
.flow .wrap{position:relative;z-index:1}
.flow__track{display:flex;align-items:stretch;justify-content:center;gap:6px;flex-wrap:wrap}
.flow__node{flex:1;min-width:150px;max-width:200px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px 16px;text-align:center;box-shadow:var(--shadow-sm);transition:.26s var(--ease)}
.flow__node:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:var(--accent-soft-line)}
.flow__ic{width:54px;height:54px;border-radius:15px;margin:0 auto 13px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent-d)}
.flow__ic .ic{width:26px;height:26px}
.flow__node b{display:block;font-size:15px;font-weight:800;letter-spacing:-.01em}
.flow__node small{font-size:12px;color:var(--muted)}
.flow__node .flow__step{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.08em;color:var(--accent-d);margin-bottom:8px}
.flow__arrow{display:flex;align-items:center;color:var(--accent);flex:none;padding:0 2px}
.flow__arrow .ic{width:22px;height:22px;stroke-width:2.4}
.flow__node--dark{background:#141414;border-color:#141414;color:#fff}
.flow__node--dark small{color:rgba(255,255,255,.6)}
.flow__node--dark .flow__ic{background:rgba(245,186,18,.16);color:var(--accent)}
@media(max-width:860px){.flow__arrow{transform:rotate(90deg)}.flow__node{max-width:none}}

/* ===================== KOYU BANT — GLOW KARTLAR (3+3 dengeli) ===================== */
.gcards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.gcard{position:relative;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);border-radius:18px;padding:26px 24px;overflow:hidden;transition:.28s var(--ease)}
.gcard::before{content:'';position:absolute;inset:0;background:radial-gradient(70% 60% at 50% -10%,rgba(245,186,18,.18),transparent 70%);opacity:0;transition:.35s}
.gcard:hover{border-color:rgba(245,186,18,.4);transform:translateY(-6px)}
.gcard:hover::before{opacity:1}
.gcard__no{position:absolute;top:18px;right:22px;font-size:34px;font-weight:900;letter-spacing:-.03em;color:rgba(255,255,255,.07)}
.gcard__ic{position:relative;width:52px;height:52px;border-radius:14px;background:linear-gradient(150deg,rgba(245,186,18,.22),rgba(245,186,18,.08));color:var(--accent);display:grid;place-items:center;margin-bottom:16px;box-shadow:inset 0 0 0 1px rgba(245,186,18,.2)}
.gcard__ic .ic{width:25px;height:25px}
.gcard b{position:relative;display:block;font-size:17px;font-weight:800;color:#fff;margin-bottom:8px}
.gcard span{position:relative;font-size:13.5px;color:rgba(255,255,255,.62);line-height:1.55}

/* ===================== BENTO (yaratıcı, farklı boyutlu kartlar) ===================== */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.bcard{position:relative;background:#fff;border:1px solid var(--line);border-radius:20px;padding:26px;overflow:hidden;transition:.26s var(--ease);display:flex;flex-direction:column}
.bcard::after{content:'';position:absolute;right:-40px;top:-40px;width:130px;height:130px;border-radius:50%;background:radial-gradient(circle,rgba(245,186,18,.12),transparent 70%);opacity:0;transition:.35s}
.bcard:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:var(--accent-soft-line)}
.bcard:hover::after{opacity:1}
.bcard__ic{width:50px;height:50px;border-radius:14px;background:var(--accent-soft);color:var(--accent-d);display:grid;place-items:center;margin-bottom:16px;position:relative;z-index:1}
.bcard__ic .ic{width:25px;height:25px}
.bcard h4{font-size:18px;font-weight:800;letter-spacing:-.01em;margin:0 0 9px;position:relative;z-index:1}
.bcard p{font-size:14px;color:var(--muted);margin:0;line-height:1.55;position:relative;z-index:1}
.b-lg{grid-column:span 4;background:linear-gradient(150deg,#fff,#fff8ea)}
.b-sm{grid-column:span 2}
.b-md{grid-column:span 3}
.bcard__chips{display:flex;gap:7px;flex-wrap:wrap;margin-top:16px;position:relative;z-index:1}
.bcard__chips span{font-size:12px;font-weight:700;color:var(--accent-d);background:var(--accent-soft);border:1px solid var(--accent-soft-line);padding:5px 11px;border-radius:8px}
@media(max-width:860px){.bento{grid-template-columns:1fr}.b-lg,.b-sm,.b-md{grid-column:auto}.gcards{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.gcards{grid-template-columns:1fr}}

/* ===================== REVEAL ===================== */
.reveal{opacity:0;transform:translateY(24px);transition:.7s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ===================== RESPONSIVE ===================== */
@media(max-width:1080px){
  .nav,.header__cta .btn--ghost-d{display:none}
  .burger{display:grid}
  .hero__in,.phero__in,.tabpane,.integ__in,.frow{grid-template-columns:1fr}
  .tabpane.is-active{grid-template-columns:1fr}
  .frow--rev .frow__media{order:0}
  .svc-grid,.why-grid{grid-template-columns:repeat(2,1fr)}
  .fcards{grid-template-columns:repeat(2,1fr)}
  .footer__top{grid-template-columns:1fr}
  .stat-band{grid-template-columns:repeat(2,1fr)}.stat-band>div:nth-child(2){border-right:none}
  .stat-band>div{border-bottom:1px solid var(--line)}
}
@media(max-width:840px){
  .hero{padding-top:46px}
  .hero__right,.phero__shot{margin-top:30px}
  .browser--hero,.phero .browser{transform:none}
  .floatcard--call{left:-8px;bottom:-18px}.floatcard--sync{right:-6px}
  .testi-grid,.price-grid{grid-template-columns:1fr}
  .price--featured{transform:none}.price--featured:hover{transform:translateY(-4px)}
  .topstrip__login{display:none}
  .hpanel{grid-template-columns:1fr}.hpanel__side{flex-direction:row;overflow-x:auto;gap:6px}
}
@media(max-width:560px){
  .wrap{padding:0 18px}
  .svc-grid,.why-grid,.integ__grid,.fcards,.testi-grid{grid-template-columns:1fr}
  .stat-band{grid-template-columns:1fr}.stat-band>div{border-right:none}
  .hero__stats{gap:22px}.cta__form{flex-direction:column}
  .footer__cols{grid-template-columns:1fr 1fr}
  /* ÇİZGİ-METİN MESAFESİ. `.footer__bottom` aynı zamanda `.wrap` — ve
     yukarıdaki `.wrap{padding:0 18px}` eşit özgüllükle sonra geldiği için
     dikey dolguyu SIFIRLIYOR: telif metni ayırıcı çizgiye yapışıyordu
     (ölçüldü: 0px, 17 sayfada). Dikey dolgu burada geri verilir. */
  .footer__bottom{flex-direction:column;align-items:flex-start;padding:28px 18px 34px}
  .hero,.frows,.tabs,.services,.why,.integ,.testi,.pricing,.cta,.fcards-sec{padding:60px 0}
  .floatcard--sync{display:none}
  .hpanel__kpi{grid-template-columns:1fr 1fr}.hpanel__rooms{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition-duration:.01ms!important;scroll-behavior:auto}.reveal{opacity:1;transform:none}}

/* ═══════════════════════════════════════════════════════════════════════════
   EKRAN GÖRÜNTÜSÜ SUNUMU (2026-07-26)
   Talep: (1) üstteki adres çubuğu görünmesin, (2) görseller "löp" tam sayfa
   blok gibi durmasın — tasarımsal, ölçülü bir çerçeveye otursun.
   ═══════════════════════════════════════════════════════════════════════════ */

/* 1) Tarayıcı kromu (nokta + adres çubuğu) kaldırıldı */
.browser__bar{display:none !important}

/* 2) Çerçeve: ince kenar + derin yumuşak gölge + belirgin köşe.
      Görsel artık "sayfaya yapıştırılmış ekran dökümü" değil, ürün kartı. */
.browser{
  border-radius:18px;
  border:1px solid rgba(16,24,40,.09);
  box-shadow:0 2px 4px rgba(16,24,40,.04),0 24px 60px rgba(16,24,40,.16);
  background:linear-gradient(180deg,#fff,#fbfbfc);
  padding:8px;                    /* görselin etrafında nefes payı — çerçeve hissi */
}
.browser img{border-radius:12px;display:block;width:100%}

/* 3) Yükseklik sınırı: uzun panel görüntüleri sayfayı ele geçirmesin.
      Üst kısım gösterilir (başlık + KPI şeridi zaten en anlamlı bölge). */
.browser img{max-height:clamp(300px,42vh,470px);object-fit:cover;object-position:top center}
.browser--hero img,.phero .browser img{max-height:clamp(320px,46vh,520px)}

/* 4) Arkasında yumuşak amber hale — görsel sayfadan kopuk durmasın */
.browser{position:relative}
.browser::before{
  content:'';position:absolute;inset:-14% -8% -20% -8%;z-index:-1;pointer-events:none;
  background:radial-gradient(58% 52% at 50% 22%,rgba(245,186,18,.16),transparent 72%);
}

/* 5) Satır içi görsellerde ölçüyü sınırla — tam genişlik slab olmasın */
.frow .browser{max-width:620px;margin-inline:auto}

@media (max-width:900px){
  .browser{padding:6px;border-radius:15px}
  .browser img{max-height:none;object-fit:contain}   /* mobilde kırpma yok */
}

/* ═══════════════════════════════════════════════════════════════════════════
   KURUMSAL SAYFALAR (2026-07-26)
   hakkimizda · iletisim · is-ortakligi · basvuru
   Mevcut tasarım dilinin devamı — yeni token yok, aynı ölçü/renk sistemi.
   ═══════════════════════════════════════════════════════════════════════════ */

/* --- Görselsiz hero (tek sütun, ortalanmış) --- */
.phero--lite .phero__in{grid-template-columns:1fr;text-align:center;justify-items:center}
.phero--lite .phero__sub{max-width:640px;margin-left:auto;margin-right:auto}
.phero--lite .phero__btns{justify-content:center}
.phero--lite .phero__chips{grid-template-columns:repeat(2,minmax(0,1fr));max-width:520px}
@media(min-width:721px){.phero--lite .phero__chips{grid-template-columns:repeat(4,minmax(0,1fr));max-width:none}}

/* --- Form kartı --- */
.formsec{padding:78px 0}
.formsec__in{display:grid;grid-template-columns:.85fr 1.15fr;gap:44px;align-items:start}
.formcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:32px;box-shadow:var(--shadow)}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:flex;flex-direction:column;gap:7px;min-width:0}
.field--full{grid-column:1/-1}
.field label{font-size:13px;font-weight:700;color:var(--ink-2);letter-spacing:-.01em}
.field label .req{color:var(--accent-d)}
.field input,.field select,.field textarea{
  width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:var(--radius-sm);
  background:var(--surface);font-family:inherit;font-size:15px;color:var(--ink);transition:.18s var(--ease)}
.field textarea{min-height:118px;resize:vertical;line-height:1.55}
.field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;padding-right:38px}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.field input::placeholder,.field textarea::placeholder{color:var(--muted-2)}
.formcard .btn{margin-top:4px}
.fconsent{grid-column:1/-1;display:flex;align-items:flex-start;gap:10px;font-size:13px;color:var(--muted);line-height:1.5}
.fconsent input{width:17px;height:17px;flex:none;margin-top:2px;accent-color:var(--accent-d)}
.fnote{margin:14px 0 0;font-size:13px;color:var(--muted);display:flex;align-items:center;gap:7px;min-height:20px}
.fnote .ic{color:var(--accent-d);flex:none}
.fnote.ok{color:#166534;font-weight:600}.fnote.ok .ic{color:#16a34a}

/* --- İletişim kartları --- */
.ccards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.ccard{display:flex;flex-direction:column;gap:5px;padding:26px;border-radius:var(--radius);
  background:var(--surface);border:1px solid var(--line);transition:.26s var(--ease)}
.ccard:hover{border-color:var(--accent-soft-line);box-shadow:var(--shadow);transform:translateY(-3px)}
.ccard__ic{width:42px;height:42px;border-radius:12px;background:var(--accent-soft);color:var(--accent-d);
  display:grid;place-items:center;margin-bottom:10px}
.ccard__ic .ic{width:21px;height:21px}
.ccard b{font-size:16px;font-weight:700}
.ccard span{font-size:14px;color:var(--muted);line-height:1.5}
.ccard a{font-size:15.5px;font-weight:700;color:var(--accent-d);word-break:break-word}
.ccard a:hover{text-decoration:underline}

/* --- Zaman çizelgesi (hakkımızda) --- */
.tline{position:relative;display:grid;gap:26px;padding-left:34px}
.tline::before{content:'';position:absolute;left:11px;top:6px;bottom:6px;width:2px;
  background:linear-gradient(180deg,var(--accent),var(--accent-soft-line))}
.tstep{position:relative}
.tstep::before{content:'';position:absolute;left:-34px;top:4px;width:12px;height:12px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 0 5px var(--accent-soft),0 0 0 6px var(--line-2)}
.tstep b{display:block;font-size:17px;font-weight:800;letter-spacing:-.015em;margin-bottom:4px}
.tstep small{display:block;font-size:12.5px;font-weight:700;color:var(--accent-d);letter-spacing:.06em;
  text-transform:uppercase;margin-bottom:6px}
.tstep p{margin:0;font-size:15px;color:var(--muted);line-height:1.6}

/* --- İki sütunlu anlatım bloğu (metin + zaman çizelgesi) --- */
.split2{display:grid;grid-template-columns:.9fr 1.1fr;gap:44px;align-items:start}

/* --- Adım kartları (başvuru süreci) --- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;counter-reset:st}
.step{position:relative;padding:26px 24px;border-radius:var(--radius);background:var(--surface);
  border:1px solid var(--line);transition:.26s var(--ease)}
.step:hover{border-color:var(--accent-soft-line);box-shadow:var(--shadow)}
.step__no{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:10px;
  background:var(--black);color:var(--accent);font-weight:800;font-size:14px;margin-bottom:12px}
.step b{display:block;font-size:16.5px;font-weight:800;letter-spacing:-.015em;margin-bottom:6px}
.step p{margin:0;font-size:14.5px;color:var(--muted);line-height:1.55}

@media(max-width:1000px){
  .formsec__in,.split2{grid-template-columns:1fr;gap:32px}
  .ccards{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  .formsec{padding:56px 0}
  .formcard{padding:22px}
  .fgrid{grid-template-columns:1fr}
  .ccards{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .tline{padding-left:28px}
  .tstep::before{left:-28px}
}

/* Ana sayfa önizleme sekmelerindeki tek-ekran prototipi (data-proto) */
.spane--proto{height:430px;border-radius:12px}
@media(max-width:760px){.spane--proto{height:340px}}

/* ═══════════════════════════════════════════════════════════════════════════
   CİHAZ ÇERÇEVELERİ (2026-07-26)
   Gerçek uygulama ekranlarını telefon/tablet kasası içinde göstermek için.
   Kullanım: <div class="dev dev--phone"><img src="..."></div>
   ═══════════════════════════════════════════════════════════════════════════ */
.devrow{display:flex;gap:34px;justify-content:center;align-items:flex-end;flex-wrap:wrap}
.dev{position:relative;background:#0e0e0e;flex:none;
  box-shadow:0 3px 0 rgba(255,255,255,.10) inset,0 30px 70px -22px rgba(16,16,16,.5),0 8px 20px -8px rgba(16,16,16,.3)}
.dev img,.dev>.devscreen{display:block;width:100%;height:100%;object-fit:cover;object-position:top center;background:#111}
.dev::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:0 0 0 1px rgba(255,255,255,.08) inset}
/* telefon */
.dev--phone{width:264px;border-radius:34px;padding:9px}
/* Çentik payı: ekran görüntüsünün en üst şeridi (uygulamanın üst çubuğu)
   çentiğin arkasında kalıyordu. Gerçek cihazdaki gibi üstte siyah bir durum
   çubuğu şeridi bırakıyoruz; görüntü onun altından başlıyor. */
.dev--phone img,.dev--phone>.devscreen{border-radius:26px;height:552px;
  padding-top:24px;background:#000}
.dev--phone .notch{position:absolute;top:9px;left:50%;transform:translateX(-50%);
  width:86px;height:20px;background:#0e0e0e;border-radius:0 0 12px 12px;z-index:2}
/* tablet */
.dev--tablet{width:520px;border-radius:26px;padding:12px}
.dev--tablet img,.dev--tablet>.devscreen{border-radius:16px;height:390px}
/* etiket */
.dev__tag{position:absolute;left:50%;transform:translateX(-50%);bottom:-30px;white-space:nowrap;
  font-size:12.5px;font-weight:700;color:var(--muted);letter-spacing:.02em}
.devrow{padding-bottom:34px}
/* koyu bant içinde */
.why .dev__tag,.cta .dev__tag{color:rgba(255,255,255,.62)}
@media(max-width:820px){
  .devrow{gap:26px}
  .dev--phone{width:212px;border-radius:28px;padding:7px}
  .dev--phone img,.dev--phone>.devscreen{height:444px;border-radius:22px}
  .dev--tablet{width:100%;max-width:420px}
  .dev--tablet img,.dev--tablet>.devscreen{height:315px}
}

/* ── VoisPhone bölümü (santral.html #softphone) — cihaz sırası ile kart ızgarası arası boşluk */
#softphone .devrow{margin-bottom:56px;row-gap:58px}

/* ═══════════════════════════════════════════════════════════════════════════
   AKILLI EV — "her platformda" bölümü (2026-07-26)
   Tablet karesi gerçek 4:3 ekran oranında görünsün (dar ekranda sağ taraf
   kırpılmasın); cihaz satırı sarındığında etiket alttaki kasaya değmesin.
   ═══════════════════════════════════════════════════════════════════════════ */
.dev--tablet img,.dev--tablet>.devscreen{height:auto;aspect-ratio:4/3}
@media(max-width:820px){
  .dev--tablet img,.dev--tablet>.devscreen{height:auto;aspect-ratio:4/3}
  .devrow{row-gap:58px}
}

/* Ana sayfa önizlemesi: prototip hizmet sayfalarındaki gibi TAM GENİŞLİK,
   anlatım üstte ortalanmış (yan yana sıkışık düzen kaldırıldı). */
/* ── Ana sayfa önizlemesi (data-preview) ────────────────────────────────── */
.tabs .tabbar{flex-wrap:wrap;justify-content:center;row-gap:6px;max-width:1000px;margin-inline:auto}
.pv{display:block}
/* ÖNİZLEME BAŞLIĞI — ortalı ve derli toplu.
   Önce ortalanmış ama dağınıktı (üç sütuna yayılmış maddeler, ~200px yükseklik).
   Sonra iki sütuna alındı; bu sefer sağa itilmiş rozetler dengeyi bozdu.
   Şimdi: her şey ortalı, maddeler başlığın altında TEK ŞERİT hâlinde eşit
   rozetler, bağlantı en altta. Hem ortalı hem hizalı. */
.pv__copy{max-width:860px;margin:26px auto 22px;text-align:center;}
.pv__copy .h3{margin:0 0 8px;}
.pv__copy p{color:var(--muted);font-size:15.5px;line-height:1.6;margin:0 auto 16px;max-width:62ch;}
.pv__copy .ticklist{display:flex;flex-wrap:wrap;justify-content:center;align-items:stretch;
  gap:8px;margin:0 0 16px;text-align:left;}
.pv__copy .ticklist li{margin:0;align-items:center;gap:8px;font-size:13px;color:var(--ink-2);
  background:var(--accent-soft);border:1px solid var(--accent-soft-line);
  border-radius:999px;padding:8px 15px 8px 11px;white-space:nowrap;}
.pv__copy .ticklist li .ic{margin-top:0;padding:3px;width:11px;height:11px;background:none;}
.pv__copy .link-cta{justify-content:center;}
@media(max-width:760px){
  .pv__copy{margin:20px auto 18px;}
  .pv__copy p{font-size:14.5px;}
  /* dar ekranda rozetler alt alta değil, kaydırılabilir tek şerit:
     üç madde alt alta inince başlık bloğu gereksiz uzuyordu */
  .pv__copy .ticklist{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;
    padding-bottom:4px;scrollbar-width:none;}
  .pv__copy .ticklist::-webkit-scrollbar{display:none;}
}
@media(max-width:520px){
  .pv__copy .ticklist li{font-size:12.5px;padding:7px 12px 7px 9px;}
}
.pv__shot{width:100%;min-width:0}
.pv__load{height:540px;display:grid;place-items:center;color:var(--muted-2);font-size:14px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}
@media(max-width:860px){
  .pv__copy .ticklist{grid-template-columns:1fr;max-width:420px;gap:10px}
  .pv__load{height:380px}
}

/* Logo büyütüldü — header yüksekliği ve mobil için ince ayar */
@media(max-width:760px){.logo__img{height:40px}}
.logo--footer .logo__img{height:64px}

@media(max-width:760px){.logo--footer .logo__img{height:52px}}


/* ═══════════════════════════════════════════════════════════════════════════
   HERO ÜRÜN SLIDER — 11 ürün, 11 AYRI sahne
   Ekran görüntüsü değil, ürünün kendi anı canlandırılır. Her sahne kendi
   görsel dilini kullanır; hiçbiri diğerini tekrar etmez. Tüm hareket sahne
   kutusunun içinde kalır — .hshot__stage overflow:hidden, mutlak taşma yok.
   ═══════════════════════════════════════════════════════════════════════════ */
.hshot{position:relative}
.hshot__frame{position:relative}
.hshot__stage{position:relative;background:#fff;height:372px;overflow:hidden}
.hshot__slide{position:absolute;inset:0;padding:22px 24px;animation:hsIn .45s var(--ease) both}
@keyframes hsIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* Sahne kökü: sınıf adı .hs İDİ ve akıllı-ev demo çiplerinin .hs kuralıyla
   çakışıyordu (999px yuvarlak + 1px kenarlık) — her animasyonun arkasında
   hayalet bir elips çiziliyordu. Ad ayrıldı: .vsahne */
.vsahne{height:100%;display:flex;flex-direction:column;min-height:0;gap:12px}
.hs-h{display:flex;align-items:center;justify-content:space-between;gap:10px;flex:none}
.hs-h b{font-size:14px;font-weight:800}
.hs-badge{font-style:normal;font-size:11.5px;font-weight:700;color:var(--muted);
  background:#f4f4f6;border:1px solid var(--line);border-radius:999px;padding:4px 10px}
.hs-live{font-style:normal;font-size:10.5px;font-weight:800;letter-spacing:.08em;
  background:var(--accent);color:var(--black);border-radius:999px;padding:4px 9px}
.hs-foot{margin-top:auto;display:flex;align-items:baseline;gap:8px;flex:none}
.hs-foot b{font-size:26px;font-weight:800;letter-spacing:-.02em}
.hs-foot span{font-size:12.5px;color:var(--muted);font-weight:600}
.hs-count{font-variant-numeric:tabular-nums}

/* ── SANTRAL: IVR ağacı ─────────────────────────────────────────────────── */
.hs--ivr{gap:11px}
.hs-call{display:flex;align-items:center;gap:11px;background:#f7f7f8;border:1px solid var(--line);
  border-radius:12px;padding:11px 13px;flex:none;animation:hsDrop .5s var(--ease) both}
@keyframes hsDrop{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:none}}
.hs-call__ic{width:32px;height:32px;border-radius:9px;background:var(--accent-soft);color:var(--accent-d);
  display:grid;place-items:center;flex:none}
.hs-call b{display:block;font-size:14px;font-weight:800}
.hs-call small{font-size:11.5px;color:var(--muted)}
.hs-call .hs-live{margin-left:auto}
.hs-ivr{border:1px solid var(--line);border-radius:12px;padding:10px 12px;flex:none}
.hs-ivr__t{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.hs-ivr__o{display:flex;align-items:center;gap:10px;padding:7px 9px;border-radius:9px;font-size:13px;font-weight:600;
  animation:hsUp .45s var(--ease) both;animation-delay:var(--g)}
.hs-ivr__o i{font-style:normal;width:21px;height:21px;border-radius:6px;background:#f0f0f2;color:var(--ink);
  display:grid;place-items:center;font-size:11.5px;font-weight:800;flex:none}
.hs-ivr__o.is-pick{background:var(--accent-soft)}
.hs-ivr__o.is-pick i{background:var(--accent);color:var(--black)}
.hs-ivr__o em{margin-left:auto;font-style:normal;font-size:11px;font-weight:800;color:var(--accent-d)}
@keyframes hsUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.hs-ring{margin-top:auto;display:flex;align-items:center;gap:10px;border:1px solid var(--accent);
  background:var(--accent-soft);border-radius:12px;padding:11px 13px;flex:none}
.hs-ring b{font-size:14px;font-weight:800}
.hs-ring small{font-size:12px;color:var(--accent-d);font-weight:600}
.hs-ring__w{width:11px;height:11px;border-radius:50%;background:var(--accent);flex:none;position:relative}
.hs-ring__w::after{content:'';position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--accent);
  animation:hsPulse 1.5s ease-out infinite}
@keyframes hsPulse{0%{opacity:.7;transform:scale(.6)}100%{opacity:0;transform:scale(1.35)}}

/* ── ÇAĞRI MERKEZİ: kuyruk panosu ───────────────────────────────────────── */
.hs--queue{gap:13px}
.hs-q{border:1px solid var(--line);border-radius:12px;padding:13px 14px;flex:none}
.hs-q__n{display:flex;align-items:baseline;gap:9px;margin-bottom:10px}
.hs-q__n b{font-size:30px;font-weight:800;letter-spacing:-.02em}
.hs-q__n span{font-size:12.5px;color:var(--muted);font-weight:600}
.hs-q__bar{height:7px;border-radius:4px;background:#f0f0f2;overflow:hidden}
.hs-q__bar span{display:block;height:100%;border-radius:4px;background:var(--accent);
  animation:hsDrain 2.4s var(--ease) both}
@keyframes hsDrain{from{width:100%}to{width:6%}}
.hs-ags{display:flex;flex-direction:column;gap:9px}
.hs-ag{display:flex;align-items:center;gap:11px;background:#f7f7f8;border:1px solid var(--line);
  border-radius:11px;padding:10px 12px;animation:hsSlide .5s var(--ease) both;animation-delay:var(--g)}
@keyframes hsSlide{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
.hs-av{width:30px;height:30px;border-radius:50%;background:var(--black);color:#fff;font-size:11.5px;
  font-weight:800;display:grid;place-items:center;flex:none}
.hs-ag b{display:block;font-size:13.5px;font-weight:700}
.hs-ag small{font-size:11.5px;color:var(--muted)}
.hs-st{margin-left:auto;font-style:normal;font-size:11px;font-weight:800;padding:5px 10px;border-radius:999px}
.hs-st--on{background:var(--accent);color:var(--black)}
.hs-st--ok{background:rgba(0,0,0,.06);color:var(--ink)}
.hs-st--wait{background:#fff;color:var(--muted);border:1px solid var(--line)}

/* ── ÇAĞRI YAYINI: numara ızgarası + huni ───────────────────────────────── */
.hs--dial{gap:12px}
.hs-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:6px;flex:none}
.hs-dot{height:13px;border-radius:4px;background:#eeeef0;animation:hsLit 2.6s var(--ease) infinite;animation-delay:var(--g)}
@keyframes hsLit{0%,70%{background:#eeeef0}18%,52%{background:var(--accent)}}
.hs-kpi{margin-top:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;flex:none}
.hs-kpi>div{background:#f7f7f8;border:1px solid var(--line);border-radius:11px;padding:11px 12px}
.hs-kpi b{display:block;font-size:20px;font-weight:800;letter-spacing:-.02em}
.hs-kpi span{font-size:11.5px;color:var(--muted);font-weight:600}

/* ── CRM: fırsat kartı aşama atlar ──────────────────────────────────────── */
.hs--pipe{flex-direction:row;gap:10px}
.hs-col{flex:1;background:#f7f7f8;border:1px solid var(--line);border-radius:12px;padding:11px 10px;
  display:flex;flex-direction:column;gap:9px;min-width:0}
.hs-col__t{font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.hs-deal{background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px;font-size:12.5px;
  font-weight:700;line-height:1.35}
.hs-deal span{display:block;font-weight:800;color:var(--accent-d);margin-top:3px}
.hs-deal--ghost{opacity:0;animation:hsGhost 4s var(--ease) infinite}
@keyframes hsGhost{0%,8%{opacity:1}22%,100%{opacity:0}}
.hs-deal--move{border-color:var(--accent);box-shadow:0 6px 18px rgba(245,186,18,.24);
  opacity:0;animation:hsWin 4s var(--ease) infinite}
@keyframes hsWin{0%,18%{opacity:0;transform:translate(-118%,0) scale(.96)}
  34%,100%{opacity:1;transform:none}}
.hs-deal--idle{opacity:.55}

/* ── PERSONEL TAKİP: rota çizimi ────────────────────────────────────────── */
.hs--map{gap:10px}
.hs-map{width:100%;flex:1;min-height:0}
.hs-road{fill:none;stroke:#eaeaec;stroke-width:7;stroke-linecap:round}
.hs-road--on{stroke:var(--accent);stroke-dasharray:640;stroke-dashoffset:640;
  animation:hsDraw 4.2s var(--ease) infinite}
@keyframes hsDraw{0%{stroke-dashoffset:640}70%,100%{stroke-dashoffset:0}}
.hs-stop{fill:#fff;stroke:#cfcfd4;stroke-width:3}
.hs-stop--end{fill:var(--accent);stroke:var(--accent-d)}
.hs-pin{fill:var(--black)}
.hs-eta{display:flex;align-items:baseline;gap:9px;flex:none}
.hs-eta>b{font-size:14px;font-weight:800}
.hs-eta span{font-size:12.5px;color:var(--muted);font-weight:600}
.hs-eta span b{color:var(--ink);font-weight:800}

/* ── RESTORAN POS: adisyon fişi ─────────────────────────────────────────── */
.hs--pos{gap:11px}
.hs-tick{border:1px solid var(--line);border-radius:12px;padding:12px 13px;flex:1;min-height:0;
  display:flex;flex-direction:column;gap:7px}
.hs-tick__h{display:flex;align-items:baseline;gap:8px;padding-bottom:8px;border-bottom:1px dashed var(--line)}
.hs-tick__h b{font-size:14px;font-weight:800}
.hs-tick__h small{font-size:11.5px;color:var(--muted)}
.hs-li{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600;
  animation:hsUp .4s var(--ease) both;animation-delay:var(--g)}
.hs-li i{font-style:normal;font-weight:800;color:var(--accent-d);width:24px;flex:none}
.hs-li b{margin-left:auto;font-weight:800}
.hs-tot{margin-top:auto;display:flex;align-items:baseline;justify-content:space-between;
  padding-top:9px;border-top:1px dashed var(--line)}
.hs-tot span{font-size:12.5px;color:var(--muted);font-weight:700}
.hs-tot b{font-size:22px;font-weight:800;letter-spacing:-.02em}
.hs-tot b::after{content:' ₺'}
.hs-kds{display:flex;align-items:center;gap:10px;background:var(--accent-soft);border:1px solid var(--accent);
  border-radius:12px;padding:11px 13px;flex:none;animation:hsUp .5s var(--ease) both;animation-delay:1.35s}
.hs-kds__ic{width:26px;height:26px;border-radius:8px;background:var(--accent);color:var(--black);
  display:grid;place-items:center;flex:none}
.hs-kds b{font-size:13.5px;font-weight:800}
.hs-kds small{font-size:12px;color:var(--accent-d);font-weight:600;margin-left:auto}

/* ── OTEL: doluluk takvimi ──────────────────────────────────────────────── */
.hs--hotel{gap:10px}
.hs-week{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;flex:none}
.hs-week span{font-size:10.5px;font-weight:700;color:var(--muted);text-align:center}
.hs-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;flex:none}
.hs-cell{height:28px;border-radius:7px;background:#f2f2f4;border:1px solid var(--line);
  animation:hsCell .45s var(--ease) both;animation-delay:var(--g)}
.hs-cell.is-full{background:var(--accent);border-color:var(--accent)}
@keyframes hsCell{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}

/* ── RANDEVU: gün ajandası ──────────────────────────────────────────────── */
.hs--appt{gap:9px}
.hs-slot{display:flex;align-items:center;gap:11px;flex:none}
.hs-slot>i{font-style:normal;font-size:12px;font-weight:800;color:var(--muted);width:42px;flex:none;
  font-variant-numeric:tabular-nums}
.hs-appt{flex:1;border-radius:10px;padding:11px 12px;font-size:13px;font-weight:700;
  border:1px solid var(--line);background:#f7f7f8;display:flex;align-items:center;gap:8px}
.hs-appt.is-new{background:var(--accent-soft);border-color:var(--accent);
  animation:hsBook .6s var(--ease) both;animation-delay:.5s}
.hs-appt em{margin-left:auto;font-style:normal;font-size:10.5px;font-weight:800;
  background:var(--accent);color:var(--black);border-radius:999px;padding:3px 8px}
@keyframes hsBook{from{opacity:0;transform:translateY(-12px) scale(.97)}to{opacity:1;transform:none}}
.hs-sms{margin-top:auto;display:flex;align-items:center;gap:9px;font-size:12.5px;font-weight:700;
  color:var(--accent-d);flex:none;animation:hsUp .5s var(--ease) both;animation-delay:1.3s}

/* ── SİPARİŞ: teslimat adımları ─────────────────────────────────────────── */
.hs--ship{gap:16px}
.hs-steps{position:relative;display:grid;grid-template-columns:repeat(4,1fr);flex:none;padding-top:6px}
.hs-steps__line{position:absolute;left:8%;right:8%;top:13px;height:4px;border-radius:3px;background:#eeeef0}
.hs-steps__line i{display:block;height:100%;border-radius:3px;background:var(--accent);width:0;
  animation:hsFill 2.6s var(--ease) both}
@keyframes hsFill{from{width:0}to{width:100%}}
.hs-step{display:flex;flex-direction:column;align-items:center;gap:8px;position:relative;z-index:1}
.hs-step b{width:19px;height:19px;border-radius:50%;background:#fff;border:3px solid #e4e4e8;
  animation:hsOn .4s var(--ease) both;animation-delay:var(--g)}
@keyframes hsOn{to{border-color:var(--accent);background:var(--accent)}}
.hs-step small{font-size:11.5px;font-weight:700;color:var(--muted)}
.hs-cari{margin-top:auto;display:flex;align-items:baseline;justify-content:space-between;
  background:#f7f7f8;border:1px solid var(--line);border-radius:12px;padding:13px 14px;flex:none}
.hs-cari span{font-size:12.5px;color:var(--muted);font-weight:700}
.hs-cari b{font-size:22px;font-weight:800;letter-spacing:-.02em}
.hs-cari b::after{content:' ₺'}

/* ── AKILLI EV: senaryo + cihazlar + tüketim ────────────────────────────── */
.hs--home{gap:11px}
.hs-scen{display:flex;align-items:center;gap:10px;background:var(--accent-soft);border:1px solid var(--accent);
  border-radius:12px;padding:11px 13px;flex:none}
.hs-scen b{font-size:13.5px;font-weight:800}
.hs-scen .ic{color:var(--accent-d)}
.hs-scen .hs-live{margin-left:auto}
.hs-devs{display:flex;flex-direction:column;gap:8px;flex:none}
.hs-dev{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#f7f7f8;
  border:1px solid var(--line);border-radius:11px;padding:10px 12px;font-size:13px;font-weight:700}
.hs-sw{width:38px;height:21px;border-radius:999px;background:#e2e2e6;position:relative;flex:none;
  animation:hsSwBg .4s var(--ease) both;animation-delay:var(--g)}
.hs-sw b{position:absolute;top:3px;left:3px;width:15px;height:15px;border-radius:50%;background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.2);animation:hsSw .4s var(--ease) both;animation-delay:var(--g)}
@keyframes hsSwBg{to{background:var(--accent)}}
@keyframes hsSw{to{transform:translateX(17px)}}
.hs-spark{width:100%;height:56px;flex:none}
.hs-spark__p{fill:none;stroke:var(--accent);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:520;stroke-dashoffset:520;animation:hsDraw2 2s var(--ease) both .3s}
@keyframes hsDraw2{to{stroke-dashoffset:0}}

/* ── GÜVENLİK: koruma + olay akışı ──────────────────────────────────────── */
.hs--sec{gap:13px}
.hs-shield{display:flex;align-items:center;gap:12px;background:var(--black);color:#fff;border-radius:12px;
  padding:14px 15px;flex:none;position:relative;overflow:hidden}
.hs-shield .ic{color:var(--accent);width:22px;height:22px}
.hs-shield b{display:block;font-size:14px;font-weight:800}
.hs-shield small{font-size:12px;color:rgba(255,255,255,.6)}
.hs-shield__ring{position:absolute;left:-40px;top:50%;width:120px;height:120px;border-radius:50%;
  border:2px solid var(--accent);transform:translateY(-50%);opacity:.25;
  animation:hsScan 3s ease-out infinite}
@keyframes hsScan{0%{transform:translateY(-50%) scale(.4);opacity:.5}100%{transform:translateY(-50%) scale(1.5);opacity:0}}
.hs-evts{display:flex;flex-direction:column;gap:9px}
.hs-evt{display:flex;align-items:center;gap:11px;border:1px solid var(--line);border-radius:11px;
  padding:11px 13px;font-size:13px;font-weight:700;animation:hsSlide .5s var(--ease) both;animation-delay:var(--g)}
.hs-evt__d{width:9px;height:9px;border-radius:50%;background:#cfcfd4;flex:none}
.hs-evt.is-alert{background:var(--accent-soft);border-color:var(--accent)}
.hs-evt.is-alert .hs-evt__d{background:var(--accent)}
.hs-evt small{margin-left:auto;font-size:11.5px;color:var(--muted);font-weight:600;font-variant-numeric:tabular-nums}

/* ── alt şerit: ürün adı + vaat + noktalar ──────────────────────────────── */
.hshot__cap{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:26px;padding:0 4px}
.hshot__txt b{display:block;font-size:15px;font-weight:800;letter-spacing:-.01em}
.hshot__txt span{display:block;font-size:13px;color:var(--muted);margin-top:2px}
.hshot__dots{display:flex;gap:6px;flex:none}
.hshot__dot{width:7px;height:7px;border-radius:999px;border:0;padding:0;cursor:pointer;
  background:rgba(0,0,0,.16);transition:all .25s var(--ease)}
.hshot__dot.is-on{width:22px;background:var(--accent)}
.hshot__dot:hover{background:rgba(0,0,0,.32)}
@media (max-width:900px){
  .hshot__stage{height:330px}
  .hshot__cap{flex-direction:column;align-items:flex-start;gap:10px;margin-top:34px}
}
@media (prefers-reduced-motion:reduce){
  .hshot__slide,.hs-call,.hs-ivr__o,.hs-ag,.hs-li,.hs-kds,.hs-cell,.hs-appt,.hs-step b,
  .hs-sw,.hs-sw b,.hs-evt,.hs-deal--ghost,.hs-deal--move,.hs-q__bar span,.hs-steps__line i{animation:none}
  .hs-dot,.hs-road--on,.hs-pin,.hs-shield__ring,.hs-ring__w::after,.hs-spark__p{animation:none}
  .hs-deal--move{opacity:1}.hs-deal--ghost{opacity:0}
  .hs-spark__p,.hs-road--on{stroke-dashoffset:0}
  .hs-q__bar span{width:6%}.hs-steps__line i{width:100%}
}

/* — sahne rötuşları (2026-08-05): CRM sütunları dolu, saha haritası zeminli,
     siparişte kurye kartı — üçü de boş/bağlamsız görünüyordu. */
.hs-col__t{display:flex;align-items:center;gap:6px}
.hs-col__t i{font-style:normal;margin-left:auto;font-size:10.5px;font-weight:800;color:var(--ink);
  background:#fff;border:1px solid var(--line);border-radius:999px;padding:2px 7px}
.hs-col--win{background:var(--accent-soft);border-color:var(--accent)}
.hs-deal em{display:inline-block;margin-top:6px;font-style:normal;font-size:10px;font-weight:800;
  background:var(--accent);color:var(--black);border-radius:999px;padding:3px 8px}
.hs-mgrid line{stroke:#f0f0f2;stroke-width:2}
.hs-mblock rect{fill:#f6f6f8}
.hs-mtxt{font-size:11px;font-weight:700;fill:var(--muted);text-anchor:middle}
.hs-mtxt--end{fill:var(--accent-d)}
.hs-eta{display:flex;align-items:center;gap:11px;border:1px solid var(--line);border-radius:12px;
  padding:10px 12px;background:#f7f7f8}
.hs-eta b{font-size:13.5px;font-weight:800}
.hs-eta small{display:block;font-size:12px;color:var(--muted);font-weight:600}
.hs-eta small b{color:var(--ink)}
.hs-eta .hs-badge{margin-left:auto}
.hs-ship{display:flex;align-items:center;gap:11px;border:1px solid var(--line);border-radius:12px;
  padding:11px 12px;background:#f7f7f8;flex:none;animation:hsUp .5s var(--ease) both .9s}
.hs-ship b{font-size:13.5px;font-weight:800}
.hs-ship small{display:block;font-size:12px;color:var(--muted);font-weight:600}
.hs-ship .hs-badge{margin-left:auto}

/* — sol sütun da slider'ın parçası: her üründe içerik değişir, geçiş yumuşasın */
.hcopy .eyebrow,.hcopy .hero__title,.hcopy .hero__sub,.hcopy .hero__stats{will-change:opacity,transform}
.hcopy.is-in .eyebrow{animation:hcIn .5s var(--ease) both}
.hcopy.is-in .hero__title{animation:hcIn .5s var(--ease) both .06s}
.hcopy.is-in .hero__sub{animation:hcIn .5s var(--ease) both .12s}
.hcopy.is-in .hero__stats{animation:hcIn .5s var(--ease) both .18s}
@keyframes hcIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.hshot__cap{justify-content:flex-end}
@media (prefers-reduced-motion:reduce){
  .hcopy.is-in .eyebrow,.hcopy.is-in .hero__title,.hcopy.is-in .hero__sub,.hcopy.is-in .hero__stats{animation:none}
}

/* ── HER SLAYTA ÖZEL GEÇİŞ ───────────────────────────────────────────────────
   Tek tip fade tüm ürünlerde aynı hissi veriyordu. Her modül kendi hareketiyle
   giriyor: çağrı soldan gelir, fiş yukarıdan yazdırılır, takvim perdesi açılır… */
.hshot__slide{animation:none}                     /* ortak fade iptal — özel geçişler devralır */

/* santral — çağrı soldan içeri girer */
.hshot__slide--gel{animation:sgGel .55s var(--ease) both}
@keyframes sgGel{from{opacity:0;transform:translateX(-38px)}to{opacity:1;transform:none}}

/* çağrı merkezi — pano aşağıdan kalkar, hafif ölçek */
.hshot__slide--kuyruk{animation:sgKuyruk .55s var(--ease) both}
@keyframes sgKuyruk{from{opacity:0;transform:translateY(26px) scale(.985)}to{opacity:1;transform:none}}

/* çağrı yayını — soldan sağa dalga hâlinde açılır */
.hshot__slide--dalga{animation:sgDalga .7s var(--ease) both}
@keyframes sgDalga{from{opacity:0;clip-path:inset(0 100% 0 0)}to{opacity:1;clip-path:inset(0 0 0 0)}}

/* crm — kart destesi gibi hafif dönerek yerleşir */
.hshot__slide--kart{animation:sgKart .6s var(--ease) both;transform-origin:60% 100%}
@keyframes sgKart{from{opacity:0;transform:rotate(2.4deg) translateY(22px) scale(.97)}to{opacity:1;transform:none}}

/* saha — haritaya yakınlaşma */
.hshot__slide--yakin{animation:sgYakin .65s var(--ease) both}
@keyframes sgYakin{from{opacity:0;transform:scale(1.12)}to{opacity:1;transform:none}}

/* pos — fiş yukarıdan yazdırılır */
.hshot__slide--fis{animation:sgFis .6s var(--ease) both}
@keyframes sgFis{from{opacity:0;clip-path:inset(0 0 100% 0);transform:translateY(-14px)}
  to{opacity:1;clip-path:inset(0 0 0 0);transform:none}}

/* otel — takvim perdesi ortadan iki yana açılır */
.hshot__slide--perde{animation:sgPerde .65s var(--ease) both}
@keyframes sgPerde{from{opacity:.2;clip-path:inset(0 42% 0 42%)}to{opacity:1;clip-path:inset(0 0 0 0)}}

/* randevu — slot yukarıdan düşer */
.hshot__slide--dus{animation:sgDus .6s cubic-bezier(.34,1.4,.5,1) both}
@keyframes sgDus{from{opacity:0;transform:translateY(-34px)}to{opacity:1;transform:none}}

/* sipariş — sağdan sola yol alır */
.hshot__slide--yol{animation:sgYol .55s var(--ease) both}
@keyframes sgYol{from{opacity:0;transform:translateX(42px)}to{opacity:1;transform:none}}

/* akıllı ev — ışık yanar gibi parlayarak açılır */
.hshot__slide--isik{animation:sgIsik .7s var(--ease) both}
@keyframes sgIsik{from{opacity:0;filter:brightness(1.7) saturate(.4);transform:scale(.99)}
  to{opacity:1;filter:none;transform:none}}

/* güvenlik — ekran yukarıdan aşağı taranır */
.hshot__slide--tarama{animation:sgTara .7s var(--ease) both}
@keyframes sgTara{from{opacity:0;clip-path:inset(0 0 100% 0)}55%{opacity:1}to{opacity:1;clip-path:inset(0 0 0 0)}}

/* Yüzen KPI kartı sahne başlığını kapatmasın (CRM'de 3. sütun adı gizleniyordu) */
.floatcard--sync{top:-14px;right:-26px}

@media (prefers-reduced-motion:reduce){
  .hshot__slide,.hshot__slide--gel,.hshot__slide--kuyruk,.hshot__slide--dalga,.hshot__slide--kart,
  .hshot__slide--yakin,.hshot__slide--fis,.hshot__slide--perde,.hshot__slide--dus,
  .hshot__slide--yol,.hshot__slide--isik,.hshot__slide--tarama{animation:none;clip-path:none;filter:none;transform:none;opacity:1}
}

/* ── GERÇEK EKRAN ÜZERİNDE ANİMASYON ────────────────────────────────────────
   Kural: sahneler çizilmez, ürünün GERÇEK arayüz görüntüsü kullanılır. Görsel
   yavaşça odağa doğru yaklaşır; üzerine açıklama baloncukları sırayla düşer.
   Her şey .hshot__stage içinde kalır (overflow:hidden). */
.hsx{position:absolute;inset:0;margin:0;overflow:hidden}
.hsx img{width:100%;height:100%;object-fit:cover;display:block;
  animation:hsxZoom 9s ease-out both}
@keyframes hsxZoom{from{transform:scale(1.005)}to{transform:scale(1.075)}}
.hsx-bal{position:absolute;transform:translate(-50%,-50%);background:#fff;border:1px solid var(--line);
  border-radius:12px;box-shadow:0 10px 28px rgba(0,0,0,.14);padding:9px 12px;max-width:210px;
  animation:hsxBal .5s var(--ease) both;animation-delay:var(--g);pointer-events:none}
.hsx-bal b{display:block;font-size:12.5px;font-weight:800;line-height:1.25}
.hsx-bal small{display:block;font-size:11.5px;color:var(--muted);font-weight:600;margin-top:2px}
.hsx-bal::before{content:'';position:absolute;left:14px;bottom:-5px;width:9px;height:9px;background:#fff;
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);transform:rotate(45deg)}
@keyframes hsxBal{from{opacity:0;transform:translate(-50%,-38%) scale(.94)}
  to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
/* iç ekran noktaları — ürünün kaçıncı ekranındayız */
.hshot__inner{display:flex;gap:5px;margin-right:14px}
.hshot__idot{width:16px;height:3px;border-radius:2px;background:rgba(0,0,0,.14);transition:background .3s}
.hshot__idot.is-on{background:var(--black)}
.hshot__cap{align-items:center}
@media (prefers-reduced-motion:reduce){ .hsx img,.hsx-bal{animation:none} .hsx-bal{opacity:1} }

/* ── AKILLI EV: gerçek cihaz kartları (koyu panel + pil anahtar) ────────────
   Uygulamadaki kart dili birebir: amber ikon karesi, cihaz adı, Kapalı/Açık
   durumu ve sağda anahtar. Senaryo çalışınca kartlar SIRAYLA yanar. */
.hs--ev{gap:11px}
/* Koyu panel sahnenin TAMAMINI kaplasın: negatif margin yüksekliği büyütmüyor,
   altta beyaz şerit kalıyordu → mutlak konumla kutuyu birebir doldur. */
.hs--ev{position:absolute;inset:0;height:auto;margin:0;padding:20px 22px;background:#0e0e0e;border-radius:0}
.hs-ev-top{display:flex;align-items:center;gap:7px;flex:none}
.hs-ev-room{font-size:11.5px;font-weight:700;color:rgba(255,255,255,.55);
  background:rgba(255,255,255,.06);border-radius:999px;padding:5px 11px}
.hs-ev-room.is-on{background:var(--accent);color:var(--black)}
.hs-ev-top .hs-live{margin-left:auto;font-size:9.5px}
.hs-ev-grid{display:grid;grid-template-columns:repeat(2,1fr);grid-auto-rows:1fr;gap:9px;flex:1;min-height:0}
.hs-dcard{display:flex;align-items:center;gap:11px;background:#191919;border:1px solid rgba(255,255,255,.07);
  border-radius:12px;padding:11px 13px;min-width:0;
  animation:hsDOn .55s var(--ease) both;animation-delay:var(--g)}
@keyframes hsDOn{
  0%{background:#191919;border-color:rgba(255,255,255,.07);box-shadow:none}
  60%{box-shadow:0 0 0 3px rgba(245,186,18,.16)}
  100%{background:#1e1a10;border-color:rgba(245,186,18,.45);box-shadow:0 6px 18px rgba(245,186,18,.12)}}
.hs-dic{width:28px;height:28px;border-radius:8px;background:rgba(245,186,18,.14);color:var(--accent);
  display:grid;place-items:center;flex:none}
.hs-dic .ic{width:15px;height:15px}
.hs-dtxt{min-width:0;flex:1}
.hs-dtxt b{display:block;font-size:12.5px;font-weight:700;color:#fff;line-height:1.2;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hs-dtxt small{display:block;position:relative;height:14px;margin-top:2px}
.hs-dtxt em{position:absolute;left:0;top:0;font-style:normal;font-size:11px;font-weight:600}
.hs-off{color:rgba(255,255,255,.42);animation:hsFadeOut .4s var(--ease) both;animation-delay:var(--g)}
.hs-on{color:var(--accent);animation:hsFadeIn .4s var(--ease) both;animation-delay:var(--g)}
@keyframes hsFadeOut{to{opacity:0}}
@keyframes hsFadeIn{from{opacity:0}to{opacity:1}}
.hs-dsw{width:34px;height:19px;border-radius:999px;background:rgba(255,255,255,.16);position:relative;flex:none;
  animation:hsDSwBg .4s var(--ease) both;animation-delay:var(--g)}
.hs-dsw b{position:absolute;top:3px;left:3px;width:13px;height:13px;border-radius:50%;background:#fff;
  animation:hsDSw .4s var(--ease) both;animation-delay:var(--g)}
@keyframes hsDSwBg{to{background:var(--accent)}}
@keyframes hsDSw{to{transform:translateX(15px)}}
.hs-ev-foot{display:flex;align-items:baseline;gap:9px;flex:none}
.hs-ev-foot b{font-size:24px;font-weight:800;color:#fff;letter-spacing:-.02em}
.hs-ev-foot span{font-size:12px;color:rgba(255,255,255,.5);font-weight:600}
.hs-ev-foot .hs-badge{margin-left:auto;background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.1);
  color:rgba(255,255,255,.72)}
@media (prefers-reduced-motion:reduce){
  .hs-dcard,.hs-dsw,.hs-dsw b,.hs-off,.hs-on{animation:none}
  .hs-dcard{background:#1e1a10;border-color:rgba(245,186,18,.45)}
  .hs-dsw{background:var(--accent)}.hs-dsw b{transform:translateX(15px)}
  .hs-off{opacity:0}
}

/* ── ÜRÜN SAYFASI ÖZELLİK SATIRLARI (sağlı sollu, animasyonlu) ───────────── */
.feats{display:flex;flex-direction:column;gap:74px}
.vrow{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.vrow--ters .vrow__txt{order:2}
.vrow--ters .vrow__vis{order:1}
.vrow__txt{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.vrow.is-in .vrow__txt{opacity:1;transform:none}
.vrow__h{font-size:clamp(24px,2.3vw,32px);font-weight:800;letter-spacing:-.02em;line-height:1.18;margin:12px 0 16px}
.vrow__l{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:11px}
.vrow__l li{display:flex;align-items:flex-start;gap:10px;font-size:15px;color:var(--ink-2,#3f4550);line-height:1.5}
.vrow__l .ic{color:var(--accent-d);flex:none;margin-top:3px}
.vrow__vis{opacity:0;transform:translateY(22px) scale(.985);
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
.vrow.is-in .vrow__vis{opacity:1;transform:none}
.vrow__stage{position:relative;min-height:352px;background:#fff;border-radius:18px;overflow:hidden;
  display:flex;flex-direction:column;/* sabit yükseklik uzun sahneyi alttan kesiyordu */
  border:1px solid var(--line);box-shadow:var(--shadow-lg)}
.vrow__stage .vsahne{position:relative;inset:auto;flex:1;height:auto;padding:22px 24px;gap:12px}
.vrow__stage .hs--ev{padding:20px 22px}
@media (max-width:900px){
  .feats{gap:48px}
  .vrow{grid-template-columns:1fr;gap:26px}
  .vrow--ters .vrow__txt{order:1}.vrow--ters .vrow__vis{order:2}
  .vrow__stage{min-height:300px}
}

/* — POS özellik sahneleri — */
.hs--cid{align-items:center;justify-content:center;gap:16px}
.hs-cid-ring{position:relative;width:56px;height:56px;border-radius:50%;background:var(--accent-soft);
  color:var(--accent-d);display:grid;place-items:center;flex:none}
.hs-cid-ring span{position:absolute;inset:0;border-radius:50%;border:2px solid var(--accent);
  animation:hsPulse 2s ease-out infinite}
.hs-cid-ring span:nth-child(2){animation-delay:1s}
.hs-cid-card{width:100%;border:1px solid var(--line);border-radius:14px;padding:13px 15px;
  animation:hsUp .5s var(--ease) both .2s}
.hs-cid-h{display:flex;align-items:center;gap:11px;padding-bottom:11px;border-bottom:1px solid var(--line)}
.hs-cid-h b{display:block;font-size:14.5px;font-weight:800}
.hs-cid-h small{font-size:12px;color:var(--muted)}
.hs-cid-h .hs-badge{margin-left:auto}
.hs-cid-row{display:flex;align-items:baseline;gap:12px;padding-top:9px;font-size:13px;
  animation:hsSlide .45s var(--ease) both;animation-delay:var(--g)}
.hs-cid-row span{color:var(--muted);font-weight:600;width:82px;flex:none}
.hs-cid-row b{font-weight:700}

.hs--kds2{gap:11px}
.hs-kwrap{display:flex;flex-direction:column;gap:10px}
.hs-kt{border:1px solid var(--line);border-radius:12px;padding:11px 13px;
  animation:hsSlide .5s var(--ease) both;animation-delay:var(--g)}
.hs-kt-h{display:flex;align-items:baseline;gap:9px;margin-bottom:9px}
.hs-kt-h b{font-size:13.5px;font-weight:800}
.hs-kt-h span{font-size:12px;color:var(--ink);font-weight:700}
.hs-kt-h small{margin-left:auto;font-size:11.5px;color:var(--muted);font-weight:600}
.hs-kt-bar{display:block;height:7px;border-radius:4px;background:#f0f0f2;overflow:hidden}
.hs-kt-bar em{display:block;height:100%;border-radius:4px;background:var(--accent);width:0;
  animation:hsKt 1.6s var(--ease) both;animation-delay:var(--d)}
@keyframes hsKt{to{width:var(--w)}}

.hs--cour2{gap:12px}
.hs--cour2 .hs-map{flex:1;min-height:0;width:100%}

.hs--cost{gap:9px}
.hs-crow3{display:flex;align-items:center;gap:12px;font-size:13px;font-weight:600;
  animation:hsSlide .45s var(--ease) both;animation-delay:var(--g)}
.hs-crow3>span{width:118px;flex:none;color:var(--ink)}
.hs-cbar{flex:1;height:9px;border-radius:5px;background:#f0f0f2;overflow:hidden}
.hs-cbar em{display:block;height:100%;border-radius:5px;background:var(--accent);width:0;
  animation:hsKt 1.1s var(--ease) both .3s}
.hs-crow3>b{width:52px;text-align:right;font-weight:800;font-variant-numeric:tabular-nums}
.hs-margin{margin-top:auto;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.hs-margin>div{background:#f7f7f8;border:1px solid var(--line);border-radius:12px;padding:12px 13px}
.hs-margin__on{background:var(--accent-soft) !important;border-color:var(--accent) !important}
.hs-margin b{display:block;font-size:23px;font-weight:800;letter-spacing:-.02em}
.hs-margin span{font-size:11.5px;color:var(--muted);font-weight:600}

/* ── HERO EKRANINDA ODAK: ilgisiz menü bölümlerini buğula ───────────────────
   Ürün sayfasında sol menünün o ürünle ilgisiz grupları (ör. santral
   sayfasında CRM/Analiz çekmeceleri) hafifçe buğulanır; ürünün kendi bloğu
   net kalır. Ölçüler sayfa bazında --sbw/--y/--h ile verilir.

   Tek katmanda hem yatay hem dikey yumuşatma yapılamıyor (mask-composite
   desteği güvenilmez), bu yüzden iki katman: dış span yatayda, ::before
   dikeyde soluyor — kesişimleri dört kenarı da yumuşatıyor. Böylece kenar
   dar bir kare gibi okunmuyor ve sağ kenar menü şeridinin içinde bitiyor.
   Koyu bir dolgu YOK: koyu menü üstünde dolgu, buğuyu gri bir dikdörtgene
   çeviriyordu. */
.browser{position:relative}
.shotmask{position:absolute;left:0;top:var(--y);width:var(--sbw);height:var(--h);
  pointer-events:none;
  mask-image:linear-gradient(90deg,#000 0 70%,transparent 100%);
  -webkit-mask-image:linear-gradient(90deg,#000 0 70%,transparent 100%)}
.shotmask::before{content:"";position:absolute;inset:0;
  backdrop-filter:blur(2.6px) saturate(.55) brightness(.86);
  -webkit-backdrop-filter:blur(2.6px) saturate(.55) brightness(.86);
  mask-image:linear-gradient(180deg,transparent 0,#000 18%,#000 82%,transparent 100%);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 18%,#000 82%,transparent 100%)}

/* Hero slider çerçevesinde amber HALE KAPALI: `.browser::before` bir elips
   radial-gradient; ekran görüntülerinin üstünde yumuşak bir parıltı yaratıyordu
   ama BEYAZ animasyon sahnesinde elipsin kenarı hayalet bir halka gibi
   okunuyordu (her sahnede görünüyordu). Diğer sayfalardaki görsellerde durur. */
.hshot__frame .browser::before{display:none}
/* Sahne kendi opak katmanını çizsin: altta kalan hale/ızgara gibi katmanlar
   beyazın içinden hayalet bir elips olarak sızıyordu. isolation + slaytın kendi
   beyaz zemini bunu kesin olarak keser. */
.hshot__stage{isolation:isolate}
.hshot__slide{background:#fff}
.hshot__slide.hshot__slide--isik{background:#fff}

/* ── ÇÖZÜMLER: işletme tipine göre kurgu kartları ───────────────────────────
   Ürün listesi değil; her kart aynı iskelette okunur: kim → bugün nasıl gidiyor
   → Vois kurgusu (modüller sırayla) → ne değişir. */
.sol-sec{padding:78px 0 90px}
.sols{display:flex;flex-direction:column;gap:22px}
.sol{background:#fff;border:1px solid var(--line);border-radius:20px;padding:26px 28px;
  box-shadow:0 1px 2px rgba(16,24,40,.04);transition:box-shadow .3s var(--ease),transform .3s var(--ease)}
.sol:hover{box-shadow:0 18px 44px rgba(16,24,40,.10);transform:translateY(-2px)}
.sol__h{display:flex;align-items:center;gap:14px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.sol__ic{width:44px;height:44px;border-radius:13px;background:var(--accent-soft);color:var(--accent-d);
  display:grid;place-items:center;flex:none}
.sol__ic .ic{width:21px;height:21px}
.sol__h h3{font-size:19px;font-weight:800;letter-spacing:-.02em;margin:0}
.sol__kim{display:block;font-size:13px;color:var(--muted);margin-top:2px}
.sol__no{margin-left:auto;font-size:26px;font-weight:900;color:var(--line);letter-spacing:-.03em;
  font-variant-numeric:tabular-nums}
.sol__body{display:grid;grid-template-columns:.9fr 1.1fr;gap:34px;padding:20px 0 6px}
.sol__body b{display:block;font-size:11.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:var(--muted);margin-bottom:9px}
.sol__durum p{margin:0;font-size:14.5px;line-height:1.62;color:var(--ink-2,#3f4550)}
.sol__kurgu ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;counter-reset:k}
.sol__kurgu li{display:flex;align-items:flex-start;gap:11px;font-size:14px;line-height:1.5;
  color:var(--ink-2,#3f4550)}
.sol__mod{flex:none;min-width:104px;font-weight:800;color:var(--ink);font-size:13px;
  background:#f7f7f8;border:1px solid var(--line);border-radius:8px;padding:3px 9px;text-align:center}
.sol__f{display:flex;align-items:center;gap:22px;flex-wrap:wrap;padding-top:18px;margin-top:14px;
  border-top:1px solid var(--line)}
.sol__fark{display:flex;gap:26px;flex-wrap:wrap;flex:1}
.sol__fark b{display:block;font-size:13.5px;font-weight:800}
.sol__fark span{font-size:12.5px;color:var(--accent-d);font-weight:700}
@media (max-width:900px){
  .sol{padding:20px}
  .sol__body{grid-template-columns:1fr;gap:20px}
  .sol__no{font-size:20px}
  .sol__mod{min-width:auto}
  .sol__f{gap:14px}
}

/* Özellik bölümü ritmi: bölümün kendi üst/alt nefesi vardı (0 idi), komşuların
   padding'ine bağımlıydı. Site ritmiyle (88/94) uyumlu hale getirildi. */
.feats-sec{padding:84px 0 96px}
.feats-sec .section-head{margin-bottom:52px}
@media (max-width:900px){ .feats-sec{padding:56px 0 64px} .feats-sec .section-head{margin-bottom:34px} }

/* ═══════════════════════════════════════════════════════════════════════════
   KOYU SAHNE BAĞLAMI — Akıllı Ev ve Güvenlik
   Bu iki ürünün gerçek arayüzü koyu; sahnelerin bir kısmı beyaz, bir kısmı
   koyu kalıyordu (aynı sayfada iki farklı dünya). `.is-koyu` bağlamı ortak
   sahne parçalarını koyu paletle yeniden boyar — markup değişmez.
   ═══════════════════════════════════════════════════════════════════════════ */
.is-koyu{background:#0e0e0e}
.is-koyu .hshot__slide,.is-koyu .vsahne{background:#0e0e0e}
.is-koyu .vsahne{color:#fff}
.is-koyu .hs-h b,.is-koyu .hs-foot b,.is-koyu .hs-kpi b,.is-koyu .hs-ev-foot b{color:#fff}
.is-koyu .hs-h .hs-badge,.is-koyu .hs-badge{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.12);color:rgba(255,255,255,.74)}
.is-koyu .hs-foot span,.is-koyu .hs-kpi span{color:rgba(255,255,255,.52)}

/* satır listesi */
.is-koyu .hs-ag{background:#191919;border-color:rgba(255,255,255,.08)}
.is-koyu .hs-ag b{color:#fff}
.is-koyu .hs-ag small{color:rgba(255,255,255,.45)}
.is-koyu .hs-av{background:rgba(245,186,18,.16);color:var(--accent)}
.is-koyu .hs-st--ok{background:rgba(255,255,255,.09);color:rgba(255,255,255,.8)}
.is-koyu .hs-st--wait{background:transparent;color:rgba(255,255,255,.5);border-color:rgba(255,255,255,.16)}

/* adım / IVR kalıbı */
.is-koyu .hs-call{background:#191919;border-color:rgba(255,255,255,.08)}
.is-koyu .hs-call b{color:#fff}
.is-koyu .hs-call small{color:rgba(255,255,255,.45)}
.is-koyu .hs-call__ic{background:rgba(245,186,18,.16);color:var(--accent)}
.is-koyu .hs-ivr{border-color:rgba(255,255,255,.08);background:#141414}
.is-koyu .hs-ivr__t{color:rgba(255,255,255,.4)}
.is-koyu .hs-ivr__o{color:#fff}
.is-koyu .hs-ivr__o i{background:rgba(255,255,255,.08);color:rgba(255,255,255,.82)}
.is-koyu .hs-ivr__o.is-pick{background:rgba(245,186,18,.14)}
.is-koyu .hs-ivr__o.is-pick i{background:var(--accent);color:var(--black)}
.is-koyu .hs-ivr__o em{color:var(--accent)}
.is-koyu .hs-ring{background:rgba(245,186,18,.12);border-color:rgba(245,186,18,.55)}
.is-koyu .hs-ring b{color:#fff}
.is-koyu .hs-ring small{color:var(--accent)}

/* KPI kalıbı */
.is-koyu .hs-kpi>div{background:#191919;border-color:rgba(255,255,255,.08)}

/* belge / çubuk kalıbı */
.is-koyu .hs-crow3{color:rgba(255,255,255,.82)}
.is-koyu .hs-crow3>span{color:#fff}
.is-koyu .hs-crow3>b{color:#fff}
.is-koyu .hs-cbar{background:rgba(255,255,255,.10)}
.is-koyu .hs-margin>div{background:#191919;border-color:rgba(255,255,255,.08)}
.is-koyu .hs-margin b{color:#fff}
.is-koyu .hs-margin span{color:rgba(255,255,255,.5)}
.is-koyu .hs-margin__on{background:rgba(245,186,18,.13) !important;border-color:rgba(245,186,18,.5) !important}
.is-koyu .hs-margin__on b{color:var(--accent)}

/* akıllı ev / güvenlik özel parçaları */
.is-koyu .hs-dev{background:#191919;border-color:rgba(255,255,255,.08);color:#fff}
.is-koyu .hs-scen{background:rgba(245,186,18,.12);border-color:rgba(245,186,18,.5)}
.is-koyu .hs-scen b{color:#fff}
.is-koyu .hs-evt{background:#191919;border-color:rgba(255,255,255,.08);color:#fff}
.is-koyu .hs-evt small{color:rgba(255,255,255,.45)}
.is-koyu .hs-evt.is-alert{background:rgba(245,186,18,.13);border-color:rgba(245,186,18,.5)}
.is-koyu .hs-evt__d{background:rgba(255,255,255,.28)}
.is-koyu .hs-sw{background:rgba(255,255,255,.16)}
/* koyu bağlamda çerçevenin beyaz zemini de koyulaşsın */
.vrow__stage.is-koyu,.hshot__stage.is-koyu{background:#0e0e0e}
/* Koyu bağlamda "Korumada" paneli zeminle aynı siyaha oturup düzleşiyordu. */
.is-koyu .hs-shield{background:#191919;border:1px solid rgba(255,255,255,.08)}

/* Laptop çerçevesinin üstündeki AÇIK GRİ başlık şeridi kaldırıldı: koyu panel
   görüntülerinin üstünde beyaz bir bant gibi duruyordu ve ekran adı zaten
   slider başlığında yazıyor. Sayaç ekranın SAĞ ÜSTÜNE, çerçevenin içine alındı. */
.laptop__bar{display:none}
.laptop__lid{padding:12px}
.laptop__screen{border-radius:9px;position:relative}
.laptop__screen .laptop__count{position:absolute;top:10px;right:12px;z-index:3;
  background:rgba(14,14,14,.62);color:#fff;border-radius:999px;padding:4px 10px;font-size:11px;
  backdrop-filter:blur(6px)}

/* ── AKILLI EV ÖZELLİK SAHNELERİ ────────────────────────────────────────────
   Genel şablonlar (liste/adım/belge) takvim, müzik, sulama gibi konulara
   uymuyordu: metin sarıyor, satırlar kutudan taşıyordu. Bunlar konuya özel,
   350px'lik sahne kutusuna sığacak biçimde kurgulandı. */
.ae-sc{display:flex;flex-direction:column;gap:12px;height:100%;min-height:0;overflow:hidden}

/* Takvim: gerçek bir ay ızgarası */
.ae-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;flex:none}
.ae-cal u{text-decoration:none;text-align:center;font-size:9.5px;font-weight:800;
  color:var(--muted);letter-spacing:.04em}
.ae-cal i{font-style:normal;display:grid;place-items:center;height:26px;border-radius:7px;
  background:#f5f5f7;font-size:11px;font-weight:700;color:var(--ink);
  opacity:0;transform:scale(.82);animation:aePop .34s var(--ease) forwards;animation-delay:var(--g)}
.ae-cal i.ev{background:var(--accent-soft);color:var(--accent-d);box-shadow:inset 0 0 0 1px var(--accent)}
.ae-cal i.on{background:var(--black);color:#fff}
@keyframes aePop{to{opacity:1;transform:none}}
.ae-evs{display:flex;flex-direction:column;gap:7px;margin-top:auto;min-height:0}
.ae-ev{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:10px;
  background:#f7f7f8;border:1px solid var(--line);
  opacity:0;transform:translateX(-8px);animation:aeIn .4s var(--ease) forwards;animation-delay:var(--g)}
.ae-ev .d{width:26px;height:26px;border-radius:8px;background:var(--accent-soft);color:var(--accent-d);
  display:grid;place-items:center;font-size:10px;font-weight:800;flex:none}
.ae-ev b{font-size:12px;font-weight:700;display:block;line-height:1.3}
.ae-ev small{font-size:10.5px;color:var(--muted)}
@keyframes aeIn{to{opacity:1;transform:none}}

/* Aktivite: zaman çizelgesi */
.ae-tl{display:flex;flex-direction:column;gap:2px;position:relative;padding-left:18px;min-height:0}
.ae-tl::before{content:'';position:absolute;left:5px;top:8px;bottom:8px;width:2px;border-radius:2px;
  background:linear-gradient(180deg,var(--accent),rgba(245,186,18,.12))}
.ae-tli{position:relative;padding:9px 0 9px 4px;
  opacity:0;transform:translateY(6px);animation:aeIn .42s var(--ease) forwards;animation-delay:var(--g)}
.ae-tli::before{content:'';position:absolute;left:-18px;top:14px;width:12px;height:12px;border-radius:50%;
  background:#fff;box-shadow:0 0 0 2.5px var(--accent)}
.ae-tli.now::before{background:var(--accent);animation:aePulse 1.8s ease-out infinite}
@keyframes aePulse{0%{box-shadow:0 0 0 2.5px var(--accent)}70%{box-shadow:0 0 0 8px rgba(245,186,18,0)}100%{box-shadow:0 0 0 2.5px var(--accent)}}
.ae-tli b{display:block;font-size:12.5px;font-weight:700}
.ae-tli small{font-size:11px;color:var(--muted)}
.ae-tli em{font-style:normal;font-size:10px;font-weight:800;color:var(--accent-d);letter-spacing:.04em}

/* Müzik: ekolayzer + oda grubu */
.ae-player{display:flex;align-items:center;gap:12px;padding:12px 13px;border-radius:12px;
  background:linear-gradient(100deg,var(--accent-soft),#f7f7f8 62%);border:1px solid var(--line);flex:none}
.ae-eq{display:flex;align-items:flex-end;gap:3px;height:30px;flex:none}
.ae-eq span{width:4px;border-radius:2px;background:var(--accent-d);
  animation:aeEq 1.05s ease-in-out infinite alternate;animation-delay:var(--g)}
@keyframes aeEq{from{height:22%}to{height:100%}}
.ae-prog{height:5px;border-radius:3px;background:#e6e6ea;position:relative;margin-top:8px;overflow:hidden}
.ae-prog i{position:absolute;left:0;top:0;bottom:0;border-radius:3px;background:var(--accent);
  width:0;animation:aeProg 2.6s var(--ease) forwards .3s}
@keyframes aeProg{to{width:62%}}

/* Listeler: sırayla işaretlenen maddeler */
.ae-chk{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:10px;
  background:#f7f7f8;border:1px solid var(--line);
  opacity:0;animation:aeIn .36s var(--ease) forwards;animation-delay:var(--g)}
.ae-chk .b{width:17px;height:17px;border-radius:5px;border:2px solid #cfcfd6;flex:none;position:relative}
.ae-chk.ok .b{background:var(--accent);border-color:var(--accent)}
.ae-chk.ok .b::after{content:'';position:absolute;left:4.5px;top:1px;width:4px;height:9px;
  border:solid var(--black);border-width:0 2px 2px 0;transform:rotate(42deg)}
.ae-chk.ok span{color:var(--muted);text-decoration:line-through}
.ae-chk span{font-size:12.5px;font-weight:600}
.ae-chk em{font-style:normal;margin-left:auto;font-size:10.5px;font-weight:700;color:var(--muted)}

/* Sulama: dolan su göstergesi */
.ae-water{display:flex;align-items:center;gap:16px;padding:14px;border-radius:14px;
  background:#f7f7f8;border:1px solid var(--line);flex:none}
.ae-gauge{width:78px;height:78px;border-radius:50%;flex:none;position:relative;
  background:conic-gradient(var(--accent) 0turn,#e9e9ee 0turn);animation:aeGauge 1.6s var(--ease) forwards .25s}
@keyframes aeGauge{to{background:conic-gradient(var(--accent) .62turn,#e9e9ee .62turn)}}
.ae-gauge::after{content:'';position:absolute;inset:9px;border-radius:50%;background:#fff}
.ae-gauge b{position:absolute;inset:0;display:grid;place-items:center;z-index:1;
  font-size:15px;font-weight:800;letter-spacing:-.02em}
.ae-drops{display:flex;gap:5px;margin-top:9px}
.ae-drops i{width:7px;height:9px;border-radius:0 50% 50% 50%;transform:rotate(45deg);
  background:var(--accent);opacity:.25;animation:aeDrop 1.4s ease-in-out infinite;animation-delay:var(--g)}
@keyframes aeDrop{0%,100%{opacity:.22}50%{opacity:1}}

/* Senaryo: basılan düğme, sırayla yanan cihazlar */
.ae-scn{display:flex;align-items:center;gap:12px;padding:13px 15px;border-radius:13px;flex:none;
  background:linear-gradient(180deg,#F8C528,#EDAF07);animation:aePress 2.8s var(--ease) infinite}
@keyframes aePress{0%,72%,100%{transform:none}78%{transform:scale(.975)}84%{transform:none}}
.ae-scn .ic{width:34px;height:34px;border-radius:10px;background:rgba(0,0,0,.16);color:#171717;
  display:grid;place-items:center;flex:none}
.ae-scn b{display:block;font-size:14px;font-weight:800;color:#171717}
.ae-scn small{font-size:11.5px;font-weight:600;color:rgba(0,0,0,.6)}
.ae-devs{display:grid;grid-template-columns:1fr 1fr;gap:8px;min-height:0}
.ae-dev{display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:10px;
  background:#f7f7f8;border:1px solid var(--line);
  opacity:.45;animation:aeLight .5s var(--ease) forwards;animation-delay:var(--g)}
@keyframes aeLight{to{opacity:1;background:var(--accent-soft);border-color:var(--accent)}}
.ae-dev i{width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none}
.ae-dev span{font-size:11.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Ev planı: kat planı üzerinde canlı noktalar */
.ae-plan{flex:1;min-height:0;display:grid;grid-template-columns:1.3fr 1fr;grid-template-rows:1fr 1fr;
  gap:8px;padding:10px;border-radius:14px;background:#f7f7f8;border:1px solid var(--line)}
.ae-room{position:relative;border-radius:10px;background:#fff;border:1px solid var(--line);
  padding:9px 10px;display:flex;flex-direction:column;justify-content:space-between}
.ae-room.on{background:var(--accent-soft);border-color:var(--accent)}
.ae-room b{font-size:11.5px;font-weight:800}
.ae-room small{font-size:10px;color:var(--muted)}
.ae-room i{position:absolute;right:9px;top:9px;width:9px;height:9px;border-radius:50%;background:#d6d6dc}
.ae-room.on i{background:var(--accent);animation:aePulse 2s ease-out infinite;animation-delay:var(--g)}

/* Termostat: dolan yay + hedef derece + mod seçimi */
.ae-thermo{display:flex;align-items:center;gap:18px;flex:none}
.ae-dial{width:126px;height:126px;flex:none;position:relative;border-radius:50%;
  background:conic-gradient(from .5turn,var(--accent) 0turn,#ebebf0 0turn);
  animation:aeDial 1.9s var(--ease) forwards .2s}
@keyframes aeDial{to{background:conic-gradient(from .5turn,var(--accent) .58turn,#ebebf0 .58turn)}}
.ae-dial::after{content:'';position:absolute;inset:11px;border-radius:50%;background:#fff;
  box-shadow:0 6px 18px -10px rgba(16,16,16,.35)}
.ae-dial .v{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:1px}
.ae-dial .v b{font-size:27px;font-weight:800;letter-spacing:-.03em;line-height:1;
  font-variant-numeric:tabular-nums}
.ae-dial .v span{font-size:10.5px;font-weight:700;color:var(--muted)}
.ae-dial .v em{font-style:normal;font-size:10px;font-weight:800;color:var(--accent-d);letter-spacing:.05em}
.ae-modes{display:flex;gap:6px;margin-top:10px}
.ae-modes span{padding:5px 11px;border-radius:8px;background:#f2f2f5;border:1px solid var(--line);
  font-size:10.5px;font-weight:700;color:var(--muted)}
.ae-modes span.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-d)}
.ae-rooms{display:flex;flex-direction:column;gap:7px;margin-top:auto;min-height:0}
.ae-rt{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:10px;
  background:#f7f7f8;border:1px solid var(--line);
  opacity:0;transform:translateX(-8px);animation:aeIn .4s var(--ease) forwards;animation-delay:var(--g)}
.ae-rt b{font-size:12px;font-weight:700;flex:1}
.ae-rt small{font-size:10.5px;color:var(--muted)}
.ae-rt i{font-style:normal;font-size:13px;font-weight:800;color:var(--accent-d);
  font-variant-numeric:tabular-nums}
.ae-bar{flex:1;height:5px;border-radius:3px;background:#e9e9ee;overflow:hidden;max-width:74px}
.ae-bar em{display:block;height:100%;border-radius:3px;background:var(--accent);width:0;
  animation:aeBar 1.1s var(--ease) forwards;animation-delay:var(--g)}
@keyframes aeBar{to{width:var(--w)}}

/* Akıllı Ev / Güvenlik sahneleri KOYU bağlamda çiziliyor (bkz. KOYU_URUN).
   Yukarıdaki .ae-* stilleri açık zemine göre yazıldı; koyu bağlamda kart
   zeminleri ve metin renkleri beyaz-üstüne-beyaz kalıyordu. */
.is-koyu .ae-cal i{background:#191919;color:rgba(255,255,255,.78)}
.is-koyu .ae-cal i.ev{background:rgba(245,186,18,.15);color:var(--accent);box-shadow:inset 0 0 0 1px rgba(245,186,18,.55)}
.is-koyu .ae-cal i.on{background:var(--accent);color:#171717}
.is-koyu .ae-cal u{color:rgba(255,255,255,.38)}
.is-koyu .ae-ev,.is-koyu .ae-chk,.is-koyu .ae-water,.is-koyu .ae-rt,
.is-koyu .ae-dev,.is-koyu .ae-plan{background:#191919;border-color:rgba(255,255,255,.08)}
.is-koyu .ae-ev b,.is-koyu .ae-chk span,.is-koyu .ae-rt b,.is-koyu .ae-dev span,
.is-koyu .ae-room b,.is-koyu .ae-water b{color:#fff}
.is-koyu .ae-ev small,.is-koyu .ae-rt small,.is-koyu .ae-chk em,
.is-koyu .ae-room small,.is-koyu .ae-water small{color:rgba(255,255,255,.45)}
.is-koyu .ae-ev .d{background:rgba(245,186,18,.16);color:var(--accent)}
.is-koyu .ae-chk .b{border-color:rgba(255,255,255,.28)}
.is-koyu .ae-chk.ok span{color:rgba(255,255,255,.42)}
.is-koyu .ae-tli b{color:#fff}
.is-koyu .ae-tli small{color:rgba(255,255,255,.45)}
.is-koyu .ae-tli::before{background:#0e0e0e}
.is-koyu .ae-player{background:linear-gradient(100deg,rgba(245,186,18,.14),#191919 62%);border-color:rgba(255,255,255,.08)}
.is-koyu .ae-prog,.is-koyu .ae-bar{background:rgba(255,255,255,.12)}
.is-koyu .ae-gauge::after{background:#0e0e0e}
.is-koyu .ae-gauge{background:conic-gradient(var(--accent) 0turn,rgba(255,255,255,.12) 0turn)}
@keyframes aeGaugeKoyu{to{background:conic-gradient(var(--accent) .62turn,rgba(255,255,255,.12) .62turn)}}
.is-koyu .ae-gauge{animation-name:aeGaugeKoyu}
.is-koyu .ae-dial{background:conic-gradient(from .5turn,var(--accent) 0turn,rgba(255,255,255,.12) 0turn)}
@keyframes aeDialKoyu{to{background:conic-gradient(from .5turn,var(--accent) .58turn,rgba(255,255,255,.12) .58turn)}}
.is-koyu .ae-dial{animation-name:aeDialKoyu}
.is-koyu .ae-dial::after{background:#141414;box-shadow:none}
.is-koyu .ae-dial .v b{color:#fff}
.is-koyu .ae-dial .v span{color:rgba(255,255,255,.5)}
.is-koyu .ae-modes span{background:#191919;border-color:rgba(255,255,255,.08);color:rgba(255,255,255,.55)}
.is-koyu .ae-modes span.on{background:rgba(245,186,18,.16);border-color:rgba(245,186,18,.5);color:var(--accent)}
.is-koyu .ae-room{background:#141414;border-color:rgba(255,255,255,.07)}
.is-koyu .ae-room.on{background:rgba(245,186,18,.12);border-color:rgba(245,186,18,.45)}
.is-koyu .ae-room i{background:rgba(255,255,255,.18)}
.is-koyu .ae-room.on i{background:var(--accent)}
.is-koyu .ae-dev{opacity:.4}
.is-koyu .ae-rt i{color:var(--accent)}
@keyframes aeLightKoyu{to{opacity:1;background:rgba(245,186,18,.13);border-color:rgba(245,186,18,.45)}}
.is-koyu .ae-dev{animation-name:aeLightKoyu}

/* Alarm zinciri: olay → SMS → sırayla arama */
.ae-alert{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;flex:none;
  background:rgba(248,113,113,.10);border:1px solid rgba(248,113,113,.35)}
.ae-alert .ic{width:34px;height:34px;border-radius:11px;background:rgba(248,113,113,.18);color:#f87171;
  display:grid;place-items:center;flex:none;animation:aeAlarm 1.4s ease-out infinite}
@keyframes aeAlarm{0%{box-shadow:0 0 0 0 rgba(248,113,113,.45)}70%{box-shadow:0 0 0 12px rgba(248,113,113,0)}100%{box-shadow:0 0 0 0 rgba(248,113,113,0)}}
.ae-alert b{display:block;font-size:13.5px;font-weight:800}
.ae-alert small{font-size:11.5px;color:var(--muted)}
.ae-chain{display:flex;flex-direction:column;gap:7px;min-height:0}
.ae-cl{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:10px;
  background:#f7f7f8;border:1px solid var(--line);
  opacity:0;transform:translateX(-10px);animation:aeIn .42s var(--ease) forwards;animation-delay:var(--g)}
.ae-cl .n{width:24px;height:24px;border-radius:50%;background:var(--accent-soft);color:var(--accent-d);
  display:grid;place-items:center;font-size:10.5px;font-weight:800;flex:none}
.ae-cl b{font-size:12.5px;font-weight:700;flex:1}
.ae-cl small{font-size:10.5px;color:var(--muted)}
.ae-cl i{font-style:normal;font-size:10px;font-weight:800;letter-spacing:.04em;padding:3px 8px;
  border-radius:6px;background:#ececf0;color:var(--muted);flex:none}
.ae-cl i.sms{background:var(--accent-soft);color:var(--accent-d)}
.ae-cl i.ok{background:rgba(40,200,64,.14);color:#1f9c33}
.is-koyu .ae-alert{background:rgba(248,113,113,.12);border-color:rgba(248,113,113,.3)}
.is-koyu .ae-alert b{color:#fff}
.is-koyu .ae-alert small{color:rgba(255,255,255,.45)}
.is-koyu .ae-cl{background:#191919;border-color:rgba(255,255,255,.08)}
.is-koyu .ae-cl b{color:#fff}
.is-koyu .ae-cl small{color:rgba(255,255,255,.45)}
.is-koyu .ae-cl .n{background:rgba(245,186,18,.16);color:var(--accent)}
.is-koyu .ae-cl i{background:rgba(255,255,255,.09);color:rgba(255,255,255,.7)}
.is-koyu .ae-cl i.sms{background:rgba(245,186,18,.16);color:var(--accent)}
.is-koyu .ae-cl i.ok{background:rgba(40,200,64,.16);color:#4ade80}

/* Sesli asistan: dalga + komut baloncukları */
.ae-mic{display:flex;align-items:center;gap:13px;padding:13px 15px;border-radius:13px;flex:none;
  background:linear-gradient(100deg,var(--accent-soft),#f7f7f8 62%);border:1px solid var(--line)}
.ae-mic .ring{width:42px;height:42px;border-radius:50%;background:var(--accent);color:var(--black);
  display:grid;place-items:center;flex:none;position:relative;animation:aeAlarm 2s ease-out infinite}
.ae-wave{display:flex;align-items:center;gap:3px;height:22px;flex:none}
.ae-wave span{width:3px;border-radius:2px;background:var(--accent-d);
  animation:aeEq .9s ease-in-out infinite alternate;animation-delay:var(--g)}
.is-koyu .ae-mic{background:linear-gradient(100deg,rgba(245,186,18,.14),#191919 62%);border-color:rgba(255,255,255,.08)}
.is-koyu .ae-mic b{color:#fff}
.is-koyu .ae-mic small{color:rgba(255,255,255,.45)}

/* ── ANASAYFA ÜRÜN KARTLARI: her ürüne özel mini animasyon ─────────────────
   Kartlar yalnız ikon + paragraftı; on iki kart alt alta düz bir tablo gibi
   duruyordu. Her karta o ürünün işini gösteren küçük, canlı bir görsel
   ekleniyor — kart görünür olunca animasyon başlar. */
.svc{padding-top:0}
.svc__viz{height:92px;margin:0 -24px 18px;padding:14px 24px 0;position:relative;overflow:hidden;
  background:linear-gradient(180deg,var(--accent-soft),transparent);
  display:flex;flex-direction:column;justify-content:center;gap:6px}
.svc__viz::after{content:'';position:absolute;left:24px;right:24px;bottom:0;height:1px;background:var(--line)}
.svc.is-in .svc__viz .v{animation-play-state:running}
.svc__viz .v{animation-play-state:paused}

/* satır: kayarak giren çubuk + etiket */
.vz-row{display:flex;align-items:center;gap:7px;height:17px;
  opacity:0;transform:translateX(-10px);animation:vzIn .5s var(--ease) forwards;animation-delay:var(--g)}
@keyframes vzIn{to{opacity:1;transform:none}}
.vz-row i{width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none}
.vz-row:first-child i{animation:vzPulse 1.9s ease-out infinite}
.vz-row span{height:7px;border-radius:4px;background:#e4e4ea;flex:1;max-width:var(--w)}
.vz-row b{font-size:9.5px;font-weight:800;color:var(--accent-d);letter-spacing:.04em;flex:none}
.vz-row.dim i{background:#d3d3da}

/* nabız halkası (santral / güvenlik) */
.vz-pulse{position:absolute;right:22px;top:16px;width:12px;height:12px;border-radius:50%;
  background:var(--accent);animation:vzPulse 1.9s ease-out infinite}
@keyframes vzPulse{0%{box-shadow:0 0 0 0 rgba(245,186,18,.55)}70%{box-shadow:0 0 0 14px rgba(245,186,18,0)}100%{box-shadow:0 0 0 0 rgba(245,186,18,0)}}

/* yayın dalgası */
.vz-wave{position:relative;height:100%;display:grid;place-items:center}
.vz-wave i{position:absolute;width:22px;height:22px;border-radius:50%;border:2px solid var(--accent);
  opacity:0;animation:vzWave 2.4s ease-out infinite;animation-delay:var(--g)}
@keyframes vzWave{0%{transform:scale(.5);opacity:.8}100%{transform:scale(3.4);opacity:0}}
.vz-wave b{width:14px;height:14px;border-radius:50%;background:var(--accent);z-index:1}

/* sütun grafiği (crm / enerji) */
.vz-bars{display:flex;align-items:flex-end;gap:6px;height:56px}
.vz-bars i{flex:1;border-radius:4px 4px 0 0;background:var(--accent);height:0;
  animation:vzGrow .8s var(--ease) forwards;animation-delay:var(--g)}
.vz-bars i:nth-child(even){background:var(--accent-soft-line,#f2d79a)}
@keyframes vzGrow{to{height:var(--h)}}

/* rota (saha / sipariş) */
.vz-route{position:relative;height:52px}
.vz-route .ln{position:absolute;left:0;right:0;top:26px;height:3px;border-radius:2px;
  background:repeating-linear-gradient(90deg,var(--accent) 0 8px,transparent 8px 15px);opacity:.55}
.vz-route .pin{position:absolute;top:16px;width:22px;height:22px;border-radius:50%;
  background:var(--accent);color:var(--black);display:grid;place-items:center;font-size:10px;font-weight:800;
  animation:vzMove 3.4s var(--ease) infinite}
@keyframes vzMove{0%{left:0}55%{left:calc(100% - 22px)}100%{left:calc(100% - 22px)}}
.vz-route .st{position:absolute;top:22px;width:10px;height:10px;border-radius:50%;
  background:#fff;box-shadow:0 0 0 2px var(--accent)}

/* durum kutucukları (otel / randevu) */
.vz-tiles{display:grid;grid-template-columns:repeat(6,1fr);gap:5px}
.vz-tiles i{height:22px;border-radius:5px;background:#ececf0;
  animation:vzTile .5s var(--ease) forwards;animation-delay:var(--g)}
.vz-tiles i.on{background:var(--accent)}
.vz-tiles i.mid{background:var(--accent-soft)}
@keyframes vzTile{from{transform:scale(.7);opacity:0}to{transform:none;opacity:1}}

/* anahtarlar (akıllı ev) */
.vz-sw{display:flex;gap:8px;flex-wrap:wrap}
.vz-sw i{width:34px;height:19px;border-radius:999px;background:#e2e2e8;position:relative;flex:none;
  animation:vzSw .6s var(--ease) forwards;animation-delay:var(--g)}
.vz-sw i::after{content:'';position:absolute;top:3px;left:3px;width:13px;height:13px;border-radius:50%;
  background:#fff;transition:none;animation:vzKnob .6s var(--ease) forwards;animation-delay:var(--g)}
@keyframes vzSw{to{background:var(--accent)}}
@keyframes vzKnob{to{left:18px}}
.vz-sw i.off{animation:none;background:#e2e2e8}
.vz-sw i.off::after{animation:none;left:3px}

/* adisyon (pos) */
.vz-tick{display:flex;flex-direction:column;gap:5px}
.vz-tick div{display:flex;align-items:center;gap:7px;
  opacity:0;animation:vzIn .45s var(--ease) forwards;animation-delay:var(--g)}
.vz-tick div span{height:6px;border-radius:3px;background:#e4e4ea;flex:1;max-width:var(--w)}
.vz-tick div b{font-size:9.5px;font-weight:800;color:var(--ink);margin-left:auto}
.vz-tick div i{width:12px;height:12px;border-radius:4px;background:var(--accent-soft);flex:none}

/* pencereler (sanal ofis) */
.vz-win{display:grid;grid-template-columns:repeat(8,1fr);gap:4px}
.vz-win i{height:15px;border-radius:3px;background:#ececf0;
  animation:vzWin 2.6s ease-in-out infinite;animation-delay:var(--g)}
@keyframes vzWin{0%,100%{background:var(--vz-idle,#ececf0)}45%,60%{background:var(--accent)}}

/* ── ÇÖZÜM FİLMİ: iş akışının adım adım oynayan şeridi ─────────────────────
   Çözümler sayfası uçtan uca yazıydı; hangi modülün ne zaman devreye
   girdiği okunmadan anlaşılmıyordu. Kart görünür olunca akış soldan sağa
   oynuyor: bağlantı çizgisi dolar, adımlar sırayla yanar. */
.sol__film{position:relative;margin:0 0 22px;padding:20px 22px 18px;border-radius:14px;
  background:linear-gradient(180deg,var(--accent-soft),transparent 70%);border:1px solid var(--line);
  overflow-x:auto}
.sol__film::-webkit-scrollbar{display:none}
.film__t{font-size:11px;font-weight:800;letter-spacing:.08em;color:var(--accent-d);
  text-transform:uppercase;margin-bottom:14px}
.film__track{display:flex;align-items:stretch;gap:0;min-width:max-content;position:relative}
.film__step{position:relative;flex:1 1 0;min-width:150px;max-width:230px;padding:0 12px;
  opacity:.35;transform:translateY(6px);transition:opacity .45s var(--ease),transform .45s var(--ease)}
.film__step:first-child{padding-left:0}
.film__step:last-child{padding-right:0}
.is-play .film__step{animation:filmStep .5s var(--ease) forwards;animation-delay:var(--g)}
@keyframes filmStep{to{opacity:1;transform:none}}
.film__ic{width:38px;height:38px;border-radius:11px;background:#fff;border:1px solid var(--line);
  display:grid;place-items:center;color:var(--muted);margin-bottom:10px;position:relative;z-index:1;
  transition:.4s var(--ease)}
.is-play .film__step .film__ic{animation:filmIc .5s var(--ease) forwards;animation-delay:var(--g)}
@keyframes filmIc{to{background:var(--accent);border-color:var(--accent);color:var(--black);
  box-shadow:0 6px 18px -8px rgba(245,186,18,.9)}}
.film__mod{display:block;font-size:12px;font-weight:800;letter-spacing:-.01em;margin-bottom:3px}
.film__cap{display:block;font-size:12px;line-height:1.45;color:var(--muted)}
/* adımları birleştiren, dolan çizgi */
.film__step::before{content:'';position:absolute;left:0;right:0;top:19px;height:2px;background:#e6e6ea}
.film__step:first-child::before{left:19px}
.film__step:last-child::before{right:calc(100% - 19px)}
.film__step::after{content:'';position:absolute;left:0;top:19px;height:2px;width:0;background:var(--accent)}
.is-play .film__step::after{animation:filmLine .5s linear forwards;animation-delay:var(--g)}
.film__step:last-child::after{display:none}
@keyframes filmLine{to{width:100%}}
/* oynatma göstergesi */
.film__now{position:absolute;right:22px;top:18px;display:inline-flex;align-items:center;gap:6px;
  font-size:10px;font-weight:800;letter-spacing:.07em;color:var(--accent-d)}
.film__now i{width:7px;height:7px;border-radius:50%;background:var(--accent);
  animation:vzPulse 1.9s ease-out infinite}
@media (max-width:760px){
  .film__step{min-width:190px}
  .sol__film{padding:16px}
}

/* ── AVANTAJ ŞERİDİ: "önce ne oluyordu, Vois ile ne oluyor" ────────────────
   Ürün sayfalarındaki "Neden Vois" bandı altı statik kutuydu; müşteriye ne
   kazandırdığı okunmuyordu. Her kart iki çubukla önce/sonra farkını
   canlandırıyor ve kazancı sayarak yazıyor. */
.avj{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.avj__c{padding:22px;border-radius:var(--radius);background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);display:flex;flex-direction:column;
  opacity:0;transform:translateY(14px);transition:.55s var(--ease)}
.is-in .avj__c{opacity:1;transform:none;transition-delay:var(--g)}
.avj__ic{width:40px;height:40px;border-radius:11px;background:rgba(245,186,18,.16);color:var(--accent);
  display:grid;place-items:center;margin-bottom:14px}
.avj__ic .ic{width:20px;height:20px}
.avj__n{font-size:30px;font-weight:900;letter-spacing:-.03em;line-height:1;color:#fff;
  font-variant-numeric:tabular-nums;margin-bottom:4px}
.avj__n em{font-style:normal;font-size:16px;font-weight:800;margin-left:2px;color:var(--accent)}
.avj__b{display:block;font-size:14.5px;font-weight:800;color:#fff;margin-bottom:6px}
.avj__p{font-size:13px;line-height:1.5;color:rgba(255,255,255,.55);margin:0 0 16px;flex:1}
/* önce → sonra çubukları */
.avj__ba{display:flex;flex-direction:column;gap:7px;margin-top:auto}
.avj__r{display:flex;align-items:center;gap:9px}
.avj__r u{text-decoration:none;font-size:11px;font-weight:800;letter-spacing:.06em;
  color:rgba(255,255,255,.35);width:52px;flex:none}
.avj__r span{flex:1;height:7px;border-radius:4px;background:rgba(255,255,255,.09);overflow:hidden}
.avj__r span i{display:block;height:100%;border-radius:4px;width:0;background:rgba(255,255,255,.28)}
.avj__r.now u{color:var(--accent)}
.avj__r.now span i{background:var(--accent)}
.is-in .avj__r span i{animation:avjBar .9s var(--ease) forwards;animation-delay:var(--g)}
@keyframes avjBar{to{width:var(--w)}}
.avj__r b{font-size:11px;font-weight:700;color:rgba(255,255,255,.6);width:96px;flex:none;text-align:right}
.avj__r.now b{color:#fff}
@media (max-width:1100px){.avj{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.avj{grid-template-columns:1fr}}

/* ── SOSYAL MEDYA ROZETLERİ ────────────────────────────────────────────────*/
.sosyal{display:flex;gap:9px;flex-wrap:wrap;margin-top:16px}
.sosyal a{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
  border:1px solid var(--line);background:var(--surface);color:var(--muted);transition:.25s var(--ease)}
.sosyal a .ic{width:17px;height:17px}
.sosyal a:hover{background:var(--accent);border-color:var(--accent);color:var(--black);transform:translateY(-2px)}
.sosyal--footer{margin:18px 0 22px}
.sosyal--footer a{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12);color:rgba(255,255,255,.62)}
.sosyal--footer a:hover{background:var(--accent);border-color:var(--accent);color:var(--black)}

/* ── HARİTA + ADRES (iletişim) ─────────────────────────────────────────────
   Harita karesi siteyle aynı dünyada dursun diye çerçevelenip hafif
   koyulaştırıldı; üstünde adres kartı duruyor. */
.harita-sec{padding:0 0 96px}
.harita{position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);
  box-shadow:var(--shadow);background:#ececeF;min-height:420px;display:grid;
  grid-template-columns:minmax(300px,380px) 1fr}
.harita__bilgi{padding:34px;background:var(--black);color:#fff;display:flex;flex-direction:column;gap:18px}
.harita__bilgi h3{font-size:20px;font-weight:900;letter-spacing:-.02em;margin:0}
.harita__satir{display:flex;gap:11px;align-items:flex-start}
.harita__satir .ic{width:18px;height:18px;color:var(--accent);flex:none;margin-top:2px}
.harita__satir b{display:block;font-size:13.5px;font-weight:700}
.harita__satir span,.harita__satir a{display:block;font-size:13px;color:rgba(255,255,255,.6);
  text-decoration:none;line-height:1.5}
.harita__satir a:hover{color:var(--accent)}
.harita__yol{margin-top:auto}
.harita__kare{position:relative;min-height:420px}
.harita__kare iframe{position:absolute;inset:0;width:100%;height:100%;border:0;
  filter:grayscale(.82) contrast(1.06) brightness(1.03) sepia(.14) saturate(1.25)}
.harita__kare::after{content:'';position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(16,16,16,.06)}
@media (max-width:900px){
  .harita{grid-template-columns:1fr}
  .harita__kare{min-height:300px}
}

/* ── ÇÖZÜM ALT SAYFASI ─────────────────────────────────────────────────────*/
.ksec{padding:84px 0 96px}
.ksec + .ksec{padding-top:0}
.kmods{list-style:none;margin:0;padding:0;display:grid;gap:14px;counter-reset:km}
.kmods li{counter-increment:km;display:grid;grid-template-columns:auto minmax(150px,190px) 1fr;
  align-items:center;gap:18px;padding:20px 22px;border-radius:var(--radius);
  background:var(--surface);border:1px solid var(--line)}
.kmods li::before{content:counter(km,decimal-leading-zero);font-size:13px;font-weight:900;
  color:var(--accent-d);font-variant-numeric:tabular-nums}
.kmods .kmod{display:inline-flex;align-items:center;justify-content:center;padding:8px 14px;
  border-radius:999px;background:var(--accent-soft);color:var(--accent-d);
  font-size:13.5px;font-weight:800;text-decoration:none;transition:.25s var(--ease)}
.kmods .kmod:hover{background:var(--accent);color:var(--black)}
.kmods li > span{font-size:14.5px;line-height:1.55;color:var(--muted)}
.kfark{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.kfark > div{padding:24px;border-radius:var(--radius);background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10)}
.kfark b{display:block;font-size:15px;font-weight:800;color:#fff;margin-bottom:6px}
.kfark span{font-size:14px;color:var(--accent)}
@media (max-width:820px){
  .kmods li{grid-template-columns:auto 1fr;gap:10px}
  .kmods li::before{grid-row:1}
  .kfark{grid-template-columns:1fr}
}

/* ── ÇÖZÜMLER DİZİNİ: kısa kart, ayrıntı alt sayfada ───────────────────────*/
.solx{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.solx__c{position:relative;display:block;padding:26px 28px;border-radius:var(--radius);
  background:var(--surface);border:1px solid var(--line);text-decoration:none;color:inherit;
  transition:.28s var(--ease);overflow:hidden}
.solx__c::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent);
  transform:scaleY(0);transform-origin:top;transition:transform .3s var(--ease)}
.solx__c:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--accent-soft-line)}
.solx__c:hover::before{transform:scaleY(1)}
.solx__no{position:absolute;right:24px;top:22px;font-size:26px;font-weight:900;color:#f0f0f3;
  font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.solx__ic{width:46px;height:46px;border-radius:12px;background:var(--accent-soft);color:var(--accent-d);
  display:grid;place-items:center;margin-bottom:16px}
.solx__ic .ic{width:23px;height:23px}
.solx__ad{display:block;font-size:19px;font-weight:800;letter-spacing:-.02em;margin-bottom:6px}
.solx__kim{display:block;font-size:14px;color:var(--muted);line-height:1.55;margin-bottom:16px}
.solx__mod{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:18px}
.solx__mod i{font-style:normal;font-size:11.5px;font-weight:700;padding:5px 10px;border-radius:999px;
  background:#f4f4f6;border:1px solid var(--line);color:var(--muted)}
.solx__git{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:800;color:var(--accent-d)}
.solx__c:hover .solx__git .ic{transform:translateX(3px)}
.solx__git .ic{transition:transform .25s var(--ease)}
@media (max-width:880px){.solx{grid-template-columns:1fr}}

/* ── MODÜLLER BİRLİKTE ÇALIŞINCA ───────────────────────────────────────────*/
.brl{display:grid;gap:20px}
.brl__c{padding:26px 28px 22px;border-radius:var(--radius);background:var(--surface);
  border:1px solid var(--line)}
.brl__h{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.brl__ic{width:46px;height:46px;border-radius:12px;background:var(--accent-soft);color:var(--accent-d);
  display:grid;place-items:center;flex:none}
.brl__ic .ic{width:22px;height:22px}
.brl__h h3{font-size:19px;font-weight:800;letter-spacing:-.02em;margin:0}
.brl__kim{font-size:13px;color:var(--muted)}
.brl__ozet{font-size:14.5px;line-height:1.6;color:var(--muted);margin:0 0 20px;max-width:74ch}
.brl__t{padding:18px 20px 6px;border-radius:14px;overflow-x:auto;
  background:linear-gradient(180deg,var(--accent-soft),transparent 72%);border:1px solid var(--line)}
.brl__t::-webkit-scrollbar{display:none}
.brl__f{display:flex;align-items:center;gap:9px;margin-top:16px;padding-top:var(--kil-ara);
  border-top:1px solid var(--line);font-size:14px;font-weight:700}
.brl__f .ic{color:var(--accent-d);flex:none}
@media (max-width:760px){.brl__c{padding:20px}}

/* Ürün ızgarasında son satırda TEK kart kalırsa (13 kart / 4 sütun) ragged
   duruyordu; yalnız kalan kart satırı doldurur ve içerik yan yana dizilir.
   Kart sayısı değişip son satır dolduğunda kural kendiliğinden devre dışı. */
.svc-grid > .svc:last-child:nth-child(4n+1){grid-column:1 / -1;display:grid;
  grid-template-columns:280px 1fr;align-items:center;column-gap:32px;padding-right:32px}
.svc-grid > .svc:last-child:nth-child(4n+1) .svc__viz{grid-row:1 / -1;margin:0;height:100%;
  border-radius:var(--radius) 0 0 var(--radius);padding:20px 24px}
.svc-grid > .svc:last-child:nth-child(4n+1) .svc__viz::after{display:none}
.svc-grid > .svc:last-child:nth-child(4n+1) .svc__ic{margin:22px 0 12px}
.svc-grid > .svc:last-child:nth-child(4n+1) h3,
.svc-grid > .svc:last-child:nth-child(4n+1) p{grid-column:2}
.svc-grid > .svc:last-child:nth-child(4n+1) .svc__ic,
.svc-grid > .svc:last-child:nth-child(4n+1) .link-cta{grid-column:2}
.svc-grid > .svc:last-child:nth-child(4n+1) p{margin-bottom:12px;max-width:64ch}
.svc-grid > .svc:last-child:nth-child(4n+1) .link-cta{margin-bottom:22px}
@media (max-width:1000px){
  .svc-grid > .svc:last-child:nth-child(4n+1){grid-template-columns:1fr;padding-right:24px}
  .svc-grid > .svc:last-child:nth-child(4n+1) .svc__viz{border-radius:var(--radius) var(--radius) 0 0;
    height:92px;margin:0 -24px 18px;grid-row:auto}
  .svc-grid > .svc:last-child:nth-child(4n+1) h3,
  .svc-grid > .svc:last-child:nth-child(4n+1) p,
  .svc-grid > .svc:last-child:nth-child(4n+1) .svc__ic,
  .svc-grid > .svc:last-child:nth-child(4n+1) .link-cta{grid-column:1}
}

/* ── SANAL OFİS: yazılım ekranı DEĞİL, hizmetin kendisini anlatan kompozisyon ─
   Bu bir panel hizmeti değil; adres, karşılanan çağrı, gelen posta ve toplantı
   odası gibi fiziksel/operasyonel unsurları gösteriyoruz. */
.so-sahne{position:relative;display:flex;flex-direction:column;gap:14px;padding:26px;
  border-radius:22px;background:linear-gradient(160deg,#fffdf6,#f6f6f8);
  border:1px solid var(--line);box-shadow:var(--shadow-lg)}
.so-tabela{display:flex;align-items:center;gap:14px;padding:18px 20px;border-radius:16px;
  background:#141414;color:#fff;position:relative;overflow:hidden}
.so-tabela::after{content:'';position:absolute;inset:0;
  background:linear-gradient(115deg,transparent 30%,rgba(245,186,18,.22) 50%,transparent 70%);
  transform:translateX(-100%);animation:soParla 4.2s ease-in-out infinite}
@keyframes soParla{0%,60%{transform:translateX(-100%)}85%,100%{transform:translateX(120%)}}
.so-tabela .lg{width:46px;height:46px;border-radius:13px;background:var(--accent);color:var(--black);
  display:grid;place-items:center;flex:none;font-weight:900;font-size:17px;letter-spacing:-.02em}
.so-tabela b{display:block;font-size:16px;font-weight:800;letter-spacing:-.02em}
.so-tabela small{display:block;font-size:12px;color:rgba(255,255,255,.55);margin-top:2px}
.so-tabela i{margin-left:auto;font-style:normal;font-size:10px;font-weight:800;letter-spacing:.06em;
  padding:5px 10px;border-radius:999px;background:rgba(245,186,18,.16);color:var(--accent);flex:none}
.so-satir{display:flex;align-items:center;gap:12px;padding:13px 15px;border-radius:14px;
  background:#fff;border:1px solid var(--line);
  opacity:0;transform:translateY(8px);animation:soGir .5s var(--ease) forwards;animation-delay:var(--g)}
@keyframes soGir{to{opacity:1;transform:none}}
.so-satir .so-ic{width:36px;height:36px;border-radius:11px;background:var(--accent-soft);color:var(--accent-d);
  display:grid;place-items:center;flex:none}

.so-satir .so-ic svg{width:18px;height:18px;flex:none}
.so-satir .so-ic .ic{width:18px;height:18px}
.so-satir b{display:block;font-size:13.5px;font-weight:700}
.so-satir small{display:block;font-size:11.5px;color:var(--muted);margin-top:1px}
.so-satir em{margin-left:auto;font-style:normal;font-size:10.5px;font-weight:800;letter-spacing:.04em;
  padding:5px 10px;border-radius:999px;flex:none}
.so-satir em.ok{background:rgba(40,200,64,.14);color:#1f9c33}
.so-satir em.bek{background:#f2f2f5;color:var(--muted)}
.so-satir em.amb{background:var(--accent-soft);color:var(--accent-d)}
.so-satir .so-ic.zil{position:relative}
.so-satir .so-ic.zil::after{content:'';position:absolute;inset:-4px;border-radius:14px;
  border:2px solid var(--accent);opacity:0;animation:soZil 2.4s ease-out infinite}
@keyframes soZil{0%{transform:scale(.9);opacity:.7}70%{transform:scale(1.25);opacity:0}100%{opacity:0}}

/* ── BİRLİKTE DAHA GÜÇLÜ: ürün sayfası sonunda tamamlayıcı hizmet önerisi ──*/
.bg-sec{padding:0 0 96px}
.bg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.bg-c{position:relative;display:block;padding:24px;border-radius:var(--radius);text-decoration:none;
  color:inherit;background:var(--surface);border:1px solid var(--line);transition:.28s var(--ease);overflow:hidden}
.bg-c::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent);
  transform:scaleY(0);transform-origin:top;transition:transform .3s var(--ease)}
.bg-c:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--accent-soft-line)}
.bg-c:hover::before{transform:scaleY(1)}
.bg-c__h{display:flex;align-items:center;gap:11px;margin-bottom:12px}
.bg-c__ic{width:40px;height:40px;border-radius:11px;background:var(--accent-soft);color:var(--accent-d);
  display:grid;place-items:center;flex:none}
.bg-c__ic .ic{width:20px;height:20px}
.bg-c__h b{font-size:16px;font-weight:800;letter-spacing:-.02em}
.bg-c p{margin:0 0 14px;font-size:14px;line-height:1.55;color:var(--muted)}
.bg-c__git{display:inline-flex;align-items:center;gap:7px;margin-top:14px;font-size:13.5px;
  font-weight:800;color:var(--accent-d)}
.bg-c__git .ic{transition:transform .25s var(--ease)}
.bg-c:hover .bg-c__git .ic{transform:translateX(3px)}
@media (max-width:980px){.bg-grid{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.bg-grid{grid-template-columns:1fr}}
/* Tek öneri varsa 3 sütunluk ızgarada yalnız kalmasın — ortalanır ve genişler. */
.bg-grid:has(> .bg-c:only-child){grid-template-columns:minmax(0,620px);justify-content:center}

/* ── SEKTÖREL KATKI: iki modül birleşince ne kazanılıyor ───────────────────*/
.sk-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.sk-c{padding:22px 24px;border-radius:var(--radius);background:var(--surface);
  border:1px solid var(--line);opacity:0;transform:translateY(12px);transition:.5s var(--ease)}
.is-in .sk-c{opacity:1;transform:none;transition-delay:var(--g)}
.sk-c__h{display:flex;align-items:center;gap:8px;margin-bottom:11px;flex-wrap:wrap}
.sk-c__ic{width:34px;height:34px;border-radius:10px;background:var(--accent-soft);color:var(--accent-d);
  display:grid;place-items:center;flex:none}
.sk-c__ic .ic{width:17px;height:17px}
.sk-c__art{font-size:15px;font-weight:800;color:var(--muted);margin:0 -2px}
.sk-c__h b{flex:1 0 100%;font-size:14.5px;font-weight:800;letter-spacing:-.01em;margin-top:8px}
.sk-c__h b i{font-style:normal;color:var(--accent-d);margin:0 2px}
.sk-c p{margin:0;font-size:14px;line-height:1.6;color:var(--muted)}
@media (max-width:820px){.sk-grid{grid-template-columns:1fr}}

/* ── SEKTÖREL ANALİZ: iş fonksiyonu bazlı derinlemesine anlatım ───────────
   "Bu sektörde hangi iş alanına (tahsilat, pazarlama, operasyon…) ne katıyor"
   sorusunu yanıtlar. Her satır: alan → birleşen modüller → kurulan yapı →
   kazanç. Uzun metin olduğu için tablo değil, okunur kart dizisi. */
.sa-ozet{max-width:78ch;margin:0 auto 30px;font-size:16px;line-height:1.7;color:var(--muted);text-align:center}
.sa-list{display:flex;flex-direction:column;gap:14px}
.sa-c{display:grid;grid-template-columns:minmax(190px,240px) 1fr;gap:26px;padding:24px 26px;
  border-radius:var(--radius);background:var(--surface);border:1px solid var(--line);
  opacity:0;transform:translateY(12px);transition:.5s var(--ease)}
.is-in .sa-c{opacity:1;transform:none;transition-delay:var(--g)}
.sa-c__sol b{display:block;font-size:16px;font-weight:800;letter-spacing:-.02em;margin-bottom:10px}
.sa-mods{display:flex;flex-wrap:wrap;gap:6px}
.sa-mods span{font-size:11.5px;font-weight:700;padding:5px 10px;border-radius:999px;
  background:var(--accent-soft);color:var(--accent-d)}
.sa-c__sag{display:flex;flex-direction:column;gap:12px}
.sa-blk{display:flex;gap:10px;align-items:flex-start}
.sa-blk .ic{width:16px;height:16px;color:var(--accent-d);flex:none;margin-top:3px}
.sa-blk u{display:block;text-decoration:none;font-size:11px;font-weight:800;letter-spacing:.05em;
  color:var(--muted);margin-bottom:3px}
.sa-blk p{margin:0;font-size:14.5px;line-height:1.6}
.sa-blk.kaz p{font-weight:600}
.sa-oneri{margin-top:26px;padding:24px 26px;border-radius:var(--radius);
  background:var(--black);color:#fff}
.sa-oneri h4{margin:0 0 4px;font-size:16px;font-weight:800}
.sa-oneri>p{margin:0 0 18px;font-size:13.5px;color:rgba(255,255,255,.55)}
.sa-oneri__l{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.sa-o{display:block;padding:16px 18px;border-radius:14px;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);text-decoration:none;color:inherit;transition:.25s var(--ease)}
.sa-o:hover{background:rgba(245,186,18,.12);border-color:rgba(245,186,18,.45);transform:translateY(-3px)}
.sa-o b{display:flex;align-items:center;gap:8px;font-size:14.5px;font-weight:800;margin-bottom:6px}
.sa-o b .ic{width:17px;height:17px;color:var(--accent)}
.sa-o span{font-size:13px;line-height:1.55;color:rgba(255,255,255,.6)}
@media (max-width:900px){
  .sa-c{grid-template-columns:1fr;gap:14px}
  .sa-oneri__l{grid-template-columns:1fr}
}

/* ── MODÜL HARİTASI: çözümde hangi modüller tek kayıt etrafında birleşiyor ──
   Çözüm sayfasının başında, akış filminden önce: merkezde müşteri kaydı,
   çevresinde o sektörün modülleri. Bağlantı çizgileri sırayla çizilir. */
/* Modül haritası stilleri dosya sonunda yeniden tanımlandı. */


/* ── ERİŞİLEBİLİRLİK ────────────────────────────────────────────────────────
   Klavye odağı sitenin hiçbir yerinde görünmüyordu; koyu başlıkta tarayıcı
   varsayılan halkası okunmuyor. Fare tıklamasında halka çıkmasın diye
   :focus-visible kullanılır. */
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:4px}
.header :focus-visible,.why :focus-visible,.cta :focus-visible,
.footer :focus-visible,.topstrip :focus-visible{outline-color:#fff}

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--accent);
  color:var(--accent-ink);font-weight:800;padding:12px 20px;border-radius:0 0 10px 0}
.skip:focus{left:0}

/* ── DİKEY RİTİM ────────────────────────────────────────────────────────────
   Bölüm dolgusu dokuz farklı değerdeydi (78/84/88/90/94/96) ve mobil blok
   yalnız bir kısmını kapsıyordu. Tek belirteç tüm bölümleri hizalar. */
:root{--sec-y:88px;--sec-y-lg:96px}
@media(max-width:900px){:root{--sec-y:60px;--sec-y-lg:64px}}
@media(max-width:560px){:root{--sec-y:52px;--sec-y-lg:56px}}
.services,.flow,.integ,.testi,.pricing,.frows,.fcards-sec,.faq-sec,
.menuex,.feats-sec,.ksec,.bg-sec,.sol-sec,.formsec{padding:var(--sec-y) 0}
.why,.cta{padding:var(--sec-y-lg) 0}
.bg-sec{padding-top:var(--sec-y)}

/* Mobilde iki modül satırı boş hücre bırakıyordu (3 çocuk / 2 sütun). */
@media(max-width:820px){
  .kmods li{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
}

/* Hizmet ızgarası sabit kırılma yerine içeriğe göre sarsın. */
@media(min-width:901px){
  .svc-grid{grid-template-columns:repeat(auto-fit,minmax(248px,1fr))}
}

/* Anasayfa hizmet ızgarası 12 kart; on üçüncü hizmet (Sanal Ofis) yazılım
   paneli olmadığı için ızgarada değil, altında satır olarak anlatılır. */
.svc-not{margin:26px auto 0;max-width:760px;text-align:center;font-size:15px;
  line-height:1.65;color:var(--muted)}
.svc-not a{color:var(--accent-text);font-weight:700}

/* Anasayfa sektör geçişi — çözüm sayfalarına gövde içinden tek giriş
   (mega menü yalnız masaüstünde açılıyor, mobilde erişim yoktu). */
.sektor-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:34px}
.sektor-c{display:flex;flex-direction:column;gap:8px;padding:20px 18px;border:1px solid var(--line);
  border-radius:14px;background:#fff;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.sektor-c:hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:0 12px 30px rgba(17,17,20,.08)}
.sektor-c .ic{width:22px;height:22px;color:var(--accent-text)}
.sektor-c b{font-size:15.5px;line-height:1.35}
.sektor-c span{font-size:12.5px;color:var(--muted);line-height:1.5}
@media(max-width:1080px){.sektor-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.sektor-grid{grid-template-columns:1fr}}

/* Akış şeridi mobilde sarınca satır sonlarında ok asılı kalıyordu (2 sütun,
   tek sayıda düğüm). 620px altında tek sütuna in: her düğümün altında bir ok. */
@media(max-width:620px){
  .flow__track{flex-direction:column;align-items:stretch;gap:0}
  .flow__node{width:100%;max-width:none}
  .flow__arrow{justify-content:center;padding:10px 0}
}

/* ── BÖLÜM ARKA PLAN RİTMİ ──────────────────────────────────────────────────
   Anasayfada beş bölüm arka arkaya beyaz kalıyordu; göz nerede olduğunu
   kaybediyor. Sıralama: açık → beyaz → gri → beyaz → gri → SİYAH → beyaz →
   AMBER → gri → beyaz → gri → SİYAH. İki komşu bölüm asla aynı zemini almaz. */
.sec-amber{position:relative;background:linear-gradient(135deg,#F5BA12 0%,#f3c948 55%,#F5BA12 100%)}
.sec-amber::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(900px 320px at 82% -10%,rgba(255,255,255,.55),transparent 60%)}
.sec-amber>.wrap{position:relative;z-index:1}
.sec-amber .eyebrow--amber,.sec-amber .eyebrow{color:#6b4d00}
.sec-amber .eyebrow--amber .ic{color:#6b4d00}
.sec-amber .h2{color:#151517}
.sec-amber .lead{color:#4a3a10}
.sec-amber .sektor-c{background:rgba(255,255,255,.92);border-color:rgba(21,21,23,.10)}
.sec-amber .sektor-c:hover{background:#fff;border-color:#151517;
  box-shadow:0 14px 34px rgba(90,64,0,.22)}
.sec-amber .sektor-c .ic{color:#8A6200}
.sec-amber .sektor-c span{color:#5c5c62}
.sec-amber .svc-not{color:#4a3a10}
.sec-amber .svc-not a{color:#151517;text-decoration:underline;text-underline-offset:3px}

/* Amber banda geçiş: üstteki beyaz bölümle arasında sert çizgi kalmasın */
.sec-amber::after{content:'';position:absolute;left:0;right:0;top:0;height:1px;
  background:rgba(21,21,23,.10)}

/* Amber bant, "birlikte daha güçlü" kartlarını da taşıyor. */
.sec-amber .bg-c{background:rgba(255,255,255,.94);border-color:rgba(21,21,23,.10)}
.sec-amber .bg-c:hover{background:#fff;border-color:#151517;box-shadow:0 16px 38px rgba(90,64,0,.22)}
.sec-amber .bg-c__ic{background:rgba(21,21,23,.06)}
.sec-amber .bg-c__ic .ic{color:#8A6200}
.sec-amber .bg-c__git{color:#151517}
.sec-amber .bg-c__kaz{color:#5c5c62}
.sec-amber .bg-c__kaz .ic{color:#7a5a00}
.sec-amber .sk-c{background:rgba(255,255,255,.94);border-color:rgba(21,21,23,.10)}
.sec-amber .sk-c__ic{background:rgba(21,21,23,.06)}
.sec-amber .sk-c__ic .ic{color:#8A6200}
.sec-amber .sk-c__art{color:#8A6200}
.sec-amber .kmods li{border-color:rgba(21,21,23,.12)}

/* Başlıktaki telefon düğmesi: numaranın solunda ahize ikonu. */
.btn--tel{display:inline-flex;align-items:center;gap:8px}
.btn--tel .ic{width:15px;height:15px;flex:none}

/* ── ÇÖZÜM SAYFALARINDA AMBER KAPANIŞ ──────────────────────────────────────
   Çözüm sayfalarında "ne değişiyor" bandı ile CTA arka arkaya siyahtı.
   Bu bandı amber yapmak ritmi kurar: gri → beyaz → amber → siyah. */
.why--amber{background:linear-gradient(135deg,#F5BA12 0%,#f3c948 55%,#F5BA12 100%)}
.why--amber .why__bg{background:radial-gradient(900px 340px at 82% -12%,rgba(255,255,255,.5),transparent 62%)}
.why--amber .eyebrow--amber-on-dark{color:#6b4d00}
.why--amber .h2--light{color:#151517}
.why--amber .lead--light{color:#4a3a10}
.why--amber .kfark > div{background:rgba(255,255,255,.94);border-color:rgba(21,21,23,.10)}
.why--amber .kfark b{color:#151517}
.why--amber .kfark span{color:#7a5a00}

/* Sanal Ofis sahne başlığındaki amber kare: içindeki SVG grid hücresinde
   sola/aşağı kayıyordu (svg satır-içi eleman, taban çizgisine oturuyor). */
.so-tabela .lg svg{display:block;width:22px;height:22px}
.so-satir .so-ic{display:grid;place-items:center;flex:none}
.so-satir .so-ic svg{display:block}

/* ── MODÜL HARİTASI ─────────────────────────────────────────────────────────
   Merkezde müşteri kaydı, çevresinde o sektörde devreye giren modüller.
   SVG katmanı bağlantıları çizer ve üzerinde veri paketleri taşır: modülden
   merkeze giden büyük nokta "yazar", merkezden modüle dönen küçük nokta
   "okur". Sıra ışığı modülleri teker teker öne çıkarır. */
.mh{position:relative;max-width:760px;margin:0 auto;aspect-ratio:760/428;min-height:300px}

.mh__svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:1}

/* bağlantı çizgileri — önce soluk taban, üstünde çizilerek gelen amber iz */
.mh__p{fill:none;stroke:rgba(21,21,23,.10);stroke-width:1.6;stroke-linecap:round}
.mh__p--on{stroke:var(--accent);stroke-width:2.2;opacity:.5;
  stroke-dasharray:var(--uz,600);stroke-dashoffset:var(--uz,600)}
.mh.is-in .mh__p--on{animation:mhCiz .85s var(--ease) forwards;animation-delay:var(--g)}
@keyframes mhCiz{to{stroke-dashoffset:0}}
.mh__p--on.is-on{opacity:1;stroke-width:3;filter:drop-shadow(0 0 6px rgba(245,186,18,.55))}

/* akan veri paketleri */
.mh__pk{fill:var(--accent);opacity:0}
.mh.is-in .mh__pk{opacity:.9}
.mh__pk--geri{fill:#151517;opacity:0}
.mh.is-in .mh__pk--geri{opacity:.45}
.mh__pk.is-on{filter:drop-shadow(0 0 7px rgba(245,186,18,.9))}

/* merkez: müşteri kaydı */
.mh__c{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;
  width:158px;height:158px;border-radius:50%;background:var(--black);color:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  box-shadow:0 22px 52px -18px rgba(16,16,16,.6)}
.mh__c b{font-size:15px;font-weight:800;letter-spacing:-.02em;line-height:1.2;text-align:center;position:relative;z-index:1}
.mh__cs{font-size:10.5px;color:rgba(255,255,255,.55);position:relative;z-index:1;
  max-width:120px;text-align:center;line-height:1.3}
.mh__halka{position:absolute;inset:-10px;border-radius:50%;
  border:1px solid rgba(245,186,18,.5);opacity:0}
.mh.is-in .mh__halka{animation:mhNabiz 3.4s cubic-bezier(.22,.8,.3,1) infinite}
.mh__halka--2{inset:-10px}
.mh.is-in .mh__halka--2{animation-delay:1.7s}
@keyframes mhNabiz{
  0%{transform:scale(.97);opacity:.9}
  70%{transform:scale(1.28);opacity:0}
  100%{transform:scale(1.28);opacity:0}}

/* düğüm kartları */
.mh__n{position:absolute;transform:translate(-50%,-50%);z-index:4;
  display:flex;align-items:center;gap:9px;padding:10px 14px;border-radius:14px;
  background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-sm);
  white-space:nowrap;text-decoration:none;color:inherit;opacity:0;
  transition:box-shadow .25s var(--ease),border-color .25s var(--ease)}
.mh.is-in .mh__n{animation:mhGir .55s var(--ease) forwards;animation-delay:var(--g)}
@keyframes mhGir{
  from{opacity:0;transform:translate(-50%,-50%) scale(.86)}
  to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.mh__ni{width:30px;height:30px;border-radius:9px;background:var(--accent-soft);
  display:grid;place-items:center;flex:none;transition:background .25s var(--ease)}
.mh__ni svg{display:block;width:17px;height:17px;color:var(--accent-text)}
.mh__n b{font-size:13.5px;font-weight:800;letter-spacing:-.01em}
.mh__n:hover,.mh__n:focus-visible{border-color:var(--accent);box-shadow:0 14px 34px -12px rgba(90,64,0,.35)}
.mh__n.is-on{border-color:var(--accent);box-shadow:0 16px 38px -14px rgba(90,64,0,.4)}
.mh__n.is-on .mh__ni{background:var(--accent)}
.mh__n.is-on .mh__ni svg{color:var(--black)}

/* düğümün ne yaptığını söyleyen ipucu — üstüne gelince açılır */
.mh__ipucu{position:absolute;left:50%;top:calc(100% + 10px);transform:translateX(-50%) translateY(-4px);
  width:246px;white-space:normal;padding:10px 12px;border-radius:12px;
  background:var(--black);color:rgba(255,255,255,.86);font-size:11.5px;line-height:1.5;
  font-weight:500;letter-spacing:0;opacity:0;pointer-events:none;z-index:6;
  box-shadow:0 18px 40px -14px rgba(16,16,16,.6);
  transition:opacity .22s var(--ease),transform .22s var(--ease)}
.mh__ipucu::before{content:'';position:absolute;left:50%;top:-5px;width:10px;height:10px;
  transform:translateX(-50%) rotate(45deg);background:var(--black)}
.mh__n:hover .mh__ipucu,.mh__n:focus-visible .mh__ipucu{opacity:1;transform:translateX(-50%) translateY(0)}
/* alt sıradaki düğümlerde ipucu yukarı açılsın */
.mh__n[style*="top:7"] .mh__ipucu,.mh__n[style*="top:8"] .mh__ipucu,
.mh__n[style*="top:9"] .mh__ipucu{top:auto;bottom:calc(100% + 10px)}
.mh__n[style*="top:7"] .mh__ipucu::before,.mh__n[style*="top:8"] .mh__ipucu::before,
.mh__n[style*="top:9"] .mh__ipucu::before{top:auto;bottom:-5px}

.mh__alt{text-align:center;margin-top:14px;font-size:13px;color:var(--muted)}

/* amber bantta harita */
.sec-amber .mh__p{stroke:rgba(21,21,23,.16)}
.sec-amber .mh__n{background:rgba(255,255,255,.96);border-color:rgba(21,21,23,.12)}
.sec-amber .mh__alt{color:#4a3a10}

@media(max-width:760px){
  .mh{aspect-ratio:auto;min-height:0;display:flex;flex-direction:column;gap:10px}
  .mh__svg{display:none}
  .mh__c{position:static;transform:none;width:100%;height:auto;border-radius:16px;padding:20px 18px}
  .mh__halka{display:none}
  .mh__cs{max-width:none}
  .mh__n{position:static;transform:none;justify-content:flex-start;opacity:0}
  .mh.is-in .mh__n{animation:mhGirMobil .45s var(--ease) forwards;animation-delay:var(--g)}
  @keyframes mhGirMobil{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
  .mh__ipucu{position:static;transform:none;opacity:1;width:auto;background:none;
    color:var(--muted);box-shadow:none;padding:0;margin-left:auto;font-size:11px;
    max-width:52%;text-align:right}
  .mh__ipucu::before{display:none}
}

@media(prefers-reduced-motion:reduce){
  .mh__p--on{stroke-dashoffset:0;opacity:.55}
  .mh__n{opacity:1}
  .mh__pk{display:none}
}

/* ── SİZE ÖZEL PAKET ────────────────────────────────────────────────────────
   Koyu zeminli kurgu aracı: soldan sağa dolan ilerleme rayı, adım adım
   açılan sorular, sonunda sahne sahne kurulan paket. */
.pk-sec{position:relative;background:var(--black);color:#fff;overflow:hidden;
  padding:var(--sec-y-lg) 0}
.pk-sec .section-head .h2{color:#fff}
.pk-sec .section-head .lead{color:rgba(255,255,255,.6)}
.pk-sec .eyebrow--amber-on-dark{color:var(--accent)}

.pk{position:relative;max-width:920px;margin:38px auto 0}
.pk__isik{position:absolute;inset:-90px -60px;pointer-events:none;z-index:0}
.pk__isik i{position:absolute;border-radius:50%;filter:blur(90px);opacity:.5}
.pk__isik i:nth-child(1){width:420px;height:420px;top:-120px;right:-60px;
  background:radial-gradient(circle,rgba(245,186,18,.5),transparent 70%)}
.pk__isik i:nth-child(2){width:360px;height:360px;bottom:-140px;left:-80px;
  background:radial-gradient(circle,rgba(245,186,18,.22),transparent 70%)}

/* ilerleme rayı */
.pk__ray{position:relative;display:flex;align-items:center;justify-content:space-between;
  max-width:540px;margin:0 auto 30px;z-index:1}
.pk__ray::before{content:'';position:absolute;left:14px;right:14px;top:50%;height:2px;
  transform:translateY(-50%);background:rgba(255,255,255,.12);border-radius:2px}
.pk__dolgu{position:absolute;left:14px;top:50%;height:2px;transform:translateY(-50%);
  background:var(--accent);border-radius:2px;width:0;max-width:calc(100% - 28px);
  transition:width .5s var(--ease)}
.pk__nokta{position:relative;z-index:1;width:30px;height:30px;border-radius:50%;flex:none;
  display:grid;place-items:center;background:#1c1c20;border:1px solid rgba(255,255,255,.16);
  font-size:12px;font-weight:800;color:rgba(255,255,255,.45);
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease)}
.pk__nokta b{font-weight:800}
.pk__nokta .ic{width:14px;height:14px}
.pk__nokta.is-on{background:var(--accent);border-color:var(--accent);color:var(--black)}
.pk__nokta.is-simdi{border-color:var(--accent);color:#fff;transform:scale(1.18);
  box-shadow:0 0 0 5px rgba(245,186,18,.14)}
.pk__nokta.is-on:not(.is-simdi){cursor:pointer}

/* sahne */
.pk__sahne{position:relative;z-index:1;background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.10);border-radius:22px;padding:32px 30px;
  backdrop-filter:blur(6px);opacity:0;transform:translateY(10px);
  transition:opacity .38s var(--ease),transform .38s var(--ease)}
.pk__sahne.is-in{opacity:1;transform:none}

.pk__ust{text-align:center;margin-bottom:24px}
.pk__say{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent);margin-bottom:10px}
.pk__soru{font-size:26px;font-weight:800;letter-spacing:-.03em;line-height:1.2;color:#fff}
.pk__alt{margin-top:8px;font-size:14px;color:rgba(255,255,255,.55);line-height:1.6}

.pk__secenekler{display:grid;grid-template-columns:repeat(2,1fr);gap:11px}
.pk__s{display:flex;align-items:center;gap:13px;padding:14px 15px;border-radius:15px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.11);
  color:#fff;text-align:left;cursor:pointer;font:inherit;
  opacity:0;transform:translateY(8px);
  animation:pkGir .42s var(--ease) forwards;animation-delay:var(--g);
  transition:background .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease)}
@keyframes pkGir{to{opacity:1;transform:none}}
.pk__s:hover{background:rgba(255,255,255,.08);border-color:rgba(245,186,18,.5);transform:translateY(-2px)}
.pk__s.is-secili{background:rgba(245,186,18,.13);border-color:var(--accent)}
.pk__si{width:38px;height:38px;border-radius:11px;flex:none;display:grid;place-items:center;
  background:rgba(255,255,255,.07);transition:background .2s var(--ease)}
.pk__si svg{display:block;width:19px;height:19px;color:var(--accent)}
.pk__s.is-secili .pk__si{background:var(--accent)}
.pk__s.is-secili .pk__si svg{color:var(--black)}
.pk__st{min-width:0}
.pk__st b{display:block;font-size:14.5px;font-weight:700;letter-spacing:-.01em}
.pk__st small{display:block;font-size:11.5px;color:rgba(255,255,255,.5);margin-top:2px}
.pk__sc{margin-left:auto;width:20px;height:20px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--accent);opacity:0;transform:scale(.6);transition:opacity .2s var(--ease),transform .2s var(--ease)}
.pk__sc svg{width:11px;height:11px;color:var(--black)}
.pk__s.is-secili .pk__sc{opacity:1;transform:none}

.pk__ayak{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:22px}
.pk__geri{background:none;border:0;color:rgba(255,255,255,.6);font:inherit;font-size:13.5px;
  font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:7px;padding:8px 0}
.pk__geri .ic{transform:rotate(180deg);width:14px;height:14px}
.pk__geri:hover{color:#fff}
.pk__ipucu{font-size:12.5px;color:rgba(255,255,255,.4)}
.pk__ileri:disabled{opacity:.4;cursor:not-allowed}

/* sonuç */
.pk__rozet{display:inline-flex;align-items:center;gap:7px;padding:6px 13px;border-radius:999px;
  background:rgba(245,186,18,.15);color:var(--accent);font-size:11.5px;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;margin-bottom:12px}
.pk__blok{margin-top:26px}
.pk__bh{font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.45);margin-bottom:13px}
.pk__mler{display:grid;gap:10px}
.pk__m{display:flex;align-items:center;gap:13px;padding:14px 16px;border-radius:15px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.11);
  color:#fff;text-decoration:none;opacity:0;transform:translateX(-10px);
  animation:pkKay .5s var(--ease) forwards;animation-delay:var(--g);
  transition:background .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease)}
@keyframes pkKay{to{opacity:1;transform:none}}
.pk__m:hover{background:rgba(255,255,255,.09);border-color:var(--accent);transform:translateX(3px)}
.pk__mi{width:40px;height:40px;border-radius:12px;flex:none;display:grid;place-items:center;
  background:var(--accent)}
.pk__mi svg{display:block;width:19px;height:19px;color:var(--black)}
.pk__mt{min-width:0;flex:1}
.pk__mt b{display:block;font-size:15px;font-weight:800;letter-spacing:-.01em}
.pk__mt small{display:block;font-size:12.5px;color:rgba(255,255,255,.58);margin-top:3px;line-height:1.5}
.pk__mg{margin-left:auto;flex:none;color:rgba(255,255,255,.35)}
.pk__mg .ic{width:15px;height:15px}
.pk__m--ek .pk__mi{background:rgba(255,255,255,.09)}
.pk__m--ek .pk__mi svg{color:var(--accent)}

.pk__kz{list-style:none;display:grid;gap:9px}
.pk__kz li{padding:13px 16px;border-radius:14px;background:rgba(245,186,18,.07);
  border:1px solid rgba(245,186,18,.20);opacity:0;transform:translateY(8px);
  animation:pkGir .45s var(--ease) forwards;animation-delay:var(--g)}
.pk__kzb{display:block;font-size:12px;font-weight:800;letter-spacing:.02em;color:var(--accent);margin-bottom:5px}
.pk__kzb i{font-style:normal;margin:0 7px;opacity:.6}
.pk__kzm{display:block;font-size:13.5px;line-height:1.6;color:rgba(255,255,255,.82)}

.pk__cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:30px}
.pk__yeni{background:none;border:0;color:rgba(255,255,255,.55);font:inherit;font-size:13.5px;
  font-weight:700;cursor:pointer;text-decoration:underline;text-underline-offset:3px;padding:8px 4px}
.pk__yeni:hover{color:#fff}
.pk__not{margin-top:16px;font-size:12.5px;line-height:1.6;color:rgba(255,255,255,.42)}

@media(max-width:760px){
  .pk__secenekler{grid-template-columns:1fr}
  .pk__sahne{padding:24px 18px;border-radius:18px}
  .pk__soru{font-size:22px}
  .pk__ray{max-width:100%}
  .pk__cta{flex-direction:column;align-items:stretch}
  .pk__cta .btn{justify-content:center}
}
@media(prefers-reduced-motion:reduce){
  .pk__s,.pk__m,.pk__kz li{opacity:1;transform:none;animation:none}
  .pk__sahne{opacity:1;transform:none}
}

/* Kurgu sonucundaki başvuru formu — önerilen hizmetler işaretli gelir. */
.pk__basvuru{padding:24px 22px;border-radius:18px;background:rgba(245,186,18,.06);
  border:1px solid rgba(245,186,18,.20)}
.pk__fh{font-size:13px;color:rgba(255,255,255,.6);margin-bottom:12px;line-height:1.6}
.pk__cipler{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.pk__cip{display:inline-flex;align-items:center;gap:8px;padding:8px 13px;border-radius:999px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);cursor:pointer;
  font-size:13px;font-weight:700;color:rgba(255,255,255,.6);
  transition:background .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease)}
.pk__cip input{position:absolute;opacity:0;width:1px;height:1px}
.pk__cipi{display:grid;place-items:center;width:18px;height:18px;flex:none}
.pk__cipi svg{display:block;width:14px;height:14px;color:rgba(255,255,255,.45)}
.pk__cip:hover{border-color:rgba(245,186,18,.55);color:#fff}
.pk__cip.is-secili{background:var(--accent);border-color:var(--accent);color:var(--black)}
.pk__cip.is-secili .pk__cipi svg{color:var(--black)}
.pk__cip input:focus-visible + .pk__cipi{outline:3px solid var(--accent);outline-offset:3px;border-radius:4px}

.pk__alanlar{display:grid;grid-template-columns:repeat(2,1fr);gap:13px}
.pk__alan{display:flex;flex-direction:column;gap:6px}
.pk__alan--gen{grid-column:1 / -1}
.pk__alan > span{font-size:12px;font-weight:700;color:rgba(255,255,255,.65)}
.pk__alan > span i{font-style:normal;color:var(--accent)}
.pk__alan input{padding:12px 14px;border-radius:12px;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.14);color:#fff;font:inherit;font-size:14px;
  transition:border-color .2s var(--ease),background .2s var(--ease)}
.pk__alan input::placeholder{color:rgba(255,255,255,.32)}
.pk__alan input:focus{outline:none;border-color:var(--accent);background:rgba(255,255,255,.08)}

.pk__onay{display:flex;align-items:flex-start;gap:10px;margin-top:16px;cursor:pointer;
  font-size:12.5px;line-height:1.6;color:rgba(255,255,255,.62)}
.pk__onay input{margin-top:2px;width:16px;height:16px;flex:none;accent-color:var(--accent)}
.pk__onay a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}

.pk__gonder{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:18px}
.pk__fsaat{font-size:12px;color:rgba(255,255,255,.42);line-height:1.5;max-width:290px}
.pk__fnot{margin-top:12px;font-size:13px;line-height:1.6;color:rgba(255,255,255,.7);
  display:flex;align-items:flex-start;gap:8px}
.pk__fnot:empty{display:none}
.pk__fnot.ok{color:#7ee08f}
.pk__fnot.hata{color:#ff9d8a}
.pk__fnot .ic{flex:none;margin-top:3px}

@media(max-width:760px){
  .pk__alanlar{grid-template-columns:1fr}
  .pk__basvuru{padding:20px 16px}
  .pk__gonder{flex-direction:column;align-items:stretch}
  .pk__gonder .btn{justify-content:center}
  .pk__fsaat{max-width:none}
}

/* Üst şeritte iki bağlantı yan yana durabilsin. */
.topstrip__login + .topstrip__login{margin-left:16px}
.topstrip__login .ic{margin-right:5px;vertical-align:-2px}

/* ===================== NASIL ÇALIŞIR — RAY (tanıtım videosu kurgusu) =====================
   Video: koyu zemin, 6 numaralı halka, soldan sağa dolan amber ray, önde ilerleyen nokta,
   altta özet şerit. Animasyon tek sınıfla (.reveal→.in, site.js'in mevcut gözlemcisi)
   tetiklenir; adımlar --i ile sırayla yanar (JS döngüsü YOK). */
.flow--rail{background:var(--black);color:#fff;position:relative;overflow:hidden}
.flow--rail::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 50% at 50% 0%,rgba(245,186,18,.10),transparent 62%)}
.flow--rail .wrap{position:relative;z-index:1}
.flow--rail .h2{color:#fff}
.flow--rail .lead{color:rgba(255,255,255,.62)}

.rail{margin-top:46px}
.rail__steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--n,6),minmax(0,1fr));gap:8px}
.rail__step{text-align:center;padding:0 6px;min-width:0}
.rail__num{width:56px;height:56px;margin:0 auto 12px;border-radius:50%;display:grid;place-items:center;
  background:var(--black);border:2px solid rgba(255,255,255,.17);color:rgba(255,255,255,.38);
  font-weight:800;font-size:15px;letter-spacing:.02em;
  transition:border-color .45s var(--ease),color .45s var(--ease),box-shadow .45s var(--ease)}
.rail__step b{display:block;font-size:14px;font-weight:700;color:rgba(255,255,255,.45);
  transition:color .45s var(--ease)}
.rail__step small{display:block;margin-top:5px;font-size:11.5px;line-height:1.45;color:rgba(255,255,255,.3);
  transition:color .45s var(--ease)}
/* Sırayla yanma: her adım --i kadar gecikir (ray dolma hızıyla uyumlu) */
.rail.in .rail__num{border-color:var(--accent);color:var(--accent);
  box-shadow:0 0 0 4px rgba(245,186,18,.10),0 0 22px rgba(245,186,18,.35);
  transition-delay:calc(var(--i) * .38s)}
.rail.in .rail__step b{color:#fff;transition-delay:calc(var(--i) * .38s)}
.rail.in .rail__step small{color:rgba(255,255,255,.55);transition-delay:calc(var(--i) * .38s)}

.rail__note{margin:34px auto 0;width:fit-content;max-width:100%;text-align:center;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.10);
  border-radius:999px;padding:11px 22px;font-size:13.5px;color:rgba(255,255,255,.72)}
.rail__note b{color:var(--accent);font-weight:700}

/* Dar ekran: ray dikeye döner, adımlar alt alta */
@media(max-width:900px){
  .rail{position:relative;margin-top:34px}
  .rail__steps{grid-template-columns:1fr;gap:18px}
  .rail__step{display:grid;grid-template-columns:56px 1fr;gap:14px;align-items:start;text-align:left;
    margin-top:0;padding:0}
  .rail__num{margin:0}
  .rail__step b{align-self:center}
  .rail__step small{grid-column:2}
}

/* Stat şerit: kart dışında kalan alan da koyu — üstteki hero ve alttaki
   "nasıl çalışır" koyu olduğu için arada beyaz bant görünüyordu. */
.statband-dark{background:var(--black)}

/* Adımlar arası OK — kesintisiz ray yerine (ray, numaraların üstünden geçiyordu).
   Sırayla belirir (--i gecikmesi), sonra hafifçe ileri-geri süzülür. */
.rail__step{position:relative}
.rail__step:not(:last-child)::after{content:'';position:absolute;top:22px;right:-7px;
  width:12px;height:12px;border-top:2px solid rgba(255,255,255,.16);border-right:2px solid rgba(255,255,255,.16);
  transform:rotate(45deg);opacity:0;
  transition:opacity .5s var(--ease),border-color .5s var(--ease)}
.rail.in .rail__step:not(:last-child)::after{opacity:1;border-color:var(--accent);
  transition-delay:calc(var(--i) * .38s + .18s);
  animation:railOk 1.9s ease-in-out infinite;
  animation-delay:calc(var(--i) * .38s + .75s)}
@keyframes railOk{
  0%,100%{transform:rotate(45deg) translate(0,0)}
  50%    {transform:rotate(45deg) translate(3px,-3px)}
}
@media(prefers-reduced-motion:reduce){.rail.in .rail__step::after{animation:none}}

@media(max-width:900px){
  /* Dikey dizilimde ok aşağıyı gösterir, numaranın altına oturur. */
  .rail__step:not(:last-child)::after{top:auto;bottom:-15px;left:21px;right:auto;
    transform:rotate(135deg)}
  @keyframes railOk{
    0%,100%{transform:rotate(135deg) translate(0,0)}
    50%    {transform:rotate(135deg) translate(3px,-3px)}
  }
}

/* ===================== RAY — ZENGİNLEŞTİRME (ayrıntı satırı + hareket) =====================
   Videodaki his: ışık soldan sağa geçerken duraklar sırayla canlanır. Tamamı CSS —
   tetik yalnız .reveal→.in (site.js'in mevcut gözlemcisi), adım sırası --i ile. */

/* Ayrıntı satırı: videodaki alt-şerit cümlelerinin adım altındaki karşılığı */
.rail__det{display:block;margin-top:var(--kil-ara);padding-top:var(--kil-ara);border-top:1px solid rgba(255,255,255,.07);
  font-size:11.5px;line-height:1.5;font-style:normal;color:rgba(255,255,255,.26);
  transition:color .5s var(--ease),border-color .5s var(--ease)}
.rail.in .rail__det{color:rgba(255,255,255,.5);border-color:rgba(245,186,18,.20);
  transition-delay:calc(var(--i) * .38s + .1s)}

/* Adımlar yükselerek gelir */
.rail__step{opacity:0;transform:translateY(16px);
  transition:opacity .6s var(--ease),transform .6s var(--ease)}
.rail.in .rail__step{opacity:1;transform:none;transition-delay:calc(var(--i) * .38s)}

/* Halka: yanarken hafif zıplar, çevresinde ince bir yay döner */
.rail__num{position:relative}
.rail__num::before{content:'';position:absolute;inset:-6px;border-radius:50%;opacity:0;
  background:conic-gradient(from 0deg,rgba(245,186,18,.95),rgba(245,186,18,0) 42%);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 2px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 2px));
  transition:opacity .6s var(--ease)}
.rail.in .rail__num::before{opacity:.8;transition-delay:calc(var(--i) * .38s);
  animation:railYay 3.6s linear infinite;animation-delay:calc(var(--i) * .38s)}
.rail.in .rail__num{animation:railPop .6s var(--ease) both;animation-delay:calc(var(--i) * .38s)}
@keyframes railYay{to{transform:rotate(360deg)}}
@keyframes railPop{0%{transform:scale(.82)}58%{transform:scale(1.07)}100%{transform:scale(1)}}

/* Sıra boyunca bir kez geçen ışık noktası (videodaki öncü nokta) */
.rail{position:relative}
.rail::after{content:'';position:absolute;top:26px;left:0;width:10px;height:10px;margin-left:-5px;
  border-radius:50%;background:var(--accent);pointer-events:none;opacity:0;
  box-shadow:0 0 0 5px rgba(245,186,18,.14),0 0 18px rgba(245,186,18,.85)}
.rail.in::after{animation:railNokta 2.9s var(--ease) .1s both}
@keyframes railNokta{
  0%{opacity:0;left:4%} 8%{opacity:1} 92%{opacity:1} 100%{opacity:0;left:96%}
}

@media(prefers-reduced-motion:reduce){
  .rail::after{display:none}
  .rail.in .rail__num,.rail.in .rail__num::before{animation:none}
}

@media(max-width:900px){
  .rail::after{display:none}
  .rail__det{grid-column:2;margin-top:var(--kil-ara);padding-top:var(--kil-ara)}
}

/* ===================== RAY VARYANTLARI =====================
   Her ürün kendi videosundaki anlatım diline yakın dursun diye üç görünüm:
   .rail--ring  numaralı halka + ok      (varsayılan)
   .rail--icon  yuvarlak kare kutu + kesintisiz ince hat (ok yok)
   .rail--card  çerçeveli kart + altta noktalı hat
   Markup AYNI kalır; yalnız sınıf değişir. */

/* ---- IKON: yuvarlak kare, oklar yerine sürekli hat ---- */
.rail--icon .rail__num{border-radius:16px}
.rail--icon .rail__num::before{border-radius:16px}
.rail--icon .rail__step:not(:last-child)::after{display:none}
.rail--icon .rail__steps{position:relative}
.rail--icon .rail__steps::before{content:'';position:absolute;left:9%;right:9%;top:27px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.16) 12%,rgba(255,255,255,.16) 88%,transparent);
  z-index:-1}

/* ---- KART: çerçeveli kutu, numara küçük etiket, altta hat + nokta ---- */
.rail--card .rail__steps{position:relative;padding-bottom:26px}
.rail--card .rail__step{text-align:left;padding:15px 15px 14px;border-radius:16px;
  border:1px solid rgba(255,255,255,.10);background:linear-gradient(180deg,rgba(255,255,255,.035),transparent)}
.rail--card .rail__num{width:auto;height:auto;margin:0 0 9px;border:0;background:none;box-shadow:none;
  display:block;font-size:11px;letter-spacing:.14em;color:rgba(255,255,255,.32);animation:none}
.rail--card .rail__num::before{display:none}
.rail--card.in .rail__num{border:0;box-shadow:none;color:var(--accent);animation:none}
.rail--card .rail__step:not(:last-child)::after{top:auto;bottom:-21px;right:auto;left:50%;
  width:8px;height:8px;border:0;border-radius:50%;background:rgba(255,255,255,.16);transform:none}
.rail--card.in .rail__step:not(:last-child)::after{background:var(--accent);border:0;transform:none;
  animation:none;box-shadow:0 0 10px rgba(245,186,18,.7)}
.rail--card .rail__steps::after{content:'';position:absolute;left:6%;right:6%;bottom:4px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.14) 10%,rgba(255,255,255,.14) 90%,transparent)}
.rail--card.in .rail__step{border-color:rgba(245,186,18,.28)}
.rail--card .rail__det{border-top-color:rgba(255,255,255,.08)}
.rail--card::after{top:auto;bottom:22px}   /* gezen ışık noktası alt hatta */

@media(max-width:900px){
  .rail--icon .rail__steps::before,.rail--card .rail__steps::after{display:none}
  .rail--card .rail__step:not(:last-child)::after{display:none}
  .rail--card .rail__steps{padding-bottom:0}
}

/* ===================== ÇÖZÜMLER — AYNI MOTOR, FARKLI İŞ =====================
   Tanıtım videolarındaki "kimler kullanır" sahnelerinin sayfa karşılığı:
   üç motor (randevu / saha / dağıtım) ve her birinin hizmet ettiği iş tipleri. */
.motor{padding:88px 0}
.motor__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:40px}
.motor__k{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);padding:24px 22px;box-shadow:var(--shadow-sm);transition:.25s var(--ease)}
.motor__k:hover{box-shadow:var(--shadow);transform:translateY(-3px);border-color:rgba(245,186,18,.45)}
.motor__h{display:flex;align-items:center;gap:13px;margin-bottom:14px}
.motor__ic{width:46px;height:46px;border-radius:14px;flex:none;display:grid;place-items:center;
  background:var(--accent-soft);color:var(--accent-d)}
.motor__ic .ic{width:21px;height:21px}
.motor__h b{display:block;font-size:16.5px;font-weight:800;letter-spacing:-.01em}
.motor__h small{font-size:12.5px;color:var(--muted)}
.motor__p{font-size:14px;line-height:1.62;color:var(--ink-2);margin:0 0 16px}
.motor__chips{list-style:none;display:flex;flex-wrap:wrap;gap:7px;margin:0 0 18px;padding:0}
.motor__chips li{font-size:12.5px;font-weight:600;color:var(--ink-2);background:var(--canvas);
  border:1px solid var(--line);border-radius:999px;padding:6px 11px}
.motor__k .link-cta{margin-top:auto}
.motor__not{margin:34px auto 0;width:fit-content;max-width:100%;text-align:center;font-size:13.5px;
  color:var(--muted);background:#fff;border:1px solid var(--line);border-radius:999px;padding:11px 22px}
.motor__not b{color:var(--ink);font-weight:700}
@media(max-width:980px){.motor__grid{grid-template-columns:1fr;gap:14px}.motor{padding:64px 0}}

/* Çözüm sayfası — "arkada duran güvenceler" ızgarası (Kamera Alarm videosundaki
   ARKA PLANDA / ARKA PLANDA BİZ sahnelerinin sayfa karşılığı). */
.guvence{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:36px}
.guvence>div{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px 20px 18px;
  box-shadow:var(--shadow-sm);border-left:3px solid var(--accent)}
.guvence b{display:block;font-size:15px;font-weight:800;letter-spacing:-.01em;margin-bottom:7px}
.guvence span{display:block;font-size:13.5px;line-height:1.6;color:var(--muted)}
@media(max-width:980px){.guvence{grid-template-columns:1fr}}


/* ── HİZMETLER — KOYU TEMA ────────────────────────────────────────────────
   Bölüm beyaz zeminliydi; siyah + amber/beyaz karışımına çekildi. Kapsam
   `.services--dark` ile sınırlı: aynı `.svc` bileşenini kullanan diğer
   sayfalar AYNEN kalır. Mini görseller (çubuk/kutucuk/anahtar) açık gri
   tonlarla çizildiği için koyu zeminde kaybolur — hepsi beyazın düşük
   alfalı tonlarına çevrildi. */
.services--dark{background:var(--black);border-top-color:rgba(255,255,255,.08);
  border-bottom-color:rgba(255,255,255,.08);--vz-idle:rgba(255,255,255,.10)}
.services--dark .h2{color:#fff}
/* .eyebrow--amber beyaz zemin için koyulaştırılmış (#8A6200) — siyahta okunmaz */
.services--dark .eyebrow--amber,.services--dark .eyebrow--amber .ic{color:var(--accent)}
.services--dark .lead{color:rgba(255,255,255,.62)}

/* kart gövdesi */
.services--dark .svc{background:#141414;border-color:rgba(255,255,255,.09)}
.services--dark .svc:hover{border-color:rgba(245,186,18,.45);
  box-shadow:0 18px 44px -18px rgba(0,0,0,.9),0 0 0 1px rgba(245,186,18,.12)}
.services--dark .svc h3{color:#fff}
.services--dark .svc p{color:rgba(255,255,255,.60)}
.services--dark .svc__ic{background:rgba(245,186,18,.13);color:var(--accent)}
/* beyaz zemin için koyulaştırılmış amber koyuda okunmuyor → saf amber */
.services--dark .link-cta{color:var(--accent)}
.services--dark .svc-not{color:rgba(255,255,255,.45)}

/* kart üstü mini görsel */
.services--dark .svc__viz{background:linear-gradient(180deg,rgba(245,186,18,.11),transparent)}
.services--dark .svc__viz::after{background:rgba(255,255,255,.09)}
.services--dark .vz-row span,
.services--dark .vz-tick div span{background:rgba(255,255,255,.14)}
.services--dark .vz-row b{color:var(--accent)}
.services--dark .vz-row.dim i{background:rgba(255,255,255,.22)}
.services--dark .vz-tiles i{background:rgba(255,255,255,.10)}
.services--dark .vz-tiles i.mid{background:rgba(245,186,18,.30)}
.services--dark .vz-sw i,
.services--dark .vz-sw i.off{background:rgba(255,255,255,.12)}
.services--dark .vz-sw i::after{background:#fff}
.services--dark .vz-win i{background:rgba(255,255,255,.10)}
.services--dark .vz-bars i:nth-child(even){background:rgba(245,186,18,.34)}
.services--dark .vz-tick div b{color:#fff}
.services--dark .vz-tick div i{background:rgba(245,186,18,.22)}
.services--dark .vz-route .st{background:var(--black);box-shadow:0 0 0 2px var(--accent)}


/* ── HERO İLLÜSTRASYON SAHNESİ ────────────────────────────────────────────
   Hero'daki sahneler Hizmetler bölümündeki mini animasyonlarla aynı görsel
   dile düşüyordu (beyaz kart + amber satır). Bu sahne bilinçli olarak
   farklı bir katman: tek renk figür + marka amberi, hareket SVG'nin içinde.
   Ürün ekranı görseli gerektirmez, her ölçekte nettir, koyu temada da çalışır. */
.hs--illus{padding:0;justify-content:center}
.hsi{width:100%;height:100%;display:block;color:var(--ink);font-family:inherit}
.hsi-grid{color:var(--ink)}
.hsi-blob{fill:var(--accent);opacity:.07}
.hsi-ink{fill:var(--ink)}
.hsi-desk{fill:rgba(31,41,55,.16)}
.hsi-arm{fill:none;stroke:var(--ink);stroke-width:16;stroke-linecap:round}
.hsi-screen{fill:#fff;stroke:var(--ink);stroke-width:2.4}
.hsi-amber{fill:var(--accent)}
/* DİKKAT: opacity KULLANMA — .hsi-opt giriş animasyonu opacity:1 ile biter
   ve soluk dolguyu ezer. Saydamlık rengin içinde olmalı. */
.hsi-soft{fill:rgba(31,41,55,.20)}
.hsi-band{fill:none;stroke:var(--accent);stroke-width:6;stroke-linecap:round}
.hsi-boom{fill:none;stroke:var(--accent);stroke-width:4;stroke-linecap:round}
.hsi-panel{fill:#fff;stroke:rgba(31,41,55,.12);stroke-width:1.5}
.hsi-panel--pick{fill:var(--accent-soft);stroke:var(--accent-soft-line)}
/* opacity DEĞİL rgba: .hsi-opt animasyonu opacity'yi 1'e çekip tonu bozuyor,
   ayrıca kontrast ölçümü de yanlış çıkıyor. */
.hsi-chipbg{fill:rgba(245,186,18,.20)}
/* sprite ikonu: sitenin tüm ikonları gibi çizgi stili — fill YOK, stroke var */
.hsi-gl{fill:none;stroke:var(--accent-d);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.is-koyu .hsi-gl{stroke:var(--accent)}
.hsi-t1{font-size:14.5px;font-weight:800;fill:var(--ink)}
.hsi-t2{font-size:11.5px;fill:var(--muted)}
.hsi-num{font-size:11.5px;font-weight:800;text-anchor:middle;fill:var(--accent-d)}
.hsi-num--on{fill:var(--black)}
.hsi-live{font-size:9.5px;font-weight:800;letter-spacing:.06em;text-anchor:middle;fill:var(--black)}
.hsi-pick{font-size:11.5px;font-weight:800;text-anchor:end;fill:var(--accent-d)}

/* figür yavaşça nefes alır — sahne donuk durmasın */
.hsi-fig{animation:hsiFloat 5.2s ease-in-out infinite}
@keyframes hsiFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}

/* çağrı hattı figüre doğru ÇİZİLİR */
.hsi-line{fill:none;stroke:var(--accent);stroke-width:2.6;stroke-linecap:round;
  stroke-dasharray:6 8;stroke-dashoffset:var(--d,260);animation:hsiDraw 1.5s var(--ease) .25s forwards}
@keyframes hsiDraw{to{stroke-dashoffset:0}}

/* mikrofonda nabız */
.hsi-ping{fill:none;stroke:var(--accent);stroke-width:2;transform-origin:196px 214px;
  animation:hsiPing 2.1s ease-out infinite}
@keyframes hsiPing{0%{transform:scale(1);opacity:.75}100%{transform:scale(3.6);opacity:0}}

/* kart ve seçenekler sırayla girer */
.hsi-card{opacity:0;transform:translateY(-10px);animation:hsiIn .5s var(--ease) .1s forwards}
.hsi-opt{opacity:0;transform:translateX(14px);animation:hsiIn .5s var(--ease) forwards;animation-delay:var(--g)}
@keyframes hsiIn{to{opacity:1;transform:none}}

/* koyu tema: figür beyaza, paneller koyuya döner */
.is-koyu .hsi{color:#fff}
.is-koyu .hsi-ink,.is-koyu .hsi-desk{fill:#fff}
.is-koyu .hsi-arm{stroke:#fff}
.is-koyu .hsi-screen{fill:#1a1a1a;stroke:rgba(255,255,255,.25)}
.is-koyu .hsi-panel{fill:rgba(255,255,255,.05);stroke:rgba(255,255,255,.12)}
.is-koyu .hsi-panel--pick{fill:rgba(245,186,18,.14);stroke:rgba(245,186,18,.4)}
.is-koyu .hsi-t1{fill:#fff}
.is-koyu .hsi-t2{fill:rgba(255,255,255,.55)}
.is-koyu .hsi-num,.is-koyu .hsi-pick{fill:var(--accent)}

@media(prefers-reduced-motion:reduce){
  .hsi-fig,.hsi-ping,.hsi-line,.hsi-card,.hsi-opt{animation:none}
  .hsi-line{stroke-dashoffset:0}
  .hsi-card,.hsi-opt{opacity:1;transform:none}
}


/* ── HERO İLLÜSTRASYON — SAHNEYE ÖZEL PARÇALAR ────────────────────────────
   11 slaydın her biri FARKLI bir kompozisyon kuruyor (kuşbakışı harita,
   radyal yayın, kamera kadrajı, ev kesiti…). Ortak boya sınıfları yukarıda;
   burada yalnız o sahnelere ait parçalar var. */

/* tipografi yardımcıları */
.hsi-mid{text-anchor:middle}
.hsi-end{text-anchor:end}
.hsi-t1--sm{font-size:12.5px}
.hsi-t2--l{font-size:12.5px}
.hsi-t3{font-size:10.5px;font-weight:700;fill:var(--muted)}
.hsi-big{font-size:46px;font-weight:800;fill:var(--ink);text-anchor:middle;letter-spacing:-.02em}
.hsi-big--sm{font-size:30px;text-anchor:start}
.hsi-num--lg{font-size:12.5px;fill:var(--accent-d)}
.hsi-dot{fill:rgba(31,41,55,.28)}
.hsi-sep{stroke:rgba(31,41,55,.14);stroke-width:1.4}

/* çağrı merkezi — küçük kulaklık */
.hsi-band--sm{stroke-width:5}
.hsi-arm--sm{stroke-width:12}
.hsi-fig--b{animation-delay:-2.6s}

/* çağrı yayını — radyal dalga */
.hsi-ring{fill:none;stroke:var(--accent);stroke-width:2.4;transform-origin:300px 186px;
  opacity:0;animation:hsiRing 2.4s ease-out infinite;animation-delay:var(--g)}
@keyframes hsiRing{0%{transform:scale(.35);opacity:.85}100%{transform:scale(1.9);opacity:0}}

/* CRM — dikey zaman çizelgesi */
.hsi-tl{stroke:rgba(31,41,55,.16);stroke-width:2;stroke-dasharray:3 6}

/* saha — kuşbakışı harita */
.hsi-map{opacity:.9}
.hsi-road{stroke:var(--ink);stroke-width:14;opacity:.07;stroke-linecap:round}
.hsi-road--main{stroke-width:18;opacity:.1}
.hsi-fence{fill:none;stroke:var(--accent);stroke-width:2;stroke-dasharray:8 9;opacity:.55;
  animation:hsiSpin 26s linear infinite;transform-origin:392px 196px}
@keyframes hsiSpin{to{transform:rotate(360deg)}}
.hsi-pinhole{fill:#fff}

/* sipariş — kurye yolda */
.hsi-wheel{fill:none;stroke:var(--ink);stroke-width:6}
.hsi-frame{fill:none;stroke:var(--ink);stroke-width:7;stroke-linecap:round;stroke-linejoin:round}
.hsi-ride{animation:hsiRide 6s var(--ease) infinite}
@keyframes hsiRide{0%{transform:translateX(-40px)}55%,100%{transform:translateX(268px)}}
.hsi-bar{fill:var(--accent);transform-origin:428px 0;animation:hsiBar 2.4s var(--ease) .4s forwards;transform:scaleX(0)}
@keyframes hsiBar{to{transform:scaleX(.62)}}

/* otel — valiz sapı */
.hsi-handle{fill:none;stroke:var(--ink);stroke-width:4;opacity:.35;stroke-linecap:round}

/* akıllı ev — kesit, lamba, termostat */
.hsi-house{fill:none;stroke:var(--ink);stroke-width:3;stroke-linejoin:round;opacity:.85}
.hsi-wire{stroke:var(--ink);stroke-width:2;opacity:.5}
.hsi-glow{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linecap:round;opacity:0;
  animation:hsiGlow 2.6s ease-out infinite;animation-delay:var(--g,0s)}
@keyframes hsiGlow{0%{opacity:.85}70%{opacity:0}100%{opacity:0}}
.hsi-knob{fill:#fff}

/* güvenlik — kamera kadrajı */
.hsi-view{fill:none;stroke:rgba(31,41,55,.10);stroke-width:2}
.hsi-corner{fill:none;stroke:var(--accent);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}
.hsi-detect{fill:none;stroke:var(--accent);stroke-width:2.4;stroke-dasharray:12 8;
  animation:hsiDetect 2.2s ease-in-out infinite}
@keyframes hsiDetect{0%,100%{opacity:.45}50%{opacity:1}}
.hsi-tag{font-size:10px;font-weight:800;letter-spacing:.08em;fill:var(--accent-d)}
.hsi-rec{fill:#EF4444;animation:hsiDetect 1.6s ease-in-out infinite}

/* koyu tema karşılıkları */
.is-koyu .hsi-big{fill:#fff}
.is-koyu .hsi-road,.is-koyu .hsi-house,.is-koyu .hsi-wire{stroke:#fff}
.is-koyu .hsi-wheel,.is-koyu .hsi-frame{stroke:#fff}
.is-koyu .hsi-dot{fill:#fff}
.is-koyu .hsi-pinhole,.is-koyu .hsi-knob{fill:#0e0e0e}
.is-koyu .hsi-t3{fill:rgba(255,255,255,.55)}
.is-koyu .hsi-num--lg,.is-koyu .hsi-tag{fill:var(--accent)}
.is-koyu .hsi-sep,.is-koyu .hsi-tl{stroke:rgba(255,255,255,.18)}
.is-koyu .hsi-view{stroke:rgba(255,255,255,.14)}

@media(prefers-reduced-motion:reduce){
  .hsi-ring,.hsi-fence,.hsi-ride,.hsi-bar,.hsi-glow,.hsi-detect,.hsi-rec{animation:none}
  .hsi-bar{transform:scaleX(.62)}
  .hsi-ring,.hsi-glow{opacity:.4}
}

/* koyu temada soluk dolgular beyaza döner */
.is-koyu .hsi-soft{fill:rgba(255,255,255,.16)}
.is-koyu .hsi-dot{fill:rgba(255,255,255,.34)}
.is-koyu .hsi-desk{fill:rgba(255,255,255,.20)}


/* ── FİGÜR PARÇALARI ──────────────────────────────────────────────────────
   Figürler önce düz birer siluetti ("satranç piyonu"); saç, boyun, yaka ve
   dirsekli kollar eklenince karakter kazanıyor. Tek renk + amber düzeni
   korunur, ten/kıyafet rengi girilmez — 11 slaytta tutarlılık bozulmasın. */
.hsi-hair{fill:var(--ink)}
.hsi-collar{fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;opacity:.9}
.hsi-tablet{fill:#fff;stroke:var(--ink);stroke-width:2.6}
.hsi-shadow{fill:rgba(31,41,55,.07)}
.hsi-shirt{fill:rgba(255,255,255,.14)}
.is-koyu .hsi-hair{fill:#fff}
.is-koyu .hsi-collar{stroke:#0e0e0e}
.is-koyu .hsi-tablet{fill:#1a1a1a;stroke:#fff}
.is-koyu .hsi-shadow{fill:rgba(255,255,255,.08)}

/* poza özel aksesuarlar */
.hsi-toque{fill:#fff;stroke:var(--ink);stroke-width:2.4}
.hsi-helmet{fill:var(--accent)}
.hsi-sofa{fill:rgba(31,41,55,.16)}
.is-koyu .hsi-toque{fill:#1a1a1a;stroke:#fff}
.is-koyu .hsi-sofa{fill:rgba(255,255,255,.16)}


/* ── OKUNAKLILIK DÜZELTMESİ ───────────────────────────────────────────────
   Ölçüm: açık slaytlarda amber yazı açık amber zemine düşünce kontrast
   1.2–2.1'e iniyordu (okunmuyor). Beyaz/açık zeminde AA sağlayan koyu amber
   (--accent-text #8A6200) kullanılır; KOYU slaytlarda (is-koyu) saf amber
   kalır, orada zaten yüksek kontrast var. */
.hsi-num,.hsi-num--lg,.hsi-pick,.hsi-tag{fill:var(--accent-text)}
.hsi-gl{stroke:var(--accent-text)}
.hsi-num--on{fill:var(--black)}
.is-koyu .hsi-num,.is-koyu .hsi-num--lg,.is-koyu .hsi-pick,.is-koyu .hsi-tag{fill:var(--accent)}
.is-koyu .hsi-gl{stroke:var(--accent)}
.is-koyu .hsi-num--on{fill:var(--black)}

/* çizgi amaçlı yollar: fill belirtilmezse SVG varsayılanı siyahtır —
   alanı olan bir yolda bu koca siyah leke demek. Hepsine fill:none. */
.hsi-sep,.hsi-tl,.hsi-road,.hsi-wire{fill:none}

.is-koyu .hsi-chipbg{fill:rgba(245,186,18,.22)}


/* ── HERO SLIDER OKLARI ───────────────────────────────────────────────────
   Nokta hedefleri küçük olduğu için slayt değiştirmek zordu. Oklar çerçevenin
   dikey ortasına, kenarın hafif dışına oturur; dar ekranda içeri alınır. */
.hsnav{position:absolute;top:50%;transform:translateY(-50%);z-index:4;
  width:46px;height:46px;border-radius:50%;background:#fff;border:1px solid var(--line);
  box-shadow:var(--shadow);display:grid;place-items:center;color:var(--ink);
  cursor:pointer;transition:.18s var(--ease);padding:0}
.hsnav:hover{background:var(--black);color:#fff;transform:translateY(-50%) scale(1.07)}
.hsnav:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.hsnav .ic{width:20px;height:20px}
/* Oklar hero__in'e (slider'ın tamamı) göre konumlanır. wrap max 1180 + 24px iç
   boşluk: geniş ekranda içerik sütununun DIŞINA çıkar; ekran daraldıkça önce iç
   boşluğa, 1080'de (hero tek sütuna inince) en alta, noktaların hizasına gelir. */
.hsnav--geri{left:-60px}
.hsnav--geri .ic{transform:rotate(180deg)}
.hsnav--ileri{right:-60px}
@media(max-width:1340px){.hsnav--geri{left:-6px}.hsnav--ileri{right:-6px}}
@media(max-width:1080px){
  .hsnav{top:auto;bottom:6px;transform:none;width:40px;height:40px}
  .hsnav:hover{transform:scale(1.07)}
  .hsnav--geri{left:10px}
  .hsnav--ileri{right:10px}
}
@media(max-width:560px){.hsnav{width:36px;height:36px}.hsnav .ic{width:16px;height:16px}}


/* ── GÜVENLİK SAHNESİ: duvara monte kamera + bacaklar ─────────────────── */
.hsi-camGov{fill:var(--ink)}
.hsi-lens{fill:#0e0e0e;stroke:var(--accent);stroke-width:2.5}
.hsi-lensIc{fill:var(--accent)}
.hsi-bacak{fill:none;stroke:var(--ink);stroke-width:15;stroke-linecap:round}
.hsi-cam{animation:hsiTara 6s ease-in-out infinite;transform-origin:130px 136px}
@keyframes hsiTara{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(4deg)}}
.is-koyu .hsi-camGov{fill:#fff}
.is-koyu .hsi-bacak{stroke:#fff}
.is-koyu .hsi-lens{fill:#0e0e0e}

/* KOYU SAHNELERDE OKUNAKLILIK: ikincil yazı %55 opaklıkla soluk kalıyordu,
   panel de neredeyse görünmezdi. Ölçüm: kontrast 3.4 → 7.1. */
.is-koyu .hsi-t2{fill:rgba(255,255,255,.80)}
.is-koyu .hsi-panel{fill:rgba(255,255,255,.09);stroke:rgba(255,255,255,.20)}
.is-koyu .hsi-view{stroke:rgba(255,255,255,.20)}

@media(prefers-reduced-motion:reduce){.hsi-cam{animation:none}}


/* ── TANITIM VİDEOSU: oynat katmanı + pop-up oynatıcı ─────────────────────
   Hizmet sayfasının hero'sundaki ürün ekranı artık videonun kapağı. Video
   TIKLANANA KADAR indirilmez (preload yok, src sonradan atanır) — sayfa
   ağırlığı değişmez. */
.vplay{position:absolute;inset:0;z-index:3;border:0;padding:0;cursor:pointer;
  background:transparent;display:grid;place-items:center;transition:.3s var(--ease);
  -webkit-tap-highlight-color:transparent}
.vplay::before{content:'';position:absolute;inset:0;background:rgba(14,14,14,.28);
  opacity:0;transition:opacity .3s var(--ease)}
.vplay:hover::before,.vplay:focus-visible::before{opacity:1}
.vplay:focus-visible{outline:3px solid var(--accent);outline-offset:-3px}

.vplay__ic{position:relative;width:82px;height:82px;border-radius:50%;
  background:var(--accent);color:#0E0E0E;display:grid;place-items:center;
  box-shadow:0 14px 40px -10px rgba(245,186,18,.75);transition:transform .3s var(--ease)}
.vplay:hover .vplay__ic{transform:scale(1.08)}
.vplay__ic svg{width:30px;height:30px;fill:currentColor;margin-left:5px}
/* dışa açılan halka — videonun orada olduğunu belli eder */
.vplay__ic::after{content:'';position:absolute;inset:0;border-radius:50%;
  border:2px solid var(--accent);animation:vplayRing 2.4s ease-out infinite}
@keyframes vplayRing{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.75);opacity:0}}

.vplay__lbl{position:absolute;left:16px;bottom:16px;display:inline-flex;align-items:center;
  gap:7px;font-size:12.5px;font-weight:700;color:#fff;background:rgba(14,14,14,.72);
  border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:7px 14px;
  backdrop-filter:blur(6px);opacity:0;transform:translateY(6px);transition:.3s var(--ease)}
.vplay:hover .vplay__lbl,.vplay:focus-visible .vplay__lbl{opacity:1;transform:none}
@media(max-width:700px){
  .vplay__ic{width:62px;height:62px}.vplay__ic svg{width:23px;height:23px}
  .vplay__lbl{left:10px;bottom:10px;font-size:11.5px;padding:6px 11px}
}

/* ── pop-up oynatıcı ── */
.vlb{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;padding:24px;
  background:rgba(8,8,8,.88);backdrop-filter:blur(10px);
  opacity:0;animation:vlbIn .22s var(--ease) forwards}
@keyframes vlbIn{to{opacity:1}}
.vlb__kutu{position:relative;width:min(1120px,100%);max-height:calc(100vh - 48px);
  display:flex;flex-direction:column;gap:12px;
  transform:scale(.97);animation:vlbUp .28s var(--ease) .04s forwards}
@keyframes vlbUp{to{transform:none}}
.vlb__ust{display:flex;align-items:center;gap:12px;color:#fff}
.vlb__ust b{font-size:15px;font-weight:800;letter-spacing:-.01em}
.vlb__ust span{font-size:12.5px;color:rgba(255,255,255,.6)}
.vlb__kapat{margin-left:auto;width:40px;height:40px;border-radius:50%;flex:none;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.18);color:#fff;
  display:grid;place-items:center;cursor:pointer;transition:.18s}
.vlb__kapat:hover{background:var(--accent);border-color:var(--accent);color:#0E0E0E}
.vlb__kapat svg{width:18px;height:18px}
.vlb video{width:100%;max-height:calc(100vh - 130px);border-radius:16px;background:#000;
  box-shadow:0 40px 100px -30px rgba(0,0,0,.9);display:block}
body.vlb-acik{overflow:hidden}
@media(max-width:700px){.vlb{padding:14px}.vlb__kutu{gap:9px}}

/* Sanal Ofis hero'su ekran görüntüsü değil, çizilen sahne — oynat düğmesi
   üstüne binebilsin diye konumlandırılır ve köşeleri yuvarlatılır. */
.so-sahne--video{position:relative;overflow:hidden;border-radius:16px}
.so-sahne--video .vplay{border-radius:16px}

/* ── DÜZEN KAYMASI (CLS) ──────────────────────────────────────────────────
   Hero slider'da sol sütunun yüksekliği slayta göre 373-431px arasında
   oynuyordu; her geçişte düğmeler ve cihaz çerçevesi yer değiştirip ölçülen
   ~0.013 kayma üretiyor, oturum boyunca birikiyordu. En uzun slayta göre
   sabitlenir — hiçbir geçişte hiçbir şey oynamaz.
   Yalnız iki sütunlu düzende geçerli: 1080px altında hero tek sütuna iniyor,
   orada sabit yükseklik boşluk yaratırdı. */
@media(min-width:1081px){
  /* Ölçüm (1100 / 1440 / 1920 px): başlık 2-3 satır arası 122↔183px, açıklama
     58↔87px oynuyor. Sütuna tek yükseklik vermek yerine OYNAYAN İKİ ÖĞE ayrı
     ayrı sabitlenir — metin ileride değişse de düzen kaymaz. */
  .hero__title{min-height:183px}
  .hero__sub{min-height:87px}
}


/* ── ÜRÜN SEÇİMİ (iş ortaklığı başvurusu) ─────────────────────────────────
   Bayi adayı birden fazla ürün seçer; tek seçimli açılır liste yetmez.
   İlk deneme serbest akışlı rozetlerdi — satırlar farklı genişlikte bitince
   dağınık duruyordu. Artık EŞİT GENİŞLİKTE ızgara: 3 → 2 → 1 sütun.
   Son satırda tek kart kalmaz (13 öğe 3 sütunda 4+1 düşerdi).
   Gerçek checkbox DOM'da kalır (klavye + ekran okuyucu), yalnız görsel gizli. */
.urunsec{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:4px}
.urunsec > *:last-child:nth-child(3n+1){grid-column:1/-1}
@media(max-width:900px){
  .urunsec{grid-template-columns:repeat(2,minmax(0,1fr))}
  .urunsec > *:last-child:nth-child(odd){grid-column:1/-1}
}
@media(max-width:520px){.urunsec{grid-template-columns:1fr}}

.urunsec__k{position:relative;display:block;cursor:pointer;-webkit-tap-highlight-color:transparent}
.urunsec__k input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.urunsec__k span{display:flex;align-items:center;gap:9px;width:100%;box-sizing:border-box;
  font-size:13.5px;font-weight:600;color:var(--ink-2);line-height:1.25;
  background:#fff;border:1px solid var(--line);border-radius:12px;
  padding:12px 14px;min-height:48px;transition:.16s var(--ease)}
.urunsec__k span::before{content:'';width:17px;height:17px;border-radius:5px;flex:none;
  border:1.5px solid var(--line-2);transition:.16s var(--ease)}
.urunsec__k:hover span{border-color:var(--accent-soft-line);background:var(--accent-soft)}
.urunsec__k input:checked + span{border-color:var(--accent);background:var(--accent-soft);
  color:var(--accent-text)}
.urunsec__k input:checked + span::before{background:var(--accent);border-color:var(--accent);
  box-shadow:inset 0 0 0 2px #fff}
.urunsec__k input:focus-visible + span{outline:2px solid var(--accent);outline-offset:2px}

/* seçim sayacı — kaç ürün işaretlendiği tek bakışta görünsün */
.urunsec-sayac{font-size:12.5px;font-weight:700;color:var(--accent-text);margin-top:8px}
.urunsec-sayac:empty{display:none}

/* zorunlu ürün seçimi boşsa kısa bir vurgu */
.urunsec--hata .urunsec__k span{border-color:#F87171}

/* ═══════════════════════════════════════════════════════════════════════════
   DAR EKRAN: MASAÜSTÜ PROTOTİPLERİ GÖSTERİLMEZ  (22 Ağu 2026)
   ───────────────────────────────────────────────────────────────────────────
   Bu sahneler gerçek panelin 1280px'lik CANLI kopyasıdır (ekran görüntüsü
   değil). İçerideki ızgaralar masaüstü genişliğine göre kurulu: 390px'te
   hücreler kırpılıyor, yazılar taşıyor, çerçeve bozuk görünüyordu.
   Daraltarak "düzeltmek" okunmaz bir minyatür üretirdi; bilgi zaten yanında
   METİN olarak var (başlık + madde listesi). Bu yüzden çerçeve gizlenir,
   metin kalır — kullanıcı bilgiyi kaybetmez, bozuk görüntü görmez.

   Eşik 1100px: tüm telefonlar + TÜM tablet dikeyleri (iPad Pro 12.9 dikey
   1024px dâhil) + dar tablet yatayları.
   ═══════════════════════════════════════════════════════════════════════ */
@media(max-width:1100px){
  /* 1) Slider: laptop kadrajı ve okları taşıyan sahne komple gider.
        Gezinme NOKTALARLA sürer (onlar sahnenin dışında), pill'ler de durur. */
  .slider__stage{display:none !important}

  /* 2) Bağımsız laptop kadrajları (ürün önizleme sekmeleri, ekran satırları). */
  .laptop{display:none !important}

  /* 3) Kadraj gizlense de içerik kalırsa boş/kırık kutu görünür — o da gider. */
  .spane--lap{display:none !important}

  /* 4) Geriye kalan BOŞ kutular: yalnız prototip barındıranlar kapanır.
        :has() desteklemeyen tarayıcıda kural düşer; kadraj zaten gizli
        olduğu için en fazla boş bir alan kalır, BOZUK görüntü kalmaz. */
  .pv__shot:has(.laptop),
  .vrow__stage:has(.laptop),
  .vrow__stage:has(.spane),
  .hshot__stage:has(.laptop){display:none !important}

  /* 5) Tek sütuna düşen önizleme: metin tam genişlik alsın. */
  .pv{grid-template-columns:1fr}
}

/* ── MOBİLDE HAREKET YOK (22 Ağu 2026, kullanıcı isteği) ────────────────────
   "Mobildeyken bu altta animasyon olmasın." Küçük ekranda bölüm bölüm beliren
   öğeler kaydırmayı takip etmeyi zorlaştırıyor ve sayfa "oynuyor" gibi
   duruyordu. İçerik AYNEN görünür; yalnız giriş hareketleri kapatılır. */
@media(max-width:1100px){
  /* HAREKETİ KAPATMA — ANINDA BİTİR.
     Bu sahnelerde öğeler `opacity:0` ile başlayıp animasyonla görünür oluyor.
     `animation:none` yazınca son duruma hiç ulaşamıyorlar: ölçüldü, 390px'te
     60 öğe opacity=0'da donmuştu — yani hareketi kapatırken İÇERİĞİ SİLİYORDU.
     Süreyi sıfıra indirmek ise `forwards` dolgusuyla son durumu hemen uygular:
     hareket görünmez, içerik yerinde kalır. */
  .slider__desc,.sp-anim,.sp-main.sp-anim,
  .vsahne,.vsahne *,.hs--illus,.hs--illus *,
  .hcopy.is-in .eyebrow,.hcopy.is-in .hero__title,
  .hcopy.is-in .hero__sub,.hcopy.is-in .hero__stats{
    animation-duration:.001ms !important;
    animation-delay:0s !important;
    animation-iteration-count:1 !important;
  }
  .slpill,.sldot{transition:none}

  /* ANA SAYFA HERO SLIDER'I: dar ekranda YALNIZ METİN.
     "Sadece yazılar olsun, açıklama kısmı." Sağdaki çizim kartı gizlenir;
     sol sütundaki ürün metni ve gezinme noktaları kalır. */
  .hero__right .hshot__frame{display:none}
  .hero__right .hshot__cap{margin-top:0}
  .hshot__dots{display:flex;gap:7px;justify-content:center;flex-wrap:wrap}
}

/* Sistem düzeyinde "hareketi azalt" seçiliyse HER ekranda hareket durur. */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important}
}


/* Sahnesi olmayan özellik satırı: görsel sütun kaldırıldığı için metin tek
   sütuna yayılır. Boş 296px'lik kutu bırakmaktansa satır metin düzeninde
   durur — okunur ve deliksiz. */
.vrow--metin{grid-template-columns:1fr !important}
.vrow--metin .vrow__txt{max-width:820px}

/* ── DAR EKRANDA BÖLÜM NİZAMI (22 Ağu 2026) ────────────────────────────────
   Masaüstü kadrajı gizlenince geriye dağılmış parçalar kalıyordu. Bölüm
   burada derli toplu bir "ekran listesi"ne dönüşür: tek gezinme (etiketli
   sekmeler), kart içinde sola yaslı açıklama, alt alta maddeler. */
@media(max-width:1100px){
  /* Gezinme TEK olsun: etiketli sekmeler zaten var, noktalar tekrar. */
  .slider__dots{display:none}

  /* Sekme şeridi: kaydırılabilir kalır ama nefes alsın. */
  .slider__pills{padding:2px 2px 14px;gap:7px}

  /* Açıklama artık başlı başına içerik — kart görünümü alır. */
  .slider__desc{
    text-align:left;max-width:none;margin:0;min-height:0;
    background:var(--card,#fff);border:1px solid var(--line);border-radius:16px;
    padding:20px 18px;box-shadow:0 1px 2px rgba(16,16,16,.04),0 12px 28px -20px rgba(16,16,16,.18);
  }
  /* PİL ÖLÇEĞİ: rozet telefonda düğme gibi durmasın.
     Ölçüldü: 41px yükseklik / 9-18px dolgu / 17px ikon — masaüstü ölçeği.
     Rozet başlığın ÜSTÜNDEKİ etikettir, başlıktan hafif olmalı.
     Renk, kenarlık ve düzen korunur; yalnız ölçek düşer. */
  .slider__desc .spd-badge,.spanel-desc .spd-badge{
    margin-bottom:12px;font-size:11.5px;padding:6px 12px;gap:7px;letter-spacing:.05em;
  }
  .slider__desc .spd-badge svg,.spanel-desc .spd-badge svg{width:14px;height:14px}
  .slider__desc .screen__title{font-size:20px;margin:0 0 14px;letter-spacing:-.01em}

  /* Maddeler alt alta: yan yana sarınca düzensiz satırlar oluşuyordu. */
  .slider__desc .screen__bul{flex-direction:column;align-items:flex-start;gap:11px;justify-content:flex-start}
  .slider__desc .screen__bul li{font-size:14px;line-height:1.45;align-items:flex-start}
  .slider__desc .screen__bul li .ic{margin-top:3px;flex:none}
}

/* ── DAR EKRAN: HERO SIRASI VE PC KADRAJI (22 Ağu 2026) ────────────────────
   "Video üst tarafta olsun" · "PC ekranın içinde sıkışmış duruyor" ·
   "tam görebilelim ama pc boyutu ona göre olsun" · "taşmalar olmasın"

   Sıkışık görünümün sebebi 3B döndürmeydi: kadraj perspektifle eğik duruyor,
   dar ekranda ekran görüntüsü çarpık ve kırpık görünüyordu. Burada döndürme
   kapanır, kadraj DÜZ ve TAM GENİŞLİK olur; görselin tamamı görünür. */
@media(max-width:1100px){

  /* 1) ANA SAYFA "ÖNİZLEME" BÖLÜMÜ — dar ekranda gösterilmez.
        İçindeki masaüstü kadrajı zaten gizli; geriye başlık ve boş bir sekme
        şeridi kalıyordu. Bilgi aşağıdaki modül kartlarında zaten var. */
  section.tabs{display:none}

  /* 2) SIRA: ROZET → VİDEO → BAŞLIK → metin.
        Görsel başlığın üstüne çıkar ama ürün rozeti en üstte kalır —
        ziyaretçi önce hangi üründe olduğunu görür.
        Metin sütunu `display:contents` ile saydamlaşır: çocukları doğrudan
        ızgara öğesi olur ve tek tek sıralanabilir. Sütunun kendi kutu stili
        yoktur, bu yüzden kaldırması güvenlidir. */
  .phero__in,.hero__in{display:grid;grid-template-columns:1fr}
  .phero__left,.hero__left{display:contents}

  .phero__badge,.hero__in .eyebrow{order:1;margin-bottom:18px}
  .phero__shot,.hero__right{order:2;margin:0 0 26px}
  .phero h1,.hero__title{order:3}
  .phero__sub,.hero__sub{order:4}
  .phero__btns,.hero__btns{order:5}
  .phero__chips,.hero__stats,.hero__trust{order:6}

  /* 3) KADRAJ DÜZ VE TAM: eğiklik yok, taşma yok, görselin tamamı görünür. */
  .phero .browser,.browser--hero{transform:none !important;max-width:100%}
  .phero .browser:hover,.browser--hero:hover{transform:none !important}
  .browser img{width:100%;height:auto;display:block}

  /* Yüzen rozetler kadrajın üstüne biniyor ve kenardan taşıyordu. */
  .phero__shot .floatcard,.hero__right .floatcard{display:none}

  /* Video düğmesi: etiket sürekli görünür (dokunmatikte hover yok). */
  .vplay__lbl{opacity:1;transform:none}
}

/* ── HERO DÜĞMELERİ: YAN YANA VE EŞİT (22 Ağu 2026) ───────────────────────
   Esnek satır, iki düğme sığmayınca alt alta düşürüyordu; genişlikler de
   metin uzunluğunca farklıydı. İki eşit sütun: aynı genişlik, aynı yükseklik,
   ortalı metin. Dolgu ve yazı dar ekranda kısılır ki metin tek satırda kalsın. */
@media(max-width:1100px){
  .phero__btns,.hero__btns{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:26px}
  .phero__btns .btn,.hero__btns .btn{
    width:100%;justify-content:center;text-align:center;
    padding:14px 12px;font-size:15px;gap:6px;white-space:nowrap;
  }
  .phero__btns .btn .ic,.hero__btns .btn .ic{flex:none}
}
@media(max-width:380px){
  .phero__btns .btn,.hero__btns .btn{padding:13px 8px;font-size:14px}
}

/* ── HERO BOŞLUK RİTMİ VE ROZET (22 Ağu 2026) ─────────────────────────────
   Ölçüldü (390px): öğeler arası 66–76px boşluk vardı — ızgaranın `gap:48px`'i
   ile her öğenin kendi alt boşluğu üst üste biniyordu. Rozet de tam genişliğe
   yayılmıştı: `display:contents` ile ızgara öğesi olunca varsayılan `stretch`
   onu sütun genişliğine çekiyordu (içeriği 150px).
   Aralık artık TEK kaynaktan: her öğenin kendi alt boşluğu. */
@media(max-width:1100px){
  .phero{padding:40px 0 48px}
  .phero__in,.hero__in{gap:0}

  /* Rozet içeriği kadar: yayılma yok. */
  .phero__badge,.hero__in .eyebrow{
    justify-self:start;align-self:start;width:max-content;max-width:100%;margin:0 0 14px}

  .phero__shot,.hero__right{margin:0 0 22px}
  .phero h1,.hero__title{margin:0 0 12px}
  .phero__sub,.hero__sub{margin:0 0 20px}
  .phero__btns,.hero__btns{margin:0 0 18px}
  .phero__chips,.hero__stats{margin:0}
}

/* ── DAR EKRANDA SIKIŞAN BİLEŞENLER (22 Ağu 2026, denetimle bulundu) ───────
   Süreç şeridi dar ekranda da altı sütun kalıyordu: sütun başına 56px, başlıklar
   alt alta kırılıp düzensiz görünüyordu. Kadrajdaki sahte adres yazısı da
   sığmayıp kırpılıyordu — dekoratif olduğu için dar ekranda gizlenir. */
/* NOT: Süreç şeridine (.rail) dar ekran kuralı EKLENMEDİ — site zaten 900px
   altında rayı dikeye çevirip her adımı "numara rozeti + metin" satırı yapıyor
   (bkz. yukarıdaki 900px bloğu). Denetimin "2 sütun / 56px" uyarısı yanıltıcıydı:
   o 56px sıkışmış metin değil, NUMARA ROZETİNİN sütunu. Buraya sütun kuralı
   koymak, dosyada sonra geldiği için o doğru tasarımı eziyordu. */
@media(max-width:760px){
  .browser__url{display:none}
  .browser__bar{padding:9px 12px}
}

/* ── ÖZELLİK ÇİPLERİ: BOŞLUK BIRAKMASIN (22 Ağu 2026) ─────────────────────
   Çipler masaüstü için `1fr 1fr` + `max-width:440px` kurulmuştu; hero orada iki
   sütunlu olduğu için doğruydu. Dar ekranda hero tek sütuna düşünce çipler yine
   440px'de kalıyor ve sağda geniş bir boşluk bırakıyordu.
   700px üstü: dördü yan yana, tam genişlik. Altında: ikişerli — telefonda
   dört sütuna "Dahili ve rahatsız etmeyin (DND)" gibi etiketler sığmaz. */
@media(max-width:1100px){
  .phero__chips{max-width:none;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}
  .phero__chips span{font-size:12.5px;padding:10px 11px;line-height:1.35}
}
@media(max-width:700px){
  .phero__chips{grid-template-columns:1fr 1fr;gap:10px}
  .phero__chips span{font-size:13px;padding:11px 12px}
}

/* ── DAR EKRAN: OKLAR VE ŞERİTLER (22 Ağu 2026) ───────────────────────────
   Oklar mutlak konumlu ve kartın DIŞINA yerleştirilmişti (left:-60px); kadraj
   dar ekranda gizlenince istatistik şeridinin ÜZERİNE düştüler ve başlıkları
   kapattılar. Gezinme zaten noktalarla yapılıyor — oklar kaldırılır. */
@media(max-width:1100px){
  .hsnav{display:none}

  /* İstatistik şeridi: ÜÇÜ YAN YANA. İki sütunken üçüncü öğe ("0 Donanım")
     alt satıra kaçıyor ve şerit yarım kalmış gibi duruyordu. */
  .hero__stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 10px}
  .hero__stats div{min-width:0}
  .hero__stats b{font-size:19px;line-height:1.15}
  .hero__stats span{font-size:11.5px;line-height:1.3}

  /* Güven bandı dar ekranda GÖSTERİLMEZ (kullanıcı isteği). Aynı bilgi
     sayfanın alt bölümlerinde ve alt bilgide zaten var. */
  .trustbar{display:none}
}
@media(max-width:420px){
  /* En dar telefonda da üçlü kalır; yalnız yazı biraz daha kısılır. */
  .hero__stats b{font-size:18px}
  .hero__stats span{font-size:11px}
}

/* ── DAR EKRANDA HERO ORTALANIR (22 Ağu 2026) ─────────────────────────────
   Tek sütuna düşen hero'da her şey sola yaslıydı — geniş ekrandaki iki sütunlu
   dengeden kalma bir hizalama. Tek sütunda ortalanmış düzen daha derli toplu
   durur. Paragrafın satır uzunluğu sınırlanır: ortalanmış UZUN metin okumayı
   zorlaştırır, dar bir ölçüde dengeli durur. */
@media(max-width:1100px){
  .phero__in,.hero__in{justify-items:center;text-align:center}

  .phero__badge,.hero__in .eyebrow{justify-self:center}
  .phero h1,.hero__title{text-align:center}
  .phero__sub,.hero__sub{margin-left:auto;margin-right:auto;max-width:46ch;text-align:center}

  /* Tam genişlik isteyenler ortalamadan etkilenmesin */
  .phero__shot,.hero__right,.phero__btns,.hero__btns,
  .phero__chips,.hero__stats{justify-self:stretch;width:100%}

  /* Şerit ve çiplerin İÇİ de ortalanır */
  .hero__stats{justify-items:center}
  .hero__stats div{align-items:center;text-align:center}
  .phero__chips span{justify-content:center;text-align:center}
}

/* ── İSTATİSTİK KARTI: SİYAH ZEMİN, ÜÇ SÜTUN (22 Ağu 2026) ────────────────
   Şerit açık zeminde çıplak duruyor ve düğmelere yapışıyordu. Siyah karta
   alınınca hem ayrışıyor hem de üç değer tek bir bütün gibi okunuyor.
   Aralarındaki ince ayırıcı, hangi etiketin hangi değere ait olduğunu
   bir bakışta belli eder. */
@media(max-width:1100px){
  .hero__stats{
    background:var(--black);
    color:#fff;
    border-radius:18px;
    padding:18px 10px;
    margin:26px 0 0;
    gap:0;
    grid-template-columns:repeat(3,minmax(0,1fr));
    box-shadow:0 14px 34px -20px rgba(16,16,16,.55);
  }
  /* Hücre sütunu DOLDURUR; ortalama kuralı hücreyi içeriğe göre daraltıyordu
     ve ayırıcı çizgiler eşit aralıklı durmuyordu (ölçüldü: 111/111/66px). */
  .hero__stats div{position:relative;padding:0 9px;min-width:0;
    justify-self:stretch;width:100%;align-items:center;text-align:center}

  /* İnce ayırıcı — ilk öğeden sonrakilerin soluna */
  .hero__stats div + div::before{
    content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);
    width:1px;height:34px;background:rgba(255,255,255,.14);
  }

  .hero__stats b{color:#fff;font-size:19px;line-height:1.15}
  .hero__stats span{color:rgba(255,255,255,.62);font-size:11.5px;line-height:1.3;margin-top:3px}

  /* Düğmelerle şerit arası açılır, hero'nun altındaki fazla boşluk kısılır. */
  .phero__btns,.hero__btns{margin:0 0 6px}
  .phero{padding:40px 0 34px}
  .hero{padding-bottom:30px}
}
@media(max-width:380px){
  .hero__stats{padding:16px 6px}
  .hero__stats div{padding:0 6px}
  .hero__stats b{font-size:17.5px}
  .hero__stats span{font-size:10.5px}
}

/* ── YETİM KELİME VE ŞERİT TAŞMASI (22 Ağu 2026) ──────────────────────────
   "Bulutta çalışır, donanım bakımı / istemez" — son kelime tek başına alt
   satıra düşüyordu. `text-wrap:balance` satırları dengeleyerek bunu önler;
   desteklemeyen tarayıcıda olağan sarma sürer, zarar yok. */
.stat-band span,.hero__stats span,.phero__chips span,.trustbar__items i{text-wrap:balance}
.stat-band b,.hero__stats b{text-wrap:balance}

/* Şerit masaüstünde koyu bölümden TAŞARAK çıkması için negatif üst boşluk
   taşıyor. Dar ekranda hero çiplerle bittiği için kart onların ÜSTÜNE
   biniyordu — taşma yalnız geniş ekranda kalır. */
@media(max-width:1100px){
  .stat-band{margin-top:0}
  .statband-dark{padding-top:0}
}

/* ── BAŞLIK DÜĞMELERİ: GİRİŞ + BAŞVURU (22 Ağu 2026) ──────────────────────
   Başlıkta artık iki eylem var. `btn--ghost-d` KULLANILMADI: 1080px altında o
   sınıfı gizleyen bir kural var (telefon bağlantısı için) — giriş düğmesi de
   kaybolurdu. Kendi sınıfı verildi. */
/* YALNIZ DAR EKRANDA: geniş ekranda giriş zaten üst şeritte ve mega menüde
   var; başlığa üçüncü bir kopya koymak tekrar olurdu. Dar ekranda ikisi de
   gizlendiği için başlık tek erişim noktası. */
.btn--giris{
  display:none;
  background:rgba(255,255,255,.09);
  color:#fff;
  border:1px solid rgba(255,255,255,.16);
  font-size:14.5px;
  padding:10px 16px;
  white-space:nowrap;
}
.btn--giris:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.28)}

@media(max-width:1080px){
  /* 390px'te logo + iki düğme + hamburger sığsın: yazı ve dolgu kısılır,
     "Hemen başvur"un ok ikonu gizlenir — yer kazandırır, anlam kaybettirmez. */
  .header__cta{gap:7px}
  .header__cta .btn{font-size:13px;padding:9px 13px;border-radius:999px}
  .header__cta .btn--amber .ic{display:none}
  .btn--giris{font-size:13px;padding:9px 13px}
  .burger{width:38px;height:38px}
  .burger .ic{width:20px;height:20px}
}
@media(max-width:400px){
  .header__cta{gap:6px}
  .header__cta .btn{font-size:12px;padding:8px 10px}
  .btn--giris{font-size:12px;padding:8px 10px}
}

/* Giriş düğmesi YALNIZ 840px altında. Ölçüldü: üst şeritteki "Müşteri girişi"
   bağlantısı tam bu eşikte gizleniyor — üstünde giriş zaten var, altında
   hiçbir yerde yok. Eşik tahminle değil, o kuralla hizalanarak seçildi. */
@media(max-width:840px){
  .btn--giris{display:inline-flex}
}

/* ── BİRİNCİL VE İKİNCİL DÜĞME AYRIMI (22 Ağu 2026) ───────────────────────
   İkisi aynı boyut, aynı şekil, aynı ağırlıktaydı — renk dışında fark yoktu ve
   eşit iki seçenek gibi okunuyordu. Oysa biri ASIL EYLEM (başvuru), diğeri
   yardımcı (sayfa içi gezinme). Fark üç kanaldan verilir: ağırlık, yükseklik,
   doku. Tüm hizmet sayfaları aynı iskeleti kullandığı için kural hepsinde geçerli. */
@media(max-width:1100px){
  .phero__btns,.hero__btns{grid-template-columns:1.25fr 1fr;align-items:stretch}

  /* BİRİNCİL: dolgun, kalın, amber gölgeli */
  .phero__btns .btn--amber,.hero__btns .btn--amber{
    font-weight:800;font-size:15px;padding:16px 12px;
    box-shadow:0 10px 26px -10px rgba(245,186,18,.6);
  }

  /* İKİNCİL: hayalet — dolgusuz, ince kenarlıklı, soluk */
  .phero__btns .btn--ghost-d,.hero__btns .btn--ghost-d,
  .phero__btns .btn--ghost,.hero__btns .btn--ghost{
    background:transparent;
    border:1px solid rgba(255,255,255,.22);
    color:rgba(255,255,255,.78);
    font-weight:600;font-size:14px;padding:14px 10px;
    box-shadow:none;
  }
  /* Açık zeminli hero'da (ana sayfa) ikincil için koyu kenarlık */
  .hero .hero__btns .btn--ghost{
    border-color:rgba(16,16,16,.18);color:rgba(16,16,16,.72);
  }
}

/* ── ANA SAYFA HERO DÜĞMELERİ (22 Ağu 2026) ───────────────────────────────
   Ana sayfa hero'su açık zeminli olduğu için `btn--dark` + `btn--outline`
   kullanıyor; hizmet sayfaları `btn--amber` + `btn--ghost-d`. Ayrım kuralı bu
   çifte de yazılır — yoksa "her sayfada böyle olsun" ana sayfada karşılanmazdı. */
@media(max-width:1100px){
  .hero__btns .btn--dark{
    font-weight:800;font-size:15px;padding:16px 12px;
    box-shadow:0 10px 26px -12px rgba(16,16,16,.55);
  }
  .hero__btns .btn--outline{
    background:transparent;
    border:1px solid rgba(16,16,16,.18);
    color:rgba(16,16,16,.72);
    font-weight:600;font-size:14px;padding:14px 10px;
    box-shadow:none;
  }
}

/* ── (a) FİLM ŞERİDİ TELEFONDA ALT ALTA (22 Ağu 2026) ─────────────────────
   Ölçüldü: cozumler.html 390px'te yatay kayıyordu (scrollWidth 1252).
   `.film__track{min-width:max-content}` şeridi 1192px'e açıyor, `.brl__c` de
   `min-width:auto` olduğu için onunla birlikte uzuyordu. Telefonda altı adımlı
   bir süreci yana kaydırarak okutmak zaten kötü — şerit listeye çevrilir. */
/* Şerit doğal genişliği 1245px. Eşik önce 760px'e yazılmıştı; ölçüldü,
   768/820/1024px'te sayfa 1274px'e kayıyordu — tablet ve dar masaüstü açıkta
   kalmış. Eşik şeridin kendi genişliğine (1280px) çekilir: altında sarar. */
@media(max-width:1280px){
  .brl__c{min-width:0}
  .film__track{min-width:0;flex-wrap:wrap;gap:14px}
}
@media(max-width:760px){
  .film__step{flex:1 1 100%;max-width:none;min-width:0;padding:0}
}
@media(min-width:761px) and (max-width:1280px){
  /* Tablette altı adım tek sıraya sığmaz; ikişerli/üçerli sarar. */
  .film__step{flex:1 1 240px;max-width:none;min-width:0;padding:0}
}

/* ── (b) ÇİP/DÜĞME AYRIMI ─────────────────────────────────────────────────
   Özellik çipleri düğmelerle aynı dili kullanıyordu: yuvarlak kutu, kenarlık,
   dolgu. Alt alta gelince "dört düğme" gibi okunuyordu. Oysa bunlar eylem
   değil, özellik onayı. Kutu kaldırılır, üstlerine ince bir ayırıcı konur —
   liste gibi okunur, eylem çağrısıyla karışmaz. */
@media(max-width:1100px){
  .phero__chips{
    margin-top:22px;padding-top:20px;
    border-top:1px solid rgba(255,255,255,.10);
    gap:13px 16px;
  }
  .phero__chips span{
    background:none;border:0;padding:0;box-shadow:none;
    color:rgba(255,255,255,.74);font-size:13.5px;font-weight:600;
    justify-content:flex-start;text-align:left;
  }
  .phero__chips .ic{color:var(--accent);flex:none}

  /* Açık zeminli hero (ana sayfa) için aynı düzen, koyu mürekkeple */
  .hero .phero__chips{border-top-color:rgba(16,16,16,.10)}
  .hero .phero__chips span{color:rgba(16,16,16,.72)}
}

/* ── (c) DÜĞME AYRIMI SINIFA BAĞLI ────────────────────────────────────────
   Kural kaba (.phero__btns/.hero__btns) bağlanmıştı; cozumler.html
   `.phero__btns` içinde `btn--dark` kullanıyor ve hiçbir kural tutmuyordu.
   Artık kap fark etmeksizin SINIF esas alınır. */
@media(max-width:1100px){
  .phero__btns .btn--dark,.hero__btns .btn--dark,
  .phero__btns .btn--amber,.hero__btns .btn--amber{
    font-weight:800;font-size:15px;padding:16px 12px;
  }
  .phero__btns .btn--outline,.hero__btns .btn--outline,
  .phero__btns .btn--ghost-d,.hero__btns .btn--ghost-d,
  .phero__btns .btn--ghost,.hero__btns .btn--ghost{
    background:transparent;font-weight:600;font-size:14px;padding:14px 10px;box-shadow:none;
  }
}

/* ── DÜĞME DİLİ HER SAYFADA AYNI (22 Ağu 2026) ────────────────────────────
   Sayfalar farklı sınıf çiftleri kullanıyor; cozumler.html koyu hero'da AÇIK
   zemin için yazılmış sınıfları kullandığından hiyerarşi tersine dönüyordu:
   birincil siyah-üzerine-siyah kayboluyor, ikincil beyaz görünüp baskın
   duruyordu. Kural artık sınıfa değil KONUMA ve hero'nun zeminine bakar:
   ilk düğme birincil, ikincisi yardımcı. */
@media(max-width:1100px){
  /* KOYU HERO (hizmet sayfaları, çözümler) */
  .phero .phero__btns .btn:first-child{
    background:var(--accent);color:#0E0E0E;border:1px solid transparent;
    font-weight:800;font-size:15px;padding:16px 12px;
    box-shadow:0 10px 26px -10px rgba(245,186,18,.6);
  }
  .phero .phero__btns .btn:last-child{
    background:transparent;border:1px solid rgba(255,255,255,.22);
    color:rgba(255,255,255,.82);
    font-weight:600;font-size:14px;padding:14px 10px;box-shadow:none;
  }

  /* AÇIK HERO (ana sayfa) */
  .hero .hero__btns .btn:first-child{
    background:var(--black);color:#fff;border:1px solid transparent;
    font-weight:800;font-size:15px;padding:16px 12px;
    box-shadow:0 10px 26px -12px rgba(16,16,16,.55);
  }
  .hero .hero__btns .btn:last-child{
    background:transparent;border:1px solid rgba(16,16,16,.18);
    color:rgba(16,16,16,.74);
    font-weight:600;font-size:14px;padding:14px 10px;box-shadow:none;
  }

  /* `btn--lg` dolgusu bu ölçüleri şişirmesin */
  .phero__btns .btn--lg,.hero__btns .btn--lg{padding:16px 12px}
  .phero__btns .btn:last-child.btn--lg,.hero__btns .btn:last-child.btn--lg{padding:14px 10px}
}

/* ── CANLI DEMO BÖLÜMÜ MOBİLDE YOK (22 Ağu 2026) ──────────────────────────
   Ana sayfada `section.tabs` gizlenmişti; hizmet sayfalarındaki karşılığı
   `#ekranlar` duruyordu. Masaüstü panel maketi telefonda okunur bir şey
   üretmiyor. Hedefi ölü kalan "Özellikleri gör" düğmesi site.js'te ardındaki
   ilk görünür bölüme yönlendirilir. */
@media(max-width:1100px){
  section#ekranlar{display:none}
}

/* ── YETİM KELİME KORUMASI (22 Ağu 2026) ──────────────────────────────────
   Denetim: `text-wrap:balance` yalnız çip/istatistik metinlerindeydi; başlık
   tipografisinin tamamı korumasızdı. 3+ kelimelik başlıklarda son kelime dar
   ekranda tek başına alta düşüyordu. `balance` satırları dengeleyip önler. */
.h2,.h2--light,.hero__title,.phero h1,.cta__title,.screen__title,
.svc h3,.fcard h4,.frow h3,.gcard h4,.price h3,.faq__q,.sec-head h2{
  text-wrap:balance;
}

/* ── MÜŞTERİ GİRİŞİ: TELEFON ↔ TABLET AYRIMI (22 Ağu 2026) ────────────────
   İki öge de `max-width:840px`e bağlıydı ve tam orada yer değiştiriyordu:
   768/820px'te (tablet dikey) üst şerit girişi GİZLİYDİ — "tablette zaten
   üstte çıkıyor" o genişlikte doğru değildi. Başlık düğmesini tablette
   kaldırmak giriş yolunu tamamen yok ederdi. Eşik telefon sınırına (640px)
   çekilir: ≤640 başlık düğmesi, >640 üst şerit. Her genişlikte tam bir yol
   var, hiçbir genişlikte ikisi birden yok. */
@media(min-width:641px) and (max-width:840px){
  .topstrip__login{display:inline-flex}
  .btn--giris{display:none}
}

/* ── BAŞLIK EYLEMLERİ: TELEFONDA İKON (23 Ağu 2026) ───────────────────────
   Telefonda başlıkta iki tam metinli pil + hamburger yan yanaydı; logo
   sıkışıyor, satırın yarısını düğmeler yiyordu. Telefonda eylemler eş ölçülü
   ikon düğmeleri olur; metin altta hero'daki tam boy düğmede zaten var.
   Metinli sürüm ile ikon sürümü ASLA aynı anda görünmez. */
.hact{display:none;width:36px;height:36px;flex:none;border-radius:11px;
  place-items:center;color:#fff;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.10);transition:background .18s var(--ease)}
.hact .ic{width:17px;height:17px}
.hact:hover{background:rgba(255,255,255,.16)}
.hact--amber{background:var(--accent);border-color:transparent;color:var(--accent-ink)}
.hact--amber .ic{transform:rotate(-45deg)}
.hact--amber:hover{background:var(--accent-d)}

@media(max-width:640px){
  .hact{display:grid}
  .btn--giris,.header__cta .btn--amber,.header__cta .btn--tel{display:none}
  .header__cta{gap:6px}
  /* Logo kutusu 52px; dört düğme + aralık 162px kalır — hem sayıca hem
     optik olarak logodan hafif (ölçüldü: 40px'te 184px, başlığın yarısı). */
  .burger{width:36px;height:36px;border-radius:11px;
    border:1px solid rgba(255,255,255,.10)}
  .burger .ic{width:19px;height:19px}
}

/* ── MENÜ BAĞLANTISI TEK SATIR (23 Ağu 2026) ──────────────────────────────
   Masaüstünde "İş Ortaklığı" iki satıra bölünüyor, o sütun komşularından
   yüksek kalıyor ve menü satırını bozuyordu. Menü bağlantısı tek satırdır. */
.nav__link,.topstrip__login{white-space:nowrap}

/* ── HERO ALT METNİ TELEFONDA KÜÇÜLÜR ─────────────────────────────────────
   Başlık `clamp` ile 34-38px'e iniyor ama alt metin 18px'te sabit kalıyordu:
   başlığa göre orantısız duruyor, dört satır kaplıyordu. Ölçek yerine oturur. */
@media(max-width:640px){
  .phero__sub,.hero__sub{font-size:16px;line-height:1.55}
}

/* ── İPUCU BALONU 761–1100px ARASINDA KALDIRILIR (23 Ağu 2026) ────────────
   Ölçüldü: `cozum-*` sayfalarında 768px'te sayfa 777px'e kayıyordu; suçlu
   246px sabit genişlikteki mutlak konumlu `.mh__ipucu`.
   Kayıp değil: balon varsayılan olarak `opacity:0`, yalnız fare üstüne
   gelince açılıyor — dokunmatik tablette o etkileşim yok, yani zaten
   görünmüyordu. ≤760px'te ayrı bir kural onu akışa alıp metni kalıcı
   gösteriyor; oradaki bilgi duruyor. Diyagramın düzeni 760px'te tümden
   değiştiği için balonu tek başına akışa almak bu aralıkta diyagramı bozardı. */
@media(min-width:761px) and (max-width:1100px){
  .mh__ipucu{display:none}
}


/* =========================================================================
   UYGULAMA PENCERESİ (.appwin) — VoisPhone masaüstü uygulamasının CANLI HTML
   KOPYASI. Ekran görüntüsü DEĞİL; sayfadaki panel kopyalarıyla aynı teknik.
   Neden: ekran görüntüsü çekmek gerçek dahiliye kayıtlı bir uygulamadan
   müşteri adı/numarası sızdırma riski taşıyor. Burada içerik HTML olduğu
   için tüm isim ve numaralar ÖRNEKTİR ve öyle kalır.
   Kullanıldığı yerler: uygulamalar.html (kahraman), santral.html (VoisPhone).
   ========================================================================= */
/* Uygulama penceresi — gerçek uygulamanın HTML kopyası, veriler DEMO */
.appwin{border-radius:14px;overflow:hidden;background:#fff;box-shadow:var(--shadow-lg);
  border:1px solid rgba(255,255,255,.09)}
.appwin__bar{height:46px;background:#1A1A1A;border-bottom:2px solid var(--accent);
  display:flex;align-items:center;gap:10px;padding:0 14px}
.appwin__lights{display:flex;gap:7px}
.appwin__lights i{width:11px;height:11px;border-radius:50%;display:block}
.appwin__ic{width:26px;height:26px;margin-left:4px}
.appwin__chip{margin-left:auto;display:inline-flex;align-items:center;gap:7px;background:#DCFCE7;
  color:#166534;font-size:11.5px;font-weight:800;padding:5px 11px;border-radius:999px}
.appwin__chip i{width:7px;height:7px;border-radius:50%;background:#16A34A;display:block}
.appwin__body{display:grid;grid-template-columns:126px 1fr 190px;min-height:352px}
.appwin__menu{border-right:1px solid var(--line);padding:12px 8px;background:#fff}
.appwin__mi{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:9px;
  font-size:12.5px;font-weight:700;color:var(--muted)}
.appwin__mi.is-on{background:var(--accent-soft);color:var(--accent-text)}
.appwin__mi span{width:7px;height:7px;border-radius:2px;background:currentColor;opacity:.5;flex:none}
.appwin__mi.is-on span{opacity:1}
.appwin__list{padding:14px 16px;background:#fff}
.appwin__lh{font-size:10.5px;font-weight:800;letter-spacing:.6px;color:var(--muted-2);margin:0 0 10px}
.appwin__row{display:flex;align-items:center;gap:11px;padding:9px 0;border-top:1px solid var(--line-2)}
.appwin__row:first-of-type{border-top:0}
.appwin__av{width:31px;height:31px;border-radius:50%;background:var(--soft,#F3F4F6);
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:var(--ink-2);flex:none}
.appwin__row>div:not(.appwin__av){min-width:0}
.appwin__nm,.appwin__no{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.appwin__nm{font-size:12.5px;font-weight:700;color:var(--ink);line-height:1.25}
.appwin__no{font-size:11px;font-weight:500;color:var(--muted-2)}
.appwin__meta{margin-left:auto;font-size:10.5px;font-weight:700;color:var(--muted-2);white-space:nowrap;flex:none}
.appwin__pad{border-left:1px solid var(--line);padding:14px;background:#fff}
.appwin__field{border:1px solid var(--line);border-radius:10px;padding:9px 11px;font-size:15px;
  font-weight:800;color:var(--ink);margin-bottom:11px;letter-spacing:.02em}
.appwin__keys{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.appwin__key{border:1px solid var(--line);border-radius:9px;text-align:center;padding:9px 0;
  font-size:14.5px;font-weight:800;color:var(--ink)}
.appwin__call{margin-top:11px;background:var(--accent);color:var(--accent-ink);border-radius:10px;
  text-align:center;padding:10px 0;font-size:13.5px;font-weight:900}

/* Izgara çocuklarının varsayılan min-width'i "min-content"tur; pencere dar
   ekranda küçülmek yerine kabı genişletiyor ve sayfa yana taşıyordu. */
.appwin__body>*{min-width:0}
@media(max-width:980px){
  .appwin__body{grid-template-columns:1fr 190px}
  .appwin__menu{display:none}
}
@media(max-width:560px){
  .appwin__body{grid-template-columns:1fr;min-height:0}
  .appwin__pad{display:none}
  .appwin__list{padding:12px 13px}
}

/* Dar kaplarda satır kırılmasın: menü etiketleri ve numara alanı tek satır. */
.appwin__mi{white-space:nowrap}
.appwin__field{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px}