/* ============================================================= */
/*  PREMIUM TUR ARAYÜZÜ (Leodent bordo) — tourData.ui==='premium' */
/*  body.ui-premium aktifken devreye girer. Klasik UI gizlenir.   */
/* ============================================================= */

:root{
  --pm-maroon:   #6e2b2b;
  --pm-maroon-d: #4a1c1c;
  --pm-maroon-dd:#331313;
  --pm-maroon-l: #8f3d3d;
  --pm-terra:    #b56a54;
  --pm-terra-l:  #cf8b76;
  --pm-cream:    #f6efe8;
  --pm-cream-2:  #ede2d7;
  --pm-ink:      #2a1717;
  --pm-glass:    rgba(51,19,19,0.55);
  --pm-glass-2:  rgba(51,19,19,0.72);
  --pm-line:     rgba(246,239,232,0.22);
  --pm-serif:    'Georgia','Times New Roman',serif;
}

/* Premium aktifken klasik overlay parçalarını gizle (menüye taşındı / gereksiz) */
body.ui-premium #tour-brand,
body.ui-premium #btn-info,
body.ui-premium #btn-share,
body.ui-premium #btn-reset,
body.ui-premium #btn-quality,
body.ui-premium #btn-theme,
body.ui-premium #btn-gallery,
body.ui-premium #btn-sound,
body.ui-premium #btn-fullscreen,
body.ui-premium #btn-hotspots,
body.ui-premium #btn-screenshot,
body.ui-premium #nav-mode,
body.ui-premium #viewpoint-bar,
body.ui-premium #keyhints,
body.ui-premium #fps { display: none !important; }

/* Joystick gorunurlugu tour-data.showJoystick'e bagli (premium/klasik fark etmez) */
body.hide-joystick #joystick { display: none !important; }

.pm{ display: none; }
body.ui-premium .pm{ display: block; }
body.ui-premium .pm-flex{ display: flex; }
/* Premium kök katman */
.pm-layer{
  position: fixed; inset: 0; z-index: 55; pointer-events: none;
  color: var(--pm-cream); font-family: -apple-system,BlinkMacSystemFont,'Inter','Segoe UI',Roboto,sans-serif;
}
.pm-layer > *{ pointer-events: auto; }
body:not(.ui-premium) .pm-layer{ display: none; }

/* ---- SOL ÜST LOGO (kutusuz, kendi basina) ---- */
.pm-logo{
  position: absolute; top: 16px; left: 18px;
  display: flex; align-items: center; gap: 11px; max-width: 62vw;
}
.pm-logo img{ height: 54px; width: auto; display: block; filter: drop-shadow(0 2px 10px rgba(0,0,0,.5)); }
.pm-logo .pm-logo-fallback{ display: flex; align-items: center; gap: 10px; }
/* fallback (logo.png yokken) — koyu sahnede gorunur cream yazi */
.pm-logo .fb-mark{ width: 42px; height: 42px; border-radius: 50%; border: 2px solid var(--pm-cream); display: flex; align-items: center; justify-content: center; color: var(--pm-cream); flex: 0 0 auto; }
.pm-logo .fb-mark svg{ width: 26px; height: 26px; }
.pm-logo .fb-txt{ text-shadow: 0 2px 10px rgba(0,0,0,.6); }
.pm-logo .fb-txt .n{ font-family: var(--pm-serif); font-size: 22px; color: var(--pm-cream); font-weight: 700; line-height: 1; }
.pm-logo .fb-txt .s{ font-family: var(--pm-serif); font-size: 8px; color: var(--pm-cream-2); letter-spacing: 3.5px; margin-top: 3px; opacity: .9; }

