/* ==========================================================================
   YükümJet — tanıtım sitesi
   --------------------------------------------------------------------------
   TASARIM DİLİ: asfalt ve kargo. Hedef kitle sahada çalışan nakliyeci; parlak,
   yumuşak, jenerik bir yazılım sitesi onlara başkasının dili gibi geliyor.
   Bu yüzden koyu asfalt zemin, markanın yanık turuncusu, yol çizgisi sarısı ve
   sert geometri kullanılıyor. Yuvarlaklık yalnızca dokunulabilir şeylerde
   (düğme, rozet) var — panelde ve bantlarda köşeler keskin.

   Renk sistemi mobil uygulamanın temasından türetildi
   (yukumjet-mobile/src/theme.ts): kullanıcı siteden uygulamaya geçtiğinde
   aynı ürüne baktığını hissetmeli.
   ========================================================================== */

:root {
  /* Asfalt */
  --ink: #0a1015;
  --ink-2: #111c24;
  --ink-3: #1a2932;
  --ink-line: #26363f;

  /* Marka */
  --orange: #c0571e;
  --orange-hi: #ff7a33;
  --orange-dim: #7a3512;

  /* Yol çizgisi */
  --signal: #f2b01e;

  /* Kâğıt — soğuk gri değil sıcak: kargo/karton çağrışımı */
  --paper: #f4f1ed;
  --paper-2: #ffffff;
  --paper-line: #e2dcd4;

  --text: #0e171e;
  --muted: #67737c;
  --muted-dark: #8fa1ad;

  --wrap: 1140px;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 84px; }

body {
  margin: 0;
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--paper);
  color: var(--text);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

/* Başlıklar SIKI: Poppins varsayılan aralığıyla dağınık duruyor, sıkışınca
   sanayi tabelası gibi oturuyor */
h1, h2, h3, h4 {
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.12;
  margin: 0;
}

a { color: inherit; }

/* ── Üst bant ─────────────────────────────────────────────────────────────
   ZEMİN KATI, saydam DEĞİL. Saydam olunca üst bant sayfanın en üstündeyken
   arkasındaki açık gövde zeminini bulandırıyor ve kahraman bölümle arasında
   gri bir dikiş oluşuyordu — bant hero'nun üstünde değil ÖNÜNDE duruyor. */
.nav {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--ink);
  border-bottom: 1px solid var(--ink-line);
}

.nav-in {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 68px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  color: #fff;
  margin-right: auto;
}

/* Kaynak PNG 244x36 ve şeffaf payı kırpılmış — kutu yazının kendisi, o yüzden
   boşluklar buradan öngörülebilir şekilde veriliyor. Payı dururken footer'da
   logo ile metin arası 35px'e çıkıyor, üst bantta da menüyle hizalanmıyordu.

   Genişlik 138px'te üstünde durulan sınır retina: kaynak 244px, iki katı
   276px'e kadar 1:1'in altında kalıyor. Daha büyütülürse bulanır. */
.brand-logo { display: block; width: 138px; height: auto; }

.nav-links { display: flex; align-items: center; gap: 26px; }

.nav-links a {
  color: #c6d2da;
  text-decoration: none;
  font-size: 14.5px;
  font-weight: 500;
  transition: color 0.15s;
}

.nav-links a:hover { color: #fff; }

.nav-cta {
  background: var(--orange);
  color: #fff !important;
  padding: 9px 18px;
  border-radius: 999px;
  font-weight: 600 !important;
}

.nav-cta:hover { background: var(--orange-hi); }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--ink-line);
  color: #fff;
  width: 40px;
  height: 40px;
  border-radius: 9px;
  font-size: 16px;
  cursor: pointer;
}

/* ── Kahraman bölüm ───────────────────────────────────────────────────────
   ASİMETRİK: solda metin, sağda akışın kendisi. Ortalanmış bir kahraman
   bölüm her yazılım sitesinde var; ürünün ne olduğunu göstermiyor. Burada
   sağdaki yığın ürünün TAM OLARAK ne yaptığını gösteriyor — ilanlar düşüyor. */
