/* ==========================================================================
   RoomFollow - tanitim sitesi stil katmani
   Tasarim dili: sicak kirik-beyaz zemin, neredeyse siyah koyu bolumler,
   yuzen hap (pill) menu, hafif agirlikli buyuk basliklar, tek vurgu rengi.
   Vurgu rengi urunun kendi tasarim jetonlarindan alinmistir (nane yesili).
   Harici font/CDN yoktur; site kendi kendine yeterlidir (CSP dostu).
   ========================================================================== */

/* ---------- 0. Yazi tipi ----------
   Google Sans, kendi sunucumuzdan servis edilir (assets/fonts). Boylece
   Google'a istek gitmez (KVKK acisindan temiz), CSP siki kalir ve sayfa
   internet olmadan da dogru gorunur. Degisken font: 400-700 tek dosyada.
   Latin ve Latin-Ext ayri dosyalarda; Turkce karakterler (ş, ğ, ı, İ)
   latin-ext icindedir.                                                     */
/* Geist - kendi sunucumuzdan servis edilir; disariya hicbir istek gitmez.
   Turkce karakterler (ı, ğ, ş, İ) latin-ext dilimindedir, ikisi de yuklenir. */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/geist-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, 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: 'Geist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/geist-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Google Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/google-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, 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: 'Google Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/google-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- 1. Jetonlar ---------- */
:root {
  /* Sicak notr zemin */
  --bg:            #f6f4f1;
  --bg-2:          #fbfbf8;
  --card:          #ffffff;
  --border:        #e7e3dd;
  --border-soft:   #eeebe5;

  /* Metin */
  --fg:            #161614;
  --fg-muted:      #5f5b55;
  --fg-faint:      #8a857e;

  /* Koyu bolumler */
  --dk:            #0b0b09;
  --dk-2:          #131311;
  --dk-3:          #1c1c19;
  --dk-fg:         #f7f6f3;
  --dk-muted:      #a3a09a;
  --dk-border:     rgba(255, 255, 255, 0.10);
  --dk-border-2:   rgba(255, 255, 255, 0.06);

  /* Marka vurgusu.
     --accent-deep LOGODAN alinmistir (#033B38); yazi ve isaret renklerinde
     kullanilir, boylece site logoyla ayni yesili konusur. */
  --accent:        oklch(0.72 0.145 168);
  --accent-2:      oklch(0.80 0.135 166);
  --accent-deep:   #033B38;
  --accent-ink:    #022A28;
  --accent-soft:   oklch(0.72 0.145 168 / 0.13);
  --accent-line:   oklch(0.72 0.145 168 / 0.28);

  /* Durum */
  --success:       oklch(0.62 0.16 150);
  --warning:       oklch(0.72 0.15 70);
  --danger:        oklch(0.58 0.20 25);
  --info:          oklch(0.58 0.13 250);

  /* Olcu */
  --r-sm:          8px;
  --r:             12px;
  --r-lg:          18px;
  --r-xl:          26px;
  --shadow-sm:     0 1px 2px rgba(22, 22, 20, 0.05);
  --shadow:        0 6px 20px -6px rgba(22, 22, 20, 0.10), 0 2px 6px rgba(22, 22, 20, 0.04);
  --shadow-lg:     0 30px 70px -24px rgba(22, 22, 20, 0.30), 0 10px 26px -14px rgba(22, 22, 20, 0.16);
  --maxw:          1200px;
  /* Sayfadaki her bolumun ayni sol/sag kenardan baslamasi icin tek kaynak.
     Tam genislikteki bir bloga da ayni ic bosluk `--gutter-inset` ile verilir:
     blok kenardan kenara uzanir, icerigi izgaraya oturur. */
  --gutter:        24px;
  --gutter-inset:  max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter)));
  --nav-h:         62px;
  --ease:          cubic-bezier(0.22, 1, 0.36, 1);

  /* Modul vurgusu - sayfa bazinda degisir */
  --mod:           var(--accent);
  --mod-soft:      var(--accent-soft);

  /* Sahnelerin bekledigi eski adlar */
  --bg-soft:       var(--bg);
  --primary:       var(--accent-deep);
  --primary-fg:    #ffffff;
  --accent-strong: var(--accent);
}

/* ---------- 2. Sifirlama ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 110px;
}
body {
  font-family: 'Geist', 'Google Sans', ui-sans-serif, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: -0.008em;
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, h5 { font-weight: 500; line-height: 1.18; letter-spacing: -0.025em; text-wrap: balance; }
p { text-wrap: pretty; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
::selection { background: oklch(0.72 0.145 168 / 0.28); }

/* ---------- 3. Yardimcilar ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.wrap-tight { max-width: 840px; }
.section { padding-block: clamp(60px, 7.5vw, 110px); }
.section-sm { padding-block: clamp(40px, 5vw, 68px); }
.center { text-align: center; }
.hr { height: 1px; background: var(--border); border: 0; }

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 300;
  background: var(--dk); color: var(--dk-fg);
  padding: 10px 16px; border-radius: var(--r); transition: top 0.2s;
}
.skip-link:focus { top: 12px; }

/* Rozet / eyebrow - kucuk, buyuk harf, harf araligi genis */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.094em; text-transform: uppercase;
  color: var(--fg-muted);
  background: var(--card);
  border: 1px solid var(--border);
  padding: 7px 15px; border-radius: 999px;
}
.eyebrow .spark { color: var(--accent-deep); }
.eyebrow.on-dark {
  color: var(--dk-muted);
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--dk-border);
}
.eyebrow.on-dark .spark { color: var(--accent); }

.h-display { font-size: clamp(2.15rem, 5.2vw, 3.6rem); font-weight: 500; letter-spacing: -0.039em; line-height: 1.14; }
.h-section { font-size: clamp(1.75rem, 3.6vw, 2.75rem); font-weight: 500; letter-spacing: -0.034em; }
.h-card    { font-size: 1.14rem; font-weight: 560; letter-spacing: -0.022em; }
.lead { font-size: clamp(1rem, 1.25vw, 1.09rem); color: var(--fg-muted); max-width: 60ch; line-height: 1.68; }
.lead.on-dark { color: var(--dk-muted); }
.section-head { display: grid; gap: 18px; margin-bottom: clamp(34px, 4vw, 56px); }
.section-head.center { justify-items: center; text-align: center; }
.section-head.center .lead { margin-inline: auto; }

.accent-text { color: var(--accent-deep); }
.on-dark .accent-text, .accent-text.on-dark { color: var(--accent); }

/* ---------- 4. Butonlar ---------- */
.btn {
  --btn-bg: var(--dk);
  --btn-fg: var(--dk-fg);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 20px; border-radius: 10px;
  background: var(--btn-bg); color: var(--btn-fg);
  border: 1px solid transparent;
  font-size: 14.5px; font-weight: 550; letter-spacing: -0.007em;
  cursor: pointer; white-space: nowrap;
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease), background 0.18s, border-color 0.18s, opacity 0.18s, color 0.18s;
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.btn:active { transform: translateY(0); }
.btn[disabled], .btn[aria-busy="true"] { opacity: 0.55; pointer-events: none; }
.btn-accent { --btn-bg: var(--accent); --btn-fg: var(--accent-ink); font-weight: 600; }
.btn-accent:hover { --btn-bg: var(--accent-2); }
.btn-light { --btn-bg: #fff; --btn-fg: var(--fg); }
.btn-ghost { --btn-bg: transparent; --btn-fg: var(--fg); border-color: var(--border); }
.btn-ghost:hover { --btn-bg: var(--card); border-color: #d8d3cb; }
.btn-ghost.on-dark { --btn-fg: var(--dk-fg); border-color: var(--dk-border); }
.btn-ghost.on-dark:hover { --btn-bg: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.2); }
.btn-lg { padding: 14px 26px; font-size: 15.5px; border-radius: 11px; }
.btn-sm { padding: 8px 14px; font-size: 13px; border-radius: 9px; }
.btn-block { width: 100%; }
.btn .arw { transition: transform 0.22s var(--ease); }
.btn:hover .arw { transform: translateX(3px); }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.btn-row.center { justify-content: center; }

/* ---------- 5. Ust menu ---------- */
/* Her sayfada ayni: kenardan kenara uzanan koyu yesil cubuk. Ic bosluklari
   sayfa izgarasiyla ayni dikeyden baslar, hap/siyah kutu yok. */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 200;
  padding: 0;
  pointer-events: none;
}
.nav-pill {
  pointer-events: auto;
  max-width: none; margin: 0;
  height: 88px;
  display: flex; align-items: center; gap: 16px;
  padding-inline: var(--gutter-inset);
  background: var(--hero-green);
  border: 0; border-radius: 0; box-shadow: none;
  transition: background 0.3s var(--ease), height 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
/* Ana sayfada hero fotografinin uzerinde seffaf durur */
.nav.over-hero .nav-pill { background: transparent; }

.nav.is-stuck .nav-pill {
  height: 68px;
  background: rgba(16, 35, 31, 0.92);
  backdrop-filter: blur(14px) saturate(1.5);
  -webkit-backdrop-filter: blur(14px) saturate(1.5);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.07);
}

/* Logo: SVG icinde fill/stroke "currentColor" oldugu icin rengi buradan gelir */
.brand { display: inline-flex; align-items: center; color: var(--dk-fg); flex: none; }
.brand .logo { height: 30px; width: auto; display: block; transition: height 0.3s var(--ease); }
.nav.is-stuck .brand .logo { height: 26px; }
.footer .brand { color: var(--accent-deep); }
.footer .brand .logo { height: 32px; }
@media (max-width: 720px) { .brand .logo { height: 25px; } }
@media (max-width: 420px) { .brand .logo { height: 22px; } }

.nav-links { display: flex; align-items: center; gap: 6px; margin-inline: 0 auto; padding-left: clamp(20px, 4vw, 56px); list-style: none; padding-block: 0; }
.nav-links > li { position: relative; }
.nav-link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 13px; border-radius: 9px;
  font-size: 14px; font-weight: 480; color: var(--dk-muted);
  background: none; border: 0; cursor: pointer;
  transition: color 0.16s, background 0.16s;
}
.nav-link:hover, .nav-link[aria-expanded="true"] { color: var(--dk-fg); background: rgba(255, 255, 255, 0.07); }
.nav-link[aria-current="page"] { color: var(--dk-fg); }
.nav-link .chev { transition: transform 0.2s var(--ease); opacity: 0.75; }
.nav-link[aria-expanded="true"] .chev { transform: rotate(180deg); }
.nav-actions { display: flex; align-items: center; gap: 8px; }
.nav-actions .btn-ghost { --btn-fg: var(--dk-muted); border-color: transparent; }
.nav-actions .btn-ghost:hover { --btn-fg: var(--dk-fg); --btn-bg: rgba(255,255,255,0.07); }

/* Mega menu */
.nav-toggle { display: none; width: 40px; height: 40px; border: 0; background: rgba(255,255,255,0.07); border-radius: 10px; cursor: pointer; place-items: center; }
.nav-toggle span { display: block; width: 16px; height: 1.6px; background: var(--dk-fg); border-radius: 2px; transition: transform 0.25s var(--ease), opacity 0.2s; }
.nav-toggle span + span { margin-top: 4px; }
.nav.menu-open .nav-toggle span:nth-child(1) { transform: translateY(5.6px) rotate(45deg); }
.nav.menu-open .nav-toggle span:nth-child(2) { opacity: 0; }
.nav.menu-open .nav-toggle span:nth-child(3) { transform: translateY(-5.6px) rotate(-45deg); }

@media (max-width: 1000px) {
  .nav-toggle { display: grid; margin-left: auto; }
  .nav-pill { flex-wrap: wrap; height: auto; min-height: var(--nav-h); padding: 10px 10px 10px 16px; }
  .nav-links {
    order: 5; width: 100%; flex-direction: column; align-items: stretch; gap: 2px;
    margin: 0; padding: 10px 0 4px;
    border-top: 1px solid var(--dk-border-2);
    max-height: min(66vh, 520px); overflow-y: auto;
    display: none;
  }
  .nav.menu-open .nav-links { display: flex; }
  .nav-link { padding: 11px 10px; font-size: 15px; width: 100%; justify-content: space-between; }
  .nav-pill > .nav-actions { display: none; }
  .nav-links .m-actions { display: flex; gap: 8px; margin-top: 10px; }
  .nav-links .m-actions .btn { flex: 1; }
}
@media (min-width: 1001px) { .nav-links .m-actions { display: none; } }

/* ---------- 6. Bolum zeminleri ---------- */
/* Koyu blok yalnizca sayfa basina TEK bir CTA bandinda ve footer'da kullanilir. */
.dark-block { position: relative; overflow: hidden; background: var(--dk); color: var(--dk-fg); }
.dark-block h1, .dark-block h2, .dark-block h3 { color: var(--dk-fg); }

/* Acik blok: hero ve ic sayfa basliklari. Sicak krem zemin + yumusak renk isigi. */
.light-block {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, #fdfcfa 0%, #f8f6f2 58%, var(--bg) 100%);
  color: var(--fg);
  border-bottom: 1px solid var(--border);
}
/* Acik blok icinde "on-dark" varyantlari otomatik olarak acik temaya doner,
   boylece sablonlarda ayrica sinif degistirmek gerekmez. */
.light-block .lead.on-dark { color: var(--fg-muted); }
.light-block .eyebrow.on-dark {
  color: var(--fg-muted);
  background: var(--card);
  border-color: var(--border);
}
.light-block .eyebrow.on-dark .spark { color: var(--accent-deep); }
.light-block .btn-ghost.on-dark { --btn-fg: var(--fg); border-color: var(--border); }
.light-block .btn-ghost.on-dark:hover { --btn-bg: var(--card); border-color: #d8d3cb; }
.light-block .crumb { color: var(--fg-faint); }
.light-block .crumb a:hover { color: var(--fg); }
.light-block .glow {
  background:
    radial-gradient(40% 46% at 16% 4%,  oklch(0.72 0.145 168 / 0.20), transparent 66%),
    radial-gradient(34% 42% at 86% 18%, oklch(0.66 0.10 235 / 0.14), transparent 70%),
    radial-gradient(48% 38% at 52% 100%, oklch(0.80 0.12 150 / 0.12), transparent 74%);
}
.light-block .grid-tex {
  background-image:
    linear-gradient(rgba(22,22,20,0.038) 1px, transparent 1px),
    linear-gradient(90deg, rgba(22,22,20,0.038) 1px, transparent 1px);
}
.light-block .split-list li span[style] { color: var(--fg-muted) !important; }
.glow {
  position: absolute; inset: -35% -12% auto -12%; height: 150%; pointer-events: none;
  background:
    radial-gradient(38% 46% at 20% 8%,  oklch(0.72 0.145 168 / 0.20), transparent 64%),
    radial-gradient(34% 42% at 84% 24%, oklch(0.58 0.11 235 / 0.16), transparent 68%),
    radial-gradient(46% 36% at 52% 98%, oklch(0.72 0.145 168 / 0.10), transparent 72%);
  animation: drift 24s ease-in-out infinite alternate;
}
@keyframes drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(-3%, 2.5%, 0) scale(1.09); }
}
.grid-tex {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.028) 1px, transparent 1px);
  background-size: 58px 58px;
  mask-image: radial-gradient(78% 68% at 50% 36%, #000 22%, transparent 80%);
  -webkit-mask-image: radial-gradient(78% 68% at 50% 36%, #000 22%, transparent 80%);
}
.dark-block > .wrap { position: relative; z-index: 1; }

/* ---------- 7. Hero ---------- */
.hero { padding-block: clamp(128px, 15vw, 178px) clamp(72px, 9vw, 116px); }
.hero-copy { display: grid; gap: 24px; justify-items: center; text-align: center; max-width: 880px; margin-inline: auto; }
.hero-copy .lead { max-width: 58ch; }
.hero-mock { margin-top: clamp(42px, 6vw, 72px); position: relative; max-width: 1080px; margin-inline: auto; }
/* Ozet serit: dort kutu, aralarinda ince ayirici */
.hero-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  margin-top: clamp(44px, 6vw, 70px);
  border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--card); overflow: hidden;
}
.hero-stat {
  padding: 22px 24px;
  border-right: 1px solid var(--border-soft);
  display: grid; gap: 3px; align-content: start;
}
.hero-stat:last-child { border-right: 0; }
@media (max-width: 700px) {
  .hero-stat { border-right: 0; border-bottom: 1px solid var(--border-soft); }
  .hero-stat:last-child { border-bottom: 0; }
}
.hero-stat b {
  display: block; font-size: clamp(1.6rem, 2.6vw, 2.05rem); font-weight: 500;
  letter-spacing: -0.042em; color: var(--accent-deep); font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.hero-stat span { font-size: 13.5px; font-weight: 540; color: var(--fg); }
.hero-stat small { font-size: 12.2px; color: var(--fg-faint); line-height: 1.4; }
.hero-note { font-size: 13px; color: var(--fg-faint); display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; }
.hero-note .sep { opacity: 0.35; }

/* ---------- 8. Kartlar ---------- */
.card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 24px;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s;
}
.card-hover:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: #ddd8d0; }
.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }

/* Ustunde gorsel paneli olan modul karti */
.mod-card {
  position: relative; overflow: hidden; padding: 0;
  display: grid; grid-template-rows: auto 1fr;
  background: var(--card);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.3s var(--ease);
}
.mod-card > a { display: grid; grid-template-rows: auto 1fr; height: 100%; }
.mod-card:hover { transform: translateY(-4px); border-color: var(--accent-line); box-shadow: var(--shadow-lg); }

/* Modul karti gorseli: ikon degil, urunun kendi ekranindan kucuk bir kesit.
   Ekran sol ustten oturur, sag/alta dogru tasarak "devami var" hissi verir. */
.mod-vis {
  position: relative; height: 178px; overflow: hidden;
  background:
    radial-gradient(120% 120% at 12% -10%, oklch(0.96 0.025 172), transparent 58%),
    linear-gradient(150deg, oklch(0.91 0.042 176), oklch(0.855 0.058 194));
  border-bottom: 1px solid var(--border-soft);
  padding: 18px 0 0 18px;
}
/* Izgara dokusu: sol ustte belirgin, sag alta dogru eriyor */
.mod-vis::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.38) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.38) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(158deg, #000 8%, transparent 76%);
          mask-image: linear-gradient(158deg, #000 8%, transparent 76%);
}
/* Ekranin altina yumusak golge: zemine oturmus gorunur */
.mod-vis::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 55%;
  background: linear-gradient(to top, rgba(3, 59, 56, 0.14), transparent);
  pointer-events: none;
}

/* Kucuk ekran penceresi */
.mod-shot {
  position: relative; z-index: 1;
  background: var(--card);
  border: 1px solid rgba(255, 255, 255, 0.92);
  border-radius: 12px 0 0 0;
  box-shadow: 0 18px 34px -18px rgba(3, 59, 56, 0.45);
  overflow: hidden; height: 100%;
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.mod-card:hover .mod-shot {
  transform: translate(-6px, -7px);
  box-shadow: 0 24px 44px -18px rgba(3, 59, 56, 0.5);
}
.mod-shot-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 10px; border-bottom: 1px solid var(--border-soft);
  background: var(--bg); font-size: 10px; font-weight: 620; color: var(--fg-muted);
}
.mod-shot-bar i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--border); flex: none;
}
.mod-shot-bar i:first-child { background: var(--accent); }
.mod-shot-body { padding: 9px 10px; display: grid; gap: 5px; }

/* Satir: sol etiket + sag deger */
.ms-row {
  display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center;
  font-size: 10.5px; color: var(--fg-muted);
  padding-bottom: 4px; border-bottom: 1px solid var(--border-soft);
}
.ms-row:last-child { border-bottom: 0; }
.ms-row b { font-weight: 600; color: var(--fg); }
.ms-row em { font-style: normal; font-variant-numeric: tabular-nums; font-weight: 620; color: var(--fg); }
.ms-row .ok { color: var(--accent-deep); }
.ms-row .warn { color: var(--warning); }
.ms-row .bad { color: var(--danger); }

/* Kucuk rozet */
.ms-pill {
  font-size: 9.5px; font-weight: 640; padding: 2px 7px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent-deep); white-space: nowrap;
}
.ms-pill.blue { background: oklch(0.58 0.13 250 / 0.14); color: oklch(0.42 0.12 250); }
.ms-pill.amber { background: oklch(0.72 0.15 70 / 0.18); color: oklch(0.46 0.12 70); }
.ms-pill.grey { background: var(--bg); color: var(--fg-faint); }

/* Mini takvim/rack seridi */
.ms-strip { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.ms-strip i { height: 14px; border-radius: 3px; background: var(--bg); display: block; border: 1px solid var(--border-soft); }
.ms-strip i.f  { background: var(--accent-deep); border-color: transparent; }
.ms-strip i.h  { background: oklch(0.72 0.145 168); border-color: transparent; }
.ms-strip i.b  { background: oklch(0.58 0.13 250 / 0.75); border-color: transparent; }
.ms-strip i.a  { background: oklch(0.72 0.15 70); border-color: transparent; }

/* Mini cubuk grafik */
.ms-bars { display: grid; grid-template-columns: repeat(9, 1fr); gap: 3px; align-items: end; height: 34px; }
.ms-bars i { display: block; border-radius: 2px 2px 0 0; background: var(--accent-deep); opacity: 0.85; height: var(--h, 40%); }
.ms-bars i:last-child { background: oklch(0.72 0.145 168); opacity: 1; }
.mod-body { padding: 20px 22px 22px; display: grid; gap: 10px; grid-template-rows: auto 1fr auto; }
.mod-head { display: flex; align-items: center; gap: 10px; }
.mod-n {
  flex: none; width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center;
  background: var(--accent); color: var(--accent-ink);
  font-size: 11px; font-weight: 660; font-variant-numeric: tabular-nums;
}
.mod-card p { font-size: 13.8px; color: var(--fg-muted); line-height: 1.62; }
.mod-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag {
  font-size: 11.4px; font-weight: 500; color: var(--fg-muted);
  background: var(--bg); border: 1px solid var(--border-soft);
  padding: 3px 9px; border-radius: 999px;
}
.mod-more {
  font-size: 13.2px; font-weight: 540; color: var(--fg);
  display: inline-flex; align-items: center; gap: 6px;
  align-self: end; margin-top: 6px; padding-top: 12px;
  border-top: 1px solid var(--border-soft); width: 100%;
  transition: color 0.22s var(--ease);
}
.mod-card:hover .mod-more { color: var(--accent-deep); }
.mod-card:hover .mod-more .arw { transform: translateX(3px); }
.mod-more .arw { transition: transform 0.22s var(--ease); }

/* ---------- 9. Egik 3B mockup paneli ---------- */
/* Renkli gradyan panel — koyu degil, marka tonlarinda canli bir zemin.
   Uzerine acik renkli ekran kartlari egik biçimde oturur. */
.tilt-panel {
  position: relative; overflow: hidden;
  border-radius: var(--r-lg);
  background: linear-gradient(148deg, oklch(0.90 0.055 172) 0%, oklch(0.83 0.085 178) 42%, oklch(0.76 0.095 218) 100%);
  min-height: 300px;
  display: grid; place-items: center;
  padding: 34px 26px;
  isolation: isolate;
}
.tilt-panel.warm {
  background: linear-gradient(148deg, oklch(0.93 0.045 120) 0%, oklch(0.86 0.075 155) 45%, oklch(0.79 0.090 182) 100%);
}
.tilt-panel::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(52% 60% at 20% 10%, oklch(0.97 0.03 165 / 0.75), transparent 64%),
    radial-gradient(46% 55% at 84% 86%, oklch(0.62 0.10 235 / 0.28), transparent 68%);
}
.tilt-panel::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.30) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.30) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(80% 80% at 50% 50%, #000, transparent 85%);
  -webkit-mask-image: radial-gradient(80% 80% at 50% 50%, #000, transparent 85%);
}
.tilt-panel > * { position: relative; z-index: 1; width: 100%; }
.tilt {
  transform: perspective(1500px) rotateX(6deg) rotateY(-11deg) rotateZ(2deg) scale(1.02);
  transform-origin: center;
  transition: transform 0.7s var(--ease);
}
.tilt-panel:hover .tilt { transform: perspective(1500px) rotateX(3deg) rotateY(-5deg) rotateZ(1deg) scale(1.04); }
.tilt-r { transform: perspective(1500px) rotateX(6deg) rotateY(11deg) rotateZ(-2deg) scale(1.02); }
.tilt-panel:hover .tilt-r { transform: perspective(1500px) rotateX(3deg) rotateY(5deg) rotateZ(-1deg) scale(1.04); }
@media (max-width: 720px) { .tilt, .tilt-r { transform: none !important; } }

/* Bolunmus satir (metin + gorsel) */
.split { display: grid; gap: clamp(28px, 4vw, 54px); align-items: center; }
@media (min-width: 940px) {
  /* Metin dar, gorsel genis kolonda. .rev'de gorsel HTML'de once gelir;
     order ile sona atilinca kolon genislikleri ayni kalmalidir. */
  .split { grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr); }
  .split.rev > *:first-child { order: 2; }
}
.split-copy { display: grid; gap: 18px; align-content: start; justify-items: start; }
.split-list { display: grid; gap: 12px; list-style: none; padding: 0; margin: 4px 0 0; }
.split-list li { display: grid; grid-template-columns: 20px 1fr; gap: 12px; align-items: start; font-size: 14.6px; color: var(--fg-muted); }
.split-list .tick { color: var(--accent-deep); margin-top: 2px; }

/* ---------- 10. Gorunume girince ---------- */
.reveal { opacity: 0; transform: translateY(20px); }
.reveal.in { opacity: 1; transform: none; transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal-zoom { opacity: 0; transform: scale(0.97); }
.reveal-zoom.in { opacity: 1; transform: none; transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }

/* ---------- 11. Ic sayfa basligi ---------- */
.phead { padding-block: clamp(122px, 13vw, 156px) clamp(48px, 6vw, 76px); }
.phead h1 { font-size: clamp(2rem, 4.4vw, 3.1rem); font-weight: 500; letter-spacing: -0.039em; }
.phead-grid { display: grid; gap: clamp(30px, 4vw, 52px); align-items: center; }
@media (min-width: 980px) { .phead-grid { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); } }
.phead-copy { display: grid; gap: 20px; justify-items: start; }
.crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12.6px; color: var(--dk-muted); }
.crumb a:hover { color: var(--accent); }
.crumb .sep { opacity: 0.4; }

/* ---------- 12. Fiyatlandirma ---------- */
.price-toggle {
  display: inline-flex; align-items: center; gap: 3px; padding: 4px;
  background: var(--card); border: 1px solid var(--border); border-radius: 999px;
}
.price-toggle button {
  border: 0; background: none; cursor: pointer; border-radius: 999px;
  padding: 8px 18px; font-size: 13.6px; font-weight: 520; color: var(--fg-muted);
  transition: background 0.2s, color 0.2s;
  display: inline-flex; align-items: center; gap: 7px;
}
.price-toggle button[aria-pressed="true"] { background: var(--dk); color: var(--dk-fg); }
.price-toggle .save { font-size: 11px; font-weight: 620; color: var(--accent-ink); background: var(--accent); padding: 2px 7px; border-radius: 999px; }

.plans { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(292px, 1fr)); align-items: stretch; }
.plan { display: flex; flex-direction: column; gap: 20px; position: relative; }
.plan > .btn { margin-top: auto; }   /* buton her zaman kartin altina yaslanir */
.plan.featured { background: var(--dk); border-color: var(--dk); color: var(--dk-fg); }
.plan.featured .plan-desc, .plan.featured .price-sub, .plan.featured .feat-list li { color: var(--dk-muted); }
.plan.featured .feat-list b { color: var(--dk-fg); }
.plan.featured .price .cur, .plan.featured .price .per { color: var(--dk-muted); }
.plan.featured .tick { color: var(--accent); }
.plan-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.plan-badge {
  background: var(--accent); color: var(--accent-ink);
  font-size: 10.6px; font-weight: 660; letter-spacing: 0.058em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px; white-space: nowrap;
}
.plan-name { font-size: 1.05rem; font-weight: 560; letter-spacing: -0.025em; }
.plan-desc { font-size: 13.4px; color: var(--fg-muted); min-height: 40px; line-height: 1.55; }
.price { display: flex; align-items: baseline; gap: 3px; }
.price .cur { font-size: 1.3rem; font-weight: 480; color: var(--fg-muted); }
.price .amt { font-size: 3rem; font-weight: 500; letter-spacing: -0.05em; line-height: 1; font-variant-numeric: tabular-nums; }
.price .per { font-size: 13.5px; color: var(--fg-muted); font-weight: 460; }
.price-sub { font-size: 12.6px; color: var(--fg-faint); margin-top: -10px; }
.feat-list { display: grid; gap: 11px; list-style: none; padding: 0; margin: 0; font-size: 13.8px; }
.feat-list li { display: grid; grid-template-columns: 17px 1fr; gap: 10px; align-items: start; color: var(--fg-muted); line-height: 1.5; }
.feat-list .tick { color: var(--accent-deep); margin-top: 2px; }
.feat-list b { color: var(--fg); font-weight: 560; }

/* Gorsel olarak gizli (ekran okuyucular icin kalir) */
.hp {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* --- Plan karsilastirma tablosu ------------------------------------------- */
.table-scroll {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--card);
  box-shadow: var(--shadow-sm);
}
.table-scroll table { min-width: 700px; }

.cmp-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; }
.cmp-table th, .cmp-table td { position: relative; }

/* Ust satir: plan adi ve fiyati birlikte */
.cmp-table thead th {
  padding: 22px 18px 16px;
  text-align: center; vertical-align: bottom;
  background: linear-gradient(180deg, var(--bg), var(--card));
  border-bottom: 1px solid var(--border);
}
.cmp-table thead th.cmp-corner {
  text-align: left; vertical-align: bottom;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.079em;
  color: var(--fg-faint); font-weight: 620;
}
.cmp-plan  { display: block; font-size: 15.5px; font-weight: 640; color: var(--fg); letter-spacing: -0.014em; }
.cmp-price { display: block; margin-top: 2px; font-size: 12.5px; color: var(--fg-faint); font-variant-numeric: tabular-nums; }
.cmp-price i { font-style: normal; opacity: 0.7; }
.cmp-tag {
  display: inline-block; margin-bottom: 8px;
  padding: 3px 9px; border-radius: 999px; white-space: nowrap;
  font-size: 10px; font-weight: 640; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--accent-deep); background: var(--accent-soft);
}

/* Onerilen sutun bastan sona akan yumusak serit olur */
.cmp-table .hi { background: color-mix(in srgb, var(--accent) 6%, var(--card)); }
.cmp-table thead th.hi {
  background: color-mix(in srgb, var(--accent) 11%, var(--card));
  border-bottom-color: var(--accent-line);
}
.cmp-table .hi::before, .cmp-table .hi::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 1px; background: var(--accent-line);
}
.cmp-table .hi::before { left: 0; }
.cmp-table .hi::after  { right: 0; }

/* Grup basliklari tabloyu iki okunur bloga ayirir */
.cmp-group > * { border-top: 0 !important; padding: 16px 18px 7px; background: var(--card); }
.cmp-group > .hi { background: color-mix(in srgb, var(--accent) 6%, var(--card)); }
.cmp-group th {
  text-align: left; font-weight: 640; font-size: 10.5px;
  text-transform: uppercase; letter-spacing: 0.079em; color: var(--fg-faint);
}
.cmp-table tbody tr:first-child > * { padding-top: 14px; }

/* Satirlar */
.cmp-table tbody th[scope="row"] {
  padding: 12px 18px; text-align: left;
  font-size: 14px; font-weight: 520; color: var(--fg);
  border-top: 1px solid var(--border-soft);
}
.cmp-table tbody td { padding: 12px 18px; text-align: center; border-top: 1px solid var(--border-soft); }
.cmp-group + tr > * { border-top: 0; }
.cmp-table tbody tr:not(.cmp-group):hover > *:not(.hi) { background: var(--bg); }
.cmp-table tbody tr:not(.cmp-group):hover th[scope="row"] { color: var(--accent-deep); }

/* Isaretler */
/* svg sifirlamada display:block oldugu icin hucre icinde ortalanmaz;
   inline-block + otomatik kenar bosluguyla sutun ortasina oturur. */
.cmp-table .yes .tick {
  box-sizing: content-box; width: 13px; height: 13px; padding: 5px;
  display: inline-block; margin-inline: auto; vertical-align: middle;
  border-radius: 999px;
  color: var(--accent-deep); background: var(--accent-soft); stroke-width: 2.6;
}
.cmp-table .yes.hi .tick { background: color-mix(in srgb, var(--accent) 20%, transparent); }
.cmp-dash { display: inline-block; width: 12px; height: 1.5px; border-radius: 2px; background: #d8d3ca; vertical-align: middle; }
.cmp-opt {
  display: inline-block; padding: 3px 10px; border-radius: 999px; white-space: nowrap;
  font-size: 11.5px; color: var(--fg-muted);
  background: var(--bg); border: 1px solid var(--border-soft);
}

/* Dar ekranda ilk sutun kaydirirken sabit kalir */
@media (max-width: 720px) {
  .cmp-table th[scope="row"], .cmp-table thead th.cmp-corner, .cmp-group th {
    position: sticky; left: 0; z-index: 1; background: var(--card);
    box-shadow: 1px 0 0 var(--border-soft);
  }
  .cmp-table thead th.cmp-corner { background: var(--bg); }
}

/* ---------- 13. Formlar ---------- */
.form { display: grid; gap: 16px; }
.field { display: grid; gap: 6px; }
.field > label { font-size: 13px; font-weight: 540; letter-spacing: -0.006em; }
.field .hint { font-size: 12px; color: var(--fg-faint); }
.input, .select, .textarea {
  width: 100%; padding: 11px 13px;
  background: var(--card); border: 1px solid var(--border); border-radius: 10px;
  font-size: 15px; transition: border-color 0.16s, box-shadow 0.16s;
}
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px oklch(0.72 0.145 168 / 0.16);
}
.input[aria-invalid="true"], .textarea[aria-invalid="true"], .select[aria-invalid="true"] { border-color: var(--danger); }
.input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px oklch(0.58 0.20 25 / 0.14); }
.textarea { min-height: 116px; resize: vertical; }
.field-err { font-size: 12.2px; color: var(--danger); }
.field-err:empty { display: none; }
.field-row { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.check { display: grid; grid-template-columns: 18px 1fr; gap: 11px; align-items: start; font-size: 13.2px; color: var(--fg-muted); line-height: 1.5; }
.check input { width: 17px; height: 17px; margin-top: 2px; accent-color: var(--accent-deep); }
.check a { color: var(--fg); font-weight: 540; text-decoration: underline; text-underline-offset: 2px; }
.hp-input { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-note {
  display: grid; grid-template-columns: 17px 1fr; gap: 11px; align-items: start;
  font-size: 12.4px; color: var(--fg-muted); line-height: 1.55;
  background: var(--bg); border: 1px solid var(--border-soft);
  padding: 12px 14px; border-radius: 10px;
}
.form-note svg { color: var(--accent-deep); margin-top: 2px; }
.alert { padding: 12px 15px; border-radius: 10px; font-size: 13.8px; display: none; line-height: 1.55; }
.alert.show { display: block; }
.alert-ok  { background: oklch(0.62 0.16 150 / 0.10); border: 1px solid oklch(0.62 0.16 150 / 0.28); color: oklch(0.36 0.10 150); }
.alert-err { background: oklch(0.58 0.20 25 / 0.08);  border: 1px solid oklch(0.58 0.20 25 / 0.26);  color: oklch(0.42 0.16 25); }

.auth-shell { display: grid; gap: 34px; align-items: start; }
@media (min-width: 960px) { .auth-shell { grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr); gap: 56px; } }
.auth-card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: clamp(28px, 3.6vw, 44px);
  box-shadow: var(--shadow-sm);
}
.auth-shell aside .card { box-shadow: none; }

/* Icon circle for card headers */
.auth-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent-deep);
  margin-bottom: 12px;
  flex-shrink: 0;
}
.auth-alt { font-size: 13.6px; color: var(--fg-muted); text-align: center; }
.auth-alt a { color: var(--fg); font-weight: 540; text-decoration: underline; text-underline-offset: 2px; }
.pw-meter { display: grid; gap: 6px; }
.pw-bars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.pw-bars i { height: 4px; border-radius: 2px; background: var(--border); transition: background 0.25s; }
.pw-meter[data-score="1"] i:nth-child(-n+1) { background: var(--danger); }
.pw-meter[data-score="2"] i:nth-child(-n+2) { background: var(--warning); }
.pw-meter[data-score="3"] i:nth-child(-n+3) { background: oklch(0.72 0.14 120); }
.pw-meter[data-score="4"] i { background: var(--success); }
.pw-text { font-size: 12px; color: var(--fg-faint); }
.pw-wrap { position: relative; }
.pw-wrap .input { padding-right: 46px; }
.pw-toggle {
  position: absolute; right: 6px; top: 50%; translate: 0 -50%;
  width: 34px; height: 34px; display: grid; place-items: center;
  border: 0; background: none; cursor: pointer; color: var(--fg-faint); border-radius: 8px;
}
.pw-toggle:hover { color: var(--fg); background: var(--bg); }

/* ---------- 14. Lisans ---------- */
.lic-input {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 17px; letter-spacing: 0.115em; text-align: center; text-transform: uppercase;
}
.lic-key {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 14.5px; letter-spacing: 0.058em;
  background: var(--dk); color: var(--accent);
  padding: 14px 16px; border-radius: 10px; overflow-x: auto;
}
.lic-key button { border: 1px solid var(--dk-border); background: transparent; color: var(--dk-fg); border-radius: 7px; padding: 5px 11px; font-size: 12px; cursor: pointer; white-space: nowrap; }
.lic-key button:hover { background: rgba(255, 255, 255, 0.08); }

/* ---------- 15. SSS ---------- */
.faq { display: grid; gap: 8px; }
.faq-item { border: 1px solid var(--border); border-radius: var(--r); background: var(--card); overflow: hidden; transition: border-color 0.2s; }
.faq-item:has(.faq-q[aria-expanded="true"]) { border-color: #d9d4cc; }
.faq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 17px 20px; background: none; border: 0; cursor: pointer;
  font-size: 15.2px; font-weight: 520; text-align: left; letter-spacing: -0.017em;
}
.faq-q .pm { flex: none; width: 22px; height: 22px; display: grid; place-items: center; color: var(--fg-faint); transition: transform 0.28s var(--ease), color 0.2s; }
.faq-q[aria-expanded="true"] .pm { transform: rotate(45deg); color: var(--accent-deep); }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.32s var(--ease); }
.faq-a > div { overflow: hidden; }
.faq-a.open { grid-template-rows: 1fr; }
.faq-a p { padding: 0 20px 18px; font-size: 14.2px; color: var(--fg-muted); line-height: 1.65; }

/* ---------- 16. CTA bandi + footer ---------- */
.cta-band { padding-block: clamp(48px, 6vw, 84px); }

/* Footer acik zeminde kalir — sayfadaki tek koyu bolum CTA bandidir. */
.footer {
  background: #efece7; color: var(--fg-muted);
  padding-block: clamp(48px, 6vw, 72px) 26px; font-size: 13.8px;
  border-top: 1px solid var(--border);
}
.footer-grid { display: grid; gap: 34px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.footer-brand { display: grid; gap: 14px; align-content: start; max-width: 300px; }
.footer h4 { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.079em; color: var(--fg); margin-bottom: 15px; font-weight: 560; }
.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.footer a { transition: color 0.16s; }
.footer a:hover { color: var(--accent-deep); }
.footer .brand { color: var(--fg); }
.footer-bottom {
  margin-top: 42px; padding-top: 22px; border-top: 1px solid #e0dbd3;
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; align-items: center; font-size: 12.8px;
}
.footer-legal { display: flex; flex-wrap: wrap; gap: 18px; }

/* ---------- 17. Cesitli ---------- */
.marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.marquee-track { display: flex; gap: 12px; width: max-content; animation: slide-left 46s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes slide-left { to { transform: translateX(-50%); } }
.chip {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  background: var(--card); border: 1px solid var(--border); border-radius: 999px;
  padding: 9px 17px; font-size: 13.4px; font-weight: 500; color: var(--fg-muted);
}
.chip .bul { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; }

.steps { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); }
.step { position: relative; overflow: hidden; padding: 0; background: var(--bg-2); }
.step-vis { position: relative; height: 172px; background: var(--bg); border-bottom: 1px solid var(--border-soft); overflow: hidden; display: grid; place-items: center; padding: 18px; }
.step-vis::before {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(22,22,20,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(22,22,20,0.05) 1px, transparent 1px);
  background-size: 30px 30px;
  mask-image: radial-gradient(72% 72% at 50% 50%, #000, transparent 84%);
  -webkit-mask-image: radial-gradient(72% 72% at 50% 50%, #000, transparent 84%);
}
.step-vis > * { position: relative; z-index: 1; width: 100%; }
.step-body { padding: 18px 22px 22px; display: grid; gap: 8px; }
.step-head { display: flex; align-items: center; gap: 10px; }
.step-n {
  flex: none; width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center;
  background: var(--accent); color: var(--accent-ink); font-size: 11px; font-weight: 660;
}
.step h3 { font-size: 1.04rem; font-weight: 550; }
.step p { font-size: 13.6px; color: var(--fg-muted); line-height: 1.6; }

.kpi { display: grid; gap: 5px; }
.kpi b { font-size: clamp(1.9rem, 3.4vw, 2.6rem); font-weight: 500; letter-spacing: -0.049em; color: var(--fg); font-variant-numeric: tabular-nums; line-height: 1; }
.kpi span { font-size: 13.2px; color: var(--fg-muted); }

.prose { max-width: 74ch; display: grid; gap: 18px; }
.prose h2 { font-size: 1.42rem; margin-top: 18px; font-weight: 540; }
.prose h3 { font-size: 1.1rem; margin-top: 10px; font-weight: 540; }
.prose p, .prose li { color: var(--fg-muted); font-size: 15px; line-height: 1.7; }
.prose ul, .prose ol { display: grid; gap: 8px; padding-left: 22px; }
.prose strong { color: var(--fg); font-weight: 560; }
.prose a { color: var(--fg); text-decoration: underline; text-underline-offset: 2px; }

/* Modul listesi sayfasi filtre cubugu */
.filter-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.filter-btn {
  border: 1px solid var(--border); background: var(--card); color: var(--fg-muted);
  padding: 8px 15px; border-radius: 999px; font-size: 13.2px; font-weight: 500; cursor: pointer;
  transition: background 0.18s, color 0.18s, border-color 0.18s;
}
.filter-btn:hover { border-color: #d8d3cb; }
.filter-btn[aria-pressed="true"] { background: var(--dk); color: var(--dk-fg); border-color: var(--dk); }
.search-box { position: relative; flex: 1; min-width: 220px; }
.search-box .input { padding-left: 38px; border-radius: 999px; }
.search-box svg { position: absolute; left: 13px; top: 50%; translate: 0 -50%; color: var(--fg-faint); pointer-events: none; }
.empty-note { text-align: center; color: var(--fg-faint); font-size: 14px; padding: 40px 0; display: none; }
.empty-note.show { display: block; }

/* Alt/ust modul gezinme */
.mod-nav { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.mod-nav a { display: grid; gap: 4px; padding: 18px 20px; border: 1px solid var(--border); border-radius: var(--r); background: var(--card); transition: border-color 0.2s, transform 0.2s var(--ease); }
.mod-nav a:hover { border-color: #d8d3cb; transform: translateY(-2px); }
.mod-nav span { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.072em; color: var(--fg-faint); font-weight: 560; }
.mod-nav b { font-size: 15px; font-weight: 540; letter-spacing: -0.021em; }
.mod-nav a.next { text-align: right; }

/* Ozellik listesi (modul sayfasi) */
.feat-cols { display: grid; gap: 10px 26px; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); list-style: none; padding: 0; margin: 0; }
.feat-cols li {
  display: grid; grid-template-columns: 18px 1fr; gap: 12px; align-items: start;
  font-size: 14.4px; color: var(--fg-muted); line-height: 1.55;
  padding: 9px 0; border-bottom: 1px solid var(--border-soft);
}
.feat-cols .tick { color: var(--accent-deep); margin-top: 2px; }

/* ---------- 18. Hareketi azalt ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal, .reveal-zoom { opacity: 1 !important; transform: none !important; }
  .tilt, .tilt-r { transform: none !important; }
}

/* ---------- 19. Yazdirma ---------- */
@media print {
  .nav, .footer, .cta-band, .scene, .tilt-panel { display: none !important; }
  body { background: #fff; }
}

/* ---------- 20. Kart numarasi (ikon yerine) ---------- */
/* Modul sayfalarindaki "ne ise yarar" kartlari ikon yerine sirali numara
   kullanir; numara gercek bir siralamayi gosterdigi icin bilgi tasir. */
.card-num {
  display: inline-block;
  font-size: 12px; font-weight: 620; letter-spacing: 0.058em;
  color: var(--accent-deep);
  padding-bottom: 8px;
  border-bottom: 2px solid var(--accent);
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   21. YENI HERO VE HEADER  (referans tasarima gore)
   Koyu yesil tam-genislik hero; menu bunun uzerinde seffaf durur.
   ========================================================================== */
:root {
  --hero-green:      #10231F;   /* hero zemini - koyu yesil */
  --hero-green-deep: #0A1815;   /* alt kenara dogru koyulasan ton */
}

/* --- Hero ----------------------------------------------------------------- */
.hero-v2 {
  position: relative; overflow: hidden;
  background: linear-gradient(165deg, var(--hero-green) 0%, var(--hero-green-deep) 100%);
  color: #fff;
  min-height: min(92vh, 900px);
  display: grid; align-items: center;
  padding-block: clamp(140px, 16vw, 190px) clamp(70px, 9vw, 110px);
}
/* Sag ustten gelen yumusak isik huzmesi (referanstaki gibi) */
.hero-v2::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(58% 62% at 78% 18%, rgba(255,255,255,0.10), transparent 62%),
    radial-gradient(42% 48% at 96% 52%, rgba(95, 214, 168, 0.10), transparent 66%);
}
.hero-v2 > .wrap { position: relative; z-index: 1; }

/* --- Fotograf: hero'nun zemini ------------------------------------------- */
/* Gorselin solu bilerek bos, ozne sagda. Metin sol tarafta, uzerinde durur. */
.hero-bg {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 72% center;
}
/* Soldan saga koyulasan perde: baslik her zaman okunur kalir */
.hero-v2::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg,
      var(--hero-green) 0%,
      rgba(16, 35, 31, 0.94) 30%,
      rgba(16, 35, 31, 0.55) 52%,
      rgba(16, 35, 31, 0.12) 72%,
      transparent 88%);
}
.hero-v2 > .wrap { z-index: 2; }

.hero-v2-copy { display: grid; gap: 26px; justify-items: start; max-width: 560px; }

/* Serif kaldirildi; baslik govde yazi tipiyle, buyuk ve siki */
.hero-v2 h1 {
  font-weight: 500;
  font-size: clamp(2.6rem, 5.6vw, 4.4rem);
  line-height: 1.06;
  letter-spacing: -0.042em;
  color: #fff;
  text-wrap: balance;
}
.hero-v2 .lead {
  color: rgba(255, 255, 255, 0.78);
  font-size: clamp(1rem, 1.2vw, 1.12rem);
  line-height: 1.6; max-width: 46ch;
}
.hero-v2 .hero-note { color: rgba(255, 255, 255, 0.52); justify-content: flex-start; }
.hero-v2 .hero-note .sep { opacity: 0.4; }

/* --- Dar ekran ------------------------------------------------------------ */
@media (max-width: 999px) {
  .hero-v2 {
    min-height: 0;
    padding-block: clamp(130px, 24vw, 170px) clamp(56px, 10vw, 80px);
  }
  .hero-v2-copy { max-width: none; }
  /* Ozne sagda kaldigi icin gorseli biraz saga kaydirip perdeyi
     dikeye ceviriyoruz; metin altta kalan koyu alanda okunur. */
  .hero-bg { object-position: 78% center; }
  .hero-v2::after {
    background: linear-gradient(180deg,
        rgba(16, 35, 31, 0.92) 0%,
        rgba(16, 35, 31, 0.86) 55%,
        rgba(16, 35, 31, 0.72) 100%);
  }
}
/* Mobil menu paneli hero uzerinde de okunakli olsun */
@media (max-width: 1000px) {
  .nav.over-hero .nav-pill { flex-wrap: wrap; height: auto; min-height: 72px; padding-block: 12px; }
  .nav.over-hero.menu-open .nav-pill { background: rgba(16, 35, 31, 0.97); }
  .nav.over-hero .nav-links { padding-left: 0; }
}

/* ==========================================================================
   22. MODUL SERIDI  -  hero'nun hemen altinda, yatay kayan 18 modul
   ========================================================================== */
/* Ust bosluk alttan daha dar: hero'nun 110px alt dolgusu zaten ayirici
   gorevi goruyordu, ustuste binince serit asagi kaciyordu. */
.mrail-sec { padding-block: clamp(28px, 3.4vw, 48px) clamp(56px, 7vw, 96px); overflow: hidden; }
.mrail-head {
  display: grid; gap: 14px;
  max-width: var(--maxw); margin-inline: auto;
  padding-inline: var(--gutter); margin-bottom: clamp(28px, 3.5vw, 42px);
}
.mrail-eyebrow {
  display: inline-flex; align-items: center; gap: 11px;
  font-size: 11.5px; font-weight: 620; letter-spacing: 0.158em; text-transform: uppercase;
  color: var(--fg-muted);
}
.mrail-eyebrow i { width: 10px; height: 10px; border-radius: 3px; background: var(--accent); display: block; flex: none; }
.mrail-head h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); font-weight: 500; letter-spacing: -0.035em; max-width: 20ch; }
.mrail-head p { font-size: clamp(0.98rem, 1.2vw, 1.06rem); color: var(--fg-muted); max-width: 56ch; line-height: 1.6; }

/* --- Kayan serit ---------------------------------------------------------- */
.mrail-wrap { position: relative; }
.mrail {
  display: flex; gap: 18px;
  overflow-x: auto; overflow-y: hidden;
  /* NOT: "mandatory" kullanmayin. Genis ic bosluklu bu seritte mandatory,
     programatik kaydirmayi (ok butonlari, otomatik kayma) kilitliyor;
     tarayici her seferinde 0'a geri sniyor. "proximity" ayni his verir,
     kilitlemez. scroll-padding, kartin ic bosluga yaslanmasini saglar. */
  scroll-snap-type: x proximity;
  scroll-padding-inline: clamp(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter)), 50vw);
  scroll-behavior: smooth;
  padding: 4px clamp(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter)), 50vw) 22px;
  scrollbar-width: none;                 /* Firefox */
  -ms-overflow-style: none;
}
.mrail::-webkit-scrollbar { display: none; }

