/* =========================================================================
   Masterclass — kataloq səhifələri (`web/build-catalog.mjs` üçün)
   -------------------------------------------------------------------------
   NİYƏ AYRICA FAYL: `styles.css` landing-in stilidir və hər ziyarətçi onu
   onsuz da endirir. Kataloq siniflərini ora qatsaydıq ana səhifə heç vaxt
   işlətmədiyi ~6 KB-ı daşıyardı; ayrı fayl isə yalnız kataloq səhifələrində
   yüklənir və landing-in keş damğası kataloq dəyişəndə pozulmur.

   NİYƏ TOKEN UYDURULMUR: bütün rəng, boşluq və şrift `styles.css`-dəki
   dəyişənlərdən gəlir. Burada YENİ rəng təyin olunmur — nizamnamənin
   «hər tokenin qaranlıq qarşılığı bir yerdə» qaydası orada saxlanılır,
   ikinci mənbə yaransa qaranlıq rejim iki fayl arasında sürüşərdi.

   KƏSİM NÖQTƏSİ YOXDUR: landing 2026-08-30-da axıcı düzülüşə keçdi
   (`clamp`, `auto-fit`, sarınan flex). Burada eyni qayda — `@media` yalnız
   axıcı CSS-in ifadə EDƏ BİLMƏDİYİ hal üçün (göstərici tipi, hərəkət).
   ========================================================================= */

/* ---------- Səhifə gövdəsi ---------- */

.cat {
  padding: clamp(16px, 2.4vw, 34px) var(--pad-x) clamp(40px, 5vw, 80px);
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.8vw, 22px);
}

/* Yol (breadcrumb) — sarınır, çünki obyektin adı uzun ola bilər və
   375px-lik ekranda üfüqi sürüşmə səhifə gövdəsində HEÇ VAXT olmur. */
.cat__crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font: 600 12.5px/1.4 var(--font);
  color: var(--ink-2);
  min-width: 0;
}
.cat__crumbs a { color: var(--ink-2); }
.cat__crumbs a:hover { color: var(--accent-strong); }
.cat__crumbs span[aria-hidden] { color: var(--ink-3); }

.cat__head {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 62ch;
}
.cat__head h1 {
  font: 900 clamp(26px, 3.6vw, 40px)/1.12 var(--font);
  letter-spacing: -.03em;
}
.cat__lead { font: 500 15px/1.6 var(--font); color: var(--ink-2); }
.cat__count { font: 700 13px/1 var(--font); color: var(--ink-3); }

.cat__group { display: flex; flex-direction: column; gap: 12px; }
.cat__group h2 {
  font: 800 clamp(17px, 1.8vw, 21px)/1.2 var(--font);
  letter-spacing: -.02em;
  display: flex; align-items: baseline; gap: 8px;
}
.cat__gcount { font: 700 13px/1 var(--font); color: var(--ink-3); }

/* ---------- Süzgəc zolağı ----------
   Səhifədə JavaScript yoxdur (CSP `script-src 'none'`), ona görə hər çip
   AYRICA SƏHİFƏYƏ keçiddir. Zolaq SARINIR, üfüqi sürüşmür: sürüşən zolaqda
   sağdakı variantların olduğu görünmür və toxunuşla gəzmək lazım gəlir —
   burada isə seçim sayı azdır və hamısı bir baxışda oxunmalıdır. */

.cat__filter {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
}
.filt { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; }
/* Etiketin eni sabitdir ki, çiplər sütun kimi başlasın; dar ekranda
   `min-width` sarınmanı dayandırmır, sadəcə hizanı saxlayır. */
.filt__label {
  flex: 0 0 auto;
  min-width: 78px;
  font: 800 10.5px/1.4 var(--font);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.filt .chips { flex: 1 1 200px; min-width: 0; }

/* ---------- Siyahı kartları ---------- */

.ogrid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  /* Sütun sayı kəsim nöqtəsi ilə deyil, YERLƏ təyin olunur: 1 → 2 → 3 → 4
     fasiləsiz keçir. `min(...,100%)` 320px-lik ekranda sütunun daşmasını
     saxlayır. */
  grid-template-columns: repeat(auto-fill, minmax(var(--col-min), 1fr));
  gap: var(--card-gap);
}
.ocard { min-width: 0; }
.ocard a {
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--ink);
}
.ocard a:hover { border-color: var(--line-strong); color: var(--ink); }
.ocard__name { font: 800 15.5px/1.3 var(--font); letter-spacing: -.01em; }
/* Sabit hündürlük yazılmır: ad iki sətrə düşəndə kart uzanır, dağılmır. */
.ocard__meta { font: 500 12.5px/1.45 var(--font); color: var(--ink-2); }
.ocard__rate { display: flex; align-items: center; gap: 7px; margin-top: auto; padding-top: 4px; }
.ocard__rate .num { font: 700 13px/1 var(--font); color: var(--ink); }

/* ---------- Obyekt səhifəsi ---------- */

.obj { display: flex; flex-direction: column; gap: clamp(12px, 1.5vw, 18px); }

.obj__head { display: flex; flex-direction: column; gap: 10px; max-width: 74ch; }
.obj__head h1 {
  font: 900 clamp(24px, 3.4vw, 38px)/1.12 var(--font);
  letter-spacing: -.03em;
}
.obj__lead { font: 500 15px/1.6 var(--font); color: var(--ink-2); }

.obj__rating { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.obj__rating .num { font: 800 16px/1 var(--font); }
.obj__rating-meta { font: 600 13px/1 var(--font); color: var(--ink-2); }
/* Sıfır rəy «pis reytinq» deyil: ulduz cərgəsi ÇƏKİLMİR, yerində cümlə
   durur (nizamnamənin üç hissəli qaydası generatorda yazılıb). */
.obj__rating--none { font: 500 13.5px/1.55 var(--font); color: var(--ink-2); display: block; }

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

/* ---------- Düymələr ----------
   `--btn` tokeni brend səthidir və hər iki rejimdə eyni qırmızı qalır
   (`styles.css` şərhi): açıq mərcan `--accent` üstündə ağ mətn 2.54:1
   verərdi. Toxunma hədəfi 44px-dən aşağı düşmür. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 12px 18px;
  border-radius: 10px;
  font: 700 14px/1 var(--font);
  white-space: nowrap;
}
.btn--accent { background: var(--btn); color: var(--btn-ink); }
.btn--accent:hover { background: var(--btn-hover); color: var(--btn-ink); }
.btn--ghost {
  background: var(--surface);
  border: 1px solid var(--line-strong);
  color: var(--ink);
}
.btn--ghost:hover { border-color: var(--ink-3); color: var(--ink); }

/* Mağaza ünvanı hələ ictimai deyil — ÖLÜ LİNK yazılmır, düz mətn qalır
   (`admin-panel/src/lib/brandLinks.js` qaydası). */
.soon { font: 600 13px/1.4 var(--font); color: var(--ink-2); align-self: center; }

/* ---------- Çiplər ---------- */

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: 999px;
  font: 700 11.5px/1 var(--font);
  background: var(--accent-tint);
  color: var(--accent-strong);
}
/* İstiqamət mürəkkəb tonundadır, kateqoriya aksent tonunda — kataloq
   ekranındakı iki zolağın eyni ayrımı (CLAUDE.md, 2026-08-25). */
.chip--ink { background: var(--tint-neutral); color: var(--tint-neutral-ink); }
/* Status öz tonunu daşıyır, aksenti YOX: aksent yalnız əməliyyat üçündür. */
.chip--ok { background: var(--tint-ok); color: var(--tint-ok-ink); }

/* Keçid-çip: adi çipdən fərqi yalnız toxunma hədəfi və seçili vəziyyətdir. */
.chip--nav {
  gap: 5px;
  /* Toxunma hədəfi: çipin özü 36px, sətirlər arası 9px boşluq — barmaq üçün
     effektiv sahə 45px. Mətnin öz ölçüsü kiçik qalır ki, zolaq siyahının
     yerini yeməsin. */
  padding: 8px 13px;
  min-height: 36px;
  background: var(--tint-neutral);
  color: var(--ink-2);
  border: 1px solid var(--line);
}
.chip--nav .num { font-weight: 800; color: var(--ink-3); }
.chip--nav:hover { border-color: var(--line-strong); color: var(--ink); }
/* Seçili çip MÜRƏKKƏB tonundadır, aksent DEYİL: aksent yalnız əməliyyat
   üçündür (nizamnamə), süzgəcin vəziyyəti isə məlumatdır. */
.chip--on,
.chip--on:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--canvas);
}
.chip--on .num { color: var(--canvas); opacity: .7; }

/* ---------- Ulduzlar ----------
   Ortalama YUVARLAQLAŞDIRILMIR (CLAUDE.md): 3.7 üçün yarımçıq ulduz
   göstərilir. İki üst-üstə cərgə — üstdəki faizlə kəsilir. */
.stars { position: relative; display: inline-block; line-height: 1; white-space: nowrap; }
.stars__off { color: var(--line-strong); letter-spacing: 1px; }
.stars__on {
  position: absolute;
  inset: 0 auto 0 0;
  overflow: hidden;
  color: var(--tint-warn-ink);
  letter-spacing: 1px;
}

/* ---- Dolğunluq sinifləri (`s-0` … `s-50`) ----
   NİYƏ SİNİF, SƏTİRDAXİLİ `style` DEYİL — ÖLÇÜLDÜ: səhifənin
   `style-src 'self'` siyasəti `style="width:74%"` atributunu BLOKLAYIR.
   En tətbiq olunmayanda üst cərgə öz təbii eninə açılır, yəni 3.7
   reytinqli obyekt BEŞ TAM ULDUZLA görünürdü. Ekranda hər şey qaydasında
   idi, xəta yalnız konsolda — səhifədəki yeganə vizual rəqəm isə yalan
   danışırdı.

   Reytinq nizamnaməyə görə bir onluq rəqəmdir (2.5 · 4.0), ona görə
   mümkün dəyər 51-dir və hamısı burada sadalanır. Yuvarlaqlaşdırma
   YOXDUR: `s-37` məhz 3.7-dir, 4.0 deyil.

   Sinif əlavə edilməsi lazım gəlsə mənbə birdir — `starClass()`
   (`build-catalog.mjs`) və bu blok birlikdə dəyişir. */
.s-0 { width: 0%; }   /* 0.0 */  .s-1 { width: 2%; }   /* 0.1 */  .s-2 { width: 4%; }   /* 0.2 */
.s-3 { width: 6%; }   /* 0.3 */  .s-4 { width: 8%; }   /* 0.4 */  .s-5 { width: 10%; }   /* 0.5 */
.s-6 { width: 12%; }   /* 0.6 */  .s-7 { width: 14%; }   /* 0.7 */  .s-8 { width: 16%; }   /* 0.8 */
.s-9 { width: 18%; }   /* 0.9 */  .s-10 { width: 20%; }   /* 1.0 */  .s-11 { width: 22%; }   /* 1.1 */
.s-12 { width: 24%; }   /* 1.2 */  .s-13 { width: 26%; }   /* 1.3 */  .s-14 { width: 28%; }   /* 1.4 */
.s-15 { width: 30%; }   /* 1.5 */  .s-16 { width: 32%; }   /* 1.6 */  .s-17 { width: 34%; }   /* 1.7 */
.s-18 { width: 36%; }   /* 1.8 */  .s-19 { width: 38%; }   /* 1.9 */  .s-20 { width: 40%; }   /* 2.0 */
.s-21 { width: 42%; }   /* 2.1 */  .s-22 { width: 44%; }   /* 2.2 */  .s-23 { width: 46%; }   /* 2.3 */
.s-24 { width: 48%; }   /* 2.4 */  .s-25 { width: 50%; }   /* 2.5 */  .s-26 { width: 52%; }   /* 2.6 */
.s-27 { width: 54%; }   /* 2.7 */  .s-28 { width: 56%; }   /* 2.8 */  .s-29 { width: 58%; }   /* 2.9 */
.s-30 { width: 60%; }   /* 3.0 */  .s-31 { width: 62%; }   /* 3.1 */  .s-32 { width: 64%; }   /* 3.2 */
.s-33 { width: 66%; }   /* 3.3 */  .s-34 { width: 68%; }   /* 3.4 */  .s-35 { width: 70%; }   /* 3.5 */
.s-36 { width: 72%; }   /* 3.6 */  .s-37 { width: 74%; }   /* 3.7 */  .s-38 { width: 76%; }   /* 3.8 */
.s-39 { width: 78%; }   /* 3.9 */  .s-40 { width: 80%; }   /* 4.0 */  .s-41 { width: 82%; }   /* 4.1 */
.s-42 { width: 84%; }   /* 4.2 */  .s-43 { width: 86%; }   /* 4.3 */  .s-44 { width: 88%; }   /* 4.4 */
.s-45 { width: 90%; }   /* 4.5 */  .s-46 { width: 92%; }   /* 4.6 */  .s-47 { width: 94%; }   /* 4.7 */
.s-48 { width: 96%; }   /* 4.8 */  .s-49 { width: 98%; }   /* 4.9 */  .s-50 { width: 100%; }   /* 5.0 */


/* ---------- Kart daxili başlıqlar ---------- */

.card h2 {
  font: 800 clamp(16px, 1.6vw, 19px)/1.25 var(--font);
  letter-spacing: -.02em;
}

/* ---------- Faktlar və iş saatları ---------- */

.facts { display: flex; flex-direction: column; gap: 0; margin: 0; }
.facts > div {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line-soft);
  min-height: 24px;
}
.facts > div:last-child { border-bottom: 0; }
.facts dt {
  flex: 0 0 auto;
  /* Faizlə deyil, `ch` ilə: sətir 375px-də səbəbsiz sarınmasın
     (Profil ekranındakı `minWidth: 52%` baqının eyni dərsi). */
  min-width: 12ch;
  font: 600 13px/1.4 var(--font);
  color: var(--ink-2);
}
.facts dd {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  font: 600 14px/1.5 var(--font);
  color: var(--ink);
  overflow-wrap: anywhere;
}
/* Bağlı gün məlumatın OLMAMASINDAN doğur — sətir sakit qalır, qırmızı
   xəbərdarlıq deyil. */
.facts--hours .is-closed dd { color: var(--ink-3); font-weight: 500; }

/* ---------- Rəylər ---------- */

.revs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.rev { padding: 13px 0; border-bottom: 1px solid var(--line-soft); }
.rev:first-child { padding-top: 4px; }
.rev:last-child { border-bottom: 0; padding-bottom: 0; }
.rev__head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.rev__who { font: 700 13.5px/1 var(--font); color: var(--ink); }
.rev__date { font: 500 12px/1 var(--font); color: var(--ink-3); }
.rev__body { font: 500 14px/1.55 var(--font); color: var(--ink); overflow-wrap: anywhere; }

/* Boş hal mətni — «yoxdur» deyil, «növbəti addım». */
.empty { font: 500 13.5px/1.55 var(--font); color: var(--ink-2); }

/* ---------- Qalereya ----------
   Şəkillər sürüşən zolaqda DEYİL, şəbəkədədir: səhifə oxunmaq üçündür,
   gizlədilmiş şəkli axtarış botu da, çap da görmür. */
.obj__gal {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
  gap: 8px;
}
.obj__gal img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--hatch-b);
  display: block;
}

/* ---------- Video dəyərləndirmə ----------
   Oynadıcı YERLƏŞDİRİLMİR: `<iframe>` üçüncü tərəf skripti və kukisidir,
   səhifənin `script-src 'none'` siyasəti isə qəsdlidir. Keçid həmin
   videonu açır. */
.vid {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--ink);
  min-width: 0;
}
.vid:hover { border-color: var(--line-strong); color: var(--ink); }
.vid__shot {
  flex: 0 0 auto;
  width: 96px;
  height: 54px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
  /* Örtük YouTube CDN-indən gəlir, yəni bizim əlimizdə olmayan ünvandır.
     Yüklənməsə fon zolaqlı yer tutucu kimi qalır — boş ağ qutu «səhifə
     sınıb» kimi oxunur, zolaq isə «şəkil yoxdur» deyir. Şəkil gələndə
     onsuz da fonun üstünü örtür. */
  background: repeating-linear-gradient(
    45deg,
    var(--hatch-a) 0 6px,
    var(--hatch-b) 6px 12px
  );
}
/* Örtük yoxdursa zolaqlı yer tutucu — qradiyent və emoji qadağandır. */
.vid__shot--hatch {
  background: repeating-linear-gradient(
    45deg,
    var(--hatch-a) 0 6px,
    var(--hatch-b) 6px 12px
  );
  border: 1px solid var(--hatch-line);
}
.vid__mark {
  flex: 0 0 auto;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 999px;
  background: var(--accent-tint);
  color: var(--accent-strong);
  font-size: 12px;
}
.vid__text { font: 600 14px/1.45 var(--font); min-width: 0; overflow-wrap: anywhere; }

/* ---------- Sonluq kartı ---------- */

.cta { gap: 12px; }
.cta p { font: 500 14px/1.55 var(--font); color: var(--ink-2); }

/* =========================================================================
   Yalnız axıcı CSS-in ifadə edə bilmədiyi hallar
   ========================================================================= */

/* Toxunuş cihazında hover vəziyyəti barmaq qaldırıldıqdan sonra ilişib
   qalır — landing-də eyni qayda var. */
@media (hover: none) {
  .ocard a:hover,
  .vid:hover,
  .btn--ghost:hover { border-color: var(--line); }
}

/* Çap: naviqasiya, futer və düymələr kağızda mənasızdır; ünvan və iş
   saatı isə məhz çap üçün lazım olan hissədir. */
@media print {
  .nav, .footer, .cta, .obj__actions, .cat__crumbs { display: none; }
  .card, .ocard a { border-color: #ccc; }
  .cat { padding: 0; }
}