/* NEMES-X — Kurumsal Tasarım Sistemi v3
   Tek kaynak: tüm sayfalar bu dosyayı kullanır. Tema: data-theme="dark|light" */

@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('fonts/inter-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:'Inter';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('fonts/inter-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;
}

/* ---------- TOKENLAR ---------- */
:root{
  --bg:#0a0a0f; --bg2:#101018; --card:#14141f; --card-border:transparent;
  --txt:#e8e6e3; --mut:#8a8894; --line:#23232f; --dim:#5f5d68;
  --gold:#d4af37; --gold2:#f0c75e; --gold-text:#d4af37;
  --blue:#2a4a7f; --green:#3fae5a; --green-text:#3fae5a;
  --amber:#d4a017; --amber-text:#d4a017; --red:#c05050; --red-text:#c05050;
  --nav-bg:rgba(10,10,15,.92); --mock-bg:#0d0d15; --mock-bar:#16161f; --mock-line:#16161f;
  --on-gold:#0a0a0f;
  --shadow:0 20px 60px rgba(0,0,0,.5);
  --shadow-sm:0 6px 24px rgba(0,0,0,.35);
  --hero-glow:radial-gradient(ellipse at 50% -20%,rgba(42,74,127,.25),transparent 60%);
  --gold-fade:rgba(212,175,55,.1);
  --radius:12px;
  --font:'Inter',-apple-system,'Segoe UI',Roboto,system-ui,sans-serif;
  --serif:Georgia,'Times New Roman',serif;
}
[data-theme="light"]{
  --bg:#ffffff; --bg2:#f6f6f9; --card:#ffffff; --card-border:#e4e4ec;
  --txt:#101016; --mut:#5f5f70; --line:#e4e4ec; --dim:#8a8a98;
  --gold:#d4af37; --gold2:#f0c75e; --gold-text:#9a771f;
  --blue:#2a4a7f; --green:#3fae5a; --green-text:#2e8447;
  --amber:#d4a017; --amber-text:#8a6a10; --red:#c05050; --red-text:#b03a3a;
  --nav-bg:rgba(255,255,255,.94); --mock-bg:#f6f6f9; --mock-bar:#ececf1; --mock-line:#e4e4ec;
  --on-gold:#0a0a0f;
  --shadow:0 16px 40px rgba(16,16,22,.08);
  --shadow-sm:0 4px 16px rgba(16,16,22,.06);
  --hero-glow:radial-gradient(ellipse at 50% -20%,rgba(42,74,127,.10),transparent 60%);
  --gold-fade:rgba(212,175,55,.08);
}

/* ---------- RESET & BASE ---------- */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--txt);
  font-family:var(--font); line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  transition:background-color .25s ease,color .25s ease;
}
a{color:var(--gold2); text-decoration:none; transition:color .15s}
a:hover{color:var(--gold)}
img{max-width:100%; display:block}
::selection{background:var(--gold); color:var(--on-gold)}
:focus-visible{outline:2px solid var(--gold); outline-offset:2px; border-radius:4px}
.wrap{max-width:1100px; margin:0 auto; padding:0 24px}
.wrap-narrow{max-width:780px; margin:0 auto; padding:0 24px}
h1,h2,h3,h4{font-weight:800; line-height:1.2; letter-spacing:-.01em}
section{padding:72px 0}
h2{font-size:clamp(1.5rem,3vw,2rem); margin-bottom:12px; text-align:center}
.lead{color:var(--mut); text-align:center; max-width:680px; margin:0 auto 44px; font-size:1.02rem}