.mrail-card {
  position: relative; flex: 0 0 auto;
  width: clamp(280px, 30vw, 400px);
  aspect-ratio: 4 / 5;
  border-radius: 22px;
  overflow: hidden;
  scroll-snap-align: start;
  display: grid; grid-template-rows: auto 1fr auto;
  padding: 22px;
  color: #fff;
  text-decoration: none;
  isolation: isolate;
  transition: transform 0.4s var(--ease);
}
.mrail-card:hover { transform: translateY(-4px); }

/* Yumusak renk bulutu zemin - her kart kendi tonunu --h degiskeninden alir */
/* Kart zemini: uc referans gorselin kendisi (assets/img/mrail-a|b|c.jpg).
   Kartlar bu uc gorsel arasinda donusumlu dolasir. Gorseller birebir
   gosterilir - ustlerine ton kaydirma / doygunluk filtresi uygulanmaz. */
.mrail-card::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

/* A - yesil / limon / turkuaz */
.mrail-card:nth-child(3n + 1)::before {
  background-image: url("../img/mrail-a.jpg");
}

/* B - zeytin / altin / sicak kahve */
.mrail-card:nth-child(3n + 2)::before {
  background-image: url("../img/mrail-b.jpg");
}

/* C - turuncu / kirmizi / macenta */
.mrail-card:nth-child(3n + 3)::before {
  background-image: url("../img/mrail-c.jpg");
}

/* Referanslardaki ince kum dokusu. Tek bir SVG gurultusu, dis dosya yok. */
.mrail-card::before,
.glass-stats .glass-aurora,
.news-band .news-aurora {
  background-blend-mode: normal;
}
.mrail-card .mrail-grain {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  opacity: 0.16; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* Alt tarafa dogru koyulasma: yazi her zaman okunur kalir */
.mrail-card::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, transparent 42%, rgba(10, 24, 21, 0.55) 78%, rgba(10, 24, 21, 0.82) 100%);
}

/* Cam rozet */
.mrail-badge {
  width: 62px; height: 62px; border-radius: 18px;
  display: grid; place-items: center;
  /* Koyu cam: kartin ust kosesi acik tonda oldugunda beyaz ikon kayboluyordu. */
  background: rgba(8, 26, 22, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.30);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  color: #fff;
}
/* Ikon, HTML'deki width/height ve stroke-width niteliklerini CSS ile ezer:
   tek yerden buyutup kalinlastirmak icin 18 karti tek tek elleme gerekmiyor. */
.mrail-badge svg {
  width: 30px; height: 30px;
  stroke-width: 2.1;
}

/* Icindeki beyaz urun paneli - sag kenardan tasar (referanstaki gibi) */
/* Panel sola yaslanir ve sag kenardan bir tik tasar. Daha fazla tasirma
   denendi ancak bu satir yapisinda tasan sey satirin degeri oluyor
   ("%84", "Temiz") - okunurlugu bozdugu icin tasma dar tutuldu. */
.mrail-shot {
  align-self: center;
  margin: 16px -10px 16px -4px;
  background: #fff; color: var(--fg);
  border-radius: 16px;
  box-shadow: 0 22px 48px -18px rgba(10, 24, 21, 0.5);
  overflow: hidden;
}
.mrail-shot { background: none; box-shadow: none; border-radius: 0; }

/* Sahneler detay sayfasindaki buyuk panel icin tasarlandi. Kart icinde
   yer kisitli: yuksekligi sinirlayip alt kenari yumusakca soluyoruz.
   Kirpilmis gorunum "gercek ekranin bir parcasi" hissini de veriyor. */
/* .scene kendi metin rengini tanimlamaz, mirasla gelir. Koyu kartin
   icine konuldugunda kartin color:#fff degerini alip beyaz zeminde
   kayboluyordu; bu yuzden sahne sarmalayicisinda rengi geri veriyoruz. */
.mrail-scene,
.setup-card-vis .scene { color: var(--fg); }
.mrail-scene { border-radius: 14px; box-shadow: 0 22px 48px -18px rgba(10, 24, 21, 0.5); }
.mrail-scene .scene-bar { padding: 9px 13px; font-size: 11.5px; }
.mrail-scene .scene-title { font-size: 11.5px; }
.mrail-scene .scene-pill { font-size: 10px; padding: 3px 8px; }
.mrail-scene .scene-body {
  padding: 12px 13px; max-height: 188px; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 78%, transparent 100%);
}
/* Yer kaplayan sahne parcalarini karta gore kucult */
.mrail-scene .sc-bars   { height: 82px; gap: 4px; }
.mrail-scene .sc-sync   { min-height: 132px; }
.mrail-scene .sc-board  { gap: 7px; }
.mrail-scene .sc-cal-grid { gap: 3px; }
.mrail-scene .sc-step   { padding: 7px 9px; gap: 9px; grid-template-columns: 24px 1fr auto; }
.mrail-scene .sc-item   { padding: 6px 0; }
.mrail-scene .sc-kpi    { padding: 7px 9px; }
.mrail-scene .sc-kpi b  { font-size: 15px; }

.mrail-foot { display: grid; gap: 7px; }
.mrail-label {
  font-size: 10.5px; font-weight: 660; letter-spacing: 0.13em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
}
.mrail-card h3 {
  font-size: clamp(1.05rem, 1.5vw, 1.28rem); font-weight: 540;
  line-height: 1.3; letter-spacing: -0.021em; color: #fff;
}

/* --- Ok butonlari --------------------------------------------------------- */
.mrail-nav {
  max-width: var(--maxw); margin: 18px auto 0; padding-inline: 24px;
  display: flex; gap: 10px; align-items: center;
}
.mrail-btn {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--card);
  display: grid; place-items: center; cursor: pointer; color: var(--fg);
  transition: background 0.18s, border-color 0.18s, opacity 0.18s;
}
.mrail-btn:hover { background: var(--bg); border-color: #d8d3cb; }
.mrail-btn[disabled] { opacity: 0.35; cursor: default; }
.mrail-count { margin-left: auto; font-size: 13px; color: var(--fg-faint); font-variant-numeric: tabular-nums; }

@media (max-width: 600px) {
  .mrail-card { width: 78vw; aspect-ratio: 3 / 4; }
  .mrail { padding-inline: 20px; }
  .mrail-shot { margin-right: -30px; }
}

/* ==========================================================================
   23. SSS - iki sutun (solda baslik, sagda sorular)
   ========================================================================== */
.faq-split {
  display: grid; gap: clamp(32px, 5vw, 72px);
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  align-items: start;
}
.faq-aside { position: sticky; top: 110px; display: grid; gap: 16px; justify-items: start; }
.faq-aside .h-section { max-width: 14ch; }
.faq-aside .lead { max-width: 40ch; }
@media (max-width: 900px) {
  .faq-split { grid-template-columns: 1fr; }
  .faq-aside { position: static; }
}

/* ==========================================================================
   24. ILETISIM - solda baslik, sagda beyaz form karti
   ========================================================================== */
.contact-sec { padding-block: clamp(56px, 7vw, 96px); }
.contact-split {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  border: 1px solid var(--border); border-radius: var(--r-xl); overflow: hidden;
  background: var(--bg-2);
}
.contact-aside {
  display: grid; align-content: space-between; gap: 40px;
  padding: clamp(30px, 4vw, 52px);
}
.contact-mark { display: inline-flex; color: var(--accent-deep); opacity: 0.85; }
.contact-mark svg { width: 26px; height: 26px; }
.contact-title {
  font-size: clamp(1.9rem, 3.6vw, 2.9rem); font-weight: 500;
  letter-spacing: -0.042em; line-height: 1.12; color: var(--fg);
}
.contact-note { font-size: 0.94rem; line-height: 1.7; color: var(--fg-muted); max-width: 42ch; }

/* Sag panel: hafifce hareket eden yesil zemin */
.contact-panel {
  position: relative; display: grid; place-items: center;
  padding: clamp(22px, 3vw, 40px);
  /* Referans gorseldeki bronz panel: sol ustte koyu ten, sagda acik karamel,
     ortadan gecen yumusak isik seridi. */
  background:
    radial-gradient(48% 42% at 88% 82%, #d9bd9a 0%, transparent 58%),
    linear-gradient(138deg, #7d6349 0%, #a9885f 44%, #c6a67f 72%, #8e7154 100%);
  background-size: 200% 200%;
  animation: dans 22s var(--ease) infinite;
}
.contact-card {
  width: 100%; max-width: 460px; display: grid; gap: 15px;
  background: #fff; border-radius: 18px; padding: clamp(22px, 3vw, 32px);
  box-shadow: 0 26px 60px -28px rgba(3, 59, 56, 0.55);
}
.fld { display: grid; gap: 7px; min-width: 0; }
.fld-row { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.fld label { font-size: 12.5px; font-weight: 560; color: var(--fg); }
.fld label .opt { font-weight: 420; color: var(--fg-faint); }
.fld input {
  height: 46px; padding: 0 14px; font: inherit; font-size: 14.5px; color: var(--fg);
  background: var(--bg-2); border: 1px solid var(--border); border-radius: 11px;
  transition: border-color 0.16s, box-shadow 0.16s, background 0.16s;
}
.fld input::placeholder { color: var(--fg-faint); }
.fld input:focus-visible {
  outline: none; background: #fff; border-color: var(--accent-deep);
  box-shadow: 0 0 0 4px rgba(3, 59, 56, 0.11);
}
.btn-block { width: 100%; justify-content: center; }
.btn-dark { --btn-bg: var(--dk); --btn-fg: #fff; --btn-bd: var(--dk); }
.btn-dark:hover { --btn-bg: #1d1d19; }
/* Bot tuzagi: gorunmez, insan doldurmaz */
.hp-input { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
@media (max-width: 860px) {
  .contact-split { grid-template-columns: 1fr; }
  .fld-row { grid-template-columns: 1fr; }
}

/* ==========================================================================
   25. BULTEN BANDI - renkleri hafifce dans eden zemin
   ========================================================================== */
.news-band {
  position: relative; overflow: hidden; isolation: isolate;
  padding-block: clamp(64px, 9vw, 120px);
  background: #6d5c3c; color: #fff; text-align: center;
}
/* Iki katmanli yumusak isik: yavas yavas yer degistirir */
.news-aurora {
  position: absolute; inset: -25%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(44% 50% at 20% 30%, rgba(201, 162, 39, 0.42), transparent 62%),
    radial-gradient(40% 46% at 78% 22%, rgba(246, 239, 226, 0.30), transparent 62%),
    radial-gradient(50% 56% at 64% 80%, rgba(125, 132, 66, 0.46), transparent 66%),
    radial-gradient(42% 46% at 8% 84%, rgba(63, 52, 33, 0.55), transparent 64%);
  filter: blur(18px);
  animation: aurora 26s ease-in-out infinite alternate;
}
.news-inner { display: grid; gap: 18px; justify-items: center; }
.news-eyebrow {
  font-size: 11.5px; font-weight: 620; letter-spacing: 0.158em;
  text-transform: uppercase; color: rgba(255, 255, 255, 0.72);
}
.news-title {
  font-size: clamp(1.85rem, 4vw, 3rem); font-weight: 500;
  letter-spacing: -0.042em; line-height: 1.14;
}
.news-form {
  display: flex; align-items: center; gap: 6px;
  width: min(100%, 470px); margin-top: 6px; padding: 6px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.news-form input {
  /* NOT: flex-basis "auto" birakilirsa genel .input kuralindaki width:100%
     temel genislik sayilir; buton yanina sigmayip alt satira duser ve
     999px kose yaricapiyla hap sisip bozuk gorunur. Basis 0 olmali. */
  flex: 1 1 0; width: auto; min-width: 0; height: 44px; padding: 0 18px;
  font: inherit; font-size: 14.5px; color: #fff;
  background: none; border: 0; border-radius: 999px;
}
.news-form input::placeholder { color: rgba(255, 255, 255, 0.62); }
.news-form input:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.45); outline-offset: 1px; }
.news-form .btn { border-radius: 999px; padding: 12px 22px; flex: none; }
.news-fine { font-size: 12.5px; color: rgba(255, 255, 255, 0.62); }
.news-band .form-msg { color: rgba(255, 255, 255, 0.92); }
@media (max-width: 520px) {
  .news-form { flex-direction: column; border-radius: 20px; }
  .news-form input { width: 100%; text-align: center; }
  .news-form .btn { width: 100%; }
}

@keyframes dans {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes aurora {
  0%   { transform: translate3d(-3%, -2%, 0) scale(1); }
  50%  { transform: translate3d(3%, 2%, 0) scale(1.08); }
  100% { transform: translate3d(-2%, 3%, 0) scale(1.03); }
}
/* Hareket azaltma tercihi: renkler sabit kalir */
@media (prefers-reduced-motion: reduce) {
  .contact-panel, .news-aurora { animation: none; }
}

/* ==========================================================================
   26. MODUL SERIDI - sicak zemin ve okunurluk
   ========================================================================== */
/* Zemin, referans gorseldeki sicak bronz gecis: sol altta koyu kahve,
   sag ustte acik karamel ve kuçuk bir isik lekesi. Kartlarin canli renkleri
   duz beyaz uzerinde havada duruyordu; bu zemin onlari bir arada tutuyor. */
.mrail-sec {
  position: relative; isolation: isolate;
  color: #fff;
  background:
    radial-gradient(58% 52% at 97% 2%,  #efd9bb 0%, transparent 46%),
    radial-gradient(76% 66% at 86% 8%,  #d3ab7e 0%, transparent 60%),
    linear-gradient(153deg, #b18a63 0%, #97785a 38%, #7a6249 70%, #63503c 100%);
}
/* Sicak zeminde metin renkleri */
.mrail-head h2 { color: #fff; }
.mrail-head p { color: rgba(255, 255, 255, 0.80); }
.mrail-eyebrow { color: rgba(255, 255, 255, 0.72); }
.mrail-eyebrow i { background: #f0dcc0; }


/* ==========================================================================
   27. AURORA ZEMINLI CAM RAKAMLAR
   ========================================================================== */
.glass-stats {
  position: relative; overflow: hidden; isolation: isolate;
  padding-block: clamp(64px, 9vw, 120px);
  color: #fff;
  background: #5f5636;
}
.glass-aurora {
  position: absolute; inset: -22%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38% 44% at 16% 26%, rgba(212, 176, 58, 0.46), transparent 62%),
    radial-gradient(34% 40% at 76% 14%, rgba(246, 239, 226, 0.34), transparent 60%),
    radial-gradient(44% 50% at 58% 84%, rgba(139, 146, 70, 0.44), transparent 66%),
    radial-gradient(36% 42% at 94% 68%, rgba(58, 47, 30, 0.58), transparent 64%);
  filter: blur(26px) saturate(1.1);
  animation: aurora 28s ease-in-out infinite alternate;
}
.glass-title {
  font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 500;
  letter-spacing: -0.035em; line-height: 1.24;
  max-width: 22ch; margin-bottom: clamp(26px, 3.5vw, 40px);
}
.glass-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.glass-card {
  display: grid; align-content: space-between; gap: 40px;
  min-height: clamp(180px, 20vw, 260px);
  padding: clamp(18px, 2vw, 26px);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.20);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transition: transform 0.35s var(--ease), background 0.35s;
}
.glass-card:hover { transform: translateY(-4px); background: rgba(255, 255, 255, 0.18); }
.glass-card b {
  font-size: clamp(1.9rem, 3.4vw, 2.8rem); font-weight: 500;
  letter-spacing: -0.049em; line-height: 1;
}
.glass-card span {
  font-size: 11.5px; font-weight: 620; letter-spacing: 0.101em;
  text-transform: uppercase; color: rgba(255, 255, 255, 0.78); line-height: 1.5;
}
@media (max-width: 900px) { .glass-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .glass-grid { grid-template-columns: 1fr; } .glass-card { min-height: 0; gap: 20px; } }
@media (prefers-reduced-motion: reduce) { .glass-aurora { animation: none; } }

/* Serit kontrolleri sicak zemine gore: cam dugmeler, acik metin */
.mrail-nav { padding-inline: var(--gutter); }
.mrail-btn {
  border-color: rgba(255, 255, 255, 0.30);
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.mrail-btn:hover { background: rgba(255, 255, 255, 0.24); border-color: rgba(255, 255, 255, 0.45); }
.mrail-count { color: rgba(255, 255, 255, 0.72); }

/* Sicak zeminli bolumlerde vurgu rengi yesil degil, kremdir.
   Referanstaki "Subscribe" dugmesi gibi: acik zemin, koyu yazi. */
.news-band .btn-accent {
  --btn-bg: #f6efe2; --btn-fg: #3f3421; --btn-bd: #f6efe2;
}
.news-band .btn-accent:hover { --btn-bg: #fffaf0; --btn-bd: #fffaf0; }

/* Iletisim panelindeki form alanlari sicak zemine gore */
.contact-card .fld input:focus-visible {
  border-color: #8e7154;
  box-shadow: 0 0 0 4px rgba(142, 113, 84, 0.16);
}
.contact-card { box-shadow: 0 26px 60px -28px rgba(63, 52, 33, 0.55); }
.contact-mark { color: #7d6349; }

/* Modul seridi rozetindeki nokta da sicak tonda */
.mrail-eyebrow i { background: #f0dcc0; }

/* Grid ogeleri varsayilan olarak icerigin altina inemez (min-width:auto).
   Uzun placeholder yuzunden "Göreviniz" alani kartin disina tasiyordu. */
.contact-card > *,
.fld-row > * { min-width: 0; }
.fld-row { min-width: 0; }
.fld input { width: 100%; min-width: 0; }

/* ==========================================================================
   28. FOOTER - bulten ve baglantilar tek sicak blokta
   ========================================================================== */
.footer {
  position: relative; overflow: hidden; isolation: isolate;
  background: #4a4029; color: rgba(255, 255, 255, 0.72);
  border-top: 0;
  padding-block: clamp(72px, 9vw, 120px) 26px;
}
/* Referanstaki yumusak, yavas hareket eden sicak zemin */
.footer-aurora {
  position: absolute; inset: -20%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(40% 46% at 78% 8%,  rgba(214, 186, 122, 0.52), transparent 62%),
    radial-gradient(36% 42% at 96% 2%,  rgba(246, 239, 226, 0.34), transparent 58%),
    radial-gradient(46% 50% at 22% 40%, rgba(58, 47, 30, 0.60), transparent 66%),
    radial-gradient(52% 46% at 58% 96%, rgba(139, 146, 70, 0.44), transparent 68%),
    radial-gradient(40% 44% at 8% 92%,  rgba(120, 104, 52, 0.40), transparent 64%);
  filter: blur(26px) saturate(1.08);
  animation: aurora 30s ease-in-out infinite alternate;
}

/* --- Ust yari: bulten --- */
.footer-news {
  display: grid; gap: 16px; justify-items: center; text-align: center;
  padding-bottom: clamp(56px, 8vw, 104px);
}
.footer-news-eyebrow {
  font-size: 11.5px; font-weight: 620; letter-spacing: 0.158em;
  text-transform: uppercase; color: rgba(255, 255, 255, 0.70);
}
.footer-news-title {
  font-size: clamp(1.7rem, 3.6vw, 2.7rem); font-weight: 500;
  letter-spacing: -0.042em; line-height: 1.14; color: #fff;
}
.footer .news-fine { font-size: 12.5px; color: rgba(255, 255, 255, 0.58); }
.footer .form-msg { color: rgba(255, 255, 255, 0.92); }

/* --- Alt yari: baglantilar. Ince cizgi ikisini ayirir --- */
.footer-grid {
  padding-top: clamp(34px, 4vw, 52px);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 1fr));
  gap: 30px;
}
.footer-slogan {
  font-size: clamp(1.1rem, 1.7vw, 1.45rem); font-weight: 500;
  line-height: 1.28; letter-spacing: -0.028em; color: #fff;
}
.footer .brand { color: #fff; }
.footer h4 { color: rgba(255, 255, 255, 0.62); }
.footer a { color: rgba(255, 255, 255, 0.82); }
.footer a:hover { color: #fff; }
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.56);
}
.footer-bottom a { color: rgba(255, 255, 255, 0.68); }

@media (max-width: 1000px) {
  .footer-grid { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
}
@media (prefers-reduced-motion: reduce) { .footer-aurora { animation: none; } }

/* Form geri bildirimi: .alert kutusu forms.js tarafindan doldurulur.
   Bos oldugu surece hic yer kaplamaz. */
.contact-card .alert:empty,
.footer .alert:empty { display: none; }
.contact-card .alert {
  margin: 0; padding: 11px 14px; border-radius: 10px; font-size: 13.5px;
  background: #f4efe8; border: 1px solid #e2d7c8; color: #4a4029;
}
.contact-card .alert.alert-ok { background: #eaf6ef; border-color: #cfe6d8; color: #235c3c; }
.contact-card .alert.alert-err { background: #fdeeee; border-color: #f3d2d2; color: #8c2b2b; }
.footer .alert {
  margin: 0; padding: 10px 16px; border-radius: 999px; font-size: 13px;
  background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.24); color: #fff;
}
.footer .alert.alert-err { background: rgba(180, 60, 60, 0.30); border-color: rgba(255, 170, 170, 0.40); }

/* Sicak zeminde hatali alan isareti */
.contact-card .input.is-invalid { border-color: #c0605e; box-shadow: 0 0 0 3px rgba(192, 96, 94, 0.14); }

/* Bulten hapinin icinde mesaj: kendi satirina gecer, hapi bozmaz */
.footer .news-form { flex-wrap: wrap; }
.footer .news-form .alert { flex: 1 0 100%; margin-top: 4px; text-align: center; }

/* ==========================================================================
   30. KURULUM ADIMLARI - card stack scroll
   Sol sutun sticky durur, sagdaki kartlar ustuste yigilarak gecer.
   Aktif etiket kaydirmayla belirlenir (site.js, IntersectionObserver);
   etiketin altindaki cizgi o kartin kat edilen yolunu gosterir.
   ========================================================================== */
.setup-sec { padding-block: clamp(56px, 7vw, 96px); }
.setup-grid {
  display: grid; align-items: start;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 76px);
}

/* --- Sol: sabit kalan sutun ------------------------------------------------ */
.setup-copy { position: sticky; top: clamp(88px, 14vh, 132px); align-self: start; }
.setup-copy .lead { max-width: 44ch; }
.setup-copy .btn-row { margin-top: 22px; }

.setup-nav { list-style: none; margin: clamp(30px, 4vw, 48px) 0 0; padding: 0; }
.setup-navi { border-top: 1px solid var(--border); }
.setup-navi:last-child { border-bottom: 1px solid var(--border); }
.setup-navi a {
  display: flex; align-items: center; gap: 13px;
  padding: 17px 0; text-decoration: none; color: inherit;
}
.setup-dot {
  flex: none; width: 9px; height: 9px; border-radius: 3px;
  background: var(--border); transition: background 0.32s var(--ease);
}
.setup-navi .setup-t {
  font-size: 12px; font-weight: 660; letter-spacing: 0.115em; text-transform: uppercase;
  color: var(--fg-faint); transition: color 0.32s var(--ease);
}
.setup-navi.is-active .setup-dot { background: var(--accent); }
.setup-navi.is-active .setup-t { color: var(--fg); }
.setup-navi a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 8px; }

/* Kat edilen yol - JS genisligi kaydirmaya gore gunceller */
.setup-timer { display: block; height: 2px; background: transparent; overflow: hidden; }
.setup-timer i { display: block; height: 100%; width: 0; background: var(--accent); border-radius: 2px; }
.setup-navi.is-active .setup-timer { background: var(--border-soft); }

/* --- Sag: yigilan kartlar -------------------------------------------------- */
.setup-cards { display: grid; gap: clamp(18px, 2.6vw, 30px); }
.setup-card {
  position: sticky;
  /* Her kart bir oncekinden birkac piksel asagida durur; ust ustte
     yigildiklarinda altta kalanlarin kenari gorunur. */
  top: calc(clamp(84px, 13vh, 120px) + var(--i, 0) * 14px);
  isolation: isolate; overflow: hidden;
  border-radius: 24px;
  aspect-ratio: 4 / 5;
  display: grid; grid-template-rows: auto 1fr auto;
  padding: clamp(18px, 2.4vw, 30px);
  color: #fff;
  background-size: cover; background-position: center;
  box-shadow: 0 30px 70px -30px rgba(10, 24, 21, 0.55);
}
.setup-card[data-step="1"] { background-image: url("../img/mrail-a.jpg"); }
.setup-card[data-step="2"] { background-image: url("../img/mrail-b.jpg"); }
.setup-card[data-step="3"] { background-image: url("../img/mrail-c.jpg"); }
.setup-card::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, transparent 38%, rgba(10, 24, 21, 0.58) 74%, rgba(10, 24, 21, 0.86) 100%);
}
.setup-grain {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  opacity: 0.14; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.setup-card-n {
  font-size: 12px; font-weight: 680; letter-spacing: 0.13em;
  color: rgba(255, 255, 255, 0.8); font-variant-numeric: tabular-nums;
}
.setup-card-vis { align-self: center; width: 100%; }
.setup-card-vis .scene { box-shadow: 0 24px 54px -22px rgba(10, 24, 21, 0.5); }
.setup-card-body h3 {
  font-size: clamp(1.24rem, 1.9vw, 1.6rem); font-weight: 540;
  letter-spacing: -0.028em; color: #fff;
}
.setup-card-body p {
  margin-top: 9px; max-width: 44ch;
  font-size: 14.4px; line-height: 1.62; color: rgba(255, 255, 255, 0.82);
}

@media (max-width: 900px) {
  .setup-grid { grid-template-columns: 1fr; gap: 30px; }
  /* Tek sutunda sticky anlamsiz; sol sutun normal akar */
  .setup-copy { position: static; }
  .setup-card { position: static; aspect-ratio: 4 / 4.4; }
}
@media (prefers-reduced-motion: reduce) {
  .setup-dot, .setup-navi .setup-t { transition: none; }
}

/* --- Ana sayfa: CSS cizimli, ust uste yigilan modul kartlari -------------- */
.module-stack-section {
  padding-block: clamp(84px, 11vw, 156px);
  background: var(--bg-2);
  border-block: 1px solid var(--border);
}
.module-stack-wrap { display: grid; gap: 0; }
.module-stack-head {
  display: grid;
  gap: 18px;
  max-width: 820px;
  margin: 0 0 clamp(56px, 8vw, 108px);
}
.module-stack-head .h-section {
  max-width: 11ch;
  font-size: clamp(2.7rem, 6vw, 5.8rem);
  line-height: 0.94;
  letter-spacing: -0.05em;
}
.module-stack-head p {
  max-width: 52ch;
  color: var(--fg-muted);
  font-size: clamp(1rem, 1.55vw, 1.24rem);
  line-height: 1.62;
}
.module-stack-card {
  position: sticky;
  top: calc(clamp(82px, 11vh, 108px) + var(--stack-index, 0) * 14px);
  z-index: calc(20 + var(--stack-index, 0));
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 0.74fr) minmax(0, 1.26fr);
  align-items: center;
  gap: clamp(32px, 5vw, 82px);
  min-height: clamp(540px, 74vh, 720px);
  margin-bottom: clamp(96px, 17vh, 180px);
  padding: clamp(28px, 4.5vw, 68px);
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: clamp(20px, 2.2vw, 30px);
  box-shadow: 0 34px 84px -58px rgba(10, 24, 21, 0.58);
  transition: transform 0.38s var(--ease), box-shadow 0.38s var(--ease);
}
.module-stack-card:last-child { margin-bottom: 0; }
.module-stack-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 40px 92px -54px rgba(10, 24, 21, 0.66);
}
.module-stack-card .split-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.module-stack-kicker {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  margin-bottom: 22px;
  padding: 0 12px;
  color: var(--accent-dark);
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border));
  border-radius: 5px;
  font-size: 11px;
  font-weight: 720;
  letter-spacing: 0.101em;
  text-transform: uppercase;
}
.module-stack-card .h-section {
  max-width: 13ch;
  font-size: clamp(2.15rem, 3.55vw, 3.9rem);
  line-height: 1.02;
  letter-spacing: -0.05em;
}
.module-stack-card .lead {
  max-width: 34ch;
  font-size: clamp(1rem, 1.32vw, 1.18rem);
}
.module-stack-card .split-list { max-width: 38ch; }
.module-stack-card .btn { margin-top: clamp(18px, 2.4vw, 30px); }
.module-stack-card .reveal { width: 100%; min-width: 0; }
.module-stack-card .tilt-panel {
  min-height: clamp(400px, 55vh, 530px);
  border-radius: 20px;
  transition: transform 0.48s var(--ease), box-shadow 0.48s var(--ease);
}
.module-stack-card:hover .tilt-panel {
  transform: translateY(-5px) rotate(0.35deg);
  box-shadow: 0 34px 68px -40px rgba(8, 56, 47, 0.52);
}

/* Her modül kendi siluetine sahip: tekrar eden tarayıcı penceresi yerine
   ürünün işini anlatan, saf CSS ile çizilmiş üç ayrı sahne. */
.module-art {
  position: relative;
  width: 100%;
  min-height: clamp(390px, 52vh, 520px);
  overflow: hidden;
  padding: clamp(22px, 3vw, 38px);
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border));
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent-soft) 64%, var(--card));
  transition: transform .42s var(--ease), border-color .42s var(--ease);
}
.module-stack-card:hover .module-art {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--accent) 52%, var(--border));
}
.module-art b, .module-art strong { font-variant-numeric: tabular-nums; }

/* Oda planı: katları perspektifli bir raf gibi gösterir. */
.room-plan-art { display: grid; grid-template-rows: auto 1fr auto; gap: 18px; }
.room-plan-meta,
.channel-board-head,
.channel-board-foot,
.folio-flow-caption,
.folio-flow-footer {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  color: var(--fg-muted); font-size: 12px; font-weight: 680; letter-spacing: 0.014em;
}
.room-plan-meta b,
.channel-board-head b { display: inline-flex; align-items: center; gap: 7px; color: var(--accent-dark); }
.room-plan-meta b i,
.channel-board-head b i { width: 7px; height: 7px; border-radius: 50%; background: var(--success); animation: module-live 1.8s ease-in-out infinite; }
.room-plan-floors {
  display: grid; align-content: center; gap: 10px; padding: 8px 2px 14px;
  transform: perspective(900px) rotateX(7deg) rotateZ(-1deg);
  transform-origin: center;
}
.room-plan-floor {
  display: grid; grid-template-columns: 30px repeat(4, minmax(0, 1fr)); gap: 8px; align-items: stretch;
  padding: 8px; background: color-mix(in srgb, var(--card) 82%, transparent); border: 1px solid var(--border);
  border-radius: 7px; transition: transform .3s var(--ease), opacity .3s var(--ease);
}
.room-plan-floor > strong { display: grid; place-items: center; color: var(--fg-faint); font-size: 12px; }
.room-plan-floor.active { transform: translateX(10px); border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); }
.room-plan-floors:hover .room-plan-floor:not(:hover) { opacity: .54; }
.room-plan-floor:hover { transform: translateX(7px); }
.room-unit {
  position: relative; display: flex; align-items: center; justify-content: center; min-height: 54px;
  border-radius: 5px; color: #0d2822; background: #d8f3e9; font-size: 13px; font-weight: 760;
  transition: transform .25s var(--ease), filter .25s var(--ease);
}
.room-unit:hover { transform: translateY(-3px); filter: saturate(1.12); }
.room-unit.occupied { color: #17334b; background: #d7e8f8; }
.room-unit.blocked { color: #54204e; background: #f0d8ef; }
.room-unit.service { color: #343b3a; background: #dfe4e3; }
.room-unit.focus { color: #fff; background: var(--primary); }
.room-unit small { position: absolute; left: 50%; bottom: -9px; translate: -50% 0; width: max-content; padding: 3px 6px; border-radius: 4px; color: var(--primary); background: var(--card); border: 1px solid var(--border); font-size: 8px; }
.room-plan-key { display: flex; flex-wrap: wrap; gap: 12px; color: var(--fg-muted); font-size: 10px; }
.room-plan-key span { display: inline-flex; align-items: center; gap: 5px; }
.room-plan-key i { width: 8px; height: 8px; border-radius: 2px; background: #d8f3e9; }
.room-plan-key i.occupied { background: #a9cce9; }
.room-plan-key i.blocked { background: #d99bd4; }
.room-plan-key i.service { background: #aeb8b6; }
.room-plan-cursor { position: absolute; right: 12%; top: 51%; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--primary); font-size: 18px; animation: room-cursor 4.2s var(--ease) infinite; }

/* Folyo: farklı kaynaklardan gelen hareketler tek bir bakiyede birleşir. */
.folio-flow-art { display: grid; grid-template-rows: auto 1fr auto; gap: 18px; background: color-mix(in srgb, #f4eee4 74%, var(--card)); }
.folio-flow-caption b { color: var(--fg); }
.folio-flow-stage { position: relative; display: grid; grid-template-columns: minmax(0, .9fr) minmax(120px, .72fr) minmax(0, 1fr); gap: clamp(14px, 2vw, 24px); align-items: center; }
.folio-ticket { grid-column: 1; display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--border); border-radius: 6px; background: var(--card); opacity: 0; animation: ticket-enter .55s var(--ease) forwards; }
.folio-ticket.food { animation-delay: .18s; }
.folio-ticket.payment { animation-delay: .36s; }
.folio-ticket i { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 4px; color: var(--accent-dark); background: var(--accent-soft); font-size: 9px; font-style: normal; font-weight: 780; }
.folio-ticket span { display: flex; flex-direction: column; gap: 2px; font-size: 11px; font-weight: 700; }
.folio-ticket small { color: var(--fg-muted); font-size: 9px; font-weight: 540; }
.folio-flow-line { position: absolute; left: 31%; right: 29%; top: 50%; height: 1px; background: color-mix(in srgb, var(--accent) 46%, var(--border)); }
.folio-flow-line::before,
.folio-flow-line::after { content:""; position: absolute; top: -42px; bottom: -42px; width: 1px; background: color-mix(in srgb, var(--accent) 32%, var(--border)); }
.folio-flow-line::before { left: 22%; }
.folio-flow-line::after { right: 22%; }
.folio-flow-line i { position: absolute; top: -4px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); animation: folio-packet 2.4s linear infinite; }
.folio-flow-line i:nth-child(2) { animation-delay: .8s; }
.folio-flow-line i:nth-child(3) { animation-delay: 1.6s; }
.folio-core-card { z-index: 2; grid-column: 2; display: grid; place-items: center; align-content: center; min-height: 150px; padding: 16px; color: #fff; background: var(--primary); border-radius: 8px; text-align: center; }
.folio-core-card span { font-size: 10px; opacity: .74; }
.folio-core-card strong { margin: 7px 0; font-size: clamp(2rem, 4vw, 3.25rem); line-height: 1; }
.folio-core-card small { max-width: 14ch; font-size: 9px; line-height: 1.35; opacity: .7; }
.folio-balance-card { z-index: 2; grid-column: 3; padding: 20px; border: 1px solid color-mix(in srgb, var(--accent) 36%, var(--border)); border-radius: 8px; background: var(--card); }
.folio-balance-card span, .folio-balance-card small { display: block; color: var(--fg-muted); font-size: 10px; }
.folio-balance-card strong { display: block; margin: 9px 0; color: var(--fg); font-size: clamp(1.4rem, 2.8vw, 2.4rem); }
.folio-flow-footer { justify-content: flex-start; flex-wrap: wrap; }
.folio-flow-footer span { padding: 5px 8px; border: 1px solid var(--border); border-radius: 4px; }
.folio-flow-footer b { margin-left: auto; color: var(--success); }

/* Kanal yönetimi: soldaki kanallar gerçek zamanlı envantere akar. */
.channel-board-art { display: grid; grid-template-rows: auto 1fr auto; gap: 18px; background: color-mix(in srgb, #e7eef1 68%, var(--card)); }
.channel-board-grid { display: grid; grid-template-columns: minmax(0, 1.12fr) 70px minmax(135px, .72fr); gap: 12px; align-items: center; }
.channel-source-list { display: grid; gap: 8px; }
.channel-source-list > span { display: grid; grid-template-columns: 28px 1fr; align-items: center; padding: 9px 10px; border: 1px solid var(--border); border-radius: 5px; background: var(--card); font-size: 11px; font-weight: 700; transition: transform .26s var(--ease), border-color .26s var(--ease); }
.channel-source-list > span:hover { transform: translateX(5px); border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); }
.channel-source-list > span i { grid-row: span 2; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 4px; color: var(--accent-dark); background: var(--accent-soft); font-size: 9px; font-style: normal; }
.channel-source-list small { color: var(--fg-muted); font-size: 8px; font-weight: 520; }
.channel-stream { position: relative; height: 82%; }
.channel-stream span { position: absolute; left: 0; right: 0; height: 1px; background: color-mix(in srgb, var(--accent) 42%, var(--border)); }
.channel-stream span:nth-child(1) { top: 12%; }
.channel-stream span:nth-child(2) { top: 37%; }
.channel-stream span:nth-child(3) { top: 63%; }
.channel-stream span:nth-child(4) { top: 88%; }
.channel-stream::after { content:""; position: absolute; top: 7%; bottom: 7%; right: 0; width: 1px; background: color-mix(in srgb, var(--accent) 42%, var(--border)); }
.channel-stream i { position: absolute; left: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: channel-packet 2.2s linear infinite; }
.channel-stream i:nth-of-type(1) { top: calc(12% - 3px); }
.channel-stream i:nth-of-type(2) { top: calc(63% - 3px); animation-delay: .7s; }
.channel-stream i:nth-of-type(3) { top: calc(88% - 3px); animation-delay: 1.35s; }
.channel-inventory { align-self: stretch; display: grid; align-content: center; padding: 18px; border-radius: 8px; color: #fff; background: var(--primary); }
.channel-inventory > small { font-size: 8px; letter-spacing: 0.086em; opacity: .66; }
.channel-inventory > strong { margin-top: 8px; font-size: clamp(2.6rem, 5.2vw, 4.6rem); line-height: .94; }
.channel-inventory > span { margin-top: 4px; font-size: 10px; opacity: .7; }
.inventory-bars { display: flex; align-items: end; gap: 4px; height: 60px; margin-top: 18px; }
.inventory-bars i { flex: 1; height: var(--h); min-height: 8px; border-radius: 2px 2px 0 0; background: color-mix(in srgb, var(--accent) 78%, white); transform-origin: bottom; animation: inventory-rise 1s var(--ease) both; }
.inventory-bars i:nth-child(2n) { animation-delay: .15s; }
.channel-board-foot { padding-top: 12px; border-top: 1px solid var(--border); }
.channel-board-foot b { color: var(--fg); }

@keyframes module-live { 50% { opacity: .35; transform: scale(.72); } }
@keyframes room-cursor { 0%, 18% { transform: translate(-110px, 50px); opacity: 0; } 32%, 68% { transform: translate(0, 0); opacity: 1; } 82%, 100% { transform: translate(20px, -16px); opacity: 0; } }
@keyframes ticket-enter { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: none; } }
@keyframes folio-packet { from { left: 0; opacity: 0; } 15%, 85% { opacity: 1; } to { left: calc(100% - 9px); opacity: 0; } }
@keyframes channel-packet { from { left: 0; opacity: 0; } 12%, 88% { opacity: 1; } to { left: calc(100% - 7px); opacity: 0; } }
@keyframes inventory-rise { from { transform: scaleY(.15); opacity: .35; } to { transform: scaleY(1); opacity: 1; } }

@media (max-width: 939px) {
  .module-stack-section { padding-block: 72px; }
  .module-stack-head { margin-bottom: 42px; }
  .module-stack-card {
    position: relative;
    top: auto;
    z-index: auto;
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
    margin-bottom: 24px;
    padding: clamp(22px, 5vw, 38px);
  }
  .module-stack-card.rev > *:first-child { order: 0; }
  .module-stack-card.rev .split-copy { order: -1; }
  .module-stack-card .tilt-panel { min-height: clamp(310px, 62vw, 430px); }
  .module-art { min-height: clamp(340px, 64vw, 450px); }
}

@media (max-width: 560px) {
  .module-stack-head .h-section { font-size: clamp(2.45rem, 14vw, 4rem); }
  .module-stack-card { border-radius: 18px; }
  .module-stack-card .h-section { font-size: clamp(1.95rem, 9vw, 2.75rem); }
  .module-stack-card .tilt-panel { min-height: 292px; border-radius: 14px; }
  .module-art { min-height: 310px; padding: 16px; }
  .room-plan-floor { grid-template-columns: 24px repeat(4, minmax(0, 1fr)); gap: 5px; padding: 6px; }
  .room-unit { min-height: 44px; font-size: 11px; }
  .folio-flow-stage { grid-template-columns: 1fr 90px 1fr; gap: 8px; }
  .folio-ticket { grid-template-columns: 20px 1fr; gap: 5px; padding: 7px; }
  .folio-ticket i { width: 20px; height: 20px; }
  .folio-core-card { min-height: 120px; padding: 10px 5px; }
  .folio-balance-card { padding: 12px 8px; }
  .channel-board-grid { grid-template-columns: 1fr 36px minmax(105px, .68fr); gap: 6px; }
  .channel-source-list > span { grid-template-columns: 22px 1fr; padding: 6px; font-size: 9px; }
  .channel-inventory { padding: 12px 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .module-stack-card,
  .module-stack-card .tilt-panel,
  .module-art { transition: none; }
  .module-stack-card:hover,
  .module-stack-card:hover .tilt-panel,
  .module-stack-card:hover .module-art { transform: none; }
  .module-art * { animation: none !important; }
}

/* ==========================================================================
   32. MODUL PANELLERI - yan yana duz seritler
   Eski kart yerlesimi buyuk basliklar ve genis gorsellerle yer kapliyordu.
   Burada dort panel bitisik durur, zeminleri donusumlu degisir; ustte ince
   cizgi resim, altta kisa metin. Baslik olculeri bilerek kucuk.
   ========================================================================== */
.mpanel-sec { padding-block: clamp(48px, 6vw, 84px) 0; }
.mpanel-head { margin-bottom: clamp(28px, 3.5vw, 44px); }
.mpanel-head .h-section { font-size: clamp(1.55rem, 2.6vw, 2.05rem); }

/* Şerit sayfa ızgarasında durur; tam genişlikte taşınca üstteki başlıkla
   hizası kaçıyordu. Köşeler kart yarıçapını izler. */
.mpanel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  overflow: hidden;
  border-radius: var(--radius-card, 14px);
}

.mpanel {
  position: relative;
  display: flex; flex-direction: column;
  padding: clamp(20px, 2.2vw, 30px);
  text-decoration: none;
  transition: filter 0.35s var(--ease);
}
.mpanel + .mpanel { box-shadow: inset 1px 0 0 rgba(127, 143, 133, 0.22); }
.mpanel:hover { filter: brightness(1.05); }

/* Çizim: girişte yumuşak çizilir, üzerine gelince hafifçe büyür */
.mpanel-art svg { transition: transform 0.5s var(--ease), opacity 0.5s var(--ease); }
.mpanel:hover .mpanel-art svg { transform: scale(1.06); }
/* --- Panel çizimlerinin animasyonları ------------------------------------
   Dördü de sürekli döner: odalar sırayla dolup boşalır, folyoya tutar
   işlenip toplam yeniden çizilir, kanallar merkeze akar, gün sonu
   kalemleri tek tek onaylanıp yeni güne sıfırlanır. */

/* 01 — oda planı: doluluk ızgarada dalga gibi ilerler */
.mpanel-art .art-rooms rect { fill: currentColor; fill-opacity: 0; }
.mpanel-art .art-rooms rect { animation: art-oda 5.2s var(--ease) infinite; }
.mpanel-art .art-rooms rect:nth-child(1)  { animation-delay: 0.00s; }
.mpanel-art .art-rooms rect:nth-child(2)  { animation-delay: 0.10s; }
.mpanel-art .art-rooms rect:nth-child(3)  { animation-delay: 0.20s; }
.mpanel-art .art-rooms rect:nth-child(4)  { animation-delay: 0.30s; }
.mpanel-art .art-rooms rect:nth-child(5)  { animation-delay: 0.14s; }
.mpanel-art .art-rooms rect:nth-child(6)  { animation-delay: 0.24s; }
.mpanel-art .art-rooms rect:nth-child(7)  { animation-delay: 0.34s; }
.mpanel-art .art-rooms rect:nth-child(8)  { animation-delay: 0.44s; }
.mpanel-art .art-rooms rect:nth-child(9)  { animation-delay: 0.28s; }
.mpanel-art .art-rooms rect:nth-child(10) { animation-delay: 0.38s; }
.mpanel-art .art-rooms rect:nth-child(11) { animation-delay: 0.48s; }
.mpanel-art .art-rooms rect:nth-child(12) { animation-delay: 0.58s; }
.mpanel-art .art-rooms rect:nth-child(13) { animation-delay: 0.42s; }
.mpanel-art .art-rooms rect:nth-child(14) { animation-delay: 0.52s; }
.mpanel-art .art-rooms rect:nth-child(15) { animation-delay: 0.62s; }
.mpanel-art .art-rooms rect:nth-child(16) { animation-delay: 0.72s; }
@keyframes art-oda {
  0%        { fill-opacity: 0; }
  14%, 58%  { fill-opacity: 0.34; }
  76%, 100% { fill-opacity: 0; }
}

/* 02 — folyo: tutarlar işlenir, ardından toplam yeniden çizilir */
.mpanel-art .art-folio .art-amount {
  stroke-dasharray: 22; stroke-dashoffset: 22;
  animation: art-tutar 4.4s var(--ease) infinite;
}
.mpanel-art .art-folio .art-amount:nth-of-type(2) { animation-delay: 0.9s; }
@keyframes art-tutar {
  0%        { stroke-dashoffset: 22; opacity: 0; }
  16%, 62%  { stroke-dashoffset: 0;  opacity: 1; }
  80%, 100% { stroke-dashoffset: 0;  opacity: 0; }
}
.mpanel-art .art-folio .art-total {
  stroke-dasharray: 52; stroke-dashoffset: 52;
  animation: art-toplam 4.4s var(--ease) infinite 1.7s;
}
@keyframes art-toplam {
  0%        { stroke-dashoffset: 52; }
  22%, 68%  { stroke-dashoffset: 0; }
  86%, 100% { stroke-dashoffset: 52; }
}

/* 03 — kanallar: uçlardan merkeze akış, oradan tek çıkışa */
.mpanel-art .art-flow { stroke-dasharray: 5 6; animation: art-stream 1.6s linear infinite; }
.mpanel-art .art-out  { stroke-dasharray: 5 6; animation: art-stream 1.6s linear infinite 0.4s; }
@keyframes art-stream { to { stroke-dashoffset: -22; } }

.mpanel-art .art-node {
  transform-origin: center;
  animation: art-nokta 2.7s var(--ease) infinite;
}
.mpanel-art .art-channel .art-node:nth-of-type(2) { animation-delay: 0.45s; }
.mpanel-art .art-channel .art-node:nth-of-type(3) { animation-delay: 0.90s; }
@keyframes art-nokta {
  0%, 100% { opacity: 0.45; transform: scale(1); }
  45%      { opacity: 1;    transform: scale(1.14); }
}
/* Veri ulaşınca çıkış kutusu yanar */
.mpanel-art .art-box {
  fill: currentColor; fill-opacity: 0;
  animation: art-kutu 2.7s var(--ease) infinite 1.15s;
}
@keyframes art-kutu {
  0%, 100% { fill-opacity: 0; }
  40%      { fill-opacity: 0.4; }
}

/* 04 — gün sonu: kalemler tek tek onaylanır, yeni güne sıfırlanır */
.mpanel-art .art-tick {
  stroke-dasharray: 20; stroke-dashoffset: 20;
  animation: art-onay 5s var(--ease) infinite;
}
.mpanel-art .art-tick-1 { animation-delay: 0.2s; }
.mpanel-art .art-tick-2 { animation-delay: 0.8s; }
.mpanel-art .art-tick-3 { animation-delay: 1.4s; }
@keyframes art-onay {
  0%        { stroke-dashoffset: 20; }
  12%, 66%  { stroke-dashoffset: 0; }
  80%, 100% { stroke-dashoffset: 20; }
}
/* Onaylanan satır kısa süre vurgulanır */
.mpanel-art .art-check path { animation: art-satir 5s var(--ease) infinite; opacity: 0.55; }
.mpanel-art .art-check path:nth-of-type(1) { animation-delay: 0.2s; }
.mpanel-art .art-check path:nth-of-type(2) { animation-delay: 0.8s; }
.mpanel-art .art-check path:nth-of-type(3) { animation-delay: 1.4s; }
@keyframes art-satir {
  0%, 100% { opacity: 0.55; }
  14%, 62% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .mpanel-art .art-rooms rect, .mpanel-art .art-amount, .mpanel-art .art-total,
  .mpanel-art .art-flow, .mpanel-art .art-out, .mpanel-art .art-node,
  .mpanel-art .art-box, .mpanel-art .art-tick, .mpanel-art .art-check path {
    animation: none;
  }
  .mpanel-art .art-tick, .mpanel-art .art-amount, .mpanel-art .art-total { stroke-dashoffset: 0; }
}

/* Alt metin girişte azıcık gecikmeyle yükselir */
.mpanel .mpanel-body { transition: transform 0.5s var(--ease) 0.08s; }
.mpanel.in .mpanel-body { transform: none; }
.mpanel:not(.in) .mpanel-body { transform: translateY(8px); }
.mpanel:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }

/* Zeminler: koyu / beyaz / adaçayı sırayla döner */
.mpanel--dark  { background: #1E3A2E; color: #EEF3EF; }
.mpanel--light { background: #FFFFFF; color: #16241D; }
.mpanel--sage  { background: #C5D3C8; color: #16241D; }

.mpanel-top {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12px; font-weight: 600; letter-spacing: 0.014em;
}
.mpanel-no { opacity: 0.75; font-variant-numeric: tabular-nums; }
.mpanel-state { display: inline-flex; align-items: center; gap: 7px; opacity: 0.8; }
.mpanel-state i {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; opacity: 0.75; display: block;
}

/* Çizim alanı: sadece kontur, dolgu yok — panel zemini görünür kalır */
.mpanel-art {
  display: grid; place-items: center;
  padding-block: clamp(26px, 4vw, 48px);
  opacity: 0.55;
}
.mpanel-art svg { width: clamp(96px, 9vw, 128px); height: auto; }

.mpanel-body { border-top: 1px solid currentColor; padding-top: 16px; }
.mpanel-body { border-color: color-mix(in oklab, currentColor 22%, transparent); }
.mpanel-eyebrow {
  display: block; margin-bottom: 10px;
  font-size: 11px; font-weight: 680; letter-spacing: 0.101em; text-transform: uppercase;
  opacity: 0.72;
}
.mpanel-title {
  font-size: clamp(1.08rem, 1.5vw, 1.32rem);
  font-weight: 540; line-height: 1.28; letter-spacing: -0.021em;
}
.mpanel-text {
  margin-top: 10px; max-width: 34ch;
  font-size: 13.5px; line-height: 1.6; opacity: 0.78;
}

@media (max-width: 640px) {
  .mpanel-art { padding-block: 22px; }
  .mpanel-art svg { width: 88px; }
}


/* ---------- 33. KAPSAM IZGARASI ---------- */
/* Ince cizgilerle bolunmus tek bir tablo gibi: her hucre bir yetenek,
   en altta tum modullere giden tek satir. */
.capgrid-sec .section-head { max-width: 660px; margin-inline: auto; margin-bottom: 30px; }

.capgrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--card);
  overflow: hidden;
}

.cap {
  display: grid; align-content: start; gap: 9px;
  padding: 22px 20px 24px;
  border-right: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
  transition: background 0.25s var(--ease);
}
.cap:nth-child(4n) { border-right: 0; }
.cap:hover { background: var(--bg); }

.cap-ico {
  width: 38px; height: 38px; border-radius: 9px;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--accent) 42%, #ffffff);
  color: var(--accent-ink);
  transition: background 0.25s var(--ease), transform 0.3s var(--ease);
}
.cap-ico svg { width: 19px; height: 19px; stroke-width: 1.7; }
.cap:hover .cap-ico { background: var(--accent); transform: translateY(-2px); }

.cap h3 {
  font-size: 14.6px; font-weight: 560; line-height: 1.34;
  color: var(--fg); letter-spacing: -0.014em;
  margin-top: 2px;
}
.cap p { font-size: 12.4px; line-height: 1.45; color: var(--fg-faint); }

.capgrid-foot { grid-column: 1 / -1; display: grid; place-items: center; padding: 15px 18px; }
.cap-all {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13.6px; font-weight: 560; color: var(--fg);
  transition: color 0.22s var(--ease);
}
.cap-all .arw { transition: transform 0.22s var(--ease); }
.cap-all:hover { color: var(--accent-deep); }
.cap-all:hover .arw { transform: translateX(3px); }

@media (max-width: 900px) {
  .capgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cap:nth-child(4n) { border-right: 1px solid var(--border-soft); }
  .cap:nth-child(2n) { border-right: 0; }
}
@media (max-width: 560px) {
  .capgrid { grid-template-columns: minmax(0, 1fr); }
  .cap, .cap:nth-child(4n), .cap:nth-child(2n) { border-right: 0; }
  .cap { padding: 20px 18px 22px; }
}


/* ---------- 34. CTA KARTI ---------- */
/* Koyu serit yerine marka tonunda genis bir kart: solda soz, sagda akan
   yumusak kanatlar, cagri butonunda RoomFollow simgesi. */
.cta-card {
  position: relative; overflow: hidden;
  border-radius: var(--r-xl);
  padding: clamp(34px, 4.6vw, 62px);
  min-height: clamp(280px, 30vw, 340px);
  display: grid; align-content: center;
  background: linear-gradient(135deg, oklch(0.93 0.042 172), oklch(0.895 0.058 188));
  color: var(--accent-ink);
}
/* Sagda, kenardan tasan buyuk marka simgesi. Soyut desen degil:
   kartin kime ait oldugunu tek bakista soyleyen tek bir isaret. */
.cta-flow {
  position: absolute; z-index: 0; pointer-events: none;
  right: -1.5%; top: 50%; translate: 0 -50%;
  height: 124%; width: auto; display: block;
  color: rgba(255, 255, 255, 0.52);
}
.cta-copy {
  position: relative; z-index: 1;
  display: grid; gap: 18px; justify-items: start;
  max-width: min(100%, 620px); text-align: left;
}
.cta-copy .eyebrow {
  color: var(--accent-ink);
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.8);
  padding: 5px 12px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 7px;
}
.cta-copy .eyebrow .spark { color: var(--accent-deep); }
.cta-copy h2 { color: var(--accent-ink); max-width: 19ch; text-wrap: pretty; }
.cta-copy .lead { color: color-mix(in srgb, var(--accent-ink) 74%, transparent); font-size: 16px; max-width: 46ch; }
.cta-copy .btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }

/* Simgeli koyu buton */
.btn-mark {
  display: inline-flex; align-items: center; gap: 13px;
  padding: 7px 24px 7px 7px; border-radius: 13px;
  background: var(--accent-ink); color: #fff;
  font-size: 15px; font-weight: 560; line-height: 1;
  transition: background 0.25s var(--ease), transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.btn-mark:hover {
  background: #011c1b; transform: translateY(-2px);
  box-shadow: 0 14px 28px -14px rgba(2, 42, 40, 0.65);
}
.btn-mark-ico {
  flex: none; width: 40px; height: 40px; border-radius: 10px;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--accent) 58%, #ffffff);
  color: var(--accent-ink);
  transition: background 0.25s var(--ease);
}
.btn-mark:hover .btn-mark-ico { background: var(--accent); }
.btn-mark-ico .mark { height: 21px; width: auto; }

/* Ikincil buton acik zeminde */
.cta-card .btn-ghost {
  --btn-fg: var(--accent-ink);
  border-color: rgba(2, 42, 40, 0.22);
  background: rgba(255, 255, 255, 0.35);
}
.cta-card .btn-ghost:hover {
  --btn-bg: rgba(255, 255, 255, 0.75);
  border-color: rgba(2, 42, 40, 0.32);
}

@media (max-width: 640px) {
  .cta-card { padding: 30px 22px 34px; min-height: 0; }
  .cta-copy { max-width: none; }
  .cta-flow { height: 78%; right: -8%; color: rgba(255, 255, 255, 0.4); }
}


/* ---------- 35. YAPISKAN AKIS BOLUMU ---------- */
/* Solda ozellikler kayar, sagdaki dashboard gorseli sabit durur ve
   hangi ozellik ekrandaysa o ekrana gecis yapar. */
.sticky-sec { padding-block: clamp(56px, 7vw, 96px); }
.sticky-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.76fr) minmax(0, 1.34fr);
  gap: clamp(24px, 3.2vw, 54px);
  align-items: start;
}

/* --- Sol sutun --- */
.sticky-head { display: grid; gap: 14px; padding-block: clamp(18px, 4vh, 44px) clamp(20px, 4vh, 40px); }
.sticky-head .eyebrow { justify-self: start; }
.sticky-head h2 { max-width: 15ch; }
.sticky-head .lead { max-width: 42ch; }

.sfeat {
  padding-block: clamp(20px, 3.4vh, 34px);
  border-top: 1px solid var(--border-soft);
}
.sfeat:first-of-type { border-top: 0; }
.sfeat-copy {
  display: grid; gap: 9px; justify-items: start; max-width: 44ch;
  transform: translateX(-5px);
  transition: transform 0.5s var(--ease);
}
.sfeat.is-on .sfeat-copy { transform: none; }

/* Numara + modul ikonu */
.sfeat-n {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 11.5px; font-weight: 660; letter-spacing: 0.115em;
  font-variant-numeric: tabular-nums;
  color: var(--fg-faint);
  transition: color 0.4s var(--ease);
}
.sfeat-ico {
  display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: 8px;
  background: var(--bg-2); color: var(--fg-faint);
  transition: background 0.4s var(--ease), color 0.4s var(--ease), transform 0.4s var(--ease);
}
.sfeat-ico svg { width: 14px; height: 14px; }
.sfeat.is-on .sfeat-ico { background: var(--accent-soft); color: var(--accent-deep); transform: scale(1.06); }

.sfeat h3 {
  font-size: clamp(1.24rem, 1.9vw, 1.58rem); font-weight: 540;
  line-height: 1.2; letter-spacing: -0.028em;
  color: var(--fg-faint);
  transition: color 0.4s var(--ease);
}
.sfeat p {
  font-size: 14.6px; line-height: 1.55; color: var(--fg-faint);
  transition: color 0.4s var(--ease);
}
/* Baglanti her zaman akista durur: gizlense yer kaplayip bosluk birakiyordu */
.sfeat-link {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 1px;
  font-size: 13.4px; font-weight: 540; color: var(--fg-faint);
  opacity: 0.5;
  transition: opacity 0.4s var(--ease), color 0.4s var(--ease);
}
.sfeat-link .arw { transition: transform 0.22s var(--ease); }
.sfeat-link:hover .arw { transform: translateX(3px); }

.sfeat.is-on .sfeat-n { color: var(--accent-deep); }
.sfeat.is-on h3 { color: var(--fg); }
.sfeat.is-on p { color: var(--fg-muted); }
.sfeat.is-on .sfeat-link { opacity: 1; color: var(--accent-deep); }

.sfeat-shot { display: none; }

/* --- Sag sutun: sabit gorsel + altinda ilerleme --- */
.sticky-visual { position: sticky; top: 92px; display: grid; gap: 14px; }

.sticky-frame {
  position: relative;
  aspect-ratio: 4 / 3.5;
  border-radius: var(--r-xl);
  overflow: hidden;
  background:
    radial-gradient(110% 90% at 82% -6%, rgba(95, 214, 168, 0.16), transparent 58%),
    linear-gradient(158deg, var(--hero-green) 0%, var(--hero-green-deep) 100%);
  border: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: var(--shadow-lg);
}
/* Koyu zemin uzerinde ince izgara dokusu */
.sticky-frame::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px);
  background-size: 30px 30px;
}

/* Ekranlar ust uste durur, aktif olan yumusakca one gecer */
.svis {
  position: absolute; inset: clamp(16px, 2vw, 26px);
  display: grid; align-content: center;
  opacity: 0; transform: translateY(18px) scale(0.98);
  transition: opacity 0.45s var(--ease), transform 0.55s var(--ease);
  pointer-events: none;
}
.svis.is-on { opacity: 1; transform: none; }

/* Mini ekran cerceveyi doldurur */
.sticky-frame .mod-vis { height: auto; padding: 0; border: 0; background: none; }
.sticky-frame .mod-vis::before,
.sticky-frame .mod-vis::after { display: none; }
.sticky-frame .mod-shot {
  height: auto; width: 100%;
  border-radius: var(--r); border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.6);
}
.sticky-frame .mod-shot-bar { padding: 14px 18px; font-size: 13px; }
.sticky-frame .mod-shot-bar i { width: 7px; height: 7px; }
.sticky-frame .mod-shot-body { padding: 4px 18px 14px; gap: 0; }
/* Rozetli satirlar sade metin satirlarindan daha uzun oluyordu (54px'e karsi
   48px); ayirici cizgilerin ritmi bozuluyordu. Sabit yukseklikle hepsi esitlenir. */
.sticky-frame .ms-row {
  font-size: 14px;
  padding-block: 0; min-height: 54px;
  align-items: center;
}
/* Gri rozet vurgu zemininde soluk kaliyordu; kendi zeminini tasisin */
.sticky-frame .ms-pill.grey { background: #fff; box-shadow: inset 0 0 0 1px var(--border-soft); }
.sticky-frame .ms-pill { font-size: 12px; padding: 4px 12px; }
.sticky-frame .ms-bars { height: 74px; gap: 6px; margin-block: 10px; }

/* --- Ilerleme: ince segmentli cubuk --- */
.sticky-foot { display: flex; align-items: center; gap: 16px; padding-inline: 2px; }
.sticky-dots { display: flex; gap: 6px; flex: 1; }
.sdot {
  flex: 1; height: 4px; padding: 0;
  border: 0; border-radius: 3px;
  background: var(--border);
  cursor: pointer;
  transition: background 0.4s var(--ease);
}
.sdot:hover { background: #d2ccc2; }
.sdot.is-on { background: var(--accent-deep); }
.sticky-count {
  flex: none; font-size: 12px; font-weight: 560;
  font-variant-numeric: tabular-nums; letter-spacing: 0.06em;
  color: var(--fg-faint);
}
.sticky-count b { color: var(--fg); font-weight: 660; }

/* --- Kart ici animasyonlar --------------------------------------------
   Iki katman var: ekran aciliste bir kez kurulur (giris), sonra surekli
   tekrar eden bir "canli islem" dongusu doner. Donguyu 6 adima bolduk;
   her satir sirasi gelince kisa sure vurgulanir. */

/* Baslik cubugundaki canli nokta */
.svis.is-on .mod-shot-bar i:first-child { animation: sv-nabiz 2.2s var(--ease) infinite; }
@keyframes sv-nabiz {
  0%, 100% { box-shadow: 0 0 0 0 oklch(0.72 0.145 168 / 0.55); }
  60%      { box-shadow: 0 0 0 6px oklch(0.72 0.145 168 / 0); }
}

/* Baslik cubugunun altinda soldan saga gecen isik: veri akiyor hissi */
.svis .mod-shot-bar { position: relative; overflow: hidden; }
.svis.is-on .mod-shot-bar::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 30%;
  background: linear-gradient(90deg, transparent, oklch(0.72 0.145 168), transparent);
  animation: sv-supurge 3.4s linear infinite;
}
@keyframes sv-supurge {
  from { transform: translateX(-110%); }
  to   { transform: translateX(440%); }
}

/* Satirlar: once asagidan girer, sonra sirayla vurgulanmaya devam eder.
   Vurgu satirin kendi kutusunda kalir; ayirici cizgiler yerinden oynamaz. */
.svis .ms-row { border-radius: 6px; }
.svis.is-on .ms-row {
  animation:
    sv-satir 0.5s var(--ease) both,
    sv-tara 6.6s linear infinite;
}
.svis.is-on .ms-row:nth-child(1) { animation-delay: 0.10s, 0.7s; }
.svis.is-on .ms-row:nth-child(2) { animation-delay: 0.16s, 1.8s; }
.svis.is-on .ms-row:nth-child(3) { animation-delay: 0.22s, 2.9s; }
.svis.is-on .ms-row:nth-child(4) { animation-delay: 0.28s, 4.0s; }
.svis.is-on .ms-row:nth-child(5) { animation-delay: 0.34s, 5.1s; }
.svis.is-on .ms-row:nth-child(6) { animation-delay: 0.40s, 6.2s; }
@keyframes sv-satir {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@keyframes sv-tara {
  0%       { background-color: transparent; }
  4%       { background-color: oklch(0.72 0.145 168 / 0.14); }
  13%      { background-color: oklch(0.72 0.145 168 / 0.14); }
  18%, 100% { background-color: transparent; }
}

/* Sirasi gelen satirin degeri ve rozeti hafifce one cikar */
.svis.is-on .ms-row em,
.svis.is-on .ms-row .ms-pill { animation: sv-vurgu 6.6s linear infinite; }
.svis.is-on .ms-row:nth-child(1) em, .svis.is-on .ms-row:nth-child(1) .ms-pill { animation-delay: 0.7s; }
.svis.is-on .ms-row:nth-child(2) em, .svis.is-on .ms-row:nth-child(2) .ms-pill { animation-delay: 1.8s; }
.svis.is-on .ms-row:nth-child(3) em, .svis.is-on .ms-row:nth-child(3) .ms-pill { animation-delay: 2.9s; }
.svis.is-on .ms-row:nth-child(4) em, .svis.is-on .ms-row:nth-child(4) .ms-pill { animation-delay: 4.0s; }
.svis.is-on .ms-row:nth-child(5) em, .svis.is-on .ms-row:nth-child(5) .ms-pill { animation-delay: 5.1s; }
.svis.is-on .ms-row:nth-child(6) em, .svis.is-on .ms-row:nth-child(6) .ms-pill { animation-delay: 6.2s; }
@keyframes sv-vurgu {
  0%, 18%, 100% { transform: none; }
  7%            { transform: translateY(-2px); }
  13%           { transform: none; }
}

/* Cubuk grafik: once tabandan buyur, sonra icinden dalga gecer */
.svis.is-on .ms-bars i {
  transform-origin: bottom;
  animation:
    sv-cubuk 0.6s var(--ease) both,
    sv-dalga 3.6s var(--ease) infinite;
}
.svis.is-on .ms-bars i:nth-child(1) { animation-delay: 0.14s, 0.9s; }
.svis.is-on .ms-bars i:nth-child(2) { animation-delay: 0.20s, 1.0s; }
.svis.is-on .ms-bars i:nth-child(3) { animation-delay: 0.26s, 1.1s; }
.svis.is-on .ms-bars i:nth-child(4) { animation-delay: 0.32s, 1.2s; }
.svis.is-on .ms-bars i:nth-child(5) { animation-delay: 0.38s, 1.3s; }
.svis.is-on .ms-bars i:nth-child(6) { animation-delay: 0.44s, 1.4s; }
.svis.is-on .ms-bars i:nth-child(7) { animation-delay: 0.50s, 1.5s; }
.svis.is-on .ms-bars i:nth-child(8) { animation-delay: 0.56s, 1.6s; }
.svis.is-on .ms-bars i:nth-child(9) { animation-delay: 0.62s, 1.7s; }
@keyframes sv-cubuk { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes sv-dalga {
  0%, 55%, 100% { transform: scaleY(1);    opacity: 0.85; }
  25%           { transform: scaleY(0.84); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .svis.is-on .ms-row, .svis.is-on .ms-row em, .svis.is-on .ms-row .ms-pill,
  .svis.is-on .ms-bars i, .svis.is-on .mod-shot-bar i:first-child { animation: none; }
  .svis.is-on .mod-shot-bar::after { display: none; }
}

/* --- Dar ekran: tek sutun, gorsel her ozelligin altinda --- */
@media (max-width: 900px) {
  .sticky-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .sticky-visual { display: none; }
  .sfeat-shot { display: block; margin-top: 18px; }
  .sfeat-shot .mod-vis {
    height: auto; border-radius: var(--r-lg); border: 0; padding: 0; background: none;
  }
  .sfeat-copy { transform: none; }
  .sfeat h3 { color: var(--fg); }
  .sfeat p { color: var(--fg-muted); }
  .sfeat .sfeat-n { color: var(--accent-deep); }
  .sfeat .sfeat-ico { background: var(--accent-soft); color: var(--accent-deep); }
  .sfeat .sfeat-link { opacity: 1; color: var(--accent-deep); }
}


/* ---------- 36. MODUL IZGARASI (ozellikler sayfasi) ---------- */
/* Tek bir cerceve, ince cizgilerle uc sutuna bolunmus. Her hucrede
   numara, baslik, kisa aciklama ve altinda modulun kendi ekranindan
   genis bir onizleme. Ayri ayri kart kutulari yok. */
.featgrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--card);
  overflow: hidden;
}

.featcell {
  display: grid; align-content: start; gap: 10px;
  padding: clamp(24px, 2.4vw, 34px);
  border-right: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
  transition: background 0.25s var(--ease);
}
.featcell:nth-child(3n) { border-right: 0; }
.featcell:nth-last-child(-n+3) { border-bottom: 0; }
.featcell:hover { background: var(--bg); }

.featcell-n {
  font-size: 12px; font-weight: 620; letter-spacing: 0.1em;
  color: var(--fg-faint); font-variant-numeric: tabular-nums;
}
.featcell h3 {
  font-size: clamp(1.12rem, 1.5vw, 1.34rem); font-weight: 560;
  line-height: 1.24; letter-spacing: -0.026em; color: var(--fg);
  margin-top: 2px;
}
.featcell p {
  font-size: 14px; line-height: 1.56; color: var(--fg-muted);
  max-width: 34ch;
}

/* Onizleme paneli: modulun kendi ekranindan bir kesit */
.featcell-vis {
  margin-top: 10px; padding: clamp(16px, 1.6vw, 24px);
  border-radius: var(--r);
  background: var(--bg-2);
  display: grid; align-content: center;
  min-height: 208px;
  transition: background 0.25s var(--ease);
}
.featcell:hover .featcell-vis { background: #eeece6; }

.featcell-vis .mod-shot {
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 10px 24px -14px rgba(22, 22, 20, 0.3);
}
.featcell-vis .mod-shot-bar {
  padding: 8px 11px; font-size: 10.5px;
  background: var(--bg); border-bottom: 1px solid var(--border-soft);
  display: flex; align-items: center; gap: 6px;
  font-weight: 620; color: var(--fg-muted);
}
.featcell-vis .mod-shot-bar i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--border); flex: none;
}
.featcell-vis .mod-shot-bar i:first-child { background: var(--accent); }
.featcell-vis .mod-shot-body { padding: 4px 11px 10px; display: grid; }
.featcell-vis .ms-row { font-size: 11px; padding-block: 0; min-height: 32px; align-items: center; }
.featcell-vis .ms-pill { font-size: 9.5px; padding: 2px 7px; }
.featcell-vis .ms-bars { height: 40px; gap: 4px; margin-block: 6px; }
.featcell-vis .ms-strip i { height: 16px; }

.featcell-go {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 4px;
  font-size: 13.2px; font-weight: 540; color: var(--fg);
  transition: color 0.22s var(--ease);
}
.featcell-go .arw { transition: transform 0.22s var(--ease); }
.featcell:hover .featcell-go { color: var(--accent-deep); }
.featcell:hover .featcell-go .arw { transform: translateX(3px); }

@media (max-width: 1000px) {
  .featgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .featcell:nth-child(3n) { border-right: 1px solid var(--border-soft); }
  .featcell:nth-child(2n) { border-right: 0; }
  .featcell:nth-last-child(-n+3) { border-bottom: 1px solid var(--border-soft); }
  .featcell:nth-last-child(-n+2) { border-bottom: 0; }
}
@media (max-width: 640px) {
  .featgrid { grid-template-columns: minmax(0, 1fr); }
  .featcell, .featcell:nth-child(3n), .featcell:nth-child(2n) { border-right: 0; }
  .featcell { border-bottom: 1px solid var(--border-soft); }
  .featcell:last-child { border-bottom: 0; }
  .featcell-vis { min-height: 0; }
}

/* --- Onizleme icerikleri canli: satirlar sirayla taranir --------------- */
/* Sutuna gore kaydirma: 18 hucre ayni anda ayni sey yapmasin */
.featcell:nth-child(3n+1) { --g: 0s; }
.featcell:nth-child(3n+2) { --g: 0.6s; }
.featcell:nth-child(3n)   { --g: 1.2s; }

/* Canli nokta */
.featcell.in .featcell-vis .mod-shot-bar i:first-child {
  animation: sv-nabiz 2.4s var(--ease) infinite;
  animation-delay: var(--g, 0s);
}

/* Baslik cubugunun altindan gecen isik */
.featcell-vis .mod-shot-bar { position: relative; overflow: hidden; }
.featcell.in .featcell-vis .mod-shot-bar::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 32%;
  background: linear-gradient(90deg, transparent, oklch(0.72 0.145 168), transparent);
  animation: sv-supurge 3.6s linear infinite;
  animation-delay: var(--g, 0s);
}

/* Satirlar sirayla vurgulanir */
.featcell-vis .ms-row { border-radius: 5px; }
.featcell.in .featcell-vis .ms-row { animation: sv-tara 5.4s linear infinite; }
.featcell.in .featcell-vis .ms-row:nth-child(1) { animation-delay: calc(var(--g, 0s) + 0.6s); }
.featcell.in .featcell-vis .ms-row:nth-child(2) { animation-delay: calc(var(--g, 0s) + 1.5s); }
.featcell.in .featcell-vis .ms-row:nth-child(3) { animation-delay: calc(var(--g, 0s) + 2.4s); }
.featcell.in .featcell-vis .ms-row:nth-child(4) { animation-delay: calc(var(--g, 0s) + 3.3s); }
.featcell.in .featcell-vis .ms-row:nth-child(5) { animation-delay: calc(var(--g, 0s) + 4.2s); }
.featcell.in .featcell-vis .ms-row:nth-child(6) { animation-delay: calc(var(--g, 0s) + 5.1s); }

/* Cubuk grafikli ekranlarda dalga */
.featcell.in .featcell-vis .ms-bars i {
  transform-origin: bottom;
  animation: sv-dalga 3.6s var(--ease) infinite;
}
.featcell.in .featcell-vis .ms-bars i:nth-child(1) { animation-delay: calc(var(--g, 0s) + 0.0s); }
.featcell.in .featcell-vis .ms-bars i:nth-child(2) { animation-delay: calc(var(--g, 0s) + 0.1s); }
.featcell.in .featcell-vis .ms-bars i:nth-child(3) { animation-delay: calc(var(--g, 0s) + 0.2s); }
.featcell.in .featcell-vis .ms-bars i:nth-child(4) { animation-delay: calc(var(--g, 0s) + 0.3s); }
.featcell.in .featcell-vis .ms-bars i:nth-child(5) { animation-delay: calc(var(--g, 0s) + 0.4s); }
.featcell.in .featcell-vis .ms-bars i:nth-child(6) { animation-delay: calc(var(--g, 0s) + 0.5s); }
.featcell.in .featcell-vis .ms-bars i:nth-child(7) { animation-delay: calc(var(--g, 0s) + 0.6s); }
.featcell.in .featcell-vis .ms-bars i:nth-child(8) { animation-delay: calc(var(--g, 0s) + 0.7s); }
.featcell.in .featcell-vis .ms-bars i:nth-child(9) { animation-delay: calc(var(--g, 0s) + 0.8s); }

/* Oda seridi hucreleri nefes alir */
.featcell.in .featcell-vis .ms-strip i { animation: sv-hucre-nefes 4.2s var(--ease) infinite; }
.featcell.in .featcell-vis .ms-strip i:nth-child(1) { animation-delay: calc(var(--g, 0s) + 0.0s); }
.featcell.in .featcell-vis .ms-strip i:nth-child(2) { animation-delay: calc(var(--g, 0s) + 0.15s); }
.featcell.in .featcell-vis .ms-strip i:nth-child(3) { animation-delay: calc(var(--g, 0s) + 0.30s); }
.featcell.in .featcell-vis .ms-strip i:nth-child(4) { animation-delay: calc(var(--g, 0s) + 0.45s); }
.featcell.in .featcell-vis .ms-strip i:nth-child(5) { animation-delay: calc(var(--g, 0s) + 0.60s); }
.featcell.in .featcell-vis .ms-strip i:nth-child(6) { animation-delay: calc(var(--g, 0s) + 0.75s); }
.featcell.in .featcell-vis .ms-strip i:nth-child(7) { animation-delay: calc(var(--g, 0s) + 0.90s); }
@keyframes sv-hucre-nefes {
  0%, 100% { opacity: 1; }
  45%      { opacity: 0.45; }
}

@media (prefers-reduced-motion: reduce) {
  .featcell.in .featcell-vis .ms-row,
  .featcell.in .featcell-vis .ms-bars i,
  .featcell.in .featcell-vis .ms-strip i,
  .featcell.in .featcell-vis .mod-shot-bar i:first-child { animation: none; }
  .featcell.in .featcell-vis .mod-shot-bar::after { display: none; }
}

/* ---------- 37. SOSYAL MEDYA ---------- */
.footer-social { display: flex; align-items: center; gap: 8px; }
/* Footer koyu zeminde: beyaz tonlarla calisir */
.social-link {
  display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: 9px;
  color: rgba(255, 255, 255, 0.68);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  transition: color 0.22s var(--ease), background 0.22s var(--ease),
              border-color 0.22s var(--ease), transform 0.22s var(--ease);
}
.footer .social-link:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.26);
  transform: translateY(-1px);
}


/* ---------- 38. MODUL DETAY SAYFASI ---------- */
/* Acilista vurgulu koyu bir hero: modul rozeti, numarasi, kategorisi ve
   kunye seridi ile modul ilk bakista taniniyor. */
.mhero {
  position: relative; overflow: hidden;
  background: linear-gradient(168deg, var(--hero-green) 0%, var(--hero-green-deep) 100%);
  color: #fff;
  padding-block: clamp(122px, 13vw, 168px) clamp(34px, 4vw, 52px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.mhero > .wrap { position: relative; z-index: 2; }
.mhero-glow {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(58% 62% at 82% 8%, rgba(95, 214, 168, 0.16), transparent 62%),
    radial-gradient(46% 52% at 8% 92%, rgba(95, 214, 168, 0.09), transparent 66%);
}
.mhero-grid {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 34px 34px;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 78%);
          mask-image: linear-gradient(180deg, #000, transparent 78%);
}
.mhero h1 {
  color: #fff;
  font-size: clamp(2.05rem, 4.3vw, 3.25rem);
  letter-spacing: -0.038em; line-height: 1.08; max-width: 17ch;
}
.mhero .lead { color: rgba(255, 255, 255, 0.76); max-width: 52ch; }
.mhero .crumb { color: rgba(255, 255, 255, 0.5); }
.mhero .crumb a { color: rgba(255, 255, 255, 0.72); }
.mhero .crumb a:hover { color: #fff; }
.mhero .btn-ghost { --btn-fg: rgba(255,255,255,0.86); border-color: rgba(255,255,255,0.22); }
.mhero .btn-ghost:hover { --btn-bg: rgba(255,255,255,0.1); --btn-fg: #fff; }

/* Sahne paneli beyaz zeminlidir; hero'dan gelen beyaz metin rengini
   devralirsa icerik gorunmez olur. Burada normal metin rengine donulur. */
.mhero .scene, .mhero .scene * { color: var(--fg); }
.mhero .scene [class*="-muted"] { color: var(--fg-muted); }

.mhero-top { display: flex; align-items: center; gap: 14px; }
.mhero-badge {
  display: grid; place-items: center;
  width: 54px; height: 54px; border-radius: 15px;
  background: rgba(95, 214, 168, 0.16);
  border: 1px solid rgba(95, 214, 168, 0.32);
  color: var(--accent-2);
}
.mhero-kicker { display: flex; align-items: baseline; gap: 7px; }
.mhero-kicker b {
  font-size: 1.45rem; font-weight: 560; color: #fff;
  font-variant-numeric: tabular-nums; letter-spacing: -0.03em;
}
.mhero-kicker i { font-style: normal; font-size: 13px; color: rgba(255,255,255,0.42); }
.mhero-kicker em {
  font-style: normal; margin-left: 6px;
  font-size: 11px; font-weight: 620; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent-2);
  padding: 4px 10px; border-radius: 999px;
  background: rgba(95, 214, 168, 0.13);
}

.mhero-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.mhero-tags .tag {
  color: rgba(255, 255, 255, 0.82);
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.14);
}

.mhero-meta {
  margin-top: clamp(30px, 4vw, 48px);
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.04);
  overflow: hidden;
}
.mhero-meta > div {
  display: grid; gap: 5px;
  padding: 16px 20px;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}
.mhero-meta > div:last-child { border-right: 0; }
.mhero-meta span {
  font-size: 11px; font-weight: 620; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.46);
}
.mhero-meta b { font-size: 15px; font-weight: 560; color: #fff; letter-spacing: -0.018em; }

/* Islev izgarasi */
.fgrid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--card); overflow: hidden;
}
.fcell {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 11px;
  align-items: start;
  padding: 16px 18px;
  font-size: 14px; line-height: 1.5; color: var(--fg);
  border-right: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
  transition: background 0.22s var(--ease);
}
.fcell:nth-child(3n) { border-right: 0; }
.fcell:hover { background: var(--bg); }
.fcell .tick { color: var(--accent-deep); margin-top: 2px; }

