/* ============================================================================
   DENİZLİ ŞEHİR HASTANESİ TAKSİ — TANITIM SİTESİ
   ============================================================================

   Masaüstü mockup'ının (Desktop/taksi site tasarımı/masaüstü tasarımı.png)
   birebir uygulaması; animasyonlar aynı klasördeki not defterinden.

   NEDEN ANİMASYON KÜTÜPHANESİ YOK
   -------------------------------
   GSAP/AOS/Framer eklenmedi. Buradaki hareketlerin tamamı CSS + birkaç yüz
   satır JS. Tanıtım sitesinin en önemli ölçüsü arama sıralamasıdır; 150 KB'lık
   bir kütüphane Core Web Vitals'ı düşürür ve bu sayfada karşılığı yoktur.

   YAZI TİPİ YERELDEN
   ------------------
   Plus Jakarta Sans (değişken ağırlık) public/yazitipi/ altında duruyor.
   Google Fonts'a bağlanılmıyor: dış istek yok, CSP dar kalıyor, ziyaretçinin
   IP'si üçüncü tarafa gitmiyor, ilk boyama daha hızlı.

   HAREKET AZALTMA
   ---------------
   Dosyanın sonunda prefers-reduced-motion bloğu var. Baş dönmesi/migren olan
   ziyaretçi için süslemeler durur, içerik aynen okunur. Tercih değil, şart.
   ========================================================================= */

/* ------------------------------------------------------------- yazı tipi */
@font-face{
  font-family:"Jakarta";
  font-style:normal;
  font-weight:200 800;
  font-display:swap;
  src:url("/yazitipi/pjs-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
    U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,
    U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Jakarta";
  font-style:normal;
  font-weight:200 800;
  font-display:swap;
  src:url("/yazitipi/pjs-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,
    U+FEFF,U+FFFD;
}

/* --------------------------------------------------------------- belirteç */
/* Tüm değerler mockup'tan PİKSEL ÖLÇÜLEREK alındı; hiçbiri tahmin değil.
   Sarı TEK tondur (#FABE00); parlak görünen her yer aynı sarının üzerine
   binmiş ışımadır (box-shadow / drop-shadow). İkinci bir sarı tanımlanmadı. */
:root{
  --siyah:#01050A;          /* sayfa zemini — saf siyah DEĞİL, maviye çalar */
  --gece:#010913;           /* hero ortasındaki sönük mavi parlama */
  --kart:#050A0F;           /* kart / panel dolgusu */
  --kart-ust:rgba(250,190,0,.07); /* kartın üstündeki sıcak sızıntı */
  --cam:#03070B;            /* cam kutular: rozet, çip, rota kutuları */
  --cizgi:#13161B;          /* hairline — nav altı, kart kenarı */
  --cizgi2:#262A30;         /* daha açık kenarlık — WhatsApp kutusu, ok tuşu */
  --sari:#FABE00;
  --sari-isik:#FFD902;      /* yalnız ışıma/çekirdek için */
  --yesil:#2BE05F;          /* canlı noktalar */
  --yesil-yazi:#34D96B;
  --kirmizi:#F73F32;        /* varış pini */
  --wa:#2DDE5D;
  --yazi:#FFFFFF;
  --acik-gri:#CCCFD3;       /* hero paragrafı */
  --gri:#A9ADB1;            /* kart açıklaması, etiketler */
  --sonuk:#74787C;          /* en sönük metin */
  --kart-no:#1A1D22;        /* kartların dev soluk numarası */
  --sans:"Jakarta","Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  --ust-boy:104px;          /* ölçüldü: nav y 0-103 + 1px hairline */
  /* Mockup'ta içerik viewport'un %94'ünü kaplıyor (1440/1536). Sabit 1440px
     vermek geniş ekranda kabı ortalayıp yan boşlukları büyütüyor; hero
     fotoğrafı da kaba bağlı olduğu için araç sola kayıyordu. Oran korunur,
     çok geniş ekranda 1720'de durur. */
  --sarmal:min(1720px,96vw);
  --yan:clamp(16px,3.2vw,48px);
  --yuvarlak:16px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:120px;overflow-x:hidden}
body{
  background:var(--siyah);color:var(--yazi);font-family:var(--sans);
  font-size:15px;line-height:1.58;overflow-x:hidden;
  /* Mockup'ta hero'nun dikey ortasında (y 300-440) çok geniş ve sönük bir
     mavi parlama var; üstte ve altta zemine dönüyor. Ölçülen ton #010913. */
  background-image:
    radial-gradient(1200px 640px at 62% 30%,rgba(12,30,58,.55),transparent 66%),
    radial-gradient(1000px 560px at 84% -6%,rgba(250,190,0,.07),transparent 62%);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
svg{display:block}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input{font:inherit;color:inherit}
h1,h2,h3{line-height:1.07;letter-spacing:-.025em;font-weight:800}
::selection{background:var(--sari);color:#0A0D13}

/* Klavye kullanan ziyaretçi nerede olduğunu görmeli. */
:focus-visible{outline:2px solid var(--sari);outline-offset:3px;border-radius:6px}

/* Ekran okuyucu için ilk bağlantı; görünmez ama odaklanınca belirir. */
.atla{
  position:absolute;left:-9999px;top:12px;z-index:200;padding:10px 18px;
  background:var(--sari);color:#0A0D13;border-radius:9px;font-weight:700;
}
.atla:focus{left:14px}

.sarmal{max-width:var(--sarmal);margin:0 auto;width:100%;padding:0 var(--yan)}
.sarmal.dar{max-width:980px}

/* Türkçe büyük harf: CSS text-transform 'i' harfini yanlış büyütür (İ yerine
   I). Bu yüzden büyük harfli metinler HTML'de doğrudan büyük yazıldı; burada
   yalnız harf aralığı veriliyor. */
.ustyazi,.menu a,.btn,.rozet-724,.canli-ust h2,.canli-etiket{letter-spacing:.045em}

/* ---------------------------------------------------------------- arka plan
   "Arka planda çok hafif parallax şehir + grid + ışık parçacıkları"
   "Arka planda çok hafif yağmurlu/gece şehir parallax"                     */
.fon{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.fon-izgara{
  position:absolute;inset:-12%;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:64px 64px;
  /* Izgara ufka doğru soluyor; düz tekrar eden desen "şablon" hissi verir. */
  -webkit-mask-image:radial-gradient(120% 85% at 50% 10%,#000 18%,transparent 76%);
  mask-image:radial-gradient(120% 85% at 50% 10%,#000 18%,transparent 76%);
  animation:izgaraKay 64s linear infinite;
}
@keyframes izgaraKay{to{background-position:64px 64px}}
.fon-parcacik{
  position:absolute;inset:0;
  background:
    radial-gradient(2px 2px at 12% 32%,rgba(245,178,42,.55),transparent),
    radial-gradient(2px 2px at 68% 18%,rgba(245,178,42,.40),transparent),
    radial-gradient(1.5px 1.5px at 82% 62%,rgba(255,255,255,.28),transparent),
    radial-gradient(2px 2px at 34% 78%,rgba(245,178,42,.30),transparent),
    radial-gradient(1.5px 1.5px at 52% 46%,rgba(255,255,255,.20),transparent),
    radial-gradient(2px 2px at 24% 58%,rgba(245,178,42,.22),transparent);
  animation:parcacik 16s ease-in-out infinite alternate;
}
@keyframes parcacik{
  from{transform:translate3d(0,0,0);opacity:.65}
  to{transform:translate3d(-20px,-28px,0);opacity:1}
}
.fon-yagmur{position:absolute;inset:0;width:100%;height:100%;opacity:.28}
.fon-perde{
  position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 55%,rgba(5,7,11,.55) 100%);
}

/* ---------------------------------------------------------------- üst çubuk */
.ust{
  position:sticky;top:0;z-index:60;height:var(--ust-boy);
  display:flex;align-items:center;gap:clamp(10px,1.4vw,22px);
  padding:0 var(--yan);
  background:rgba(3,6,10,.82);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--cizgi);transition:background .3s;
}
.ust.kayik{background:rgba(3,6,10,.97)}

.marka{display:flex;align-items:center;gap:11px;flex:0 0 auto}
.marka-ikon{display:block;flex:0 0 auto}
/* Logo satır aralığı ÖLÇÜLDÜ: cap 20px, satır aralığı 21px → line-height
   0,85. Varsayılan 1,2 ile logo tamamen başka bir şey gibi duruyor. */
.marka-yazi{font-size:clamp(13px,1.15vw,18px);line-height:.88;font-weight:800;
  letter-spacing:.005em;white-space:nowrap}
.marka-yazi b{color:var(--sari)}

.menu{display:flex;gap:clamp(7px,1.35vw,20px);margin-left:clamp(8px,1.8vw,28px);
  flex:1 1 auto;min-width:0}
.menu a{
  position:relative;padding:10px 2px;font-size:clamp(11.5px,.88vw,13.5px);font-weight:600;
  color:rgba(255,255,255,.8);transition:color .2s;white-space:nowrap;
}
.menu a:hover{color:var(--yazi)}
.menu a.on{color:var(--sari)}
/* ETKİN MENÜ GÖSTERGESİ — mockup'ta düz bir çizgi DEĞİL: ANA SAYFA'nın
   altında 42×10px küçük bir sekme ve ortasında yukarı bakan minik üçgen
   çıkıntı var; yukarı doğru geniş sarı bir ışıma yayıyor ve nav'ın alt
   kenarında kesiliyor. Işımayı üçgen (::before) taşıyor. */
.menu a::after{
  content:"";position:absolute;left:50%;right:50%;bottom:calc(-1 * (var(--ust-boy) / 2 - 22px));
  height:4px;background:var(--sari);border-radius:3px 3px 0 0;
  transition:left .28s,right .28s,box-shadow .3s;box-shadow:0 0 0 rgba(250,190,0,0);
}
.menu a::before{
  content:"";position:absolute;left:50%;bottom:calc(-1 * (var(--ust-boy) / 2 - 26px));
  width:0;height:0;transform:translateX(-50%);
  border-left:5px solid transparent;border-right:5px solid transparent;
  border-bottom:5px solid var(--sari);opacity:0;transition:opacity .28s;
}
.menu a.on::after,.menu a:hover::after{left:0;right:0;
  box-shadow:0 -6px 22px rgba(250,190,0,.55)}
.menu a.on::before{opacity:1}

.ust-sag{display:flex;align-items:center;gap:clamp(8px,1.1vw,16px);flex:0 0 auto}
/* Ölçüldü: 40px yüksekliğinde hap, dolgu neredeyse şeffaf, kenarlık sönük. */
.rozet-724{
  display:inline-flex;align-items:center;gap:9px;height:40px;padding:0 16px;
  border-radius:20px;background:var(--cam);border:1px solid rgba(255,255,255,.07);
  font-size:clamp(11px,.88vw,13px);color:rgba(255,255,255,.72);white-space:nowrap;
}
.rozet-724 b{color:var(--yesil-yazi);font-weight:700}

/* SVG nokta: ÖZNİTELİK boyutlu. Bu projede sınıfla boyutlanan küçük kutuların
   bir tarayıcı durumunda 76×144 piksele şiştiği ölçüldü; öznitelik boyutunu
   hiçbir stil büyütemez. Küçük renkli nokta gerektiğinde hep böyle. */
.nokta-svg{flex:0 0 auto}
/* Canlı nokta: GPS işareti gibi yanıp söner (not defteri). */
.nokta-svg.canli{animation:nabiz 2.2s ease-out infinite;border-radius:50%}
@keyframes nabiz{
  0%{box-shadow:0 0 0 0 rgba(49,208,123,.5)}
  70%{box-shadow:0 0 0 9px rgba(49,208,123,0)}
  100%{box-shadow:0 0 0 0 rgba(49,208,123,0)}
}

.ust-tel{display:flex;align-items:center;gap:11px;font-size:clamp(13px,1.05vw,16px);
  font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
.ust-tel:hover{color:var(--sari)}
.halka{
  width:38px;height:38px;border-radius:50%;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(250,190,0,.18);background:#0C0F13;color:var(--sari);
}

.menu-dugme{display:none;width:42px;height:42px;place-items:center;border-radius:11px;
  border:1px solid var(--cizgi2);color:var(--yazi)}
.mobil-tel{
  display:none;width:42px;height:42px;border-radius:50%;
  align-items:center;justify-content:center;flex:0 0 auto;
  border:1px solid rgba(250,190,0,.35);background:rgba(250,190,0,.08);color:var(--sari);
  box-shadow:0 0 16px rgba(250,190,0,.22);
}

.mobil-menu{
  position:fixed;top:var(--ust-boy);left:0;right:0;z-index:59;
  background:rgba(8,11,17,.98);backdrop-filter:blur(16px);
  border-bottom:1px solid var(--cizgi);padding:14px clamp(16px,4vw,28px) 20px;
  display:grid;gap:12px;
}
.mobil-menu nav{display:grid;gap:2px}
.mobil-menu nav a{padding:12px 4px;font-size:15px;font-weight:600;
  border-bottom:1px solid rgba(255,255,255,.05)}
.mobil-menu[hidden]{display:none}

/* ----------------------------------------------------------------- düğme */
/* Mockup'ta üç yükseklik var (nav 46 · hero 57/55 · rota 35). İkisi 2px
   farkla çizilmiş; kodda tek ölçü kullanıldı: büyük 56, normal 46, küçük 35. */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  height:46px;padding:0 20px;border-radius:12px;font-size:clamp(12px,.92vw,14px);
  font-weight:700;border:1px solid transparent;cursor:pointer;white-space:nowrap;
  transition:transform .18s cubic-bezier(.22,1,.36,1),box-shadow .25s,background .2s,border-color .2s;
}
.btn:hover{transform:translateY(-2px)}
.btn.buyuk{height:56px;padding:0 26px;border-radius:12px}
.btn.kucuk{height:35px;padding:0 15px;font-size:13px;border-radius:10px}
.btn.tam{width:100%}
.btn.birincil{
  /* Ölçülen dolgu tek renge çok yakın; yalnız alt %20'de bir tık koyulaşıyor. */
  background:linear-gradient(180deg,#FBC001,#F7B901);
  color:#0A0D13;box-shadow:0 6px 26px rgba(250,190,0,.34);
}
.btn.birincil:hover{box-shadow:0 10px 34px rgba(250,190,0,.5)}
.btn.cerceve{
  background:#02080D;border-color:var(--cizgi2);color:var(--yazi);
}
.btn.cerceve:hover{border-color:rgba(250,190,0,.4);background:rgba(250,190,0,.06);color:var(--sari)}
.btn .ok{display:flex;transition:transform .22s}
.btn:hover .ok{transform:translateX(3px)}

/* "Hemen Taksi Çağır" düğmesinde hafif pulse/glow (not defteri).
   Sürekli atmıyor: 5 saniyede bir tek nabız — göze batmadan hatırlatır. */
.atim{animation:atim 5s ease-out infinite}
@keyframes atim{
  0%,88%,100%{box-shadow:0 6px 26px rgba(250,190,0,.34)}
  90%{box-shadow:0 6px 26px rgba(250,190,0,.34),0 0 0 0 rgba(250,190,0,.4)}
  97%{box-shadow:0 6px 26px rgba(250,190,0,.34),0 0 0 14px rgba(250,190,0,0)}
}

/* -------------------------------------------------------------- kahraman */
/* Mockup'ta kahraman TAM EKRAN DEĞİL: 1536×1024'te bölüm ~584 px ve hemen
   altında kartlar görünüyor. min-height:100vh vermek kartları katlanmanın
   altına itiyordu — bölümün boyunu içeriği belirlesin. */
.kahraman{
  position:relative;z-index:1;
  display:flex;align-items:center;
  padding:clamp(26px,3.6vh,48px) 0 clamp(18px,2.6vh,34px);
  overflow:hidden;
}
/* Fotoğraf katmanı, içerik kabıyla AYNI hizada durur (aynı max-width, aynı
   yan boşluk). Böylece fotoğrafın sağ kenarı ile rota sütununun sol kenarı
   ekran ne kadar geniş olursa olsun yan yana gelir; rota araca binmez —
   mockup'ta da fotoğraf 1300'de bitiyor, rota 1310'da başlıyor. */
.kahraman-fon{
  position:absolute;top:0;bottom:0;left:0;right:0;z-index:0;pointer-events:none;
  max-width:var(--sarmal);margin:0 auto;padding:0 var(--yan);
}

/* Fotoğraf ve zemin halkaları AYNI oranlı kutuda (780/580): halkalar
   fotoğraf koordinatına yüzdeyle oturur, her ekranda hizalı kalır. */
/* Fotoğrafın kutusu mockup'tan ÖLÇÜLDÜ: 1536×1024 tasarımda görsel
   x 520-1300, y 80-660 aralığında duruyor (780×580 kaynak oranı). Buradaki
   yüzdeler o yerleşimi verir; halkalar da aynı kutuda olduğu için her ekran
   boyunda araçla hizalı kalır. */
.sahne{
  position:absolute;top:50%;
  /* sağ kenar = yan boşluk + rota sütunu genişliği → tam rotanın soluna oturur */
  right:calc(clamp(158px,11.6vw,186px) + 10px);
  height:97%;aspect-ratio:780/580;
  transform:translateY(-50%);
  animation:salin 9s ease-in-out infinite;
  will-change:transform;
}
/* "Araç: sağa-sola çok hafif 3D hareket" — 5 piksellik salınım.
   Fare parallax'ı JS'ten --pyatay/--pdikey ile bunun üstüne biner. */
@keyframes salin{
  0%,100%{transform:translateY(calc(-50% + var(--pdikey,0px))) translateX(calc(-5px + var(--pyatay,0px)))}
  50%{transform:translateY(calc(-50% - 5px + var(--pdikey,0px))) translateX(calc(5px + var(--pyatay,0px)))}
}
/* FOTOĞRAFTA CSS MASKESİ YOK — BİLEREK.
   Kenarların zemine erimesi PNG'nin alfa kanalına gömülü (arac/kes.js).

   DÜZELTME NOTU: bir ara "araç bazen hiç görünmüyor" diye teşhis koyup
   suçu maskeye atmıştım; YANLIŞTI. Aracın kaybolduğu yalnızca EKRAN
   GÖRÜNTÜSÜNDE oluyordu — katman sürekli hareket ettiği için yakalama anında
   bazen boyanmamış çıkıyor. Sayfada böyle bir sorun hiç olmadı.
   Yine de alfa kanalına gömmek doğru tercih: tek elemanda iki maske
   katmanını mask-composite ile kesiştirmek kırılgan bir yoldur, tarayıcıya
   her karede fazladan iş bırakır ve burada hiçbir karşılığı yok. */
.sahne-kutu{position:absolute;inset:0;display:block}
.sahne-foto{position:absolute;inset:0;width:100%;height:100%;max-width:none}

/* FAR PARLAMASI — farların üstüne oturan iki ışık noktası; ara ara parlar.
   Konumlar fotoğraftan ölçüldü; kutu sabit oranlı olduğu için yüzde şaşmaz. */
.far{
  position:absolute;width:9%;aspect-ratio:2.6;border-radius:50%;
  pointer-events:none;mix-blend-mode:screen;opacity:0;
  background:radial-gradient(closest-side,rgba(210,235,255,.95),rgba(140,190,255,.35) 55%,transparent);
  filter:blur(2px);
}
.far.sol{left:20.5%;top:64.5%;animation:farYan 5s ease-in-out infinite}
.far.sag{left:51%;top:65.5%;animation:farYan 5s ease-in-out infinite .12s}
@keyframes farYan{
  0%,72%,100%{opacity:0}
  78%{opacity:.9}
  84%{opacity:.35}
  90%{opacity:.75}
}

/* CANLI KONUM rozeti — fotoğrafın üstünde duran cam kutu (mockup öğesi).
   Masaüstünde aracın solunda; mobilde sağ altta (aşağıdaki mobil blok). */
.canli-konum{
  /* Mockup: masaüstünde başlık ile araç arasındaki boşlukta (x %36-47). */
  position:absolute;left:6%;top:34%;z-index:3;
  display:flex;align-items:center;gap:9px;padding:11px 15px;border-radius:13px;
  background:rgba(3,7,11,.78);border:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(8px);box-shadow:0 10px 28px rgba(0,0,0,.45);
}
.canli-konum span{display:flex;flex-direction:column;gap:2px}
.canli-konum b{font-size:11.5px;font-weight:700;color:var(--yesil-yazi);
  letter-spacing:.05em;white-space:nowrap}
.canli-konum small{font-size:11px;font-weight:600;color:#fff;letter-spacing:.04em;
  white-space:nowrap}

/* ARACIN SİLUETİYLE MASKELEME
   zemin-maske.png, fotoğraftan çıkarılan aracın alt siluetidir (üstü siyah,
   altı beyaz). Halka katmanı bununla maskelenince halka aracın arkasına
   girip önünden çıkar; gövdesinden GEÇEMEZ. Tek katman — kesişim yok. */
.zemin{
  position:absolute;inset:0;width:100%;height:100%;pointer-events:none;
  mix-blend-mode:screen;
  -webkit-mask-image:url("/gorsel/zemin-maske.png");
  -webkit-mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;
  mask-image:url("/gorsel/zemin-maske.png");
  mask-size:100% 100%;
  mask-repeat:no-repeat;
}
.zemin .tel line{stroke:rgba(250,190,0,.10);stroke-width:1}
.zemin .ray{fill:none;stroke:rgba(250,190,0,.12);stroke-width:1.6}
.zemin .halka{fill:none;stroke-linecap:round;
  filter:drop-shadow(0 0 6px rgba(250,190,0,.65))}
/* Dikişsiz döngü: kaydırma miktarı, kesik deseninin periyodunun (14,6+21,8
   = 36,4) TAM KATI olmalı — yoksa her turda desen yerinden atlar. Elipsin
   çevresine en yakın katlar seçildi: dış 36×36,4 = 1310 (çevre ≈1306),
   iç 25×36,4 = 910 (çevre ≈923). */
.zemin .dis{stroke:#FABE00;stroke-width:2.6;stroke-dasharray:14.6 21.8;opacity:.95;
  animation:halkaDis 11s linear infinite}
.zemin .ic{stroke:#FFD902;stroke-width:1.8;stroke-dasharray:14.6 21.8;opacity:.6;
  animation:halkaIc 8s linear infinite}
@keyframes halkaDis{to{stroke-dashoffset:-1310}}
@keyframes halkaIc{to{stroke-dashoffset:910}}
.zemin .dugum circle{fill:#FFE9A8;filter:drop-shadow(0 0 5px rgba(250,190,0,.9))}
.radar-nokta{filter:drop-shadow(0 0 8px rgba(255,233,168,.95))}

.kahraman-ic{
  position:relative;z-index:2;width:100%;max-width:var(--sarmal);margin:0 auto;
  padding:0 var(--yan);
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:center;
}
.kahraman-yazi{max-width:min(700px,100%)}

/* Ölçüldü: 14px/700, +1,2px aralık; metnin ARDINDAN 3px nokta ve 26px
   ince çizgi geliyor, ikisi de metinden sönük. */
.ustyazi{
  display:flex;align-items:center;gap:9px;margin-bottom:20px;
  font-size:clamp(12px,.95vw,14px);font-weight:700;color:var(--sari);
}
.ustyazi .nokta{width:3px;height:3px;border-radius:50%;background:var(--sari);
  opacity:.6;flex:0 0 auto}
.ustyazi .cizgi{width:26px;height:1px;background:var(--sari);opacity:.55;flex:0 0 auto}

/* Ölçüldü: 60px/800, satır aralığı 67px (1,12), hafif negatif harf aralığı. */
h1{font-size:clamp(34px,4.1vw,60px);line-height:1.12;letter-spacing:-.01em;
  margin-bottom:28px;text-shadow:0 4px 30px rgba(0,0,0,.55)}
h1 .satir{display:block}
h1 .sari{color:var(--sari)}
/* Ölçüldü: 18px/400, satır aralığı 28px, renk #CCCFD3 — kart gövdesinden
   belirgin daha açık. */
.acik{font-size:clamp(15px,1.18vw,18px);line-height:1.56;color:var(--acik-gri);
  max-width:44ch;margin-bottom:40px;text-shadow:0 2px 14px rgba(0,0,0,.6)}

.kahraman-dugme{display:flex;gap:22px;flex-wrap:wrap;margin-bottom:31px}

/* Çipler TEK kutu + ayraç DEĞİL — ölçümde dolgunun aralarda zemine döndüğü
   görüldü: 4 ayrı hap, aralarında yalnız 5-6px boşluk, yükseklik 46px. */
.cipler{display:flex;gap:6px;flex-wrap:wrap;list-style:none}
.cipler li{
  display:inline-flex;align-items:center;gap:9px;height:46px;padding:0 15px;
  border-radius:14px;background:#03080C;border:1px solid #212429;
  font-size:clamp(11.5px,.88vw,13.5px);font-weight:500;color:rgba(255,255,255,.9);
  white-space:nowrap;
}
.cipler li svg{color:var(--sari);flex:0 0 auto}

/* --------------------------------------------------------- rota sütunu */
.rota{
  position:relative;z-index:3;width:clamp(158px,11.6vw,186px);
  align-self:start;margin-top:clamp(4px,1.2vh,20px);
  display:grid;justify-items:stretch;
}
/* Ölçüldü: 60px yükseklik, radius 14, dolgu neredeyse zemin rengi. */
.rota-kutu{
  display:flex;align-items:center;gap:12px;min-height:60px;padding:0 16px;
  border-radius:14px;background:var(--cam);border:1px solid rgba(255,255,255,.07);
  backdrop-filter:blur(8px);box-shadow:0 12px 32px rgba(0,0,0,.45);
}
.rota-kutu span{display:flex;flex-direction:column;min-width:0}
.rota-kutu b{font-size:clamp(12px,.95vw,14px);font-weight:700}
.rota-kutu small{font-size:clamp(11px,.88vw,13px);color:var(--gri);margin-top:2px}
.rota-kutu.bas{justify-self:start;margin-left:6px}
.rota-kutu.son{justify-self:start;margin-left:14px;margin-top:-6px}
.bas-ikon{filter:drop-shadow(0 0 9px rgba(53,208,123,.6));flex:0 0 auto}
/* Varış pini nabız atar — mockup'taki "kırmızı parlayan konum" ayrıntısı. */
.son-ikon{flex:0 0 auto;animation:pinNabiz 2.4s ease-in-out infinite}
@keyframes pinNabiz{
  0%,100%{filter:drop-shadow(0 0 5px rgba(255,77,77,.5))}
  50%{filter:drop-shadow(0 0 14px rgba(255,77,77,.95))}
}

.rota-yol{width:100%;height:clamp(200px,26vh,262px);margin:-6px 0;overflow:visible}
/* Arka planda soluk sokaklar: rota bir haritanın ÜSTÜNDE duruyor hissi. */
.rota-yol .sokaklar path{stroke:#243044;stroke-width:1.1;fill:none;opacity:.6}
/* Yolun altındaki koyu taban, ince şeridi zeminden ayırır. */
.rota-yol .yol-alt{stroke:rgba(0,0,0,.5);stroke-width:4.8;fill:none;stroke-linecap:round}
.rota-yol .yol{stroke:url(#yolRenk);stroke-width:2.5;fill:none;stroke-linecap:round;
  filter:drop-shadow(0 0 5px rgba(245,178,42,.4))}
.rota-yol .mini-taksi{filter:drop-shadow(0 2px 5px rgba(0,0,0,.6))}
.rota-yol .kuyruk circle{filter:drop-shadow(0 0 4px rgba(245,178,42,.8))}

/* Ölçüldü: 163×165px kutu, iç boşluk 17px, dolgu #05090E, kenarlık #171B21. */
.rota-rozet{
  margin-top:19px;padding:17px;border-radius:var(--yuvarlak);
  background:#05090E;border:1px solid #171B21;box-shadow:0 16px 40px rgba(0,0,0,.5);
}
.rota-rozet small{display:block;font-size:clamp(10px,.82vw,12px);font-weight:600;
  color:#E8EAEC;letter-spacing:.085em;margin-bottom:9px}
.rota-rozet b{display:block;font-size:clamp(24px,2.1vw,30px);font-weight:800;color:var(--sari);
  line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.rota-rozet p{font-size:clamp(11px,.88vw,13px);color:var(--sonuk);margin:14px 0 15px;
  line-height:1.32}
.rota-rozet .btn{width:100%}

/* ---------------------------------------------------- kartlar + canlı panel */
.kartlar-bolum{position:relative;z-index:1;padding:clamp(20px,4vh,44px) 0}
.kartlar-duzen{display:grid;grid-template-columns:minmax(0,1.62fr) minmax(0,1fr);gap:clamp(14px,1.6vw,22px)}
.kartlar{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.2vw,18px)}

/* Kart dolgusu DÜZ RENK DEĞİL: üstte sıcak zeytin tonu (üstteki sarı
   çizginin sızması), y≈%35'ten sonra koyu zemin. Kartın sağ üst iç
   bölgesinde çok sönük bir "blueprint" ızgara dokusu var. */
.kart{
  position:relative;padding:20px 25px 30px;border-radius:var(--yuvarlak);
  background:
    linear-gradient(180deg,var(--kart-ust),transparent 35%),
    var(--kart);
  border:1px solid #12161B;overflow:hidden;
  transition:transform .3s cubic-bezier(.22,1,.36,1),border-color .3s,box-shadow .3s;
}
.kart::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:28px 28px;
  -webkit-mask-image:radial-gradient(70% 60% at 100% 0,#000,transparent 72%);
  mask-image:radial-gradient(70% 60% at 100% 0,#000,transparent 72%);
}
.kart:hover{transform:translateY(-5px);border-color:var(--cizgi);
  box-shadow:0 18px 44px rgba(0,0,0,.45)}
/* KART IŞIK VURGUSU — mockup'ta tam genişlikte bir çizgi DEĞİL:
   üstte kartın sol ~%37'sinden başlayıp sağ köşede en parlak hâle gelen bir
   çizgi, sonra sağ kenardan 20-25px aşağı devam edip sönüyor. Yani sağ üst
   köşede bir "L". Üst kol ::before, dik kol ::after ile çizildi.
   "Sürekli hafif hareket" isteği: ışık kolun üzerinde yavaşça geziniyor. */
.kart-cizgi{position:absolute;top:0;right:0;left:0;height:26px;pointer-events:none}
.kart-cizgi::before{
  content:"";position:absolute;top:0;left:37%;right:0;height:2px;
  background:linear-gradient(90deg,transparent,#EEB901);
  animation:cizgiSol 4.5s ease-in-out infinite;
}
.kart-cizgi::after{
  content:"";position:absolute;top:0;right:0;width:2px;height:26px;
  background:linear-gradient(180deg,#EEB901,#624807 70%,transparent);
}
@keyframes cizgiSol{
  0%,100%{opacity:.55}
  50%{opacity:1}
}
.kart:nth-child(2) .kart-cizgi::before{animation-delay:.5s}
.kart:nth-child(3) .kart-cizgi::before{animation-delay:1s}
.kart:nth-child(4) .kart-cizgi::before{animation-delay:1.5s}
.kart:nth-child(2) .kart-cizgi{animation-delay:.5s}
.kart:nth-child(3) .kart-cizgi{animation-delay:1s}
.kart:nth-child(4) .kart-cizgi{animation-delay:1.5s}
/* Ölçüldü: 48px DAİRE (kare değil), çok sönük koyu zemin + hafif sarı
   radyal parlama, içinde 2px kalınlıkta sarı kontur ikon. */
.kart-ikon{
  position:relative;display:grid;place-items:center;width:48px;height:48px;
  border-radius:50%;color:var(--sari);margin-bottom:19px;
  background:radial-gradient(circle at 50% 45%,rgba(250,190,0,.13),rgba(255,255,255,.02) 70%);
  border:1px solid rgba(250,190,0,.1);
  transition:background .3s,transform .3s;
}
.kart:hover .kart-ikon{transform:scale(1.06)}
.kart h3{font-size:clamp(15px,1.18vw,18px);font-weight:600;margin-bottom:16px;position:relative;z-index:1}
.kart p{font-size:clamp(12.5px,.92vw,14px);color:var(--gri);line-height:1.5;max-width:24ch;
  position:relative;z-index:1}
/* Ölçüldü: ≈42px/800, renk #1A1D22 (kart zemininin bir tık üstü), kart
   sağından 11px alttan 7px içeride. */
.kart-no{
  position:absolute;right:11px;bottom:0;font-size:clamp(30px,2.9vw,42px);font-weight:800;
  color:var(--kart-no);letter-spacing:-.04em;pointer-events:none;line-height:1;
}

/* Ölçüldü: dolgu kart dolgusundan bir tık koyu (#04080D), radius 18. */
.canli-panel{
  padding:26px clamp(18px,2vw,32px) 28px;border-radius:18px;
  background:#04080D;border:1px solid #12141A;
}
.canli-ust{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding-bottom:18px;margin-bottom:16px;
  /* Ölçüldü: başlığın altında uçlara doğru sönen 1px ayraç. */
  border-bottom:1px solid transparent;
  border-image:linear-gradient(90deg,transparent,rgba(255,255,255,.09) 20%,
    rgba(255,255,255,.09) 80%,transparent) 1;
}
.canli-ust h2{font-size:clamp(12px,1.02vw,15px);font-weight:700;color:#F2F3F4}
.canli-etiket{display:inline-flex;align-items:center;gap:8px;
  font-size:clamp(11px,.88vw,13px);font-weight:600;color:var(--gri)}
.canli-etiket.yanar{color:#E8EAEC}

.istatistikler{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.istatistik{position:relative;display:flex;flex-direction:column;align-items:center;
  text-align:center;gap:14px;padding:0 6px}
/* Sütun ayraçları TAM BOY DEĞİL: yalnız rakam+etiket hizasında görünüyor,
   ortada en parlak, uçlarda şeffaf. */
.istatistik + .istatistik::before{
  content:"";position:absolute;left:0;top:58px;bottom:2px;width:1px;
  background:linear-gradient(180deg,transparent,#25252C 45%,transparent);
}
.istatistik-ikon{
  display:grid;place-items:center;width:46px;height:46px;border-radius:50%;
  color:var(--sari);
  background:radial-gradient(circle at 62% 32%,rgba(250,190,0,.14),rgba(255,255,255,.02) 68%);
}
.istatistik-sayi{font-size:clamp(18px,1.6vw,24px);font-weight:700;
  font-variant-numeric:tabular-nums;letter-spacing:-.015em;line-height:1}
.istatistik p{font-size:clamp(11px,.92vw,13px);color:#A4A7AB;line-height:1.38}

/* -------------------------------------------------------------- alt şerit */
.serit-bolum{position:relative;z-index:1;padding:0 0 clamp(30px,5vh,56px)}
.serit{display:grid;grid-template-columns:minmax(0,1.62fr) minmax(0,.62fr) minmax(0,.42fr);
  gap:clamp(12px,1.4vw,20px);align-items:stretch}
.serit.yorumsuz{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}

/* Ölçüldü: 79px yükseklik, dolgu #04080C, kenarlık #13181D. */
.yorum-kutu{
  position:relative;display:flex;align-items:center;gap:24px;
  padding:0 24px 0 28px;border-radius:var(--yuvarlak);
  background:#04080C;border:1px solid #13181D;min-height:79px;
}

.yorumlar{position:relative;flex:1 1 auto;min-height:56px;min-width:0}
.yorum{
  position:absolute;inset:0;display:grid;
  grid-template-columns:auto 1fr;grid-template-rows:auto auto;
  column-gap:13px;row-gap:3px;align-items:center;
  opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .45s,transform .45s,visibility .45s;
}
.yorum.etkin{opacity:1;visibility:visible;transform:none}
.yorum-harf{
  grid-row:1 / span 2;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(140deg,rgba(250,190,0,.26),rgba(250,190,0,.06));
  border:1px solid rgba(250,190,0,.2);color:var(--sari);font-weight:800;font-size:14px;
}
.yorum figcaption{display:flex;align-items:center;gap:10px;min-width:0}
.yorum-ad{font-size:clamp(13px,1.02vw,15px);font-weight:700}
.yildizlar{display:flex;gap:2px;color:var(--sari)}
.yorum blockquote{font-size:clamp(12.5px,1.02vw,15px);color:var(--gri);line-height:1.45;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.yorum-zaman{grid-column:2;font-size:clamp(11px,.95vw,14px);color:#AAADAE;
  justify-self:end;align-self:center;white-space:nowrap}
.yorum-ok{display:flex;gap:8px;flex:0 0 auto}
.yorum-ok button{
  width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--cizgi2);color:var(--gri);transition:all .2s;
}
.yorum-ok button:hover{border-color:var(--cizgi);color:var(--sari);background:rgba(245,178,42,.07)}

.ara-kutu,.wa-kutu{
  display:flex;align-items:center;gap:15px;padding:16px 20px;border-radius:var(--yuvarlak);
  transition:transform .25s cubic-bezier(.22,1,.36,1),box-shadow .25s,border-color .25s;
}
/* Ölçüldü: dolgu koyu (#05090E), SARI 1px kenarlık ve dışında belirgin
   sarı ışıma. Sarı dolgulu bir kutu DEĞİL. */
.ara-kutu{
  background:#05090E;border:1px solid var(--sari);
  box-shadow:0 0 20px rgba(250,190,0,.35);min-height:79px;
}
.ara-kutu:hover{transform:translateY(-3px);box-shadow:0 0 30px rgba(250,190,0,.5)}
.ara-halka{
  width:46px;height:46px;border-radius:50%;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  background:#0C0F13;color:var(--sari);border:1px solid rgba(250,190,0,.16);
  animation:atimHalka 4s ease-out infinite;
}
.ara-halka svg{display:block}
@keyframes atimHalka{
  0%,86%,100%{box-shadow:0 0 0 0 rgba(245,178,42,0)}
  90%{box-shadow:0 0 0 0 rgba(245,178,42,.45)}
  97%{box-shadow:0 0 0 14px rgba(245,178,42,0)}
}
.ara-kutu span{display:flex;flex-direction:column;min-width:0}
.ara-kutu small{font-size:clamp(12px,.95vw,14px);font-weight:700;color:var(--sari);letter-spacing:.045em}
.ara-kutu b{font-size:clamp(16px,1.5vw,21px);font-weight:700;letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;margin-top:3px}

/* Ölçüldü: sönük gri kenarlık, ışıma YOK — vurgu HEMEN ARA'da. */
.wa-kutu{background:#05090E;border:1px solid #1D2126;min-height:79px}
.wa-kutu:hover{transform:translateY(-3px);border-color:rgba(45,222,93,.45)}
.wa-halka{
  width:44px;height:44px;border-radius:50%;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;color:var(--wa);
}
.wa-halka svg{display:block}
.wa-kutu span{display:flex;flex-direction:column}
.wa-kutu b{font-size:clamp(12px,.95vw,14px);font-weight:700;letter-spacing:.045em}
.wa-kutu small{font-size:clamp(13px,1.05vw,15px);color:#A7ABAB;margin-top:3px}

/* ---------------------------------------------------------------- bölümler */
.bolum{position:relative;z-index:1;padding:clamp(48px,8vh,96px) 0}
.bolum-bas{max-width:640px;margin:0 auto clamp(28px,4vh,46px);text-align:center}
.bolum-bas.sol{margin-left:0;text-align:left}
.bolum-bas .ustyazi{justify-content:center}
.bolum-bas.sol .ustyazi{justify-content:flex-start}
.bolum-bas h2{font-size:clamp(26px,3.1vw,42px);margin-bottom:14px}
.bolum-bas h2 .sari{color:var(--sari)}
.bolum-acik{font-size:14px;color:var(--gri);line-height:1.62;margin-bottom:14px}

/* hizmetler */
.hizmet-agi{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));
  gap:clamp(12px,1.4vw,20px)}
.hizmet{
  padding:26px 22px;border-radius:var(--yuvarlak);
  background:linear-gradient(165deg,rgba(19,27,38,.62),rgba(10,14,20,.62));
  border:1px solid var(--cizgi2);
  transition:transform .3s cubic-bezier(.22,1,.36,1),border-color .3s,box-shadow .3s;
}
.hizmet:hover{transform:translateY(-5px);border-color:var(--cizgi);
  box-shadow:0 18px 44px rgba(0,0,0,.4)}
.hizmet-ikon{
  display:grid;place-items:center;width:50px;height:50px;border-radius:14px;
  background:rgba(245,178,42,.09);border:1px solid var(--cizgi);color:var(--sari);
  margin-bottom:17px;
}
.hizmet h3{font-size:16.5px;margin-bottom:10px}
.hizmet p{font-size:13px;color:var(--sonuk);line-height:1.6}

/* ücret */
.ucret-bolum{padding-top:clamp(20px,3vh,40px)}
.ucret-kutu{
  padding:clamp(26px,3.4vw,46px);border-radius:22px;
  background:
    radial-gradient(700px 320px at 82% 8%,rgba(245,178,42,.09),transparent 62%),
    linear-gradient(160deg,rgba(20,27,38,.86),rgba(9,13,19,.86));
  border:1px solid var(--cizgi2);
}
.ucret-ic{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(18px,2.4vw,34px);align-items:start}
.ucret-form{display:grid;gap:12px}
.alan{
  display:flex;align-items:center;gap:13px;padding:13px 16px;border-radius:13px;
  background:rgba(255,255,255,.035);border:1px solid var(--cizgi2);
  transition:border-color .2s,background .2s;cursor:text;
}
.alan:focus-within{border-color:var(--cizgi);background:rgba(245,178,42,.05)}
.alan-ikon{flex:0 0 auto}
.alan > span{display:flex;flex-direction:column;flex:1 1 auto;min-width:0}
.alan b{font-size:10.6px;font-weight:700;color:var(--sonuk);letter-spacing:.06em}
.alan input{
  width:100%;background:none;border:0;outline:none;font-size:14px;font-weight:600;
  padding:2px 0 0;
}
.alan input::placeholder{color:var(--sonuk);font-weight:500}

.ucret-sonuc{
  position:relative;min-height:196px;border-radius:15px;padding:22px;
  background:radial-gradient(circle at 62% 38%,rgba(30,42,60,.55),rgba(9,13,19,.72));
  border:1px solid var(--cizgi2);display:grid;place-items:center;text-align:center;
}
.ucret-sonuc .bekliyor{color:var(--sonuk);font-size:12.6px;max-width:30ch}
.ucret-sonuc .bekliyor svg{margin:0 auto 11px;color:var(--sari);opacity:.75}
.ucret-sonuc .tutar{font-size:clamp(34px,4vw,48px);font-weight:800;color:var(--sari);
  line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.025em}
.ucret-sonuc .tutar small{font-size:17px;font-weight:700;margin-left:4px}
.ucret-sonuc .ayrinti{display:flex;gap:18px;justify-content:center;margin-top:12px;
  font-size:12px;color:var(--sonuk);flex-wrap:wrap}
.ucret-sonuc .ayrinti b{color:var(--yazi)}
.ucret-sonuc .hata-yazi{color:#FF9E96;font-size:13px;max-width:34ch;line-height:1.5}
.ucret-sonuc .ipucu{margin-top:13px;font-size:10.6px;color:var(--sonuk);max-width:36ch;
  line-height:1.5}
.ucret-sonuc.geldi{animation:sonucGel .5s cubic-bezier(.22,1,.36,1)}
@keyframes sonucGel{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
.ucret-not{margin-top:16px;font-size:11.4px;color:var(--sonuk);line-height:1.5}

/* hakkımızda */
.hakkinda-duzen{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(24px,4vw,64px);align-items:center}
.hakkinda-duzen h2{font-size:clamp(26px,3.1vw,42px);margin-bottom:16px}
.onay-liste{list-style:none;display:grid;gap:11px;margin-top:22px}
.onay-liste li{display:flex;align-items:flex-start;gap:11px;font-size:13.4px;color:var(--gri)}
.onay{
  display:grid;place-items:center;width:21px;height:21px;border-radius:50%;flex:0 0 auto;
  background:rgba(49,208,123,.14);color:var(--yesil);margin-top:1px;
}
.hakkinda-gorsel{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.hakkinda-kart{
  padding:22px 18px;border-radius:var(--yuvarlak);text-align:center;
  background:linear-gradient(160deg,rgba(20,27,38,.72),rgba(10,14,20,.72));
  border:1px solid var(--cizgi2);
}
.hakkinda-kart.ucuncu{grid-column:1 / -1}
.hakkinda-ikon{display:block;color:var(--sari);margin:0 auto 12px;opacity:.9}
.hakkinda-kart b{display:block;font-size:26px;font-weight:800;letter-spacing:-.02em}
.hakkinda-kart small{font-size:11.4px;color:var(--sonuk)}

/* araçlar */
.arac-agi{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}
.arac-ozellik{
  display:flex;flex-direction:column;gap:6px;padding:20px 18px;border-radius:14px;
  background:rgba(255,255,255,.028);border:1px solid var(--cizgi2);
  transition:border-color .3s,background .3s;
}
.arac-ozellik:hover{border-color:var(--cizgi);background:rgba(245,178,42,.045)}
.arac-ikon{color:var(--sari);margin-bottom:6px}
.arac-ozellik b{font-size:13.6px;font-weight:700}
.arac-ozellik small{font-size:11.8px;color:var(--sonuk)}

/* bölgeler */
.bolge-agi{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:clamp(14px,1.6vw,22px)}
.bolge-grup{
  padding:24px 22px;border-radius:var(--yuvarlak);
  background:linear-gradient(165deg,rgba(19,27,38,.6),rgba(10,14,20,.6));
  border:1px solid var(--cizgi2);
}
.bolge-grup h3{font-size:13px;color:var(--sari);margin-bottom:15px;letter-spacing:.03em}
.bolge-grup ul{list-style:none;display:flex;flex-wrap:wrap;gap:7px}
.bolge-grup li{
  padding:6px 11px;border-radius:8px;background:rgba(255,255,255,.04);
  font-size:11.8px;color:var(--gri);border:1px solid transparent;transition:all .2s;
}
.bolge-grup li:hover{border-color:var(--cizgi);color:var(--sari)}
.bolge-alt{text-align:center;margin-top:26px;font-size:13px;color:var(--sonuk)}
.bolge-alt a{color:var(--sari);font-weight:700;border-bottom:1px solid var(--cizgi)}

/* SSS */
.sss-liste{display:grid;gap:10px}
.sss-madde{
  border-radius:14px;background:rgba(255,255,255,.028);border:1px solid var(--cizgi2);
  overflow:hidden;transition:border-color .3s,background .3s;
}
.sss-madde[open]{border-color:var(--cizgi);background:rgba(245,178,42,.04)}
.sss-madde summary{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:17px 20px;font-size:14px;font-weight:700;cursor:pointer;list-style:none;
}
.sss-madde summary::-webkit-details-marker{display:none}
.sss-arti{position:relative;width:15px;height:15px;flex:0 0 auto}
.sss-arti::before,.sss-arti::after{
  content:"";position:absolute;background:var(--sari);border-radius:2px;
  transition:transform .28s cubic-bezier(.22,1,.36,1);
}
.sss-arti::before{left:0;top:6.5px;width:15px;height:2px}
.sss-arti::after{left:6.5px;top:0;width:2px;height:15px}
.sss-madde[open] .sss-arti::after{transform:rotate(90deg);opacity:0}
.sss-madde p{padding:0 20px 18px;font-size:13.2px;color:var(--sonuk);line-height:1.65;
  max-width:74ch}

/* iletişim */
.iletisim-duzen{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(24px,4vw,60px);align-items:center}
.iletisim-duzen h2{font-size:clamp(26px,3.1vw,42px);margin-bottom:16px}
.iletisim-liste{list-style:none;display:grid;gap:14px;margin-top:24px}
.iletisim-liste li{display:flex;align-items:center;gap:14px}
/* İkon daireleri: SVG'ler öznitelik boyutlu ve viewBox'ları 24×24 ortalı;
   yine de grid yerine flex ortalama kullanılıyor — satır yüksekliği kaynaklı
   yarım piksel kaymalarını da bitirir. */
.iletisim-ikon{
  display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:13px;flex:0 0 auto;
  background:rgba(250,190,0,.07);border:1px solid rgba(250,190,0,.14);color:var(--sari);
}
.iletisim-ikon svg{display:block}
.iletisim-liste li > span{display:flex;flex-direction:column;min-width:0}
.iletisim-liste small{font-size:10.6px;color:var(--sonuk);letter-spacing:.05em}
.iletisim-liste a,.iletisim-liste b{font-size:14px;font-weight:700}
.iletisim-liste a:hover{color:var(--sari)}

.iletisim-cagri{
  padding:clamp(26px,3vw,38px);border-radius:20px;text-align:center;
  background:
    radial-gradient(500px 260px at 50% 0,rgba(245,178,42,.14),transparent 66%),
    linear-gradient(160deg,rgba(20,27,38,.9),rgba(9,13,19,.9));
  border:1px solid var(--cizgi);
}
.cagri-halka{
  display:flex;align-items:center;justify-content:center;
  width:74px;height:74px;border-radius:50%;margin:0 auto 18px;
  background:linear-gradient(180deg,#FBC001,#F7B901);color:#0A0D13;
  animation:atimHalka 4s ease-out infinite;
}
.iletisim-cagri b{display:block;font-size:20px;font-weight:800;margin-bottom:8px}
.iletisim-cagri p{font-size:13px;color:var(--sonuk);margin-bottom:20px;line-height:1.55}
.iletisim-cagri .btn{margin-bottom:10px}
.iletisim-cagri .btn.birincil{font-size:17px;letter-spacing:0;font-variant-numeric:tabular-nums}

/* ------------------------------------------------------------------- alt */
.alt{position:relative;z-index:1;border-top:1px solid var(--cizgi2);
  background:linear-gradient(180deg,rgba(8,11,17,.6),rgba(5,7,11,.95))}
.alt-duzen{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));
  gap:clamp(20px,3vw,44px);padding-top:clamp(36px,5vh,60px);padding-bottom:34px}
.alt-marka .marka-ikon{margin-bottom:12px}
.alt-marka .marka-yazi{display:block;margin-bottom:14px}
.alt-marka p{font-size:12.6px;color:var(--sonuk);line-height:1.6;max-width:38ch;margin-bottom:14px}
.alt-tel{display:inline-flex;align-items:center;gap:9px;font-size:14px;font-weight:700;color:var(--sari)}
.alt-sutun h3{font-size:12px;color:var(--yazi);margin-bottom:14px;letter-spacing:.05em}
.alt-sutun a{display:block;font-size:12.6px;color:var(--sonuk);padding:4px 0;transition:color .2s}
.alt-sutun a:hover{color:var(--sari)}
.alt-adres{font-size:12.6px;color:var(--sonuk);line-height:1.6;margin-bottom:8px}
.alt-serit{border-top:1px solid var(--cizgi2)}
.alt-serit-ic{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding-top:16px;padding-bottom:16px;flex-wrap:wrap}
.alt-serit small{font-size:11.4px;color:var(--sonuk)}
/* [KALICI KURAL] Ürettiğimiz her üründe imzamız bulunur. */
.imza{font-size:11.4px;font-weight:700;color:var(--sonuk);letter-spacing:.05em;
  transition:color .2s}
.imza:hover{color:var(--sari)}

.yukari-dugme{
  position:fixed;right:20px;bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:55;
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  background:rgba(13,18,26,.92);border:1px solid var(--cizgi);color:var(--sari);
  backdrop-filter:blur(8px);box-shadow:0 10px 26px rgba(0,0,0,.45);
  opacity:0;transform:translateY(10px);transition:opacity .3s,transform .3s;
}
.yukari-dugme.gorun{opacity:1;transform:none}
.yukari-dugme[hidden]{display:none}

/* Yüzen mobil CTA: taban durumda kapalı; yalnız dar ekran medya sorgusunda
   açılır (aşağıda). */
.mobil-cta{display:none}

/* ------------------------------------------------------- mobil alt çubuk */
.mobil-cubuk{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:58;
  padding:8px clamp(6px,2vw,14px) calc(8px + env(safe-area-inset-bottom,0px));
  background:rgba(8,11,17,.96);backdrop-filter:blur(16px);
  border-top:1px solid var(--cizgi2);
}
.mobil-cubuk a{
  flex:1 1 0;display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:6px 2px;color:var(--sonuk);font-size:9.6px;font-weight:600;
}
.mobil-cubuk a.etkin{color:var(--sari)}

/* ============================== BÖLGE / İLÇE SAYFALARI =====================
   Yerel SEO sayfaları. Ana sayfanın diliyle aynı ama daha "belge" gibi:
   okunacak metin çok, süsleme az. */

.kirinti{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-size:12.5px;color:var(--sonuk);margin-bottom:26px}
.kirinti a{color:var(--gri);transition:color .2s}
.kirinti a:hover{color:var(--sari)}
.kirinti b{color:var(--yazi);font-weight:600}

.bolum h1{font-size:clamp(28px,3.4vw,46px);margin-bottom:16px}
.alt-baslik{font-size:clamp(19px,2vw,27px);font-weight:800;letter-spacing:-.02em;
  margin:clamp(34px,5vh,58px) 0 18px}
.alt-baslik small{font-size:14px;font-weight:600;color:var(--sonuk);letter-spacing:0}

.bolge-duzen{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.85fr);
  gap:clamp(20px,3vw,44px);align-items:start}

/* Üç ölçü: mesafe, süre, sokak sayısı. Rakamlar sayfanın "işe yarar" kısmı. */
.bolge-olcu{display:flex;gap:clamp(12px,2vw,26px);flex-wrap:wrap;margin:24px 0 26px}
.bolge-olcu div{display:flex;flex-direction:column;gap:3px}
.bolge-olcu span{font-size:clamp(24px,2.6vw,34px);font-weight:800;color:var(--sari);
  line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.bolge-olcu small{font-size:11.5px;color:var(--sonuk)}

.bolge-ucret{
  padding:24px 22px;border-radius:18px;text-align:center;
  background:radial-gradient(420px 220px at 50% 0,rgba(250,190,0,.12),transparent 68%),
    linear-gradient(160deg,rgba(20,27,38,.9),rgba(9,13,19,.9));
  border:1px solid var(--cizgi2);
}
.bolge-ucret small{display:block;font-size:10.5px;font-weight:700;color:var(--sonuk);
  letter-spacing:.085em;margin-bottom:10px}
.bolge-tutar{display:block;font-size:clamp(30px,3.4vw,42px);font-weight:800;color:var(--sari);
  line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.025em;min-height:1em}
.bolge-ucret p{font-size:11.5px;color:var(--sonuk);line-height:1.5;margin-top:14px}

/* Gerçek cadde/sokak adları — sayfayı benzersiz yapan asıl içerik. */
.yol-agi{display:flex;flex-wrap:wrap;gap:7px}
.yol-agi span{
  padding:7px 12px;border-radius:8px;background:rgba(255,255,255,.035);
  border:1px solid var(--cizgi2);font-size:12.5px;color:var(--gri);
}
.yol-not{margin-top:14px;font-size:12.5px;color:var(--sonuk)}

.adim-agi{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.adim{display:flex;gap:14px;padding:20px 18px;border-radius:14px;
  background:rgba(255,255,255,.028);border:1px solid var(--cizgi2)}
.adim b{
  flex:0 0 auto;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  background:rgba(250,190,0,.12);border:1px solid rgba(250,190,0,.3);
  color:var(--sari);font-size:14px;font-weight:800;
}
.adim p{font-size:13px;color:var(--gri);line-height:1.55}
.adim a{color:var(--sari);font-weight:700}

.ilce-agi{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:10px}
.ilce-kart{
  display:flex;flex-direction:column;gap:3px;padding:15px 16px;border-radius:13px;
  background:rgba(255,255,255,.028);border:1px solid var(--cizgi2);
  transition:border-color .25s,background .25s,transform .25s;
}
.ilce-kart:hover{border-color:rgba(250,190,0,.4);background:rgba(250,190,0,.05);
  transform:translateY(-2px)}
.ilce-kart b{font-size:14px;font-weight:700}
.ilce-kart small{font-size:11.5px;color:var(--sonuk)}

.bolge-grup.genis{grid-column:1 / -1;padding:24px 22px;border-radius:var(--yuvarlak);
  background:linear-gradient(165deg,rgba(19,27,38,.6),rgba(10,14,20,.6));
  border:1px solid var(--cizgi2)}
.bolge-ara-baslik{font-size:13px;color:var(--sari);letter-spacing:.03em;
  margin:22px 0 12px}
.bolge-grup ul.bag{display:flex;flex-wrap:wrap;gap:7px;list-style:none}
.bolge-grup ul.bag li{padding:0;background:none;border:0}
.bolge-grup ul.bag a{
  display:block;padding:6px 11px;border-radius:8px;background:rgba(255,255,255,.04);
  font-size:12px;color:var(--gri);border:1px solid transparent;transition:all .2s;
}
.bolge-grup ul.bag a:hover{border-color:rgba(250,190,0,.35);color:var(--sari)}

@media (max-width:900px){
  .bolge-duzen{grid-template-columns:minmax(0,1fr)}
}

/* ==================================== BLOG ================================
   Okunacak metin çok; burada tasarım geri çekilir, tipografi öne çıkar.
   Satır uzunluğu 68 karakteri geçmez — daha uzun satırda göz satır başını
   kaybeder. */

.kategori-agi{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.kategori-kart{
  display:flex;flex-direction:column;gap:10px;padding:26px 24px;border-radius:var(--yuvarlak);
  background:linear-gradient(165deg,rgba(19,27,38,.65),rgba(10,14,20,.65));
  border:1px solid var(--cizgi2);
  transition:transform .3s cubic-bezier(.22,1,.36,1),border-color .3s,box-shadow .3s;
}
.kategori-kart:hover{transform:translateY(-4px);border-color:rgba(250,190,0,.35);
  box-shadow:0 18px 44px rgba(0,0,0,.4)}
.kategori-kart b{font-size:18px;font-weight:700}
.kategori-kart p{font-size:13px;color:var(--gri);line-height:1.55}
.kategori-kart small{font-size:12px;font-weight:700;color:var(--sari);
  display:inline-flex;align-items:center;gap:7px;margin-top:auto}

.yazi-agi{display:grid;grid-template-columns:repeat(auto-fill,minmax(288px,1fr));gap:14px}
.yazi-kart{
  display:flex;flex-direction:column;gap:10px;padding:24px 22px;border-radius:var(--yuvarlak);
  background:rgba(255,255,255,.028);border:1px solid var(--cizgi2);
  transition:transform .3s cubic-bezier(.22,1,.36,1),border-color .3s;
}
.yazi-kart:hover{transform:translateY(-4px);border-color:rgba(250,190,0,.35)}
.yazi-etiket{align-self:flex-start;padding:4px 9px;border-radius:6px;
  background:rgba(250,190,0,.1);border:1px solid rgba(250,190,0,.2);
  font-size:10.5px;font-weight:700;color:var(--sari);letter-spacing:.04em}
.yazi-kart b{font-size:16.5px;font-weight:700;line-height:1.3;letter-spacing:-.015em}
.yazi-kart p{font-size:12.8px;color:var(--gri);line-height:1.55}
.yazi-kart small{font-size:12px;font-weight:700;color:var(--sari);
  display:inline-flex;align-items:center;gap:7px;margin-top:auto}

/* ---------------------------------------------------------- yazı sayfası */
.yazi-sayfa .sarmal{max-width:880px}
.yazi-bas{margin-bottom:clamp(26px,4vh,40px)}
.yazi-bas h1{font-size:clamp(27px,3.4vw,44px);line-height:1.12;margin-bottom:16px}
.yazi-ozet{font-size:clamp(15px,1.3vw,18px);color:var(--acik-gri);line-height:1.6;
  max-width:62ch;margin-bottom:20px}
.yazi-bilgi{display:flex;gap:20px;flex-wrap:wrap;font-size:12.5px;color:var(--sonuk)}
.yazi-bilgi span{display:inline-flex;align-items:center;gap:8px}
.yazi-bilgi svg{color:var(--sari);opacity:.8}

.yazi-govde{font-size:16px;line-height:1.78;color:#D7DBE0;max-width:68ch}
.yazi-govde h2{font-size:clamp(20px,2.2vw,27px);font-weight:800;letter-spacing:-.02em;
  color:var(--yazi);margin:38px 0 14px}
.yazi-govde h3{font-size:clamp(17px,1.7vw,20px);font-weight:700;color:var(--yazi);
  margin:28px 0 10px}
.yazi-govde p{margin-bottom:17px}
.yazi-govde b{color:var(--yazi);font-weight:700}
.yazi-govde a{color:var(--sari);font-weight:600;border-bottom:1px solid rgba(250,190,0,.35)}
.yazi-govde a:hover{border-bottom-color:var(--sari)}
.yazi-govde ul{list-style:none;margin:0 0 20px;display:grid;gap:10px}
.yazi-govde li{position:relative;padding-left:22px}
.yazi-govde li::before{
  content:"";position:absolute;left:2px;top:11px;width:7px;height:7px;border-radius:50%;
  background:var(--sari);opacity:.75;
}

.yazi-cagri{
  margin:clamp(30px,5vh,48px) 0;padding:clamp(24px,3vw,34px);border-radius:20px;
  text-align:center;
  background:radial-gradient(520px 260px at 50% 0,rgba(250,190,0,.13),transparent 66%),
    linear-gradient(160deg,rgba(20,27,38,.9),rgba(9,13,19,.9));
  border:1px solid var(--cizgi);
}
.yazi-cagri b{display:block;font-size:19px;font-weight:800;margin-bottom:8px}
.yazi-cagri p{font-size:13.5px;color:var(--gri);line-height:1.6;max-width:46ch;
  margin:0 auto 20px}

@media (max-width:620px){
  .yazi-govde{font-size:15.5px;line-height:1.75}
}

/* ------------------------------------------------- CANLI TAKSİ DURUMU (mobil)
   Mobil mockup'ta masaüstü panelinin yerini bu halkalar alıyor. Halka sayfa
   görününce çizilir: JS stroke-dashoffset'i hedef yüzdeye indirir. */
.yalniz-mobil{display:none}
.halkalar-bolum{position:relative;z-index:1;padding:8px 0 clamp(26px,5vh,44px)}
.halka-baslik{font-size:15px;font-weight:700;text-align:center;letter-spacing:.04em;
  margin-bottom:26px}
.halkalar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 12px}
.halka-sayac{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px}
/* Rakam ve birim ("3 dk") YAN YANA dursun: grid iki ayrı satıra koyuyordu. */
.halka-cember{position:relative;width:clamp(92px,26vw,116px);aspect-ratio:1;
  display:flex;align-items:center;justify-content:center}
.halka-cember svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.halka-cember .arka{stroke:rgba(255,255,255,.06);stroke-width:5;fill:none}
.halka-cember .on{stroke:var(--sari);stroke-width:5;fill:none;stroke-linecap:round;
  stroke-dasharray:264;stroke-dashoffset:264;
  transition:stroke-dashoffset 1.6s cubic-bezier(.22,1,.36,1);
  filter:drop-shadow(0 0 6px rgba(250,190,0,.45))}
.halka-cember b{font-size:clamp(20px,5.6vw,26px);font-weight:800;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
/* "dk" birimi RAKAMIN dibine hizalanır, çemberin dibine değil.
   Önce align-self:flex-end kullanılmıştı; o, birimi esnek kutunun (yani
   çemberin) alt kenarına itiyor ve "dk" halkanın çizgisinin üstüne
   biniyordu (kullanıcı bildirdi). Rakam ortada durduğu için doğru hiza,
   ortadan birkaç piksel aşağı kaydırmaktır — sayının tabanına oturur. */
.halka-cember .birim{font-size:11px;color:rgba(255,255,255,.85);font-style:normal;
  margin-left:3px;align-self:center;position:relative;top:5px}
.halka-sayac p b{display:block;font-size:12px;font-weight:700}
.halka-sayac p small{display:block;font-size:11px;color:var(--sonuk)}

/* -------------------------------------------------------------- hata sayfası */
.hata-sayfa{display:grid;place-items:center;min-height:100vh;padding:24px;text-align:center}
.hata-kutu{max-width:540px;display:grid;justify-items:center;gap:16px}
.hata-kutu h1{font-size:clamp(28px,4vw,44px)}
.hata-kutu p{color:var(--gri);font-size:14px;line-height:1.6}
.hata-dugme{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:6px}
.hata-kutu .imza{margin-top:18px}

/* ------------------------------------------------------------ giriş animasyonu
   "Kartlar: aşağıdan yukarı stagger animasyonuyla gelecek"
   "İstatistikler sayfa açılırken animasyonla yükseliyor"

   Gizleme YALNIZ .var-js kökü altında geçerli: JS çalışmazsa hiçbir şey
   gizlenmez ve sayfa eksiksiz görünür. Boş sayfa riski yok.                */
/* GİRİŞ ANİMASYONU — İLK BLOK HARİÇ.
   Eskiden [data-gir] taşıyan HER blok opacity:0 ile başlıyordu; H1 de
   bunlardan biriydi. Chrome saydamlığı sıfır olan bir elemanı "en büyük
   içerik" adayı SAYMAZ, dolayısıyla görseli olmayan 188 sayfada (mahalle,
   ilçe, blog) LCP ölçümü "site.js indi + gözlemci tetiklendi" anına kadar
   hiç kaydedilmiyordu. Kendi elimizle koyduğumuz bir gecikmeydi.
   Sayfanın ilk bloğu (data-gir="1") artık gizlenmiyor; animasyon aşağıdaki
   bölümlerde aynen sürüyor. Görsel olarak fark edilmez, ölçümde ciddi. */
.var-js [data-gir]:not([data-gir="1"]){opacity:0;transform:translateY(24px)}
.var-js [data-gir].gel{
  opacity:1;transform:none;
  transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1);
}
.var-js [data-gir="2"].gel{transition-delay:.09s}
.var-js [data-gir="3"].gel{transition-delay:.18s}
.var-js [data-gir="4"].gel{transition-delay:.27s}
.var-js [data-gir="5"].gel{transition-delay:.36s}
.var-js .kart[data-gir="2"].gel{transition-delay:.08s}
.var-js .kart[data-gir="3"].gel{transition-delay:.16s}
.var-js .kart[data-gir="4"].gel{transition-delay:.24s}

/* ------------------------------------------------------------------ uyarlama */

/* Üst çubukta yer daralınca önce rozet, sonra telefon düşer; "Hemen Taksi
   Çağır" en sona kadar kalır — sayfanın tek amacı o düğme. */
/* Üst çubuk sığma sırası (ölçülerek belirlendi): 7/24 rozeti önce KISALIR
   (yalnız "7/24" kalır), sonra tamamen düşer, ardından telefon düşer.
   "Hemen Taksi Çağır" en sona kadar kalır — sayfanın tek amacı o düğme. */
@media (max-width:1750px){ .rozet-724 .uzun{display:none} }
@media (max-width:1180px){ .rozet-724{display:none} }
@media (max-width:1080px){ .ust-tel{display:none} }

/* Geniş ama çok geniş olmayan masaüstü: rota sütunu daralır. */
@media (max-width:1400px){
  .kartlar{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kartlar-duzen{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}
}

/* Dizüstü / küçük masaüstü. */
@media (max-width:1180px){
  .kahraman-ic{grid-template-columns:minmax(0,1fr)}
  .rota{display:none}                 /* dar ekranda rota sütunu araca biner */
  .sahne{right:-6%;opacity:.62;height:104%}
  .kahraman-yazi{max-width:min(640px,100%)}
  .serit{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .yorum-kutu{grid-column:1 / -1}
  .ucret-ic{grid-template-columns:minmax(0,1fr)}
  .hakkinda-duzen,.iletisim-duzen{grid-template-columns:minmax(0,1fr)}
  .alt-duzen{grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr))}
}

/* ===========================================================================
   MOBİL — AYRI TASARIM, MASAÜSTÜNÜN KÜÇÜĞÜ DEĞİL
   ===========================================================================
   [KULLANICI KARARI] "mobilden girenler sana verdiğim yoldaki tasarımı
   görecekler, masaüstü versiyonunun küçültülmüş halini değil."

   Mobil mockup'ın masaüstünden YAPISAL farkları:
     · Araç fotoğrafı yazının ALTINA inmez; sağdan taşarak yazının yanında
       durur ve arkasında BÜYÜK IŞIKLI BİR ÇEMBER vardır (masaüstünde yok).
     · Ücret formu ("Nereden Nereye?") kahramanın HEMEN ALTINDADIR;
       masaüstünde çok aşağıdadır. Bölüm sırası CSS ile değiştirilir.
     · Kartların üstünde soluk "01 NEDEN BİZ?" başlığı vardır.
     · Kartlar 4'ü yan yana, başlıkları BÜYÜK HARF ve ortalı.
     · Sağdaki "Bugün Bizi Tercih Edenler" paneli YOKTUR; yerine
       "CANLI TAKSİ DURUMU" halkaları vardır.
     · "Hemen Ara" geniş bir haptır, yanında yuvarlak WhatsApp düğmesi.
     · Alt menü 5 eşit öğedir.
   ========================================================================= */

/* Genişe/dara göre metin değiştirme. Her iki metin de HTML'de basılır;
   hangisinin görüneceğine CSS karar verir — JS beklenmez, ilk boyamada
   doğru metin görünür. */
.yalniz-dar{display:none}
.yalniz-genis{display:inline}

@media (max-width:900px){
  :root{--ust-boy:64px;--yan:clamp(14px,4vw,22px)}

  .yalniz-dar{display:inline}
  .yalniz-genis{display:none}

  .menu,.ust-tel,.ust-sag > .btn{display:none}
  .menu-dugme{display:grid}
  .mobil-tel{display:flex}
  .mobil-cubuk{display:flex}
  .yalniz-mobil{display:block}
  /* Yüzen CTA + alt menü üst üste ~140 px kaplıyor; içerik altında
     kaybolmasın. Başa dön düğmesi WhatsApp dairesinin tam arkasında
     kalıyordu — alt menü zaten ANA SAYFA'ya götürüyor, mobilde gizli. */
  body{padding-bottom:166px}
  .yukari-dugme{display:none}
  /* Akıştaki "Hemen Ara / WhatsApp" şeridi mobilde gereksizleşti: aynı iki
     düğme artık yüzen blokta hep ekranda. İkisini birden basmak tekrar olur. */
  .serit-bolum{display:none}

  /* --- üst çubuk: logo | 7/24 hapı | yuvarlak telefon | hamburger --- */
  .ust{gap:10px}
  .marka-ikon svg{width:30px;height:36px}
  .marka-yazi{font-size:12.5px}
  .ust-sag{flex:1 1 auto;justify-content:flex-end;gap:10px}
  /* Ölçüm: hap 202×48 (853 tuvalde) → dar ekranda 36 px yüksekliğe iner.
     "7/24" YEŞİL, "HİZMETİNİZDEYİZ" beyaz. Sarı yapmak yaygın bir hata. */
  .rozet-724{display:inline-flex;height:36px;padding:0 13px;font-size:10.5px;
    margin-right:auto;margin-left:6px;gap:7px;color:#fff}
  .rozet-724 .uzun{display:inline;color:rgba(255,255,255,.92);font-weight:700}
  .rozet-724 b{color:var(--yesil-yazi)}
  /* Yuvarlak sarı telefon düğmesi: koyu dolgu + sarı ışıklı halka. */
  .mobil-tel{width:46px;height:46px}

  /* --- KAHRAMAN --- */
  .kahraman{
    flex-direction:column;align-items:stretch;overflow:visible;
    padding:clamp(12px,2vh,20px) 0 clamp(14px,2.2vh,22px);
    min-height:auto;
  }
  .kahraman-ic{grid-template-columns:minmax(0,1fr);padding:0 var(--yan);position:relative;z-index:2}
  .kahraman-yazi{max-width:min(62%,340px)}

  /* Fotoğraf: sağdan TAŞAR, yazının yanında durur. Sol kenarı yazının
     altına giren kısmı zaten alfa kanalında silik olduğu için okuma
     engellenmiyor. */
  .kahraman-fon{
    position:absolute;top:0;right:0;bottom:auto;left:auto;
    /* Araç mockup kadrajına oturur: fotoğrafta araç x %21-89 bandında;
       mockup'ta ön tampon ekranın %47'sinde, arka tam sağ kenarda kesik.
       => görünür fotoğraf genişliği 53/68 ≈ %78 ekran, sol kenar %31
       (fon %70 × sahne %112 bunu verir). Önceki %74×%146=%108 ekran
       genişliğindeydi — araç devasa olup arka yarısı dışarıda kalıyordu;
       kullanıcı telefon görüntüsüyle bildirdi. */
    width:70%;max-width:none;padding:0;margin:0;pointer-events:none;
  }
  /* ÖLÇÜM: mobil mockup'ta aracın ön tamponu ekranın %48'inde başlıyor ve
     arka tarafı SAĞ KENARDA KESİLİYOR — araç tam olarak sığdırılmıyor,
     bilerek taşırılıyor. Fotoğrafta araç 21%-89% aralığında olduğu için
     kutuyu %162 genişletip sağa taşırmak o kadrajı verir. */
  .sahne{
    position:relative;right:auto;top:auto;transform:none;
    width:112%;height:auto;aspect-ratio:780/580;margin:9% 0 0 0;
    animation:salinMobil 9s ease-in-out infinite;
  }
  /* "Araç sağdan sola yavaşça gelir" (mockup notu) — açılışta bir kez. */
  @keyframes salinMobil{
    0%,100%{transform:translateX(0)}
    50%{transform:translateX(-6px)}
  }
  .sahne-kutu,.sahne-foto{position:absolute;inset:0}
  /* Zemin halkaları mobilde de AÇIK [KULLANICI KARARI 2026-08-27]:
     'zemin animasyonunu masaüstündeki gibi mobile de ekleyelim'.
     (Ölçüm raporu mockup'ta olmadığını söylüyordu ve kapatılmıştı; kullanıcı
     isteğiyle geri açıldı. SVG fotoğraf kutusuna yüzdeyle oturduğu için
     mobilde ek ayar gerekmez — aynı siluet maskesi, aynı akış.) */

  /* Mobil mockup'ın imzası: aracın ARKASINDA parlayan büyük çember.
     Fotoğrafın altında (z-index) olduğu için araç önünde kalır. */
  /* ÖLÇÜM: merkez (707, 397) / 853 → x %83, çap 424 px → %50 ekran genişliği.
     Sağ yarısı ekran dışında kalıyor, altı aracın arkasında. */
  .mobil-halka{
    display:block;position:absolute;z-index:-1;
    top:2%;left:auto;right:-9%;width:52vw;max-width:270px;aspect-ratio:1;
    border-radius:50%;
    border:3px solid var(--sari);
    box-shadow:0 0 26px rgba(250,190,0,.55),inset 0 0 26px rgba(250,190,0,.35);
    /* Alt yarısı araç ve zeminle karışsın diye aşağı doğru soluyor. */
    -webkit-mask-image:linear-gradient(200deg,#000 32%,rgba(0,0,0,.35) 62%,transparent 82%);
    mask-image:linear-gradient(200deg,#000 32%,rgba(0,0,0,.35) 62%,transparent 82%);
    animation:halkaNefes 4.5s ease-in-out infinite;
  }
  @keyframes halkaNefes{
    0%,100%{box-shadow:0 0 22px rgba(250,190,0,.45),inset 0 0 22px rgba(250,190,0,.28)}
    50%{box-shadow:0 0 38px rgba(250,190,0,.7),inset 0 0 32px rgba(250,190,0,.45)}
  }
  /* DÖNEN RADAR IŞIĞI — animasyon listesi: "sürekli dönen ışık/radar".
     Halkanın üstünde tur atan parlak yay. */
  .mobil-halka::after{
    content:"";position:absolute;inset:-3px;border-radius:50%;
    border:3px solid transparent;border-top-color:rgba(255,243,196,.95);
    filter:drop-shadow(0 0 9px rgba(250,190,0,.85));
    animation:radarDon 3.6s linear infinite;
  }
  @keyframes radarDon{to{transform:rotate(360deg)}}

  h1{font-size:clamp(23px,6.4vw,28px);margin-bottom:12px;line-height:1.18}
  .ustyazi{font-size:10.5px;margin-bottom:14px;gap:7px}
  .ustyazi .cizgi{width:18px}
  /* [ÖLÇÜM DÜZELTMESİ] Mockup tuvali (853×1844) TAM OLARAK TEK TELEFON
     EKRANI (390×844'ün 2,19 katı) — üst görünüm (başlık→çipler) ekranın
     yarısından azını kaplıyor. Önceki sürümde paragrafla düğmeler arasına
     konan büyük boşluk kahramanı bir ekrandan taşırıyordu ("her şey ekrana
     sığmıyor" geri bildirimi). Boşluk kaldırıldı; düğmelerin sağ ucu aracın
     silik ön kısmına hafif binebilir — mockup'ta da çipler aracın tekerleğine
     değiyor, sorun değil. */
  .acik{font-size:clamp(12.5px,3.3vw,14px);line-height:1.55;max-width:30ch;
    margin-bottom:18px}

  .kahraman-dugme{gap:10px;margin-bottom:14px;flex-wrap:nowrap}
  .kahraman-dugme .btn{height:44px;padding:0 14px;font-size:11px;gap:8px;
    flex:0 0 auto;min-width:0}
  .kahraman-dugme .btn.cerceve{padding:0 13px}
  /* Yazı bloğu araç fotoğrafının soluna sığmalı; düğmeler taşarsa
     fotoğrafın üstüne biner ve ikisi de okunmaz olur. */
  .kahraman-yazi{max-width:none}
  .kahraman-yazi .ustyazi,.kahraman-yazi h1,.kahraman-yazi .acik{max-width:58%}

  /* Üç çip tek satırda kalmalı (mockup). 390 px'de ancak dar dolgu ve
     küçük yazıyla sığıyor — ölçüldü: 332 px gerekiyor, 338 px var. */
  .cipler{
    gap:6px;flex-wrap:nowrap;max-width:none;width:auto;
    overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;
    padding-bottom:2px;
  }
  .cipler::-webkit-scrollbar{display:none}
  .cipler li{height:36px;padding:0 10px;font-size:10px;gap:6px;white-space:nowrap;
    flex:0 0 auto}
  .cipler li svg{width:13px;height:13px}
  /* Mobil mockup'ta ÜÇ çip var (masaüstünde dört). */
  .cipler li:nth-child(4){display:none}

  /* CANLI KONUM rozeti mobilde YOK [KULLANICI KARARI 2026-08-27]:
     "mobilde canlı konum denizli merkezi kaldıralım" — aracın üstünde
     kalabalık yapıyordu. Masaüstünde duruyor. */
  .canli-konum{display:none}

  /* --- BÖLÜM SIRASI: ücret formu kahramanın hemen altında --- */
  #icerik{display:flex;flex-direction:column}
  #kahraman{order:1}
  #ucret{order:2}
  .kartlar-bolum{order:3}
  .halkalar-bolum{order:4}
  .serit-bolum{order:5}
  #hizmetler{order:6}
  #hakkimizda{order:7}
  #araclar{order:8}
  #bolgeler{order:9}
  #sss{order:10}
  #iletisim{order:11}

  /* --- ÜCRET KARTI (mockup'taki "Nereden Nereye?") --- */
  .ucret-bolum{padding:12px 0 clamp(26px,4vh,38px)}
  .ucret-kutu{padding:22px 18px 20px;border-radius:18px}
  .ucret-kutu .bolum-bas{margin-bottom:16px}
  /* Özgüllük: .bolum-bas h2 kuralı dosyada daha sonra geldiği için düz
     .ucret-kutu h2 yenik düşüyordu — başlık kocaman kalıyordu (telefon
     görüntüsünde görüldü). */
  .ucret-kutu .bolum-bas h2{font-size:15px;color:var(--sari);letter-spacing:.02em}
  .ucret-kutu .ustyazi,.ucret-kutu .bolum-acik{display:none}
  .ucret-ic{grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:12px;
    align-items:start}
  /* Sonuç kutusu mobilde hesaptan ÖNCE görünmez (yerini harita alıyor);
     hesap yapılınca tam genişlikte belirir. */
  .ucret-sonuc{display:none;grid-column:1 / -1;min-height:0;padding:16px}
  .ucret-sonuc.geldi{display:grid}
  .mini-harita{display:flex;flex-direction:column;gap:2px}
  .mini-harita svg{width:100%;height:auto}
  .mini-harita .msokak path{stroke:#1C2634;stroke-width:1;fill:none}
  .mini-harita .myol-alt{stroke:rgba(250,190,0,.16);stroke-width:5;fill:none;stroke-linecap:round}
  .mini-harita .myol{stroke:#FABE00;stroke-width:2.4;fill:none;stroke-linecap:round;
    filter:drop-shadow(0 0 4px rgba(250,190,0,.55))}
  .mini-harita .mkuyruk circle{filter:drop-shadow(0 0 5px rgba(255,233,168,.9))}
  .mini-harita .mpin{filter:drop-shadow(0 0 7px rgba(247,63,50,.7))}
  .mini-harita small{font-size:9px;font-weight:700;color:var(--gri);
    letter-spacing:.08em;margin-top:6px}
  .mini-harita b{font-size:24px;font-weight:800;color:var(--sari);line-height:1.1;
    font-variant-numeric:tabular-nums}
  .ucret-form .btn{height:44px;font-size:11px;padding:0 10px}
  .alan{padding:11px 14px;border-radius:12px}
  .alan input{font-size:13.5px}
  .ucret-sonuc{min-height:120px;padding:18px}
  .ucret-not{font-size:10.5px;margin-top:12px}

  /* --- NEDEN BİZ? + kartlar --- */
  .neden-biz{
    display:flex;align-items:center;gap:12px;
    font-size:17px;font-weight:800;letter-spacing:.01em;margin-bottom:16px;
  }
  /* Ölçüm: en parlak piksel beyaz %3,5. %10 yapılırsa tasarımdan sapılır. */
  .neden-biz span{font-size:36px;font-weight:800;color:rgba(255,255,255,.035);
    letter-spacing:-.04em;line-height:1}
  .kartlar-duzen{grid-template-columns:minmax(0,1fr);gap:22px}
  .canli-panel{display:none}          /* mobilde yerini halkalar alır */
  .kartlar{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
  .kart{padding:18px 10px 20px;text-align:center;border-radius:13px}
  .kart::after{display:none}
  .kart-cizgi{display:none}
  /* Ölçüm: ikon dairesel bir ışık halkasının içinde, kontur çizim.
     Başlık BÜYÜK HARF ve hafif krem; açıklama iki satır, ortalı. */
  .kart-ikon{
    width:44px;height:44px;margin:0 auto 12px;border:0;
    background:radial-gradient(circle at 58% 62%,rgba(250,190,0,.22),rgba(250,190,0,.05) 62%,transparent 74%);
    box-shadow:0 0 0 1px rgba(250,190,0,.12) inset;
  }
  .kart-ikon svg{width:22px;height:22px}
  .kart h3{font-size:10px;font-weight:700;letter-spacing:.03em;margin-bottom:8px;
    text-transform:uppercase;color:#E1D9C3;line-height:1.3}
  .kart p{font-size:9.5px;line-height:1.5;max-width:none;color:#838A8D}
  .kart-no{display:none}

  /* --- CANLI TAKSİ DURUMU --- */
  .halkalar-bolum{padding:10px 0 clamp(28px,4.5vh,42px)}
  /* Ölçüm: iki bölüm başlığı aynı boyutta ama farklı hizada —
     "NEDEN BİZ?" sola, "CANLI TAKSİ DURUMU" tam ortaya hizalı. */
  .halka-baslik{font-size:16px;margin-bottom:22px;text-align:center}
  .halkalar{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
  .halka-cember{width:clamp(64px,19vw,86px)}
  .halka-cember b{font-size:clamp(15px,4.2vw,19px)}
  .halka-cember .birim{font-size:9px;top:4px}
  .halka-sayac{gap:9px}
  .halka-sayac p b{font-size:9.5px;text-transform:uppercase;letter-spacing:.02em;
    color:#fff}
  .halka-sayac p small{font-size:9px;text-transform:uppercase;color:#6C7379}
  /* Ölçüm: rakam renkleri sabit değil — 1. ve 4. beyaz, 2. ve 3. sarı. */
  .halka-sayac:nth-child(1) .halka-cember b,
  .halka-sayac:nth-child(4) .halka-cember b{color:#fff}
  .halka-sayac:nth-child(2) .halka-cember b,
  .halka-sayac:nth-child(3) .halka-cember b{color:var(--sari)}

  /* --- HEMEN ARA + yuvarlak WhatsApp --- */
  .serit-bolum{padding:0 0 clamp(22px,4vh,34px)}
  .serit,.serit.yorumsuz{grid-template-columns:minmax(0,1fr) auto;gap:14px;
    align-items:center;justify-content:center}
  /* ÖLÇÜM BULGUSU: yorum/referans kartı mobil mockup'ta YOK. */
  .yorum-kutu{display:none}
  /* "Hemen Ara" TAM YUVARLAK bir hap (85 px yükseklik, radius = yarısı),
     kenarlığı parlak sarı ve dışa ışıyor. */
  .ara-kutu{
    order:1;border-radius:99px;padding:0 20px 0 8px;min-height:62px;gap:12px;
    border-width:2px;box-shadow:0 0 18px rgba(250,190,0,.4);
  }
  .ara-halka{width:46px;height:46px}
  .ara-kutu small{font-size:11.5px}
  .ara-kutu b{font-size:15.5px;margin-top:2px}
  /* Yuvarlak WhatsApp: çerçeve SARI, glif YEŞİL (ölçüm bulgusu — yeşil
     çerçeve yapmak yanlış olur). */
  .wa-kutu{
    order:1;width:62px;height:62px;min-height:62px;padding:0;border-radius:50%;
    justify-content:center;border:2px solid var(--sari);
    box-shadow:0 0 16px rgba(250,190,0,.32);
  }
  /* Özgüllük notu: taban kuralda `.wa-kutu span` (0,1,1) var; yalnız
     `.wa-yazi` (0,1,0) yazmak onu YENEMİYOR ve yazı görünür kalıyordu. */
  .wa-kutu .wa-yazi{display:none}
  .wa-halka{width:auto;height:auto}
  .wa-halka svg{width:28px;height:28px}

  /* --- YÜZEN ARAMA BLOĞU — mockup'ta "HEMEN ARA" hapı ve yuvarlak WhatsApp
     alt menünün üstüne binen, kaydırmayla KAYBOLMAYAN bir blok (hapın alt
     kenarı menü ikonlarının 17 px üstünde ölçüldü). Akışa konursa yalnız
     kaydırınca görünür; kullanıcı "ekranda çıkan butonlar eksik" dedi. --- */
  .mobil-cta{
    display:flex;position:fixed;left:0;right:0;z-index:57;
    /* Alt menünün üstünde NEFES PAYI: 62px iken hap menüyle birleşiyordu
       (kullanıcı bildirdi). Menü ~65px; 80px blokla menü arasında ~15px
       boşluk bırakır. */
    bottom:calc(80px + env(safe-area-inset-bottom,0px));
    padding:0 14px;align-items:center;justify-content:center;gap:12px;
    pointer-events:none;               /* aradaki boşluk sayfayı engellemesin */
  }
  .mobil-cta-ara,.mobil-cta-wa{pointer-events:auto}
  .mobil-cta-ara{
    display:flex;align-items:center;gap:11px;
    min-height:60px;padding:0 16px 0 8px;border-radius:99px;
    background:rgba(3,7,12,.96);border:2px solid var(--sari);
    box-shadow:0 0 20px rgba(250,190,0,.4),0 10px 30px rgba(0,0,0,.55);
  }
  .mobil-cta-halka{
    width:44px;height:44px;border-radius:50%;flex:0 0 auto;
    display:flex;align-items:center;justify-content:center;
    background:#0C0F13;color:var(--sari);border:1px solid rgba(250,190,0,.3);
  }
  .mobil-cta-yazi{display:flex;flex-direction:column}
  .mobil-cta-yazi small{font-size:11px;font-weight:700;color:var(--sari);
    letter-spacing:.05em}
  .mobil-cta-yazi b{font-size:15px;font-weight:700;color:#fff;margin-top:2px;
    font-variant-numeric:tabular-nums}
  .mobil-cta-ok{display:flex;color:var(--sari)}
  /* Yuvarlak WhatsApp: çerçeve SARI, glif YEŞİL (ölçüm — yeşil çerçeve yanlış). */
  .mobil-cta-wa{
    width:58px;height:58px;border-radius:50%;flex:0 0 auto;
    display:flex;align-items:center;justify-content:center;
    background:rgba(3,7,12,.96);border:2px solid var(--sari);color:var(--wa);
    box-shadow:0 0 16px rgba(250,190,0,.32),0 10px 30px rgba(0,0,0,.55);
  }

  /* --- alt menü --- */
  /* Ölçüm: 5 eşit sütun; etkin öğe sarı ve ikonu DOLU, diğerleri kontur. */
  .mobil-cubuk{background:rgba(0,5,11,.97);border-top:1px solid rgba(255,255,255,.05)}
  .mobil-cubuk a{flex:1 1 0;font-size:8.5px;gap:5px;font-weight:700;
    letter-spacing:.02em;color:#7F8287}
  .mobil-cubuk a svg{color:#B9BBBC}
  .mobil-cubuk a.etkin,.mobil-cubuk a.etkin svg{color:var(--sari)}

  /* --- kalan bölümler --- */
  .bolum{padding:clamp(36px,6.5vh,58px) 0}
  .bolum-bas h2{font-size:clamp(21px,5.6vw,27px)}
  .hizmet-agi,.arac-agi,.bolge-agi{grid-template-columns:minmax(0,1fr)}
  .hakkinda-duzen,.iletisim-duzen,.bolge-duzen{grid-template-columns:minmax(0,1fr)}
  .alt-duzen{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
  .alt-serit-ic{flex-direction:column;align-items:flex-start;gap:8px}
  .kategori-agi,.yazi-agi,.ilce-agi{grid-template-columns:minmax(0,1fr)}
}

/* Üst çubukta yer daralınca rozetin uzun metni düşer; hap "● 7/24" olarak
   kalır. Mockup 426 px genişlikte çizildi, 390 px'lik gerçek telefonda logo +
   hap + telefon + hamburger yan yana sığmıyor (ölçüldü: 418 px gerekiyor,
   338 px var). */
@media (max-width:430px){
  .rozet-724 .uzun{display:none}
  .rozet-724{padding:0 11px}
  .marka-yazi{font-size:11.5px}
}

/* Gerçek telefon genişliği (≤430): 4 kart yan yana 85 px'e düşüyor ve
   okunmuyordu (ölçüm raporu da uyardı) — 2×2'ye iner, yazılar okunur boyuta
   çıkar. Mockup'un 4'lü sırası yalnız daha geniş ekranlarda kalır. */
@media (max-width:430px){
  .kartlar{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .kart h3{font-size:11.5px;margin-bottom:8px}
  .kart p{font-size:10.5px;line-height:1.5}
}

/* Çok dar telefonlar (≤360): halkalar da 2×2, üçüncü çip düşer. */
@media (max-width:361px){
  .halkalar{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
  .kahraman-yazi .ustyazi,.kahraman-yazi h1,.kahraman-yazi .acik{max-width:64%}
  .cipler li:nth-child(3){display:none}
}

/* ------------------------------------------------------------ hareket azaltma */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
  .var-js [data-gir]{opacity:1;transform:none}
  .fon-yagmur{display:none}
  .sahne{animation:none;transform:translateY(-50%)}
}