/* AKSAÇ HOTEL — Light Theme (Static HTML)
   Inspired by modern hospitality patterns: strong hero + booking CTA,
   clean sections, room cards, gallery grid, reviews, location. */

:root{
  --bg: #f6f8fc;
  --surface: #ffffff;
  --surface2: #f1f5ff;
  --text: #0f172a;
  --muted:#475569;
  --muted2:#64748b;
  --stroke:#e2e8f0;

  --brand:#1d4ed8;
  --brand2:#f59e0b;

  --shadow: 0 18px 60px rgba(15,23,42,.10);
  --shadow2: 0 12px 30px rgba(15,23,42,.08);

  --radius-xl: 28px;
  --radius-lg: 20px;
  --radius-md: 14px;

  --container: 1180px;
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color: var(--text);
  background:
    radial-gradient(900px 520px at 12% 10%, rgba(29,78,216,.16), transparent 55%),
    radial-gradient(860px 520px at 90% 12%, rgba(245,158,11,.18), transparent 55%),
    linear-gradient(180deg, var(--bg), #ffffff 60%);
}

a{color:inherit; text-decoration:none;}
img{max-width:100%; height:auto; display:block;}
button,input,select,textarea{font:inherit;}

.container{max-width:var(--container); margin:0 auto; padding:0 18px;}
.grid{display:grid; gap:16px;}

.badge{
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 12px;
  border-radius: 999px;
  background: rgba(29,78,216,.08);
  color: #1e40af;
  border: 1px solid rgba(29,78,216,.14);
  font-weight: 700;
  font-size: 13px;
}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:12px 16px;
  border-radius: 999px;
  border:1px solid var(--stroke);
  background: var(--surface);
  color: var(--text);
  cursor:pointer;
  transition: transform .12s ease, box-shadow .2s ease, background .2s ease;
  user-select:none;
  box-shadow: var(--shadow2);
}
.btn:hover{transform: translateY(-1px); box-shadow: var(--shadow);}
.btn.primary{
  border:0;
  color:#fff;
  background: linear-gradient(135deg, var(--brand), #6d28d9 70%);
}
.btn.secondary{
  border:0;
  color:#1f2937;
  background: linear-gradient(135deg, rgba(245,158,11,.95), rgba(251,191,36,.95));
}
.btn.ghost{
  background: transparent;
  box-shadow: none;
}
.btn.small{padding:10px 13px; font-size: 14px;}

.card{
  background: var(--surface);
  border:1px solid var(--stroke);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
}

.section{padding:72px 0;}
.section.tight{padding:48px 0;}
.section-title{
  font-family: 'Playfair Display', ui-serif, Georgia, serif;
  font-weight: 800;
  letter-spacing: .2px;
  font-size: clamp(28px, 3.2vw, 44px);
  margin:0 0 12px;
}
.section-sub{
  margin:0 0 20px;
  color: var(--muted);
  max-width: 860px;
  line-height: 1.75;
}
hr.sep{
  border:0; height:1px;
  background: linear-gradient(90deg, transparent, rgba(15,23,42,.12), transparent);
  margin: 22px 0;
}

/* Header */
.header{
  position: sticky; top:0; z-index: 50;
  background: rgba(255,255,255,.86);
  border-bottom: 1px solid rgba(15,23,42,.06);
  backdrop-filter: blur(12px);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 0;
}
.brand{display:flex; align-items:center; gap:12px;}
.brand img{width: 170px; height:auto;}
.nav-links{
  display:flex; align-items:center; gap:8px;
}
.nav-links a{
  padding:10px 12px;
  border-radius: 999px;
  color: #0f172a;
  border: 1px solid transparent;
  transition: background .2s ease, border-color .2s ease;
  font-weight: 800;
  font-size: 13px;
}
.nav-links a:hover{background: rgba(15,23,42,.04); border-color: rgba(15,23,42,.08);}
.nav-links a.active{background: rgba(29,78,216,.08); border-color: rgba(29,78,216,.14); color:#1e40af;}

.nav-cta{display:flex; gap:10px; align-items:center;}
.menu-btn{display:none; box-shadow:none;}

/* Mobile Nav */
@media (max-width: 920px){
  .nav-links{display:none;}
  .menu-btn{display:inline-flex;}
  .mobile-menu{display:none; padding: 0 0 16px;}
  .mobile-menu.open{display:block;}
  .mobile-menu a{
    display:block;
    padding:12px 14px;
    border-radius: 16px;
    border: 1px solid rgba(15,23,42,.10);
    background: rgba(255,255,255,.88);
    margin-top:10px;
    color:#0f172a;
    font-weight: 900;
  }
}

/* Hero */
.hero{padding: 54px 0 26px;}
.hero-wrap{
  display:grid;
  grid-template-columns: 1.12fr .88fr;
  gap: 16px;
  align-items: stretch;
}
@media (max-width: 980px){.hero-wrap{grid-template-columns: 1fr;}}
.hero-left{padding: 34px; position: relative; overflow:hidden;}
.hero-left:before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(620px 420px at 10% 10%, rgba(29,78,216,.18), transparent 60%),
    radial-gradient(560px 420px at 90% 15%, rgba(245,158,11,.18), transparent 60%);
  pointer-events:none;
}
.hero-left > *{position:relative;}
.hero-title{
  font-family: 'Playfair Display', ui-serif, Georgia, serif;
  font-weight: 900;
  font-size: clamp(34px, 4.6vw, 58px);
  margin: 12px 0 12px;
}
.hero-text{color: var(--muted); line-height: 1.8; margin:0 0 18px; max-width: 62ch;}
.hero-actions{display:flex; gap:12px; flex-wrap:wrap;}
.hero-pills{display:flex; flex-wrap:wrap; gap:10px; margin-top: 18px;}
.pill{
  padding:10px 12px;
  border-radius: 999px;
  border:1px solid rgba(15,23,42,.08);
  background: rgba(255,255,255,.72);
  color: var(--muted);
  font-weight: 800;
  font-size: 13px;
}

.hero-right{padding: 18px;}
.booking{
  padding: 18px;
  border-radius: 22px;
  border: 1px solid rgba(15,23,42,.08);
  background: linear-gradient(180deg, rgba(29,78,216,.06), rgba(255,255,255,.88));
}
.booking h3{margin:0 0 6px; font-size: 18px;}
.booking p{margin:0 0 14px; color: var(--muted); line-height:1.7; font-size: 14px;}
.booking-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
@media (max-width: 520px){.booking-grid{grid-template-columns:1fr;}}
.field label{display:block; font-size:12px; color: var(--muted2); font-weight: 900; margin:0 0 8px;}
.field input,.field select,.field textarea{
  width:100%;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.96);
  color: var(--text);
  outline:none;
}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color: rgba(29,78,216,.45);
  box-shadow: 0 0 0 4px rgba(29,78,216,.12);
}
.booking-actions{display:flex; gap:10px; margin-top: 12px; flex-wrap:wrap;}

/* Features */
.features{grid-template-columns: repeat(3, 1fr);}
@media (max-width: 960px){.features{grid-template-columns:1fr;}}
.feature{
  padding: 20px;
  border-radius: 22px;
  border: 1px solid rgba(15,23,42,.08);
  background: rgba(255,255,255,.86);
  box-shadow: var(--shadow2);
}
.icon{
  width: 40px; height: 40px; border-radius: 14px;
  display:grid; place-items:center;
  background: rgba(29,78,216,.10);
  border: 1px solid rgba(29,78,216,.14);
}
.feature h3{margin:12px 0 8px; font-size: 18px;}
.feature p{margin:0; color: var(--muted); line-height:1.75;}

/* Rooms */
.rooms{grid-template-columns: repeat(3, 1fr);}
@media (max-width: 1000px){.rooms{grid-template-columns:1fr;}}
.room-card{overflow:hidden; border-radius: 26px; border:1px solid rgba(15,23,42,.08); background:#fff; box-shadow: var(--shadow);}
.room-img{height: 220px; width:100%; object-fit:cover;}
.room-body{padding: 18px;}
.room-title{margin:0 0 6px; font-size: 18px; font-weight: 900;}
.room-sub{margin:0 0 12px; color: var(--muted); line-height:1.7;}
.room-meta{display:flex; gap:10px; flex-wrap:wrap; margin-bottom: 14px;}
.chip{
  padding:8px 10px;
  border-radius: 999px;
  border:1px solid rgba(15,23,42,.08);
  background: rgba(15,23,42,.02);
  color: var(--muted2);
  font-weight: 800;
  font-size: 12px;
}

/* Gallery */
.gallery-grid{grid-template-columns: repeat(12, 1fr);}
.g-item{
  border-radius: 22px;
  overflow:hidden;
  border:1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.86);
  position: relative;
  cursor:pointer;
  box-shadow: var(--shadow2);
}
.g-item img{width:100%; height:100%; object-fit:cover;}
.g-item:after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.38));
  opacity:.78;
}
.g-item .cap{
  position:absolute; left:14px; right:14px; bottom:12px;
  z-index: 2;
  display:flex; align-items:flex-end; justify-content:space-between; gap:10px;
  color:#fff;
}
.g-item .cap .t{font-weight: 900;}
.g-item .cap .s{color: rgba(255,255,255,.82); font-size: 13px;}
.g-span-8{grid-column: span 8;}
.g-span-4{grid-column: span 4;}
.g-span-6{grid-column: span 6;}
.g-span-12{grid-column: span 12;}
@media (max-width: 980px){
  .g-span-8,.g-span-6,.g-span-4{grid-column: span 12;}
}

