/* ==========================================================================
   Loyexo — alt6  "Geometrik-Katmanlı" (Geometric-Layered)
   GRUP B — world-class loyaltech 2026
   ----------------------------------------------------------------------------
   Tasarım dili: logonun iki-ark + nokta motifinden türeyen ince geometrik
   desenler, katmanlı/üst üste binen yüzeyler, boyutlu (dimensional) kartlar,
   ÇOK ölçülü gradient-mesh. Açık tema, katmanlı derinlik. Disiplinli, premium.
   brand-tokens.css değişkenlerini KULLANIR, ÜZERİNE kurar (token override yok).
   İlham: Stripe (ölçülü gradient), Yotpo, Voucherify, Paytronix.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   0) Alt6'ya özgü yerel tasarım değişkenleri (token TÜRETMELERİ)
   --------------------------------------------------------------------------- */
:root{
  /* ----------------------------------------------------------------------
     TOKEN UYUMLULUK KATMANI (alias) — brand-tokens.css ölçek adlarını
     (--sp-*, --r-*, --container) bu dosyanın/HTML'in beklediği adlara
     (--space-*, --radius-*, --maxw) bağlar. Marka DEĞERLERİ değişmez;
     yalnızca isim köprüsü. Bu olmadan border-radius/gap UNDEFINED kalıp
     köşeler 0px, grid gap 'normal' (kartlar birbirine yapışık) oluyordu.
     ---------------------------------------------------------------------- */
  --space-1: var(--sp-1);  --space-2: var(--sp-2);  --space-3: var(--sp-3);
  --space-4: var(--sp-4);  --space-5: var(--sp-5);  --space-6: var(--sp-6);
  --space-7: var(--sp-7);  --space-8: var(--sp-8);  --space-9: var(--sp-9);
  --space-10: var(--sp-10);
  --radius-sm: var(--r-sm);  --radius-md: var(--r-md);  --radius-lg: var(--r-lg);
  --radius-xl: var(--r-xl);  --radius-pill: var(--r-pill);
  --maxw: var(--container);

  /* Ölçülü gradient-mesh — göz yormayan, çok düşük yoğunluk (navy/teal/orange) */
  --a6-mesh-1: radial-gradient(48rem 38rem at 12% -8%, rgba(28,49,95,.09), transparent 60%);
  --a6-mesh-2: radial-gradient(42rem 34rem at 96% 4%, rgba(42,143,138,.10), transparent 58%);
  --a6-mesh-3: radial-gradient(40rem 40rem at 78% 112%, rgba(237,155,37,.07), transparent 60%);

  /* Koyu (dark) katman zemini — hero alt / CTA / footer */
  --a6-dark:           var(--navy-900);
  --a6-dark-2:         #12244A;
  --a6-on-dark:        #EAF0FB;
  --a6-on-dark-muted:  rgba(234,240,251,.68);
  --a6-on-dark-line:   rgba(255,255,255,.13);

  /* Geometrik desen (ince ızgara + nokta motifi) */
  --a6-grid: rgba(28,49,95,.05);
  --a6-dot:  rgba(28,49,95,.14);

  /* Yükseltilmiş boyutlu kart gölgeleri */
  --a6-elev-1: 0 1px 0 rgba(255,255,255,.75) inset, 0 1px 2px rgba(15,27,45,.05), 0 10px 30px -16px rgba(15,27,45,.16);
  --a6-elev-2: 0 1px 0 rgba(255,255,255,.85) inset, 0 2px 4px rgba(15,27,45,.06), 0 26px 60px -28px rgba(28,49,95,.32);

  /* Hareket */
  --a6-ease: cubic-bezier(.22,.61,.36,1);
  --a6-fast: 140ms;
  --a6-med:  260ms;
  --a6-slow: 520ms;

  --a6-header-h: var(--header-h, 76px);
  --a6-maxw: var(--maxw, 1200px);
}

/* ---------------------------------------------------------------------------
   1) Reset / temel
   --------------------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--a6-header-h) + 16px); }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--white);
  font-size:var(--fs-body);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body.nav-open{ overflow:hidden; }

img,svg{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; cursor:pointer; }
ul{ margin:0; padding:0; list-style:none; }

h1,h2,h3,h4{
  font-family:var(--font-head);
  color:var(--ink);
  line-height:1.1;
  letter-spacing:-.02em;
  margin:0;
  font-weight:700;
  text-wrap:balance;
}
p{ margin:0; }

:focus-visible{
  outline:none;
  box-shadow:var(--focus-ring);
  border-radius:8px;
}

::selection{ background:rgba(237,155,37,.22); color:var(--ink); }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.skip-link{
  position:absolute; left:16px; top:-60px; z-index:200;
  background:var(--navy); color:#fff; padding:10px 16px;
  border-radius:var(--radius-md); font-weight:600;
  transition:top var(--a6-fast) var(--a6-ease);
}
.skip-link:focus{ top:14px; }

/* ---------------------------------------------------------------------------
   2) Layout yardımcıları — container, grid, ritim
   --------------------------------------------------------------------------- */
