/* =====================================================================
   Sinema Haritaları
   ---------------------------------------------------------------------
   Tek stil dosyası. Sıralama:
     1. Değişkenler / tema
     2. Temel
     3. Başlık ve gezinme
     4. Manşet
     5. Filtre çubuğu
     6. Salon panelleri  (ana sayfanın kalbi)
     7. Salon sayfası
     8. Uyarı sayfası
     9. Harita
    10. Ziyaretçi puanı
    11. Metin sayfaları
    12. Alt bilgi
    13. Küçük ekranlar
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Değişkenler
   ------------------------------------------------------------------ */
/*
   Renkler Filmograf Media'nın kimliğinden geliyor: nötr mürekkep (#111)
   ve tek bir sıcak kehribar (#ffb300). Eski sitedeki kahverengiye çalan
   sepya tonları kaldırıldı; iki site yan yana açıldığında aynı ailedenmiş
   gibi duruyor.

   İki kehribar var, bilerek:
     --brand  saf marka rengi. Dolu düğme, marka noktası, yıldız gibi
              boyalı yüzeylerde kullanılıyor; iki temada da aynı.
     --gold   yazı ve kenarlık rengi. Gündüz temasında beyaz üstünde
              okunabilsin diye koyulaşıyor.
*/
:root {
  color-scheme: dark;

  --ink:        #0b0b0c;
  --ink-2:      #141416;
  --ink-3:      #1c1c1f;
  --ink-4:      #26262a;

  --paper:      #f7f7f5;
  --paper-2:    #c8c8c4;
  --paper-dim:  #8e8e8a;
  --paper-faint:#6b6b67;

  --rule:       #2a2a2e;
  --rule-soft:  #1f1f23;

  --brand:      #ffb300;
  --gold:       #ffb300;
  --gold-deep:  #ff9e00;
  --gold-glow:  rgba(255, 179, 0, .16);

  /* Kehribar zeminin üstüne gelen yazı rengi. */
  --on-brand:   #111111;

  /* Fare üstüne gelince.
     İki tema ters yönde çalışıyor: karanlıkta yüzey açılıyor, aydınlıkta
     kehribara çalan sıcak bir zemin oluyor ve dolu düğme koyulaşıyor.
     Aydınlık temada dolu düğmeyi beyaza doğru açmak kontrastı düşürüyor,
     düğme fareyle sönüyormuş gibi görünüyordu. */
  --vurgu-zemin: var(--ink-3);
  --brand-2:     #ffc233;

  /* Sayfanın en üstündeki hafif aydınlanma. Renk taşımıyor: eskiden
     kehribar bir hâle vardı, sayfanın tepesini kirli sarıya boyuyordu. */
  --ust-isik:   rgba(255, 255, 255, .04);

  --rust:       #e0563d;
  --rust-soft:  rgba(224, 86, 61, .12);
  --moss:       #86b25a;

  /* Puan basamakları.
     Beş adım da birbirinden ayrı: 5 marka kehribarı, 4 koyu kehribar,
     3 bilerek nötr gri (taraf tutmuyor), 2 kiremit, 1 kırmızı. Önceden
     1 ve 2 aynı renkti, 4 de neredeyse görünmüyordu. */
  --puan-5:     #ffb300;
  --puan-4:     #e08e1c;
  --puan-3:     #8f8f8a;
  --puan-2:     #e0704a;
  --puan-1:     #d9432f;

  --shadow:     0 1px 0 rgba(255,255,255,.03), 0 18px 40px -28px rgba(0,0,0,.9);

  /* Eski sitedeki yazı tipi — sistemin kendi arayüz fontu. */
  --sans:   -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto,
            "Helvetica Neue", Arial, sans-serif;
  --serif:  var(--sans);

  /* Sayfa genişliği.
     1180 piksel geniş ekranda telefon gibi duruyordu: iki yanda yüzlerce
     piksel boş kalıyor, liste ortada dar bir şerit hâlinde akıyordu.
     Artık masaüstünde gerçekten yayılıyor; okunabilirliği kaybetmemek
     için metin sayfaları kendi dar ölçüsünü koruyor (.metin 70ch). */
  --wrap:   1440px;
  --gutter: clamp(20px, 4vw, 56px);

  /* Okunabilir satır uzunluğu — geniş ekranda uzayıp gitmesin diye
     gövde metinlerinde tekrar ediyor. */
  --okuma:  72ch;
}

/* Çok geniş ekranlarda bir kademe daha açılıyor. */
@media (min-width: 1760px) {
  :root { --wrap: 1620px; }
}

/* Gündüz teması — üst menüdeki düğmeyle açılıyor.
   ---------------------------------------------------------------------
   Önceki hâli düz beyaz üstünde nötr gridi: karanlık temanın renkleri
   ters çevrilmiş gibi duruyor, sitenin kendi kimliği kayboluyordu.
   Şimdi zemin kâğıt gibi sıcak kırık beyaz, kartlar onun üstünde saf
   beyaz duruyor (kart nerede başlıyor, gölge olmadan da belli) ve
   kehribar yalnızca değişkende değil, sayfanın üstünde, ayraçlarda ve
   vurgularda gerçekten görünüyor. */
[data-tema="gunduz"] {
  color-scheme: light;

  /* Basamaklar karanlık temadaki kadar yakın duruyor.
     Kartlar saf beyaz (#fff) iken krem zeminin üstünde ayrı bir malzeme
     gibi duruyordu: alt bilgi, paneller ve form alanları sayfadan kopuk
     beyaz bloklar hâlinde görünüyordu. Kart hâlâ zeminden açık, ama aynı
     sıcaklıkta — beyaz değil, kâğıt. */
  --ink:        #f2ede1;   /* sayfa zemini — sıcak kâğıt */
  --ink-2:      #fbf8f1;   /* kart, panel, kutu */
  --ink-3:      #ebe4d4;   /* girinti, alan zemini */
  --ink-4:      #ded4c0;

  --paper:      #16130d;
  --paper-2:    #443e33;
  --paper-dim:  #6e6656;
  --paper-faint:#8f8676;

  --rule:       #e2d9c8;
  --rule-soft:  #eee8db;

  --brand:      #ffb300;
  --gold:       #8a5600;
  --gold-deep:  #6d4300;
  --gold-glow:  rgba(255, 179, 0, .22);

  --on-brand:   #1a1204;

  /* Karanlık temada renksiz olan üst aydınlanma, burada bilerek
     kehribar: sayfanın tepesi ilk bakışta sitenin rengini söylüyor. */
  --ust-isik:   rgba(255, 168, 0, .16);

  --rust:       #b3341f;
  --rust-soft:  rgba(179, 52, 31, .09);
  --moss:       #4a7328;

  /* Aydınlıkta hover gri bir yama değil, kehribara çalan sıcak bir
     vurgu; dolu düğme de açılmak yerine koyulaşıyor. */
  --vurgu-zemin: #f7ecd6;
  --brand-2:     #eda200;

  /* Kâğıt üstünde okunabilmesi için basamaklar bir tık koyu. */
  --puan-5:     #b87b00;
  --puan-4:     #9a5f04;
  --puan-3:     #6a6357;
  --puan-2:     #bd4b23;
  --puan-1:     #a92718;

  --shadow:     0 1px 0 rgba(255,255,255,.7),
                0 2px 6px rgba(90, 70, 30, .06),
                0 20px 44px -26px rgba(70, 52, 18, .34);
}

/* Aydınlık temada üst aydınlanma daha uzun ve daha yumuşak insin —
   kısa bir hâle sayfanın tepesinde çizgi gibi duruyordu. */
[data-tema="gunduz"] body::before { height: 520px; }

/* Zemin boş kalmasın: çok hafif bir doku sayfayı düz beyaz olmaktan
   çıkarıyor. Kartların üstünde değil, altında duruyor. */
[data-tema="gunduz"] body {
  background-image:
    radial-gradient(1100px 420px at 12% -8%, rgba(255, 179, 0, .10), transparent 70%),
    radial-gradient(900px 380px at 92% 4%, rgba(255, 179, 0, .06), transparent 70%);
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* Üst çubuğun altındaki çizgi kehribara dönsün — sayfanın en görünür
   yerinde marka rengi olsun. */
[data-tema="gunduz"] .ust {
  border-bottom-color: color-mix(in srgb, var(--brand) 42%, var(--rule));
  box-shadow: 0 1px 0 rgba(255, 179, 0, .12);
}

/* Marka noktası tek başına küçük kalıyordu; hafif bir hâle alıyor. */
[data-tema="gunduz"] .marka-nokta {
  box-shadow: 0 0 0 3px rgba(255, 179, 0, .22);
}

/* Manşetin altındaki ayraç da kehribar. */
[data-tema="gunduz"] .manset {
  border-bottom-color: color-mix(in srgb, var(--brand) 34%, var(--rule));
}

/* Alt bilgi sayfadan kopuk bir blok gibi durmasın: kart rengiyle aynı
   ama üstünde ince bir kehribar çizgiyle ayrılıyor. */
[data-tema="gunduz"] .alt {
  border-top-color: color-mix(in srgb, var(--brand) 32%, var(--rule));
}

/* ---------------------------------------------------------------------
   2. Temel
   ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

/* Filtre gizlemesi burada duruyor.
   Tarayıcının kendi `[hidden] { display: none }` kuralı sınıf seçicilerle
   aynı ağırlıkta; `.panel { display: grid }` gibi bir kural onu eziyor ve
   filtrelenen salonlar ekranda kalıyordu (sayaç 11 derken 27 panel
   görünüyordu). !important ile kesin sonuç alıyoruz. */
[hidden] { display: none !important; }

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

  /* Sayfanın arkası da gövdeyle aynı renk olsun.
     Dokunmatik yüzeyde listenin başındayken yukarı kaydırınca tarayıcı
     sayfayı esnetiyor ve altından kök öğenin rengi görünüyordu: üstte
     beyaz bir şerit açılıp bırakınca kayboluyordu. */
  background: var(--ink);

  /* Esneme (rubber band) hareketini de kapatıyoruz; liste zaten kendi
     içinde kayıyor, sayfanın zıplamasına gerek yok. */
  overscroll-behavior-y: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ---------------------------------------------------------------------
   Hareket
   ---------------------------------------------------------------------
   Kaydırdıkça beliren bloklar ve kartların hafif 3B eğilmesi.

   Kural: hareket hiçbir şeyi gizlemesin. `data-goster` taşıyan öğe
   JavaScript açılana kadar görünür durumda; betik yüklendiğinde kök
   öğeye `js-hareket` sınıfını koyup başlangıç durumunu devralıyor.
   Böylece JavaScript kapalıysa ya da hata verirse sayfa boş kalmıyor.
   ------------------------------------------------------------------ */
.js-hareket [data-goster] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .55s cubic-bezier(.22, 1, .36, 1),
              transform .55s cubic-bezier(.22, 1, .36, 1);
}

.js-hareket [data-goster].gorunur {
  opacity: 1;
  transform: none;
}

/* Sıralı giriş: çocuklar arka arkaya beliriyor. */
.js-hareket [data-sirali] > * {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .5s cubic-bezier(.22, 1, .36, 1),
              transform .5s cubic-bezier(.22, 1, .36, 1);
  transition-delay: calc(var(--sira, 0) * 60ms);
}

.js-hareket [data-sirali].gorunur > * {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js-hareket [data-goster],
  .js-hareket [data-sirali] > * { opacity: 1; transform: none; }
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  overscroll-behavior-y: none;
  font: 400 16px/1.6 var(--sans);
  font-feature-settings: "kern" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Sayfanın tepesindeki hafif aydınlanma.
   Renksiz: daha önce kehribar bir hâle vardı; karanlık temada zemini
   çamurlaştırıyor, aydınlık temada da beyazı krem gösteriyordu. */
body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto 0;
  height: 320px;
  background: linear-gradient(180deg, var(--ust-isik), transparent);
  pointer-events: none;
  z-index: 0;
}

img { max-width: 100%; height: auto; display: block; }

a {
  color: inherit;
  text-decoration-color: color-mix(in srgb, var(--gold) 55%, transparent);
  text-underline-offset: 3px;
}
a:hover { text-decoration-color: var(--gold); }

button, input, select, textarea { font: inherit; color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.015em;
  margin: 0;
}

p { margin: 0 0 1em; }

/* Seçili yazı.
   Zemin `--gold` idi; aydınlık temada bu renk okunabilirlik için
   koyulaştırıldığından seçim koyu kahve bir zemin üstünde neredeyse
   siyah yazıya dönüyor, seçtiğiniz cümle okunmuyordu. Boyalı yüzey
   olduğu için doğru değişken `--brand`: iki temada da aynı kehribar. */
::selection { background: var(--brand); color: var(--on-brand); }

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

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
  position: relative;
  z-index: 1;
}

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

.atla {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--gold);
  color: var(--on-brand);
  padding: 10px 18px;
  z-index: 99;
  font-weight: 600;
}
.atla:focus { left: 12px; top: 12px; }

/* Küçük etiket yazısı — sitenin her yerinde tekrar ediyor. */
.etiket {
  font: 600 11px/1 var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--paper-dim);
}

/* ---------------------------------------------------------------------
   3. Başlık ve gezinme
   ------------------------------------------------------------------ */
/* Üst çubuk saydam değil.
   Yarı saydamken arkasındaki içerik ve sayfa üstündeki aydınlanma
   içinden geçiyor, çubuk kaydırdıkça renk değiştiriyordu. */
.ust {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--ink);
  border-bottom: 1px solid var(--rule);
}

.ust-ic {
  display: flex;
  align-items: center;
  gap: 28px;
  height: 66px;
}

.marka {
  display: flex;
  align-items: baseline;
  gap: 9px;
  text-decoration: none;
  flex-shrink: 0;
}

.marka-ad {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 21px;
  letter-spacing: -.02em;
}

.marka-nokta {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--brand);
  flex: none;
  align-self: center;
}

.menu {
  display: flex;
  gap: 4px;
  margin-left: auto;
  align-items: center;
}

.menu a {
  padding: 8px 13px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--paper-2);
  text-decoration: none;
  border-radius: 4px;
  white-space: nowrap;
}
.menu a:hover { color: var(--gold); background: var(--vurgu-zemin); }
.menu a[aria-current] {
  color: var(--paper);
  box-shadow: inset 0 -2px 0 var(--gold);
  border-radius: 4px 4px 0 0;
}

.tema-dugme {
  background: none;
  border: 1px solid var(--rule);
  color: var(--paper-dim);
  width: 34px; height: 34px;
  border-radius: 5px;
  cursor: pointer;
  display: grid;
  place-items: center;
  margin-left: 6px;
}
.tema-dugme:hover { color: var(--gold); border-color: var(--gold-deep); background: var(--vurgu-zemin); }
.tema-dugme svg { width: 16px; height: 16px; fill: currentColor; }
[data-tema="gunduz"] .tema-ay  { display: none; }
.tema-gunes { display: none; }
[data-tema="gunduz"] .tema-gunes { display: block; }

/* Mobil menü açma düğmesi */
.menu-ac {
  display: none;
  margin-left: auto;
  background: none;
  border: 1px solid var(--rule);
  border-radius: 5px;
  width: 38px; height: 34px;
  cursor: pointer;
  color: var(--paper);
}

/* ---------------------------------------------------------------------
   4. Manşet
   ------------------------------------------------------------------ */
.manset {
  padding: clamp(38px, 7vw, 74px) 0 30px;
  border-bottom: 1px solid var(--rule);
}

.manset h1 {
  font-size: clamp(38px, 7.5vw, 74px);
  font-weight: 700;
  letter-spacing: -.032em;
  max-width: 15ch;
}

.manset h1 em {
  font-style: normal;
  color: var(--gold);
}

.manset-alt {
  margin-top: 18px;
  font-size: clamp(16px, 2vw, 19px);
  color: var(--paper-2);
  max-width: 56ch;
  line-height: 1.55;
}

/* Sayılar şeridi */
.sayilar {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin-top: 34px;
  border-top: 1px solid var(--rule);
}

.sayilar div {
  padding: 16px 26px 4px 0;
  margin-right: 26px;
  border-right: 1px solid var(--rule);
}
.sayilar div:last-child { border-right: 0; }

.sayilar b {
  display: block;
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--paper);
}

.sayilar span {
  display: block;
  margin-top: 5px;
  font-size: 12.5px;
  color: var(--paper-dim);
}

/* ---------------------------------------------------------------------
   5. Filtre çubuğu
   ------------------------------------------------------------------ */
.filtre {
  position: sticky;
  top: 66px;
  z-index: 30;
  background: var(--ink);
  border-bottom: 1px solid var(--rule);
  padding: 14px 0;
}

.filtre-satir {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.arama {
  position: relative;
  flex: 1 1 260px;
  min-width: 200px;
}

.arama input {
  width: 100%;
  background: var(--ink-2);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 10px 36px 10px 38px;
  font-size: 15px;
  color: var(--paper);
}
.arama input::placeholder { color: var(--paper-faint); }
.arama input:focus {
  outline: none;
  border-color: var(--gold-deep);
  box-shadow: 0 0 0 3px var(--gold-glow);
}

.arama svg {
  position: absolute;
  left: 12px; top: 50%;
  transform: translateY(-50%);
  width: 16px; height: 16px;
  fill: none;
  stroke: var(--paper-faint);
  stroke-width: 2;
  pointer-events: none;
}

.arama-temizle {
  position: absolute;
  right: 8px; top: 50%;
  transform: translateY(-50%);
  background: none; border: 0;
  color: var(--paper-faint);
  cursor: pointer;
  font-size: 17px;
  line-height: 1;
  padding: 4px 6px;
  display: none;
}
.arama.dolu .arama-temizle { display: block; }
.arama-temizle:hover { color: var(--rust); }

.sec {
  background: var(--ink-2);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 10px 30px 10px 12px;
  font-size: 14px;
  color: var(--paper-2);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%239b8e7d' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  background-size: 10px;
}
.sec:hover { border-color: var(--gold-deep); color: var(--gold); }

/* Açılır kutunun kendi listesi işletim sisteminden geliyor; en azından
   rengini sitenin paletine çekiyoruz. */
.sec option { background: var(--ink-2); color: var(--paper); }

/* Açılıp kapanan ek filtreler */
.filtre-ek {
  display: none;
  gap: 22px;
  flex-wrap: wrap;
  padding-top: 16px;
  margin-top: 14px;
  border-top: 1px dashed var(--rule);
}
.filtre-ek.acik { display: flex; }

.filtre-grup { min-width: 150px; }
.filtre-grup > .etiket { display: block; margin-bottom: 9px; }

.rozetler { display: flex; flex-wrap: wrap; gap: 7px; }

.rozet {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border: 1px solid var(--rule);
  border-radius: 40px;
  font-size: 13px;
  color: var(--paper-2);
  cursor: pointer;
  user-select: none;
  background: transparent;
  transition: border-color .12s, color .12s, background .12s;
}
.rozet:hover { border-color: var(--gold-deep); color: var(--gold); background: var(--vurgu-zemin); }
.rozet input { position: absolute; opacity: 0; pointer-events: none; }
.rozet:has(input:checked) {
  border-color: var(--gold);
  color: var(--gold);
  background: var(--gold-glow);
}

/* Etkin filtre etiketleri — tek tek kaldırılabiliyor. */
.etkin-filtreler {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--rule);
}

.etkin-liste { display: flex; flex-wrap: wrap; gap: 7px; }

.etkin-cip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 6px 5px 12px;
  border: 1px solid var(--gold-deep);
  border-radius: 40px;
  background: var(--gold-glow);
  color: var(--gold);
  font-size: 12.5px;
  line-height: 1.4;
}

.cip-sil {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--gold) 20%, transparent);
  color: inherit;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
.cip-sil:hover { background: color-mix(in srgb, var(--gold) 40%, transparent); }

.filtre-ozet {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 14px;
  font-size: 13.5px;
  color: var(--paper-dim);
}

.filtre-ozet b { color: var(--paper); font-weight: 600; }

