/* =========================================================================
   LOYEXO — ALT2 "Kart / Modül" tasarım dili (LIGHT tema)
   Kart/modül ağırlıklı, bento-grid, yükseltilmiş (elevated) kartlar.
   İlham: Atlassian / Notion / Linear / LoyaltyLion-Yotpo dashboard estetiği.
   brand-tokens.css ÜZERİNE kurulur; token değişkenlerini kullanır.
   ========================================================================= */

/* -------------------------------------------------------------------------
   0) Alt2'ye özgü yerel değişkenler
   ------------------------------------------------------------------------- */
:root{
  --alt2-card-bg:        var(--white);
  --alt2-card-border:    var(--hairline);
  --alt2-card-radius:    var(--r-lg);
  --alt2-icon-size:      48px;
  --alt2-nav-gap:        clamp(.25rem, 1.4vw, 1.1rem);
  --alt2-header-bg:      rgba(255,255,255,.72);
  --alt2-header-bg-solid:rgba(255,255,255,.92);
}

/* -------------------------------------------------------------------------
   1) Genel sayfa zemini & ritim
   ------------------------------------------------------------------------- */
html{ overflow-x:clip; }
body{ background:var(--bg-soft); overflow-x:clip; }
main{ display:block; }

.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); }
.container-md{ max-width:var(--container-md); }
.container-sm{ max-width:var(--container-sm); }

.section{ padding-block:var(--section-y); }
.section--tint{ background:var(--tint); }
.section--white{ background:var(--white); }
.section--soft{ background:var(--bg-soft); }
.section--navy{ background:var(--navy); color:#fff; }
.section--navy h1,.section--navy h2,.section--navy h3{ color:#fff; }

.section-head{ max-width:64ch; margin-bottom:clamp(2rem,4vw,3rem); }
.section-head--center{ margin-inline:auto; text-align:center; }
.eyebrow{
  display:inline-block; font-family:var(--font-head); font-size:var(--fs-label);
  font-weight:var(--fw-semibold); letter-spacing:var(--tracking-label);
  text-transform:uppercase; color:var(--teal); margin-bottom:.75rem;
}
.section--navy .eyebrow{ color:var(--teal-400); }
.section-title{ font-size:var(--fs-h2); margin:0 0 .6rem; }
.section-sub{ font-size:var(--fs-lead); color:var(--color-text-muted); margin:0; }
.section--navy .section-sub{ color:var(--navy-200); }

/* -------------------------------------------------------------------------
   2) Butonlar
   ------------------------------------------------------------------------- */
.btn{
  --_bg:var(--navy); --_fg:#fff; --_bd:transparent;
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:var(--font-head); font-size:var(--fs-body); font-weight:var(--fw-semibold);
  line-height:1; text-align:center; white-space:nowrap; cursor:pointer;
  padding:.85rem 1.4rem; border-radius:var(--r-pill);
  background:var(--_bg); color:var(--_fg); border:1.5px solid var(--_bd);
  transition:transform var(--t-fast), box-shadow var(--t-base), background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.btn:hover{ color:var(--_fg); }
.btn:active{ transform:translateY(1px); }
.btn svg{ width:1.1em; height:1.1em; flex:none; }

.btn-primary{ --_bg:var(--orange); --_fg:var(--navy-900); box-shadow:var(--shadow-sm); }
.btn-primary:hover{ --_bg:var(--orange-400); transform:translateY(-2px); box-shadow:var(--shadow-md); color:var(--navy-900); }

.btn-secondary{ --_bg:transparent; --_fg:var(--navy); --_bd:var(--navy); }
.btn-secondary:hover{ --_bg:var(--navy); --_fg:#fff; transform:translateY(-2px); box-shadow:var(--shadow-sm); }

/* Koyu zeminde ikincil buton */
.section--navy .btn-secondary,
[data-header].is-dark .btn-secondary{ --_fg:#fff; --_bd:rgba(255,255,255,.55); }
.section--navy .btn-secondary:hover{ --_bg:#fff; --_fg:var(--navy); --_bd:#fff; }

.btn-ghost{ --_bg:transparent; --_fg:var(--navy); --_bd:transparent; padding-inline:.5rem; }
.btn-ghost:hover{ --_fg:var(--teal); color:var(--teal); }

.btn-block{ width:100%; }
.btn-sm{ padding:.6rem 1rem; font-size:var(--fs-small); }

/* Inline metin linki "→" tarzı */
.link-arrow{
  display:inline-flex; align-items:center; gap:.4rem; font-family:var(--font-head);
  font-weight:var(--fw-semibold); color:var(--teal); font-size:var(--fs-small);
}
.link-arrow svg{ width:1em; height:1em; transition:transform var(--t-fast); }
.link-arrow:hover{ color:var(--teal-700); }
.link-arrow:hover svg{ transform:translateX(4px); }

/* -------------------------------------------------------------------------
   3) HEADER — sticky, cam efektli; kaydırınca koyu lacivert
   ------------------------------------------------------------------------- */
[data-header]{
  position:sticky; top:0; z-index:var(--z-header);
  background:var(--alt2-header-bg);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;
  transition:background var(--t-base), border-color var(--t-base), box-shadow var(--t-base), color var(--t-base);
}
[data-header].is-scrolled{
  background:var(--alt2-header-bg-solid);
  border-bottom-color:var(--hairline);
  box-shadow:var(--shadow-sm);
}
[data-header].is-dark{
  background:var(--navy);
  border-bottom-color:rgba(255,255,255,.08);
  box-shadow:var(--shadow-md);
}
.header-inner{
  display:flex; align-items:center; gap:1rem;
  min-height:var(--header-h); padding-inline:var(--gutter);
  max-width:var(--container); margin-inline:auto;
}
.brand{ display:inline-flex; align-items:center; flex:none; margin-right:.5rem; }
.brand-logo{ height:38px; width:auto; }

/* Birincil nav */
.nav{ display:flex; align-items:center; gap:var(--alt2-nav-gap); margin-left:auto; }
.nav-list{ display:flex; align-items:center; gap:var(--alt2-nav-gap); list-style:none; }
.nav-link{
  display:inline-flex; align-items:center; gap:.3rem;
  font-family:var(--font-head); font-weight:var(--fw-medium); font-size:var(--fs-small);
  color:var(--navy); padding:.5rem .55rem; border-radius:var(--r-sm);
  transition:color var(--t-fast), background var(--t-fast);
}
.nav-link:hover{ color:var(--teal); }
.nav-link[aria-current="page"]{ color:var(--navy); font-weight:var(--fw-semibold); }
.nav-link[aria-current="page"]::after{
  content:""; display:block;
}
[data-header].is-dark .nav-link{ color:#E7ECF4; }
[data-header].is-dark .nav-link:hover{ color:var(--teal-400); }
[data-header].is-dark .nav-link[aria-current="page"]{ color:#fff; }

/* Dropdown */
[data-dropdown]{ position:relative; }
.dd-trigger{
  background:none; border:0; cursor:pointer; font:inherit;
  display:inline-flex; align-items:center; gap:.3rem;
}
.dd-caret{ width:.7em; height:.7em; transition:transform var(--t-fast); }
[data-dropdown].is-open .dd-caret{ transform:rotate(180deg); }
.dd-menu{
  position:absolute; top:calc(100% + .55rem); left:0;
  min-width:286px; padding:.5rem; margin:0; list-style:none;
  background:var(--white); border:1px solid var(--hairline); border-radius:var(--r-md);
  box-shadow:var(--shadow-lg);
  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);
}
[data-dropdown].is-open .dd-menu{ opacity:1; visibility:visible; transform:translateY(0); }
.dd-item{ display:block; }
.dd-item a{
  display:flex; flex-direction:column; gap:.1rem;
  padding:.6rem .7rem; border-radius:var(--r-sm); color:var(--navy);
  font-family:var(--font-head); font-weight:var(--fw-medium); font-size:var(--fs-small);
  transition:background var(--t-fast), color var(--t-fast);
}
.dd-item a:hover{ background:var(--tint); color:var(--teal); }

/* CTA in header */
.header-cta{ flex:none; margin-left:.4rem; }

/* Dil değiştirici */
[data-lang-switch]{ position:relative; flex:none; }
.lang-trigger{
  background:none; border:1px solid var(--hairline); cursor:pointer; font:inherit;
  display:inline-flex; align-items:center; gap:.3rem;
  padding:.4rem .65rem; border-radius:var(--r-pill);
  font-family:var(--font-head); font-weight:var(--fw-semibold); font-size:var(--fs-small);
  color:var(--navy); transition:border-color var(--t-fast), color var(--t-fast), background var(--t-fast);
}
.lang-trigger:hover{ border-color:var(--teal); color:var(--teal); }
[data-header].is-dark .lang-trigger{ color:#fff; border-color:rgba(255,255,255,.3); }
[data-header].is-dark .lang-trigger:hover{ border-color:#fff; color:#fff; }
.lang-menu{
  position:absolute; top:calc(100% + .5rem); right:0; min-width:128px;
  padding:.4rem; margin:0; list-style:none;
  background:var(--white); border:1px solid var(--hairline); border-radius:var(--r-md);
  box-shadow:var(--shadow-lg);
  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);
}
[data-lang-switch].is-open .lang-menu{ opacity:1; visibility:visible; transform:translateY(0); }
.lang-menu a{
  display:block; padding:.45rem .65rem; border-radius:var(--r-sm);
  font-family:var(--font-head); font-weight:var(--fw-medium); font-size:var(--fs-small); color:var(--navy);
}
.lang-menu a:hover{ background:var(--tint); color:var(--teal); }
.lang-menu a[aria-current="true"]{ color:var(--teal); font-weight:var(--fw-semibold); }

/* Hamburger */
.nav-toggle{
  display:none; flex:none; width:44px; height:44px; margin-left:.25rem;
  background:none; border:1px solid var(--hairline); border-radius:var(--r-sm);
  cursor:pointer; align-items:center; justify-content:center; color:var(--navy);
}
.nav-toggle .bar{ display:block; width:20px; height:2px; background:currentColor; border-radius:2px; transition:transform var(--t-fast), opacity var(--t-fast); }
.nav-toggle .bar + .bar{ margin-top:4px; }
.nav-toggle.is-active .bar:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.nav-toggle.is-active .bar:nth-child(2){ opacity:0; }
.nav-toggle.is-active .bar:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }
[data-header].is-dark .nav-toggle{ color:#fff; border-color:rgba(255,255,255,.3); }

/* -------------------------------------------------------------------------
   4) HERO — kart vurgulu, modüler
   ------------------------------------------------------------------------- */
.hero{
  position:relative; overflow:hidden;
  padding-block:clamp(3rem,5vw,6rem) clamp(2.5rem,5vw,5rem);
  background:
    radial-gradient(1100px 480px at 88% -8%, var(--teal-050), transparent 60%),
    radial-gradient(900px 460px at 6% 4%, var(--navy-050), transparent 55%),
    var(--white);
}
.hero-grid{
  display:grid; gap:clamp(2rem,4vw,3.5rem); align-items:center;
  grid-template-columns:1fr;
}
.hero-copy{ max-width:60ch; }
.hero h1{
  font-size:var(--fs-display); line-height:var(--lh-tight);
  letter-spacing:var(--tracking-tight); margin:.85rem 0 1rem;
}
.hero-sub{ font-size:var(--fs-lead); color:var(--color-text-muted); margin:0 0 1.75rem; max-width:54ch; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:.85rem; margin-bottom:2rem; }

/* Güven şeridi */
.trust-strip{
  display:flex; flex-wrap:wrap; align-items:center; gap:.6rem 1.1rem;
  padding-top:1.5rem; border-top:1px solid var(--hairline);
  font-size:var(--fs-small); color:var(--color-text-muted);
}
.trust-strip .trust-item{ display:inline-flex; align-items:center; gap:.5rem; font-family:var(--font-head); font-weight:var(--fw-medium); }
.trust-strip .dot{ width:5px; height:5px; border-radius:50%; background:var(--teal); flex:none; }

/* Hero görsel sütunu — bento kart yığını */
.hero-visual{ display:grid; gap:1rem; grid-template-columns:1fr 1fr; }
.hero-tile{
  background:var(--alt2-card-bg); border:1px solid var(--alt2-card-border);
  border-radius:var(--alt2-card-radius); padding:1.25rem; box-shadow:var(--shadow-sm);
}
.hero-tile .tile-ic{
  width:42px; height:42px; border-radius:var(--r-md); display:flex; align-items:center; justify-content:center;
  background:var(--teal-050); color:var(--teal-700); margin-bottom:.7rem;
}
.hero-tile .tile-ic svg{ width:22px; height:22px; }
.hero-tile h3{ font-size:1rem; margin:0 0 .25rem; }
.hero-tile p{ font-size:var(--fs-small); color:var(--color-text-muted); margin:0; }
.hero-tile--wide{ grid-column:1 / -1; }
.hero-tile--accent{ background:var(--navy); border-color:var(--navy); color:#fff; }
.hero-tile--accent h3{ color:#fff; }
.hero-tile--accent p{ color:var(--navy-200); }
.hero-tile--accent .tile-ic{ background:rgba(255,255,255,.12); color:var(--orange); }

/* -------------------------------------------------------------------------
   5) KARTLAR — yükseltilmiş, hover'da yumuşak yükselme
   ------------------------------------------------------------------------- */
.card{
  display:flex; flex-direction:column; gap:.85rem; height:100%;
  background:var(--alt2-card-bg); border:1px solid var(--alt2-card-border);
  border-radius:var(--alt2-card-radius); padding:clamp(1.25rem,2.4vw,1.75rem);
  box-shadow:var(--shadow-xs);
  transition:transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}
.card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--navy-200); }
.card-link{ color:inherit; }
.card-link:hover{ color:inherit; }

.card-ic{
  width:var(--alt2-icon-size); height:var(--alt2-icon-size); flex:none;
  display:flex; align-items:center; justify-content:center;
  border-radius:var(--r-md); background:var(--teal-050); color:var(--teal-700);
  transition:background var(--t-base), color var(--t-base);
}
.card-ic svg{ width:26px; height:26px; }
.card:hover .card-ic{ background:var(--teal); color:#fff; }
.card-ic--orange{ background:var(--orange-050); color:var(--orange-700); }
.card:hover .card-ic--orange{ background:var(--orange); color:var(--navy-900); }
.card-ic--navy{ background:var(--navy-050); color:var(--navy); }
.card:hover .card-ic--navy{ background:var(--navy); color:#fff; }

.card-title{ font-size:var(--fs-h3); margin:0; }
.card-text{ font-size:var(--fs-body); color:var(--color-text-muted); margin:0; flex:1 0 auto; }
.card-foot{ margin-top:auto; padding-top:.35rem; }

/* Kart üzerinde küçük etiket */
.card-tag{
  align-self:flex-start; font-family:var(--font-head); font-weight:var(--fw-semibold);
  font-size:var(--fs-label); letter-spacing:var(--tracking-label); text-transform:uppercase;
  color:var(--teal-700); background:var(--teal-050);
  padding:.25rem .55rem; border-radius:var(--r-pill);
}

/* Ürün kartı varyantı (numara rozetli) */
.card--product .card-ic{ background:var(--navy-050); color:var(--navy); }
.card:hover.card--product .card-ic{ background:var(--navy); color:#fff; }

/* Çift kullanım panel kartları */
.dual-card{
  border-radius:var(--alt2-card-radius); padding:clamp(1.5rem,3vw,2.25rem);
  border:1px solid var(--alt2-card-border); box-shadow:var(--shadow-sm); height:100%;
}
.dual-card--customer{ background:linear-gradient(180deg,var(--teal-050),var(--white)); }
.dual-card--employee{ background:linear-gradient(180deg,var(--orange-050),var(--white)); }
.dual-card .dual-ic{
  width:52px; height:52px; border-radius:var(--r-md); display:flex; align-items:center; justify-content:center;
  margin-bottom:1rem; color:#fff;
}
.dual-card--customer .dual-ic{ background:var(--teal); }
.dual-card--employee .dual-ic{ background:var(--orange-600); color:var(--navy-900); }
.dual-card .dual-ic svg{ width:26px; height:26px; }
.dual-card h3{ font-size:var(--fs-h3); margin:0 0 .5rem; }
.dual-card p{ margin:0; color:var(--color-text-muted); }

/* AI farkı bölümü — koyu zeminde kartlar */
.section--navy .card{
  background:var(--navy-800); border-color:rgba(255,255,255,.08); box-shadow:none;
}
.section--navy .card:hover{ border-color:rgba(255,255,255,.22); box-shadow:var(--shadow-lg); }
.section--navy .card-title{ color:#fff; }
.section--navy .card-text{ color:var(--navy-200); }
.section--navy .card-ic{ background:rgba(42,143,138,.18); color:var(--teal-400); }
.section--navy .card:hover .card-ic{ background:var(--teal); color:#fff; }

/* -------------------------------------------------------------------------
   6) GRID yardımcıları + bento
   ------------------------------------------------------------------------- */
.grid{ display:grid; gap:clamp(1rem,2.2vw,1.5rem); }
.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:960px){
  .grid-3{ grid-template-columns:repeat(3,1fr); }
  .grid-4{ grid-template-columns:repeat(4,1fr); }
  .grid-5{ grid-template-columns:repeat(3,1fr); }
}
@media(min-width:1180px){
  .grid-5{ grid-template-columns:repeat(5,1fr); }
}

/* Konumlanma — split modül */
.split{ display:grid; gap:clamp(1.5rem,3vw,3rem); align-items:center; grid-template-columns:1fr; }
@media(min-width:900px){ .split{ grid-template-columns:1.05fr .95fr; } }
.split-panel{
  background:var(--navy); color:#fff; border-radius:var(--r-xl);
  padding:clamp(1.75rem,3vw,2.75rem); box-shadow:var(--shadow-md);
}
.split-panel h3{ color:#fff; }
.stat-row{ display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; margin-top:1.5rem; }
.stat{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); border-radius:var(--r-md); padding:1rem; }
.stat .stat-num{ font-family:var(--font-head); font-weight:var(--fw-extra); font-size:1.5rem; color:var(--orange); display:block; }
.stat .stat-lbl{ font-size:var(--fs-small); color:var(--navy-200); }

/* -------------------------------------------------------------------------
   7) LOGO DUVARI (referans bölümü) — gri placeholder
   ------------------------------------------------------------------------- */
.logo-wall{ display:grid; gap:clamp(.75rem,2vw,1.25rem); grid-template-columns:repeat(2,1fr); margin-top:2rem; }
@media(min-width:600px){ .logo-wall{ grid-template-columns:repeat(3,1fr); } }
@media(min-width:960px){ .logo-wall{ grid-template-columns:repeat(6,1fr); } }
.logo-chip{
  height:64px; display:flex; align-items:center; justify-content:center;
  background:var(--white); border:1px solid var(--hairline); border-radius:var(--r-md);
  font-family:var(--font-head); font-weight:var(--fw-bold); font-size:var(--fs-small);
  color:var(--gray-400); filter:grayscale(1); opacity:.75;
  transition:opacity var(--t-base), color var(--t-base), box-shadow var(--t-base), filter var(--t-base);
}
.logo-chip:hover{ opacity:1; color:var(--navy); box-shadow:var(--shadow-sm); filter:grayscale(1); }

/* Sektör etiketleri */
.tag-row{ display:flex; flex-wrap:wrap; gap:.55rem; margin-top:.5rem; }
.tag{
  font-family:var(--font-head); font-weight:var(--fw-medium); font-size:var(--fs-small);
  color:var(--navy); background:var(--white); border:1px solid var(--hairline);
  padding:.4rem .85rem; border-radius:var(--r-pill);
}

/* -------------------------------------------------------------------------
   8) KAPANIŞ CTA
   ------------------------------------------------------------------------- */
.cta-band{
  border-radius:var(--r-xl); overflow:hidden; position:relative;
  background:
    radial-gradient(700px 320px at 85% 15%, rgba(42,143,138,.35), transparent 60%),
    radial-gradient(600px 300px at 8% 90%, rgba(237,155,37,.22), transparent 60%),
    var(--navy);
  color:#fff; padding:clamp(2.25rem,5vw,4rem); text-align:center;
  box-shadow:var(--shadow-lg);
}
.cta-band h2{ color:#fff; font-size:var(--fs-h1); margin:0 0 .6rem; }
.cta-band p{ color:var(--navy-200); font-size:var(--fs-lead); margin:0 auto 1.75rem; max-width:52ch; }
.cta-actions{ display:flex; flex-wrap:wrap; gap:.85rem; justify-content:center; }

/* -------------------------------------------------------------------------
   9) FORM ALANLARI (.field / .field-error / .form-status)
   ------------------------------------------------------------------------- */
.field{ display:flex; flex-direction:column; gap:.4rem; margin-bottom:1.1rem; }
.field > label{ font-family:var(--font-head); font-weight:var(--fw-medium); font-size:var(--fs-small); color:var(--navy); }
.field > label .req{ color:var(--orange-700); }
.field input,
.field select,
.field textarea{
  font:inherit; font-size:var(--fs-body); color:var(--ink);
  background:var(--white); border:1.5px solid var(--hairline); border-radius:var(--r-sm);
  padding:.7rem .85rem; 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:var(--focus-ring); }
.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"]{ border-color:#C0392B; }
.field-error{ font-size:var(--fs-small); color:#C0392B; }

.field-check{ flex-direction:row; align-items:flex-start; gap:.6rem; }
.field-check input{ width:auto; margin-top:.2rem; flex:none; }
.field-check label{ font-weight:var(--fw-regular); color:var(--color-text-muted); }

.form-status{
  margin-top:.5rem; padding:.85rem 1rem; border-radius:var(--r-sm);
  font-size:var(--fs-small); font-family:var(--font-head); font-weight:var(--fw-medium);
}
.form-status.is-success{ background:var(--teal-050); color:var(--teal-700); border:1px solid var(--teal-200); }
.form-status.is-error{ background:#FCEBEA; color:#C0392B; border:1px solid #F2C4BF; }

.form-grid{ display:grid; gap:0 1rem; grid-template-columns:1fr; }
@media(min-width:640px){ .form-grid{ grid-template-columns:1fr 1fr; } .form-grid .span-2{ grid-column:1 / -1; } }

/* -------------------------------------------------------------------------
   10) FOOTER
   ------------------------------------------------------------------------- */
.site-footer{ background:var(--navy-900); color:var(--navy-200); padding-block:clamp(3rem,5vw,4.5rem) 1.5rem; }
.footer-top{ display:grid; gap:2.25rem; grid-template-columns:1fr; }
@media(min-width:700px){ .footer-top{ grid-template-columns:1.4fr 1fr 1fr; } }
@media(min-width:1024px){ .footer-top{ grid-template-columns:1.6fr repeat(4,1fr); } }

.footer-brand .footer-logo{ height:36px; width:auto; margin-bottom:1rem; }
.footer-brand p{ font-size:var(--fs-small); color:var(--navy-200); max-width:34ch; }
.footer-col h4{ color:#fff; font-size:var(--fs-small); letter-spacing:var(--tracking-label); text-transform:uppercase; margin:0 0 1rem; }
.footer-col ul{ list-style:none; display:flex; flex-direction:column; gap:.6rem; }
.footer-col a{ color:var(--navy-200); font-size:var(--fs-small); }
.footer-col a:hover{ color:#fff; }
.footer-eco p{ font-size:var(--fs-small); color:var(--navy-200); margin:0; }
.footer-eco .eco-label{ color:#fff; display:block; margin-bottom:.4rem; font-family:var(--font-head); font-weight:var(--fw-medium); }

.footer-bottom{
  display:flex; flex-wrap:wrap; align-items:center; gap:.75rem 1.25rem;
  margin-top:2.5rem; padding-top:1.5rem; border-top:1px solid rgba(255,255,255,.1);
  font-size:var(--fs-small);
}
.footer-bottom a{ color:var(--navy-200); }
.footer-bottom a:hover{ color:#fff; }
.footer-bottom .sep{ color:rgba(255,255,255,.25); }
.footer-bottom .dcat{ color:#fff; font-family:var(--font-head); font-weight:var(--fw-semibold); }
.footer-social{ display:inline-flex; gap:.6rem; margin-left:auto; }
.footer-social a{
  width:38px; height:38px; border-radius:var(--r-sm); display:inline-flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.06); color:#fff; transition:background var(--t-fast), transform var(--t-fast);
}
.footer-social a:hover{ background:var(--teal); transform:translateY(-2px); color:#fff; }
.footer-social svg{ width:18px; height:18px; }

/* -------------------------------------------------------------------------
   11) Yardımcılar
   ------------------------------------------------------------------------- */
.mt-0{ margin-top:0; } .mb-0{ margin-bottom:0; }
.text-center{ text-align:center; }
.flow > * + *{ margin-top:1rem; }
.lead{ font-size:var(--fs-lead); color:var(--color-text-muted); }
.prose p{ font-size:var(--fs-body); color:var(--color-text-muted); }
.prose p + p{ margin-top:1rem; }

/* -------------------------------------------------------------------------
   12) RESPONSIVE — header / mobil menü
   ------------------------------------------------------------------------- */
@media(min-width:921px){
  .hero-grid{ grid-template-columns:1.05fr .95fr; }
}

/* Mobil: hamburger devreye girer (loyexo-ui mqDesktop = 921px) */
@media(max-width:920px){
  .header-inner .nav-toggle{ display:inline-flex; }
  .header-inner .header-cta{ display:none; }

  .nav{
    position:fixed; inset:var(--header-h) 0 0 auto; width:min(360px,86vw);
    flex-direction:column; align-items:stretch; gap:0; margin:0;
    background:var(--white); border-left:1px solid var(--hairline);
    box-shadow:var(--shadow-lg);
    padding:1.25rem var(--gutter) 2rem;
    transform:translateX(105%);
    transition:transform var(--t-base); overflow-y:auto;
  }
  .nav.is-open{ transform:translateX(0); }

  .nav-list{ flex-direction:column; align-items:stretch; gap:.15rem; width:100%; }
  .nav-link{ width:100%; padding:.8rem .25rem; font-size:var(--fs-body); border-bottom:1px solid var(--navy-050); }
  [data-header].is-dark .nav-link{ color:var(--navy); }
  [data-header].is-dark .nav-link:hover{ color:var(--teal); }

  /* Dropdown menüler mobilde açık/akış içinde */
  [data-dropdown]{ width:100%; }
  .dd-trigger{ width:100%; justify-content:space-between; }
  .dd-menu{
    position:static; min-width:0; opacity:1; visibility:visible; transform:none;
    box-shadow:none; border:0; border-left:2px solid var(--teal-100);
    border-radius:0; margin:0 0 .4rem; padding:.2rem 0 .2rem .6rem;
    max-height:0; overflow:hidden; transition:max-height var(--t-base);
  }
  [data-dropdown].is-open .dd-menu{ max-height:520px; }
  .dd-item a{ padding:.55rem .4rem; }

  .nav .header-cta-mobile{ display:block; margin-top:1rem; }
  [data-lang-switch]{ margin-top:1rem; }
  .lang-trigger{ width:100%; justify-content:space-between; }
  .lang-menu{ position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:0; padding-left:.6rem; }

  body.nav-open{ overflow:hidden; }
}

@media(min-width:921px){
  .nav .header-cta-mobile{ display:none; }
}

/* -------------------------------------------------------------------------
   13) Reduced motion
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; scroll-behavior:auto!important; }
  .card:hover,.btn:hover,.hero-tile:hover,.footer-social a:hover{ transform:none!important; }
}