/* Ilgili moduller */
.relgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.relcard {
  display: grid; grid-template-columns: 42px minmax(0, 1fr) 20px;
  align-items: center; gap: 14px;
  padding: 16px 18px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r);
  transition: border-color 0.22s var(--ease), transform 0.22s var(--ease), box-shadow 0.22s var(--ease);
}
.relcard:hover { border-color: var(--accent-line); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.relcard-ico {
  display: grid; place-items: center;
  width: 42px; height: 42px; border-radius: 11px;
  background: var(--accent-soft); color: var(--accent-deep);
}
.relcard-copy { display: grid; gap: 2px; min-width: 0; }
.relcard-copy b { font-size: 14.6px; font-weight: 560; color: var(--fg); letter-spacing: -0.02em; }
.relcard-copy em { font-style: normal; font-size: 12.8px; color: var(--fg-muted); line-height: 1.45; }
.relcard-go { justify-self: end; color: var(--fg-faint); transition: transform 0.22s var(--ease), color 0.22s; }
.relcard:hover .relcard-go { color: var(--accent-deep); transform: translateX(3px); }

@media (max-width: 900px) {
  .mhero-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mhero-meta > div:nth-child(2n) { border-right: 0; }
  .mhero-meta > div:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,0.1); }
  .fgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fcell:nth-child(3n) { border-right: 1px solid var(--border-soft); }
  .fcell:nth-child(2n) { border-right: 0; }
  .relgrid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .mhero-meta { grid-template-columns: minmax(0, 1fr); }
  .mhero-meta > div { border-right: 0; border-bottom: 1px solid rgba(255,255,255,0.1); }
  .mhero-meta > div:last-child { border-bottom: 0; }
  .fgrid { grid-template-columns: minmax(0, 1fr); }
  .fcell, .fcell:nth-child(3n), .fcell:nth-child(2n) { border-right: 0; }
}


