/* =========================================================
   FOM STOREFRONT ENTRY — MINIMAL / MOBILE-FIRST
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  --bg-primary:#fff;
  --bg-secondary:#FBFCFE;
  --bg-tertiary:#F5F7FB;

  --text-primary:#0A1A2F;
  --text-secondary:#4A5A6E;
  --text-tertiary:#7E8C9E;
  --text-quaternary:#B4C0CC;

  --brand-primary:#0A4D8C;
  --brand-light:rgba(10,77,140,.06);
  --brand-mid:rgba(10,77,140,.12);
  --brand-glow:rgba(10,77,140,.18);

  --accent-amber:#B45309;

  --border-light:#EDF0F3;
  --border-regular:#E2E6EA;

  --shadow-sm:0 6px 14px rgba(0,0,0,.06);
  --shadow-md:0 14px 28px rgba(0,0,0,.08);

  --radius-md:12px;
  --radius-lg:16px;
  --radius-xl:22px;
  --radius-full:9999px;

  --font-sans:'Inter',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --transition:.18s cubic-bezier(.2,0,0,1);
}

*{ box-sizing:border-box; }
body{
  font-family:var(--font-sans);
  color:var(--text-primary);
  background:var(--bg-primary);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Container daha dar + mobil dostu */
.entry-master{
  max-width:980px;
  margin:0 auto;
  padding:0 16px;
}

/* Header daha kompakt */
.entry-header-master{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 0;
  margin-bottom:22px;
  border-bottom:1px solid var(--border-light);
}

.header-brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
}

.brand-icon{
  width:40px; height:40px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--brand-primary);
  color:#fff;
  box-shadow:0 10px 22px var(--brand-glow);
  transition:var(--transition);
}
.header-brand:hover .brand-icon{ transform:translateY(-1px); }

.brand-title{ font-size:16px; font-weight:800; letter-spacing:-.2px; line-height:1.1; color:var(--text-primary); }
.brand-subtitle{ font-size:12px; font-weight:600; color:var(--text-tertiary); }

