/* ==========================================================================
   Sertler Group Turizm — Ana stil dosyası
   --------------------------------------------------------------------------
   İçindekiler
    1. Değişkenler ve temel ayarlar
    2. Yardımcı sınıflar (kapsayıcı, başlıklar, butonlar)
    3. Panel ve oyuk köşeler
    4. Üst bölüm: logo, menü, hızlı aksiyonlar
    5. Mobil menü ve yapışkan menü
    6. Ana sayfa hero
    7. Alt sayfa başlığı
    8. İçerik bölümleri (hakkımızda, hizmetler, neden biz, istatistik)
    9. Filo
   10. Sekmeler
   11. İletişim ve form
   12. CTA bandı ve footer
   13. WhatsApp ve yukarı çık butonu
   14. Animasyonlar ve sayfa geçişi
   ========================================================================== */


/* 1. Değişkenler ve temel ayarlar
   ========================================================================== */
:root {
  --page: #EEF1F6;            /* sayfa zemini = oyuk köşelerin rengi */
  --surface: #FFFFFF;
  --ink: #0A1020;             /* koyu paneller */
  --ink-2: #111B33;
  --ink-3: #1B2744;
  --brand: #1E40AF;
  --brand-hover: #1E3A8A;
  --brand-light: #60A5FA;     /* koyu zeminde okunur mavi */
  --brand-soft: rgba(30, 64, 175, .08);
  --text: #0A1020;
  --muted: #5B6478;
  --muted-light: rgba(255, 255, 255, .64);
  --line: rgba(10, 16, 32, .08);
  --line-dark: rgba(255, 255, 255, .1);
  --wa: #25D366;
  --wa-hover: #1EBE56;

  --frame: 8px;               /* panellerin ekran kenarına uzaklığı */
  --r: 22px;                  /* oyuk köşe yarıçapı */
  --radius-panel: 28px;
  --radius-card: 24px;

  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Unbounded', 'Inter', system-ui, sans-serif;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

@media (min-width: 768px) {
  :root { --frame: 12px; --r: 26px; --radius-panel: 34px; }
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: var(--page);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }

:focus-visible { outline: 2px solid var(--brand-light); outline-offset: 3px; border-radius: 8px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: fixed; top: 12px; left: 12px; z-index: 10000;
  padding: 10px 16px; border-radius: 12px; background: var(--ink); color: #fff;
  transform: translateY(-200%); transition: transform .2s;
}
.skip-link:focus { transform: none; }

body.menu-open { overflow: hidden; }
body.menu-open .wa-widget, body.menu-open .to-top { opacity: 0; visibility: hidden; }


/* 2. Yardımcı sınıflar
   ========================================================================== */
.container {
  width: 100%;
  max-width: 1400px;
  margin-inline: auto;
  padding-inline: clamp(16px, 3vw, 32px);
}

.frame { padding-inline: var(--frame); }
.frame + .frame { margin-top: var(--frame); }

.section { padding-block: clamp(44px, 6vw, 80px); }
.section--tight { padding-block: clamp(36px, 5vw, 60px); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--brand);
}
.eyebrow::before { content: ""; width: 24px; height: 1px; background: currentColor; }

.eyebrow + h1, .eyebrow + h2, .eyebrow + h3 { margin-top: 18px; }

.display { font-family: var(--font-display); font-weight: 700; letter-spacing: -.02em; line-height: 1.08; }
.title-lg { font-size: clamp(1.45rem, 3vw, 2.3rem); }
.title-md { font-size: clamp(1.2rem, 2vw, 1.55rem); }
.accent { color: var(--brand); }
.lead { font-size: clamp(.95rem, 1.1vw, 1.05rem); line-height: 1.7; color: var(--muted); }

.on-dark, .panel--dark { color: #fff; }
.on-dark .eyebrow, .on-dark .accent,
.panel--dark .eyebrow, .panel--dark .accent { color: var(--brand-light); }
.on-dark .lead, .panel--dark .lead { color: var(--muted-light); }

.section-head { display: flex; flex-direction: column; gap: 14px; margin-bottom: clamp(22px, 3vw, 34px); }
.section-head .lead { max-width: 26rem; }
@media (min-width: 768px) {
  .section-head { flex-direction: row; align-items: flex-end; justify-content: space-between; }
}

/* Butonlar */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  height: 48px; padding: 0 22px; border-radius: 999px;
  font-size: 15px; font-weight: 600; white-space: nowrap;
  transition: background-color .25s, color .25s, border-color .25s, transform .25s var(--ease);
}
.btn:active { transform: scale(.97); }
.btn svg { flex-shrink: 0; }

