/* ===========================================================
   Alanya Veterineri — yerel rehber
   -----------------------------------------------------------
   Tasarım yönü: "gece nöbeti".
   Bu sayfa çoğunlukla gece yarısı, hayvanı hasta ve telaşlı
   biri tarafından açılıyor. O yüzden:
     · Zemin sıcak-nötr (mavi-gri değil), metin sıcak siyah.
     · Tek bir kor rengi (--ember) var ve SADECE zamana bağlı
       kritik bilgiye ayrıldı: 7/24 kayıtları, acil bölümü.
       Nadir olduğu için gerçekten bağırıyor.
     · "Şu an açık" tek dolu yeşil rozet. 7/24 kartlarda ve
       çalışma saati bilinmeyen kayıtlarda bu rozet hiç
       basılmıyor — her kartta en fazla bir dolu durum rozeti.
     · Köşeler keskin (4px); rozetler ve filtreler hap değil
       dikdörtgen. Başlıklar Condensed — poster/almanak sesi.
     · Emoji yok, süs degrade yok; ikonlar elle çizilmiş çizgi
       ikonlar (pati, ay, stetoskop, mama kabı, makas, yuva).
   =========================================================== */

:root{
  /* --- yüzeyler --- */
  --paper:#F5F4F1;        /* çok hafif sıcak gri — krem DEĞİL */
  --white:#FFFFFF;
  --night:#0F1A16;        /* koyu sıcak yeşil-siyah: başlık + hero */
  --night-dk:#0A120F;     /* acil bandı + footer */

  /* --- metin --- */
  --ink:#151B18;
  --ink-2:#2C3733;
  --slate:#5A6560;        /* paper üzerinde 5.2:1 */
  --on-night:#B4C4BC;     /* night üzerinde 7.8:1 */
  --on-night-2:#8FA399;   /* night üzerinde 5.6:1 */

  /* --- çizgiler --- */
  --line:#E3E0D9;
  --line-2:#CDC9BF;

  /* --- anlam renkleri --- */
  --brand:#0B5140;        /* ladin yeşili — birincil eylem, bağlantı */
  --brand-dk:#083C2F;
  --brand-lt:#E4EDE9;
  --ember:#C2410C;        /* kor — 7/24 ve acil. Beyaz üstünde 5.2:1 */
  --ember-2:#FF8A4C;      /* koyu zemin için kor */
  --ember-lt:#FBF0E9;
  --live:#0F7B45;         /* şu an açık — beyaz üstünde 5.3:1 */
  --wa:#1FA855;
  --star:#C7860A;

  --wrap:1140px;
  --gut:clamp(18px,4vw,32px);
  --r:4px;
  --r-s:3px;

  /* Fira Sans: latin + latin-ext (ğ Ğ İ ı ş ç) + kiril'in üçünü de tam
     taşıyan, küçük puntoda okunurluk için çizilmiş bir grotesk.
     Başlıklarda Condensed kesim: uzun Rusça/Almanca başlıklara yer açıyor. */
  --f:'Fira Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --fd:'Fira Sans Condensed','Fira Sans',system-ui,-apple-system,'Segoe UI',sans-serif;

  /* tek yıldız — .puan__s içinde 5 kez tekrar eden maske */
  --yildiz:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath fill='%23000' d='M7 1.4 8.44 5.42 12.71 5.55 9.33 8.16 10.53 12.25 7 9.85 3.47 12.25 4.67 8.16 1.29 5.55 5.56 5.42Z'/%3E%3C/svg%3E");
  /* uyarı notlarının başındaki işaret — ikon dilinin aynısı, 1.9 çizgi */
  --ik-uyari:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.3v5.5'/%3E%3Cpath d='M12 16.4h.01'/%3E%3C/svg%3E");
  /* hero köşesindeki soluk pati izi */
  --pati-iz:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cellipse cx='7.3' cy='9.4' rx='2' ry='2.7'/%3E%3Cellipse cx='12' cy='7.8' rx='2.05' ry='2.9'/%3E%3Cellipse cx='16.7' cy='9.2' rx='1.95' ry='2.7'/%3E%3Cpath d='M12 13.2c-3.2 0-5.5 2.4-5.5 4.8 0 1.7 1.4 2.6 3 2.6h5c1.6 0 3-.9 3-2.6 0-2.4-2.3-4.8-5.5-4.8Z'/%3E%3C/svg%3E");
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:130px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
button,input,select{font:inherit}
::selection{background:var(--ember);color:#fff}

/* app.js kartları hidden ile gizliyor; .kart display:flex olduğu için
   tarayıcının [hidden] kuralını eziyordu — filtre görsel olarak hiçbir şey
   yapmıyordu. Yazar seviyesinde geri alınıyor. */
[hidden]{display:none!important}

h1,h2,h3{margin:0;font-family:var(--fd);line-height:1.1;letter-spacing:-.015em;font-weight:800}
h1{font-size:clamp(34px,5.6vw,60px);line-height:1.02;letter-spacing:-.022em}
h2{font-size:clamp(22px,2.9vw,32px)}
h3{font-size:18px;font-weight:700}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Odak halkası her zeminde görünsün. */
:focus-visible{outline:3px solid var(--ember);outline-offset:2px;border-radius:2px}
.top :focus-visible,.hero :focus-visible,.dhero :focus-visible,
.acil :focus-visible,.foot :focus-visible{outline-color:var(--ember-2)}

/* ---------- üst çubuk ---------- */
.top{background:var(--night);color:#fff;position:sticky;top:0;z-index:50;
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.09)}
/* Rusça ve Almanca etiketler Türkçeden uzun: sığmayınca satır atlasın,
   kelimeler kırılmasın. */
.top__in{max-width:var(--wrap);margin-inline:auto;padding:11px var(--gut);
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;min-height:66px}
.logo{display:flex;align-items:center;gap:11px;text-decoration:none;color:#fff;
  font-family:var(--fd);font-weight:800;letter-spacing:-.01em;font-size:19px;line-height:1.12}
.logo svg{width:32px;height:32px;flex:none}
/* İmleç/odak gelince işaret hafifçe bastırılıyor — bağlantı olduğu belli
   olsun diye tek, çok küçük bir geri bildirim. Yalnızca transform. */
.logo svg{transition:transform .16s ease-out}
.logo:hover svg,.logo:focus-visible svg{transform:scale(1.07)}
.logo:active svg{transform:scale(.94)}

/* --- logo girişi: oturumda bir kez ---
   Önce "Alanya Veterineri" adı beliriyor, sonra pati adın yanına bir iz gibi
   basılıyor: büyükten gerçek boyuta iniyor, yaylanma yok — damga hissi.
   Kurallar YALNIZCA <html class="giris"> varken çalışır; sınıfı <head>'deki
   betik ilk ziyarette ekliyor. Varsayılan (sınıfsız) hâl zaten son karedir,
   bu yüzden sonraki sayfalarda hiçbir sıçrama/flash olmuyor. Tamamı
   transform + opacity: başlığın yüksekliği değişmediği için app.js'in ölçtüğü
   --topH ve ona yapışan filtre çubuğu kaymıyor. Toplam süre 0,8 sn. */
.giris .logo>span{animation:logo-ad .34s cubic-bezier(.2,.8,.3,1) both}
.giris .logo svg{transition:none;animation:logo-iz .34s .28s cubic-bezier(.2,.9,.25,1) both}
.giris .logo small{animation:logo-ad .3s .5s ease-out both}
@keyframes logo-ad{
  from{opacity:0;transform:translateX(-6px)}
  to{opacity:1;transform:none}
}
@keyframes logo-iz{
  0%{opacity:0;transform:scale(1.85)}
  55%{opacity:1}
  100%{opacity:1;transform:scale(1)}
}
.logo span small{display:block;font-family:var(--f);font-size:10px;font-weight:500;
  color:var(--on-night-2);letter-spacing:.09em;text-transform:uppercase;margin-top:3px}
.top__nav{margin-inline-start:auto;display:flex;gap:2px}
.top__nav a{display:inline-flex;align-items:center;gap:6px;padding:10px 13px;min-height:44px;
  border-radius:var(--r-s);text-decoration:none;font-size:14.5px;font-weight:500;
  color:var(--on-night);white-space:nowrap;transition:background .15s,color .15s}
.top__nav a:hover{background:rgba(255,255,255,.09);color:#fff}
.top__nav svg{width:15px;height:15px;flex:none}
.top__acil,.top__acil:hover{color:var(--ember-2)}

/* Dil seçici: parlak 1px ızgara ve bembeyaz aktif blok yerine, koyu bir yuva
   içinde yumuşak bir kaydırıcı. Aktif olan ışığı alır, diğerleri sönük değil
   sadece geride durur — dört ayrı düğme değil, tek bir nesne gibi okunsun. */
.diller{display:flex;align-items:center;gap:2px;padding:3px;border-radius:6px;
  background:rgba(0,0,0,.28);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.diller a{min-width:38px;height:30px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:4px;text-decoration:none;font-size:11.5px;font-weight:700;letter-spacing:.07em;
  color:rgba(255,255,255,.62);transition:color .18s ease,background-color .18s ease}
.diller a:hover{color:rgba(255,255,255,.92);background:rgba(255,255,255,.06)}
.diller a[aria-current="true"]{color:#fff;background:rgba(255,255,255,.13);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14)}
.diller a[aria-current="true"]:hover{background:rgba(255,255,255,.16)}
/* Kutucuk görsel olarak küçük kalsın ama parmak hedefi 44px olsun:
   görünümü değiştirmeden dokunma alanını görünmez bir katmanla büyütüyoruz. */
.diller a{position:relative}
.diller a::after{content:"";position:absolute;inset:-7px -3px}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;background:var(--night);color:#fff;
  padding:clamp(34px,6vw,74px) 0 clamp(32px,5vw,56px)}
/* Tek bir sıcak ışık huzmesi — duvar kâğıdı degrade değil, lambanın izi. */
.hero::before{content:"";position:absolute;top:-45%;inset-inline-end:-12%;
  width:min(760px,80vw);aspect-ratio:1;pointer-events:none;
  background:radial-gradient(circle,rgba(210,74,18,.22),rgba(210,74,18,0) 62%)}
/* Masaüstünde başlık/arama solda, "şu an" paneli sağda. Mobilde tek sütun ve
   panel arama kutusunun ALTINDA — sayfanın birinci işi o kutuyu göstermek. */
.hero__in{position:relative;display:grid;gap:26px}
@media(min-width:1000px){
  .hero__in{grid-template-columns:minmax(0,1fr) 296px;gap:44px;align-items:start}
}
.hero h1{color:#fff;max-width:16ch;text-wrap:balance}
.hero__p{color:var(--on-night);font-size:clamp(15.5px,1.7vw,18.5px);max-width:60ch;
  margin-top:16px;line-height:1.55}
.hero__ara{margin-top:clamp(22px,3vw,30px);max-width:620px}
.ara{position:relative}
.ara input{width:100%;height:58px;padding:0 16px 0 48px;border:2px solid transparent;
  border-radius:var(--r);background:#fff;color:var(--ink);font-size:16.5px;font-weight:500}
.ara input::placeholder{color:#87908B}
.ara input:focus{outline:3px solid var(--ember-2);outline-offset:2px}
.ara svg{position:absolute;inset-inline-start:16px;top:50%;transform:translateY(-50%);
  width:19px;height:19px;color:var(--slate);pointer-events:none}

.hero__ist{margin-top:24px;display:flex;flex-wrap:wrap;gap:8px 20px;
  font-size:13.5px;color:var(--on-night-2)}
.hero__ist span{display:inline-flex;align-items:baseline;gap:6px}
.hero__ist b{font-family:var(--fd);color:#fff;font-size:20px;font-weight:800;letter-spacing:-.01em}
@media(min-width:760px){
  .hero__ist{gap:8px 0}
  .hero__ist span{padding-inline:18px;border-inline-start:1px solid rgba(255,255,255,.15)}
  .hero__ist span:first-child{padding-inline-start:0;border-inline-start:0}
}

/* ---------- hero: "şu an" paneli ---------- */
/* Rakamlar kor rengiyle: zamana bağlı kritik bilgi, sitenin renk mantığına
   uyuyor. tabular-nums + sabit genişlik — sayı 7'den 12'ye geçtiğinde
   yanındaki metin oynamıyor. */
.simdi{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.15);
  border-radius:var(--r);padding:16px 18px 18px;align-self:start}
.simdi__bas{display:flex;align-items:center;gap:8px;margin:0 0 12px;
  font-family:var(--fd);font-size:12.5px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--on-night-2)}
.simdi__bas svg{width:16px;height:16px;flex:none}
.simdi__satir{display:flex;align-items:baseline;gap:10px;margin:0;
  font-size:14px;line-height:1.35;color:var(--on-night)}
.simdi__satir+.simdi__satir{margin-top:10px;padding-top:12px;
  border-top:1px solid rgba(255,255,255,.12)}
.simdi__satir span{display:flex;align-items:baseline;gap:7px;flex:1}
.simdi__satir svg{width:15px;height:15px;flex:none;color:var(--ember-2);
  align-self:center}
.simdi__n{font-family:var(--fd);font-size:34px;font-weight:800;line-height:.9;
  color:var(--ember-2);font-variant-numeric:tabular-nums;
  min-width:1.15ch;text-align:end;flex:none}
.simdi__git{width:100%;margin-top:16px;background:transparent;color:#fff;
  border-color:rgba(255,255,255,.3);justify-content:space-between;
  font-size:14px;text-align:start}
.simdi__git:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.simdi__git svg{color:var(--ember-2)}

/* ---------- filtre çubuğu ---------- */
/* --topH: başlık yüksekliği; app.js ölçüp yazar, JS yoksa 66px'lik tahmin kalır. */
.filt{background:var(--white);border-bottom:1px solid var(--line);position:sticky;
  top:var(--topH,66px);z-index:40}
.filt__in{max-width:var(--wrap);margin-inline:auto;padding:9px var(--gut);
  display:flex;flex-wrap:wrap;gap:7px 14px;align-items:center}
/* 8 bölge + 5 düğme masaüstünde iki satıra taşıyor; sarmalayıcı sayesinde
   sonuç sayacı bu satırların dışında, sabit yerinde kalıyor. */
.filt__kaydir{display:flex;flex-wrap:wrap;gap:7px;align-items:center;flex:1 1 auto;min-width:0}
.chip{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 13px;
  border:1px solid var(--line-2);border-radius:var(--r-s);background:var(--white);
  font-size:14px;font-weight:500;cursor:pointer;white-space:nowrap;color:var(--ink-2);
  transition:border-color .14s,background .14s,color .14s}
.chip svg{width:16px;height:16px;flex:none;color:var(--slate)}
.chip:hover{border-color:var(--ink);color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--night);border-color:var(--night);color:#fff;font-weight:700}
.chip[aria-pressed="true"] svg{color:#fff}
/* Yalnızca iki süzgeç anlam rengi taşıyor; gerisi nötr kalıyor ki bunlar
   listede gerçekten öne çıksın. */
.nokta{width:9px;height:9px;border-radius:50%;background:var(--live);flex:none}
.chip--acik[aria-pressed="true"]{background:var(--live);border-color:var(--live)}
.chip--acik[aria-pressed="true"] .nokta{background:#fff}
.chip--24 svg{color:var(--ember)}
.chip--24[aria-pressed="true"]{background:var(--ember);border-color:var(--ember)}
.chip--24[aria-pressed="true"] svg{color:#fff}
.filt__ayrac{width:1px;height:24px;background:var(--line);margin-inline:2px;flex:none}
.filt__sonuc{margin-inline-start:auto;font-size:13px;font-weight:700;color:var(--slate);
  white-space:nowrap;font-variant-numeric:tabular-nums}
/* Düğmeler iki satıra taştığında sayaç alta düşmesin, blokun sağında kalsın. */
@media(min-width:760px){
  .filt__in{flex-wrap:nowrap}
  .filt__sonuc{flex:none;align-self:center}
}

/* Dar ekranda iki yapışkan çubuk üst üste binip ekranın üçte birini yiyor:
   başlık akışa döner, filtre şeridi tek satırda yatay kayar, sonuç sayacı
   kendi satırında kalır (eskiden mobilde tamamen gizleniyordu). */
@media(max-width:759px){
  .top{position:static}
  .top__in{min-height:0;gap:9px;padding-block:10px}
  .logo span small{display:none}
  .top__nav{order:3;width:100%;gap:0;margin-inline-start:0;justify-content:space-between;
    border-top:1px solid rgba(255,255,255,.1);padding-top:4px}
  .top__nav a{padding:10px;font-size:14px;flex:1;justify-content:center}
  .diller{margin-inline-start:auto}
  .diller a{min-width:36px;height:34px}
  .logo{font-size:18px}
  .logo svg{width:28px;height:28px}
  .filt{top:0!important}
  .filt__in{padding-block:8px 9px;gap:7px 0}
  .filt__kaydir{flex:1 0 100%;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut)}
  .filt__kaydir::-webkit-scrollbar{display:none}
  .chip{flex:none;min-height:42px}
  .filt__sonuc{margin-inline-start:0}
}

/* ---------- liste ---------- */
.liste{padding:clamp(20px,3.2vw,32px) 0 clamp(40px,6vw,72px)}
/* align-items:start — 42 kaydın yalnızca 3'ünde görsel var, görselli ve
   görselsiz kart yan yana geldiğinde kartları eşit yüksekliğe germek
   kısa kartın ortasında kocaman bir boşluk bırakıyordu. Her kart kendi
   yüksekliğinde duruyor. */
.kartlar{display:grid;gap:14px;align-items:start}
@media(min-width:860px){.kartlar{grid-template-columns:1fr 1fr}}

.kart{position:relative;background:var(--white);border:1px solid var(--line);
  border-radius:var(--r);display:flex;flex-direction:column;overflow:hidden;
  transition:border-color .16s,box-shadow .16s}
.kart:hover{border-color:var(--line-2);box-shadow:0 6px 20px -10px rgba(21,27,24,.3)}
/* 7/24 kayıtlar (42'de 3 tane) tam çerçeveden kor rengiyle işaretli — listede
   kaydırırken "gece açık olan bu" bir bakışta ayrılıyor. */
.kart[data-24="1"]{border-color:var(--ember);box-shadow:0 0 0 1px var(--ember)}
.kart[data-24="1"]:hover{box-shadow:0 0 0 1px var(--ember),0 8px 22px -10px rgba(194,65,12,.45)}

/* Görsel 42 kaydın yalnızca 3'ünde var: görselsiz kart eksik değil, kısa
   duracak şekilde kuruldu — gövde her hâlükârda kendi iç boşluğuyla başlıyor. */
.kart__gorsel{background:#EAE7E1;overflow:hidden;position:relative}
.kart__gorsel img{width:100%;aspect-ratio:16/9;object-fit:cover;
  transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.kart__gorsel picture{display:contents}
/* Fotoğrafa nazik muamele: alt kenarda çok hafif bir gölge, gövdeyle arasında
   sert bir kesim olmasın. */
.kart__gorsel::after{content:"";position:absolute;inset:auto 0 0;height:38%;
  background:linear-gradient(to top,rgba(15,26,22,.16),transparent);pointer-events:none}
.kart:hover .kart__gorsel img{transform:scale(1.028)}

.kart__govde{padding:15px 16px 16px;display:flex;flex-direction:column;gap:10px;flex:1}
.kart__durum{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.kart__ad{font-size:21px;font-weight:700;letter-spacing:-.008em;line-height:1.18;
  text-wrap:balance}
.kart__ad a{text-decoration:none;background-image:linear-gradient(currentColor,currentColor);
  background-size:0 2px;background-position:0 100%;background-repeat:no-repeat;
  transition:background-size .22s,color .15s}
.kart__ad a:hover{color:var(--brand);background-size:100% 2px}
/* Kartın boş alanı da işletme sayfasına götürsün (telefonda isabet alanı
   büyüsün) ama düğmeler ve seçilebilir metinler üstte kalsın. */
.kart__ad a::after{content:"";position:absolute;inset:0;z-index:1}
.kart__alt,.kart__durum,.kart__meta,.kart__ozet,.kart__bilgi{position:relative;z-index:2}

.kart__meta{display:flex;align-items:center;gap:6px 12px;flex-wrap:wrap;
  font-size:13px;color:var(--slate);margin-top:-3px}
.kart__bolge{display:inline-flex;align-items:center;gap:6px;font-weight:500}
.kart__bolge::before{content:"";width:3px;height:3px;border-radius:50%;background:var(--line-2)}
.kart__ozet{font-size:14.5px;color:var(--ink-2);line-height:1.58;margin:0}
.kart__bilgi{display:grid;gap:6px;font-size:14px;color:var(--ink-2);
  border-top:1px solid var(--line);padding-top:11px}
.kart__bilgi div{display:flex;gap:9px;align-items:flex-start}
.kart__bilgi svg{width:16px;height:16px;flex:none;margin-top:2px;color:var(--slate)}
.kart__bilgi div:first-child span{font-weight:500}
/* Çalışma saati Google'da yayınlanmamış: bilgi yokluğunu vurgulamayalım. */
.kart__bilgi div.yok span{font-weight:400;color:var(--slate)}
.kart__bilgi div.yok svg{color:var(--line-2)}
.kart__alt{margin-top:auto;padding-top:12px;display:flex;flex-wrap:wrap;gap:8px}

/* ---------- rozetler ---------- */
/* Sıra: 7/24 (kor, dolu) > şu an açık (yeşil, dolu) > kapalı (sessiz çerçeve)
   > tür > öne çıkan (kesik çizgi, en sessiz). Zamana bağlı bilgi dolu, geri
   kalan her şey çerçeveli — hiyerarşi renk yoğunluğuyla kuruluyor. */
.rozet{display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border-radius:var(--r-s);
  font-size:12px;font-weight:700;line-height:1.2;white-space:nowrap}
.rozet svg{width:14px;height:14px;flex:none}
.rozet--24{background:var(--ember);color:#fff}
.rozet--acik{background:var(--live);color:#fff}
.rozet--kapali{background:transparent;border:1px solid var(--line-2);color:var(--slate);
  font-weight:500;padding:4px 8px}
.rozet--acik::before,.rozet--kapali::before{content:"";width:8px;height:8px;border-radius:50%;
  background:currentColor;flex:none}
.rozet--tur{background:transparent;border:1px solid var(--line-2);color:var(--ink-2);
  font-weight:500;padding:4px 8px}
.rozet--tur svg{color:var(--brand)}
/* "Öne çıkan" ücretli yerleşim değil, sadece rehberin ilk kayıtları:
   kesik çizgi ve düşük kontrastla bilerek en sessiz rozet. */
.rozet--one{background:transparent;border:1px dashed var(--line-2);color:var(--slate);
  font-weight:500;font-size:11.5px;padding:4px 8px}
/* JS yokken, 7/24 kartlarda ve saati bilinmeyen kayıtlarda boş kalan durum
   kutusu yer kaplamasın. */
.durum:empty{display:none}

/* Google puanı: kesirli dolan yıldız şeridi (5 kez tekrarlanan SVG maske). */
.puan{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--slate)}
.puan b{color:var(--ink);font-weight:700;font-size:14px;font-variant-numeric:tabular-nums}
.puan__s{width:70px;height:14px;flex:none;
  background:linear-gradient(90deg,var(--star) 0 var(--p,0%),var(--line-2) var(--p,0%) 100%);
  -webkit-mask:var(--yildiz) 0 0/14px 14px repeat-x;
          mask:var(--yildiz) 0 0/14px 14px repeat-x}
.puan--koyu{color:var(--on-night-2)}
.puan--koyu b{color:#fff}
.puan--koyu .puan__s{background:linear-gradient(90deg,#F2B23C 0 var(--p,0%),rgba(255,255,255,.22) var(--p,0%) 100%)}

/* ---------- düğmeler ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;padding:0 15px;border-radius:var(--r);border:1px solid transparent;
  font-size:14.5px;font-weight:700;text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:background .15s,border-color .15s,color .15s}
.btn svg{width:17px;height:17px;flex:none}
.btn--ara{background:var(--brand);color:#fff}
.btn--ara:hover{background:var(--brand-dk)}
/* WhatsApp bilerek dolu yeşil değil: kartta tek dolu eylem düğmesi telefon
   olsun, göz oraya gitsin. Simge yine kendi yeşili. */
.btn--wa{border-color:var(--line-2);background:var(--white);color:var(--ink)}
.btn--wa svg{color:var(--wa)}
.btn--wa:hover{border-color:var(--wa)}
.btn--dis{border-color:var(--line-2);color:var(--ink);background:var(--white)}
.btn--dis:hover{border-color:var(--ink)}
.btn--dis svg{color:var(--slate)}
.btn--buyuk{min-height:52px;padding:0 22px;font-size:16px}
.btn--buyuk svg{width:19px;height:19px}
.dhero .btn--wa,.dhero .btn--dis{background:transparent;color:#fff;border-color:rgba(255,255,255,.28)}
.dhero .btn--wa:hover,.dhero .btn--dis:hover{border-color:#fff;background:rgba(255,255,255,.07)}
.dhero .btn--dis svg{color:var(--on-night)}

.bos{background:var(--white);border:1px dashed var(--line-2);border-radius:var(--r);
  padding:40px 22px;text-align:center;color:var(--slate)}
.bos b{color:var(--ink);font-size:17px;font-family:var(--fd);font-weight:700}

/* ---------- detay sayfası ---------- */
.dhero{background:var(--night);color:#fff;padding:clamp(24px,4vw,46px) 0 clamp(24px,4vw,40px);
  position:relative;overflow:hidden}
.dhero::before{content:"";position:absolute;top:-60%;inset-inline-end:-8%;
  width:min(620px,70vw);aspect-ratio:1;pointer-events:none;
  background:radial-gradient(circle,rgba(210,74,18,.18),rgba(210,74,18,0) 62%)}
.dhero .wrap{position:relative}
.crumbs{font-size:12.5px;color:var(--on-night-2);margin-bottom:16px;
  display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.crumbs a{color:var(--on-night);text-decoration:none}
.crumbs a:hover{color:#fff;text-decoration:underline}
.crumbs span[aria-hidden]{color:rgba(255,255,255,.28)}
.dhero__durum{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:13px}
.dhero .rozet--tur{border-color:rgba(255,255,255,.3);color:#fff}
.dhero .rozet--tur svg{color:var(--on-night)}
.dhero h1{color:#fff;text-wrap:balance;max-width:19ch}
.dhero__meta{margin-top:15px;display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center;
  font-size:14px;color:var(--on-night)}
.dhero__yer{display:inline-flex;align-items:center;gap:7px}
.dhero__yer svg{width:16px;height:16px;flex:none;color:var(--on-night-2)}
.dhero__cta{margin-top:22px;display:flex;flex-wrap:wrap;gap:9px}

.dgrid{display:grid;gap:18px;padding:clamp(22px,3.4vw,36px) 0 clamp(40px,6vw,64px)}
@media(min-width:880px){
  .dgrid{grid-template-columns:1.5fr 1fr;align-items:start}
  .dgrid>aside{position:sticky;top:calc(var(--topH,66px) + 18px)}
}
.kutu{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:20px}
.kutu+.kutu,.dgorsel+.kutu{margin-top:18px}
.kutu h2{font-size:20px;margin-bottom:12px}
.kutu h3{margin:20px 0 9px;font-family:var(--fd);font-size:12.5px;text-transform:uppercase;
  letter-spacing:.11em;color:var(--slate);font-weight:700}
.kutu__not{font-size:14.5px;color:var(--slate);margin-bottom:14px}
.kutu p{font-size:15.5px;color:var(--ink-2);line-height:1.65}
/* Rusça/Almanca künye etiketleri uzun; sabit 104px'te kırılıyordu. */
.satir{display:grid;grid-template-columns:minmax(92px,36%) 1fr;gap:14px;
  padding:11px 0;border-bottom:1px solid var(--line);font-size:15px;align-items:baseline}
.satir:last-child{border-bottom:0}
.satir:first-of-type{padding-top:2px}
.satir__e{font-family:var(--fd);color:var(--slate);font-size:13px;font-weight:700;
  text-transform:uppercase;letter-spacing:.07em;line-height:1.35}
.satir a{color:var(--brand);font-weight:700;text-decoration:underline;
  text-decoration-color:var(--brand-lt);text-underline-offset:3px;text-decoration-thickness:2px}
.satir a:hover{text-decoration-color:var(--brand)}
.etiketler{display:flex;flex-wrap:wrap;gap:7px;margin-top:4px}
.etiket{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-s);
  padding:5px 10px;font-size:13px;color:var(--ink-2);line-height:1.35}
.harita{width:100%;height:300px;border:0;border-radius:var(--r);filter:saturate(.9);display:block}
.dgorsel{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#EAE7E1}
.dgorsel img{width:100%;aspect-ratio:16/9;object-fit:cover}
.dgorsel picture{display:contents}

/* Uyarı notu: sarı yapışkan kâğıt da değil, kenarında kalın renk şeridi de
   değil — ince tam çerçeve + baştaki uyarı işareti. İşaret kartlardaki çizgi
   ikon diliyle aynı kalemle çizildi. */
.uyari{position:relative;background:var(--ember-lt);border:1px solid #EAD3C3;
  border-radius:var(--r);padding:14px 16px;padding-inline-start:48px;
  font-size:14.5px;color:#6B3A1E;margin-top:18px;line-height:1.55}
.uyari::before{content:"";position:absolute;inset-inline-start:16px;top:15px;
  width:20px;height:20px;background:var(--ember);
  -webkit-mask:var(--ik-uyari) center/contain no-repeat;
          mask:var(--ik-uyari) center/contain no-repeat}
.uyari a{color:#6B3A1E;font-weight:700}

/* Telefonda sabit arama şeridi */
.cagir,.cagir-bosluk{display:none}
@media(max-width:759px){
  .cagir-bosluk{display:block;height:78px}
  .cagir{display:flex;gap:8px;position:fixed;inset-inline:0;bottom:0;z-index:60;
    padding:10px var(--gut) calc(10px + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.96);backdrop-filter:blur(8px);
    border-top:1px solid var(--line-2)}
  .cagir .btn{flex:1;min-height:50px;font-size:15.5px}
  .cagir .btn--wa{flex:0 0 auto;padding-inline:18px}
  .cagir .btn--wa span{display:none}
  .dgrid>aside{position:static}
}

/* ---------- acil bandı ---------- */
/* Koyu zemin bilerek: listenin aydınlık akışını kesiyor ve "burası ciddi
   kısım" demenin ucuz numaraya kaçmayan yolu. Başlığın üstündeki kısa kural
   bir gazete kickerı — kutunun kenarına yapıştırılmış şerit değil. */
.acil{background:var(--night-dk);color:var(--on-night);position:relative;overflow:hidden;
  padding:clamp(36px,5vw,66px) 0}
.acil::after{content:"";position:absolute;inset-inline-start:-4%;bottom:-30%;
  width:min(320px,44vw);aspect-ratio:1;opacity:.04;pointer-events:none;
  background:var(--pati-iz) center/contain no-repeat}
.acil .wrap{position:relative}
.acil__in{max-width:68ch}
.acil h2{color:#fff;font-size:clamp(25px,3.4vw,38px);margin-bottom:18px}
.acil h2::before{content:"";display:block;width:46px;height:4px;background:var(--ember);
  margin-bottom:20px}
.acil p{color:var(--on-night);line-height:1.72;font-size:15.5px}
.acil__lead{font-size:clamp(16.5px,2vw,19px);color:#E6EDE9;line-height:1.6}
.acil b,.acil strong{color:var(--ember-2);font-weight:700}
.acil a{color:#fff}

/* ---------- rehber yazısı + SSS ---------- */
.yazi{background:var(--white);padding:clamp(34px,5vw,60px) 0 clamp(40px,6vw,68px)}
.yazi__in{max-width:70ch}
.yazi h2{font-size:clamp(21px,2.6vw,29px);margin:40px 0 14px}
.yazi h2:first-child{margin-top:0}
.yazi p{font-size:16px;color:var(--ink-2);line-height:1.72}
.yazi b,.yazi strong{color:var(--ink);font-weight:700}
.madde{margin:0;padding-inline-start:0;list-style:none;display:grid;gap:13px}
.madde li{padding-inline-start:22px;position:relative;font-size:15.5px;color:var(--ink-2);
  line-height:1.65}
.madde li::before{content:"";position:absolute;inset-inline-start:0;top:9px;
  width:9px;height:3px;background:var(--ember)}
.madde b{color:var(--ink)}

.sss{border-top:1px solid var(--line);margin-top:6px}
.sss details{border-bottom:1px solid var(--line)}
.sss summary{cursor:pointer;padding:16px 34px 16px 0;font-weight:700;font-size:15.5px;
  list-style:none;position:relative;min-height:48px}
.sss summary::-webkit-details-marker{display:none}
.sss summary:hover{color:var(--brand)}
.sss summary::after{content:"";position:absolute;inset-inline-end:8px;top:23px;
  width:9px;height:9px;border-inline-end:2px solid var(--slate);border-bottom:2px solid var(--slate);
  transform:rotate(45deg);transition:transform .2s}
.sss details[open] summary::after{transform:rotate(-135deg);top:27px}
.sss details p{padding:0 0 18px;font-size:15px;color:var(--slate);line-height:1.68;max-width:66ch}

/* ---------- footer ---------- */
.foot{background:var(--night-dk);color:var(--on-night-2);font-size:14.5px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}
.foot__in{max-width:var(--wrap);margin-inline:auto;padding:40px var(--gut) 30px;
  display:grid;gap:26px}
@media(min-width:760px){.foot__in{grid-template-columns:1.7fr 1fr 1fr;gap:34px}}
.foot h4{color:#fff;font-family:var(--fd);font-size:12.5px;text-transform:uppercase;
  letter-spacing:.12em;margin:0 0 13px;font-weight:700}
/* İlk sütunun başlığı zaten site adı; işareti oraya koyup ayrı bir logo satırı
   basmıyoruz — aynı ad iki kez görünmesin. */
.foot h4.foot__mark{display:flex;align-items:center;gap:10px;font-size:18px;
  font-weight:800;letter-spacing:-.01em;text-transform:none;margin-bottom:14px}
.foot__mark svg{width:28px;height:28px;flex:none}
.foot p{line-height:1.65}
.foot ul{list-style:none;padding:0;margin:0;display:grid;gap:4px}
.foot li a{display:inline-flex;align-items:center;min-height:34px}
.foot a{color:var(--on-night-2);text-decoration:none;transition:color .15s}
.foot a:hover{color:#fff}
.foot__bot{border-top:1px solid rgba(255,255,255,.09);padding:18px var(--gut);
  max-width:var(--wrap);margin-inline:auto;font-size:12.5px;display:flex;flex-wrap:wrap;
  gap:10px 20px;justify-content:space-between;color:#75887E}

/* ---------- hareket tercihi ---------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  .kart:hover .kart__gorsel img{transform:none}
  /* Logo doğrudan son hâliyle gelsin — <head>'deki betik zaten sınıfı
     eklemiyor, bu ikinci güvenlik kilidi. */
  .giris .logo>span,.giris .logo svg,.giris .logo small,
  .logo:hover svg,.logo:focus-visible svg,.logo:active svg{
    animation:none!important;opacity:1!important;transform:none!important}
}