.hero {
  position: relative;
  background: var(--ink);
  color: #fff;
  overflow: hidden;
  padding: 84px 0 96px;
}

/* Zeminde yol: eğik, ince, tekrar eden şeritler */
.hero::before {
  content: '';
  position: absolute;
  inset: -40% -10% auto -10%;
  height: 180%;
  background: repeating-linear-gradient(
    118deg,
    transparent 0 68px,
    rgba(255, 255, 255, 0.022) 68px 70px
  );
  pointer-events: none;
}

/* Sağ üstte turuncu ışıma — düz renk zemini kırıyor */
.hero::after {
  content: '';
  position: absolute;
  top: -180px;
  right: -140px;
  width: 620px;
  height: 620px;
  background: radial-gradient(circle, rgba(192, 87, 30, 0.4), transparent 62%);
  pointer-events: none;
}

.hero-in {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: 56px;
  align-items: center;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--signal);
  border: 1px solid rgba(242, 176, 30, 0.32);
  background: rgba(242, 176, 30, 0.08);
  padding: 7px 14px;
  border-radius: 999px;
  margin-bottom: 22px;
}

.hero h1 {
  font-size: clamp(38px, 5.4vw, 62px);
  font-weight: 800;
  margin-bottom: 20px;
}

.hero h1 span {
  color: var(--orange-hi);
  /* Altı çizili değil — altına kalın bir şerit: yol boyası hissi */
  box-shadow: inset 0 -0.22em 0 rgba(192, 87, 30, 0.38);
}

.hero p.lead {
  font-size: 17.5px;
  color: #a9b8c2;
  max-width: 520px;
  margin: 0 0 32px;
  font-weight: 300;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 30px; }

.hero-stats {
  display: flex;
  gap: 34px;
  padding-top: 26px;
  border-top: 1px dashed var(--ink-line);
}

.hero-stats div strong {
  display: block;
  font-size: 25px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #fff;
}

.hero-stats div span { font-size: 13px; color: var(--muted-dark); }

/* ── Düğmeler ─────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform 0.12s, background 0.15s, border-color 0.15s;
}

.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--orange); color: #fff; }
.btn-primary:hover { background: var(--orange-hi); }
.btn-ghost { border-color: rgba(255, 255, 255, 0.24); color: #fff; }
.btn-ghost:hover { border-color: #fff; }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: var(--ink-3); }

/* Mağaza rozetleri — her biri kendi mağazasının renginde */
.store-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 11px 20px 11px 17px;
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  border-radius: 13px;
  text-decoration: none;
  color: #fff;
  background: rgba(255, 255, 255, 0.04);
}

.store-badge i { font-size: 26px; }
.store-badge b { display: block; font-size: 14.5px; font-weight: 600; line-height: 1.2; }
.store-badge small { font-size: 11px; color: var(--muted-dark); letter-spacing: 0.04em; }
.store-badge { transition: transform 0.12s, box-shadow 0.15s, filter 0.15s; }
.store-badge:hover { transform: translateY(-2px); filter: brightness(1.08); }
.store-badge:active { transform: translateY(0); }

/* App Store: Apple'ın mavi degradesi */
.store-badge.ios {
  border-color: transparent;
  background: linear-gradient(135deg, #1ec8ff 0%, #0a84ff 55%, #1e5cf2 100%);
  box-shadow: 0 8px 22px -8px rgba(10, 132, 255, 0.65);
}

/* Google Play: markanın yeşili */
.store-badge.play {
  border-color: transparent;
  background: linear-gradient(135deg, #01875f 0%, #00a173 100%);
  box-shadow: 0 8px 22px -8px rgba(1, 135, 95, 0.7);
}

.store-badge.ios small,
.store-badge.play small { color: rgba(255, 255, 255, 0.82); }

/* ── Kahraman görsel: canlı akış yığını ───────────────────────────────────
   İlanların düşüşünü gösteriyor — ürünün çekirdek fikri bu. Kartlar sırayla
   yukarıdan süzülüyor ve döngü başa dönüyor. */
.feed-stack { position: relative; }

.feed-frame {
  background: var(--ink-2);
  border: 1px solid var(--ink-line);
  border-radius: 22px;
  padding: 18px;
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.8);
}

.feed-head {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 2px 4px 15px;
  border-bottom: 1px dashed var(--ink-line);
  margin-bottom: 15px;
}

.feed-head .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #2ecc71;
  box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.6);
  animation: pulse 2.4s infinite;
}

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.55); }
  70% { box-shadow: 0 0 0 11px rgba(46, 204, 113, 0); }
  100% { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0); }
}

.feed-head strong { font-size: 13.5px; font-weight: 600; color: #fff; }
.feed-head span { margin-left: auto; font-size: 11.5px; color: var(--muted-dark); }

.listing {
  background: var(--ink-3);
  border: 1px solid var(--ink-line);
  /* Sol kenarda turuncu ray — uygulamadaki "yeni düşen ilan" işaretiyle aynı */
  border-left: 3px solid var(--orange);
  border-radius: 4px 12px 12px 4px;
  padding: 13px 15px;
  margin-bottom: 10px;
  animation: drop 0.55s cubic-bezier(0.2, 0.9, 0.3, 1) backwards;
}

.listing:nth-child(1) { animation-delay: 0.15s; }
.listing:nth-child(2) { animation-delay: 0.35s; }
.listing:nth-child(3) { animation-delay: 0.55s; }

@keyframes drop {
  from { opacity: 0; transform: translateY(-16px) scale(0.97); }
  to { opacity: 1; transform: none; }
}

.listing-route {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 700;
  font-size: 15px;
  color: #fff;
  margin-bottom: 5px;
}

.listing-route i { color: var(--orange-hi); font-size: 12px; }
.listing-body { font-size: 12.5px; color: var(--muted-dark); font-weight: 300; margin-bottom: 9px; }

.listing-meta { display: flex; align-items: center; gap: 8px; }

.tag {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  color: #c6d2da;
}

.listing-price { margin-left: auto; font-weight: 700; font-size: 14px; color: var(--signal); }

/* ── Şerit: şehir çiftleri akıyor ─────────────────────────────────────────
   Sonsuz kaydırma için içerik İKİ KEZ yazılıyor; tek kopya sona geldiğinde
   boşluk görünürdü. */
.marquee {
  background: var(--orange);
  color: #fff;
  overflow: hidden;
  padding: 13px 0;
  border-top: 2px solid var(--orange-dim);
  border-bottom: 2px solid var(--orange-dim);
}

.marquee-track {
  display: flex;
  gap: 40px;
  width: max-content;
  animation: slide 34s linear infinite;
}

.marquee span {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
  letter-spacing: 0.01em;
}

.marquee i { opacity: 0.55; font-size: 10px; }

@keyframes slide {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* Hareketi azaltma tercihine saygı — sürekli kayan şerit baş döndürebiliyor */
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
  .listing { animation: none; }
  html { scroll-behavior: auto; }
}

/* ── Günlük hacim şeridi ──────────────────────────────────────────────── */
.volume {
  background: var(--paper);
  border-bottom: 1px solid var(--paper-line);
  padding: 46px 0;
  text-align: center;
}

.volume-tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 28px;
}

.volume-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: 820px;
  margin-inline: auto;
}

/* Kesikli ayrac: uc rakam ayni olcunun parcalari, kutu icine alinsalar
   birbirinden bagimsiz uc istatistik gibi okunurdu */
.volume-item { padding: 0 16px; border-left: 1px dashed var(--paper-line); }
.volume-item:first-child { border-left: 0; }

/* Cizgi ikon: govde ici bos, kalinlik her uc aracta ayni. Dolgu olsaydi
   acik kagit zeminde uc kara leke gibi durur, rakamlarin onune gecerdi. */
