/* ============================================================
   VDSHost — Birleşik Stil Sayfası (Disket Telekom LTD. ŞTİ.)
   Marka: emerald #00b894 · Outfit (display/body) · JetBrains Mono (veri)
   ============================================================ */

/* ─── 1. DEĞİŞKENLER ─── */
:root {
  --bg: #f8fafc; --bg2: #ffffff; --bg3: #f1f5f9;
  --text: #0b0f1a; --text2: #475569; --text3: #94a3b8;
  --border: #e2e8f0; --card: #ffffff; --card-hover: #f8fafc;
  --nav-bg: rgba(255,255,255,.82); --row-hover: #f8fafc; --expand-bg: #f8fafc;
  --pri: #00b894; --pri-d: #00a383; --acc: #55efc4;
  --ink: #0b0f1a;
  --maxw: 1200px;
}
[data-theme="dark"] {
  --bg: #0b0f1a; --bg2: #111827; --bg3: #1a1f2e;
  --text: #f1f5f9; --text2: #94a3b8; --text3: #64748b;
  --border: #1e293b; --card: #111827; --card-hover: #1a1f2e;
  --nav-bg: rgba(11,15,26,.9); --row-hover: #1a1f2e; --expand-bg: #1a1f2e;
  --ink: #060912;
}

/* ─── 2. TEMEL ─── */
* { -webkit-font-smoothing: antialiased; }
html { scroll-behavior: smooth; }
body { background: var(--bg); color: var(--text); }
.container { max-width: var(--maxw); }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--pri); border-radius: 4px; }
::selection { background: rgba(0,184,148,.25); }
:focus-visible { outline: 2px solid var(--pri); outline-offset: 2px; border-radius: 4px; }

/* ─── 3. YARDIMCI SINIFLAR ─── */
.nav-blur { background: var(--nav-bg); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.card-surface { background: var(--card); border-color: var(--border); }
.text-secondary { color: var(--text2) !important; }
.text-tertiary { color: var(--text3) !important; }
.bg-surface { background: var(--bg2); }
.bg-surface-alt { background: var(--bg3); }
.border-surface { border-color: var(--border); }
.eyebrow { display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:800;
  letter-spacing:.12em; text-transform:uppercase; color:var(--pri); }
.mono { font-family:'JetBrains Mono', monospace; }
/* Display tipografi: Outfit büyük puntolarda negatif tracking ile keskinleşir (#5) */
h1, h2 { letter-spacing:-.025em; }
h3 { letter-spacing:-.015em; }
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3 { letter-spacing:normal; }

/* ─── 4. BUTONLAR ─── 3B buton stili: hover'da büyüme/kalkma YOK, tıklayınca basılır */
.btn-primary { background: linear-gradient(180deg,#00c89e,#009e7e); color:#fff; font-weight:700;
  border-bottom:3px solid #00735c;
  box-shadow: inset 0 2px 2px -1px rgba(150,255,228,.5), 0 1px 2px rgba(8,15,35,.16);
  transition: filter .15s ease, border-bottom-width .06s ease, transform .06s ease, box-shadow .12s ease; }
.btn-primary:hover { filter:brightness(1.05); }
.btn-primary:active { border-bottom-width:1px; transform:translateY(2px);
  box-shadow: inset 0 2px 4px rgba(8,15,35,.22); }
.btn-outline { border:2px solid var(--border); color:var(--text); font-weight:700; border-bottom-width:3px;
  transition: border-color .2s, color .2s, border-bottom-width .06s ease, transform .06s ease; }
.btn-outline:hover { border-color:var(--pri); color:var(--pri); }
.btn-outline:active { border-bottom-width:1px; transform:translateY(2px); }
.btn-ghost { color:var(--text2); transition:color .2s; }
.btn-ghost:hover { color:var(--pri); }
.btn-light { background:linear-gradient(180deg,#ffffff,#eef1f6); color:#0b0f1a; font-weight:700;
  border-bottom:3px solid #c4cad6;
  box-shadow: inset 0 2px 2px -1px rgba(255,255,255,.9), 0 1px 2px rgba(8,15,35,.14);
  transition: filter .15s ease, border-bottom-width .06s ease, transform .06s ease, box-shadow .12s ease; }
.btn-light:hover { filter:brightness(.98); }
.btn-light:active { border-bottom-width:1px; transform:translateY(2px);
  box-shadow: inset 0 2px 4px rgba(8,15,35,.14); }

/* ─── 5. RANGE SLIDER (yapılandırıcı) ─── */
input[type="range"] { -webkit-appearance:none; appearance:none; height:8px; border-radius:4px;
  outline:none; background:var(--bg3); }
input[type="range"]::-webkit-slider-runnable-track { height:8px; background:transparent; border-radius:4px; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance:none; width:24px; height:24px;
  background:linear-gradient(135deg,#00b894,#55efc4); border-radius:50%; margin-top:-8px; cursor:pointer;
  box-shadow:0 2px 12px rgba(0,184,148,.5), 0 0 0 4px rgba(0,184,148,.15); transition:transform .2s; }
input[type="range"]::-webkit-slider-thumb:hover { transform:scale(1.25); }
input[type="range"]::-moz-range-track { height:8px; background:var(--bg3); border-radius:4px; }
input[type="range"]::-moz-range-thumb { width:24px; height:24px; background:linear-gradient(135deg,#00b894,#55efc4);
  border-radius:50%; border:none; cursor:pointer; box-shadow:0 2px 12px rgba(0,184,148,.5); }

/* ─── 6. ANİMASYONLAR ─── */
@keyframes fadeUp { from{opacity:0; transform:translateY(28px);} to{opacity:1; transform:translateY(0);} }
.animate-in { animation: fadeUp .6s ease-out forwards; }
.fade-in { animation: fadeUp .5s ease-out forwards; }
.delay-1{animation-delay:.1s;opacity:0;} .delay-2{animation-delay:.2s;opacity:0;} .delay-3{animation-delay:.3s;opacity:0;}
@keyframes ping { 0%{transform:scale(1);opacity:1;} 100%{transform:scale(2.2);opacity:0;} }
@keyframes floatY { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-10px);} }
@keyframes blink { 0%,49%{opacity:1;} 50%,100%{opacity:0;} }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important; }
}

/* ─── 7. ARKA PLAN EFEKTLERİ ─── */
.glow-blob { position:absolute; border-radius:50%; pointer-events:none; opacity:.5;
  background:radial-gradient(circle at center, rgba(0,184,148,.82), rgba(0,184,148,.30) 42%, transparent 72%);
  filter:blur(60px);
  -webkit-mask-image:radial-gradient(circle at center,#000 36%, transparent 74%);
  mask-image:radial-gradient(circle at center,#000 36%, transparent 74%); }
.glow-blob.bg-accent { background:radial-gradient(circle at center, rgba(85,239,196,.78), rgba(85,239,196,.26) 44%, transparent 74%); }
.glow-blob.glow-cyan { background:radial-gradient(circle at center, rgba(45,212,191,.72), rgba(34,211,238,.24) 44%, transparent 76%); }
[data-theme="dark"] .glow-blob { opacity:.3; }
.hero-grid { background-image: radial-gradient(circle, var(--border) 1px, transparent 1px); background-size:40px 40px; }

/* ─── 8. NAVİGASYON ─── */
.nav-link { color:var(--text2); font-weight:600; transition:color .2s; position:relative; }
.nav-link:hover { color:var(--pri); }
.nav-active { color:var(--pri) !important; }
.nav-active::after { content:''; position:absolute; bottom:-6px; left:0; right:0; height:2px;
  background:var(--pri); border-radius:1px; }

/* Dropdown */
.has-dropdown { position:relative; }
.dropdown { position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(-8px);
  margin-top:10px; background:var(--card); border:1px solid var(--border); border-radius:16px;
  box-shadow:0 24px 48px rgba(0,0,0,.14); padding:10px; min-width:280px; opacity:0; visibility:hidden;
  transition:all .2s; z-index:100; }
.has-dropdown:hover .dropdown { opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
.dropdown-item { display:flex; gap:12px; align-items:flex-start; padding:12px 14px; border-radius:12px;
  transition:background .2s; }
.dropdown-item:hover { background:var(--bg3); }
.dropdown-item .di-icon { width:38px; height:38px; border-radius:10px; display:flex; align-items:center;
  justify-content:center; flex-shrink:0; background:rgba(0,184,148,.1); color:var(--pri); }

/* Dil menüsü */
.lang-dropdown { position:relative; }
.lang-menu { position:absolute; top:100%; right:0; margin-top:8px; background:var(--card);
  border:1px solid var(--border); border-radius:12px; box-shadow:0 20px 40px rgba(0,0,0,.15);
  overflow:hidden; opacity:0; visibility:hidden; transform:translateY(-8px); transition:all .2s;
  z-index:100; min-width:160px; }
.lang-dropdown:hover .lang-menu, .lang-menu:hover { opacity:1; visibility:visible; transform:translateY(0); }
.lang-item { padding:10px 16px; display:flex; align-items:center; gap:10px; cursor:pointer;
  transition:background .2s; font-size:14px; font-weight:500; }
.lang-item:hover { background:var(--bg3); }

/* Mobil menü */
.mobile-menu { position:fixed; inset:0; background:var(--bg); z-index:200; transform:translateX(100%);
  transition:transform .35s cubic-bezier(.4,0,.2,1); overflow-y:auto; }
.mobile-menu.open { transform:translateX(0); }

/* ─── 9. ACCORDION ─── */
details summary::-webkit-details-marker { display:none; }
details[open] summary .chv { transform:rotate(180deg); }
.chv { transition:transform .3s; }
.accordion { background:var(--card); border:1px solid var(--border); border-radius:14px; overflow:hidden; transition:border-color .2s; }
.accordion[open] { border-color:var(--pri); }
.accordion summary { display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:18px 22px; cursor:pointer; font-weight:700; list-style:none; user-select:none; }
.accordion summary:hover { color:var(--pri); }
.accordion .acc-icon { transition:transform .3s; color:var(--text3); flex-shrink:0; }
.accordion[open] .acc-icon { transform:rotate(180deg); color:var(--pri); }
.accordion .acc-body { padding:0 22px 20px; }

/* ─── 10. MARQUEE ─── */
.marquee-container { overflow:hidden; width:100%; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
@keyframes marquee { 0%{transform:translateX(0);} 100%{transform:translateX(-50%);} }
.marquee-track { display:flex; width:max-content; animation:marquee 28s linear infinite; }
.marquee-track:hover { animation-play-state:paused; }
.marquee-item { display:flex; align-items:center; justify-content:center; padding-left:34px; flex-shrink:0;
  opacity:.5; filter:grayscale(1); transition:opacity .3s, filter .3s; height:4.5rem; width:4.5rem; }
.marquee-item:hover { opacity:1; filter:grayscale(0); }

/* ─── 11. HERO SLIDER ─── */
.slider { position:relative; overflow:hidden; }
.slides { display:flex; transition:transform .7s cubic-bezier(.65,.05,.36,1); }
.slide { flex:0 0 100%; width:100%; min-width:0; }
.slider-dots { display:flex; gap:10px; justify-content:center; }
.slider-dot { width:10px; height:10px; border-radius:99px; background:var(--border); cursor:pointer;
  transition:all .3s; border:none; }
.slider-dot.active { width:30px; background:var(--pri); }
.slider-arrow { width:48px; height:48px; border-radius:50%; border:1px solid var(--border);
  background:var(--card); display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:all .25s; color:var(--text2); }
.slider-arrow:hover { border-color:var(--pri); color:var(--pri); }

/* ─── 12. TERMINAL / API KONSOL (signature) ─── */
.terminal { background:var(--ink); border:1px solid var(--border); border-radius:16px; overflow:hidden;
  box-shadow:0 30px 60px rgba(0,0,0,.28); font-family:'JetBrains Mono', monospace; }
.terminal-bar { display:flex; align-items:center; gap:8px; padding:14px 18px; background:rgba(255,255,255,.04);
  border-bottom:1px solid rgba(255,255,255,.08); }
.t-dot { width:11px; height:11px; border-radius:50%; }
.terminal-body { padding:20px 22px; font-size:13px; line-height:1.85; color:#cbd5e1; overflow-x:auto; }
.t-prompt { color:#00b894; }
.t-cmd { color:#e2e8f0; }
.t-flag { color:#55efc4; }
.t-str { color:#fdcb6e; }
.t-comment { color:#64748b; }
.t-key { color:#7dd3fc; }
.t-ok { color:#00b894; }
.t-cursor { display:inline-block; width:8px; height:15px; background:#00b894; vertical-align:middle;
  animation:blink 1s step-end infinite; }

/* ─── 13. KARTLAR & BİLEŞENLER ─── */
.feature-card { padding:28px; border-radius:18px; border:1px solid var(--border); background:var(--card);
  transition:all .3s; }
.feature-card:hover { border-color:var(--pri);
  box-shadow:0 16px 44px -26px rgba(0,184,148,.20); }
.feature-icon { width:54px; height:54px; border-radius:14px; display:flex; align-items:center;
  justify-content:center; color:var(--pri);
  background:linear-gradient(135deg, rgba(0,184,148,.16), rgba(85,239,196,.16));
  box-shadow:inset 0 0 0 1px rgba(85,239,196,.22); }

.adv-card { padding:28px; border-radius:16px; border:1px solid var(--border); background:var(--card); transition:all .3s; }
.adv-card:hover { border-color:var(--pri); box-shadow:0 12px 40px -26px rgba(0,184,148,.16); }

.who-chip { display:inline-flex; align-items:center; gap:8px; padding:12px 20px; border-radius:14px;
  border:1px solid var(--border); background:var(--card); font-weight:600; font-size:14px; transition:all .3s; }
.who-chip:hover { border-color:var(--pri); color:var(--pri); }

.check-feat { display:flex; gap:14px; align-items:flex-start; margin-bottom:24px; }
.check-dot { width:28px; height:28px; border-radius:50%; background:linear-gradient(135deg,#00b894,#00a383);
  color:#fff; display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:2px; }

/* Adım kartları */
.step-card { position:relative; text-align:center; flex:1; }
.step-num { width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  margin:0 auto 16px; font-size:1.25rem; font-weight:900; border:2px solid var(--border); background:var(--card);
  transition:all .3s; position:relative; z-index:2; }
.step-card:hover .step-num { border-color:var(--pri); background:var(--pri); color:#fff;
  box-shadow:0 0 0 6px rgba(0,184,148,.12); }
.step-connector { position:absolute; top:28px; left:calc(50% + 32px); width:calc(100% - 64px); height:0;
  border-top:2px dashed var(--border); z-index:1; }
@media (max-width:767px){ .step-connector{ display:none; } }

/* Fiyat kartı */
.price-card { position:relative; background:var(--card); border:1px solid var(--border); border-radius:18px;
  padding:30px 26px; transition:transform .3s, border-color .3s, box-shadow .3s; }
.price-card:hover { transform:translateY(-4px); border-color:var(--pri); box-shadow:0 20px 40px rgba(0,0,0,.08); }
.price-card.featured { border-color:var(--pri); box-shadow:0 12px 36px rgba(0,184,148,.18); }
.price-tag { position:absolute; top:-13px; left:50%; transform:translateX(-50%); white-space:nowrap;
  background:linear-gradient(135deg,#00b894,#00a383); color:#fff; font-size:11px; font-weight:800;
  letter-spacing:.05em; text-transform:uppercase; padding:5px 14px; border-radius:999px;
  box-shadow:0 4px 14px rgba(0,184,148,.4); }

/* Seviye / tier tablo */
.tier-row { transition:all .2s; }
.tier-row:hover { background:var(--bg3); }
.tier-row.featured { background:rgba(0,184,148,.06); }
.level-badge { display:inline-flex; align-items:center; gap:6px; padding:4px 12px; border-radius:8px;
  font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.5px; }

/* İstatistik */
.stat-card { text-align:center; padding:24px; border-radius:16px; border:1px solid var(--border); background:var(--card); }
.stat-num { font-size:2.5rem; font-weight:900; color:var(--pri); line-height:1; }

/* Tablo (dedicated/fiyat) */
.data-table { width:100%; border-collapse:collapse; }
.data-table th { padding:16px 24px; text-align:left; font-size:11px; font-weight:800; text-transform:uppercase;
  letter-spacing:.06em; color:var(--text2); background:var(--bg3); border-bottom:1px solid var(--border); }
.data-table td { padding:16px 24px; border-bottom:1px solid var(--border); }
.data-table tr:last-child td { border-bottom:none; }
.data-table tbody tr { transition:background .2s; }
.data-table tbody tr:hover { background:var(--row-hover); }

/* Form */
input:not([type='checkbox']):not([type='range']), textarea, select {
  background:var(--bg3); border:1px solid var(--border); color:var(--text); border-radius:12px; }
input:focus, textarea:focus, select:focus { border-color:var(--pri); box-shadow:0 0 0 3px rgba(0,184,148,.15); outline:none; }
input[type="checkbox"] { accent-color:var(--pri); }

/* ─── 14. PILL / SELECT (configurator OS) ─── */
/* ---- Premium işletim sistemi kartları ---- */
.os-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
@media (min-width:640px){ .os-grid { grid-template-columns:repeat(3,1fr); } }
.os-card {
  position:relative; display:flex; align-items:center; gap:13px; text-align:left;
  border:1.5px solid var(--border); background:var(--card); border-radius:15px; padding:14px;
  cursor:pointer; transition:transform .2s, border-color .2s, box-shadow .2s, background .2s; width:100%;
}
.os-card:hover { border-color:rgba(0,184,148,.45); transform:translateY(-2px);
  box-shadow:0 14px 30px -18px rgba(0,184,148,.4); }
.os-card.active { border-color:var(--pri); background:rgba(0,184,148,.06);
  box-shadow:0 0 0 1px var(--pri), 0 14px 30px -18px rgba(0,184,148,.45); }
.os-ico { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px;
  border-radius:11px; background:var(--bg2); border:1px solid var(--border); flex-shrink:0; }
.os-card.active .os-ico { background:var(--card); }
.os-ico img { height:26px; width:26px; object-fit:contain; }
.os-meta { display:flex; flex-direction:column; min-width:0; }
.os-name { font-size:14px; font-weight:700; line-height:1.2; }
.os-tag { font-size:11px; color:var(--text3); font-weight:600; margin-top:2px; }
.os-check {
  position:absolute; top:9px; right:9px; width:20px; height:20px; border-radius:50%;
  background:var(--pri); color:#fff; display:flex; align-items:center; justify-content:center;
  opacity:0; transform:scale(.5); transition:all .2s;
}
.os-check .material-symbols-outlined { font-size:14px; }
.os-card.active .os-check { opacity:1; transform:scale(1); }
[dir="rtl"] .os-card { text-align:right; }
[dir="rtl"] .os-check { right:auto; left:9px; }

/* opt-card (varsa diğer sayfalar) için sade biçim korunur */
.opt-card { border:2px solid var(--border); background:var(--card); border-radius:14px; padding:16px;
  cursor:pointer; transition:all .25s; text-align:center; }
.opt-card:hover { border-color:var(--pri); }
.opt-card.active { border-color:var(--pri); background:rgba(0,184,148,.07); }

/* ---- Ek hizmet satırları ---- */
.addon-row { display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:14px; border-radius:14px; border:1.5px solid var(--border); cursor:pointer; transition:all .2s; }
.addon-row:hover { border-color:rgba(0,184,148,.45); }
.addon-row:has(.addon-check:checked) { border-color:var(--pri); background:rgba(0,184,148,.05); }
.addon-ico { display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px;
  border-radius:10px; background:var(--bg2); border:1px solid var(--border); flex-shrink:0; }
.addon-ico .material-symbols-outlined { color:var(--pri); font-size:20px; }
.addon-check { width:20px; height:20px; accent-color:var(--pri); cursor:pointer; }

/* ─── 15. API DOKÜMAN SAYFASI ─── */
.api-layout { display:grid; grid-template-columns:240px 1fr; gap:48px; align-items:start; }
@media (max-width:1023px){ .api-layout{ grid-template-columns:1fr; } .api-sidebar{ display:none; } }
.api-sidebar { position:sticky; top:96px; }
.api-nav-group { margin-bottom:22px; }
.api-nav-title { font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.08em;
  color:var(--text3); margin-bottom:10px; }
.api-nav-link { display:block; padding:6px 12px; border-radius:8px; font-size:14px; color:var(--text2);
  transition:all .2s; border-left:2px solid transparent; }
.api-nav-link:hover, .api-nav-link.active { color:var(--pri); background:var(--bg3); border-left-color:var(--pri); }
.endpoint { border:1px solid var(--border); border-radius:14px; overflow:hidden; margin-bottom:18px; background:var(--card); }
.endpoint-head { display:flex; align-items:center; gap:14px; padding:16px 20px; }
.http-method { font-family:'JetBrains Mono', monospace; font-size:12px; font-weight:800; padding:4px 10px;
  border-radius:7px; text-transform:uppercase; letter-spacing:.04em; }
.m-get { background:rgba(14,165,233,.12); color:#0ea5e9; }
.m-post { background:rgba(0,184,148,.12); color:#00b894; }
.m-delete { background:rgba(239,68,68,.12); color:#ef4444; }
.endpoint-path { font-family:'JetBrains Mono', monospace; font-size:14px; font-weight:600; }
.code-block { background:var(--ink); border:1px solid var(--border); border-radius:12px; padding:20px;
  font-family:'JetBrains Mono', monospace; font-size:13px; line-height:1.7; overflow-x:auto; color:#cbd5e1; }
.code-block .c-key { color:#7dd3fc; } .code-block .c-str { color:#fdcb6e; }
.code-block .c-num { color:#a78bfa; } .code-block .c-cm { color:#64748b; } .code-block .c-kw { color:#00b894; }

/* ─── 16. BLOG ─── */
.blog-card { transition:all .3s; }
.blog-card:hover { transform:translateY(-4px); box-shadow:0 16px 44px rgba(0,0,0,.1); }
.blog-tag { font-size:10px; font-weight:800; padding:4px 10px; border-radius:6px; text-transform:uppercase;
  letter-spacing:.5px; background:rgba(0,184,148,.1); color:var(--pri); }

/* ─── 17. PROSE (terms) ─── */
.prose-content h2 { font-size:1.5rem; font-weight:900; margin-top:2.5rem; margin-bottom:1rem; scroll-margin-top:6rem; }
.prose-content h3 { font-size:1.15rem; font-weight:700; margin-top:1.5rem; margin-bottom:.5rem; }
.prose-content p { color:var(--text2); line-height:1.8; margin-bottom:1rem; font-size:.95rem; }
.prose-content ul { list-style:disc; padding-left:1.5rem; margin-bottom:1rem; color:var(--text2); font-size:.95rem; }
.prose-content li { margin-bottom:.5rem; line-height:1.7; }
.toc-link { display:flex; align-items:center; gap:8px; padding:8px 12px; border-radius:8px; font-size:13px;
  transition:all .2s; font-weight:500; color:var(--text2); }
.toc-link:hover, .toc-link.active { background:var(--bg3); color:var(--pri); font-weight:700; }

/* ─── 18. FOOTER ─── */
.footer { background:var(--ink); color:#cbd5e1; }
.footer a { transition:color .2s; }
.footer a:hover { color:var(--pri); }

/* ============================================================
   v2 — Marka, ikon butonları, dil/para birimi, reveal, RTL
   ============================================================ */

/* Erişilebilirlik: içeriğe geç */
.skip-link { position:absolute; left:-999px; top:0; z-index:300; background:var(--pri); color:#fff;
  padding:10px 18px; border-radius:0 0 10px 0; font-weight:700; }
.skip-link:focus { left:0; }

/* Marka logosu kutusu — sade, hafif gölge */
.brand-mark { display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px;
  border-radius:11px; background:linear-gradient(135deg,#00b894,#00a383);
  box-shadow:0 2px 8px -3px rgba(0,184,148,.4); transition:transform .3s; }

/* Header ikon butonları */
.icon-btn { width:40px; height:40px; border-radius:11px; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--border); color:var(--text2); background:transparent; transition:all .2s; }
.icon-btn:hover { border-color:var(--pri); color:var(--pri); }

/* Dil menüsü aktif + mobil çipler */
.lang-item.active { color:var(--pri); font-weight:700; }
.lang-chip { display:inline-flex; align-items:center; gap:6px; padding:7px 12px; border-radius:10px;
  border:1px solid var(--border); font-size:13px; font-weight:700; transition:all .2s; }
.lang-chip.active, .lang-chip:hover { border-color:var(--pri); color:var(--pri); }

/* Para birimi değiştirici (hero) */
.cur-switch { display:inline-flex; align-items:center; gap:4px; padding:4px; border-radius:12px;
  border:1px solid var(--border); background:var(--card); }
.cur-switch button { padding:6px 13px; border-radius:9px; font-size:13px; font-weight:700; color:var(--text2);
  transition:all .2s; white-space:nowrap; }
.cur-switch button.active { background:var(--pri); color:#fff; box-shadow:0 2px 10px rgba(0,184,148,.35); }
.cur-switch button:not(.active):hover { color:var(--pri); }

/* Slider — sürükleme imleci */
[data-slider] { touch-action:pan-y; cursor:grab; user-select:none; }
[data-slider]:active { cursor:grabbing; }
[data-slider] img, [data-slider] a { -webkit-user-drag:none; }

/* Reveal (JS varken; minimal hareket) — yalnızca gözlemci kurulduğunda gizlenir */
html.reveal-ready [data-reveal] { opacity:0; transform:translateY(22px); }
html.reveal-ready [data-reveal].revealed { opacity:1; transform:none; transition:opacity .7s ease, transform .7s ease; }
@media (prefers-reduced-motion: reduce) {
  html.reveal-ready [data-reveal] { opacity:1 !important; transform:none !important; }
}

/* Para birimi etiketi sürekliliği */
.price { font-variant-numeric: tabular-nums; }

/* eyebrow ortalama yardımcı */
.eyebrow.justify-center { justify-content:center; }

/* ---- RTL (Arapça) ---- */
[dir="rtl"] { font-family:'Noto Naskh Arabic','Outfit',sans-serif; }
[dir="rtl"] .eyebrow { letter-spacing:0; }
[dir="rtl"] .nav-link::after { left:auto; right:0; }
[dir="rtl"] .lang-menu { right:auto; left:0; }
[dir="rtl"] .dropdown { right:auto; left:0; }
[dir="rtl"] .api-nav-link { border-left:none; border-right:2px solid transparent; }
[dir="rtl"] .api-nav-link:hover, [dir="rtl"] .api-nav-link.active { border-right-color:var(--pri); }
[dir="rtl"] .terminal-body, [dir="rtl"] .code-block { direction:ltr; text-align:left; }
[dir="rtl"] .mono { direction:ltr; unicode-bidi:embed; }
[dir="rtl"] .step-num { direction:ltr; }

/* ---- Hero düzeni + para birimi konumu + slider noktaları ---- */
.hero-wrap { position:relative; }
.hero-wrap::after { content:''; position:absolute; left:0; right:0; bottom:0; height:140px;
  background:linear-gradient(to bottom, transparent, var(--bg)); pointer-events:none; z-index:5; }
.cur-switch-wrap { position:relative; z-index:20; padding-top:18px; display:flex; justify-content:flex-end; }
[dir="rtl"] .cur-switch-wrap { justify-content:flex-start; }
.slider-dots-wrap { display:flex; justify-content:center; padding:8px 0 28px; position:relative; z-index:20; }

/* ---- Premium hero metrik paneli (Slayt 1) ---- */
.hero-visual { perspective:1200px; }
.hero-panel {
  position:relative; background:var(--card);
  border:1px solid var(--border); border-radius:22px; padding:22px;
  box-shadow:0 40px 80px -24px rgba(8,15,35,.28), 0 8px 24px -12px rgba(8,15,35,.12);
}
[data-theme="dark"] .hero-panel {
  background:rgba(26,31,46,.72); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-color:rgba(255,255,255,.08);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.6);
}
.hp-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.hp-status { display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:700; color:var(--text); }
.hp-dot { width:8px; height:8px; border-radius:50%; background:var(--pri); box-shadow:0 0 0 4px rgba(0,184,148,.18); animation:hpPulse 2s ease-in-out infinite; }
.hp-title { font-size:12px; color:var(--text3); }
.hp-chart { position:relative; background:var(--bg2); border:1px solid var(--border); border-radius:14px; padding:14px 14px 8px; margin-bottom:14px; overflow:hidden; }
.hp-chart svg { width:100%; height:96px; display:block; }
.hp-line { stroke-dasharray:760; stroke-dashoffset:760; animation:hpDraw 2.2s ease forwards .2s; }
.hp-chart-label { display:flex; align-items:center; justify-content:space-between; margin-top:4px; }
.hp-tiles { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.hp-tile { background:var(--bg2); border:1px solid var(--border); border-radius:13px; padding:12px; }
.hp-tile-k { display:block; font-size:11px; color:var(--text3); font-weight:600; text-transform:uppercase; letter-spacing:.04em; }
.hp-tile-v { display:block; font-size:18px; font-weight:800; margin:3px 0 8px; }
.hp-bar { height:5px; border-radius:99px; background:var(--bg3); overflow:hidden; }
.hp-bar i { display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,var(--acc),var(--pri)); animation:hpGrow 1.4s cubic-bezier(.4,0,.2,1) forwards; transform-origin:left; }
.hp-chip {
  position:absolute; z-index:3; display:inline-flex; align-items:center; gap:6px;
  padding:8px 14px; border-radius:99px; font-size:13px; font-weight:700; color:var(--text);
  background:var(--card); border:1px solid var(--border);
  box-shadow:0 12px 30px -10px rgba(8,15,35,.30); animation:hpFloat 5s ease-in-out infinite;
}
.hp-chip .material-symbols-outlined { color:var(--pri); }
.hp-chip-1 { top:-18px; right:26px; }
.hp-chip-2 { bottom:-16px; left:14px; animation-delay:1.4s; }
[dir="rtl"] .hp-chip-1 { right:auto; left:26px; }
[dir="rtl"] .hp-chip-2 { left:auto; right:14px; }
@keyframes hpPulse { 0%,100%{ box-shadow:0 0 0 4px rgba(0,184,148,.18);} 50%{ box-shadow:0 0 0 7px rgba(0,184,148,.05);} }
@keyframes hpDraw { to { stroke-dashoffset:0; } }
@keyframes hpGrow { from { transform:scaleX(0);} to { transform:scaleX(1);} }
@keyframes hpFloat { 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-7px);} }
@media (prefers-reduced-motion: reduce) {
  .hp-dot,.hp-line,.hp-bar i,.hp-chip { animation:none; }
  .hp-line { stroke-dashoffset:0; }
}

/* ---- Prose (makale + sözleşme okunabilirliği) ---- */
.prose { color:var(--text2); }
.prose h2 { color:var(--text); font-size:1.5rem; font-weight:900; margin-top:2.4rem; margin-bottom:.9rem;
  line-height:1.3; scroll-margin-top:6rem; }
.prose h3 { color:var(--text); font-size:1.18rem; font-weight:700; margin-top:1.6rem; margin-bottom:.5rem; }
.prose p { line-height:1.85; margin-bottom:1.15rem; font-size:1rem; }
.prose ul, .prose ol { padding-left:1.4rem; margin:0 0 1.15rem; }
.prose ul { list-style:disc; } .prose ol { list-style:decimal; }
.prose li { margin-bottom:.5rem; line-height:1.75; }
.prose a { color:var(--pri); font-weight:600; }
.prose a:hover { text-decoration:underline; }
.prose strong { color:var(--text); font-weight:700; }
.prose code { font-family:'JetBrains Mono',monospace; font-size:.86em; background:var(--bg3);
  padding:.12em .45em; border-radius:6px; color:var(--pri); }
.prose blockquote { border-left:3px solid var(--pri); padding-left:1.1rem; margin:1.2rem 0; color:var(--text2); font-style:italic; }
[dir="rtl"] .prose ul, [dir="rtl"] .prose ol { padding-left:0; padding-right:1.4rem; }
[dir="rtl"] .prose blockquote { border-left:none; border-right:3px solid var(--pri); padding-left:0; padding-right:1.1rem; }
.article-body h2:first-child { margin-top:0; }

/* ============================================================
   v3 — Premium cila: gölge, hover, derinlik
   ============================================================ */
.feature-card, .adv-card, .card-surface, .price-card, .step-card, .blog-card, .stat-card {
  box-shadow:0 1px 2px rgba(8,15,35,.04), 0 8px 24px -16px rgba(8,15,35,.12);
  transition:transform .25s cubic-bezier(.4,0,.2,1), box-shadow .25s, border-color .25s;
}
.feature-card:hover, .adv-card:hover, .blog-card:hover {
  transform:none;
  box-shadow:0 1px 2px rgba(8,15,35,.05), 0 18px 46px -26px rgba(0,184,148,.32);
  border-color:rgba(0,184,148,.45);
}
[data-theme="dark"] .feature-card, [data-theme="dark"] .adv-card,
[data-theme="dark"] .card-surface, [data-theme="dark"] .price-card,
[data-theme="dark"] .step-card, [data-theme="dark"] .blog-card, [data-theme="dark"] .stat-card {
  box-shadow:0 1px 2px rgba(0,0,0,.3), 0 10px 30px -18px rgba(0,0,0,.5);
}



/* Öne çıkan fiyat kartı premium çerçeve */
.price-card.featured {
  box-shadow:0 0 0 1px rgba(0,184,148,.5), 0 30px 60px -28px rgba(0,184,148,.45);
}

/* Premium glow — yumuşak radyal geçiş base kuralından gelir (sert alt kenar yok) */

/* Eyebrow rozet inceltme */
.eyebrow { backdrop-filter:saturate(1.2); }

/* Nav cam efekti güçlendirme */
.nav-blur { backdrop-filter:saturate(1.4) blur(14px); -webkit-backdrop-filter:saturate(1.4) blur(14px); }

/* Bölüm geçiş ince çizgi yumuşatma */
.border-surface { border-color:var(--border); }

/* Tablolar premium */
.data-table tbody tr { transition:background .2s; }
.data-table tbody tr:hover { background:var(--bg2); }

/* Terminal premium gölge */
.terminal { box-shadow:0 30px 70px -30px rgba(8,15,35,.45); }

/* ============================================================
   v4 — Logo animasyonu + shine
   ============================================================ */
/* Logo: hafif hover + yalnızca harf içi shine (buton hissi YOK) */
.brand-anim { transition:transform .3s; }
.brand-link:hover .brand-mark { transform:rotate(-4deg) scale(1.05); }
.brand-mark .material-symbols-outlined { transition:transform .35s ease; }

/* Marka yazısı: parıltı yalnızca harflerin içinde gezer (background-clip:text) */
.brand-text { position:relative; }
.brand-text::after {
  content:"VDS\00A0Host"; position:absolute; left:0; top:0; white-space:nowrap; pointer-events:none;
  background-image:linear-gradient(100deg, transparent 40%, rgba(255,255,255,.85) 50%, transparent 60%);
  background-size:240% 100%; background-repeat:no-repeat;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  animation:brandShine 4.5s ease-in-out infinite;
}
[data-theme="dark"] .brand-text::after { background-image:linear-gradient(100deg, transparent 40%, rgba(255,255,255,.5) 50%, transparent 60%); }
@keyframes brandShine { 0%{ background-position:130% 0; } 55%,100%{ background-position:-30% 0; } }
@media (prefers-reduced-motion: reduce) { .brand-mark .material-symbols-outlined, .brand-text::after { animation:none; } }

/* Kullanıcının sağladığı örnek shine yardımcı sınıfı (.btn-shine) */
.btn-shine {
  color:#fff;
  background:linear-gradient(to right, #9f9f9f 0, #fff 10%, #868686 20%);
  background-position:0;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:shine 3s infinite linear; animation-fill-mode:forwards;
  font-weight:600; text-decoration:none; white-space:nowrap;
}
@keyframes shine { 0%{ background-position:0; } 60%{ background-position:180px; } 100%{ background-position:180px; } }

/* ============================================================
   v4 — VDS Yönetim Paneli Demosu
   ============================================================ */
.panel-demo {
  background:var(--card); border:1px solid var(--border); border-radius:20px; overflow:hidden;
  box-shadow:0 40px 80px -28px rgba(8,15,35,.30), 0 8px 24px -14px rgba(8,15,35,.12);
}
[data-theme="dark"] .panel-demo { box-shadow:0 40px 90px -32px rgba(0,0,0,.6); }
.pd-top { display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 18px; border-bottom:1px solid var(--border); background:var(--bg2); }
.pd-id { display:flex; align-items:center; gap:10px; }
.pd-dot { width:9px; height:9px; border-radius:50%; background:var(--pri);
  box-shadow:0 0 0 4px rgba(0,184,148,.18); animation:hpPulse 2s ease-in-out infinite; }
.pd-name { font-weight:700; font-size:14px; }
.pd-badge { font-size:11px; font-weight:700; color:var(--pri); background:rgba(0,184,148,.12);
  padding:3px 9px; border-radius:99px; }
.pd-region { font-size:12px; color:var(--text3); }
.pd-actions { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; padding:16px; }
.pd-act { display:flex; flex-direction:column; align-items:center; gap:5px; padding:11px 6px;
  border:1px solid var(--border); border-radius:11px; background:var(--card); color:var(--text2);
  font-size:11.5px; font-weight:600; transition:all .2s; cursor:default; }
.pd-act .material-symbols-outlined { font-size:20px; color:var(--pri); }
.pd-act:hover, .pd-act.is-active { border-color:var(--pri); background:rgba(0,184,148,.06); color:var(--text); }
.pd-grid { display:grid; grid-template-columns:1fr; gap:14px; padding:0 16px 18px; }
@media (min-width:520px){ .pd-grid { grid-template-columns:1.15fr .85fr; } }
.pd-stats { display:flex; flex-direction:column; gap:12px; }
.pd-stat { display:grid; grid-template-columns:46px 1fr 44px; align-items:center; gap:10px; }
.pd-stat-k { font-size:12px; font-weight:600; color:var(--text2); }
.pd-stat-v { font-size:12px; text-align:right; color:var(--text); font-weight:700; }
.pd-bar { height:7px; border-radius:99px; background:var(--bg3); overflow:hidden; }
.pd-bar i { display:block; height:100%; border-radius:99px; width:0;
  background:linear-gradient(90deg,var(--acc),var(--pri)); transition:width 1.1s cubic-bezier(.4,0,.2,1); }
.pd-net { margin-top:4px; padding-top:12px; border-top:1px solid var(--border); }
.pd-net-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; font-size:12px; }
.pd-net-head .mono { font-size:12px; font-weight:700; }
.pd-net svg { width:100%; height:60px; display:block; }
.pd-log { background:var(--ink); border-radius:13px; padding:14px; font-size:11.5px; line-height:1.9; color:#cbd5e1; }
.pd-log-title { color:#64748b; font-size:10px; text-transform:uppercase; letter-spacing:.08em; margin-bottom:6px; }
.pd-ok { color:#27c93f; font-weight:700; }
.pd-run { color:#f0a000; }
.pd-t { color:#64748b; }
[dir="rtl"] .pd-name, [dir="rtl"] .pd-log, [dir="rtl"] .pd-region { direction:ltr; }
@media (prefers-reduced-motion: reduce){ .pd-dot, .pd-bar i { animation:none; } }

/* ============================================================
   v4 — Tooltip + CPU model kartları
   ============================================================ */
/* Spec tooltip */
.tip { position:relative; display:inline-flex; align-items:center; gap:5px; cursor:help; outline:none; }
.tip-i { font-size:14px !important; color:var(--text3); transition:color .2s; }
.tip:hover .tip-i, .tip:focus .tip-i { color:var(--pri); }
.tip-box {
  position:absolute; bottom:calc(100% + 9px); left:0; z-index:40; width:max-content; max-width:220px;
  background:var(--ink); color:#e2e8f0; font-size:12px; font-weight:500; line-height:1.5;
  padding:9px 12px; border-radius:10px; box-shadow:0 12px 30px -10px rgba(0,0,0,.4);
  opacity:0; transform:translateY(4px); pointer-events:none; transition:all .18s; white-space:normal;
}
.tip-box::after { content:""; position:absolute; top:100%; left:18px; border:6px solid transparent; border-top-color:var(--ink); }
.tip:hover .tip-box, .tip:focus .tip-box, .tip:focus-within .tip-box { opacity:1; transform:translateY(0); }
[dir="rtl"] .tip-box { left:auto; right:0; }
[dir="rtl"] .tip-box::after { left:auto; right:18px; }

/* CPU model kartları */
.cpu-grid { display:grid; grid-template-columns:1fr; gap:12px; }
@media (min-width:560px){ .cpu-grid { grid-template-columns:repeat(3,1fr); } }
.cpu-card {
  position:relative; display:flex; flex-direction:column; gap:3px; text-align:left;
  border:1.5px solid var(--border); background:var(--card); border-radius:15px; padding:15px 16px;
  cursor:pointer; transition:transform .2s, border-color .2s, box-shadow .2s, background .2s; width:100%;
}
.cpu-card:hover { border-color:rgba(0,184,148,.45); transform:translateY(-2px); box-shadow:0 14px 30px -18px rgba(0,184,148,.4); }
.cpu-card.active { border-color:var(--pri); background:rgba(0,184,148,.06); box-shadow:0 0 0 1px var(--pri), 0 14px 30px -18px rgba(0,184,148,.45); }
.cpu-name { font-size:14px; font-weight:700; line-height:1.25; padding-right:22px; }
.cpu-note { font-size:11px; color:var(--text3); }
.cpu-rate { font-size:12px; font-weight:700; color:var(--pri); margin-top:6px; }
.cpu-check { position:absolute; top:11px; right:11px; width:20px; height:20px; border-radius:50%;
  background:var(--pri); color:#fff; display:flex; align-items:center; justify-content:center;
  opacity:0; transform:scale(.5); transition:all .2s; }
.cpu-check .material-symbols-outlined { font-size:14px; }
.cpu-card.active .cpu-check { opacity:1; transform:scale(1); }
[dir="rtl"] .cpu-card { text-align:right; }
[dir="rtl"] .cpu-name { padding-right:0; padding-left:22px; }
[dir="rtl"] .cpu-check { right:auto; left:11px; }

/* ============================================================
   v5 — Header para birimi <select> + Sekmeli panel demosu
   ============================================================ */
.cur-select-wrap { position:relative; display:inline-flex; align-items:center; }
.cur-select-ico { position:absolute; left:9px; font-size:17px !important; color:var(--text3); pointer-events:none; }
.cur-select {
  appearance:none; -webkit-appearance:none; cursor:pointer;
  background:var(--bg2); border:1px solid var(--border); color:var(--text);
  font-size:13px; font-weight:600; font-family:inherit;
  padding:7px 26px 7px 30px; border-radius:10px; transition:border-color .2s, background .2s;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 8px center;
}
.cur-select:hover { border-color:rgba(0,184,148,.5); }
.cur-select:focus-visible { outline:2px solid var(--pri); outline-offset:1px; }
[dir="rtl"] .cur-select-ico { left:auto; right:9px; }
[dir="rtl"] .cur-select { padding:7px 30px 7px 26px; background-position:left 8px center; }

/* Sekmeler */
.pd-tabs { display:flex; gap:3px; padding:8px 10px 0; border-bottom:1px solid var(--border); background:var(--bg2); overflow-x:auto; scrollbar-width:none; }
.pd-tabs::-webkit-scrollbar { display:none; }
.pd-tab {
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
  padding:9px 13px; border:none; background:none; cursor:pointer;
  font-size:12.5px; font-weight:600; color:var(--text2); border-bottom:2px solid transparent;
  border-radius:8px 8px 0 0; transition:color .2s, border-color .2s, background .2s;
}
.pd-tab .material-symbols-outlined { font-size:17px; }
.pd-tab:hover { color:var(--text); background:rgba(0,184,148,.05); }
.pd-tab.is-active { color:var(--pri); border-bottom-color:var(--pri); }
.pd-body { padding:18px; min-height:208px; }
.pd-pane { display:none; animation:pdFade .25s ease; }
.pd-pane.is-active { display:block; }
@keyframes pdFade { from{ opacity:0; transform:translateY(4px); } to{ opacity:1; transform:none; } }

/* Yeniden kurulum / firewall / konsol */
.pd-note { font-size:12.5px; color:var(--text2); margin-bottom:12px; line-height:1.5; }
.pd-note.mb-0 { margin-bottom:0; }
.pd-os { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin-bottom:14px; }
@media (min-width:420px){ .pd-os { grid-template-columns:repeat(4,1fr); } }
.pd-os-item { display:flex; flex-direction:column; align-items:center; gap:6px; padding:11px 6px;
  border:1.5px solid var(--border); border-radius:11px; font-size:11.5px; font-weight:600; text-align:center; transition:all .2s; }
.pd-os-item img { width:24px; height:24px; object-fit:contain; }
.pd-os-item.is-active { border-color:var(--pri); background:rgba(0,184,148,.06); }
.pd-cta, .pd-chip-btn { display:inline-flex; align-items:center; gap:7px; cursor:pointer; font-family:inherit; }
.pd-cta { width:100%; justify-content:center; padding:11px; border-radius:11px; border:none;
  background:linear-gradient(135deg,var(--pri),var(--pri2)); color:#fff; font-size:13px; font-weight:700; }
.pd-cta .material-symbols-outlined { font-size:18px; }
.pd-fw-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }
.pd-chip-btn { font-size:11.5px; font-weight:600; color:var(--pri); background:rgba(0,184,148,.1);
  border:none; padding:6px 11px; border-radius:99px; }
.pd-chip-btn .material-symbols-outlined { font-size:15px; }
.pd-fw { display:flex; flex-direction:column; gap:7px; }
.pd-fw-row { display:grid; grid-template-columns:74px 42px 44px 1fr; align-items:center; gap:8px;
  font-size:12px; padding:9px 11px; border:1px solid var(--border); border-radius:9px;
  transition:border-color .2s, background .2s; }
.pd-fw-row:hover { border-color:rgba(0,184,148,.4); background:rgba(0,184,148,.04); }
.pd-fw-act { font-weight:700; font-size:10.5px; padding:2px 7px; border-radius:6px; text-align:center; border:1px solid transparent; }
.pd-fw-accept { color:#27c93f; background:rgba(39,201,63,.12); border-color:rgba(39,201,63,.3); }
.pd-fw-drop { color:#ff5f56; background:rgba(255,95,86,.12); border-color:rgba(255,95,86,.3); }
.pd-fw-note { color:var(--text3); }
.pd-console { background:var(--ink); border-radius:12px; padding:15px; font-size:12px; line-height:1.85; color:#cbd5e1; min-height:150px; }
.pd-cprompt { color:#00b894; }
.pd-cok { color:#27c93f; }
.pd-ccursor { display:inline-block; width:7px; height:14px; background:#00b894; vertical-align:middle; animation:tCursor 1s step-end infinite; }
[dir="rtl"] .pd-console, [dir="rtl"] .pd-fw, [dir="rtl"] .pd-name, [dir="rtl"] .pd-region { direction:ltr; }

/* ── Panel demo eklentileri (başlık çipleri, güç bölümü, canlı sparkline, yedek) ── */
.pd-meta { display:flex; align-items:center; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
.pd-chip { font-size:11px; font-weight:600; color:var(--text3); background:var(--bg3);
  border:1px solid var(--border); padding:2px 8px; border-radius:7px; white-space:nowrap; }
.pd-chip b { color:var(--text2); font-weight:700; }
[dir="rtl"] .pd-chip { direction:ltr; }

/* Genel sekmesi güç bölümü */
.pd-power { margin-top:16px; padding-top:14px; border-top:1px solid var(--border); }
.pd-section-k { display:block; font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--text3); margin-bottom:10px; }
.pd-power .pd-actions { padding:0; grid-template-columns:repeat(4,1fr); }
@media (max-width:380px){ .pd-power .pd-actions { grid-template-columns:repeat(2,1fr); } }

/* Canlı ağ sparkline — görünürlükte çizilir, uçta nabız atan nokta */
.pd-spark-line { stroke-dasharray:620; stroke-dashoffset:620; }
.pd-animate .pd-spark-line { animation:pdDraw 1.6s cubic-bezier(.4,0,.2,1) forwards; }
.pd-spark-dot { fill:#00b894; opacity:0; }
.pd-animate .pd-spark-dot { animation:pdDotIn .3s ease 1.5s forwards; }
.pd-spark-pulse { fill:none; stroke:#00b894; transform-origin:center; transform-box:fill-box; opacity:0; }
.pd-animate .pd-spark-pulse { animation:pdPing 1.8s ease-out 1.6s infinite; }
@keyframes pdDraw { to { stroke-dashoffset:0; } }
@keyframes pdDotIn { to { opacity:1; } }
@keyframes pdPing { 0%{ opacity:.6; transform:scale(.4); } 100%{ opacity:0; transform:scale(2.4); } }

/* Yedek sekmesi */
.pd-bk { display:flex; flex-direction:column; gap:8px; }
.pd-bk-row { display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 12px; border:1px solid var(--border); border-radius:10px;
  transition:border-color .2s, background .2s; }
.pd-bk-row:hover { border-color:rgba(0,184,148,.4); background:rgba(0,184,148,.04); }
.pd-bk-info { display:flex; flex-direction:column; gap:2px; min-width:0; }
.pd-bk-date { font-size:12.5px; font-weight:700; color:var(--text); }
.pd-bk-meta { font-size:11px; color:var(--text3); }
.pd-bk-tag { display:inline-block; font-size:10px; font-weight:700; padding:1px 6px; border-radius:5px;
  background:rgba(0,184,148,.12); color:var(--pri); margin-right:6px; }
[dir="rtl"] .pd-bk-tag { margin-right:0; margin-left:6px; }
.pd-bk-actions { display:flex; align-items:center; gap:6px; flex-shrink:0; }
.pd-bk-btn { display:inline-flex; align-items:center; gap:5px; font-family:inherit; font-size:11.5px;
  font-weight:600; padding:6px 11px; border-radius:8px; border:1px solid var(--border);
  background:var(--card); color:var(--text2); cursor:default; transition:all .2s; }
.pd-bk-btn .material-symbols-outlined { font-size:15px; }
.pd-bk-restore:hover { border-color:var(--pri); color:var(--pri); background:rgba(0,184,148,.06); }
.pd-bk-del { width:34px; height:32px; justify-content:center; padding:0; }
.pd-bk-del:hover { border-color:#ff5f56; color:#ff5f56; background:rgba(255,95,86,.06); }
[dir="rtl"] .pd-bk-date { direction:ltr; text-align:right; }
/* ============================================================
   v6 — MOBİL UYUM DÜZELTMELERİ
   Yalnızca küçük ekranlarda (≤640px) uygulanır; masaüstü/tablet
   görünümü (md: ≥768px Tailwind breakpoint'i) hiç etkilenmez.
   ============================================================ */
@media (max-width:640px){

  /* Hero & sayfa başlıkları: uzun tek kelimelerin (DE/RU/TR) taşıp
     kırpılmasını önle; ekran genişliğine göre yumuşakça ölçekle.
     clamp üst sınırı 2.25rem (text-4xl) olduğundan ~450px üzerinde
     başlık boyutu hiç değişmez; yalnızca dar telefonlarda küçülür. */
  .hero-title{
    font-size:clamp(1.65rem, 8vw, 2.25rem);
    overflow-wrap:break-word;
    word-break:break-word;
    hyphens:auto;
  }

  /* Hero alt metni de aynı şekilde taşmaya karşı korunsun */
  .hero-title + p{ overflow-wrap:break-word; }

  /* Veri tabloları (bayilik tier / dedike fiyat): mobilde hücre dolgusunu
     küçült — yatay kaydırma ihtiyacı azalır, içerik sığar.
     Tablolar zaten overflow-x-auto sarmalında olduğundan taşma güvenli. */
  .data-table th,
  .data-table td{ padding:11px 12px; }
  .data-table th{ font-size:10px; letter-spacing:.04em; }

  /* Uzun mono değerlerin (fiyat aralıkları vb.) satırı kırması yerine
     gerektiğinde sarması için */
  .data-table td .mono, .data-table td.mono{ white-space:normal; }
}