:root{
  --bg:#07070a;
  --panel:#0d0d13;
  --panel2:#11111a;
  --gold:#d4af37;
  --gold2:#f4d879;
  --text:#f4f4f7;
  --muted:#b9b9c6;
  --line:rgba(212,175,55,.18);
  --shadow: 0 18px 45px rgba(0,0,0,.55);
  --radius: 20px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
  background: radial-gradient(900px 550px at 25% -10%, rgba(212,175,55,.22), transparent 60%),
              radial-gradient(700px 450px at 95% 0%, rgba(244,216,121,.14), transparent 55%),
              var(--bg);
  color:var(--text);
  line-height:1.55;
  overflow-x:hidden;
}

a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
.container{width:min(1160px, 92%); margin-inline:auto}

/* Top bar */
.topbar{
  position:fixed; inset:0 0 auto 0;
  z-index:50;
  backdrop-filter: blur(10px);
  background: rgba(7,7,10,.55);
  border-bottom:1px solid rgba(212,175,55,.15);
}
.topbar__inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 0;
}
.brand{
  display:flex; gap:12px; align-items:center;
}
.brand__logo{
  width:44px; height:44px; border-radius:14px;
  overflow:hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
  border:1px solid rgba(212,175,55,.25);
  background: linear-gradient(135deg, rgba(212,175,55,.22), rgba(0,0,0,.35));
}
.brand__name{
  font-weight:750;
  letter-spacing:.4px;
}
.brand__tag{
  font-size:12px; color:var(--muted);
  margin-top:2px;
}

.nav{
  display:flex; align-items:center; gap:18px;
}
.nav a{
  font-size:14px;
  color:rgba(244,244,247,.9);
  padding:8px 10px;
  border-radius:12px;
  transition: .2s ease;
}
.nav a:hover{
  background: rgba(212,175,55,.10);
  color: var(--gold2);
}

.lang{
  display:flex; align-items:center; gap:10px;
}
.lang__btn{
  display:flex; align-items:center; gap:8px;
  padding:9px 12px;
  border-radius:14px;
  border:1px solid rgba(212,175,55,.20);
  background: rgba(13,13,19,.65);
  box-shadow: 0 10px 25px rgba(0,0,0,.25);
  cursor:pointer;
  color:var(--text);
  transition:.2s ease;
}
.lang__btn:hover{transform: translateY(-1px); border-color: rgba(212,175,55,.35)}
.lang__flag{font-size:18px}
.lang__code{font-size:12px; letter-spacing:.5px; color:var(--gold2); font-weight:700}
.lang__menu{
  position:absolute;
  top:68px; right: calc((100vw - min(1160px, 92%))/2);
  width: 230px;
  background: rgba(13,13,19,.92);
  border:1px solid rgba(212,175,55,.25);
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: 10px;
  display:none;
}
.lang__menu.open{display:block; animation: pop .16s ease-out}
.lang__item{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px;
  border-radius: 14px;
  cursor:pointer;
  transition:.15s ease;
}
.lang__item:hover{background: rgba(212,175,55,.12)}
.lang__item span{display:flex; align-items:center; gap:10px}
.lang__item b{font-size:12px; color:var(--muted); font-weight:650}

@keyframes pop{from{transform:translateY(-8px); opacity:0} to{transform:translateY(0); opacity:1}}

.hamburger{
  display:none;
  width:44px; height:44px;
  border-radius:14px;
  border:1px solid rgba(212,175,55,.22);
  background: rgba(13,13,19,.65);
  cursor:pointer;
}
.hamburger span{
  display:block;
  width:18px; height:2px;
  background: var(--gold2);
  margin: 5px auto;
  border-radius: 999px;
}
.mobileMenu{
  position:fixed;
  top:68px; left:0; right:0;
  background: rgba(7,7,10,.92);
  border-bottom:1px solid rgba(212,175,55,.20);
  backdrop-filter: blur(10px);
  transform: translateY(-120%);
  transition:.22s ease;
  z-index:45;
}
.mobileMenu.open{transform: translateY(0)}
.mobileMenu a{
  display:block;
  padding:14px 16px;
  border-top:1px solid rgba(212,175,55,.12);
  color: rgba(244,244,247,.92);
}
.mobileMenu a:hover{background: rgba(212,175,55,.10); color: var(--gold2)}

/* Hero */
.hero{
  position:relative;
  padding-top: 98px;
}
.hero__wrap{
  position:relative;
  border-radius: 28px;
  overflow:hidden;
  border:1px solid rgba(212,175,55,.18);
  box-shadow: var(--shadow);
  background: rgba(13,13,19,.75);
}
.hero__video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  filter: contrast(1.03) saturate(1.05);
  transform: scale(1.02);
}
.hero__overlay{
  position:absolute; inset:0;
  background:
    radial-gradient(700px 450px at 20% 15%, rgba(212,175,55,.22), transparent 55%),
    linear-gradient(90deg, rgba(0,0,0,.78), rgba(0,0,0,.40) 50%, rgba(0,0,0,.78));
}
.hero__content{
  position:relative;
  padding: 70px 30px 34px;
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 22px;
}
.kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 8px 12px;
  border-radius: 999px;
  border:1px solid rgba(212,175,55,.30);
  background: rgba(0,0,0,.35);
  color: rgba(244,216,121,.95);
  font-weight: 700;
  font-size: 13px;
  letter-spacing:.2px;
}
.h1{
  font-size: 42px;
  line-height:1.1;
  margin: 12px 0 12px;
  letter-spacing: .2px;
}
.sub{
  color: rgba(244,244,247,.85);
  font-size: 15px;
  max-width: 56ch;
}
.ctas{
  display:flex; gap:12px; flex-wrap:wrap;
  margin-top: 18px;
}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding: 12px 16px;
  border-radius: 16px;
  border: 1px solid rgba(212,175,55,.28);
  cursor:pointer;
  font-weight: 750;
  letter-spacing:.2px;
  transition:.18s ease;
  user-select:none;
}
.btn--primary{
  background: #25D366;
  color: #ffffff;
  box-shadow: 0 18px 35px rgba(37, 211, 102, .25);
}
.btn--primary:hover{transform: translateY(-1px); filter: brightness(1.02)}
.btn--ghost{
  background: rgba(212,175,55,.95);
  color: #141013;
}
.btn--ghost:hover{transform: translateY(-1px); background: rgba(212,175,55,.12); color: var(--gold2)}

.stats{
  display:grid;
  gap: 10px;
  align-content:start;
}
.stat{
  border-radius: 18px;
  border: 1px solid rgba(212,175,55,.20);
  background: rgba(13,13,19,.72);
  padding: 14px 14px;
  position:relative;
  overflow:hidden;
}
.stat:before{
  content:"";
  position:absolute; inset:-2px;
  background: radial-gradient(240px 80px at 15% 0%, rgba(90,175,255,.28), transparent 55%),
              radial-gradient(240px 80px at 85% 30%, rgba(255,105,180,.22), transparent 55%),
              radial-gradient(260px 90px at 35% 90%, rgba(57,255,20,.14), transparent 60%);
  opacity:.9;
  filter: blur(14px);
}
.stat__inner{position:relative; display:flex; justify-content:space-between; align-items:baseline; gap:10px}
.stat__num{font-size:28px; font-weight:850; letter-spacing:.3px; color: var(--gold2)}
.stat__label{font-size:12px; color: rgba(244,244,247,.78); font-weight:650}

/* Sections */
section{padding: 64px 0}
.sectionHead{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap: 14px;
  margin-bottom: 18px;
}
.sectionHead h2{
  margin:0;
  font-size: 28px;
  letter-spacing:.2px;
}
.sectionHead p{margin:0; color: var(--muted); max-width: 64ch}