.container{
  width:100%;
  max-width:var(--a6-maxw);
  margin-inline:auto;
  padding-inline:20px;
}
@media (min-width:768px){ .container{ padding-inline:32px; } }
@media (min-width:1280px){ .container{ padding-inline:24px; } }

.container-wide{ max-width:1340px; }
.container-narrow{ max-width:780px; }

.section{ position:relative; padding-block:clamp(56px,7vw,112px); }
.section--tight{ padding-block:clamp(40px,5vw,72px); }

/* Bölüm zemin varyantları (katmanlama) */
.section--surface{ background:var(--tint); }
.section--mesh{
  background:
    var(--a6-mesh-2),
    var(--a6-mesh-1),
    var(--white);
}
.section--dark{
  background:
    radial-gradient(50rem 36rem at 84% -10%, rgba(42,143,138,.26), transparent 60%),
    radial-gradient(44rem 34rem at 4% 110%, rgba(237,155,37,.14), transparent 60%),
    linear-gradient(180deg,var(--a6-dark),var(--a6-dark-2));
  color:var(--a6-on-dark);
}
.section--dark h1,.section--dark h2,.section--dark h3,.section--dark h4{ color:var(--a6-on-dark); }

/* İnce üst ayraç çizgi */
.section--ruled{ border-top:1px solid var(--hairline); }

/* Grid yardımcıları */
.grid{ display:grid; gap:var(--space-5); }
.grid-2{ grid-template-columns:1fr; }
.grid-3{ grid-template-columns:1fr; }
.grid-4{ grid-template-columns:1fr; }
.grid-5{ grid-template-columns:1fr; }
@media (min-width:600px){
  .grid-2{ grid-template-columns:repeat(2,1fr); }
  .grid-3{ grid-template-columns:repeat(2,1fr); }
  .grid-4{ grid-template-columns:repeat(2,1fr); }
  .grid-5{ grid-template-columns:repeat(2,1fr); }
}
@media (min-width:1024px){
  .grid-3{ grid-template-columns:repeat(3,1fr); }
  .grid-4{ grid-template-columns:repeat(4,1fr); }
  .grid-5{ grid-template-columns:repeat(5,1fr); }
}

