/* =========================================================================
   NEXUM DIGITAL — Tasarım Sistemi
   Tema: "Mimari Şema" — özel yazılım mimarisi kavramından türetilmiş,
   teknik çizim / devre şeması estetiği. Pazarlama sayfaları koyu "mühendislik"
   temasını kullanır; mağaza / sepet / ödeme / müşteri paneli gibi işlemsel
   yüzeyler bilinçli olarak açık ve yüksek netlikte bir "operasyon" temasına
   geçer (ödeme bilgisi girilen ekranlarda güven ve okunabilirlik önceliklidir).
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* -------------------------------------------------------------------------
   1. DESIGN TOKENS
   ------------------------------------------------------------------------- */
:root{
  /* -- Koyu tema (kurumsal / pazarlama sayfaları) -- */
  --ink-950:#0A0D12;
  --ink-900:#0F131A;
  --ink-850:#131822;
  --ink-800:#181F2B;
  --ink-700:#232C3B;
  --ink-600:#333F53;
  --line-dark:#242C3A;

  --text-hi:#EEF1F7;
  --text-md:#B7BFCE;
  --text-lo:#7C879C;

  /* -- Açık tema (mağaza / sepet / ödeme / müşteri paneli) -- */
  --paper-0:#FFFFFF;
  --paper-50:#F5F7FA;
  --paper-100:#ECEFF4;
  --paper-200:#DFE4EC;
  --paper-line:#E1E5EC;
  --slate-900:#171C26;
  --slate-700:#3C4658;
  --slate-500:#6B7688;

  /* -- Marka vurguları -- */
  --amber-400:#F0954A;
  --amber-500:#E8823A;
  --amber-600:#C96A28;
  --amber-tint:#FCE8D6;

  --blueprint-500:#2C5FA8;
  --blueprint-600:#204D8C;
  --blueprint-700:#1A3D6E;
  --blueprint-tint:#E4ECF9;

  --cyan-500:#3FB8AE;
  --cyan-tint:#DCF4F1;
  --red-500:#D24949;
  --red-tint:#FBE4E4;

  /* -- Tipografi -- */
  --font-display:'Space Grotesk', 'IBM Plex Sans', sans-serif;
  --font-body:'IBM Plex Sans', sans-serif;
  --font-mono:'IBM Plex Mono', monospace;

  /* -- Ölçüler -- */
  --container:1240px;
  --container-narrow:840px;
  --radius-s:6px;
  --radius-m:10px;
  --radius-l:18px;
  --gap-section:7rem;
  --gap-section-m:4rem;

  --shadow-card:0 1px 2px rgba(10,13,18,.04), 0 12px 32px -12px rgba(10,13,18,.10);
  --shadow-card-dark:0 1px 0 rgba(255,255,255,.03) inset, 0 20px 48px -20px rgba(0,0,0,.55);
  --shadow-pop:0 20px 60px -16px rgba(10,13,18,.35);
}

/* -------------------------------------------------------------------------
   2. RESET & BASE
   ------------------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}
body{
  margin:0;
  font-family:var(--font-body);
  background:var(--ink-950);
  color:var(--text-md);
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
}
body.tema-acik{ background:var(--paper-50); color:var(--slate-700); }

img,svg{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul,ol{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; }
input,select,textarea{ font-family:inherit; font-size:inherit; }
h1,h2,h3,h4,h5,p,figure{ margin:0; }

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

h1,h2,h3,h4{ font-family:var(--font-display); color:var(--text-hi); font-weight:600; letter-spacing:-.01em; }
.tema-acik h1,.tema-acik h2,.tema-acik h3,.tema-acik h4{ color:var(--slate-900); }

.d-h1{ font-size:clamp(2.4rem,4.6vw,4.4rem); line-height:1.04; font-weight:700; }
.d-h2{ font-size:clamp(1.9rem,3.2vw,2.75rem); line-height:1.1; }
.d-h3{ font-size:clamp(1.3rem,1.8vw,1.6rem); line-height:1.25; }
.d-lead{ font-size:clamp(1.05rem,1.4vw,1.25rem); color:var(--text-md); line-height:1.65; }
.tema-acik .d-lead{ color:var(--slate-500); }

.mono{ font-family:var(--font-mono); }
.eyebrow{
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--amber-500); display:inline-flex; align-items:center; gap:.55em; font-weight:500;
}
.eyebrow::before{ content:""; width:18px; height:1px; background:var(--amber-500); display:inline-block; }
.eyebrow.eyebrow--alt{ color:var(--blueprint-500); }
.eyebrow.eyebrow--alt::before{ background:var(--blueprint-500); }

/* -------------------------------------------------------------------------
   3. LAYOUT
   ------------------------------------------------------------------------- */
.container{ max-width:var(--container); margin:0 auto; padding:0 1.75rem; }
.container--narrow{ max-width:var(--container-narrow); }
.section{ padding:var(--gap-section) 0; position:relative; }
.section--tight{ padding:var(--gap-section-m) 0; }
.section--panel{ background:var(--ink-900); border-top:1px solid var(--line-dark); border-bottom:1px solid var(--line-dark); }
.section--paper{ background:var(--paper-0); }
.section--paper-alt{ background:var(--paper-50); }
.section-head{ max-width:680px; margin-bottom:3.2rem; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head .eyebrow{ margin-bottom:1rem; }
.section-head h2{ margin-top:.6rem; }
.section-head p{ margin-top:1rem; }

.grid{ display:grid; gap:1.75rem; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:980px){ .grid-3,.grid-4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; } }

.blueprint-bg{
  background-image:
    linear-gradient(var(--line-dark) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-dark) 1px, transparent 1px);
  background-size:42px 42px;
  background-position:center top;
}
.blueprint-fade{ position:relative; }
.blueprint-fade::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 0%, var(--ink-950) 92%);
  pointer-events:none;
}

/* köşe reticle süsü — teknik çizim çerçevesi */
.reticle{ position:relative; }
.reticle::before,.reticle::after{
  content:""; position:absolute; width:14px; height:14px; opacity:.5;
  border:1.5px solid var(--amber-500); pointer-events:none;
}
.reticle::before{ top:-1px; left:-1px; border-right:none; border-bottom:none; }
.reticle::after{ bottom:-1px; right:-1px; border-left:none; border-top:none; }

/* -------------------------------------------------------------------------
   4. BUTTONLAR
   ------------------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  padding:.85rem 1.5rem; border-radius:var(--radius-s); border:1px solid transparent;
  font-weight:600; font-size:.95rem; white-space:nowrap; transition:transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
}
.btn svg{ width:16px; height:16px; }
.btn:hover{ transform:translateY(-1px); }
.btn-amber{ background:var(--amber-500); color:#1B1002; }
.btn-amber:hover{ background:var(--amber-400); }
.btn-ghost-dark{ border-color:var(--ink-600); color:var(--text-hi); }
.btn-ghost-dark:hover{ border-color:var(--amber-500); color:var(--amber-400); }
.tema-acik .btn-ghost-dark{ border-color:var(--paper-200); color:var(--slate-700); }
.tema-acik .btn-ghost-dark:hover{ border-color:var(--amber-500); color:var(--amber-600); }
.btn-outline-blue{ border-color:var(--blueprint-500); color:var(--blueprint-500); }
.tema-acik .btn-outline-blue:hover, .btn-outline-blue:hover{ background:var(--blueprint-tint); }
.btn-primary-blue{ background:var(--blueprint-600); color:#fff; }
.btn-primary-blue:hover{ background:var(--blueprint-500); }
.btn-block{ width:100%; }
.btn-sm{ padding:.55rem 1rem; font-size:.85rem; }
.btn-lg{ padding:1.05rem 2rem; font-size:1.02rem; }
.btn[disabled]{ opacity:.5; cursor:not-allowed; transform:none !important; }

/* -------------------------------------------------------------------------
   5. NAVBAR + MEGA MENÜ
   ------------------------------------------------------------------------- */
.topbar{
  background:var(--ink-900); border-bottom:1px solid var(--line-dark);
  font-family:var(--font-mono); font-size:.76rem; color:var(--text-lo);
}
.topbar .container{ display:flex; justify-content:space-between; align-items:center; height:38px; }
.topbar a{ color:var(--text-lo); }
.topbar a:hover{ color:var(--amber-500); }
.topbar-links{ display:flex; gap:1.4rem; }
.topbar-links span{ opacity:.5; margin:0 .2rem; }
@media (max-width:780px){ .topbar{ display:none; } }

.navbar{
  position:sticky; top:0; z-index:60; background:rgba(10,13,18,.86); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-dark);
}
.navbar .container{ display:flex; align-items:center; justify-content:space-between; height:74px; gap:2rem; }
.brand{ display:flex; align-items:center; gap:.65rem; font-family:var(--font-display); font-weight:700; font-size:1.18rem; color:var(--text-hi); flex-shrink:0; }
.brand-mark{ width:34px; height:34px; flex-shrink:0; }
.brand small{ display:block; font-family:var(--font-mono); font-size:.58rem; letter-spacing:.14em; color:var(--amber-500); font-weight:500; }

.nav-main{ display:flex; align-items:center; gap:.35rem; flex:1; justify-content:center; }
.nav-item{ position:relative; }
.nav-link{
  display:flex; align-items:center; gap:.35rem; padding:.7rem .95rem; font-size:.92rem; font-weight:500;
  color:var(--text-md); border-radius:var(--radius-s);
}
.nav-link:hover, .nav-item.active .nav-link{ color:var(--text-hi); background:var(--ink-800); }
.nav-link svg{ width:14px; height:14px; opacity:.6; transition:transform .18s ease; }
.nav-item:hover .nav-link svg{ transform:rotate(180deg); }

