/**
 * KOZLOW STUDIO · GENEL VE BİLEŞEN STİLLERİ (global.css)
 * -------------------------------------------------------------------------
 * Kozlow Studio kurumsal web platformunun tüm temel tasarım sistemi,
 * açık ve koyu tema modları, fontları, bileşenleri ve sayfa düzenleri.
 *
 * İÇİNDEKİLER / BÖLÜM SIRALAMASI:
 *  00. YAZI TİPLERİ VE FONT TANIMLARI (@font-face)
 *  01. TASARIM DEĞİŞKENLERİ - AÇIK MOD (LIGHT THEME)
 *  02. TASARIM DEĞİŞKENLERİ & UYARLAMALARI - KOYU MOD (DARK THEME)
 *  03. TEMEL SIFIRLAMA & KUTU MODELİ (RESET & BASE)
 *  04. DÜZEN, KONTEYNER VE GENEL YARDIMCI SINIFLAR
 *  05. BUTONLAR, ETİKETLER VE METİN BAĞLANTILARI (BUTTONS & PROSE)
 *  06. FORM TEMEL ELEMANLARI VE BİLDİRİMLER (FORMS & ALERTS)
 *  07. YERLEŞİM VE TEMA RENK VURGULARI (THEME & SPACING)
 *  08. GENİŞLİK VE ANİMASYON KADEMELENDİRME (WIDTH & STAGGER)
 *  09. ANİMASYONLAR, HAREKET VE SAYFA GEÇİŞLERİ (ANIMATIONS & VIEW-TRANSITION)
 *  10. ÜST BİLGİ VE MASAÜSTÜ MENÜ (HEADER & NAVIGATION)
 *  11. MOBİL MENÜ VE ARAYÜZ OVERLAY (MOBILE MENU)
 *  12. ALT BİLGİ & SABİT İLETİŞİM (FOOTER & FLOATING CTA)
 *  13. HERO VE GİRİŞ BÖLÜMLERİ (HERO & PAGE HERO)
 *  14. SLIDER VE KAYDIRICILAR (TS-SLIDER & AG-SLIDER)
 *  15. BÖLÜM BAŞLIKLARI, HİKAYE VE MANİFESTO (SECTION HEAD & STORY)
 *  16. HİZMETLER, ROZET BULUTU VE İSTATİSTİKLER (SERVICES & STATS)
 *  17. MÜŞTERİ YORUMLARI, SSS VE EYLEM ÇAĞRISI (TESTIMONIALS & FAQ)
 *  18. BENTO GRID VE VARYASYONLARI (BENTO GRID SYSTEM)
 *  19. KARTLAR, PROJELER VE EKİP (CARDS, PROJECTS & TEAM)
 *  20. FİYATLANDIRMA VE PAKETLER (PRICING & PACKAGES)
 *  21. LİSTELEME, ARAMA VE SAYFALAMA (LISTING & FILTERS)
 *  22. İÇERİK DETAY SAYFALARI (BLOG, MAKALE VE PROJE DETAY)
 *  23. ÜRÜN VE PAKET DETAY SAYFASI (PRODUCT & PACKAGE DETAIL)
 *  24. İLETİŞİM FORMU VE KANALLARI (CONTACT FORM)
 *  25. E-TİCARET, SEPET VE SİPARİŞ (COMMERCE & CART)
 *  26. KULLANICI HESABI VE PROFİL (ACCOUNT & AUTH)
 *  27. MEDYA MODALLARI VE LIGHTBOX (MEDIA DIALOG & LIGHTBOX)
 * -------------------------------------------------------------------------
 */

/* ==========================================================================
   00. YAZI TİPLERİ VE FONT TANIMLARI (@font-face)
   Plus Jakarta Sans, Inter ve Fraunces değişken font tanımları
   ========================================================================== */

