/* ============================================================================
   MERIDIAN — Keşfet (immersive discovery masonry). Scoped under .mrd-kesfet
   (inside .mrd for tokens). A full-bleed cinematic dark surface between the
   light header/footer; real tours as fluid-masonry cards that lead into detail.
   ========================================================================== */

.mrd-kesfet {
  position: relative;
  background:
    radial-gradient(60% 50% at 12% 8%, color-mix(in oklch, var(--mrd-aurora) 14%, transparent), transparent 55%),
    radial-gradient(55% 60% at 92% 4%, color-mix(in oklch, var(--mrd-violet) 18%, transparent), transparent 55%),
    linear-gradient(180deg, var(--mrd-ocean), var(--mrd-ink) 40%);
  color: var(--mrd-text-hi);
}

/* ── hero ── */
.kesfet-hero { position: relative; padding: clamp(116px, 17vh, 200px) 0 clamp(26px, 4vh, 52px); overflow: hidden; isolation: isolate; }
.kesfet-hero-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(40% 60% at 80% 40%, color-mix(in oklch, var(--mrd-sun-2) 12%, transparent), transparent 60%),
    radial-gradient(50% 70% at 20% 90%, color-mix(in oklch, var(--mrd-aurora) 10%, transparent), transparent 60%); }
.kesfet-hero-inner { position: relative; z-index: 1; }
.mrd-kesfet .chapter-eyebrow { font-family: var(--font-sans); font-size: .78rem; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase; color: var(--mrd-aurora); display: inline-flex; align-items: center; gap: .7em; }
.mrd-kesfet .chapter-eyebrow::before { content: ""; width: 34px; height: 1px; background: linear-gradient(90deg, var(--mrd-aurora), transparent); }
.kesfet-title { font-family: var(--font-display, 'Fraunces', serif); font-weight: 400; letter-spacing: -.03em;
  line-height: 1.0; font-size: clamp(2.6rem, 7vw, 6rem); margin: 1rem 0 1rem; max-width: 15ch; color: var(--mrd-text-hi); }
.kesfet-title em { font-style: italic; background: var(--mrd-trail); -webkit-background-clip: text; background-clip: text; color: transparent; }
.kesfet-lede { color: var(--mrd-text-mid); font-size: clamp(1rem, 1.1vw, 1.35rem); line-height: 1.5; max-width: 48ch; margin: 0 0 1.8rem; }

/* ── filter chips ── */
.kesfet-filters { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; }
.kchip { display: inline-flex; align-items: center; gap: .55em; padding: .6em 1.15em; border: 0; border-radius: 999px;
  font-family: var(--font-sans); font-weight: 500; font-size: .9rem; color: var(--mrd-text-mid); cursor: pointer;
  background: var(--mrd-glass, rgba(11,27,43,.55)); background: rgba(11,27,43,.5);
  -webkit-backdrop-filter: saturate(150%) blur(14px); backdrop-filter: saturate(150%) blur(14px);
  box-shadow: inset 0 0 0 1px var(--mrd-hair);
  transition: color .3s var(--mrd-e-out), background .3s var(--mrd-e-out), transform .3s var(--mrd-e-out); }
.kchip .dot { width: .72rem; height: .72rem; border-radius: 50%; background: var(--m, var(--mrd-aurora)); box-shadow: 0 0 10px var(--m, var(--mrd-glow)); }
.kchip .dot--all { background: var(--mrd-trail); }
.kchip:hover { color: var(--mrd-text-hi); transform: translateY(-2px); }
.kchip.is-active { color: var(--mrd-ink); background: var(--m, var(--mrd-aurora)); box-shadow: 0 0 26px var(--m, var(--mrd-glow)); }
.kchip.is-active .dot { background: var(--mrd-ink); box-shadow: none; }
/* The unit label comes from the resx via Kesfet.RouteCountFmt — never a CSS
   content: string, which cannot localize. */
.kesfet-count { margin-left: auto; font-family: var(--font-sans); font-size: .82rem; color: var(--mrd-text-lo); }

/* ── fluid masonry ── */
.kesfet-body { padding-bottom: clamp(60px, 10vh, 130px); }
.kmasonry { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 128px;
  gap: clamp(14px, 1.4vw, 24px); grid-auto-flow: dense; }
.kcard { position: relative; grid-row: span 3; border-radius: 22px; overflow: hidden; isolation: isolate;
  text-decoration: none; color: var(--mrd-text-hi); box-shadow: 0 24px 60px -30px rgba(3,10,18,.8);
  transition: transform .5s var(--mrd-e-expo), box-shadow .5s var(--mrd-e-expo); }
.kcard.k-tall { grid-row: span 4; }
.kcard.k-wide { grid-column: span 2; }
.kcard:hover { transform: translateY(-7px); box-shadow: 0 40px 80px -30px rgba(3,10,18,.9), 0 0 0 1px color-mix(in oklch, var(--m, var(--mrd-aurora)) 40%, transparent); }
.kcard-media { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center;
  transform: scale(1.05); filter: saturate(.94); transition: transform .8s var(--mrd-e-expo), filter .8s var(--mrd-e-out); }
.kcard:hover .kcard-media { transform: scale(1.14); filter: saturate(1.14); }
.kcard::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(5,16,27,0) 30%, rgba(5,16,27,.5) 62%, rgba(5,16,27,.92) 100%); }
.kcard-sheen { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(115deg, transparent 38%, color-mix(in oklch, var(--m, var(--mrd-aurora)) 26%, transparent) 50%, transparent 62%);
  transform: translateX(-30%); transition: opacity .5s, transform .85s var(--mrd-e-expo); }
.kcard:hover .kcard-sheen { opacity: 1; transform: translateX(30%); }
.kcard-price { position: absolute; top: 14px; right: 14px; z-index: 2; font-family: var(--font-sans); font-weight: 700; font-size: .86rem;
  color: var(--mrd-ink); padding: .42em .9em; border-radius: 999px; background: rgba(247,241,230,.94);
  transform: translateY(-6px); opacity: 0; transition: transform .5s var(--mrd-e-expo), opacity .5s; }
.kcard:hover .kcard-price { transform: none; opacity: 1; }
.kcard-body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: clamp(16px, 1.4vw, 24px);
  display: flex; flex-direction: column; gap: .3rem; transform: translateY(6px); transition: transform .5s var(--mrd-e-expo); }
.kcard:hover .kcard-body { transform: none; }
.kcard-theme { display: inline-flex; align-items: center; gap: .5em; font-family: var(--font-sans); font-size: .72rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--mrd-text-mid); }
.kcard-theme .dot { width: .55rem; height: .55rem; border-radius: 50%; background: var(--m, var(--mrd-aurora)); box-shadow: 0 0 10px var(--m, var(--mrd-glow)); }
.kcard-body h3 { font-family: var(--font-display, 'Fraunces', serif); font-weight: 500; line-height: 1.08;
  font-size: clamp(1.2rem, 1.5vw, 1.65rem); margin: 0; color: var(--mrd-text-hi); overflow-wrap: anywhere; }
.kcard-body p { font-family: var(--font-sans); font-size: .82rem; color: var(--mrd-text-mid); margin: 0; display: inline-flex; align-items: center; gap: .4em; }
.kcard-go { position: absolute; top: 14px; left: 14px; z-index: 2; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; color: var(--mrd-ink); background: var(--m, var(--mrd-aurora));
  opacity: 0; transform: scale(.6) rotate(-20deg); transition: opacity .4s, transform .5s var(--mrd-e-expo); box-shadow: 0 0 20px var(--m, var(--mrd-glow)); }
.kcard:hover .kcard-go { opacity: 1; transform: none; }

.kcard--skeleton { background: linear-gradient(100deg, var(--mrd-ocean-700), var(--mrd-ocean-600), var(--mrd-ocean-700));
  background-size: 200% 100%; animation: kesfet-shimmer 1.4s linear infinite; }
@keyframes kesfet-shimmer { to { background-position: -200% 0; } }

/* ── empty ── */
.kesfet-empty { text-align: center; padding: clamp(50px, 10vh, 120px) 0; display: flex; flex-direction: column; align-items: center; gap: 1.1rem; }
.kesfet-empty .g { width: 70px; height: 70px; border-radius: 30%; display: grid; place-items: center;
  background: linear-gradient(145deg, rgba(247,241,230,.14), rgba(247,241,230,.02)), var(--mrd-trail);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.5), 0 0 34px -6px var(--mrd-glow); }
.kesfet-empty .g i { font-size: 1.8rem; color: var(--mrd-ink); }
.kesfet-empty p { color: var(--mrd-text-mid); font-family: var(--font-sans); }

/* ── responsive ── */
@media (max-width: 1000px) { .kmasonry { grid-template-columns: repeat(2, 1fr); } .kcard.k-wide { grid-column: span 2; } }
@media (max-width: 560px) {
  .kmasonry { grid-template-columns: 1fr; grid-auto-rows: 120px; }
  .kcard, .kcard.k-tall, .kcard.k-wide { grid-column: span 1; grid-row: span 3; }
  .kesfet-count { display: none; }
}