/* Reviews */
.reviews{grid-template-columns: repeat(3, 1fr);}
@media (max-width: 980px){.reviews{grid-template-columns:1fr;}}
.review{
  padding: 18px;
  border-radius: 24px;
  border:1px solid rgba(15,23,42,.08);
  background: rgba(255,255,255,.90);
  box-shadow: var(--shadow2);
}
.stars{letter-spacing: 2px;}
.review p{color: var(--muted); line-height:1.75; margin:10px 0 12px;}
.review .who{font-weight: 900;}

/* Forms (pages) */
.form{padding: 22px;}
.form-grid{display:grid; grid-template-columns: repeat(2, 1fr); gap: 12px;}
@media (max-width: 760px){.form-grid{grid-template-columns:1fr;}}
.field textarea{min-height: 120px; resize: vertical;}
.form-actions{display:flex; gap:10px; flex-wrap:wrap; margin-top: 12px;}
.hint{color: var(--muted2); font-size: 13px; line-height: 1.7; margin-top: 10px;}

/* Footer */
.footer{
  padding: 42px 0;
  border-top: 1px solid rgba(15,23,42,.08);
  background: rgba(255,255,255,.80);
}
.footer-grid{
  display:grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 18px;
}
@media (max-width: 900px){.footer-grid{grid-template-columns:1fr;}}
.footer p{color: var(--muted); line-height: 1.75; margin: 10px 0 0;}
.footer h4{margin:0 0 10px;}
.footer a{color: #0f172a;}
.footer a:hover{text-decoration: underline;}
.footer-bottom{
  margin-top: 18px;
  color: var(--muted2);
  font-size: 13px;
  display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap;
}

/* Modal */
.modal{
  position: fixed;
  inset:0;
  background: rgba(15,23,42,.65);
  display:none;
  align-items:center;
  justify-content:center;
  padding: 18px;
  z-index: 100;
}
.modal.open{display:flex;}
.modal-card{
  max-width: 980px;
  width: 100%;
  border-radius: 22px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.98);
  box-shadow: 0 30px 90px rgba(0,0,0,.35);
}
.modal-img{width:100%; max-height: 72vh; object-fit:cover;}
.modal-bar{
  display:flex; justify-content:space-between; align-items:center;
  padding: 12px 14px;
  gap:10px;
}
.modal-title{font-weight: 900;}
.modal-close{
  border:1px solid rgba(15,23,42,.12);
  background: rgba(15,23,42,.03);
  border-radius: 999px;
  padding: 10px 12px;
  cursor:pointer;
}
.modal-close:hover{background: rgba(15,23,42,.06);}

/* Toast */
.toast{
  position: fixed;
  right: 18px;
  bottom: 18px;
  min-width: 280px;
  max-width: 360px;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.95);
  box-shadow: var(--shadow);
  display:none;
  z-index: 120;
}
.toast.show{display:block;}
.toast .t{font-weight: 900; margin:0 0 2px;}
.toast .s{margin:0; color: var(--muted); font-size: 13px; line-height: 1.6;}