/* ===================================================================
   JETMOBIL OTO EKSPERTİZ — Tasarım Sistemi
   Palet logodan türetildi: #3262AC mavi, #1D1F1C siyah, #BEBDBC gri.
   Yön: ölçüm aleti estetiği. Rapor okunur, veri öne çıkar, süs yok.
   =================================================================== */

:root{
  /* --- Marka --- */
  --blue:#2F5FA8;
  --blue-dk:#21447A;
  --blue-dp:#183459;
  --blue-lt:#6D9BD9;
  --blue-wash:#EDF2FA;
  --blue-wash-2:#DCE7F5;

  /* --- Koyu yüzeyler --- */
  --navy:#142440;
  --navy-2:#1D3455;
  --navy-3:#2A4570;

  /* --- Nötr --- */
  --ink:#1D1F1C;
  --ink-2:#2C3138;
  --steel:#58616E;
  --steel-lt:#8A93A0;
  --rule:#DBE0E6;
  --rule-2:#EAEDF1;
  --surface:#F4F6F9;
  --surface-2:#FAFBFC;
  --white:#FFFFFF;

  /* --- Durum renkleri: yalnızca rapor şiddet göstergesinde --- */
  --ok:#2E7D4F;
  --ok-soft:#E4F0E8;
  --warn:#A9761D;
  --warn-soft:#F7EEDC;
  --risk:#A8402A;
  --risk-soft:#F6E3DF;

  /* --- Tipografi --- */
  --display:'Archivo',system-ui,-apple-system,sans-serif;
  --sans:'IBM Plex Sans',system-ui,-apple-system,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;

  /* --- Ölçü --- */
  --container:1200px;
  --pad:24px;
  --r-sm:4px;
  --r-md:8px;
  --r-lg:12px;
  --r-xl:16px;

  /* --- Gölge: alçak ve sert, kağıt üstü kart hissi --- */
  --sh-1:0 1px 2px rgba(20,36,64,.06), 0 1px 1px rgba(20,36,64,.04);
  --sh-2:0 2px 4px rgba(20,36,64,.06), 0 4px 12px rgba(20,36,64,.05);
  --sh-3:0 8px 28px rgba(20,36,64,.10);

  /* --- Eski isimler: pages.css ve panel.css bunları kullanıyor --- */
  --white-2:#FAFBFC;
  --white-3:#F4F6F9;
  --orange:#2F5FA8;
  --orange-2:#21447A;
  --orange-soft:#6D9BD9;
  --orange-tint:#EDF2FA;
  --muted:#58616E;
  --muted-2:#8A93A0;
  --line:#DBE0E6;
  --line-2:#EAEDF1;
}

/* =============== RESET =============== */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:hidden; }
body{
  margin:0;
  font-family:var(--sans);
  font-size:16px;
  font-weight:400;
  line-height:1.65;
  color:var(--ink-2);
  background:var(--white);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-feature-settings:"kern" 1,"liga" 1;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; cursor:pointer; border:0; background:none; }
::selection{ background:var(--blue); color:var(--white); }

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

/* =============== TİPOGRAFİ =============== */
h1,h2,h3,h4{
  font-family:var(--display);
  margin:0;
  color:var(--ink);
  font-weight:700;
  letter-spacing:-.022em;
  line-height:1.12;
}
h1{ font-size:clamp(31px,4.1vw,50px); line-height:1.06; letter-spacing:-.03em; }
h2{ font-size:clamp(25px,2.8vw,37px); letter-spacing:-.026em; }
h3{ font-size:19px; letter-spacing:-.014em; }
h4{ font-size:15px; font-weight:600; letter-spacing:-.008em; }
p{ margin:0 0 1em; color:var(--steel); }
p:last-child{ margin-bottom:0; }
strong,b{ font-weight:600; color:var(--ink-2); }

.lede{
  font-size:17px;
  line-height:1.68;
  color:var(--steel);
  max-width:62ch;
}

/* --- İMZA: ölçüm cetveli etiketi ---
   Bölüm başlıklarının üstünde duran, çentikli hairline üzerine oturmuş
   mono etiket. Firma boya kalınlığı ölçüyor; başlık sistemi de ölçer. */
.eyebrow{
  display:block;
  position:relative;
  font-family:var(--mono);
  font-weight:500;
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--blue);
  padding-top:13px;
  margin-bottom:14px;
}
.eyebrow::before{
  content:"";
  position:absolute; top:0; left:0;
  width:132px; height:8px;
  background-image:
    linear-gradient(90deg, var(--blue) 1.5px, transparent 1.5px),
    linear-gradient(90deg, var(--rule) 1px, transparent 1px),
    linear-gradient(var(--rule), var(--rule));
  background-size:33px 8px, 6.6px 4px, 100% 1px;
  background-position:0 0, 0 0, 0 100%;
  background-repeat:repeat-x, repeat-x, no-repeat;
}
.eyebrow::after{
  content:"";
  position:absolute; top:0; left:0;
  width:1px; height:7px; background:var(--blue);
}

/* Koyu zeminde cetvel */
.on-dark .eyebrow,
.dealer .eyebrow,
.cta-banner .eyebrow{ color:var(--blue-lt); }
.on-dark .eyebrow::before,
.dealer .eyebrow::before,
.cta-banner .eyebrow::before{
  background-image:
    linear-gradient(90deg, var(--blue-lt) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.22) 1px, transparent 1px);
}
.on-dark .eyebrow::after,
.dealer .eyebrow::after,
.cta-banner .eyebrow::after{ background:var(--blue-lt); }

/* Eski vurgu sınıfları nötrlendi: italik aksan ve fosforlu altçizgi kaldırıldı */
.accent{ color:var(--blue); font-style:normal; font-family:inherit; font-weight:inherit; }
.under{ box-shadow:inset 0 -.42em 0 var(--blue-wash); }
h1 em,h2 em,h3 em{ font-style:normal; color:var(--blue); }

/* Veri metni */
.mono{ font-family:var(--mono); font-variant-numeric:tabular-nums; }

/* =============== YARDIMCI =============== */
.wrap{ width:100%; max-width:var(--container); margin:0 auto; padding:0 var(--pad); }
.section{ padding:84px 0; }
.section-sm{ padding:56px 0; }
.section-lg{ padding:110px 0; }
.center{ text-align:center; }
.center .eyebrow::before{ left:50%; transform:translateX(-50%); }
.center .eyebrow::after{ left:50%; }
.center .lede{ margin-left:auto; margin-right:auto; }

.section-head{ max-width:640px; margin-bottom:46px; }
.section-head h2{ margin-bottom:14px; }
.section-head.center{ margin-left:auto; margin-right:auto; }

.lift{ transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; }

/* =============== ÜST ŞERİT =============== */
.topbar{
  background:var(--navy);
  color:rgba(255,255,255,.72);
  font-size:12.5px;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.topbar-inner{
  max-width:var(--container); margin:0 auto; padding:8px var(--pad);
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.topbar .right{ display:flex; gap:20px; }
.topbar .right a{
  font-family:var(--mono); font-size:12px; color:rgba(255,255,255,.86);
  transition:color .15s;
}
.topbar .right a:hover{ color:var(--blue-lt); }

/* =============== NAV =============== */
.nav{
  position:sticky; top:0; z-index:90;
  background:rgba(255,255,255,.94);
  backdrop-filter:saturate(160%) blur(10px);
  -webkit-backdrop-filter:saturate(160%) blur(10px);
  border-bottom:1px solid var(--rule);
  transition:box-shadow .2s, border-color .2s;
}
.nav.is-stuck{ box-shadow:var(--sh-1); }
.nav-inner{
  max-width:var(--container); margin:0 auto; padding:0 var(--pad);
  height:74px; display:flex; align-items:center; justify-content:space-between; gap:24px;
  transition:height .2s ease;
}
.nav.is-stuck .nav-inner{ height:64px; }
.brand img{ height:38px; width:auto; transition:height .2s ease; }
.nav.is-stuck .brand img{ height:33px; }

.menu{ display:flex; align-items:center; gap:2px; }
.menu > a{
  position:relative;
  padding:9px 13px;
  font-size:14.5px; font-weight:500; color:var(--steel);
  border-radius:var(--r-sm);
  transition:color .15s, background .15s;
}
.menu > a:hover{ color:var(--ink); background:var(--surface); }
.menu > a.is-active{ color:var(--blue); font-weight:600; }
.menu > a.is-active::after{
  content:""; position:absolute; left:13px; right:13px; bottom:2px;
  height:2px; background:var(--blue); border-radius:1px;
}
.menu > a.cta{
  margin-left:10px; padding:10px 18px;
  background:var(--blue); color:var(--white); font-weight:600;
  border-radius:var(--r-md);
  box-shadow:var(--sh-1);
  transition:background .15s, transform .12s;
}
.menu > a.cta:hover{ background:var(--blue-dk); color:var(--white); transform:translateY(-1px); }
.menu > a.cta::after{ display:none; }

.hamburger{ display:none; width:42px; height:42px; padding:10px; border-radius:var(--r-sm); }
.hamburger span{ display:block; height:2px; background:var(--ink); border-radius:1px; transition:.22s; }
.hamburger span + span{ margin-top:5px; }
.hamburger.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.hamburger.is-open span:nth-child(2){ opacity:0; }
.hamburger.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* =============== BUTONLAR =============== */
.btn{
  display:inline-flex; align-items:center; gap:9px;
  padding:13px 22px;
  font-family:var(--sans); font-size:15px; font-weight:600; letter-spacing:-.005em;
  border-radius:var(--r-md);
  transition:background .15s, color .15s, border-color .15s, transform .12s, box-shadow .15s;
  white-space:nowrap;
}
.btn .arrow{ transition:transform .18s ease; }
.btn:hover .arrow{ transform:translateX(3px); }

.btn-primary{
  background:var(--blue); color:var(--white);
  box-shadow:var(--sh-1);
}
.btn-primary:hover{ background:var(--blue-dk); transform:translateY(-1px); box-shadow:var(--sh-2); }

.btn-ghost{
  background:var(--white); color:var(--ink);
  border:1px solid var(--rule);
}
.btn-ghost:hover{ border-color:var(--blue); color:var(--blue); background:var(--blue-wash); }

.on-dark .btn-ghost,.dealer .btn-ghost,.cta-banner .btn-ghost{
  background:transparent; color:var(--white); border-color:rgba(255,255,255,.26);
}
.on-dark .btn-ghost:hover,.dealer .btn-ghost:hover,.cta-banner .btn-ghost:hover{
  background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.45); color:var(--white);
}

/* =============== HERO =============== */
.hero{
  position:relative;
  padding:70px 0 78px;
  background:linear-gradient(180deg, var(--surface-2) 0%, var(--white) 62%);
  border-bottom:1px solid var(--rule);
  overflow:hidden;
}
/* Zeminde tek bir ölçek çizgisi: dekor değil, ölçüm göstergesi */
.hero::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:6px;
  background-image:linear-gradient(90deg, var(--rule) 1px, transparent 1px);
  background-size:28px 6px;
  opacity:.9;
}
.hero-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center;
}
.hero-text h1{ margin-bottom:20px; }
.hero-text h1 .line{ display:block; }
.hero-lede{ font-size:17.5px; line-height:1.65; color:var(--steel); max-width:50ch; margin-bottom:28px; }
.hero-cta{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:32px; }

/* Kapsam şeridi */
.hero-facts{
  display:flex; flex-wrap:wrap;
  border-top:1px solid var(--rule);
  padding-top:20px; margin:0;
}
.hero-facts > div{
  padding-right:26px; margin-right:26px;
  border-right:1px solid var(--rule);
}
.hero-facts > div:last-child{ border-right:0; padding-right:0; margin-right:0; }
.hero-facts dt{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--steel); margin-bottom:3px;
}
.hero-facts dd{
  margin:0; font-family:var(--display); font-size:20px; font-weight:700;
  color:var(--ink); letter-spacing:-.02em;
}

/* --- Rapor okuma kartı: sayfanın imza öğesi ---
   Ölçüm raporu gibi okunmalı, gösterge paneli gibi değil.
   Mono font yalnızca sayısal veride; etiketler gövde fontunda,
   cümle düzeninde ve dolgusuz. Durum rengi ince bir ray ile veriliyor. */
.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;
}

.readout{
  background:var(--white);
  border:1px solid var(--rule);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-3);
  overflow:hidden;
}

/* Başlık şeridi */
.readout-top{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:15px 20px;
  background:var(--navy); color:var(--white);
}
.rd-kind{
  display:block; font-size:11px; font-weight:500;
  letter-spacing:.02em; color:rgba(255,255,255,.55); margin-bottom:2px;
}
.rd-code{
  display:block; font-family:var(--mono); font-size:14px; font-weight:500;
  letter-spacing:.02em; color:var(--white);
}
.rd-state{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; font-weight:500; color:rgba(255,255,255,.88);
}
.rd-state::before{
  content:""; width:6px; height:6px; border-radius:50%; background:#5FD08A;
}

/* Araç satırı */
.readout-vehicle{
  display:flex; align-items:center; gap:15px;
  padding:17px 20px; border-bottom:1px solid var(--rule);
}
.rd-car{ font-size:14px; line-height:1.45; }
.rd-car b{ display:block; font-weight:600; color:var(--ink); }
.rd-car span{ font-size:12.5px; color:var(--steel); }

/* Türk plakası */
.plate{
  display:inline-flex; align-items:stretch; flex:none;
  height:34px; background:var(--white);
  border:1.5px solid #1D1F1C; border-radius:4px; overflow:hidden;
}
.plate-eu{
  position:relative;
  width:22px; flex:none;
  background:#0B3EA0; color:var(--white);
  font-family:var(--sans); font-size:8px; font-weight:600; letter-spacing:.02em;
  display:flex; align-items:flex-end; justify-content:center; padding-bottom:3px;
}
.plate-star{
  position:absolute; top:5px; left:50%; transform:translateX(-50%);
  width:11px; height:11px; border-radius:50%;
  border:1.5px dotted #F5C518;
}
.plate-no{
  display:flex; align-items:center; padding:0 11px;
  font-family:var(--display); font-size:17px; font-weight:600;
  letter-spacing:.09em; color:#1D1F1C;
}

/* Ölçüm tablosu */
.readout-table{
  width:100%; border-collapse:collapse; table-layout:auto;
}
.readout-table thead th{
  padding:9px 20px 8px;
  font-size:10.5px; font-weight:600; letter-spacing:.07em;
  text-transform:uppercase; color:var(--steel);
  text-align:left; background:var(--surface-2);
  border-bottom:1px solid var(--rule);
}
.readout-table td,
.readout-table tbody th{
  padding:12px 20px;
  border-bottom:1px solid var(--rule-2);
  vertical-align:middle;
}
.readout-table tbody tr:last-child td,
.readout-table tbody tr:last-child th{ border-bottom:0; }

.readout-table tbody th{
  font-size:14px; font-weight:500; color:var(--ink-2); text-align:left;
  position:relative; padding-left:34px;
}
/* Durum rayı: dolgulu rozet yerine ince renk şeridi */
.readout-table tbody th::before{
  content:""; position:absolute; left:20px; top:10px; bottom:10px;
  width:3px; border-radius:2px; background:var(--rule);
}
.readout-table tbody .rr-ok th::before{ background:var(--ok); }
.readout-table tbody .rr-warn th::before{ background:var(--warn); }
.readout-table tbody .rr-risk th::before{ background:var(--risk); }

/* Ölçek: değerin fabrika aralığına göre konumu */
.rr-scale{ width:88px; }
.rr-track{
  position:relative; display:block;
  height:5px; border-radius:3px; background:var(--rule-2);
  overflow:visible;
}
.rr-band{
  position:absolute; left:22%; width:17%; top:-2px; bottom:-2px;
  background:var(--ok-soft); border:1px solid rgba(46,125,79,.35);
  border-radius:2px;
}
.rr-mark{
  position:absolute; top:50%; width:3px; height:13px;
  margin-left:-1.5px; transform:translateY(-50%);
  border-radius:2px; background:var(--steel);
}
.rr-ok  .rr-mark{ background:var(--ok); }
.rr-warn .rr-mark{ background:var(--warn); }
.rr-risk .rr-mark{ background:var(--risk); }

/* Sayısal değer: burada mono yerinde, hizalı okunuyor */
.rr-val{
  width:76px; text-align:right; white-space:nowrap;
  font-family:var(--mono); font-size:13.5px; font-weight:500;
  font-variant-numeric:tabular-nums; color:var(--ink);
}
.rr-val .u{ font-size:11px; color:var(--steel-lt); margin-left:3px; }

/* Durum: cümle düzeninde, dolgusuz, yalnız renkle ayrışıyor */
.rr-state{
  width:92px; text-align:right; white-space:nowrap;
  font-size:13px; font-weight:600;
}
.rr-ok   .rr-state{ color:var(--ok); }
.rr-warn .rr-state{ color:#8A5D12; }   /* metin için koyu amber: AA */
.rr-risk .rr-state{ color:var(--risk); }

/* Ölçek açıklaması */
.readout-note{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:11px 20px;
  background:var(--surface-2);
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  font-size:12.5px; color:var(--steel);
}
.readout-note .sw{
  display:inline-block; width:9px; height:9px; border-radius:2px;
  margin-right:8px; vertical-align:-1px;
}
.sw-ok{ background:var(--ok-soft); border:1px solid var(--ok); }
.rd-sum{ font-weight:600; color:var(--ink-2); }

/* Alt şerit */
.readout-foot{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:15px 20px;
}
.rd-verify{
  display:flex; align-items:center; gap:12px;
  color:var(--steel); font-size:12.5px; line-height:1.4;
}
.rd-verify svg{ flex:none; color:var(--ink-2); }
.rd-verify b{ display:block; font-size:13px; font-weight:600; color:var(--ink-2); }
.rd-time{
  font-family:var(--mono); font-size:11.5px; color:var(--steel);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}

/* =============== ÖNE ÇIKAN GÖRSEL =============== */
.feature-img{ padding:84px 0; background:var(--white); }
.feature-img-grid{ display:grid; grid-template-columns:1fr 1.05fr; gap:60px; align-items:center; }
.feature-img-text h2{ margin-bottom:16px; }
.feature-img-list{ list-style:none; padding:0; margin:22px 0 28px; }
.feature-img-list li{
  display:flex; align-items:flex-start; gap:11px;
  padding:9px 0; font-size:15px; color:var(--ink-2);
  border-bottom:1px solid var(--rule-2);
}
.feature-img-list li:last-child{ border-bottom:0; }
.tick{
  flex:none; width:6px; height:6px; margin-top:8px;
  background:var(--blue); border-radius:1px; transform:rotate(45deg);
}
/* Saha fotoğrafı: saydam PNG, çerçevesiz dursun */
.feature-img-visual picture{ display:block; }
.feature-img-visual img{ width:100%; height:auto; }

/* =============== İSTATİSTİK =============== */
.stats{ padding:0 0 84px; background:var(--white); }
.stats-grid{
  display:grid; grid-template-columns:repeat(4,1fr);
  border:1px solid var(--rule); border-radius:var(--r-lg);
  overflow:hidden; background:var(--surface-2);
}
.stat{ padding:28px 24px; border-right:1px solid var(--rule); }
.stat:last-child{ border-right:0; }
.stat .num{
  font-family:var(--display); font-size:38px; font-weight:700;
  color:var(--blue); letter-spacing:-.035em; line-height:1;
  font-variant-numeric:tabular-nums; margin-bottom:7px;
}
.stat .num .suffix{ font-size:22px; }
.stat .label{ font-size:13.5px; color:var(--steel); line-height:1.45; }

/* =============== HİZMET PAKETLERİ =============== */
.services{ padding:88px 0; background:var(--surface); border-top:1px solid var(--rule); }
.pkgs{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; align-items:stretch; }
.pkg{
  position:relative; display:flex; flex-direction:column;
  padding:26px 22px 24px;
  background:var(--white); border:1px solid var(--rule); border-radius:var(--r-lg);
  transition:border-color .18s, box-shadow .18s, transform .18s;
}
.pkg:hover{ border-color:var(--blue-lt); box-shadow:var(--sh-2); transform:translateY(-2px); }
.pkg.featured{ border-color:var(--blue); box-shadow:var(--sh-2); }
.pkg .badge{
  position:absolute; top:-1px; right:18px;
  font-family:var(--mono); font-size:10px; font-weight:500;
  letter-spacing:.07em; text-transform:uppercase;
  background:var(--blue); color:var(--white);
  padding:4px 9px; border-radius:0 0 4px 4px;
}
.pkg .icon-wrap{
  width:38px; height:38px; margin-bottom:16px;
  display:grid; place-items:center;
  background:var(--blue-wash); color:var(--blue);
  border-radius:var(--r-sm);
}
.pkg .icon-wrap svg{ width:20px; height:20px; }
.pkg h3{ margin-bottom:5px; }
.pkg .duration{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.03em;
  color:var(--steel); margin-bottom:16px;
}
.pkg .price{
  font-family:var(--display); font-size:31px; font-weight:700;
  color:var(--ink); letter-spacing:-.035em; line-height:1;
  display:flex; align-items:baseline; gap:2px;
}
.pkg .price .currency{ font-size:19px; color:var(--steel); }
.pkg .price .from{
  font-family:var(--sans); font-size:12.5px; font-weight:500;
  color:var(--steel-lt); margin-left:5px; letter-spacing:0;
}
.pkg .price-note{
  font-size:12px; color:var(--steel); margin-top:4px;
  padding-bottom:16px; border-bottom:1px solid var(--rule-2);
}
.pkg ul{ list-style:none; padding:0; margin:16px 0 20px; flex:1; }
.pkg ul li{
  position:relative; padding-left:20px; margin-bottom:9px;
  font-size:14px; line-height:1.5; color:var(--steel);
}
.pkg ul li::before{
  content:""; position:absolute; left:0; top:7px;
  width:9px; height:5px;
  border-left:1.8px solid var(--blue); border-bottom:1.8px solid var(--blue);
  transform:rotate(-45deg);
}
.pkg-cta{
  display:inline-flex; align-items:center; justify-content:space-between;
  padding:11px 15px; font-size:14px; font-weight:600;
  color:var(--blue); background:var(--blue-wash);
  border-radius:var(--r-md);
  transition:background .15s, color .15s;
}
.pkg-cta:hover{ background:var(--blue); color:var(--white); }
.pkg-cta .arr{ transition:transform .18s; }
.pkg-cta:hover .arr{ transform:translateX(3px); }

/* =============== SÜREÇ ===============
   Gerçek bir sıra olduğu için numaralandırma bilgi taşıyor.
   Hat, görünür alana girince soldan sağa çizilir; düğümler sırayla yanar.
   Süre etiketleri gerçek operasyon verisidir, süs değil. */
.process{ padding:88px 0; background:var(--white); }
.process-grid{
  position:relative;
  display:grid; grid-template-columns:repeat(4,1fr); gap:30px;
}

/* Hat: soluk kesikli iz + üzerine çizilen dolu mavi hat */
.process-line{
  --gap:30px;
  --col:calc((100% - (var(--gap) * 3)) / 4);
  position:absolute; top:23px;
  left:24px; right:calc(var(--col) - 24px);
  height:2px; border-radius:1px;
  background-image:linear-gradient(90deg, var(--rule) 5px, transparent 5px);
  background-size:10px 2px;
}
.process-line-fill{
  position:absolute; inset:0;
  background:linear-gradient(90deg, var(--blue), var(--blue-lt));
  border-radius:1px;
  transform:scaleX(0); transform-origin:left center;
  transition:transform 1.9s cubic-bezier(.22,.61,.36,1);
}
.process-grid.is-running .process-line-fill{ transform:scaleX(1); }

.proc{ position:relative; }

/* Düğüm: ikon kalıcı, sıra numarası köşede rozet olarak durur */
.proc-node{
  position:relative;
  width:56px; height:56px; margin-bottom:20px;
  display:grid; place-items:center;
  background:var(--white);
  border:1.5px solid var(--rule);
  border-radius:50%;
  color:var(--steel-lt);
  transition:border-color .45s ease, background .45s ease, color .45s ease, transform .25s ease;
  transition-delay:calc(var(--i) * 420ms);
}
.proc-node::after{                       /* etkinleşme anında tek seferlik halka */
  content:""; position:absolute; inset:-5px;
  border:2px solid var(--blue); border-radius:50%;
  opacity:0; transform:scale(.85); pointer-events:none;
}
.proc-icon{ width:27px; height:27px; display:block; }

/* Sıra numarası rozeti */
.proc-no{
  position:absolute; top:-3px; right:-3px;
  min-width:21px; height:21px; padding:0 5px;
  display:grid; place-items:center;
  font-family:var(--mono); font-size:10.5px; font-weight:600;
  color:var(--steel); background:var(--white);
  border:1.5px solid var(--rule); border-radius:999px;
  transition:color .45s ease, border-color .45s ease, background .45s ease;
  transition-delay:calc(var(--i) * 420ms);
}

.process-grid.is-running .proc-node{
  border-color:var(--blue); background:var(--blue); color:var(--white);
}
.process-grid.is-running .proc-no{
  color:var(--blue); border-color:var(--blue-wash-2); background:var(--white);
}
.process-grid.is-running .proc-node::after{
  animation:proc-ping .9s ease-out forwards;
  animation-delay:calc(var(--i) * 420ms + 60ms);
}
@keyframes proc-ping{
  0%{ opacity:.55; transform:scale(.85); }
  100%{ opacity:0; transform:scale(1.45); }
}

/* --- İkon mikro hareketleri ---
   Her ikon kendi adımının işini canlandırır. Etkinleştikten sonra
   yavaş ve sürekli döner; dikkat çalmayacak kadar sakin tutuldu. */
.proc-icon .ln{ stroke-dasharray:14; stroke-dashoffset:14; }
.process-grid.is-running .proc-icon .ln{
  animation:ic-draw 2.6s ease-in-out infinite;
  animation-delay:calc(var(--i) * 420ms + 500ms);
}
.process-grid.is-running .proc-icon .ln-2{
  animation-delay:calc(var(--i) * 420ms + 750ms);
}
@keyframes ic-draw{
  0%{ stroke-dashoffset:14; }
  35%,65%{ stroke-dashoffset:0; }
  100%{ stroke-dashoffset:14; }
}

/* 02 — servis aracı ilerler, hız çizgileri akar */
.process-grid.is-running .ic-yol .van{
  animation:ic-drive 2.8s ease-in-out infinite;
  animation-delay:calc(var(--i) * 420ms + 500ms);
}
@keyframes ic-drive{
  0%,100%{ transform:translateX(-1.2px); }
  50%{ transform:translateX(1.2px); }
}
.process-grid.is-running .ic-yol .speed path{
  animation:ic-speed 1.5s linear infinite;
}
.process-grid.is-running .ic-yol .speed path:nth-child(2){ animation-delay:.25s; }
.process-grid.is-running .ic-yol .speed path:nth-child(3){ animation-delay:.5s; }
@keyframes ic-speed{
  0%{ opacity:0; transform:translateX(3px); }
  40%{ opacity:1; }
  100%{ opacity:0; transform:translateX(-4px); }
}

/* 03 — ölçüm cihazının ibresi tarar */
.proc-icon .needle{ transform-origin:12px 17.5px; transform-box:view-box; }
.process-grid.is-running .ic-olcum .needle{
  animation:ic-sweep 3.2s ease-in-out infinite;
  animation-delay:calc(var(--i) * 420ms + 500ms);
}
@keyframes ic-sweep{
  0%,100%{ transform:rotate(-46deg); }
  50%{ transform:rotate(46deg); }
}

/* 04 — QR rozeti nabız atar, onay işareti çizilir */
.process-grid.is-running .ic-rapor .qr{
  animation:ic-qr 3s ease-in-out infinite;
  animation-delay:calc(var(--i) * 420ms + 600ms);
}
@keyframes ic-qr{
  0%,100%{ opacity:.45; }
  50%{ opacity:1; }
}

/* 04 — rapor onay işareti çizilir */
.proc-icon .tick{ stroke-dasharray:12; stroke-dashoffset:12; }
.process-grid.is-running .ic-rapor .tick{
  animation:ic-tick 3s ease-in-out infinite;
  animation-delay:calc(var(--i) * 420ms + 900ms);
}
@keyframes ic-tick{
  0%{ stroke-dashoffset:12; }
  30%,70%{ stroke-dashoffset:0; }
  100%{ stroke-dashoffset:12; }
}

/* Metin: düğümle aynı sırayla belirir */
.proc-when, .proc h3, .proc p{
  opacity:0; transform:translateY(7px);
  transition:opacity .5s ease, transform .5s ease;
}
.proc-when{ transition-delay:calc(var(--i) * 420ms + 160ms); }
.proc h3   { transition-delay:calc(var(--i) * 420ms + 230ms); }
.proc p    { transition-delay:calc(var(--i) * 420ms + 300ms); }
.process-grid.is-running .proc-when,
.process-grid.is-running .proc h3,
.process-grid.is-running .proc p{ opacity:1; transform:none; }

.proc-when{
  font-family:var(--mono); font-size:11px; font-weight:500;
  letter-spacing:.06em; text-transform:uppercase;
  color:var(--blue); margin-bottom:7px;
}
.proc h3{ margin-bottom:8px; font-size:17px; }
.proc p{ font-size:14.5px; }

/* Fareyle üzerine gelince adım öne çıkar */
.proc:hover .proc-node{ transform:translateY(-3px) scale(1.04); transition-delay:0s; }

/* Eski numara kutusu artık kullanılmıyor */
.proc .num{ display:none; }

/* =============== NEDEN (alternating) =============== */
.why{ padding:88px 0; background:var(--surface); border-top:1px solid var(--rule); }
.why-row{
  display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;
  padding:44px 0;
}
.why-row + .why-row{ border-top:1px solid var(--rule); }
.why-row:nth-of-type(even) .why-art{ order:-1; }
.why-text h2{ margin-bottom:14px; }
.why-list{ list-style:none; padding:0; margin:20px 0 0; }
.why-list li{
  position:relative; padding-left:20px; margin-bottom:10px;
  font-size:14.5px; color:var(--steel);
}
.why-list li::before{
  content:""; position:absolute; left:0; top:8px;
  width:9px; height:5px;
  border-left:1.8px solid var(--blue); border-bottom:1.8px solid var(--blue);
  transform:rotate(-45deg);
}
.why-art{
  background:var(--white); border:1px solid var(--rule);
  border-radius:var(--r-lg); padding:26px; box-shadow:var(--sh-1);
}
.why-art-inner{ width:100%; }
.why-art svg{ width:100%; height:auto; }
.why-art.is-photo{
  background:transparent; border:0; box-shadow:none; padding:0;
}
.why-art.is-photo picture{ display:block; }
.why-art.is-photo img{ width:100%; height:auto; }

/* =============== BAYİLİK =============== */
.dealer{
  padding:88px 0; background:var(--navy); color:var(--white);
}
.dealer h2,.dealer h3,.dealer h4{ color:var(--white); }
.dealer p{ color:rgba(255,255,255,.72); }
.dealer .lede{ color:rgba(255,255,255,.75); }
.dealer-grid{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.dealer-perks{
  list-style:none; padding:0; margin:28px 0 30px;
  display:grid; grid-template-columns:1fr 1fr; gap:14px;
}
.dealer-perks > li{
  display:block;
  padding:20px 18px;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.1);
  border-radius:var(--r-md);
}
.dealer-perks > li > div{ display:block; }
.dealer-perks strong{
  display:block; margin-bottom:5px;
  font-family:var(--display); font-size:15px; font-weight:600;
  color:var(--white); letter-spacing:-.012em;
}
.dealer-perks > li > div > span{
  display:block; font-size:13.5px; line-height:1.55;
  color:rgba(255,255,255,.68);
}
.dealer-perks-icon{
  width:32px; height:32px; margin-bottom:13px;
  display:grid; place-items:center;
  background:rgba(109,155,217,.16); color:var(--blue-lt);
  border-radius:var(--r-sm);
}
.dealer-perks-icon svg{ width:17px; height:17px; }
.dealer .btn-primary{ background:var(--blue); color:var(--white); }
.dealer .btn-primary:hover{ background:var(--blue-lt); color:var(--navy); }
/* --- Türkiye bayi ağı haritası ---
   Sınırlar Natural Earth (kamu malı) verisinden türetildi, şehirler
   gerçek koordinatlarına Mercator izdüşümüyle yerleştirildi. */
.tr-map{ position:relative; width:100%; max-width:none; margin:0; }
.tr-map-svg{ width:100%; height:auto; overflow:visible; }

.tr-map-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:18px; margin-bottom:14px;
}
.tr-live{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:10.5px; font-weight:500;
  letter-spacing:.11em; text-transform:uppercase;
  color:rgba(255,255,255,.72);
  padding:6px 12px; border-radius:999px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);
}
.tr-live::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:#5FD08A; box-shadow:0 0 0 0 rgba(95,208,138,.6);
  animation:tr-beat 2.4s ease-out infinite;
}
@keyframes tr-beat{
  0%{ box-shadow:0 0 0 0 rgba(95,208,138,.55); }
  70%{ box-shadow:0 0 0 7px rgba(95,208,138,0); }
  100%{ box-shadow:0 0 0 0 rgba(95,208,138,0); }
}
.tr-stats{ display:flex; gap:26px; }
.tr-stats dt{
  font-family:var(--mono); font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; color:rgba(255,255,255,.5); margin-bottom:2px;
}
.tr-stats dd{
  margin:0; font-family:var(--display); font-size:22px; font-weight:700;
  color:var(--white); letter-spacing:-.03em; line-height:1;
}
.tr-stats dd span{ color:var(--blue-lt); }

/* Ülke gövdesi ve sınır */
.tr-outline{ stroke:rgba(140,180,235,.55); stroke-width:1.1; stroke-linejoin:round; }
.tr-grid line{ stroke:rgba(255,255,255,.055); stroke-width:1; }

/* Rota yayları: kesikli iz akar */
.tr-route{
  stroke:rgba(140,180,235,.5); stroke-width:1.1;
  stroke-dasharray:3 7;
  animation:tr-flow 4s linear infinite;
}
.tr-route-1{ animation-delay:.5s; }
.tr-route-2{ animation-delay:1s; }
.tr-route-3{ animation-delay:1.5s; }
.tr-route-4{ animation-delay:2s; }
.tr-route-5{ animation-delay:2.5s; }
@keyframes tr-flow{ to{ stroke-dashoffset:-40; } }

/* Rota üzerinde ilerleyen talep paketleri */
.tr-packet{ fill:#8FBBF0; }

/* Şehirler */
.tr-dot{ fill:var(--blue-lt); }
.tr-city.is-hq .tr-dot{ fill:var(--white); }
.tr-ping{
  fill:none; stroke:var(--blue-lt); stroke-width:1.2;
  transform-origin:center; transform-box:fill-box;
  opacity:0;
  animation:tr-ping 3.4s ease-out infinite;
}
.tr-ping-1{ animation-delay:1.1s; }
.tr-ping-2{ animation-delay:2.2s; }
.tr-city.is-hq .tr-ping{ stroke:var(--white); animation-duration:2.6s; }
@keyframes tr-ping{
  0%{ opacity:.65; transform:scale(1); }
  70%,100%{ opacity:0; transform:scale(3); }
}

.tr-label{
  font-family:var(--mono); font-size:9.5px; font-weight:500;
  letter-spacing:.05em; fill:rgba(255,255,255,.72);
  paint-order:stroke; stroke:rgba(20,36,64,.75); stroke-width:2.5px;
}
.tr-label.is-hq{ font-size:11px; font-weight:600; fill:var(--white); }

@media (max-width:560px){
  .tr-map-head{ flex-direction:column; align-items:flex-start; gap:12px; }
  .tr-label{ font-size:15px; stroke-width:3.5px; }
  .tr-label.is-hq{ font-size:17px; }
  .tr-city:not(.is-hq):not(.is-hub) .tr-label{ display:none; }
  .tr-dot{ r:4.5; }
  .tr-city.is-hq .tr-dot{ r:6.5; }
}

/* =============== KAPANIŞ CTA =============== */
.cta-banner{
  padding:78px 0; text-align:center;
  background:var(--blue-dp); color:var(--white);
  position:relative; overflow:hidden;
}
.cta-banner::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:6px;
  background-image:linear-gradient(90deg, rgba(255,255,255,.16) 1px, transparent 1px);
  background-size:28px 6px;
}
.cta-banner h2{ color:var(--white); margin-bottom:14px; }
.cta-banner h2 em{ color:var(--blue-lt); }
.cta-banner p{ color:rgba(255,255,255,.75); max-width:56ch; margin:0 auto 28px; }
.cta-banner .eyebrow{ display:inline-block; text-align:left; }
.cta-banner .btn-primary{ background:var(--white); color:var(--blue-dp); }
.cta-banner .btn-primary:hover{ background:var(--blue-wash); color:var(--blue-dp); }

/* =============== FOOTER =============== */
footer{
  background:var(--navy); color:rgba(255,255,255,.66);
  padding:64px 0 26px; font-size:14px;
}
.footer-grid{
  display:grid; grid-template-columns:1.7fr 1fr 1fr 1.3fr; gap:44px;
  padding-bottom:38px; border-bottom:1px solid rgba(255,255,255,.1);
}
.footer-brand img{ height:34px; width:auto; }
.footer-brand p{ margin-top:16px; color:rgba(255,255,255,.6); font-size:14px; max-width:34ch; }
.footer-social{ display:flex; gap:9px; margin-top:18px; }
.footer-social a{
  width:34px; height:34px; display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.14); border-radius:var(--r-sm);
  color:rgba(255,255,255,.72); transition:.15s;
}
.footer-social a:hover{ background:var(--blue); border-color:var(--blue); color:var(--white); }
.footer-col h4{
  color:var(--white); margin-bottom:15px;
  font-family:var(--mono); font-size:11px; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase;
}
.footer-col ul{ list-style:none; padding:0; margin:0; }
.footer-col li{ margin-bottom:9px; }
.footer-col a{ color:rgba(255,255,255,.66); transition:color .15s; }
.footer-col a:hover{ color:var(--blue-lt); }
.footer-col p{ color:rgba(255,255,255,.6); font-size:13.5px; line-height:1.6; }
.footer-bottom{
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding-top:22px; font-size:12.5px; color:rgba(255,255,255,.44);
  flex-wrap:wrap;
}
.footer-bottom a{ color:rgba(255,255,255,.56); }
.footer-bottom a:hover{ color:var(--blue-lt); }

/* Panel giriş şeridi */
.footer-panels{
  margin-top:20px; padding:14px 18px;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.09);
  border-radius:var(--r-md);
  display:flex; align-items:center; justify-content:center;
  gap:12px; flex-wrap:wrap;
}
.footer-panels .pl{
  font-family:var(--mono); font-size:10.5px; font-weight:500;
  letter-spacing:.11em; text-transform:uppercase; color:rgba(255,255,255,.42);
}
.footer-panels a{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 15px; font-size:13px; font-weight:600;
  background:rgba(255,255,255,.05); color:rgba(255,255,255,.9);
  border:1px solid rgba(255,255,255,.12); border-radius:var(--r-sm);
  transition:.15s;
}
.footer-panels a:hover{
  background:var(--blue); border-color:var(--blue); color:var(--white);
}

/* =============== HAREKET =============== */
.reveal{ opacity:0; transform:translateY(9px); transition:opacity .45s ease, transform .45s ease; }
.reveal.is-in{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  .reveal{ opacity:1; transform:none; }
  .process-line-fill{ transform:scaleX(1) !important; }
  .proc-node{ border-color:var(--blue) !important; background:var(--blue) !important; color:var(--white) !important; }
  .proc-icon{ opacity:0 !important; }
  .proc-no{ opacity:1 !important; transform:none !important; }
  .proc-node::after{ animation:none !important; }
  .tr-route,.tr-ping,.tr-live::before,.tr-packet{ animation:none !important; }
  .proc-icon *{ animation:none !important; stroke-dashoffset:0 !important; }
  .tr-packet{ opacity:0; }
  .proc-when,.proc h3,.proc p{ opacity:1 !important; transform:none !important; }
}

/* =============== RESPONSIVE =============== */
@media (max-width:1080px){
  .pkgs{ grid-template-columns:repeat(2,1fr); }
  .stats-grid{ grid-template-columns:repeat(2,1fr); }
  .stat:nth-child(2){ border-right:0; }
  .stat:nth-child(1),.stat:nth-child(2){ border-bottom:1px solid var(--rule); }
  .process-grid{ grid-template-columns:repeat(2,1fr); gap:34px 26px; }
  .process-line{ display:none; }
  .dealer-perks{ grid-template-columns:1fr; }
}