/* ---- SAĞ ÜST: Randevu + Menü ---- */
.pm-top-actions{ position: absolute; top: 22px; right: 22px; display: flex; gap: 11px; align-items: center; }
.pm-book{
  background: var(--pm-cream); color: var(--pm-maroon); border: none; border-radius: 999px;
  padding: 12px 24px; font-size: 14px; font-weight: 600; cursor: pointer; box-shadow: 0 8px 24px rgba(0,0,0,.28);
  transition: .16s; font-family: inherit; text-decoration: none; display: inline-block;
}
.pm-book:hover{ background: #fff; transform: translateY(-1px); }
.pm-menu-btn{
  background: var(--pm-glass-2); color: var(--pm-cream); border: 1px solid var(--pm-line); border-radius: 999px;
  padding: 12px 20px; font-size: 14px; font-weight: 500; cursor: pointer; backdrop-filter: blur(10px);
  display: flex; align-items: center; gap: 10px; transition: .16s; font-family: inherit;
}
.pm-menu-btn:hover{ background: var(--pm-maroon); border-color: transparent; }
.pm-menu-btn .bars{ display: flex; flex-direction: column; gap: 3px; }
.pm-menu-btn .bars i{ display: block; width: 16px; height: 2px; background: var(--pm-cream); border-radius: 2px; }

/* ---- SOL ALT: breadcrumb + başlık + açıklama + navigasyon ---- */
.pm-lower{ position: absolute; left: 0; bottom: 0; padding: 0 0 30px 34px; max-width: 620px; }
.pm-crumb{ display: flex; align-items: center; gap: 9px; font-size: 13px; opacity: .85; margin-bottom: 10px; font-weight: 500; text-shadow: 0 1px 8px rgba(0,0,0,.5); }
.pm-crumb .sep{ opacity: .6; }
.pm-crumb .cur{ color: var(--pm-terra-l); }
.pm-title{ font-family: var(--pm-serif); font-size: 46px; font-weight: 700; line-height: 1.03; letter-spacing: .3px; text-shadow: 0 2px 20px rgba(0,0,0,.55); }
.pm-desc{ font-size: 14.5px; line-height: 1.55; color: rgba(246,239,232,.9); margin-top: 12px; max-width: 500px; text-shadow: 0 1px 10px rgba(0,0,0,.55); }
.pm-desc:empty{ display: none; }

.pm-nav{ display: flex; align-items: center; gap: 18px; margin-top: 22px; position: relative; }
.pm-arrows{ display: flex; gap: 10px; }
.pm-arrow{
  width: 50px; height: 50px; border-radius: 50%; border: 1px solid var(--pm-line);
  background: var(--pm-glass-2); color: var(--pm-cream); cursor: pointer; display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(10px); transition: .16s; font-size: 19px; line-height: 1;
}
.pm-arrow:hover{ background: var(--pm-maroon); border-color: transparent; transform: scale(1.05); }
.pm-arrow.solid{ background: var(--pm-cream); color: var(--pm-maroon); }
.pm-arrow.solid:hover{ background: #fff; }
.pm-count{ font-size: 15px; font-weight: 600; letter-spacing: 1px; min-width: 48px; text-shadow: 0 1px 8px rgba(0,0,0,.5); }
.pm-count b{ font-size: 18px; }
.pm-count .tot{ opacity: .6; }
.pm-dots{ display: flex; gap: 8px; align-items: center; flex-wrap: wrap; max-width: 320px; }
.pm-dot{ width: 10px; height: 10px; border-radius: 50%; background: rgba(246,239,232,.4); cursor: pointer; transition: .16s; }
.pm-dot:hover{ background: var(--pm-terra-l); transform: scale(1.25); }
.pm-dot.on{ background: var(--pm-terra); width: 26px; border-radius: 6px; }

/* ---- HOVER ÖNİZLEME KARTI ---- */
.pm-preview{
  position: absolute; width: 220px; pointer-events: none; z-index: 3;
  opacity: 0; transform: translateY(10px) scale(.96); transition: .18s ease;
  filter: drop-shadow(0 16px 40px rgba(0,0,0,.5));
}
.pm-preview.show{ opacity: 1; transform: translateY(0) scale(1); }
.pm-preview .thumb{
  width: 100%; height: 130px; border-radius: 14px; overflow: hidden; border: 2px solid var(--pm-cream);
  background: linear-gradient(135deg,#6e4a3a,#3a2b28) center/cover no-repeat; position: relative;
}
.pm-preview .thumb .ph{ position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: rgba(246,239,232,.4); font-size: 10px; letter-spacing: 2px; text-align: center; padding: 6px; }
.pm-preview .cap{ margin-top: 8px; background: var(--pm-cream); color: var(--pm-maroon); border-radius: 10px; padding: 7px 12px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.pm-preview .cap .t{ font-family: var(--pm-serif); font-weight: 700; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-preview .cap .n{ font-size: 10.5px; color: var(--pm-terra); font-weight: 600; flex: 0 0 auto; }

/* ---- MENÜ DRAWER ---- */
.pm-scrim{ position: fixed; inset: 0; background: rgba(20,8,8,.5); backdrop-filter: blur(3px); opacity: 0; pointer-events: none; transition: .25s; z-index: 60; }
.pm-scrim.show{ opacity: 1; pointer-events: auto; }
.pm-menu{
  position: fixed; top: 0; right: 0; bottom: 0; width: min(400px,92vw); z-index: 61;
  background: linear-gradient(180deg,var(--pm-maroon-d),var(--pm-maroon-dd)); color: var(--pm-cream);
  transform: translateX(100%); transition: transform .3s cubic-bezier(.2,.8,.2,1);
  box-shadow: -20px 0 60px rgba(0,0,0,.5); display: flex; flex-direction: column; padding: 22px 24px; overflow-y: auto;
}
.pm-menu.show{ transform: translateX(0); }
.pm-menu-head{ display: flex; justify-content: space-between; align-items: center; margin-bottom: 22px; }
.pm-menu-head .mt{ font-family: var(--pm-serif); font-size: 25px; font-weight: 700; }
.pm-menu-close{ width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--pm-line); background: transparent; color: var(--pm-cream); font-size: 17px; cursor: pointer; transition: .15s; }
.pm-menu-close:hover{ background: var(--pm-maroon-l); }
.pm-sec{ margin-bottom: 20px; }
.pm-sec h4{ font-size: 11px; letter-spacing: 2px; color: var(--pm-terra-l); text-transform: uppercase; margin-bottom: 10px; font-weight: 700; }
.pm-qtoggle{ display: flex; background: rgba(0,0,0,.28); border-radius: 12px; padding: 4px; gap: 4px; }
.pm-qtoggle button{ flex: 1; border: none; background: transparent; color: var(--pm-cream); padding: 11px; border-radius: 9px; cursor: pointer; font-size: 13px; font-weight: 600; font-family: inherit; transition: .15s; }
.pm-qtoggle button.on{ background: var(--pm-cream); color: var(--pm-maroon); }
.pm-item{ display: flex; align-items: center; gap: 13px; width: 100%; background: rgba(246,239,232,.06); border: 1px solid var(--pm-line); color: var(--pm-cream); padding: 13px 15px; border-radius: 12px; cursor: pointer; font-size: 14px; font-family: inherit; margin-bottom: 9px; transition: .15s; text-align: left; }
.pm-item:hover{ background: rgba(246,239,232,.13); border-color: var(--pm-terra); }
.pm-item .ic{ flex: 0 0 auto; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; color: var(--pm-terra-l); }
.pm-item .ic svg{ width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pm-item .lbl{ flex: 1; }
.pm-item .sub{ font-size: 11px; color: rgba(246,239,232,.55); margin-top: 2px; font-weight: 400; }
.pm-modes{ display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.pm-mode{ display: flex; flex-direction: column; align-items: center; gap: 7px; background: rgba(246,239,232,.06); border: 1px solid var(--pm-line); color: var(--pm-cream); padding: 13px; border-radius: 12px; cursor: pointer; font-size: 12px; font-family: inherit; transition: .15s; }
.pm-mode:hover, .pm-mode.on{ background: rgba(181,106,84,.28); border-color: var(--pm-terra); }
.pm-mode .e{ color: var(--pm-terra-l); display: flex; }
.pm-mode.on .e{ color: var(--pm-cream); }
.pm-mode .e svg{ width: 23px; height: 23px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.pm-menu-book{ margin-top: 6px; background: var(--pm-cream); color: var(--pm-maroon); border: none; border-radius: 14px; padding: 15px; font-size: 15px; font-weight: 700; cursor: pointer; font-family: inherit; text-align: center; text-decoration: none; display: block; }
.pm-menu-book:hover{ background: #fff; }

/* ---- MOBIL ---- */
@media (max-width: 720px){
  .pm-title{ font-size: 32px; }
  .pm-desc{ font-size: 13px; max-width: 88vw; }
  .pm-lower{ padding: 0 0 22px 18px; max-width: 92vw; }
  .pm-book{ padding: 10px 16px; font-size: 13px; }
  .pm-menu-btn{ padding: 10px 14px; }
  .pm-logo{ top: 12px; left: 14px; }
  .pm-logo img{ height: 40px; }
  .pm-arrow{ width: 44px; height: 44px; }
  .pm-dots{ max-width: 60vw; }
}