.header-user{
  display:flex; align-items:center; gap:10px;
  padding:6px 12px 6px 10px;
  background:var(--bg-secondary);
  border:1px solid var(--border-light);
  border-radius:var(--radius-full);
}
.user-avatar{
  width:34px; height:34px;
  border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(145deg,var(--brand-primary),#0A3B6B);
  color:#fff; font-weight:700; font-size:13px;
}
.user-name{ font-size:13px; font-weight:700; }
.user-role{ font-size:11px; color:var(--text-tertiary); }

/* Hero küçült */
.entry-hero-master{
  text-align:center;
  margin:18px auto 22px;
  max-width:720px;
}
.hero-badge{
  display:inline-flex;
  padding:6px 12px;
  border-radius:var(--radius-full);
  border:1px solid var(--brand-mid);
  background:var(--brand-light);
  color:var(--brand-primary);
  font-size:12px;
  font-weight:700;
  margin-bottom:12px;
}
.hero-title{
  font-size:clamp(28px, 6vw, 42px);
  font-weight:900;
  letter-spacing:-.04em;
  line-height:1.12;
  margin-bottom:10px;
}
.hero-title span{
  background:linear-gradient(145deg,var(--brand-primary),#1A5F9C);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}
.hero-subtitle{
  font-size:14px;
  color:var(--text-secondary);
  line-height:1.55;
  margin:0 auto;
  max-width:52ch;
}

/* Access: tek kart + sekmeler */
.access-shell{ margin: 18px 0 26px; }
.access-shell__card{
  background:#fff;
  border:1px solid var(--border-light);
  border-radius:var(--radius-xl);
  padding:14px;
  box-shadow:var(--shadow-sm);
}

.segmented{
  display:flex;
  gap:6px;
  padding:6px;
  background:var(--bg-tertiary);
  border:1px solid var(--border-light);
  border-radius:var(--radius-full);
}

.segmented__btn{
  flex:1;
  border:0;
  background:transparent;
  padding:10px 10px;
  border-radius:var(--radius-full);
  font-weight:800;
  font-size:13px;
  color:var(--text-secondary);
  cursor:pointer;
  transition:var(--transition);
}
.segmented__btn.is-active{
  background:#fff;
  color:var(--text-primary);
  box-shadow:0 6px 14px rgba(0,0,0,.08);
}

.segmented-panels{ padding-top:12px; }
.segmented-panel{ display:none; }
.segmented-panel.is-active{ display:block; }

.panel-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.panel-title{ font-size:14px; font-weight:900; letter-spacing:-.2px; }
.panel-desc{ font-size:12px; color:var(--text-tertiary); margin-top:2px; }

/* Inputs / Buttons */
.input-group-premium{ display:flex; gap:8px; }
.input-premium{
  flex:1;
  padding:11px 14px;
  border:1.5px solid var(--border-light);
  border-radius:var(--radius-md);
  font-size:14px;
  font-weight:600;
  color:var(--text-primary);
  background:var(--bg-secondary);
  transition:var(--transition);
}
.input-premium:focus{
  outline:none;
  border-color:var(--brand-primary);
  background:#fff;
  box-shadow:0 0 0 4px var(--brand-light);
}
.input-premium::placeholder{ color:var(--text-quaternary); font-weight:500; }

.btn-premium{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:11px 16px;
  border-radius:var(--radius-md);
  font-size:13px;
  font-weight:800;
  border:0;
  cursor:pointer;
  transition:var(--transition);
  white-space:nowrap;
}
.btn-premium--primary{
  background:var(--brand-primary);
  color:#fff;
  box-shadow:0 10px 22px var(--brand-glow);
}
.btn-premium--primary:hover{ transform:translateY(-1px); }

.btn-premium--outline{
  background:#fff;
  border:1.5px solid var(--border-regular);
  color:var(--text-secondary);
}
.btn-premium--outline:hover{ background:var(--bg-tertiary); color:var(--text-primary); }

.code-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:10px;
}
.hint-inline{
  font-size:12px;
  color:var(--text-tertiary);
}

.qr-actions{
  display:flex;
  gap:10px;
}
.qr-actions .btn-premium{ flex:1; }

.hint-premium{
  margin-top:10px;
  padding:10px 12px;
  border-radius:var(--radius-md);
  font-size:12px;
  border:1px solid var(--border-light);
  background:var(--bg-tertiary);
  color:var(--text-secondary);
}
.hint-premium--warn{
  background:#FFF7ED;
  border-color:#FED7AA;
  color:var(--accent-amber);
}

/* Hotels daha kompakt */
.hotels-section{ margin: 22px 0 34px; }

.section-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:12px;
}
.section-title{ font-size:16px; font-weight:900; letter-spacing:-.2px; }
.section-count{
  padding:6px 12px;
  border-radius:var(--radius-full);
  font-size:12px;
  font-weight:800;
  color:var(--text-secondary);
  background:var(--bg-secondary);
  border:1px solid var(--border-light);
}

.hotels-grid-premium{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}

.hotel-card-premium{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px;
  background:#fff;
  border:1px solid var(--border-light);
  border-radius:var(--radius-lg);
  text-decoration:none;
  transition:var(--transition);
}
.hotel-card-premium:hover{
  border-color:var(--brand-primary);
  box-shadow:var(--shadow-sm);
}

.hotel-logo{
  width:44px; height:44px;
  border-radius:14px;
  background:var(--bg-tertiary);
  border:1px solid var(--border-light);
  display:flex; align-items:center; justify-content:center;
  font-weight:900;
  color:var(--brand-primary);
  overflow:hidden;
  flex:0 0 auto;
}
.hotel-logo img{ width:100%; height:100%; object-fit:cover; }

.hotel-name{ font-size:14px; font-weight:900; margin-bottom:2px; }
.hotel-location{ font-size:12px; color:var(--text-tertiary); margin-bottom:4px; }
.hotel-code{
  display:inline-block;
  padding:3px 8px;
  border-radius:10px;
  font-size:11px;
  font-weight:800;
  color:var(--brand-primary);
  background:var(--brand-light);
  border:1px solid var(--brand-mid);
}

/* Modal kalsın (sadece biraz daha dengeli) */
.modal-card{
  width:100%;
  max-width:460px;
  background:#fff;
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-md);
  padding:22px;
}

/* Footer kompakt */
.entry-footer-master{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:22px 0;
  border-top:1px solid var(--border-light);
  margin-top:18px;
  text-align:center;
}
.footer-nav{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
.footer-link{ font-size:12px; color:var(--text-tertiary); text-decoration:none; font-weight:700; }
.footer-link:hover{ color:var(--brand-primary); }

/* Desktop’ta grid iki kolon */
@media (min-width: 860px){
  .hotels-grid-premium{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .entry-footer-master{
    flex-direction:row;
    justify-content:space-between;
    text-align:left;
  }
}


/* ========== MODAL (QR) — FIXED OVERLAY ========== */
.modal-premium{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;                 /* <-- en kritik satır */
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(10, 26, 47, 0.55);
  backdrop-filter: blur(8px);
}

.modal-premium.is-open{
  display: flex;
}

.modal-card{
  width: 100%;
  max-width: 480px;
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  padding: 18px;
}

.modal-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.modal-title{
  font-size: 16px;
  font-weight: 900;
  letter-spacing: -.2px;
}

.modal-close{
  width: 38px;
  height: 38px;
  border: 1px solid var(--border-light);
  background: var(--bg-secondary);
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-tertiary);
  transition: var(--transition);
}

.modal-close:hover{
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

.video-container{
  width: 100%;
  aspect-ratio: 16 / 10;
  min-height: 240px;
  background: #0A1A2F;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.video-container video{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.scan-status{
  margin-top: 10px;
  text-align: center;
  padding: 10px 12px;
  border: 1px solid var(--border-light);
  background: var(--bg-tertiary);
  border-radius: var(--radius-md);
  font-size: 13px;
  color: var(--text-secondary);
}

.modal-footer{
  display: flex;
  gap: 10px;
  margin-top: 12px;
}

@media (max-width: 480px){
  .modal-footer{ flex-direction: column; }
}