.mega{
  position:absolute; top:calc(100% + 10px); left:50%; transform:translateX(-50%);
  width:640px; background:var(--ink-850); border:1px solid var(--line-dark); border-radius:var(--radius-m);
  box-shadow:var(--shadow-pop); padding:1.5rem; display:grid; grid-template-columns:1.1fr 1fr; gap:1.5rem;
  opacity:0; visibility:hidden; translate:0 6px; transition:opacity .16s ease, translate .16s ease, visibility .16s;
}
.nav-item:hover .mega{ opacity:1; visibility:visible; translate:0 0; }
.mega-col-title{ font-family:var(--font-mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--text-lo); margin-bottom:.85rem; }
.mega-link{ display:flex; gap:.7rem; padding:.55rem; border-radius:var(--radius-s); align-items:flex-start; }
.mega-link:hover{ background:var(--ink-800); }
.mega-link svg{ width:18px; height:18px; color:var(--amber-500); flex-shrink:0; margin-top:.15rem; }
.mega-link strong{ display:block; color:var(--text-hi); font-size:.87rem; font-weight:600; }
.mega-link span{ font-size:.78rem; color:var(--text-lo); }
.mega-feature{ background:var(--ink-800); border:1px solid var(--line-dark); border-radius:var(--radius-s); padding:1.1rem; }
.mega-feature .eyebrow{ font-size:.62rem; }
.mega-feature h4{ font-size:.98rem; margin:.5rem 0 .4rem; }
.mega-feature p{ font-size:.8rem; color:var(--text-lo); margin-bottom:.9rem; }

.nav-actions{ display:flex; align-items:center; gap:.7rem; flex-shrink:0; }
.icon-btn{ width:40px; height:40px; display:flex; align-items:center; justify-content:center; border-radius:var(--radius-s); color:var(--text-md); position:relative; border:1px solid transparent; }
.icon-btn:hover{ background:var(--ink-800); color:var(--text-hi); }
.icon-btn svg{ width:19px; height:19px; }
/* NOT: .icon-btn yalnızca DAİMA koyu renkli navbar içinde kullanılmalıdır (navbar arka
   planı tema fark etmeksizin koyu kalır). Sayfa İÇERİĞİNDE (kart, tablo, satır vb.)
   küçük bir ikon buton gerekiyorsa — ör. "sepetten kaldır" — bunun yerine aşağıdaki
   tema-duyarlı .icon-btn-hafif sınıfı kullanılmalıdır. */
.icon-btn-hafif{ width:36px; height:36px; display:flex; align-items:center; justify-content:center; border-radius:var(--radius-s); color:var(--text-lo); flex-shrink:0; }
.icon-btn-hafif:hover{ background:var(--red-tint); color:#8A2E2E; }
.icon-btn-hafif svg{ width:17px; height:17px; }
.tema-acik .icon-btn-hafif{ color:var(--slate-500); }
.cart-count{ position:absolute; top:2px; right:2px; background:var(--amber-500); color:#1b1002; font-family:var(--font-mono); font-size:.62rem; font-weight:700; width:16px; height:16px; border-radius:50%; display:flex; align-items:center; justify-content:center; }

.burger{ display:none; width:40px; height:40px; align-items:center; justify-content:center; color:var(--text-hi); }
@media (max-width:1080px){
  .nav-main, .mega{ display:none; }
  .burger{ display:flex; }
}
@media (max-width:480px){ .brand span.brand-full{ display:none; } }

.mobil-menu{ position:fixed; inset:0; background:var(--ink-950); z-index:80; padding:1.5rem; transform:translateX(100%); transition:transform .25s ease; overflow-y:auto; }
.mobil-menu.acik{ transform:translateX(0); }
.mobil-menu-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:2rem; }
.mobil-menu a.mobil-link{ display:block; padding:.9rem 0; font-family:var(--font-display); font-size:1.3rem; color:var(--text-hi); border-bottom:1px solid var(--line-dark); }
.mobil-alt{ padding-left:1rem; }
.mobil-alt a{ font-size:1rem !important; font-family:var(--font-body) !important; color:var(--text-md) !important; padding:.6rem 0 !important; border:none !important; }

/* -------------------------------------------------------------------------
   6. HERO
   ------------------------------------------------------------------------- */
.hero{ position:relative; overflow:hidden; padding:5.5rem 0 5rem; }
.hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:3rem; align-items:center; }
@media (max-width:980px){ .hero-grid{ grid-template-columns:1fr; } }
.hero-copy .eyebrow{ margin-bottom:1.3rem; }
.hero-copy p.d-lead{ margin:1.4rem 0 2rem; max-width:520px; }
.hero-actions{ display:flex; gap:1rem; flex-wrap:wrap; }
.hero-figure-cap{ font-family:var(--font-mono); font-size:.68rem; color:var(--text-lo); letter-spacing:.06em; margin-top:.9rem; text-align:center; }
.hero-stats{ display:flex; gap:2.2rem; margin-top:3.2rem; flex-wrap:wrap; }
.hero-stat b{ font-family:var(--font-mono); font-size:1.7rem; color:var(--text-hi); display:block; }
.hero-stat span{ font-size:.8rem; color:var(--text-lo); }

@keyframes trace-in{ from{ stroke-dashoffset:1400; } to{ stroke-dashoffset:0; } }
.trace-path{ stroke-dasharray:1400; stroke-dashoffset:1400; animation:trace-in 2.4s ease forwards; }
@keyframes node-pulse{ 0%,100%{ opacity:.55; } 50%{ opacity:1; } }
.node-pulse{ animation:node-pulse 3s ease-in-out infinite; }
@keyframes fade-up{ from{ opacity:0; translate:0 14px; } to{ opacity:1; translate:0 0; } }
.fade-up{ animation:fade-up .7s ease both; }
.fade-up.d1{ animation-delay:.08s; } .fade-up.d2{ animation-delay:.16s; } .fade-up.d3{ animation-delay:.24s; }