.grid3{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.card{
  border-radius: var(--radius);
  border: 1px solid rgba(212,175,55,.18);
  background: rgba(13,13,19,.68);
  box-shadow: 0 16px 40px rgba(0,0,0,.35);
  padding: 18px;
  position:relative;
  overflow:hidden;
}
.card.colorful:before{
  content:"";
  position:absolute; inset:-2px;
  background:
    radial-gradient(280px 120px at 10% 10%, rgba(90,175,255,.35), transparent 55%),
    radial-gradient(240px 120px at 80% 25%, rgba(255,105,180,.25), transparent 60%),
    radial-gradient(260px 120px at 50% 100%, rgba(57,255,20,.16), transparent 65%),
    radial-gradient(260px 120px at 110% 110%, rgba(255,140,0,.15), transparent 65%);
  filter: blur(14px);
  opacity: .95;
}
.card > *{position:relative}
.badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px;
  border-radius: 999px;
  font-size: 12px;
  border:1px solid rgba(212,175,55,.28);
  background: rgba(0,0,0,.28);
  color: rgba(244,216,121,.95);
  font-weight:700;
}
.card h3{margin: 10px 0 6px; font-size:18px}
.card p{margin:0; color: rgba(244,244,247,.82); font-size: 14px}

.split{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: stretch;
}
.panel{
  border-radius: 26px;
  border:1px solid rgba(212,175,55,.18);
  background: rgba(13,13,19,.68);
  box-shadow: var(--shadow);
  padding: 22px;
  position:relative;
  overflow:hidden;
}
.panel.colorful:before{
  content:"";
  position:absolute; inset:-2px;
  background:
    radial-gradient(320px 140px at 15% 10%, rgba(90,175,255,.22), transparent 55%),
    radial-gradient(260px 140px at 85% 25%, rgba(255,105,180,.18), transparent 60%),
    radial-gradient(280px 160px at 40% 110%, rgba(57,255,20,.12), transparent 65%);
  filter: blur(18px);
  opacity:.95;
}
.panel > *{position:relative}
.panel h3{margin:0 0 10px; font-size: 20px}
.panel p{margin:0 0 10px; color: rgba(244,244,247,.85)}
.small{font-size: 13px; color: var(--muted)}

/* Fleet */
.fleetCards{
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap: 14px;
}
.fleetCard{
  border-radius: 24px;
  border:1px solid rgba(212,175,55,.18);
  background: rgba(13,13,19,.68);
  padding: 16px;
  overflow:hidden;
  position:relative;
}
.fleetCard:before{
  content:"";
  position:absolute; inset:-2px;
  background:
    radial-gradient(320px 140px at 20% 0%, rgba(255,140,0,.16), transparent 60%),
    radial-gradient(320px 140px at 90% 30%, rgba(90,175,255,.20), transparent 60%),
    radial-gradient(320px 140px at 50% 110%, rgba(57,255,20,.10), transparent 60%);
  filter: blur(18px);
  opacity:.95;
}
.fleetCard > *{position:relative}
.fleetImg{
  height: 160px;
  border-radius: 18px;
  border:1px solid rgba(212,175,55,.18);
  background:
    linear-gradient(135deg, rgba(212,175,55,.12), rgba(0,0,0,.25)),
    repeating-linear-gradient(45deg, rgba(244,216,121,.06) 0 10px, rgba(0,0,0,0) 10px 20px);
  display:grid; place-items:center;
  color: rgba(244,244,247,.75);
  font-weight:800;
  letter-spacing:.2px;
}
.fleetMeta{margin-top: 12px}
.fleetMeta h4{margin:0 0 6px}
.fleetMeta ul{margin:0; padding-left: 18px; color: rgba(244,244,247,.82); font-size: 13px}
.note{
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 18px;
  border:1px dashed rgba(212,175,55,.22);
  color: rgba(244,244,247,.82);
  background: rgba(0,0,0,.18);
}

