/* ==========================================================
   siteyol.com
   Tasarım dili: Apple — yuvarlak köşeler, yay hareketleri,
   yarı saydam malzeme, punto'ya göre harf aralığı.
   ========================================================== */

:root{
  /* --- Marka renkleri (logodan) --- */
  --ink:#171E27;
  --ink-2:#2A3440;
  --accent:#0E6B6E;
  --accent-2:#12898C;
  --accent-3:#1AA5A8;
  --accent-tint:#EAF4F4;

  /* --- Nötrler --- */
  --label:#171E27;
  --label-2:#5C6975;
  --label-3:#8C98A4;
  --line:#E6E9EB;
  --line-2:#F0F2F3;
  --surface:#FFFFFF;
  --surface-2:#EDF1F1;
  --surface-3:#E2E8E8;

  --amber:#E8930C;
  --green:#0F7B3D;
  --red:#C81E1E;

  /* --- Köşe yarıçapı skalası --- */
  --r-xs:10px;
  --r-sm:14px;
  --r-md:18px;
  --r-lg:24px;
  --r-xl:32px;
  --r-2xl:40px;
  --r-full:999px;

  /* --- Gölge katmanları --- */
  --sh-1:0 1px 2px rgba(23,30,39,.04), 0 4px 12px rgba(23,30,39,.05);
  --sh-2:0 2px 6px rgba(23,30,39,.05), 0 12px 28px rgba(23,30,39,.08);
  --sh-3:0 8px 24px rgba(23,30,39,.08), 0 30px 64px rgba(23,30,39,.13);
  --sh-accent:0 6px 20px rgba(14,107,110,.28);

  /* --- Hareket eğrileri --- */
  --ease:cubic-bezier(.22,1,.36,1);                 /* kritik sönümlü — taşma yok */
  --ease-soft:cubic-bezier(.4,0,.2,1);
  --spring:linear(                                   /* momentumlu — hafif taşma */
    0, .0065, .026 2.7%, .1 6%, .534 18.5%, .715 24.9%,
    .845 31.1%, .935 37.7%, .967 41.4%, .99 45.3%,
    1.005 49.7%, 1.014 54.6%, 1.016 63.5%, 1.001
  );

  --maxw:1180px;
  --font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-display:"Outfit","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
}

/* Koyu zeminlerde aksan tonu açılır */
.section-dark,.cta,.footer,.pkg-pop,.t3,.marquee,.dom-suffix{--accent:var(--accent-3)}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:92px; -webkit-text-size-adjust:100%}
body{
  margin:0; font-family:var(--font); font-size:17px; line-height:1.55;
  color:var(--label); background:var(--surface);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font-family:inherit; cursor:pointer; border:none; background:none; color:inherit}
input,select,textarea{font-family:inherit; font-size:17px}
p{margin:0}

/* --- Tipografi: harf aralığı punto'ya göre değişir --- */
h1,h2,h3,h4,h5{margin:0; font-family:var(--font-display); font-weight:700}
h1{font-size:clamp(2.7rem,6.6vw,5.4rem); font-weight:800; line-height:.98; letter-spacing:-.042em}
h2{font-size:clamp(2rem,4.6vw,3.4rem); line-height:1.05; letter-spacing:-.036em}
h3{font-size:clamp(1.4rem,2.4vw,1.75rem); line-height:1.14; letter-spacing:-.026em}
h4{font-size:1.06rem; line-height:1.3; letter-spacing:-.016em}
h5{font-size:.95rem; line-height:1.35; letter-spacing:-.01em}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 26px}
.center{text-align:center}

/* ==========================================================
   BUTONLAR — kapsül, basınca tepki verir
   ========================================================== */