.veh {
  display: block;
  width: 78px;
  height: 37px;
  margin: 0 auto 14px;
  fill: none;
  stroke: var(--orange);
  stroke-width: 1.6;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.volume-item strong {
  display: block;
  font-size: clamp(30px, 4.6vw, 44px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
}

.volume-item span { display: block; margin-top: 9px; font-size: 14px; color: var(--muted); }

/* ── Bölümler ─────────────────────────────────────────────────────────── */
.section { padding: 88px 0; }
.section-dark { background: var(--ink); color: #fff; }
.section-paper { background: var(--paper-2); }

.section-head { max-width: 620px; margin-bottom: 48px; }

/* Ortalanmış başlık — bölüm altındaki içerik simetrikse (ızgara, üçlü blok)
   sola yaslı başlık dengeyi bozuyor */
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }

.section-tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 13px;
}

.section-dark .section-tag { color: var(--signal); }

.section h2 { font-size: clamp(28px, 3.6vw, 40px); margin-bottom: 14px; }
.section-head p { color: var(--muted); font-size: 16.5px; margin: 0; font-weight: 300; }
.section-dark .section-head p { color: var(--muted-dark); }

/* ── Sorun bölümü: dağınıklığı göstererek anlat ───────────────────────── */
.chaos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
}

.chaos-item {
  background: var(--ink-2);
  border: 1px solid var(--ink-line);
  border-radius: 14px;
  padding: 22px;
}

.chaos-item i { font-size: 20px; color: var(--orange-hi); margin-bottom: 13px; display: block; }
.chaos-item h3 { font-size: 16px; margin-bottom: 7px; }
.chaos-item p { font-size: 14px; color: var(--muted-dark); margin: 0; font-weight: 300; }

/* ── Adımlar: yol işareti gibi numaralı ──────────────────────────────── */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  position: relative;
}

/* Adımları birleştiren kesikli yol */
.steps-grid::before {
  content: '';
  position: absolute;
  top: 27px;
  left: 12%;
  right: 12%;
  height: 2px;
  background: repeating-linear-gradient(
    90deg,
    var(--paper-line) 0 12px,
    transparent 12px 24px
  );
}

.step { position: relative; padding: 0 22px; text-align: center; }

.step-no {
  width: 56px;
  height: 56px;
  margin: 0 auto 20px;
  display: grid;
  place-items: center;
  background: var(--ink);
  color: #fff;
  font-weight: 800;
  font-size: 20px;
  border-radius: 50%;
  position: relative;
  z-index: 2;
  border: 4px solid var(--paper);
}

.step:nth-child(2) .step-no { background: var(--orange); }
.step:nth-child(3) .step-no { background: var(--signal); color: var(--ink); }

.step h3 { font-size: 18px; margin-bottom: 9px; }
.step p { color: var(--muted); font-size: 14.5px; margin: 0; font-weight: 300; }

/* ── Özellikler ─────────────────────────────────────────────────────────
   İlk kutu GENİŞ: özelliklerin hepsi eşit ağırlıkta değil, numaraya erişim
   ürünün satış argümanı. Eşit ızgara bunu diğerlerinin arasında kaybederdi. */
.features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.feature {
  background: var(--paper-2);
  border: 1px solid var(--paper-line);
  border-radius: 16px;
  padding: 26px;
  transition: transform 0.16s, box-shadow 0.16s;
}

.feature:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 34px -20px rgba(14, 23, 30, 0.4);
}

