/* ============================================================
   ARAÇ GELSİN — Sayfa'ya özel bileşenler
   ============================================================ */

/* ============ HERO ============ */
.hero { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--c-hero-grad-top) 0%, var(--c-bg) 92%); }
.hero::before {
  content: ""; position: absolute; top: -180px; right: -160px; width: 560px; height: 560px; border-radius: 50%;
  border: 80px solid var(--c-ring); pointer-events: none;
}
.hero::after {
  content: ""; position: absolute; bottom: -220px; left: -160px; width: 460px; height: 460px; border-radius: 50%;
  background: radial-gradient(circle, rgb(224 22 60 / .12), transparent 70%); pointer-events: none;
}
.hero .container {
  position: relative; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: var(--sp-16); align-items: center; padding-block: var(--sp-20);
}
/* Grid items default to min-width:auto, which can refuse to shrink below
   their content's natural width and silently overflow the viewport — the
   minmax(0, …) tracks above only bound the *track*, not the item itself. */
.hero__content, .hero__visual { min-width: 0; }
@media (max-width: 1023px) { .hero .container { grid-template-columns: 1fr; gap: var(--sp-12); padding-block: var(--sp-12); } }

.hero__content .pill { margin-bottom: var(--sp-6); }
.hero__content h1 { margin-bottom: var(--sp-5); }
.hero__content .lead { max-width: 520px; margin-bottom: var(--sp-8); }
.hero-actions { display: flex; gap: var(--sp-4); flex-wrap: wrap; align-items: center; }

.hero__badges { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-10); }
.hero__badges li {
  display: flex; align-items: center; gap: var(--sp-3);
  border: 1px solid var(--c-border); border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4); background: var(--c-overlay-1);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.hero__badges li:hover { transform: translateY(-3px); border-color: var(--c-border-strong); background: var(--c-overlay-1); }
.hero__badges .ic { width: 34px; height: 34px; border-radius: var(--r-sm); background: var(--c-red-soft); color: var(--c-red-light); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.hero__badges .ic svg { width: 18px; height: 18px; }
.hero__badge-value { display: block; font-family: var(--font-display); font-weight: 700; color: var(--c-heading); font-size: var(--fs-sm); }
.hero__badge-label { display: block; font-size: 11px; color: var(--c-text-muted); }
.hero__badge-desc { display: none; }

.hero__visual { position: relative; }
.hero__frame {
  position: relative; border-radius: var(--r-xl); background: var(--c-card); border: 1px solid var(--c-border);
  box-shadow: var(--shadow-lg); padding: var(--sp-6); overflow: hidden;
}
.hero__frame img { border-radius: var(--r-md); aspect-ratio: 4/3.4; object-fit: cover; width: 100%; }
.hero__frame .img-placeholder { border-radius: var(--r-md); aspect-ratio: 4/3.4; }

.chip {
  position: absolute; display: flex; align-items: center; gap: var(--sp-3);
  background: var(--c-chip-bg); border: 1px solid var(--c-border); border-radius: var(--r-md);
  box-shadow: var(--shadow-md); padding: var(--sp-3) var(--sp-4); font-size: var(--fs-xs); font-weight: 600;
  animation: chip-float 5s ease-in-out infinite;
}
.chip strong { display: block; font-family: var(--font-display); font-size: var(--fs-sm); color: var(--c-heading); }
.chip__icon { width: 38px; height: 38px; border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--c-red-soft); color: var(--c-red-light); }
.chip__icon svg { width: 20px; height: 20px; }
.chip--tl { top: 6%; left: -8%; }
.chip--br { bottom: 8%; right: -7%; animation-delay: 1.6s; }
@keyframes chip-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@media (max-width: 1023px) { .chip--tl { left: 0; } .chip--br { right: 0; } }
@media (max-width: 560px)  { .chip { display: none; } }

/* ============ GÜVEN ŞERİDİ ============ */
.trust { border-block: 1px solid var(--c-border); }
.trust .container { display: grid; grid-template-columns: repeat(4, 1fr); padding-block: var(--sp-8); }
.trust__item { display: flex; align-items: center; gap: var(--sp-4); padding-inline: var(--sp-6); }
.trust__item + .trust__item { border-left: 1px solid var(--c-border); }
.trust__item svg { width: 28px; height: 28px; color: var(--c-red-light); flex-shrink: 0; }
.trust__item strong { display: block; font-family: var(--font-display); font-size: var(--fs-sm); color: var(--c-heading); }
.trust__item span { font-size: var(--fs-xs); color: var(--c-text-muted); }
@media (max-width: 1023px) { .trust .container { grid-template-columns: repeat(2, 1fr); } .trust__item:nth-child(odd) { border-left: none; } }
@media (max-width: 479px)  { .trust .container { grid-template-columns: 1fr; } .trust__item { border-left: none !important; } }

/* ============ STATS BAND ============ */
.stats { background: linear-gradient(160deg, var(--c-stats-grad-a), var(--c-stats-grad-b)); border-block: 1px solid var(--c-border); }
.stats .container { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-8); padding-block: var(--sp-16); }
@media (max-width: 1023px) { .stats .container { grid-template-columns: repeat(2, 1fr); gap: var(--sp-10); } }
@media (max-width: 479px)  { .stats .container { grid-template-columns: 1fr; } }

/* ============ MANİFESTO ============ */
.manifesto { text-align: center; }
.manifesto__inner { max-width: 780px; margin-inline: auto; }
.manifesto .divider { width: 64px; height: 3px; background: var(--c-red); margin: var(--sp-6) auto; border-radius: 2px; }
.manifesto p.statement { font-size: var(--fs-lg); color: var(--c-text); font-style: italic; font-family: var(--font-display); }

/* ============ İŞ PROBLEMİ ============ */
.problem-grid { display: grid; grid-template-columns: 1.3fr .9fr; gap: var(--sp-16); align-items: center; }
.problem-grid > * { min-width: 0; }
@media (max-width: 900px) { .problem-grid { grid-template-columns: 1fr; } }
.problem-list li {
  display: flex; align-items: baseline; gap: var(--sp-5); padding: var(--sp-5) 0; border-bottom: 1px solid var(--c-border);
  transition: padding-left var(--dur) var(--ease);
}
.problem-list li:hover { padding-left: var(--sp-2); }
.problem-num { font-family: var(--font-display); font-weight: 800; color: var(--c-red-light); font-size: var(--fs-lg); min-width: 2.2ch; }
.problem-pair { display: flex; flex-direction: column; gap: 2px; }
.problem-text { color: var(--c-heading); font-weight: 600; font-size: 1.02rem; }
.problem-need { color: var(--c-text-light); font-size: var(--fs-sm); }
/* height: 100% kaldırıldı — madde listesi 5 kalemli + giriş metni + kapanış
   sorusuyla uzayınca kartı da aynı (çok fazla) yüksekliğe zorluyor,
   içerik üstte/altta kalıp ortasında kocaman bir boşluk açılıyordu. Kart
   artık kendi doğal yüksekliğinde, .problem-grid'in align-items: center'ı
   ile satırda dikey ortalanıyor. */
.problem-side { display: flex; flex-direction: column; justify-content: center; gap: var(--sp-6); }
.problem-media {
  position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center;
  aspect-ratio: 4 / 3; width: 100%; border-radius: var(--r-lg);
  border: 1px solid var(--c-border); background: var(--c-surface);
  box-shadow: 0 20px 40px -24px rgba(0, 0, 0, .25);
}
.problem-media::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(var(--c-border) 1px, transparent 1px), linear-gradient(90deg, var(--c-border) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 0%, transparent 75%);
}
.problem-media__icon {
  position: relative; z-index: 1; width: 64px; height: 64px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--c-card); border: 1px solid var(--c-border-strong); color: var(--c-red-light);
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .3);
}
.problem-media__icon svg { width: 26px; height: 26px; }
.problem-callout {
  background: var(--c-card); border: 1px solid var(--c-border); border-radius: var(--r-lg);
  padding: var(--sp-10); display: flex; flex-direction: column; justify-content: center; flex: 1;
}
.problem-callout p { color: var(--c-heading); font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 700; margin: 0; }
/* Ana hat kırmızı kalsın istendi — düz tek ton dolgu yerine köşeli bir
   derinlik için hafif kırmızı gradyan + köşede koyu bir "gölge havuzu"
   (siyah radial glow) kullanılıyor; bu ikisi tek düz kırmızı bloktan
   daha şık/katmanlı okunuyor ama kimlik yine baştan sona kırmızı. */
.problem-callout--cta {
  position: relative; overflow: hidden; border-color: transparent;
  background: linear-gradient(155deg, var(--c-red-light) 0%, var(--c-red) 55%, var(--c-red-dark) 100%);
  min-height: 320px; box-shadow: var(--shadow-red);
  justify-content: space-between;
}
.problem-callout--cta::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: rgb(255 255 255 / .35);
}
.problem-callout--cta::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  width: 320px; height: 320px; right: -110px; bottom: -110px; border-radius: 50%;
  background: radial-gradient(circle, rgb(0 0 0 / .32) 0%, transparent 72%);
}
.problem-callout__icon {
  position: relative; z-index: 1; width: 48px; height: 48px; margin-bottom: var(--sp-6);
  display: flex; align-items: center; justify-content: center; border-radius: var(--r-md);
  background: rgb(255 255 255 / .18); color: #fff;
}
.problem-callout__icon svg { width: 22px; height: 22px; }
.problem-callout--cta p {
  position: relative; z-index: 1;
  color: #fff; font-size: var(--fs-xl); font-weight: 700; line-height: var(--lh-tight);
}
.problem-callout__badges {
  position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: var(--sp-3);
}
/* Standart .store-badge her yerde düz siyah (resmi rozet kuralı), ama burada
   kırmızı gradyanın üstünde tonu koparıp donuk duruyordu. Opak siyah yerine
   yarı saydam + hafif bulanık bir "cam" dolgu kullanıyoruz ki alttaki kırmızı
   hafifçe sızsın ve rozetler karta ait hissettirsin, yamanmış gibi değil. */
.problem-callout__badges .store-badge {
  background: rgb(0 0 0 / .34); border-color: rgb(255 255 255 / .3);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.problem-callout__badges .store-badge:hover {
  background: rgb(0 0 0 / .46); border-color: rgb(255 255 255 / .42);
}

/* ============ HEDEF / GOAL BANNER ============ */
.goal-banner {
  display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap;
  background: var(--c-card); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: var(--sp-6) var(--sp-8);
}
.goal-banner .eyebrow { margin: 0; }
.goal-banner p { margin: 0; font-weight: 700; color: var(--c-heading); font-size: var(--fs-md); }

/* ============ KONUMLANDIRMA ============ */
.positioning-statement h3 { font-size: clamp(1.6rem, 3vw, 2.1rem); }
.positioning-statement p { font-style: italic; font-weight: 600; color: var(--c-text); }
.positioning-statement .positioning-statement__body {
  font-style: normal; font-weight: 400; color: var(--c-text-muted); font-size: var(--fs-base);
  max-width: 640px; margin: var(--sp-6) auto 0;
}
.positioning-statement .positioning-statement__footer {
  font-style: normal; font-weight: 700; color: var(--c-red); font-size: var(--fs-sm); letter-spacing: .02em;
  max-width: 480px; margin: var(--sp-6) auto 0; padding-top: var(--sp-5); border-top: 1px solid var(--c-border);
}

/* ============ OPERASYON / HUB ============ */
/* align-items: stretch — harita ve "Hub Modeli" kartı aynı yükseklikte,
   üstten hizalı otursun diye (bkz. .hub-map: aspect-ratio yerine bu
   satırda kart neyse o yüksekliğe geriliyor). */
.operation-grid { display: grid; grid-template-columns: 1.4fr .8fr; gap: var(--sp-16); align-items: stretch; }
.operation-grid > * { min-width: 0; }
@media (max-width: 900px) { .operation-grid { grid-template-columns: 1fr; } }
.hub-model-card { background: var(--c-card); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: var(--sp-8); }
.hub-model-card h3 { color: var(--c-heading); margin-bottom: var(--sp-4); }
.hub-model-card li { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-4) 0; border-bottom: 1px solid var(--c-border); font-size: var(--fs-sm); color: var(--c-text-muted); }
.hub-model-card li:last-child { border-bottom: none; }
.hub-model-card li svg { width: 18px; height: 18px; margin-top: 2px; color: var(--c-red-light); flex-shrink: 0; }
.hub-feature-title { display: block; font-weight: 700; color: var(--c-heading); }
.hub-feature-desc { display: block; margin-top: 2px; color: var(--c-text-light); font-size: var(--fs-xs); }

