/* =========================================================
   ROK Automation — custom layer (Tailwind CDN üzerine)
   ========================================================= */

:root{
  --cyan:#22D3EE;
  --violet:#A855F7;
  --lime:#A3E635;
  --amber:#FBBF24;
  --ink-950:#04050A;
  --ink-900:#07080F;
}

html{ -webkit-text-size-adjust:100%; }
body{ overflow-x:hidden; background:var(--ink-950); }

::selection{ background:rgba(34,211,238,.3); color:#fff; }

::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:#07080F; }
::-webkit-scrollbar-thumb{ background:#1c2236; border-radius:99px; border:2px solid #07080F; }
::-webkit-scrollbar-thumb:hover{ background:#2a3350; }

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

/* ---------- Arka plan efektleri ---------- */
.fx-bg{ position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none; }

.fx-grid{
  position:absolute; inset:-2px;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 90% 60% at 50% 0%, #000 35%, transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 90% 60% at 50% 0%, #000 35%, transparent 78%);
}

.orb{ position:absolute; border-radius:9999px; filter:blur(90px); opacity:.35; }
.orb-1{ width:520px; height:520px; top:-160px; left:-120px; background:radial-gradient(circle, rgba(34,211,238,.55), transparent 70%); animation:float1 22s ease-in-out infinite; }
.orb-2{ width:560px; height:560px; top:280px; right:-180px; background:radial-gradient(circle, rgba(168,85,247,.5), transparent 70%); animation:float2 26s ease-in-out infinite; }
.orb-3{ width:460px; height:460px; bottom:-160px; left:35%; background:radial-gradient(circle, rgba(34,211,238,.28), transparent 70%); animation:float1 30s ease-in-out infinite reverse; }

@keyframes float1{ 0%,100%{ transform:translate(0,0) scale(1);} 50%{ transform:translate(60px,50px) scale(1.12);} }
@keyframes float2{ 0%,100%{ transform:translate(0,0) scale(1);} 50%{ transform:translate(-70px,40px) scale(1.08);} }

/* ---------- Navbar ---------- */
#navbar.scrolled{
  background:rgba(4,5,10,.82);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(255,255,255,.06);
}

.nav-link{
  position:relative; padding:.55rem .7rem; border-radius:.6rem;
  color:#94a3b8; font-weight:500; white-space:nowrap;
  transition:color .2s, background .2s;
}
/* Uzun dillerde (RU/VI/ES) menü etiketleri sığsın diye */
@media (min-width:1024px) and (max-width:1180px){
  .nav-link{ padding:.5rem .5rem; font-size:13px; }
}
.nav-link:hover{ color:#fff; background:rgba(255,255,255,.05); }
.nav-link.active{ color:var(--cyan); }
.nav-link.active::after{
  content:""; position:absolute; left:.7rem; right:.7rem; bottom:.25rem; height:2px;
  background:linear-gradient(90deg,var(--cyan),var(--violet)); border-radius:2px;
}

.mob-link{
  padding:.8rem .9rem; border-radius:.7rem; color:#cbd5e1; font-weight:500;
  transition:background .2s,color .2s;
}
.mob-link:hover,.mob-link:active{ background:rgba(255,255,255,.05); color:#fff; }

/* ---------- Butonlar ---------- */
.btn-primary{
  position:relative; display:inline-flex; align-items:center; gap:.6rem;
  border-radius:.85rem; padding:.85rem 1.4rem;
  font-weight:700; letter-spacing:.01em; color:#04050A;
  background:linear-gradient(135deg,#67E8F9,#22D3EE 45%,#38BDF8);
  box-shadow:0 8px 30px -10px rgba(34,211,238,.75), inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .18s ease, box-shadow .25s ease, filter .2s;
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 14px 40px -10px rgba(34,211,238,.9); filter:brightness(1.06); }
.btn-primary:active{ transform:translateY(0); }

.btn-violet{
  background:linear-gradient(135deg,#D8B4FE,#A855F7 45%,#8B5CF6);
  color:#0B0416;
  box-shadow:0 8px 30px -10px rgba(168,85,247,.8), inset 0 1px 0 rgba(255,255,255,.3);
}
.btn-violet:hover{ box-shadow:0 14px 42px -10px rgba(168,85,247,.95); }

.btn-ghost{
  display:inline-flex; align-items:center; gap:.6rem;
  border-radius:.85rem; padding:.85rem 1.4rem;
  font-weight:600; color:#e2e8f0;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.035);
  transition:all .22s ease;
}
.btn-ghost:hover{ border-color:rgba(34,211,238,.5); color:#fff; background:rgba(34,211,238,.07); transform:translateY(-2px); }

.mini-btn{
  display:inline-block; border-radius:.6rem; padding:.5rem 1.1rem;
  font-size:12px; font-weight:700; letter-spacing:.03em;
  border:1px solid rgba(255,255,255,.14); color:#e2e8f0;
  transition:all .2s;
}
.mini-btn:hover{ border-color:var(--cyan); color:var(--cyan); background:rgba(34,211,238,.08); }
.mini-btn-violet{ border-color:rgba(168,85,247,.5); color:#D8B4FE; }
.mini-btn-violet:hover{ background:rgba(168,85,247,.12); border-color:var(--violet); color:#fff; }

/* ---------- Tipografi ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:12px; font-weight:700; letter-spacing:.16em;
  color:var(--cyan); text-transform:uppercase;
}
.eyebrow::before{ content:""; width:26px; height:1px; background:linear-gradient(90deg,var(--cyan),transparent); }

.section-title{
  font-family:'Space Grotesk',system-ui,sans-serif;
  font-weight:700; color:#fff; letter-spacing:-.02em;
  font-size:clamp(26px,4.4vw,42px); line-height:1.12;
}

.text-gradient{
  background:linear-gradient(100deg,#67E8F9 0%,#22D3EE 35%,#A855F7 90%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ---------- Paneller / mockup ---------- */
.panel{
  border-radius:1.25rem;
  border:1px solid rgba(255,255,255,.09);
  background:linear-gradient(180deg,rgba(17,20,38,.92),rgba(7,8,15,.95));
  box-shadow:0 30px 70px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(34,211,238,.06);
  overflow:hidden;
  backdrop-filter:blur(8px);
}
.panel-chrome{
  display:flex; align-items:center; gap:.4rem;
  padding:.75rem 1rem;
  border-bottom:1px solid rgba(255,255,255,.06);
  background:rgba(255,255,255,.025);
}
.dot{ width:9px; height:9px; border-radius:99px; display:inline-block; }

.acc-row,.dash-row{
  display:flex; align-items:center; gap:.85rem;
  border-radius:.9rem; padding:.8rem;
  border:1px solid rgba(255,255,255,.06);
  background:rgba(255,255,255,.025);
  transition:border-color .25s, background .25s;
}
.acc-row:hover,.dash-row:hover{ border-color:rgba(34,211,238,.28); background:rgba(34,211,238,.04); }

.acc-avatar{
  display:grid; place-items:center; flex:none;
  width:38px; height:38px; border-radius:.7rem;
  font-size:12px; font-weight:700;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
}

.bar{ height:5px; border-radius:99px; background:rgba(255,255,255,.07); overflow:hidden; }
.bar i{ display:block; height:100%; border-radius:99px; animation:grow 2.4s ease-out both; }
.bar-cyan{ background:linear-gradient(90deg,var(--cyan),rgba(34,211,238,.25)); }
.bar-violet{ background:linear-gradient(90deg,var(--violet),rgba(168,85,247,.25)); }
.bar-lime{ background:linear-gradient(90deg,var(--lime),rgba(163,230,53,.25)); }
@keyframes grow{ from{ transform:scaleX(0); transform-origin:left; } to{ transform:scaleX(1); } }

.status-dot{ width:9px; height:9px; border-radius:99px; flex:none; box-shadow:0 0 0 4px rgba(255,255,255,.05); animation:pulse 2.4s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }

.stat{ border-radius:.8rem; border:1px solid rgba(255,255,255,.06); background:rgba(255,255,255,.025); padding:.7rem; text-align:center; }
.stat-v{ font-family:'Space Grotesk',sans-serif; font-weight:700; color:#fff; font-size:16px; }
.stat-l{ font-size:11px; color:#64748b; margin-top:1px; }

.typing{ overflow:hidden; white-space:nowrap; animation:type 3.2s steps(46,end) infinite alternate; }
@keyframes type{ from{ width:0; } to{ width:100%; } }

/* ---------- Pills ---------- */
.pill{
  display:inline-flex; align-items:center; gap:.35rem;
  border-radius:99px; padding:.22rem .6rem;
  font-size:10.5px; font-weight:700; letter-spacing:.08em;
  border:1px solid; white-space:nowrap;
}
.pill-cyan{ color:var(--cyan); border-color:rgba(34,211,238,.35); background:rgba(34,211,238,.09); }
.pill-violet{ color:#D8B4FE; border-color:rgba(168,85,247,.35); background:rgba(168,85,247,.09); }
.pill-lime{ color:var(--lime); border-color:rgba(163,230,53,.32); background:rgba(163,230,53,.08); }
.pill-amber{ color:var(--amber); border-color:rgba(251,191,36,.32); background:rgba(251,191,36,.08); }

/* ---------- Marquee ---------- */
.marquee{ overflow:hidden; mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); }
.marquee-track{ display:flex; align-items:center; gap:1.5rem; width:max-content; animation:scroll 30s linear infinite; }
.marquee:hover .marquee-track{ animation-play-state:paused; }
@keyframes scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.chip{ font-family:'Space Grotesk',sans-serif; font-size:14px; font-weight:600; letter-spacing:.1em; color:#64748b; white-space:nowrap; transition:color .25s; }
.chip:hover{ color:var(--cyan); }
.sep{ color:#1e293b; }

/* ---------- Feature / step kartlar ---------- */
.feature-card,.step-card,.soon-card,.path-card,.loop-card{
  position:relative; border-radius:1.1rem; padding:1.5rem;
  border:1px solid rgba(255,255,255,.07);
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012));
  transition:transform .3s cubic-bezier(.2,.8,.2,1), border-color .3s, box-shadow .3s;
}
.feature-card:hover,.step-card:hover,.soon-card:hover,.path-card:hover{
  transform:translateY(-4px);
  border-color:rgba(34,211,238,.32);
  box-shadow:0 24px 50px -28px rgba(34,211,238,.5);
}

.ficon{
  display:grid; place-items:center; width:44px; height:44px; border-radius:.8rem;
  border:1px solid rgba(255,255,255,.09); background:rgba(255,255,255,.04);
  margin-bottom:1.1rem;
}
.ficon svg{ width:22px; height:22px; }

.fcard-title{ font-family:'Space Grotesk',sans-serif; font-size:17px; font-weight:600; color:#fff; }
.fcard-text{ margin-top:.5rem; font-size:14px; line-height:1.65; color:#94a3b8; }

.step-num{
  display:inline-grid; place-items:center; width:40px; height:40px; border-radius:.75rem;
  font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:16px;
  color:var(--cyan); border:1px solid rgba(34,211,238,.3); background:rgba(34,211,238,.08);
}

.path-card{ padding:1.4rem; }
.path-step{ font-family:'Space Grotesk',sans-serif; font-size:12px; font-weight:700; letter-spacing:.1em; color:#475569; }
.path-title{ margin-top:.5rem; font-family:'Space Grotesk',sans-serif; font-size:19px; font-weight:700; color:#fff; }
.path-card-pro{ border-color:rgba(168,85,247,.35); background:linear-gradient(180deg,rgba(168,85,247,.10),rgba(168,85,247,.02)); }
.path-card-pro:hover{ border-color:rgba(168,85,247,.6); box-shadow:0 24px 50px -28px rgba(168,85,247,.6); }

.loop-card{ padding:1.4rem 1.5rem; }
.loop-card-neon{ border-color:rgba(34,211,238,.3); background:linear-gradient(180deg,rgba(34,211,238,.09),rgba(34,211,238,.015)); }

/* ---------- Pricing ---------- */
.price-card{
  position:relative; border-radius:1.35rem; padding:1.75rem;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.012));
  transition:transform .3s cubic-bezier(.2,.8,.2,1), border-color .3s, box-shadow .3s;
}
.price-card:hover{ transform:translateY(-4px); border-color:rgba(34,211,238,.3); box-shadow:0 30px 60px -30px rgba(34,211,238,.45); }

.price-card-pro{
  border-color:rgba(168,85,247,.45);
  background:linear-gradient(180deg,rgba(168,85,247,.14),rgba(168,85,247,.03) 55%,rgba(255,255,255,.012));
  box-shadow:0 30px 70px -30px rgba(168,85,247,.65), inset 0 1px 0 rgba(255,255,255,.06);
  padding-top:2.1rem;
}
.price-card-pro:hover{ border-color:rgba(168,85,247,.75); box-shadow:0 36px 80px -30px rgba(168,85,247,.8); }

.badge-pop{
  display:inline-block; white-space:nowrap;
  border-radius:99px; padding:.35rem .9rem;
  font-size:11px; font-weight:800; letter-spacing:.09em; color:#0B0416;
  background:linear-gradient(135deg,#D8B4FE,#A855F7);
  box-shadow:0 8px 24px -8px rgba(168,85,247,.9);
}

.plan-name{ font-family:'Space Grotesk',sans-serif; font-size:14px; font-weight:700; letter-spacing:.14em; color:#e2e8f0; }
.price{ font-family:'Space Grotesk',sans-serif; font-size:40px; line-height:1; font-weight:700; color:#fff; letter-spacing:-.02em; }
.price-suffix{ font-size:13px; color:#64748b; padding-bottom:.35rem; }

.tag{
  border-radius:99px; padding:.25rem .65rem; font-size:10.5px; font-weight:700; letter-spacing:.09em;
  color:#94a3b8; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.04);
}
.tag-violet{ color:#D8B4FE; border-color:rgba(168,85,247,.35); background:rgba(168,85,247,.1); }

.feat{ display:flex; align-items:flex-start; gap:.65rem; font-size:14px; color:#94a3b8; line-height:1.5; }
.tick{
  flex:none; margin-top:.15rem; width:16px; height:16px; border-radius:99px;
  background:rgba(34,211,238,.14); position:relative;
}
.tick::after{
  content:""; position:absolute; left:5px; top:2.5px; width:4px; height:8px;
  border:solid var(--cyan); border-width:0 1.8px 1.8px 0; transform:rotate(45deg);
}
.tick-violet{ background:rgba(168,85,247,.16); }
.tick-violet::after{ border-color:#D8B4FE; }

/* ---------- Karşılaştırma tablosu ---------- */
.th-feat{ text-align:left; padding:1rem 1.25rem; font-size:11px; letter-spacing:.12em; color:#64748b; font-weight:700; text-transform:uppercase; }
.th-plan{ padding:1rem .75rem; font-family:'Space Grotesk',sans-serif; font-size:13px; font-weight:700; letter-spacing:.1em; color:#e2e8f0; }
.tr{ border-bottom:1px solid rgba(255,255,255,.045); transition:background .2s; }
.tr:hover{ background:rgba(255,255,255,.022); }
.td-feat{ padding:.8rem 1.25rem; text-align:left; color:#94a3b8; }
.td{ padding:.8rem .75rem; text-align:center; color:#cbd5e1; }
.td-pro{ background:rgba(168,85,247,.055); }

.yes,.no{ display:inline-block; width:18px; height:18px; position:relative; }
.yes::after{ content:""; position:absolute; left:6px; top:2px; width:5px; height:10px; border:solid var(--cyan); border-width:0 2px 2px 0; transform:rotate(45deg); }
.no::after{ content:""; position:absolute; left:4px; top:8px; width:10px; height:2px; background:#334155; border-radius:2px; }

/* ---------- Coming soon ---------- */
.soon-card{ padding:1.75rem; }
.soon-card::before{
  content:""; position:absolute; inset:0; border-radius:1.1rem; pointer-events:none;
  background:repeating-linear-gradient(135deg,rgba(255,255,255,.02) 0 10px,transparent 10px 20px);
  opacity:.5;
}
.soon-card > *{ position:relative; }

/* ---------- Early access ---------- */
.early-box{
  border-radius:1.5rem; padding:2.25rem 1.5rem;
  border:1px solid rgba(255,255,255,.09);
  background:
    radial-gradient(ellipse 80% 100% at 50% 0%, rgba(34,211,238,.13), transparent 60%),
    linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.01));
  text-align:center;
}
@media (min-width:640px){ .early-box{ padding:3rem; } }

.field{
  border-radius:.85rem; padding:.9rem 1.1rem;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.12);
  color:#fff; font-size:14px; width:100%;
  transition:border-color .2s, background .2s;
}
.field::placeholder{ color:#64748b; }
.field:focus{ outline:none; border-color:var(--cyan); background:rgba(34,211,238,.06); }
.field.err{ border-color:#f87171; background:rgba(248,113,113,.07); }
.field:disabled{ opacity:.55; cursor:not-allowed; }

/* Spam tuzağı: ekranda ve klavye sırasında görünmez, ama bot doldurur */
.hp-field{
  position:absolute !important; left:-9999px; top:auto;
  width:1px; height:1px; opacity:0; overflow:hidden; pointer-events:none;
}

/* Gönderim sırasındaki yükleniyor durumu */
.spinner{ display:none; width:15px; height:15px; flex:none;
  border:2px solid rgba(4,5,10,.28); border-top-color:#04050A;
  border-radius:99px; animation:spin .65s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.is-loading .spinner{ display:block; }
button.is-loading, button:disabled{ cursor:not-allowed; }
button.is-loading{ opacity:.8; }
button.is-loading:hover{ transform:none; }

/* ---------- FAQ ---------- */
.faq-item{
  border-radius:1rem; overflow:hidden;
  border:1px solid rgba(255,255,255,.07);
  background:rgba(255,255,255,.025);
  transition:border-color .25s, background .25s;
}
.faq-item:hover{ border-color:rgba(34,211,238,.25); }
.faq-item.open{ border-color:rgba(34,211,238,.4); background:rgba(34,211,238,.04); }
.faq-item-warn{ border-color:rgba(251,191,36,.25); background:rgba(251,191,36,.04); }
.faq-item-warn:hover,.faq-item-warn.open{ border-color:rgba(251,191,36,.5); background:rgba(251,191,36,.07); }

.faq-q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.15rem 1.35rem; text-align:left;
  font-size:15px; font-weight:600; color:#e2e8f0; cursor:pointer;
}
.faq-q:hover{ color:#fff; }
.faq-icon{ width:18px; height:18px; flex:none; color:#64748b; transition:transform .3s ease, color .3s; }
.faq-item.open .faq-icon{ transform:rotate(135deg); color:var(--cyan); }
.faq-item-warn.open .faq-icon{ color:var(--amber); }

.faq-a{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .35s cubic-bezier(.2,.8,.2,1); }
.faq-item.open .faq-a{ grid-template-rows:1fr; }
.faq-a-inner{ overflow:hidden; padding:0 1.35rem; font-size:14px; line-height:1.7; color:#94a3b8; }
.faq-item.open .faq-a-inner{ padding-bottom:1.25rem; }

/* ---------- Final CTA ---------- */
.final-cta{
  border-radius:1.75rem; padding:2.5rem 1.5rem;
  border:1px solid rgba(255,255,255,.1);
  background:
    radial-gradient(ellipse 70% 100% at 50% 0%, rgba(168,85,247,.18), transparent 62%),
    radial-gradient(ellipse 70% 100% at 50% 100%, rgba(34,211,238,.14), transparent 62%),
    linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012));
  box-shadow:0 40px 90px -40px rgba(34,211,238,.4);
}
@media (min-width:640px){ .final-cta{ padding:3.5rem; } }

/* ---------- Footer ---------- */
.foot-h{ font-size:11px; font-weight:700; letter-spacing:.14em; color:#e2e8f0; }
.foot-list{ margin-top:1rem; display:flex; flex-direction:column; gap:.6rem; }
.foot-a{ font-size:13.5px; color:#64748b; transition:color .2s; }
.foot-a:hover{ color:var(--cyan); }

/* ---------- Toast ---------- */
.toast{
  position:fixed; left:50%; bottom:1.5rem; z-index:80;
  transform:translate(-50%,140%);
  max-width:calc(100vw - 2rem);
  border-radius:.9rem; padding:.85rem 1.25rem;
  font-size:13.5px; font-weight:500; color:#04050A;
  background:linear-gradient(135deg,#67E8F9,#22D3EE);
  box-shadow:0 20px 50px -15px rgba(34,211,238,.7);
  opacity:0; transition:transform .4s cubic-bezier(.2,.9,.2,1), opacity .3s;
  pointer-events:none;
}
.toast.show{ transform:translate(-50%,0); opacity:1; }

/* ---------- Scroll reveal ---------- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .65s ease, transform .65s cubic-bezier(.2,.8,.2,1); }
.reveal.in{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .reveal{ opacity:1; transform:none; }
}

/* ---------- Dil seçici (language switcher) ---------- */
.lang-btn{
  display:inline-flex; align-items:center; gap:.4rem;
  border-radius:.7rem; padding:.5rem .7rem;
  font-size:12.5px; font-weight:700; letter-spacing:.04em; color:#cbd5e1;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  transition:all .2s ease;
}
.lang-btn:hover{ color:#fff; border-color:rgba(34,211,238,.45); background:rgba(34,211,238,.07); }

.lang-menu{
  position:absolute; right:0; top:calc(100% + .5rem); z-index:60;
  min-width:228px; padding:.35rem;
  border-radius:.9rem;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(7,8,15,.97);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  box-shadow:0 24px 60px -20px rgba(0,0,0,.95), 0 0 0 1px rgba(34,211,238,.06);
  animation:langIn .18s ease-out both;
  max-height:min(70vh,420px); overflow-y:auto;
}
@keyframes langIn{ from{ opacity:0; transform:translateY(-6px) scale(.98); } to{ opacity:1; transform:none; } }

.lang-opt{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  border-radius:.6rem; padding:.55rem .7rem;
  font-size:13.5px; font-weight:500; color:#cbd5e1; text-align:left;
  transition:background .18s, color .18s;
}
.lang-left{ display:flex; align-items:center; gap:.6rem; min-width:0; }
.lang-left span{ white-space:nowrap; }

/* Bayraklar: emoji bayraklar Windows'ta harf çifti olarak render edildiği için inline SVG */
.flag{
  display:block; flex:none;
  width:20px; height:14px; border-radius:2.5px;
  box-shadow:0 0 0 1px rgba(255,255,255,.18), 0 1px 2px rgba(0,0,0,.5);
  background:#0b0d17;
}
#langFlag{ display:flex; align-items:center; flex:none; }
#langFlag .flag{ width:19px; height:13px; }
.lang-opt:hover{ background:rgba(255,255,255,.06); color:#fff; }
.lang-opt.active{ background:rgba(34,211,238,.1); color:var(--cyan); font-weight:600; }

.lang-tag{
  font-size:10.5px; font-weight:700; letter-spacing:.09em; color:#64748b;
  border:1px solid rgba(255,255,255,.1); border-radius:99px; padding:.1rem .45rem;
}
.lang-opt.active .lang-tag{ color:var(--cyan); border-color:rgba(34,211,238,.35); }

/* Bir dilde karşılığı olmayan satır (ör. 3 satırlık başlığın 3. satırı) */
.i18n-empty{ display:none !important; }

/* ---------- Legal sayfası ---------- */
.legal-body h2{ font-family:'Space Grotesk',sans-serif; font-size:22px; font-weight:700; color:#fff; margin-top:2.5rem; }
.legal-body h3{ font-size:15px; font-weight:600; color:#e2e8f0; margin-top:1.5rem; }
.legal-body p{ margin-top:.75rem; font-size:14.5px; line-height:1.75; color:#94a3b8; }
.legal-body ul{ margin-top:.75rem; padding-left:1.1rem; list-style:disc; }
.legal-body li{ margin-top:.4rem; font-size:14.5px; line-height:1.7; color:#94a3b8; }