.feature-wide { grid-column: span 2; background: var(--ink); color: #fff; border-color: var(--ink-line); }
.feature-wide p { color: var(--muted-dark) !important; }

.feature-ico {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  background: rgba(192, 87, 30, 0.1);
  color: var(--orange);
  font-size: 19px;
  margin-bottom: 17px;
}

.feature-wide .feature-ico { background: rgba(255, 122, 51, 0.16); color: var(--orange-hi); }

.feature h3 { font-size: 17.5px; margin-bottom: 8px; }
.feature p { color: var(--muted); font-size: 14.5px; margin: 0; font-weight: 300; }

/* ── Kaynaklar: yazı + telefon mockup'ı ─────────────────────────────────
   Metin solda, görsel sağda. Görsel sütunu biraz DAR: telefon zaten dikey ve
   eşit sütunda gereğinden büyük duruyor, metin de dar kalıp satır satır
   kırılıyordu. */
.split {
  display: grid;
  grid-template-columns: 1fr 0.78fr;
  gap: 64px;
  align-items: center;
}

.split-text h3 { font-size: clamp(24px, 3vw, 32px); margin-bottom: 14px; }
.split-text > p { color: var(--muted); font-size: 16px; margin: 0 0 22px; font-weight: 300; }
.section-dark .split-text > p { color: var(--muted-dark); }

/* Kaynağın adını taşıyan rozet - hangi bölümde olduğunu tek bakışta veriyor */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  font-weight: 600;
  padding: 7px 15px;
  border-radius: 999px;
  margin-bottom: 18px;
  color: #fff;
}

.pill i { font-size: 15px; }
.pill-wa { background: #128c7e; }
.pill-tg { background: #229ed9; }
.pill-app { background: var(--orange); }

.ticks { list-style: none; padding: 0; margin: 0; }

.ticks li {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-size: 15px;
  margin-bottom: 11px;
}

.ticks li i { color: var(--orange); font-size: 12px; margin-top: 6px; }

/* ── Telefon içi kaydırıcı ──────────────────────────────────────────────
   Kaydırma ÇERÇEVENİN İÇİNDE: her kaynağın birkaç ekran görüntüsü var ve
   bölümü kaydırmak yerine yalnız ekranı döndürmek "aynı telefonun farklı
   ekranları" ifadesini veriyor. Bölümün kendisi sabit kalıyor.

   SWIPER YÜKLENMEZSE slaytlar alt alta iner; çerçeve `overflow: hidden`
   olduğu için yalnız ilki görünür ve düzen bozulmaz. */
.phone-swiper { width: 100%; height: 100%; }
.phone-swiper .swiper-slide { height: 100%; }

.phone-swiper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Noktalar EKRANIN İÇİNDE, EN ALTTA. Dışarı konsaydı üç bölümde üç ayrı
   nokta sırası oluşur ve sayfa gereksiz kalabalıklaşırdı.

   14px yükseklikteyken uygulamanın sekme çubuğunun ve Telegram'ın mesaj
   alanının üstüne biniyordu; en alta inince ekran görüntüsünün kendi
   içeriğini örtmüyor. */
.phone-swiper .swiper-pagination {
  bottom: 5px;
  /* Açık renkli bir ekran görüntüsünde noktalar kaybolmasın diye
     arkalarında koyu bir şerit var */
  display: inline-flex;
  gap: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: auto;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(10, 16, 21, 0.5);
  backdrop-filter: blur(4px);
}

.phone-swiper .swiper-pagination-bullet {
  width: 6px;
  height: 6px;
  margin: 0 !important;
  background: #fff;
  opacity: 0.45;
  transition: width 0.22s, opacity 0.22s;
}

.phone-swiper .swiper-pagination-bullet-active {
  width: 18px;
  border-radius: 999px;
  opacity: 1;
}

/* ── Telefon mockup'ı ────────────────────────────────────────────────────
   Görsel çerçevesiz konsa ekran görüntüsü sayfada yüzen bir dikdörtgen gibi
   duruyor; çerçeve onu "telefonda böyle görünüyor" ifadesine çeviriyor.

   ORAN KİLİTLİ (390/844): görsel değiştirildiğinde düzen kaymasın. Farklı
   ölçüde bir görsel gelirse `object-fit: cover` kırpar, çerçeve bozulmaz. */
.phone {
  position: relative;
  width: 100%;
  /* 252px: tam boy ekran goruntusu dikey olarak cok yer kapliyor ve kisa
     metnin yaninda bolumu gereksiz uzatiyordu */
  max-width: 252px;
  margin: 0 auto;
  aspect-ratio: 390 / 844;
  background: #0a1015;
  border: 9px solid #0a1015;
  border-radius: 42px;
  box-shadow:
    0 0 0 2px #2b3a44,
    0 34px 60px -26px rgba(10, 16, 21, 0.6);
  overflow: hidden;
}

/* Ekran alanı: içindeki kaydırıcı köşeleri taşmasın */
.phone > .swiper,
.phone > img {
  width: 100%;
  height: 100%;
  border-radius: 33px;
  overflow: hidden;
  display: block;
}

.phone > img { object-fit: cover; }

/* Dinamik ada - çerçeveyi telefon yapan ayrıntı */
.phone-notch {
  position: absolute;
  top: 11px;
  left: 50%;
  transform: translateX(-50%);
  width: 84px;
  height: 22px;
  background: #0a1015;
  border-radius: 999px;
  z-index: 2;
}

/* ── Üyelik ───────────────────────────────────────────────────────────── */
/* Baslik ortada durdugu icin blok da ortalaniyor; sola dayali kalsaydi
   basligin ekseni ile kartlarin ekseni ayri duserdi. */
.plans {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  max-width: 780px;
  margin-inline: auto;
}

/* Sutun: iki karttaki madde sayisi esit degil, ibare de margin-top:auto ile
   dibe itiliyor ki iki kartta ayni hizada okunsun. */
.plan {
  background: var(--paper-2);
  border: 1.5px solid var(--paper-line);
  border-radius: 18px;
  padding: 30px;
  position: relative;
  display: flex;
  flex-direction: column;
}

.plan-best { border-color: var(--orange); box-shadow: 0 0 0 4px rgba(192, 87, 30, 0.09); }

.plan-flag {
  position: absolute;
  top: -12px;
  right: 24px;
  background: var(--orange);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  padding: 5px 13px;
  border-radius: 999px;
  letter-spacing: 0.02em;
}

.plan h3 { font-size: 16px; color: var(--muted); font-weight: 600; margin-bottom: 10px; }

.plan-price { display: flex; align-items: baseline; gap: 6px; margin-bottom: 6px; }
.plan-price strong { font-size: 40px; font-weight: 800; letter-spacing: -0.04em; }
.plan-price span { color: var(--muted); font-size: 15px; font-weight: 500; }
.plan-note { font-size: 13px; color: var(--muted); margin: 0 0 20px; }

.plan ul { list-style: none; padding: 0; margin: 0 0 22px; }
.plan li { font-size: 14.5px; display: flex; gap: 10px; margin-bottom: 9px; align-items: flex-start; }
.plan li i { color: var(--orange); margin-top: 5px; font-size: 12px; }

/* Kartin en altinda, ozellik listesinden ince bir cizgiyle ayrilmis kanal
   ibaresi: fiyati goren kisinin bir sonraki sorusu "nereden alacagim" oluyor,
   cevabi karti terk etmeden vermek gerekiyor. */
.plan-how {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  margin: auto 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--paper-line);
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}

.plan-how i { color: #25d366; font-size: 14px; margin-top: 2px; flex: none; }

.plan-foot {
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 18px;
  max-width: 780px;
  margin-inline: auto;
  text-align: center;
}

/* ── S.S.S. — <details> ile, JavaScript yok ──────────────────────────── */
.faq { max-width: 780px; margin-inline: auto; }

.faq details {
  background: var(--paper-2);
  border: 1px solid var(--paper-line);
  border-radius: 13px;
  margin-bottom: 10px;
  overflow: hidden;
}

.faq summary {
  padding: 18px 22px;
  font-weight: 600;
  font-size: 15.5px;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 14px;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: '\f078';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  margin-left: auto;
  font-size: 12px;
  color: var(--orange);
  transition: transform 0.2s;
}

.faq details[open] summary::after { transform: rotate(180deg); }
.faq details[open] summary { border-bottom: 1px solid var(--paper-line); }

.faq .answer { padding: 16px 22px 20px; color: var(--muted); font-size: 14.5px; font-weight: 300; }
.faq .answer p { margin: 0 0 10px; }
.faq .answer p:last-child { margin: 0; }

/* ── Kapanış çağrısı ─────────────────────────────────────────────────── */
.cta {
  background: linear-gradient(140deg, var(--orange), #93380d);
  color: #fff;
  padding: 76px 0;
  position: relative;
  overflow: hidden;
  text-align: center;
}

.cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    118deg,
    transparent 0 60px,
    rgba(0, 0, 0, 0.05) 60px 62px
  );
}

.cta > .wrap { position: relative; }
.cta h2 { font-size: clamp(28px, 4vw, 42px); margin-bottom: 14px; }
.cta p { font-size: 17px; opacity: 0.92; max-width: 520px; margin: 0 auto 30px; font-weight: 300; }
.cta .hero-actions { justify-content: center; }

/* ── Sabit WhatsApp düğmesi ────────────────────────────────────────────
   SAĞ ALTTA SABİT: sayfanın neresinde olursa olsun ulaşılabilir. Yalnız
   iletişim bölümüne konsaydı, sorusu olan kişinin önce o bölümü bulması
   gerekirdi.

   Metin geniş ekranda YAZILI, dar ekranda yalnız ikon: telefonda ilanları
   okurken içeriğin üstünü örtmemeli. */
.wa-float {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 70;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 20px 13px 17px;
  border-radius: 999px;
  background: #25d366;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 14.5px;
  box-shadow: 0 12px 28px -8px rgba(37, 211, 102, 0.55);
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
}

.wa-float i { font-size: 21px; }

.wa-float:hover {
  background: #1fb855;
  transform: translateY(-2px);
  box-shadow: 0 16px 32px -8px rgba(37, 211, 102, 0.6);
}

.wa-float:active { transform: translateY(0); }

/* ── Alt bilgi ──────────────────────────────────────────────────────── */
.footer { background: var(--ink); color: #fff; padding: 58px 0 0; }

.footer-in {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 36px;
  padding-bottom: 44px;
}

.footer-brand .brand-logo { margin-bottom: 16px; }
.footer-brand p { color: var(--muted-dark); font-size: 14px; margin: 0; max-width: 270px; font-weight: 300; }

.footer-col h4 {
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: var(--signal);
  margin-bottom: 15px;
  font-weight: 700;
}

.footer-col a {
  display: block;
  color: #b3c2cc;
  text-decoration: none;
  font-size: 14px;
  margin-bottom: 9px;
  font-weight: 300;
}

.footer-col a:hover { color: #fff; }

.footer-bar {
  border-top: 1px solid var(--ink-line);
  padding-top: 22px;
  padding-bottom: 26px;
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--muted-dark);
  align-items: center;
  gap: 16px;
}

.pay-logos {
  background: #fff;
  border-radius: 8px;
  padding: 7px 12px;
  line-height: 0;
  max-width: 100%;
}
.pay-logos img { height: 24px; width: auto; max-width: 100%; }

/* ── İç sayfalar (hukuki metinler, destek, hesap silme) ──────────────── */
.page { padding-top: 52px; padding-bottom: 76px; }

.card {
  background: var(--paper-2);
  border: 1px solid var(--paper-line);
  border-radius: 18px;
  padding: 38px;
  max-width: 820px;
}

.card h1 { font-size: 30px; margin-bottom: 8px; }
.card h2 { font-size: 18px; margin: 30px 0 10px; }
.card .lead { color: var(--muted); margin: 0 0 26px; font-size: 15px; font-weight: 300; }

/* Hukuki metin sunucudan DÜZ METİN geliyor - satır sonları korunmalı */
.legal-body { white-space: pre-wrap; font-size: 15px; color: #33414c; font-weight: 300; }

.notice {
  background: #fdefe6;
  border: 1px solid #f2d3bf;
  border-left: 3px solid var(--orange);
  border-radius: 10px;
  padding: 15px 17px;
  font-size: 14px;
  color: #7a3512;
  margin-top: 22px;
}

.card ul { padding-left: 21px; }
.card li { margin-bottom: 7px; font-size: 15px; }
.card a { color: var(--orange); font-weight: 500; }

/* Kopru sayfasi (/ac/) - dugmeler kart icinde; .card a turuncusu beyaz yaziyi ezmesin */
.ac-card { max-width: 560px; margin: 0 auto; text-align: center; }
.ac-card a.btn, .ac-card a.store-badge { color: #fff; }
.ac-card .hero-actions { justify-content: center; margin-bottom: 0; }
.ac-ac { font-size: 17px; padding: 16px 30px; }
.ac-indir { margin-top: 34px; padding-top: 6px; border-top: 1px solid var(--paper-line); }

.steps { counter-reset: step; list-style: none; padding: 0; }

.steps li {
  counter-increment: step;
  padding-left: 42px;
  position: relative;
  margin-bottom: 13px;
}

.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--orange);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 700;
}

/* ── Duyarlılık ─────────────────────────────────────────────────────── */
@media (max-width: 960px) {
  .hero-in { grid-template-columns: 1fr; gap: 46px; }
  .features, .steps-grid, .plans { grid-template-columns: 1fr; }

  /* Dar ekranda görsel metnin ALTINA iniyor: yan yana kalsalar ikisi de
     okunamayacak kadar daralırdı */
  .split { grid-template-columns: 1fr; gap: 34px; }
  .split-media { order: 2; }
  .feature-wide { grid-column: span 1; }
  .steps-grid::before { display: none; }
  .step { text-align: left; padding: 0 0 4px; display: flex; gap: 18px; }
  .step-no { margin: 0; flex: 0 0 56px; }
  .footer-in { grid-template-columns: 1fr 1fr; }

  .nav-toggle { display: block; }

  .nav-links {
    position: absolute;
    top: 68px;
    left: 0;
    right: 0;
    background: var(--ink);
    border-bottom: 1px solid var(--ink-line);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 24px 20px;
    display: none;
  }

  .nav-links.open { display: flex; }
  .nav-links a { padding: 12px 0; border-bottom: 1px solid var(--ink-line); }
  .nav-cta { text-align: center; margin-top: 12px; border-bottom: 0 !important; }
}

@media (max-width: 620px) {
  .section { padding: 62px 0; }

  /* Dar ekranda yalnız ikon - yazılı hâli içeriğin üstünü örtüyordu */
  .wa-float {
    right: 16px;
    bottom: 16px;
    width: 54px;
    height: 54px;
    padding: 0;
    justify-content: center;
  }

  .wa-float span { display: none; }
  .wa-float i { font-size: 25px; }
  .hero { padding: 60px 0 70px; }
  .hero-stats { flex-wrap: wrap; gap: 22px; }

  /* Uc sutun dar ekranda "+20.000"i ortadan kirardi: satirlara donuyor.
     display:contents ile kartlar cozulup uc oge tek izgaraya giriyor --
     boylece ikon/rakam/etiket sutunlari UC SATIRDA DA hizali. Her satir
     kendi icinde ortalansaydi rakamlar birbirini tutmaz, kenar dagilirdi.
     Ayraca da gerek kalmiyor: satir araligi ayirmaya yetiyor. */
  /* Sutunlar icerik kadar, blok da justify-content ile ortalaniyor. Son sutun
     1fr olsaydi kalan bosluğu yutar, yazi grubu sola kaymis gibi dururdu. */
  .volume-grid {
    grid-template-columns: auto auto minmax(0, auto);
    justify-content: center;
    align-items: center;
    column-gap: 13px;
    row-gap: 17px;
    max-width: none;
    text-align: left;
  }

  .volume-item { display: contents; }
  .veh { width: 46px; height: 22px; margin: 0; }
  .volume-item strong { font-size: 27px; justify-self: end; }
  .volume-item span { margin: 0; font-size: 13.5px; }
  .card { padding: 26px; }
  .footer-in { grid-template-columns: 1fr; gap: 28px; }
  .footer-bar { flex-direction: column; gap: 8px; }
}