/* =========================================================
   Rukiye & Yunus — davetiye
   Zarf / kart / dantel / mühür tamamen CSS + SVG ile çizilir.
   ========================================================= */

:root {
  --linen: #968d80;
  --linen-deep: #6c6358;
  --paper: #f5f1e9;
  --paper-card: #f7f5f0;
  --ink: #2b2621;
  --ink-soft: #5d5248;
  --bronze: #6f5333;
  --bronze-deep: #4b3720;
  --bronze-light: #c7a46c;

  --serif: "Old Standard TT", "Times New Roman", Times, serif;
  --script: "WindSong", "Snell Roundhand", cursive;

  /* İnce kâğıt dokusu */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .36 0 0 0 0 .31 0 0 0 0 .24 1.2 0 0 0 -.55'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  /* Pamuk kâğıttaki iri lekelenme */
  --mottle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .38 0 0 0 0 .28 .32 0 0 0 -.14'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  /* Masa örtüsü / keten için daha belirgin doku */
  --linen-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .17 0 0 0 0 .13 1.7 0 0 0 -.7'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  min-height: 100svh;
  background: var(--linen);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.6;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

.nw { white-space: nowrap; }

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

/* ---------- Arka plan: eski keten masa örtüsü ---------- */
.linen {
  position: fixed;
  inset: 0;
  z-index: -5;
  background-color: var(--linen);
  background-image:
    radial-gradient(120% 90% at 50% 45%, transparent 40%, rgba(46, 36, 26, .42) 100%),
    radial-gradient(70% 60% at 22% 12%, rgba(255, 246, 228, .26), transparent 70%),
    var(--linen-grain),
    repeating-linear-gradient(0deg, rgba(255, 250, 240, .045) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(40, 30, 20, .045) 0 1px, transparent 1px 3px),
    var(--mottle);
}

/* Açılış anında sahneyi hafifçe karartan katman (yıldızlar daha iyi parlasın diye) */
.dim {
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(110% 85% at 50% 40%, rgba(38, 30, 24, .55), rgba(20, 15, 11, .88));
}

.stars {
  position: fixed;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Tüm sayfaya çok hafif film greni — vintage his */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  background-image: var(--linen-grain);
  opacity: .1;
}

/* ---------- Kâğıt yüzeyleri ---------- */
/* Zarfın ön yüzü: dantel, pampas ve mühür fotoğrafta */
.env-front,
.decor-env {
  background: #efeadf url("../img/envelope.jpg") center / cover no-repeat;
}

/* Kart ve notlar: aynı pamuk kâğıt dokusu */
.card,
.note {
  background: #f6f3eb url("../img/paper.jpg") center / cover no-repeat;
}

/* Zarfın arka yüzü ve kapağı: zarf kâğıdının biraz daha sıcak tonu */
.env-back,
.flap {
  background:
    linear-gradient(rgba(206, 186, 146, .16), rgba(206, 186, 146, .16)),
    #ece6da url("../img/paper.jpg") center / cover no-repeat;
}

/* =========================================================
   SAHNE
   ========================================================= */
.scene {
  position: relative;
  height: 100svh;
  min-height: 540px;
  overflow-x: clip;

  /* Mobil ölçüler */
  --vh: max(100svh, 540px);
  --env-w: min(78vw, calc((var(--vh) - 190px) / 1.4), 420px);
  --card-w: min(92vw, calc((var(--vh) - 56px) / 1.4), 560px);
  --card-dy: 0px;
}

@media (min-width: 900px) and (min-aspect-ratio: 1/1) {
  .scene {
    --env-w: min(34vw, calc(var(--vh) * .68 / 1.4), 620px);
    --card-w: min(60vw, calc(var(--vh) * .86 / 1.4), 820px);
  }
}

.env-group {
  position: absolute;
  inset: 0;
  opacity: 0;
  translate: 0 14px;
  transition: opacity 1s ease, translate 1.2s cubic-bezier(.2, .7, .2, 1);
}

.is-ready .env-group {
  opacity: 1;
  translate: 0 0;
}

.env-part,
.env-hit {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--env-w);
  height: calc(var(--env-w) * 1.4);
  margin-left: calc(var(--env-w) / -2);
  margin-top: calc(var(--env-w) * -0.7);
}

.env-part {
  transform-origin: 50% 50%;
  will-change: transform;
  transition: translate .45s cubic-bezier(.2, .7, .2, 1);
}

.env-back {
  z-index: 1;
  perspective: calc(var(--env-w) * 3.2);
}

.env-front {
  z-index: 3;
  container-type: inline-size;
  border-radius: 1.5px;
  box-shadow:
    0 0 0 .5px rgba(80, 62, 44, .14),
    0 1px 1px rgba(60, 45, 30, .16),
    0 10px 18px -8px rgba(38, 27, 16, .32),
    0 30px 50px -22px rgba(38, 27, 16, .55);
}

/* Kapak açılınca ağız kısmında görünen ince gölge çizgisi */
.env-front::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(to bottom, rgba(70, 52, 34, .32), transparent);
  opacity: var(--mouth, 0);
}

/* Kart çıkarken zarfın ağız kenarının karta düşürdüğü gölge */
.env-front::before {
  content: "";
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: 100%;
  height: 5%;
  background: linear-gradient(to top, rgba(52, 38, 24, .3), rgba(52, 38, 24, 0));
  opacity: var(--lip, 0);
  pointer-events: none;
}

.env-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.env-names text {
  font-family: var(--script);
  font-size: 56px;
  fill: #2b2520;
  fill-opacity: .9;
}

/* ---------- Kapak ---------- */
.flap-wrap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 38%;
  transform-origin: 50% 100%;
  transform: rotateX(180deg);
  filter: drop-shadow(0 -1px 1px rgba(70, 52, 34, .18));
  will-change: transform;
}

.flap {
  position: absolute;
  inset: 0;
  clip-path: polygon(0 100%, 46.5% 3.2%, 48.6% .7%, 50% 0, 51.4% .7%, 53.5% 3.2%, 100% 100%);
}

.flap-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(70, 52, 34, .32), rgba(70, 52, 34, .08) 60%, rgba(70, 52, 34, 0));
  opacity: var(--shade, .6);
}

/* ---------- Tıklama alanı ---------- */
.env-hit {
  z-index: 6;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  border-radius: 4px;
}

.env-hit:focus-visible {
  outline: 2px solid rgba(255, 246, 228, .85);
  outline-offset: 10px;
}

.card { transition: translate .45s cubic-bezier(.2, .7, .2, 1); }

.is-ready.is-closed .scene:has(.env-hit:hover) .env-part,
.is-ready.is-closed .scene:has(.env-hit:hover) .card {
  translate: 0 -7px;
}

.is-opening .env-hit,
.is-open .env-hit {
  display: none;
}

/* ---------- İpucu yazısı ---------- */
.hint {
  position: absolute;
  left: 0;
  right: 0;
  bottom: max(22px, calc(50% - var(--env-w) * 0.7 - 74px));
  margin: 0;
  text-align: center;
  font-style: italic;
  font-size: 15px;
  letter-spacing: .02em;
  color: rgba(255, 249, 238, .92);
  text-shadow: 0 1px 2px rgba(40, 30, 20, .45);
  opacity: 0;
  transition: opacity .8s ease .9s;
  pointer-events: none;
}

.is-ready .hint { opacity: 1; }
.is-opening .hint,
.is-open .hint { opacity: 0; transition-delay: 0s; transition-duration: .3s; }

/* ---------- Dekoratif zarflar (fotoğraftaki gibi kenarlarda) ---------- */
.decor {
  position: absolute;
  inset: 0;
  z-index: -4;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s ease .2s;
}

.is-ready .decor { opacity: 1; }

.decor-env {
  position: absolute;
  width: var(--env-w);
  height: calc(var(--env-w) * 1.4);
  border-radius: 1.5px;
  box-shadow:
    0 0 0 .5px rgba(80, 62, 44, .14),
    0 10px 18px -8px rgba(38, 27, 16, .3),
    0 26px 44px -22px rgba(38, 27, 16, .5);
}

.decor-env .env-art { pointer-events: none; }

.decor-env.d1 {
  left: calc(var(--env-w) * -0.62);
  top: calc(var(--env-w) * -0.92);
  rotate: -28deg;
}

.decor-env.d2 {
  right: calc(var(--env-w) * -0.66);
  top: calc(var(--env-w) * -0.2);
  rotate: 21deg;
}

@media (max-width: 899px), (max-aspect-ratio: 1/1) {
  .decor-env.d1 {
    left: calc(var(--env-w) * -0.78);
    top: calc(var(--env-w) * -1.12);
  }
  .decor-env.d2 { display: none; }
}

/* =========================================================
   DAVETİYE KARTI
   ========================================================= */
.card {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  width: var(--card-w);
  height: calc(var(--card-w) * 1.4);
  margin-left: calc(var(--card-w) / -2);
  margin-top: calc(var(--card-w) * -0.7 + var(--card-dy));
  container-type: inline-size;
  border-radius: 1px;
  color: var(--ink);
  transform-origin: 50% 50%;
  box-shadow:
    0 0 0 .5px rgba(80, 62, 44, .12),
    0 1px 1px rgba(60, 45, 30, .14),
    0 12px 22px -10px rgba(38, 27, 16, .3),
    0 34px 60px -26px rgba(38, 27, 16, .5);
}

.card p { margin: 0; }
.card:focus { outline: none; }

/* Kart içeriği: dört blok kartın yüksekliğine eşit aralıkla yayılır.
   Tüm ölçüler kart genişliğine (cqw) bağlı; kart hangi boyutta olursa
   olsun yazılar aynı oranda görünür. Kart kendi cqw birimini kendi
   dolgusunda kullanamadığı için dolgu --card-w üzerinden hesaplanır. */
.card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: calc(var(--card-w) * .12) calc(var(--card-w) * .07) calc(var(--card-w) * .125);
  text-align: center;
}

.card-names {
  margin: 0;
  font-family: var(--script);
  font-weight: 400;
  font-size: 16.5cqw;
  line-height: 1;
  color: #29231e;
}

/* İki satır ortalı; hafif kaydırma el yazısı akışını korur */
.card-names .n1,
.card-names .n2 { display: block; }
.card-names .n1 { translate: -5.5cqw 0; }
.card-names .n2 { margin-top: -2cqw; translate: 5.5cqw 0; }

/* Kartın tüm metinleri: tek aile, tek ağırlık */
.card-msg,
.card-event,
.card-venue {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: .04em;
  color: #2b2621;
  text-shadow: 0 .5px 0 rgba(255, 255, 255, .7);
}

.card-msg {
  font-size: max(11.5px, 3.9cqw);
  line-height: 1.7;
}

.ev-label {
  font-size: max(10.5px, 3.3cqw);
  letter-spacing: .34em;
  margin-right: -.34em !important;
  margin-bottom: 1.6cqw !important;
}

.ev-date {
  font-size: max(17px, 5.9cqw);
  letter-spacing: .08em;
  line-height: 1.3;
}

.ev-time {
  font-size: max(11px, 3.7cqw);
  margin-top: .6cqw !important;
}

.card-venue {
  margin: 0;
  font-size: max(11px, 3.6cqw);
  line-height: 1.7;
}

/* ---------- Aşağı kaydır ipucu ---------- */
.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 10px;
  z-index: 7;
  display: none;
  translate: -50% 0;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 7px 18px 3px;
  border-radius: 999px;
  background: rgba(52, 41, 30, .5);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-style: italic;
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: .03em;
  color: #fbf4e6;
  text-decoration: none;
  white-space: nowrap;
  opacity: 0;
  transition: opacity .8s ease;
}

.scroll-cue svg { width: 20px; height: 20px; filter: drop-shadow(0 1px 1px rgba(40, 30, 20, .4)); }
.is-open .scroll-cue { display: flex; }
.is-open.show-cue .scroll-cue { opacity: 1; }

.scroll-cue:focus-visible { outline: 2px solid rgba(255, 246, 228, .85); border-radius: 6px; }

/* =========================================================
   GERİ SAYIM, KONUM VE ULAŞIM
   ========================================================= */
.details {
  display: none;
  position: relative;
  max-width: 1040px;
  margin: 0 auto;
  padding: 40px 16px 64px;
  opacity: 0;
  transition: opacity .9s ease;
}

.is-open .details { display: block; }
.is-open.show-cue .details { opacity: 1; }

.note {
  position: relative;
  border-radius: 2px;
  box-shadow:
    0 0 0 .5px rgba(80, 62, 44, .14),
    0 1px 1px rgba(60, 45, 30, .14),
    0 12px 26px -14px rgba(38, 27, 16, .45);
}

/* İnce çift çerçeve — eski matbaa kartlarındaki gibi */
.note::before {
  content: "";
  position: absolute;
  inset: 9px;
  border: 1px solid rgba(111, 83, 51, .26);
  outline: 1px solid rgba(111, 83, 51, .12);
  outline-offset: 3px;
  pointer-events: none;
  z-index: 1;
}

/* ---------- Geri sayım ---------- */
.countdown {
  text-align: center;
  color: #fffaf0;
  text-shadow: 0 1px 3px rgba(40, 30, 20, .55);
}

.cd-title {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 32px;
  line-height: 1.2;
  letter-spacing: .02em;
}

.cd-grid {
  display: inline-grid;
  grid-template-columns: repeat(4, minmax(64px, 1fr));
  margin-top: 10px;
}

.cd-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2px 18px;
}

.cd-unit + .cd-unit { border-left: 1px solid rgba(255, 250, 240, .35); }

.cd-num {
  font-size: 44px;
  line-height: 1.05;
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums lining-nums;
}

.cd-lbl {
  margin-top: 4px;
  font-size: 14px;
  font-style: italic;
  letter-spacing: .04em;
  opacity: .9;
}

.cd-foot {
  margin: 8px 0 0;
  font-style: italic;
  font-size: 16px;
  letter-spacing: .04em;
}

/* ---------- Konum kartı: harita + bilgiler ---------- */
.note-venue {
  display: grid;
  grid-template-columns: 1fr;
  margin-top: 40px;
  overflow: hidden;
}

.venue-map {
  position: relative;
  min-height: 260px;
  margin: 16px 16px 0;
  background: #d9d2c4;
  box-shadow: 0 0 0 1px rgba(111, 83, 51, .25), 0 2px 6px -2px rgba(40, 28, 14, .35);
}

.venue-map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Haritaya hafif sıcak ton (tıklamayı engellemez) */
.venue-map::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: rgba(186, 156, 112, .13);
  box-shadow: inset 0 0 18px rgba(90, 66, 40, .22);
}

.venue-info {
  position: relative;
  z-index: 2;
  padding: 28px 24px 30px;
  text-align: center;
}

.note-title {
  margin: 0 0 10px;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 30px;
  line-height: 1.2;
  letter-spacing: .02em;
  color: var(--ink);
}

.venue-name {
  margin: 0;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: .02em;
}

.venue-addr {
  margin: 4px 0 0;
  font-size: 16.5px;
  color: var(--ink-soft);
}

/* İki buton alt alta, genişi kadar aynı genişlikte */
.venue-actions {
  display: grid;
  gap: 14px;
  width: max-content;
  max-width: 100%;
  margin: 22px auto 0;
}

.btn-map,
.btn-route {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--serif);
  text-decoration: none;
  cursor: pointer;
  transition: background .25s ease, transform .25s ease, color .25s ease;
}

.btn-map {
  padding: 13px 28px 13px 22px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, #7a5c38, #5c4428);
  color: #fbf4e6;
  font-size: 16.5px;
  font-weight: 700;
  letter-spacing: .04em;
  box-shadow:
    inset 0 1px 0 rgba(255, 233, 196, .35),
    inset 0 0 0 1px rgba(40, 28, 14, .35),
    0 6px 14px -6px rgba(40, 28, 14, .6);
}

.btn-map svg { width: 20px; height: 20px; flex: none; }
.btn-map:hover { background: linear-gradient(180deg, #6b4f2f, #4d3820); transform: translateY(-1px); }
.btn-map:active { transform: translateY(1px); }

.btn-route {
  padding: 10px 16px;
  border: 1px solid rgba(111, 83, 51, .45);
  border-radius: 999px;
  background: transparent;
  color: var(--bronze-deep);
  font-size: 15.5px;
  font-style: italic;
}

.btn-route svg { width: 19px; height: 19px; flex: none; }
.btn-route .chev { width: 16px; height: 16px; transition: rotate .35s ease; }
.btn-route[aria-expanded="true"] .chev { rotate: 180deg; }
.btn-route:hover { background: rgba(111, 83, 51, .08); }

.btn-map:focus-visible,
.btn-route:focus-visible {
  outline: 2px solid var(--bronze);
  outline-offset: 3px;
}

@media (min-width: 820px) {
  .note-venue { grid-template-columns: 1.35fr 1fr; min-height: 380px; }
  .venue-map { min-height: 0; margin: 18px 0 18px 18px; }
  .venue-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 36px 34px;
  }
}

/* ---------- Yol tarifi (açılır panel) ---------- */
.routes-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .55s cubic-bezier(.3, .7, .2, 1);
}

.routes-wrap.is-open { grid-template-rows: 1fr; }

.routes-inner {
  min-height: 0;
  overflow: hidden;
}

.routes {
  margin-top: 18px;
  padding: 30px 22px 22px;
  opacity: 0;
  translate: 0 -8px;
  transition: opacity .4s ease, translate .5s ease;
}

.routes-wrap.is-open .routes { opacity: 1; translate: 0 0; }

.route + .route {
  margin-top: 26px;
  padding-top: 24px;
  border-top: 1px dashed rgba(111, 83, 51, .3);
}

.route-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 2px 12px;
}

.route-head h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
}

.route-time {
  font-size: 14px;
  font-style: italic;
  color: var(--ink-soft);
}

/* Yatay ray: hat rozetleri birbirine noktalı çizgiyle bağlanır */
.rail {
  --badge-h: 28px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 6px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  position: relative;
}

.rail li {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-width: 0;
}

/* bağlantı çizgisi: her durağın sağından bir sonrakine */
.rail li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: calc(var(--badge-h) / 2);
  left: calc(50% + 30px);
  right: calc(-50% + 24px);
  border-top: 1.5px dotted rgba(93, 82, 72, .55);
}

.rail li:not(:last-child)::before {
  content: "";
  position: absolute;
  top: calc(var(--badge-h) / 2 - 3.5px);
  right: calc(-50% + 22px);
  width: 7px;
  height: 7px;
  border-top: 1.5px solid rgba(93, 82, 72, .6);
  border-right: 1.5px solid rgba(93, 82, 72, .6);
  rotate: 45deg;
}

.rail .dir {
  margin-top: 8px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
}

.rail .off {
  margin-top: 2px;
  font-size: 12.5px;
  font-style: italic;
  line-height: 1.3;
  color: var(--ink-soft);
}

.walk {
  display: grid;
  place-items: center;
  width: var(--badge-h);
  height: var(--badge-h);
  border-radius: 50%;
  border: 1.3px solid rgba(43, 38, 33, .55);
  background: var(--paper);
  color: var(--ink);
}

.walk svg { width: 18px; height: 18px; }

/* Hat rozetleri (resmî renklerin soluk tonları) */
.line {
  display: inline-grid;
  place-items: center;
  min-width: 46px;
  height: 28px;
  padding: 0 8px;
  border-radius: 6px;
  color: #fffaf0;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  letter-spacing: .03em;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12), inset 0 1px 0 rgba(255, 255, 255, .22);
}

.line-m11 { background: #85508f; }
.line-m3  { background: #2a8db3; }
.line-m4  { background: #c0406f; }
.line-mr  { background: #3d5d8a; font-size: 12.5px; padding: 0 7px; }

.route-link {
  display: inline-block;
  margin-top: 14px;
  color: var(--bronze);
  font-style: italic;
  font-size: 14.5px;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.route-link:hover { color: var(--bronze-deep); }
.route-link:focus-visible { outline: 2px solid var(--bronze); outline-offset: 3px; border-radius: 2px; }

.transit-note {
  margin: 22px 0 0;
  text-align: center;
  font-size: 13.5px;
  font-style: italic;
  color: var(--ink-soft);
}

@media (min-width: 820px) {
  .routes { padding: 36px 40px 28px; }
  .rail .dir { font-size: 15px; }
  .rail .off { font-size: 13.5px; }
}

/* ---------- Yakındaki mekanlar ---------- */
.places {
  margin-top: 28px;
  padding: 34px 22px 24px;
}

.places-head { text-align: center; }
.places-head .note-title { margin-bottom: 6px; }

.places-sub {
  margin: 0 auto;
  max-width: 40em;
  text-wrap: balance;
  font-size: 15px;
  font-style: italic;
  line-height: 1.5;
  color: var(--ink-soft);
}

.places-groups {
  display: grid;
  gap: 22px;
  margin-top: 24px;
}

.place-group h3 {
  margin: 0 -.3em 4px 0;
  text-align: center;
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: .3em;
  color: var(--bronze);
}

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

.place-list li + li { border-top: 1px dashed rgba(111, 83, 51, .3); }

/* Satır: solda fotoğraf, ortada ad ve tür/yürüme, sağda puan */
.place {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 3px 16px;
  padding: 12px 10px;
  border-radius: 2px;
  color: inherit;
  text-decoration: none;
  transition: background .2s ease;
}

.place:hover { background: rgba(111, 83, 51, .07); }
.place:focus-visible { outline: 2px solid var(--bronze); outline-offset: 2px; }

/* Küçük, kenarı beyaz baskı fotoğraf; yüklenemezse kâğıt tonunda boş kutu kalır */
.place-photo {
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 116px;
  aspect-ratio: 4 / 3;
  padding: 3px;
  background: #fbf8f1 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 10h14l-1.2-4.2A1 1 0 0 0 16.8 5H7.2a1 1 0 0 0-1 .8zM6 10v8.5h12V10M10 18.5V14h4v4.5' fill='none' stroke='%23b9a88f' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/svg%3E") center / 26px no-repeat;
  box-shadow:
    0 0 0 .5px rgba(80, 62, 44, .25),
    0 3px 7px -3px rgba(38, 27, 16, .45);
  rotate: -1.2deg;
  transition: rotate .25s ease;
}

.place-list li:nth-child(even) .place-photo { rotate: 1.2deg; }
.place:hover .place-photo { rotate: 0deg; }

.place-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.88) sepia(.08);
}

/* Ad ve alt satır fotoğrafın ortasında bir arada dursun */
.place-name {
  grid-column: 2;
  align-self: end;
  font-size: 17.5px;
  font-weight: 700;
  line-height: 1.25;
}

.place-info {
  grid-column: 2;
  align-self: start;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 10px;
  font-size: 14px;
  font-style: italic;
  line-height: 1.3;
  color: var(--ink-soft);
}

.place-walk {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.place-walk svg { width: 15px; height: 15px; flex: none; }

.place-rate {
  grid-column: 3;
  grid-row: 1 / span 2;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
}

.place-score {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.2;
}

.place-score svg { width: 15px; height: 15px; color: #b38a46; }

.place-count {
  font-size: 12.5px;
  font-style: italic;
  color: var(--ink-soft);
}

.places-note {
  margin: 18px 0 0;
  text-align: center;
  font-size: 13px;
  font-style: italic;
  color: var(--ink-soft);
}

@media (min-width: 820px) {
  .places { padding: 40px 40px 28px; }
  .places-groups { grid-template-columns: 1fr 1fr; gap: 0; }
  .place-group:first-child { padding-right: 28px; }
  .place-group + .place-group {
    padding-left: 28px;
    border-left: 1px dashed rgba(111, 83, 51, .3);
  }
}

.sign-off {
  margin: 56px 0 0;
  text-align: center;
  font-family: var(--script);
  font-size: 54px;
  line-height: 1.2;
  color: #fbf6ec;
  text-shadow: 0 1px 3px rgba(40, 30, 20, .45);
}

@media (max-width: 520px) {
  body { font-size: 16px; }
  .details { padding-top: 32px; }
  .cd-title { font-size: 27px; }
  .cd-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; max-width: 360px; }
  .cd-unit { padding: 2px 6px; }
  .cd-num { font-size: 34px; }
  .cd-lbl { font-size: 13px; }
  .note-title { font-size: 26px; }
  .venue-name { font-size: 19px; }
  .routes { padding: 28px 16px 20px; }
  .places { padding: 30px 14px 20px; }
  .places-sub { font-size: 14px; }
  .place { padding: 11px 4px; column-gap: 12px; }
  .place-photo { width: 78px; }
  .place-name { font-size: 16.5px; }
  .place-info { flex-direction: column; align-items: flex-start; gap: 1px; font-size: 13px; }
  .rail { gap: 4px; }
  .rail li:not(:last-child)::after { left: calc(50% + 26px); right: calc(-50% + 22px); }
  .rail .line { min-width: 40px; font-size: 13px; padding: 0 6px; }
  .rail .line-mr { font-size: 11px; padding: 0 5px; }
  .rail .dir { font-size: 12.5px; }
  .rail .off { font-size: 11.5px; }
  .sign-off { font-size: min(46px, 10.5vw); white-space: nowrap; }
}

/* ---------- Müzik açma/kapama butonu ---------- */
.music-toggle {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 30;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: linear-gradient(180deg, #7a5c38, #5c4428);
  color: #fbf4e6;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 233, 196, .35),
    inset 0 0 0 1px rgba(40, 28, 14, .35),
    0 6px 14px -6px rgba(40, 28, 14, .6);
  opacity: 0;
  translate: 0 8px;
  transition: opacity .6s ease .4s, translate .6s ease .4s, background .25s ease;
}

.is-ready .music-toggle { opacity: 1; translate: 0 0; }
.music-toggle:hover { background: linear-gradient(180deg, #6b4f2f, #4d3820); }
.music-toggle:focus-visible { outline: 2px solid var(--bronze); outline-offset: 3px; }

.music-toggle > * { grid-area: 1 / 1; }
.mt-note { width: 21px; height: 21px; transition: opacity .25s ease; }
.mt-off { width: 26px; height: 26px; opacity: .9; transition: opacity .25s ease; }

/* Çalarken notanın yerine küçük ekolayzer çubukları */
.mt-bars {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 16px;
  opacity: 0;
  transition: opacity .25s ease;
}

.mt-bars i {
  width: 3px;
  height: 100%;
  border-radius: 1px;
  background: currentColor;
  transform-origin: bottom;
  animation: mt-eq 1.1s ease-in-out infinite;
}

/* Müzik açık ama henüz çalmıyorsa (tarayıcı ilk dokunuşu bekliyorsa) çubuklar durur */
.mt-bars i { animation-play-state: paused; }
.music-toggle.is-playing .mt-bars i { animation-play-state: running; }

.mt-bars i:nth-child(2) { animation-delay: -.35s; animation-duration: .9s; }
.mt-bars i:nth-child(3) { animation-delay: -.7s; animation-duration: 1.3s; }

@keyframes mt-eq {
  0%, 100% { transform: scaleY(.3); }
  50% { transform: scaleY(1); }
}

.music-toggle.is-on .mt-note,
.music-toggle.is-on .mt-off { opacity: 0; }
.music-toggle.is-on .mt-bars { opacity: 1; }

@media (max-width: 520px) {
  .music-toggle { width: 42px; height: 42px; right: max(12px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); }
}

/* Hareket azaltma tercihi olanlar için */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .env-group, .hint, .decor, .details, .scroll-cue, .routes-wrap, .routes { transition-duration: .01s !important; transition-delay: 0s !important; }
  .mt-bars i { animation: none; transform: scaleY(.7); }
}