@media (max-width:900px){
  :root{ --pad:20px; }
  .hero{ padding:48px 0 56px; }
  .hero-grid,.feature-img-grid,.why-row,.dealer-grid{ grid-template-columns:1fr; gap:38px; }
  .why-row:nth-of-type(even) .why-art{ order:0; }
  .footer-grid{ grid-template-columns:1fr 1fr; gap:34px; }
  .section,.services,.process,.why,.dealer,.feature-img{ padding:60px 0; }
  .stats{ padding-bottom:60px; }

  .topbar .left{ display:none; }
  .topbar-inner{ justify-content:center; }

  .hamburger{ display:block; }
  .menu{
    position:fixed; inset:0 0 0 auto; width:min(84vw,320px);
    flex-direction:column; align-items:stretch; gap:4px;
    padding:88px 20px 28px;
    background:var(--white); border-left:1px solid var(--rule);
    box-shadow:-8px 0 32px rgba(20,36,64,.14);
    transform:translateX(100%); transition:transform .26s ease, visibility .26s;
    overflow-y:auto; z-index:80;
    visibility:hidden;
  }
  .menu.is-open{ transform:none; visibility:visible; }
  .menu > a{ padding:13px 14px; font-size:16px; }
  .menu > a.is-active::after{ display:none; }
  .menu > a.cta{ margin:12px 0 0; justify-content:center; text-align:center; }
}

@media (max-width:560px){
  .pkgs{ grid-template-columns:1fr; }

  /* Süreç dikey akışa döner: hat sol kenarda, düğümler üzerine oturur */
  .process-grid{ grid-template-columns:1fr; gap:0; padding-left:66px; }
  .process-line{
    display:block; top:24px; bottom:34px; left:23px; right:auto; width:2px; height:auto;
    background-image:linear-gradient(180deg, var(--rule) 5px, transparent 5px);
    background-size:2px 10px;
  }
  .process-line-fill{
    background:linear-gradient(180deg, var(--blue), var(--blue-lt));
    transform:scaleY(0); transform-origin:top center;
    transition:transform 1.9s cubic-bezier(.22,.61,.36,1);
  }
  .process-grid.is-running .process-line-fill{ transform:scaleY(1); }
  .proc{ padding-bottom:30px; }
  .proc:last-child{ padding-bottom:0; }
  .proc-node{ position:absolute; left:-66px; top:0; margin-bottom:0; }
  .stats-grid{ grid-template-columns:1fr; }
  .stat{ border-right:0; border-bottom:1px solid var(--rule); }
  .stat:last-child{ border-bottom:0; }
  .footer-grid{ grid-template-columns:1fr; }
  /* Dar ekranda kapsam şeridi ızgaraya döner, sarkan kenarlık kalmaz */
  .hero-facts{ display:grid; grid-template-columns:1fr 1fr; gap:16px 14px; }
  .hero-facts > div{
    padding:0 0 0 12px; margin:0;
    border-right:0; border-left:2px solid var(--blue-wash-2);
  }
  .hero-facts > div:last-child{ padding-left:12px; }
  .hero-facts dd{ font-size:17px; }


  .readout-table .rr-scale{ display:none; }
  .readout-table thead th,
  .readout-table td,
  .readout-table tbody th{ padding-left:14px; padding-right:14px; }
  .readout-table tbody th{ padding-left:26px; font-size:13.5px; }
  .readout-table tbody th::before{ left:14px; }
  .rr-val{ width:66px; font-size:13px; }
  .rr-state{ width:78px; font-size:12.5px; }
  .readout-top,.readout-vehicle,.readout-note,.readout-foot{ padding-left:14px; padding-right:14px; }
  .readout-vehicle{ flex-wrap:wrap; gap:12px; }
  .readout-note{ flex-direction:column; align-items:flex-start; gap:5px; }
  .readout-foot{ flex-direction:column; align-items:flex-start; gap:10px; }
  .rd-verify b{ font-size:12.5px; }
  .btn{ width:100%; justify-content:center; }
  .hero-cta{ flex-direction:column; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; gap:10px; }
}

/* Alt bölüm başlığı: why-row içindeki ikincil h2 */
.h-sub{ font-size:clamp(22px,2.2vw,29px); margin-top:6px; }

/* =============== RAPOR SORGULAMA ÇAĞRISI (ana sayfa) =============== */
.rapor-cta{ padding:76px 0; background:var(--surface); }
.rc-box{
  display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  gap:44px; align-items:center;
  padding:38px 40px;
  background:var(--white); border:1px solid var(--rule);
  border-radius:var(--r-lg); box-shadow:var(--sh-2);
}
.rc-metin h2{ margin:6px 0 12px; font-size:clamp(24px,2.6vw,32px); }
.rc-metin p{ margin:0 0 22px; max-width:52ch; }
.rc-form{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
.rc-form .input{
  flex:1 1 220px;
  font-family:var(--mono); font-size:17px; font-weight:600;
  letter-spacing:.08em; text-align:center;
}
.rc-alt{ font-size:13.5px; font-weight:600; color:var(--blue); }

.rc-gorsel{ display:flex; justify-content:center; }
.rc-kart{
  width:100%; max-width:250px; padding:20px;
  background:var(--navy); border-radius:var(--r-lg);
  text-align:center; color:var(--white);
}
.rc-kart-lab{
  display:block; font-family:var(--mono); font-size:9.5px;
  letter-spacing:.13em; text-transform:uppercase;
  color:rgba(255,255,255,.55); margin-bottom:6px;
}
.rc-kart-kod{
  font-family:var(--mono); font-size:17px; font-weight:600;
  letter-spacing:.09em; margin-bottom:16px;
}
.rc-kart-qr{
  background:var(--white); border-radius:8px; padding:8px;
  display:inline-block; line-height:0;
}
.rc-kart-qr svg{ width:118px; height:118px; display:block; }
.rc-kart-alt{
  display:block; margin-top:12px;
  font-size:10.5px; color:rgba(255,255,255,.55); word-break:break-all;
}

@media (max-width:860px){
  .rc-box{ grid-template-columns:1fr; gap:30px; padding:28px 22px; }
  .rc-gorsel{ order:-1; }
}