/* ViraCheck — tanıtım sitesi
 *
 * Renkler uygulamanın kendi paletinden gelir (src/theme.ts → lightColors).
 * Uygulamanın birincil teması beyaz; gece modu kullanıcının açtığı bir
 * seçenek. Site de bu yüzden beyaz ve sistem temasını TAKİP ETMEZ: siteyi
 * görüp uygulamayı indiren kişi aynı görünümle karşılaşsın.
 *
 * Marka turkuazı (#2ED3C6) beyaz üzerinde 1.7:1 kalıyor, yani okunmuyor;
 * vurgu bu yüzden aynı ailenin koyu tonu (#09707F, beyaz üzerinde 5.78:1).
 * Uygulamadaki palet de aynı sebeple böyle.
 */

:root{
  color-scheme:light;
  --bg:#F4F6F8; --fg:#0E1C28; --muted:#4F6475; --faint:#5E7282; --line:#D5DEE6;
  --accent:#09707F; --accent-soft:#E6F1F2; --card:#FFFFFF;
  --on-accent:#FFFFFF; --danger:#C62A2F;
  --radius:16px;
  /* Beyaz zeminde kartları ayırmak için kenarlık tek başına zayıf kalıyor;
   * çok yumuşak bir gölge derinliği veriyor. */
  --golge:0 1px 2px rgba(14,28,40,.04), 0 10px 28px -16px rgba(14,28,40,.16);
  --golge-guclu:0 2px 6px rgba(14,28,40,.06), 0 28px 60px -28px rgba(14,28,40,.30);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-text-size-adjust:100%; -webkit-font-smoothing:antialiased;
}
a{color:var(--accent); text-decoration:none; overflow-wrap:anywhere}
a:hover{text-decoration:underline}
.wrap{max-width:1080px; margin:0 auto; padding:0 24px}

/* ------------------------------------------------------------ kahraman */

.hero{
  position:relative; overflow:hidden;
  /* Uygulamanın açık temadaki gökyüzü zemini: üstte soluk deniz mavisi,
   * aşağı doğru sayfa zeminine sönüyor. */
  background:linear-gradient(180deg,#DCEAF2 0%,#EBF1F5 38%,var(--bg) 78%);
  color:var(--fg);
}
.hero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(760px 440px at 50% -4%, rgba(9,112,127,.10), transparent 64%),
    radial-gradient(420px 300px at 12% 30%, rgba(9,112,127,.05), transparent 70%);
}
.hero > *{position:relative}

.nav{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:22px 0;
}
.brand{display:flex; align-items:center; gap:11px; font-weight:700; letter-spacing:.01em}
.brand img{width:30px; height:30px; border-radius:8px; display:block}
.nav a{color:var(--muted); font-size:.92rem}
.nav a:hover{color:var(--accent)}

.hero-inner{text-align:center; padding:38px 0 0}
.hero .mark{
  width:82px; height:82px; border-radius:20px; display:block; margin:0 auto 26px;
  box-shadow:0 18px 38px -16px rgba(14,28,40,.45);
}
.hero h1{
  font-size:clamp(2rem, 5.2vw, 3.35rem); line-height:1.1;
  letter-spacing:-.028em; margin:0 0 18px; font-weight:700;
}
.hero .lead{
  font-size:clamp(1.02rem, 1.8vw, 1.2rem); color:var(--muted);
  max-width:600px; margin:0 auto 28px;
}
.pill{
  display:inline-flex; align-items:center; gap:10px;
  border:1px solid var(--line); background:rgba(255,255,255,.76);
  border-radius:999px; padding:10px 20px; font-size:.92rem;
  color:var(--muted); backdrop-filter:blur(6px);
}
.pill b{color:var(--fg); font-weight:600}
.store-btn{
  display:inline-block; margin-top:20px; padding:14px 28px; border-radius:999px;
  background:var(--accent); color:var(--on-accent); font-weight:700; font-size:1.02rem;
  box-shadow:0 16px 34px -18px rgba(9,112,127,.75);
}
.store-btn:hover{filter:brightness(1.08); text-decoration:none}
/* Masaüstünden bakan ziyaretçi için: bağlantı App Store uygulamasına
 * devrediliyor ve ViraCheck Mac'te listelenmiyor; hangi cihaz olduğunu
 * baştan söylemek hata ekranından iyi. */
.store-not{margin:12px 0 0; font-size:.88rem; color:var(--faint)}

.pill .dot{
  width:8px; height:8px; border-radius:50%; background:var(--accent);
  box-shadow:0 0 0 4px rgba(9,112,127,.14);
}

/* ------------------------------------------------------- cihaz çerçevesi */

/* Çerçeve koyu kalıyor: gerçek telefonun kasası koyu ve açık zeminde
 * ekranın nerede bittiğini ancak o ayırıyor. */
.phone{
  border-radius:34px; padding:7px;
  background:linear-gradient(155deg,#3b4b5c 0%,#1d2a36 42%,#121b24 100%);
  box-shadow:var(--golge-guclu);
}
.phone img{display:block; width:100%; height:auto; border-radius:28px}

/* Kahramandaki üçlü diziliş: ortadaki önde ve büyük, yanlar geride.
 * Telefonlar bölümün altından taşar; sert kesik yerine zemine karışsınlar
 * diye alta bir geçiş serilir (::after). */
.stage{
  position:relative;
  display:flex; align-items:flex-end; justify-content:center;
  gap:0; margin:52px 0 0; padding-bottom:8px;
}
.stage::after{
  content:""; position:absolute; left:-40px; right:-40px; bottom:0;
  height:150px; pointer-events:none;
  background:linear-gradient(180deg, rgba(244,246,248,0) 0%, var(--bg) 84%);
}
.stage .phone{width:264px; flex:none}
.stage .side{width:228px; opacity:.94}
.stage .left{transform:translateX(34px) translateY(26px) rotate(-4deg); z-index:1}
.stage .right{transform:translateX(-34px) translateY(26px) rotate(4deg); z-index:1}
.stage .center{z-index:2}

/* ------------------------------------------------------------- bölümler */

section{padding:78px 0}
section + section{border-top:1px solid var(--line)}
.eyebrow{
  display:inline-block; font-size:.78rem; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:var(--accent); margin:0 0 12px;
}
h2{font-size:clamp(1.5rem, 3vw, 2rem); line-height:1.2; letter-spacing:-.02em; margin:0 0 12px}
.sub{color:var(--muted); margin:0 0 40px; max-width:620px; font-size:1.03rem}

.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.feature{
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); padding:26px 24px; box-shadow:var(--golge);
}
.icon{
  width:42px; height:42px; border-radius:12px; margin-bottom:16px;
  background:var(--accent-soft); color:var(--accent);
  display:flex; align-items:center; justify-content:center;
}
.icon svg{width:21px; height:21px; stroke:currentColor; fill:none;
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.feature h3{margin:0 0 8px; font-size:1.06rem; letter-spacing:-.01em}
.feature p{margin:0; color:var(--muted); font-size:.95rem; line-height:1.6}

/* ------------------------------------------------------- ikili gösterim */

.split{display:grid; grid-template-columns:1fr 320px; gap:64px; align-items:center}
.split .phone{width:100%}
.checks{list-style:none; margin:26px 0 0; padding:0}
.checks li{
  position:relative; padding-left:30px; margin-bottom:13px; color:var(--muted);
}
.checks li::before{
  content:""; position:absolute; left:0; top:.5em;
  width:16px; height:9px; border-left:2.5px solid var(--accent);
  border-bottom:2.5px solid var(--accent); transform:rotate(-45deg);
}
.checks strong{color:var(--fg); font-weight:600}

/* --------------------------------------------------------------- panel */

.panel{
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); padding:34px 36px; box-shadow:var(--golge);
}
.panel.alert{border-color:color-mix(in srgb, var(--danger) 34%, var(--line))}
.panel.alert .icon{background:rgba(198,42,47,.10); color:var(--danger)}

/* ------------------------------------------------- iş ortaklığı bölümü */

/* Reklamveren ağları (Awin, doğrudan ortaklıklar) başvuruyu değerlendirirken
 * bu bölüme bakıyor: kitle kim, entegrasyon nasıl çalışıyor, kime yazılır. */
.partner-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:28px}
.stat{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:22px 24px; box-shadow:var(--golge);
}
.stat b{display:block; font-size:1.42rem; letter-spacing:-.02em; margin-bottom:4px}
.stat span{color:var(--muted); font-size:.92rem}
.partner-cta{
  margin-top:24px; display:flex; flex-wrap:wrap; gap:12px 20px; align-items:center;
}
.btn-ghost{
  display:inline-block; padding:12px 24px; border-radius:999px;
  border:1px solid var(--accent); color:var(--accent); font-weight:600; font-size:.96rem;
}
.btn-ghost:hover{background:var(--accent-soft); text-decoration:none}

/* Ortak markaları — tek sıra, sade. */
.brands{
  display:flex; flex-wrap:wrap; gap:10px; margin:22px 0 0; padding:0; list-style:none;
}
.brands li{
  border:1px solid var(--line); background:var(--card); border-radius:999px;
  padding:8px 16px; font-size:.92rem; color:var(--muted);
}
.brands li b{color:var(--fg); font-weight:600}

/* ----------------------------------------------- kiralama ve turlar */

/* Sayfanın gelir bölümü. Düz istatistik kartları ürünü anlatmıyordu;
 * ziyaretçi neyi kiralayacağını ve nereye gideceğini görsün diye iki ürün
 * fotoğraflı kartla, bölgeler de fotoğraflı karolarla gösteriliyor.
 * Fotoğraflar Wikimedia Commons'tan; künyeleri altlıkta. */

.offers{display:grid; grid-template-columns:repeat(2,1fr); gap:24px}
.offer{
  background:var(--card); border:1px solid var(--line); border-radius:20px;
  overflow:hidden; box-shadow:var(--golge); display:flex; flex-direction:column;
}
.offer-media{position:relative; aspect-ratio:16/10; overflow:hidden; background:#cfdde6}
.offer-media img{
  display:block; width:100%; height:100%; object-fit:cover;
  transition:transform .7s cubic-bezier(.2,.7,.2,1);
}
.offer:hover .offer-media img{transform:scale(1.04)}
/* Alt kenarda koyulaşma: üstüne yazılan sayı her fotoğrafta okunsun. */
.offer-media::after, .region::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(8,20,30,0) 40%, rgba(8,20,30,.8) 100%);
}
.offer-tag{
  position:absolute; left:18px; top:18px; z-index:1;
  background:rgba(255,255,255,.92); color:var(--accent);
  border-radius:999px; padding:6px 14px; font-size:.76rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; backdrop-filter:blur(6px);
}
.offer-count{
  position:absolute; left:22px; bottom:16px; z-index:1; color:#fff;
  display:flex; align-items:baseline; gap:8px; text-shadow:0 1px 12px rgba(0,0,0,.25);
}
.offer-count b{font-size:2.6rem; line-height:1; letter-spacing:-.03em}
.offer-count span{font-size:.95rem; opacity:.92}
.offer-body{padding:26px 28px 28px; display:flex; flex-direction:column; flex:1}
.offer-body h3{margin:0 0 8px; font-size:1.3rem; letter-spacing:-.015em}
.offer-body > p{margin:0; color:var(--muted); font-size:.98rem}
.offer .checks{margin:20px 0 0}
.offer .checks li{margin-bottom:10px; font-size:.95rem}
.offer-partners{
  margin-top:auto; padding-top:18px; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  font-size:.84rem; color:var(--faint);
}
.offer-body .checks{margin-bottom:22px}
.chip{
  border:1px solid var(--line); border-radius:999px; padding:5px 12px;
  color:var(--fg); font-weight:600; background:var(--bg);
}

.regions-head{
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:6px 20px; margin:64px 0 20px;
}
.regions-head h3{margin:0; font-size:1.3rem; letter-spacing:-.015em}
.regions-head p{margin:0; color:var(--muted); font-size:.92rem}
.region-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.region{
  position:relative; margin:0; border-radius:18px; overflow:hidden;
  aspect-ratio:4/3; box-shadow:var(--golge); background:#cfdde6;
}
.region img{
  display:block; width:100%; height:100%; object-fit:cover;
  transition:transform .7s cubic-bezier(.2,.7,.2,1);
}
.region:hover img{transform:scale(1.05)}
.region figcaption{
  position:absolute; left:18px; right:18px; bottom:15px; z-index:1; color:#fff;
  text-shadow:0 1px 10px rgba(0,0,0,.3);
}
.region figcaption b{display:block; font-size:1.22rem; letter-spacing:-.01em}
.region figcaption span{font-size:.84rem; opacity:.92}

