:root{
  --bg: #08070a;
  --bg-alt: #0f0d10;
  --gold-light: #f0d78c;
  --gold: #cda23a;
  --gold-dark: #8a6a14;
  --gold-gradient: linear-gradient(135deg, #f5e2a6 0%, #cda23a 45%, #8a6a14 100%);
  --text: #f3efe6;
  --text-muted: #a79f92;
  --border-soft: rgba(255,255,255,0.08);
  --radius: 6px;
  --ff-heading: 'Playfair Display', serif;
  --ff-body: 'Jost', sans-serif;
}

*,*::before,*::after{ box-sizing: border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
html{ overflow-x:hidden; width:100%; }
body{
  font-family: var(--ff-body);
  background: var(--bg);
  color: var(--text);
  line-height:1.7;
  font-size:16px;
  overflow-x:hidden;
  width:100%;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
svg{ width:22px; height:22px; }

.container{ width:100%; max-width:1100px; margin:0 auto; padding:0 24px; }

h1,h2,h3{ font-family: var(--ff-heading); font-weight:600; line-height:1.25; }
h2{ font-size: clamp(1.9rem, 3vw, 2.4rem); }

.text-gold{ color: var(--gold-light); font-style:italic; }

.eyebrow{
  display:inline-block; font-size:0.75rem; letter-spacing:3px; font-weight:600;
  color: var(--gold); margin-bottom:14px; text-transform:uppercase;
}

.section-head{ text-align:center; margin-bottom:50px; }

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:14px 30px; font-size:0.9rem; font-weight:600; letter-spacing:0.5px;
  border-radius:2px; border:none; transition: all .3s ease;
}
.btn-gold{ background: var(--gold-gradient); color:#100c02; }
.btn-gold:hover{ filter:brightness(1.1); transform:translateY(-2px); }
.btn-sm{ padding:10px 20px; font-size:0.82rem; }
.btn-full{ width:100%; }

/* Header */
.site-header{ position:fixed; top:0; left:0; right:0; z-index:1000; padding:20px 0; transition: all .3s ease; }
.site-header.scrolled{ padding:12px 0; background: rgba(8,7,10,0.92); backdrop-filter: blur(10px); border-bottom:1px solid var(--border-soft); }
.header-inner{ display:flex; align-items:center; justify-content:space-between; }
.brand-logo{ width:56px; height:56px; object-fit:contain; }
.main-nav{ display:flex; align-items:center; gap:36px; }
.main-nav ul{ display:flex; gap:32px; }
.nav-link{ font-size:0.9rem; color: var(--text-muted); transition: color .25s ease; }
.nav-link:hover{ color: var(--text); }
.nav-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:none; padding:6px; position:relative; z-index:1001; }
.nav-toggle span{ width:24px; height:2px; background:var(--text); transition: all .3s ease; }
.nav-toggle.open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* Hero */
.hero{ position:relative; min-height:92vh; display:flex; align-items:center; overflow:hidden; }
.hero-bg{
  position:absolute; inset:0; background-size:cover; background-position:center;
  background-image:url('../assets/project-details/golbasi-villa/photos/dis-cephe-1-web.jpg');
}
.hero-overlay{ position:absolute; inset:0; background: linear-gradient(180deg, rgba(8,7,10,0.55) 0%, rgba(8,7,10,0.8) 60%, rgba(8,7,10,0.98) 100%); }
.hero-content{ position:relative; z-index:2; max-width:680px; }
.hero-tagline{
  font-family: var(--ff-heading); font-weight:500;
  font-size: clamp(2.6rem, 5.2vw, 4rem); line-height:1.15; letter-spacing:0.5px;
  color: var(--text); margin-bottom:22px;
}
.hero-desc{ font-size:1.05rem; color: var(--text-muted); margin-bottom:32px; max-width:520px; }

.hero-hologram{
  position:absolute; right:4%; top:0; bottom:0; margin:auto 0;
  width:clamp(280px, 30vw, 480px); height:clamp(280px, 30vw, 480px);
  pointer-events:none;
}
.hologram-glow{
  position:absolute; inset:-25%;
  background: radial-gradient(circle, rgba(205,162,58,0.32) 0%, rgba(205,162,58,0.08) 45%, transparent 72%);
  filter: blur(24px);
  animation: hologramPulse 5s ease-in-out infinite;
}
.hologram-logo{
  position:relative; width:100%; display:block;
  mix-blend-mode: screen; opacity:0.92;
  filter: drop-shadow(0 0 26px rgba(240,215,140,0.45));
  animation: hologramFloat 6s ease-in-out infinite;
  -webkit-mask-image: radial-gradient(circle, #000 48%, transparent 74%);
  mask-image: radial-gradient(circle, #000 48%, transparent 74%);
}
@keyframes hologramFloat{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-16px); } }
@keyframes hologramPulse{ 0%,100%{ opacity:0.65; } 50%{ opacity:1; } }

@media (max-width: 900px){
  .hero-hologram{ display:none; }
}

/* About */
.about{ padding:110px 0; }
.about-grid{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.about-media img{ border-radius: var(--radius); width:100%; height:420px; object-fit:cover; }
.about-text h2{ margin-bottom:18px; }
.about-text p{ color: var(--text-muted); margin-bottom:14px; }
.about-text p:last-of-type{ margin-bottom:0; }
.about-signature{
  text-align:right; font-family: var(--ff-heading); font-style:italic; font-weight:600;
  font-size:1.6rem; color: var(--gold-light) !important; margin-top:22px !important;
  padding-top:14px; border-top:1px solid rgba(205,162,58,0.3);
}

/* Services */
.services{ padding:110px 0; background: var(--bg-alt); }
.services-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:50px; text-align:center; }
.service-card svg{ width:32px; height:32px; color: var(--gold); margin-bottom:20px; }
.service-card h3{ margin-bottom:10px; font-size:1.15rem; }
.service-card p{ color: var(--text-muted); font-size:0.94rem; }

/* Projects */
.projects{ padding:110px 0; }
.project-tabs{ display:flex; justify-content:center; gap:14px; margin-bottom:44px; }
.tab-btn{
  background:none; border:1px solid var(--border-soft); color: var(--text-muted);
  padding:10px 26px; border-radius:30px; font-size:0.85rem; font-family:inherit; letter-spacing:0.3px;
  cursor:pointer; transition: all .3s ease;
}
.tab-btn:hover{ border-color: var(--gold); color: var(--text); }
.tab-btn.active{ background: var(--gold-gradient); color:#100c02; border-color:transparent; font-weight:600; }
.projects-empty{ grid-column:1/-1; text-align:center; color: var(--text-muted); padding:40px 0; }
.projects-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:26px; }
.projects-grid[hidden]{ display:none; }
.project-card{ position:relative; border-radius: var(--radius); overflow:hidden; }
.project-card img{ height:380px; width:100%; object-fit:cover; transition: transform .5s ease; }
.project-card:hover img{ transform: scale(1.06); }
.project-info{ position:absolute; left:0; right:0; bottom:0; padding:20px; background: linear-gradient(0deg, rgba(0,0,0,0.85), transparent); }
.project-info h3{ color:#fff; font-size:1.05rem; }
.project-info p{ color: var(--text-muted); font-size:0.82rem; }
.project-partner-badge{ position:absolute; right:14px; bottom:10px; font-size:0.62rem; color: var(--text-muted); opacity:0.7; text-align:right; max-width:48%; line-height:1.3; }

.project-card-plain{ cursor:default; }
.project-placeholder{
  height:380px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; position:relative;
  background: linear-gradient(150deg, var(--bg-alt) 0%, #17141a 100%);
  border:1px solid var(--border-soft);
}
.project-placeholder svg{ width:52px; height:52px; color: var(--gold); opacity:0.55; }
.project-placeholder-caption{
  font-size:0.82rem; letter-spacing:0.5px; color: var(--text-muted);
}
.project-placeholder-badge{
  position:absolute; top:18px; left:18px;
  font-size:0.72rem; letter-spacing:1px; font-weight:600; color:#100c02;
  background: var(--gold-gradient); padding:5px 14px; border-radius:20px;
}
.project-info-plain{
  position:relative; background:none; padding:16px 2px 0;
}
.project-info-plain h3{ color: var(--text); }

/* Contact */
.contact{ padding:110px 0; background: var(--bg-alt); }
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:60px; }
.contact-text h2{ margin-bottom:14px; }
.contact-text p{ color: var(--text-muted); }
.contact-details{ margin-top:28px; }
.contact-details p{ margin-bottom:10px; color: var(--text); font-size:0.94rem; }
.contact-details strong{ color: var(--gold-light); font-weight:500; }
.contact-details a:hover{ color: var(--gold-light); }

.form-group{ margin-bottom:16px; }
.form-group input, .form-group textarea{
  width:100%; background: var(--bg); border:1px solid var(--border-soft); border-radius:3px;
  padding:13px 16px; color: var(--text); font-family:inherit; font-size:0.95rem;
}
.form-group input:focus, .form-group textarea:focus{ outline:none; border-color: var(--gold); }
.form-group textarea{ resize:vertical; }
.form-note{ margin-top:14px; font-size:0.85rem; color: var(--gold-light); min-height:1em; }
.form-privacy{ margin-top:14px; font-size:0.76rem; line-height:1.6; color: var(--text-muted); opacity:0.75; }
.form-privacy a{ color: var(--text-muted); text-decoration:underline; }
.form-privacy a:hover{ color: var(--gold-light); }

/* Footer */
.site-footer{ padding:40px 0; border-top:1px solid var(--border-soft); }
.footer-inner{ display:flex; align-items:center; justify-content:space-between; gap:20px; }
.footer-logo{ width:40px; }
.footer-inner p{ font-size:0.82rem; color: var(--text-muted); }
.footer-right{ display:flex; align-items:center; gap:24px; }
.footer-social{
  display:flex; align-items:center; gap:8px;
  color: var(--text-muted); font-size:0.88rem; transition: color .25s ease;
}
.footer-social svg{ width:20px; height:20px; }
.footer-social:hover{ color: var(--gold-light); }

.reveal{ opacity:0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in-view{ opacity:1; transform:none; }

@media (max-width: 900px){
  .about-grid, .contact-grid{ grid-template-columns:1fr; }
  .services-grid, .projects-grid{ grid-template-columns:1fr; gap:36px; }

  .main-nav{ display:none; }
  .nav-toggle{ display:flex; }
  .main-nav.open{
    display:flex; flex-direction:column; align-items:flex-start; gap:26px;
    position:fixed; top:0; right:0; height:100vh; width:min(300px,80vw);
    background: var(--bg-alt); padding:100px 32px 32px; z-index:999;
  }
  .main-nav.open ul{ flex-direction:column; gap:22px; }

  .footer-inner{ flex-direction:column; text-align:center; }
}

/* ============================================
   Project Lightbox
   ============================================ */
.project-card{ transition: transform .3s ease; }
.project-card:hover{ transform: translateY(-4px); }

.lightbox{
  position:fixed; inset:0; z-index:2000;
  display:flex; align-items:center; justify-content:center; padding:24px;
  opacity:0; visibility:hidden; transition: opacity .3s ease, visibility .3s ease;
}
.lightbox.open{ opacity:1; visibility:visible; }
.lightbox-backdrop{ position:absolute; inset:0; background: rgba(5,4,6,0.92); backdrop-filter: blur(6px); }

.lightbox-panel{
  position:relative; z-index:1; width:min(920px, 100%); max-height:92vh;
  background: var(--bg-alt); border:1px solid var(--border-soft); border-radius:10px;
  overflow:hidden; display:flex; flex-direction:column;
}
.lightbox-close{
  position:absolute; top:14px; right:14px; z-index:3;
  width:42px; height:42px; border-radius:50%;
  background: rgba(0,0,0,0.55); border:1px solid var(--border-soft); color:var(--text);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.lightbox-close svg{ width:20px; height:20px; }

.lightbox-media{
  position:relative; background:#000;
  display:flex; align-items:center; justify-content:center;
  min-height:240px; max-height:60vh; flex-shrink:0;
}
.lightbox-media img, .lightbox-video{
  max-width:100%; max-height:60vh; width:auto; height:auto; object-fit:contain; display:block;
}
.lightbox-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:46px; height:46px; border-radius:50%;
  background: rgba(0,0,0,0.5); border:1px solid var(--border-soft); color:var(--text);
  display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:2;
}
.lightbox-nav svg{ width:22px; height:22px; }
.lightbox-prev{ left:14px; }
.lightbox-next{ right:14px; }
.lightbox-counter{
  position:absolute; bottom:12px; right:16px; z-index:2;
  font-size:0.76rem; color:var(--text-muted); background: rgba(0,0,0,0.5);
  padding:4px 12px; border-radius:20px;
}

.lightbox-info{ padding:26px 30px 30px; overflow-y:auto; }
.lightbox-info .eyebrow{ margin-bottom:8px; }
.lightbox-info h3{ font-size:1.35rem; margin-bottom:16px; }
.lightbox-specs{ display:flex; flex-direction:column; gap:9px; }
.lightbox-specs li{ font-size:0.92rem; color:var(--text-muted); padding-left:18px; position:relative; }
.lightbox-partner-note{ font-size:0.66rem; color:var(--text-muted); opacity:0.65; margin-top:14px; }
.lightbox-specs li::before{
  content:''; position:absolute; left:0; top:8px; width:6px; height:6px; border-radius:50%;
  background: var(--gold);
}

@media (max-width: 640px){
  .lightbox{ padding:0; }
  .lightbox-panel{ width:100vw; height:100vh; max-height:100vh; border-radius:0; }
  .lightbox-media{ max-height:42vh; }
  .lightbox-media img, .lightbox-video{ max-height:42vh; }
  .lightbox-nav{ width:40px; height:40px; }
  .lightbox-close{ width:40px; height:40px; }
  .lightbox-info{ padding:20px; flex:1; }
}