/* =========================================================================
   LOYEXO — alt8 "World-Class Loyalty"
   Dünya standardı sadakat/loyaltech markalarından esinlenen tasarım dili.
   Üyelik-kartı / ödül-kartı metaforu · tier rozetleri · puan kutuları ·
   zengin renkli blok geçişleri · büyük istatistik şeritleri · CSS data-viz.
   brand-tokens.css ÜZERİNE kurulur — marka token'ları override EDİLMEZ.
   Prefix: .l8-
   ========================================================================= */

:root{
  /* alt8'e özgü yardımcı (marka token'larını ezmeyen) yerel değişkenler */
  --l8-card-radius: 22px;
  --l8-block-radius: 28px;
  --l8-edge: clamp(1rem, 0.5rem + 2vw, 2rem);
  --l8-shell: 1240px;
  --l8-header-h: 78px;
  --l8-tier-bronze: #B97A4B;
  --l8-tier-silver: #8C96A8;
  --l8-tier-gold: var(--orange);
  --l8-tier-plat: var(--teal);
  --l8-gold-1: #F4B860;
  --l8-gold-2: #ED9B25;
  --l8-card-ink: #0E1A33;
  --l8-grad-navy: linear-gradient(135deg, #1C315F 0%, #16284D 55%, #0E1A33 100%);
  --l8-grad-teal: linear-gradient(135deg, #2A8F8A 0%, #20706C 100%);
  --l8-grad-orange: linear-gradient(135deg, #F4B860 0%, #ED9B25 100%);
  --l8-grad-card: linear-gradient(135deg, #223A6C 0%, #1C315F 48%, #16284D 100%);
}

/* =========================================================================
   BASE
   ========================================================================= */
.l8-body{
  background: var(--bg);
  color: var(--ink);
  overflow-x: hidden;
}
.l8-body.nav-open{ overflow: hidden; }

.l8-shell{
  width: 100%;
  max-width: var(--l8-shell);
  margin-inline: auto;
  padding-inline: var(--l8-edge);
}
.l8-shell--narrow{ max-width: 880px; }

.l8-skip{
  position: absolute; left: -9999px; top: 0;
  background: var(--navy); color: #fff;
  padding: .7rem 1.1rem; border-radius: 0 0 var(--r-sm) 0;
  z-index: var(--z-overlay); font-family: var(--font-head); font-weight: 600;
}
.l8-skip:focus{ left: 0; color:#fff; }

.l8-vh{
  position:absolute!important; width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* =========================================================================
   ŞERİT / EYEBROW
   ========================================================================= */
.l8-eyebrow{
  display: inline-flex; align-items:center; gap:.5rem;
  font-family: var(--font-head);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--teal);
}
.l8-eyebrow::before{
  content:""; width: 26px; height: 2px; border-radius: 2px;
  background: var(--orange);
}
.l8-eyebrow--center{ }
.l8-eyebrow--light{ color: var(--teal-200); }
.l8-eyebrow--light::before{ background: var(--orange-400); }

/* =========================================================================
   BUTTONS
   ========================================================================= */
.l8-btn{
  display: inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font-family: var(--font-head); font-weight: 700;
  font-size: 1rem; line-height: 1;
  padding: .92rem 1.5rem;
  border-radius: var(--r-pill);
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--t-fast), box-shadow var(--t-base), background var(--t-base), color var(--t-base), border-color var(--t-base);
  white-space: nowrap;
}
.l8-btn svg{ width: 1.15em; height: 1.15em; flex: none; }
.l8-btn:hover{ transform: translateY(-2px); }
.l8-btn:active{ transform: translateY(0); }

.l8-btn--primary{
  background: var(--l8-grad-orange);
  color: var(--l8-card-ink);
  box-shadow: 0 8px 22px rgba(237,155,37,.32);
}
.l8-btn--primary:hover{
  color: var(--l8-card-ink);
  box-shadow: 0 14px 32px rgba(237,155,37,.42);
}
.l8-btn--teal{
  background: var(--teal); color:#fff;
  box-shadow: 0 8px 22px rgba(42,143,138,.3);
}
.l8-btn--teal:hover{ color:#fff; background: var(--teal-700); }

.l8-btn--ghost{
  background: transparent; color: var(--navy);
  border-color: var(--navy-200);
}
.l8-btn--ghost:hover{ border-color: var(--navy); color: var(--navy); background: var(--navy-050); }

.l8-btn--light{
  background: rgba(255,255,255,.12); color:#fff;
  border-color: rgba(255,255,255,.32);
  backdrop-filter: blur(4px);
}
.l8-btn--light:hover{ background: rgba(255,255,255,.22); color:#fff; border-color: rgba(255,255,255,.6); }

.l8-btn--block{ width: 100%; }
.l8-btn-row{ display:flex; flex-wrap: wrap; gap:.85rem; }

/* Inline arrow link */
.l8-link{
  display: inline-flex; align-items:center; gap:.45rem;
  font-family: var(--font-head); font-weight: 700;
  color: var(--teal); text-decoration: none;
}
.l8-link svg{ width:1.05em; height:1.05em; transition: transform var(--t-fast); }
.l8-link:hover{ color: var(--teal-700); }
.l8-link:hover svg{ transform: translateX(4px); }

/* =========================================================================
   HEADER
   ========================================================================= */
.l8-header{
  position: sticky; top: 0; z-index: var(--z-header);
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: background var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}
.l8-header.is-scrolled{
  background: rgba(14,26,51,.92);
  box-shadow: var(--shadow-md);
  border-bottom-color: rgba(255,255,255,.06);
}
.l8-header[data-header="dark"]{
  background: rgba(14,26,51,.92);
  border-bottom-color: rgba(255,255,255,.06);
}
.l8-header-inner{
  display: flex; align-items:center; gap: 1.25rem;
  height: var(--l8-header-h);
}
.l8-brand{ display:inline-flex; align-items:center; flex: none; }
.l8-brand img{ height: 38px; width:auto; }

/* Nav */
.l8-nav{ display: flex; align-items:center; gap: 1.25rem; margin-left: auto; }
.l8-nav-list{
  display:flex; align-items:center; gap: .25rem; list-style:none;
}
.l8-nav-list > li{ position: relative; }
.l8-navlink{
  display: inline-flex; align-items:center; gap:.3rem;
  font-family: var(--font-head); font-weight: 600;
  font-size: .96rem; color: var(--navy);
  background: none; border: none; cursor: pointer;
  padding: .55rem .7rem; border-radius: var(--r-pill);
  text-decoration: none; line-height: 1;
  transition: color var(--t-fast), background var(--t-fast);
}
.l8-navlink:hover{ color: var(--teal); background: var(--navy-050); }
.l8-navlink[aria-current="page"]{ color: var(--teal); }
.l8-navlink[aria-current="page"]::after{
  content:""; position:absolute; left: .7rem; right:.7rem; bottom: .15rem;
  height: 2px; border-radius: 2px; background: var(--orange);
}
.l8-caret{ width: 16px; height: 16px; transition: transform var(--t-fast); }
.l8-dd.is-open .l8-caret{ transform: rotate(180deg); }

.l8-header.is-scrolled .l8-navlink,
.l8-header[data-header="dark"] .l8-navlink{ color: rgba(255,255,255,.86); }
.l8-header.is-scrolled .l8-navlink:hover,
.l8-header[data-header="dark"] .l8-navlink:hover{ color:#fff; background: rgba(255,255,255,.1); }
.l8-header.is-scrolled .l8-navlink[aria-current="page"],
.l8-header[data-header="dark"] .l8-navlink[aria-current="page"]{ color:#fff; }

/* Dropdown panels */
.l8-dd-menu{
  position: absolute; top: calc(100% + 12px); left: 0;
  min-width: 270px;
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: var(--l8-card-radius);
  box-shadow: var(--shadow-lg);
  padding: .6rem;
  list-style: none;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity var(--t-base), transform var(--t-base), visibility var(--t-base);
  z-index: var(--z-dropdown);
}
.l8-dd.is-open .l8-dd-menu{ opacity:1; visibility:visible; transform: translateY(0); }
.l8-dd-menu > li{ list-style:none; }
.l8-dd-menu a{
  display:block; padding:.6rem .8rem; border-radius: var(--r-md);
  font-family: var(--font-head); font-weight: 600; font-size: .92rem;
  color: var(--navy); text-decoration:none;
  transition: background var(--t-fast), color var(--t-fast);
}
.l8-dd-menu a:hover{ background: var(--navy-050); color: var(--teal); }

/* Mega menu (Ürünler) */
.l8-dd--mega{ position: static; }
.l8-mega{
  left: 50%; transform: translate(-50%, 8px);
  width: min(760px, calc(100vw - 2rem));
  padding: 1.1rem;
}
.l8-dd--mega.is-open .l8-mega{ transform: translate(-50%, 0); }
.l8-mega-head{
  display:flex; flex-direction:column; gap:.15rem;
  padding: .25rem .75rem .85rem;
  border-bottom: 1px solid var(--hairline);
  margin-bottom: .65rem;
}
.l8-mega-eyebrow{
  font-family: var(--font-head); font-size: var(--fs-label); font-weight: 700;
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--teal);
}
.l8-mega-sub{ margin:0; font-size:.9rem; color: var(--gray); }
.l8-mega-grid{
  display:grid; grid-template-columns: repeat(2, 1fr); gap:.35rem;
}
.l8-mega-item{
  display:grid; grid-template-columns: auto 1fr; gap:.8rem; align-items:start;
  padding:.7rem .8rem; border-radius: var(--r-md);
  text-decoration:none; transition: background var(--t-fast);
}
.l8-mega-item:hover{ background: var(--navy-050); }
.l8-mega-ico{
  width: 42px; height: 42px; border-radius: 12px;
  display:grid; place-items:center; flex:none;
  background: var(--teal-050); color: var(--teal);
  border: 1px solid var(--teal-100);
}
.l8-mega-ico svg{ width: 22px; height: 22px; }
.l8-mega-item:hover .l8-mega-ico{ background: var(--teal); color:#fff; border-color: var(--teal); }
.l8-mega-title{
  display:block; font-family: var(--font-head); font-weight: 700;
  font-size: .98rem; color: var(--navy); margin-bottom: .12rem;
}
.l8-mega-desc{ display:block; font-size: .82rem; color: var(--gray); line-height: 1.45; }

/* CTA + lang in header */
.l8-nav-cta{ display:flex; align-items:center; gap:.65rem; }
.l8-nav-cta .l8-btn{ padding:.7rem 1.15rem; font-size:.92rem; }

.l8-lang{ position: relative; }
.l8-lang-btn{
  display:inline-flex; align-items:center; gap:.3rem;
  font-family: var(--font-head); font-weight: 700; font-size:.85rem;
  color: var(--navy); background: none; border:1.5px solid var(--navy-200);
  border-radius: var(--r-pill); padding:.5rem .7rem; cursor:pointer;
  transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast);
}
.l8-lang-btn:hover{ border-color: var(--teal); color: var(--teal); }
.l8-lang-btn .l8-caret{ width:14px; height:14px; }
.l8-header.is-scrolled .l8-lang-btn,
.l8-header[data-header="dark"] .l8-lang-btn{ color:#fff; border-color: rgba(255,255,255,.3); }
.l8-header.is-scrolled .l8-lang-btn:hover,
.l8-header[data-header="dark"] .l8-lang-btn:hover{ border-color:#fff; color:#fff; }
.l8-lang-menu{
  position:absolute; top: calc(100% + 8px); right: 0;
  min-width: 92px; list-style:none;
  background:#fff; border:1px solid var(--hairline);
  border-radius: var(--r-md); box-shadow: var(--shadow-lg); padding:.35rem;
  opacity:0; visibility:hidden; transform: translateY(8px);
  transition: opacity var(--t-base), transform var(--t-base), visibility var(--t-base);
  z-index: var(--z-dropdown);
}
.l8-lang.is-open .l8-lang-menu{ opacity:1; visibility:visible; transform: translateY(0); }
.l8-lang-menu a{
  display:block; padding:.4rem .65rem; border-radius: var(--r-sm);
  font-family: var(--font-head); font-weight:600; font-size:.85rem;
  color: var(--navy); text-decoration:none;
}
.l8-lang-menu a:hover{ background: var(--navy-050); color: var(--teal); }
.l8-lang-menu a.is-active{ color: var(--teal); background: var(--teal-050); }

/* Hamburger */
.l8-toggle{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width: 44px; height: 44px; padding: 0 10px;
  background:none; border:1.5px solid var(--navy-200); border-radius: 12px;
  cursor:pointer; margin-left:auto;
}
.l8-toggle span{ display:block; height: 2px; border-radius:2px; background: var(--navy); transition: transform var(--t-base), opacity var(--t-base); }
.l8-header.is-scrolled .l8-toggle,
.l8-header[data-header="dark"] .l8-toggle{ border-color: rgba(255,255,255,.3); }
.l8-header.is-scrolled .l8-toggle span,
.l8-header[data-header="dark"] .l8-toggle span{ background:#fff; }
.l8-toggle.is-active span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.l8-toggle.is-active span:nth-child(2){ opacity: 0; }
.l8-toggle.is-active span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* =========================================================================
   SECTIONS
   ========================================================================= */
.l8-section{ padding-block: var(--section-y); position: relative; }
.l8-section--tint{ background: var(--bg-soft); }
.l8-section--navy{ background: var(--l8-grad-navy); color: #fff; }
.l8-section--navy h2,
.l8-section--navy h3{ color:#fff; }

.l8-head{ max-width: 720px; margin-bottom: clamp(2rem, 1rem + 3vw, 3.25rem); }
.l8-head--center{ margin-inline:auto; text-align:center; }
.l8-head .l8-title{
  font-size: var(--fs-h2);
  margin: .55rem 0 .65rem;
}
.l8-head .l8-lead{
  font-size: var(--fs-lead); color: var(--gray); margin: 0;
}
.l8-section--navy .l8-head .l8-lead{ color: var(--navy-200); }
.l8-head--center .l8-eyebrow{ }

/* =========================================================================
   HERO  (Bölüm 0) — "membership rewards" sahnesi
   ========================================================================= */
.l8-hero{
  position: relative;
  background: var(--l8-grad-navy);
  color: #fff;
  padding-top: clamp(3rem, 1.5rem + 6vw, 6rem);
  padding-bottom: clamp(3.5rem, 2rem + 6vw, 6.5rem);
  overflow: hidden;
}
.l8-hero::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(620px 420px at 88% -8%, rgba(42,143,138,.34), transparent 60%),
    radial-gradient(560px 420px at -6% 108%, rgba(237,155,37,.22), transparent 60%);
  pointer-events:none;
}
.l8-hero-grid{
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: center;
}
.l8-hero-copy{ max-width: 36rem; }
.l8-hero h1{
  color:#fff;
  font-size: var(--fs-display);
  line-height: 1.06;
  margin: 1rem 0 1.1rem;
}
.l8-hero-lead{
  font-size: var(--fs-lead); color: var(--navy-200); margin: 0 0 1.6rem;
  max-width: 34rem;
}
.l8-hero .l8-btn-row{ margin-bottom: 2rem; }

.l8-trust{
  display:flex; flex-wrap:wrap; gap: 1.4rem; list-style:none;
  padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.14);
}
.l8-trust li{
  display:flex; align-items:center; gap:.55rem;
  font-size:.92rem; color: var(--navy-200); font-weight: 500;
}
.l8-trust .l8-tdot{
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--orange); flex:none;
  box-shadow: 0 0 0 4px rgba(237,155,37,.18);
}

/* ---- Membership card visual ---- */
.l8-hero-visual{ position: relative; display:grid; place-items:center; }

.l8-mcard{
  position: relative;
  width: min(420px, 100%);
  aspect-ratio: 1.586 / 1;       /* gerçek kart oranı */
  border-radius: var(--l8-card-radius);
  background: var(--l8-grad-card);
  box-shadow: 0 30px 70px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.14);
  padding: clamp(1.1rem, 0.6rem + 2vw, 1.6rem);
  color:#fff;
  overflow: hidden;
  z-index: 2;
}
.l8-mcard::after{
  content:""; position:absolute; right: -30%; top: -60%;
  width: 90%; height: 200%;
  background: linear-gradient(115deg, rgba(255,255,255,0) 35%, rgba(255,255,255,.16) 50%, rgba(255,255,255,0) 65%);
  transform: rotate(8deg);
  pointer-events:none;
}
.l8-mcard-top{
  display:flex; justify-content:space-between; align-items:flex-start;
}
.l8-mcard-brand{
  font-family: var(--font-head); font-weight: 800; font-size: 1.1rem;
  letter-spacing: .02em;
}
.l8-mcard-tier{
  font-family: var(--font-head); font-weight: 700; font-size: .68rem;
  letter-spacing: .14em; text-transform: uppercase;
  padding: .3rem .6rem; border-radius: var(--r-pill);
  background: var(--l8-grad-orange); color: var(--l8-card-ink);
}
.l8-mcard-chip{
  margin-top: clamp(.8rem, 2vw, 1.3rem);
  width: 46px; height: 34px; border-radius: 7px;
  background: linear-gradient(135deg, #F4D58D, #D9A93C);
  position: relative; overflow:hidden;
}
.l8-mcard-chip::before,
.l8-mcard-chip::after{
  content:""; position:absolute; background: rgba(0,0,0,.22);
}
.l8-mcard-chip::before{ left: 50%; top:0; bottom:0; width:1.5px; }
.l8-mcard-chip::after{ top: 50%; left:0; right:0; height:1.5px; }
.l8-mcard-points{
  margin-top: clamp(.7rem, 2vw, 1.1rem);
}
.l8-mcard-points .num{
  font-family: var(--font-head); font-weight: 800;
  font-size: clamp(1.6rem, 1rem + 2.4vw, 2.2rem); line-height: 1;
}
.l8-mcard-points .lbl{
  display:block; font-size:.72rem; color: var(--navy-200);
  letter-spacing: .12em; text-transform: uppercase; margin-top:.3rem;
}
.l8-mcard-bottom{
  position:absolute; left: clamp(1.1rem, 0.6rem + 2vw, 1.6rem);
  right: clamp(1.1rem, 0.6rem + 2vw, 1.6rem); bottom: clamp(1.1rem, 0.6rem + 2vw, 1.6rem);
  display:flex; justify-content:space-between; align-items:flex-end;
}
.l8-mcard-name{
  font-family: var(--font-head); font-weight: 600; font-size:.84rem;
  letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.92);
}
.l8-mcard-logo{ opacity:.92; }
.l8-mcard-logo svg{ width: 38px; height: 38px; }

/* floating reward chips around card */
.l8-float{
  position:absolute; z-index: 3;
  display:flex; align-items:center; gap:.6rem;
  background:#fff; color: var(--navy);
  padding:.6rem .8rem; border-radius: 14px;
  box-shadow: var(--shadow-lg);
  font-family: var(--font-head);
}
.l8-float .ico{
  width: 34px; height: 34px; border-radius: 10px; flex:none;
  display:grid; place-items:center;
}
.l8-float .ico svg{ width: 18px; height: 18px; }
.l8-float .k{ display:block; font-weight: 800; font-size: 1rem; line-height: 1; }
.l8-float .l{ display:block; font-size: .72rem; color: var(--gray); font-weight: 500; }
.l8-float--a{ top: 6%; right: -2%; }
.l8-float--a .ico{ background: var(--teal-050); color: var(--teal); }
.l8-float--b{ bottom: 4%; left: -4%; }
.l8-float--b .ico{ background: var(--orange-050); color: var(--orange-700); }

/* =========================================================================
   STAT STRIP  (büyük istatistik şeridi)
   ========================================================================= */
.l8-stats{
  display:grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  border-radius: var(--l8-block-radius);
  overflow: hidden;
}
.l8-stat{
  background:#fff; padding: clamp(1.3rem, 1rem + 1vw, 2rem);
  text-align:center;
}
.l8-stat .n{
  font-family: var(--font-head); font-weight: 800;
  font-size: clamp(1.8rem, 1.2rem + 2vw, 2.6rem); line-height: 1;
  color: var(--navy);
}
.l8-stat .n em{ font-style: normal; color: var(--orange); }
.l8-stat .c{ margin: .5rem 0 0; font-size:.92rem; color: var(--gray); }
.l8-section--navy .l8-stats{ background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.14); }
.l8-section--navy .l8-stat{ background: transparent; }
.l8-section--navy .l8-stat .n{ color:#fff; }
.l8-section--navy .l8-stat .c{ color: var(--navy-200); }

/* =========================================================================
   POSITION / SPLIT TEXT BLOCK (Bölüm 1)
   ========================================================================= */
.l8-pos{
  display:grid; grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 1rem + 4vw, 4rem); align-items:center;
}
.l8-pos-figure{
  position: relative;
  border-radius: var(--l8-block-radius);
  background: var(--l8-grad-teal);
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  color:#fff; overflow:hidden;
  box-shadow: var(--shadow-lg);
}
.l8-pos-figure::before{
  content:""; position:absolute; inset:0;
  background: radial-gradient(420px 300px at 110% -10%, rgba(255,255,255,.18), transparent 60%);
}
.l8-pos-figure h3{ color:#fff; position:relative; }
.l8-rings{
  position:relative; display:flex; gap: clamp(1rem, 3vw, 2rem); flex-wrap:wrap;
  margin-top: 1.25rem;
}
.l8-ring{ text-align:center; }
.l8-ring-dial{
  --val: 75;
  width: 96px; height: 96px; border-radius: 50%;
  display:grid; place-items:center;
  background:
    radial-gradient(closest-side, rgba(255,255,255,.0) 70%, transparent 71%),
    conic-gradient(#fff calc(var(--val) * 1%), rgba(255,255,255,.22) 0);
  margin-inline:auto;
}
.l8-ring-dial::before{
  content:""; position:absolute; width:72px; height:72px; border-radius:50%;
  background: var(--teal-700);
}
.l8-ring-dial span{
  position: relative; font-family: var(--font-head); font-weight: 800;
  font-size: 1.25rem; color:#fff;
}
.l8-ring p{ margin: .6rem 0 0; font-size:.82rem; color: rgba(255,255,255,.86); }

/* =========================================================================
   SOLUTION CARDS (Bölüm 2) — renkli üst-şeritli kartlar
   ========================================================================= */
.l8-grid{ display:grid; gap: clamp(1rem, .6rem + 1.2vw, 1.6rem); }
.l8-grid--2{ grid-template-columns: repeat(2, 1fr); }
.l8-grid--3{ grid-template-columns: repeat(3, 1fr); }
.l8-grid--4{ grid-template-columns: repeat(4, 1fr); }

.l8-scard{
  position: relative;
  display:flex; flex-direction:column;
  background:#fff;
  border: 1px solid var(--hairline);
  border-radius: var(--l8-card-radius);
  padding: 1.6rem 1.5rem 1.4rem;
  overflow: hidden;
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}
.l8-scard::before{
  content:""; position:absolute; left:0; right:0; top:0; height: 5px;
  background: var(--accent, var(--teal));
}
.l8-scard:hover{ transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: transparent; }
.l8-scard--teal{ --accent: var(--teal); }
.l8-scard--navy{ --accent: var(--navy-500); }
.l8-scard--orange{ --accent: var(--orange); }
.l8-scard--gold{ --accent: var(--l8-gold-1); }

.l8-scard-icon{
  width: 54px; height: 54px; border-radius: 16px;
  display:grid; place-items:center; margin-bottom: 1.1rem;
  background: color-mix(in srgb, var(--accent) 12%, #fff);
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, #fff);
}
.l8-scard-icon svg{ width: 28px; height: 28px; }
.l8-scard h3{ font-size: var(--fs-h3); margin: 0 0 .5rem; }
.l8-scard p{ color: var(--gray); margin: 0 0 1.2rem; flex: 1; }
.l8-scard .l8-link{ margin-top: auto; }

/* tier ribbon variant (rozet) */
.l8-scard-badge{
  position:absolute; top: 1.1rem; right: 1.1rem;
  font-family: var(--font-head); font-weight: 700; font-size:.66rem;
  letter-spacing: .12em; text-transform: uppercase;
  padding: .26rem .55rem; border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--accent) 14%, #fff);
  color: var(--accent);
}

/* =========================================================================
   AI BAND (Bölüm 3) — koyu blok + yetkinlik kartları
   ========================================================================= */
.l8-acard{
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--l8-card-radius);
  padding: 1.5rem 1.4rem;
  transition: transform var(--t-base), background var(--t-base), border-color var(--t-base);
}
.l8-acard:hover{ transform: translateY(-4px); background: rgba(255,255,255,.08); border-color: rgba(42,143,138,.5); }
.l8-acard-icon{
  width: 50px; height: 50px; border-radius: 14px;
  display:grid; place-items:center; margin-bottom: 1rem;
  background: rgba(42,143,138,.18); color: var(--teal-200);
  border: 1px solid rgba(42,143,138,.32);
}
.l8-acard-icon svg{ width: 26px; height: 26px; }
.l8-acard h3{ color:#fff; font-size: 1.1rem; margin: 0 0 .4rem; }
.l8-acard p{ color: var(--navy-200); margin: 0; font-size:.94rem; }

/* =========================================================================
   PRODUCT ROWS (Bölüm 4) — premium feature-showcase satırı
   ========================================================================= */
.l8-prod{ display:flex; flex-direction:column; gap: 1rem; }
.l8-prow{
  display:grid; grid-template-columns: auto 1fr auto; gap: 1.25rem; align-items:center;
  background:#fff; border:1px solid var(--hairline);
  border-radius: var(--l8-card-radius);
  padding: 1.3rem 1.5rem;
  text-decoration:none;
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}
.l8-prow:hover{ transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--teal-200); }
.l8-prow-badge{
  width: 58px; height: 58px; border-radius: 16px; flex:none;
  display:grid; place-items:center;
  background: var(--l8-grad-navy); color:#fff;
}
.l8-prow-badge svg{ width: 28px; height: 28px; }
.l8-prow-body h3{ margin: 0 0 .25rem; font-size: 1.2rem; }
.l8-prow-body p{ margin: 0; color: var(--gray); font-size: .95rem; }
.l8-prow-go{
  display:inline-flex; align-items:center; gap:.4rem;
  font-family: var(--font-head); font-weight: 700; font-size:.9rem;
  color: var(--teal); white-space: nowrap;
}
.l8-prow-go svg{ width: 1.05em; height:1.05em; transition: transform var(--t-fast); }
.l8-prow:hover .l8-prow-go svg{ transform: translateX(4px); }

/* =========================================================================
   DUAL USE (Bölüm 5) — iki büyük renkli blok
   ========================================================================= */
.l8-dual{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, .6rem + 1.5vw, 1.6rem); }
.l8-dual-panel{
  position: relative; overflow:hidden;
  border-radius: var(--l8-block-radius);
  padding: clamp(1.6rem, 1rem + 2.5vw, 2.6rem);
  color:#fff;
  min-height: 250px;
  display:flex; flex-direction:column; justify-content:flex-end;
}
.l8-dual-panel--cust{ background: var(--l8-grad-navy); }
.l8-dual-panel--emp{ background: var(--l8-grad-teal); }
.l8-dual-panel::before{
  content:""; position:absolute; inset:0;
  background: radial-gradient(400px 300px at 100% 0%, rgba(255,255,255,.16), transparent 60%);
}
.l8-dual-tag{
  position: relative;
  align-self:flex-start;
  font-family: var(--font-head); font-weight: 700; font-size:.72rem;
  letter-spacing:.12em; text-transform: uppercase;
  padding:.36rem .7rem; border-radius: var(--r-pill);
  background: rgba(255,255,255,.16); color:#fff;
  margin-bottom: .9rem;
}
.l8-dual-panel h3{ position:relative; color:#fff; font-size: var(--fs-h3); margin:0 0 .55rem; }
.l8-dual-panel p{ position:relative; color: rgba(255,255,255,.86); margin:0; }
.l8-dual-deco{
  position:absolute; top: -40px; right: -40px; width: 200px; height: 200px;
  border-radius: 50%; border: 2px solid rgba(255,255,255,.16);
}
.l8-dual-deco::after{
  content:""; position:absolute; inset: 26px; border-radius:50%;
  border: 2px solid rgba(255,255,255,.12);
}

/* =========================================================================
   REFERENCES (Bölüm 6) — sektör çipleri + logo duvarı
   ========================================================================= */
.l8-chips{
  display:flex; flex-wrap:wrap; gap:.6rem; list-style:none;
  margin: 0 0 clamp(1.8rem, 1rem + 2vw, 2.6rem);
}
.l8-chip{
  font-family: var(--font-head); font-weight: 600; font-size:.9rem;
  color: var(--navy);
  background:#fff; border:1px solid var(--hairline);
  border-radius: var(--r-pill); padding:.5rem .95rem;
}
.l8-section--navy .l8-chip{ color:#fff; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.16); }

.l8-logo-wall{
  display:grid; gap: clamp(.8rem, 2vw, 1.4rem);
  grid-template-columns: repeat(2, 1fr);
  list-style:none;
}
.l8-logo-chip{
  height: 64px; display:grid; place-items:center;
  background:#fff; border:1px solid var(--hairline); border-radius: var(--r-md);
  font-family: var(--font-head); font-weight: 700; color: var(--gray-400);
  filter: grayscale(1); opacity:.7;
  transition: filter var(--t-base), opacity var(--t-base), color var(--t-base);
}
.l8-logo-chip:hover{ filter: grayscale(0); opacity:1; color: var(--navy); }
.l8-section--navy .l8-logo-chip{ background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); color: rgba(255,255,255,.6); }
.l8-section--navy .l8-logo-chip:hover{ color:#fff; }

/* =========================================================================
   CLOSING CTA (Bölüm 7)
   ========================================================================= */
.l8-cta{
  position: relative; overflow:hidden;
  background: var(--l8-grad-navy);
  border-radius: var(--l8-block-radius);
  padding: clamp(2.5rem, 1.5rem + 4vw, 4.5rem) clamp(1.5rem, 1rem + 3vw, 4rem);
  text-align:center; color:#fff;
  box-shadow: var(--shadow-lg);
}
.l8-cta::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(500px 360px at 12% -20%, rgba(42,143,138,.4), transparent 60%),
    radial-gradient(500px 360px at 90% 120%, rgba(237,155,37,.32), transparent 60%);
}
.l8-cta-inner{ position: relative; max-width: 720px; margin-inline:auto; }
.l8-cta h2{ color:#fff; font-size: var(--fs-h1); margin: .6rem 0 .7rem; }
.l8-cta p{ color: var(--navy-200); font-size: var(--fs-lead); margin: 0 0 1.8rem; }
.l8-cta .l8-btn-row{ justify-content:center; }

/* =========================================================================
   PROSE / GENERIC CONTENT (iç sayfa ajanları için)
   ========================================================================= */
.l8-prose{ max-width: 760px; }
.l8-prose h2{ font-size: var(--fs-h2); margin: 2rem 0 .8rem; }
.l8-prose h3{ font-size: var(--fs-h3); margin: 1.6rem 0 .6rem; }
.l8-prose p{ color: var(--ink); margin: 0 0 1rem; }
.l8-prose ul{ margin: 0 0 1.25rem; padding-left: 1.25rem; }
.l8-prose li{ margin-bottom: .5rem; color: var(--ink); }

/* feature list with check */
.l8-checks{ list-style:none; display:grid; gap:.75rem; }
.l8-checks li{ display:flex; gap:.65rem; align-items:flex-start; color: var(--ink); }
.l8-checks .ck{
  width: 24px; height: 24px; border-radius: 50%; flex:none;
  display:grid; place-items:center; margin-top: 1px;
  background: var(--teal-050); color: var(--teal);
}
.l8-checks .ck svg{ width: 14px; height: 14px; }

/* =========================================================================
   FORMS  (.field / .field-error / .form-status)
   ========================================================================= */
.l8-form{ display:grid; gap: 1.1rem; }
.l8-form-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.field{ display:flex; flex-direction:column; gap:.4rem; }
.field label{
  font-family: var(--font-head); font-weight: 600; font-size:.9rem; color: var(--navy);
}
.field .req{ color: var(--orange); }
.field input,
.field select,
.field textarea{
  font-family: var(--font-body); font-size: 1rem; color: var(--ink);
  background:#fff; border:1.5px solid var(--hairline); border-radius: var(--r-md);
  padding: .8rem .95rem; width: 100%;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.field textarea{ min-height: 130px; resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus{
  outline: none; border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(42,143,138,.18);
}
.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"]{ border-color: #D14545; }
.field-error{ color: #D14545; font-size:.82rem; font-weight: 500; }

.field--check{ flex-direction: row; align-items:flex-start; gap:.6rem; }
.field--check input{ width: 18px; height: 18px; margin-top: 3px; flex:none; }
.field--check label{ font-weight: 500; color: var(--gray); font-size:.92rem; }
.field--check a{ color: var(--teal); font-weight: 600; }

.form-status{
  padding: .9rem 1.1rem; border-radius: var(--r-md);
  font-weight: 600; font-family: var(--font-head);
}
.form-status.is-success{
  background: var(--teal-050); color: var(--teal-700);
  border: 1px solid var(--teal-100);
}

/* =========================================================================
   FOOTER
   ========================================================================= */
.l8-footer{
  background: var(--l8-grad-navy);
  color: var(--navy-200);
  padding-top: clamp(3rem, 2rem + 3vw, 4.5rem);
}
.l8-footer-top{
  display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
  gap: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  padding-bottom: clamp(2rem, 1rem + 2vw, 3rem);
}
.l8-footer-brand img{ height: 40px; width:auto; margin-bottom: 1rem; }
.l8-footer-brand p{ color: var(--navy-200); font-size:.94rem; max-width: 30ch; }
.l8-footer-brand strong{ color:#fff; }
.l8-footer-col h4{
  color:#fff; font-size:.82rem; letter-spacing: var(--tracking-label);
  text-transform: uppercase; margin: 0 0 1rem;
}
.l8-footer-col ul{ list-style:none; display:grid; gap:.6rem; }
.l8-footer-col a{ color: var(--navy-200); font-size:.92rem; text-decoration:none; transition: color var(--t-fast); }
.l8-footer-col a:hover{ color:#fff; }
.l8-footer-muted{ color: var(--navy-200); font-size:.85rem; margin: 0 0 .7rem; }

.l8-footer-bottom{
  border-top: 1px solid rgba(255,255,255,.12);
  padding-block: 1.5rem;
}
.l8-footer-bottom-inner{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap: 1rem;
}
.l8-footer-bottom p{ margin:0; font-size:.86rem; color: var(--navy-200); }
.l8-footer-legal{ display:flex; flex-wrap:wrap; gap: 1.2rem; list-style:none; }
.l8-footer-legal a{ color: var(--navy-200); font-size:.86rem; text-decoration:none; }
.l8-footer-legal a:hover{ color:#fff; }
.l8-social{ display:flex; gap:.6rem; }
.l8-social a{
  width: 38px; height: 38px; border-radius: 50%;
  display:grid; place-items:center;
  background: rgba(255,255,255,.08); color:#fff;
  transition: background var(--t-fast);
}
.l8-social a:hover{ background: var(--teal); }
.l8-social svg{ width: 18px; height: 18px; }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 1100px){
  .l8-stats{ grid-template-columns: repeat(2, 1fr); }
  .l8-grid--4{ grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 920px){
  .l8-toggle{ display:flex; }
  .l8-nav{
    position: fixed; inset: var(--l8-header-h) 0 0 auto;
    width: min(360px, 88vw);
    flex-direction: column; align-items: stretch; gap: 0;
    background: #fff;
    border-left: 1px solid var(--hairline);
    box-shadow: var(--shadow-lg);
    padding: 1.25rem;
    margin-left: 0;
    overflow-y: auto;
    transform: translateX(110%);
    transition: transform var(--t-base);
    z-index: var(--z-overlay);
  }
  .l8-nav.is-open{ transform: translateX(0); }
  .l8-nav-list{ flex-direction: column; align-items: stretch; gap:.15rem; width:100%; }
  .l8-nav-list > li{ width:100%; }
  .l8-navlink{
    width:100%; justify-content: space-between; padding:.85rem .9rem;
    color: var(--navy); font-size: 1.02rem;
  }
  .l8-navlink[aria-current="page"]::after{ display:none; }
  .l8-navlink[aria-current="page"]{ background: var(--navy-050); }

  /* dropdowns become accordions (static) on mobile */
  .l8-dd-menu,
  .l8-mega{
    position: static; transform: none; width: 100%;
    min-width: 0; box-shadow:none; border: none;
    background: var(--bg-soft);
    border-radius: var(--r-md);
    margin: .15rem 0 .35rem;
    padding: .4rem;
    opacity: 0; visibility: hidden;
    max-height: 0; overflow: hidden;
    transition: opacity var(--t-base), max-height var(--t-base), visibility var(--t-base);
  }
  .l8-dd.is-open .l8-dd-menu,
  .l8-dd--mega.is-open .l8-mega{
    opacity: 1; visibility: visible; max-height: 720px;
    transform: none;
  }
  .l8-mega-grid{ grid-template-columns: 1fr; }
  .l8-mega-head{ display:none; }

  .l8-nav-cta{
    flex-direction: column; align-items: stretch; gap:.8rem;
    margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--hairline);
  }
  .l8-nav-cta .l8-btn{ width:100%; }
  .l8-lang{ align-self: stretch; }
  .l8-lang-btn{ width:100%; justify-content:center; }
  .l8-lang-menu{
    position: static; opacity:1; visibility:visible; transform:none;
    box-shadow:none; border:none; background: var(--bg-soft);
    display:flex; gap:.3rem; margin-top:.4rem; padding:.3rem;
  }
  .l8-lang-menu a{ flex:1; text-align:center; }

  .l8-hero-grid{ grid-template-columns: 1fr; }
  .l8-hero-visual{ order: -1; margin-bottom: .5rem; }
  .l8-pos{ grid-template-columns: 1fr; }
  .l8-dual{ grid-template-columns: 1fr; }
  .l8-grid--3{ grid-template-columns: repeat(2, 1fr); }
  .l8-form-grid{ grid-template-columns: 1fr; }
  .l8-footer-top{ grid-template-columns: 1fr 1fr; }
  .l8-footer-brand{ grid-column: 1 / -1; }
}

@media (max-width: 600px){
  .l8-grid--2,
  .l8-grid--3,
  .l8-grid--4{ grid-template-columns: 1fr; }
  .l8-stats{ grid-template-columns: 1fr 1fr; }
  .l8-prow{ grid-template-columns: auto 1fr; }
  .l8-prow-go{ grid-column: 2; justify-self:start; margin-top:.4rem; }
  .l8-logo-wall{ grid-template-columns: repeat(2, 1fr); }
  .l8-footer-top{ grid-template-columns: 1fr; }
  .l8-footer-bottom-inner{ flex-direction: column; align-items:flex-start; }
  .l8-float{ display:none; }
}

@media (min-width: 1024px){
  .l8-logo-wall{ grid-template-columns: repeat(6, 1fr); }
  .l8-head .l8-title{ font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.3rem); }
}

/* =========================================================================
   MOTION
   ========================================================================= */
.l8-mcard{ animation: l8-float-card 6s ease-in-out infinite; }
.l8-float--a{ animation: l8-bob 5s ease-in-out infinite; }
.l8-float--b{ animation: l8-bob 6s ease-in-out infinite .6s; }
@keyframes l8-float-card{
  0%,100%{ transform: translateY(0) rotate(-1.5deg); }
  50%{ transform: translateY(-10px) rotate(-1.5deg); }
}
@keyframes l8-bob{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-8px); }
}

@media (prefers-reduced-motion: reduce){
  .l8-mcard,
  .l8-float--a,
  .l8-float--b{ animation: none; }
  .l8-btn:hover,
  .l8-scard:hover,
  .l8-prow:hover,
  .l8-acard:hover{ transform: none; }
}