/* ---------- NAV ---------- */
nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  background:var(--nav-bg); backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  transition:background-color .25s ease;
}
nav .wrap{display:flex; align-items:center; justify-content:space-between; height:64px; gap:16px}
.brand{display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:2px; color:var(--gold); font-size:1.15rem; white-space:nowrap}
.brand img{height:38px; width:38px; border-radius:9px}
.brand span{color:var(--txt)}
.nav-links{display:flex; gap:20px; list-style:none; align-items:center}
.nav-links a{color:var(--mut); font-size:.9rem; font-weight:500}
.nav-links a:hover{color:var(--gold)}
.nav-links a.active{color:var(--gold)}
.nav-controls{display:flex; align-items:center; gap:8px}
.icon-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:10px; border:1px solid var(--line);
  background:transparent; color:var(--txt); cursor:pointer;
  transition:border-color .15s, background-color .15s;
}
.icon-btn:hover{border-color:var(--gold); color:var(--gold)}
.icon-btn svg{width:18px; height:18px}

/* dil menüsü */
.langwrap{position:relative}
.lang-btn{
  display:inline-flex; align-items:center; gap:6px; height:38px; padding:0 12px;
  border-radius:10px; border:1px solid var(--line); background:transparent;
  color:var(--txt); cursor:pointer; font-family:var(--font); font-size:.85rem; font-weight:600;
  transition:border-color .15s;
}
.lang-btn:hover{border-color:var(--gold)}
.lang-btn svg{width:16px; height:16px; color:var(--gold)}
.lang-menu{
  position:absolute; right:0; top:46px; min-width:170px;
  background:var(--card); border:1px solid var(--line); border-radius:12px;
  box-shadow:var(--shadow-sm); overflow:hidden; display:none; z-index:60;
}
.lang-menu.open{display:block}
.lang-menu button{
  display:flex; width:100%; align-items:center; gap:10px; padding:10px 14px;
  background:none; border:none; cursor:pointer; color:var(--txt);
  font-family:var(--font); font-size:.88rem; text-align:left;
}
.lang-menu button:hover{background:var(--gold-fade)}
.lang-menu button.on{color:var(--gold); font-weight:700}
.lang-menu .check{margin-inline-start:auto; color:var(--gold); font-weight:700}

.menu-btn{
  display:none; background:none; border:1px solid var(--line); color:var(--txt);
  width:38px; height:38px; border-radius:10px; cursor:pointer; font-size:1.1rem;
}
[dir="rtl"] .lang-menu{right:auto; left:0}

/* ---------- HERO ---------- */
.hero{
  padding:170px 0 80px; text-align:center;
  background:var(--hero-glow);
  transition:background .25s ease;
}
.hero h1{font-size:clamp(2.3rem,6vw,4rem); letter-spacing:4px; font-weight:800}
.hero h1 em{color:var(--gold); font-style:normal}
.hero .tag{color:var(--mut); font-size:1.1rem; margin:20px auto 36px; max-width:720px}
.kicker{
  display:inline-block; padding:6px 16px; border:1px solid var(--gold);
  border-radius:999px; color:var(--gold); font-size:.78rem; font-weight:700;
  letter-spacing:2px; text-transform:uppercase; margin-bottom:26px;
}

/* ---------- BUTONLAR ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 30px; margin:5px; border-radius:10px; font-weight:700; font-size:.95rem;
  border:1px solid transparent; cursor:pointer; transition:transform .15s, background-color .15s, border-color .15s;
  font-family:var(--font);
}
.btn.gold{background:var(--gold); color:var(--on-gold)}
.btn.gold:hover{background:var(--gold2); transform:translateY(-2px)}
.btn.ghost{border-color:var(--gold); color:var(--gold2); background:transparent}
.btn.ghost:hover{background:var(--gold-fade); transform:translateY(-2px)}
.btn.small{padding:9px 18px; font-size:.85rem}

/* ---------- KARTLAR & TABLO ---------- */
.card{
  background:var(--card); border:1px solid var(--card-border); border-radius:var(--radius);
  padding:24px; box-shadow:var(--shadow-sm);
}
[data-theme="dark"] .card{background:var(--card)}
.tblwrap{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:6px; overflow-x:auto; margin:14px 0;
}
.tbl{width:100%; border-collapse:collapse; font-size:.9rem; min-width:520px}
.tbl th{
  text-align:left; color:var(--mut); font-weight:600; padding:10px 14px;
  border-bottom:1px solid var(--line); font-size:.7rem; text-transform:uppercase; letter-spacing:1.2px;
}
.tbl td{padding:11px 14px; border-bottom:1px solid var(--line); vertical-align:top}
.tbl tr:last-child td{border-bottom:none}
.dot{display:inline-block; width:8px; height:8px; border-radius:50%; margin-inline-end:8px}
.dot.g{background:var(--green)}
.dot.y{background:var(--amber)}
.dot.b{background:var(--blue)}
.gtext{color:var(--green-text)}
.ytext{color:var(--amber-text)}

