/* Luma Label — Simpra görsel sistemi katmanı
   base/hero/features/closing üzerine EN SON yüklenir; header'ı Simpra
   düzenine getirir, hero'yu yeniler, ikon rozetlerini renklendirir ve yeni
   bölümleri (çok farklı kartlar · mobil · SSS · aylık bülten · mega footer)
   tanımlar. Yalnız base.css token'ları kullanılır. */

/* ============ HEADER — premium koyu navigasyon (Simpra+) ============ */
.site-header {
  background: color-mix(in srgb, var(--bg-0) 86%, transparent);
  -webkit-backdrop-filter: blur(10px) saturate(130%);
  backdrop-filter: blur(10px) saturate(130%);
  border-bottom: 1px solid var(--line);
  transition:
    height 0.4s var(--ease-out),
    background 0.4s var(--ease-out),
    border-color 0.4s var(--ease-out),
    box-shadow 0.4s var(--ease-out);
}
/* üst kenar ışığı — ince amber marka hattı */
.site-header::before {
  content: '';
  position: absolute; inset: 0 0 auto 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg,
    transparent,
    color-mix(in srgb, var(--amber) 60%, transparent) 25%,
    color-mix(in srgb, var(--amber) 78%, transparent) 50%,
    color-mix(in srgb, var(--amber) 60%, transparent) 75%,
    transparent);
  opacity: 0.5;
}
/* scroll'da: yoğun cam + derinlik gölgesi + hafif kısalma */
.site-header.scrolled {
  height: 64px;
  background: color-mix(in srgb, var(--bg-0) 70%, transparent);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  backdrop-filter: blur(22px) saturate(150%);
  border-bottom-color: var(--line);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 20px 46px -28px rgba(0, 0, 0, 0.95);
}
.nav-inner { transition: height 0.4s var(--ease-out); }
.site-header.scrolled .nav-inner { height: 64px; }

/* ---- logo ----
   Çip ve hale artık base.css'teki ortak marka kuralında (.lm / .nav-logo-mark).
   Buradaki amber gradyan blok kaldırıldı: iki tonlu yeni işarette amber parıltı
   amber zeminde kayboluyordu, ayrıca marka beş bağlamda beş farklı duruyordu. */
.nav-logo-text { letter-spacing: 0.004em; }

/* ---- nav öğeleri: ortak "segment" pill (link + tetikleyici birlikte) ---- */
.nav-links { gap: 0.12rem; }
.nav-links > a,
.nav-trigger {
  display: inline-flex; align-items: center; gap: 0.24rem;
  padding: 0.5rem 0.72rem; border-radius: 10px;
  font-family: var(--font-body); font-weight: 600; font-size: 0.9rem;
  color: var(--ink-dim); line-height: 1;
  text-transform: uppercase; letter-spacing: 0.03em;
  background: transparent; border: 0; cursor: pointer;
  transition: color 0.22s var(--ease-out), background 0.22s var(--ease-out);
}
.nav-links > a:hover,
.nav-trigger:hover,
.nav-item.is-open > .nav-trigger {
  color: #fff; background: rgba(255, 255, 255, 0.06);
}
/* hero'nun sol-çıpalı alt çizgisi kapalı — pill hover kullanılıyor */
.nav-links > a::after { content: none; }
.nav-trigger .caret { font-size: 0.7em; opacity: 0.7; margin-left: 0.05rem; }

/* ---- sağ küme: birincil CTA + ayraç + dil çipi ---- */
.nav-actions { gap: 0.55rem; }

/* "Ücretsiz Dene →" — birincil amber pill (net, tek çağrı) */
.nav-actions .btn-outline {
  border: 0;
  background: linear-gradient(160deg, var(--amber-hi), var(--amber));
  color: #1a1206; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
  padding: 0.58rem 1.3rem;
  box-shadow: 0 8px 20px -12px color-mix(in srgb, var(--amber) 85%, transparent);
}
.nav-actions .btn-outline:hover {
  background: linear-gradient(160deg, var(--amber-hi), var(--amber-hi));
  color: #1a1206; transform: translateY(-2px);
  box-shadow: 0 14px 30px -12px color-mix(in srgb, var(--amber) 100%, transparent);
}
.nav-actions .btn-outline .arr { color: #1a1206; }

/* dikey ayraç — CTA ile dil çipi arasında yapı verir */
.nav-lang-wrap { padding-left: 0.7rem; margin-left: 0.2rem; }
.nav-lang-wrap::before {
  content: ''; position: absolute; left: 0; top: 50%;
  transform: translateY(-50%); width: 1px; height: 20px;
  background: var(--line);
}

/* "🇹🇷 Türkçe ▾" çipinin görünümü base.css'te (19 sayfa kullanıyor);
   burada yalnızca nav bağlamına özgü konumlandırma kalır. */

/* ============ HERO (Simpra: eyebrow + magenta etiket, ince/kalın başlık) ============ */
.hero {
  background:
    radial-gradient(1100px 520px at 82% 4%, color-mix(in srgb, var(--glow) 26%, transparent), transparent 68%),
    linear-gradient(180deg, var(--bg-1), var(--bg-0) 76%);
}

/* eyebrow satırı: metin + magenta pill (Simpra "Dijital Devrim") */
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 0.7rem; flex-wrap: wrap;
  margin: 0 0 var(--sp-3);
  font-family: var(--font-display); font-weight: 500;
  font-size: 0.98rem; letter-spacing: 0.01em; color: var(--ink-dim);
}
.hero-tag-pill {
  display: inline-block;
  padding: 0.34rem 0.95rem;
  background: linear-gradient(180deg, var(--amber-hi), var(--amber));
  color: #241c00;
  font-size: 0.82rem; font-weight: 600; letter-spacing: 0.01em;
  transform: skewX(-9deg);
  box-shadow: 0 10px 26px -12px color-mix(in srgb, var(--amber) 70%, transparent);
}
.hero-tag-pill > span { display: inline-block; transform: skewX(9deg); }