/* -- Ana Sayfa Slider -- */
.hero-slider{ position:relative; min-height:300px; }
.slide{ position:absolute; inset:0; opacity:0; visibility:hidden; transition:opacity .5s ease; }
.slide.aktif{ position:relative; opacity:1; visibility:visible; }
.slide-dots{ display:flex; gap:.6rem; margin-top:2.6rem; }
.slide-dots button{ width:34px; height:3px; background:var(--ink-600); border:none; border-radius:2px; padding:0; transition:background .2s; }
.slide-dots button.aktif{ background:var(--amber-500); }
.slide-nav{ display:flex; gap:.6rem; position:absolute; right:0; bottom:-4.4rem; }
.slide-nav button{ width:42px; height:42px; border-radius:50%; border:1px solid var(--ink-600); background:transparent; color:var(--text-hi); display:flex; align-items:center; justify-content:center; }
.slide-nav button:hover{ border-color:var(--amber-500); color:var(--amber-500); }
.slide-nav svg{ width:16px; height:16px; }
@media (max-width:980px){ .slide-nav{ position:static; margin-top:2rem; } }

/* -------------------------------------------------------------------------
   7. KARTLAR
   ------------------------------------------------------------------------- */
.card{
  background:var(--ink-800); border:1px solid var(--line-dark); border-radius:var(--radius-m);
  padding:1.9rem; transition:transform .2s ease, border-color .2s ease;
}
.card:hover{ transform:translateY(-3px); border-color:var(--ink-600); }
.card-icon{ width:46px; height:46px; border-radius:var(--radius-s); background:var(--ink-700); display:flex; align-items:center; justify-content:center; color:var(--amber-500); margin-bottom:1.3rem; }
.card-icon svg{ width:22px; height:22px; }
.card h3{ font-size:1.1rem; margin-bottom:.6rem; }
.card p{ font-size:.9rem; color:var(--text-lo); }
.card-list{ margin-top:1rem; display:flex; flex-direction:column; gap:.5rem; }
.card-list li{ font-size:.83rem; color:var(--text-md); display:flex; gap:.5rem; align-items:flex-start; }
.card-list svg{ width:14px; height:14px; color:var(--cyan-500); flex-shrink:0; margin-top:.2rem; }
.card-link{ margin-top:1.2rem; display:inline-flex; align-items:center; gap:.4rem; font-size:.85rem; font-weight:600; color:var(--amber-500); }
.card-link svg{ width:14px; height:14px; transition:translate .15s ease; }
.card:hover .card-link svg{ translate:3px 0; }

.tema-acik .card{ background:var(--paper-0); border-color:var(--paper-line); box-shadow:var(--shadow-card); }
.tema-acik .card:hover{ border-color:var(--slate-500); }
.tema-acik .card p{ color:var(--slate-500); }

.panel-stat{ background:var(--ink-800); border:1px solid var(--line-dark); border-radius:var(--radius-m); padding:1.5rem; }
.panel-stat b{ font-family:var(--font-mono); font-size:2rem; color:var(--text-hi); display:block; }
.panel-stat span{ font-size:.8rem; color:var(--text-lo); }

/* takım / kişi kartı */
.avatar{ width:100%; aspect-ratio:1/1; border-radius:var(--radius-m); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700; font-size:2.1rem; color:#fff; margin-bottom:1.1rem; position:relative; overflow:hidden; }
.avatar::after{ content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.14) 1px, transparent 1px),linear-gradient(90deg, rgba(255,255,255,.14) 1px, transparent 1px); background-size:12px 12px; }
.person-card h4{ font-size:1.02rem; color:var(--text-hi); font-family:var(--font-display); margin-bottom:.15rem; }
.person-card span{ font-size:.8rem; color:var(--amber-500); font-family:var(--font-mono); }
.person-card p{ font-size:.83rem; color:var(--text-lo); margin-top:.6rem; }

/* partner logosu (metinsel monogram) */
.partner-badge{ height:74px; border:1px solid var(--line-dark); border-radius:var(--radius-s); display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-weight:600; letter-spacing:.04em; color:var(--text-md); background:var(--ink-800); font-size:.95rem; transition:border-color .2s, color .2s; }
.partner-badge:hover{ border-color:var(--amber-500); color:var(--text-hi); }

/* -------------------------------------------------------------------------
   8. ROZET / DURUM ETİKETİ
   ------------------------------------------------------------------------- */
.badge{ display:inline-flex; align-items:center; gap:.4rem; font-family:var(--font-mono); font-size:.7rem; letter-spacing:.04em; padding:.3rem .65rem; border-radius:30px; font-weight:500; }
.badge-amber{ background:var(--amber-tint); color:var(--amber-600); }
.badge-blue{ background:var(--blueprint-tint); color:var(--blueprint-600); }
.badge-cyan{ background:var(--cyan-tint); color:#1E7268; }
.badge-red{ background:var(--red-tint); color:var(--red-500); }
.badge-outline{ background:transparent; border:1px solid var(--ink-600); color:var(--text-md); }
.tema-acik .badge-outline{ border-color:var(--paper-200); color:var(--slate-500); }
.badge::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }

/* -------------------------------------------------------------------------
   9. SÜREÇ / ZAMAN ÇİZGİSİ (yalnız gerçekten sıralı içerik için)
   ------------------------------------------------------------------------- */
.stepper{ position:relative; }
.stepper::before{ content:""; position:absolute; left:23px; top:8px; bottom:8px; width:1px; background:repeating-linear-gradient(180deg, var(--ink-600) 0 6px, transparent 6px 12px); }
.tema-acik .stepper::before{ background:repeating-linear-gradient(180deg, var(--paper-200) 0 6px, transparent 6px 12px); }
.step{ position:relative; padding-left:64px; padding-bottom:2.6rem; }
.step:last-child{ padding-bottom:0; }
.step-num{ position:absolute; left:0; top:0; width:48px; height:48px; border-radius:50%; background:var(--ink-800); border:1px solid var(--ink-600); display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-weight:600; color:var(--amber-500); }
.tema-acik .step-num{ background:var(--paper-0); border-color:var(--paper-200); box-shadow:var(--shadow-card); }
.step h3{ font-size:1.08rem; margin-bottom:.5rem; }
.step p{ font-size:.9rem; color:var(--text-lo); max-width:560px; }
.tema-acik .step p{ color:var(--slate-500); }

/* -------------------------------------------------------------------------
   10. FORMLAR
   ------------------------------------------------------------------------- */
