/* ==========================================================================
   Sayfaya özel bloklar: hero, akış, harita, referans, fiyat, blog
   ========================================================================== */

/* --- arka plan dokuları -------------------------------------------------- */
/* Izgara: sabit bir teknik zemin hissi verir, içeriğin arkasında kalır. */
.izgara::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(var(--izgara-cizgi) 1px, transparent 1px),
    linear-gradient(90deg, var(--izgara-cizgi) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 0%, transparent 78%);
  mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 0%, transparent 78%);
  pointer-events: none;
}
.izgara > * { position: relative; z-index: 1; }

/* --- hero --------------------------------------------------------------- */
.hero {
  position: relative;
  padding-top: clamp(7.5rem, 6rem + 8vw, 10.5rem);
  padding-bottom: clamp(3.5rem, 2rem + 5vw, 6rem);
  overflow: hidden;
}
.hero-izgara { display: grid; gap: clamp(3rem, 2rem + 4vw, 4.5rem); align-items: center; }
@media (min-width: 1060px) { .hero-izgara { grid-template-columns: 1.05fr 0.95fr; } }

.hero h1 { margin-block: 1.35rem 1.5rem; }
.hero-alt {
  max-width: 34rem;
  font-size: var(--t-buyuk);
  color: var(--metin-orta);
}
.hero-dugmeler { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 2.25rem; }
.hero-guven {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.4rem;
  margin-top: 1.75rem;
  font-size: var(--t-kucuk);
  color: var(--metin-soluk);
}
.hero-guven span { display: inline-flex; align-items: center; gap: 0.45rem; }
.hero-guven svg { width: 15px; height: 15px; color: var(--turkuaz); }

.hero-sayilar {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem 1rem;
  margin-top: 3rem;
  padding-top: 2.25rem;
  border-top: 1px solid var(--cizgi);
}
@media (min-width: 640px) { .hero-sayilar { grid-template-columns: repeat(4, 1fr); } }

/* Dört sayı yalnız boşlukla ayrılınca dağınık duruyordu; ince ayraçlar
   dördünü tek bir künye şeridine bağlıyor. Satır başındaki blokta ayraç
   olmuyor, yoksa şerit soldan açık kalıyor. */
.hero-sayilar .sayi-blok { padding-left: 1.15rem; border-left: 1px solid var(--cizgi); }
.hero-sayilar .sayi-blok:nth-child(2n + 1) { padding-left: 0; border-left: 0; }
@media (min-width: 640px) {
  .hero-sayilar .sayi-blok:nth-child(2n + 1) { padding-left: 1.15rem; border-left: 1px solid var(--cizgi); }
  .hero-sayilar .sayi-blok:first-child { padding-left: 0; border-left: 0; }
}

/* Hero görseli: tuval üzerine cam bir kart ve durum satırları biner. */
.hero-gorsel {
  position: relative;
  aspect-ratio: 1 / 1;
  max-width: 34rem;
  margin-inline: auto;
  width: 100%;
}
.hero-gorsel canvas { width: 100%; height: 100%; border-radius: var(--r-xl); }
.hero-kart {
  position: absolute;
  padding: 0.85rem 1rem;
  border: 1px solid var(--cizgi);
  border-radius: var(--r-md);
  background: var(--cam);
  backdrop-filter: blur(16px);
  box-shadow: var(--golge-yumusak);
  font-size: 0.8125rem;
  animation: suzul 6s var(--egri-yumusak) infinite;
}
.hero-kart strong { display: block; font-size: 0.9rem; font-weight: 650; }
.hero-kart span { color: var(--metin-soluk); }
.hero-kart-1 { top: 8%; left: -2%; animation-delay: 0s; }
.hero-kart-2 { bottom: 14%; right: -3%; animation-delay: 1.6s; }
.hero-kart-3 { bottom: -2%; left: 12%; animation-delay: 3.1s; }
@keyframes suzul {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -12px, 0); }
}
/* Dar ekranda kartlar şehri kapatmasın: küçülüyor ve kenarlara çekiliyor. */
@media (max-width: 640px) {
  .hero-kart { padding: 0.7rem 0.85rem; font-size: 0.75rem; }
  .hero-kart strong { font-size: 0.82rem; }
  .hero-kart-1 { top: 2%; left: 0; }
  .hero-kart-2 { bottom: 6%; right: 0; }
  .hero-kart-3 { bottom: -4%; left: 0; }
}

.kaydir-ipucu {
  display: none;
  margin-top: 3.25rem;
  font-size: var(--t-kucuk);
  color: var(--metin-soluk);
}
@media (min-width: 1060px) { .kaydir-ipucu { display: flex; align-items: center; gap: 0.7rem; } }
.kaydir-ipucu .fare {
  width: 22px; height: 34px;
  border: 1px solid var(--cizgi-guclu);
  border-radius: var(--r-tam);
  position: relative;
}
.kaydir-ipucu .fare::after {
  content: "";
  position: absolute;
  top: 6px; left: 50%;
  width: 3px; height: 7px;
  border-radius: 2px;
  background: var(--mavi-400);
  translate: -50% 0;
  animation: tekerlek 1.8s var(--egri-yumusak) infinite;
}
@keyframes tekerlek {
  0% { opacity: 0; transform: translateY(0); }
  35% { opacity: 1; }
  100% { opacity: 0; transform: translateY(11px); }
}

