/* Alanya Destek Landing - Bootstrap 5 + modern UI
   Not: Metinlerde marka adı, "teknik", "garanti", "ücretsiz" kullanılmadı.
*/

:root{
  /* Palette: krem arkaplan + turkuaz vurgu + kırmızı/sarı/yeşil destek */
  --brand-1:#0ea5e9;      /* turkuaz */
  --brand-2:#22c55e;      /* yeşil */
  --accent-red:#ef4444;   /* kırmızı */
  --accent-yellow:#f59e0b;/* sarı */
  --ink:#0b1220;          /* siyah */
  --muted:#6b7280;
  --cream:#fff7ed;        /* krem */
}

html, body { height: 100%; }
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
  color: var(--ink);
  background:
    radial-gradient(1200px 600px at 15% 10%, rgba(14,165,233,.10), transparent 55%),
    radial-gradient(900px 500px at 85% 0%, rgba(34,197,94,.10), transparent 55%),
    radial-gradient(900px 520px at 50% 90%, rgba(245,158,11,.10), transparent 60%),
    var(--cream);
}


/* Top notice */
.topbar{
  background: linear-gradient(90deg, rgba(245,158,11,.16), rgba(14,165,233,.14), rgba(34,197,94,.14));
  border-bottom: 1px solid rgba(2,6,23,.08);
  font-size: .925rem;
}

.brand-badge{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.35rem .6rem; border-radius:999px;
  background: rgba(2,6,23,.04);
  border: 1px solid rgba(2,6,23,.08);
}
.brand-dot{
  width:10px; height:10px; border-radius:50%;
  background: linear-gradient(180deg, var(--brand-1), var(--brand-2));
  box-shadow: 0 0 0 4px rgba(14,165,233,.12);
}

.navbar{
  backdrop-filter: blur(10px);
  background: rgba(255,255,255,.78) !important;
  border-bottom: 1px solid rgba(2,6,23,.08);
}

.navbar .nav-link{ font-weight:600; color:#0b1220; opacity:.9; }
.navbar .nav-link:hover{ opacity:1; }

.btn-brand{
  --bs-btn-color:#fff;
  --bs-btn-bg: var(--brand-1);
  --bs-btn-border-color: var(--brand-1);
  --bs-btn-hover-bg:#0284c7;
  --bs-btn-hover-border-color:#0284c7;
  --bs-btn-focus-shadow-rgb: 14,165,233;
  border-radius: 14px;
  padding: .7rem 1rem;
  font-weight: 700;
}
.btn-ghost{
  border-radius: 14px;
  padding: .7rem 1rem;
  font-weight: 700;
  border: 1px solid rgba(2,6,23,.12);
  background: rgba(255,255,255,.7);
}
.btn-ghost:hover{ background: rgba(255,255,255,1); }

.hero{
  position: relative;
  padding-top: 1rem;
  padding-bottom: 2.25rem;
}

.hero-card{
  border-radius: 22px;
  border: 1px solid rgba(2,6,23,.10);
  background: rgba(255,255,255,.85);
  box-shadow:
    0 18px 40px rgba(2,6,23,.08),
    0 2px 0 rgba(255,255,255,.6) inset;
  overflow: hidden;
}

.hero-left{
  padding: 2.4rem 2.2rem;
}
.hero-title{
  font-weight: 900;
  letter-spacing: -.02em;
  line-height: 1.05;
}
.hero-sub{
  color: var(--muted);
  font-size: 1.05rem;
}

.pill{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.35rem .65rem;
  border-radius:999px;
  background: rgba(14,165,233,.10);
  border: 1px solid rgba(14,165,233,.18);
  font-weight: 700;
  font-size: .85rem;
  color: #0369a1;
}

.kpi{
  border-radius: 18px;
  border: 1px solid rgba(2,6,23,.10);
  background: rgba(255,255,255,.9);
  padding: 1rem 1rem;
}
.kpi .num{
  font-weight: 900;
  font-size: 1.25rem;
}
.kpi .lab{ color: var(--muted); font-size: .9rem; }

.section{
  padding: 3.25rem 0;
}
.section-title{
  font-weight: 900;
  letter-spacing: -.02em;
}
.section-lead{
  color: var(--muted);
  max-width: 60ch;
}

.feature-card{
  border-radius: 22px;
  border: 1px solid rgba(2,6,23,.10);
  background: rgba(255,255,255,.85);
  box-shadow: 0 14px 30px rgba(2,6,23,.06);
  padding: 1.25rem;
  height: 100%;
}
.feature-ico{
  width: 44px; height: 44px;
  border-radius: 14px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(14,165,233,.12);
  border: 1px solid rgba(14,165,233,.22);
}

.soft-card{
  border-radius: 22px;
  border: 1px solid rgba(2,6,23,.10);
  background: rgba(255,255,255,.85);
  padding: 1.25rem;
}

.price-row{
  display:flex; justify-content:space-between; gap:1rem;
  padding:.75rem 0;
  border-bottom: 1px dashed rgba(2,6,23,.14);
}
.price-row:last-child{ border-bottom:none; }

.badge-soft{
  background: rgba(34,197,94,.12);
  border: 1px solid rgba(34,197,94,.22);
  color: #166534;
}

.footer{
  background: #0b1220;
  color: rgba(255,255,255,.85);
  padding: 2.5rem 0;
  border-top: 1px solid rgba(255,255,255,.08);
}
.footer a{ color: rgba(255,255,255,.85); text-decoration:none; }
.footer a:hover{ color: #fff; text-decoration:underline; }

.floating-actions{
  position: fixed;
  right: 16px;
  bottom: 16px;
  display:flex;
  flex-direction: column;
  gap: 10px;
  z-index: 1030;
}
.fab{
  width: 52px;
  height: 52px;
  border-radius: 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  border: 1px solid rgba(2,6,23,.10);
  background: rgba(255,255,255,.92);
  box-shadow: 0 18px 35px rgba(2,6,23,.10);
  color: #0b1220;
}
.fab:hover{ transform: translateY(-1px); }

#pageLoader{
  position: fixed;
  inset: 0;
  background:
    radial-gradient(1000px 500px at 20% 20%, rgba(14,165,233,.18), transparent 60%),
    radial-gradient(900px 450px at 80% 0%, rgba(34,197,94,.18), transparent 60%),
    rgba(255,255,255,1);
  z-index: 2000;
  display:flex;
  align-items:center;
  justify-content:center;
  transition: opacity .25s ease, visibility .25s ease;
}
#pageLoader.hide{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

.loader-card{
  width: min(520px, 92vw);
  border-radius: 22px;
  border: 1px solid rgba(2,6,23,.10);
  background: rgba(255,255,255,.9);
  box-shadow: 0 20px 50px rgba(2,6,23,.10);
  padding: 1.25rem 1.25rem;
}
.progress{
  height: 10px;
  border-radius: 999px;
  background: rgba(2,6,23,.08);
}
.progress-bar{
  border-radius: 999px;
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior: auto !important; }
  .fab:hover{ transform:none; }
}


/* Call-only emphasis */
.btn-call{
  --bs-btn-color:#fff;
  --bs-btn-bg: var(--accent-red);
  --bs-btn-border-color: var(--accent-red);
  --bs-btn-hover-bg:#dc2626;
  --bs-btn-hover-border-color:#dc2626;
  border-radius: 14px;
  padding: .7rem 1rem;
  font-weight: 900;
}
.callout-ring{
  box-shadow: 0 0 0 6px rgba(239,68,68,.14);
}