.baglanti-dugme {
  background: none;
  border: 0;
  padding: 0;
  color: var(--gold);
  font-size: 13.5px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.dugme-ek {
  background: var(--ink-2);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 10px 14px;
  font-size: 14px;
  color: var(--paper-2);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.dugme-ek:hover { border-color: var(--gold-deep); color: var(--gold); background: var(--vurgu-zemin); }
.dugme-ek .sayac {
  background: var(--gold);
  color: var(--on-brand);
  border-radius: 20px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-size: 11px;
  font-weight: 700;
  display: grid;
  place-items: center;
}

/* ---------------------------------------------------------------------
   6. Salon panelleri
   ------------------------------------------------------------------ */
.liste {
  display: flex;
  flex-direction: column;
  gap: 26px;
  padding: 34px 0 60px;
  list-style: none;
  margin: 0;
}

.panel {
  display: grid;
  grid-template-columns: 6px minmax(300px, 440px) 1fr;
  background: var(--ink-2);
  border: 1px solid var(--rule);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: border-color .18s ease, box-shadow .25s ease, transform .25s ease;
}

/* Fare üstüne gelince.
   Eskiden yalnızca kenarlık `--ink-4`e dönüyordu; aydınlık temada bu renk
   kenarlıktan daha açık olduğu için kart üzerine gelindiğinde çerçevesi
   silinmiş gibi oluyordu. Şimdi kart bir tık kalkıyor, kenarlık kehribara
   dönüyor ve puan şeridi genişleyerek hangi kartta olduğunuzu söylüyor. */
.panel:hover {
  border-color: color-mix(in srgb, var(--brand) 55%, var(--rule));
  box-shadow: var(--shadow), 0 0 0 1px color-mix(in srgb, var(--brand) 22%, transparent);
}

.panel:hover h2 a { color: var(--gold); }

/* Fare kartın üzerindeyken kart hafifçe kalkıyor.
   Önceden kart imlece doğru 3B eğiliyordu; yazı eğik düzlemde titriyor,
   uzun listede kart kart yalpalayan bir his veriyordu. Yerine tek yönlü,
   sakin bir kalkış kondu: yön değiştirmiyor, metin düz kalıyor.
   Yalnızca gerçek imleci olan cihazlarda. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .liste[data-egim] .panel { will-change: transform; }

  .liste[data-egim] .panel.egik {
    transform: translateY(-4px);
    box-shadow:
      var(--shadow),
      0 0 0 1px color-mix(in srgb, var(--brand) 30%, transparent),
      0 26px 50px -30px rgba(0, 0, 0, .55);
  }
}

/* Sol şerit — rengi puanı anlatıyor. */
.serit { background: var(--rule); }
.panel[data-puan="5"] .serit { background: var(--puan-5); }
.panel[data-puan="4"] .serit { background: var(--puan-4); }
.panel[data-puan="3"] .serit { background: var(--puan-3); }
.panel[data-puan="2"] .serit { background: var(--puan-2); }
.panel[data-puan="1"] .serit { background: var(--puan-1); }

/* Görsel kartın boyunu belirlemiyor.
   Önceden `height: 100%` otomatik yükseklikli bir hücrede çözülemediği için
   görsel kendi oranıyla ızgara satırına katılıyordu: dikey bir fotoğraf
   kartı uzatıyor, geniş bir fotoğraf kısaltıyor, liste inişli çıkışlı
   görünüyordu. Artık görsel kutusunun içine mutlak yerleşiyor ve
   `object-fit: cover` ile kırpılıyor; hangi boyutta yüklenirse yüklensin
   kartın yüksekliğine etkisi yok. Satır en az `--panel-boy` kadar, gövdedeki
   metin daha uzunsa o kadar. */
.panel {
  --panel-boy: 280px;
  grid-template-rows: minmax(var(--panel-boy), auto);
}

.panel-gorsel {
  position: relative;
  background: var(--ink-3);
  overflow: hidden;
}

.panel-gorsel > .panel-gorsel-ic { position: absolute; inset: 0; display: block; }

.panel-gorsel img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .5s cubic-bezier(.2,.7,.3,1);
}
.panel:hover .panel-gorsel img { transform: scale(1.035); }

/* Kapak görselleri masaüstüne sürüklenemiyor, iOS'ta uzun basınca
   "Fotoğraflara kaydet" menüsü çıkmıyor. Sağ tık site.js'te. */
.panel-gorsel img,
.salon-kapak img {
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  user-select: none;
}

/* Telefonda görsel kendi satırında, yüksekliği 16/9 orandan geliyor
   (13. bölüm); en az yükseklik orada görseli uzatmasın. */
@media (max-width: 820px) {
  .panel { grid-template-rows: none; }
}

/* Fotoğraf yoksa: salon adının baş harfleri */
.gorsel-yok {
  width: 100%; height: 100%;
  display: grid;
  place-items: center;
  background:
    repeating-linear-gradient(135deg, var(--ink-3) 0 14px, var(--ink-2) 14px 28px);
  color: var(--paper-faint);
  font-family: var(--serif);
  font-size: 44px;
  font-weight: 600;
  letter-spacing: .04em;
}

.panel-govde {
  padding: 26px 30px 24px;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.panel-ust {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.panel-kicker {
  font: 600 11px/1 var(--sans);
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 10px;
}

.panel h2 {
  font-size: clamp(23px, 2.5vw, 31px);
  letter-spacing: -.025em;
  margin-bottom: 7px;
}

.panel h2 a { text-decoration: none; }
.panel h2 a:hover { text-decoration: underline; text-decoration-color: var(--gold); }

.panel-yer {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  color: var(--paper-dim);
}
.panel-yer svg { width: 13px; height: 13px; fill: currentColor; flex: none; }

/* Puan bloğu — sağ üstte */
.puan-blok { text-align: right; flex: none; }

.puan-sayi {
  font-family: var(--serif);
  font-size: 40px;
  font-weight: 600;
  line-height: .95;
  letter-spacing: -.03em;
  color: var(--puan-5);
}

/* Puan rengi beş basamağın hepsinde ayrı. Kart, salon sayfası ve
   haritadaki işaretler aynı değişkenlerden besleniyor. */
[data-puan="5"] .puan-sayi { color: var(--puan-5); }
[data-puan="4"] .puan-sayi { color: var(--puan-4); }
[data-puan="3"] .puan-sayi { color: var(--puan-3); }
[data-puan="2"] .puan-sayi { color: var(--puan-2); }
[data-puan="1"] .puan-sayi { color: var(--puan-1); }

.puan-sayi small {
  font-size: 15px;
  color: var(--paper-faint);
  font-weight: 400;
}

.stars { display: inline-flex; gap: 2px; margin-top: 5px; }

/* Boş yıldız yalnızca daha soluk bir renk değil, içi boş bir şekil.
   Yalnız renkle ayırdığımızda 3 puanın (bilerek nötr gri) dolu
   yıldızları boşlardan ayırt edilemiyordu: "İdare eder" satırı beş
   boş yıldız gibi görünüyordu. Artık dolu olan içi dolu, boş olan
   çizgi; renk körlüğünde ve düşük kontrastlı ekranda da okunuyor. */
.star { color: var(--paper-faint); line-height: 0; font-size: 14px; }
.star svg { fill: none; stroke: currentColor; stroke-width: 1.6; opacity: .55; }

.star.is-on { color: var(--brand); }
.star.is-on svg { fill: currentColor; stroke: none; opacity: 1; }

[data-puan="5"] .star.is-on { color: var(--puan-5); }
[data-puan="4"] .star.is-on { color: var(--puan-4); }
[data-puan="3"] .star.is-on { color: var(--puan-3); }
/* 2 ve 1 yıldızın yıldızları aynı kırmızı: "önermiyoruz" iki basamakta
   da aynı dille söyleniyor. Şerit ve sayı kendi basamak renginde kalıyor. */
[data-puan="2"] .star.is-on,
[data-puan="1"] .star.is-on { color: var(--tehlike, var(--puan-1)); }

.puan-sozu {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--paper-dim);
  font-weight: 600;
}

/* Hüküm cümlesi — panelin sesi burası */
.hukum {
  font-size: clamp(15.5px, 1.5vw, 17px);
  line-height: 1.45;
  color: var(--paper-2);
  margin: 18px 0 0;
  padding-left: 15px;
  border-left: 2px solid var(--gold-deep);
  /* Panel geniş ekranda uzuyor; cümle satır satır okunabilir kalsın. */
  max-width: var(--okuma);
}

/* Özellik satırı */
.ozellikler {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 20px;
}

.oz {
  font: 600 11.5px/1 var(--sans);
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 6px 10px;
  border: 1px solid var(--rule);
  border-radius: 3px;
  color: var(--paper-dim);
  white-space: nowrap;
}

.oz.teknoloji { border-color: var(--gold-deep); color: var(--gold); }

/* Teknoloji rozetleri — her biri kendi renginde.
   Üçü de kehribardı ve puanla aynı renkte oldukları için kartta
   kayboluyordu. Şimdi her birinin iki renkli bir kenarı ve hafif
   renkli bir zemini var: IMAX mavi-camgöbeği, Dolby Atmos çivit-mor,
   Dolby Vision pembe-turuncu. Kenar geçişi `background-clip` ile
   çiziliyor; zemin kartın kendi rengine karışıyor, iki temada da
   ayrı ayar gerektirmiyor. */
:root {
  --tek-imax-1:   #3a8dff;
  --tek-imax-2:   #52d6ff;
  --tek-imax:     #7cc4ff;
  --tek-atmos-1:  #6d63ff;
  --tek-atmos-2:  #c07dff;
  --tek-atmos:    #b7a8ff;
  --tek-vision-1: #ff4f98;
  --tek-vision-2: #ffae3d;
  --tek-vision:   #ff9cc6;
}
[data-tema="gunduz"] {
  --tek-imax-1:   #1463d6;
  --tek-imax-2:   #0aa3cf;
  --tek-imax:     #0d57b3;
  --tek-atmos-1:  #4b3fd6;
  --tek-atmos-2:  #9147d9;
  --tek-atmos:    #4f33b8;
  --tek-vision-1: #d62d78;
  --tek-vision-2: #e08a12;
  --tek-vision:   #b3215f;
}

.oz.tek-imax   { --t1: var(--tek-imax-1);   --t2: var(--tek-imax-2);   --tx: var(--tek-imax); }
.oz.tek-atmos  { --t1: var(--tek-atmos-1);  --t2: var(--tek-atmos-2);  --tx: var(--tek-atmos); }
.oz.tek-vision { --t1: var(--tek-vision-1); --t2: var(--tek-vision-2); --tx: var(--tek-vision); }

.oz.tek-imax,
.oz.tek-atmos,
.oz.tek-vision {
  color: var(--tx);
  border: 1px solid transparent;
  border-radius: 5px;
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--t1) 13%, var(--ink-2)),
      color-mix(in srgb, var(--t2) 10%, var(--ink-2))) padding-box,
    linear-gradient(90deg, var(--t1), var(--t2)) border-box;
  box-shadow: 0 4px 14px -9px var(--t1);
}
.oz.tek-imax .oz-simge,
.oz.tek-atmos .oz-simge,
.oz.tek-vision .oz-simge { opacity: 1; }

/* Harita yan listesi ve balonundaki küçük etiketler aynı renkleri taşıyor. */
.kart-oz.tek-imax,  .pin-oz.tek-imax   { color: var(--tek-imax);   border-color: color-mix(in srgb, var(--tek-imax-1) 60%, transparent); }
.kart-oz.tek-atmos, .pin-oz.tek-atmos  { color: var(--tek-atmos);  border-color: color-mix(in srgb, var(--tek-atmos-1) 60%, transparent); }
.kart-oz.tek-vision, .pin-oz.tek-vision { color: var(--tek-vision); border-color: color-mix(in srgb, var(--tek-vision-1) 60%, transparent); }
.oz.iyi   { border-color: color-mix(in srgb, var(--moss) 60%, transparent); color: var(--moss); }
.oz.kotu  { border-color: color-mix(in srgb, var(--rust) 60%, transparent); color: var(--rust); }

/* Rozetlerin içindeki simgeler.
   Renk `currentColor` üzerinden geldiği için IMAX altın, otopark yok
   kırmızı çıkıyor ve iki temada da ayrıca ayar gerekmiyor. */
.oz { display: inline-flex; align-items: center; gap: 7px; }

.oz-simge {
  flex: none;
  width: 17px;
  height: 17px;
  opacity: .9;
}

/* Künyedeki rozet satırı gövde metnine yapışmasın. */
.kunye-oz { margin-top: 0; display: inline-flex; }

/* Simgeli düğme — yol tarifi gibi ikincil eylemler için. */
.dugme-simge .oz-simge { width: 16px; height: 16px; }

.panel-alt {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 22px;
}

.panel-tarih {
  margin-left: auto;
  font-size: 12.5px;
  color: var(--paper-faint);
}

/* Düğmeler */
.dugme {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: 6px;
  font: 600 14px/1 var(--sans);
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .14s, border-color .14s, color .14s;
}

.dugme-dolu {
  background: var(--brand);
  color: var(--on-brand);
}
.dugme-dolu:hover { background: var(--brand-2); }

