/* ===========================================================
   OrcoDesk — tanıtım sitesi
   Tasarım dili app.orcodesk.com panelinden alındı
   (indigo #6366f1, Lexend + Noto Sans, yumuşak gölgeler).
   Marka vurgusu logodan (indigo → cyan) sadece aksanlarda.
   =========================================================== */
:root{
  --primary:#6366f1;
  --primary-dark:#4f46e5;
  --primary-light:#eef2ff;
  --accent:#28C7EE;        /* logo cyan — yalnızca aksan */
  --warn:#F59E0B;

  --bg:#f0f2f5;
  --surface:#ffffff;
  --text:#1f2430;
  --text-muted:#6b7280;
  --border:#e5e7eb;

  --card-shadow:0 0 20px rgba(0,0,0,.06);
  --shadow-sm:0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
  --shadow:0 12px 28px rgba(0,0,0,.08);
  --radius:12px;
  --radius-lg:18px;
  --radius-xl:24px;

  /* Yalnızca marka aksanı (logo metni, küçük ikonlar) için */
  --grad: linear-gradient(135deg, #6366f1 0%, #28C7EE 100%);
}

*{ box-sizing:border-box; }
html, body{ margin:0; padding:0; }

body{
  font-family:"Noto Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color:var(--text);
  background:
    radial-gradient(1100px 700px at 15% -12%, rgba(99,102,241,.08), transparent 60%),
    radial-gradient(800px 500px at 95% 4%, rgba(40,199,238,.07), transparent 55%),
    var(--bg);
  min-height:100vh;
}

.font-display{ font-family:"Asap Condensed", sans-serif; }
.text-muted-2{ color:var(--text-muted)!important; }

/* Marka gradyan metin (sadece aksan) */
.text-gradient{
  background:var(--grad);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}

/* ---------- Butonlar (düz, app paneliyle aynı dil) ---------- */
.btn-primary-custom{
  background:var(--primary);
  border:1px solid var(--primary);
  color:#fff;
  border-radius:16px;
  font-weight:700;
  box-shadow:0 12px 24px rgba(99,102,241,.25);
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
}
.btn-primary-custom:hover{
  background:var(--primary-dark);
  border-color:var(--primary-dark);
  color:#fff;
  transform:translateY(-2px);
  box-shadow:0 16px 30px rgba(99,102,241,.35);
}
.btn-primary-custom:active{ transform:translateY(0) scale(.98); }

.btn-outline-brand{
  border:1px solid var(--border);
  color:var(--text);
  background:#fff;
  border-radius:16px;
  font-weight:700;
  box-shadow:var(--shadow-sm);
  transition:transform .12s ease, border-color .12s ease, color .12s ease;
}
.btn-outline-brand:hover{
  border-color:var(--primary);
  color:var(--primary);
  transform:translateY(-2px);
}

.btn, .btn-lg{ transition:.15s ease; }

/* ---------- Rozetler ---------- */
.badge-soft{
  background:rgba(99,102,241,.12);
  color:var(--primary);
  font-weight:700;
  border-radius:999px;
  padding:.4rem .8rem;
  display:inline-flex;
  align-items:center;
  gap:.45rem;
}
.badge-dot{
  width:.5rem;height:.5rem;border-radius:999px;
  background:var(--primary);
  display:inline-block;
}

/* ---------- Kartlar ---------- */
.card-elev{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--card-shadow);
}
.card-soft{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-xl);
  box-shadow:var(--card-shadow);
}
.shadow-hero{ box-shadow:0 18px 45px rgba(0,0,0,.10); }
.rounded-xxl{ border-radius:var(--radius-xl); }

/* ---------- İkon baloncukları ---------- */
.icon-bubble{
  width:46px;height:46px;border-radius:14px;
  display:grid;place-items:center;
  background:var(--primary-light);
  color:var(--primary);
  flex:0 0 auto;
}
.icon-bubble.accent{ background:rgba(40,199,238,.14); color:#0e93b8; }
.icon-bubble.warn{ background:rgba(245,158,11,.14); color:var(--warn); }
.icon-bubble.dark{ background:rgba(31,36,48,.06); color:var(--text); }
.icon-bubble.grad{ background:var(--primary); color:#fff; box-shadow:0 8px 18px rgba(99,102,241,.28); }

.section-pad{ padding:4.5rem 0; }

/* ---------- Navbar ---------- */
.navbar-glass{
  backdrop-filter:blur(10px);
  background:rgba(255,255,255,.85);
  border-bottom:1px solid rgba(0,0,0,.06);
}

/* ---------- Hero mock ---------- */
.hero-mock{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-xl);
  overflow:hidden;
  box-shadow:var(--card-shadow);
  position:relative;
}

/* ---------- Özellik kartları ---------- */
.feature-card{
  border-radius:var(--radius-lg);
  position:relative;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.feature-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow); border-color:rgba(99,102,241,.25); }

/* ---------- Öne çıkan büyük kartlar ---------- */
.spotlight{
  position:relative;
  overflow:hidden;
  border-radius:var(--radius-xl);
  color:#fff;
  background:linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
  box-shadow:0 18px 40px rgba(99,102,241,.30);
}
.spotlight .icon-bubble{ background:rgba(255,255,255,.18); color:#fff; }
.spotlight .spot-orb{
  position:absolute; bottom:-80px; left:-60px;
  width:240px;height:240px;border-radius:999px;
  background:rgba(255,255,255,.12); filter:blur(20px);
}
.spotlight-light{
  background:var(--surface);
  color:var(--text);
  border:1px solid var(--border);
  border-radius:var(--radius-xl);
  box-shadow:var(--card-shadow);
}
.spotlight-light .icon-bubble{ background:var(--primary-light); color:var(--primary); }

/* ---------- Adım butonları ---------- */
.step-btn{
  text-align:left;width:100%;
  border:1px solid var(--border);
  background:var(--surface);
  border-radius:var(--radius-lg);
  padding:1rem;
  transition:.15s ease;
}
.step-btn:hover{ border-color:rgba(99,102,241,.35); }
.step-btn.active{
  border-color:rgba(99,102,241,.45);
  box-shadow:0 0 0 .2rem rgba(99,102,241,.12);
}
.step-index{
  width:46px;height:46px;border-radius:14px;
  display:grid;place-items:center;
  font-weight:800;
  background:var(--primary-light);
  color:var(--primary);
  flex:0 0 auto;
}
.step-btn.active .step-index{ background:var(--primary); color:#fff; }

/* ---------- Fiyatlandırma ---------- */
.price-card{
  border-radius:var(--radius-xl);
  border:1px solid var(--border);
  background:var(--surface);
  box-shadow:var(--shadow-sm);
  transition:transform .15s ease, box-shadow .15s ease;
}
.price-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow); }
.price-card.featured{
  border:1px solid rgba(99,102,241,.45);
  box-shadow:0 0 0 .2rem rgba(99,102,241,.10), var(--card-shadow);
}
.price-amount{ font-weight:800; letter-spacing:-.02em; }

/* ---------- FAQ (GEO/SEO) ---------- */
.faq-item{
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  background:var(--surface);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.faq-item:hover{ border-color:rgba(99,102,241,.30); }
.faq-item[open]{ border-color:rgba(99,102,241,.40); box-shadow:0 0 0 .2rem rgba(99,102,241,.10); }
.faq-q{
  list-style:none;
  cursor:pointer;
  padding:1.15rem 1.3rem;
  display:flex;
  align-items:center;
  gap:.9rem;
  font-family:"Asap Condensed", sans-serif;
  font-weight:600;
  color:var(--text);
}
.faq-q::-webkit-details-marker{ display:none; }
.faq-q .faq-ico{
  width:34px;height:34px;border-radius:10px;flex:0 0 auto;
  display:grid;place-items:center;
  background:var(--primary-light); color:var(--primary);
  transition:transform .2s ease;
}
.faq-item[open] .faq-q .faq-ico{ transform:rotate(45deg); }
.faq-a{
  padding:0 1.3rem 1.25rem 4.1rem;
  color:var(--text-muted);
  line-height:1.65;
}

/* ---------- Güven logoları ---------- */
.logo-chip{
  border-radius:var(--radius-lg);
  border:1px solid var(--border);
  background:var(--surface);
  padding:.8rem 1rem;
  display:flex;align-items:center;gap:.75rem;
  box-shadow:var(--shadow-sm);
}
.logo-chip .mark{
  width:38px;height:38px;border-radius:12px;
  display:grid;place-items:center;
  background:var(--primary-light);
  color:var(--primary);
  font-weight:800;
}

/* ---------- CTA ---------- */
.cta-grad{ background:var(--primary-light); }

/* ---------- Formlar (app .form-control.soft dili) ---------- */
.form-control, .form-select{
  border-radius:16px;
  background:rgba(248,249,250,.7);
  border:1px solid rgba(0,0,0,.12);
  box-shadow:var(--shadow-sm);
  padding:.85rem 1rem;
}
.form-control:focus, .form-select:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 .25rem rgba(99,102,241,.15);
  background:#fff;
}

/* ---------- Footer ---------- */
footer{
  background:rgba(255,255,255,.85);
  backdrop-filter:blur(10px);
  border-top:1px solid rgba(0,0,0,.06);
}

/* ---------- Yardımcılar ---------- */
.soft-pill{
  border:1px solid var(--border);
  background:#fff;
  border-radius:14px;
  padding:.5rem .8rem;
  font-weight:700;
  display:inline-flex;align-items:center;gap:.5rem;
  box-shadow:var(--shadow-sm);
}
.soft-pill i{ color:var(--primary); }
.link-muted{ color:var(--text-muted); text-decoration:none; }
.link-muted:hover{ color:var(--text); }
.check-i{ color:var(--primary); }