.btn{
  font-family:var(--font-display);
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:15px 28px; border-radius:var(--r-full);
  font-weight:600; font-size:16px; letter-spacing:-.014em;
  border:1.5px solid transparent; background:var(--ink); color:#fff;
  transition:transform .16s var(--ease), background .18s var(--ease-soft),
             color .18s var(--ease-soft), border-color .18s var(--ease-soft), box-shadow .25s var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.btn svg{width:18px; height:18px; flex-shrink:0}
.btn:hover{background:var(--ink-2)}
.btn:active{transform:scale(.965)}            /* basınca — bırakınca değil */
.btn:focus-visible{outline:3px solid var(--accent-3); outline-offset:3px}

.btn-accent{background:var(--accent); box-shadow:var(--sh-accent)}
.btn-accent:hover{background:var(--accent-2); box-shadow:0 10px 28px rgba(14,107,110,.34)}
.btn-outline{background:transparent; color:var(--label); border-color:var(--line)}
.btn-outline:hover{background:var(--surface-2); border-color:var(--label-3)}
.btn-on-dark{background:#fff; color:var(--ink)}
.btn-on-dark:hover{background:#EEF1F1}
.btn-lg{padding:18px 34px; font-size:17px}
.btn-sm{padding:11px 20px; font-size:15px}
.btn-block{width:100%}
.btn:disabled{opacity:.38; cursor:not-allowed; transform:none}

/* ==========================================================
   DUYURU ŞERİDİ
   ========================================================== */
.announce{
  background:var(--ink); color:#fff; font-size:14px; font-weight:500;
  letter-spacing:-.008em; text-align:center; padding:10px 18px; position:relative; z-index:110;
}
.announce .wrap{display:flex; align-items:center; justify-content:center; gap:11px; flex-wrap:wrap}
.announce .an-sep{opacity:.32}
.announce b{color:var(--accent-3); font-weight:600}

/* ==========================================================
   HEADER — yarı saydam cam, içerik altından akar
   ========================================================== */
.header{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(22px) saturate(180%);
  -webkit-backdrop-filter:blur(22px) saturate(180%);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease-soft), background .3s var(--ease-soft);
}
.header.scrolled{border-bottom-color:var(--line); background:rgba(255,255,255,.93)}
.header-in{display:flex; align-items:center; justify-content:space-between; height:68px; gap:20px}
.logo{display:flex; align-items:center}
.logo img{height:33px; width:auto}
.footer .logo img{height:30px}
.nav{display:flex; align-items:center; gap:4px}
.nav a{
  font-size:15px; font-weight:500; color:var(--label-2); letter-spacing:-.012em;
  padding:8px 14px; border-radius:var(--r-full);
  transition:color .16s var(--ease-soft), background .16s var(--ease-soft);
}
.nav a:hover{color:var(--label); background:var(--surface-2)}
.header-cta{display:flex; align-items:center; gap:14px}
.header-tel{font-size:15px; font-weight:600; letter-spacing:-.018em}

/* ==========================================================
   HERO
   ========================================================== */
.hero{
  padding:76px 0 0; position:relative; overflow:hidden;
  background:
    radial-gradient(900px 500px at 86% -10%, rgba(26,165,168,.13), transparent 60%),
    radial-gradient(680px 460px at 0% 26%, rgba(23,30,39,.04), transparent 56%),
    var(--surface);
}
.hero-grid{display:grid; grid-template-columns:1.07fr .93fr; gap:58px; align-items:center; padding-bottom:62px}
.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  background:rgba(255,255,255,.7); backdrop-filter:blur(14px) saturate(160%);
  border:1px solid var(--line); box-shadow:var(--sh-1);
  color:var(--accent); padding:8px 17px 8px 13px; border-radius:var(--r-full);
  font-size:13.5px; font-weight:600; letter-spacing:.02em; margin-bottom:24px;
}
.eyebrow::before{
  content:''; width:7px; height:7px; border-radius:50%; background:var(--accent);
  box-shadow:0 0 0 3px rgba(14,107,110,.15); flex-shrink:0;
}
.hero h1{margin-bottom:22px}
.hero h1 em{font-style:normal; color:var(--accent)}
.hero-sub{font-size:20px; color:var(--label-2); max-width:510px; margin-bottom:32px; line-height:1.5; letter-spacing:-.008em}
.hero-cta{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:18px}
.hero-note{font-size:15px; color:var(--label-3); letter-spacing:-.006em}

/* --- Rakam bandı --- */
.stats{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.stat{
  background:var(--surface-2); border-radius:var(--r-lg); padding:24px 24px 26px;
  transition:background .25s var(--ease-soft);
}
.stat:hover{background:var(--surface-3)}
.stat b{
  font-family:var(--font-display); display:block; font-size:44px; font-weight:700;
  letter-spacing:-.045em; line-height:1; margin-bottom:9px;
}
.stat b span{font-size:.46em; letter-spacing:-.02em; margin-left:3px; color:var(--accent)}
.stat p{font-size:14.5px; color:var(--label-2); line-height:1.45}

/* ==========================================================
   HERO GÖRSELİ — tarayıcı + telefon
   ========================================================== */
.hero-visual{position:relative; padding:28px 0 48px 48px}
.hv-browser{
  background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--sh-3);
  overflow:hidden; transform:perspective(1500px) rotateY(-4deg) rotateX(1.6deg);
  transition:transform .8s var(--ease);
}
.hero-visual:hover .hv-browser{transform:perspective(1500px) rotateY(-1.4deg) rotateX(.5deg)}
.hvb-bar{
  display:flex; align-items:center; gap:6px; padding:12px 15px;
  background:rgba(245,247,247,.86); backdrop-filter:blur(12px); border-bottom:1px solid var(--line-2);
}
.hvb-bar i{width:9px; height:9px; border-radius:50%; background:#D9DEE0; display:block}
.hvb-url{
  flex:1; margin-left:10px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-full); font-size:11px; color:var(--label-2); padding:5px 13px; font-weight:500;
}
.hvb-nav{display:flex; justify-content:space-between; align-items:center; padding:15px 20px}
.hvb-nav b{font-family:var(--font-display); font-size:14px; letter-spacing:-.028em}
.hvb-tel{font-size:11.5px; font-weight:600; color:var(--accent)}
.hvb-hero{
  margin:0 12px; border-radius:var(--r-md); padding:26px 20px 24px; color:#fff;
  position:relative; overflow:hidden;
  background:linear-gradient(140deg,#132F39 0%, #0E6B6E 135%);
}
.hvb-hero::after{
  content:''; position:absolute; inset:0;
  background:radial-gradient(230px 140px at 88% 6%, rgba(26,165,168,.45), transparent 66%);
}
.hvb-hero > *{position:relative; z-index:1}
.hvb-tag{
  display:inline-block; font-size:9.5px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:#93DCDE; margin-bottom:11px;
}
.hvb-hero h6{
  font-family:var(--font-display); font-size:19px; font-weight:700;
  letter-spacing:-.032em; line-height:1.2; margin:0 0 16px;
}
.hvb-cta{display:flex; gap:8px}
.hvb-cta b{background:#fff; color:#132F39; font-size:10.5px; font-weight:600; padding:8px 16px; border-radius:var(--r-full)}
.hvb-cta i{background:#25D366; color:#fff; font-style:normal; font-size:10.5px; font-weight:600; padding:8px 16px; border-radius:var(--r-full)}
.hvb-serv{display:grid; grid-template-columns:1fr 1fr; gap:7px; padding:16px 20px 12px}
.hvb-serv div{
  display:flex; align-items:center; gap:8px; background:var(--surface-2);
  border-radius:var(--r-xs); padding:10px 12px; font-size:11px; font-weight:500;
}
.hvb-serv span{width:6px; height:6px; border-radius:50%; background:var(--accent); flex-shrink:0}
.hvb-gal{display:grid; grid-template-columns:repeat(3,1fr); gap:7px; padding:0 20px 20px}
.hvb-gal i{display:block; height:44px; border-radius:var(--r-xs); background:linear-gradient(135deg,#E3EAEB,#F2F6F6)}
.hvb-gal i:nth-child(2){background:linear-gradient(135deg,#D8E9E9,#EEF7F7)}
.hvb-gal i:nth-child(3){background:linear-gradient(135deg,#E6E9EA,#F4F6F6)}

.hv-phone{
  position:absolute; left:0; bottom:8px; width:136px; background:#0B1016;
  border-radius:26px; padding:6px; box-shadow:var(--sh-3);
}
.hvp-screen{background:#fff; border-radius:21px; overflow:hidden}
.hvp-top{background:linear-gradient(145deg,#132F39,#0E6B6E); color:#fff; padding:21px 13px 15px}
.hvp-top b{font-family:var(--font-display); font-size:12px; letter-spacing:-.028em; display:block}
.hvp-top p{font-size:8.5px; color:#A3D8DA; margin-top:3px}
.hvp-cta{display:flex; gap:5px; padding:11px 10px 8px}
.hvp-cta span{flex:1; text-align:center; font-size:7.5px; font-weight:600; padding:7px 3px; border-radius:var(--r-full)}
.hvp-cta .c1{background:var(--ink); color:#fff}
.hvp-cta .c2{background:#25D366; color:#fff}
.hvp-list{padding:0 10px 12px; display:grid; gap:5px}
.hvp-list i{display:block; height:19px; border-radius:7px; background:var(--surface-3)}

.hv-badge{
  position:absolute; right:2px; top:-20px; z-index:3;
  background:rgba(255,255,255,.78); backdrop-filter:blur(20px) saturate(180%);
  border:1px solid rgba(255,255,255,.7); border-radius:var(--r-full); box-shadow:var(--sh-2);
  padding:11px 19px 11px 15px; display:flex; align-items:center; gap:9px;
  font-size:13px; white-space:nowrap;
}
.hv-badge .bi{width:17px; height:17px; stroke:var(--accent); stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round}
.hv-badge b{font-weight:600}
.hv-badge span{color:var(--label-2)}

/* ==========================================================
   BÖLÜMLER
   ========================================================== */
.section{padding:96px 0}
.section-paper{background:var(--surface-2); padding:76px 0; border-top:1px solid var(--line)}
.section-dark{background:var(--ink); color:#fff; padding:126px 0}
.sec-head{max-width:700px; margin-bottom:52px}
.sec-head.center{margin-left:auto; margin-right:auto}
.sec-num{
  display:inline-block; font-size:12.5px; font-weight:600; letter-spacing:.13em;
  text-transform:uppercase; color:var(--accent); margin-bottom:18px;
}
.sec-head h2{margin-bottom:18px}
.sec-head h2,.speed-head h2,.cta h2{font-weight:800}
.sec-head p{font-size:19px; color:var(--label-2); line-height:1.5; letter-spacing:-.008em}
.section-dark .sec-head p{color:#9AA6B2}

/* --- Sektör şeridi (numarasız, kompakt) --- */
.band{padding:52px 0 56px; background:var(--surface)}
.band-lead{
  font-family:var(--font-display); font-size:clamp(1.25rem,2.5vw,1.7rem); font-weight:600;
  letter-spacing:-.026em; line-height:1.3; color:var(--label-2); margin-bottom:26px; max-width:640px;
}
.band-lead b{color:var(--label); font-weight:700}

/* --- Sektörler --- */
.sectors{display:flex; flex-wrap:wrap; gap:10px}
.sectors div{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-full);
  padding:11px 22px; font-size:15.5px; font-weight:500; letter-spacing:-.012em;
  transition:transform .3s var(--spring), background .18s var(--ease-soft),
             color .18s var(--ease-soft), border-color .18s var(--ease-soft);
}
.sectors div:hover{background:var(--ink); color:#fff; border-color:var(--ink); transform:translateY(-3px)}
.sectors-note{margin-top:28px; font-size:16px; color:var(--label-2)}

/* --- "Her pakette var" iddiası --- */
.claim{
  background:var(--surface); border-radius:var(--r-xl); padding:42px 44px; margin-bottom:20px;
  display:grid; grid-template-columns:auto 1fr; gap:34px; align-items:center; box-shadow:var(--sh-1);
}
.claim-mark{
  font-family:var(--font-display); font-size:56px; font-weight:700; line-height:1;
  color:var(--accent); background:var(--accent-tint); width:104px; height:104px;
  border-radius:var(--r-lg); display:grid; place-items:center; letter-spacing:-.05em;
}
.claim h3{margin-bottom:11px}
.claim p{font-size:17.5px; color:var(--label-2); line-height:1.5; letter-spacing:-.008em}

.feat-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
.feat{
  background:var(--surface); border-radius:var(--r-md); padding:22px 24px;
  display:flex; gap:15px; align-items:flex-start;
  transition:background .22s var(--ease-soft);
}
.feat:hover{background:var(--surface-2)}
.fi{
  width:22px; height:22px; flex-shrink:0; margin-top:2px;
  stroke:var(--accent); stroke-width:1.7; fill:none; stroke-linecap:round; stroke-linejoin:round;
}
.feat h4{margin-bottom:5px}
.feat p{font-size:14.5px; color:var(--label-2); line-height:1.45}

/* ==========================================================
   KAYAN ŞERİT
   ========================================================== */
.marquee{background:var(--ink); color:#fff; padding:18px 0; overflow:hidden; position:relative}
.marquee::before,.marquee::after{content:''; position:absolute; top:0; bottom:0; width:120px; z-index:2; pointer-events:none}
.marquee::before{left:0; background:linear-gradient(90deg,var(--ink),transparent)}
.marquee::after{right:0; background:linear-gradient(270deg,var(--ink),transparent)}
.marquee-track{display:flex; width:max-content; animation:slide 46s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-set{display:flex; align-items:center; flex-shrink:0}
.marquee-set span{
  display:flex; align-items:baseline; gap:10px; margin:0 8px; padding:8px 22px;
  background:rgba(255,255,255,.06); border-radius:var(--r-full);
  font-size:15px; font-weight:500; letter-spacing:-.012em; white-space:nowrap;
}
.marquee-set span i{font-style:normal; font-size:12.5px; color:var(--accent-3); font-weight:600}
@keyframes slide{from{transform:translateX(0)} to{transform:translateX(-50%)}}

/* ==========================================================
   24 SAAT ADIMLARI
   ========================================================== */
.speed-head{margin-bottom:52px; max-width:720px}
.speed-head h2{margin-bottom:18px}
.speed-head h2 em{font-style:normal; color:var(--accent-3)}
.speed-head p{font-size:19px; color:#9AA6B2; line-height:1.5}
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
.step{
  background:rgba(255,255,255,.05); border-radius:var(--r-lg); padding:26px 24px 28px;
  transition:background .25s var(--ease-soft);
}
.step:hover{background:rgba(255,255,255,.09)}
.si{
  width:26px; height:26px; margin-bottom:18px; display:block;
  stroke:var(--accent-3); stroke-width:1.6; fill:none; stroke-linecap:round; stroke-linejoin:round;
}
.step-time{font-size:12.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--accent-3); margin-bottom:12px}
.step h4{font-size:18px; letter-spacing:-.026em; margin-bottom:9px}
.step p{font-size:15px; color:#9AA6B2; line-height:1.5}

/* ==========================================================
   PAKETLER
   ========================================================== */
.pkg-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; align-items:start}
.pkg{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-xl);
  padding:34px 30px; position:relative;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.pkg:hover{transform:translateY(-5px); box-shadow:var(--sh-2)}
.pkg-pop{background:var(--ink); color:#fff; border-color:var(--ink); box-shadow:var(--sh-3)}
.pkg-pop:hover{box-shadow:0 12px 34px rgba(23,30,39,.16), 0 36px 76px rgba(23,30,39,.2)}
.pkg-badge{
  position:absolute; top:22px; right:24px; background:var(--accent-3); color:#fff;
  font-size:11.5px; font-weight:600; padding:6px 14px; border-radius:var(--r-full); letter-spacing:.01em;
}
.pkg-name{font-family:var(--font-display); font-size:22px; font-weight:700; letter-spacing:-.032em; margin-bottom:8px}
.pkg-for{font-size:15px; color:var(--label-2); min-height:46px; line-height:1.45; margin-bottom:22px}
.pkg-pop .pkg-for{color:#9AA6B2}
.pkg-price{display:flex; align-items:baseline; gap:5px; margin-bottom:5px}
.pkg-price b{font-family:var(--font-display); font-size:46px; font-weight:700; letter-spacing:-.048em; line-height:1}
.pkg-once{font-size:14.5px; color:var(--label-2); margin-bottom:24px}
.pkg-pop .pkg-once{color:#9AA6B2}
.pkg .btn{margin-bottom:24px}
.pkg-diff{
  background:var(--surface-2); border-radius:var(--r-sm); padding:15px 17px; margin-bottom:22px;
  font-size:15px; line-height:1.5; color:var(--label-2);
}
.pkg-pop .pkg-diff{background:rgba(255,255,255,.07); color:#9AA6B2}
.pkg-diff b{color:var(--accent); font-weight:600}
.pkg-inc{font-size:12px; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--label-3); margin-bottom:14px}
.pkg ul{list-style:none; margin:0; padding:0; display:grid; gap:11px}
.pkg li{display:flex; gap:11px; font-size:15px; line-height:1.4; align-items:flex-start}
.pkg li b{color:var(--accent); font-weight:600; flex-shrink:0}
.pkg-foot{
  margin-top:16px; background:var(--accent-tint); border-radius:var(--r-lg);
  padding:24px 30px; text-align:center;
}
.pkg-foot p{font-size:16px; color:var(--label-2)}
.pkg-foot b{color:var(--label); font-weight:600}

/* ==========================================================
   TASARIM KADEMELERİ
   ========================================================== */
.tiers{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.tier-card{
  background:var(--surface); border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--sh-1);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.tier-card:hover{transform:translateY(-5px); box-shadow:var(--sh-2)}
.tier-body{height:238px; padding:22px; overflow:hidden; position:relative}
.tier-meta{padding:20px 24px 24px}
.tier-meta h4{font-size:17px; letter-spacing:-.028em; margin-bottom:5px}
.tier-meta p{font-size:14.5px; color:var(--label-2); line-height:1.45}
.tb-nav{display:flex; justify-content:space-between; align-items:center; margin-bottom:20px}
.tb-links{display:flex; gap:8px}
.tb-links i{display:block; width:22px; height:5px; border-radius:3px}
.tb-p{height:6px; margin-bottom:6px; border-radius:3px}
.tb-p.s{width:66%}
.tb-row{display:grid; gap:8px; margin-top:20px}
.t1{background:var(--surface-2)}
.t1 .tb-logo{font-size:12px; font-weight:600}
.t1 .tb-links i{background:#DDE1E3}
.t1 h5{font-size:17px; margin:0 0 10px; letter-spacing:-.028em}
.t1 .tb-p{background:#E4E8E9}
.t1 .tb-btn{margin-top:14px; display:inline-block; background:var(--ink); color:#fff; font-size:10px; font-weight:600; padding:8px 16px; border-radius:var(--r-xs)}
.t1 .tb-row{grid-template-columns:repeat(3,1fr)}
.t1 .tb-row i{display:block; height:38px; border-radius:var(--r-xs); background:#E4E8E9}
.t2{background:var(--accent-tint)}
.t2 .tb-logo{font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase}
.t2 .tb-links i{background:#C6DCDC}
.t2 h5{font-size:22px; margin:0 0 11px; letter-spacing:-.04em; line-height:1.06}
.t2 h5 em{font-style:normal; color:var(--accent)}
.t2 .tb-p{background:#CFE2E2}
.t2 .tb-btn{margin-top:16px; display:inline-block; background:var(--accent); color:#fff; font-size:10px; font-weight:600; padding:9px 18px; border-radius:var(--r-full)}
.t2 .tb-row{grid-template-columns:1fr 1fr}
.t2 .tb-row i{display:block; height:40px; border-radius:var(--r-sm); background:rgba(14,107,110,.09)}
.t3{background:#0C0F14}
.t3 .tb-logo{font-size:11px; font-weight:600; color:#fff; letter-spacing:.2em; text-transform:uppercase}
.t3 .tb-links i{background:#2C3138}
.t3 h5{font-size:27px; margin:0 0 12px; letter-spacing:-.05em; color:#fff; line-height:1}
.t3 h5 em{font-style:italic; font-weight:400; color:var(--accent-3)}
.t3 .tb-p{background:#242A31}
.t3 .tb-btn{margin-top:18px; display:inline-block; background:#fff; color:#0C0F14; font-size:10px; font-weight:600; padding:9px 19px; border-radius:var(--r-full)}
.t3 .tb-row{grid-template-columns:2fr 1fr}
.t3 .tb-row i{display:block; height:34px; border-radius:var(--r-sm); background:#171B21}

/* ==========================================================
   MÜŞTERİ YORUMLARI
   ========================================================== */
.quotes{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.quote{
  margin:0; background:var(--surface); border-radius:var(--r-xl); padding:30px 28px;
  box-shadow:var(--sh-1); display:flex; flex-direction:column;
  transition:box-shadow .35s var(--ease);
}
.quote:hover{box-shadow:var(--sh-2)}
.q-stars{color:var(--amber); font-size:15px; letter-spacing:3px; margin-bottom:16px}
.quote blockquote{margin:0 0 22px; font-size:16.5px; line-height:1.6; letter-spacing:-.01em; flex:1}
.quote figcaption{display:flex; align-items:center; gap:13px}
.q-av{
  width:44px; height:44px; border-radius:50%; background:var(--av,var(--accent)); color:#fff;
  display:grid; place-items:center; font-family:var(--font-display); font-weight:600;
  font-size:14.5px; letter-spacing:-.01em; flex-shrink:0;
}
.q-who{display:flex; flex-direction:column; line-height:1.35}
.q-who b{font-size:15px; font-weight:600; letter-spacing:-.016em}
.q-who i{font-style:normal; font-size:13.5px; color:var(--label-2)}

/* ==========================================================
   SİPARİŞ AKIŞI
   ========================================================== */
.order{padding:88px 0 96px; background:var(--surface-2)}
.order-shell{
  display:grid; grid-template-columns:1fr 348px; align-items:start;
  max-width:1080px; margin:0 auto; background:var(--surface);
  border-radius:var(--r-2xl); box-shadow:var(--sh-3);
}
.order-main{min-width:0; border-radius:var(--r-2xl) 0 0 var(--r-2xl); overflow:hidden}
.prog{padding:26px 34px 0}
.prog-bar{height:6px; background:var(--surface-3); border-radius:var(--r-full); overflow:hidden; margin-bottom:13px}
.prog-fill{height:100%; background:var(--accent); border-radius:var(--r-full); transition:width .55s var(--ease); width:16.6%}
.prog-meta{display:flex; justify-content:space-between; align-items:center; font-size:13px; font-weight:600; letter-spacing:.05em; text-transform:uppercase}
.prog-meta .pm-step{color:var(--accent)}
.prog-meta .pm-name{color:var(--label-3)}
.step-panel{padding:26px 34px 34px}
.step-panel[hidden]{display:none}
.sp-head{margin-bottom:26px}
.sp-head h3{margin-bottom:9px}
.sp-head p{font-size:16px; color:var(--label-2); line-height:1.5}

/* --- Form alanları --- */
.field{margin-bottom:20px}
.field label{display:block; font-size:14.5px; font-weight:600; margin-bottom:8px; letter-spacing:-.008em}
.field label .opt{font-weight:400; color:var(--label-3)}
.field input[type=text],.field input[type=tel],.field input[type=email],.field select,.field textarea{
  width:100%; padding:15px 17px; border:1.5px solid var(--line); border-radius:var(--r-sm);
  background:var(--surface); color:var(--label);
  transition:border-color .18s var(--ease-soft), box-shadow .18s var(--ease-soft);
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--accent); box-shadow:0 0 0 4px rgba(14,107,110,.12);
}
.field input::placeholder,.field textarea::placeholder{color:#AEB6BD}
.field textarea{resize:vertical; min-height:104px; line-height:1.5}
.field select{
  appearance:none; padding-right:46px; background-repeat:no-repeat; background-position:right 17px center; background-size:15px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23171E27' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
.field .hint{font-size:13.5px; color:var(--label-3); margin-top:8px; line-height:1.45}
.field.err input,.field.err select,.field.err textarea{border-color:var(--red); box-shadow:0 0 0 4px rgba(200,30,30,.1)}
.err-msg{display:none; font-size:13.5px; color:var(--red); font-weight:600; margin-top:8px}
.field.err .err-msg{display:block}
.row-2{display:grid; grid-template-columns:1fr 1fr; gap:14px}

/* --- Seçim kartları --- */
.opt-list{display:grid; gap:10px}
.opt-card{
  display:block; background:var(--surface-2); border:1.5px solid transparent;
  border-radius:var(--r-md); padding:19px 21px; cursor:pointer; position:relative;
  transition:transform .2s var(--ease), background .18s var(--ease-soft), border-color .18s var(--ease-soft);
  -webkit-tap-highlight-color:transparent;
}
.opt-card:hover{background:var(--surface-3)}
.opt-card:active{transform:scale(.99)}
.opt-card input{position:absolute; opacity:0; pointer-events:none}
.opt-card.sel{background:var(--accent-tint); border-color:var(--accent)}
.opt-card:focus-within{box-shadow:0 0 0 4px rgba(14,107,110,.12)}
.oc-row{display:flex; align-items:flex-start; gap:15px}
.oc-check{
  width:23px; height:23px; border-radius:50%; border:1.5px solid #C3CBD1; background:var(--surface);
  flex-shrink:0; margin-top:2px; display:grid; place-items:center;
  transition:border-color .18s var(--ease-soft), background .18s var(--ease-soft), transform .25s var(--spring);
}
.opt-card.sel .oc-check{border-color:var(--accent); background:var(--accent); transform:scale(1.06)}
.oc-check svg{width:12px; height:12px; color:#fff; opacity:0; transition:opacity .16s var(--ease-soft)}
.opt-card.sel .oc-check svg{opacity:1}
.opt-card.check .oc-check{border-radius:8px}
.oc-body{flex:1; min-width:0}
.oc-title{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:4px}
.oc-title b{font-size:17.5px; font-weight:600; letter-spacing:-.026em}
.oc-tag{background:var(--accent); color:#fff; font-size:11px; font-weight:600; padding:4px 11px; border-radius:var(--r-full); letter-spacing:.02em}
.oc-desc{font-size:15px; color:var(--label-2); line-height:1.45}
.oc-price{text-align:right; flex-shrink:0}
.oc-price b{font-family:var(--font-display); font-size:20px; font-weight:700; letter-spacing:-.036em; display:block; white-space:nowrap}
.oc-price span{font-size:13px; color:var(--label-3)}
.up-note{margin-top:8px; display:inline-block; font-size:12.5px; font-weight:600; color:var(--green)}

/* --- Logo satış kutusu --- */
.logo-alert{
  background:var(--accent-tint); border-radius:var(--r-lg); padding:22px 24px; margin-top:16px;
  display:flex; gap:18px; align-items:flex-start;
}
.logo-alert[hidden]{display:none}
.la-mark{
  font-family:var(--font-display); font-size:22px; font-weight:700; color:#fff; background:var(--accent);
  width:44px; height:44px; border-radius:var(--r-sm); display:grid; place-items:center; flex-shrink:0;
}
.logo-alert h5{font-size:17px; letter-spacing:-.028em; margin:0 0 7px}
.logo-alert p{font-size:15px; color:var(--label-2); line-height:1.5; margin-bottom:15px}
.la-btn{
  display:inline-flex; align-items:center; gap:9px; background:var(--accent); color:#fff;
  font-family:var(--font-display); font-size:14.5px; font-weight:600; padding:12px 24px;
  border-radius:var(--r-full); transition:transform .16s var(--ease), background .18s var(--ease-soft);
}
.la-btn:hover{background:var(--accent-2)}
.la-btn:active{transform:scale(.965)}
.la-btn.added{background:var(--ink)}

/* --- Alan adı --- */
.dom-input{display:flex; gap:10px}
.dom-input input{flex:1}
.dom-suffix{
  display:flex; align-items:center; padding:0 20px; background:var(--ink); color:#fff;
  border-radius:var(--r-sm); font-weight:600; font-size:16px; letter-spacing:-.02em;
}
.dom-result{
  margin-top:13px; font-size:15px; font-weight:500; padding:14px 17px;
  border-radius:var(--r-sm); display:flex; align-items:center; gap:9px;
}
.dom-result[hidden]{display:none}
.dom-result.ok{background:#E9F5EE; color:var(--green)}
.dom-result.no{background:#FDECEC; color:var(--red)}
.dom-result.load{background:var(--surface-2); color:var(--label-3)}

/* --- Adet seçici --- */
.qty{display:flex; align-items:center; margin-top:14px; width:max-content; background:var(--surface); border-radius:var(--r-full); padding:3px; border:1.5px solid var(--line)}
.qty[hidden]{display:none}
.qty button{
  min-width:44px; min-height:44px; border-radius:var(--r-full); font-size:19px; font-weight:500;
  display:grid; place-items:center; line-height:1;
  transition:background .16s var(--ease-soft), transform .16s var(--ease);
}
.qty button:hover{background:var(--surface-3)}
.qty button:active{transform:scale(.9)}
.qty button:disabled{opacity:.3; cursor:not-allowed}
.qty > span{min-width:46px; min-height:44px; display:grid; place-items:center;
            font-weight:600; font-size:16px; font-family:var(--font-display)}
.qty-label{font-size:13.5px; color:var(--label-2); margin:0 14px 0 8px; min-width:max-content}

/* --- Özet --- */
.sum-box{background:var(--surface-2); border-radius:var(--r-lg); overflow:hidden; margin-bottom:22px}
.sum-sec{padding:18px 22px; border-bottom:1px solid var(--line)}
.sum-sec:last-child{border-bottom:none}
.sum-sec h5{
  font-size:12px; font-weight:600; letter-spacing:.13em; text-transform:uppercase;
  color:var(--label-3); margin:0 0 12px; display:flex; justify-content:space-between; align-items:center;
}
.sum-edit{font-size:12px; font-weight:600; color:var(--accent); text-transform:uppercase; letter-spacing:.09em}
.sum-line{display:flex; justify-content:space-between; gap:16px; font-size:15.5px; padding:5px 0; align-items:baseline}
.sum-line .sl-k{color:var(--label-2); flex-shrink:0}
.sum-line .sl-v{font-weight:600; text-align:right; word-break:break-word}
.pay-box{background:var(--surface-2); border-radius:var(--r-lg); padding:22px}
.pay-box h5{font-size:12px; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--label-3); margin:0 0 14px}
.pay-methods{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.pay-methods .opt-card{background:var(--surface)}
.pay-methods .opt-card.sel{background:var(--accent-tint)}
.consent{display:flex; gap:13px; align-items:flex-start; margin:22px 0; font-size:14.5px; color:var(--label-2); line-height:1.5}
.consent input{width:19px; height:19px; margin-top:2px; accent-color:var(--accent); flex-shrink:0}
.consent a{color:var(--label); font-weight:600; text-decoration:underline; text-underline-offset:2px}
.step-nav{display:flex; justify-content:space-between; gap:12px; margin-top:30px}
.step-nav .spacer{flex:1}

/* --- Sepet --- */
.cart{background:var(--surface-2); padding:28px 26px; align-self:stretch;
      border-radius:0 var(--r-2xl) var(--r-2xl) 0}
.cart-in{position:sticky; top:88px}
.cart h4{font-size:12px; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--label-3); margin-bottom:18px}
.cart-line{display:flex; justify-content:space-between; gap:12px; font-size:15px; padding:10px 0; align-items:baseline}
.cart-line .cl-k{color:var(--label-2); line-height:1.4}
.cart-line .cl-v{font-weight:600; white-space:nowrap}
.cart-line.main .cl-k{color:var(--label); font-weight:600}
.cart-items{margin-bottom:6px}
.cart-empty{font-size:15px; color:var(--label-3); padding:10px 0}
.cart-total{display:flex; justify-content:space-between; align-items:baseline; padding-top:16px; border-top:1px solid var(--line); margin-top:8px}
.cart-total span{font-size:13px; font-weight:600; letter-spacing:.11em; text-transform:uppercase}
.cart-total b{font-family:var(--font-display); font-size:30px; font-weight:700; letter-spacing:-.048em}
.cart-vat{font-size:13px; color:var(--label-3); margin-top:6px; text-align:right}
.cart-incl{margin-top:24px; padding-top:20px; border-top:1px solid var(--line)}
.cart-incl .ci-t{font-size:11.5px; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--label-3); margin-bottom:13px}
.cart-incl ul{list-style:none; margin:0; padding:0; display:grid; gap:9px}
.cart-incl li{display:flex; gap:10px; font-size:14px; color:var(--label-2); align-items:flex-start; line-height:1.4}
.cart-incl li b{color:var(--accent); font-weight:600; flex-shrink:0}

/* --- Bitiş --- */
.done{text-align:center; padding:64px 34px}
.done-mark{
  font-family:var(--font-display); font-size:38px; font-weight:700; color:#fff; background:var(--green);
  width:82px; height:82px; border-radius:50%; display:grid; place-items:center; margin:0 auto 24px;
  animation:pop .55s var(--spring) both;
}
@keyframes pop{from{transform:scale(.6); opacity:0} to{transform:scale(1); opacity:1}}
.done h3{margin-bottom:14px}
.done p{font-size:17px; color:var(--label-2); max-width:470px; margin:0 auto 28px; line-height:1.55}
.done-ref{display:inline-block; background:var(--surface-2); border-radius:var(--r-full); padding:13px 28px; font-size:16px; font-weight:600; margin-bottom:28px}
.done-ref span{color:var(--label-3); font-weight:400; margin-right:10px}

/* ==========================================================
   SSS
   ========================================================== */
.faq{max-width:820px; display:grid; gap:10px}
.faq-item{background:var(--surface); border-radius:var(--r-lg); overflow:hidden; transition:box-shadow .3s var(--ease)}
.faq-item.open{box-shadow:var(--sh-1)}
.faq-q{
  width:100%; text-align:left; padding:22px 26px; font-family:var(--font-display);
  font-size:18px; font-weight:600; letter-spacing:-.026em;
  display:flex; justify-content:space-between; align-items:center; gap:20px;
  -webkit-tap-highlight-color:transparent;
}
.faq-q i{
  font-style:normal; font-size:24px; font-weight:300; color:var(--accent); flex-shrink:0;
  transition:transform .35s var(--spring); line-height:1;
}
.faq-item.open .faq-q i{transform:rotate(135deg)}
.faq-a{max-height:0; overflow:hidden; transition:max-height .38s var(--ease)}
.faq-item.open .faq-a{max-height:420px}
.faq-a p{padding:0 26px 24px; font-size:16.5px; color:var(--label-2); line-height:1.6; max-width:660px}

/* ==========================================================
   CTA & FOOTER
   ========================================================== */
.cta{
  background:var(--ink); color:#fff; padding:100px 0; text-align:center; position:relative; overflow:hidden;
}
.cta::after{
  content:''; position:absolute; inset:0;
  background:radial-gradient(680px 340px at 50% 0%, rgba(26,165,168,.18), transparent 64%);
}
.cta .wrap{position:relative; z-index:1}
.cta h2{margin-bottom:20px}
.cta h2 em{font-style:normal; color:var(--accent-3)}
.cta p{font-size:20px; color:#9AA6B2; max-width:560px; margin:0 auto 36px; line-height:1.5}
.cta-note{margin-top:22px; font-size:15px; color:#6B7783}

.footer{background:var(--ink); color:#8C98A4; padding:58px 0 34px; font-size:15px; border-top:1px solid #232B35}
.footer-grid{display:grid; grid-template-columns:1.7fr 1fr 1fr 1fr; gap:42px; margin-bottom:48px}
.footer .logo{margin-bottom:16px}
.footer-about{line-height:1.6; max-width:280px}
.footer h5{color:#fff; font-size:12px; font-weight:600; letter-spacing:.13em; text-transform:uppercase; margin:0 0 17px}
.footer ul{list-style:none; margin:0; padding:0; display:grid; gap:11px}
.footer a{transition:color .16s var(--ease-soft)}
.footer a:hover{color:#fff}
.footer-bot{border-top:1px solid #232B35; padding-top:26px; display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; font-size:14px}

/* ==========================================================
   WHATSAPP
   ========================================================== */
.wa-float{
  position:fixed; bottom:22px; right:22px; z-index:90;
  background:rgba(23,30,39,.82); backdrop-filter:blur(20px) saturate(180%);
  color:#fff; padding:14px 22px; border-radius:var(--r-full);
  font-size:15px; font-weight:600; letter-spacing:-.016em; box-shadow:var(--sh-2);
  display:flex; align-items:center; gap:10px;
  transition:transform .22s var(--spring), background .2s var(--ease-soft);
}
.wa-float:hover{background:#25D366; transform:translateY(-2px)}
.wa-float:active{transform:scale(.95)}
.wa-float svg{width:19px; height:19px}

/* ==========================================================
   SCROLL ANİMASYONU
   ========================================================== */
.js .reveal{opacity:0; transform:translateY(16px); transition:opacity .6s var(--ease), transform .6s var(--ease)}
.js .reveal.in{opacity:1; transform:none}

/* ==========================================================
   ERİŞİLEBİLİRLİK TERCİHLERİ
   ========================================================== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .marquee-track{animation:none}
  .done-mark{animation:none}
  .js .reveal{opacity:1; transform:none; transition:opacity .2s linear}
  .hv-browser,.hero-visual:hover .hv-browser{transform:none; transition:none}
  *,*::before,*::after{transition-duration:.01ms !important; animation-duration:.01ms !important}
}
@media (prefers-reduced-transparency:reduce){
  .header{background:var(--surface); backdrop-filter:none; -webkit-backdrop-filter:none}
  .eyebrow,.hv-badge{background:var(--surface); backdrop-filter:none}
  .wa-float{background:var(--ink); backdrop-filter:none}
}
@media (prefers-contrast:more){
  :root{--line:#9AA4AC; --label-2:#3C4650; --label-3:#5C6975}
  .feat,.quote,.tier-card,.pkg{border:1px solid var(--line)}
  .opt-card{border-color:var(--line)}
}

/* ==========================================================
   RESPONSIVE
   ========================================================== */
@media (max-width:1000px){
  .hero-grid{grid-template-columns:1fr; gap:48px}
  .hero-visual{padding:28px 0 42px 46px; max-width:600px; margin:0 auto}
  .feat-grid,.tiers,.quotes{grid-template-columns:1fr 1fr}
  .pkg-grid{grid-template-columns:1fr}
  .pkg-pop{order:-1}
  .steps{grid-template-columns:1fr 1fr}
  .order-shell{grid-template-columns:1fr}
  .cart{order:-1; border-bottom:1px solid var(--line); border-radius:var(--r-2xl) var(--r-2xl) 0 0}
  .cart-in{position:static}
  .order-main{border-radius:0 0 var(--r-2xl) var(--r-2xl)}
  .cart-incl{display:none}
  .footer-grid{grid-template-columns:1fr 1fr; gap:32px}
  .nav,.header-tel{display:none}
  .claim{grid-template-columns:1fr; gap:24px; padding:34px}
}
@media (max-width:620px){
  body{font-size:16px}
  .wrap{padding:0 18px}
  .announce{font-size:12.5px; padding:9px 14px}
  .announce .an-sep,.announce .an-hide{display:none}
  .hero{padding:46px 0 0}
  .hero-grid{padding-bottom:42px}
  .hero-sub{font-size:18px}
  .hero-cta .btn{width:100%}
  .hero-visual{padding:24px 0 32px 30px}
  .hv-browser{transform:none}
  .hv-phone{width:108px; border-radius:22px}
  .hv-badge{right:0; top:-16px; padding:9px 15px; font-size:11.5px}
  .hvb-hero h6{font-size:16px}
  .hvb-serv{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr; gap:10px}
  .stat{padding:20px 22px}
  .stat b{font-size:38px}
  .section{padding:62px 0}
  .feat-grid,.tiers,.quotes,.steps{grid-template-columns:1fr}
  .marquee-set span{font-size:13.5px; padding:7px 17px}
  .claim-mark{width:76px; height:76px; font-size:42px}
  .step-panel,.prog{padding-left:20px; padding-right:20px}
  .row-2{grid-template-columns:1fr}
  .oc-row{flex-wrap:wrap}
  .oc-price{text-align:left; width:100%; padding-left:38px; margin-top:8px}
  .oc-price b{display:inline; margin-right:9px}
  .pay-methods{grid-template-columns:1fr}
  .cart{padding:24px 20px}
  .footer-grid{grid-template-columns:1fr}
  .step-nav{flex-direction:column-reverse}
  .step-nav .btn{width:100%}
  .step-nav .spacer{display:none}
  .wa-float{padding:13px 19px; font-size:14px; bottom:16px; right:16px}
  .faq-q{padding:20px 22px; font-size:16.5px}
  .faq-a p{padding:0 22px 22px; font-size:15.5px}
}

/* Sipariş sonu uyarısı — siparişin ulaşması için WhatsApp adımı şart */
.done-warn{
  background:#FFF6E5; color:#8A5A00; border-radius:var(--r-md);
  padding:15px 20px; font-size:15.5px; line-height:1.5; font-weight:500;
  max-width:520px; margin:0 auto 26px !important;
}