.dugme-cizgi {
  border-color: var(--rule);
  color: var(--paper-2);
}
.dugme-cizgi:hover {
  border-color: var(--gold-deep);
  color: var(--gold);
  background: var(--vurgu-zemin);
}

.dugme-uyari {
  border-color: color-mix(in srgb, var(--rust) 55%, transparent);
  color: var(--rust);
  background: var(--rust-soft);
}
.dugme-uyari:hover { background: color-mix(in srgb, var(--rust) 18%, transparent); }

/* Bilet düğmesi sitenin kendi kehribarında.
   Eskiden maviydi; sitenin geri kalanıyla aynı aileden görünmüyordu.
   Teknoloji rozetleri artık kendi renklerinde olduğu için kehribar
   kartta yalnızca puan ve bilet düğmesinde kalıyor, göz yine buluyor.

   2 yıldız ve altındaki salonlarda aynı düğme kırmızı: tıklayan önce
   uyarı sayfasına gidiyor, rengi de bunu baştan söylüyor.
   Ücretli otopark eskiden nötr griydi ve "bilgi yok" gibi okunuyordu. */
:root {
  --ucretli:  #3fc1c9;
  --tehlike:  #e5483a;
  --tehlike-2:#f25e50;
}
[data-tema="gunduz"] {
  --ucretli:  #0b7a82;
  --tehlike:  #c3301f;
  --tehlike-2:#a42617;
}

.dugme-bilet {
  background: var(--brand);
  color: var(--on-brand);
  box-shadow: 0 8px 22px -10px color-mix(in srgb, var(--brand) 75%, transparent);
}
.dugme-bilet:hover { background: var(--brand-2); }

.dugme-bilet.dusuk {
  background: var(--tehlike);
  color: #fff;
  box-shadow: 0 8px 22px -10px color-mix(in srgb, var(--tehlike) 75%, transparent);
}
.dugme-bilet.dusuk:hover { background: var(--tehlike-2); }

.oz.ucretli {
  border-color: color-mix(in srgb, var(--ucretli) 60%, transparent);
  color: var(--ucretli);
}

.dugme svg { width: 15px; height: 15px; }

/* Düşük puanlı salonun uyarısı.
   Eskiden tek satır kırmızı yazıydı ve bütün cümle aynı ağırlıkta
   okunuyordu. Şimdi üç parça: puan renginde simge, küçük büyük harfli
   başlık + sakin açıklama, sağda "Neden?" bağlantısı. Rengi uyarı
   sayfasındaki gibi salonun kendi puan rengi. Bütün kutu tıklanıyor. */
.dusuk-uyari {
  --uyari: var(--rust);
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  padding: 11px 14px 11px 11px;
  border: 1px solid color-mix(in srgb, var(--uyari) 30%, transparent);
  border-left: 3px solid var(--uyari);
  border-radius: 8px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--uyari) 13%, transparent),
    color-mix(in srgb, var(--uyari) 3%, transparent));
  color: var(--paper-2);
  text-decoration: none;
  transition: border-color .15s, background-color .15s;
}
.dusuk-uyari[data-puan="1"] { --uyari: var(--puan-1); }
.dusuk-uyari[data-puan="2"] { --uyari: var(--puan-2); }
.dusuk-uyari[data-puan="3"] { --uyari: var(--puan-3); }

a.dusuk-uyari:hover { border-color: color-mix(in srgb, var(--uyari) 55%, transparent); border-left-color: var(--uyari); }

.dusuk-uyari-simge {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 50%;
  background: color-mix(in srgb, var(--uyari) 18%, transparent);
  color: var(--uyari);
}
.dusuk-uyari-simge svg { width: 16px; height: 16px; fill: currentColor; }

.dusuk-uyari-metin { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dusuk-uyari-metin b {
  font: 700 10.5px/1.2 var(--sans);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--uyari);
}
.dusuk-uyari-metin span { font-size: 13.5px; line-height: 1.45; }

.dusuk-uyari-ok {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  padding-left: 6px;
  flex: none;
  font-size: 13px;
  font-weight: 600;
  color: var(--uyari);
  white-space: nowrap;
}
.dusuk-uyari-ok svg { width: 15px; height: 15px; fill: none; stroke: currentColor; transition: transform .15s; }
a.dusuk-uyari:hover .dusuk-uyari-ok svg { transform: translateX(3px); }

@media (max-width: 520px) {
  .dusuk-uyari-ok span { display: none; }   /* dar ekranda yalnızca ok */
}

/* Sonuç yok */
.bos {
  padding: 70px 24px;
  text-align: center;
  border: 1px dashed var(--rule);
  border-radius: 10px;
  margin: 34px 0 60px;
}
.bos h3 { font-size: 25px; margin-bottom: 10px; }
.bos p { color: var(--paper-dim); max-width: 44ch; margin-inline: auto; }

/* Sonuç sayacı */
.sonuc-bilgi {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 30px;
  font-size: 14px;
  color: var(--paper-dim);
}
.sonuc-bilgi b { color: var(--paper); font-weight: 600; }

/* ---------------------------------------------------------------------
   6b. Bölüm başlıkları ve ana sayfa blokları
   ------------------------------------------------------------------ */
.bolum { padding-top: 34px; }

.bolum-bas-blok {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 44ch);
  gap: 14px 40px;
  align-items: end;
  padding: 46px 0 20px;
  border-bottom: 1px solid var(--rule);
}

.bolum-basligi {
  font-size: clamp(24px, 3.4vw, 36px);
  letter-spacing: -.028em;
  margin-top: 10px;
}

.bolum-aciklama {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--paper-dim);
}

/* Puan cetveli şeridi — listenin üstünde renklerin ne demek olduğunu
   gösteriyor, böylece kartlardaki renk kodu tahmin işi olmaktan çıkıyor. */
.puan-cetveli {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 20px 0 0;
}

.cetvel-adim {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 7px 10px;
  border: 1px solid var(--rule);
  border-radius: 40px;
  font-size: 12.5px;
  color: var(--paper-dim);
}

.cetvel-adim i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: none;
}
.cetvel-adim b { font-weight: 700; font-variant-numeric: tabular-nums; }
.cetvel-adim em { font-style: normal; }

.cetvel-adim[data-puan="5"] i { background: var(--puan-5); }
.cetvel-adim[data-puan="4"] i { background: var(--puan-4); }
.cetvel-adim[data-puan="3"] i { background: var(--puan-3); }
.cetvel-adim[data-puan="2"] i { background: var(--puan-2); }
.cetvel-adim[data-puan="1"] i { background: var(--puan-1); }

.cetvel-adim[data-puan="5"] b { color: var(--puan-5); }
.cetvel-adim[data-puan="4"] b { color: var(--puan-4); }
.cetvel-adim[data-puan="3"] b { color: var(--puan-3); }
.cetvel-adim[data-puan="2"] b { color: var(--puan-2); }
.cetvel-adim[data-puan="1"] b { color: var(--puan-1); }

/* Haritaya çağrı kutusu */
.harita-cagri {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px;
  align-items: center;
  margin: 52px 0 60px;
  padding: 34px clamp(20px, 3vw, 38px);
  border: 1px solid var(--rule);
  border-radius: 14px;
  background: var(--ink-2);
}
.harita-cagri .bolum-basligi { margin: 8px 0 10px; }
.harita-cagri .bolum-aciklama { max-width: 52ch; }

.manset-etiket { display: block; margin-bottom: 16px; color: var(--gold); }

/* Şehir kısayolları */
.sehirler {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 22px 0 0;
}

.sehir-cip {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  padding: 8px 14px;
  border: 1px solid var(--rule);
  border-radius: 40px;
  font-size: 13.5px;
  color: var(--paper-2);
  text-decoration: none;
}
.sehir-cip:hover { border-color: var(--gold-deep); color: var(--gold); background: var(--vurgu-zemin); }
.sehir-cip span { color: var(--paper-faint); font-size: 12px; }
.sehir-cip[aria-current] { border-color: var(--gold); color: var(--gold); background: var(--gold-glow); }

/* ---------------------------------------------------------------------
   7. Salon sayfası
   ------------------------------------------------------------------ */
.iz {
  padding: 22px 0 0;
  font-size: 13px;
  color: var(--paper-faint);
}
.iz a { color: var(--paper-dim); text-decoration: none; }
.iz a:hover { color: var(--gold); }
.iz span { margin: 0 7px; }

.salon-bas {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 30px;
  align-items: end;
  padding: 26px 0 30px;
  border-bottom: 1px solid var(--rule);
}

.salon-bas h1 {
  font-size: clamp(32px, 5.5vw, 56px);
  letter-spacing: -.03em;
  max-width: 18ch;
}

.salon-kicker {
  font: 600 11.5px/1 var(--sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 14px;
}

.salon-yer {
  margin-top: 14px;
  font-size: 16px;
  color: var(--paper-dim);
}

.salon-puan { text-align: right; }
.salon-puan .puan-sayi { font-size: 62px; }

.salon-kapak {
  margin: 30px 0 0;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--rule);
  aspect-ratio: 21 / 9;
  background: var(--ink-3);
}
.salon-kapak img { width: 100%; height: 100%; object-fit: cover; }

.salon-govde {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 54px;
  padding: 44px 0 70px;
  align-items: start;
}

.yazi { max-width: 68ch; }

.yazi .hukum {
  font-size: clamp(19px, 2.2vw, 24px);
  margin: 0 0 30px;
  padding-left: 20px;
  border-left-width: 3px;
  color: var(--paper);
}

.yazi p {
  font-size: 17px;
  line-height: 1.72;
  color: var(--paper-2);
  margin-bottom: 1.15em;
}

.yazi p:first-of-type::first-letter {
  float: left;
  font-family: var(--serif);
  font-size: 3.4em;
  line-height: .82;
  font-weight: 600;
  padding: 4px 10px 0 0;
  color: var(--gold);
}

.bolum-bas {
  font: 600 11.5px/1 var(--sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--paper-dim);
  padding-bottom: 12px;
  margin: 46px 0 18px;
  border-bottom: 1px solid var(--rule);
}

.arti-eksi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 30px;
}

.ae-liste { list-style: none; margin: 0; padding: 0; }

.ae-liste li {
  position: relative;
  padding: 8px 0 8px 26px;
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--paper-2);
  border-bottom: 1px solid var(--rule-soft);
}
.ae-liste li:last-child { border-bottom: 0; }

.ae-liste li::before {
  position: absolute;
  left: 0; top: 8px;
  font-weight: 700;
  font-size: 15px;
}

.ae-arti li::before { content: "+"; color: var(--moss); }
.ae-eksi li::before { content: "−"; color: var(--rust); }

.ae-baslik {
  font: 600 12px/1 var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.ae-arti .ae-baslik { color: var(--moss); }
.ae-eksi .ae-baslik { color: var(--rust); }

/* Sağ sütun */
.yan { position: sticky; top: 90px; }

.kutu {
  background: var(--ink-2);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 22px;
  margin-bottom: 18px;
}

.kutu h3 {
  font: 600 11.5px/1 var(--sans);
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--paper-dim);
  margin-bottom: 16px;
}

.kunye { margin: 0; font-size: 14.5px; }

.kunye > div {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--rule-soft);
}
.kunye > div:last-child { border-bottom: 0; }

.kunye dt { color: var(--paper-faint); font-size: 13px; }
.kunye dd { margin: 0; color: var(--paper-2); }
.kunye dd a { color: var(--paper); }

.kutu .dugme { width: 100%; justify-content: center; }
.kutu .dugme + .dugme { margin-top: 9px; }

/* Yakındaki salonlar */
.yakin { list-style: none; margin: 0; padding: 0; }

.yakin li { border-bottom: 1px solid var(--rule-soft); }
.yakin li:last-child { border-bottom: 0; }

.yakin a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  text-decoration: none;
  font-size: 14.5px;
}
.yakin a:hover .yakin-ad { color: var(--gold); }
.yakin-ad { color: var(--paper-2); }
.yakin-puan { color: var(--gold); font-weight: 600; font-size: 13px; flex: none; }

/* ---------------------------------------------------------------------
   8. Uyarı sayfası
   ---------------------------------------------------------------------
   Bu sayfanın tek işi var: ziyaretçi bilet almadan önce dursun. Düz bir
   metin sayfası bunu yapmıyordu — göz üstünden kayıp geçiyordu. Sayfayı
   üç yüksek sesli parçaya böldük: tehlike şeridiyle işaretlenmiş bir
   uyarı kartı (puan halkasıyla birlikte), numaralı gerekçe kartları ve
   sonunda kararı ziyaretçiye bırakan bir kapanış.

   Renk `--rust` değil, salonun kendi puan rengi: 1 yıldıza kırmızı,
   2 yıldıza kiremit. Böylece uyarının şiddeti puanla aynı dili konuşuyor.
   ------------------------------------------------------------------ */
/* `.metin` ile aynı tuzak: yan boşluk `.wrap`tan geliyor, kısayol
   yazarsak siliniyor. */
.uyari-sayfa { padding-block: 0 70px; }
.uyari-sayfa .iz { padding-bottom: 22px; }

.uyari-kart {
  --uyari: var(--rust);
  position: relative;
  border: 1px solid color-mix(in srgb, var(--uyari) 40%, var(--rule));
  border-radius: 14px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--uyari) 9%, transparent), transparent 240px),
    var(--ink-2);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.uyari-kart[data-puan="2"] { --uyari: var(--puan-2); }
.uyari-kart[data-puan="1"] { --uyari: var(--puan-1); }
.uyari-kart[data-puan="3"] { --uyari: var(--puan-3); }

/* Tehlike şeridi — inşaat bandı gibi, kartın tepesinde. */
.uyari-serit {
  height: 8px;
  background: repeating-linear-gradient(
    -45deg,
    var(--uyari) 0 12px,
    color-mix(in srgb, var(--uyari) 28%, transparent) 12px 24px
  );
}

.uyari-ic {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(24px, 4vw, 54px);
  align-items: center;
  padding: clamp(26px, 4vw, 44px) clamp(20px, 3.4vw, 46px) clamp(28px, 4vw, 42px);
}

.uyari-rozet {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 13px 6px 10px;
  border-radius: 40px;
  background: color-mix(in srgb, var(--uyari) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--uyari) 45%, transparent);
  color: var(--uyari);
  font: 700 11.5px/1 var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.uyari-rozet svg { width: 15px; height: 15px; fill: currentColor; flex: none; }

.uyari-metin h1 {
  font-size: clamp(29px, 4.4vw, 48px);
  letter-spacing: -.03em;
  max-width: 20ch;
}

.uyari-giris {
  margin: 18px 0 0;
  font-size: clamp(16px, 1.6vw, 18px);
  line-height: 1.65;
  color: var(--paper-2);
  max-width: 60ch;
}
.uyari-giris strong { color: var(--paper); }

.uyari-kunye {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 26px 0 0;
  border-top: 1px solid var(--rule);
  padding-top: 16px;
}
.uyari-kunye > div { padding-right: 24px; margin-right: 24px; border-right: 1px solid var(--rule); }
.uyari-kunye > div:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.uyari-kunye dt {
  font: 600 10.5px/1 var(--sans);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--paper-faint);
}
.uyari-kunye dd { margin: 7px 0 0; font-size: 14.5px; color: var(--paper-2); }

/* Puan halkası — sayfanın sağ omzunda duran tek büyük görsel. */
.uyari-olcu {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  flex: none;
}

.uyari-halka {
  width: 148px;
  height: 148px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    conic-gradient(var(--uyari) var(--dolu, 40%), color-mix(in srgb, var(--paper-faint) 22%, transparent) 0);
  position: relative;
}
.uyari-halka::before {
  content: "";
  position: absolute;
  inset: 11px;
  border-radius: 50%;
  background: var(--ink-2);
}

.uyari-sayi {
  position: relative;
  font-family: var(--serif);
  font-size: 52px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--uyari);
}
.uyari-sayi small { font-size: 18px; font-weight: 400; color: var(--paper-faint); }

.uyari-olcu .stars { margin: 0; }
.uyari-olcu .star { font-size: 17px; }
.uyari-olcu .star.is-on { color: var(--uyari); }

.uyari-soz {
  font: 700 11px/1 var(--sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--uyari);
}

/* Gerekçe kartları */
.neden {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 14px;
  list-style: none;
  margin: 0 0 26px;
  padding: 0;
}

.neden > li {
  position: relative;
  background: var(--ink-2);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--rust);
  border-radius: 10px;
  padding: 22px 22px 22px 20px;
  overflow: hidden;
}

/* Büyük hayalet numara — arka planda, okumaya engel olmadan. */
.neden .sira {
  position: absolute;
  right: 10px;
  top: -6px;
  font-family: var(--serif);
  font-size: 62px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.05em;
  color: color-mix(in srgb, var(--rust) 16%, transparent);
  pointer-events: none;
}

.neden p {
  position: relative;
  margin: 0;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--paper-2);
  max-width: 42ch;
}

.uyari-not {
  font-size: 14px;
  line-height: 1.7;
  color: var(--paper-dim);
  max-width: 68ch;
  margin: 0 0 10px;
}

.oneri-baslik { margin: 50px 0 18px; }

/* Kapanış */
.uyari-karar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
  gap: clamp(22px, 4vw, 50px);
  align-items: center;
  margin-top: 46px;
  padding: clamp(24px, 3.4vw, 38px);
  border: 1px solid var(--rule);
  border-radius: 14px;
  background: var(--ink-2);
}

.uyari-karar .etiket { display: block; margin-bottom: 12px; color: var(--gold); }
.uyari-karar h2 { font-size: clamp(21px, 2.6vw, 29px); letter-spacing: -.025em; }
.uyari-karar p {
  margin: 14px 0 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--paper-dim);
  max-width: 58ch;
}

.uyari-dugmeler { display: flex; flex-direction: column; gap: 10px; }
.uyari-dugmeler .dugme { justify-content: center; text-align: center; }

/* ---------------------------------------------------------------------
   9. Harita
   ------------------------------------------------------------------ */
.harita-sarmal {
  height: min(70vh, 640px);
  border: 1px solid var(--rule);
  border-radius: 10px;
  overflow: hidden;
  background: var(--ink-2);
}

#harita { width: 100%; height: 100%; background: var(--ink-2); }

.harita-not { font-size: 13.5px; color: var(--paper-faint); margin-bottom: 60px; }

/* Harita araç çubuğu */
.harita-arac {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 26px;
}
.harita-arac .arama { flex: 1 1 300px; margin: 0; }
.harita-arac .dugme svg { width: 15px; height: 15px; }

.harita-durum {
  margin: 14px 0 0;
  font-size: 13px;
  color: var(--paper-dim);
  min-height: 1.2em;
}

/* Harita + yan liste */
.harita-duzen {
  display: grid;
  grid-template-columns: 1fr 310px;
  gap: 16px;
  margin: 14px 0 16px;
  align-items: stretch;
}

.harita-yan {
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--ink-2);
  overflow-y: auto;
  max-height: min(70vh, 640px);
}

.harita-yan ul { list-style: none; margin: 0; padding: 6px; }

.harita-kart {
  display: block;
  width: 100%;
  text-align: left;
  padding: 12px 13px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: none;
  color: inherit;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.harita-kart:hover { background: var(--vurgu-zemin); }
.harita-kart.etkin { border-color: var(--gold-deep); background: var(--gold-glow); }

.kart-ad { display: block; font-size: 14.5px; font-weight: 600; line-height: 1.35; }

/* Şehir solda, yıldız sağda: puan kendi köşesinde duruyor. Yıldızlar
   rozetlerle aynı şeritteyken IMAX etiketine yapışıyor, ikisi tek bir
   karmaşa gibi okunuyordu. */
.kart-satir {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 3px;
}

.kart-yer {
  font-size: 12.5px;
  color: var(--paper-dim);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Yan listede puan artık "4/5" yazan bir rozet değil, yıldız şeridi:
   haritanın yanındaki liste sitenin geri kalanıyla aynı dili konuşuyor. */
.kart-satir .stars { margin-top: 0; flex: none; }
.kart-satir .star { font-size: 13px; }

.kart-alt {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-top: 8px;
}

/* Rozeti de olmayan, uzaklığı da ölçülmemiş salonda bu satır boş kalıyor;
   kartın altına sebepsiz bir boşluk bırakmasın. */
.kart-alt:not(:has(> :not([hidden]))) { display: none; }

.kart-oz,
.kart-uzaklik {
  font-size: 10.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 3px 7px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  color: var(--paper-dim);
}
.kart-uzaklik { color: var(--moss); border-color: color-mix(in srgb, var(--moss) 45%, transparent); }

.harita-bos { padding: 22px 16px; font-size: 13.5px; color: var(--paper-faint); margin: 0; }

/* Şehir düğmeleri — basınca harita o şehre yakınlaşıyor */
.harita-sehirler {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.harita-sehir {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--ink-2);
  color: var(--paper-2);
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.harita-sehir:hover { border-color: var(--gold-deep); color: var(--gold); background: var(--vurgu-zemin); }

.harita-sehir span {
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  color: var(--paper-faint);
}

.harita-sehir.etkin {
  border-color: var(--gold);
  background: var(--gold-glow);
  color: var(--paper);
}
.harita-sehir.etkin span { color: var(--gold); }

/* Küme işareti — içindeki salon sayısı, rengi puan ortalaması */
.kume-isaret { background: none; border: 0; }

.kume-isaret span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  /* Zemin koyu, puan ortalaması halkada ve sayıda. Daire baştan sona puan
     rengiyle dolduğunda 3 puanın grisi karo üstünde çamura dönüyor, altın
     5 puan ise göz alıyordu; ikisi de "kaç salon var" sorusunu okutmuyordu.
     Koyu zemin sayıyı her basamakta net tutuyor, renk halkada yaşıyor. */
  background: color-mix(in srgb, var(--ink) 86%, var(--kume, var(--paper-dim)));
  border: 2px solid var(--kume, var(--paper-dim));
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--kume, var(--paper-dim)) 18%, transparent),
    0 2px 6px rgba(0, 0, 0, .35);
  color: var(--paper);
  /* Punto daireyle birlikte büyüyor (JS'te --kume-punto). */
  font-size: var(--kume-punto, 14px);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  transition: transform .15s;
}
.kume-isaret:hover span { transform: scale(1.08); }