/* --- entegrasyon şeridi -------------------------------------------------- */
.serit-bolum {
  padding-block: clamp(2.75rem, 2rem + 2.5vw, 4.25rem);
  border-block: 1px solid var(--cizgi);
  background: linear-gradient(180deg, var(--zemin-alt) 0%, var(--zemin) 100%);
}

/* Sayı ve açıklaması tek bir blok. Daha önce etiket sola, sayı sağa
   yaslanmıştı; aradaki boşluk ikisini birbirinden kopardığı için okuyan
   iki ayrı parça görüyordu. Şimdi ayraç çizgisi ikisini bağlıyor ve blok
   şeridin üstünde ortada duruyor. */
.serit-ust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.15rem;
  margin-bottom: 2.1rem;
}
.serit-sayi {
  flex: none;
  font-size: clamp(2.4rem, 1.7rem + 2.6vw, 3.6rem);
  font-weight: 800;
  letter-spacing: -0.055em;
  line-height: 0.88;
  font-variant-numeric: tabular-nums;
  background: var(--degrade-metin);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.serit-metin {
  padding-left: 1.15rem;
  border-left: 1px solid var(--cizgi);
}
.serit-baslik {
  font-size: 1.05rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--metin);
}
.serit-aciklama {
  margin-top: 0.15rem;
  font-size: var(--t-kucuk);
  color: var(--metin-soluk);
}
@media (max-width: 520px) {
  .serit-ust { gap: 0.85rem; }
  .serit-metin { padding-left: 0.85rem; }
  .serit-baslik { font-size: 0.98rem; }
}

/* Alt cümle üstteki blokla aynı eksende duruyor: ikisi de ortada. */
.serit-alt {
  max-width: 48rem;
  margin: 2.1rem auto 0;
  text-align: center;
  font-size: 0.95rem;
  color: var(--metin-orta);
}
.serit-alt a {
  color: var(--mavi-500);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
  text-decoration-color: rgba(31, 85, 214, 0.35);
  transition: text-decoration-color var(--sure-hizli) var(--egri);
}
.serit-alt a:hover { text-decoration-color: currentColor; }
[data-tema="koyu"] .serit-alt a { color: var(--mavi-400); }

/* --- sorun / sayı ızgarası ----------------------------------------------
   min-width: 0 zorunlu: ızgara öğesinin varsayılan alt sınırı kendi
   min-content genişliği. İçeride satır kaydırmayan bir şerit ya da tablo
   varsa sütun kapsayıcıdan taşıyor ve telefonda sayfa yana kayıyor.        */
.izgara-2 > *,
.izgara-3 > *,
.izgara-4 > *,
.hero-izgara > *,
.akis-izgara > *,
.form-duzen > * { min-width: 0; }

.izgara-3 { display: grid; gap: 1.25rem; }
@media (min-width: 700px) { .izgara-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .izgara-3 { grid-template-columns: repeat(3, 1fr); } }

.izgara-4 { display: grid; gap: 1.25rem; }
@media (min-width: 640px) { .izgara-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .izgara-4 { grid-template-columns: repeat(4, 1fr); } }

.izgara-2 { display: grid; gap: 1.5rem; }
@media (min-width: 860px) { .izgara-2 { grid-template-columns: repeat(2, 1fr); } }

.sayi-serit {
  display: grid;
  gap: 1.75rem 1rem;
  grid-template-columns: repeat(2, 1fr);
  padding: 2rem;
  border: 1px solid var(--cizgi);
  border-radius: var(--r-xl);
  background: var(--yuzey);
  box-shadow: var(--golge-kart);
}
.sayi-serit .sayi-blok { padding-left: 1.15rem; border-left: 1px solid var(--cizgi); }
.sayi-serit .sayi-blok:nth-child(2n + 1) { padding-left: 0; border-left: 0; }
@media (min-width: 900px) {
  .sayi-serit { grid-template-columns: repeat(4, 1fr); }
  .sayi-serit .sayi-blok:nth-child(2n + 1) { padding-left: 1.15rem; border-left: 1px solid var(--cizgi); }
  .sayi-serit .sayi-blok:first-child { padding-left: 0; border-left: 0; }
}

/* --- kaydırmalı akış ---------------------------------------------------- */
/* Yükseklik kasıtlı olarak uzun: her adım için bir ekran kaydırma payı.
   Kaydırma miktarını JS okur, adımı ona göre değiştirir.                   */
.akis { position: relative; height: 460vh; }
@media (min-width: 1060px) { .akis { height: 560vh; } }
@media (max-width: 720px) { .akis { height: auto; } }

.akis-sabit {
  position: sticky;
  top: 0;
  height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
}
@media (max-width: 720px) { .akis-sabit { position: static; height: auto; padding-block: 3rem; } }

.akis-izgara { display: grid; gap: 2.5rem; width: 100%; align-items: center; }
@media (min-width: 1060px) { .akis-izgara { grid-template-columns: 0.85fr 1.15fr; gap: 4rem; } }

.akis-ray { display: flex; flex-direction: column; gap: 0.15rem; }
.akis-ray-oge {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.7rem 0.9rem;
  border-radius: var(--r-md);
  color: var(--metin-soluk);
  font-size: 0.925rem;
  font-weight: 600;
  text-align: left;
  width: 100%;
  transition: color var(--sure-orta) var(--egri), background var(--sure-orta) var(--egri);
}
.akis-ray-oge:hover { color: var(--metin-orta); }
.akis-ray-oge .no {
  display: grid; place-items: center;
  width: 28px; height: 28px; flex: none;
  border: 1px solid var(--cizgi);
  border-radius: 50%;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  transition: background var(--sure-orta) var(--egri), border-color var(--sure-orta) var(--egri), color var(--sure-orta) var(--egri);
}
.akis-ray-oge[data-etkin="evet"] { color: var(--metin); background: var(--parilti); }
.akis-ray-oge[data-etkin="evet"] .no { background: var(--degrade-marka); border-color: transparent; color: #fff; }

.akis-sahne { position: relative; min-height: 26rem; }
@media (max-width: 720px) { .akis-sahne { min-height: 0; display: grid; gap: 1.25rem; } }

.akis-adim {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition: opacity var(--sure-yavas) var(--egri), transform var(--sure-yavas) var(--egri);
  pointer-events: none;
}
.akis-adim[data-etkin="evet"] { opacity: 1; transform: none; pointer-events: auto; }
@media (max-width: 720px) {
  .akis-adim { position: static; opacity: 1; transform: none; pointer-events: auto; }
}

.akis-kutu {
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  border: 1px solid var(--cizgi);
  border-radius: var(--r-xl);
  background: var(--yuzey);
  box-shadow: var(--golge-kart);
}
.akis-kutu .sira {
  font-size: var(--t-mikro);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mavi-400);
}
.akis-kutu h3 { margin-block: 0.65rem 0.85rem; font-size: clamp(1.35rem, 1rem + 1.4vw, 2rem); }
.akis-kutu > p { color: var(--metin-orta); }
.akis-liste { margin-top: 1.5rem; display: grid; gap: 0.7rem; }
.akis-liste li { display: flex; gap: 0.65rem; font-size: 0.925rem; color: var(--metin-orta); }
.akis-liste svg { width: 17px; height: 17px; flex: none; margin-top: 0.25rem; color: var(--turkuaz); }

/* İlerleme çubuğu: kaydırma yüzdesini gösterir. */
.akis-ilerleme {
  margin-top: 1.75rem;
  height: 3px;
  border-radius: 3px;
  background: var(--cizgi);
  overflow: hidden;
}
.akis-ilerleme i {
  display: block;
  height: 100%;
  width: var(--oran, 0%);
  border-radius: 3px;
  background: var(--degrade-marka);
  transition: width 120ms linear;
}

/* --- kimler için: canlı operasyon panosu ---------------------------------
   Ürünün sevkiyat ekranının maketi. Çizilmiş bir harita yerine tablo var:
   süreler saniye saniye ilerliyor, durumlar değişiyor, teslim edilen satır
   düşüp yerine yeni sipariş giriyor. Canlı hissini işleyen veri veriyor.
   ========================================================================== */
.pano {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--cizgi);
  border-radius: var(--r-xl);
  background: var(--yuzey);
  box-shadow: var(--golge-kart);
  overflow: hidden;
}

.pano-ust {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.85rem 1.1rem;
  border-bottom: 1px solid var(--cizgi);
  background: var(--zemin-alt);
  font-size: var(--t-kucuk);
}
.pano-sayac { color: var(--metin-orta); }
.pano-sayac strong { color: var(--metin); font-variant-numeric: tabular-nums; }
.pano-saat {
  margin-left: auto;
  color: var(--metin-soluk);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

/* Sütun başlıkları ve satırlar aynı ızgarayı paylaşıyor. */
.pano-baslik,
.pano-satir {
  display: grid;
  grid-template-columns: 4.1rem minmax(0, 1.25fr) minmax(0, 1fr) 6.6rem 3.4rem;
  align-items: center;
  gap: 0.6rem;
  padding: 0 1.05rem;
}
.pano-baslik {
  padding-block: 0.55rem;
  border-bottom: 1px solid var(--cizgi);
  font-size: var(--t-mikro);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--metin-soluk);
}

.pano-liste { display: grid; }
.pano-satir {
  position: relative;
  padding-block: 0.7rem;
  border-bottom: 1px solid var(--cizgi);
  font-size: 0.875rem;
}
.pano-satir:last-child { border-bottom: 0; }

.pano-no { color: var(--metin-soluk); font-variant-numeric: tabular-nums; }
.pano-isletme strong { display: block; font-weight: 600; color: var(--metin); }
.pano-isletme small { display: block; font-size: var(--t-mikro); color: var(--metin-soluk); }
.pano-kurye { display: flex; align-items: center; gap: 0.45rem; color: var(--metin-orta); min-width: 0; }
.pano-kurye span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pano-avatar {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  flex: none;
  border-radius: 50%;
  background: var(--zemin-alt);
  border: 1px solid var(--cizgi);
  color: var(--metin-orta);
  font-size: 0.625rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* Durum rozeti: renk paketin hangi aşamada olduğunu tek bakışta veriyor. */
.pano-durum {
  justify-self: start;
  padding: 0.2rem 0.6rem;
  border-radius: var(--r-tam);
  border: 1px solid transparent;
  font-size: var(--t-mikro);
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
[data-durum="atandi"] .pano-durum { color: var(--altin); background: rgba(239, 157, 5, 0.12); border-color: rgba(239, 157, 5, 0.3); }
[data-durum="alindi"] .pano-durum { color: var(--turuncu); background: rgba(245, 89, 12, 0.1); border-color: rgba(245, 89, 12, 0.28); }
[data-durum="yolda"] .pano-durum { color: var(--mavi-500); background: rgba(31, 85, 214, 0.1); border-color: rgba(31, 85, 214, 0.28); }
[data-durum="teslim"] .pano-durum { color: var(--turkuaz); background: rgba(13, 158, 143, 0.12); border-color: rgba(13, 158, 143, 0.3); }
[data-tema="koyu"] [data-durum="yolda"] .pano-durum { color: var(--mavi-300); }

.pano-sure {
  justify-self: end;
  color: var(--metin-orta);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

/* Satırın altındaki ince ilerleme çizgisi: durum rozetiyle aynı bilgiyi
   mekânsal olarak veriyor. */
.pano-ilerleme {
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 2px;
  width: var(--oran, 0%);
  background: var(--mavi-500);
  opacity: 0.55;
  transition: width 900ms var(--egri);
}
[data-durum="teslim"] .pano-ilerleme { background: var(--turkuaz); opacity: 0.75; }

.pano-satir.yeni { animation: panoGir 500ms var(--egri) both; }
.pano-satir.cikiyor { animation: panoCik 420ms var(--egri) both; }
.pano-satir.degisti { animation: panoParla 900ms var(--egri-yumusak); }
@keyframes panoGir {
  from { opacity: 0; transform: translate3d(0, -10px, 0); }
  to { opacity: 1; transform: none; }
}
@keyframes panoCik {
  to { opacity: 0; transform: translate3d(0, 8px, 0); }
}
@keyframes panoParla {
  0% { background: rgba(31, 85, 214, 0.09); }
  100% { background: transparent; }
}

/* Dar ekranda kurye sütunu düşüyor: beş sütun sığmıyor, sıkıştırınca
   isimler kırpılıyordu. */
@media (max-width: 640px) {
  .pano-baslik,
  .pano-satir { grid-template-columns: 4.2rem minmax(0, 1fr) 6.6rem 3.2rem; padding-inline: 0.9rem; }
  .pano-baslik span:nth-child(3),
  .pano-kurye { display: none; }
}

/* --- numaralı adımlar (hakkımızda) ---------------------------------------
   Kart ızgarası yerine numaralı liste: bunlar eşdeğer özellikler değil,
   sırayla yaşanan aşamalar. Sıra bilgisini biçim taşıyor.                  */
.adimlar { display: grid; gap: 1.25rem; margin-top: 2.75rem; }
@media (min-width: 760px) { .adimlar { grid-template-columns: repeat(2, 1fr); gap: 2rem 2.5rem; } }
.adim { display: grid; grid-template-columns: auto 1fr; gap: 1.1rem; align-items: start; }
.adim-no {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border: 1px solid var(--cizgi);
  border-radius: var(--r-md);
  background: var(--zemin-alt);
  font-size: 0.8125rem;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  color: var(--mavi-500);
}
.adim h3 { margin-bottom: 0.45rem; }
.adim p { color: var(--metin-orta); font-size: 0.95rem; }

/* --- referanslar --------------------------------------------------------- */
.logo-izgara {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  border: 1px solid var(--cizgi);
  border-radius: var(--r-lg);
  background: var(--cizgi);
  overflow: hidden;
}
@media (min-width: 700px) { .logo-izgara { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .logo-izgara { grid-template-columns: repeat(5, 1fr); } }
.logo-kutu {
  display: grid;
  place-items: center;
  padding: 1.75rem 1rem;
  background: var(--yuzey);
  color: var(--metin-soluk);
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: 0.95rem;
  text-align: center;
  transition: background var(--sure-orta) var(--egri), color var(--sure-orta) var(--egri);
}
.logo-kutu:hover { background: var(--yukseltilmis); color: var(--metin); }

.gorus { display: flex; flex-direction: column; gap: 1.25rem; height: 100%; }
.gorus blockquote { font-size: 1.02rem; line-height: 1.7; color: var(--metin); }
.gorus footer { display: flex; align-items: center; gap: 0.8rem; margin-top: auto; }
.gorus .avatar {
  display: grid; place-items: center;
  width: 42px; height: 42px; flex: none;
  border-radius: 50%;
  background: var(--degrade-mavi);
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
}
.gorus cite { display: block; font-style: normal; font-weight: 650; font-size: 0.9rem; }
.gorus small { color: var(--metin-soluk); font-size: 0.8125rem; }
.yildizlar { display: flex; gap: 0.15rem; color: var(--altin); }
.yildizlar svg { width: 15px; height: 15px; }

/* --- kapanış çağrısı -----------------------------------------------------
   İki sürümü var: iç sayfalarda ortalanmış tek çağrı, ana sayfada ikili
   düzen. Ana sayfada üç ayrı kitle var (işletme, bayi, kurye); tek başlığın
   altına üç eş düğme koymak "hangisine basayım" sorusu yaratıyordu, her
   kitleye kendi kapısı verildi.                                            */
.cta-kutu {
  position: relative;
  padding: clamp(2.5rem, 1.5rem + 4vw, 5rem);
  border: 1px solid var(--cizgi);
  border-radius: var(--r-xl);
  background: var(--yuzey);
  box-shadow: var(--golge-kart);
  overflow: hidden;
  text-align: center;
}
.cta-kutu > * { position: relative; }
.cta-kutu p { max-width: 40rem; margin: 1rem auto 0; color: var(--metin-orta); font-size: var(--t-buyuk); }
.cta-dugmeler { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.85rem; margin-top: 2.25rem; }

/* --- ikili düzen (ana sayfa) -------------------------------------------- */
.cta-kutu.ikili {
  display: grid;
  gap: 2.5rem;
  padding: clamp(1.75rem, 1.2rem + 2.6vw, 3.25rem);
  text-align: left;
}
@media (min-width: 980px) {
  .cta-kutu.ikili { grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: center; }
}
.cta-kutu.ikili h2 { margin-block: 1rem 0.9rem; }
.cta-kutu.ikili p { margin: 0; max-width: 30rem; font-size: var(--t-govde); }

.cta-guven { display: grid; gap: 0.6rem; margin-top: 1.6rem; }
.cta-guven li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.9rem;
  color: var(--metin-orta);
}
.cta-guven svg { width: 16px; height: 16px; flex: none; color: var(--turkuaz); }

.cta-telefon { margin-top: 1.6rem !important; font-size: 0.9rem; color: var(--metin-soluk); }
.cta-telefon a {
  color: var(--metin);
  font-weight: 650;
  white-space: nowrap;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--cizgi-guclu);
  transition: text-decoration-color var(--sure-hizli) var(--egri);
}
.cta-telefon a:hover { text-decoration-color: currentColor; }

/* Her satır tıklanabilir bir kapı: ikon, başlık, tek satır açıklama ve ok. */
.cta-yollar { display: grid; gap: 0.85rem; }
.cta-yol {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--cizgi);
  border-radius: var(--r-lg);
  background: var(--yuzey);
  transition:
    transform var(--sure-orta) var(--egri),
    border-color var(--sure-orta) var(--egri),
    box-shadow var(--sure-orta) var(--egri),
    background var(--sure-orta) var(--egri);
}
.cta-yol .ikon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--cizgi);
  border-radius: var(--r-md);
  background: var(--zemin-alt);
  color: var(--mavi-500);
  transition: transform var(--sure-orta) var(--egri);
}
.cta-yol .ikon svg { width: 21px; height: 21px; }
.cta-yol strong { display: block; font-size: 1rem; font-weight: 650; letter-spacing: -0.015em; }
.cta-yol .aciklama { display: block; margin-top: 0.15rem; font-size: 0.85rem; color: var(--metin-soluk); }
.cta-yol .ok { width: 19px; height: 19px; flex: none; color: var(--metin-soluk); transition: transform var(--sure-orta) var(--egri), color var(--sure-orta) var(--egri); }
.cta-yol:hover {
  transform: translateY(-2px);
  border-color: var(--cizgi-guclu);
  box-shadow: var(--golge-yumusak);
}
.cta-yol:hover .ikon { transform: translateY(-1px) rotate(-4deg); }
.cta-yol:hover .ok { transform: translateX(4px); color: var(--mavi-500); }

/* Asıl beklenen adım: işletme başvurusu. Marka rengiyle öne çıkıyor,
   diğer ikisi eşit ama daha sakin duruyor. */
.cta-yol.ana {
  border-color: rgba(245, 89, 12, 0.35);
  background: rgba(245, 89, 12, 0.05);
}
.cta-yol.ana .ikon {
  background: var(--degrade-marka);
  border-color: transparent;
  color: #fff;
  box-shadow: var(--golge-marka);
}
.cta-yol.ana:hover {
  border-color: var(--turuncu);
  box-shadow: 0 20px 38px -24px rgba(245, 89, 12, 0.7);
}
.cta-yol.ana:hover .ok { color: var(--turuncu); }

/* --- iç sayfa başlığı ---------------------------------------------------- */
.sayfa-bas {
  position: relative;
  padding-top: clamp(7.5rem, 6rem + 7vw, 10rem);
  padding-bottom: clamp(2.5rem, 2rem + 3vw, 4rem);
  overflow: hidden;
}
.sayfa-bas h1 { margin-block: 1.2rem 1.1rem; font-size: clamp(2rem, 1.2rem + 3.4vw, 3.6rem); }
.sayfa-bas p { max-width: 44rem; font-size: var(--t-buyuk); color: var(--metin-orta); }

.kirinti { display: flex; flex-wrap: wrap; gap: 0.4rem; font-size: var(--t-kucuk); color: var(--metin-soluk); }
.kirinti a:hover { color: var(--mavi-400); }
.kirinti svg { width: 13px; height: 13px; opacity: 0.6; }

/* --- form düzeni --------------------------------------------------------- */
.form-duzen { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 1000px) { .form-duzen { grid-template-columns: 1.35fr 0.65fr; gap: 3rem; } }
.form-kutu {
  display: grid;
  gap: 1.5rem;
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  border: 1px solid var(--cizgi);
  border-radius: var(--r-xl);
  background: var(--yuzey);
  box-shadow: var(--golge-kart);
}
.form-adim-bas {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: var(--t-mikro);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--metin-soluk);
}
.form-adim-bas i {
  display: grid; place-items: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--parilti);
  border: 1px solid var(--cizgi);
  font-style: normal;
  font-size: 0.7rem;
  color: var(--mavi-400);
}
.yan-kart { display: grid; gap: 1.5rem; }
.yan-kart .kart p { font-size: 0.9rem; }
.yan-liste { display: grid; gap: 0.85rem; margin-top: 1.1rem; }
.yan-liste li { display: flex; gap: 0.6rem; font-size: 0.9rem; color: var(--metin-orta); }
.yan-liste svg { width: 16px; height: 16px; flex: none; margin-top: 0.25rem; color: var(--turkuaz); }

/* --- blog ---------------------------------------------------------------- */
.yazi-kart { display: flex; flex-direction: column; height: 100%; }
.yazi-kart .ust-bilgi {
  display: flex; align-items: center; gap: 0.6rem;
  font-size: var(--t-kucuk); color: var(--metin-soluk);
  margin-bottom: 0.9rem;
}
.yazi-kart h3 { margin-bottom: 0.6rem; }
.yazi-kart .dugme-sade { margin-top: auto; padding-top: 1.25rem; }

/* --- metin sayfası (KVKK, gizlilik) -------------------------------------- */
.metin-sayfa { max-width: 52rem; }
.metin-sayfa h2 { margin-block: 2.75rem 1rem; font-size: clamp(1.3rem, 1rem + 1vw, 1.75rem); }
.metin-sayfa h3 { margin-block: 1.75rem 0.6rem; }
.metin-sayfa p, .metin-sayfa li { color: var(--metin-orta); }
.metin-sayfa p + p { margin-top: 1rem; }
.metin-sayfa ul { margin-top: 1rem; display: grid; gap: 0.6rem; }
.metin-sayfa ul li { display: flex; gap: 0.7rem; }
.metin-sayfa ul li::before { content: ""; width: 6px; height: 6px; margin-top: 0.62rem; border-radius: 50%; background: var(--mavi-500); flex: none; }
.metin-sayfa a { color: var(--mavi-400); text-decoration: underline; text-underline-offset: 3px; }
.guncelleme {
  display: inline-block;
  margin-top: 1.5rem;
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--cizgi);
  border-radius: var(--r-tam);
  font-size: var(--t-kucuk);
  color: var(--metin-soluk);
}

/* --- uygulama sayfası ----------------------------------------------------
   Telefon 3B bir sahnede duruyor: hafifçe yana dönük, yavaşça süzülüyor,
   fareyle eğiliyor. Ekranın kendisi gerçek bir uygulama gibi kuruluyor;
   durum çubuğu, başlık, alt sekme çubuğu ve ana sayfa çizgisi olmadan
   ekran boşta duran bir liste gibi görünüyordu.
   ========================================================================== */
.telefon-sahne {
  perspective: 1500px;
  perspective-origin: 50% 45%;
  display: grid;
  place-items: center;
  animation: telefonSuzul 9s var(--egri-yumusak) infinite;
}
@keyframes telefonSuzul {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -14px, 0); }
}

.telefon {
  position: relative;
  width: min(288px, 78vw);
  aspect-ratio: 9 / 19.2;
  padding: 11px;
  border-radius: 46px;
  background: linear-gradient(150deg, #262c40 0%, #12162a 45%, #0b0e1c 100%);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.06) inset,
    0 40px 70px -30px rgba(10, 16, 34, 0.55),
    0 12px 24px -14px rgba(10, 16, 34, 0.4);
  transform: rotateY(calc(-13deg + var(--egim-x, 0deg))) rotateX(calc(5deg + var(--egim-y, 0deg)));
  transition: transform 600ms var(--egri-yumusak);
  transform-style: preserve-3d;
}
/* Cam yansıması: 3B eğimi inandırıcı kılan şey bu ince parlaklık. */
.telefon::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 32%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, 0.07) 100%);
  pointer-events: none;
}
/* Çentik: önce ekranla aynı renkteydi, görünmüyordu ve tepede kocaman bir
   boşluk varmış gibi duruyordu. */
.telefon-ada {
  position: absolute;
  top: 20px;
  left: 50%;
  translate: -50% 0;
  width: 84px;
  height: 22px;
  border-radius: var(--r-tam);
  background: #05070f;
  z-index: 2;
}

.telefon-ekran {
  position: relative;
  height: 100%;
  border-radius: 36px;
  background: var(--zemin);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 0.55rem 0.75rem 0;
}

/* --- ekran içi -------------------------------------------------------- */
.tel-durum-cubugu {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.35rem;
  height: 20px;
  color: var(--metin);
}
.tel-saat { font-size: 0.68rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }
.tel-simgeler { display: inline-flex; align-items: center; gap: 0.3rem; }
.tel-simgeler svg { height: 9px; width: auto; }

.tel-basi { display: flex; align-items: flex-end; justify-content: space-between; gap: 0.5rem; }
.tel-basi-ust { font-size: 0.58rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--metin-soluk); }
.tel-basi h3 { font-size: 1.05rem; letter-spacing: -0.03em; }
.tel-basi .rozet { font-size: 0.52rem; padding: 0.16rem 0.5rem; }

/* Gün içi özet tek bir kartta, aralarında ince ayraçlarla. */
.tel-ozet {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 0.6rem 0.2rem;
  border: 1px solid var(--cizgi);
  border-radius: var(--r-md);
  background: var(--zemin-alt);
}
.tel-ozet span {
  display: grid;
  gap: 0.1rem;
  justify-items: center;
  font-size: 0.56rem;
  color: var(--metin-soluk);
}
.tel-ozet span + span { border-left: 1px solid var(--cizgi); }
.tel-ozet strong {
  font-size: 0.82rem;
  font-weight: 750;
  letter-spacing: -0.03em;
  color: var(--metin);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Üzerinde çalışılan paket. */
.tel-is {
  display: grid;
  gap: 0.2rem;
  padding: 0.7rem 0.75rem 0.75rem;
  border: 1px solid var(--cizgi);
  border-radius: var(--r-md);
  background: var(--yuzey);
  box-shadow: var(--golge-kart);
}
.tel-is-ust { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.tel-no { font-size: 0.62rem; color: var(--metin-soluk); font-variant-numeric: tabular-nums; }
.tel-durum {
  padding: 0.12rem 0.45rem;
  border-radius: var(--r-tam);
  border: 1px solid transparent;
  font-size: 0.55rem;
  font-weight: 700;
  white-space: nowrap;
}
[data-asama="yeni"] .tel-durum { color: var(--altin); background: rgba(239, 157, 5, 0.14); border-color: rgba(239, 157, 5, 0.32); }
[data-asama="alindi"] .tel-durum { color: var(--turuncu); background: rgba(245, 89, 12, 0.12); border-color: rgba(245, 89, 12, 0.3); }
[data-asama="yolda"] .tel-durum { color: var(--mavi-500); background: rgba(31, 85, 214, 0.12); border-color: rgba(31, 85, 214, 0.3); }
[data-asama="teslim"] .tel-durum { color: var(--turkuaz); background: rgba(13, 158, 143, 0.14); border-color: rgba(13, 158, 143, 0.32); }
[data-tema="koyu"] [data-asama="yolda"] .tel-durum { color: var(--mavi-300); }

.tel-isletme { font-size: 0.88rem; font-weight: 650; letter-spacing: -0.02em; }
.tel-is-alt { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.tel-bolge { font-size: 0.62rem; color: var(--metin-soluk); }
.tel-sure { font-size: 0.62rem; color: var(--metin-orta); font-variant-numeric: tabular-nums; }
/* İlerleme çubuğu kartın içinde, kendi rayında. Kart kenarına yapışıkken
   köşeden taşıyormuş gibi duruyordu. */
.tel-ray {
  display: block;
  height: 3px;
  margin-top: 0.45rem;
  border-radius: 3px;
  background: var(--cizgi);
  overflow: hidden;
}
.tel-ilerleme {
  display: block;
  height: 100%;
  width: var(--oran, 0%);
  border-radius: 3px;
  background: var(--mavi-500);
  transition: width 900ms var(--egri);
}
[data-asama="teslim"] .tel-ilerleme { background: var(--turkuaz); }

.tel-baslik {
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--metin-soluk);
}
.tel-kuyruk, .tel-gecmis { display: grid; gap: 0.3rem; }
.tel-kuyruk li, .tel-gecmis li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.42rem 0.6rem;
  border: 1px solid var(--cizgi);
  border-radius: var(--r-sm);
  background: var(--yuzey);
}
.tel-kuyruk strong { display: block; font-size: 0.68rem; font-weight: 650; }
.tel-kuyruk small { display: block; font-size: 0.55rem; color: var(--metin-soluk); }
.tel-kuyruk em { font-style: normal; font-size: 0.56rem; font-weight: 700; color: var(--mavi-500); white-space: nowrap; }
.tel-gecmis li { font-size: 0.64rem; color: var(--metin-orta); }
.tel-gecmis em { font-style: normal; color: var(--metin-soluk); font-variant-numeric: tabular-nums; }
.tel-gecmis li.yeni { animation: satirGir 420ms var(--egri) both; }

/* Alt sekme çubuğu ve ana sayfa çizgisi ekranın dibine yapışıyor. */
.tel-alt {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: auto;
  padding: 0.5rem 0 0.35rem;
  border-top: 1px solid var(--cizgi);
}
.tel-alt span {
  display: grid;
  justify-items: center;
  gap: 0.18rem;
  font-size: 0.5rem;
  font-weight: 600;
  color: var(--metin-soluk);
}
.tel-alt svg { width: 16px; height: 16px; }
.tel-alt .etkin { color: var(--mavi-500); }
.tel-cizgi {
  display: block;
  width: 88px;
  height: 4px;
  margin: 0 auto 0.45rem;
  border-radius: 4px;
  background: var(--metin);
  opacity: 0.22;
}

@media (prefers-reduced-motion: reduce) {
  .telefon-sahne { animation: none; }
}

.magaza-dugmeler { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 2rem; }
.magaza {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem 1.25rem;
  border: 1px solid var(--cizgi-guclu);
  border-radius: var(--r-md);
  background: var(--parilti);
  transition: border-color var(--sure-hizli) var(--egri), transform var(--sure-hizli) var(--egri);
}
.magaza:hover { border-color: var(--mavi-500); transform: translateY(-2px); }
.magaza svg { width: 22px; height: 22px; }
.magaza small { display: block; font-size: 0.65rem; color: var(--metin-soluk); line-height: 1.2; }
.magaza strong { display: block; font-size: 0.95rem; font-weight: 650; letter-spacing: -0.02em; }

/* ==========================================================================
   İzometrik şehir sahnesi (hero)
   Dünya tek bir 3B bağlamda duruyor; binalar üç yüzden oluşuyor. Kameraya
   arkasını dönen üç yüz hiç çizilmiyor, DOM üçte bir küçülüyor.
   ========================================================================== */

.sehir {
  position: absolute;
  inset: 0;
  perspective: 1600px;
  perspective-origin: 50% 50%;
  animation: sehirSuzul 9.5s var(--egri-yumusak) infinite;
}
@keyframes sehirSuzul {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -16px, 0); }
}

/* Izgara yerine mutlak ortalama: dünya karesi kapsayıcıdan geniş olduğunda
   ızgara taşmayı tek yana atıyor ve sahne sağa kayıyordu. */