/* ============ YÖNETİM PANELİ ============ */
.management-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-16); align-items: center; }
.management-grid > * { min-width: 0; }
@media (max-width: 900px) { .management-grid { grid-template-columns: 1fr; } }
.management-visual { background: var(--c-card); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: var(--sp-6); }
.management-visual .stat-tile {
  background: var(--c-overlay-1); border: 1px solid var(--c-border); border-radius: var(--r-md); padding: var(--sp-5);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.management-visual .stat-tile:hover { transform: translateY(-3px); border-color: var(--c-border-strong); }
.management-visual .stat-tile h4 { font-size: var(--fs-sm); color: var(--c-heading); margin-bottom: 2px; }
.management-visual .stat-tile span { font-size: 11px; color: var(--c-red-light); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }

/* ============ CTA GAP ============ */
.cta-gap { height: var(--sp-20); }

/* ============ İLETİŞİM SAYFASI ============ */
/* İki kart taban çizgisinde hizalı dursun diye align-items: stretch ile
   aynı yüksekliğe geriliyor. .contact-card düz bir blok (flex değil), o
   yüzden bilgi kartı formdan kısa kalırsa fazladan yükseklik en altta
   (son eleman olan uygulama linklerinden SONRA) sessizce kalır — önceki
   sürümdeki gibi içeriğin ortasında zorla açılan bir boşluk oluşmaz. */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-16); align-items: stretch; }
.contact-grid > * { min-width: 0; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-card {
  background: var(--c-card); border: 1px solid var(--c-border); border-radius: var(--r-xl); padding: var(--sp-8);
}
.contact-card h2 { font-size: var(--fs-lg); margin-bottom: var(--sp-2); }
.contact-card > p.text-muted { margin-bottom: var(--sp-6); }
/* Teklif formu bilgi kartından fazla uzun kalıyordu — girdiler burada
   sadece bu formda (diğer forma dokunmadan) küçültüldü, kart doğal
   yüksekliğiyle sağdaki bilgi kartına daha yakın dursun diye. */
#leadFormPage .form-group { margin-bottom: var(--sp-4); }
#leadFormPage .form-label { font-size: var(--fs-xs); margin-bottom: var(--sp-1); }
#leadFormPage .form-input,
#leadFormPage .form-textarea,
#leadFormPage .form-select { padding: 10px 14px; font-size: var(--fs-sm); }
#leadFormPage .form-textarea { min-height: 84px; }
.contact-card__badge {
  display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px;
  border-radius: var(--r-md); background: var(--c-red-soft); color: var(--c-red-light); margin-bottom: var(--sp-5);
}
.contact-card__badge svg { width: 24px; height: 24px; }
.contact-card__divider { height: 1px; background: var(--c-border); margin-block: var(--sp-6); }
.contact-card__subhead {
  display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm);
  font-family: var(--font-sans); font-weight: 700; color: var(--c-heading); margin-bottom: var(--sp-4);
}
.contact-card__subhead svg { width: 16px; height: 16px; color: var(--c-red-light); }

.contact-info-list { display: flex; flex-direction: column; }
.contact-info-list .feature-row__icon { width: 46px; height: 46px; }
.contact-info-list .feature-row__icon svg { width: 22px; height: 22px; }
.contact-info-list strong { display: block; color: var(--c-heading); font-size: var(--fs-sm); }
.contact-info-list span { font-size: var(--fs-sm); color: var(--c-text-muted); }

.region-pills { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.region-pill {
  padding: 6px 14px; border-radius: var(--r-full); background: var(--c-inset); border: 1px solid var(--c-border);
  font-size: var(--fs-xs); font-weight: 600; color: var(--c-text);
}

/* ============ Hızlı iletişim kartları ============
   Önceki sürüm tek satırlık, tamamı tıklanabilir yatay bir şeritti (ikon +
   başlık + değer + ok) — açıklama cümlesi ve gerçek bir buton eklenince bu
   dar şerit yetmedi. Kart artık dikey: ikon, başlık, açıklama, (varsa)
   değer, en altta gerçek bir .btn. */
.quick-contact-card {
  display: flex; flex-direction: column; padding: var(--sp-8);
  background: var(--c-card); border: 1px solid var(--c-border); border-radius: var(--r-lg);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.quick-contact-card:hover { transform: translateY(-4px); border-color: var(--c-border-strong); box-shadow: var(--shadow-md); }
.quick-contact-card__icon {
  width: 52px; height: 52px; border-radius: var(--r-md); background: var(--c-red-soft); color: var(--c-red-light);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-bottom: var(--sp-5);
}
.quick-contact-card__icon svg { width: 24px; height: 24px; }
.quick-contact-card h3 { font-size: var(--fs-md); margin-bottom: var(--sp-2); }
.quick-contact-card p { font-size: var(--fs-sm); color: var(--c-text-muted); margin-bottom: var(--sp-4); }
.quick-contact-card__value { display: block; color: var(--c-heading); font-size: var(--fs-sm); margin-bottom: var(--sp-5); }
.quick-contact-card .btn { margin-top: auto; }

/* ============ Lead modal ============ */
.lead-modal {
  position: fixed; inset: 0; z-index: 1000; display: none;
  align-items: center; justify-content: center; padding: var(--sp-6);
  height: 100vh;
  height: 100dvh;
}
.lead-modal.is-open { display: flex; }
.lead-modal__backdrop { position: absolute; inset: 0; background: rgb(6 11 18 / .72); backdrop-filter: blur(3px); }
.lead-modal__panel {
  position: relative; z-index: 1; max-width: 540px; width: 100%;
  background: var(--c-card); border: 1px solid var(--c-border); border-radius: var(--r-xl); padding: var(--sp-6);
  box-shadow: var(--shadow-lg); overflow-y: auto;
  /* 100dvh yerine 100vh, mobil tarayıcılarda adres çubuğu açıkken paneli
     görünür alanın altına taşırır; dvh destekleniyorsa ikinci bildirim
     kazanır, desteklenmiyorsa geçersiz sayılıp ilk (vh) değer kalır. */
  max-height: calc(100vh - var(--sp-6) * 2);
  max-height: calc(100dvh - var(--sp-6) * 2);
  animation: modal-in var(--dur-slow) var(--ease-out);
}
.lead-modal__panel .form-group { margin-bottom: var(--sp-4); }
.lead-modal__panel .grid-2 { gap: var(--sp-4); }
/* Modal 540px'lik dar bir kutu — 375px altı gerçek telefonlarda iki sütun
   sıkışabileceğinden orada tek sütuna düşer (masaüstünde her zaman ikili). */
@media (max-width: 400px) { .lead-modal__panel .grid-2 { grid-template-columns: 1fr; } }
@keyframes modal-in { from { opacity: 0; transform: translateY(16px) scale(.98); } }
.lead-modal__close { position: absolute; top: var(--sp-5); right: var(--sp-5); width: 36px; height: 36px; border-radius: 50%; background: var(--c-overlay-1); color: var(--c-heading); display: flex; align-items: center; justify-content: center; transition: background var(--dur) var(--ease); }
.lead-modal__close:hover { background: var(--c-overlay-2); }
.lead-modal__close svg { width: 18px; height: 18px; }
.lead-modal__panel h3 { font-size: var(--fs-lg); margin-bottom: var(--sp-2); }
.lead-modal__panel > p { margin-bottom: var(--sp-6); }
.lead-form__note { margin-top: var(--sp-3); font-size: var(--fs-xs); color: var(--c-text-muted); text-align: center; }
#leadForm { display: flex; flex-direction: column; }

/* ============ VİZYONUMUZ (Hakkımızda, sayfanın kapanışı) ============
   Header/footer'la aynı sabit koyu zemin (temaya göre değişmez) — sayfayı
   güçlü, markalı bir notla kapatıyor. Metin renkleri de aynı nedenle
   footer'ın sabit (--c-footer-*) tonlarını kullanıyor: var(--c-heading)/
   var(--c-text) açık temada koyu render olur ve bu koyu zeminde kaybolur. */
.vision-section { background: var(--c-topbar-bg); padding-block: var(--section-y); }
.vision-section__inner { max-width: 760px; margin-inline: auto; text-align: center; }
.vision-section h2 {
  color: var(--c-footer-heading); text-transform: uppercase; letter-spacing: .01em;
  font-size: var(--fs-2xl); margin-top: var(--sp-4);
}
.vision-section p { color: var(--c-footer-text); margin-top: var(--sp-5); max-width: 620px; margin-inline: auto; }
.vision-section__statement {
  margin-top: var(--sp-10); padding-top: var(--sp-8); border-top: 1px solid rgb(255 255 255 / .12);
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: .01em;
  font-size: var(--fs-2xl); line-height: var(--lh-tight); color: #fff;
}
.vision-section .hero-actions { margin-top: var(--sp-8); }

/* ============ KULLANIM SENARYOLARI — zengin kart bloğu ============
   Her senaryo (Mesai Sonrası Ulaşım, Yönetici Transferleri, …) artık ikon+
   başlık+slogan içeren sabit bir sol sütun ve gövde metni+özellik listesi+
   CTA içeren geniş bir sağ sütundan oluşuyor — .problem-grid/.operation-grid
   ile aynı "sabit etiket sütunu + geniş içerik sütunu" dili. */
.usecase-block { display: grid; grid-template-columns: .85fr 1.15fr; gap: var(--sp-16); align-items: start; }
.usecase-block > * { min-width: 0; }
@media (max-width: 900px) { .usecase-block { grid-template-columns: 1fr; gap: var(--sp-6); } }
.usecase-block__icon {
  width: 56px; height: 56px; margin-bottom: var(--sp-5); border-radius: var(--r-lg);
  background: var(--c-red-soft); color: var(--c-red-light); display: flex; align-items: center; justify-content: center;
}
.usecase-block__icon svg { width: 26px; height: 26px; }
.usecase-block__head h2 { margin-bottom: var(--sp-3); }
.usecase-block__slogan { font-family: var(--font-display); font-weight: 700; color: var(--c-red-light); font-size: var(--fs-md); }
.usecase-block__body p { color: var(--c-text); margin-bottom: var(--sp-4); }
.usecase-block__features { display: flex; flex-direction: column; gap: var(--sp-3); margin: var(--sp-6) 0; }
.usecase-block__features li { display: flex; align-items: flex-start; gap: var(--sp-3); }
.usecase-block__features li svg { width: 18px; height: 18px; margin-top: 2px; color: var(--c-red-light); flex-shrink: 0; }
.usecase-block__features li strong { display: block; color: var(--c-heading); font-weight: 700; }
.usecase-block__features li span > span { display: block; color: var(--c-text-light); font-size: var(--fs-sm); margin-top: 2px; }
.usecase-block__alt-slogan {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: .02em;
  color: var(--c-heading); font-size: var(--fs-sm); margin: var(--sp-2) 0 var(--sp-6);
  padding: var(--sp-4) var(--sp-5); background: var(--c-red-soft); border-radius: var(--r-md);
}

/* ============ KULLANIM SENARYOLARI — kapanış CTA'sı ============ */
.cta-band__note { font-size: var(--fs-sm); color: var(--c-text-muted); }
.cta-band__trust { font-size: var(--fs-xs); color: var(--c-text-light); margin-top: var(--sp-5) !important; }

/* ============ İŞ PROBLEMİ — giriş metni + kapanış sorusu ============ */
.problem-intro { margin-top: var(--sp-4); color: var(--c-text); max-width: 58ch; }
.problem-question { margin-top: var(--sp-10); }
.problem-question h3 { font-size: clamp(1.4rem, 1.1rem + 1.6vw, 1.75rem); color: var(--c-heading); margin-top: var(--sp-2); }

/* ============ ÇÖZÜM — kapanış sloganı ============ */
.solution-footer {
  text-align: center; margin-top: var(--sp-8);
  font-family: var(--font-display); font-weight: 700; color: var(--c-red);
  font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .04em;
}

/* ============ FİLO / KONUMLANDIRMA (anasayfa, koyu bölüm) ============
   Header/footer/Vizyonumuz ile aynı sabit koyu zemin dili (temaya göre
   değişmez) — sayfanın en güçlü konumlandırma cümlesine kendi bölümü. */
.fleet-section { background: var(--c-topbar-bg); padding-block: var(--section-y); }
.fleet-section__inner { max-width: 780px; margin-inline: auto; text-align: center; }
.fleet-section .eyebrow { justify-content: center; }
.fleet-section__tagline { color: var(--c-footer-text); font-weight: 600; margin-top: var(--sp-3); }
.fleet-section h2 {
  color: var(--c-red-light); font-size: var(--fs-2xl); line-height: var(--lh-tight); margin-top: var(--sp-4);
}
.fleet-section__body { color: var(--c-footer-text); margin-top: var(--sp-5); max-width: 620px; margin-inline: auto; }
.fleet-section__features {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-8);
  margin-top: var(--sp-10); padding-top: var(--sp-8); border-top: 1px solid rgb(255 255 255 / .12);
}
.fleet-section__features > div { max-width: 220px; }
.fleet-section__features strong {
  display: block; color: #fff; font-family: var(--font-display); font-weight: 700;
  text-transform: uppercase; letter-spacing: .02em; font-size: var(--fs-sm); margin-bottom: var(--sp-2);
}
.fleet-section__features span { display: block; color: var(--c-footer-text); font-size: var(--fs-sm); }

/* ============ 404 ============ */
.error-page { text-align: center; padding-block: var(--sp-32) var(--sp-24); }
.error-page .code { font-family: var(--font-display); font-size: clamp(4rem, 12vw, 8rem); font-weight: 800; color: var(--c-red); line-height: 1; }