/* ── Hero rezervasyon karti (2026-10-12) — views/home.ejs section.rz · public/js/hero-rez.js ──
   Fildisi bir otel kirtasiyesi: ince altin ic cerceve, murekkep yazi. Secim yapildikca Elektra'dan
   canli sonuc gelir ve kosedeki muhur durumu "basar" (Yours to take / Already taken / Next season).
   Takvim masaustunde kartin sagina ikinci bir kagit gibi acilir; mobilde kartin ustune. */
.rz { --rz-kagit: #f6f1e7; --rz-kagit2: #fbf8f2; --rz-murekkep: #24211c; --rz-yazi: #3a352d; --rz-soluk: #7a7164;
  --rz-altin: #9a7a45; --rz-altin-a: rgba(154,122,69,.35); --rz-cizgi: rgba(36,33,28,.14); --rz-canli: #6f8a55;
  position: absolute; inset: 0; z-index: 4; display: flex; align-items: center; text-align: left;
  padding: 104px max(88px, calc((100vw - 1240px) / 2)) 84px; pointer-events: none;
  opacity: 0; visibility: hidden; transition: opacity .7s ease, visibility 0s linear .7s; }
.rz.is-active { opacity: 1; visibility: visible; transition: opacity .7s ease; }

/* secilen otelin gorseli — slayt gorselinin ustunde capraz gecis, sola dogru hafif golge (kart okunsun) */
.rz-arka { position: absolute; inset: 0; z-index: 0; opacity: 0; visibility: hidden; transition: opacity .9s ease, visibility 0s linear .9s; pointer-events: none; }
.rz-arka.is-active { opacity: 1; visibility: visible; transition: opacity .9s ease; }
.rz-arka-img { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transform: scale(1.06);
  transition: opacity 1.2s ease, transform 6s cubic-bezier(.2,.75,.2,1); }
.rz-arka-img.is-on { opacity: 1; transform: none; }
.rz-arka::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(14,12,10,.45) 0%, rgba(14,12,10,.12) 48%, rgba(14,12,10,0) 70%); }

.rz-kart { pointer-events: auto; position: relative; width: min(520px, 100%); background: var(--rz-kagit); color: var(--rz-yazi);
  padding: 34px 40px 22px; border-radius: 2px; box-shadow: 0 60px 100px -50px rgba(0,0,0,.75), 0 2px 0 rgba(255,255,255,.4) inset; }
.rz-kart::before { content: ""; position: absolute; inset: 9px; border: 1px solid var(--rz-altin-a); pointer-events: none; }
.rz.is-active .rz-kart { animation: rzKart 1s cubic-bezier(.2,.75,.2,1) both; }
@keyframes rzKart { from { opacity: 0; transform: translateX(-26px); } to { opacity: 1; transform: none; } }
.rz.is-active .rz-kart > * { animation: rzBelir .8s cubic-bezier(.2,.75,.2,1) both; }
.rz.is-active .rz-kart > :nth-child(3) { animation-delay: .12s; }
.rz.is-active .rz-kart > :nth-child(4) { animation-delay: .2s; }
.rz.is-active .rz-kart > :nth-child(5) { animation-delay: .28s; }
.rz.is-active .rz-kart > :nth-child(n+6) { animation-delay: .36s; }
.rz.is-active .rz-kart > .rz-muhur, .rz.is-active .rz-kart > .rz-takvim { animation: none; }
@keyframes rzBelir { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.rz-ust { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.rz-etiket { font-family: var(--sans); font-size: 10.5px; letter-spacing: .3em; text-transform: uppercase; color: var(--rz-altin); }
.rz-canli { display: flex; align-items: center; gap: 8px; font-family: var(--sans); font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--rz-soluk); margin-right: 64px; }
.rz-nokta { position: relative; width: 6px; height: 6px; border-radius: 50%; background: var(--rz-canli); }
.rz-nokta::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid var(--rz-canli); animation: rzNabiz 2.4s ease-out infinite; }
@keyframes rzNabiz { from { opacity: .8; transform: scale(.4); } to { opacity: 0; transform: scale(1.6); } }
.rz .rz-baslik { margin: 0 0 22px; font-family: var(--serif); font-weight: 400; font-size: clamp(32px, 2.9vw, 42px); line-height: 1.06; letter-spacing: -.01em; color: var(--rz-murekkep); text-wrap: balance; }
.rz .rz-baslik em { font-style: italic; color: var(--rz-altin); }