/* ince (üst) + kalın (alt) başlık — Simpra tipografisi */
.hero-title { font-weight: 700; line-height: 1.05; }
.hero-title .ht-thin { display: block; font-weight: 400; color: rgba(245, 245, 247, 0.92); }
.hero-title .ht-bold { display: block; font-weight: 700; color: #fff; }

/* ============ İSTATİSTİK (açık zemin, magenta sayı) ============ */
.stats { border-top: 0; }
.stat-val { color: var(--magenta); }

/* ============ ÖZELLİKLER ============
   Bu bölümün tüm kuralları features.css'e taşındı (modül ızgarası: .fcell /
   .fcard-*). Buradaki eski `.feat-card` + daire rozet (`.feat-ico`) kuralları
   karşılıksız kaldığı için kaldırıldı — referansta ikonun altında rozet yok,
   ham renkli SVG doğrudan kartın üstünde durur. */

/* ============ "ÇOK FARKLI" 3'LÜ KARTLAR (Simpra) ============ */
.cards3 { padding: var(--sp-6) 0; }
.cards3-head { text-align: center; max-width: 40rem; margin: 0 auto var(--sp-5); }
.cards3-head .sec-title { font-size: clamp(2rem, 4.6vw, 3.1rem); }

.cards3-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
.c3-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: 22px;
  background: #fff; overflow: hidden;
  box-shadow: 0 20px 46px -30px rgba(18, 18, 26, 0.3);
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s;
}
.c3-card:hover { transform: translateY(-6px); box-shadow: 0 28px 60px -28px rgba(18, 18, 26, 0.36); }