/* Gündüz temasında karo açık: koyu zemin, geniş hale ve ağır gölge karonun
   üstünde kirli birer leke bırakıyor, sayı okunmuyordu. Zemin kâğıda
   yaklaşıyor, puan ortalaması halkada ve sayının kendi renginde. */
[data-tema="gunduz"] .kume-isaret span {
  background: color-mix(in srgb, #fff 84%, var(--kume, var(--paper-dim)));
  color: color-mix(in srgb, var(--kume, var(--paper-dim)) 60%, #16130d);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--kume, var(--paper-dim)) 14%, transparent),
    0 1px 4px rgba(35, 26, 12, .25);
}

/* Karolar eski sitedeki yöntemle karartılıyor: standart OpenStreetMap
   görüntüsü CSS filtresinden geçiyor. Filtre yalnızca karo katmanında;
   işaretler, balonlar ve düğmeler kendi renginde kalıyor. */
.map-tiles { filter: invert(.9) hue-rotate(180deg) brightness(.9) contrast(1.1); }
[data-tema="gunduz"] .map-tiles { filter: none; }

/* Zoom düğmeleri ve künye — sitenin rengine oturuyor */
.leaflet-bar { border: 1px solid var(--rule) !important; }
.leaflet-bar a,
.leaflet-bar a:hover {
  background: var(--ink-2) !important;
  color: var(--paper) !important;
  border-bottom-color: var(--rule) !important;
}
.leaflet-bar a:hover { background: var(--ink-3) !important; }

.leaflet-control-attribution {
  background: color-mix(in srgb, var(--ink) 82%, transparent) !important;
  color: var(--paper-faint) !important;
  font-size: 11px !important;
}
.leaflet-control-attribution a { color: var(--paper-dim) !important; }

.leaflet-popup-content-wrapper {
  background: var(--ink-2) !important;
  color: var(--paper) !important;
  border-radius: 8px !important;
  border: 1px solid var(--rule);
}
.leaflet-popup-tip { background: var(--ink-2) !important; }
.leaflet-popup-content { margin: 14px 16px !important; font-family: var(--sans); }
.leaflet-container a.leaflet-popup-close-button { color: var(--paper-dim) !important; }

.pin-ad {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 600;
  display: block;
  margin-bottom: 3px;
}
/* Şehir solda, yıldız sağda — haritanın yan listesindeki kartla aynı düzen. */
.pin-satir {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 9px;
}

.pin-yer {
  font-size: 12.5px;
  color: var(--paper-dim);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Balondaki özellik etiketleri */
.pin-ozler { display: flex; flex-wrap: wrap; gap: 5px; margin: 0 0 10px; }

.pin-oz {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font: 600 10.5px/1 var(--sans);
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 4px 7px;
  border: 1px solid var(--rule);
  border-radius: 3px;
  color: var(--paper-dim);
  white-space: nowrap;
}

/* Otopark etiketi kartlardaki dille aynı: ücretsiz yeşil, yok kırmızı,
   ücretli nötr. Salonu seçerken park yeri teknoloji kadar belirleyici. */
.pin-oz .oz-simge { width: 13px; height: 13px; }
.pin-oz.iyi  { color: var(--moss); border-color: color-mix(in srgb, var(--moss) 55%, transparent); }
.pin-oz.kotu { color: var(--rust); border-color: color-mix(in srgb, var(--rust) 55%, transparent); }

/* Balondaki yıldız şeridi — puan rengini [data-puan] üzerinden alıyor. */
.pin-yildiz { display: inline-flex; gap: 2px; margin: 0; flex: none; }
.pin-yildiz .star { font-size: 13px; }

.pin-hukum { margin: 0 0 10px; font-size: 13px; line-height: 1.5; }

/* Uyarı artık eylem şeridinin içinde, "Bilet alma!" düğmesinin sağında:
   düğme yüksekliğine uyuyor, metni ortasından bölünmüyor. Büyük harf ve
   harf aralığı kalktı — ikisi yan yana balona ancak o zaman sığıyor. */
.pin-uyari {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  border: 1px solid color-mix(in srgb, var(--rust) 35%, transparent);
  border-radius: 6px;
  background: var(--rust-soft);
  color: var(--rust);
  font: 700 11.5px/1 var(--sans);
  white-space: nowrap;
}
.pin-uyari .oz-simge { width: 14px; height: 14px; flex: none; }

/* Balondaki eylemler — kartın altındaki düğmelerin küçük hâli. Leaflet
   bağlantılara kendi mavisini `.leaflet-container a` ile veriyor; seçiciler
   o yüzden onunkinden güçlü. */
.pin-eylemler { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 10px; }

/* Uyarılı balon: düğme ile uyarı yan yana kalsın. Leaflet balonun genişliğini
   içeriği ölçerek buluyor; şerit sarmalanabilir olduğunda ölçüm en dar hâli
   veriyor, uyarı da düğmenin altına düşüyordu. Sarmalama kapalıyken ölçüm
   ikisinin toplamını görüyor ve balon o genişlikte açılıyor. */
.pin-eylemler.uyarili { flex-wrap: nowrap; }

.leaflet-container a.pin-dugme {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  font: 600 12.5px/1 var(--sans);
  color: var(--paper);
  text-decoration: none;
  transition: background-color .15s, border-color .15s;
}
.leaflet-container a.pin-dugme:hover { background: var(--ink-3); border-color: var(--paper-faint); }
.pin-dugme .oz-simge { width: 15px; height: 15px; }

.leaflet-container a.pin-bilet { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.leaflet-container a.pin-bilet:hover { background: var(--brand-2); border-color: var(--brand-2); }
.leaflet-container a.pin-bilet.dusuk { background: var(--tehlike); border-color: var(--tehlike); color: #fff; }
.leaflet-container a.pin-bilet.dusuk:hover { background: var(--tehlike-2); border-color: var(--tehlike-2); }

.leaflet-container a.pin-link { display: inline-block; font-size: 13px; font-weight: 600; color: var(--gold); }

/* ---------------------------------------------------------------------
   10. Ziyaretçi puanı
   ------------------------------------------------------------------ */
.zp { margin-top: 54px; }

.zp-ozet {
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
  padding: 22px 0;
  border-bottom: 1px solid var(--rule);
}

.zp-ortalama {
  font-family: var(--serif);
  font-size: 46px;
  font-weight: 600;
  line-height: 1;
  color: var(--paper);
}
.zp-ortalama small { font-size: 17px; color: var(--paper-faint); font-weight: 400; }

.zp-dagilim { flex: 1 1 240px; min-width: 200px; }

.zp-satir {
  display: grid;
  grid-template-columns: 34px 1fr 34px;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  color: var(--paper-dim);
  padding: 2px 0;
}

.zp-cubuk {
  height: 6px;
  background: var(--ink-4);
  border-radius: 3px;
  overflow: hidden;
}
.zp-cubuk i { display: block; height: 100%; background: var(--gold-deep); border-radius: 3px; }

/* Yıldız seçici */
.yildiz-sec {
  display: inline-flex;
  flex-direction: row-reverse;
  gap: 4px;
}

.yildiz-sec input { position: absolute; opacity: 0; width: 0; height: 0; }

.yildiz-sec label {
  cursor: pointer;
  color: var(--rule);
  line-height: 0;
  font-size: 30px;
  padding: 2px;
  transition: color .1s;
}
.yildiz-sec label svg { fill: currentColor; width: 1em; height: 1em; }

.yildiz-sec label:hover,
.yildiz-sec label:hover ~ label,
.yildiz-sec input:checked ~ label { color: var(--gold); }

.yildiz-sec:focus-within label { outline: none; }
.yildiz-sec input:focus-visible + label { outline: 2px solid var(--gold); outline-offset: 2px; }

.zp-form { padding: 26px 0 0; }

.zp-form label.alan {
  display: block;
  margin-bottom: 6px;
  font: 600 11.5px/1 var(--sans);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--paper-dim);
}

.zp-form input[type="text"],
.zp-form textarea,
.form-alan {
  width: 100%;
  background: var(--ink-2);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 11px 13px;
  font-size: 15px;
  color: var(--paper);
  margin-bottom: 16px;
}
.zp-form textarea { min-height: 110px; resize: vertical; line-height: 1.55; }
.zp-form input:focus, .zp-form textarea:focus, .form-alan:focus {
  outline: none;
  border-color: var(--gold-deep);
  box-shadow: 0 0 0 3px var(--gold-glow);
}

/* Bal küpü — insan görmez, bot doldurur */
.kupe {
  position: absolute !important;
  left: -9999px !important;
  opacity: 0;
  height: 0;
  overflow: hidden;
}

.zp-yorumlar { list-style: none; margin: 30px 0 0; padding: 0; }

.zp-yorumlar li {
  padding: 18px 0;
  border-bottom: 1px solid var(--rule-soft);
}
.zp-yorumlar li:last-child { border-bottom: 0; }

.zp-yorum-ust {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.zp-yorum-ad { font-weight: 600; font-size: 14.5px; }
.zp-yorum-tarih { font-size: 12.5px; color: var(--paper-faint); margin-left: auto; }
.zp-yorumlar p { margin: 0; font-size: 15px; line-height: 1.62; color: var(--paper-2); }

/* Bildirim kutusu */
.bildirim {
  padding: 13px 16px;
  border-radius: 6px;
  font-size: 14.5px;
  margin-bottom: 20px;
  border: 1px solid;
}
.bildirim.olumlu { border-color: color-mix(in srgb, var(--moss) 45%, transparent); background: color-mix(in srgb, var(--moss) 10%, transparent); color: var(--moss); }
.bildirim.olumsuz { border-color: color-mix(in srgb, var(--rust) 45%, transparent); background: var(--rust-soft); color: var(--rust); }
.bildirim.notr { border-color: var(--rule); background: var(--ink-2); color: var(--paper-2); }

/* ---------------------------------------------------------------------
   11. Metin sayfaları
   ------------------------------------------------------------------ */
/* Dikkat: burada `padding` kısayolu kullanılmıyor.
   `.metin` her zaman `.wrap` ile birlikte yazılıyor ve `.wrap` yan
   boşluğu `padding-inline` ile veriyor. Kısayol yazınca yan boşluk
   sıfırlanıyordu: bütün metin sayfalarında (hakkımızda, gizlilik,
   iletişim, hata sayfaları) yazı ekranın soluna yapışıyordu — dar
   ekranda harflerin cam kenarına değdiği yer burasıydı. */
.metin { padding-block: clamp(34px, 6vw, 66px) 70px; max-width: 70ch; }

.metin h1 {
  font-size: clamp(32px, 5vw, 50px);
  letter-spacing: -.03em;
  margin-bottom: 20px;
}

.metin h2 {
  font-size: 25px;
  margin: 44px 0 14px;
}

.metin p, .metin li {
  font-size: 16.5px;
  line-height: 1.72;
  color: var(--paper-2);
}

.metin ul, .metin ol { padding-left: 22px; }
.metin li { margin-bottom: 9px; }

.metin .giris {
  font-family: var(--serif);
  font-size: 20px;
  line-height: 1.55;
  color: var(--paper);
  border-left: 3px solid var(--gold-deep);
  padding-left: 20px;
  margin-bottom: 34px;
}

/* Puan cetveli */
.cetvel { list-style: none; padding: 0; margin: 26px 0; }

.cetvel li {
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: 20px;
  align-items: start;
  padding: 16px 0 16px 16px;
  border-top: 1px solid var(--rule);
  border-left: 3px solid transparent;
}
.cetvel li:last-child { border-bottom: 1px solid var(--rule); }

.cetvel li[data-puan="5"] { border-left-color: var(--puan-5); }
.cetvel li[data-puan="4"] { border-left-color: var(--puan-4); }
.cetvel li[data-puan="3"] { border-left-color: var(--puan-3); }
.cetvel li[data-puan="2"] { border-left-color: var(--puan-2); }
.cetvel li[data-puan="1"] { border-left-color: var(--puan-1); }

.cetvel-puan { display: flex; flex-direction: column; gap: 4px; }
.cetvel .stars { margin: 0; }
.cetvel .star { font-size: 15px; }

.cetvel-sayi {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.02em;
}
.cetvel-sayi small { font-size: 13px; font-weight: 400; color: var(--paper-faint); }

.cetvel li[data-puan="5"] .cetvel-sayi { color: var(--puan-5); }
.cetvel li[data-puan="4"] .cetvel-sayi { color: var(--puan-4); }
.cetvel li[data-puan="3"] .cetvel-sayi { color: var(--puan-3); }
.cetvel li[data-puan="2"] .cetvel-sayi { color: var(--puan-2); }
.cetvel li[data-puan="1"] .cetvel-sayi { color: var(--puan-1); }

.cetvel b { display: block; font-size: 16px; margin-bottom: 4px; }

.cetvel li[data-puan="5"] b { color: var(--puan-5); }
.cetvel li[data-puan="4"] b { color: var(--puan-4); }
.cetvel li[data-puan="3"] b { color: var(--puan-3); }
.cetvel li[data-puan="2"] b { color: var(--puan-2); }
.cetvel li[data-puan="1"] b { color: var(--puan-1); }

/* Yalnızca açıklama metnini boyuyoruz.
   Eskiden seçici düpedüz `.cetvel span` idi ve yıldızları da yakalıyordu:
   `.star` sınıfından daha ağır olduğu için bütün yıldızlar aynı griye
   boyanıyor, dolu-boş ayrımı kayboluyordu — "İdare eder" satırındaki üç
   dolu yıldız boş yıldızlarla birebir aynı renge geliyordu. */
.cetvel b + span {
  display: block;
  font-size: 15px;
  color: var(--paper-dim);
  line-height: 1.6;
}

/* Hakkımızda — rakamlar şeridi */
.rakamlar {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 34px 0 10px;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 22px 0;
}

.rakamlar div {
  padding: 0 26px;
  border-left: 1px solid var(--rule);
}
.rakamlar div:first-child { padding-left: 0; border-left: 0; }

.rakamlar b {
  display: block;
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -.03em;
  color: var(--brand);
  line-height: 1;
}

.rakamlar span {
  display: block;
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--paper-dim);
}

/* Hakkımızda — değerler ve yol haritası */
.degerler, .yol { list-style: none; padding: 0; margin: 22px 0 10px; }

.degerler li, .yol li {
  padding: 16px 0 16px 20px;
  border-top: 1px solid var(--rule);
  position: relative;
  margin: 0;
}
.degerler li:last-child, .yol li:last-child { border-bottom: 1px solid var(--rule); }

.degerler li::before, .yol li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 24px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand);
}

.degerler b, .yol b {
  display: block;
  font-size: 16.5px;
  margin-bottom: 4px;
  color: var(--paper);
}

.degerler span, .yol span {
  font-size: 15.5px;
  color: var(--paper-dim);
  line-height: 1.65;
}

/* İletişim formu */
.form-satir { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }

/* Form artık kendi kutusunda duruyor: sayfanın geri kalanından ayrılıyor,
   nerede başlayıp nerede bittiği belli. */
.form-kutu {
  background: var(--ink-2);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 26px clamp(18px, 3vw, 30px) 28px;
  margin-top: 26px;
}

/* Kutu ile alanlar aynı renk olmasın; alanlar bir tık ayrışsın. */
.form-kutu input[type="text"],
.form-kutu textarea,
.form-kutu select { background: var(--ink-3); }

.form-not {
  font-size: 13px;
  color: var(--paper-faint);
  margin: 0 0 20px;
}

.zorunlu { color: var(--rust); font-weight: 700; }

.alan-ipucu {
  margin: -10px 0 16px;
  font-size: 12.5px;
  color: var(--paper-faint);
  line-height: 1.5;
}

/* Konu seçimi — açılır kutu yerine görünen düğmeler.
   Küçük bir açılır kutu olduğunda alanın varlığı fark edilmiyordu. */
.konu-secim {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 20px;
}

.konu-cip {
  display: inline-flex;
  align-items: center;
  padding: 9px 15px;
  border: 1px solid var(--rule);
  border-radius: 40px;
  font-size: 14px;
  color: var(--paper-2);
  cursor: pointer;
  user-select: none;
  transition: border-color .12s, color .12s, background .12s;
}
.konu-cip:hover { border-color: var(--gold-deep); color: var(--gold); background: var(--vurgu-zemin); }
.konu-cip input { position: absolute; opacity: 0; pointer-events: none; }
.konu-cip:has(input:checked) {
  border-color: var(--brand);
  color: var(--gold);
  background: var(--gold-glow);
  font-weight: 600;
}
.konu-cip:has(input:focus-visible) { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Formdaki açılır kutular da metin alanlarıyla aynı görünsün. */
.zp-form select {
  width: 100%;
  background: var(--ink-2);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 11px 34px 11px 13px;
  font-size: 15px;
  color: var(--paper);
  margin-bottom: 16px;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%238e8e8a' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 11px;
}

.onay-satir {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  margin: 6px 0 20px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--paper-2);
  cursor: pointer;
}
.onay-satir input { margin-top: 3px; accent-color: var(--gold); flex: none; }

/* Sık sorulanlar */
.sss { margin: 22px 0 10px; border-top: 1px solid var(--rule); }

.sss details { border-bottom: 1px solid var(--rule); }

.sss summary {
  padding: 16px 30px 16px 0;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  position: relative;
  color: var(--paper);
}
.sss summary::-webkit-details-marker { display: none; }

.sss summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 19px;
  font-weight: 400;
  color: var(--gold);
}
.sss details[open] summary::after { content: "–"; }
.sss summary:hover { color: var(--gold); }

.sss details p {
  margin: 0 0 18px;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--paper-2);
  max-width: 62ch;
}