/* oteller — iki kartpostal */
.rz-oteller { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 22px; }
.rz-otel { display: flex; align-items: center; gap: 12px; padding: 9px 12px 9px 9px; text-align: left; cursor: pointer; font: inherit; color: inherit;
  background: transparent; border: 1px solid var(--rz-cizgi); border-radius: 2px; transition: border-color .3s, background .3s, box-shadow .3s; }
.rz-otel:hover { border-color: var(--rz-altin-a); }
.rz-otel.is-on { background: #fff; border-color: var(--rz-altin); box-shadow: 0 14px 28px -20px rgba(36,33,28,.5); }
.rz-otel-img { flex: 0 0 auto; width: 52px; height: 52px; overflow: hidden; border-radius: 1px; background: #e6dfd2; }
.rz-otel-img img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.75); transition: filter .4s, transform 1.2s cubic-bezier(.2,.75,.2,1); }
.rz-otel.is-on .rz-otel-img img, .rz-otel:hover .rz-otel-img img { filter: none; transform: scale(1.08); }
.rz-otel-metin { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rz-otel-ad { font-family: var(--serif); font-size: 22px; line-height: 1; color: var(--rz-murekkep); }
.rz-otel-alt { font-family: var(--sans); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--rz-soluk); line-height: 1.35; }

/* alanlar — gelis · ayrilis · kisi */
.rz-alanlar { display: grid; grid-template-columns: 1fr 22px 1fr auto; align-items: end; gap: 0 10px; padding-bottom: 14px; border-bottom: 1px solid var(--rz-cizgi); }
.rz-alan { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 0; background: none; border: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; min-width: 0; }
.rz-alan--kisi { cursor: default; padding-left: 14px; border-left: 1px solid var(--rz-cizgi); }
.rz-alan-et { font-family: var(--sans); font-size: 9.5px; letter-spacing: .24em; text-transform: uppercase; color: var(--rz-soluk); }
.rz-alan-d { font-family: var(--serif); font-size: 22px; line-height: 1.1; color: var(--rz-murekkep); white-space: nowrap; }
button.rz-alan .rz-alan-d { position: relative; padding-bottom: 3px; }
button.rz-alan .rz-alan-d::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--rz-altin-a); transform-origin: left; transition: background .3s; }
button.rz-alan:hover .rz-alan-d::after, .rz-takvim-acik button.rz-alan[data-rz-ac] .rz-alan-d::after { background: var(--rz-altin); }
.rz-ok { align-self: center; justify-self: center; width: 16px; height: 1px; background: var(--rz-altin); position: relative; top: 9px; }
.rz-ok::after { content: ""; position: absolute; right: 0; top: -3px; width: 6px; height: 6px; border-top: 1px solid var(--rz-altin); border-right: 1px solid var(--rz-altin); transform: rotate(45deg); }
.rz-kisi { display: flex; align-items: center; gap: 10px; }
.rz-kisi-b { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--rz-altin-a); background: none; color: var(--rz-murekkep); cursor: pointer;
  font-size: 15px; line-height: 1; display: grid; place-items: center; transition: background .25s, border-color .25s, color .25s; }
.rz-kisi-b:hover:not([disabled]) { background: var(--rz-murekkep); border-color: var(--rz-murekkep); color: var(--rz-kagit); }
.rz-kisi-b[disabled] { opacity: .3; cursor: default; }

/* gece sayisina gore kucuk bir laf */
.rz-gece { min-height: 22px; margin: 12px 0 4px; font-family: var(--serif); font-style: italic; font-size: 16px; color: var(--rz-soluk); }
.rz-g, .rz-d, .rz-muhur-y { display: none; }
.rz-g.is-on, .rz-d.is-on { display: block; animation: rzBelir .5s ease both; }
.rz-gece b { font-style: normal; font-weight: 400; color: var(--rz-altin); }

/* durum + eylem */
.rz-durum { min-height: 46px; margin: 8px 0 16px; }
.rz .rz-d { margin: 0; font-family: var(--serif); font-size: 17.5px; line-height: 1.45; color: var(--rz-yazi); }
.rz .rz-d b { font-weight: 500; color: var(--rz-murekkep); }
.rz .rz-d[data-d="acik"] .rz-v-fiyat { color: var(--rz-altin); font-size: 21px; }
.rz .rz-d[data-d="yukleniyor"] { color: var(--rz-soluk); font-style: italic; }
.rz-eylem { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.rz-dugme { display: inline-flex; align-items: center; gap: 12px; padding: 16px 28px; background: var(--rz-murekkep); color: var(--rz-kagit); text-decoration: none; border-radius: 1px;
  font-family: var(--sans); font-size: 11px; letter-spacing: .24em; text-transform: uppercase; transition: background .35s; }
.rz-dugme span { display: inline-block; transition: transform .35s; }
.rz-dugme:hover { background: var(--rz-altin); }
.rz-dugme:hover span { transform: translateX(4px); }
.rz-dugme[hidden], .rz-oneri-al[hidden] { display: none; }
.rz-oneri-al { background: none; border: 0; padding: 0 0 6px; cursor: pointer; font-family: var(--sans); font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--rz-altin); border-bottom: 1px solid var(--rz-altin-a); }
.rz-oneri-al:hover { border-bottom-color: var(--rz-altin); }
.rz-dip { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--rz-cizgi); font-family: var(--sans); font-size: 9px; letter-spacing: .16em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: uppercase; color: var(--rz-soluk); }
.rz button:focus-visible, .rz a:focus-visible { outline: 2px solid var(--rz-altin); outline-offset: 3px; }