/* fotoğraf yerine CSS görsel paneli */
.c3-visual {
  position: relative; height: 210px; overflow: hidden;
  display: grid; place-items: center;
}
.c3-visual--1 { background: linear-gradient(135deg, #ffd100, #ff9e1b); }
.c3-visual--2 { background: linear-gradient(135deg, #7b3ff2, #059669); }
.c3-visual--3 { background: linear-gradient(135deg, #101014, #2a2a34); }
/* nokta ızgarası dokusu */
.c3-visual::before {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.22) 1.4px, transparent 1.4px);
  background-size: 16px 16px; opacity: 0.5;
}
/* merkezî motif: mini e-etiket kartı */
.c3-chip {
  position: relative; z-index: 1;
  width: 62%; background: #fff; color: #14141a;
  border-radius: 12px; padding: 0.85rem 1rem;
  box-shadow: 0 20px 40px -18px rgba(0, 0, 0, 0.4);
  transform: rotate(-3deg);
}
.c3-chip-name { font-family: var(--font-display); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; color: #55555f; }
.c3-chip-price { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; line-height: 1.1; margin-top: 0.15rem; }
.c3-chip-bars { display: flex; gap: 2.5px; height: 18px; margin-top: 0.5rem; }
.c3-chip-bars i { flex: 1; background: #14141a; border-radius: 1px; }
.c3-chip-bars i:nth-child(3n) { flex: 0.5; }
.c3-chip-bars i:nth-child(4n) { flex: 1.6; opacity: 0.7; }

.c3-body { padding: var(--sp-3) var(--sp-3) var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); }
.c3-title { font-family: var(--font-display); font-weight: 600; font-size: 1.28rem; letter-spacing: -0.01em; margin: 0; }
.c3-desc { color: var(--ink-dim); font-size: 0.96rem; margin: 0; }

/* ============ MOBİL (Simpra: siyah "Mobil" sekme + açık kart) ============ */
.mobil { padding: var(--sp-6) 0; }
.mobil-tab {
  display: inline-block; margin: 0 auto var(--sp-3);
  background: #0a0a0c; color: #fff;
  font-family: var(--font-display); font-weight: 600; font-size: 0.92rem;
  padding: 0.55rem 1.6rem; border-radius: 12px;
}
.mobil-head { text-align: center; margin-bottom: var(--sp-4); }
.mobil-card {
  max-width: 760px; margin: 0 auto;
  border: 1px solid var(--line); border-radius: 26px; background: #fff;
  box-shadow: 0 26px 60px -34px rgba(18, 18, 26, 0.32);
  display: grid; grid-template-columns: 1fr 1px 1fr;
  padding: var(--sp-4) var(--sp-4);
}
.mobil-sep { background: var(--line); }
.mobil-col { padding: var(--sp-2) var(--sp-3); display: flex; flex-direction: column; align-items: flex-start; }
.mobil-os {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; color: var(--ink);
  margin: 0 0 0.4rem;
}
.mobil-os .arr { color: var(--magenta); }
.mobil-note { color: var(--ink-dim); font-size: 0.92rem; margin: 0 0 var(--sp-3); min-height: 2.8em; }
.mobil-badge {
  display: inline-flex; align-items: center; gap: 0.6rem;
  background: #0a0a0c; color: #fff; border-radius: 12px;
  padding: 0.6rem 1.05rem; position: relative; margin-top: auto;
  transition: transform 0.25s var(--ease-out);
}
.mobil-badge:hover { transform: translateY(-2px); }
.mobil-badge svg { width: 24px; height: 24px; flex: none; }
.mobil-badge b { display: block; font-family: var(--font-display); font-size: 0.92rem; font-weight: 600; line-height: 1.1; }
.mobil-badge small { display: block; font-size: 0.62rem; letter-spacing: 0.06em; opacity: 0.75; text-transform: uppercase; }
.mobil-soon {
  position: absolute; top: -10px; right: -8px;
  background: var(--amber); color: #0a0a0c;
  font-family: var(--font-display); font-size: 0.58rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.18rem 0.5rem; border-radius: 999px;
}

/* ======================= SSS (FAQ) — .m-acc'ı yeniden kullanır ============ */
.faq { padding: var(--sp-6) 0; }
.faq-head { text-align: center; margin-bottom: var(--sp-4); }
.faq-head .sec-lead { margin-inline: auto; }
.faq-list { display: flex; flex-direction: column; gap: var(--sp-2); max-width: 46rem; margin-inline: auto; }
.faq-list .m-acc-panel p { margin: 0; padding: 0 1.1rem 1rem; color: var(--ink-dim); font-size: 0.98rem; line-height: 1.6; }

/* ============ MEGA FOOTER (Simpra: sütunlar) ============ */
.ft-grid { grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); }
/* Zemin/renk base.css'teki ortak marka kuralından gelir; burada yalnız ölçü.
   Çip 34, işaret 24: footer kilitlemesi header'dan bir tık küçük kalsın diye
   (header 38/26) — ama eski 30/21'den belirgin şekilde büyük. */
/* ÖLÇÜ BURADA VERİLMEZ: çip geometrisi base.css'teki ortak marka kuralında
   (.nav-logo-mark, .co-logo-mark, .lg-logo-mark, .ft-brand .ft-logo-mark) —
   38px çip + 6px iç boşluk = 26px işaret. Buradaki eski 34px/24px override'ı
   footer logosunu header'dakinden küçük gösteriyordu; kaldırıldı. Burada
   yalnız footer'a özgü hizalama kalır. */
.ft-brand .ft-logo-mark {
  display: inline-flex; align-items: center; justify-content: center;
  margin-right: 0.62rem; vertical-align: middle;
}
.ft-brand .ft-logo-mark svg { width: 100%; height: 100%; }

/* ============ RESPONSIVE ============ */
@media (max-width: 1020px) {
  .cards3-grid { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
  .c3-visual { height: 200px; }
}
@media (max-width: 860px) {
  .cards3, .mobil { padding: var(--sp-5) 0; }
  .mobil-card { grid-template-columns: 1fr; gap: var(--sp-2); }
  .mobil-sep { display: none; }
  .ft-grid { grid-template-columns: 1fr 1fr; }
  .ft-brand { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .ft-grid { grid-template-columns: 1fr; }
}

/* ============ HEADER MEGA-MENÜ (Simpra tarzı açılır menüler) ============ */
/* nav öğesi — sabit konum (geniş panel header'a göre hizalanır) */
.nav-links .nav-item { position: static; display: inline-flex; align-items: center; }
.nav-links .nav-item--login { position: relative; }

/* tetikleyici taban + hover artık header bloğunda (nav-links > a ile ortak pill).
   Burada yalnız caret animasyonu ve klavye odağı kalır. */
.nav-trigger .caret { transition: transform 0.25s var(--ease-out); }
.nav-item.is-open > .nav-trigger .caret { transform: rotate(180deg); opacity: 1; }
.nav-trigger:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 10px; }

/* açılır panel temeli */
.mega {
  position: absolute; z-index: 130;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(10px);
  transition: opacity 0.28s var(--ease-out), transform 0.28s var(--ease-out), visibility 0.28s;
}
.nav-item.is-open > .mega { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }

/* geniş panel (Çözümler · Keşfet) — ortalanmış yuvarlak kart */
.mega--wide {
  top: calc(100% - 6px);
  left: 50%; transform: translateX(-50%) translateY(10px);
  width: min(var(--container), calc(100vw - 2.5rem));
}
.nav-item.is-open > .mega--wide { transform: translateX(-50%); }

.mega-card {
  background: linear-gradient(180deg, var(--bg-1), var(--bg-0));
  border: 1px solid var(--line); border-radius: 22px;
  box-shadow: 0 34px 80px -30px rgba(0, 0, 0, 0.85);
  overflow: hidden;
}
.mega-inner { display: grid; grid-template-columns: 0.92fr 1fr 1fr 1fr; gap: var(--sp-3); padding: var(--sp-4); }

/* öne çıkan sol panel */
.mega-feat {
  display: flex; flex-direction: column;
  border-radius: 16px; padding: var(--sp-3);
  background: linear-gradient(160deg, #17171d, #0b0b0f);
  border: 1px solid var(--line);
}
.mega-feat-art {
  border-radius: 14px; min-height: 148px; margin-bottom: var(--sp-2);
  display: grid; place-items: center; padding: var(--sp-3);
  background: radial-gradient(120% 120% at 25% 15%, rgba(255, 209, 0, 0.16), transparent 60%), linear-gradient(150deg, #1b1b21, #0b0b0f);
  border: 1px solid var(--line);
}
.mega-feat-tag {
  width: 90%; background: #fff; color: #14141a; border-radius: 12px;
  padding: 0.7rem 0.7rem; transform: rotate(-3deg);
  box-shadow: 0 20px 38px -16px rgba(0, 0, 0, 0.55);
  text-align: center;
}
.mega-feat-code { display: block; font-family: var(--font-display); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.06em; color: #55555f; }
.mega-feat-name { display: block; font-family: var(--font-display); font-weight: 600; font-size: 0.82rem; line-height: 1.2; color: #14141a; margin-top: 0.2rem; }
.mega-feat-price { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; line-height: 1.1; margin-top: 0.15rem; letter-spacing: -0.01em; white-space: nowrap; }
.mega-feat-bar { display: flex; gap: 2px; height: 14px; margin-top: 0.55rem; }
.mega-feat-bar i { flex: 1; background: #14141a; border-radius: 1px; }
.mega-feat-bar i:nth-child(3n) { flex: 0.5; }
.mega-feat-bar i:nth-child(4n) { flex: 1.6; opacity: 0.7; }
.mega-feat-title { font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; line-height: 1.34; margin: auto 0 var(--sp-2); color: #fff; }
.mega-feat-title em { font-style: normal; color: var(--amber); }

/* sütunlar */
.mega-col { display: flex; flex-direction: column; gap: 0.12rem; }
.mega-col-h { font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; color: #fff; margin: 0 0 var(--sp-2); }

.mega-link {
  display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 0.7rem;
  padding: 0.5rem 0.6rem; border-radius: 12px;
  transition: background 0.2s var(--ease-out);
}
.mega-link:hover, .mega-link.is-active { background: rgba(255, 255, 255, 0.055); }
.mega-link.is-active { box-shadow: inset 0 0 0 1px var(--line); }
.mega-ico {
  width: 34px; height: 34px; border-radius: 9px;
  display: grid; place-items: center; color: #fff; flex: none;
  box-shadow: 0 8px 18px -10px currentColor;
}
.mega-ico svg { width: 19px; height: 19px; }
.mega-tt { display: block; font-weight: 700; font-size: 0.9rem; color: #fff; line-height: 1.25; }
.mega-tx { display: block; font-size: 0.78rem; color: var(--ink-faint); line-height: 1.3; margin-top: 1px; }
.mega-link:hover .mega-tt { color: var(--amber); } .mi-blue { background: #2f6bff; }
.mi-amber { background: var(--amber); color: #0a0a0c; }

/* alt şerit (İşletmenize özel · Şunlara da göz at) */
.mega-foot {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.35rem 0.7rem;
  padding: 0.95rem var(--sp-4);
  border-top: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.25);
}
.mega-foot-label { font-family: var(--font-display); font-weight: 600; font-size: 0.82rem; color: #fff; margin-right: 0.3rem; }
.mega-foot a { font-size: 0.85rem; color: var(--ink-dim); transition: color 0.2s; }
.mega-foot a:hover { color: var(--amber); }
.mega-foot .sep { color: var(--ink-faint); }

/* ============ ÇÖZÜMLER + KEŞFET MEGA — beyaz Simpra teması + renkli emoji ikonlar ============ */
/* Ortak beyaz sütun/ikon/alt-şerit teması (görseldeki gibi). */
#mega-cozumler .mega-card,
#mega-kesfet .mega-card {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.06);
  box-shadow: 0 40px 90px -34px rgba(0, 0, 0, 0.5);
}
#mega-cozumler .mega-col-h,
#mega-kesfet .mega-col-h { color: #14141a; }
#mega-cozumler .mega-tt,
#mega-kesfet .mega-tt { color: #14141a; }
#mega-cozumler .mega-tx,
#mega-kesfet .mega-tx { color: #6c6c78; }
#mega-cozumler .mega-link:hover,
#mega-cozumler .mega-link.is-active,
#mega-kesfet .mega-link:hover,
#mega-kesfet .mega-link.is-active { background: rgba(0, 0, 0, 0.045); }
#mega-cozumler .mega-link.is-active,
#mega-kesfet .mega-link.is-active { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08); }
#mega-cozumler .mega-link:hover .mega-tt,
#mega-kesfet .mega-link:hover .mega-tt { color: #14141a; }

/* renkli emoji-ikon: rozet yok — ikonun kendi renkleri (görseldeki stil) */
#mega-cozumler .mega-ico,
#mega-kesfet .mega-ico {
  width: 32px; height: 32px; border-radius: 0;
  background: none; box-shadow: none; place-items: center;
}
#mega-cozumler .mega-ico svg,
#mega-kesfet .mega-ico svg { width: 32px; height: 32px; }

/* alt şerit — açık zemin */
#mega-cozumler .mega-foot,
#mega-kesfet .mega-foot {
  background: #f6f6f3;
  border-top-color: rgba(0, 0, 0, 0.06);
}
#mega-cozumler .mega-foot-label,
#mega-kesfet .mega-foot-label { color: #14141a; }
#mega-cozumler .mega-foot a,
#mega-kesfet .mega-foot a { color: #5a5a64; }
#mega-cozumler .mega-foot a:hover,
#mega-kesfet .mega-foot a:hover { color: #14141a; }
#mega-cozumler .mega-foot .sep,
#mega-kesfet .mega-foot .sep { color: #cfcfd6; }

/* --- KEŞFET sol tanıtım paneli: profesyonel değer önerisi (buton yok) --- */
#mega-kesfet .mega-feat {
  background: linear-gradient(150deg, #ffdf3d, #f2a900 80%);
  border-color: rgba(0, 0, 0, 0.10);
  justify-content: flex-start;
}
#mega-kesfet .kfeat-art {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.35rem;
  border-radius: 14px; min-height: 128px; margin-bottom: var(--sp-3); padding: var(--sp-3);
  background: rgba(255, 255, 255, 0.34); border: 1px solid rgba(0, 0, 0, 0.08);
}
/* Mega menü kartı AÇIK zeminli: ortak cam çip burada görünmez, o yüzden koyu
   karo korunuyor. Glif rengi amber'den beyaza çekildi — işaret artık iki tonlu
   ve amber parıltı amber gövdenin içinde kayboluyordu. */
#mega-kesfet .kfeat-mark {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px;
  background: #101318; color: #f5f5f7;
  box-shadow: 0 8px 18px -8px rgba(0, 0, 0, 0.5);
}
#mega-kesfet .kfeat-mark svg { width: 31px; height: 31px; }
#mega-kesfet .kfeat-word { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: #14141a; }
#mega-kesfet .kfeat-word em { font-style: normal; color: #0e9257; }
#mega-kesfet .kfeat-tagline { font-family: var(--font-display); font-size: 0.6rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: #8a5a00; }
#mega-kesfet .kfeat-eyebrow { font-family: var(--font-display); font-weight: 600; font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: #8a5a00; margin-bottom: 0.4rem; }
#mega-kesfet .kfeat-title { font-family: var(--font-display); font-weight: 600; font-size: 1.16rem; line-height: 1.22; color: #14141a; margin-bottom: var(--sp-2); }
#mega-kesfet .kfeat-title em { font-style: normal; color: #0e9257; }
#mega-kesfet .kfeat-list { list-style: none; display: flex; flex-direction: column; gap: 0.55rem; margin-top: auto; }
#mega-kesfet .kfeat-list li { position: relative; padding-left: 1.6rem; font-size: 0.85rem; font-weight: 600; color: #2a2205; line-height: 1.3; }
#mega-kesfet .kfeat-list li::before { content: ''; position: absolute; left: 0; top: 0.1rem; width: 17px; height: 17px; border-radius: 50%; background: #101318; }
#mega-kesfet .kfeat-list li::after { content: ''; position: absolute; left: 5px; top: 0.42rem; width: 6px; height: 3px; border-left: 2px solid #ffd400; border-bottom: 2px solid #ffd400; transform: rotate(-45deg); }

/* mini panel (Giriş Yap) — tetikleyicinin altına yaslı küçük kart */
.mega--mini { top: calc(100% + 12px); right: 0; min-width: 268px; }
.mega--mini .mega-card { padding: 0.5rem; border-radius: 16px; }
.mega-list { display: flex; flex-direction: column; gap: 0.1rem; }
.mega-soon {
  display: inline-block; margin-left: 0.4rem; vertical-align: middle;
  background: var(--amber); color: #0a0a0c;
  font-family: var(--font-display); font-size: 0.54rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0.12rem 0.42rem; border-radius: 999px;
}
.mega-link.is-soon { cursor: default; }

/* ============ MOBİL: dropdown'lar akordeon olarak ============ */
@media (max-width: 992px) {
  .nav-links, .nav-actions { display: none; }
  .nav-burger { display: flex; }
}
/* mobil menü panelini üstten hizala + kaydırılabilir yap */
.nav-mobile { justify-content: flex-start; overflow-y: auto; gap: var(--sp-3); padding-top: calc(var(--header-h) + var(--sp-2)); }
.nav-mobile-groups { display: flex; flex-direction: column; gap: var(--sp-1); width: min(360px, 100%); }
.m-acc { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: rgba(255, 255, 255, 0.02); }
.m-acc-head {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  background: transparent; border: 0; cursor: pointer; text-align: left;
  font-family: var(--font-display); font-weight: 500; font-size: 1.05rem; color: var(--ink);
  padding: 0.9rem 1.1rem;
}
.m-acc-head:focus-visible { outline: 2px solid var(--amber); outline-offset: -2px; border-radius: 14px; }
.m-acc-ic { position: relative; width: 20px; height: 20px; flex: none; border-radius: 50%; background: var(--amber); }
.m-acc-ic::before, .m-acc-ic::after {
  content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  background: #0a0a0c; border-radius: 2px;
}
.m-acc-ic::before { width: 10px; height: 2px; }
.m-acc-ic::after { width: 2px; height: 10px; transition: transform 0.3s var(--ease-out); }
.m-acc.open .m-acc-ic::after { transform: translate(-50%, -50%) scaleY(0); }
.m-acc-panel { max-height: 0; overflow: hidden; transition: max-height 0.35s var(--ease-out); }
.m-acc-panel a {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.62rem 1.1rem; color: var(--ink-dim); font-size: 0.98rem;
  border-top: 1px solid var(--line);
}
.m-acc-panel a:hover { color: var(--amber-hi); }

/* ============ RESPONSIVE: mega paneli dar ekranlarda sadeleştir ============ */
@media (max-width: 1180px) {
  .mega-inner { grid-template-columns: 0.9fr 1fr 1fr 1fr; }
}

/* hareket azaltma */
@media (prefers-reduced-motion: reduce) {
  .sss-a, .sss-icon, .sss-icon::after, .c3-card, .mobil-badge { transition: none; }
  .mega, .nav-trigger, .nav-trigger .caret, .m-acc-panel, .m-acc-ic::after{ transition: none; }
}

/* ============ GİRİŞ YAP açılır kutusu — beyaz (Simpra "Giriş Yap" referansı) ============
   Yalnız .mega--mini (Giriş Yap) beyazlar; Çözümler/Keşfet koyu kalır. */
.mega--mini .mega-card {
  background: #ffffff;
  border: 2px solid #F3F3F4;
  box-shadow: 0 22px 54px -20px rgba(16, 20, 24, 0.28);
}
.mega--mini .mega-link { color: #1a1a1a; }
.mega--mini .mega-tt { color: #14181c; }
.mega--mini .mega-tx { color: #6b7280; }
.mega--mini .mega-link:hover,
.mega--mini .mega-link:focus-visible { background: #F6F7F8; }
/* hover/focus'ta başlık sarıya (amber) dönmesin — koyu kalsın */
.mega--mini .mega-link:hover .mega-tt,
.mega--mini .mega-link:focus-visible .mega-tt,
.mega--mini .mega-link.is-active .mega-tt { color: #14181c; }
.mega--mini .mega-link.is-active { background: #EEF9F3; }
.mega--mini .mega-link.is-soon { color: #6b7280; }
.mega--mini .mega-soon {
  background: #EEF9F3; color: #059669; border: 1px solid #cdeadd;
}

/* Dil seçici bileşeninin tamamı base.css'e taşındı (19 sayfa kullanıyor). */

/* ============ POS / CİHAZ VİTRİNİ (hero altı bölünmüş bölüm — Task 6) ============
   Sol: eyebrow + iki-üç satır başlık + alt metin + belirgin CTA.
   Sağ: saf CSS POS terminali (ekran + stand) + yumuşak ışıma küresi. */
.pos {
  position: relative; overflow: hidden;
  padding: var(--sp-6) 0;
  /* Divider kaldırıldı: hero ile pos aynı --bg-0'da buluşur; kenarlık yerine üstten
     şeffaf başlayan gradient ile iki bölüm tek sürekli yüzey gibi akar. */
  background: linear-gradient(180deg, transparent, var(--bg-1) 55%, var(--bg-0));
  border-top: 0;
}
.pos-orb {
  width: 620px; height: 620px; right: -110px; top: 50%;
  transform: translateY(-50%);
  background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--magenta) 60%, transparent), transparent 66%);
  opacity: 0.5;
}
.pos-grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.05fr 1fr; gap: var(--sp-5);
  align-items: center;
}

/* --- sol kopya --- */
.pos-eyebrow {
  display: inline-flex; align-items: center; gap: 0.7rem; flex-wrap: wrap;
  margin: 0 0 var(--sp-3);
  font-family: var(--font-display); font-weight: 500; font-size: 0.98rem;
  letter-spacing: 0.01em; color: var(--ink-dim);
}
.pos-tag-pill {
  display: inline-block; padding: 0.34rem 0.95rem;
  background: var(--amber); color: #0a0a0c;
  font-size: 0.82rem; font-weight: 600; letter-spacing: 0.01em;
  transform: skewX(-9deg);
  box-shadow: 0 10px 26px -12px color-mix(in srgb, var(--amber) 70%, transparent);
}
.pos-tag-pill > span { display: inline-block; transform: skewX(9deg); }

.pos-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.1rem, 5vw, 3.5rem); line-height: 1.06;
  letter-spacing: -0.015em; margin: 0 0 var(--sp-3);
}
.pos-title span { display: block; }
.pos-title .pt-1 { color: rgba(245, 245, 247, 0.95); }
.pos-title .pt-2 { color: var(--magenta-hi); }
.pos-title .pt-3 { color: #fff; }

.pos-lead { color: var(--ink-dim); max-width: 30rem; margin: 0 0 var(--sp-4); }

/* --- sağ: cihaz maketi --- */
.pos-visual {
  position: relative; perspective: 1200px;
  display: flex; flex-direction: column; align-items: center;
}
.pos-frame { transform: rotateY(-14deg) rotateX(3deg); transform-style: preserve-3d; }
.pos-device {
  width: min(420px, 90vw);
  border-radius: 22px; padding: 10px;
  background: linear-gradient(150deg, #24242c, #101014);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 44px 96px -34px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.pos-screen {
  border-radius: 14px; overflow: hidden;
  background: linear-gradient(180deg, #15151b, #0c0c10);
  border: 1px solid rgba(255, 255, 255, 0.06);
  padding: 0.9rem;
}
.pos-screen-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.8rem; }
.pos-brand { display: inline-flex; align-items: center; gap: 0.42rem; font-family: var(--font-display); font-weight: 600; font-size: 0.82rem; color: #fff; }
.pos-brand-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 10px var(--amber); }
.pos-clock { font-family: var(--font-display); font-size: 0.72rem; color: var(--ink-faint); }

.pos-tabs { display: flex; gap: 0.4rem; margin-bottom: 0.8rem; }
.pos-tab {
  font-family: var(--font-display); font-size: 0.68rem; font-weight: 500;
  color: var(--ink-dim); background: rgba(255, 255, 255, 0.05);
  padding: 0.3rem 0.7rem; border-radius: 999px; white-space: nowrap;
}
.pos-tab.is-active { background: var(--amber); color: #0a0a0c; }

.pos-rows { display: flex; flex-direction: column; gap: 0.45rem; }
.pos-row {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.6rem;
  background: rgba(255, 255, 255, 0.035); border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 10px; padding: 0.55rem 0.7rem;
}
.pos-row-ic { width: 26px; height: 26px; border-radius: 7px; flex: none; background: linear-gradient(140deg, var(--magenta), var(--magenta-hi)); }
.pos-row:nth-child(2) .pos-row-ic { background: linear-gradient(140deg, #ff7a1a, var(--amber)); }
.pos-row:nth-child(3) .pos-row-ic { background: linear-gradient(140deg, #7b3ff2, #2f6bff); }
.pos-row-name { font-size: 0.8rem; font-weight: 600; color: #eaeaef; }
.pos-row-price { font-family: var(--font-display); font-weight: 700; font-size: 0.86rem; color: #fff; }

.pos-total {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 0.8rem; padding: 0.7rem 0.85rem; border-radius: 11px;
  background: linear-gradient(120deg, var(--magenta), var(--magenta-hi));
  box-shadow: 0 14px 30px -14px color-mix(in srgb, var(--magenta) 80%, transparent);
}
.pos-total-label { font-family: var(--font-display); font-weight: 600; font-size: 0.8rem; color: rgba(255, 255, 255, 0.9); }
.pos-total-val { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: #fff; }

/* stand: boyun + taban */
.pos-neck { width: 26px; height: 42px; margin-top: -4px; border-radius: 4px; background: linear-gradient(180deg, #2b2b34, #16161c); }
.pos-base {
  width: 156px; height: 22px; margin-top: -2px; border-radius: 50%;
  background: radial-gradient(ellipse at 50% 30%, #34343e, #0c0c10 72%);
  box-shadow: 0 30px 44px -24px rgba(0, 0, 0, 0.9);
}

@media (max-width: 900px) {
  .pos { padding: var(--sp-5) 0; }
  .pos-grid { grid-template-columns: 1fr; gap: var(--sp-4); }
  .pos-visual { order: 2; }
  .pos-copy { order: 1; }
  .pos-lead { max-width: none; }
}

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

/* ============ POS vitrini — hareket katmanı (2026-07) ============
   Tüm hareket transform/opacity tabanlı (60fps); prefers-reduced-motion'da kapanır. */

/* Cihaz süzülmesi — .pos-frame'in 3B rotasyonunu KORUYARAK hafif dikey salınım */
@keyframes posFloat {
  0%, 100% { transform: rotateY(-14deg) rotateX(3deg) translateY(0); }
  50%      { transform: rotateY(-14deg) rotateX(3deg) translateY(-7px); }
}
.pos-frame { animation: posFloat 6.5s ease-in-out infinite; will-change: transform; }

/* "Luma POS" canlı nokta — genişleyen nabız halkası */
@keyframes posDot {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--amber) 60%, transparent), 0 0 10px var(--amber); }
  70%  { box-shadow: 0 0 0 7px color-mix(in srgb, var(--amber) 0%, transparent), 0 0 10px var(--amber); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--amber) 0%, transparent), 0 0 10px var(--amber); }
}
.pos-brand-dot { animation: posDot 2.4s ease-out infinite; }

/* Ekran ışık geçişi (sheen) — periyodik, ince cam parıltısı */
.pos-screen { position: relative; }
.pos-screen::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3;
  background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, 0.06) 48%, transparent 64%);
  transform: translateX(-130%);
  animation: posSheen 7.5s ease-in-out infinite;
}
@keyframes posSheen {
  0%, 60%   { transform: translateX(-130%); }
  80%, 100% { transform: translateX(130%); }
}

/* Aktif sekme — hafif nefes alan glow */
@keyframes posTabGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 209, 0, 0); }
  50%      { box-shadow: 0 6px 18px -6px color-mix(in srgb, var(--amber) 75%, transparent); }
}
.pos-tab.is-active { animation: posTabGlow 3s ease-in-out infinite; }

/* Işıma küresi — yavaş süzülme (mevcut translateY(-50%) korunur) */
@keyframes posOrbDrift {
  0%, 100% { transform: translateY(-50%) translate(0, 0); }
  50%      { transform: translateY(-50%) translate(-26px, 20px); }
}
.pos-orb { animation: posOrbDrift 15s ease-in-out infinite; }

/* Toplam — hafif nabız (dikkat, abartısız) */
@keyframes posTotalPulse {
  0%, 100% { box-shadow: 0 14px 30px -14px color-mix(in srgb, var(--magenta) 80%, transparent); }
  50%      { box-shadow: 0 16px 42px -12px color-mix(in srgb, var(--magenta) 96%, transparent); }
}
.pos-total { animation: posTotalPulse 3.6s ease-in-out infinite; }

/* Menü satırları — bölüm görünürken kademeli giriş (JS .pos-live ekler) + hover */
.pos-rows .pos-row {
  opacity: 0; transform: translateY(12px);
  transition: opacity 0.55s var(--ease-out), transform 0.55s var(--ease-out), background 0.25s, border-color 0.25s;
}
.pos-rows.pos-live .pos-row { opacity: 1; transform: none; }
.pos-rows.pos-live .pos-row:nth-child(1) { transition-delay: 0.06s; }
.pos-rows.pos-live .pos-row:nth-child(2) { transition-delay: 0.18s; }
.pos-rows.pos-live .pos-row:nth-child(3) { transition-delay: 0.30s; }
.pos-row:hover { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.12); }

@media (prefers-reduced-motion: reduce) {
  .pos-frame, .pos-brand-dot, .pos-screen::after, .pos-tab.is-active, .pos-orb, .pos-total { animation: none; }
  .pos-rows .pos-row { opacity: 1; transform: none; transition: none; }
}

/* ---- Satici kimlik bilgileri (6563 s. Kanun / mesafeli satis) ---- */
.ft-seller { margin: 0 0 0.6rem; font-size: 0.82rem; line-height: 1.7; color: var(--ink-dim); }
.ft-ph {
  display: inline-block; padding: 0.02em 0.35em; border-radius: 4px;
  background: color-mix(in srgb, var(--err) 16%, transparent);
  border: 1px dashed color-mix(in srgb, var(--err) 55%, transparent);
  color: color-mix(in srgb, var(--err) 78%, var(--ink));
  font-size: 0.94em; font-weight: 600;
}

/* ---- Demo formu KVKK riza kutusu ---- */
.ff-consent { display: grid; grid-template-columns: auto 1fr; gap: 0.6rem; align-items: start; margin: 0 0 0.85rem; }
.ff-consent input[type="checkbox"] { width: 1.05rem; height: 1.05rem; margin-top: 0.15rem; accent-color: var(--amber); cursor: pointer; }
.ff-consent label { font-size: 0.85rem; line-height: 1.6; color: var(--ink-dim); cursor: pointer; }
/* .join bölümü closing.css'te AÇIK temaya çevriliyor (--bg-0:#ffffff) ama orada
   bilinçli olarak "sarı/magenta vurgu token'ları korunur". Sonuç: bağlantı beyaz
   zeminde amber kalıyor ve kontrast ~1.4:1'e düşüyor — WCAG AA'nın gövde metni
   için istediği 4.5:1'in çok altında, yani pratikte okunmuyor. Bu bir KVKK
   aydınlatma bağlantısı olduğundan görünürlüğü hukuki olarak da gerekli:
   onayın geçerliliği kullanıcının metne erişebilmesine bağlı.
   Alt çizgi ayrıca bağlantıyı YALNIZ renge dayanmadan belli eder (WCAG 1.4.1). */
.ff-consent a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.ff-consent a:hover { color: var(--magenta); }
.ff-consent input:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }