/* ==========================================================================
   modern.css — Güvenli Modernizasyon + Tema Sistemi (Koyu/Açık)
   Ankara Kiralik Depo · SEO Operasyonu GÜN 3
   --------------------------------------------------------------------------
   KURAL: style.css'ten SONRA yüklenir, yalnızca GÖRSEL katman. HTML içeriği,
   metinler, linkler, URL'ler DEĞİŞMEZ. Geri almak için <link modern.css> +
   <script theme-toggle.js> satırlarını silmek yeterli.

   TEMA: Varsayılan = KOYU. Kullanıcı gündüz/gece butonuyla açığa geçebilir
   (tercih localStorage'da saklanır). <html data-theme="light|dark">.
   ========================================================================== */

/* --- 1. Tema Tokenları --------------------------------------------------- */
/* Varsayılan (attribute yoksa) = KOYU */
:root,
:root[data-theme="dark"] {
  --pg-bg:        #14161a;   /* siyaha yakın sayfa zemini */
  --pg-surface:   #1c2027;   /* kart / muted bölüm */
  --pg-surface-2: #21262e;   /* ikincil yüzey */
  --pg-text:      #e9ebef;   /* ana metin (açık) */
  --pg-text-mut:  #9aa1ab;   /* ikincil metin */
  --pg-border:    #2b3038;   /* ince ayraç */
  --pg-band:      #0f1115;   /* header + koyu bantlar */
  --m-green:      #e0362f;   /* MARKA KIRMIZISI — koyu zeminde parlak */
  --m-green-dark: #c62b25;
  --m-green-soft: rgba(224, 54, 47, 0.16);
}
/* AÇIK mod */
:root[data-theme="light"] {
  --pg-bg:        #ffffff;
  --pg-surface:   #f5f6f8;
  --pg-surface-2: #ffffff;
  --pg-text:      #1a1d23;
  --pg-text-mut:  #5f6672;
  --pg-border:    #e6e8ec;
  --pg-band:      #12161c;   /* açık modda da header/bant koyu kalır */
  --m-green:      #cf2f2a;   /* marka kırmızısı (açık zeminde) */
  --m-green-dark: #a81f1b;
  --m-green-soft: rgba(207, 47, 42, 0.10);
}
:root {
  --m-radius:     14px;
  --m-radius-sm:  10px;
  --m-shadow:     0 6px 24px rgba(0, 0, 0, 0.28);
  --m-transition: 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- 2. Sayfa zemini & metin (tema uygulanışı) -------------------------- */
html, body { background: var(--pg-bg) !important; }
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--pg-text);
  scroll-behavior: smooth;
  text-rendering: optimizeLegibility;
}

/* İçerik yüzeyleri koyu/açık moda uyum sağlar */
main .uk-section-default,
main .uk-section-muted { background: var(--pg-bg) !important; }
main .uk-card-default,
.in-wave-2 .uk-card-body,
.in-wave-4 .uk-card-body { background: var(--pg-surface) !important; color: var(--pg-text) !important; }

/* İçerik metinleri tema rengini alır (header/bantlar hariç) */
main p, main li, main span, main td, main strong, main em,
main h1, main h2, main h3, main h4, main h5, main h6,
.par, .par strong { color: var(--pg-text); }
main .uk-text-muted, main small { color: var(--pg-text-mut) !important; }

h1, h2, h3, h4, h5, h6 {
  letter-spacing: -0.01em;
  line-height: 1.25;
  text-wrap: balance;
}
.par, main p { text-wrap: pretty; }
h1 { font-weight: 700; }
h2 { font-weight: 700; }
h3 { font-weight: 600; }

/* --- 2b. Profesyonel ikonlar (emoji yerine Font Awesome) ---------------- */
.m-ico {
  color: var(--m-green);
  margin-right: 9px;
  width: 18px;
  text-align: center;
  font-size: 0.95em;
  vertical-align: -1px;
}

/* Ana sayfa büyük H1 (center içindeki) */
main center > h1 {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  margin: 0.4em auto 0.5em;
  position: relative;
  display: inline-block;
  padding-bottom: 0.35em;
  color: var(--pg-text);
}
main center > h1::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 0;
  width: 64px; height: 4px;
  border-radius: 4px;
  background: var(--m-green);
  transform: translateX(-50%);
}

/* Gövde paragrafları (.par) — okunabilirlik */
.par {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
  line-height: 1.85;
  font-size: 1.03rem;
}
main a:not(.uk-button):not(.pps-btn-img) { transition: color var(--m-transition); }

/* --- 3. Butonlar (CTA) --------------------------------------------------- */
.uk-button {
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: transform var(--m-transition), box-shadow var(--m-transition),
              background-color var(--m-transition);
}
.uk-button:hover { transform: translateY(-2px); }
a.green { transition: color var(--m-transition), opacity var(--m-transition); font-weight: 600; }

/* --- 4. Header / Navbar — HER ZAMAN KOYU (kontrast güvenli) -------------- */
header .in-header-home {
  background: var(--pg-band) !important;
  background-image: none !important;
}
.uk-sticky.uk-active {
  background: var(--pg-band) !important;
  box-shadow: 0 2px 18px rgba(0,0,0,0.35);
}
.uk-navbar-container { transition: box-shadow var(--m-transition), background-color var(--m-transition); }

.uk-navbar-item h3 { font-weight: 700; letter-spacing: -0.02em; color: #ffffff !important; }

header .in-header-home .uk-navbar-nav > li > a,
.uk-sticky.uk-active .uk-navbar-nav > li > a,
.uk-navbar-nav > li > a {
  font-weight: 600;
  letter-spacing: 0.01em;
  position: relative;
  color: rgba(255, 255, 255, 0.82) !important;
  transition: color var(--m-transition);
}
.uk-navbar-nav > li > a::after {
  content: "";
  position: absolute;
  left: 16px; right: 16px; bottom: 14px;
  height: 2px;
  background: var(--m-green);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--m-transition);
}
.uk-navbar-nav > li > a:hover::after,
.uk-navbar-nav > li.uk-active > a::after { transform: scaleX(1); }
.uk-navbar-nav > li > a:hover,
.uk-navbar-nav > li.uk-active > a { color: #ffffff !important; }
.uk-navbar-toggle { color: #fff !important; }

/* --- 4a. Gündüz/Gece geçiş butonu --------------------------------------- */
.akd-theme-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,0.10);
  color: #fff !important;
  cursor: pointer;
  margin-left: 6px;
  transition: background var(--m-transition), transform var(--m-transition);
  border: 0;
}
.akd-theme-btn:hover { background: rgba(255,255,255,0.20); transform: rotate(-15deg); }
.akd-theme-btn i { font-size: 16px; line-height: 1; }

/* --- 4b. İletişim şeridi (bg_grad) — KOYU bant + beyaz metin ------------- */
.bg_grad {
  border-radius: var(--m-radius-sm);
  box-shadow: var(--m-shadow);
  background: var(--pg-band) !important;
}
.uk-section-primary { background: var(--pg-band) !important; }
.bg_grad p, .bg_grad a, .bg_grad a.green, .bg_grad .green, .bg_grad i { color: #ffffff !important; }
.bg_grad svg path { fill: #ffffff !important; }
.bg_grad a { white-space: nowrap; }

/* --- 4c. İletişim barı — modern, dengeli CTA tasarımı ------------------ */
.akd-topbar { padding: 2px 6px; }
.akd-topbar-info {
  color: rgba(255,255,255,0.80) !important;
  font-size: 0.96rem;
  letter-spacing: 0.005em;
}
.akd-topbar-info i { color: var(--m-green); }
.akd-topbar-info strong { color: #fff !important; font-weight: 600; }
.akd-topbar-cta {
  display: flex; gap: 10px; align-items: center;
  justify-content: flex-end; flex-wrap: wrap;
}
.akd-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 18px;
  border-radius: 999px;
  font-weight: 600; font-size: 0.92rem;
  text-decoration: none !important;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  transition: transform var(--m-transition), box-shadow var(--m-transition), background var(--m-transition), border-color var(--m-transition);
}
.akd-btn:hover { transform: translateY(-2px); }
.akd-btn-wa {
  background: rgba(37,211,102,0.14); color: #34d874 !important;
  border: 1px solid rgba(37,211,102,0.32);
  box-shadow: 0 4px 16px rgba(37,211,102,0.10);
}
.akd-btn-wa:hover { background: rgba(37,211,102,0.24); border-color: rgba(37,211,102,0.5); }
.akd-btn-call {
  background: var(--m-green-soft); color: var(--m-green) !important;
  border: 1px solid rgba(224,54,47,0.32);
  box-shadow: 0 4px 16px rgba(224,54,47,0.10);
}
.akd-btn-call:hover { background: rgba(224,54,47,0.24); border-color: var(--m-green); }
.akd-wa-ico { width: 18px; height: 18px; fill: #34d874; flex: 0 0 auto; }
.akd-btn i { font-size: 15px; }
@media (max-width: 640px) {
  .akd-topbar-cta { justify-content: center; }
  .akd-btn { padding: 8px 15px; font-size: 0.88rem; }
}

/* --- 5. Güven rozetleri şeridi (temiz flexbox, eski UIkit grid-divider kaldırıldı) --- */
.akd-trust-strip { background: var(--pg-band); padding: 1.8rem 1rem; }
.akd-trust-grid {
  max-width: 1120px; margin: 0 auto;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 1.6rem 2.2rem;
}
.akd-trust-item {
  display: flex; align-items: center; gap: 14px;
  flex: 1 1 220px; max-width: 260px;
}
.akd-trust-text h6 {
  letter-spacing: 0.02em;
  font-weight: 700;
  margin: 0 0 3px;
  font-size: 0.8rem;
  color: #fff !important;
}
.akd-trust-text p { margin: 0; line-height: 1.4; font-size: 0.86rem; color: rgba(255,255,255,0.75) !important; }

/* Güven rozeti ikonu (eski kırık PNG'lerin yerine) */
.akd-badge-ico {
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,0.12);
  color: #fff; font-size: 1.1rem;
  transition: transform var(--m-transition);
}
.akd-trust-item:hover .akd-badge-ico { transform: scale(1.08); }

@media (max-width: 640px) {
  .akd-trust-item { flex-basis: 100%; max-width: 360px; }
}

/* --- 6. Kurumsal bilgi tablosu ------------------------------------------ */
main center table {
  margin: 0 auto 1.5rem;
  max-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: var(--m-radius);
  overflow: hidden;
  box-shadow: var(--m-shadow);
  background: var(--pg-surface) !important;
}
main center table td {
  padding: 12px 18px;
  border-bottom: 1px solid var(--pg-border);
  text-align: left;
  font-size: 0.98rem;
  color: var(--pg-text) !important;
}
main center table tr:last-child td { border-bottom: 0; }
main center table td:first-child { font-weight: 500; }
main center table td:last-child { text-align: right; }
main center table a { color: var(--m-green) !important; font-weight: 600; }

/* --- 7. Görsel düzeltmeleri --------------------------------------------- */
main center img[src*="depo-gorsel"],
main img[width][height] {
  max-width: 100%;
  height: auto;
  border-radius: var(--m-radius);
  box-shadow: var(--m-shadow);
}
iframe[src*="google.com/maps"] {
  max-width: 100%;
  width: 100%;
  border-radius: var(--m-radius);
  box-shadow: var(--m-shadow);
  display: block;
}

/* --- 8. Muhtelif -------------------------------------------------------- */
.hotline-phone-ring-wrap { z-index: 990; }
a:focus-visible, button:focus-visible, .uk-button:focus-visible {
  outline: 3px solid var(--m-green);
  outline-offset: 2px;
  border-radius: 6px;
}

/* --- 10. CAM EFEKTİ (glassmorphism) + MODERN KUTULAR ------------------- */
:root, :root[data-theme="dark"] {
  --glass-bg:  rgba(255,255,255,0.05);
  --glass-brd: rgba(255,255,255,0.10);
  --glass-hi:  rgba(255,255,255,0.14);
}
:root[data-theme="light"] {
  --glass-bg:  rgba(255,255,255,0.72);
  --glass-brd: rgba(0,0,0,0.07);
  --glass-hi:  rgba(0,0,0,0.10);
}

/* Navbar — buzlu cam */
header .in-header-home,
.uk-sticky.uk-active {
  background: rgba(15,17,21,0.72) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  backdrop-filter: blur(16px) saturate(1.3);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

/* İletişim şeridi — navbar'dan AYRIK cam panel (örtüşme giderildi) */
.bg_grad {
  margin-top: 18px !important;
  background: var(--glass-bg) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid var(--glass-brd);
  box-shadow: 0 10px 34px rgba(0,0,0,0.30);
}

/* Kurumsal bilgi tablosu — cam kart */
main center table {
  background: var(--glass-bg) !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid var(--glass-brd);
  box-shadow: 0 10px 34px rgba(0,0,0,0.30);
}
main center table td { border-bottom: 1px solid var(--glass-brd) !important; }

/* Güven rozetleri bandı — üstte ince ayrım çizgisi */
.uk-section-primary { border-top: 1px solid rgba(255,255,255,0.06); }

/* --- 10b. TİPOGRAFİ — profesyonel düzen ------------------------------- */
body {
  font-family: "Rubik", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0.004em;
}
.par {
  font-size: 1.05rem;
  line-height: 1.9;
  letter-spacing: 0.003em;
}
.par strong { font-weight: 600; letter-spacing: 0; }
main h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  margin-top: 2.2rem;
  margin-bottom: 0.6rem;
}
main h3 {
  font-size: clamp(1.18rem, 2.2vw, 1.45rem);
  margin-top: 1.6rem;
  margin-bottom: 0.5rem;
}

/* --- 10c. GALERİ (gerçek depo fotoğrafları) — cam kartlar ------------- */
.akd-gallery-wrap { padding: 1rem 0 2rem; }
.akd-gallery-title {
  text-align: center;
  font-size: clamp(1.5rem, 3.2vw, 2.1rem);
  font-weight: 700;
  margin: 0.5rem auto 0.4rem;
  color: var(--pg-text);
}
.akd-gallery-title + p {
  text-align: center;
  color: var(--pg-text-mut);
  max-width: 620px;
  margin: 0 auto 1.6rem;
  font-size: 1rem;
}
.akd-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 14px;
}
@media (min-width: 640px) {
  .akd-gallery { grid-template-columns: repeat(3, 1fr); gap: 18px; }
}
@media (min-width: 900px) {
  .akd-gallery { grid-template-columns: repeat(4, 1fr); }
}
.akd-gallery figure {
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid var(--glass-brd);
  box-shadow: 0 10px 30px rgba(0,0,0,0.28);
  transition: transform 0.28s var(--m-transition), box-shadow 0.28s, border-color 0.28s;
}
.akd-gallery figure:hover {
  transform: translateY(-6px);
  border-color: var(--m-green);
  box-shadow: 0 18px 46px rgba(0,0,0,0.40);
}
.akd-gallery img {
  width: 100%;
  height: 210px;
  object-fit: cover;
  object-position: center;
  display: block;
}
.akd-gallery img.akd-obj-low { object-position: center 75%; }
@media (max-width: 639px) {
  .akd-gallery img { height: 130px; }
  .akd-gallery figcaption { padding: 8px 10px; font-size: 0.78rem; }
}
.akd-gallery figcaption {
  padding: 11px 14px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--pg-text);
}

/* ==========================================================================
   11. DÖNÜŞÜM BİLEŞENLERİ (referans yapı · bizim kırmızı/antrasit marka)
   Hero · Fiyat Hesaplama · Müşteri Yorumları · SSS akordeon
   Not: Yapı sektörün kanıtlanmış dönüşüm akışını izler; renk/doku (koyu tema,
   cam efekti, pill CTA, kırmızı vurgu) bize özgüdür — birebir kopya değildir.
   ========================================================================== */

/* --- 11a. HERO — tam genişlik arka plan fotoğrafı (referans: turuncudepolama) ---- */
.akd-hero {
  position: relative;
  overflow: hidden;
  min-height: clamp(440px, 50vw, 600px);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -112px;
  padding: calc(170px + clamp(2.6rem, 6vw, 4.6rem)) 1rem clamp(2.6rem, 6vw, 4.6rem);
}
.akd-hero-bg {
  position: absolute; inset: 0; z-index: 0;
}
.akd-hero-bg img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.akd-hero-overlay {
  position: absolute; inset: 0;
  background:
    radial-gradient(900px 420px at 50% 0%, rgba(224,54,47,0.20), transparent 60%),
    linear-gradient(180deg, rgba(10,12,15,0.60) 0%, rgba(10,12,15,0.72) 45%, rgba(10,12,15,0.90) 100%);
}
.akd-hero-inner {
  position: relative; z-index: 1;
  max-width: 940px; margin: 0 auto; text-align: center;
}
.akd-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: 999px;
  background: rgba(224,54,47,0.22);
  border: 1px solid rgba(255,255,255,0.22);
  color: #ffb4b1 !important;
  font-weight: 600; font-size: 0.82rem; letter-spacing: 0.03em;
  text-transform: uppercase; margin-bottom: 1.1rem;
}
.akd-eyebrow i { color: #ffb4b1; }
.akd-hero h1 {
  font-size: clamp(1.9rem, 5vw, 3.15rem);
  font-weight: 700; line-height: 1.12; margin: 0 0 0.55rem;
  color: #ffffff !important;
  text-shadow: 0 2px 20px rgba(0,0,0,0.35);
}
.akd-hero h1 .hl { color: #ff6b64 !important; }
.akd-hero-sub {
  max-width: 640px; margin: 0 auto 1.7rem;
  color: rgba(255,255,255,0.86) !important;
  font-size: clamp(1rem, 2.2vw, 1.18rem); line-height: 1.7;
}
.akd-hero-pills {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
  margin-bottom: 1.9rem;
}
.akd-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: 999px;
  background: rgba(255,255,255,0.10);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.20);
  color: #ffffff !important; font-weight: 500; font-size: 0.92rem;
}
.akd-pill i { color: #ff6b64; font-size: 0.95em; }
.akd-hero-cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.akd-hero-cta .akd-btn { padding: 13px 26px; font-size: 1rem; }
.akd-hero-cta .akd-btn i { font-size: 17px; }
.akd-hero-trust {
  margin-top: 1.5rem; color: rgba(255,255,255,0.82) !important;
  font-size: 0.9rem; display: inline-flex; align-items: center;
  gap: 8px; flex-wrap: wrap; justify-content: center;
}
.akd-hero-trust .stars { color: #f5b301; letter-spacing: 1px; }
.akd-hero-trust b { color: #ffffff !important; }

/* --- 11b. FİYAT HESAPLAMA ---------------------------------------------- */
.akd-calc-wrap { padding: clamp(2rem, 5vw, 3.2rem) 1rem; }
.akd-section-head { text-align: center; max-width: 680px; margin: 0 auto 1.9rem; }
.akd-section-head .k {
  color: var(--m-green) !important; font-weight: 700; font-size: 0.82rem;
  letter-spacing: 0.08em; text-transform: uppercase; display: block; margin-bottom: 6px;
}
.akd-section-head h2 { margin: 0 0 0.5rem; font-size: clamp(1.5rem, 3.2vw, 2.15rem); }
.akd-section-head p { color: var(--pg-text-mut) !important; margin: 0; font-size: 1rem; }
.akd-calc {
  max-width: 640px; margin: 0 auto; padding: clamp(1.4rem, 3vw, 2.2rem);
  border-radius: var(--m-radius);
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid var(--glass-brd);
  box-shadow: 0 14px 40px rgba(0,0,0,0.30);
}
.akd-calc label { display: block; font-weight: 600; color: var(--pg-text) !important; margin-bottom: 4px; }
.akd-calc .hint { color: var(--pg-text-mut) !important; font-size: 0.86rem; margin: 0 0 14px; }
.akd-calc-row { display: flex; align-items: center; gap: 14px; }
.akd-calc-row input[type="range"] { flex: 1; accent-color: var(--m-green); height: 6px; }
.akd-calc-val {
  min-width: 92px; text-align: center; font-weight: 700; font-size: 1.05rem;
  padding: 8px 10px; border-radius: 10px;
  background: var(--m-green-soft); color: var(--m-green) !important;
  border: 1px solid var(--glass-brd);
}
.akd-calc-result {
  margin-top: 1.4rem; padding: 1.1rem 1.2rem; border-radius: var(--m-radius-sm);
  background: var(--pg-band); border: 1px solid var(--glass-brd);
  display: flex; align-items: baseline; justify-content: center; gap: 10px; flex-wrap: wrap;
}
.akd-calc-result .lbl { color: rgba(255,255,255,0.75) !important; font-size: 0.95rem; }
.akd-calc-result .amt { color: #fff !important; font-weight: 700; font-size: 1.7rem; }
.akd-calc-result .amt small { font-size: 0.95rem; font-weight: 500; }
.akd-calc-note { text-align: center; color: var(--pg-text-mut) !important; font-size: 0.82rem; margin: 12px 0 0; }
.akd-calc-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 1.3rem; }

/* --- 11c. MÜŞTERİ YORUMLARI -------------------------------------------- */
.akd-reviews-wrap { padding: clamp(2rem, 5vw, 3.2rem) 1rem; }
.akd-reviews {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px; max-width: 1120px; margin: 0 auto;
}
.akd-review {
  padding: 1.4rem 1.5rem; border-radius: var(--m-radius);
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid var(--glass-brd);
  box-shadow: 0 10px 30px rgba(0,0,0,0.26);
  display: flex; flex-direction: column; gap: 12px;
  transition: transform var(--m-transition), border-color var(--m-transition);
}
.akd-review:hover { transform: translateY(-5px); border-color: var(--m-green); }
.akd-review .stars { color: #f5b301; letter-spacing: 2px; font-size: 0.98rem; }
.akd-review p { margin: 0; color: var(--pg-text) !important; line-height: 1.7; font-size: 0.98rem; }
.akd-review .who { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.akd-review .ava {
  width: 42px; height: 42px; border-radius: 50%; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  background: var(--m-green); color: #fff; font-weight: 700; font-size: 1.05rem;
}
.akd-review .who b { color: var(--pg-text) !important; display: block; font-size: 0.96rem; }
.akd-review .who span { color: var(--pg-text-mut) !important; font-size: 0.84rem; }

/* --- 11d. SSS AKORDEON -------------------------------------------------- */
.akd-faq-wrap { padding: clamp(2rem, 5vw, 3.2rem) 1rem clamp(2.4rem, 6vw, 3.6rem); }
.akd-faq { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.akd-faq details {
  border-radius: var(--m-radius-sm);
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid var(--glass-brd);
  overflow: hidden; transition: border-color var(--m-transition);
}
.akd-faq details[open] { border-color: var(--m-green); }
.akd-faq summary {
  cursor: pointer; list-style: none; padding: 16px 20px;
  font-weight: 600; color: var(--pg-text) !important; font-size: 1.02rem;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.akd-faq summary::-webkit-details-marker { display: none; }
.akd-faq summary::after {
  content: "\002B"; font-weight: 700; font-size: 1.3rem; color: var(--m-green);
  flex: 0 0 auto; transition: transform var(--m-transition);
}
.akd-faq details[open] summary::after { content: "\2212"; }
.akd-faq .a { padding: 0 20px 18px; color: var(--pg-text-mut) !important; line-height: 1.75; }

@media (max-width: 640px) {
  .akd-hero-cta .akd-btn { width: 100%; justify-content: center; }
  .akd-calc-result .amt { font-size: 1.45rem; }
}

/* --- 9. Mobil ---------------------------------------------------------- */
@media (max-width: 640px) {
  .par { font-size: 1rem; line-height: 1.75; }
  main center table td { padding: 10px 12px; font-size: 0.92rem; }
  .akd-theme-btn { width: 34px; height: 34px; }
}

/* ==========================================================================
   12. İÇERİK BLOKLARI — kutu/kart yerleşimi (GÜN 4)
   Referans: turuncudepolama.com yapı kalıbı (kutu/kart/görsel alanı).
   Metinler birebir korunur; yalnızca sunum yapısı değişir.
   ========================================================================== */

.akd-block {
  max-width: 1140px;
  margin: 0 auto;
  padding: clamp(3rem, 8vw, 5.5rem) 1.2rem;
}
.akd-block-head { text-align: center; max-width: 760px; margin: 0 auto 2rem; }
.akd-block-head h2, .akd-block-head h3 { margin: 0 0 0.6rem; }
.akd-block-intro { color: var(--pg-text-mut); font-size: 1.05rem; line-height: 1.85; max-width: 760px; margin: 0 auto 1rem; text-align: center; }

/* Görsel alanı (mevcut img[height=1000] hackını değiştirir) */
.akd-block-media { margin: 2.2rem auto; max-width: 780px; }
.akd-block-media img {
  width: 100%; height: auto;
  border-radius: 20px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.35), 0 0 0 1px var(--glass-brd);
  display: block;
}

/* Alt başlık (avantajlar / süreç / eşyalar vb. grup başlığı) */
.akd-sub-h { text-align: center; font-size: clamp(1.2rem, 2.6vw, 1.5rem); font-weight: 700; margin: 3rem 0 1.6rem; color: var(--pg-text); }
.akd-block > .akd-sub-h:first-child { margin-top: 0; }

/* 12a. Kart grid (avantajlar / fiyat faktörleri) — merkezî ikon rozeti, dengeli son satır */
.akd-cardgrid {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 16px;
  margin: 0 auto;
}
.akd-cardgrid .c {
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  flex: 1 1 190px; max-width: 220px; min-width: 0;
  text-align: left;
  padding: 1.4rem 1.2rem 1.3rem; border-radius: 4px;
  background: transparent;
  border: 1px solid var(--glass-brd);
  transition: border-color var(--m-transition);
}
.akd-cardgrid .c:hover {
  border-color: var(--m-green);
}
.akd-cardgrid .c:hover i {
  opacity: 0.16;
  transform: scale(1.06);
}
.akd-cardgrid .c i {
  position: absolute;
  top: 0.6rem; right: 0.7rem;
  display: flex; width: auto; height: auto; margin: 0;
  background: none; border: none;
  color: var(--m-green);
  font-size: 3.6rem;
  opacity: 0.1;
  z-index: 0;
  pointer-events: none;
  transition: opacity var(--m-transition), transform var(--m-transition);
}
.akd-cardgrid .c b, .akd-cardgrid .c span { position: relative; z-index: 1; }
.akd-cardgrid .c b { display: block; color: var(--pg-text); font-size: 0.98rem; font-weight: 700; margin-bottom: 0.45rem; letter-spacing: -0.005em; overflow-wrap: break-word; }
.akd-cardgrid .c span { color: var(--pg-text-mut); font-size: 0.86rem; line-height: 1.65; text-wrap: pretty; }
.akd-cardgrid .c span a { color: var(--m-green) !important; font-weight: 700; text-decoration: none; }

/* Uzun paragraflı kartlar (dar sütunda dikey uzayıp kötü görünmesin diye geniş sütun) */
.akd-cardgrid.wide .c { flex: 1 1 260px; max-width: 340px; }
.akd-cardgrid.wide .c i { font-size: 2.8rem; opacity: 0.09; }

/* Kurumsal bilgi kartları — küçük destekleyici fotoğraflı versiyon */
.akd-photocard { padding-top: 0; overflow: hidden; }
.akd-photocard-img {
  width: calc(100% + 2.4rem);
  margin: 0 -1.2rem 1rem;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.akd-photocard-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.akd-photocard i { margin: 0; }

/* 12b. Süreç adımları — numaratör yok, ince sol vurgu çizgisiyle ayrım */
.akd-steps { display: flex; flex-direction: column; gap: 10px; max-width: 720px; margin: 0 auto; }
.akd-steps .s {
  display: flex; align-items: flex-start;
  padding: 1rem 1.3rem; border-radius: 12px;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid var(--glass-brd);
  border-left: 3px solid var(--m-green-soft);
  transition: border-color var(--m-transition), transform var(--m-transition), background var(--m-transition);
}
.akd-steps .s:hover { border-left-color: var(--m-green); background: var(--glass-hi); transform: translateX(3px); }
.akd-steps .t b { display: block; color: var(--pg-text); font-size: 1rem; font-weight: 700; margin-bottom: 3px; }
.akd-steps .t span { color: var(--pg-text-mut); font-size: 0.92rem; line-height: 1.65; }

/* 12c. Eşya/etiket grid (saklanabilecek eşyalar) — dengeli son satır, 5'i tek sıra */
.akd-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.akd-tags .t {
  box-sizing: border-box;
  flex: 1 1 195px; max-width: 220px; min-width: 0;
  display: flex; gap: 12px; align-items: flex-start;
  padding: 1rem 1.15rem; border-radius: 14px;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid var(--glass-brd);
  transition: border-color var(--m-transition), transform var(--m-transition);
  color: inherit; text-decoration: none;
}
.akd-tags .t > div { min-width: 0; }
.akd-tags .t:hover { border-color: var(--m-green); transform: translateY(-3px); }
.akd-tags .t i {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--m-green-soft); border: none;
  color: var(--m-green); font-size: 1.15rem;
  margin-top: 2px;
}
.akd-tags .t b { display: block; color: var(--pg-text); font-size: 0.95rem; font-weight: 700; margin-bottom: 2px; overflow-wrap: break-word; }
.akd-tags .t span { color: var(--pg-text-mut); font-size: 0.86rem; line-height: 1.55; }

/* 5'li kart/etiket grupları — flex-wrap yerine kesin ızgara (grid), erken satır atlamasını önler */
@media (min-width: 900px) {
  .akd-cardgrid.grid-5, .akd-tags.grid-5 {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
  }
  .akd-cardgrid.grid-5 .c, .akd-tags.grid-5 .t {
    flex: none; max-width: none; width: auto; margin: 0;
  }
}
@media (min-width: 640px) and (max-width: 899px) {
  .akd-cardgrid.grid-5, .akd-tags.grid-5 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
  }
  .akd-cardgrid.grid-5 .c, .akd-tags.grid-5 .t {
    flex: none; max-width: none; width: auto; margin: 0;
  }
}

/* Kabul edilmeyenler — uyarı kutusu */
.akd-warn {
  margin: 1.6rem auto 0; max-width: 760px;
  padding: 1.1rem 1.3rem; border-radius: 14px;
  background: var(--m-green-soft);
  border: 1px solid var(--m-green);
  color: var(--pg-text);
  font-size: 0.94rem; line-height: 1.7; text-align: center;
}
.akd-warn i { color: var(--m-green); margin-right: 8px; }

/* 12d. Checklist kartı (depo seçerken dikkat) */
.akd-checklist { display: flex; flex-direction: column; gap: 10px; max-width: 720px; margin: 0 auto; }
.akd-checklist .i {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 1rem 1.2rem; border-radius: 14px;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid var(--glass-brd);
  transition: border-color var(--m-transition);
}
.akd-checklist .i:hover { border-color: var(--m-green); }
.akd-checklist .i i.fa-check-circle { color: var(--m-green); margin-top: 2px; font-size: 1.05rem; }
.akd-checklist .i b { color: var(--pg-text); font-size: 0.95rem; font-weight: 600; }
.akd-checklist .i span { color: var(--pg-text-mut); font-size: 0.9rem; }

/* Sonuç kutusu — bloğun kapanışı, hafif vurgulu */
.akd-conclusion {
  margin: 2.4rem auto 0; max-width: 820px;
  padding: 1.3rem 1.5rem; border-radius: 16px;
  background: var(--pg-band); border: 1px solid var(--glass-brd);
  box-shadow: 0 14px 34px rgba(0,0,0,0.3);
  color: #fff; font-size: 0.98rem; line-height: 1.75; text-align: center;
}
.akd-conclusion b { color: var(--m-green); }

@media (max-width: 640px) {
  .akd-block { padding: 2.4rem 1rem; }
  .akd-cardgrid .c { flex-basis: 100%; max-width: 380px; }
  .akd-tags .t { flex-basis: 100%; max-width: 380px; }
  .akd-steps .s { padding: 0.9rem 1.05rem; }
  .akd-corp-info .akd-cardgrid { gap: 10px; }
  .akd-corp-info .akd-cardgrid .c { flex: 0 1 calc(50% - 5px); max-width: calc(50% - 5px); }
}

/* ==========================================================================
   13. YENİ NAVBAR (yuvarlak/pill, floating) + MOBİL ALT NAVİGASYON (GÜN 4)
   Eski "topbar" şeridi (bg_grad + WhatsApp/telefon) kaldırıldı; bilgiler
   navbar'a ve mobil alt bara taşındı. Masaüstü: üstte yuvarlak floating bar.
   Mobil: altta sabit ikon barı (Anasayfa/SSS/Ara/WhatsApp/İletişim).
   ========================================================================== */

/* position: fixed kullanılıyor çünkü html/body'de overflow-x:hidden var (style.css) —
   bu, position:sticky'yi bazı tarayıcılarda çalışmaz hale getiriyor (bilinen CSS kısıtı).
   fixed + main'e denk gelen padding-top ile aynı "takip eden navbar" davranışı sağlanıyor. */
.akd-header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; padding: 14px 16px 0; }
@media (max-width: 640px) {
  .akd-header { transition: transform 0.3s ease; }
  .akd-header.akd-header-hidden { transform: translateY(-130%); }
}
/* Hero'su olan index.html'de main'e boşluk gerekmez (hero kendi -92px margin'iyle
   navbar'ın arkasına uzanır). Hero'su olmayan diğer sayfalarda .akd-main-pad kullanılır. */
.akd-main-pad { padding-top: 112px; }
.akd-navbar {
  max-width: 1080px; margin: 0 auto;
  background: rgba(15,17,21,0.66);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  backdrop-filter: blur(18px) saturate(1.3);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 999px;
  box-shadow: 0 10px 32px rgba(0,0,0,0.30);
}
.akd-navbar-inner {
  display: flex; align-items: center; gap: 18px;
  padding: 5px 10px 5px 22px;
}
.akd-navbar-logo {
  font-weight: 700; font-size: 1.05rem; letter-spacing: -0.01em;
  color: #fff !important; text-decoration: none !important;
  white-space: nowrap; margin-right: auto;
  display: flex; align-items: center;
}
.akd-navbar-logo img { height: 58px; width: auto; display: block; }
.akd-navbar-links {
  display: flex; align-items: center; gap: 4px;
  list-style: none; margin: 0; padding: 0;
}
.akd-navbar-links a {
  display: inline-block; padding: 9px 14px; border-radius: 999px;
  color: rgba(255,255,255,0.78) !important; text-decoration: none !important;
  font-weight: 500; font-size: 0.92rem;
  transition: background var(--m-transition), color var(--m-transition);
}
.akd-navbar-links a:hover,
.akd-navbar-links a.akd-nav-active {
  background: rgba(255,255,255,0.12); color: #fff !important;
}
.akd-navbar-cta { display: flex; align-items: center; gap: 8px; }
.akd-navbar-cta .akd-btn-sm { padding: 9px 16px; font-size: 0.86rem; white-space: nowrap; }
.akd-navbar-toggle {
  display: none; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255,255,255,0.10); border: 0; color: #fff;
  font-size: 1.05rem; cursor: pointer;
}

@media (max-width: 880px) {
  .akd-navbar-cta .akd-btn-wa span,
  .akd-navbar-cta .akd-btn-wa { display: none; }
  .akd-navbar-cta .akd-btn-call { display: inline-flex; }
  .akd-navbar-links {
    position: absolute; top: calc(100% + 10px); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 2px;
    background: rgba(15,17,21,0.92);
    -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 20px; padding: 10px;
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity var(--m-transition), transform var(--m-transition), visibility var(--m-transition);
  }
  .akd-navbar-links.akd-open { opacity: 1; visibility: visible; transform: translateY(0); }
  .akd-navbar-links a { text-align: center; padding: 12px 14px; }
  .akd-navbar-toggle { display: flex; }
  .akd-navbar-inner { position: relative; padding: 8px 8px 8px 18px; }
}
@media (min-width: 881px) {
  .akd-navbar-toggle { display: none !important; }
}

/* --- Mobil alt navigasyon barı -------------------------------------------- */
.akd-bottom-nav {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000;
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
  background: rgba(15,17,21,0.92);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  border-top: 1px solid rgba(255,255,255,0.10);
  align-items: center; justify-content: space-between;
}
.akd-bottom-nav a {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  color: rgba(255,255,255,0.58) !important; text-decoration: none !important;
  font-size: 0.64rem; font-weight: 600; letter-spacing: 0.01em; flex: 1 1 0; text-align: center;
  padding: 5px 4px; margin: 0 2px; border-radius: 12px;
  transition: background var(--m-transition), color var(--m-transition);
}
.akd-bottom-nav a i { font-size: 1.18rem; transition: transform 0.15s ease; }
.akd-bottom-nav a:active i { transform: scale(0.85); }
.akd-bottom-nav a.akd-nav-active {
  color: var(--m-green) !important;
  background: rgba(224,54,47,0.1);
}
.akd-bottom-nav a.akd-bottom-nav-cta {
  background: rgba(224,54,47,0.14); color: var(--m-green) !important;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  width: 50px; height: 50px; padding: 0; box-sizing: border-box; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: -22px 2px 0;
  border: 1px solid rgba(224,54,47,0.4);
  box-shadow: 0 4px 12px rgba(224,54,47,0.22), 0 0 0 4px var(--pg-bg);
  flex: 0 0 auto;
  transition: transform 0.15s ease, background var(--m-transition);
}
.akd-bottom-nav a.akd-bottom-nav-cta:hover,
.akd-bottom-nav a.akd-bottom-nav-cta:active { transform: scale(0.94); background: rgba(224,54,47,0.22); }
.akd-bottom-nav a.akd-bottom-nav-cta i { font-size: 1.15rem; margin: 0; }

@media (max-width: 640px) {
  .akd-bottom-nav { display: flex; }
  main { padding-bottom: 70px; }
}

/* --- Sağ altta sabit, cam görünümlü WhatsApp butonu (masaüstü) ----------- */
.akd-float-wa {
  position: fixed; right: 22px; bottom: 22px; z-index: 999;
  width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(37,211,102,0.16);
  -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
  border: 1px solid rgba(37,211,102,0.4);
  color: #34d874 !important; font-size: 1.6rem;
  box-shadow: 0 10px 28px rgba(0,0,0,0.25);
  transition: transform var(--m-transition), background var(--m-transition);
}
.akd-float-wa:hover { transform: scale(1.08); background: rgba(37,211,102,0.26); }
@media (max-width: 640px) { .akd-float-wa { display: none; } }

/* --- Footer (temiz, tekrarsız) ------------------------------------------- */
.akd-footer { background: var(--pg-band); padding: 3rem 1.2rem 0; }
.akd-footer-inner {
  max-width: 1120px; margin: 0 auto;
  display: flex; flex-wrap: wrap; gap: 2.4rem;
  padding-bottom: 2.4rem;
  border-bottom: 1px solid rgba(255,255,255,0.10);
}
.akd-footer-col { flex: 1 1 220px; }
.akd-footer-brand { flex: 1.4 1 260px; }
.akd-footer-logo { font-weight: 700; font-size: 1.15rem; color: #fff; margin-bottom: 0.7rem; }
.akd-footer-logo img { height: 52px; width: auto; display: block; }
.akd-footer-brand p { color: rgba(255,255,255,0.68); font-size: 0.92rem; line-height: 1.7; margin: 0; max-width: 340px; }
.akd-footer-col h4 { color: #fff; font-size: 0.95rem; font-weight: 700; margin: 0 0 1rem; }
.akd-footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.akd-footer-col ul a { color: rgba(255,255,255,0.68); text-decoration: none; font-size: 0.92rem; transition: color var(--m-transition); }
.akd-footer-col ul a:hover { color: #fff; }
.akd-footer-contact li { display: flex; align-items: flex-start; gap: 8px; color: rgba(255,255,255,0.68); font-size: 0.92rem; line-height: 1.5; }
.akd-footer-contact li i { color: var(--m-green); margin-top: 3px; flex: 0 0 auto; }
.akd-footer-contact a { color: rgba(255,255,255,0.85) !important; font-weight: 600; text-decoration: none; }
.akd-footer-map { margin-top: 1rem; border-radius: 12px; overflow: hidden; }
.akd-footer-map iframe { width: 100%; height: 160px; border: 0; display: block; }
.akd-footer-bottom { max-width: 1120px; margin: 0 auto; padding: 1.2rem 0; text-align: center; }
.akd-footer-bottom p { margin: 0; color: rgba(255,255,255,0.55); font-size: 0.84rem; }

/* 20. Kaydırdıkça beliren bölümler (hikaye hissi) */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   21. HERO TİPOGRAFİK VURGU — düz tek-font metni kırmak için
   Fraunces (italik serif) vurgu kelimesinde, IBM Plex Mono rozet/pill'lerde.
   ========================================================================== */
.akd-hero h1 .hl {
  font-family: "Fraunces", Georgia, serif;
  font-style: italic;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.akd-eyebrow,
.akd-pill {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.akd-eyebrow { font-size: 0.78rem; }
.akd-pill { font-size: 0.86rem; }
.akd-hero-sub strong {
  color: #ffffff !important;
  font-weight: 600;
}
.akd-section-head .k {
  font-family: "IBM Plex Mono", monospace;
  letter-spacing: 0.1em;
}

/* 20a. Bölüm içi kartlar tek blok değil, tek tek belirsin (canlılık) */
.reveal .c, .reveal .t, .reveal .s {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.reveal.is-visible .c, .reveal.is-visible .t, .reveal.is-visible .s {
  opacity: 1;
  transform: none;
}
.reveal.is-visible .c:nth-child(2), .reveal.is-visible .t:nth-child(2), .reveal.is-visible .s:nth-child(2) { transition-delay: 0.06s; }
.reveal.is-visible .c:nth-child(3), .reveal.is-visible .t:nth-child(3), .reveal.is-visible .s:nth-child(3) { transition-delay: 0.12s; }
.reveal.is-visible .c:nth-child(4), .reveal.is-visible .t:nth-child(4), .reveal.is-visible .s:nth-child(4) { transition-delay: 0.18s; }
.reveal.is-visible .c:nth-child(5), .reveal.is-visible .t:nth-child(5), .reveal.is-visible .s:nth-child(5) { transition-delay: 0.24s; }
.reveal.is-visible .c:nth-child(6), .reveal.is-visible .t:nth-child(6), .reveal.is-visible .s:nth-child(6) { transition-delay: 0.3s; }
.reveal.is-visible .c:nth-child(7), .reveal.is-visible .t:nth-child(7), .reveal.is-visible .s:nth-child(7) { transition-delay: 0.36s; }
.reveal.is-visible .c:nth-child(8), .reveal.is-visible .t:nth-child(8), .reveal.is-visible .s:nth-child(8) { transition-delay: 0.42s; }
@media (prefers-reduced-motion: reduce) {
  .reveal .c, .reveal .t, .reveal .s { opacity: 1; transform: none; transition: none; }
}
