/* ============================================================
   LOYEXO — alt3 "Editöryel Anlatı"
   Tipografi öncelikli, sıcak, hikâye anlatan editöryel düzen.
   brand-tokens.css ÜZERİNE kurulur. LIGHT tema.
   İlham: Mailchimp editorial, Apple ürün anlatısı, Pitch.
   Marka renk + tip ölçeği korunur; sadece sıcak nötrler eklenir.
   ============================================================ */

/* -------------------- 0. ALT3 TEMA DEĞİŞKENLERİ -------------------- */
:root{
  /* Sıcak editöryel kâğıt zemini (marka navy/teal/orange korunur) */
  --paper:        #FBF8F2;   /* ana sıcak kâğıt */
  --paper-2:      #F4EEE3;   /* ikincil sıcak panel */
  --paper-3:      #EBE2D2;   /* daha derin sıcak ton */
  --line-warm:    #E4D9C6;   /* sıcak ayraç çizgisi */
  --line-soft:    #EEE6D8;
  --body-ink:     #2A2A28;   /* gövde metni (sıcak ink) */

  /* Editöryel vurgular — marka turuncusu sıcak aksan rolünde */
  --accent:       var(--navy);
  --accent-warm:  var(--orange-700);  /* numaralı işaret / vurgu */
  --accent-teal:  var(--teal);

  /* Editöryel tipografi ritmi */
  --measure:      40rem;   /* okuma ölçüsü */
  --lead-loose:   1.85;    /* geniş satır aralığı (gövde) */
  --track-eyebrow:.16em;

  /* Akışkan editöryel tip ölçeği (marka ölçeğinin üstünde) */
  --fs-editorial: clamp(2.6rem, 1.3rem + 5.4vw, 4.6rem);
  --fs-pull:      clamp(1.5rem, 1.05rem + 2vw, 2.4rem);
}

/* -------------------- 1. TABAN (brand reset üzerine) -------------------- */
/* overflow-x:clip — köke uygulanır; sticky header'ı bozmadan, mobil off-canvas
   menü (position:fixed; translateX(100%)) kaynaklı yatay taşmayı (phantom 390px)
   keser. body'de hidden yerine clip; sticky scroll-container oluşmaz. */
html{ overflow-x:clip; }
body{
  background:var(--paper);
  color:var(--body-ink);
  line-height:var(--lead-loose);
  overflow-x:clip;
  max-width:100%;
}
h1,h2,h3,h4{ color:var(--navy); text-wrap:balance; }
::selection{ background:var(--navy); color:#fff; }
a{ color:inherit; }

/* Konteyner — brand .lx-container'a sıcak editöryel ek genişlikler */
.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); }
.container-narrow{ max-width:var(--container-sm); }
.measure{ max-width:var(--measure); }

/* Bölüm sarmalları — editöryel dikey ritim */
.section{ padding-block:clamp(3.5rem,2rem + 6vw,7rem); }
.section--tight{ padding-block:clamp(2.5rem,1.5rem + 4vw,4.5rem); }
.section--paper-2{ background:var(--paper-2); }
.section--paper-3{ background:var(--paper-3); }
.section--ink{ background:var(--navy-900); color:#D8E0EF; }
.section--ink h1,.section--ink h2,.section--ink h3{ color:#fff; }

/* Grid yardımcıları */
.grid{ display:grid; gap:var(--sp-5); }
.grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; }
@media (min-width:768px){
  .grid-2{ grid-template-columns:repeat(2,1fr); }
  .grid-3{ grid-template-columns:repeat(2,1fr); }
  .grid-4{ 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); }
}

/* -------------------- 2. EDİTÖRYEL TİPOGRAFİ ÖGELERİ -------------------- */
/* Bölüm etiketi (eyebrow) — numaralı bölüm işaretiyle */
.eyebrow{
  display:inline-flex; align-items:center; gap:var(--sp-3);
  font-family:var(--font-head);
  font-size:var(--fs-label);
  font-weight:var(--fw-bold);
  letter-spacing:var(--track-eyebrow);
  text-transform:uppercase;
  color:var(--accent-warm);
  margin:0 0 var(--sp-4);
}
.eyebrow[data-num]::before{
  content:attr(data-num);
  font-variant-numeric:tabular-nums;
  width:1.9em; height:1.9em;
  display:inline-flex; align-items:center; justify-content:center;
  border:1.5px solid currentColor; border-radius:var(--r-pill);
  letter-spacing:0; flex:none;
}
.section--ink .eyebrow{ color:var(--teal-400); }