/* ---------- 39. CEREZ ONAY BANDI ---------- */
.cerez-bandi {
  position: fixed; z-index: 400;
  left: var(--gutter); right: var(--gutter); bottom: var(--gutter);
  max-width: 720px; margin-inline: auto;
  background: var(--dk);
  color: var(--dk-fg);
  border: 1px solid var(--dk-border);
  border-radius: var(--r-lg);
  box-shadow: 0 22px 50px -18px rgba(0, 0, 0, 0.55);
  animation: cerez-gir 0.45s var(--ease) both;
}
@keyframes cerez-gir {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.cerez-ic {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px;
  padding: 16px 18px;
}
.cerez-ic p {
  flex: 1 1 300px; margin: 0;
  font-size: 13.4px; line-height: 1.55; color: var(--dk-muted);
}
.cerez-ic p strong { color: var(--dk-fg); font-weight: 560; }
.cerez-ic a { color: var(--dk-fg); text-decoration: underline; text-underline-offset: 2px; }
.cerez-btn { display: flex; gap: 8px; flex: none; }
.cerez-bandi .btn-ghost {
  --btn-fg: var(--dk-muted);
  border-color: rgba(255, 255, 255, 0.18);
}
.cerez-bandi .btn-ghost:hover { --btn-fg: var(--dk-fg); --btn-bg: rgba(255, 255, 255, 0.08); }

@media (max-width: 560px) {
  .cerez-ic { padding: 14px; }
  .cerez-btn { width: 100%; }
  .cerez-btn .btn { flex: 1; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .cerez-bandi { animation: none; } }