/* Rezervasyon geçiş penceresi (ShineRez.openSheet) — yalnız ana sayfa ve /vip yükler.
   Seçim anında çerçeve yok: iki büyük fotoğraflı kart karartılmış ekranın üstünde, VIP ekranın en solundan, Masa en sağından
   kayarak ortada buluşur. Üzerine gelinen kart öne çıkar ve kendi renginde neon çerçeve alır. Seçilen kart büyüyüp
   fotoğraf + küçük resim şeridi + rezervasyon formuna dönüşür (çerçeveli pencere), diğeri küçülüp kaybolur. */
.modal-overlay.rez-sheet { --rez-vip: #f2a33c; --rez-vip-2: #e3127a; --rez-masa: #38bdf8; --rez-masa-2: #8b5cf6; place-items: center; padding: 16px; overflow: hidden; }
/* Seçim: şeffaf ve geniş (kartlar ekranın ortasında, çerçevesiz). Telefonda da ortada açılır; genişlik ekrandan alınır. */
.rez-sheet .rez-panel { position: relative; width: min(1040px, calc(100vw - 32px)); max-height: 92vh; max-height: 92dvh; overflow: visible; padding: 0; border: 1px solid transparent; border-radius: 24px; background: transparent; box-shadow: none; transform: none;
  transition: width .5s var(--ease), padding .4s var(--ease), background-color .4s, border-color .4s, box-shadow .4s; }
/* Seçildikten sonra: çerçeveli pencere (form). */
.rez-sheet .rez-panel:is(.is-open-vip, .is-open-masa) { width: min(760px, calc(100vw - 32px)); overflow: auto; padding: 18px; border-color: var(--glass-border); background: radial-gradient(120% 80% at 50% 0%, rgba(139,92,246,.12), transparent 60%), var(--surface); box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.rez-top { display: flex; align-items: center; gap: 6px; min-height: 44px; margin-bottom: 18px; }
.rez-top h3 { flex: 1; margin: 0; color: #fff; font-size: clamp(1.4rem, 3vw, 2rem); text-shadow: 0 2px 18px rgba(0,0,0,.7); }
.is-open-vip .rez-top h3, .is-open-masa .rez-top h3 { font-size: 1.25rem; }
.rez-back { min-height: 44px; margin-left: -8px; padding: 0 12px; border: 0; border-radius: 10px; background: transparent; color: var(--neon); font-weight: 600; white-space: nowrap; }
.rez-back:hover { background: var(--glass); }
.rez-x { width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255,255,255,.1); color: var(--cream); font-size: 1.4rem; line-height: 1; }
.rez-x:hover { background: rgba(255,255,255,.18); }

.rez-picks { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 28px; row-gap: 18px; transition: grid-template-columns .5s var(--ease), column-gap .5s var(--ease); }
.is-open-vip .rez-picks { grid-template-columns: minmax(0, 1fr) minmax(0, 0fr); column-gap: 0; }
.is-open-masa .rez-picks { grid-template-columns: minmax(0, 0fr) minmax(0, 1fr); column-gap: 0; }

.rez-pick { --c1: var(--rez-masa); --c2: var(--rez-masa-2); position: relative; display: grid; grid-template-rows: 0fr; min-width: 0; min-height: min(520px, 68vh); overflow: hidden; border: 1px solid rgba(255,255,255,.16); border-radius: 22px;
  background: linear-gradient(150deg, color-mix(in srgb, var(--c1) 40%, #0b0a0a), color-mix(in srgb, var(--c2) 36%, #0b0a0a)); box-shadow: 0 24px 60px rgba(0,0,0,.55);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s, opacity .45s var(--ease), grid-template-rows .5s var(--ease), min-height .5s var(--ease); }
.rez-pick[data-mode="vip"] { --c1: var(--rez-vip); --c2: var(--rez-vip-2); animation: rez-sol .8s cubic-bezier(.2,.9,.25,1.1) both; }
.rez-pick[data-mode="masa"] { animation: rez-sag .8s cubic-bezier(.2,.9,.25,1.1) .08s both; }
/* Ekranın tamamen dışından (kart genişliği + yarım ekran) başlar. */
@keyframes rez-sol { from { opacity: .2; transform: translateX(calc(-50vw - 100%)) rotate(-8deg); } to { opacity: 1; transform: none; } }
@keyframes rez-sag { from { opacity: .2; transform: translateX(calc(50vw + 100%)) rotate(8deg); } to { opacity: 1; transform: none; } }
.rez-pick:not(.is-chosen):is(:hover, :focus-within) { z-index: 2; transform: translateY(-8px) scale(1.04); border-color: transparent;
  box-shadow: 0 0 0 3px var(--c1), 0 0 28px color-mix(in srgb, var(--c1) 75%, transparent), 0 0 80px color-mix(in srgb, var(--c2) 50%, transparent), 0 30px 60px rgba(0,0,0,.55); }
.rez-picks:has(.rez-pick:not(.is-chosen):hover) .rez-pick:not(:hover):not(.is-chosen) { opacity: .65; transform: scale(.97); }
.rez-pick.is-chosen { grid-template-rows: 1fr; min-height: 0; border-color: transparent; box-shadow: 0 0 0 2px var(--c1), 0 0 30px color-mix(in srgb, var(--c1) 45%, transparent); animation: none; }
:is(.is-open-vip, .is-open-masa) .rez-pick:not(.is-chosen) { opacity: 0; transform: scale(.4); pointer-events: none; }

/* Kart: arkada fotoğraf, üstünde renk geçişi ve yazılar. */
.rez-card { position: absolute; inset: 0; z-index: 1; display: grid; align-content: end; justify-items: center; gap: 12px; padding: 28px 20px 30px; border: 0; background: none; color: var(--cream); text-align: center; transition: opacity .3s, transform .35s var(--ease); }
.rez-card-img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.04); transition: opacity .5s, transform 1.2s var(--ease); }
.rez-card-img.is-loaded { opacity: 1; }
.rez-pick:hover .rez-card-img.is-loaded { transform: scale(1.1); }
.rez-card::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, color-mix(in srgb, var(--c2) 55%, #0b0a0a) 0%, color-mix(in srgb, var(--c1) 22%, rgba(11,10,10,.55)) 45%, rgba(11,10,10,.1) 100%); }
.rez-card .ic { width: 56px; height: 56px; color: var(--c1); filter: drop-shadow(0 0 14px var(--c1)); }
.rez-card strong { font-family: var(--font-head); font-size: clamp(2rem, 5vw, 3rem); line-height: 1.05; text-shadow: 0 0 24px color-mix(in srgb, var(--c1) 70%, transparent), 0 2px 10px rgba(0,0,0,.6); }
.rez-card span { max-width: 26ch; color: rgba(255,255,255,.9); font-size: clamp(.95rem, 1.6vw, 1.1rem); line-height: 1.45; text-shadow: 0 1px 8px rgba(0,0,0,.6); }
.rez-card em { margin-top: 6px; padding: 10px 26px; border: 1px solid var(--c1); border-radius: 999px; background: rgba(11,10,10,.45); color: #fff; font-size: .9rem; font-style: normal; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; box-shadow: 0 0 18px color-mix(in srgb, var(--c1) 45%, transparent); }
.is-chosen .rez-card { opacity: 0; transform: scale(.9); pointer-events: none; }

.rez-stage { position: relative; z-index: 1; min-height: 0; overflow: hidden; opacity: 0; transition: opacity .25s; }
.is-chosen .rez-stage { opacity: 1; transition: opacity .35s .2s; }
.rez-picks[style] .rez-stage > * { width: calc(var(--rez-w) - 2px); }
.rez-hero { position: relative; aspect-ratio: 16 / 8; overflow: hidden; background: linear-gradient(135deg, var(--c1), var(--c2)); }
.rez-hero img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .4s; }
.rez-hero img.is-loaded { opacity: 1; }
.rez-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(11,10,10,.85), rgba(11,10,10,.05) 60%); pointer-events: none; }
.rez-hero-cap { position: absolute; right: 16px; bottom: 12px; left: 16px; z-index: 1; margin: 0; color: #fff; font-family: var(--font-head); font-size: 1.4rem; text-shadow: 0 2px 12px rgba(0,0,0,.6); }
/* Küçük resim şeridi: dokunulan resim büyük görselde açılır. */
.rez-thumbs { display: flex; gap: 8px; overflow-x: auto; padding: 10px 12px; background: rgba(11,10,10,.6); scrollbar-width: thin; }
.rez-thumb { flex: none; width: 76px; height: 56px; padding: 0; overflow: hidden; border: 2px solid transparent; border-radius: 10px; background: var(--surface-2); opacity: .7; transition: opacity .2s, border-color .2s; }
.rez-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rez-thumb:hover, .rez-thumb[aria-pressed="true"] { opacity: 1; border-color: var(--c1); }
.rez-stage .res-form { margin: 0; padding: 18px 16px 20px; border: 0; background: rgba(11,10,10,.55); }
.rez-stage .res-success { padding: 28px 16px 20px; background: rgba(11,10,10,.55); }
.rez-host > .empty, .rez-wait { margin: 0; padding: 28px 16px; color: var(--gray-light); text-align: center; }

/* Telefon: kartlar alt alta, tam genişlikte; VIP soldan, Masa sağdan gelir. */
@media (max-width: 640px) {
  .modal-overlay.rez-sheet { padding: 10px; }
  .rez-sheet .rez-panel { width: calc(100vw - 20px); }
  .rez-sheet .rez-panel:is(.is-open-vip, .is-open-masa) { width: calc(100vw - 20px); padding: 14px; border-radius: 18px; }
  .rez-picks, .is-open-vip .rez-picks, .is-open-masa .rez-picks { grid-template-columns: minmax(0, 1fr); column-gap: 0; }
  .rez-pick { min-height: calc((88dvh - 110px) / 2); border-radius: 18px; }
  :is(.is-open-vip, .is-open-masa) .rez-pick:not(.is-chosen) { position: absolute; inset: 0 0 auto; }
  .rez-card { padding: 18px 16px 20px; gap: 8px; }
  .rez-card .ic { width: 40px; height: 40px; }
  .rez-card em { padding: 8px 20px; }
}
@media (hover: none) { .rez-pick:not(.is-chosen):active { transform: scale(1.03); box-shadow: 0 0 0 3px var(--c1), 0 0 26px color-mix(in srgb, var(--c1) 65%, transparent); } }
@media (prefers-reduced-motion: reduce) { .rez-pick, .rez-card, .rez-card-img { animation: none !important; transform: none !important; } }
/* Müşteri hesabı (v7): formda "Hesabınla: …" ya da "Hesabınla giriş yap" satırı; bağlantı ≥ 44 px dokunma alanı */
.res-acct { margin: 0; }
.res-acct a { display: inline-block; padding: 12px 0; color: var(--neon); text-decoration: underline; text-underline-offset: 3px; }