.f-group{ margin-bottom:1.3rem; }
.f-row{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; }
@media (max-width:640px){ .f-row{ grid-template-columns:1fr; } }
label{ display:block; font-size:.83rem; font-weight:600; margin-bottom:.5rem; color:var(--text-hi); }
.tema-acik label{ color:var(--slate-900); }
.f-hint{ font-size:.76rem; color:var(--text-lo); margin-top:.4rem; }
.tema-acik .f-hint{ color:var(--slate-500); }
input[type=text],input[type=email],input[type=tel],input[type=password],input[type=number],input[type=date],input[type=search],select,textarea{
  width:100%; padding:.85rem 1rem; background:var(--ink-800); border:1px solid var(--ink-600); border-radius:var(--radius-s);
  color:var(--text-hi); font-size:.92rem; transition:border-color .15s;
}
input::placeholder,textarea::placeholder{ color:var(--text-lo); }
input:focus,select:focus,textarea:focus{ border-color:var(--amber-500); outline:none; }
textarea{ resize:vertical; min-height:120px; }
.tema-acik input[type=text],.tema-acik input[type=email],.tema-acik input[type=tel],.tema-acik input[type=password],.tema-acik input[type=number],.tema-acik input[type=date],.tema-acik select,.tema-acik textarea{
  background:var(--paper-0); border-color:var(--paper-200); color:var(--slate-900);
}
.checkbox-row{ display:flex; align-items:flex-start; gap:.65rem; font-size:.83rem; color:var(--text-md); }
.tema-acik .checkbox-row{ color:var(--slate-500); }
.checkbox-row input{ width:auto; margin-top:.2rem; accent-color:var(--amber-500); }
.form-card{ background:var(--ink-800); border:1px solid var(--line-dark); border-radius:var(--radius-l); padding:2.4rem; }
.tema-acik .form-card{ background:var(--paper-0); border-color:var(--paper-line); box-shadow:var(--shadow-card); }
.alert{ padding:1rem 1.2rem; border-radius:var(--radius-s); font-size:.87rem; margin-bottom:1.4rem; display:flex; gap:.7rem; align-items:flex-start; }
.alert svg{ width:18px; height:18px; flex-shrink:0; margin-top:.1rem; }
.alert-error{ background:var(--red-tint); color:#8A2E2E; }
.alert-success{ background:var(--cyan-tint); color:#1E7268; }
.alert-info{ background:var(--blueprint-tint); color:var(--blueprint-700); }

/* -------------------------------------------------------------------------
   11. FOOTER
   ------------------------------------------------------------------------- */
.footer{ background:var(--ink-950); border-top:1px solid var(--line-dark); padding:4.5rem 0 0; }
.footer-grid{ display:grid; grid-template-columns:1.5fr repeat(4,1fr); gap:2.5rem; padding-bottom:3.5rem; }
@media (max-width:980px){ .footer-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .footer-grid{ grid-template-columns:1fr; } }
.footer-col h5{ font-family:var(--font-mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-lo); margin-bottom:1.1rem; }
.footer-col a{ display:block; font-size:.87rem; color:var(--text-md); padding:.35rem 0; }
.footer-col a:hover{ color:var(--amber-500); }
.footer-brand p{ font-size:.87rem; color:var(--text-lo); margin:1rem 0 1.4rem; max-width:280px; }
.footer-social{ display:flex; gap:.6rem; }
.footer-social a{ width:36px; height:36px; border:1px solid var(--ink-600); border-radius:var(--radius-s); display:flex; align-items:center; justify-content:center; padding:0; }
.footer-social a:hover{ border-color:var(--amber-500); }
.footer-social svg{ width:16px; height:16px; }
.footer-bottom{ border-top:1px solid var(--line-dark); padding:1.6rem 0; display:flex; justify-content:space-between; align-items:center; font-size:.78rem; color:var(--text-lo); flex-wrap:wrap; gap:.8rem; }
.footer-bottom a{ color:var(--text-lo); }
.footer-bottom a:hover{ color:var(--amber-500); }
.footer-legal{ display:flex; gap:1.3rem; flex-wrap:wrap; }

/* -------------------------------------------------------------------------
   12. CTA BANDI
   ------------------------------------------------------------------------- */
.cta-band{ background:linear-gradient(135deg, var(--blueprint-700), var(--ink-950) 70%); border-radius:var(--radius-l); padding:3.5rem; display:flex; justify-content:space-between; align-items:center; gap:2rem; flex-wrap:wrap; position:relative; overflow:hidden; }
.cta-band::before{ content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size:32px 32px; }
.cta-band > *{ position:relative; }
.cta-band h3{ font-size:1.7rem; max-width:480px; color:#fff; }
.cta-band p{ color:#C7D3E8; margin-top:.6rem; }

/* -------------------------------------------------------------------------
   13. BREADCRUMB / SAYFA BAŞLIĞI
   ------------------------------------------------------------------------- */
.page-head{ padding:3.4rem 0 3rem; border-bottom:1px solid var(--line-dark); }
.breadcrumb{ display:flex; gap:.5rem; align-items:center; font-family:var(--font-mono); font-size:.76rem; color:var(--text-lo); margin-bottom:1.1rem; }
.breadcrumb a:hover{ color:var(--amber-500); }
.breadcrumb svg{ width:11px; height:11px; }
.tema-acik .breadcrumb{ color:var(--slate-500); }
.tema-acik .page-head{ background:var(--paper-0); border-color:var(--paper-line); }

/* -------------------------------------------------------------------------
   14. MAĞAZA
   ------------------------------------------------------------------------- */
.store-toolbar{ display:flex; justify-content:space-between; align-items:center; margin-bottom:2rem; flex-wrap:wrap; gap:1rem; }
.store-tabs{ display:flex; gap:.4rem; flex-wrap:wrap; }
.store-tab{ padding:.6rem 1.1rem; border-radius:30px; font-size:.85rem; font-weight:600; border:1px solid var(--paper-200); color:var(--slate-700); }
.store-tab.active,.store-tab:hover{ background:var(--slate-900); border-color:var(--slate-900); color:#fff; }
.product-card{ background:var(--paper-0); border:1px solid var(--paper-line); border-radius:var(--radius-m); overflow:hidden; box-shadow:var(--shadow-card); transition:transform .18s ease; display:flex; flex-direction:column; }
.product-card:hover{ transform:translateY(-3px); }
.product-thumb{ aspect-ratio:16/10; background:linear-gradient(135deg, var(--blueprint-tint), var(--paper-100)); display:flex; align-items:center; justify-content:center; position:relative; }
.product-thumb svg{ width:52px; height:52px; color:var(--blueprint-500); opacity:.7; }
.product-thumb .badge{ position:absolute; top:.8rem; left:.8rem; }
.product-body{ padding:1.3rem; display:flex; flex-direction:column; gap:.6rem; flex:1; }
.product-body h3{ font-size:1.02rem; color:var(--slate-900); }
.product-body p{ font-size:.83rem; color:var(--slate-500); flex:1; }
.product-price-row{ display:flex; justify-content:space-between; align-items:center; margin-top:.4rem; }
.product-price{ font-family:var(--font-mono); font-weight:600; font-size:1.15rem; color:var(--slate-900); }
.product-price small{ font-size:.72rem; color:var(--slate-500); font-weight:400; }
.pricing-card{ background:var(--paper-0); border:1px solid var(--paper-line); border-radius:var(--radius-m); padding:2rem; box-shadow:var(--shadow-card); display:flex; flex-direction:column; }
.pricing-card.on{ border-color:var(--amber-500); box-shadow:0 0 0 1px var(--amber-500), var(--shadow-card); }
.pricing-card .fiyat{ font-family:var(--font-mono); font-size:2.1rem; color:var(--slate-900); margin:.8rem 0; }
.pricing-card .fiyat span{ font-size:.85rem; color:var(--slate-500); font-weight:400; }
.pricing-list{ display:flex; flex-direction:column; gap:.65rem; margin:1.4rem 0; flex:1; }
.pricing-list li{ display:flex; gap:.6rem; font-size:.87rem; color:var(--slate-700); align-items:flex-start; }
.pricing-list svg{ width:15px; height:15px; color:var(--cyan-500); margin-top:.2rem; flex-shrink:0; }

/* -------------------------------------------------------------------------
   15. SEPET / ÖDEME
   ------------------------------------------------------------------------- */
.cart-row{ display:grid; grid-template-columns:64px 1fr auto auto auto; gap:1.2rem; align-items:center; padding:1.2rem 0; border-bottom:1px solid var(--paper-line); }
@media (max-width:720px){ .cart-row{ grid-template-columns:52px 1fr; grid-template-rows:auto auto; } }
.cart-thumb{ width:64px; height:64px; border-radius:var(--radius-s); background:var(--blueprint-tint); display:flex; align-items:center; justify-content:center; color:var(--blueprint-500); }
.cart-thumb svg{ width:26px; height:26px; }
.qty-box{ display:flex; align-items:center; border:1px solid var(--paper-200); border-radius:var(--radius-s); overflow:hidden; }
.qty-box button{ width:32px; height:32px; background:var(--paper-50); border:none; font-size:1rem; }
.qty-box input{ width:40px; text-align:center; border:none; padding:0; }
.order-summary{ background:var(--paper-50); border:1px solid var(--paper-line); border-radius:var(--radius-m); padding:1.8rem; position:sticky; top:100px; }
.order-summary-row{ display:flex; justify-content:space-between; font-size:.9rem; padding:.5rem 0; color:var(--slate-700); }
.order-summary-row.top{ border-top:1px solid var(--paper-line); margin-top:.6rem; padding-top:1rem; font-weight:700; font-size:1.05rem; color:var(--slate-900); }
.paytr-mark{ display:flex; align-items:center; gap:.6rem; margin-top:1.4rem; padding:.9rem; background:var(--paper-0); border:1px solid var(--paper-line); border-radius:var(--radius-s); font-size:.78rem; color:var(--slate-500); }
.paytr-mark svg{ width:22px; height:18px; color:var(--blueprint-500); flex-shrink:0; }
.secure-strip{ display:flex; gap:1.6rem; flex-wrap:wrap; margin-top:1.6rem; }
.secure-strip div{ display:flex; align-items:center; gap:.5rem; font-size:.78rem; color:var(--slate-500); }
.secure-strip svg{ width:16px; height:16px; color:var(--cyan-500); }

.durum-ikon{ width:76px; height:76px; margin:0 auto 1.6rem; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.durum-ikon svg{ width:34px; height:34px; }
.durum-ikon.ok{ background:var(--cyan-tint); color:var(--cyan-500); }
.durum-ikon.err{ background:var(--red-tint); color:#8A2E2E; }
.durum-ikon.info{ background:var(--blueprint-tint); color:var(--blueprint-600); }
.durum-ikon.bekliyor{ background:var(--amber-tint); color:var(--amber-600); }

/* -------------------------------------------------------------------------
   16. MÜŞTERİ PANELİ
   ------------------------------------------------------------------------- */
.panel-shell{ display:grid; grid-template-columns:250px 1fr; gap:2.2rem; align-items:start; }
@media (max-width:900px){ .panel-shell{ grid-template-columns:1fr; } }
.panel-side{ background:var(--paper-0); border:1px solid var(--paper-line); border-radius:var(--radius-m); padding:1.4rem; position:sticky; top:100px; box-shadow:var(--shadow-card); }
.panel-user{ display:flex; gap:.8rem; align-items:center; padding-bottom:1.2rem; margin-bottom:1rem; border-bottom:1px solid var(--paper-line); }
.panel-user .avatar{ width:44px; height:44px; margin:0; border-radius:50%; font-size:1rem; flex-shrink:0; }
.panel-user strong{ display:block; font-size:.9rem; color:var(--slate-900); }
.panel-user span{ font-size:.76rem; color:var(--slate-500); }
.panel-nav a{ display:flex; align-items:center; gap:.7rem; padding:.7rem .8rem; border-radius:var(--radius-s); font-size:.87rem; font-weight:500; color:var(--slate-700); }
.panel-nav a:hover{ background:var(--paper-50); }
.panel-nav a.active{ background:var(--slate-900); color:#fff; }
.panel-nav svg{ width:17px; height:17px; }
.panel-nav-baslik{ font-family:var(--font-mono); font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; color:var(--slate-500); padding:1rem .8rem .35rem; }
.panel-nav-baslik:first-child{ padding-top:.2rem; }
.panel-main{ min-width:0; }
.ticket-row{ display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1.2rem; border:1px solid var(--paper-line); border-radius:var(--radius-s); margin-bottom:.9rem; background:var(--paper-0); flex-wrap:wrap; }
.ticket-row:hover{ border-color:var(--slate-500); }
.ticket-id{ font-family:var(--font-mono); font-size:.76rem; color:var(--slate-500); }
.chat-bubble{ max-width:75%; padding:1rem 1.2rem; border-radius:var(--radius-m); margin-bottom:1rem; font-size:.88rem; }
.chat-bubble.musteri{ background:var(--slate-900); color:#fff; margin-left:auto; border-bottom-right-radius:2px; }
.chat-bubble.destek{ background:var(--paper-100); color:var(--slate-900); border-bottom-left-radius:2px; }
.chat-meta{ font-size:.7rem; color:var(--slate-500); margin-top:.35rem; font-family:var(--font-mono); }

/* API dok. kod bloğu */
.code-block{ background:var(--ink-950); color:#D7DEEC; border-radius:var(--radius-s); padding:1.2rem 1.4rem; font-family:var(--font-mono); font-size:.82rem; overflow-x:auto; line-height:1.7; }
.code-block .c-key{ color:#F0954A; }
.code-block .c-str{ color:#7FD4C7; }
.method-tag{ font-family:var(--font-mono); font-size:.7rem; font-weight:700; padding:.2rem .55rem; border-radius:4px; }
.method-get{ background:var(--cyan-tint); color:#1E7268; }
.method-post{ background:var(--amber-tint); color:var(--amber-600); }

/* -------------------------------------------------------------------------
   17. TABLOLAR
   ------------------------------------------------------------------------- */
table{ width:100%; border-collapse:collapse; font-size:.87rem; }
.tema-acik table th{ text-align:left; padding:.9rem 1rem; background:var(--paper-50); color:var(--slate-500); font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; font-family:var(--font-mono); font-weight:500; }
.tema-acik table td{ padding:.9rem 1rem; border-bottom:1px solid var(--paper-line); color:var(--slate-700); }
table.dark th{ text-align:left; padding:.9rem 1rem; color:var(--text-lo); font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; font-family:var(--font-mono); border-bottom:1px solid var(--line-dark); }
table.dark td{ padding:.9rem 1rem; border-bottom:1px solid var(--line-dark); color:var(--text-md); }

/* -------------------------------------------------------------------------
   18. SAYFALAMA / DİĞER
   ------------------------------------------------------------------------- */
.pager{ display:flex; gap:.5rem; justify-content:center; margin-top:2.5rem; }
.pager a{ width:38px; height:38px; display:flex; align-items:center; justify-content:center; border:1px solid var(--paper-line); border-radius:var(--radius-s); font-size:.85rem; color:var(--slate-700); }
.pager a.active{ background:var(--slate-900); color:#fff; border-color:var(--slate-900); }

.faq-item{ border-bottom:1px solid var(--line-dark); padding:1.4rem 0; }
.tema-acik .faq-item{ border-color:var(--paper-line); }
.faq-q{ display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-weight:600; color:var(--text-hi); font-size:.98rem; }
.tema-acik .faq-q{ color:var(--slate-900); }
.faq-q svg{ width:16px; height:16px; transition:transform .2s; flex-shrink:0; }
.faq-item.open .faq-q svg{ transform:rotate(45deg); }
.faq-a{ font-size:.88rem; color:var(--text-lo); max-height:0; overflow:hidden; transition:max-height .25s ease; }
.tema-acik .faq-a{ color:var(--slate-500); }
.faq-item.open .faq-a{ max-height:400px; padding-top:.9rem; }

.doc-toc{ position:sticky; top:100px; }
.doc-toc a{ display:block; padding:.5rem 0; font-size:.85rem; color:var(--text-lo); border-left:2px solid var(--line-dark); padding-left:1rem; }
.doc-toc a:hover,.doc-toc a.active{ color:var(--amber-500); border-color:var(--amber-500); }
.legal-content h2{ font-size:1.3rem; margin:2.2rem 0 .9rem; }
.legal-content h3{ font-size:1.05rem; margin:1.5rem 0 .6rem; color:var(--text-hi); }
.legal-content p,.legal-content li{ font-size:.92rem; color:var(--text-md); margin-bottom:.8rem; }
.legal-content li{ margin-left:1.3rem; list-style:disc; }
.tema-acik .legal-content p,.tema-acik .legal-content li{ color:var(--slate-700); }
.tema-acik .legal-content h3{ color:var(--slate-900); }

.job-row{ display:flex; justify-content:space-between; align-items:center; padding:1.4rem 1.6rem; border:1px solid var(--line-dark); border-radius:var(--radius-m); margin-bottom:1rem; flex-wrap:wrap; gap:1rem; }
.job-row:hover{ border-color:var(--amber-500); }
.job-meta{ display:flex; gap:1rem; margin-top:.4rem; flex-wrap:wrap; }
.job-meta span{ font-size:.78rem; color:var(--text-lo); display:flex; align-items:center; gap:.35rem; }
.job-meta svg{ width:13px; height:13px; }

.case-thumb{ aspect-ratio:16/9; border-radius:var(--radius-m); position:relative; overflow:hidden; margin-bottom:1.3rem; display:flex; align-items:end; padding:1.5rem; }
.case-thumb::before{ content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px); background-size:22px 22px; }
.case-thumb span{ position:relative; font-family:var(--font-mono); font-size:.72rem; color:#fff; background:rgba(0,0,0,.35); padding:.3rem .7rem; border-radius:30px; }

.roi-stat{ text-align:center; padding:1.6rem 1rem; border-right:1px solid var(--line-dark); }
.roi-stat:last-child{ border-right:none; }
.roi-stat b{ font-family:var(--font-mono); font-size:2.3rem; color:var(--amber-500); display:block; }
.roi-stat span{ font-size:.8rem; color:var(--text-lo); }

.utility-strip{ display:flex; align-items:center; gap:2.4rem; overflow-x:auto; padding:1.6rem 0; }
.utility-strip img,.utility-strip .partner-badge{ flex-shrink:0; width:150px; }

/* skip link */
.skip-link{ position:absolute; left:-999px; top:0; background:var(--amber-500); color:#1b1002; padding:.8rem 1.2rem; z-index:200; font-weight:600; }
.skip-link:focus{ left:1rem; top:1rem; }