/* Gallery */
.gallery{
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}
.ph{
  border-radius: 18px;
  border:1px solid rgba(212,175,55,.18);
  background: rgba(13,13,19,.60);
  overflow:hidden;
  aspect-ratio: 4/3;
  position:relative;
}
.ph:before{
  content:"";
  position:absolute; inset:-2px;
  background:
    radial-gradient(240px 120px at 10% 10%, rgba(90,175,255,.20), transparent 60%),
    radial-gradient(240px 120px at 90% 30%, rgba(255,105,180,.14), transparent 65%),
    radial-gradient(240px 120px at 50% 110%, rgba(57,255,20,.10), transparent 65%);
  filter: blur(18px);
  opacity:.95;
}
.ph span{
  position:absolute; inset:auto 10px 10px 10px;
  font-size: 12px;
  color: rgba(244,244,247,.82);
  padding: 8px 10px;
  border-radius: 14px;
  border:1px solid rgba(212,175,55,.18);
  background: rgba(0,0,0,.35);
}

/* Reviews */
.reviews{
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
.review{
  border-radius: 22px;
  border:1px solid rgba(212,175,55,.18);
  background: rgba(13,13,19,.68);
  padding: 14px;
  position:relative;
  overflow:hidden;
}
.review:before{
  content:"";
  position:absolute; inset:-2px;
  background:
    radial-gradient(240px 120px at 15% 10%, rgba(90,175,255,.20), transparent 60%),
    radial-gradient(240px 120px at 85% 20%, rgba(255,140,0,.14), transparent 65%),
    radial-gradient(240px 120px at 50% 110%, rgba(57,255,20,.10), transparent 65%);
  filter: blur(18px);
  opacity:.95;
}
.review > *{position:relative}
.stars{color: var(--gold2); letter-spacing:2px; font-size: 14px; margin-bottom: 8px}
.review p{margin:0; color: rgba(244,244,247,.86); font-size: 13px}
.review .name{margin-top: 10px; color: rgba(244,244,247,.70); font-weight:750; font-size: 12px}

/* Form */
.panel.light{
  background: rgba(247, 247, 252, .92);
  color:#121217;
  border-color: rgba(212,175,55,.28);
}
.panel.light h2, .panel.light h3, .panel.light p, .panel.light .helper{
  color:#121217;
}
.panel.light .helper b{color:#121217}
.panel.light label{color: rgba(18,18,23,.85)}
.panel.light input, 
.panel.light textarea, 
.panel.light select{
  background: rgba(255,255,255,.92);
  color:#121217;
  border-color: rgba(18,18,23,.16);
}
.panel.light input::placeholder{color: rgba(18,18,23,.45)}


.form{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.field{
  display:flex; flex-direction:column; gap:6px;
}
label{font-size: 12px; color: rgba(244,244,247,.78); font-weight:700}
input, textarea, select{
  width:100%;
  padding: 12px 12px;
  border-radius: 16px;
  border:1px solid rgba(212,175,55,.18);
  background: rgba(0,0,0,.22);
  color: rgba(244,244,247,.92);
  outline:none;
}
textarea{min-height: 110px; resize: vertical}
.full{grid-column: 1 / -1}
.formActions{display:flex; gap:12px; align-items:center; justify-content:flex-start; margin-top: 6px}
.helper{color: rgba(244,244,247,.70); font-size: 12px}

/* FAQ */
.faq{
  display:grid;
  gap: 10px;
}
.qa{
  border-radius: 20px;
  border:1px solid rgba(212,175,55,.18);
  background: rgba(13,13,19,.66);
  overflow:hidden;
}
.qa button{
  width:100%;
  text-align:left;
  padding: 14px 16px;
  background: transparent;
  border:0;
  cursor:pointer;
  color: rgba(244,244,247,.92);
  font-weight:800;
  display:flex; justify-content:space-between; align-items:center;
}
.qa button span{color: var(--gold2)}
.qa .a{
  padding: 0 16px 14px;
  color: rgba(244,244,247,.82);
  display:none;
}
.qa.open .a{display:block}

/* Footer */
footer{
  padding: 28px 0 90px;
  border-top:1px solid rgba(212,175,55,.12);
  color: rgba(244,244,247,.70);
}
.footerGrid{
  display:flex; align-items:center; justify-content:space-between;
  gap: 14px; flex-wrap:wrap;
}
.pills{display:flex; gap:10px; flex-wrap:wrap}
.pill{
  padding:8px 12px;
  border-radius: 999px;
  border:1px solid rgba(212,175,55,.18);
  background: rgba(0,0,0,.20);
  color: rgba(244,244,247,.80);
  font-size: 12px;
  font-weight:700;
}

/* Floating icons */
.fab{
  position:fixed;
  right: 16px;
  bottom: 16px;
  display:flex;
  flex-direction:column;
  gap: 10px;
  z-index:60;
}
.fab a{
  width:52px; height:52px;
  border-radius: 18px;
  display:grid; place-items:center;
  border:1px solid rgba(212,175,55,.22);
  background: rgba(13,13,19,.82);
  box-shadow: 0 14px 28px rgba(0,0,0,.45);
  transition: .18s ease;
}
.fab a:hover{transform: translateY(-2px); border-color: rgba(212,175,55,.35)}
.fab svg{width:24px; height:24px; fill: var(--gold2)}

/* Logo intro animation */
.intro{
  position:fixed;
  inset:0;
  background: radial-gradient(900px 550px at 30% 10%, rgba(212,175,55,.20), transparent 60%),
              rgba(0,0,0,.92);
  z-index:200;
  display:grid;
  place-items:center;
  transition: opacity .6s ease, transform .6s ease;
}
.intro.hide{opacity:0; transform: scale(1.02); pointer-events:none}
.introCard{
  width:min(520px, 90vw);
  border-radius: 28px;
  border:1px solid rgba(212,175,55,.25);
  background: rgba(13,13,19,.65);
  box-shadow: var(--shadow);
  padding: 26px 22px;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.introCard:before{
  content:"";
  position:absolute; inset:-2px;
  background:
    radial-gradient(420px 220px at 15% 10%, rgba(90,175,255,.18), transparent 60%),
    radial-gradient(420px 220px at 85% 20%, rgba(255,105,180,.12), transparent 65%),
    radial-gradient(420px 240px at 50% 110%, rgba(57,255,20,.10), transparent 65%);
  filter: blur(18px);
  opacity:.95;
}
.introCard > *{position:relative}
.introLogo{
  width: 150px;
  margin: 0 auto 14px;
  animation: float 2.4s ease-in-out infinite;
}
@keyframes float{0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)}}
.introTitle{
  font-size: 26px;
  font-weight: 900;
  letter-spacing:.4px;
  margin: 0 0 6px;
  color: var(--gold2);
}
.introSub{margin:0; color: rgba(244,244,247,.80); font-size: 13px}
.loader{
  margin: 16px auto 0;
  width: 220px;
  height: 8px;
  border-radius: 999px;
  background: rgba(212,175,55,.15);
  overflow:hidden;
}
.loader span{
  display:block; height:100%;
  width: 38%;
  background: linear-gradient(90deg, rgba(212,175,55,.9), rgba(244,216,121,.95));
  border-radius: 999px;
  animation: load 1.1s ease-in-out infinite;
}
@keyframes load{0%{transform:translateX(-120%)} 100%{transform:translateX(320%)}}

/* Responsive */
@media (max-width: 980px){
  .hero__content{grid-template-columns: 1fr; padding: 62px 18px 22px}
  .h1{font-size: 34px}
  .stats{grid-template-columns: repeat(3,1fr)}
  .grid3{grid-template-columns: 1fr}
  .split{grid-template-columns: 1fr}
  .fleetCards{grid-template-columns: 1fr}
  .gallery{grid-template-columns: repeat(2, 1fr)}
  .reviews{grid-template-columns: 1fr}
  .nav{display:none}
  .hamburger{display:block}
  .lang__menu{right:16px}
}
@media (max-width: 520px){
  .hero h1{font-size: 2.1rem;}
  .hero p.sub{font-size: 1.0rem;}

  /* Mobile: hero stats (sayaç) — şık ve bozulmadan */
  .stats{grid-template-columns: 1fr; gap: 10px; margin-top: 14px;}
  .stat{
    padding: 14px 14px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    min-height: 64px;
  }
  .stat b{font-size: 22px; letter-spacing: .2px;}
  .stat span{font-size: 12px; opacity: .95;}

  /* Mobile: reservation form (old readable layout) */
  .form{grid-template-columns: 1fr; gap: 12px;}
  .form label{display:block; font-size:.9rem; opacity:.95;}
  .form input,.form select,.form textarea{font-size: 1rem; padding: 12px 14px;}
  .form .btn{width:100%;}
}

/* Gallery image centering fix */
.gallery .ph {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.gallery .ph img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* =============================
   Global Card Theme: GOLD + Black Text
   (User request: site'deki tüm kartlar gold, yazılar siyah)
   ============================= */
:root{
  --gold-1:#d4af37;
  --gold-2:#c89a1b;
  --gold-3:#b98a12;
  --card-gold: linear-gradient(180deg, var(--gold-1), var(--gold-2));
  --card-border: rgba(0,0,0,.16);
  --card-text: #111;
}

/* Main card containers */
.panel,
.stat,
.fleetCard,
.introCard,
.qa,
.review,
.gallery .ph{
  background: var(--card-gold) !important;
  color: var(--card-text) !important;
  border: 1px solid var(--card-border) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,.18);
}

/* Remove colorful overlays inside cards */
.panel::before,
.stat::before,
.fleetCard::before,
.introCard::before,
.qa::before,
.review::before,
.gallery .ph::before{ display:none !important; }

/* Ensure all text inside cards is black */
.panel *,
.stat *,
.fleetCard *,
.introCard *,
.qa *,
.review *,
.gallery .ph *{ color: var(--card-text) !important; }

/* Placeholder badge/label inside gallery cards */
.ph span{
  background: rgba(255,255,255,.55) !important;
  border: 1px solid rgba(0,0,0,.14) !important;
  color: var(--card-text) !important;
}

/* Buttons on gold cards stay readable */
.btn{ color: #111 !important; }
.btn.primary{ background: #111 !important; color: #fff !important; }
.btn.ghost{ border-color: rgba(0,0,0,.25) !important; }

/* Inputs: keep white for UX but text dark */
input, select, textarea{
  color: #111 !important;
  border-color: rgba(0,0,0,.18) !important;
}

/* Remove colorful overlays on cards (keep clean gold) */
.panel::before,
.stat::before,
.fleetCard::before,
.introCard::before,
.review::before{
  opacity: 0 !important;
}

/* Ensure text inside cards is black */
.panel h1,.panel h2,.panel h3,.panel h4,.panel p,.panel span,.panel small,
.stat h1,.stat h2,.stat h3,.stat h4,.stat p,.stat span,.stat small,
.fleetCard h1,.fleetCard h2,.fleetCard h3,.fleetCard h4,.fleetCard p,.fleetCard span,.fleetCard small,
.introCard h1,.introCard h2,.introCard h3,.introCard h4,.introCard p,.introCard span,.introCard small,
.qa h1,.qa h2,.qa h3,.qa h4,.qa p,.qa span,.qa small,
.review h1,.review h2,.review h3,.review h4,.review p,.review span,.review small,
.gallery .ph span{
  color: var(--card-text) !important;
}

/* Gallery label chip */
.ph span{
  background: rgba(255,255,255,.58) !important;
  border: 1px solid rgba(0,0,0,.12) !important;
  color: var(--card-text) !important;
}

/* Dark text for stat numbers */
.stat b{color: var(--card-text) !important;}

/* Form fields remain clean/white for readability */
.panel .form input,
.panel .form select,
.panel .form textarea{
  background: rgba(255,255,255,.92);
  color: #111;
  border: 1px solid rgba(0,0,0,.18);
}
.panel .form input::placeholder,
.panel .form textarea::placeholder{color: rgba(17,17,17,.55);}

/* Links inside cards */
.panel a,
.fleetCard a,
.review a,
.qa a{color: #111;}

/* Booking panel should be white */
#booking{
  background: #ffffff !important;
  color: #141013 !important;
  border: 1px solid rgba(0,0,0,.10) !important;
}
#booking .sectionHead p, #booking label, #booking .muted { color: rgba(20,16,19,.75) !important; }
#booking input, #booking select, #booking textarea{
  background: #ffffff !important;
  color: #141013 !important;
  border: 1px solid rgba(0,0,0,.14) !important;
}

/* Pills: different colors, readable text */
.pills .pill{ font-weight: 700; border: 0; }
.pills .pill:nth-child(1){ background:#25D366; color:#fff; }
.pills .pill:nth-child(2){ background:rgba(212,175,55,.95); color:#141013; }
.pills .pill:nth-child(3){ background:#1E90FF; color:#fff; }
.pills .pill:nth-child(4){ background: rgba(255,255,255,.88); color:#141013; }

/* Keep gallery tiles original background even if global card theme is gold */
.ph{
  background: rgba(13,13,19,.60) !important;
  border:1px solid rgba(212,175,55,.18) !important;
}

/* Service cards action buttons */
.fleetCard .serviceActions{
  display:flex;
  gap:10px;
  margin-top:12px;
}
.fleetCard .serviceActions .btn{
  flex:1;
  justify-content:center;
  padding:10px 12px;
}

a.card{ text-decoration:none; color: inherit; display:block; }
a.card:hover{ transform: translateY(-1px); }


/* Artists section */
.artistGrid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:14px;
}
.artistItem{
  position:relative;
  overflow:hidden;
  border-radius:16px;
  background:#0f0f0f;
  border:1px solid rgba(212,175,55,.35);
  box-shadow:0 10px 30px rgba(0,0,0,.25);
  aspect-ratio:1/1;
}
.artistItem img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.artistItem.placeholder{
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.06);
}
.artistItem.placeholder .placeholderText{
  font-weight:800;
  letter-spacing:.3px;
  opacity:.8;
}

@media (max-width:980px){
  .artistGrid{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:520px){
  .artistGrid{grid-template-columns:repeat(2,1fr);gap:12px;}
}

/* === LIGHTBOX === */
#lightboxOverlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.85);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:9999;
}
#lightboxOverlay img{
  max-width:92%;
  max-height:92%;
  border-radius:14px;
}
#lightboxOverlay.active{display:flex;}
.lb-img{cursor:zoom-in;}

/* bigger on desktop */
  object-fit:cover;
  display:block;
}
@media (max-width: 1200px){
  .artistsGrid{ grid-template-columns: repeat(4, 1fr); }
  .artistItem img{ height:230px; }
}
@media (max-width: 768px){
  .artistsGrid{ grid-template-columns: repeat(3, 1fr); } /* 3 columns on mobile/tablet */
  .artistItem img{ height:180px; } /* bigger tiles */
}
@media (max-width: 480px){
  .artistsGrid{ grid-template-columns: repeat(3, 1fr); } /* keep 3 columns */
  .artistItem img{ height:165px; } /* still bigger but fits */
}

/* === ARTISTS GRID FINAL (MOBILE 2-COLUMN BIG CARDS) === */
.artistsGrid{
  display:grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 18px;
}
.artistItem{
  position:relative;
  overflow:hidden;
  border-radius:18px;
}
.artistItem img{
  width:100%;
  height:260px;
  object-fit:cover;
  display:block;
}

/* Laptop */
@media (max-width: 1200px){
  .artistsGrid{ grid-template-columns: repeat(4, 1fr); }
  .artistItem img{ height:240px; }
}

/* Tablet & Mobile */
@media (max-width: 768px){
  .artistsGrid{ grid-template-columns: repeat(2, 1fr); }
  .artistItem img{ height:260px; }
}

/* Small Mobile */
@media (max-width: 480px){
  .artistsGrid{ grid-template-columns: repeat(2, 1fr); }
  .artistItem img{ height:240px; }
}