/* ---------- STRIP / SAYILAR ---------- */
.strip{
  display:flex; justify-content:center; gap:48px; flex-wrap:wrap; padding:32px 0;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--bg2);
}
.strip div{text-align:center}
.strip b{display:block; font-size:1.6rem; color:var(--gold); font-variant-numeric:tabular-nums; font-weight:800}
.strip small{color:var(--mut)}
.asof{text-align:center; color:var(--dim); font-size:.72rem; padding:10px 0 0}

/* ---------- GRID & PANEL ---------- */
.two{display:grid; grid-template-columns:1fr 1fr; gap:22px}
.panel{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:28px}
.panel h3{color:var(--gold2); margin-bottom:14px; font-size:1.05rem}
.panel ul{list-style:none}
.panel ul li{padding:8px 0; border-bottom:1px solid var(--line); color:var(--mut); font-size:.9rem}
.panel ul li:last-child{border:none}
.panel ul li b{color:var(--txt); font-weight:600}
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:22px}
.cards .card h3{margin-bottom:8px; font-size:1.02rem}
.cards .card p{color:var(--mut); font-size:.9rem}

/* ---------- AKIŞ ---------- */
.flow{display:flex; flex-direction:column; align-items:center; max-width:560px; margin:0 auto; font-size:.9rem; width:100%}
.flow .fstep{width:100%; text-align:left; background:var(--card); border:1px solid var(--line); border-radius:10px; padding:14px 18px}
[dir="rtl"] .flow .fstep{text-align:right}
.flow .fstep b{display:block; color:var(--txt); margin-bottom:4px; font-size:.92rem}
.flow .fstep small{color:var(--mut); font-size:.82rem}
.flow .fstep.hot{border-color:var(--gold)}
.flow .fstep.hot b{color:var(--gold-text)}
.flow .arr{color:var(--dim); padding:4px 0}

/* ---------- DURUM ROZETLERİ ---------- */
.st{font-size:.72rem; font-weight:700; padding:3px 10px; border-radius:20px; letter-spacing:.5px; white-space:nowrap; display:inline-block}
.st.live{background:rgba(63,174,90,.15); color:var(--green-text)}
.st.beta{background:rgba(212,160,23,.15); color:var(--amber-text)}
.st.soon{background:rgba(42,74,127,.3); color:#7fa3d7}
[data-theme="light"] .st.soon{color:#3a5f9e}
.st.plan{background:rgba(138,136,148,.12); color:var(--dim)}
.disc{
  background:var(--gold-fade); border:1px solid var(--gold); border-radius:10px;
  padding:14px 18px; color:var(--amber-text); font-size:.82rem; margin-top:18px;
}

/* ---------- KATMANLAR ---------- */
.tiers{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:22px; max-width:960px; margin:0 auto}
.tier{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:30px; text-align:center; position:relative}
.tier.hot{border-color:var(--gold)}
.tier .badge{
  position:absolute; top:-12px; left:50%; transform:translateX(-50%);
  background:var(--gold); color:var(--on-gold); font-size:.72rem; font-weight:700;
  padding:4px 14px; border-radius:20px; letter-spacing:1px;
}
.tier h3{color:var(--gold-text); font-size:1.05rem; letter-spacing:1px}
.tier .price{font-size:2.3rem; font-weight:800; margin:10px 0}
.tier .price small{font-size:.85rem; color:var(--mut); font-weight:400}
.tier ul{list-style:none; color:var(--mut); font-size:.88rem; margin:14px 0}
.tier ul li{padding:6px 0; border-bottom:1px solid var(--line)}
.tier ul li:last-child{border:none}
.soon{display:inline-block; margin-top:8px; padding:9px 24px; border-radius:10px; border:1px solid var(--line); color:var(--mut); font-size:.88rem}

/* ---------- YOL HARİTASI ---------- */
.road{max-width:720px; margin:0 auto}
.road .step{display:flex; gap:18px; padding:13px 0 13px 22px; border-left:2px solid var(--line); position:relative}
[dir="rtl"] .road .step{border-left:none; border-right:2px solid var(--line); padding:13px 22px 13px 0}
.road .step::before{
  content:""; position:absolute; left:-7px; top:22px; width:12px; height:12px;
  border-radius:50%; background:var(--dim);
}
[dir="rtl"] .road .step::before{left:auto; right:-7px}
.road .step.done::before{background:var(--green)}
.road .step.now::before{background:var(--gold); box-shadow:0 0 10px var(--gold)}
.road b{display:block}
.road small{color:var(--mut)}

/* ---------- BAĞIŞ ---------- */
.donate{
  background:var(--bg2); border:1px solid var(--line); border-radius:16px;
  max-width:680px; margin:0 auto; padding:34px; text-align:center;
}
.donate img{border-radius:10px; background:#fff; padding:8px; margin:18px auto}
.addr{
  font-family:ui-monospace,Menlo,monospace; font-size:.8rem; word-break:break-all;
  background:var(--mock-bg); border:1px solid var(--line); padding:12px 16px;
  border-radius:10px; color:var(--gold-text);
}
.copy{
  margin-top:12px; padding:10px 22px; border-radius:10px; border:1px solid var(--gold);
  background:none; color:var(--gold2); cursor:pointer; font-family:var(--font); font-weight:600;
}
.copy:hover{background:var(--gold-fade)}

/* ---------- FORM ---------- */
input[type="email"],input[type="text"]{width:100%}

/* ---------- MOCK TERMİNAL ---------- */
.mock{
  background:var(--mock-bg); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; font-family:ui-monospace,'Cascadia Code',Menlo,monospace; font-size:.78rem;
  box-shadow:var(--shadow);
}
.mock .bar{
  background:var(--mock-bar); padding:9px 14px; color:var(--dim);
  border-bottom:1px solid var(--line); display:flex; justify-content:space-between;
}
.mock .bar .dot{color:var(--green); font-weight:700}
.mock .row{display:flex; justify-content:space-between; gap:12px; padding:7px 16px; border-bottom:1px solid var(--mock-line)}
.mock .row:last-of-type{border-bottom:none}
.mock .row span:first-child{color:var(--mut)}
.mock .row .g{color:var(--green-text)}
.mock .row .gd{color:var(--gold-text)}
.mock .foot{padding:10px 16px; color:var(--dim); font-size:.7rem}
.mocklabel{text-align:center; color:var(--dim); font-size:.72rem; letter-spacing:2px; margin-top:12px; text-transform:uppercase}

/* ---------- ÇERÇEVE / BADGE ---------- */
.gframe{
  margin-top:44px; padding:28px; border:1px solid var(--gold); border-radius:var(--radius);
  text-align:center; background:radial-gradient(ellipse at 50% 0,var(--gold-fade),transparent 70%);
}
.gframe b{color:var(--gold2); letter-spacing:2px}

/* ---------- FOOTER ---------- */
footer{border-top:1px solid var(--line); background:var(--bg2); margin-top:40px}
footer .wrap{display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:32px; padding:56px 24px 36px}
footer h5{font-size:.78rem; letter-spacing:1.6px; text-transform:uppercase; color:var(--gold); margin-bottom:14px}
footer ul{list-style:none}
footer li{margin:8px 0}
footer li a{color:var(--mut); font-size:.88rem}
footer li a:hover{color:var(--gold2)}
footer .brand-desc{color:var(--mut); font-size:.88rem; margin-top:12px; max-width:280px}
footer .social{display:flex; gap:10px; margin-top:16px}
footer .social a{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:10px; border:1px solid var(--line); color:var(--mut);
}
footer .social a:hover{border-color:var(--gold); color:var(--gold)}
footer .bottom{
  border-top:1px solid var(--line); padding:20px 24px; text-align:center;
  color:var(--dim); font-size:.8rem;
}
footer .bottom a{color:var(--gold2)}
footer .disc{max-width:900px; margin:8px auto 0; color:var(--dim); font-size:.7rem; line-height:1.6}

/* ---------- BACK TO TOP ---------- */
#backtop{
  position:fixed; bottom:24px; right:24px; width:44px; height:44px; border-radius:12px;
  border:1px solid var(--gold); background:var(--card); color:var(--gold);
  font-size:1.2rem; cursor:pointer; opacity:0; pointer-events:none; transition:opacity .2s; z-index:40;
}
#backtop.show{opacity:1; pointer-events:auto}
[dir="rtl"] #backtop{right:auto; left:24px}

/* ---------- MAKALE (manifesto vb.) ---------- */
article{padding:140px 0 70px}
article h1{font-size:clamp(1.8rem,4vw,2.6rem); letter-spacing:2px; color:var(--gold); text-align:center; line-height:1.3}
article h1 em{color:var(--txt); font-style:normal}
article .sub{color:var(--mut); text-align:center; margin:14px auto 40px; font-size:.95rem; max-width:640px}
article h2{
  font-size:1.1rem; letter-spacing:2.4px; color:var(--gold); margin:44px 0 14px;
  text-transform:uppercase; text-align:left;
}
article h2::after{content:""; display:block; width:40px; height:2px; background:var(--gold); margin-top:8px}
article p{margin:14px 0; font-size:1.02rem; text-align:justify}
article.serif .prose{font-family:var(--serif); line-height:1.95}
article .prose p{font-family:var(--serif); line-height:1.95}

/* ---------- FAQ ---------- */
.faq-item{border:1px solid var(--line); border-radius:var(--radius); margin:12px 0; overflow:hidden; background:var(--card)}
.faq-item summary{
  padding:18px 22px; cursor:pointer; font-weight:700; list-style:none; position:relative;
  display:flex; align-items:center; gap:14px;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+"; margin-inline-start:auto; font-size:1.3rem; color:var(--gold); font-weight:400}
.faq-item[open] summary::after{content:"−"}
.faq-item .a{padding:0 22px 20px; color:var(--mut); font-size:.95rem}

/* ---------- RTL ---------- */
[dir="rtl"] body{letter-spacing:0}
[dir="rtl"] article p, [dir="rtl"] article h2{text-align:right}
[dir="rtl"] article .prose p{text-align:justify}
[dir="rtl"] .tbl th,[dir="rtl"] .tbl td{text-align:right}

/* ---------- HAREKET ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important; animation:none!important}
  html{scroll-behavior:auto}
}

/* ---------- MOBİL ---------- */
@media (max-width:860px){
  .menu-btn{display:inline-flex; align-items:center; justify-content:center}
  .two{grid-template-columns:1fr}
  .nav-links{
    position:fixed; top:64px; left:0; right:0; flex-direction:column; align-items:flex-start;
    gap:4px; background:var(--card); border-bottom:1px solid var(--line);
    padding:14px 24px 20px; display:none; box-shadow:var(--shadow-sm);
  }
  .nav-links.open{display:flex}
  .nav-links a{font-size:1rem; padding:8px 0; width:100%}
  footer .wrap{grid-template-columns:1fr 1fr; gap:28px; padding:40px 24px 28px}
  .hero{padding:140px 0 60px}
  section{padding:52px 0}
  .strip{gap:28px}
}
@media (max-width:520px){
  footer .wrap{grid-template-columns:1fr}
  .lang-btn span{display:none}
  .lang-btn{padding:0 10px}
}