/* ---------------------------------------------------------------------
   Geniş metin sayfaları: iletişim, hakkımızda, nasıl puanlıyoruz
   ------------------------------------------------------------------ */
/* Bu üç sayfa `.metin`in 70ch'lik sütunundaydı. Büyük ekranda form ekranın
   ortasında avuç içi kadar kalıyor, iki yanı boş duruyordu. Artık sayfa
   geniş; okuma rahatlığı için satır uzunluğunu paragraflar sınırlıyor.
   Hukuki metinler dar sütunda kalıyor, onlar baştan sona okunuyor. */
.metin.genis { max-width: min(var(--wrap), 1280px); }

.metin.genis > h1 { font-size: clamp(30px, 4.4vw, 60px); max-width: 22ch; }
.metin.genis > .giris { font-size: clamp(19px, 1.6vw, 23px); max-width: 62ch; }
.metin.genis p { max-width: 74ch; }

/* Başlık solda, içerik sağda; dar ekranda alt alta. */
/* Tek sütun da açıkça minmax(0, 1fr). Yazılmayınca sütun içeriğe göre
   boylanıyordu: telefonda kart ızgarası iki 338 piksellik sütun açıp
   bölümü 690 piksele çıkarıyor, hakkımızda, yöntem, gizlilik ve çerez
   sayfaları yana kayıyordu. */
.bolum-satir {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  padding-block: 36px;
  border-top: 1px solid var(--rule);
  margin-top: 40px;
}
.bolum-satir + .bolum-satir { margin-top: 0; }

.metin .bolum-satir > h2 {
  margin: 0;
  font-size: clamp(24px, 2.1vw, 30px);
  line-height: 1.2;
}
.bolum-satir > div > :first-child { margin-top: 0; }
.bolum-satir > div > :last-child { margin-bottom: 0; }

@media (min-width: 900px) {
  .bolum-satir {
    grid-template-columns: minmax(200px, 300px) minmax(0, 1fr);
    gap: clamp(36px, 5vw, 90px);
    padding-block: 52px;
  }
}

/* Kart ızgarası — ölçütler, değerler, yol haritası */
.metin .kart-izgara {
  list-style: none;
  padding: 0;
  margin: 22px 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: 14px;
}
.metin .kart-izgara > li {
  margin: 0;
  padding: 20px 22px;
  background: var(--ink-2);
  border: 1px solid var(--rule);
  border-radius: 10px;
}
/* Dört kartlık listelerde otomatik sütun 3+1 bölüp tek kartı alta yalnız
   bırakıyordu; bunlar ikişer ikişer diziliyor. */
@media (min-width: 561px) {
  .metin .kart-izgara.iki { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.kart-izgara b { display: block; font-size: 16.5px; color: var(--paper); margin-bottom: 6px; }
.kart-izgara span { display: block; font-size: 15px; line-height: 1.65; color: var(--paper-dim); }

@media (min-width: 561px) {
  .metin.genis .rakamlar {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 30px 0;
  }
  .metin.genis .rakamlar b { font-size: clamp(34px, 3.4vw, 50px); }
  .metin.genis .rakamlar span { font-size: 14px; }

  .metin.genis .cetvel li { grid-template-columns: 170px minmax(0, 1fr); padding: 20px 0 20px 20px; }
}

/* İletişim: form solda, sık sorulanlar sağda */
.iletisim-duzen { display: grid; gap: 48px; margin-top: 34px; }

@media (min-width: 1000px) {
  .iletisim-duzen {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: clamp(40px, 5vw, 88px);
    align-items: start;
  }
}

.iletisim-duzen .form-kutu { margin-top: 0; padding: clamp(22px, 3vw, 42px); }

.iletisim-duzen .zp-form input[type="text"],
.iletisim-duzen .zp-form textarea { font-size: 16px; padding: 14px 16px; }
.iletisim-duzen .zp-form textarea { min-height: 260px; }
.iletisim-duzen .zp-form label.alan { font-size: 12px; margin-bottom: 8px; }
.iletisim-duzen .konu-cip { font-size: 15px; padding: 10px 17px; }
.iletisim-duzen button[type="submit"] { padding: 14px 32px; font-size: 16px; }

.metin .iletisim-yan > h2:first-child { margin-top: 0; }
.metin.genis .iletisim-yan .sss details p { max-width: none; }

/* ---------------------------------------------------------------------
   Hukuki metinler: gizlilik, çerez, kullanım şartları
   ------------------------------------------------------------------ */
/* Bu sayfalar 70 karakterlik dar sütundaydı; iletişim ve hakkımızdanın
   yanında ekranın ortasında ince bir şerit gibi kalıyordu. Artık onlarla
   aynı geniş düzende: başlık solda, içerik sağda, tablolar tam genişlikte.
   Okuma rahatlığı için paragraflar yine kendi ölçüsünde. */
.metin ul.hukuk-ic,
.hukuk-ic {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}
.hukuk-ic a {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border: 1px solid var(--rule);
  border-radius: 40px;
  font-size: 14px;
  color: var(--paper-2);
  text-decoration: none;
  background: var(--ink-2);
}
.hukuk-ic a:hover { border-color: var(--gold-deep); color: var(--gold); background: var(--vurgu-zemin); }

.metin.genis .bolum-satir { scroll-margin-top: 90px; }
.metin.genis .bolum-satir h3 {
  font-size: 18px;
  margin: 30px 0 10px;
  color: var(--paper);
}
.metin.genis .bolum-satir > div > h3:first-child { margin-top: 0; }
.metin.genis .bolum-satir ul { max-width: 80ch; }
.metin.genis .bolum-satir li { font-size: 16.5px; }
.metin.genis .tablo-kaydir { margin: 18px 0 26px; }
.metin.genis .veri-tablo { font-size: 15px; }
.metin.genis .veri-tablo th,
.metin.genis .veri-tablo td { padding: 13px 18px 13px 0; }

.hukuk-vurgu {
  margin: 22px 0;
  padding: 20px 24px;
  border: 1px solid var(--rule);
  border-left: 3px solid var(--brand);
  border-radius: 10px;
  background: var(--ink-2);
  max-width: 80ch;
}
.hukuk-vurgu p { margin: 0; max-width: none; }
.hukuk-vurgu p + p { margin-top: 10px; }

.hukuk-alt {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  padding-top: 36px;
  border-top: 1px solid var(--rule);
  margin-top: 10px;
}
.hukuk-alt .tarih { margin-left: auto; font-size: 14px; color: var(--paper-faint); }

/* Veri tabloları — çerez ve gizlilik sayfaları */
.tablo-kaydir { overflow-x: auto; margin: 22px 0 30px; }

.veri-tablo {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  font-size: 14.5px;
}

.veri-tablo th,
.veri-tablo td {
  text-align: left;
  padding: 11px 14px 11px 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
  line-height: 1.55;
}

.veri-tablo th {
  font-size: 11.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--paper-dim);
  font-weight: 600;
  border-bottom-color: var(--paper-faint);
}

.veri-tablo td { color: var(--paper-2); }
.veri-tablo code {
  font: 500 13px/1 ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas, monospace;
  color: var(--gold);
}

/* Çerez bandı */
.cerez-bant {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  background: var(--ink-2);
  border-top: 1px solid var(--rule);
  box-shadow: 0 -18px 40px -30px rgba(0, 0, 0, .9);
}

.cerez-ic {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 18px var(--gutter);
  display: flex;
  gap: 26px;
  align-items: center;
  flex-wrap: wrap;
}

.cerez-ic p {
  margin: 0;
  flex: 1 1 420px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--paper-2);
  max-width: 76ch;
}

.cerez-dugmeler { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------------------------------------------------------------------
   12. Alt bilgi
   ------------------------------------------------------------------ */
.alt {
  border-top: 1px solid var(--rule);
  padding: 44px 0 34px;
  margin-top: auto;
  background: var(--ink-2);
}

.alt-ic {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 40px;
}

.alt-ic h4 {
  font: 600 11.5px/1 var(--sans);
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--paper-dim);
  margin-bottom: 14px;
}

.alt p { font-size: 14.5px; line-height: 1.65; color: var(--paper-dim); max-width: 40ch; }

.alt ul { list-style: none; margin: 0; padding: 0; }
.alt li { margin-bottom: 9px; }
.alt li a { font-size: 14.5px; color: var(--paper-2); text-decoration: none; }
.alt li a:hover { color: var(--gold); }

.alt-cizgi {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 38px;
  padding-top: 22px;
  border-top: 1px solid var(--rule);
  font-size: 13px;
  color: var(--paper-faint);
}

body { display: flex; flex-direction: column; min-height: 100vh; }
main { flex: 1; }

/* ---------------------------------------------------------------------
   13. Küçük ekranlar
   ------------------------------------------------------------------ */
@media (max-width: 960px) {
  .salon-govde { grid-template-columns: 1fr; gap: 40px; }
  .yan { position: static; }
  .alt-ic { grid-template-columns: 1fr 1fr; }
  .harita-duzen { grid-template-columns: 1fr; }
  .harita-yan { max-height: 320px; }
}

@media (max-width: 820px) {
  /* Panelin üç çocuğu var: şerit, görsel, gövde. İki sütunlu bir ızgarada
     ızgara kendiliğinden yerleştirince gövde ikinci satırın BİRİNCİ
     sütununa, yani 5 piksellik şeridin altına düşüyordu: gövde ~40 piksel
     genişliğinde kalıyor, içindeki her şey sola yığılıp sağa taşıyordu.
     Telefonda "her şey sola yapışmış" görüntüsünün sebebi buydu.
     Şerit iki satırı da kaplıyor, görsel ve gövde ikinci sütunda. */
  .panel { grid-template-columns: 5px minmax(0, 1fr); }
  .panel > .serit    { grid-column: 1; grid-row: 1 / span 2; }
  /* Telefonda görsel kendi satırında, o yüzden yüksekliğini oran veriyor. */
  .panel-gorsel      { grid-column: 2; grid-row: 1; aspect-ratio: 16 / 9; min-height: 0; }
  .panel-govde       { grid-column: 2; grid-row: 2; padding: 22px 20px; }

  .salon-bas { grid-template-columns: 1fr; align-items: start; gap: 22px; }
  .salon-puan { text-align: left; display: flex; align-items: center; gap: 16px; }
  .salon-puan .puan-sayi { font-size: 48px; }

  .filtre { top: 58px; }
  .ust-ic { height: 58px; }

  .menu {
    position: fixed;
    inset: 58px 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--ink-2);
    border-bottom: 1px solid var(--rule);
    padding: 10px var(--gutter) 18px;
    display: none;
    box-shadow: var(--shadow);
  }
  .menu.acik { display: flex; }
  .menu a { padding: 13px 4px; font-size: 16px; border-bottom: 1px solid var(--rule-soft); border-radius: 0; }
  .menu a[aria-current] { box-shadow: none; color: var(--gold); }
  .menu-ac { display: grid; place-items: center; }
  .tema-dugme { margin: 12px 0 0; width: 100%; height: 40px; }

  /* Başlık + açıklama iki sütunda sıkışıyordu. */
  .bolum-bas-blok { grid-template-columns: 1fr; gap: 10px; padding: 34px 0 18px; }
  .harita-cagri { grid-template-columns: 1fr; gap: 20px; }
  .harita-cagri .dugme { justify-content: center; }

  /* Uyarı sayfası: puan halkası başlığın üstüne, yatay şerit olarak. */
  .uyari-ic { grid-template-columns: 1fr; }
  .uyari-olcu {
    order: -1;
    flex-direction: row;
    align-items: center;
    gap: 14px;
    align-self: start;
  }
  .uyari-halka { width: 92px; height: 92px; }
  .uyari-halka::before { inset: 8px; }
  .uyari-sayi { font-size: 32px; }
  .uyari-sayi small { font-size: 13px; }
  .uyari-karar { grid-template-columns: 1fr; }

  /* Künye satırı sarınca ayraç çizgileri yamuk kalıyordu; ızgaraya
     alıp ayraçları kaldırıyoruz. */
  .uyari-kunye { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .uyari-kunye > div { padding: 0; margin: 0; border-right: 0; }
}

@media (max-width: 560px) {
  .panel-ust { flex-direction: column; gap: 14px; }
  .puan-blok { text-align: left; display: flex; align-items: center; gap: 12px; }
  .puan-blok .stars { margin-top: 0; }
  .puan-sozu { margin-top: 0; }
  .puan-sayi { font-size: 32px; }

  /* Sayı şeridi telefonda tek satıra sığmıyor, son kutu tek başına alta
     düşüp sağı boş bırakıyordu. Dörtlü ızgara genişliği dolduruyor. */
  .sayilar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-bottom: 1px solid var(--rule);
  }
  .sayilar div {
    padding: 14px 14px 14px 0;
    margin: 0;
    border-right: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
  }
  .sayilar div:nth-child(2n) { border-right: 0; padding-left: 14px; }
  .sayilar div:nth-last-child(-n+2) { border-bottom: 0; }
  .sayilar b { font-size: 25px; }

  /* Filtre kutuları da tam genişlikte dursun; yarım kalan satırlar
     sayfayı sola yapışmış gösteriyordu. */
  .filtre-satir > .arama { flex: 1 1 100%; }
  .filtre-satir .sec,
  .filtre-satir .dugme-ek { flex: 1 1 calc(50% - 5px); min-width: 0; }
  .filtre-satir .dugme-ek { justify-content: center; }

  /* Özellik rozetleri: telefonda yan yana iki tane sığsın.
     Eskiden her biri kendi satırında duruyor, panel gereksiz uzuyordu. */
  .ozellikler { gap: 6px; margin-top: 16px; }
  .oz {
    font-size: 10.5px;
    letter-spacing: .05em;
    padding: 5px 8px;
    gap: 5px;
  }
  .oz-simge { width: 14px; height: 14px; }

  .alt-ic { grid-template-columns: 1fr; gap: 28px; }
  .form-satir { grid-template-columns: 1fr; }
  .cerez-dugmeler .dugme { flex: 1 1 auto; justify-content: center; }
  .cetvel li { grid-template-columns: 1fr; gap: 8px; }
  .cetvel-puan { flex-direction: row; align-items: center; gap: 10px; }
  .kunye > div { grid-template-columns: 84px 1fr; }

  /* Düğme yazıları iki satıra bölünüyordu. */
  .panel-alt { gap: 8px; padding-top: 18px; }
  .panel-alt .dugme {
    flex: 1 1 calc(50% - 4px);
    justify-content: center;
    padding: 11px 12px;
    white-space: nowrap;
  }
  .panel-tarih { width: 100%; margin: 8px 0 0; }

  .panel h2 { font-size: 22px; }
  .panel-govde { padding: 20px 16px; }
  .metin h1 { font-size: 30px; }

  /* Manşetteki sayı şeridiyle aynı dert: dördüncü kutu tek başına alta
     düşüp satırın sağını boş bırakıyordu. */
  .rakamlar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px 0;
    padding: 20px 0;
  }
  .rakamlar div { padding: 0 0 0 16px; border-left: 1px solid var(--rule); }
  .rakamlar div:nth-child(2n+1) { padding-left: 0; border-left: 0; }
}

/* Yazdırma — inceleme sayfası kağıda düzgün insin. */
@media print {
  .ust, .filtre, .alt, .yan, .zp-form, .atla, .cerez-bant { display: none !important; }
  body { background: #fff; color: #000; }
  .yazi p { color: #000; }
}