/* Editöryel başlık ölçekleri */
.display{
  font-family:var(--font-head);
  font-size:var(--fs-editorial);
  font-weight:var(--fw-extra);
  letter-spacing:-.035em;
  line-height:1.04;
}
.h2{ font-size:var(--fs-h2); font-weight:var(--fw-bold); line-height:var(--lh-snug); letter-spacing:var(--tracking-tight); }
.h3{ font-size:var(--fs-h3); font-weight:var(--fw-semibold); }

/* Akış metni — geniş satır aralığı */
.lead{ font-family:var(--font-body); font-size:var(--fs-lead); line-height:1.65; color:var(--gray); }
.prose{ line-height:var(--lead-loose); color:var(--body-ink); }
.prose p + p{ margin-top:var(--sp-5); }

/* Alıntı vurgusu — büyük editöryel pull-quote */
.pullquote{
  font-family:var(--font-head);
  font-size:var(--fs-pull);
  font-weight:var(--fw-semibold);
  line-height:1.3;
  letter-spacing:-.02em;
  color:var(--navy);
  border-left:3px solid var(--accent-warm);
  padding-left:clamp(1.2rem,3vw,2.2rem);
  margin:0;
  text-wrap:balance;
}
.hl{ color:var(--teal); }
.hl-warm{ color:var(--accent-warm); }

/* Bölüm başlığı bloğu (asimetrik düzen) */
.section-head{ max-width:48rem; }
.section-head .lead{ margin-top:var(--sp-4); }
.mt-5{ margin-top:var(--sp-5); }
.mt-6{ margin-top:var(--sp-6); }
.mt-7{ margin-top:var(--sp-7); }

/* -------------------- 3. BUTONLAR -------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2);
  font-family:var(--font-head); font-weight:var(--fw-semibold);
  font-size:var(--fs-small); line-height:1;
  padding:.95rem 1.55rem; min-height:48px;
  border-radius:var(--r-pill); border:1.5px solid transparent;
  transition:transform var(--t-fast), background-color var(--t-base),
             border-color var(--t-base), color var(--t-base), box-shadow var(--t-base);
  white-space:nowrap; cursor:pointer;
}
.btn:active{ transform:translateY(1px); }

.btn-primary{ background:var(--navy); color:#fff; box-shadow:var(--shadow-xs); }
.btn-primary:hover{ background:var(--navy-700); color:#fff; box-shadow:var(--shadow-md); }

.btn-secondary{ background:transparent; color:var(--navy); border-color:var(--navy); }
.btn-secondary:hover{ background:var(--navy); color:#fff; }

/* Koyu zeminde ikincil buton */
.section--ink .btn-secondary{ color:#fff; border-color:rgba(255,255,255,.55); }
.section--ink .btn-secondary:hover{ background:#fff; color:var(--navy-900); }

/* Metin bağlantısı (oklu) */
.btn-link{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:var(--font-head); font-weight:var(--fw-semibold);
  font-size:var(--fs-small); color:var(--navy); min-height:44px;
}
.btn-link:hover{ color:var(--teal); }
.btn-link .arrow{ transition:transform var(--t-base); }
.btn-link:hover .arrow{ transform:translateX(4px); }

.btn-row{ display:flex; flex-wrap:wrap; gap:var(--sp-4); align-items:center; }

/* -------------------- 4. HEADER (sticky, akıllı) -------------------- */
.site-header{
  position:sticky; top:0; z-index:var(--z-header);
  background:rgba(251,248,242,.82);
  backdrop-filter:saturate(180%) blur(12px);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid transparent;
  transition:background-color var(--t-base), border-color var(--t-base), box-shadow var(--t-base);
}
/* loyexo-ui.js: top → is-dark (şeffaf/koyu hero), kaydırınca → is-scrolled */
.site-header.is-dark:not(.is-scrolled){
  background:transparent; border-bottom-color:transparent;
}
.site-header.is-dark:not(.is-scrolled) .nav-list > li > a,
.site-header.is-dark:not(.is-scrolled) .nav-trigger,
.site-header.is-dark:not(.is-scrolled) .lang-trigger{ color:#fff; }
.site-header.is-dark:not(.is-scrolled) .nav-toggle span{ background:#fff; }
.site-header.is-scrolled{
  background:rgba(251,248,242,.95);
  border-bottom-color:var(--line-warm);
  box-shadow:0 6px 24px rgba(28,49,95,.06);
}

.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--sp-5); height:var(--header-h);
}
.brand{ display:inline-flex; align-items:center; }
.brand-logo{ height:34px; width:auto; }

/* -------------------- 5. NAV (masaüstü) -------------------- */
.primary-nav{ display:none; }
@media (min-width:1024px){
  .primary-nav{ display:flex; align-items:center; gap:var(--sp-4); }
  .nav-cta-mobile{ display:none; }
}
.nav-list{ display:flex; align-items:center; gap:var(--sp-2); list-style:none; }
.nav-list > li{ position:relative; }
.nav-list > li > a,
.nav-trigger{
  display:inline-flex; align-items:center; gap:.4em;
  font-family:var(--font-head); font-weight:var(--fw-semibold);
  font-size:var(--fs-small); color:var(--navy);
  padding:.6rem .8rem; min-height:44px;
  background:transparent; border:0; border-radius:var(--r-sm);
  cursor:pointer; transition:color var(--t-fast);
}
.nav-list > li > a:hover,
.nav-trigger:hover{ color:var(--teal); }
.nav-list > li > a[aria-current="page"]{ color:var(--navy); position:relative; }
.nav-list > li > a[aria-current="page"]::after{
  content:""; position:absolute; left:.8rem; right:.8rem; bottom:.45rem;
  height:2px; background:var(--accent-warm); border-radius:2px;
}
/* Dropdown ok işareti */
.nav-trigger::after{
  content:""; width:.55em; height:.55em; flex:none;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-1px);
  transition:transform var(--t-base); margin-left:.2em;
}
.has-dropdown.is-open .nav-trigger::after{ transform:rotate(-135deg) translateY(-1px); }

/* Dropdown paneli (masaüstü) */
.dropdown-menu{
  position:absolute; top:calc(100% + 8px); left:0;
  min-width:266px; background:var(--paper);
  border:1px solid var(--line-warm); border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg); padding:var(--sp-3);
  opacity:0; visibility:hidden; transform:translateY(6px);
  transition:opacity var(--t-base), transform var(--t-base), visibility var(--t-base);
}
.has-dropdown.is-open .dropdown-menu{ opacity:1; visibility:visible; transform:translateY(0); }
.dropdown-menu a{
  display:block; padding:.7rem .85rem; border-radius:var(--r-sm);
  font-family:var(--font-body); font-size:var(--fs-small); font-weight:var(--fw-medium);
  color:var(--body-ink); transition:background-color var(--t-fast), color var(--t-fast);
}
.dropdown-menu a:hover{ background:var(--paper-2); color:var(--teal); }

/* -------------------- 6. HEADER SAĞ: DİL + CTA -------------------- */
.header-actions{ display:flex; align-items:center; gap:var(--sp-3); }

.header-cta{ display:none; }
@media (min-width:1024px){ .header-cta{ display:inline-flex; } }

/* Dil değiştirici */
.lang-switch{ position:relative; display:none; }
@media (min-width:1024px){ .lang-switch{ display:block; } }
.lang-trigger{
  display:inline-flex; align-items:center; gap:.4em;
  font-family:var(--font-head); font-weight:var(--fw-semibold);
  font-size:var(--fs-small); color:var(--navy);
  padding:.55rem .75rem; min-height:44px;
  background:transparent; border:1px solid transparent; border-radius:var(--r-sm);
  cursor:pointer; transition:border-color var(--t-fast), color var(--t-fast);
}
.lang-trigger::after{
  content:""; width:.5em; height:.5em;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-1px); transition:transform var(--t-base); margin-left:.15em;
}
.lang-switch.is-open .lang-trigger::after{ transform:rotate(-135deg) translateY(-1px); }
.lang-trigger:hover{ border-color:var(--line-warm); }
.lang-menu{
  position:absolute; top:calc(100% + 8px); right:0; min-width:120px;
  background:var(--paper); border:1px solid var(--line-warm);
  border-radius:var(--r-md); box-shadow:var(--shadow-lg); padding:var(--sp-2);
  opacity:0; visibility:hidden; transform:translateY(6px);
  transition:opacity var(--t-base), transform var(--t-base), visibility var(--t-base);
}
.lang-switch.is-open .lang-menu{ opacity:1; visibility:visible; transform:translateY(0); }
.lang-menu a{
  display:block; padding:.5rem .7rem; border-radius:var(--r-sm);
  font-family:var(--font-head); font-size:var(--fs-small); font-weight:var(--fw-medium); color:var(--body-ink);
}
.lang-menu a:hover{ background:var(--paper-2); color:var(--teal); }

/* -------------------- 7. MOBİL HAMBURGER + MENÜ -------------------- */
.nav-toggle{
  display:inline-flex; flex-direction:column; align-items:center; justify-content:center;
  gap:5px; width:46px; height:46px;
  background:transparent; border:1px solid var(--line-warm); border-radius:var(--r-md);
  cursor:pointer;
}
@media (min-width:1024px){ .nav-toggle{ display:none; } }
.nav-toggle span{
  width:20px; height:2px; background:var(--navy); border-radius:2px;
  transition:transform var(--t-base), opacity var(--t-base);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* Mobil açılır menü — loyexo-ui.js .is-open ekler */
@media (max-width:1023px){
  .primary-nav{
    position:fixed; inset:var(--header-h) 0 0 0;
    display:block; background:var(--paper);
    padding:var(--sp-5) var(--gutter) var(--sp-8);
    overflow-y:auto;
    transform:translateX(100%); visibility:hidden;
    transition:transform .32s cubic-bezier(.4,0,.2,1), visibility .32s;
    z-index:calc(var(--z-header) - 1);
  }
  .primary-nav.is-open{ transform:translateX(0); visibility:visible; }
  .nav-list{ flex-direction:column; align-items:stretch; gap:0; }
  .nav-list > li{ border-bottom:1px solid var(--line-soft); }
  .nav-list > li > a,
  .nav-trigger{
    width:100%; justify-content:space-between;
    font-size:var(--fs-h3); padding:var(--sp-4) 0; min-height:56px;
  }
  .nav-list > li > a[aria-current="page"]::after{ display:none; }
  .nav-list > li > a[aria-current="page"]{ color:var(--teal); }
  /* Mobil dropdown akordeon */
  .dropdown-menu{
    position:static; min-width:0; opacity:1; visibility:visible; transform:none;
    background:transparent; border:0; box-shadow:none; padding:0;
    display:grid; grid-template-rows:0fr;
    transition:grid-template-rows .3s cubic-bezier(.4,0,.2,1);
  }
  .has-dropdown.is-open .dropdown-menu{ grid-template-rows:1fr; padding-bottom:var(--sp-3); }
  .dropdown-menu > *{ min-height:0; }
  .dropdown-menu{ overflow:hidden; }
  .dropdown-menu a{ padding:var(--sp-3) 0 var(--sp-3) var(--sp-4); font-size:var(--fs-body); }
  .nav-cta-mobile{ margin-top:var(--sp-6); }
  .nav-cta-mobile .btn{ width:100%; }
}

/* -------------------- 8. HERO -------------------- */
.hero{
  position:relative;
  padding-block:clamp(7rem,5rem + 8vw,10rem) clamp(3rem,2rem + 4vw,5.5rem);
  background:
    radial-gradient(120% 90% at 90% 4%, rgba(42,143,138,.10), transparent 55%),
    radial-gradient(90% 80% at 0% 0%, rgba(28,49,95,.05), transparent 50%),
    var(--paper);
  overflow:hidden;
}
.hero-grid{ display:grid; gap:clamp(2rem,5vw,4rem); align-items:center; }
@media (min-width:1024px){ .hero-grid{ grid-template-columns:1.18fr .82fr; } }

.hero h1{
  font-family:var(--font-head);
  font-size:var(--fs-editorial);
  font-weight:var(--fw-extra);
  letter-spacing:-.035em; line-height:1.04;
  margin:var(--sp-4) 0 var(--sp-5);
}
.hero .lead{ max-width:38rem; margin-bottom:var(--sp-6); }

/* Güven şeridi */
.trust-strip{
  margin-top:clamp(2.5rem,4vw,4rem);
  padding-top:var(--sp-5);
  border-top:1px solid var(--line-warm);
  display:flex; flex-wrap:wrap; gap:var(--sp-4) var(--sp-6); align-items:center;
  list-style:none;
}
.trust-strip li{
  display:inline-flex; align-items:center; gap:.55em;
  font-family:var(--font-body); font-size:var(--fs-small); color:var(--gray); font-weight:var(--fw-medium);
}
.trust-strip li::before{
  content:""; width:7px; height:7px; border-radius:50%; background:var(--teal); flex:none;
}

/* Hero yan panosu (anlatı kartı) */
.hero-aside{
  position:relative; background:var(--paper-2);
  border:1px solid var(--line-warm); border-radius:var(--r-xl);
  padding:clamp(1.5rem,3vw,2.2rem); box-shadow:var(--shadow-md);
}
.hero-aside .stat{ padding-block:var(--sp-4); border-bottom:1px solid var(--line-warm); }
.hero-aside .stat:last-child{ border-bottom:0; }
.hero-aside .stat-num{
  font-family:var(--font-head); font-weight:var(--fw-extra);
  font-size:var(--fs-h3); color:var(--navy); letter-spacing:-.02em; line-height:1.15;
}
.hero-aside .stat-label{ font-size:var(--fs-small); color:var(--gray); margin-top:var(--sp-1); }

/* -------------------- 9. KARTLAR -------------------- */
.card{
  background:var(--paper); border:1px solid var(--line-warm);
  border-radius:var(--r-lg); padding:clamp(1.4rem,2.5vw,2rem);
  height:100%; display:flex; flex-direction:column;
  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:#D8CBB3; }
.section--paper-2 .card,
.section--paper-3 .card{ background:var(--paper); }

.card-num{
  font-family:var(--font-head); font-weight:var(--fw-extra);
  font-size:var(--fs-small); color:var(--accent-warm);
  display:inline-flex; align-items:center; justify-content:center;
  width:2.4rem; height:2.4rem; border-radius:var(--r-pill);
  border:1.5px solid var(--line-warm); margin-bottom:var(--sp-4);
  font-variant-numeric:tabular-nums; flex:none;
}
.card h3{ font-size:var(--fs-h3); margin-bottom:var(--sp-3); color:var(--navy); }
.card .card-body{ color:var(--body-ink); font-size:var(--fs-body); line-height:1.7; flex:1; }
.card .btn-link{ margin-top:var(--sp-4); }

/* Büyük öne çıkan kart (çift kullanım) */
.card-feature{
  background:var(--paper-2); border:1px solid var(--line-warm);
  border-radius:var(--r-xl); padding:clamp(1.8rem,3.5vw,2.8rem); height:100%;
}
.card-feature .tag{
  display:inline-block; font-family:var(--font-head); font-weight:var(--fw-bold);
  font-size:var(--fs-label); letter-spacing:.1em; text-transform:uppercase;
  color:var(--teal); margin-bottom:var(--sp-3);
}
.card-feature h3{ font-size:var(--fs-h3); color:var(--navy); }
.card-feature p{ color:var(--body-ink); line-height:1.7; }

/* -------------------- 10. KONUMLANMA — anlatı sütunları -------------------- */
.flow-col .flow-num{
  font-family:var(--font-head); font-weight:var(--fw-extra);
  font-size:clamp(2.2rem,1.5rem + 2vw,3rem);
  color:var(--accent-warm); letter-spacing:-.03em; line-height:1; margin-bottom:var(--sp-3);
}
.flow-col h3{ font-size:var(--fs-h3); margin-bottom:var(--sp-3); color:var(--navy); }
.flow-col p{ color:var(--body-ink); line-height:1.7; }

/* -------------------- 11. ÜRÜN SATIRLARI (numaralı editöryel liste) -------------------- */
.product-list{ display:grid; gap:0; border-top:1px solid var(--line-warm); }
.product-row{
  display:grid; grid-template-columns:auto 1fr; gap:var(--sp-2) var(--sp-4);
  align-items:start; padding:clamp(1.3rem,2.5vw,1.8rem) 0;
  border-bottom:1px solid var(--line-warm);
  transition:padding-left var(--t-base);
}
.product-row .p-desc{ grid-column:1 / -1; }
@media (min-width:768px){
  .product-row{ grid-template-columns:auto 16rem 1fr auto; align-items:center; gap:var(--sp-6); }
  .product-row .p-desc{ grid-column:auto; }
  .product-row:hover{ padding-left:var(--sp-4); }
}
.product-row .p-num{
  font-family:var(--font-head); font-weight:var(--fw-extra); font-size:var(--fs-h3);
  color:var(--paper-3); font-variant-numeric:tabular-nums; line-height:1;
}
.section--paper-2 .product-row .p-num{ color:#D8CBB3; }
.product-row .p-name{
  font-family:var(--font-head); font-weight:var(--fw-bold); font-size:var(--fs-h3);
  color:var(--navy); letter-spacing:-.01em;
}
.product-row .p-desc{ color:var(--body-ink); font-size:var(--fs-body); line-height:1.6; }
.product-row .p-go{
  display:inline-flex; align-items:center; gap:.4em;
  font-family:var(--font-head); font-weight:var(--fw-semibold); font-size:var(--fs-small); color:var(--navy);
}
.product-row .arrow{ transition:transform var(--t-base); }
.product-row:hover .p-go .arrow{ transform:translateX(4px); }
.product-row:hover .p-name{ color:var(--teal); }

/* -------------------- 12. SEKTÖR ETİKETLERİ -------------------- */
.tag-row{ display:flex; flex-wrap:wrap; gap:var(--sp-3); list-style:none; }
.tag-row li{
  font-family:var(--font-head); font-weight:var(--fw-semibold); font-size:var(--fs-small);
  color:var(--navy); background:var(--paper); border:1px solid var(--line-warm);
  border-radius:var(--r-pill); padding:.55rem 1.1rem;
}

/* -------------------- 13. LOGO DUVARI (gri placeholder) -------------------- */
/* brand-tokens'taki .logo-wall + .logo-chip ile uyumlu, editöryel çerçeve */
.logo-frame{
  border:1px solid var(--line-warm); border-radius:var(--r-lg);
  background:var(--paper); padding:clamp(1.5rem,3vw,2.5rem);
}
.logo-wall .logo-chip{
  border-color:var(--line-warm); color:var(--gray-400);
  height:52px; background:var(--paper);
}
.logo-wall .logo-chip:hover{ color:var(--navy); }

/* -------------------- 14. KAPANIŞ CTA BANDI -------------------- */
.cta-band{
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(42,143,138,.16), transparent 55%),
    radial-gradient(120% 140% at 0% 100%, rgba(28,49,95,.30), transparent 55%),
    var(--navy-900);
  border-radius:var(--r-xl); padding:clamp(2.5rem,5vw,4.5rem);
  text-align:center; color:#D8E0EF;
}
.cta-band h2{ color:#fff; max-width:24ch; margin-inline:auto; }
.cta-band .lead{ color:rgba(216,224,239,.9); max-width:48ch; margin:var(--sp-4) auto var(--sp-6); }
.cta-band .btn-row{ justify-content:center; }
.cta-band .btn-secondary{ color:#fff; border-color:rgba(255,255,255,.55); }
.cta-band .btn-secondary:hover{ background:#fff; color:var(--navy-900); }

/* -------------------- 15. FORM ALANLARI -------------------- */
.field{ margin-bottom:var(--sp-5); }
.field label{
  display:block; font-family:var(--font-head); font-weight:var(--fw-semibold);
  font-size:var(--fs-small); color:var(--navy); margin-bottom:var(--sp-2);
}
.field .req{ color:#C0392B; }
.field input, .field select, .field textarea{
  width:100%; font-family:var(--font-body); font-size:var(--fs-body); color:var(--ink);
  background:var(--paper); border:1.5px solid var(--line-warm); border-radius:var(--r-md);
  padding:.85rem 1rem; min-height:48px;
  transition:border-color var(--t-fast), box-shadow var(--t-fast);
}
.field textarea{ min-height:130px; resize:vertical; line-height:1.6; }
.field input::placeholder, .field textarea::placeholder{ color:#A89A82; }
.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 .hint{ font-size:var(--fs-label); color:var(--gray); margin-top:var(--sp-2); }
/* Hata durumu */
.field-error{ display:block; color:#C0392B; font-size:var(--fs-label); margin-top:var(--sp-2); }
.field [aria-invalid="true"]{ border-color:#C0392B; }
.field input[aria-invalid="true"]:focus,
.field textarea[aria-invalid="true"]:focus{ box-shadow:0 0 0 3px rgba(192,57,43,.16); }
/* Onay kutusu satırı */
.field-check{ display:flex; align-items:flex-start; gap:var(--sp-3); }
.field-check input{ width:auto; min-height:0; margin-top:.25rem; }
.field-check label{ margin:0; font-weight:var(--fw-medium); line-height:1.5; }
/* Form durum mesajı */
.form-status{
  border-radius:var(--r-md); padding:var(--sp-4) var(--sp-5);
  font-size:var(--fs-small); margin-bottom:var(--sp-5);
}
.form-status.is-success{ background:rgba(42,143,138,.12); color:var(--teal-700); border:1px solid rgba(42,143,138,.28); }
.form-status.is-error{ background:rgba(192,57,43,.08); color:#A93226; border:1px solid rgba(192,57,43,.22); }

/* -------------------- 16. FOOTER -------------------- */
.site-footer{
  background:var(--navy-900); color:#C2CCDD;
  padding-block:clamp(3rem,2rem + 4vw,4.5rem) var(--sp-6);
}
.site-footer h4{
  font-family:var(--font-head); font-weight:var(--fw-bold); font-size:var(--fs-small);
  text-transform:uppercase; letter-spacing:.06em; color:#fff; margin-bottom:var(--sp-4);
}
.footer-top{
  display:grid; gap:var(--sp-7) var(--sp-6); grid-template-columns:1fr;
}
@media (min-width:640px){ .footer-top{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .footer-top{ grid-template-columns:1.8fr 1fr 1fr 1fr 1fr; } }
.footer-brand img{ height:34px; width:auto; margin-bottom:var(--sp-4); }
.footer-brand p{ color:#9FB0C8; font-size:var(--fs-small); max-width:34ch; line-height:1.7; }
.footer-col ul{ display:grid; gap:var(--sp-3); list-style:none; }
.footer-col a{ color:#C2CCDD; font-size:var(--fs-small); transition:color var(--t-fast); }
.footer-col a:hover{ color:var(--teal-400); }
.footer-eco{ color:#9FB0C8; font-size:var(--fs-small); margin-bottom:var(--sp-3); }
.footer-bottom{
  margin-top:clamp(2.5rem,4vw,3.5rem); padding-top:var(--sp-5);
  border-top:1px solid rgba(255,255,255,.12);
  display:flex; flex-wrap:wrap; gap:var(--sp-3) var(--sp-5);
  align-items:center; justify-content:space-between;
}
.footer-legal{ display:flex; flex-wrap:wrap; gap:var(--sp-2) var(--sp-4); align-items:center; margin:0; }
.footer-legal strong{ color:#fff; font-family:var(--font-head); }
.footer-legal span,
.footer-legal a{ color:#9FB0C8; font-size:var(--fs-label); }
.footer-legal a:hover{ color:var(--teal-400); }
.footer-social{ display:flex; gap:var(--sp-3); }
.footer-social a{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:var(--r-pill);
  border:1px solid rgba(255,255,255,.18); color:#C2CCDD;
  transition:color var(--t-fast), border-color var(--t-fast), background-color var(--t-fast);
}
.footer-social a:hover{ color:#fff; border-color:var(--teal-400); background:rgba(42,143,138,.18); }

/* -------------------- 17. YARDIMCI -------------------- */
.skip-link{
  position:absolute; left:var(--sp-4); top:-60px;
  background:var(--navy); color:#fff; padding:.7rem 1.2rem; border-radius:var(--r-md);
  z-index:var(--z-overlay); font-family:var(--font-head); font-weight:var(--fw-semibold);
  font-size:var(--fs-small); transition:top var(--t-base);
}
.skip-link:focus{ top:var(--sp-4); color:#fff; }
.text-center{ text-align:center; }

/* -------------------- 18. RESPONSIVE İNCE AYAR -------------------- */
@media (max-width:359px){
  .container{ padding-inline:var(--sp-4); }
  .hero .btn-row .btn{ width:100%; }
  .hero .btn-row{ flex-direction:column; align-items:stretch; }
}
@media (min-width:1440px){
  :root{ --measure:42rem; }
}