.sehir-dunya {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 520px;
  height: 520px;
  margin: -260px 0 0 -260px;
  transform-style: preserve-3d;
  --o: 0.66;
  --kaydir-y: 0px;
  transform:
    translateY(var(--kaydir-y))
    scale(var(--o))
    rotateX(calc(58deg + var(--egim-y, 0deg)))
    rotateZ(calc(-38deg + var(--egim-x, 0deg)));
  transition: transform 500ms var(--egri-yumusak);
}

.zemin {
  position: absolute;
  inset: 0;
  border-radius: 28px;
  background:
    repeating-linear-gradient(0deg, var(--izgara-cizgi) 0 1px, transparent 1px 52px),
    repeating-linear-gradient(90deg, var(--izgara-cizgi) 0 1px, transparent 1px 52px),
    radial-gradient(ellipse at 50% 45%, var(--sahne-ic), var(--sahne-dis));
  box-shadow: 0 0 0 1px var(--cizgi), 0 60px 90px -40px rgba(0, 0, 0, 0.9);
}


.yol {
  position: absolute;
  background: var(--sahne-yol);
  transform: translateZ(1px);
}
.yol-yatay { left: 0; right: 0; top: 232px; height: 56px; }
.yol-dikey { top: 0; bottom: 0; left: 232px; width: 56px; }

/* Kuryenin izleyeceği hat, yolun üstünde ince bir çizgi olarak duruyor. */
.rota {
  position: absolute;
  background: linear-gradient(90deg, transparent, var(--mavi-500), transparent);
  opacity: 0.75;
  transform: translateZ(3px);
  border-radius: 3px;
}
.rota-yatay { left: 150px; top: 258px; width: 112px; height: 3px; }
.rota-dikey {
  left: 258px; top: 258px; width: 3px; height: 196px;
  background: linear-gradient(180deg, var(--mavi-500), transparent);
}

/* --- binalar ------------------------------------------------------------ */
.bina {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: var(--d);
  transform-style: preserve-3d;
}
.bina i,
.bina b,
.bina u { position: absolute; display: block; }

/* üst yüz */
.bina i {
  inset: 0;
  border-radius: 3px;
  background: var(--bina-ust);
  box-shadow: inset 0 0 0 1px var(--bina-kenar);
  transform: translateZ(var(--h));
}
/* güney yüzü: alt kenardan menteşelenip yukarı kalkıyor */
.bina b {
  left: 0;
  top: var(--d);
  width: var(--w);
  height: var(--h);
  background: var(--bina-on);
  transform-origin: 0 0;
  transform: rotateX(90deg);
}
/* batı yüzü: sol kenardan menteşelenip yukarı kalkıyor */
.bina u {
  left: 0;
  top: 0;
  width: var(--h);
  height: var(--d);
  background: var(--bina-yan);
  transform-origin: 0 0;
  transform: rotateY(-90deg);
}

/* Üç bina renkle işaretli: paketin çıktığı işletme, marka binası ve
   teslim adresi. Sahnede gözün takip edeceği noktalar bunlar. */
.bina-isletme { --bina-ust: #ffb43d; --bina-yan: #e08d17; --bina-on: #b56b0b; --bina-kenar: rgba(224, 133, 10, 0.5); }
.bina-marka { --bina-ust: #3d78ee; --bina-yan: #2455cf; --bina-on: #1b3cb5; --bina-kenar: rgba(31, 85, 214, 0.55); }
.bina-musteri { --bina-ust: #2ee0c9; --bina-yan: #12b3a1; --bina-on: #0b8878; --bina-kenar: rgba(13, 158, 143, 0.5); }
[data-tema="koyu"] .bina-isletme { --bina-ust: #a86b12; --bina-yan: #7d4e0c; --bina-on: #543307; }
[data-tema="koyu"] .bina-marka { --bina-ust: #2b5ec4; --bina-yan: #1f4497; --bina-on: #152e69; }
[data-tema="koyu"] .bina-musteri { --bina-ust: #12a595; --bina-yan: #0c7a6e; --bina-on: #075149; }

/* --- alım ve teslim işaretleri ------------------------------------------ */
.direk {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 2px;
  height: var(--h);
  transform-origin: 0 0;
  transform: rotateX(90deg);
  background: linear-gradient(to bottom, transparent, var(--isaret-renk));
}
.ucdot {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -5px;
  border-radius: 50%;
  background: var(--isaret-renk);
  box-shadow: 0 0 18px var(--isaret-renk);
  transform: translateZ(var(--h));
}
.direk-isletme, .ucdot-isletme { --isaret-renk: var(--altin); }
.direk-musteri, .ucdot-musteri { --isaret-renk: var(--turkuaz); }

/* --- kurye -------------------------------------------------------------- */
.kurye {
  position: absolute;
  left: 0;
  top: 0;
  width: 13px;
  height: 13px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: var(--turuncu);
  box-shadow: 0 0 0 5px rgba(245, 89, 12, 0.22), 0 0 22px var(--turuncu);
  animation: kuryeYolu 9s linear infinite;
}
/* Önce doğuya, sonra güneye: kuş uçuşu değil, sokak hattı. */
@keyframes kuryeYolu {
  0%, 4% { transform: translate3d(150px, 258px, 6px); opacity: 0; }
  9% { opacity: 1; }
  38% { transform: translate3d(260px, 258px, 6px); opacity: 1; }
  88% { transform: translate3d(260px, 452px, 6px); opacity: 1; }
  97%, 100% { transform: translate3d(260px, 452px, 6px); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .sehir { animation: none; }
  .kurye { animation: none; transform: translate3d(260px, 340px, 6px); opacity: 1; }
}