@font-face {
  font-family: Plus Jakarta Sans Variable;
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(../lib/fonts/plus-jakarta-sans-cyrillic-ext.woff2)
    format("woff2-variations");
  unicode-range:
    U+460-52F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: Plus Jakarta Sans Variable;
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(../lib/fonts/plus-jakarta-sans-vietnamese.woff2)
    format("woff2-variations");
  unicode-range:
    U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301,
    U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: Plus Jakarta Sans Variable;
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(../lib/fonts/plus-jakarta-sans-latin-ext.woff2)
    format("woff2-variations");
  unicode-range:
    U+100-11D, U+120-12F, U+132-15D, U+160-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7,
    U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
    U+2020, U+20A0-20AB, U+20AD-20B9, U+20BB-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

/* Türkçe'ye özgü Ğ ğ İ Ş ş ve ₺ için küçük alt küme: 22 KB'lık latin-ext yerine ~3 KB iner */
@font-face {
  font-family: Plus Jakarta Sans Variable;
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(../lib/fonts/plus-jakarta-sans-tr.woff2) format("woff2-variations");
  unicode-range: U+11E-11F, U+130, U+15E-15F, U+20BA;
}

@font-face {
  font-family: Plus Jakarta Sans Variable;
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(../lib/fonts/plus-jakarta-sans-latin.woff2)
    format("woff2-variations");
  unicode-range:
    U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: Inter Variable;
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(../lib/fonts/inter-cyrillic-ext.woff2) format("woff2-variations");
  unicode-range:
    U+460-52F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: Inter Variable;
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(../lib/fonts/inter-cyrillic.woff2) format("woff2-variations");
  unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116;
}

@font-face {
  font-family: Inter Variable;
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(../lib/fonts/inter-greek-ext.woff2) format("woff2-variations");
  unicode-range: U+1F??;
}

@font-face {
  font-family: Inter Variable;
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(../lib/fonts/inter-greek.woff2) format("woff2-variations");
  unicode-range: U+370-377, U+37A-37F, U+384-38A, U+38C, U+38E-3A1, U+3A3-3FF;
}

@font-face {
  font-family: Inter Variable;
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(../lib/fonts/inter-vietnamese.woff2) format("woff2-variations");
  unicode-range:
    U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301,
    U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: Inter Variable;
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(../lib/fonts/inter-latin-ext.woff2) format("woff2-variations");
  unicode-range:
    U+100-11D, U+120-12F, U+132-15D, U+160-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7,
    U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
    U+2020, U+20A0-20AB, U+20AD-20B9, U+20BB-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

/* Türkçe'ye özgü Ğ ğ İ Ş ş ve ₺ için küçük alt küme: 85 KB'lık latin-ext yerine ~3 KB iner */
@font-face {
  font-family: Inter Variable;
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(../lib/fonts/inter-tr.woff2) format("woff2-variations");
  unicode-range: U+11E-11F, U+130, U+15E-15F, U+20BA;
}

@font-face {
  font-family: Inter Variable;
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(../lib/fonts/inter-latin.woff2) format("woff2-variations");
  unicode-range:
    U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: Fraunces Variable;
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(../lib/fonts/fraunces-vietnamese.woff2) format("woff2-variations");
  unicode-range:
    U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301,
    U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: Fraunces Variable;
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(../lib/fonts/fraunces-latin-ext.woff2) format("woff2-variations");
  unicode-range:
    U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: Fraunces Variable;
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(../lib/fonts/fraunces-latin.woff2) format("woff2-variations");
  unicode-range:
    U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   01. TASARIM DEĞİŞKENLERİ - ORTAK (İKİ TEMADA DA AYNI)
   Yuvarlaklıklar, ölçüler, animasyon süreleri, yazı tipleri ve her iki temada aynı kalan renkler
   ========================================================================== */

:root {
  --brand-contrast: #ffffff;
  --accent-contrast: #000000;
  --glass-blur: blur(18px) saturate(160%);
  --focus: var(--brand-text);
  --r-xs: 8px;
  --r-sm: 14px;
  --r: 20px;
  --r-lg: 28px;
  --r-xl: 36px;
  --r-pill: 999px;
  --frame: 12px;
  --container: 1320px;
  --gutter: clamp(16px, 4vw, 40px);
  --section-space: clamp(4.5rem, 9vw, 8.5rem);
  --header-h: 72px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-1: 0.2s;
  --dur-2: 0.45s;
  --dur-3: 0.8s;
  --stagger: 70ms;
  --rise: 26px;
  --font-display:
    "Plus Jakarta Sans Variable", "Plus Jakarta Sans", system-ui, -apple-system,
    "Segoe UI", Roboto, Arial, sans-serif;
  --font-text:
    "Inter Variable", "Inter", system-ui, -apple-system, "Segoe UI", Roboto,
    Arial, sans-serif;
}

/* ==========================================================================
   02. TASARIM DEĞİŞKENLERİ - AÇIK MOD (LIGHT THEME)
   Varsayılan tema: <html> üzerinde data-theme yoksa da bu renkler geçerlidir (:root).
   ========================================================================== */

:root,
[data-theme="light"] {
  /* --- Marka ve Vurgu Renkleri --- */
  --brand: #2447f0;
  --accent: #ff6b3d;

  --canvas: #f3f4f7;
  --surface: #fff;
  --surface-2: #f7f8fb;
  --ink: #0b1020;
  --ink-2: #252b3d;
  --muted: #596074;
  --line: #0b102017;
  --line-strong: #0b102029;
  --brand-deep: color-mix(in srgb, var(--brand) 70%, #040822);
  --brand-soft: color-mix(in srgb, var(--brand) 9%, #fff);
  --brand-tint: color-mix(in srgb, var(--brand) 18%, #fff);
  --brand-text: color-mix(in srgb, var(--brand) 78%, var(--ink));
  --night: color-mix(in srgb, var(--brand) 16%, #070a17);
  --night-2: color-mix(in srgb, var(--brand) 26%, #0b1024);
  --accent-text: color-mix(in srgb, var(--accent) 62%, var(--ink));
  --accent-on-dark: color-mix(in srgb, var(--accent) 72%, #fff);
  --on-dark: #f4f6ff;
  --on-dark-muted: #f4f6ffbd;
  --glass-dark: rgba(255, 255, 255, 0.15);
  --glass-dark-strong: rgba(255, 255, 255, 0.25);
  --glass-dark-line: rgba(255, 255, 255, 0.24);
  --glass-light: rgba(255, 255, 255, 0.82);
  --glass-light-line: rgba(255, 255, 255, 0.9);
  --shadow-sm: 0 1px 2px #0b10200f, 0 4px 14px #0b10200d;
  --shadow: 0 22px 44px -26px #0b102061;
  --shadow-lg: 0 44px 90px -44px #0b102080;
  --glass-shadow: 0 24px 50px -24px #0408228c, inset 0 1px 0 #ffffff47;
}

.corners-soft {
  --r-xs: 6px;
  --r-sm: 10px;
  --r: 14px;
  --r-lg: 20px;
  --r-xl: 26px;
}

.corners-sharp {
  --r-xs: 2px;
  --r-sm: 4px;
  --r: 6px;
  --r-lg: 8px;
  --r-xl: 10px;
  --r-pill: 8px;
}

.font-serif {
  --font-display: "Fraunces Variable", Georgia, "Times New Roman", serif;
}

.frame-off {
  --frame: 0px;
}

@media (width<=760px) {
  :root {
    --frame: 8px;
    --header-h: 64px;
  }

  .frame-off {
    --frame: 0px;
  }
}

/* ==========================================================================
   03. TASARIM DEĞİŞKENLERİ & UYARLAMALARI - KOYU MOD (DARK THEME)
   Koyu mod renk paleti, değişkenler, sistem tercihi ve arayüz uyarlamaları
   ========================================================================== */

/* --- Koyu Mod Renk Değişkenleri --- */
:root[data-theme="dark"],
[data-theme="dark"] {
  /* Marka ve Vurgu Renkleri (Koyu Mod) */
  --brand: #3b5bfd;
  --accent: #ff7d54;

  /* Arayüz Zemin ve Metin Renkleri */
  --canvas: #090d16;
  --surface: #111726;
  --surface-2: #182035;
  --ink: #f1f5f9;
  --ink-2: #cbd5e1;
  --muted: #94a3b8;
  --line: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.18);
  --brand-deep: color-mix(in srgb, var(--brand) 65%, #ffffff);
  --brand-soft: color-mix(in srgb, var(--brand) 20%, #111726);
  --brand-tint: color-mix(in srgb, var(--brand) 32%, #111726);
  --brand-text: color-mix(in srgb, var(--brand) 45%, #93c5fd);
  --night: #060911;
  --night-2: #0b1020;
  --accent-text: color-mix(in srgb, var(--accent) 70%, #ffffff);
  --accent-on-dark: color-mix(in srgb, var(--accent) 80%, #ffffff);
  --on-dark: #f8fafc;
  --on-dark-muted: #94a3b8;
  --glass-dark: rgba(255, 255, 255, 0.14);
  --glass-dark-strong: rgba(255, 255, 255, 0.24);
  --glass-dark-line: rgba(255, 255, 255, 0.22);
  --glass-light: rgba(14, 22, 38, 0.84);
  --glass-light-line: rgba(255, 255, 255, 0.14);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4), 0 4px 14px rgba(0, 0, 0, 0.3);
  --shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.7);
  --shadow-lg: 0 40px 80px -40px rgba(0, 0, 0, 0.85);
  --glass-shadow:
    0 24px 50px -24px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Sistem Karanlık Mod Tercihi (Varsayılan seçim açık değilse) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --brand: #3b5bfd;
    --accent: #ff7d54;
    --canvas: #090d16;
    --surface: #111726;
    --surface-2: #182035;
    --ink: #f1f5f9;
    --ink-2: #cbd5e1;
    --muted: #94a3b8;
    --line: rgba(255, 255, 255, 0.09);
    --line-strong: rgba(255, 255, 255, 0.18);
    --brand-deep: color-mix(in srgb, var(--brand) 65%, #ffffff);
    --brand-soft: color-mix(in srgb, var(--brand) 20%, #111726);
    --brand-tint: color-mix(in srgb, var(--brand) 32%, #111726);
    --brand-text: color-mix(in srgb, var(--brand) 45%, #93c5fd);
    --night: #060911;
    --night-2: #0b1020;
    --accent-text: color-mix(in srgb, var(--accent) 70%, #ffffff);
    --accent-on-dark: color-mix(in srgb, var(--accent) 80%, #ffffff);
    --on-dark: #f8fafc;
    --on-dark-muted: #94a3b8;
    --glass-dark: rgba(255, 255, 255, 0.06);
    --glass-dark-strong: rgba(255, 255, 255, 0.12);
    --glass-dark-line: rgba(255, 255, 255, 0.12);
    --glass-light: rgba(17, 23, 38, 0.75);
    --glass-light-line: rgba(255, 255, 255, 0.1);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4), 0 4px 14px rgba(0, 0, 0, 0.3);
    --shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.7);
    --shadow-lg: 0 40px 80px -40px rgba(0, 0, 0, 0.85);
    --glass-shadow:
      0 24px 50px -24px rgba(0, 0, 0, 0.9),
      inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }
}

/* --- Koyu Mod Bileşen Uyarlamaları --- */
[data-theme="dark"] body {
  background-color: var(--canvas);
  color: var(--ink);
}

/* Koyu modda logo değişimi */
[data-theme="dark"] .brand-logo--dark {
  display: none !important;
}
[data-theme="dark"] .brand-logo--light {
  display: block !important;
}

/* Koyu mod form girdi alanları */
[data-theme="dark"]
  :is(
    .field,
    .commerce-page,
    .commerce-add,
    .commerce-reviews,
    .listing-filters
  )
  :is(input:not([type="checkbox"], [type="radio"]), select, textarea) {
  background-color: var(--surface-2);
  color: var(--ink);
  border-color: var(--line-strong);
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: var(--muted);
}

/* Koyu mod kartlar, açılır pencereler ve yüzeyler */
[data-theme="dark"] .color-soft {
  background-color: var(--surface-2);
}
[data-theme="dark"] .desktop-nav .submenu {
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
[data-theme="dark"] .mobile-menu-overlay {
  background-color: var(--surface);
  color: var(--ink);
}
[data-theme="dark"] .card,
[data-theme="dark"] .form-card,
[data-theme="dark"] .bento-tile,
[data-theme="dark"] .price-card,
[data-theme="dark"] .quote-card,
[data-theme="dark"] .commerce-box,
[data-theme="dark"] .account-nav,
[data-theme="dark"] .account-card,
[data-theme="dark"] .commerce-line,
[data-theme="dark"] .fact-panel,
[data-theme="dark"] .product-shell {
  background-color: var(--surface);
  border-color: var(--line);
}
[data-theme="dark"] code,
[data-theme="dark"] pre {
  background-color: var(--surface-2);
  color: #f1f5f9;
}
[data-theme="dark"] hr {
  border-color: var(--line);
}

/* ==========================================================================
   03. TEMEL SIFIRLAMA & KUTU MODELİ (RESET & BASE)
   Tüm tarayıcılar için normalize kuralları, kutu modeli ve temel HTML elemanları
   ========================================================================== */

*,
:before,
:after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + var(--frame) + 2rem);
}

body {
  background: var(--canvas);
  color: var(--ink);
  font: 400 1.0625rem/1.65 var(--font-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizelegibility;
  margin: 0;
  overflow-x: clip;
}

[hidden] {
  display: none !important;
}

img,
svg,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

.icon {
  flex: none;
}

a {
  color: inherit;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}

a:hover {
  color: var(--brand-text);
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  letter-spacing: -0.025em;
  text-wrap: balance;
  margin: 0;
  font-weight: 600;
  line-height: 1.08;
}

p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

ul,
ol {
  padding: 0;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

:where(h1, h2, h3, h4) :is(em:not(:has(.w)), em .w > span) {
  color: var(--brand-text);
  background: linear-gradient(
    100deg,
    var(--brand) 5%,
    color-mix(in srgb, var(--brand) 45%, var(--accent)) 60%,
    var(--accent) 100%
  );
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  font-style: normal;
}

:is(
    .color-dark,
    .color-brand,
    .ag-hero,
    .page-hero.has-image,
    .ag-cta,
    .footer-panel
  )
  :where(h1, h2, h3, h4)
  :is(em:not(:has(.w)), em .w > span) {
  background-image: linear-gradient(
    100deg,
    color-mix(in srgb, var(--brand) 30%, #fff) 0%,
    var(--accent-on-dark) 100%
  );
}

@media (forced-colors: active) {
  :where(h1, h2, h3, h4) :is(em, em .w > span) {
    -webkit-text-fill-color: currentColor;
    background: 0 0;
  }
}

/* ==========================================================================
   04. DÜZEN, KONTEYNER VE GENEL YARDIMCI SINIFLAR
   Container genişlikleri, ekran okuyucu yardımcıları, rozetler ve küçük başlıklar
   ========================================================================== */

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

.skip-link {
  z-index: 100;
  border-radius: var(--r-sm);
  background: var(--ink);
  color: #fff;
  padding: 0.75rem 1rem;
  position: absolute;
  top: -4rem;
  left: 1rem;
}

.skip-link:focus {
  top: 1rem;
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 6px;
}

:is(
  .color-dark,
  .color-brand,
  .ag-hero,
  .page-hero.has-image,
  .ag-cta,
  .footer-panel,
  .mobile-menu,
  .media-dialog
) {
  --focus: #fff;
}

.preview-notice {
  z-index: 60;
  color: #3d2d00;
  text-align: center;
  background: #ffe7a3;
  padding: 0.6rem 1rem;
  font-size: 0.9rem;
  position: relative;
}

.kicker {
  font: 600 0.78rem/1.2 var(--font-text);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-text);
  align-items: center;
  gap: 0.55rem;
  display: inline-flex;
}

.kicker-dot {
  background: var(--accent);
  width: 8px;
  height: 8px;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent);
  border-radius: 50%;
}

.kicker-glass {
  border-radius: var(--r-pill);
  background: var(--glass-dark);
  border: 1px solid var(--glass-dark-line);
  color: #fff;
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  padding: 0.45rem 0.9rem 0.45rem 0.7rem;
}

.chip {
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-2);
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.85rem;
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.3;
  text-decoration: none;
  display: inline-flex;
}

a.chip:hover,
button.chip:hover {
  border-color: var(--brand);
  color: var(--brand-text);
}

.chip.is-active {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

button.chip {
  cursor: pointer;
}

.small-heading {
  font: 600 0.78rem/1.3 var(--font-text);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 1rem;
}

.muted {
  color: var(--muted);
}

/* ==========================================================================
   05. BUTONLAR, ETİKETLER VE METİN BAĞLANTILARI (BUTTONS & PROSE)
   Birincil, açık, cam efektli ve hayalet butonlar ile biçimlendirilmiş metinler
   ========================================================================== */

.button-row {
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 2rem;
  display: flex;
}

.button {
  border-radius: var(--r-pill);
  background: var(--ink);
  color: #fff;
  min-height: 50px;
  font: 600 0.95rem/1.2 var(--font-text);
  cursor: pointer;
  isolation: isolate;
  transition:
    transform var(--dur-2) var(--ease-out),
    background-color 0.3s,
    color 0.3s,
    border-color 0.3s,
    box-shadow 0.3s;
  border: 1px solid #0000;
  justify-content: center;
  align-items: center;
  gap: 0.8rem;
  padding: 0.35rem 1.5rem;
  text-decoration: none;
  display: inline-flex;
  position: relative;
  overflow: hidden;
}

.button:has(.button-arrow) {
  padding: 0.35rem 0.4rem 0.35rem 1.5rem;
}

.button:after {
  content: "";
  z-index: -1;
  opacity: 0;
  background: currentColor;
  transition: opacity 0.3s;
  position: absolute;
  inset: 0;
}

.button:hover {
  color: #fff;
  transform: translateY(-2px);
}

.button:hover:after {
  opacity: 0.08;
}

.button:active {
  transform: translateY(0) scale(0.98);
}

.button:disabled,
.button[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

.button-arrow {
  width: 40px;
  height: 40px;
  color: var(--ink);
  transition: transform var(--dur-2) var(--ease-out);
  background: #fff;
  border-radius: 50%;
  place-items: center;
  display: grid;
}

.button:hover .button-arrow {
  transform: rotate(-45deg);
}

.button-primary {
  background: var(--brand);
  color: var(--brand-contrast);
}

.button-primary:hover {
  color: var(--brand-contrast);
  box-shadow: 0 16px 30px -16px var(--brand);
}

.button-primary .button-arrow {
  background: var(--brand-contrast);
  color: var(--brand);
}

.button-light {
  color: var(--ink);
  background: #fff;
}

.button-light:hover {
  color: var(--ink);
}

.button-light .button-arrow {
  background: var(--brand);
  color: var(--brand-contrast);
}

.button-ghost,
.button-outline {
  border-color: var(--line-strong);
  color: var(--ink);
  background: 0 0;
}

.button-ghost:hover,
.button-outline:hover {
  border-color: var(--ink);
  color: var(--ink);
}

.button-glass {
  background: var(--glass-dark);
  border-color: var(--glass-dark-line);
  color: #fff;
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}

.button-glass:hover {
  color: #fff;
  background: var(--glass-dark-strong);
}

:is(.color-dark, .color-brand) .button-primary {
  color: var(--ink);
  background: #fff;
}

:is(.color-dark, .color-brand) .button-primary .button-arrow {
  background: var(--brand);
  color: var(--brand-contrast);
}

:is(.color-dark, .color-brand) :is(.button-ghost, .button-outline) {
  color: #fff;
  border-color: #ffffff59;
}

.icon-button {
  border: 1px solid var(--line);
  background: var(--surface);
  width: 44px;
  height: 44px;
  color: var(--ink);
  cursor: pointer;
  transition:
    transform 0.3s var(--ease-out),
    background-color 0.3s;
  border-radius: 50%;
  place-items: center;
  padding: 0;
  display: inline-grid;
}

.icon-button:hover {
  transform: translateY(-1px);
}

.icon-button:disabled {
  opacity: 0.35;
  cursor: default;
  transform: none;
}

.text-link {
  color: var(--brand-text);
  text-decoration: underline;
  -webkit-text-decoration-color: color-mix(
    in srgb,
    currentColor 35%,
    transparent
  );
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  cursor: pointer;
  background: 0 0;
  border: 0;
  align-items: center;
  gap: 0.4rem;
  padding: 0;
  font-weight: 600;
  display: inline-flex;
}

.prose {
  max-width: 68ch;
}

.prose > * + * {
  margin-top: 1em;
}

.prose h2 {
  margin-top: 1.6em;
  font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.1rem);
}

.prose h3 {
  margin-top: 1.4em;
  font-size: 1.3rem;
}

.prose ul {
  gap: 0.6rem;
  list-style: none;
  display: grid;
}

.prose ul li {
  padding-left: 2rem;
  position: relative;
}

.prose ul li:before,
.prose ul li:after {
  content: "";
  border-radius: 50%;
  width: 1.3rem;
  height: 1.3rem;
  position: absolute;
  top: 0.2em;
  left: 0;
}

.prose ul li:before {
  background: var(--brand-soft);
}

.prose ul li:after {
  background: var(--brand-text);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E")
    50%/70% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E")
    50%/70% no-repeat;
}

:is(.color-brand, .color-dark) .prose ul li:before {
  background: #ffffff24;
}

:is(.color-brand, .color-dark) .prose ul li:after {
  background: #fff;
}

.prose ol {
  padding-left: 1.3rem;
}

.prose blockquote {
  border-left: 3px solid var(--brand);
  padding-left: 1.2rem;
  font-size: 1.15rem;
}

.prose img {
  border-radius: var(--r);
}

/* ==========================================================================
   06. FORM TEMEL ELEMANLARI VE BİLDİRİMLER (FORMS & ALERTS)
   Girdi alanları, seçim kutuları, doğrulama hataları ve uyarı kutuları
   ========================================================================== */

.field {
  align-content: start;
  gap: 0.45rem;
  display: grid;
}

.field label {
  font-size: 0.9rem;
  font-weight: 600;
}

:is(.field, .commerce-page, .commerce-add, .commerce-reviews, .listing-filters)
  :is(input:not([type="checkbox"], [type="radio"]), select, textarea) {
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  width: 100%;
  min-height: 50px;
  color: var(--ink);
  padding: 0.75rem 1rem;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}

:is(.field, .commerce-page, .commerce-add, .commerce-reviews, .listing-filters)
  :is(input, select, textarea):focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 18%, transparent);
  outline: none;
}

textarea {
  resize: vertical;
  min-height: 8rem;
}

input[type="checkbox"],
input[type="radio"] {
  width: 1.15rem;
  height: 1.15rem;
  accent-color: var(--brand);
}

.field-error {
  color: #b42318;
  font-size: 0.85rem;
}

[aria-invalid="true"] {
  border-color: #d92d20 !important;
}

.honeypot {
  width: 1px;
  height: 1px;
  position: absolute;
  left: -10000px;
  overflow: hidden;
}

.notice {
  border-radius: var(--r);
  color: #05603a;
  background: #e3f6ed;
  border: 1px solid #b8e9d2;
  padding: 1rem 1.2rem;
}

.notice-error {
  color: #912018;
  background: #fef3f2;
  border-color: #fecdca;
}

.notice h2 {
  font-size: 1rem;
}

.notice ul {
  margin: 0.5rem 0 0;
  padding-left: 1.2rem;
}

/* ==========================================================================
   07. YERLEŞİM VE TEMA RENK VURGULARI (THEME & SPACING)
   Bölüm dikey boşlukları, yumuşak zeminler, marka ve koyu ton varyantları
   ========================================================================== */

.home-section {
  padding-block: var(--section-space);
  position: relative;
}

.spacing-small {
  --section-space: clamp(3rem, 5vw, 4.5rem);
}

.spacing-large {
  --section-space: clamp(6rem, 12vw, 11rem);
}

.home-section:is(.color-soft, .color-brand, .color-dark) {
  margin: var(--frame);
  border-radius: var(--r-xl);
}

.frame-off .home-section:is(.color-soft, .color-brand, .color-dark) {
  border-radius: 0;
  margin-inline: 0;
}

.color-soft {
  background: var(--surface);
}

.color-brand {
  background: linear-gradient(140deg, var(--brand) 0%, var(--brand-deep) 100%);
  color: #fff;
}

.color-dark {
  background: var(--night);
  color: var(--on-dark);
}

:is(.color-brand, .color-dark) :is(.kicker, .small-heading),
:is(.color-brand, .color-dark) .muted {
  color: var(--on-dark-muted);
}

.align-center {
  text-align: center;
}

/* ==========================================================================
   08. GENİŞLİK VE ANİMASYON KADEMELENDİRME (WIDTH & STAGGER)
   Kelime genişlikleri (data-w) ve ardışık geçiş gecikmeleri (Stagger)
   ========================================================================== */

[data-w] {
  --w: 12;
}

[data-w="0"] {
  --w: 0;
}

[data-w="1"] {
  --w: 1;
}

[data-w="2"] {
  --w: 2;
}

[data-w="3"] {
  --w: 3;
}

[data-w="4"] {
  --w: 4;
}

[data-w="5"] {
  --w: 5;
}

[data-w="6"] {
  --w: 6;
}

[data-w="7"] {
  --w: 7;
}

[data-w="8"] {
  --w: 8;
}

[data-w="9"] {
  --w: 9;
}

[data-w="10"] {
  --w: 10;
}

[data-w="11"] {
  --w: 11;
}

[data-stagger]:nth-child(8n + 2) {
  --i: 1;
}

[data-stagger]:nth-child(8n + 3) {
  --i: 2;
}

[data-stagger]:nth-child(8n + 4) {
  --i: 3;
}

[data-stagger]:nth-child(8n + 5) {
  --i: 4;
}

[data-stagger]:nth-child(8n + 6) {
  --i: 5;
}

[data-stagger]:nth-child(8n + 7) {
  --i: 6;
}

[data-stagger]:nth-child(8n + 8) {
  --i: 7;
}

.w {
  vertical-align: top;
  margin: -0.14em -0.04em -0.28em;
  padding: 0.14em 0.04em 0.28em;
  display: inline-block;
  overflow: clip;
}

.w > span {
  display: inline-block;
}

/* ==========================================================================
   09. ANİMASYONLAR, HAREKET VE SAYFA GEÇİŞLERİ (ANIMATIONS & VIEW-TRANSITION)
   Keyframe animasyonları, görünme efektleri, kayan yazı ve Lenis entegrasyonu
   ========================================================================== */

/* --- Sayfa Geçiş Animasyonları (View Transitions API) --- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }
}

@media (prefers-reduced-motion: no-preference) {
  html:not([data-motion="off"]) :is(.hero-title, .page-title) .w > span {
    animation: ag-rise var(--dur-3) var(--ease-out) both;
    animation-delay: calc(0.12s + var(--w) * var(--stagger));
  }

  html[data-motion="subtle"] :is(.hero-title, .page-title) .w > span {
    animation-name: ag-fade;
  }

  html:not([data-motion="off"])
    :is(.hero-copy, .page-hero-inner)
    > :not(:is(.hero-title, .page-title)) {
    animation: ag-fade-up var(--dur-3) var(--ease-out) both;
    animation-delay: 0.42s;
  }

  html:not([data-motion="off"]) .hero-media {
    animation: ag-settle 1.6s var(--ease-out) both;
  }

  html:not([data-motion="off"]) .hero-card {
    animation: ag-card 0.9s var(--ease-out) both;
    animation-delay: calc(0.56s + var(--i, 0) * 0.13s);
  }

  html:not([data-motion="off"]) .hero-mesh,
  html:not([data-motion="off"]) .cta-mesh,
  html:not([data-motion="off"]) .page-hero-mesh {
    animation: 18s ease-in-out infinite alternate ag-mesh;
  }

  html:not([data-motion="off"]) .scroll-line {
    animation: ag-line 2.2s var(--ease-in-out) infinite;
  }
}

@keyframes ag-rise {
  0% {
    transform: translateY(108%);
  }
}

@keyframes ag-fade {
  0% {
    opacity: 0;
  }
}

@keyframes ag-fade-up {
  0% {
    opacity: 0;
    transform: translateY(18px);
  }
}

@keyframes ag-settle {
  0% {
    transform: scale(1.08);
  }
}

@keyframes ag-card {
  0% {
    opacity: 0;
    transform: translateY(26px) scale(0.97);
  }
}

@keyframes ag-float {
  to {
    transform: translateY(-8px);
  }
}

@keyframes ag-mesh {
  50% {
    background-position:
      60% 40%,
      30% 70%,
      50% 100%;
  }

  to {
    background-position:
      100% 0,
      0 100%,
      40% 80%;
  }
}

@keyframes ag-line {
  0% {
    transform-origin: top;
    transform: scaleY(0);
  }

  45% {
    transform-origin: top;
    transform: scaleY(1);
  }

  55% {
    transform-origin: bottom;
    transform: scaleY(1);
  }

  to {
    transform-origin: bottom;
    transform: scaleY(0);
  }
}

@keyframes ag-pop {
  0% {
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
  }
}

@keyframes ag-sheet {
  0% {
    opacity: 0;
    transform: translateY(16px) scale(0.98);
  }
}

html.motion-ready [data-reveal]:not(.is-in) {
  opacity: 0;
  transform: translateY(var(--rise));
}

html.motion-ready [data-reveal] {
  transition:
    opacity var(--dur-3) var(--ease-out),
    transform var(--dur-3) var(--ease-out),
    clip-path 1.1s var(--ease-out);
  transition-delay: calc(min(var(--i, 0), 8) * var(--stagger));
}

html.motion-ready [data-reveal="clip"]:not(.is-in) {
  opacity: 1;
  -webkit-clip-path: inset(14% 8% 14% 8% round var(--r-xl));
  clip-path: inset(14% 8% 14% 8% round var(--r-xl));
  transform: none;
}

html.motion-ready [data-reveal="clip"] img {
  transition: transform 1.4s var(--ease-out);
}

html.motion-ready [data-reveal="clip"]:not(.is-in) img {
  transform: scale(1.12);
}

html[data-motion="subtle"] {
  --rise: 0px;
}

html[data-motion="subtle"].motion-ready [data-reveal="clip"]:not(.is-in) {
  -webkit-clip-path: none;
  clip-path: none;
  opacity: 0;
}

[data-magnetic] {
  transition:
    translate 0.5s var(--ease-out),
    transform var(--dur-2) var(--ease-out),
    background-color 0.3s,
    color 0.3s,
    border-color 0.3s,
    box-shadow 0.3s;
}

html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

.marquee:has(> .marquee-track > :nth-child(8)) {
  --items: 8;
}

.marquee:has(> .marquee-track > :nth-child(10)) {
  --items: 10;
}

.marquee:has(> .marquee-track > :nth-child(12)) {
  --items: 12;
}

.marquee:has(> .marquee-track > :nth-child(16)) {
  --items: 16;
}

.marquee:has(> .marquee-track > :nth-child(20)) {
  --items: 20;
}

.marquee {
  --gap: clamp(2.5rem, 6vw, 5rem);
  gap: var(--gap);
  display: flex;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, #0000, #000 8% 92%, #0000);
  mask-image: linear-gradient(90deg, #0000, #000 8% 92%, #0000);
}

.marquee + .marquee {
  margin-top: 1.5rem;
}

.marquee-track {
  justify-content: space-around;
  align-items: center;
  gap: var(--gap);
  flex: none;
  min-width: 100%;
  margin: 0;
  list-style: none;
  display: flex;
  position: relative;
}

@media (prefers-reduced-motion: no-preference) {
  html:not([data-motion="off"]) .marquee-track {
    animation: ag-marquee calc(var(--items, 6) * 3.2s) linear infinite;
  }

  html:not([data-motion="off"]) .marquee.is-reverse .marquee-track {
    animation-direction: reverse;
  }

  .marquee:is(:hover, :focus-within) .marquee-track {
    animation-play-state: paused;
  }
}

@keyframes ag-marquee {
  to {
    transform: translateX(calc(-100% - var(--gap)));
  }
}

@media (prefers-reduced-motion: reduce) {
  .marquee {
    flex-wrap: wrap;
    justify-content: center;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .marquee-track[aria-hidden="true"] {
    display: none;
  }

  .marquee-track {
    flex-wrap: wrap;
    flex: 100%;
    justify-content: center;
    min-width: 0;
  }
}

html[data-motion="off"] .marquee {
  flex-wrap: wrap;
  justify-content: center;
  -webkit-mask-image: none;
  mask-image: none;
}

html[data-motion="off"] .marquee-track[aria-hidden="true"] {
  display: none;
}

html[data-motion="off"] .marquee-track {
  flex-wrap: wrap;
  flex: 100%;
  justify-content: center;
  min-width: 0;
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    html[data-motion="full"] :is(.hero-media, .page-hero-media) img {
      animation: linear both ag-drift;
      animation-timeline: view();
      animation-range: exit;
    }

    html[data-motion="full"] .story-media img {
      animation: linear both ag-parallax;
      animation-timeline: view();
      animation-range: cover;
    }

    html[data-motion="full"] .process:before {
      animation: linear both ag-grow;
      animation-timeline: view();
      animation-range: entry 20% cover 55%;
    }

    html:not([data-motion="off"]) .manifesto-title .w > span {
      animation: linear both ag-ink;
      animation-timeline: view();
      animation-range: cover 5% cover 40%;
    }

    html:not([data-motion="off"]) .reading-progress span {
      animation: linear both ag-grow;
      animation-timeline: scroll(root);
    }
  }

  @media (prefers-reduced-motion: no-preference) and (width<=760px) {
    html[data-motion="full"] .process:before {
      animation-name: ag-grow-y;
    }
  }
}

@keyframes ag-drift {
  to {
    transform: scale(1.1) translateY(5%);
  }
}

@keyframes ag-parallax {
  0% {
    transform: translateY(-5%) scale(1.12);
  }

  to {
    transform: translateY(5%) scale(1.12);
  }
}

@keyframes ag-grow {
  0% {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

@keyframes ag-grow-y {
  0% {
    transform: scaleY(0);
  }

  to {
    transform: scaleY(1);
  }
}

@keyframes ag-ink {
  0% {
    opacity: 0.16;
  }
}

::view-transition-old(root) {
  animation: ag-vt-out 0.28s var(--ease-in-out) both;
}

::view-transition-new(root) {
  animation: ag-vt-in 0.5s var(--ease-out) both;
}

::view-transition-group(*) {
  animation-duration: 0.6s;
  animation-timing-function: var(--ease-out);
}

@keyframes ag-vt-out {
  to {
    opacity: 0;
  }
}

@keyframes ag-vt-in {
  0% {
    opacity: 0;
    transform: translateY(14px);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  :before,
  :after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  ::view-transition-group(*) {
    animation: none !important;
  }

  ::view-transition-old(*) {
    animation: none !important;
  }

  ::view-transition-new(*) {
    animation: none !important;
  }
}

html[data-motion="off"] *,
html[data-motion="off"] :before,
html[data-motion="off"] :after {
  transition-duration: 0s !important;
  animation: none !important;
}

/* ==========================================================================
   10. ÜST BİLGİ VE MASAÜSTÜ MENÜ (HEADER & NAVIGATION)
   Referans tasarımla tam uyumlu 3 Aşamalı Akıllı Buzlu Cam (Frosted Glass) Header:
   1. Durum (Hero Üzeri Dinlenme):
      - Şeffaf ana çubuk (background: transparent; border: none; box-shadow: none;)
      - Ortadaki masaüstü menü kapsülü, dil seçici & tema butonu: Yüksek blurlu koyu buzlu cam (var(--glass-dark), blur(26px) saturate(190%))
   2. Durum (Hero İçinde Hafif Kaydırma - is-away & !is-scrolled):
      - Header çubuğu tam boy derin koyu cam arka plan (#060e1e99 / rgba(6,14,30,0.65)) ve güçlü gölge
      - İç elemanların ayrı blur filtreleri sıfırlanarak çubuğun bluruyla harmanlanır
   3. Durum (Hero Dışına Çıkış / Genel Sayfalar - is-scrolled):
      - 1180px genişliğinde, ortalanmış, daralan (h - 8px) ada kapsül
      - Göz alıcı BUZ GÖRÜNÜMÜ: Yüksek oranda blurlu (blur(26px) saturate(190%)), süt beyazı yarı saydam zemin, parlak buz kenar hattı ve iç yansıma efekti
   ========================================================================== */

@media print {
  .site-header {
    display: none !important;
  }
}

@keyframes c2-pop {
  0% {
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
  }
}

body {
  --header-space: calc(var(--header-h) + var(--frame) + 12px);
}

/* body[data-header-mode="solid"] main {
  padding-top: calc(var(--header-space) + 1.25rem);
} */

/* Ana Header Kapsayıcısı */
.site-header {
  top: calc(var(--frame) + 10px);
  z-index: 50;
  pointer-events: none;
  position: fixed;
  left: 0;
  right: 0;
  transition: top 0.4s var(--ease-out);
}

/* Header Bar - Genel Yapı */
.header-bar {
  pointer-events: auto;
  width: min(100% - 2 * var(--gutter), var(--container));
  height: var(--header-h);
  border: none;
  background: var(--glass-light);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  border-radius: var(--r-lg);
  color: var(--ink);
  transition: all 0.5s var(--ease-out);
  align-items: center;
  gap: 1rem;
  margin-inline: auto;
  padding: 0 0.45rem 0 1.25rem;
  display: flex;
}

/* ==========================================================================
   AŞAMA 1: HERO ÜZERİNDE DİNLENME DURUMU (TOP RESTING OVERLAY)
   Header çubuğu şeffaf, ortadaki menü ve sağdaki butonlar koyu buzlu cam kapsül
   ========================================================================== */
body[data-header-mode="overlay"] .site-header:not(.is-scrolled) .header-bar {
  width: min(100% - 2 * var(--frame) - 2.5rem, 100% - 2 * var(--gutter));
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  color: #ffffff;
  background: transparent;
  border-color: transparent;
}

body[data-header-mode="overlay"]
  .site-header:not(.is-scrolled)
  :is(
    .desktop-nav > .menu-list,
    .icon-button,
    .language-picker > summary,
    .theme-toggle
  ) {
  background: var(--glass-dark);
  border: 1px solid var(--glass-dark-line);
  color: #ffffff;
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: 0 4px 20px -4px rgba(0, 0, 0, 0.3);
}

body[data-header-mode="overlay"] .site-header:not(.is-scrolled) .nav-pill {
  background: #ffffff29;
}

/* ==========================================================================
   AŞAMA 2: HERO İÇİNDE HAFİF KAYDIRMA (is-away & !is-scrolled)
   Tüm çubuk koyu cam zemin ve yüksek blur efekti alır
   ========================================================================== */
body[data-header-mode="overlay"]
  .site-header.is-away:not(.is-scrolled)
  .header-bar {
  border: 1px solid rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(28px) saturate(200%);
  backdrop-filter: blur(28px) saturate(200%);
  background: rgba(6, 14, 30, 0.65);
  box-shadow: 0 18px 40px -20px rgba(3, 6, 24, 0.85);
  color: #ffffff;
}

body[data-header-mode="overlay"]
  .site-header.is-away:not(.is-scrolled)
  :is(
    .desktop-nav > .menu-list,
    .icon-button,
    .language-picker > summary,
    .theme-toggle
  ) {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: none;
}

body[data-header-mode="overlay"] .site-header:not(.is-scrolled) .menu-toggle {
  background: var(--glass-dark-strong);
}

/* ==========================================================================
   AŞAMA 3: HERO DIŞINA ÇIKIŞ / GENEL SAYFALAR (is-scrolled)
   Daralan, ortalanmış, gerçek "Buz Görünümlü" (Frosted Ice) yüzen ada kapsül
   ========================================================================== */
.site-header.is-scrolled .header-bar {
  width: min(100% - 2 * var(--gutter), 1180px);
  height: calc(var(--header-h) - 8px);
  background: rgba(255, 255, 255, 0.6);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  box-shadow:
    0 16px 40px -12px rgba(10, 22, 40, 0.14),
    0 4px 12px rgba(10, 22, 40, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
  color: var(--ink);
}

/* Koyu modda Aşama 3 (Koyu Buzlu Ada Kapsül) */
[data-theme="dark"] .site-header.is-scrolled .header-bar {
  background: rgba(14, 22, 38, 0.6);
  box-shadow:
    0 20px 48px -12px rgba(0, 0, 0, 0.7),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  color: #f1f5f9;
}

/* Aşama 3: İç Menü ve Aksiyon Kapsülleri */
.site-header.is-scrolled .desktop-nav > .menu-list {
  background: rgba(10, 22, 40, 0.04);
  border: 1px solid rgba(10, 22, 40, 0.06);
  color: var(--ink);
}

[data-theme="dark"] .site-header.is-scrolled .desktop-nav > .menu-list {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #f1f5f9;
}

.site-header.is-scrolled
  :is(.language-picker > summary, .theme-toggle, .icon-button) {
  background: rgba(10, 22, 40, 0.04);
  border: 1px solid rgba(10, 22, 40, 0.06);
  color: var(--ink);
}

[data-theme="dark"]
  .site-header.is-scrolled
  :is(.language-picker > summary, .theme-toggle, .icon-button) {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #f1f5f9;
}

/* ==========================================================================
   LOGO YÖNETİMİ & GÖRÜNÜRLÜK (KESİNLİKLE ÇÖKMEYEN NET GÖRÜNÜM)
   ========================================================================== */
.brand {
  color: inherit;
  flex: none;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  display: inline-flex;
  min-height: 38px;
  z-index: 2;
}

.brand-logo,
.brand-logo-img {
  height: 38px;
  width: auto;
  max-width: 180px;
  max-height: 40px;
  object-fit: contain;
  display: block;
}

.brand-mark {
  background: conic-gradient(
    from 210deg,
    var(--accent),
    var(--brand),
    var(--brand-deep),
    var(--accent)
  );
  border-radius: 8px;
  width: 26px;
  height: 26px;
  box-shadow: inset 0 0 0 6px #ffffff2e;
}

.brand-name {
  font: 800 1.2rem/1 var(--font-display);
  letter-spacing: -0.035em;
  color: inherit;
  text-decoration: none;
}

/* Logo Açık / Koyu Renk Görünürlük Mantığı */
.site-header .brand-logo--light {
  display: none;
}
.site-header .brand-logo--dark {
  display: block;
}

/* Hero üzerinde (henüz is-scrolled olmamışken) beyaz logo göster */
body[data-header-mode="overlay"]
  .site-header:not(.is-scrolled)
  .brand-logo--light {
  display: block !important;
}
body[data-header-mode="overlay"]
  .site-header:not(.is-scrolled)
  .brand-logo--dark {
  display: none !important;
}

/* Hero dışına çıkıldığında (is-scrolled): Açık temada siyah logo göster */
:root:not([data-theme="dark"]) .site-header.is-scrolled .brand-logo--light {
  display: none !important;
}
:root:not([data-theme="dark"]) .site-header.is-scrolled .brand-logo--dark {
  display: block !important;
}

/* Koyu temada her zaman beyaz logo göster */
[data-theme="dark"] .brand-logo--light {
  display: block !important;
}
[data-theme="dark"] .brand-logo--dark {
  display: none !important;
}

/* ==========================================================================
   MASAÜSTÜ MENÜ (DESKTOP NAVIGATION)
   ========================================================================== */
.desktop-nav {
  margin-inline: auto;
  position: relative;
}

.desktop-nav > .menu-list {
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--ink) 4%, transparent);
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 4px;
  list-style: none;
  display: flex;
  position: relative;
}

.desktop-nav > .menu-list > li > a,
.desktop-nav > .menu-list > li > details > summary,
.desktop-nav > .menu-list > li > .menu-label {
  z-index: 1;
  border-radius: var(--r-pill);
  color: inherit;
  white-space: nowrap;
  cursor: pointer;
  align-items: center;
  gap: 0.3rem;
  padding: 0.58rem 1rem;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  list-style: none;
  transition:
    color 0.3s,
    background-color 0.3s,
    box-shadow 0.3s;
  display: flex;
  position: relative;
}

.desktop-nav summary::-webkit-details-marker,
.desktop-nav summary::marker {
  content: "";
  display: none;
}

:is(.desktop-nav, .mobile-nav) summary :is(svg, .menu-chevron) {
  transition: transform 0.3s var(--ease-out);
}

:is(.desktop-nav, .mobile-nav) details[open] > summary :is(svg, .menu-chevron) {
  transform: rotate(180deg);
}

.mobile-nav details[data-expanded="false"] > summary :is(svg, .menu-chevron) {
  transform: none;
}

.desktop-nav > .menu-list > li > a[aria-current="page"],
.desktop-nav > .menu-list > li > a.is-active {
  color: #0a1628;
  background: #ffffff;
  box-shadow: 0 6px 16px -8px #03091873;
}

.desktop-nav
  > .menu-list
  > li:has(.submenu [aria-current="page"])
  > details
  > summary,
.desktop-nav > .menu-list > li:has(.submenu .is-active) > details > summary {
  color: #0a1628;
  background: #ffffff;
  box-shadow: 0 6px 16px -8px #03091873;
}

[data-theme="dark"] .desktop-nav > .menu-list > li > a[aria-current="page"],
[data-theme="dark"] .desktop-nav > .menu-list > li > a.is-active,
[data-theme="dark"]
  .desktop-nav
  > .menu-list
  > li:has(.submenu [aria-current="page"])
  > details
  > summary {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.16);
  box-shadow: 0 4px 14px -4px rgba(0, 0, 0, 0.5);
}

/* Navigasyon Kayan Gösterge (Floating Pill) */
.nav-pill {
  z-index: 0;
  top: var(--nav-y, 4px);
  left: var(--nav-x, 0);
  width: var(--nav-w, 0);
  height: var(--nav-h, 0);
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--ink) 7%, transparent);
  opacity: 0;
  pointer-events: none;
  transition:
    left 0.36s var(--ease-out),
    width 0.36s var(--ease-out),
    opacity 0.25s;
  position: absolute;
}

.desktop-nav.has-indicator .nav-pill {
  opacity: 1;
}

.desktop-nav.pill-instant .nav-pill {
  transition: none;
}

.desktop-nav details {
  position: relative;
}

/* Açılır Alt Menüler (Submenu & Language Picker Dropdown) */
.desktop-nav .submenu,
.language-picker ul {
  z-index: 5;
  border: 1px solid var(--glass-light-line);
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  min-width: 250px;
  color: var(--ink);
  box-shadow: var(--shadow-lg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  padding: 0.5rem;
  list-style: none;
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  translate: -50%;
}

.desktop-nav details[open] > .submenu,
.language-picker[open] ul {
  animation: c2-pop 0.32s var(--ease-out);
}

.submenu .menu-list {
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.desktop-nav .submenu .menu-list:has(> li:nth-child(6)) {
  grid-template-columns: repeat(2, minmax(210px, 1fr));
}

.submenu a,
.language-picker a {
  border-radius: var(--r-sm);
  color: var(--ink);
  padding: 0.6rem 0.85rem;
  font-size: 0.92rem;
  font-weight: 500;
  text-decoration: none;
  display: block;
  transition:
    background-color 0.2s,
    color 0.2s;
}

.desktop-nav .submenu a:hover,
.language-picker a:hover {
  background: var(--brand-soft);
  color: var(--brand-text);
}

.submenu .submenu-overview {
  margin-bottom: 0.25rem;
  font-weight: 700;
}

.submenu details {
  position: static;
}

.submenu details > .submenu {
  min-width: 0;
  box-shadow: none;
  background: 0 0;
  border: 0;
  padding: 0 0 0 0.75rem;
  position: static;
  translate: none;
}

/* ==========================================================================
   SAĞ AKSİYONLAR: DİL, TEMA, BUTON, HAMBURGER
   ========================================================================== */
.header-actions {
  align-items: center;
  gap: 0.45rem;
  margin-left: auto;
  display: flex;
}

.language-picker {
  position: relative;
}

.language-picker summary {
  border-radius: var(--r-pill);
  cursor: pointer;
  border: 1px solid transparent;
  background: color-mix(in srgb, var(--ink) 4%, transparent);
  align-items: center;
  gap: 0.25rem;
  min-height: 44px;
  padding: 0 0.8rem;
  font-size: 0.85rem;
  font-weight: 700;
  list-style: none;
  display: flex;
  transition:
    transform var(--dur-2) var(--ease-out),
    border-color var(--dur-2),
    background var(--dur-2),
    color var(--dur-2);
}

.language-picker summary::-webkit-details-marker {
  display: none;
}

.language-picker ul {
  min-width: 160px;
  margin: 0;
  left: auto;
  right: 0;
  translate: none;
}

/* Tema Değiştirici Buton (Açık/Koyu Mod) */
.theme-toggle {
  border: 1px solid transparent;
  background: color-mix(in srgb, var(--ink) 4%, transparent);
  color: inherit;
  border-radius: var(--r-pill);
  cursor: pointer;
  place-items: center;
  width: 44px;
  height: 44px;
  display: inline-grid;
  padding: 0;
  font-size: 1rem;
  transition:
    transform var(--dur-2) var(--ease-out),
    border-color var(--dur-2),
    background var(--dur-2),
    color var(--dur-2);
}

.theme-toggle:hover {
  border-color: var(--line-strong);
  transform: translateY(-1px);
}

[data-theme="dark"] .theme-toggle .theme-icon-dark {
  display: none;
}
[data-theme="dark"] .theme-toggle .theme-icon-light {
  display: inline-block;
}
:root:not([data-theme="dark"]) .theme-toggle .theme-icon-dark {
  display: inline-block;
}
:root:not([data-theme="dark"]) .theme-toggle .theme-icon-light {
  display: none;
}

/* İkon Buton ve Sepet Rozeti */
.icon-button {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  border-radius: var(--r-pill);
  cursor: pointer;
  place-items: center;
  width: 44px;
  height: 44px;
  display: inline-grid;
  transition:
    transform var(--dur-2) var(--ease-out),
    border-color var(--dur-2),
    background var(--dur-2);
}

.icon-button:hover {
  border-color: var(--line-strong);
  transform: translateY(-1px);
}

.icon-button:disabled {
  opacity: 0.35;
  cursor: default;
}

.header-icon {
  background: 0 0;
  width: 44px;
  height: 44px;
  position: relative;
}

.cart-badge {
  background: var(--accent);
  min-width: 20px;
  height: 20px;
  color: var(--accent-contrast);
  border-radius: 10px;
  place-items: center;
  padding: 0 5px;
  font-size: 0.7rem;
  font-weight: 800;
  display: grid;
  position: absolute;
  top: -3px;
  right: -3px;
}

/* Header Eylem Butonu (Teklif Alın / Header CTA) */
.header-cta {
  border-radius: var(--r-pill);
  background: #ffffff;
  color: #0a1628;
  font: 700 0.9rem/1 var(--font-text);
  cursor: pointer;
  min-height: 46px;
  padding: 0.35rem 0.35rem 0.35rem 1.35rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  transition:
    transform var(--dur-2) var(--ease-out),
    background-color 0.3s,
    color 0.3s,
    border-color 0.3s,
    box-shadow 0.3s;
}

.header-cta:hover {
  transform: translateY(-1px);
  color: #0a1628;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.header-cta .button-knob {
  background: var(--brand);
  color: var(--brand-contrast);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  place-items: center;
  display: grid;
  transition: transform var(--dur-2) var(--ease-out);
}

.header-cta .button-knob :is(svg, i) {
  transition: transform var(--dur-2) var(--ease-out);
}

.header-cta:hover .button-knob :is(svg, i) {
  transform: translate(2px, -2px);
}

/* Koyu modda Header CTA */
[data-theme="dark"] .site-header.is-scrolled .header-cta {
  background: var(--surface-2);
  color: #ffffff;
  border-color: var(--line);
}

/* Mobil Menü Butonu (Hamburger Toggle) */
.menu-toggle {
  background: var(--ink);
  cursor: pointer;
  border: 0;
  border-radius: 50%;
  width: 46px;
  height: 46px;
  padding: 0;
  display: none;
}

.menu-toggle span,
.menu-toggle span:before,
.menu-toggle span:after {
  background: var(--canvas);
  border-radius: 2px;
  width: 18px;
  height: 2px;
  margin: auto;
  display: block;
}

.menu-toggle span {
  position: relative;
}

.menu-toggle span:before,
.menu-toggle span:after {
  content: "";
  position: absolute;
  left: 0;
}

.menu-toggle span:before {
  top: -6px;
}

.menu-toggle span:after {
  top: 6px;
}

body[data-header-mode="overlay"]
  .site-header:not(.is-scrolled)
  .menu-toggle
  span,
body[data-header-mode="overlay"]
  .site-header:not(.is-scrolled)
  .menu-toggle
  span:before,
body[data-header-mode="overlay"]
  .site-header:not(.is-scrolled)
  .menu-toggle
  span:after {
  background: #ffffff;
}

/* header-style-solid Varyantı (Sabit / Şeffaf Olmayan Sayfalar) */
.header-style-solid .site-header {
  position: sticky;
  top: 0;
}

.header-style-solid .header-bar,
.header-style-solid .site-header.is-scrolled .header-bar {
  border-width: 0 0 1px;
  border-color: var(--line);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  width: 100%;
  padding-inline: var(--gutter);
  box-shadow: none;
  border-radius: 0;
}

.header-style-solid[data-header-mode] main {
  padding-top: 0;
}

body.header-style-solid[data-header-mode="overlay"]
  .site-header:not(.is-scrolled)
  .header-bar {
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  width: 100%;
  color: var(--ink);
  border-color: var(--line);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}

body.header-style-solid[data-header-mode="overlay"]
  .site-header:not(.is-scrolled)
  :is(
    .desktop-nav > .menu-list,
    .icon-button,
    .language-picker > summary,
    .theme-toggle
  ) {
  background: color-mix(in srgb, var(--ink) 4%, transparent);
  border-color: var(--line);
  color: var(--ink);
}

body.header-style-solid[data-header-mode="overlay"]
  .site-header:not(.is-scrolled)
  .menu-toggle {
  background: var(--ink);
}

body.header-style-solid[data-header-mode="overlay"]
  .site-header:not(.is-scrolled)
  .menu-toggle
  span,
body.header-style-solid[data-header-mode="overlay"]
  .site-header:not(.is-scrolled)
  .menu-toggle
  span:before,
body.header-style-solid[data-header-mode="overlay"]
  .site-header:not(.is-scrolled)
  .menu-toggle
  span:after {
  background: var(--canvas);
}

/* Duyarlı Ekran Uyarlamaları (Responsive Breakpoints) */
@media (width <= 1100px) {
  .desktop-nav {
    display: none;
  }

  .menu-toggle {
    place-items: center;
    display: grid;
  }

  .header-bar {
    padding-left: 1.05rem;
  }
}

@media (width <= 560px) {
  .header-cta,
  .header-actions .language-picker {
    display: none;
  }
}

/* ==========================================================================
   11. MOBİL MENÜ VE ARAYÜZ OVERLAY (MOBILE MENU)
   Mobil ekranlar için tam ekran menü penceresi ve gezinme listesi
   ========================================================================== */

@media (width<=1100px) {
  .desktop-nav {
    display: none;
  }

  .menu-toggle {
    place-items: center;
    display: grid;
  }

  .header-bar {
    padding-left: 1.1rem;
  }
}

@media (width<=560px) {
  .header-cta,
  .header-actions .language-picker {
    display: none;
  }
}

.mobile-menu {
  inset: var(--frame);
  border-radius: var(--r-xl);
  background: var(--night);
  width: auto;
  max-width: none;
  height: auto;
  max-height: none;
  color: var(--on-dark);
  overscroll-behavior: contain;
  border: 0;
  flex-direction: column;
  gap: 1.75rem;
  margin: 0;
  padding: 1.25rem clamp(1.25rem, 5vw, 2.5rem) 2rem;
  display: none;
  position: fixed;
  overflow-y: auto;
}

.mobile-menu[open] {
  animation: ag-sheet 0.45s var(--ease-out);
  display: flex;
}

.mobile-menu::backdrop {
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  background: #04081e80;
}

.mobile-menu-top {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.mobile-menu .icon-button {
  color: #fff;
  background: #ffffff1a;
  border-color: #ffffff29;
}

.mobile-nav .menu-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.mobile-nav > .menu-list > li {
  border-bottom: 1px solid #ffffff1a;
}

.mobile-nav > .menu-list > li > a,
.mobile-nav > .menu-list > li > details > summary,
.mobile-nav > .menu-list > li > .menu-label {
  color: #fff;
  font: 600 clamp(1.45rem, 6vw, 2rem)/1.15 var(--font-display);
  letter-spacing: -0.02em;
  cursor: pointer;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0;
  text-decoration: none;
  list-style: none;
  display: flex;
}

.mobile-nav summary::-webkit-details-marker {
  content: "";
  display: none;
}

.mobile-nav summary::marker {
  content: "";
  display: none;
}

.mobile-nav .submenu {
  padding: 0 0 1rem;
}

.mobile-nav .submenu .menu-list {
  grid-template-columns: minmax(0, 1fr);
}

.mobile-nav .submenu a {
  color: var(--on-dark-muted);
  margin-inline: -0.75rem;
  padding: 0.5rem 0.75rem;
  text-decoration: none;
  transition:
    color 0.25s,
    background-color 0.25s;
  display: block;
}

.mobile-nav .submenu .submenu-overview span {
  transition: translate 0.35s var(--ease-out);
  display: inline-block;
}

@media (hover: hover) {
  .mobile-nav .submenu a:hover {
    color: #fff;
    background: #ffffff14;
  }

  .mobile-nav .submenu .submenu-overview:hover span {
    translate: 0.25rem;
  }
}

.mobile-nav .submenu a:focus-visible {
  color: #fff;
  background: #ffffff14;
}

.mobile-nav a[aria-current="page"] {
  color: var(--accent-on-dark);
}

@media (prefers-reduced-motion: no-preference) {
  html:not([data-motion="off"])
    .mobile-menu[open]
    .mobile-nav
    > .menu-list
    > li {
    animation: ag-fade-up 0.55s var(--ease-out) both;
  }

  .mobile-menu[open] .mobile-nav > .menu-list > li:nth-child(2) {
    animation-delay: 50ms;
  }

  .mobile-menu[open] .mobile-nav > .menu-list > li:nth-child(3) {
    animation-delay: 0.1s;
  }

  .mobile-menu[open] .mobile-nav > .menu-list > li:nth-child(4) {
    animation-delay: 0.15s;
  }

  .mobile-menu[open] .mobile-nav > .menu-list > li:nth-child(5) {
    animation-delay: 0.2s;
  }

  .mobile-menu[open] .mobile-nav > .menu-list > li:nth-child(n + 6) {
    animation-delay: 0.25s;
  }
}

.mobile-menu-actions {
  gap: 0.75rem;
  display: grid;
}

.mobile-menu-actions .button-ghost {
  color: #fff;
  border-color: #ffffff4d;
}

.mobile-menu-contact,
.mobile-languages {
  flex-wrap: wrap;
  gap: 0.6rem 1.4rem;
  margin: 0;
  list-style: none;
  display: flex;
}

/* ==========================================================================
   12. ALT BİLGİ & SABİT İLETİŞİM (FOOTER & FLOATING CTA)
   Alt bilgi paneli, eylem çağrısı, sosyal bağlantılar ve yüzen butonlar
   ========================================================================== */

.mobile-menu-contact a,
.mobile-languages a {
  color: var(--on-dark-muted);
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  display: inline-flex;
}

.mobile-languages a[aria-current] {
  color: #fff;
  font-weight: 700;
}

.social-links {
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  list-style: none;
  display: flex;
}

.social-links a {
  width: 42px;
  height: 42px;
  color: inherit;
  opacity: 0.8;
  transition:
    opacity 0.3s,
    transform 0.3s var(--ease-out);
  border: 1px solid;
  border-radius: 50%;
  place-items: center;
  display: grid;
}

.social-links a:hover {
  opacity: 1;
  color: inherit;
  transform: translateY(-2px);
}

.site-footer {
  padding: 0 var(--frame) var(--frame);
}

.footer-panel {
  border-radius: var(--r-xl);
  background: var(--night);
  color: var(--on-dark);
  padding: clamp(2.5rem, 6vw, 5rem) clamp(1.25rem, 5vw, 4rem) 0;
  position: relative;
  overflow: hidden;
}
.footer-panel .brand-logo-img {
  height: 60px;
  width: auto;
  max-width: 260px;
  max-height: 70px;
}

.frame-off .site-footer {
  padding: 0;
}

.frame-off .footer-panel {
  border-radius: 0;
}

.footer-panel:before {
  content: "";
  background: radial-gradient(
    closest-side,
    color-mix(in srgb, var(--brand) 55%, transparent),
    transparent
  );
  opacity: 0.55;
  pointer-events: none;
  height: 80%;
  position: absolute;
  inset: -30% -10% auto 40%;
}

.footer-cta {
  border-bottom: 1px solid #ffffff1f;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1.5rem 3rem;
  padding-bottom: clamp(2rem, 5vw, 4rem);
  display: flex;
  position: relative;
}

.footer-cta .kicker {
  color: var(--on-dark-muted);
  width: 100%;
}

.footer-cta-title {
  max-width: 14ch;
  font: 600 clamp(2.3rem, 1.2rem + 4.6vw, 5.2rem)/0.98 var(--font-display);
  letter-spacing: -0.045em;
}

.footer-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 2.6fr) minmax(0, 1fr);
  gap: 2.5rem 3rem;
  display: grid;
  position: relative;
}

.footer-brand {
  align-content: start;
  gap: 1.2rem;
  display: grid;
}

.footer-brand .brand-name {
  font-size: 1.6rem;
}

.footer-intro {
  max-width: 34ch;
  color: var(--on-dark-muted);
}

.footer-navigation {
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 2rem;
  display: grid;
}

.footer-panel .small-heading,
.footer-panel .small-heading a {
  color: var(--on-dark-muted);
  text-decoration: none;
}

.footer-link-list {
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.footer-panel a:not(.button) {
  color: inherit;
  text-decoration: none;
}

.footer-link-list a,
.footer-contact a {
  opacity: 0.88;
  transition: opacity 0.2s;
}

.footer-link-list a:hover,
.footer-contact a:hover {
  opacity: 1;
  color: #fff;
  text-decoration: underline;
}

.footer-contact address {
  color: var(--on-dark-muted);
  gap: 0.5rem;
  font-style: normal;
  display: grid;
}

.footer-bottom {
  color: var(--on-dark-muted);
  border-top: 1px solid #ffffff1f;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.25rem;
  font-size: 0.88rem;
  display: flex;
  position: relative;
}

.footer-wordmark {
  font: 700
    min(
      16rem,
      (100vw - 2 * var(--frame) - 3rem) / (var(--chars, 12) * 0.5)
    )/0.86
    var(--font-display);
  letter-spacing: -0.06em;
  text-align: center;
  white-space: nowrap;
  background: linear-gradient(#fff3, #fff0 85%);
  -webkit-text-fill-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  -webkit-background-clip: text;
  background-clip: text;
  margin: 0 0 -0.14em;
  position: relative;
  overflow: hidden;
}

.chars-4 {
  --chars: 4;
}

.chars-8 {
  --chars: 8;
}

.chars-12 {
  --chars: 12;
}

.chars-16 {
  --chars: 16;
}

.chars-20 {
  --chars: 20;
}

.chars-24 {
  --chars: 24;
}

.chars-28 {
  --chars: 28;
}

.chars-32 {
  --chars: 32;
}

.chars-36 {
  --chars: 36;
}

.chars-40 {
  --chars: 40;
}

.footer-light .footer-panel {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
}

.footer-light
  .footer-panel
  :is(
    .small-heading,
    .small-heading a,
    .footer-intro,
    .footer-contact address,
    .footer-bottom,
    .kicker
  ) {
  color: var(--muted);
}

.footer-light .footer-panel :is(.footer-cta, .footer-bottom) {
  border-color: var(--line);
}

.footer-light .footer-wordmark {
  background-image: linear-gradient(#0b10201f, #0b102000 85%);
}

.footer-light .footer-link-list a:hover,
.footer-light .footer-contact a:hover {
  color: var(--brand-text);
}

@media (width<=900px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }

  .footer-navigation {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem 1.25rem;
  }
}

.floating-contact {
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 40;
  transition:
    opacity 0.3s,
    transform 0.4s var(--ease-out);
  gap: 10px;
  display: grid;
  position: fixed;
}

.floating-contact.is-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(24px);
}

.floating-button {
  background: var(--brand);
  width: 56px;
  height: 56px;
  color: var(--brand-contrast);
  box-shadow: var(--shadow);
  transition: transform 0.3s var(--ease-out);
  border-radius: 50%;
  place-items: center;
  display: grid;
}

.floating-button:hover {
  color: var(--brand-contrast);
  transform: translateY(-2px) scale(1.04);
}

.floating-button.is-whatsapp {
  color: #fff;
  background: #128c4b;
}

/* ==========================================================================
   13. HERO VE GİRİŞ BÖLÜMLERİ (HERO & PAGE HERO)
   Ana sayfa ve iç sayfa hero alanları, kartlar, istatistik ve video elemanları
   ========================================================================== */

@media (width<=640px) {
  .floating-contact {
    gap: 8px;
  }

  .floating-button {
    width: 50px;
    height: 50px;
  }
}

@media print {
  .floating-contact,
  .site-header,
  .scroll-cue {
    display: none !important;
  }
}

.ag-hero {
  padding: var(--frame) var(--frame) 0;
}

.frame-off .ag-hero {
  padding: 0;
}

.hero-frame {
  isolation: isolate;
  min-height: min(100svh - 2 * var(--frame), 1000px);
  border-radius: var(--r-xl);
  background: var(--night);
  color: #fff;
  flex-direction: column;
  justify-content: flex-end;
  display: flex;
  position: relative;
  overflow: hidden;
}

.frame-off .hero-frame {
  border-radius: 0;
}

.hero-media {
  z-index: -2;
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.hero-media img,
.hero-visual-media img,
.page-hero-media img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.hero-mesh,
.page-hero-mesh,
.cta-mesh {
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(
      55% 60% at 18% 22%,
      color-mix(in srgb, var(--brand) 78%, transparent),
      transparent 70%
    ),
    radial-gradient(
      45% 50% at 82% 28%,
      color-mix(in srgb, var(--accent) 42%, transparent),
      transparent 72%
    ),
    radial-gradient(
      80% 70% at 50% 110%,
      color-mix(in srgb, var(--brand) 60%, #02040f),
      transparent 75%
    );
  background-position:
    0 0,
    100% 0,
    50% 100%;
  background-size:
    140% 140%,
    150% 150%,
    130% 130%;
  position: absolute;
  inset: 0;
}

.has-image > .hero-frame .hero-mesh,
.page-hero.has-image .page-hero-mesh {
  background:
    linear-gradient(#03061880 0%, #03061814 32%, #0306184d 58%, #030618db 100%),
    linear-gradient(90deg, #0306188c, #0000 60%);
  animation: none;
}

.hero-inner {
  width: min(100% - 2 * var(--gutter), var(--container));
  padding: calc(var(--header-h) + 6rem) 0 clamp(4.5rem, 8vw, 6.5rem);
  grid-template-columns: minmax(0, 1.55fr) minmax(250px, 0.85fr);
  align-items: end;
  gap: 2.5rem 3rem;
  margin-inline: auto;
  display: grid;
}

.hero-copy {
  max-width: 860px;
}

.hero-title {
  letter-spacing: -0.045em;
  margin-top: 1.4rem;
  font-size: clamp(2.7rem, 1.2rem + 4vw, 6.2rem);
  font-weight: 600;
  line-height: 0.98;
}

.hero-text {
  color: #ffffffd6;
  max-width: 38rem;
  margin-top: 1.5rem;
  font-size: clamp(1.02rem, 0.95rem + 0.3vw, 1.2rem);
}

.hero-text a {
  color: #fff;
}

.hero-actions {
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.6rem;
  margin-top: 2.2rem;
  display: flex;
}

.hero-actions .button-row {
  margin-top: 0;
}

.video-link {
  color: inherit;
  align-items: center;
  gap: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
}

.video-link:hover {
  color: inherit;
}

.play-dot {
  border: 1px solid var(--glass-dark-line);
  background: var(--glass-dark);
  width: 50px;
  height: 50px;
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  transition: transform 0.4s var(--ease-out);
  border-radius: 50%;
  place-items: center;
  display: grid;
}

.video-link:hover .play-dot {
  transform: scale(1.08);
}

.hero-cards {
  justify-items: end;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  position: relative;
}

.hero-card {
  border: 1px solid var(--glass-dark-line);
  border-radius: var(--r-lg);
  background: var(--glass-dark);
  color: #fff;
  width: min(100%, 300px);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  padding: 1.15rem 1.3rem;
  position: relative;
}

.hero-card-value {
  font: 600 clamp(2rem, 1.3rem + 1.8vw, 2.9rem)/1 var(--font-display);
  letter-spacing: -0.035em;
}

.hero-card-title {
  margin-top: 0.4rem;
  font-weight: 600;
  line-height: 1.3;
}

.hero-card-role,
.hero-card-text {
  color: #ffffffbd;
  margin-top: 0.2rem;
  font-size: 0.87rem;
  line-height: 1.45;
}

.hero-card .stars {
  margin-bottom: 0.6rem;
}

.hero-card-icon {
  background: #ffffff29;
  border-radius: 50%;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: 0.8rem;
  display: grid;
}

.hero-card.card-person {
  padding: 0.45rem 0.45rem 1.05rem;
}

.hero-card-photo {
  aspect-ratio: 4/3;
  border-radius: calc(var(--r-lg) - 6px);
  overflow: hidden;
}

.hero-card-photo img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.card-person .hero-card-body {
  padding: 0.85rem 0.7rem 0;
}

.hero-card-link {
  border-radius: inherit;
  position: absolute;
  inset: 0;
}

.hero-card-arrow {
  width: 36px;
  height: 36px;
  color: var(--ink);
  transition: transform 0.45s var(--ease-out);
  background: #fff;
  border-radius: 50%;
  place-items: center;
  display: grid;
  position: absolute;
  top: 0.8rem;
  right: 0.8rem;
}

.hero-card.has-link:hover .hero-card-arrow {
  transform: rotate(-45deg);
}

.stars {
  vertical-align: middle;
  gap: 2px;
  display: inline-flex;
}

.stars svg {
  fill: color-mix(in srgb, currentColor 22%, transparent);
}

.stars svg.is-on {
  fill: #ffb938;
}

.scroll-cue {
  color: #ffffffc7;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  text-decoration: none;
  display: flex;
  position: absolute;
  bottom: 1.1rem;
  left: 50%;
  translate: -50%;
}

.scroll-cue:hover {
  color: #fff;
}

.scroll-line {
  background: linear-gradient(#fff, #ffffff1a);
  width: 1px;
  height: 38px;
}

.hero-split .hero-frame {
  background: linear-gradient(145deg, var(--brand), var(--brand-deep));
  min-height: 0;
}

.hero-split .hero-inner {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: center;
  padding-block: clamp(3.5rem, 8vw, 6rem);
}

.hero-visual {
  position: relative;
}

.hero-visual-media {
  aspect-ratio: 4/4.4;
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.hero-split .hero-cards {
  position: static;
}

.hero-split .hero-card {
  width: min(64%, 270px);
  margin: 0;
  position: absolute;
}

.hero-split .hero-card:first-child {
  top: 7%;
  left: -9%;
}

.hero-split .hero-card:nth-child(3) {
  bottom: -6%;
  left: 8%;
}

.hero-compact .hero-frame {
  text-align: center;
  min-height: 0;
}

.hero-compact .hero-inner {
  padding-block: calc(var(--header-h) + 5rem) clamp(4rem, 8vw, 6rem);
  grid-template-columns: 1fr;
  justify-items: center;
}

.hero-compact .hero-copy,
.hero-compact .hero-text {
  margin-inline: auto;
}

.hero-compact .hero-actions {
  justify-content: center;
}

.hero-compact .hero-cards {
  grid-auto-flow: column;
  justify-content: center;
  justify-items: stretch;
}

body[data-header-mode="solid"] .ag-hero:first-child .hero-compact .hero-inner,
body[data-header-mode="solid"] .hero-compact .hero-inner {
  padding-top: clamp(4rem, 8vw, 6rem);
}

.align-center .hero-inner {
  text-align: center;
  justify-items: center;
}

.align-center .hero-actions {
  justify-content: center;
}

@media (width<=1000px) {
  .hero-inner,
  .hero-split .hero-inner {
    grid-template-columns: 1fr;
  }

  .hero-cards,
  .hero-compact .hero-cards {
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    grid-auto-columns: minmax(230px, 76%);
    grid-auto-flow: column;
    justify-content: start;
    justify-items: stretch;
    padding-bottom: 0.5rem;
    position: relative;
    overflow-x: auto;
  }

  .hero-cards::-webkit-scrollbar {
    display: none;
  }

  .hero-card,
  .hero-split .hero-card {
    scroll-snap-align: start;
    width: auto;
    margin: 0;
    position: relative;
    inset: auto;
  }

  .hero-card.card-person {
    grid-template-columns: 76px minmax(0, 1fr);
    align-items: center;
    gap: 0.85rem;
    padding: 0.55rem 2.9rem 0.55rem 0.55rem;
    display: grid;
  }

  .card-person .hero-card-photo {
    aspect-ratio: 1;
  }

  .card-person .hero-card-body {
    padding: 0;
  }

  .card-person .hero-card-arrow {
    width: 30px;
    height: 30px;
    top: 0.6rem;
    right: 0.6rem;
  }

  .hero-split .hero-visual {
    gap: 1rem;
    display: grid;
  }

  .scroll-cue {
    display: none;
  }
}

@media (width<=760px) {
  .hero-frame {
    min-height: min(100svh - 2 * var(--frame), 820px);
  }

  .hero-inner {
    padding-top: calc(var(--header-h) + 4.5rem);
  }
}

.page-hero {
  padding: var(--frame) var(--frame) 0;
}

.page-hero-frame {
  isolation: isolate;
  border-radius: var(--r-xl);
  background:
    radial-gradient(100% 100% at 100% 0%, var(--brand-tint), transparent 100%),
    var(--surface);
  border: 1px solid var(--line);
  position: relative;
  overflow: clip;
}

.page-hero .page-hero-mesh {
  opacity: 0.12;
}

.page-hero-inner {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
  padding: calc(var(--header-h) + 3rem) 0 clamp(2.5rem, 5vw, 3.75rem);
  position: relative;
}

.page-hero.has-image {
  padding-top: var(--frame);
}

.page-hero.has-image .page-hero-frame {
  background: var(--night);
  color: #fff;
  border: 0;
  align-items: flex-end;
  display: flex;
}

.page-hero.has-image .page-hero-mesh {
  opacity: 1;
}

.page-hero-media {
  z-index: -2;
  position: absolute;
  inset: 0;
}

.page-title {
  letter-spacing: -0.04em;
  max-width: 22ch;
  margin-top: 1rem;
  font-size: clamp(2.3rem, 1.3rem + 4vw, 5rem);
  line-height: 1;
}

.page-lead {
  max-width: 60ch;
  color: var(--muted);
  margin-top: 1.2rem;
  font-size: 1.12rem;
}

.page-hero.is-compact .page-hero-inner {
  padding-block: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 3vw, 2.25rem);
}

.page-hero.is-compact .page-title {
  max-width: 30ch;
  font-size: clamp(1.9rem, 1.3rem + 2.2vw, 3.2rem);
}

.page-hero.has-image .page-lead {
  color: #ffffffd1;
}

.page-chips {
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.6rem 0 0;
  list-style: none;
  display: flex;
}

/* ==========================================================================
   14. SLIDER VE KAYDIRICILAR (TS-SLIDER & AG-SLIDER)
   Yan yana, sinematik ve yüzen kart slider düzenleri ile kontroller
   ========================================================================== */

.page-hero.has-image .chip {
  background: var(--glass-dark);
  border-color: var(--glass-dark-line);
  color: #fff;
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}

.breadcrumb ol {
  color: var(--muted);
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0 0 1.2rem;
  padding: 0;
  font-size: 0.85rem;
  list-style: none;
  display: flex;
}

.breadcrumb li + li:before {
  content: "/";
  opacity: 0.5;
  margin-right: 0.4rem;
}

.breadcrumb a {
  color: inherit;
  text-decoration: none;
}

.ts-slider {
  --ts-ink: #172b3b;
  --ts-paper: #fff;
  --ts-gap: clamp(2rem, 5vw, 5rem);
  --ts-radius: 24px;
  min-width: 0;
  container-type: inline-size;
}

.ts-slides {
  isolation: isolate;
  display: grid;
}

.ts-slide {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  grid-area: 1/1;
  min-width: 0;
  transition: opacity 0.2s;
  display: grid;
}

.ts-slide[data-active="true"] {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  z-index: 1;
}

.ts-slide-copy {
  overflow-wrap: anywhere;
  align-self: center;
  min-width: 0;
}

.ts-slide-copy h1,
.ts-slide-copy h2 {
  letter-spacing: -0.035em;
  margin: 0 0 1.5rem;
  font-size: clamp(2rem, 4.5cqi, 4.5rem);
  font-weight: 650;
  line-height: 1.12;
}

.ts-slide-text {
  font-size: clamp(1rem, 1.5cqi, 1.2rem);
  line-height: 1.7;
}

.ts-slide-media {
  background: #e8eeed;
  min-width: 0;
  overflow: hidden;
}

.ts-slide-media img {
  object-fit: cover;
  object-position: center;
  width: 100%;
  height: 100%;
  display: block;
}

.ts-slide-placeholder {
  color: #41566a;
  place-items: center;
  height: 100%;
  min-height: 180px;
  font-size: 14px;
  display: grid;
}

.ts-slider--side_by_side .ts-slide {
  gap: var(--ts-gap);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
}

.ts-slider--side_by_side .ts-slide-media {
  aspect-ratio: 1.08;
  border-radius: var(--ts-radius);
}

.layout-compact .ts-slider--side_by_side {
  --ts-gap: 2.5rem;
}

.ts-slider-controls {
  justify-content: flex-end;
  align-items: center;
  gap: 1.3rem;
  margin-top: 2rem;
  display: flex;
}

.ts-slider-controls > span {
  text-align: center;
  font-variant-numeric: tabular-nums;
  min-width: 3rem;
  font-size: 0.8rem;
}

.ts-slider-arrow {
  width: 48px;
  height: 48px;
  color: inherit;
  cursor: pointer;
  background: 0 0;
  border: 1px solid;
  border-radius: 50%;
  place-items: center;
  font-size: 1.5rem;
  display: grid;
}

.ts-slider-arrow:hover {
  background: #7c90921a;
}

.ts-slider-arrow:focus-visible {
  outline-offset: 4px;
  outline: 3px solid;
}

.ts-slider--cinematic .ts-slide {
  color: #fff;
  align-items: center;
  min-height: clamp(420px, 52cqi, 780px);
  padding: clamp(2rem, 7cqi, 8rem);
  position: relative;
}

.ts-slider--cinematic .ts-slide-media {
  z-index: -2;
  position: absolute;
  inset: 0;
}

.ts-slider--cinematic .ts-slide:before {
  content: "";
  z-index: -1;
  background: linear-gradient(90deg, #091720de, #091720a6 60%, #0917206b);
  position: absolute;
  inset: 0;
}

.ts-slider--cinematic .ts-slide-copy {
  --color-muted: #e6edf0;
  width: min(100%, 760px);
}

.ts-slider--cinematic .ts-slide-text {
  color: #f1f4f6;
}

.ts-slider--cinematic .ts-slider-controls {
  color: #fff;
  background: #152733;
  margin-top: 0;
  padding: 1.25rem clamp(2rem, 7cqi, 8rem);
}

.ts-slider.ts-slider--cinematic .button {
  color: #172b3b;
  background: #fff;
  border-color: #fff;
}

.ts-slider--floating_card .ts-slide {
  grid-template-rows: auto 1fr;
  grid-template-columns: minmax(0, 1fr);
}

.ts-slider--floating_card .ts-slide-media {
  aspect-ratio: 2;
  border-radius: var(--ts-radius);
  grid-area: 1/1;
}

.ts-slider--floating_card .ts-slide-copy {
  z-index: 1;
  width: min(80%, 820px);
  color: var(--ts-ink);
  --muted: #576574;
  --line: #dde3e7;
  --color-muted: #576574;
  background: #fff;
  border: 1px solid #172b3b12;
  border-radius: 18px;
  grid-area: 2/1;
  align-self: stretch;
  margin: -6rem 0 0 3rem;
  padding: clamp(1.5rem, 4cqi, 3.5rem);
  position: relative;
  box-shadow: 0 12px 36px #172b3b12;
}

.ts-slider.ts-slider--floating_card .button {
  background: var(--brand, #146c60);
  color: var(--brand-contrast, #fff);
  border-color: var(--brand, #146c60);
}

.align-center .ts-slide-copy {
  text-align: center;
}

.align-center .ts-slider--cinematic .ts-slide-copy,
.align-center .ts-slider--floating_card .ts-slide-copy {
  margin-inline: auto;
}

.ts-slider-empty {
  text-align: center;
  color: inherit;
  border: 1px dashed #a5b4bb;
  border-radius: 12px;
  padding: 3rem 1rem;
}

.ts-slider-preview {
  --ts-gap: 2rem;
  --ts-radius: 16px;
  font-size: 14px;
}

.ts-slider-preview .ts-slide-copy h2 {
  font-size: clamp(1.5rem, 4.5cqi, 3rem);
}

.ts-slider-preview .ts-slider-arrow {
  width: 44px;
  height: 44px;
}

.ts-slider-preview .ts-slide-copy .prose p {
  margin-bottom: 1rem;
}

.ts-slider-preview .ts-slide-media img {
  border-radius: 0;
  margin: 0;
}

.ts-slider-preview.ts-slider--cinematic .ts-slide-copy a {
  color: #172b3b;
  background: #fff;
  border: 1px solid #fff;
}

@container (width<=760px) {
  .ts-slider--side_by_side .ts-slide {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
  }

  .ts-slider--side_by_side .ts-slide-media {
    aspect-ratio: 1.4;
  }

  .ts-slider--cinematic .ts-slide {
    min-height: 480px;
    padding: 2.5rem 1.5rem;
  }

  .ts-slider--cinematic .ts-slide:before {
    background: #091720b8;
  }

  .ts-slider--cinematic .ts-slider-controls {
    padding-inline: 1.5rem;
  }

  .ts-slider--floating_card .ts-slide-media {
    aspect-ratio: 1.4;
  }

  .ts-slider--floating_card .ts-slide-copy {
    width: calc(100% - 2rem);
    margin: -2rem 1rem 0;
    padding: 1.5rem;
  }

  .ts-slide-copy h1,
  .ts-slide-copy h2 {
    font-size: clamp(1.8rem, 6cqi, 3rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ts-slide {
    transition: none;
  }
}

.align-center .ts-slider-preview .ts-slide-copy .flex {
  justify-content: center;
}

.ts-slider-preview.ts-slider--floating_card .ts-slide-copy .flex > span {
  color: #172b3b;
}

/* ==========================================================================
   15. BÖLÜM BAŞLIKLARI, HİKAYE VE MANİFESTO (SECTION HEAD & STORY)
   Bölüm başlıkları, ızgara hikaye alanı, manifesto maddeleri ve süreç adımları
   ========================================================================== */

.breadcrumb a:hover {
  text-decoration: underline;
}

.breadcrumb [aria-current] {
  color: var(--ink);
}

.page-hero.has-image .breadcrumb [aria-current] {
  color: #fff;
}

.page-hero.has-image .breadcrumb ol {
  color: #ffffffbf;
}

.ag-slider {
  padding-block: 0;
}

.ag-slider .slider-frame {
  padding: var(--frame) var(--frame) 0;
}

.ag-slider .ts-slider {
  border-radius: var(--r-xl);
  overflow: hidden;
}

.ag-slider .ts-slider-controls button {
  border-radius: 50%;
}

.section-head {
  gap: 1rem;
  max-width: 760px;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
  display: grid;
}

.section-title {
  letter-spacing: -0.04em;
  font-size: clamp(2rem, 1.2rem + 3vw, 3.7rem);
  line-height: 1.02;
}

.section-text {
  color: var(--muted);
  font-size: 1.08rem;
}

:is(.color-brand, .color-dark) .section-text {
  color: var(--on-dark-muted);
}

.section-head .button-row {
  margin-top: 0.75rem;
}

@media (width>=1000px) {
  .section-head.is-split {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    align-items: start;
    column-gap: 3rem;
    max-width: none;
  }

  .section-head.is-split > .kicker {
    grid-row: 1 / span 3;
    padding-top: 0.8rem;
  }

  .section-head.is-split > :not(.kicker) {
    grid-column: 2;
  }

  .section-head.is-sticky {
    top: calc(var(--header-space) + 1.5rem);
    position: sticky;
  }
}

.section-head.is-centered,
.align-center .section-head {
  text-align: center;
  justify-items: center;
  margin-inline: auto;
}

.section-head.is-compact {
  margin-bottom: 2rem;
}

.story-grid {
  gap: clamp(2rem, 5vw, 4rem);
  display: grid;
}

.story-copy {
  gap: 1.2rem;
  display: grid;
}

@media (width>=1000px) {
  .layout-standard .story-copy {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    column-gap: 3rem;
  }

  .layout-standard .story-copy > .kicker {
    grid-row: 1 / span 3;
    padding-top: 0.8rem;
  }

  .layout-standard .story-copy > :not(.kicker) {
    grid-column: 2;
  }

  .ag-story.layout-split .story-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }

  .ag-story.layout-split .story-media {
    top: calc(var(--header-space) + 1.5rem);
    order: -1;
    position: sticky;
  }
}

.story-media {
  border-radius: var(--r-xl);
  aspect-ratio: 16/9;
  overflow: hidden;
}

.layout-split .story-media {
  aspect-ratio: 4/5;
}

.story-media img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.manifesto {
  text-align: center;
  justify-items: center;
  gap: 1.5rem;
  max-width: 1080px;
  margin-inline: auto;
  display: grid;
}

.manifesto-title {
  letter-spacing: -0.04em;
  font-size: clamp(2rem, 1.1rem + 3.6vw, 4.4rem);
  line-height: 1.08;
}

.points {
  grid-template-columns: repeat(var(--columns, 3), minmax(0, 1fr));
  gap: 1.25rem;
  margin: 0;
  list-style: none;
  display: grid;
}

.columns-1 {
  --columns: 1;
}

.columns-2 {
  --columns: 2;
}

.columns-3 {
  --columns: 3;
}

.columns-4 {
  --columns: 4;
}

.point {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  transition:
    transform 0.5s var(--ease-out),
    box-shadow 0.5s;
  align-content: start;
  gap: 0.7rem;
  padding: clamp(1.4rem, 3vw, 2rem);
  display: grid;
  position: relative;
}

.point:hover {
  box-shadow: var(--shadow);
  transform: translateY(-4px);
}

.point-icon {
  background: var(--brand-soft);
  width: 52px;
  height: 52px;
  color: var(--brand-text);
  border-radius: 16px;
  place-items: center;
  display: grid;
}

.point-title {
  font-size: 1.25rem;
}

.point-text {
  color: var(--muted);
}

:is(.color-brand, .color-dark) .point {
  background: #ffffff0f;
  border-color: #ffffff1f;
}

:is(.color-brand, .color-dark) .point-text {
  color: var(--on-dark-muted);
}

:is(.color-brand, .color-dark) .point-icon {
  color: #fff;
  background: #ffffff1f;
}

.ag-points.layout-split .points-shell {
  gap: 2rem;
  display: grid;
}

@media (width>=1000px) {
  .ag-points.layout-split .points-shell {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 4rem;
  }
}

.ag-points.layout-split .points {
  grid-template-columns: 1fr;
  gap: 0;
}

.ag-points.layout-split .point {
  border: 0;
  border-bottom: 1px solid var(--line);
  background: 0 0;
  border-radius: 0;
  grid-template-columns: auto 1fr;
  column-gap: 1.2rem;
  padding: 1.5rem 0;
}

.ag-points.layout-split .point:hover {
  box-shadow: none;
  transform: none;
}

.ag-points.layout-split .point-icon {
  grid-row: span 2;
}

.process {
  counter-reset: step;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  position: relative;
}

.process:before {
  content: "";
  background: linear-gradient(90deg, var(--brand), var(--accent));
  transform-origin: 0;
  height: 2px;
  position: absolute;
  top: 2.05rem;
  left: 2rem;
  right: 2rem;
}

.process .point {
  background: 0 0;
  border: 0;
  padding: 0 1rem 0 0;
}

.process .point:hover {
  box-shadow: none;
  transform: none;
}

.point-step {
  background: var(--surface);
  border: 1px solid var(--line);
  width: 4.1rem;
  height: 4.1rem;
  color: var(--brand-text);
  font: 700 1.1rem/1 var(--font-display);
  box-shadow: var(--shadow-sm);
  border-radius: 50%;
  place-items: center;
  margin-bottom: 0.8rem;
  display: grid;
  position: relative;
}

:is(.color-brand, .color-dark) .point-step {
  background: var(--night-2);
  color: #fff;
  border-color: #ffffff29;
}

/* ==========================================================================
   16. HİZMETLER, ROZET BULUTU VE İSTATİSTİKLER (SERVICES & STATS)
   Hizmet satırları, hover önizleme, rozet bulutu, sayaçlar ve müşteri logoları
   ========================================================================== */

@media (width<=760px) {
  .points {
    grid-template-columns: 1fr;
  }

  .process:before {
    background: linear-gradient(180deg, var(--brand), var(--accent));
    transform-origin: top;
    width: 2px;
    height: auto;
    inset: 0 auto 0 2.05rem;
  }

  .process .point {
    grid-template-columns: auto 1fr;
    column-gap: 1.2rem;
    padding: 0 0 1.5rem;
  }

  .process .point-step {
    grid-row: span 2;
    margin: 0;
  }
}

@media (width>=761px) and (width<=1000px) {
  .points:not(.process) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.service-rows {
  border-top: 1px solid var(--line);
  margin: 0;
  list-style: none;
  position: relative;
}

.service-row {
  border-bottom: 1px solid var(--line);
  grid-template-columns: 4rem minmax(0, 1.2fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.5rem;
  padding: clamp(1.4rem, 3vw, 2.2rem) 0;
  display: grid;
  position: relative;
}

.service-number {
  color: var(--muted);
  font: 600 0.95rem/1 var(--font-display);
}

.service-title {
  letter-spacing: -0.03em;
  transition:
    transform 0.5s var(--ease-out),
    color 0.3s;
  font-size: clamp(1.4rem, 1rem + 1.4vw, 2.3rem);
}

.service-title a {
  color: inherit;
  text-decoration: none;
}

.service-title a:after {
  content: "";
  position: absolute;
  inset: 0;
}

.service-row:hover .service-title {
  color: var(--brand-text);
  transform: translate(10px);
}

.service-text {
  color: var(--muted);
}

.service-arrow {
  border: 1px solid var(--line-strong);
  width: 52px;
  height: 52px;
  transition:
    transform 0.45s var(--ease-out),
    background-color 0.3s,
    color 0.3s;
  border-radius: 50%;
  place-items: center;
  display: grid;
}

.service-row:hover .service-arrow {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--brand-contrast);
  transform: rotate(-45deg);
}

.service-preview {
  z-index: 3;
  aspect-ratio: 4/3;
  border-radius: var(--r);
  width: 280px;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.3s,
    transform 0.45s var(--ease-out);
  position: absolute;
  top: 50%;
  left: 62%;
  overflow: hidden;
  transform: translate(-50%, -50%) scale(0.85) rotate(-3deg);
}

.service-preview img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.service-row:hover .service-preview {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1) rotate(-3deg);
}

.service-rows.is-following .service-preview {
  top: var(--py, 50%);
  left: var(--px, 62%);
  transition:
    opacity 0.3s,
    transform 0.45s var(--ease-out),
    top 0.5s var(--ease-out),
    left 0.5s var(--ease-out);
  transform: translateY(-50%) scale(0.85) rotate(-3deg);
}

.service-rows.is-following .service-row:hover .service-preview {
  transform: translateY(-50%) scale(1) rotate(-3deg);
}

@media (width<=900px), (hover: none) {
  .service-row {
    grid-template-columns: 2.6rem minmax(0, 1fr) auto;
    gap: 0.6rem 1rem;
  }

  .service-arrow {
    grid-area: 1/3;
    width: 42px;
    height: 42px;
  }

  .service-text {
    grid-area: 2/2 / auto/-1;
  }

  .service-preview {
    display: none;
  }
}

.pill-cloud {
  flex-wrap: wrap;
  gap: 0.8rem;
  margin: 0;
  list-style: none;
  display: flex;
}

.align-center .pill-cloud {
  justify-content: center;
}

.pill {
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  color: inherit;
  font: 600 clamp(1rem, 0.9rem + 0.5vw, 1.35rem)/1 var(--font-display);
  transition:
    background-color 0.3s,
    color 0.3s,
    transform 0.4s var(--ease-out);
  padding: 0.9rem 1.6rem;
  text-decoration: none;
  display: inline-flex;
}

a.pill:hover {
  background: var(--ink);
  color: #fff;
  transform: translateY(-3px);
}

.ag-stats {
  padding-block: 0;
}

.stats-panel {
  isolation: isolate;
  padding-block: var(--section-space);
  position: relative;
  overflow: hidden;
}

.ag-stats.has-image .stats-panel {
  margin: var(--frame);
  border-radius: var(--r-xl);
  background: var(--night);
  color: #fff;
}

.stats-backdrop {
  z-index: -1;
  position: absolute;
  inset: 0;
}

.stats-backdrop img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.stats-backdrop:after {
  content: "";
  background: linear-gradient(120deg, #030618e0, #03061899);
  position: absolute;
  inset: 0;
}

.stats-list {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  display: grid;
}

.stat {
  border-top: 1px solid var(--line-strong);
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.6rem 1.4rem;
  display: flex;
}

.stat-value {
  font: 600 clamp(2.8rem, 1.8rem + 3vw, 4.8rem)/0.95 var(--font-display);
  letter-spacing: -0.05em;
  order: -1;
}

.stat-label {
  align-items: center;
  gap: 0.55rem;
  font-weight: 600;
  display: flex;
}

.stat-icon {
  background: var(--brand-soft);
  width: 34px;
  height: 34px;
  color: var(--brand-text);
  border-radius: 50%;
  place-items: center;
  display: grid;
}

.stat-note {
  color: var(--muted);
  font-size: 0.92rem;
}

:is(.color-brand, .color-dark, .has-image) .stat {
  border-color: #fff3;
}

:is(.color-brand, .color-dark, .has-image) .stat-note {
  color: var(--on-dark-muted);
}

:is(.color-brand, .color-dark, .has-image) .stat-icon {
  color: #fff;
  background: #ffffff24;
}

.ag-stats.has-image :is(.kicker, .section-text) {
  color: var(--on-dark-muted);
}

.ag-stats.layout-split .stats-shell {
  gap: 2rem;
  display: grid;
}

@media (width>=1000px) {
  .ag-stats.layout-split .stats-shell {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 4rem;
  }
}

.ag-stats.layout-split .stats-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ag-stats.layout-split .stat {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
}

:is(.color-brand, .color-dark) .ag-stats.layout-split .stat,
.ag-stats.layout-split:is(.color-brand, .color-dark) .stat {
  background: #ffffff0f;
}

.ag-stats.layout-compact .stats-list {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.ag-stats.layout-compact .stat {
  border: 0;
  border-left: 1px solid var(--line-strong);
  padding-block: 0.5rem;
}

.ag-stats.layout-compact .stat-value {
  font-size: clamp(2.2rem, 1.6rem + 2vw, 3.4rem);
}

@media (width<=640px) {
  .stats-list,
  .ag-stats.layout-compact .stats-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
  }

  .stat {
    padding: 1.2rem 0.9rem 1.2rem 0;
  }

  .ag-stats.layout-split .stat,
  .ag-stats.layout-compact .stat {
    padding-left: 0.9rem;
  }

  .stat-value {
    font-size: 2.6rem;
  }

  .stat-label {
    align-items: flex-start;
    font-size: 0.92rem;
    line-height: 1.35;
  }

  .stat-icon {
    flex: none;
    width: 28px;
    height: 28px;
  }
}

.logos-shell .section-head {
  text-align: center;
  justify-items: center;
  margin-inline: auto;
}

.logo-card {
  justify-content: center;
  align-items: center;
  width: 100%;
  min-width: 0;
  margin: 0;
  display: flex;
}

.logo-card a {
  justify-content: center;
  align-items: center;
  width: 100%;
  min-width: 0;
  display: flex;
}

/* ==========================================================================
   17. MÜŞTERİ YORUMLARI, SSS VE EYLEM ÇAĞRISI (TESTIMONIALS & FAQ)
   Alıntı kartları, referanslar, akordeon SSS listesi ve dönüşüm panelleri
   ========================================================================== */

.logo-card img {
  object-fit: contain;
  filter: grayscale();
  opacity: 0.6;
  width: auto;
  max-width: min(150px, 100%);
  height: auto;
  max-height: 52px;
  transition:
    filter 0.4s,
    opacity 0.4s;
  display: block;
}

.logo-card a:hover img,
.logo-card:hover img {
  filter: none;
  opacity: 1;
}

.logo-name,
.logo-text {
  font: 700 1.3rem/1 var(--font-display);
  letter-spacing: -0.02em;
  white-space: nowrap;
  opacity: 0.6;
  transition:
    color 0.3s,
    opacity 0.3s;
}

/* Logo görseli yüklenmemiş (yalnızca marka adı) referanslar da üzerine gelince canlanır */
.logo-card a:hover .logo-text,
.logo-card:hover .logo-text {
  color: var(--brand-text);
  opacity: 1;
}

.logo-grid {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
  margin: 0;
  list-style: none;
  display: grid;
}

.logo-grid li {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  place-items: center;
  min-width: 0;
  min-height: 110px;
  padding: 1.2rem;
  display: grid;
}

:is(.color-brand, .color-dark) .logo-card img {
  filter: grayscale() brightness(0) invert();
  opacity: 0.7;
}

:is(.color-brand, .color-dark) .logo-grid li {
  background: #ffffff0d;
  border-color: #ffffff1f;
}

.quotes-head {
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem 3rem;
  display: flex;
}

.quotes-summary {
  align-items: center;
  gap: 0.7rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
  font-weight: 600;
  display: flex;
}

.quotes-track {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem;
  display: grid;
}

.quote-card {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  flex-direction: column;
  gap: 1.2rem;
  padding: clamp(1.5rem, 3vw, 2.2rem);
  display: flex;
}

.quote-card blockquote {
  font: 500 clamp(1.08rem, 1rem + 0.35vw, 1.3rem)/1.5 var(--font-display);
  letter-spacing: -0.01em;
}

.quote-card blockquote p:before {
  content: "“";
}

.quote-card blockquote p:after {
  content: "”";
}

.quote-card figcaption {
  align-items: center;
  gap: 0.8rem;
  margin-top: auto;
  display: flex;
}

.quote-card figcaption strong {
  display: block;
}

.quote-role {
  color: var(--muted);
  font-size: 0.88rem;
  display: block;
}

.quote-avatar {
  background: var(--brand-soft);
  width: 48px;
  height: 48px;
  color: var(--brand-text);
  border-radius: 50%;
  flex: none;
  place-items: center;
  font-weight: 700;
  display: grid;
  overflow: hidden;
}

.quote-avatar img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

:is(.color-brand, .color-dark) .quote-card {
  background: #ffffff0f;
  border-color: #ffffff1f;
}

:is(.color-brand, .color-dark) .quote-role {
  color: var(--on-dark-muted);
}

.ag-quotes.layout-standard .quotes-track {
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  gap: 1.25rem;
  padding-bottom: 0.5rem;
  display: flex;
  position: relative;
  overflow-x: auto;
}

.ag-quotes.layout-standard .quotes-track::-webkit-scrollbar {
  display: none;
}

.ag-quotes.layout-standard .quote-card {
  scroll-snap-align: start;
  flex: 0 0 min(86%, 520px);
}

.ag-quotes.layout-split .quotes-shell {
  gap: 2rem;
  display: grid;
}

@media (width>=1000px) {
  .ag-quotes.layout-split .quotes-shell {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 4rem;
  }

  .ag-quotes.layout-split .quotes-head {
    top: calc(var(--header-space) + 1.5rem);
    align-self: start;
    display: block;
    position: sticky;
  }

  .ag-quotes.layout-split .quotes-track {
    grid-template-columns: 1fr;
  }
}

.ag-quotes.layout-compact .quotes-track {
  columns: 3 280px;
  column-gap: 1.25rem;
  display: block;
}

.ag-quotes.layout-compact .quote-card {
  break-inside: avoid;
  margin-bottom: 1.25rem;
}

.faqs-shell {
  gap: 2rem;
  display: grid;
}

@media (width>=1000px) {
  .ag-faqs:not(.layout-compact) .faqs-shell {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 4rem;
  }

  .ag-faqs:not(.layout-compact) .faqs-aside {
    top: calc(var(--header-space) + 1.5rem);
    align-self: start;
    position: sticky;
  }
}

.faqs-contact {
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  justify-items: start;
  gap: 0.9rem;
  padding: 1.5rem;
  display: grid;
}

.faq-list {
  gap: 0.75rem;
  display: grid;
}

.faq {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
}

.faq summary {
  font: 600 1.08rem/1.35 var(--font-display);
  cursor: pointer;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1.4rem;
  list-style: none;
  display: flex;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq-icon {
  background: var(--brand-soft);
  width: 32px;
  height: 32px;
  transition:
    transform 0.45s var(--ease-out),
    background-color 0.3s;
  border-radius: 50%;
  flex: none;
  position: relative;
}

.faq-icon:before,
.faq-icon:after {
  content: "";
  background: var(--brand-text);
  width: 12px;
  height: 2px;
  transition: transform 0.45s var(--ease-out);
  border-radius: 2px;
  margin: -1px 0 0 -6px;
  position: absolute;
  top: 50%;
  left: 50%;
}

.faq-icon:after {
  transform: rotate(90deg);
}

.faq[open] .faq-icon {
  background: var(--brand);
  transform: rotate(180deg);
}

.faq[open] .faq-icon:before,
.faq[open] .faq-icon:after {
  background: var(--brand-contrast);
}

.faq[open] .faq-icon:after {
  transform: rotate(0);
}

.faq .prose {
  color: var(--muted);
  padding: 0 1.4rem 1.4rem;
}

:is(.color-brand, .color-dark) :is(.faq, .faqs-contact) {
  background: #ffffff0f;
  border-color: #ffffff1f;
}

:is(.color-brand, .color-dark) .faq .prose {
  color: var(--on-dark-muted);
}

.cta-panel {
  isolation: isolate;
  border-radius: var(--r-xl);
  background: var(--brand-deep);
  color: #fff;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  align-items: center;
  gap: 2rem;
  padding: clamp(2.5rem, 6vw, 5rem);
  display: grid;
  position: relative;
  overflow: hidden;
}

.button.button-light span:first-child {
  color: #0b1020 !important;
}

.cta-title {
  letter-spacing: -0.045em;
  font-size: clamp(2.2rem, 1.3rem + 3.4vw, 4.4rem);
  line-height: 1;
}

.cta-copy {
  gap: 1.2rem;
  display: grid;
}

.cta-copy .kicker {
  justify-self: start;
}

.cta-text {
  color: #ffffffd1;
}

.cta-copy .button-row {
  margin-top: 0.5rem;
}

/* ==========================================================================
   18. BENTO GRID VE VARYASYONLARI (BENTO GRID SYSTEM)
   Modüler bento ızgara yapısı, kart boyutları ve ton varyasyonları
   ========================================================================== */

.cta-media img {
  border-radius: var(--r-lg);
  width: 100%;
  height: auto;
}

.ag-cta.layout-split .cta-media {
  order: -1;
}

.ag-cta.layout-compact .cta-panel {
  grid-template-columns: 1fr;
  padding-block: clamp(2rem, 4vw, 3rem);
}

.ag-cta.layout-compact .cta-copy {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.ag-cta.layout-compact .cta-title {
  font-size: clamp(1.7rem, 1.2rem + 2vw, 2.8rem);
}

.ag-cta:not(.has-image) .cta-panel,
.ag-cta.layout-compact .cta-panel {
  grid-template-columns: 1fr;
}

.align-center .cta-copy {
  justify-items: center;
}

@media (width<=900px) {
  .cta-panel,
  .ag-cta.layout-compact .cta-copy {
    grid-template-columns: 1fr;
  }
}

.bento-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: minmax(210px, auto);
  grid-auto-flow: dense;
  gap: 1rem;
  margin: 0;
  list-style: none;
  display: grid;
}

.bento-tile {
  isolation: isolate;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--surface);
  transition:
    transform 0.6s var(--ease-out),
    box-shadow 0.6s var(--ease-out);
  flex-direction: column;
  display: flex;
  position: relative;
  overflow: hidden;
}

.bento-tile:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

.size-wide {
  grid-column: span 2;
}

.size-tall {
  grid-row: span 2;
}

.size-large {
  grid-area: span 2 / span 2;
}

.bento-body {
  flex-direction: column;
  gap: 0.55rem;
  height: 100%;
  padding: clamp(1.3rem, 2.4vw, 1.9rem);
  display: flex;
  position: relative;
}

.bento-icon {
  background: var(--brand-soft);
  width: 50px;
  height: 50px;
  color: var(--brand-text);
  border-radius: 16px;
  place-items: center;
  margin-bottom: auto;
  display: grid;
}

.bento-icon + * {
  margin-top: 1.4rem;
}

.bento-kicker {
  color: var(--brand-text);
  font: 600 0.75rem/1.3 var(--font-text);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.bento-value {
  font: 600 clamp(2.6rem, 1.6rem + 3vw, 4.6rem)/0.95 var(--font-display);
  letter-spacing: -0.05em;
  margin-top: auto;
}

.size-small .bento-value {
  font-size: clamp(2.2rem, 1.6rem + 1.6vw, 3.2rem);
}

.bento-icon ~ .bento-value {
  margin-top: 0;
}

.bento-title {
  font-size: 1.2rem;
  line-height: 1.25;
}

.size-large .bento-title,
.size-wide .bento-title {
  font-size: clamp(1.3rem, 1.05rem + 0.8vw, 1.75rem);
}

.bento-text {
  color: var(--muted);
  font-size: 0.96rem;
}

.bento-link {
  color: inherit;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.6rem;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
}

.bento-link:after {
  content: "";
  border-radius: inherit;
  position: absolute;
  inset: 0;
}

.bento-arrow {
  background: var(--ink);
  color: var(--canvas);
  width: 34px;
  height: 34px;
  transition: transform 0.45s var(--ease-out);
  border-radius: 50%;
  place-items: center;
  display: grid;
}

.bento-tile:hover .bento-arrow {
  transform: rotate(-45deg);
}

.tone-soft {
  background: var(--brand-soft);
  border-color: #0000;
}

.tone-brand,
.tone-dark {
  color: #fff;
  border-color: #0000;
}

.tone-brand {
  background: linear-gradient(150deg, var(--brand), var(--brand-deep));
}

.tone-dark {
  background: var(--night);
}

:is(.tone-brand, .tone-dark) .bento-text {
  color: var(--on-dark-muted);
}

:is(.tone-brand, .tone-dark) .bento-icon {
  color: #fff;
  background: #ffffff24;
}

:is(.tone-brand, .tone-dark) .bento-kicker {
  color: var(--on-dark-muted);
}

:is(.tone-brand, .tone-dark) .bento-arrow {
  color: var(--ink);
  background: #fff;
}

.bento-orb {
  z-index: -1;
  aspect-ratio: 1;
  background: radial-gradient(
    circle at 30% 30%,
    #ffffff8c,
    color-mix(in srgb, var(--accent) 45%, transparent) 40%,
    transparent 70%
  );
  filter: blur(4px);
  opacity: 0.7;
  border-radius: 50%;
  width: 80%;
  position: absolute;
  bottom: -25%;
  right: -20%;
}

.bento-tile.has-image {
  color: #fff;
  background: var(--night);
  border: 0;
}

.bento-media {
  z-index: -1;
  position: absolute;
  inset: 0;
}

.bento-media img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  transition: transform 1.2s var(--ease-out);
}

.bento-tile.has-image:hover .bento-media img {
  transform: scale(1.05);
}

.bento-media:after {
  content: "";
  background: linear-gradient(#0000 35%, #030618c7);
  position: absolute;
  inset: 0;
}

.bento-tile.has-image .bento-body {
  justify-content: flex-end;
}

.bento-tile.has-image :is(.bento-kicker, .bento-text) {
  color: #fffc;
}

.bento-tile.has-image .bento-kicker {
  border: 1px solid var(--glass-dark-line);
  border-radius: var(--r-pill);
  background: var(--glass-dark);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  letter-spacing: 0.08em;
  align-self: flex-start;
  padding: 0.35rem 0.75rem;
}

.bento-tile.has-image .bento-icon {
  background: var(--glass-dark);
  color: #fff;
}

@media (width>=1000px) {
  .ag-bento.layout-split .bento-shell {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    align-items: start;
    gap: 4rem;
    display: grid;
  }

  .ag-bento.layout-split .bento-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ag-bento.layout-split .size-wide,
  .ag-bento.layout-split .size-large {
    grid-column: span 2;
  }
}

.ag-bento.layout-compact .bento-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: auto;
}

.ag-bento.layout-compact .bento-tile {
  grid-area: auto;
  min-height: 220px;
}

:is(.color-brand, .color-dark)
  .bento-tile:not(.tone-brand, .tone-dark, .has-image) {
  color: #fff;
  background: #ffffff0f;
  border-color: #ffffff1f;
}

/* ==========================================================================
   19. KARTLAR, PROJELER VE EKİP (CARDS, PROJECTS & TEAM)
   Genel kart ızgaraları, portfolyo proje kartları ve ekip tanıtım alanı
   ========================================================================== */

:is(.color-brand, .color-dark)
  .bento-tile:not(.tone-brand, .tone-dark, .has-image)
  .bento-text {
  color: var(--on-dark-muted);
}

@media (width<=1000px) {
  .bento-grid,
  .ag-bento.layout-compact .bento-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (width<=640px) {
  .bento-grid,
  .ag-bento.layout-compact .bento-grid {
    grid-auto-rows: auto;
    gap: 0.75rem;
  }

  .bento-tile {
    min-height: 170px;
    grid-row: auto !important;
  }

  .bento-tile:is(.size-wide, .size-tall, .size-large, .has-image) {
    grid-column: span 2 !important;
  }

  .bento-tile.has-image,
  .size-large {
    min-height: 300px;
  }

  .size-small .bento-body {
    padding: 1.1rem;
  }

  .size-small .bento-title {
    font-size: 1.02rem;
  }

  .size-small .bento-text {
    font-size: 0.88rem;
  }

  .size-small .bento-value {
    font-size: 2.1rem;
  }

  .size-small .bento-icon {
    border-radius: 13px;
    width: 42px;
    height: 42px;
  }
}

.card-grid {
  grid-template-columns: repeat(var(--columns, 3), minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  display: grid;
}

.listing .card-grid,
.ag-collection .card-grid {
  --columns: 3;
}

.product-grid {
  --columns: 4 !important
;
}

.card {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  height: 100%;
  transition:
    transform 0.6s var(--ease-out),
    box-shadow 0.6s var(--ease-out);
  flex-direction: column;
  display: flex;
  position: relative;
  overflow: hidden;
}

.card.has-link:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-5px);
}

.card-media {
  aspect-ratio: 4/3;
  background: var(--brand-soft);
  position: relative;
  overflow: hidden;
}

.card-media img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  transition: transform 1.1s var(--ease-out);
}

.card-media-empty {
  color: color-mix(in srgb, var(--brand-text) 55%, transparent);
  place-items: center;
  display: grid;
}

.card.has-link:hover .card-media img {
  transform: scale(1.05);
}

.card-play {
  background: var(--glass-dark);
  border: 1px solid var(--glass-dark-line);
  color: #fff;
  width: 60px;
  height: 60px;
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-radius: 50%;
  place-items: center;
  display: grid;
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
}

.card-body {
  flex-direction: column;
  flex: 1;
  gap: 0.6rem;
  padding: 1.3rem 1.4rem 1.5rem;
  display: flex;
}

.card-meta {
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  display: flex;
}

.card-number {
  color: var(--brand-text);
  font: 700 0.9rem/1 var(--font-display);
  margin-right: 0.4rem;
}

.card-title {
  letter-spacing: -0.02em;
  padding-right: 2.5rem;
  font-size: 1.25rem;
  line-height: 1.25;
}

.card-title a {
  color: inherit;
  text-decoration: none;
}

.card-title a:after {
  content: "";
  z-index: 1;
  position: absolute;
  inset: 0;
}

.card-text {
  color: var(--muted);
  font-size: 0.96rem;
}

.card-arrow {
  background: var(--brand-soft);
  width: 40px;
  height: 40px;
  color: var(--brand-text);
  transition:
    transform 0.45s var(--ease-out),
    background-color 0.3s,
    color 0.3s;
  border-radius: 50%;
  place-items: center;
  display: grid;
  position: absolute;
  bottom: 1.2rem;
  right: 1.1rem;
}

.card.has-image .card-arrow {
  color: var(--ink);
  box-shadow: var(--shadow-sm);
  background: var(--canvas);
  top: 1rem;
  bottom: auto;
}

.card.has-link:hover .card-arrow {
  background: var(--brand);
  color: var(--brand-contrast);
  transform: rotate(-45deg);
}

:is(.color-brand, .color-dark) .card {
  color: #fff;
  background: #ffffff0f;
  border-color: #ffffff1f;
}

:is(.color-brand, .color-dark) .card-text {
  color: var(--on-dark-muted);
}

.service-card .card-media {
  aspect-ratio: 16/10;
}

.project-card {
  background: 0 0;
  border: 0;
}

.project-card .card-media {
  aspect-ratio: 4/3.1;
  border-radius: var(--r-xl);
}

.project-card .card-body {
  padding: 1rem 0.2rem;
}

.project-card .card-title {
  font-size: clamp(1.3rem, 1.1rem + 0.7vw, 1.75rem);
}

.project-card.has-link:hover {
  box-shadow: none;
  transform: none;
}

.project-grid {
  grid-template-columns: repeat(var(--columns, 3), minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  display: grid;
}

.project-grid.is-staggered {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(1.5rem, 4vw, 4rem);
}

@media (width>=761px) {
  .project-grid.is-staggered > :nth-child(2n) {
    margin-top: clamp(3rem, 8vw, 6rem);
  }
}

.carousel {
  position: relative;
}

.carousel-track {
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  cursor: grab;
  gap: clamp(1rem, 2vw, 1.5rem);
  padding-bottom: 0.5rem;
  scroll-padding-inline: 0;
  display: flex;
  position: relative;
  overflow-x: auto;
}

.carousel-track::-webkit-scrollbar {
  display: none;
}

.carousel-track.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  -webkit-user-select: none;
  user-select: none;
}

.carousel-track.is-dragging a {
  pointer-events: none;
}

.carousel-item {
  scroll-snap-align: start;
  flex: 0 0 min(82%, 460px);
}

.carousel-controls {
  align-items: center;
  gap: 0.6rem;
  margin-top: 1.6rem;
  display: flex;
}

.carousel-progress {
  background: var(--line-strong);
  border-radius: 2px;
  flex: 1;
  height: 2px;
  margin-right: 1rem;
  position: relative;
  overflow: hidden;
}

.carousel-progress span {
  background: var(--brand);
  transform-origin: 0;
  transform: scaleX(var(--progress, 0.15));
  transition: transform 0.3s var(--ease-out);
  position: absolute;
  inset: 0;
}

.carousel-prev svg {
  transform: scaleX(-1);
}

:is(.color-brand, .color-dark) .carousel-progress {
  background: #fff3;
}

:is(.color-brand, .color-dark) .carousel-progress span {
  background: #fff;
}

.team-grid {
  grid-template-columns: repeat(var(--columns, 4), minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  display: grid;
}

.listing .team-grid {
  --columns: 4;
}

.person-card {
  border-radius: var(--r-xl);
  background: var(--brand-soft);
  position: relative;
  overflow: hidden;
}

.person-media {
  aspect-ratio: 4/5;
}

.person-media img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  transition: transform 1.1s var(--ease-out);
}

.person-card:hover .person-media img {
  transform: scale(1.04);
}

.person-initials {
  height: 100%;
  color: var(--brand-text);
  font: 700 clamp(2.5rem, 2rem + 2vw, 4rem)/1 var(--font-display);
  place-items: center;
  display: grid;
}

.person-strip {
  border: 1px solid var(--glass-light-line);
  border-radius: var(--r-lg);
  background: var(--glass-light);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  color: var(--ink);
  padding: 0.85rem 1rem;
  position: absolute;
  bottom: 0.6rem;
  left: 0.6rem;
  right: 0.6rem;
}

.person-name {
  font-size: 1.08rem;
}

.person-role {
  color: var(--muted);
  font-size: 0.88rem;
}

.person-links {
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0.9rem 1rem 5.8rem;
  font-size: 0.85rem;
  list-style: none;
  display: flex;
}

.person-links a {
  color: var(--brand-text);
  font-weight: 600;
}

.ag-team.layout-split .team-grid > :first-child {
  grid-area: span 2 / span 2;
}

.ag-team.layout-compact .team-grid {
  --columns: 6;
}

.ag-team.layout-compact .person-strip {
  margin: 0.5rem;
  position: static;
}

.price-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: clamp(1rem, 2vw, 1.5rem);
  display: grid;
}

@media (width>=1001px) {
  .price-grid:has(> :only-child) {
    grid-template-columns: minmax(0, 420px);
    justify-content: center;
  }

  .price-grid:has(> :nth-child(2):last-child) {
    grid-template-columns: repeat(2, minmax(0, 420px));
    justify-content: center;
  }
}

.price-card {
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--surface);
  text-align: start;
  flex-direction: column;
  gap: 1rem;
  height: 100%;
  padding: clamp(1.6rem, 3vw, 2.3rem);
  display: flex;
  position: relative;
}

.price-card.is-recommended {
  background: linear-gradient(155deg, var(--brand), var(--brand-deep));
  color: #fff;
  box-shadow: 0 34px 60px -30px var(--brand);
  border-color: #0000;
}

@media (width>=1000px) {
  .price-card.is-recommended {
    transform: translateY(-14px);
  }
}

.price-badge {
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--accent-contrast);
  align-self: flex-start;
  padding: 0.35rem 0.8rem;
  font-size: 0.78rem;
  font-weight: 700;
}

.price-name {
  font-size: 1.35rem;
}

.price-name a {
  color: inherit;
  text-decoration: none;
}

.price-summary {
  color: var(--muted);
}

.price-amount {
  font: 600 clamp(2.1rem, 1.5rem + 1.5vw, 2.9rem)/1 var(--font-display);
  letter-spacing: -0.04em;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.5rem;
  display: flex;
}

.price-amount small {
  font: 500 1rem/1 var(--font-text);
  letter-spacing: 0;
  white-space: nowrap;
  color: var(--muted);
}

.price-tax {
  color: var(--muted);
  margin-top: -0.6rem;
  font-size: 0.85rem;
}

.is-recommended :is(.price-summary, .price-amount small, .price-tax) {
  color: var(--on-dark-muted);
}

.price-features {
  border-top: 1px solid var(--line);
  gap: 0.7rem;
  margin: 0.4rem 0 1rem;
  padding: 1.1rem 0 0;
  list-style: none;
  display: grid;
}

/* ==========================================================================
   20. FİYATLANDIRMA VE PAKETLER (PRICING & PACKAGES)
   Paket kartları, fiyatlandırma tabloları, özellik onay işaretleri ve rozetler
   ========================================================================== */

.is-recommended .price-features {
  border-color: #ffffff2e;
}

.price-features li {
  align-items: flex-start;
  gap: 0.7rem;
  display: flex;
}

.price-features li.is-off {
  opacity: 0.5;
}

.price-check {
  background: var(--brand-soft);
  width: 22px;
  height: 22px;
  color: var(--brand-text);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.price-check i {
  font-size: 13px;
}

.is-recommended .price-check {
  color: #fff;
  background: #ffffff29;
}

.price-card .button {
  margin-top: auto;
}

.ag-packages.layout-split .packages-shell {
  gap: 2rem;
  display: grid;
}

@media (width>=1100px) {
  .ag-packages.layout-split .packages-shell {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: 3rem;
  }

  .ag-packages.layout-split .price-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.ag-packages.layout-compact .price-grid {
  grid-template-columns: 1fr;
}

.ag-packages.layout-compact .price-card {
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto;
  align-items: center;
  display: grid;
}

.ag-packages.layout-compact .price-features {
  display: none;
}

.ag-packages.layout-compact .price-card.is-recommended {
  transform: none;
}

.product-card .card-body {
  gap: 0.35rem;
}

.card-price {
  font: 600 1.25rem/1.2 var(--font-display);
  margin-top: auto;
}

.card-demo {
  z-index: 2;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.45rem;
  display: flex;
  position: relative;
}

.card-demo a {
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  color: var(--ink);
  align-items: center;
  padding: 0.35rem 0.75rem;
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  transition:
    background-color 0.25s,
    color 0.25s,
    border-color 0.25s;
  display: inline-flex;
}

.card-demo a:hover {
  border-color: var(--brand);
  background: var(--brand);
  color: var(--brand-contrast);
}

.card-tax {
  color: var(--muted);
  font-size: 0.8rem;
}

.favorite-toggle {
  z-index: 2;
  border: 1px solid var(--glass-light-line);
  border-radius: var(--r-pill);
  background: var(--glass-light);
  color: var(--ink);
  cursor: pointer;
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  padding: 0.4rem 0.75rem;
  font-size: 0.78rem;
  font-weight: 600;
  position: absolute;
  top: 0.8rem;
  left: 0.8rem;
}

.favorite-toggle[aria-pressed="true"] {
  background: var(--accent);
  color: var(--accent-contrast);
  border-color: #0000;
}

.post-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  display: grid;
}

/* ==========================================================================
   21. LİSTELEME, ARAMA VE SAYFALAMA (LISTING & FILTERS)
   Blog/haber gönderi ızgarası, filtre çubukları, arama ve sayfalama
   ========================================================================== */

.ag-posts.layout-compact .post-grid {
  grid-template-columns: 1fr;
  gap: 0;
}

.ag-posts.layout-compact .card {
  border: 0;
  border-bottom: 1px solid var(--line);
  background: 0 0;
  border-radius: 0;
  flex-direction: row;
  align-items: center;
}

.ag-posts.layout-compact .card-media {
  display: none;
}

.ag-posts.layout-compact .card:hover {
  box-shadow: none;
  transform: none;
}

@media (width<=1000px) {
  .card-grid,
  .team-grid,
  .post-grid,
  .ag-posts.layout-standard .post-grid,
  .project-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .product-grid {
    --columns: 2 !important
    ;
  }

  .price-grid {
    grid-template-columns: 1fr;
    max-width: 560px;
    margin-inline: auto;
  }

  .ag-team.layout-compact .team-grid {
    --columns: 3;
  }
}

@media (width<=640px) {
  .card-grid,
  .post-grid,
  .ag-posts.layout-standard .post-grid,
  .project-grid,
  .project-grid.is-staggered {
    grid-template-columns: 1fr;
  }

  .team-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
  }

  .ag-team.layout-compact .team-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .ag-team.layout-split .team-grid > :first-child {
    grid-area: auto/1/auto/-1;
  }

  .person-strip {
    border-radius: var(--r);
    padding: 0.6rem 0.75rem;
    bottom: 0.4rem;
    left: 0.4rem;
    right: 0.4rem;
  }

  .person-name {
    font-size: 0.95rem;
  }

  .person-role {
    font-size: 0.78rem;
    line-height: 1.35;
  }

  .ag-packages.layout-compact .price-card {
    grid-template-columns: 1fr;
  }
}

.listing {
  padding-block: clamp(2rem, 4vw, 3rem) var(--section-space);
}

.listing-filters {
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
  display: flex;
}

.listing-filters .field {
  gap: 0;
}

.listing-filters :is(input, select) {
  min-height: 48px;
  border-radius: var(--r-pill) !important;
}

.search-field {
  flex: 260px;
  position: relative;
}

.search-field .icon {
  color: var(--muted);
  pointer-events: none;
  position: absolute;
  top: 50%;
  left: 1rem;
  translate: 0 -50%;
}

.search-field input {
  padding-left: 2.7rem !important;
}

.filter-more {
  position: relative;
}

.filter-more summary {
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: var(--surface);
  cursor: pointer;
  align-items: center;
  min-height: 48px;
  padding: 0 1.2rem;
  font-weight: 600;
  list-style: none;
  display: flex;
}

.filter-more summary::-webkit-details-marker {
  display: none;
}

.filter-more[open] summary {
  border-color: var(--brand);
}

.filter-more-body {
  z-index: 10;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  width: min(90vw, 320px);
  box-shadow: var(--shadow-lg);
  gap: 0.8rem;
  padding: 1.2rem;
  display: grid;
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
}

.filter-more-body label.field {
  align-items: center;
  gap: 0.6rem;
  font-weight: 500;
  display: flex;
}

.chip-row {
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 2rem;
  list-style: none;
  display: flex;
}

.chip-row .chip {
  padding: 0.5rem 1rem;
  font-size: 0.88rem;
}

.empty-state {
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-xl);
  color: var(--muted);
  text-align: center;
  justify-items: center;
  gap: 1rem;
  padding: clamp(3rem, 8vw, 6rem) 1rem;
  display: grid;
}

.empty-orb {
  background: radial-gradient(
    circle at 30% 30%,
    #fff,
    var(--brand-tint) 45%,
    var(--brand) 100%
  );
  width: 72px;
  height: 72px;
  box-shadow: 0 20px 40px -18px var(--brand);
  border-radius: 50%;
}

.pagination {
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  margin-top: 3rem;
  display: grid;
}

.pagination > :last-child {
  justify-self: end;
}

/* ==========================================================================
   22. İÇERİK DETAY SAYFALARI (BLOG, MAKALE VE PROJE DETAY)
   Detay düzeni, yan bilgi paneli, galeri, dokümanlar, paylaşım ve sonraki içerik
   ========================================================================== */

.pagination-count {
  color: var(--muted);
  font-weight: 600;
}

.detail {
  padding-block: clamp(2.5rem, 5vw, 4rem) var(--section-space);
}

.article-layout {
  gap: 2.5rem;
  display: grid;
}

@media (width>=1000px) {
  .article-layout.has-facts {
    grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
    align-items: start;
    gap: 4rem;
  }

  .fact-panel {
    top: calc(var(--header-space) + 1.5rem);
    position: sticky;
  }
}

.article-content {
  font-size: 1.1rem;
}

.article-layout:not(.has-facts) .article-content {
  margin-inline: auto;
}

.fact-panel {
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--surface);
  gap: 1.2rem;
  padding: 1.6rem;
  display: grid;
}

.fact-panel dl {
  gap: 1rem;
  display: grid;
}

.fact-panel dl > div {
  border-bottom: 1px solid var(--line);
  gap: 0.15rem;
  padding-bottom: 1rem;
  display: grid;
}

.fact-panel dt {
  color: var(--muted);
  font-size: 0.85rem;
}

.fact-panel dd {
  font-weight: 600;
}

.content-section {
  margin-top: clamp(3rem, 6vw, 5rem);
}

.gallery-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin: 0;
  list-style: none;
  display: grid;
}

.gallery-grid li:nth-child(5n + 1) {
  grid-area: span 2 / span 2;
}

.gallery-grid:has(> li:only-child) {
  grid-template-columns: minmax(0, 1fr);
}

.gallery-grid:has(> li:nth-child(2):last-child) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.gallery-grid:not(:has(> li:nth-child(3))) li {
  grid-area: auto;
}

.gallery-grid:not(:has(> li:nth-child(3))) img {
  aspect-ratio: 16/9;
  max-height: 72svh;
}

.gallery-grid a {
  border-radius: var(--r-lg);
  background: var(--brand-soft);
  height: 100%;
  display: block;
  overflow: hidden;
}

.gallery-grid img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  min-height: 200px;
  transition: transform 1s var(--ease-out);
}

.gallery-grid a:hover img {
  transform: scale(1.04);
}

.gallery-caption {
  color: var(--muted);
  margin-top: 0.5rem;
  font-size: 0.9rem;
}

.video-list {
  gap: 1.5rem;
  display: grid;
}

.video-block,
.embed-placeholder {
  border-radius: var(--r-xl);
  background: var(--night);
  position: relative;
  overflow: hidden;
}

.embed-placeholder img {
  aspect-ratio: 16/9;
  object-fit: cover;
  opacity: 0.8;
  width: 100%;
}

.embed-placeholder .play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
}

.video-block video,
.video-block iframe {
  aspect-ratio: 16/9;
  border: 0;
  width: 100%;
  display: block;
}

.document-list {
  gap: 0.6rem;
  margin: 0;
  list-style: none;
  display: grid;
}

.document-list a {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  align-items: center;
  gap: 0.8rem;
  padding: 1rem 1.2rem;
  text-decoration: none;
  display: flex;
}

.share-row {
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  max-width: 68ch;
  margin: 2.5rem auto 0;
  padding-top: 1.5rem;
  display: flex;
}

.share-row .small-heading {
  margin: 0 0.6rem 0 0;
}

.reading-progress {
  z-index: 60;
  pointer-events: none;
  height: 3px;
  position: fixed;
  inset: 0 0 auto;
}

.reading-progress span {
  background: linear-gradient(90deg, var(--brand), var(--accent));
  transform-origin: 0;
  height: 100%;
  display: block;
  transform: scaleX(0);
}

@supports not (animation-timeline: scroll()) {
  .reading-progress {
    display: none;
  }
}

.detail-cta {
  border-radius: var(--r-xl);
  background: linear-gradient(145deg, var(--brand), var(--brand-deep));
  color: #fff;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  margin-top: clamp(3rem, 6vw, 5rem);
  padding: clamp(2rem, 5vw, 3.5rem);
  display: flex;
}

.detail-cta-title {
  font: 600 clamp(1.8rem, 1.2rem + 2.4vw, 3.2rem)/1 var(--font-display);
  letter-spacing: -0.04em;
}

.next-item {
  isolation: isolate;
  margin: 0 var(--frame) clamp(2.5rem, 6vw, 4.5rem);
  border-radius: var(--r-xl);
  background: var(--night);
  color: #fff;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 1rem 2rem;
  padding: clamp(2rem, 6vw, 4.5rem);
  text-decoration: none;
  display: grid;
  position: relative;
  overflow: hidden;
}

.next-item:hover {
  color: #fff;
}

.next-label {
  color: var(--on-dark-muted);
  font: 600 0.78rem/1.2 var(--font-text);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  grid-column: 1/-1;
}

.next-title {
  font: 600 clamp(2rem, 1.2rem + 3.6vw, 4.6rem)/1 var(--font-display);
  letter-spacing: -0.045em;
}

.next-media {
  z-index: -1;
  opacity: 0.35;
  transition:
    opacity 0.6s,
    transform 1.2s var(--ease-out);
  position: absolute;
  inset: 0;
}

.next-media img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.next-item:hover .next-media {
  opacity: 0.5;
  transform: scale(1.04);
}

.next-arrow {
  width: 72px;
  height: 72px;
  color: var(--ink);
  transition: transform 0.5s var(--ease-out);
  background: #fff;
  border-radius: 50%;
  place-items: center;
  display: grid;
}

.next-item:hover .next-arrow {
  transform: rotate(-45deg);
}

.package-detail {
  gap: 2.5rem;
  display: grid;
}

@media (width>=1000px) {
  .package-detail {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: start;
  }
}

.product-shell {
  gap: 2.5rem;
  display: grid;
}

.product-detail {
  gap: clamp(1.5rem, 4vw, 3.5rem);
  display: grid;
}

@media (width>=900px) {
  .product-detail {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    align-items: start;
  }
}

/* ==========================================================================
   23. ÜRÜN VE PAKET DETAY SAYFASI (PRODUCT & PACKAGE DETAIL)
   Ürün görseli, bilgi akışı, demo paneli, sekmeler ve teknik özellikler
   ========================================================================== */

.product-image {
  border-radius: var(--r-xl);
  background: var(--brand-soft);
  overflow: hidden;
}

.product-image:not(:has(img)) {
  aspect-ratio: 4/3;
}

.detail-product .product-information > h2 {
  display: none;
}

.product-image img {
  width: 100%;
  height: auto;
}

.product-information {
  align-content: start;
  gap: 1rem;
  display: grid;
}

.product-information h2 {
  font-size: clamp(1.8rem, 1.3rem + 2vw, 2.8rem);
}

.product-information .eyebrow {
  color: var(--muted);
  font-size: 0.85rem;
}

.product-information .price {
  font: 600 clamp(1.8rem, 1.4rem + 1.2vw, 2.4rem)/1 var(--font-display);
}

.product-actions {
  flex-wrap: wrap;
  gap: 0.75rem;
  display: flex;
}

.product-request-line {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface-2);
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 0.75rem 1.25rem;
  margin: 0.75rem 0 1.25rem;
  padding: 1rem 1.1rem;
  display: flex;
}

.product-request-line .product-request-summary {
  align-self: center;
  margin: 0;
}

.product-request-line .quantity-field {
  gap: 0.35rem;
  display: grid;
}

.product-request-line .quantity-field label {
  font-size: 0.85rem;
  font-weight: 700;
}

.product-request-line .quantity-field input {
  width: 7rem;
}

.product-demo {
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: linear-gradient(160deg, var(--brand-soft), var(--surface) 70%);
  gap: 0.9rem;
  padding: 1.3rem;
  display: grid;
}

.product-demo-title {
  color: var(--brand-text);
  font: 600 0.75rem/1.2 var(--font-text);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.product-demo-actions {
  flex-wrap: wrap;
  gap: 0.6rem;
  display: flex;
}

.product-demo .button {
  min-height: 44px;
  padding-inline: 1.2rem;
}

.product-demo-login {
  flex-wrap: wrap;
  gap: 0.6rem 1.75rem;
  margin: 0;
  display: flex;
}

.product-demo-login dt {
  color: var(--muted);
  font-size: 0.8rem;
}

.product-demo-login code {
  font:
    600 0.95rem/1.5 ui-monospace,
    SFMono-Regular,
    Menlo,
    Consolas,
    monospace;
}

.button-whatsapp {
  color: #fff;
  background: #128c4b;
}

.product-store {
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--surface);
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1rem;
  padding: 1.4rem;
  display: flex;
}

.product-store:not(:has(*)) {
  display: none;
}

.product-panels {
  gap: 0.75rem;
  display: grid;
}

.product-tab-list {
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid var(--line);
  gap: 0.4rem;
  width: fit-content;
  padding: 0.3rem;
  display: flex;
}

.product-tab-list button {
  border-radius: var(--r-pill);
  cursor: pointer;
  background: 0 0;
  border: 0;
  padding: 0.6rem 1.1rem;
  font-weight: 600;
}

.product-tab-list button[aria-selected="true"] {
  background: var(--ink);
  color: #fff;
}

.product-panels details {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
}

.product-panels summary {
  cursor: pointer;
  padding: 1.1rem 1.3rem;
  font-weight: 600;
}

.product-tabs-enhanced .product-panels details > summary {
  display: none;
}

.product-panel-body {
  padding: 0 1.3rem 1.3rem;
}

.product-specifications {
  gap: 0.5rem;
  display: grid;
}

.product-specifications > div {
  border-bottom: 1px solid var(--line);
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0;
  display: flex;
}

.product-specifications dt {
  color: var(--muted);
}

.contact-layout {
  padding-block: clamp(2rem, 4vw, 3rem) var(--section-space);
  gap: clamp(1.5rem, 3vw, 2rem);
  display: grid;
}

@media (width>=1000px) {
  .contact-layout {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: start;
  }
}

.contact-panel {
  border-radius: var(--r-xl);
  background: var(--night);
  color: var(--on-dark);
  gap: 1.6rem;
  padding: clamp(1.8rem, 4vw, 2.8rem);
  display: grid;
  position: relative;
  overflow: hidden;
}

.contact-panel:before {
  content: "";
  aspect-ratio: 1;
  background: radial-gradient(
    closest-side,
    color-mix(in srgb, var(--brand) 60%, transparent),
    transparent
  );
  opacity: 0.6;
  pointer-events: none;
  border-radius: 50%;
  width: 90%;
  position: absolute;
  inset: -40% -30% auto auto;
}

.contact-panel .kicker {
  justify-self: start;
}

.contact-methods {
  gap: 1.1rem;
  margin: 0;
  list-style: none;
  display: grid;
  position: relative;
}

.contact-methods li {
  align-items: flex-start;
  gap: 1rem;
  display: flex;
}

.contact-icon {
  background: #ffffff1a;
  border-radius: 14px;
  flex: none;
  place-items: center;
  width: 46px;
  height: 46px;
  display: grid;
}

.contact-methods li > span:last-child {
  gap: 0.1rem;
  display: grid;
}

.contact-label {
  color: var(--on-dark-muted);
  font-size: 0.82rem;
}

.contact-methods a {
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}

.contact-methods a:hover {
  text-decoration: underline;
}

.contact-panel .social-links {
  position: relative;
}

.form-card {
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  padding: clamp(1.5rem, 4vw, 2.6rem);
}

.inquiry-form {
  gap: 1.2rem;
  display: grid;
}

/* ==========================================================================
   24. İLETİŞİM FORMU VE KANALLARI (CONTACT FORM)
   İletişim sayfası düzeni, bilgi paneli ve mesaj talep formu
   ========================================================================== */

.inquiry-form fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

.form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 1.4rem;
  display: grid;
}

.form-grid .full-width {
  grid-column: 1/-1;
}

@media (width<=640px) {
  .form-grid {
    grid-template-columns: 1fr;
  }
}

.commerce-page {
  padding-block: clamp(2rem, 4vw, 3rem) var(--section-space);
  gap: 1.5rem;
  display: grid;
}

.commerce-page > p {
  max-width: 68ch;
  color: var(--muted);
}

.commerce-box {
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--surface);
  gap: 1rem;
  padding: clamp(1.4rem, 3vw, 2rem);
  display: grid;
}

.commerce-box h2 {
  font-size: 1.3rem;
}

.commerce-box > label,
.commerce-fields label,
.commerce-add label,
.commerce-reviews label {
  gap: 0.4rem;
  font-size: 0.9rem;
  font-weight: 600;
  display: grid;
}

.commerce-fields {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  display: grid;
}

.commerce-wide {
  grid-column: 1/-1;
}

.commerce-choice {
  flex-wrap: wrap;
  gap: 0.6rem;
  display: flex;
}

.commerce-choice label {
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  cursor: pointer;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem 1rem;
  font-weight: 600;
  transition:
    border-color 0.2s,
    background-color 0.2s;
  display: inline-flex;
}

.commerce-choice label:has(input:checked) {
  border-color: var(--brand);
  background: var(--brand-soft);
  color: var(--brand-text);
}

.commerce-checkbox {
  align-items: flex-start;
  line-height: 1.45;
  gap: 0.7rem !important;
  font-weight: 500 !important;
  display: flex !important;
}

.commerce-checkbox input {
  flex: none;
  margin-top: 0.2rem;
}

.commerce-box details {
  border-top: 1px solid var(--line);
  padding: 0.8rem 0;
}

.commerce-box summary {
  cursor: pointer;
  font-weight: 600;
}

.commerce-box .prose {
  color: var(--muted);
  white-space: pre-line;
  margin-top: 0.6rem;
  font-size: 0.92rem;
}

.checkout-grid {
  gap: 1.5rem;
  display: grid;
}

.checkout-main {
  gap: 1.25rem;
  display: grid;
}

@media (width>=1000px) {
  .checkout-grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: start;
  }

  .checkout-aside {
    top: calc(var(--header-space) + 1.5rem);
    position: sticky;
  }
}

.checkout-aside {
  gap: 1rem;
  display: grid;
}

.checkout-aside .commerce-box {
  background: var(--night);
  color: var(--on-dark);
  border-color: #0000;
}

.checkout-aside .commerce-box :is(.prose, p) {
  color: var(--on-dark-muted);
}

/* ==========================================================================
   25. E-TİCARET, SEPET VE SİPARİŞ (COMMERCE & CART)
   Ürün/hizmet sepeti, satır öğeleri, özet tutar, ödeme ve adres formu
   ========================================================================== */

.checkout-aside .commerce-box details {
  border-color: #ffffff24;
}

.checkout-aside .button {
  width: 100%;
  min-height: 56px;
}

.commerce-summary {
  gap: 0.2rem;
  display: grid;
}

.commerce-summary div {
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0;
  display: flex;
}

.commerce-summary div:last-child {
  font: 600 1.35rem/1.2 var(--font-display);
  border-top: 1px solid #ffffff29;
  margin-top: 0.4rem;
  padding-top: 0.9rem;
}

[data-commerce-quote-error] {
  color: #fda29b;
}

.cart-layout {
  gap: 1.25rem;
  display: grid;
}

@media (width>=1000px) {
  .cart-layout:has(.commerce-lines) {
    grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
    align-items: start;
  }

  .cart-layout > .commerce-lines {
    grid-row: 1 / span 2;
  }

  .cart-layout > :is(.commerce-total, .button) {
    grid-column: 2;
  }
}

.commerce-lines {
  gap: 0.8rem;
  display: grid;
}

.commerce-line {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 1rem 1.5rem;
  padding: 1.2rem 1.4rem;
  display: grid;
}

.commerce-line h2 {
  font-size: 1.1rem;
}

.commerce-line p {
  color: var(--muted);
  font-size: 0.85rem;
}

.commerce-line form {
  align-items: flex-end;
  gap: 0.5rem;
  display: flex;
}

.commerce-line input {
  width: 5rem !important;
}

.commerce-line strong {
  font: 600 1.15rem/1 var(--font-display);
}

.commerce-total {
  border-radius: var(--r-lg);
  background: var(--night);
  color: var(--on-dark);
  justify-content: space-between;
  align-items: baseline;
  padding: 1.4rem;
  display: flex;
}

.commerce-total strong {
  font: 600 1.5rem/1 var(--font-display);
}

.cart-layout > .button {
  width: 100%;
}

.commerce-add {
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1rem;
  display: flex;
}

.commerce-add input {
  width: 6rem !important;
}

.commerce-reviews {
  border-top: 1px solid var(--line);
  gap: 1rem;
  padding-top: 2rem;
  display: grid;
}

.commerce-reviews h2 {
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
}

.commerce-reviews article {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  padding: 1rem 1.2rem;
}

.commerce-reviews article p {
  color: var(--muted);
  margin-top: 0.4rem;
}

[data-favorites-list] {
  gap: 0.6rem;
  display: grid;
}

/* ==========================================================================
   26. KULLANICI HESABI VE PROFİL (ACCOUNT & AUTH)
   Oturum açma, hesap navigasyonu, ayarlar ve kullanıcı kartları
   ========================================================================== */

[data-favorites-list] a {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  padding: 1rem 1.2rem;
  font-weight: 600;
  text-decoration: none;
  display: block;
}

.commerce-payment iframe {
  border-radius: var(--r-xl);
  background: var(--surface);
}

@media (width<=760px) {
  .commerce-fields {
    grid-template-columns: 1fr;
  }

  .commerce-line {
    grid-template-columns: 1fr auto;
  }

  .commerce-line form {
    grid-area: 2/1 / auto/-1;
  }

  .commerce-line strong {
    grid-area: 1/2;
  }
}

.account-auth {
  gap: 1.25rem;
  max-width: 640px;
  margin-inline: auto;
  display: grid;
}

.account-layout {
  gap: 1.5rem;
  display: grid;
}

.account-main {
  gap: 1.25rem;
  min-width: 0;
  display: grid;
}

.account-nav {
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--surface);
  align-content: start;
  gap: 1rem;
  padding: 1.25rem;
  display: grid;
}

.account-nav ul {
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.account-nav a {
  border-radius: var(--r-pill);
  padding: 0.55rem 0.95rem;
  font-size: 0.92rem;
  font-weight: 600;
  display: block;
}

.account-nav a[aria-current="page"] {
  background: var(--brand);
  color: var(--brand-contrast);
}

.account-nav a:not([aria-current]):hover {
  background: var(--brand-soft);
  text-decoration: none;
}

.account-actions {
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  display: flex;
}

.account-cards {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 1rem;
  display: grid;
}

.account-card {
  color: inherit;
  transition:
    border-color 0.2s,
    transform 0.2s;
}

.account-card:hover {
  border-color: var(--brand);
  text-decoration: none;
  transform: translateY(-2px);
}

.account-card h3 {
  font-size: 1.05rem;
}

.account-card p {
  color: var(--muted);
  overflow-wrap: anywhere;
}

.account-choice {
  border: 0;
  flex-wrap: wrap;
  gap: 0.6rem 1.5rem;
  margin: 0;
  padding: 0;
  display: flex;
}

.account-choice legend {
  width: 100%;
  margin-bottom: 0.4rem;
  font-size: 0.9rem;
  font-weight: 600;
}

.account-switch-line {
  text-align: center;
  color: var(--muted);
}

.menu-account {
  gap: 0.6rem;
}

@media (width>=900px) {
  .account-layout {
    grid-template-columns: 260px minmax(0, 1fr);
    align-items: start;
  }

  .account-nav {
    top: calc(var(--header-space) + 1.5rem);
    position: sticky;
  }

  .account-nav ul {
    flex-direction: column;
  }
}

@media (width<=1100px) {
  .header-account {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .account-card,
  .account-card:hover {
    transition: none;
    transform: none;
  }
}

.media-dialog {
  border-radius: var(--r-xl);
  color: #fff;
  background: #05070f;
  border: 0;
  width: min(100vw - 2rem, 1100px);
  max-width: none;
  max-height: calc(100svh - 2rem);
  padding: 0;
  overflow: hidden;
}

/* ==========================================================================
   27. MEDYA MODALLARI VE LIGHTBOX (MEDIA DIALOG & LIGHTBOX)
   Büyütülebilir video penceresi, görsel lightbox ve slayt kontrolleri
   ========================================================================== */

.media-dialog[open] {
  animation: ag-sheet 0.4s var(--ease-out);
}

.media-dialog::backdrop {
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  background: #030510d1;
}

.dialog-close {
  z-index: 2;
  color: #fff;
  background: #ffffff1f;
  border-color: #fff3;
  position: absolute;
  top: 0.8rem;
  right: 0.8rem;
}

.video-frame {
  aspect-ratio: 16/9;
}

.video-frame iframe {
  border: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.lightbox {
  background: 0 0;
  width: min(100vw - 2rem, 1400px);
  overflow: visible;
}

.lightbox-figure {
  justify-items: center;
  gap: 0.8rem;
  margin: 0;
  display: grid;
}

.lightbox-figure img {
  border-radius: var(--r-lg);
  object-fit: contain;
  background: #0b0f1d;
  width: auto;
  max-width: 100%;
  max-height: calc(100svh - 8rem);
}

.lightbox-figure figcaption {
  color: #fffc;
  font-size: 0.92rem;
}

.lightbox-prev,
.lightbox-next {
  color: #fff;
  background: #ffffff1f;
  border-color: #fff3;
  position: absolute;
  top: 50%;
  translate: 0 -50%;
}

.lightbox-prev {
  left: -0.5rem;
}

.lightbox-next {
  right: -0.5rem;
}

.lightbox-prev svg {
  transform: scaleX(-1);
}

.lightbox-count {
  color: #ffffffb3;
  font-size: 0.85rem;
  position: absolute;
  bottom: -2rem;
  left: 50%;
  translate: -50%;
}

@media (width<=760px) {
  .lightbox-prev {
    left: 0.3rem;
  }

  .lightbox-next {
    right: 0.3rem;
  }
}

/* Süreç Adım Rozeti */
.point-step-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--brand);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  border-radius: 999px;
  padding: 2px 6px;
  line-height: 1;
  border: 2px solid var(--surface);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Önerilen Paket Kartı Buton Kontrastı */
.price-card.is-recommended .button-light {
  color: #0b1020 !important;
  background: #ffffff !important;
}
.price-card.is-recommended .button-light:hover {
  color: #0b1020 !important;
}