/* ---------------------------------------------------------------------------
   3) Bölüm başlıkları, eyebrow, metin altılığı
   --------------------------------------------------------------------------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-body);
  font-size:var(--fs-label); font-weight:600;
  letter-spacing:.10em; text-transform:uppercase;
  color:var(--navy-2);
  padding:6px 13px 6px 11px;
  border:1px solid var(--hairline);
  border-radius:var(--radius-pill);
  background:rgba(255,255,255,.72);
  backdrop-filter:saturate(140%) blur(6px);
  box-shadow:var(--shadow-sm);
}
.eyebrow::before{
  content:""; width:12px; height:12px; flex:none; border-radius:var(--radius-pill);
  /* iki-ark + nokta motifinin minik formu */
  background:
    radial-gradient(circle at 50% 50%, var(--orange) 0 2px, transparent 2.4px),
    conic-gradient(from 200deg, var(--teal) 0 120deg, transparent 0 360deg);
  mask:radial-gradient(circle at 50% 50%, transparent 0 1.6px, #000 2px);
  -webkit-mask:radial-gradient(circle at 50% 50%, transparent 0 1.6px, #000 2px);
}
.section--dark .eyebrow{
  color:#BFE5E2;
  border-color:var(--a6-on-dark-line);
  background:rgba(255,255,255,.06);
}

.section-head{ max-width:64ch; margin-bottom:clamp(32px,4vw,56px); }
.section-head--center{ margin-inline:auto; text-align:center; }
.section-title{ font-size:var(--fs-h2); margin-top:18px; }
.section-lede{
  margin-top:16px;
  font-size:var(--fs-lead);
  color:var(--gray);
  max-width:62ch;
}
.section-head--center .section-lede{ margin-inline:auto; }
.section--dark .section-lede{ color:var(--a6-on-dark-muted); }

.section-cta{ margin-top:clamp(28px,3vw,44px); }

/* metin-link (bölüm sonu "→") */
.text-link{
  display:inline-flex; align-items:center; gap:8px;
  font-weight:600; color:var(--navy-2);
  transition:gap var(--a6-med) var(--a6-ease), color var(--a6-fast) var(--a6-ease);
}
.text-link svg{ width:1.05em; height:1.05em; flex:none; }
.text-link:hover{ color:var(--navy); gap:12px; }
.section--dark .text-link{ color:#BFE5E2; }
.section--dark .text-link:hover{ color:#fff; }

/* ---------------------------------------------------------------------------
   4) Butonlar
   --------------------------------------------------------------------------- */
.btn{
  --_pad-y:13px; --_pad-x:22px;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--font-body); font-weight:600; font-size:.97rem;
  line-height:1; letter-spacing:.005em;
  padding:var(--_pad-y) var(--_pad-x);
  border-radius:var(--radius-pill);
  border:1px solid transparent;
  cursor:pointer; white-space:nowrap;
  transition:transform var(--a6-fast) var(--a6-ease),
             box-shadow var(--a6-med) var(--a6-ease),
             background var(--a6-fast) var(--a6-ease),
             border-color var(--a6-fast) var(--a6-ease),
             color var(--a6-fast) var(--a6-ease);
}
.btn:active{ transform:translateY(1px); }
/* Buton içi ikon/ok: viewBox dışında intrinsic boyutu olmayan SVG'ler
   svg{max-width:100%} kuralıyla butonu kaplayabiliyor — sabit boyutla bağla. */
.btn svg{ width:1.15em; height:1.15em; flex:none; display:block; }
.btn .btn-arrow{ width:1.15em; height:1.15em; flex:none; transition:transform var(--a6-med) var(--a6-ease); }
.btn:hover .btn-arrow{ transform:translateX(3px); }

.btn-lg{ --_pad-y:15px; --_pad-x:28px; font-size:1.02rem; }
.btn-sm{ --_pad-y:9px; --_pad-x:16px; font-size:.9rem; }
.btn-block{ width:100%; }

.btn-primary{
  color:#3a2400;
  background:linear-gradient(135deg,#F2AE43 0%,var(--orange) 55%,#D9881A 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.3) inset, 0 10px 24px -10px rgba(237,155,37,.6);
}
.btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 1px 0 rgba(255,255,255,.34) inset, 0 18px 34px -12px rgba(237,155,37,.66);
}

.btn-secondary{
  color:var(--navy);
  background:rgba(255,255,255,.9);
  border-color:var(--hairline);
  box-shadow:var(--shadow-sm);
}
.btn-secondary:hover{
  transform:translateY(-2px);
  border-color:rgba(28,49,95,.5);
  box-shadow:var(--shadow-md);
}

/* Koyu zeminde ikincil */
.section--dark .btn-secondary,
.btn-secondary--on-dark{
  color:var(--a6-on-dark);
  background:rgba(255,255,255,.08);
  border-color:var(--a6-on-dark-line);
  box-shadow:none;
}
.section--dark .btn-secondary:hover,
.btn-secondary--on-dark:hover{
  background:rgba(255,255,255,.14);
  border-color:rgba(255,255,255,.34);
}

/* ---------------------------------------------------------------------------
   5) HEADER — sticky, akıllı logo, dropdown, dil, hamburger
   loyexo-ui.js: [data-header] .is-scrolled/.is-dark, img[data-logo],
   [data-nav-toggle] -> #primnav [data-nav], [data-dropdown]/[data-lang-switch]
   --------------------------------------------------------------------------- */
[data-header]{
  position:sticky; top:0; z-index:100;
  background:transparent;
  transition:background var(--a6-med) var(--a6-ease),
             box-shadow var(--a6-med) var(--a6-ease),
             border-color var(--a6-med) var(--a6-ease),
             backdrop-filter var(--a6-med) var(--a6-ease);
  border-bottom:1px solid transparent;
}
.header-inner{
  display:flex; align-items:center; gap:18px;
  min-height:var(--a6-header-h);
}

/* scrolled: cam yüzey + ince çizgi */
[data-header].is-scrolled{
  background:rgba(255,255,255,.84);
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom-color:var(--hairline);
  box-shadow:0 6px 22px -18px rgba(15,27,45,.4);
}
[data-header].is-dark:not(.is-scrolled){ color:var(--a6-on-dark); }

/* Logo */
.brand-link{ display:inline-flex; align-items:center; flex:none; margin-right:auto; }
.brand-logo{ height:38px; width:auto; }
@media (max-width:600px){ .brand-logo{ height:32px; } }

/* DESKTOP nav */
.nav-desktop{ display:none; }
@media (min-width:921px){
  .nav-desktop{ display:flex; align-items:center; gap:2px; }
}
.nav-list{ display:flex; align-items:center; gap:2px; }
.nav-item{ position:relative; }

.nav-link{
  display:inline-flex; align-items:center; gap:6px;
  padding:9px 14px; border-radius:var(--radius-pill);
  font-size:.95rem; font-weight:500; color:var(--ink);
  background:none; border:0;
  transition:color var(--a6-fast) var(--a6-ease),
             background var(--a6-fast) var(--a6-ease);
}
.nav-link:hover{ background:rgba(28,49,95,.06); color:var(--navy); }
.nav-link[aria-current="page"]{ color:var(--navy); font-weight:600; }
.nav-link[aria-current="page"]::after{
  content:""; position:absolute; left:14px; right:14px; bottom:1px; height:2px;
  background:var(--orange); border-radius:2px;
}
[data-header].is-dark:not(.is-scrolled) .nav-link{ color:rgba(234,240,251,.86); }
[data-header].is-dark:not(.is-scrolled) .nav-link:hover{ color:#fff; background:rgba(255,255,255,.10); }
[data-header].is-dark:not(.is-scrolled) .nav-link[aria-current="page"]{ color:#fff; }

/* Dropdown caret */
.nav-caret{ width:14px; height:14px; opacity:.7; transition:transform var(--a6-fast) var(--a6-ease); }
[data-dropdown].is-open .nav-caret{ transform:rotate(180deg); }

/* Dropdown menü */
[data-dropdown-menu]{
  position:absolute; top:calc(100% + 10px); left:50%; translate:-50% 0;
  min-width:300px;
  background:#fff;
  border:1px solid var(--hairline);
  border-radius:var(--radius-lg);
  box-shadow:var(--a6-elev-2);
  padding:8px;
  opacity:0; visibility:hidden; transform:translateY(6px);
  transition:opacity var(--a6-fast) var(--a6-ease),
             transform var(--a6-fast) var(--a6-ease),
             visibility var(--a6-fast);
  z-index:120;
}
[data-dropdown].is-open [data-dropdown-menu]{
  opacity:1; visibility:visible; transform:translateY(0);
}
.dropdown-link{
  display:flex; flex-direction:column; gap:2px;
  padding:11px 13px; border-radius:var(--radius-md);
  transition:background var(--a6-fast) var(--a6-ease);
}
.dropdown-link:hover{ background:var(--tint); }
.dropdown-link .dd-title{ font-weight:600; font-size:.95rem; color:var(--ink); }
.dropdown-link .dd-desc{ font-size:.82rem; color:var(--gray); }
.dropdown-link:hover .dd-title{ color:var(--navy); }

/* Header sağ aksiyonlar */
.header-actions{ display:none; align-items:center; gap:10px; flex:none; }
@media (min-width:921px){ .header-actions{ display:flex; } }

/* Dil değiştirici */
.lang{ position:relative; }
.lang-toggle{
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 12px; border-radius:var(--radius-pill);
  border:1px solid var(--hairline); background:rgba(255,255,255,.72);
  font-size:.88rem; font-weight:600; color:var(--ink);
  transition:border-color var(--a6-fast) var(--a6-ease), background var(--a6-fast) var(--a6-ease);
}
.lang-toggle:hover{ border-color:rgba(28,49,95,.42); }
.lang-toggle .nav-caret{ width:13px; height:13px; }
[data-lang-switch].is-open .nav-caret{ transform:rotate(180deg); }
[data-header].is-dark:not(.is-scrolled) .lang-toggle{
  color:#fff; border-color:var(--a6-on-dark-line); background:rgba(255,255,255,.08);
}
[data-lang-switch] [data-dropdown-menu]{
  left:auto; right:0; translate:0 0; min-width:150px;
}
.lang-link{
  display:flex; align-items:center; justify-content:space-between;
  padding:9px 12px; border-radius:var(--radius-sm);
  font-size:.9rem; font-weight:500;
  transition:background var(--a6-fast) var(--a6-ease);
}
.lang-link:hover{ background:var(--tint); }
.lang-link[aria-current="true"]{ color:var(--navy); font-weight:700; }

/* Hamburger */
.nav-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; flex:none; margin-left:auto;
  border:1px solid var(--hairline); border-radius:var(--radius-md);
  background:rgba(255,255,255,.72);
  transition:border-color var(--a6-fast) var(--a6-ease);
}
@media (min-width:921px){ .nav-toggle{ display:none; } }
[data-header].is-dark:not(.is-scrolled) .nav-toggle{
  border-color:var(--a6-on-dark-line); background:rgba(255,255,255,.08);
}
.nav-toggle .bars{ position:relative; width:20px; height:14px; }
.nav-toggle .bars span{
  position:absolute; left:0; right:0; height:2px; border-radius:2px;
  background:currentColor; transition:transform var(--a6-med) var(--a6-ease),
             opacity var(--a6-fast) var(--a6-ease), top var(--a6-med) var(--a6-ease);
}
.nav-toggle .bars span:nth-child(1){ top:0; }
.nav-toggle .bars span:nth-child(2){ top:6px; }
.nav-toggle .bars span:nth-child(3){ top:12px; }
.nav-toggle.is-active .bars span:nth-child(1){ top:6px; transform:rotate(45deg); }
.nav-toggle.is-active .bars span:nth-child(2){ opacity:0; }
.nav-toggle.is-active .bars span:nth-child(3){ top:6px; transform:rotate(-45deg); }

/* ---------------------------------------------------------------------------
   6) MOBİL nav (#primnav [data-nav]) — .is-open ile açılır
   --------------------------------------------------------------------------- */
[data-nav]{ display:contents; }
@media (max-width:920px){
  [data-nav]{
    display:block;
    position:fixed; inset:var(--a6-header-h) 0 0 0; z-index:90;
    background:#fff;
    border-top:1px solid var(--hairline);
    padding:8px 20px 32px;
    overflow-y:auto;
    opacity:0; visibility:hidden; transform:translateY(-8px);
    transition:opacity var(--a6-med) var(--a6-ease),
               transform var(--a6-med) var(--a6-ease),
               visibility var(--a6-med);
  }
  [data-nav].is-open{ opacity:1; visibility:visible; transform:translateY(0); }

  /* mobilde desktop liste/aksiyon görünür ama dikey akışta */
  [data-nav] .nav-desktop,
  [data-nav] .header-actions{ display:block; }
  [data-nav] .nav-list{ flex-direction:column; align-items:stretch; gap:0; }
  [data-nav] .nav-item{ border-bottom:1px solid var(--hairline); }
  [data-nav] .nav-link{
    width:100%; justify-content:space-between;
    padding:15px 4px; font-size:1.08rem; font-weight:600; border-radius:0;
  }
  [data-nav] .nav-link[aria-current="page"]::after{ display:none; }

  /* mobil dropdown açılışı */
  [data-nav] [data-dropdown-menu]{
    position:static; opacity:1; visibility:visible; transform:none;
    min-width:0; border:0; box-shadow:none; padding:0 0 12px;
    max-height:0; overflow:hidden;
    transition:max-height var(--a6-med) var(--a6-ease);
  }
  [data-nav] [data-dropdown].is-open [data-dropdown-menu]{ max-height:560px; }
  [data-nav] .dropdown-link{ padding:11px 12px; }
  [data-nav] .dropdown-link .dd-desc{ display:none; }

  [data-nav] .header-actions{ margin-top:24px; }
  [data-nav] .header-actions .btn{ width:100%; }
  [data-nav] .lang{ margin-top:14px; }
  [data-nav] .lang-toggle{ width:100%; justify-content:center; }
  [data-nav] [data-lang-switch] [data-dropdown-menu]{
    position:static; max-height:0; overflow:hidden; opacity:1; visibility:visible;
    transform:none; border:0; box-shadow:none; padding:0;
    transition:max-height var(--a6-med) var(--a6-ease);
  }
  [data-nav] [data-lang-switch].is-open [data-dropdown-menu]{ max-height:240px; padding-top:8px; }
}

/* ---------------------------------------------------------------------------
   7) HERO — katmanlı, geometrik, ölçülü mesh
   --------------------------------------------------------------------------- */
.hero{
  position:relative; overflow:hidden;
  padding-block:clamp(56px,8vw,128px) clamp(48px,6vw,96px);
  background:
    var(--a6-mesh-2),
    var(--a6-mesh-1),
    linear-gradient(180deg,#fff 0%,var(--tint) 100%);
  isolation:isolate;
}
/* ince geometrik ızgara + nokta katmanı */
.hero::before{
  content:""; position:absolute; inset:0; z-index:-2;
  background-image:
    linear-gradient(var(--a6-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--a6-grid) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask:radial-gradient(70% 60% at 50% 36%, #000 30%, transparent 78%);
          mask:radial-gradient(70% 60% at 50% 36%, #000 30%, transparent 78%);
}
.hero::after{
  content:""; position:absolute; inset:0; z-index:-2;
  background-image:radial-gradient(var(--a6-dot) 1.4px, transparent 1.6px);
  background-size:28px 28px;
  -webkit-mask:radial-gradient(60% 50% at 84% 16%, #000 0%, transparent 70%);
          mask:radial-gradient(60% 50% at 84% 16%, #000 0%, transparent 70%);
}
.hero-grid{
  display:grid; grid-template-columns:1fr; gap:clamp(40px,5vw,64px);
  align-items:center;
}
@media (min-width:960px){
  .hero-grid{ grid-template-columns:1.05fr .95fr; }
}
.hero-copy{ max-width:44rem; }
.hero-title{
  font-size:var(--fs-display);
  line-height:1.05; margin-top:22px;
}
.hero-title .accent{
  background:linear-gradient(120deg,var(--navy),var(--teal));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-lede{
  margin-top:20px; font-size:var(--fs-lead);
  color:var(--gray); max-width:40rem;
}
.hero-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:32px; }
@media (max-width:380px){ .hero-actions .btn{ width:100%; } }

/* güven şeridi */
.trust{
  margin-top:40px; padding-top:24px; border-top:1px solid var(--hairline);
}
.trust-label{
  font-size:var(--fs-label); font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--gray);
}
.trust-row{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; margin-top:14px;
}
.trust-item{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.95rem; font-weight:600; color:var(--ink);
}
.trust-item .tdot{
  width:7px; height:7px; flex:none; border-radius:var(--radius-pill);
  background:var(--teal); box-shadow:0 0 0 4px rgba(42,143,138,.14);
}

/* hero görsel paneli — katmanlı, boyutlu */
.hero-visual{ position:relative; }
.hero-card{
  position:relative; z-index:2;
  background:#fff; border:1px solid var(--hairline);
  border-radius:var(--radius-xl);
  box-shadow:var(--a6-elev-2);
  padding:22px;
  overflow:hidden;
}
.hero-card::before{
  content:""; position:absolute; right:-28%; top:-38%; width:68%; aspect-ratio:1;
  background:conic-gradient(from 180deg, rgba(28,49,95,.14), rgba(42,143,138,.12), transparent 70%);
  border-radius:var(--radius-pill); filter:blur(6px);
}
/* arkadaki katmanlı ofset şekiller (logodaki iki-ark hissi) */
.hero-visual .layer{
  position:absolute; border-radius:var(--radius-xl);
  border:1px solid var(--hairline); background:rgba(255,255,255,.6);
  z-index:1;
}
.hero-visual .layer-1{ inset:14px -16px -18px 22px; box-shadow:var(--shadow-md); }
.hero-visual .layer-2{ inset:30px -34px -36px 44px; background:var(--tint); }

.hero-stat{
  display:flex; align-items:center; gap:14px;
  padding:14px 16px; border-radius:var(--radius-lg);
  background:var(--tint); border:1px solid var(--hairline);
}
.hero-stat + .hero-stat{ margin-top:12px; }
.hero-stat .num{ font-family:var(--font-head); font-size:1.5rem; font-weight:700; color:var(--navy); }
.hero-stat .lbl{ font-size:.9rem; color:var(--gray); }
.hero-stat .ico{
  width:44px; height:44px; flex:none; border-radius:var(--radius-md);
  display:grid; place-items:center; color:#fff;
  background:linear-gradient(135deg,var(--navy),var(--navy-2));
}
.hero-stat:nth-child(2) .ico{ background:linear-gradient(135deg,var(--teal),#1f6f6b); }
.hero-stat:nth-child(3) .ico{ background:linear-gradient(135deg,var(--orange),#cf8418); color:#3a2400; }

/* ---------------------------------------------------------------------------
   8) KARTLAR — boyutlu / katmanlı
   --------------------------------------------------------------------------- */
.card{
  position:relative; isolation:isolate;
  display:flex; flex-direction:column;
  background:#fff; border:1px solid var(--hairline);
  border-radius:var(--radius-lg);
  padding:clamp(20px,2.4vw,28px);
  box-shadow:var(--a6-elev-1);
  transition:transform var(--a6-med) var(--a6-ease),
             box-shadow var(--a6-med) var(--a6-ease),
             border-color var(--a6-med) var(--a6-ease);
  height:100%;
}
.card:hover{
  transform:translateY(-4px);
  border-color:rgba(28,49,95,.32);
  box-shadow:var(--a6-elev-2);
}
/* üstte ince geometrik vurgu şeridi */
.card--accent::before{
  content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background:linear-gradient(90deg,var(--navy),var(--teal));
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  transform:scaleX(.32); transform-origin:left;
  transition:transform var(--a6-med) var(--a6-ease);
}
.card--accent:hover::before{ transform:scaleX(1); }

.card-icon{
  width:52px; height:52px; border-radius:var(--radius-md);
  display:grid; place-items:center; margin-bottom:18px;
  color:var(--navy);
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(28,49,95,.14), transparent 60%),
    var(--tint);
  border:1px solid var(--hairline);
}
.card-icon svg{ width:26px; height:26px; }
.card-title{ font-size:var(--fs-h3); margin-bottom:8px; overflow-wrap:break-word; word-break:break-word; }
.card-text{ color:var(--gray); font-size:.98rem; overflow-wrap:break-word; }
.card-link{
  display:inline-flex; align-items:center; gap:6px; margin-top:auto;
  padding-top:16px;
  font-weight:600; font-size:.92rem; color:var(--navy-2);
}
.card-link svg,
.card-link .btn-arrow{ width:1.05em; height:1.05em; flex:none; }
.card-link .btn-arrow{ transition:transform var(--a6-med) var(--a6-ease); }
.card:hover .card-link .btn-arrow{ transform:translateX(3px); }

/* numaralı kart (ürün ekosistemi) */
.card-num{
  font-family:var(--font-head); font-size:.85rem; font-weight:700;
  letter-spacing:.04em; color:var(--teal);
  display:inline-flex; align-items:center; gap:8px; margin-bottom:14px;
}
.card-num::before{
  content:""; width:22px; height:22px; border-radius:var(--radius-pill);
  border:1.5px solid var(--teal); display:inline-block;
}

/* koyu zeminde kartlar (yapay zeka bölümü) */
.section--dark .card{
  background:rgba(255,255,255,.045);
  border-color:var(--a6-on-dark-line);
  box-shadow:none;
}
.section--dark .card:hover{
  background:rgba(255,255,255,.075);
  border-color:rgba(255,255,255,.28);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.6);
}
.section--dark .card-title{ color:var(--a6-on-dark); }
.section--dark .card-text{ color:var(--a6-on-dark-muted); }
.section--dark .card-icon{
  color:#BFE5E2;
  background:rgba(255,255,255,.06); border-color:var(--a6-on-dark-line);
}

/* çift kullanım — büyük katmanlı panel */
.split{ display:grid; grid-template-columns:1fr; gap:var(--space-5); }
@media (min-width:768px){ .split{ grid-template-columns:repeat(2,1fr); } }
.split-card{
  position:relative; overflow:hidden;
  padding:clamp(26px,3vw,40px);
  border-radius:var(--radius-xl);
  border:1px solid var(--hairline);
  background:#fff; box-shadow:var(--a6-elev-1);
  transition:transform var(--a6-med) var(--a6-ease), box-shadow var(--a6-med) var(--a6-ease);
}
.split-card:hover{ transform:translateY(-4px); box-shadow:var(--a6-elev-2); }
.split-card::after{
  content:""; position:absolute; right:-60px; bottom:-60px; width:200px; height:200px;
  border-radius:var(--radius-pill);
  background:conic-gradient(from 140deg, rgba(28,49,95,.10), rgba(42,143,138,.08), transparent 65%);
}
.split-card .tag{
  display:inline-block; font-size:var(--fs-label); font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--navy);
  padding:5px 11px; border-radius:var(--radius-pill);
  background:rgba(28,49,95,.08);
}
.split-card h3{ font-size:var(--fs-h3); margin-top:16px; }
.split-card p{ color:var(--gray); margin-top:12px; max-width:46ch; }

/* konumlanma — büyük katmanlı metin paneli */
.feature-panel{
  position:relative; overflow:hidden;
  padding:clamp(28px,4vw,56px);
  border-radius:var(--radius-xl);
  border:1px solid var(--hairline);
  background:#fff; box-shadow:var(--a6-elev-1);
}
.feature-panel::before{
  content:""; position:absolute; left:-80px; top:-80px; width:260px; height:260px;
  border-radius:var(--radius-pill);
  background:conic-gradient(from 200deg, rgba(28,49,95,.08), rgba(42,143,138,.06), transparent 62%);
}
.feature-panel .feature-body{ position:relative; max-width:70ch; }
.feature-panel p{ color:var(--gray); font-size:var(--fs-lead); }

/* ---------------------------------------------------------------------------
   9) LOGO DUVARI (gri placeholder) — .logo-wall + .logo-chip
   --------------------------------------------------------------------------- */
.tag-row{
  display:flex; flex-wrap:wrap; gap:10px; justify-content:center;
  margin-bottom:clamp(24px,3vw,40px);
}
.sector-tag{
  font-size:.9rem; font-weight:600; color:var(--navy-2);
  padding:8px 16px; border-radius:var(--radius-pill);
  background:rgba(28,49,95,.06); border:1px solid var(--hairline);
}
.logo-wall{
  display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:8px;
}
@media (min-width:600px){ .logo-wall{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:1024px){ .logo-wall{ grid-template-columns:repeat(6,1fr); } }
.logo-chip{
  display:grid; place-items:center;
  height:84px; border-radius:var(--radius-lg);
  background:var(--tint); border:1px solid var(--hairline);
  color:var(--gray); font-weight:600; font-size:.92rem; letter-spacing:.02em;
  filter:grayscale(1); opacity:.85;
  transition:opacity var(--a6-fast) var(--a6-ease), border-color var(--a6-fast) var(--a6-ease);
}
.logo-chip:hover{ opacity:1; border-color:rgba(28,49,95,.3); }
.logo-note{ margin-top:14px; font-size:var(--fs-small); color:var(--gray); text-align:center; }

/* ---------------------------------------------------------------------------
   10) CTA bandı (kapanış) — katmanlı koyu panel
   --------------------------------------------------------------------------- */
.cta-panel{
  position:relative; overflow:hidden;
  border-radius:var(--radius-xl);
  padding:clamp(36px,5vw,72px);
  text-align:center;
  background:
    radial-gradient(40rem 30rem at 80% -20%, rgba(42,143,138,.42), transparent 60%),
    radial-gradient(36rem 28rem at 0% 120%, rgba(237,155,37,.26), transparent 60%),
    linear-gradient(160deg,var(--navy),var(--a6-dark));
  color:var(--a6-on-dark);
  box-shadow:var(--shadow-lg);
}
.cta-panel::before{
  content:""; position:absolute; inset:0;
  background-image:radial-gradient(rgba(255,255,255,.10) 1.2px, transparent 1.4px);
  background-size:26px 26px;
  -webkit-mask:radial-gradient(70% 80% at 50% 0%, #000, transparent 75%);
          mask:radial-gradient(70% 80% at 50% 0%, #000, transparent 75%);
  opacity:.7;
}
.cta-panel > *{ position:relative; }
.cta-panel h2{ color:#fff; font-size:var(--fs-h2); }
.cta-panel p{ color:var(--a6-on-dark-muted); margin:16px auto 0; max-width:52ch; font-size:var(--fs-lead); }
.cta-actions{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:30px; }
@media (max-width:380px){ .cta-actions .btn{ width:100%; } }

/* ---------------------------------------------------------------------------
   11) FORM alanları (.field / .field-error / .form-status)
   --------------------------------------------------------------------------- */
.form-card{
  background:#fff; border:1px solid var(--hairline);
  border-radius:var(--radius-xl); padding:clamp(24px,3vw,40px);
  box-shadow:var(--a6-elev-1);
}
.field{ display:flex; flex-direction:column; gap:7px; margin-bottom:18px; }
.field > label{ font-size:.9rem; font-weight:600; color:var(--ink); }
.field .req{ color:var(--orange); }
.field input,
.field select,
.field textarea{
  width:100%; font:inherit; color:var(--ink);
  padding:12px 14px; border-radius:var(--radius-md);
  border:1px solid var(--hairline); background:#fff;
  transition:border-color var(--a6-fast) var(--a6-ease),
             box-shadow var(--a6-fast) var(--a6-ease);
}
.field textarea{ min-height:130px; resize:vertical; }
.field input::placeholder,.field textarea::placeholder{ color:#9AA6B8; }
.field input:focus,
.field select:focus,
.field textarea:focus{
  outline:none; border-color:var(--navy);
  box-shadow:0 0 0 4px rgba(28,49,95,.12);
}
.field-checkbox{ flex-direction:row; align-items:flex-start; gap:10px; }
.field-checkbox input{ width:auto; margin-top:3px; }
.field-checkbox label{ font-weight:400; color:var(--gray); font-size:.92rem; }
.field-error{ font-size:.84rem; color:#C8453B; min-height:1em; }
.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"]{ border-color:#C8453B; }

.form-status{
  margin-top:8px; padding:14px 16px; border-radius:var(--radius-md);
  font-size:.95rem;
}
.form-status.is-success{ background:rgba(42,143,138,.12); color:#1f6f6b; border:1px solid rgba(42,143,138,.4); }
.form-status.is-error{ background:rgba(200,69,59,.10); color:#B23A31; border:1px solid rgba(200,69,59,.34); }

/* ---------------------------------------------------------------------------
   12) FOOTER — koyu lacivert
   --------------------------------------------------------------------------- */
.site-footer{
  position:relative; overflow:hidden;
  background:linear-gradient(180deg,var(--a6-dark),var(--a6-dark-2));
  color:var(--a6-on-dark);
  padding-block:clamp(48px,6vw,80px) 0;
}
.site-footer::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(40rem 26rem at 90% -10%, rgba(42,143,138,.18), transparent 60%),
    radial-gradient(30rem 22rem at 0% 0%, rgba(237,155,37,.10), transparent 60%);
  pointer-events:none;
}
.footer-grid{
  position:relative;
  display:grid; grid-template-columns:1fr; gap:36px 32px;
}
@media (min-width:600px){ .footer-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .footer-grid{ grid-template-columns:1.6fr 1fr 1fr 1fr; } }
.footer-brand img{ height:34px; width:auto; }
.footer-brand .footer-tagline{ margin-top:14px; font-weight:600; color:#fff; }
.footer-brand p{ margin-top:10px; color:var(--a6-on-dark-muted); max-width:36ch; font-size:.95rem; }
.footer-col h4{
  font-family:var(--font-body); font-size:var(--fs-label); font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:#fff; margin-bottom:14px;
}
.footer-col ul{ display:flex; flex-direction:column; gap:10px; }
.footer-col a{
  color:var(--a6-on-dark-muted); font-size:.95rem;
  transition:color var(--a6-fast) var(--a6-ease);
}
.footer-col a:hover{ color:#fff; }
.footer-eco span{ display:block; color:var(--a6-on-dark-muted); font-size:.95rem; margin-bottom:10px; }
.footer-bottom{
  position:relative;
  margin-top:clamp(36px,5vw,56px);
  border-top:1px solid var(--a6-on-dark-line);
  padding-block:22px;
  display:flex; flex-wrap:wrap; gap:10px 18px;
  align-items:center; justify-content:space-between;
  color:var(--a6-on-dark-muted); font-size:.88rem;
}
.footer-bottom a{ color:var(--a6-on-dark-muted); }
.footer-bottom a:hover{ color:#fff; }
.footer-legal{ display:flex; gap:18px; flex-wrap:wrap; align-items:center; }
.footer-social{ display:flex; gap:10px; }
.footer-social a{
  width:36px; height:36px; display:grid; place-items:center;
  border:1px solid var(--a6-on-dark-line); border-radius:var(--radius-pill);
  transition:border-color var(--a6-fast) var(--a6-ease), background var(--a6-fast) var(--a6-ease);
}
.footer-social a:hover{ border-color:rgba(255,255,255,.4); background:rgba(255,255,255,.08); }
.footer-social svg{ width:18px; height:18px; }

/* ---------------------------------------------------------------------------
   13) Yardımcılar
   --------------------------------------------------------------------------- */
.text-center{ text-align:center; }
.mt-4{ margin-top:var(--space-4); } .mt-6{ margin-top:var(--space-6); }

/* ---------------------------------------------------------------------------
   14) Giriş animasyonları — loyexo-ui.js [data-reveal] -> .in-view
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion:no-preference){
  [data-reveal]{
    opacity:0; transform:translateY(18px);
    transition:opacity var(--a6-slow) var(--a6-ease), transform var(--a6-slow) var(--a6-ease);
  }
  [data-reveal].in-view{ opacity:1; transform:none; }
  [data-reveal][data-reveal-delay="1"]{ transition-delay:80ms; }
  [data-reveal][data-reveal-delay="2"]{ transition-delay:160ms; }
  [data-reveal][data-reveal-delay="3"]{ transition-delay:240ms; }
  [data-reveal][data-reveal-delay="4"]{ transition-delay:320ms; }
}
/* JS yoksa içerik her hâlükârda görünür */
.no-js [data-reveal]{ opacity:1; transform:none; }

/* ---------------------------------------------------------------------------
   15) prefers-reduced-motion — tüm hareketi sakinleştir
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  .btn:hover,.card:hover,.split-card:hover,.feature-panel:hover{ transform:none; }
}

/* ---------------------------------------------------------------------------
   16) İnce responsive düzeltmeler
   --------------------------------------------------------------------------- */
@media (min-width:1440px){
  .hero-title{ font-size:4rem; }
}