/* muhur — durum degistikce basilir */
.rz-muhur { position: absolute; top: -30px; right: -26px; width: 112px; height: 112px; display: grid; place-items: center; text-align: center; z-index: 3;
  color: var(--rz-altin); transform: rotate(-11deg); opacity: 0; pointer-events: none; transition: opacity .4s; }
.rz-muhur.is-on { opacity: 1; }
.rz-muhur[data-m="dolu"], .rz-muhur[data-m="kapali"] { color: #8b6f5a; }
.rz-muhur-halka { position: absolute; inset: 0; width: 100%; height: 100%; animation: rzDon 40s linear infinite; }
.rz-muhur-halka circle { fill: rgba(246,241,231,.94); stroke: currentColor; stroke-width: 1; }
.rz-muhur-halka circle + circle { fill: none; stroke-dasharray: 2 3; opacity: .8; }
@keyframes rzDon { to { transform: rotate(360deg); } }
.rz-muhur-y.is-on { display: block; position: relative; max-width: 74px; font-family: var(--serif); font-style: italic; font-size: 17px; line-height: 1.05; }
.rz-muhur.rz-bas { animation: rzBas .55s cubic-bezier(.3,1.6,.5,1) both; }
@keyframes rzBas { 0% { opacity: 0; transform: rotate(-24deg) scale(1.7); } 60% { opacity: 1; } 100% { opacity: 1; transform: rotate(-11deg) scale(1); } }

/* takvim — ikinci kagit */
.rz-takvim { position: absolute; left: calc(100% + 14px); top: 0; width: 548px; z-index: 5; background: var(--rz-kagit2); color: var(--rz-yazi);
  padding: 22px 24px 16px; border-radius: 2px; box-shadow: 0 60px 100px -50px rgba(0,0,0,.75); animation: rzTakvim .45s cubic-bezier(.2,.75,.2,1) both; }
.rz-takvim::before { content: ""; position: absolute; inset: 7px; border: 1px solid rgba(154,122,69,.22); pointer-events: none; }
.rz-takvim[hidden] { display: none; }
@keyframes rzTakvim { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
.rz-takvim-bas { position: relative; display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.rz-takvim-baslik { font-family: var(--sans); font-size: 10px; letter-spacing: .26em; text-transform: uppercase; color: var(--rz-altin); }
.rz-takvim-ok { position: relative; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--rz-cizgi); background: none; color: var(--rz-murekkep); cursor: pointer; font-size: 14px; }
.rz-takvim-ok:hover:not([disabled]) { border-color: var(--rz-altin); color: var(--rz-altin); }
.rz-takvim-ok[disabled] { opacity: .25; cursor: default; }
.rz-aylar { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.rz-ay-ad { font-family: var(--serif); font-size: 19px; color: var(--rz-murekkep); text-align: center; margin-bottom: 10px; text-transform: capitalize; }
.rz-ay-izgara { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px 0; }
.rz-gun-ad { font-family: var(--sans); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--rz-soluk); text-align: center; padding-bottom: 6px; }
.rz-gun { position: relative; height: 40px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 0;
  background: none; border: 0; border-radius: 2px; cursor: pointer; font: inherit; color: var(--rz-murekkep); transition: background .2s, color .2s; }
.rz-gun-n { font-family: var(--serif); font-size: 15px; line-height: 1; }
.rz-gun-f { font-family: var(--sans); font-size: 8.5px; letter-spacing: .02em; color: var(--rz-altin); line-height: 1; min-height: 9px; }
.rz-gun:hover:not([disabled]) { background: rgba(154,122,69,.12); }
.rz-gun[disabled] { cursor: default; }
.rz-gun.is-gecmis { color: rgba(36,33,28,.22); }
.rz-gun.is-kapali .rz-gun-n { color: rgba(36,33,28,.32); text-decoration: line-through; text-decoration-color: rgba(36,33,28,.25); }
.rz-gun.is-ara, .rz-gun.is-onizle { background: rgba(154,122,69,.14); border-radius: 0; }
.rz-gun.is-sec { background: var(--rz-murekkep); color: var(--rz-kagit); }
.rz-gun.is-sec .rz-gun-f { color: #d9c39c; }
.rz-gun.is-bugun:not(.is-sec) .rz-gun-n { border-bottom: 1px solid var(--rz-altin); }
.rz-gun.is-ucuz:not(.is-sec)::after { content: ""; position: absolute; top: 5px; right: 6px; width: 4px; height: 4px; border-radius: 50%; background: var(--rz-altin); }
.rz-takvim[data-faz="out"] .rz-gun[disabled]:not(.is-sec):not(.is-gecmis) { opacity: .45; }
.rz-takvim-alt { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--rz-cizgi); }
.rz .rz-takvim-not { margin: 0; font-family: var(--serif); font-style: italic; font-size: 13px; color: var(--rz-soluk); }
.rz-takvim-tamam { flex: 0 0 auto; background: none; border: 0; cursor: pointer; padding: 0 0 5px; font-family: var(--sans); font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase;
  color: var(--rz-murekkep); border-bottom: 1px solid var(--rz-altin); }

/* rezervasyon slaytinda bos slayt metni / marka seridi karti ezmesin */
.hero-text-slide--rz { display: none !important; }

/* dar masaustu: takvim kartin ustune biner */
@media (max-width: 1180px) and (min-width: 769px) {
  .rz-takvim { left: 0; top: auto; bottom: calc(100% - 120px); width: min(548px, calc(100vw - 48px)); }
}
@media (max-height: 760px) and (min-width: 769px) {
  .rz { padding-top: 84px; padding-bottom: 60px; }
  .rz-kart { padding: 26px 34px 16px; }
  .rz .rz-baslik { font-size: 30px; margin-bottom: 16px; }
  .rz-oteller { margin-bottom: 16px; }
  .rz-dip { display: none; }
}

/* mobil — kart mobil hero'ya tasinir (hero-rez.js), alttan yukari */
@media (max-width: 768px) {
  .rz { align-items: flex-end; padding: 70px 12px 96px; }
  .rz-kart { width: 100%; padding: 22px 20px 14px; }
  .rz-kart::before { inset: 6px; }
  .rz-canli { margin-right: 52px; font-size: 8.5px; }
  .rz .rz-baslik { font-size: 27px; margin-bottom: 14px; }
  .rz-oteller { gap: 8px; margin-bottom: 14px; }
  .rz-otel { gap: 9px; padding: 7px 8px 7px 7px; }
  .rz-otel-img { width: 38px; height: 38px; }
  .rz-otel-ad { font-size: 18px; }
  .rz-otel-alt { font-size: 8px; letter-spacing: .08em; }
  .rz-alanlar { grid-template-columns: 1fr 16px 1fr; row-gap: 12px; }
  .rz-alan-d { font-size: 18px; }
  .rz-alan--kisi { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; padding: 10px 0 0; border-left: 0; border-top: 1px solid var(--rz-cizgi); }
  .rz-gece { font-size: 14.5px; margin-top: 8px; }
  .rz-durum { min-height: 40px; margin: 6px 0 12px; }
  .rz .rz-d { font-size: 15.5px; }
  .rz-dugme { width: 100%; justify-content: center; padding: 15px 18px; }
  .rz-dip { display: none; }
  .rz-muhur { width: 82px; height: 82px; top: -24px; right: -6px; }
  .rz-muhur-y.is-on { font-size: 13px; max-width: 56px; }
  .rz-takvim { position: absolute; left: 0; right: 0; top: auto; bottom: 0; width: auto; padding: 18px 16px 12px; max-height: calc(100dvh - 90px); overflow: auto; }
  .rz-aylar { grid-template-columns: 1fr; }
  .rz-gun { height: 44px; }
  /* mobil hero'nun alt marka yazisi ve secici rezervasyon slaytinda gizlensin */
  .mobile-hero:has(.rz.is-active) .mobile-hero-brand, .mobile-hero:has(.rz.is-active) .brand-picker { opacity: 0; pointer-events: none; }
}
@media (prefers-reduced-motion: reduce) {
  .rz, .rz-arka, .rz-arka-img, .rz-kart, .rz-kart > *, .rz-takvim, .rz-muhur { animation: none !important; transition: none !important; }
  .rz-nokta::after, .rz-muhur-halka { animation: none; }
}