.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:64px}
.step{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:24px 24px 26px; box-shadow:var(--golge);
}
.step-no{
  width:34px; height:34px; border-radius:50%; margin-bottom:14px;
  background:var(--accent); color:var(--on-accent); font-weight:700; font-size:.95rem;
  display:flex; align-items:center; justify-content:center;
}
.step h4{margin:0 0 6px; font-size:1.04rem; letter-spacing:-.01em}
.step p{margin:0; color:var(--muted); font-size:.94rem; line-height:1.6}

.partner-strip{
  margin-top:28px; padding:22px 26px; border-radius:var(--radius);
  background:var(--accent-soft); border:1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
  display:flex; flex-wrap:wrap; align-items:center; gap:12px 18px;
}
.partner-strip > span{font-size:.9rem; color:var(--muted); font-weight:600}
.partner-strip .brands{margin:0}
.partner-strip .fine{flex-basis:100%; margin:4px 0 0; max-width:none}

/* ----------------------------------------------------------- fiyatlama */

.plans{display:grid; grid-template-columns:repeat(2,1fr); gap:20px}
.plan{
  border:1px solid var(--line); border-radius:var(--radius);
  padding:30px 28px; background:var(--card); box-shadow:var(--golge);
}
.plan.pro{border-color:var(--accent); background:var(--accent-soft); box-shadow:none}
.plan h3{margin:0 0 6px; font-size:1.15rem}
.plan .tag{font-size:.82rem; color:var(--accent); font-weight:700; letter-spacing:.06em; text-transform:uppercase}
.plan ul{list-style:none; margin:18px 0 0; padding:0; color:var(--muted); font-size:.95rem}
.plan li{margin-bottom:9px}
.plan li::before{content:"·"; color:var(--accent); font-weight:700; margin-right:9px}

/* -------------------------------------------------------------- altlık */

footer{
  border-top:1px solid var(--line); padding:40px 0 70px;
  color:var(--muted); font-size:.92rem;
}
footer .links{margin:0 0 18px; display:flex; flex-wrap:wrap; gap:8px 20px}
.fine{font-size:.84rem; margin:0 0 9px; color:var(--faint); max-width:760px}

/* --------------------------------------------------------------- dar ekran */

@media (max-width:900px){
  .grid, .partner-grid{grid-template-columns:repeat(2,1fr)}
  .offers{grid-template-columns:1fr}
  .region-grid{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:1fr}
  .split{grid-template-columns:1fr; gap:38px}
  .split .phone{width:270px; margin:0 auto}
}
@media (max-width:680px){
  section{padding:56px 0}
  .grid, .plans, .partner-grid{grid-template-columns:1fr}
  .panel{padding:26px 22px}
  .offer-body{padding:22px 22px 24px}
  .offer-count b{font-size:2.2rem}
  .region-grid{gap:12px}
  .region figcaption{left:14px; right:14px; bottom:12px}
  .region figcaption b{font-size:1.05rem}
  .region figcaption span{font-size:.78rem}

  /* Dar ekranda da üç telefon birden görünsün. Kartlar küçülüp birbirine
   * sokuluyor: `translateX` yalnızca görüntüyü kaydırır, yerleşim genişliğini
   * değiştirmez — bu yüzden satırın taşmaması için negatif kenar boşluğu
   * gerekiyor. Toplam genişlik 336px; 384px ve üzeri ekranlara sığar. */
  .stage{margin-top:40px}
  .stage .phone{width:168px; padding:5px; border-radius:24px}
  .stage .phone img{border-radius:20px}
  .stage .side{width:140px}
  .stage .left{margin-right:-56px; transform:translateY(18px) rotate(-4deg)}
  .stage .right{margin-left:-56px; transform:translateY(18px) rotate(4deg)}
  .stage::after{height:110px}
}

/* iPhone SE / mini genişliği: bir kademe daha küçült, toplam 300px. */
@media (max-width:400px){
  .stage .phone{width:150px}
  .stage .side{width:125px}
  .stage .left{margin-right:-50px}
  .stage .right{margin-left:-50px}
}