.btn--light { background: #fff; color: var(--ink); }
.btn--light:hover { background: var(--brand-light); }
.btn--dark { background: var(--ink); color: #fff; }
.btn--dark:hover { background: var(--brand); }
.btn--brand { background: var(--brand); color: #fff; }
.btn--brand:hover { background: var(--brand-hover); }
.btn--wa { background: var(--wa); color: #fff; }
.btn--wa:hover { background: var(--wa-hover); }
.btn--ghost { border: 1px solid rgba(255, 255, 255, .24); color: #fff; }
.btn--ghost:hover { background: rgba(255, 255, 255, .1); }
.btn--outline { border: 1px solid rgba(10, 16, 32, .16); color: var(--ink); }
.btn--outline:hover { background: #fff; border-color: #fff; }
.btn--block { width: 100%; }

.btn--arrow { padding-right: 7px; }
.btn__icon {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--ink); color: #fff; transition: transform .4s var(--ease);
}
.btn--dark .btn__icon, .btn--brand .btn__icon { background: #fff; color: var(--ink); }
.btn--arrow:hover .btn__icon { transform: rotate(45deg); }

.btn--sm { height: 46px; padding: 0 18px; font-size: 14px; }
.btn--sm.btn--arrow { padding-right: 5px; }
.btn--sm .btn__icon { width: 36px; height: 36px; }

.icon-btn {
  display: grid; place-items: center; flex-shrink: 0;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--ink); color: #fff;
  transition: background-color .25s, transform .25s var(--ease);
}
.icon-btn:hover { background: var(--brand); }
.icon-btn:active { transform: scale(.94); }
.icon-btn--wa:hover { background: var(--wa); }
.icon-btn--ig:hover { background: linear-gradient(45deg, #F58529, #DD2A7B 50%, #8134AF); }
.icon-btn--light { background: #fff; color: var(--ink); }
.icon-btn--light:hover { background: var(--brand-light); }
@media (min-width: 640px) { .icon-btn { width: 48px; height: 48px; } }

/* Onay işaretli liste */
.check-list { display: grid; gap: 12px; }
.check-list li { display: flex; align-items: flex-start; gap: 10px; }
.check-list svg { flex-shrink: 0; margin-top: 3px; color: var(--brand); }
.on-dark .check-list svg, .panel--dark .check-list svg { color: var(--brand-light); }
@media (min-width: 640px) { .check-list--2 { grid-template-columns: 1fr 1fr; column-gap: 24px; } }


/* 3. Panel ve oyuk köşeler
   --------------------------------------------------------------------------
   .panel yuvarlak köşeli bir kutudur. İçine konan .notch öğeleri, sayfa
   zemini rengiyle panelin köşesinden "oyuk" açar. ::before / ::after
   parçaları oyuğun iki yanındaki ters (içbükey) kavisleri çizer.
   ========================================================================== */
.panel { position: relative; border-radius: var(--radius-panel); overflow: hidden; isolation: isolate; }
.panel--dark { background: var(--ink); color: #fff; }
.panel--light { background: var(--surface); }

.notch { position: absolute; z-index: 20; background: var(--page); }
.notch::before, .notch::after {
  content: ""; position: absolute; width: var(--r); height: var(--r); pointer-events: none;
}

.notch--tl { top: 0; left: 0; border-bottom-right-radius: var(--r); padding: 0 12px 12px 0; }
.notch--tl::before { top: 0; left: 100%; background: radial-gradient(circle at 100% 100%, transparent calc(var(--r) - .5px), var(--page) var(--r)); }
.notch--tl::after  { top: 100%; left: 0; background: radial-gradient(circle at 100% 100%, transparent calc(var(--r) - .5px), var(--page) var(--r)); }

.notch--tr { top: 0; right: 0; border-bottom-left-radius: var(--r); padding: 0 0 12px 12px; }
.notch--tr::before { top: 0; right: 100%; background: radial-gradient(circle at 0 100%, transparent calc(var(--r) - .5px), var(--page) var(--r)); }
.notch--tr::after  { top: 100%; right: 0; background: radial-gradient(circle at 0 100%, transparent calc(var(--r) - .5px), var(--page) var(--r)); }

.notch--br { bottom: 0; right: 0; border-top-left-radius: var(--r); padding: 12px 0 0 12px; }
.notch--br::before { bottom: 0; right: 100%; background: radial-gradient(circle at 0 0, transparent calc(var(--r) - .5px), var(--page) var(--r)); }
.notch--br::after  { bottom: 100%; right: 0; background: radial-gradient(circle at 0 0, transparent calc(var(--r) - .5px), var(--page) var(--r)); }

.notch--bl { bottom: 0; left: 0; border-top-right-radius: var(--r); padding: 12px 12px 0 0; }
.notch--bl::before { bottom: 0; left: 100%; background: radial-gradient(circle at 100% 0, transparent calc(var(--r) - .5px), var(--page) var(--r)); }
.notch--bl::after  { bottom: 100%; left: 0; background: radial-gradient(circle at 100% 0, transparent calc(var(--r) - .5px), var(--page) var(--r)); }

.notch--sm { padding: 0 0 9px 9px; }
.notch--br.notch--sm { padding: 9px 0 0 9px; }

/* Oyuğun içindeki küçük kartlar */
.notch-badge {
  border-radius: 20px; padding: 12px 18px; text-align: center;
  background: var(--ink); color: #fff;
}
.notch-badge strong { display: block; font-family: var(--font-display); font-size: 22px; line-height: 1.1; }
.notch-badge span { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-light); }
.notch-badge--text strong { font-size: 15px; margin-top: 2px; }
.notch-badge--text { text-align: left; }
.notch-badge--light { background: #fff; color: var(--ink); text-align: left; }
.notch-badge--light span { color: var(--brand); font-weight: 600; }


/* 4. Üst bölüm: logo, menü, hızlı aksiyonlar
   ========================================================================== */
.site-header { padding: var(--frame) var(--frame) 0; }
/* Üst köşeler logo ve düğme oyuklarıyla kaplı; yuvarlak köşe en kenardaki düğmeyi kırpmasın */
.site-header > .panel { border-top-left-radius: 0; border-top-right-radius: 0; }

.logo-card {
  display: block; padding: 9px 14px; border-radius: 20px; background: #fff;
  box-shadow: 0 1px 2px rgba(10, 16, 32, .06);
  transition: transform .3s var(--ease);
}
.logo-card:hover { transform: scale(1.03); }
.logo-card img { height: 34px; width: auto; }
@media (min-width: 640px) { .logo-card { padding: 10px 18px; } .logo-card img { height: 42px; } }

.header-actions { display: flex; align-items: center; gap: 8px; }
/* Telefonda yalnızca arama ve menü düğmesi; WhatsApp ve Instagram mobil menüde */
.header-actions .icon-btn--wa,
.header-actions .icon-btn--ig { display: none; }
@media (min-width: 640px) {
  .header-actions .icon-btn--wa,
  .header-actions .icon-btn--ig { display: grid; }
}
.menu-toggle { display: grid; }
@media (min-width: 1024px) { .menu-toggle { display: none; } }


/* Masaüstü menü: panelin üstünde cam görünümlü hap */
.main-nav {
  position: absolute; top: 16px; left: 50%; z-index: 30;
  display: none; align-items: center; gap: 2px; padding: 6px;
  transform: translateX(-50%);
  border-radius: 999px; background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .1);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
@media (min-width: 1024px) { .main-nav { display: flex; } }

.nav-item { position: relative; }
.nav-link {
  display: flex; align-items: center; gap: 6px; padding: 9px 12px; border-radius: 999px;
  font-size: 14px; font-weight: 500; color: rgba(255, 255, 255, .78); white-space: nowrap;
  transition: background-color .2s, color .2s;
}
@media (min-width: 1280px) { .nav-link { padding: 9px 16px; } }
.nav-link:hover, .nav-item:focus-within > .nav-link { color: #fff; background: rgba(255, 255, 255, .1); }
.nav-link[aria-current="page"] { color: var(--ink); background: #fff; }
.nav-link .chev { transition: transform .3s var(--ease); }
.nav-item:hover .chev, .nav-item:focus-within .chev { transform: rotate(180deg); }

.dropdown {
  position: absolute; top: calc(100% + 12px); left: 50%; min-width: 240px; padding: 8px;
  border-radius: 20px; background: #fff; color: var(--ink);
  box-shadow: 0 24px 60px -12px rgba(10, 16, 32, .4);
  opacity: 0; visibility: hidden; transform: translate(-50%, 8px);
  transition: opacity .25s, transform .3s var(--ease), visibility .25s;
}
.dropdown::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; } /* fare boşluğu köprüsü */
.nav-item:hover .dropdown, .nav-item:focus-within .dropdown { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.dropdown a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 14px; border-radius: 14px; font-size: 14px; font-weight: 500;
  transition: background-color .2s, color .2s;
}
.dropdown a:hover { background: var(--page); color: var(--brand); }
.dropdown a svg { opacity: 0; transform: translateX(-4px); transition: opacity .2s, transform .2s; }
.dropdown a:hover svg { opacity: 1; transform: none; }


/* 5. Mobil menü ve yapışkan menü
   ========================================================================== */
.mobile-menu {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(10, 16, 32, .55);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s;
}
.mobile-menu.is-open { opacity: 1; visibility: visible; }

.mobile-menu__panel {
  position: absolute; top: var(--frame); left: var(--frame); right: var(--frame);
  max-height: calc(100dvh - 2 * var(--frame)); overflow-y: auto;
  padding: 12px; border-radius: 28px; background: #fff;
  transform: translateY(-16px) scale(.98); transition: transform .45s var(--ease);
}
.mobile-menu.is-open .mobile-menu__panel { transform: none; }

.mobile-menu__head { display: flex; align-items: center; justify-content: space-between; padding: 4px 4px 12px 8px; }
.mobile-menu__head img { height: 34px; width: auto; }

.mobile-menu__links > a,
.mobile-menu__links summary {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 14px; border-radius: 16px; font-size: 17px; font-weight: 600;
  cursor: pointer; transition: background-color .2s;
}
.mobile-menu__links > a:hover, .mobile-menu__links summary:hover { background: var(--page); }
.mobile-menu__links > a[aria-current="page"],
.mobile-menu__links summary[aria-current="page"] { color: var(--brand); }
.mobile-menu__links summary { list-style: none; }
.mobile-menu__links summary::-webkit-details-marker { display: none; }
.mobile-menu__links summary .chev { transition: transform .3s var(--ease); }
.mobile-menu__links details[open] summary .chev { transform: rotate(180deg); }
.mobile-menu__sub { padding: 0 0 8px 14px; }
.mobile-menu__sub a { display: block; padding: 10px 14px; border-radius: 12px; color: var(--muted); font-weight: 500; }
.mobile-menu__sub a:hover { background: var(--page); color: var(--brand); }
.mobile-menu__cta { display: grid; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.mobile-menu__socials { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 0 6px 4px; }
.mobile-menu__socials span { margin-right: auto; font-size: 14px; font-weight: 600; color: var(--muted); }
.mobile-menu__socials a {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px;
  background: var(--page); color: var(--ink); transition: background-color .2s, color .2s;
}
.mobile-menu__socials a:hover { background: var(--brand); color: #fff; }

/* Yapışkan menü: hero'daki üst bölümün kaydırınca da eşlik eden hali.
   Zemin sayfa rengiyle (--page) doludur; içerik altına kayar ve görünmez,
   böylece yazı ve görseller menünün arkasında kalmaz. Üzerinde hero'daki
   gibi beyaz logo kartı, koyu cam menü ve koyu yuvarlak düğmeler durur.
   Hero geçilince yukarıdan iner ve sayfa boyunca görünür kalır. */
.sticky-nav {
  --gutter: clamp(16px, 3vw, 32px);   /* .container ile aynı kenar boşluğu */
  position: fixed; top: 0; left: 0; right: 0; z-index: 150;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px max(var(--gutter), calc((100% - 1400px) / 2 + var(--gutter)));
  background: var(--page);
  box-shadow: 0 1px 0 rgba(10, 16, 32, .06), 0 14px 28px -22px rgba(10, 16, 32, .45);
  transform: translateY(-110%);
  transition: transform .45s var(--ease);
}
.sticky-nav.is-visible { transform: none; }
.sticky-nav > * {
  opacity: 0; transform: translateY(-10px);
  transition: opacity .35s, transform .5s var(--ease);
}
.sticky-nav.is-visible > * { opacity: 1; transform: none; transition-delay: .1s; }
.sticky-nav.is-visible > :nth-child(2) { transition-delay: .16s; }
.sticky-nav.is-visible > :nth-child(3) { transition-delay: .22s; }

.sticky-nav__logo {
  display: block; padding: 7px 14px; border-radius: 18px; background: #fff;
  box-shadow: 0 1px 2px rgba(10, 16, 32, .08);
}
.sticky-nav__logo img { height: 30px; width: auto; }

.sticky-nav__links {
  display: none; align-items: center; gap: 2px; padding: 5px;
  border-radius: 999px; background: var(--ink);
}
@media (min-width: 1024px) { .sticky-nav__links { display: flex; } }
.sticky-nav__links a {
  padding: 8px 12px; border-radius: 999px; font-size: 14px; font-weight: 500; color: rgba(255, 255, 255, .78);
  white-space: nowrap; transition: background-color .2s, color .2s;
}
@media (min-width: 1280px) { .sticky-nav__links a { padding: 8px 16px; } }
.sticky-nav__links a:hover { color: #fff; background: rgba(255, 255, 255, .1); }
.sticky-nav__links a[aria-current="page"] { color: var(--ink); background: #fff; }

.sticky-nav__actions { display: flex; align-items: center; gap: 6px; }
.sticky-nav .icon-btn,
.sticky-nav .btn { height: 44px; }
.sticky-nav .icon-btn { width: 44px; }
.sticky-nav .btn { display: none; }
@media (min-width: 640px) { .sticky-nav .btn { display: inline-flex; } }

@media (prefers-reduced-motion: reduce) {
  .sticky-nav, .sticky-nav > * { transition: opacity .2s; }
  .sticky-nav > * { transform: none; }
}


/* 6. Ana sayfa hero
   ========================================================================== */
.hero {
  display: flex; flex-direction: column;
  background: radial-gradient(120% 90% at 70% 100%, #13234A 0%, var(--ink) 55%);
  color: #fff;
}

.hero__content { position: relative; z-index: 10; padding: 104px 20px 26px; }
@media (min-width: 640px) { .hero__content { padding: 120px 36px 28px; } }

.hero__title {
  font-family: var(--font-display); font-weight: 700; letter-spacing: -.02em;
  text-transform: uppercase; line-height: 1.02;
  font-size: clamp(2rem, 9.4vw, 3.9rem);
}
/* Ana sayfa H1'i: üstteki küçük yazı ve büyük başlık tek başlık; görünüm değişmez */
.hero__heading { margin: 0; font: inherit; }
.hero__heading .hero__title { display: block; margin-top: 18px; }
.hero__title .line { display: block; overflow: hidden; padding-bottom: .04em; }
.hero__title .line > span { display: inline-block; }
.hero__title .accent { color: var(--brand-light); }

.hero__text { margin-top: 22px; max-width: 28rem; font-size: 16px; line-height: 1.7; color: var(--muted-light); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

.hero__media { position: relative; }
.hero__media img {
  width: 100%;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 30%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 30%);
  filter: saturate(.92) contrast(1.05);
}

.hero__watermark {
  position: absolute; top: 12%; left: 50%; z-index: 0; display: none;
  transform: translateX(-50%);
  font-family: var(--font-display); font-weight: 800; line-height: 1;
  font-size: clamp(5rem, 15vw, 15rem); color: rgba(255, 255, 255, .035);
  white-space: nowrap; pointer-events: none; user-select: none;
}

.hero__stats { display: none; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 28rem; margin-top: 40px; }
.stat-num { font-family: var(--font-display); font-weight: 700; font-size: 30px; line-height: 1.1; }
.stat-label { margin-top: 4px; font-size: 12px; color: rgba(255, 255, 255, .52); }

.hero__stats-mobile {
  position: relative; z-index: 10; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  margin-top: -40px; padding: 0 14px 14px;
}
.hero__stats-mobile > div {
  padding: 12px 6px; border-radius: 18px; text-align: center;
  background: rgba(255, 255, 255, .08); border: 1px solid var(--line-dark);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.hero__stats-mobile .stat-num { font-size: 20px; }
.hero__stats-mobile .stat-label { font-size: 10px; margin-top: 0; }

/* Sağ alt oyuktaki filo kartı */
.hero-card {
  display: flex; align-items: center; gap: 14px; width: 340px; padding: 12px 14px 12px 12px;
  border-radius: 22px; background: var(--ink); color: #fff;
}
.hero-card img { width: 96px; height: 76px; border-radius: 16px; object-fit: cover; }
.hero-card small { display: block; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: rgba(255, 255, 255, .5); }
.hero-card strong { display: block; margin-top: 4px; font-weight: 600; line-height: 1.3; }
.hero-card .icon-btn { width: 42px; height: 42px; }
.hero-card:hover .icon-btn { background: var(--brand-light); color: var(--ink); }
.hero__card-notch { display: none; }

/* Araç üzerindeki bilgi etiketleri */
.callouts { display: none; }
.callout {
  position: absolute; display: flex; align-items: center;
  transform: translateY(-50%); pointer-events: none;
}
.callout--rev { flex-direction: row-reverse; transform: translate(-100%, -50%); }
.callout__dot {
  width: 12px; height: 12px; flex-shrink: 0; border-radius: 50%; background: #fff;
  box-shadow: 0 0 0 5px rgba(96, 165, 250, .35);
  animation: dot-pulse 2.4s ease-in-out infinite;
}
.callout__line { width: var(--len, 90px); height: 1px; background: linear-gradient(to right, rgba(255, 255, 255, .9), rgba(255, 255, 255, .35)); }
.callout--rev .callout__line { background: linear-gradient(to left, rgba(255, 255, 255, .9), rgba(255, 255, 255, .35)); }
.callout__label {
  padding: 6px 12px; border-radius: 999px; white-space: nowrap;
  background: rgba(10, 16, 32, .72); border: 1px solid rgba(255, 255, 255, .14);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font-size: 12px; font-weight: 600; color: #fff;
}
.callout__label small { display: block; font-size: 10px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }

@media (min-width: 1024px) {
  .hero { height: clamp(660px, 88vh, 860px); }
  .hero__content {
    position: absolute; top: 0; bottom: 0; left: 0; width: 38%;
    display: flex; flex-direction: column; justify-content: space-between;
    /* boşluklar ekran yüksekliğine göre de küçülür (kısa dizüstü ekranları) */
    padding: clamp(104px, 16vh, 128px) 0 clamp(28px, 5vh, 48px) 48px;
  }
  .hero__title { font-size: clamp(2.2rem, min(3.6vw, 6.5vh), 3.4rem); }
  .hero__text { max-width: 340px; }
  /* Görsel sağdan taşmasın: öndeki minibüs logosuyla birlikte görünür kalır */
  .hero__media { position: absolute; bottom: 0; left: 36%; width: 80%; }
  .hero__media img {
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 22%), linear-gradient(to bottom, transparent 0%, #000 32%);
    -webkit-mask-composite: source-in;
            mask-image: linear-gradient(to right, transparent 0%, #000 22%), linear-gradient(to bottom, transparent 0%, #000 32%);
            mask-composite: intersect;
  }
  .hero__watermark { display: block; }
  .hero__card-notch { display: block; }
  .callouts { display: block; }
  .hero__stats-mobile { display: none; }
}
@media (min-width: 1280px) {
  .hero__content { padding-top: clamp(112px, 17vh, 150px); }
  .hero__title { font-size: clamp(2.4rem, min(3.7vw, 6.6vh), 4.2rem); }
  .hero__stats { margin-top: clamp(20px, 4vh, 40px); }
  .hero__text { max-width: 28rem; }
  .hero__media { left: 30%; width: 82%; }
  .hero__stats { display: grid; }
}


/* 7. Alt sayfa başlığı
   ========================================================================== */
.page-hero {
  display: flex; align-items: flex-end; min-height: 420px;
  background: var(--ink); color: #fff;
}
.page-hero__bg {
  position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%;
  object-fit: cover; object-position: var(--pos, center 65%);
}
.page-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, var(--ink) 10%, rgba(10, 16, 32, .72) 55%, rgba(10, 16, 32, .35)),
    linear-gradient(0deg, var(--ink) 0%, transparent 60%);
}
.page-hero__content { position: relative; z-index: 10; width: 100%; max-width: 760px; padding: 120px 20px 36px; }
@media (min-width: 640px) { .page-hero__content { padding: 130px 36px 44px; } }
@media (min-width: 1024px) {
  .page-hero { min-height: 500px; }
  .page-hero__content { padding: 150px 48px 56px; }
}

.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 18px; font-size: 13px; color: rgba(255, 255, 255, .6); }
.breadcrumb a:hover { color: #fff; }
.breadcrumb [aria-current="page"] { color: var(--brand-light); font-weight: 600; }

.page-hero__title {
  font-family: var(--font-display); font-weight: 700; letter-spacing: -.02em; line-height: 1.04;
  text-transform: uppercase; font-size: clamp(2.2rem, 6.4vw, 4.6rem);
}
.page-hero__text { margin-top: 18px; max-width: 34rem; color: var(--muted-light); font-size: clamp(1rem, 1.3vw, 1.125rem); line-height: 1.7; }

.page-hero__notch { display: none; }
@media (min-width: 768px) { .page-hero__notch { display: block; } }


/* 8. İçerik bölümleri
   ========================================================================== */

/* Hakkımızda özeti */
/* Metin solda, maddeler sağda (görselsiz açıklama bölümleri) */
.split { display: grid; gap: 22px; align-items: center; }
@media (min-width: 1024px) { .split { grid-template-columns: 1fr 1fr; gap: 56px; } }
.split .lead { margin-top: 14px; }
.split .hero__actions { margin-top: 22px; }
.split__list.check-grid { margin-top: 0; }
/* Ana sayfa Hakkımızda: üst üste binen iki fotoğraf + metin */
.about { display: grid; gap: 32px; align-items: center; }
@media (min-width: 1024px) { .about { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; } }
.about .lead { margin-top: 14px; }
.about .hero__actions { margin-top: 22px; }
.about__visual { position: relative; isolation: isolate; width: 100%; max-width: 520px; padding: 0 14% 12% 0; }
@media (min-width: 1024px) { .about__visual { justify-self: center; } }
.about__waves {
  position: absolute; top: -28px; right: -18px; z-index: -1; width: 55%;
  stroke: rgba(10, 16, 32, .14); stroke-width: 1.5;
}
/* Telefonda dar ekranın dışına taşmasın */
@media (max-width: 639px) { .about__waves { right: 0; } }
.about__img { margin: 0; overflow: hidden; background: var(--ink-3); }
.about__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.about__img:hover img { transform: scale(1.05); }
.about__img--main { aspect-ratio: 5 / 4; border-radius: 24px; }
.about__img--main img { object-position: 30% center; }
.about__img--small {
  position: absolute; right: 0; bottom: 0; width: 48%; aspect-ratio: 1 / 1;
  border: 6px solid var(--page); border-radius: 22px;
  box-shadow: 0 24px 40px -22px rgba(10, 16, 32, .45);
}
.about__img--small img { object-position: 58% center; }

.check-grid { display: grid; gap: 8px; margin-top: 22px; }
@media (min-width: 640px) { .check-grid { grid-template-columns: 1fr 1fr; } }
.check-item {
  display: flex; align-items: center; gap: 10px; padding: 11px 14px;
  border-radius: 16px; background: #fff; font-size: 14px; font-weight: 500;
  transition: transform .3s var(--ease), box-shadow .3s;
}
.check-item:hover { transform: translateY(-2px); box-shadow: 0 12px 30px -16px rgba(10, 16, 32, .25); }
.check-item__icon { display: grid; place-items: center; width: 28px; height: 28px; flex-shrink: 0; border-radius: 50%; background: var(--brand-soft); color: var(--brand); }

/* Hizmet kartları (bento ızgara)
   Mobilde 2 sütun: büyük fotoğraflı kart üstte tam genişlik, diğerleri ikişer. */
.bento { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.bento__main { grid-column: span 2; }
@media (min-width: 640px) { .bento { gap: 12px; } }
@media (min-width: 1024px) { .bento { grid-template-columns: repeat(4, minmax(0, 1fr)); } .bento__main { grid-row: span 2; } }

.service-card {
  display: flex; flex-direction: column; min-height: 168px; padding: 16px 14px;
  border-radius: 20px;
  transition: transform .4s var(--ease), box-shadow .4s;
}
@media (min-width: 640px) { .service-card { min-height: 200px; padding: 22px; border-radius: var(--radius-card); } }
.service-card:hover { transform: translateY(-4px); box-shadow: 0 24px 50px -24px rgba(10, 16, 32, .35); }
.service-card--light { background: #fff; }
.service-card--dark { background: var(--ink); color: #fff; }
.service-card--brand { background: var(--brand); color: #fff; }
.service-card__icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--brand-soft); color: var(--brand); }
.service-card__icon svg { width: 18px; height: 18px; }
@media (min-width: 640px) { .service-card__icon { width: 44px; height: 44px; border-radius: 14px; } .service-card__icon svg { width: 20px; height: 20px; } }
.service-card--dark .service-card__icon { background: rgba(255, 255, 255, .08); color: var(--brand-light); }
.service-card--brand .service-card__icon { background: rgba(255, 255, 255, .15); color: #fff; }
.service-card__num { margin-top: auto; padding-top: 16px; font-size: 10px; font-weight: 600; letter-spacing: .2em; color: #94A3B8; }
.service-card--dark .service-card__num, .service-card--brand .service-card__num { color: rgba(255, 255, 255, .45); }
.service-card h3 { margin-top: 4px; padding-right: 38px; font-family: var(--font-display); font-weight: 700; font-size: clamp(.75rem, 3.5vw, .95rem); line-height: 1.25; letter-spacing: -.01em; }
@media (min-width: 640px) { .service-card h3 { font-size: 1.05rem; padding-right: 0; } }
/* Küçük kartlarda açıklama telefonda gizlenir; başlık ve ikon yeterli */
.service-card p { display: none; margin-top: 6px; padding-right: 40px; font-size: 13px; line-height: 1.55; color: var(--muted); }
@media (min-width: 640px) { .service-card p { display: block; } }
.service-card--dark p { color: rgba(255, 255, 255, .6); }
.service-card--brand p { color: rgba(255, 255, 255, .78); }
.service-card .notch .icon-btn { width: 34px; height: 34px; }
.service-card .notch .icon-btn svg { width: 13px; height: 13px; }
@media (min-width: 640px) { .service-card .notch .icon-btn { width: 40px; height: 40px; } }
.service-card:hover .notch .icon-btn { background: var(--brand); transform: rotate(45deg); }
.service-card--brand:hover .notch .icon-btn { background: var(--ink-3); }

.service-card--photo { justify-content: flex-end; min-height: 260px; padding: 22px; color: #fff; background: var(--ink); }
@media (min-width: 640px) { .service-card--photo { min-height: 300px; padding: 28px; } }
@media (min-width: 1024px) { .service-card--photo { min-height: 412px; } }
.service-card--photo > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 20% center; transition: transform 1.2s var(--ease); }
.service-card--photo:hover > img { transform: scale(1.05); }
.service-card--photo::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, var(--ink) 5%, rgba(10, 16, 32, .4) 50%, transparent); }
.service-card--photo .service-card__num { color: var(--brand-light); margin-top: 0; padding-top: 0; }
.service-card--photo h3 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); padding-right: 0; }
.service-card--photo p { display: block; color: rgba(255, 255, 255, .72); max-width: 30rem; font-size: 14px; padding-right: 56px; }
.service-card--photo .notch .icon-btn { width: 44px; height: 44px; }
.service-card--photo .notch .icon-btn svg { width: 16px; height: 16px; }
@media (min-width: 640px) { .service-card--photo .notch .icon-btn { width: 50px; height: 50px; } }

/* Neden biz kartları */
.why { display: grid; gap: 26px; }
@media (min-width: 1024px) { .why { grid-template-columns: 4fr 8fr; } }
.why .lead { margin-top: 14px; }
.reason-grid { display: grid; gap: 10px; }
@media (min-width: 640px) { .reason-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .reason-grid--3 { grid-template-columns: repeat(3, 1fr); } }

.reason-card {
  padding: 20px; border-radius: 20px; background: #fff;
  transition: transform .4s var(--ease), box-shadow .4s;
}
.reason-card:hover { transform: translateY(-4px); box-shadow: 0 24px 50px -26px rgba(10, 16, 32, .35); }
.reason-card__top { display: flex; align-items: flex-start; justify-content: space-between; }
.reason-card__num { font-family: var(--font-display); font-weight: 700; font-size: 28px; line-height: 1; color: rgba(30, 64, 175, .14); transition: color .4s; }
.reason-card:hover .reason-card__num { color: var(--brand); }
.reason-card__top svg { color: var(--brand); }
.reason-card h3 { margin-top: 14px; font-family: var(--font-display); font-weight: 600; font-size: .98rem; }
.reason-card p { margin-top: 6px; font-size: 13.5px; color: var(--muted); }

.reason-card--wide {
  display: flex; flex-direction: column; justify-content: space-between; gap: 24px;
  background: var(--ink); color: #fff;
}
@media (min-width: 640px) { .reason-card--wide { grid-column: span 2; flex-direction: row; align-items: center; } }
.reason-card--wide p { color: rgba(255, 255, 255, .6); max-width: 28rem; }
.reason-card--wide .reason-card__num { color: rgba(255, 255, 255, .15); }
.big-stat { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.2rem, 4vw, 2.8rem); line-height: 1; color: var(--brand-light); }
.big-stat + small { display: block; margin-top: 6px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .5); }

/* İstatistik bandı */
.stats-band { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line-dark); }
@media (min-width: 1024px) { .stats-band { grid-template-columns: repeat(4, 1fr); } }
.stats-band > div { padding: clamp(20px, 3vw, 32px) clamp(18px, 2.5vw, 32px); background: var(--ink); }
.stats-band .stat-num { font-size: clamp(1.6rem, 3vw, 2.3rem); }
.stats-band .stat-label { font-size: 12.5px; margin-top: 4px; }

/* Süreç adımları */
.steps { display: grid; gap: 10px; counter-reset: step; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1024px) { .steps { grid-template-columns: repeat(4, 1fr); } }
.step { position: relative; padding: 18px; border-radius: 20px; background: #fff; }
.step::before {
  counter-increment: step; content: "0" counter(step);
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: var(--ink); color: #fff; font-family: var(--font-display); font-weight: 600; font-size: 12px;
}
.step h3 { margin-top: 14px; font-family: var(--font-display); font-weight: 600; font-size: .95rem; }
.step p { margin-top: 6px; font-size: 13px; color: var(--muted); }


/* 9. Filo
   ========================================================================== */
.fleet__grid { display: grid; gap: 22px; align-items: center; padding: 64px 16px 22px; }
@media (min-width: 640px) { .fleet__grid { padding: 64px 32px 32px; } }
@media (min-width: 1024px) { .fleet__grid { grid-template-columns: 1fr 1fr; gap: 40px; padding: 48px 44px; } }
.fleet__info { order: 2; }
.fleet__visual { order: 1; }
@media (min-width: 1024px) { .fleet__info { order: 1; padding-top: 24px; } .fleet__visual { order: 2; } }

.fleet__kicker { font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--brand-light); }
.fleet__name { margin-top: 12px; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.3rem, 2.4vw, 1.8rem); line-height: 1.1; letter-spacing: -.02em; }
.fleet__cap {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 14px;
  padding: 6px 14px 6px 6px; border-radius: 999px; background: rgba(255, 255, 255, .06); border: 1px solid var(--line-dark);
}
.fleet__cap span { padding: 4px 10px; border-radius: 999px; background: var(--brand); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.fleet__cap strong { font-family: var(--font-display); font-weight: 600; font-size: .95rem; }
.fleet__features { margin-top: 18px; color: rgba(255, 255, 255, .82); font-size: 13.5px; }
.fleet__features.check-list { gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 14px; font-size: 13px; }
.fleet__info .hero__actions { margin-top: 22px; }
.fleet__info .btn { margin-top: 36px; }

.fleet__image {
  position: relative; aspect-ratio: 16 / 10; border-radius: 20px; overflow: hidden; background: var(--ink-2);
}
.fleet__image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .45s ease, transform .7s var(--ease); }
.fleet__image img.is-switching { opacity: 0; transform: scale(1.04); }
.fleet__image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10, 16, 32, .7), transparent 45%); pointer-events: none; }
.fleet__counter { position: absolute; left: 20px; bottom: 18px; z-index: 2; font-family: var(--font-display); font-size: 13px; color: rgba(255, 255, 255, .85); }

.fleet__tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.fleet-tab {
  position: relative; display: grid; place-items: center; height: 56px; overflow: hidden;
  border-radius: 14px; color: #fff; font-size: 12px; line-height: 1.2; font-weight: 600; text-align: center;
  opacity: .5; transition: opacity .3s, box-shadow .3s;
}
@media (min-width: 640px) { .fleet-tab { height: 64px; font-size: 13px; } }
.fleet-tab img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fleet-tab::after { content: ""; position: absolute; inset: 0; background: rgba(10, 16, 32, .5); }
.fleet-tab span { position: relative; z-index: 1; padding: 0 6px; }
.fleet-tab:hover { opacity: .85; }
.fleet-tab[aria-selected="true"] { opacity: 1; box-shadow: 0 0 0 2px var(--brand-light); }

/* Filo sayfası araç kartları */
.vehicle-grid { display: grid; gap: 10px; }
@media (min-width: 768px) { .vehicle-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .vehicle-grid { grid-template-columns: repeat(3, 1fr); } }
.vehicle-card { display: flex; flex-direction: column; padding: 8px; border-radius: 24px; background: #fff; transition: transform .4s var(--ease), box-shadow .4s; }
.vehicle-card:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -30px rgba(10, 16, 32, .4); }
.vehicle-card__media { aspect-ratio: 16 / 10; border-radius: 18px; background: var(--ink-2); }
.vehicle-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.vehicle-card:hover .vehicle-card__media img { transform: scale(1.05); }
.vehicle-card__media .notch { --page: #fff; }
.vehicle-card__body { display: flex; flex-direction: column; flex: 1; padding: 16px 12px 10px; }
.vehicle-card__kicker { font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--brand); }
.vehicle-card h3 { margin-top: 4px; font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; }
.vehicle-card p { margin-top: 6px; font-size: 13.5px; color: var(--muted); }
.spec-list { margin-top: 12px; border-top: 1px solid var(--line); }
.spec-list li { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.spec-list span { color: var(--muted); }
.spec-list strong { font-weight: 600; text-align: right; }
.vehicle-card .btn { margin-top: 20px; }
.vehicle-card__body .btn { margin-top: auto; }
.vehicle-card__body .spec-list { margin-bottom: 14px; }

.amenities { display: grid; gap: 1px; grid-template-columns: minmax(0, 1fr); background: var(--line-dark); }
@media (min-width: 480px) { .amenities { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .amenities { grid-template-columns: repeat(4, 1fr); } }
.amenities > div { padding: 22px 20px; background: var(--ink); }
.amenities svg { color: var(--brand-light); }
.amenities h3 { margin-top: 12px; font-family: var(--font-display); font-weight: 600; font-size: 1rem; }
.amenities p { margin-top: 6px; font-size: 13px; color: rgba(255, 255, 255, .55); }


/* 10. Sekmeler (Hakkımızda / Hizmetler)
   ========================================================================== */
.tabs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; scroll-margin-top: 90px; }
@media (min-width: 1024px) { .tabs { grid-template-columns: 280px 1fr; gap: 20px; align-items: start; } }

.tabs__aside { display: grid; gap: 12px; min-width: 0; }
@media (min-width: 1024px) { .tabs__aside { position: sticky; top: 90px; } }

.tab-list {
  display: flex; gap: 8px; overflow-x: auto; padding: 4px; margin: -4px;
  scroll-snap-type: x mandatory; scrollbar-width: none;
}
.tab-list::-webkit-scrollbar { display: none; }
@media (min-width: 1024px) {
  .tab-list { flex-direction: column; overflow: visible; padding: 8px; margin: 0; border-radius: var(--radius-card); background: #fff; }
}

.tab-btn {
  display: flex; align-items: center; gap: 12px; flex-shrink: 0; scroll-snap-align: start;
  padding: 8px 14px 8px 8px; border-radius: 999px; background: #fff;
  font-size: 13.5px; font-weight: 600; text-align: left; white-space: nowrap;
  transition: background-color .25s, color .25s;
}
.tab-btn__icon { display: grid; place-items: center; width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%; background: var(--brand-soft); color: var(--brand); transition: background-color .25s, color .25s; }
.tab-btn__arrow { display: none; margin-left: auto; opacity: .4; transition: transform .3s var(--ease), opacity .3s; }
.tab-btn:hover { background: var(--page); }
.tab-btn[aria-selected="true"] { background: var(--ink); color: #fff; }
.tab-btn[aria-selected="true"] .tab-btn__icon { background: rgba(255, 255, 255, .1); color: var(--brand-light); }
.tab-btn[aria-selected="true"] .tab-btn__arrow { opacity: 1; transform: translateX(3px); }
@media (min-width: 1024px) {
  .tab-btn { width: 100%; padding: 9px 14px 9px 9px; border-radius: 14px; font-size: 14px; white-space: normal; }
  .tab-btn__arrow { display: block; }
}

.tab-panel { padding: clamp(20px, 3.5vw, 36px); min-height: 100%; background: #fff; }
.tab-panel[hidden] { display: none; }
.tab-panel.is-entering { animation: fade-up .6s var(--ease) both; }
.tab-panel__icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 16px; background: var(--ink); color: var(--brand-light); }
.tab-panel h2 { margin-top: 16px; }
.tab-panel__icon svg { width: 22px; height: 22px; }
.tab-panel .lead { margin-top: 14px; max-width: 46rem; }
.tab-panel .check-grid { margin-top: 20px; }
.tab-panel .check-item { background: var(--page); }

/* Hakkımızda: sekme menüsünün altındaki rakam kartları.
   Telefonda kısa kartlar (2 sütun), tablette tek satır (4 sütun),
   masaüstünde menünün altında 2x2 kare. */
.mini-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 640px) { .mini-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .mini-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mini-stat {
  display: flex; flex-direction: column; justify-content: flex-end; gap: 2px;
  padding: 14px 16px; border-radius: var(--radius-card); background: #fff;
}
@media (min-width: 1024px) { .mini-stat { aspect-ratio: 1 / 1; padding: 16px; } }
.mini-stat .stat-num { font-size: clamp(1.35rem, 2.2vw, 1.75rem); color: var(--ink); }
.mini-stat .stat-label { font-size: 12.5px; color: var(--muted); }
.mini-stat:last-child { background: var(--ink); }
.mini-stat:last-child .stat-num { color: var(--brand-light); }
.mini-stat:last-child .stat-label { color: rgba(255, 255, 255, .6); }
/* 11. İletişim ve form
   ========================================================================== */
.contact-cards { display: grid; gap: 10px; }
@media (min-width: 640px) { .contact-cards { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .contact-cards { grid-template-columns: repeat(4, 1fr); } }
.contact-card {
  display: flex; flex-direction: column; padding: 18px; border-radius: 20px; background: #fff;
  transition: transform .4s var(--ease), box-shadow .4s;
}
a.contact-card:hover { transform: translateY(-4px); box-shadow: 0 24px 50px -26px rgba(10, 16, 32, .35); }
.contact-card__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--ink); color: #fff; }
.contact-card--wa .contact-card__icon { background: var(--wa); }
.contact-card small { display: block; margin-top: 14px; font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--brand); }
.contact-card strong { display: block; margin-top: 4px; font-size: 15px; font-weight: 600; line-height: 1.4; word-break: break-word; }
.contact-card__text { display: block; margin-top: 4px; font-size: 14px; color: var(--muted); }
.contact-card__link { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 12px; font-size: 14px; font-weight: 600; color: var(--brand); }

.contact-layout { display: grid; gap: 28px; padding: 40px 16px; }
@media (min-width: 640px) { .contact-layout { padding: 48px 32px; } }
@media (min-width: 1024px) { .contact-layout { grid-template-columns: 1fr 1fr; gap: 44px; padding: 52px 44px; } }

.info-list { display: grid; gap: 8px; margin-top: 22px; }
.info-row {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 16px;
  background: rgba(255, 255, 255, .05); border: 1px solid var(--line-dark); transition: background-color .25s;
}
a.info-row:hover { background: rgba(255, 255, 255, .1); }
.info-row .icon-btn { pointer-events: none; }
.info-row small { display: block; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .45); }
.info-row strong { font-weight: 600; word-break: break-word; }
/* Açık panelde (ana sayfa iletişim) bilgi satırları */
.panel--light .info-row { background: var(--page); border-color: transparent; }
.panel--light a.info-row:hover { background: #E3E9F3; }
.panel--light .info-row small { color: var(--muted); }
.panel--light .info-row .icon-btn--light { background: var(--ink); color: #fff; }

.hours { margin-top: 18px; padding: 16px; border-radius: 20px; background: rgba(255, 255, 255, .05); border: 1px solid var(--line-dark); }
.hours h3 { font-size: 15px; font-weight: 600; }
.hours ul { display: grid; gap: 8px; margin-top: 12px; font-size: 14px; }
.hours li { display: flex; justify-content: space-between; gap: 16px; color: rgba(255, 255, 255, .7); }
.hours li strong { color: #fff; font-weight: 600; }

.mail-cta { margin-top: 4px; }
.social-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.social-pills a {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 999px;
  font-size: 14px; font-weight: 600; background: rgba(255, 255, 255, .06); border: 1px solid var(--line-dark);
  transition: background-color .25s;
}
.social-pills a:hover { background: var(--brand); border-color: var(--brand); }

.map { height: clamp(260px, 32vw, 360px); padding: 10px; border-radius: var(--radius-panel); background: #fff; }
.map iframe { display: block; width: 100%; height: 100%; border: 0; border-radius: calc(var(--radius-panel) - 10px); filter: grayscale(1); transition: filter .7s; }
.map:hover iframe { filter: none; }
/* İletişim panelinin içindeki harita: geniş ekranda sol sütunla aynı yükseklikte */
.map--inset { height: 300px; background: var(--page); }
@media (min-width: 1024px) { .map--inset { height: auto; min-height: 380px; } }
.panel--dark .map--inset { background: rgba(255, 255, 255, .06); border: 1px solid var(--line-dark); }


/* 12. CTA bandı ve footer
   ========================================================================== */
.cta { display: grid; gap: 20px; padding: 40px 16px; }
@media (min-width: 640px) { .cta { padding: 44px 32px; } }
@media (min-width: 1024px) { .cta { grid-template-columns: 1fr auto; align-items: end; padding: 52px 44px; } }
.cta .lead { margin-top: 12px; max-width: 34rem; }
.cta__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cta__glow { position: absolute; right: -10%; bottom: -60%; z-index: -1; width: 60%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(37, 99, 235, .45), transparent 65%); pointer-events: none; }

.site-footer { padding: var(--frame); }
.footer { padding: 36px 16px 22px; }
@media (min-width: 640px) { .footer { padding: 44px 32px 24px; } }
@media (min-width: 1024px) { .footer { padding: 48px 44px 24px; } }
.footer__grid { display: grid; gap: 26px; }
@media (min-width: 640px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 48px; } }
.footer__brand .logo-card { display: inline-block; }
.footer__brand p { margin-top: 20px; max-width: 22rem; font-size: 14px; color: rgba(255, 255, 255, .6); }
.socials { display: flex; gap: 8px; margin-top: 20px; }
.socials a { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; background: rgba(255, 255, 255, .06); transition: background-color .25s, transform .25s var(--ease); }
.socials a:hover { background: var(--brand); transform: translateY(-2px); }
.footer h3 { font-size: 15px; font-weight: 600; margin-bottom: 18px; }
.footer__links { display: grid; gap: 10px; font-size: 14px; color: rgba(255, 255, 255, .6); }
.footer__links a { display: inline-flex; align-items: center; gap: 8px; transition: color .2s, transform .25s var(--ease); }
.footer__links a:hover { color: #fff; transform: translateX(3px); }
.footer__contact { display: grid; gap: 14px; font-size: 14px; color: rgba(255, 255, 255, .6); }
.footer__contact li { display: flex; gap: 10px; align-items: flex-start; }
.footer__contact svg { flex-shrink: 0; margin-top: 3px; color: var(--brand-light); }
.footer__contact a:hover { color: #fff; }
.footer__bottom {
  display: flex; flex-direction: column; gap: 10px; margin-top: 48px; padding-top: 24px;
  border-top: 1px solid var(--line-dark); font-size: 13px; color: rgba(255, 255, 255, .45);
}
@media (min-width: 768px) { .footer__bottom { flex-direction: row; justify-content: space-between; } }
.footer__bottom strong { color: #fff; font-weight: 600; }


/* 13. WhatsApp ve yukarı çık butonu
   ========================================================================== */
.wa-widget {
  position: fixed; right: 24px; bottom: 24px; z-index: 9999;
  display: flex; flex-direction: column; align-items: flex-end; gap: 12px;
  transition: opacity .35s, visibility .35s, transform .45s var(--ease);
}
/* Geniş ekranda hero'nun alt kısmı görünürken gizlenir (sağ alttaki kartın üstüne binmesin);
   hero'nun üst menüsünde zaten WhatsApp düğmesi var. Kaydırmaya başlayınca belirir. */
.wa-widget.is-tucked { opacity: 0; visibility: hidden; transform: translateY(16px); }
.wa-tooltip {
  display: flex; align-items: flex-start; gap: 8px; max-width: 220px; padding: 12px 16px;
  border: 1px solid #E5E7EB; border-radius: 16px 16px 0 16px; background: #fff;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25);
}
.wa-tooltip p { font-size: 14px; line-height: 1.375; color: #374151; }
.wa-tooltip strong { color: var(--wa); }
.wa-tooltip__close { flex-shrink: 0; margin-top: 2px; color: #9CA3AF; transition: color .2s; }
.wa-tooltip__close:hover { color: #4B5563; }

.wa-btn {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 50%; background: var(--wa); color: #fff;
  box-shadow: 0 10px 24px -8px rgba(37, 211, 102, .6), 0 2px 6px rgba(10, 16, 32, .12);
  transition: transform .3s;
}
.wa-btn:hover { transform: scale(1.1); }
.wa-btn:active { transform: scale(.95); }
/* Seyrek, ince bir halka: dışa doğru açılıp kaybolur */
.wa-btn__ping { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--wa); opacity: 0; pointer-events: none; animation: wa-ring 2.8s ease-out infinite; }
.wa-btn svg { position: relative; z-index: 1; width: 30px; height: 30px; }

.to-top {
  position: fixed; right: 30px; bottom: 96px; z-index: 9998;
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: rgba(15, 23, 42, .9); color: #fff; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25);
  opacity: 0; visibility: hidden; transform: translateY(16px);
  transition: opacity .3s, visibility .3s, transform .3s, background-color .3s;
}
.to-top.show { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--brand); transform: scale(1.1); }


/* 14. Animasyonlar ve sayfa geçişi
   ========================================================================== */
@keyframes wa-ring { 0% { transform: scale(1); opacity: .7; } 55%, 100% { transform: scale(1.45); opacity: 0; } }
@keyframes dot-pulse { 0%, 100% { box-shadow: 0 0 0 5px rgba(96, 165, 250, .35); } 50% { box-shadow: 0 0 0 10px rgba(96, 165, 250, .06); } }
@keyframes fade-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes line-up { from { transform: translateY(105%); } to { transform: none; } }
@keyframes zoom-out { from { opacity: 0; transform: scale(1.08); } to { opacity: 1; transform: none; } }
@keyframes grow-x { from { transform: scaleX(0); } to { transform: none; } }

/* Sayfa açılışında oynayan giriş animasyonları (yalnızca JS açıksa) */
.js .anim-up { animation: fade-up .9s var(--ease) both; animation-delay: var(--d, 0s); }
.js .anim-fade { animation: fade-in 1s ease both; animation-delay: var(--d, 0s); }
.js .hero__title .line > span { animation: line-up 1s var(--ease) both; animation-delay: var(--d, 0s); }
.js .hero__media img { animation: zoom-out 1.6s var(--ease) both; }
.js .page-hero__bg { animation: zoom-out 1.6s var(--ease) both; }
.js .callout { animation: fade-in .6s ease both; animation-delay: var(--d, 1s); }
.js .callout__line { transform-origin: left; animation: grow-x .7s var(--ease) both; animation-delay: var(--d, 1s); }
.js .callout--rev .callout__line { transform-origin: right; }

/* Kaydırınca beliren öğeler */
.js .reveal {
  opacity: 0; transform: translateY(32px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
  transition-delay: var(--delay, 0s);
}
.js .reveal--zoom { transform: scale(.96); }
.js .reveal.is-visible { opacity: 1; transform: none; }

/* Yükleme ve sayfalar arası geçiş ekranı.
   Sayfa açılırken S logosu döner ve alttaki ince çizgi akar; sayfa hazır olunca
   (JS "is-loaded" ekler, en geç 1,5 sn) kaybolur. JS çalışmazsa 3 sn sonra
   kendiliğinden kalkar. Başka sayfaya geçerken "is-leaving" ile geri gelir. */
.page-curtain {
  position: fixed; inset: 0; z-index: 10001;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
  background: var(--page); pointer-events: none; opacity: 0; visibility: hidden;
}
.page-curtain__mark { width: 84px; height: 84px; }
.page-curtain__bar {
  position: relative; width: 96px; height: 3px; overflow: hidden; border-radius: 999px;
  background: rgba(30, 64, 175, .12);
}
.page-curtain__bar::after {
  content: ""; position: absolute; inset: 0; width: 40%; border-radius: inherit; background: var(--brand);
  animation: curtain-bar 1s ease-in-out infinite;
}
.js .page-curtain {
  opacity: 1; visibility: visible;
  transition: opacity .5s var(--ease), visibility .5s;
  animation: curtain-failsafe .01s 3s forwards;
}
.js .page-curtain__mark { animation: curtain-spin 1.4s var(--ease) infinite; }
html.is-loaded .page-curtain { opacity: 0; visibility: hidden; animation: none; }
html.is-loaded .page-curtain.is-leaving { opacity: 1; visibility: visible; pointer-events: all; transition-duration: .3s; }
@keyframes curtain-spin {
  0% { transform: scale(.82) rotate(-90deg); opacity: .6; }
  50% { transform: scale(1) rotate(0); opacity: 1; }
  100% { transform: scale(.82) rotate(270deg); opacity: .6; }
}
@keyframes curtain-bar { from { transform: translateX(-110%); } to { transform: translateX(260%); } }
@keyframes curtain-failsafe { to { opacity: 0; visibility: hidden; } }

/* Hareket azaltma tercihi olan kullanıcılar için animasyonları kapat */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .js .reveal { opacity: 1; transform: none; }
}


/* Kart şeridi noktaları: yalnızca telefonda görünür (aşağıdaki 640 px kuralı) */
.carousel-dots { display: none; }

/* 15. Telefonda kısa sayfalar
   Alt alta uzayan kart listeleri yana kaydırılır, ızgaralar ikiye bölünür,
   footer sıkılaşır. Yalnızca 640 px altını etkiler.
   ========================================================================== */
@media (max-width: 639px) {
  /* Yana kaydırılan kart şeritleri: "Neden biz" kartları, araç kartları,
     ana sayfa hizmet kartları ve "4 adımda" süreç adımları.
     Bir sonraki kartın kenarı görünür, kaydırılabildiği anlaşılır. */
  .reason-grid,
  .vehicle-grid,
  .bento,
  .steps {
    display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory;
    margin-inline: calc(-1 * clamp(16px, 3vw, 32px));
    padding: 4px clamp(16px, 3vw, 32px) 10px; scroll-padding-inline: clamp(16px, 3vw, 32px);
    scrollbar-width: none; overscroll-behavior-x: contain;
  }
  .reason-grid::-webkit-scrollbar,
  .vehicle-grid::-webkit-scrollbar,
  .bento::-webkit-scrollbar,
  .steps::-webkit-scrollbar { display: none; }
  .reason-grid > *,
  .vehicle-grid > *,
  .bento > *,
  .steps > * { flex: 0 0 82%; scroll-snap-align: start; }
  /* Ekranın yanında bekleyen kartlar, kaydırma animasyonunu beklemeden görünür */
  .js .reason-grid > .reveal,
  .js .vehicle-grid > .reveal,
  .js .bento > .reveal,
  .js .steps > .reveal { opacity: 1; transform: none; }
  /* Şeritteki hizmet kartları eşit boyda; kart genişlediği için açıklama da görünür */
  .bento .service-card { min-height: 210px; }
  .bento .service-card p { display: block; }
  .bento .service-card h3 { font-size: 1rem; }
  .bento .service-card--photo p { display: none; }
  .bento .service-card--photo h3 { font-size: 1.25rem; }

  /* Kart şeridinin altındaki noktalar; dokunma alanı noktadan büyük */
  .carousel-dots { display: flex; justify-content: center; gap: 2px; margin-top: 4px; }
  .carousel-dot { display: grid; place-items: center; width: 22px; height: 22px; padding: 0; }
  .carousel-dot::after {
    content: ""; width: 7px; height: 7px; border-radius: 999px; background: rgba(10, 16, 32, .2);
    transition: width .3s var(--ease), background-color .3s;
  }
  .carousel-dot.is-active { width: 30px; }
  .carousel-dot.is-active::after { width: 22px; background: var(--brand); }
  /* Koyu karttaki büyük %98, şeritteki kartları gereksiz uzatmasın (oran yandaki kartta yazıyor) */
  .reason-card--wide > div:last-child { display: none; }

  /* İletişim kartları 2x2; açıklama satırları gizli */
  .contact-cards { grid-template-columns: 1fr 1fr; }
  .contact-card { padding: 14px; }
  .contact-card small { margin-top: 10px; }
  .contact-card strong { font-size: 13.5px; overflow-wrap: anywhere; }
  .contact-card__text,
  .contact-card__link { display: none; }

  /* Filo bilgi kutuları ve süreç adımları daha sıkı */
  .amenities { grid-template-columns: 1fr 1fr; }
  .amenities > div { padding: 16px 14px; }
  .amenities h3 { margin-top: 8px; font-size: .9rem; }
  .amenities p { font-size: 12px; }
  .step { padding: 14px; }
  .step h3 { margin-top: 10px; }
  .step p { font-size: 12.5px; }

  /* Hakkımızda fotoğrafları biraz daha küçük */
  .about__visual { max-width: 300px; margin-inline: auto; }

  /* Ana sayfa filo vitrini, telefona özel kompakt düzen:
     basık görsel, altında araç seçimi, kısa bilgi satırı ve tek düğme.
     Özellik listesi gizli (Filo sayfasında var). */
  .fleet__grid { gap: 14px; padding: 58px 14px 18px; }
  .fleet__image { aspect-ratio: 16 / 9; border-radius: 16px; }
  .fleet__counter { left: 14px; bottom: 12px; font-size: 12px; }
  .fleet__tabs { gap: 6px; }
  .fleet-tab { height: 46px; border-radius: 12px; font-size: 11.5px; }
  .fleet__info { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px; }
  .fleet__kicker { grid-column: 1 / -1; font-size: 10px; letter-spacing: .16em; }
  .fleet__name { margin-top: 6px; font-size: 1.25rem; }
  .fleet__cap { margin-top: 6px; padding: 4px 10px 4px 4px; gap: 6px; }
  .fleet__cap span { display: none; }
  .fleet__cap strong { font-size: .8rem; padding-left: 6px; }
  .fleet__features { display: none; }
  .fleet__info .hero__actions { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr; gap: 6px; margin-top: 16px; }
  .fleet__info .btn { margin-top: 0; }
  .fleet__info .btn--light { justify-content: space-between; padding-left: 20px; }
  /* "Tüm filoyu inceleyin" telefonda sade bir metin bağlantısı */
  .fleet__info .btn--ghost { height: auto; padding: 8px 0 0; border: 0; font-size: 13.5px; color: rgba(255, 255, 255, .7); }
  .fleet__info .btn--ghost:hover { background: none; color: #fff; }

  /* Alt sayfa başlıkları: "HİZMETLERİMİZ" gibi uzun tek kelimeler dar ekrana sığsın */
  .page-hero__title { font-size: 7vw; }

  /* Madde listeleri ve harita */
  .check-grid { grid-template-columns: 1fr 1fr; gap: 6px; }
  .check-item { gap: 8px; padding: 9px 10px; font-size: 12.5px; line-height: 1.35; }
  .check-item__icon { width: 22px; height: 22px; }
  .check-item__icon svg { width: 12px; height: 12px; }
  .map--inset { height: 220px; }

  /* Footer: logo ve sosyal ikonlar yan yana, iki link sütunu yan yana */
  .footer { padding: 28px 16px 18px; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 22px 16px; }
  .footer__brand,
  .footer__grid > :last-child { grid-column: 1 / -1; }
  .footer__brand { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .footer__brand p { display: none; }
  .footer__brand .socials { margin-top: 0; }
  .footer h3 { margin-bottom: 10px; }
  .footer__links { gap: 8px; font-size: 13.5px; }
  .footer__contact { gap: 10px; font-size: 13.5px; }
  .footer__bottom { margin-top: 22px; padding-top: 16px; }
  .footer__area { font-size: 12px; line-height: 1.6; }
}

/* 16. Çerez bildirimi, onaylı harita ve yasal sayfalar
   ========================================================================== */
.cookie-banner {
  position: fixed; left: 16px; bottom: 16px; z-index: 10000;
  display: grid; gap: 12px; width: min(440px, calc(100% - 32px)); padding: 16px 18px;
  border-radius: 20px; background: #fff; color: var(--ink);
  box-shadow: 0 24px 60px -16px rgba(10, 16, 32, .45), 0 0 0 1px rgba(10, 16, 32, .06);
  animation: fade-up .5s var(--ease) both;
}
.cookie-banner[hidden] { display: none; }
.cookie-banner p { font-size: 13.5px; line-height: 1.55; color: var(--muted); }
.cookie-banner strong { display: block; margin-bottom: 4px; font-size: 14.5px; color: var(--ink); }
.cookie-banner a { color: var(--brand); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.cookie-banner__actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
@media (max-width: 639px) {
  .cookie-banner { left: 10px; right: 10px; bottom: 10px; width: auto; }
  .cookie-banner__actions .btn { flex: 1 1 0; }
  /* Bildirim açıkken sağ alttaki düğmeler üstüne binmesin */
  body.cookie-open .wa-widget, body.cookie-open .to-top { opacity: 0; visibility: hidden; }
}

/* Harita onay verilene kadar yüklenmez; yerine bilgi ve düğme görünür */
.map { position: relative; }
.map__consent {
  position: absolute; inset: 10px; display: grid; place-content: center; justify-items: center; gap: 12px;
  padding: 20px; border-radius: calc(var(--radius-panel) - 10px); text-align: center;
  background: var(--page); color: var(--muted); font-size: 14px;
}
.map__consent p { max-width: 22rem; }
.map__consent a { font-size: 13px; color: var(--brand); font-weight: 600; }
.panel--dark .map__consent { background: rgba(255, 255, 255, .04); color: rgba(255, 255, 255, .7); }
.panel--dark .map__consent a { color: var(--brand-light); }
.map.is-loaded .map__consent { display: none; }

/* Footer yasal bağlantıları */
.footer__legal { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.footer__legal a, .footer__legal button { color: rgba(255, 255, 255, .6); transition: color .2s; }
.footer__legal a:hover, .footer__legal button:hover { color: #fff; }

/* Gizlilik / Kullanım koşulları metinleri */
.prose {
  max-width: 860px; margin-inline: auto; padding: clamp(22px, 4vw, 48px);
  border-radius: var(--radius-panel); background: #fff;
}
.prose .prose__meta { font-size: 13px; color: var(--muted); }
.prose h2 {
  margin-top: 32px; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.05rem, 2vw, 1.25rem);
  scroll-margin-top: 90px;
}
.prose h2:first-of-type { margin-top: 18px; }
.prose p, .prose li { margin-top: 10px; font-size: 15px; line-height: 1.75; color: #374151; }
.prose ul { margin-top: 6px; padding-left: 20px; list-style: disc; }
.prose li { margin-top: 6px; }
.prose a { color: var(--brand); font-weight: 600; }
.prose .prose__note { margin-top: 28px; padding: 14px 16px; border-radius: 16px; background: var(--page); font-size: 14px; }

/* 404 sayfası: hızlı bağlantılar */
.notfound-links { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 860px; margin-inline: auto; }
@media (min-width: 768px) { .notfound-links { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.notfound-links a {
  display: grid; gap: 6px; padding: 18px; border-radius: var(--radius-card); background: #fff;
  font-weight: 600; transition: transform .3s var(--ease), box-shadow .3s;
}
.notfound-links a small { font-weight: 500; font-size: 13px; color: var(--muted); }
.notfound-links a:hover { transform: translateY(-3px); box-shadow: 0 20px 40px -24px rgba(10, 16, 32, .4); }
.notfound-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 22px; }
.prose__link { color: var(--brand); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }