/* =========================================================
   CBC Rent A Car — PREMIUM (style.css) v301
   ✅ index.html (premium v1) ile %100 uyumlu
   ✅ iPhone + Android safe-area + scroll çakışmaları fix
   ✅ Modals: header/footer sticky, body scroll
   ✅ Buttons: premium micro-animations
========================================================= */

/* =========================
   1) THEME TOKENS
========================= */
:root{
  --bg:#f6f8fc;
  --bg2:#eef2ff;
  --ink:#0b1020;
  --ink2:#4b546a;
  --muted:#8a94a6;

  --brand:#e94560;
  --brand2:#0f3460;
  --blue:#0ea5e9;
  --good:#16a34a;
  --warn:#f59e0b;
  --bad:#ef4444;

  --card:#ffffff;
  --card2:#fbfcff;
  --border:#e7e9ef;

  --r:18px;
  --r2:14px;

  --shadow:0 14px 32px rgba(15,23,42,.10);
  --shadow2:0 24px 64px rgba(15,23,42,.18);
  --shadow3:0 40px 90px rgba(15,23,42,.16);

  --container:1200px;

  /* heights (keep in sync with layout) */
  --nav-h:64px;
  --ribbon-h:48px; /* visual only; sticky handled via calc */

  /* Motion */
  --ease:cubic-bezier(.2,.7,.2,1);
  --focus:0 0 0 4px rgba(14,165,233,.20);

  /* Spacing */
  --gap:14px;
  --pad:18px;

  /* iOS safe-area */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);

  /* Quickbar */
  --qb-h:74px;
  --page-bottom-pad: calc(var(--qb-h) + var(--safe-bottom) + 14px);

  /* Media */
  --slider-min:190px;
  --viewer-h:380px;
}

/* Auto dark */
@media (prefers-color-scheme: dark){
  :root{
    --bg:#070a12;
    --bg2:#0b1020;
    --ink:#eaf0ff;
    --ink2:rgba(234,240,255,.72);
    --muted:rgba(234,240,255,.60);

    --card:#0b1020;
    --card2:#0e1528;
    --border:rgba(255,255,255,.12);

    --shadow:0 18px 60px rgba(0,0,0,.45);
    --shadow2:0 28px 90px rgba(0,0,0,.55);
    --shadow3:0 46px 120px rgba(0,0,0,.50);
  }
}

/* =========================
   2) RESET / BASE
========================= */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html,body{height:100%}

body{
  font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:
    radial-gradient(900px 420px at 10% 0%, rgba(14,165,233,.08), transparent 55%),
    radial-gradient(900px 420px at 90% 10%, rgba(233,69,96,.09), transparent 55%),
    var(--bg);
  color:var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  padding-bottom:var(--page-bottom-pad); /* quickbar üstüne binme fix */
}

a{color:inherit;text-decoration:none}
img,video{max-width:100%;display:block}
button,input,select,textarea{font:inherit}
button{border:0;background:transparent;cursor:pointer}
:focus-visible{outline:none;box-shadow:var(--focus);border-radius:12px}

/* iOS zoom fix */
input,select,textarea{font-size:16px}
@media(min-width:900px){
  input,select,textarea{font-size:14px}
}

/* Scrollbars (subtle) */
*::-webkit-scrollbar{height:10px;width:10px}
*::-webkit-scrollbar-thumb{background:rgba(120,130,150,.25);border-radius:999px}
@media (prefers-color-scheme: dark){
  *::-webkit-scrollbar-thumb{background:rgba(255,255,255,.10)}
}

/* Skip link */
.skipLink{
  position:absolute;left:-9999px;top:10px;
  padding:10px 12px;border-radius:12px;
  background:var(--card);border:1px solid var(--border);
  box-shadow:var(--shadow);
  z-index:999999;
}
.skipLink:focus{left:12px}

/* Lock body when modal open (optional app.js) */
body.modal-open{
  overflow:hidden;
  touch-action:none;
}
/* =========================
   3) TYPO / HELPERS
========================= */
.muted{color:var(--muted)}
.block{margin-top:8px}
.grid{display:grid;gap:var(--gap)}
.flex{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--gap)}
.list{margin-left:18px}
.inline-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:8px 0 12px}
.inline-wrap{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:10px}
.inline-wrap.right{justify-content:flex-end}

.container{
  max-width:var(--container);
  margin:16px auto;
  background:linear-gradient(180deg,var(--card),var(--card2));
  padding:var(--pad);
  border-radius:calc(var(--r) + 2px);
  border:1px solid var(--border);
  box-shadow:var(--shadow);
}
.page-section{display:none}

.section-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
}
.section-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

.section-title{
  font-size:1.25rem;
  font-weight:900;
  display:flex;
  align-items:center;
  gap:10px;
  letter-spacing:.2px;
}
.section-title i{color:var(--brand)}

/* =========================
   4) FORMS
========================= */
label{font-weight:800;font-size:.9rem;display:block;margin:4px 0}
input,select,textarea{
  width:100%;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.88);
  color:var(--ink);
  transition:border-color .15s var(--ease), box-shadow .15s var(--ease), transform .15s var(--ease);
}
@media (prefers-color-scheme: dark){
  input,select,textarea{background:rgba(255,255,255,.06)}
}
input:focus,select:focus,textarea:focus{
  border-color:rgba(14,165,233,.55);
  box-shadow:var(--focus);
}
textarea{min-height:110px;resize:vertical}
select{cursor:pointer}

.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.form-grid .full{grid-column:1/-1}
.triple{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.phone-grid{
  display:grid;
  grid-template-columns:minmax(110px,160px) 1fr;
  gap:8px;
}

/* =========================
   5) BUTTONS / PILLS / BADGES (Premium)
========================= */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;

  background:linear-gradient(135deg,var(--brand),#ff6b86);
  color:#fff;
  border:none;
  border-radius:999px;
  padding:10px 14px;

  cursor:pointer;
  font-weight:900;
  letter-spacing:.15px;

  box-shadow:0 12px 26px rgba(233,69,96,.22);
  transition:
    transform .18s var(--ease),
    filter .18s var(--ease),
    box-shadow .18s var(--ease);
  position:relative;
  overflow:hidden;
  user-select:none;
}

.btn:hover{
  transform:translateY(-1px);
  filter:brightness(1.03);
  box-shadow:0 16px 34px rgba(233,69,96,.26);
}
.btn:active{transform:translateY(0);filter:brightness(.98)}

.btn[disabled], .btn:disabled{
  opacity:.55;
  cursor:not-allowed;
  transform:none !important;
  filter:none !important;
  box-shadow:none !important;
}

.btn::after{
  content:"";
  position:absolute;inset:-40% auto auto -60%;
  width:60%;height:200%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  transform:rotate(20deg);
  opacity:0;
}
.btn:hover::after{opacity:.20;animation:shine 1.1s var(--ease)}
@keyframes shine{to{left:120%}}

.btn-outline{
  background:transparent;
  border:2px solid rgba(233,69,96,.85);
  color:var(--brand);
  box-shadow:none;
}
.btn-outline:hover{background:rgba(233,69,96,.08);transform:translateY(-1px)}
.btn-outline:active{transform:translateY(0)}

.btn-ghost{
  background:rgba(15,23,42,.06);
  border:1px solid var(--border);
  color:var(--ink);
  box-shadow:none;
}
@media (prefers-color-scheme: dark){
  .btn-ghost{background:rgba(255,255,255,.06)}
}
.btn-ghost:hover{transform:translateY(-1px);filter:brightness(1.02)}

.btn-sm{padding:7px 10px;border-radius:12px;font-size:.92rem}

/* Index’te eklediğimiz nav offer */
.nav-offer{
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.18);
  color:#fff;
  box-shadow:none;
}
.nav-offer:hover{background:rgba(255,255,255,.16);transform:translateY(-1px)}
.nav-offer:active{transform:translateY(0)}

.pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 10px;
  border-radius:999px;
  font-size:.82rem;
  border:1px solid var(--border);
  background:rgba(255,255,255,.70);
  color:var(--ink);
  backdrop-filter: blur(10px);
}
@media (prefers-color-scheme: dark){
  .pill{background:rgba(255,255,255,.08);color:var(--ink)}
}

.badge{
  display:inline-grid;
  place-items:center;
  min-width:18px;height:18px;
  border-radius:999px;
  background:var(--bad);
  color:#fff;
  font-size:.72rem;
  padding:0 6px;
  font-weight:900;
}

.stars{color:#fbbf24}

.info{
  background:rgba(14,165,233,.08);
  border:1px solid rgba(14,165,233,.22);
  color:var(--ink);
  border-radius:14px;
  padding:10px 12px;
}

/* Icon buttons */
.icon-btn{
  width:40px;height:40px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.10);
  color:#fff;
  display:grid;place-items:center;
  transition:transform .16s var(--ease), filter .16s var(--ease), background .16s var(--ease);
}
.icon-btn:hover{transform:translateY(-1px);filter:brightness(1.06);background:rgba(255,255,255,.14)}
.icon-btn:active{transform:translateY(0)}

/* =========================
   6) SMART STRIP (Top trust bar)
========================= */
.smart-strip{
  position:sticky;
  top:0;
  z-index:1400;
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:space-between;

  padding:
    calc(8px + var(--safe-top))
    calc(12px + var(--safe-right))
    8px
    calc(12px + var(--safe-left));

  background:linear-gradient(180deg, rgba(15,52,96,.98), rgba(15,52,96,.88));
  border-bottom:1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(14px);
  color:#fff;
}
.smart-strip-left{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
}
.ss-pill{
  display:inline-flex;
  gap:8px;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.14);
  font-weight:800;
  font-size:.82rem;
  white-space:nowrap;
}
.smart-strip-right{display:flex;gap:6px;align-items:center}
.lang-btn{
  width:38px;height:34px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.10);
  display:grid;place-items:center;
  transition:transform .16s var(--ease), background .16s var(--ease), filter .16s var(--ease);
}
.lang-btn:hover{transform:translateY(-1px);background:rgba(255,255,255,.14);filter:brightness(1.05)}
.lang-btn:active{transform:translateY(0)}

/* =========================
   7) NAV
========================= */
.nav{
  position:sticky;
  top:calc(0px + var(--safe-top)); /* smart-strip already occupies safe-top */
  z-index:1300;

  background:linear-gradient(180deg, rgba(15,52,96,.96), rgba(15,52,96,.86));
  color:#fff;
  border-bottom:1px solid rgba(255,255,255,.10);
  backdrop-filter:blur(12px);
}
.nav-container{
  max-width:var(--container);
  margin:0 auto;
  min-height:var(--nav-h);
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 calc(12px + var(--safe-right)) 0 calc(12px + var(--safe-left));
}
.nav-scroll{flex:1;overflow:auto;-webkit-overflow-scrolling:touch}
.nav-scroll ul{display:flex;gap:6px;list-style:none;white-space:nowrap}
.nav-scroll a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:#fff;
  padding:10px 14px;
  border-radius:14px;
  font-weight:900;
  opacity:.95;
  transition:background .16s var(--ease), transform .16s var(--ease), opacity .16s var(--ease);
}
.nav-scroll a:hover{background:rgba(255,255,255,.12);transform:translateY(-1px)}
.nav-scroll a.active{background:rgba(255,255,255,.18)}
.nav-right{display:flex;gap:8px;align-items:center}

/* nav scroll thumb */
.nav-scroll::-webkit-scrollbar{height:6px}
.nav-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:999px}

/* =========================
   8) ASK RIBBON
========================= */
.ask-ribbon{
  position:sticky;
  top:calc(var(--nav-h) + var(--safe-top));
  z-index:1250;

  background:rgba(14,165,233,.10);
  border:1px solid rgba(14,165,233,.22);
  color:var(--ink);

  padding:10px calc(12px + var(--safe-right)) 10px calc(12px + var(--safe-left));
  display:flex;
  gap:10px;
  align-items:center;
  backdrop-filter:blur(10px);
}
.ask-ribbon b{font-weight:900}
.ask-ribbon button{margin-left:auto}

/* =========================
   9) HERO
========================= */
.hero-video-wrap{
  position:relative;
  overflow:hidden;
  color:#fff;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.hero-video-wrap video{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  filter:brightness(.34) saturate(1.05);
}
.hero-overlay,
.hero-video-wrap::after{
  content:"";
  position:absolute;inset:0;
  background:
    radial-gradient(700px 260px at 20% 10%, rgba(233,69,96,.30), transparent 60%),
    radial-gradient(700px 260px at 85% 0%, rgba(14,165,233,.26), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.55));
  pointer-events:none;
}

/* premium grid */
.hero-grid{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:14px;
  align-items:stretch;
  text-align:left;
}

.hero-video-inner{
  position:relative;
  padding:70px 14px 54px;
  max-width:var(--container);
  margin:0 auto;
}
.hero-video-inner h1{
  font-size:clamp(1.65rem,3vw,2.75rem);
  letter-spacing:.2px;
  text-shadow:0 6px 28px rgba(0,0,0,.35);
}
.hero-video-inner p{
  max-width:900px;
  margin:10px 0 0;
  opacity:.96;
  text-shadow:0 4px 18px rgba(0,0,0,.32);
}

/* Searchbar glass */
.searchbar{
  display:grid;
  gap:8px;
  grid-template-columns:repeat(4,1fr) auto;
  margin:14px 0 0;
  padding:14px;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.24);
  backdrop-filter:blur(10px);
  border-radius:16px;
}
.searchbar input,.searchbar select{
  border:none !important;
  background:rgba(255,255,255,.88);
  border-radius:12px;
}
@media (prefers-color-scheme: dark){
  .searchbar input,.searchbar select{background:rgba(255,255,255,.10);color:#fff}
}

.hero-cta{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:12px;
}

/* Hero lead card */
.hero-lead{
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.18);
  border-radius:18px;
  padding:14px;
  backdrop-filter: blur(14px);
  box-shadow:0 18px 54px rgba(0,0,0,.22);
  align-self:center;
}
.hl-head{display:grid;gap:6px}
.hl-form{display:grid;gap:10px;margin-top:10px}
.hl-field span{display:block;font-weight:900;font-size:.86rem;opacity:.95;margin-bottom:4px}
.hl-field input,.hl-field select{
  background:rgba(255,255,255,.92) !important;
  border:0 !important;
}
@media (prefers-color-scheme: dark){
  .hl-field input,.hl-field select{background:rgba(255,255,255,.10) !important;color:#fff}
}
.hl-btn{width:100%}
.hl-proof{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.hl-foot{font-size:.84rem}

/* Hero badges wrap */
.home-hero-badges{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-start;margin-top:14px}
/* =========================
   10) QUICKBAR
========================= */
.quickbar{
  position:fixed;
  left:50%;
  transform:translateX(-50%);
  bottom:calc(10px + var(--safe-bottom));
  z-index:1050;

  display:flex;
  gap:8px;
  padding:8px;

  width:min(var(--container), calc(100vw - 20px));
  border-radius:18px;

  background:rgba(15,52,96,.92);
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(12px);
  box-shadow:0 16px 40px rgba(15,52,96,.28);
}
.qb-btn{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  color:#fff;
  font-weight:900;
  padding:10px 12px;
  border-radius:14px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.14);
  transition:transform .16s var(--ease), background .16s var(--ease), filter .16s var(--ease);
  min-height:48px;
  white-space:nowrap;
}
.qb-btn:hover{transform:translateY(-1px);background:rgba(255,255,255,.14);filter:brightness(1.05)}
.qb-btn:active{transform:translateY(0)}
@media(max-width:420px){
  .qb-btn{font-size:.92rem;padding:10px 8px}
  .qb-btn i{font-size:1rem}
}

/* =========================
   11) CARDS / HOME UI
========================= */
.card{
  background:linear-gradient(180deg,var(--card),var(--card2));
  border:1px solid var(--border);
  border-radius:18px;
  box-shadow:0 10px 24px rgba(15,23,42,.06);
  overflow:hidden;
  transition:transform .18s var(--ease), box-shadow .18s var(--ease);
}
.card:hover{transform:translateY(-2px);box-shadow:0 18px 40px rgba(15,23,42,.10)}
.card-pad{padding:14px}

/* KPIs */
.home-kpis{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin-top:14px}
.kpi-card{padding:14px}
.kpi-top{display:flex;gap:10px;align-items:center;justify-content:space-between}
.kpi-top b{font-size:.95rem}
.kpi-val{font-size:1.35rem;font-weight:900;letter-spacing:.3px;margin-top:6px}
.kpi-sub{margin-top:6px}
.chip-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.chip{
  display:inline-flex;gap:8px;align-items:center;
  padding:8px 10px;border:1px solid var(--border);
  border-radius:999px;background:rgba(255,255,255,.65)
}
@media (prefers-color-scheme: dark){ .chip{background:rgba(255,255,255,.06)} }

/* Layout helpers */
.section-split{display:grid;gap:14px;grid-template-columns:1.2fr .8fr}
@media(max-width:1100px){ .section-split{grid-template-columns:1fr} }
.home-grid-2{display:grid;gap:14px;grid-template-columns:1fr 1fr}
@media(max-width:980px){ .home-grid-2{grid-template-columns:1fr} }

.mini-card{
  padding:12px;border-radius:16px;border:1px solid var(--border);
  background:linear-gradient(180deg,var(--card),var(--card2));
  box-shadow:0 10px 22px rgba(15,23,42,.06)
}
.mini-card .title{font-weight:900}
.mini-card .sub{color:var(--ink2);margin-top:4px}
.mini-card .line{display:flex;justify-content:space-between;gap:10px;margin-top:10px}
.mini-card .tagline{font-size:.85rem;color:var(--muted);margin-top:6px}

/* Ready packages */
.pkg-ready-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.pkg-ready-card{padding:14px}
.pkg-ready-card .top{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.pkg-ready-card .name{font-weight:900;font-size:1.05rem}
.pkg-ready-card .meta{color:var(--ink2);margin-top:6px}
.pkg-ready-card .bullets{margin:10px 0 0 18px;color:var(--ink2)}
.pkg-ready-card .actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}

/* Reviews */
.review-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.review{padding:14px}
.review .who{display:flex;align-items:center;justify-content:space-between;gap:10px}
.review .txt{color:var(--ink2);margin-top:10px}
.review .badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}

/* =========================
   12) LEAD STRIP (page boosters)
========================= */
.lead-strip{
  margin:10px 0 12px;
  padding:12px;
  border-radius:16px;
  border:1px solid rgba(233,69,96,.22);
  background:
    radial-gradient(520px 220px at 10% 0%, rgba(233,69,96,.12), transparent 60%),
    radial-gradient(520px 220px at 90% 0%, rgba(14,165,233,.10), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.65));
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  box-shadow:0 14px 28px rgba(15,23,42,.08);
}
@media (prefers-color-scheme: dark){
  .lead-strip{
    background:
      radial-gradient(520px 220px at 10% 0%, rgba(233,69,96,.22), transparent 60%),
      radial-gradient(520px 220px at 90% 0%, rgba(14,165,233,.20), transparent 60%),
      linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
    border:1px solid rgba(255,255,255,.12);
  }
}
.ls-left b{font-weight:900}
@media(max-width:720px){
  .lead-strip{flex-direction:column;align-items:stretch}
  .lead-strip .btn{width:100%}
}

/* =========================
   13) HOTEL LEAD CARD
========================= */
.hotel-lead-card{
  margin:10px 0 12px;
  border-radius:18px;
  border:1px solid var(--border);
  background:linear-gradient(180deg,var(--card),var(--card2));
  box-shadow:0 14px 32px rgba(15,23,42,.08);
  overflow:hidden;
  display:grid;
  grid-template-columns:1.1fr .9fr;
}
.hlc-left{padding:14px}
.hlc-left h3{margin-top:8px}
.hlc-form{padding:14px;border-left:1px solid var(--border)}
@media(max-width:980px){
  .hotel-lead-card{grid-template-columns:1fr}
  .hlc-form{border-left:0;border-top:1px solid var(--border)}
}

/* =========================
   14) TABLES / CART
========================= */
.cart-banner{
  background:linear-gradient(180deg,var(--card),var(--card2));
  border:1px solid var(--border);
  color:var(--ink);
  border-radius:14px;
  padding:12px;
  display:flex;
  align-items:center;
  gap:10px;
}
.cart-banner i{color:var(--brand2)}
.cart-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
#cart-table{width:100%;border-collapse:collapse;margin-top:10px}
#cart-table th,#cart-table td{
  border:1px solid var(--border);
  padding:10px;
  text-align:center;
  font-size:.92rem;
  vertical-align:top;
}
#cart-table th{
  background:rgba(15,23,42,.04);
  font-weight:900;
}
.cart-total-line{margin-top:10px;font-weight:900}

/* Mobile responsive cart */
@media (max-width:760px){
  #cart-table, #cart-table thead, #cart-table tbody, #cart-table th, #cart-table td, #cart-table tr{display:block}
  #cart-table thead{display:none}
  #cart-table tr{
    border:1px solid var(--border);
    border-radius:16px;
    margin-bottom:10px;
    padding:10px;
    background:linear-gradient(180deg,var(--card),var(--card2));
    box-shadow:0 12px 26px rgba(15,23,42,.06);
  }
  #cart-table td{border:none;padding:6px 0;text-align:left}
  #cart-table td::before{
    content:attr(data-label);
    display:block;
    font-weight:900;
    color:var(--muted);
    margin-bottom:2px;
  }
}
/* =========================
   15) SLIDER / VIDEO EMBED
========================= */
.slider{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(400px 180px at 20% 0%, rgba(233,69,96,.18), transparent 60%),
    radial-gradient(400px 180px at 90% 10%, rgba(14,165,233,.18), transparent 60%),
    linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.02));
  aspect-ratio:16/9;
  min-height:var(--slider-min);
  border-radius:16px;
}
.slider img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  object-position:center;
  opacity:0;
  transition:opacity .24s var(--ease);
  will-change:opacity;
  transform:translateZ(0);
}
.slider img.active{opacity:1}
.slider .prev,.slider .next{
  position:absolute;top:50%;
  transform:translateY(-50%);
  background:rgba(0,0,0,.55);
  color:#fff;
  font-size:.86rem;
  padding:8px 10px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.14);
  cursor:pointer;
  z-index:2;
}
.slider .prev{left:10px}
.slider .next{right:10px}
.slider .prev:hover,.slider .next:hover{filter:brightness(1.08)}

.video-embed{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  border-radius:14px;
  overflow:hidden;
  border:1px solid var(--border);
  background:#000;
}
.video-embed iframe,
.video-embed video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  object-fit:cover;
}

/* =========================
   16) MODALS (single clean system)
========================= */
.modal{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.58);
  z-index:100000;
  align-items:center;
  justify-content:center;
  padding:
    calc(14px + var(--safe-top))
    calc(12px + var(--safe-right))
    calc(14px + var(--safe-bottom))
    calc(12px + var(--safe-left));
  overscroll-behavior:contain;
}

.modal-content{
  width:min(980px, 100%);
  max-height:calc(100dvh - 24px - var(--safe-top) - var(--safe-bottom));
  background:linear-gradient(180deg,var(--card),var(--card2));
  border:1px solid var(--border);
  border-radius:18px;
  box-shadow:var(--shadow2);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  animation:modalIn .18s var(--ease);
}
.modal-content.modal-compact{max-width:560px}
@keyframes modalIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.modal-head{
  position:sticky;
  top:0;
  z-index:5;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px 12px;
  background:linear-gradient(180deg,var(--card),rgba(255,255,255,0));
  border-bottom:1px solid var(--border);
  backdrop-filter: blur(10px);
}
@media (prefers-color-scheme: dark){
  .modal-head{ background:linear-gradient(180deg,var(--card),rgba(0,0,0,0)); }
}
.modal-title{
  font-weight:900;
  letter-spacing:.2px;
  display:flex;
  align-items:center;
  gap:10px;
}
.modal-x{
  width:42px;height:42px;
  border-radius:14px;
  border:1px solid var(--border);
  background:rgba(15,52,96,.10);
  color:var(--ink);
  font-size:18px;
  font-weight:900;
  display:grid;
  place-items:center;
  transition:transform .15s var(--ease), filter .15s var(--ease);
}
.modal-x:hover{transform:translateY(-1px);filter:brightness(1.03)}
@media (prefers-color-scheme: dark){
  .modal-x{ background:rgba(255,255,255,.06); color:var(--ink); }
}

.modal-body{
  padding:12px;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  flex:1;
}

.modal-actions{
  position:sticky;
  bottom:0;
  z-index:5;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
  padding:12px;
  border-top:1px solid var(--border);
  background:linear-gradient(180deg, rgba(255,255,255,0), var(--card));
  backdrop-filter: blur(10px);
}
@media (prefers-color-scheme: dark){
  .modal-actions{ background:linear-gradient(180deg, rgba(0,0,0,0), var(--card)); }
}
@media(max-width:520px){
  .modal-actions{justify-content:stretch}
  .modal-actions .btn{flex:1}
}

/* Hide legacy close span if present */
.modal .close{display:none !important}
/* Image modal always on top */
#imageModal{z-index:400000}

/* Map iframe */
#attractionMapIframeModal{
  width:100%;
  height:min(60vh,520px);
  border:0;
  border-radius:14px;
}

/* =========================
   17) PACKAGE / CALENDAR
========================= */
.pkg-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:14px}
@media(max-width:1100px){.pkg-grid{grid-template-columns:1fr}}

.pkg-card{
  background:linear-gradient(180deg,var(--card),var(--card2));
  border:1px solid var(--border);
  border-radius:18px;
  padding:12px;
  box-shadow:0 10px 24px rgba(15,23,42,.06);
}
.pkg-subnav{
  position:sticky;
  top:calc(var(--nav-h) + var(--safe-top) + 8px);
  z-index:1100;
  display:flex;
  gap:8px;
  align-items:center;
  overflow:auto;
  padding:10px;
  margin:4px 0 12px;
  background:rgba(255,255,255,.90);
  border:1px solid var(--border);
  border-radius:16px;
  backdrop-filter:blur(10px);
}
@media (prefers-color-scheme: dark){
  .pkg-subnav{background:rgba(255,255,255,.06)}
}
.pkg-subnav button{
  white-space:nowrap;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(15,23,42,.06);
  border:1px solid var(--border);
  font-weight:900;
  color:var(--ink);
}
@media (prefers-color-scheme: dark){
  .pkg-subnav button{background:rgba(255,255,255,.06)}
}
.pkg-subnav button.active{
  background:linear-gradient(90deg,var(--brand),var(--brand2));
  color:#fff;
  border-color:transparent;
}
.pkg-subnav .pkg-progress{
  margin-left:auto;
  flex:0 0 160px;
  height:8px;
  background:rgba(15,23,42,.08);
  border-radius:999px;
  overflow:hidden;
  border:1px solid var(--border);
}
#pkgProgress{
  display:block;height:100%;width:0%;
  background:linear-gradient(90deg,var(--brand),var(--brand2));
  transition:width .35s var(--ease);
}
.program-box{
  background:linear-gradient(180deg,#0f0f11,#0a0a0c);
  color:#e5e7eb;
  border-radius:14px;
  padding:12px;
  white-space:pre-wrap;
  font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:.92rem;
  max-height:380px;
  overflow:auto;
  border:1px solid rgba(255,255,255,.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}

/* Calendar */
.calendar{
  border:1px solid var(--border);
  border-radius:14px;
  padding:10px;
  background:rgba(255,255,255,.60);
}
@media (prefers-color-scheme: dark){
  .calendar{background:rgba(255,255,255,.04)}
}
.cal-grid{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.cal-day{
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px;
  cursor:pointer;
  background:rgba(15,23,42,.04);
  transition:transform .16s var(--ease), box-shadow .16s var(--ease), border-color .16s var(--ease);
  overflow:hidden;
}
@media (prefers-color-scheme: dark){
  .cal-day{background:rgba(255,255,255,.04)}
}
.cal-day:hover{transform:translateY(-1px);box-shadow:0 12px 26px rgba(15,23,42,.08)}
.cal-day.active{outline:2px solid var(--brand);border-color:rgba(233,69,96,.35)}

/* =========================
   18) TOAST
========================= */
#toast{
  position:fixed;
  top:calc(16px + var(--safe-top));
  right:calc(16px + var(--safe-right));
  display:grid;
  gap:8px;
  z-index:100001;
}
.toast-item{
  background:rgba(15,52,96,.96);
  color:#fff;
  padding:10px 12px;
  border-radius:14px;
  box-shadow:0 16px 36px rgba(0,0,0,.18);
  animation:toastIn .18s var(--ease);
  border:1px solid rgba(255,255,255,.12);
}
@keyframes toastIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* =========================
   19) SMART ASSISTANT + WHATSAPP FLOAT
========================= */
.smartAssistant{
  position:fixed;
  right:calc(14px + var(--safe-right));
  bottom:calc(var(--qb-h) + 18px + var(--safe-bottom));
  z-index:1200;
  display:grid;
  gap:10px;
}
.saFab{
  width:58px;height:58px;
  border-radius:18px;
  background:linear-gradient(135deg,var(--brand),#ff6b86);
  color:#fff;
  box-shadow:0 18px 44px rgba(233,69,96,.28);
  display:grid;
  place-items:center;
  font-size:20px;
  transition:transform .18s var(--ease), filter .18s var(--ease);
}
.saFab:hover{transform:translateY(-2px);filter:brightness(1.03)}
.saPanel{
  width:min(320px, calc(100vw - 28px));
  background:linear-gradient(180deg,var(--card),var(--card2));
  border:1px solid var(--border);
  border-radius:18px;
  box-shadow:var(--shadow2);
  overflow:hidden;
  display:none; /* app.js toggles */
}
.saHead{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px;
  border-bottom:1px solid var(--border);
}
.saClose{
  width:38px;height:38px;border-radius:14px;
  border:1px solid var(--border);
  background:rgba(15,23,42,.04);
  display:grid;place-items:center;
}
@media (prefers-color-scheme: dark){
  .saClose{background:rgba(255,255,255,.06)}
}
.saBody{padding:12px;display:grid;gap:10px}
.saActions{display:flex;gap:8px;flex-wrap:wrap}
.saMini{font-size:.85rem}

/* WhatsApp float */
.waFloat{
  position:fixed;
  left:calc(14px + var(--safe-left));
  bottom:calc(var(--qb-h) + 18px + var(--safe-bottom));
  z-index:1200;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  border-radius:999px;
  background:linear-gradient(135deg,#22c55e,#16a34a);
  color:#fff;
  font-weight:900;
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 18px 44px rgba(22,163,74,.25);
  transition:transform .18s var(--ease), filter .18s var(--ease);
}
.waFloat:hover{transform:translateY(-2px);filter:brightness(1.03)}
.waFloat i{font-size:20px}
@media(max-width:520px){
  .waFloat span{display:none}
}

/* =========================
   20) FOOTER
========================= */
.footer{
  background:linear-gradient(180deg, rgba(15,52,96,.98), rgba(15,52,96,.90));
  color:#cfd6e4;
  padding:18px 14px;
  text-align:center;
  display:grid;
  gap:10px;
}
.socials{display:flex;gap:12px;justify-content:center}
.socials a{
  display:grid;
  place-items:center;
  width:38px;height:38px;
  border-radius:50%;
  background:rgba(255,255,255,.12);
  color:#fff;
  border:1px solid rgba(255,255,255,.10);
  transition:transform .16s var(--ease), background .16s var(--ease);
}
.socials a:hover{transform:translateY(-1px);background:rgba(255,255,255,.16)}
.footer-mini{display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap}
.linklike{
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.14);
  color:#fff;
  padding:8px 12px;
  border-radius:999px;
  font-weight:900;
}

/* =========================
   21) RESPONSIVE
========================= */
@media (max-width:1100px){
  .searchbar{grid-template-columns:1fr 1fr;gap:10px}
  .details-grid{grid-template-columns:1fr}
  :root{--viewer-h:320px}
  .hero-grid{grid-template-columns:1fr}
  .hero-lead{margin-top:14px}
}
@media (max-width:980px){
  .nav-container{min-height:auto;padding:10px 10px}
  .hero-video-inner{padding:58px 12px 40px}
  .flex{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
  :root{--viewer-h:280px}
}
@media (max-width:760px){
  .container{margin:12px 10px;padding:14px;border-radius:16px}
  .modal-content{border-radius:16px}
  .phone-grid{grid-template-columns:1fr}
  .triple{grid-template-columns:1fr}
  .slider{min-height:160px}
}

/* =========================
   22) RTL SUPPORT
========================= */
html[dir="rtl"] body{direction:rtl}
html[dir="rtl"] .nav-scroll ul{flex-direction:row-reverse}
html[dir="rtl"] .searchbar{direction:rtl}
html[dir="rtl"] .pill{flex-direction:row-reverse}
html[dir="rtl"] .form-grid{direction:rtl}
html[dir="rtl"] .cal-day{text-align:right}
html[dir="rtl"] .slider .prev{right:10px;left:auto}
html[dir="rtl"] .slider .next{left:10px;right:auto}

/* =========================
   23) REDUCED MOTION
========================= */
@media (prefers-reduced-motion: reduce){
  *{animation:none !important;transition:none !important}
}
/* =========================
   PREMIUM GALLERY (Attraction/Detail Modals)
========================= */
.media-viewer{
  border:1px solid var(--border);
  border-radius:16px;
  overflow:hidden;
  background:rgba(0,0,0,.04);
}

@media (prefers-color-scheme: dark){
  .media-viewer{ background:rgba(255,255,255,.04); }
}

/* Ana görüntü alanı */
.media-main .viewer{
  position:relative;
  width:100%;
  height: min(52vh, 420px);
  background:#000;
  display:grid;
  place-items:center;
}

@media (max-width:760px){
  .media-main .viewer{ height: min(44vh, 320px); }
}

.media-main img,
.media-main video,
.media-main iframe{
  width:100%;
  height:100%;
  object-fit:cover;
  border:0;
}

/* Thumb şeridi */
.media-thumbs{
  display:flex;
  gap:10px;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  padding:10px;
  background:rgba(0,0,0,.03);
  border-top:1px solid var(--border);
}

@media (prefers-color-scheme: dark){
  .media-thumbs{ background:rgba(255,255,255,.03); }
}

.media-thumbs::-webkit-scrollbar{ height:8px; }
.media-thumbs::-webkit-scrollbar-thumb{
  background:rgba(120,130,150,.25);
  border-radius:999px;
}
@media (prefers-color-scheme: dark){
  .media-thumbs::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.10); }
}

/* Thumb boyutları (kritik fix) */
.media-thumbs img,
.media-thumbs .thumb-video{
  width:88px !important;
  height:64px !important;
  object-fit:cover;
  border-radius:12px;
  border:2px solid transparent;
  cursor:pointer;
  flex:0 0 auto;
  opacity:.92;
  transition:transform .15s var(--ease), opacity .15s var(--ease), border-color .15s var(--ease);
}

.media-thumbs img:hover,
.media-thumbs .thumb-video:hover{
  transform:translateY(-1px);
  opacity:1;
}

.media-thumbs .active{
  border-color:var(--brand);
  opacity:1;
}

/* Video thumb */
.media-thumbs .thumb-video{
  display:grid;
  place-items:center;
  background:linear-gradient(135deg, rgba(233,69,96,.25), rgba(14,165,233,.20));
  color:#fff;
  font-weight:900;
}

/* Viewer okları */
.viewer .mv-prev,
.viewer .mv-next{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:3;
  background:rgba(0,0,0,.55);
  color:#fff;
  border:1px solid rgba(255,255,255,.16);
  border-radius:14px;
  padding:10px 12px;
  cursor:pointer;
  transition:filter .15s var(--ease), transform .15s var(--ease);
}
.viewer .mv-prev{left:10px}
.viewer .mv-next{right:10px}
.viewer .mv-prev:hover,
.viewer .mv-next:hover{filter:brightness(1.08); transform:translateY(-50%) scale(1.02);}/* =========================
   SURVEY MODAL — Premium
========================= */
#surveyModal .info{
  background:rgba(233,69,96,.08);
  border:1px solid rgba(233,69,96,.20);
}
#surveyModal .modal-title i{ color: var(--brand); }
/* =========================================================
   CBC — PERFECT MEDIA FIT (GLOBAL)
   - Tüm img/video/iframe kutularına aynı davranış
   - Kayma / taşma / oran bozulma yok
========================================================= */

/* 1) Genel: kart/slayt içindeki görsel her zaman kutuyu doldursun */
img, video {
  max-width: 100%;
  height: auto;
  display: block;
}

/* 2) Slider ana alan: sabit oran + taşma yok */
.slider{
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 16px; /* senin tasarıma uyumlu */
  background: rgba(0,0,0,.12);
}

/* Slider içindeki img/video tam oturur */
.slider img,
.slider video{
  width: 100%;
  height: 100%;
  object-fit: cover;       /* KUTU DOLSUN, oran bozulmasın */
  object-position: center; /* Kayma olmasın */
  display: block;
}

/* Slider yüksekliği: responsive oran */
.vehicle-card .slider,
.hotel-card .slider,
.ecom-card .slider,
.attraction-card .slider,
#home-page .slider{
  aspect-ratio: 16 / 9;
  min-height: 180px; /* küçük ekranda boş kalmasın */
}

/* 3) Details modal içindeki ana viewer: sabit oran + tam oturuş */
.media-viewer{
  width: 100%;
  overflow: hidden;
  border-radius: 16px;
  background: rgba(0,0,0,.12);
}

/* viewer alanı (senin buildMediaViewer HTML’ine uyumlu) */
.media-viewer .media-main,
.media-viewer .viewer{
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 16px;
  background: rgba(0,0,0,.12);
}

/* viewer içindeki tüm medya */
.media-viewer img,
.media-viewer video,
.media-viewer iframe{
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* 4) Thumb şeridi (modal altındaki küçük görseller) */
.media-thumbs{
  display: flex;
  gap: 10px;
  padding: 10px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.media-thumbs img,
.thumb-video{
  flex: 0 0 auto;
  width: 92px;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
}

.media-thumbs img{
  height: auto;
  object-fit: cover;
  object-position: center;
}

/* aktif thumb */
.media-thumbs img.active,
.thumb-video.active{
  outline: 2px solid rgba(233,69,96,.55);
  outline-offset: 2px;
}

/* 5) Harita iframe (modal ve otel detay) */
#attractionMapIframeModal,
.video-embed iframe{
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
  border-radius: 16px;
  overflow: hidden;
}

/* 6) Image modal (zoom görseli) */
#imageModalImg{
  width: 100%;
  height: min(72vh, 720px);
  object-fit: contain; /* zoom ekranında kırpma istemiyoruz */
  background: rgba(0,0,0,.12);
  border-radius: 14px;
}

/* 7) Çok küçük ekranda oranı biraz dik yap (daha premium görünür) */
@media (max-width: 520px){
  .vehicle-card .slider,
  .hotel-card .slider,
  .ecom-card .slider,
  .attraction-card .slider,
  #home-page .slider,
  .media-viewer .media-main,
  .media-viewer .viewer{
    aspect-ratio: 4 / 3;
    min-height: 190px;
  }

  .media-thumbs img,
  .thumb-video{
    width: 78px;
    aspect-ratio: 4 / 3;
  }
}
/* =========================================================
   FIX: Gezilecek Detayı Modal (gri boş alan + kayma)
   Target: #attractionDetailsModal / #attractionDetailsBody
========================================================= */

/* Modal body düzeni: boşlukları temizle */
#attractionDetailsModal .modal-body{
  padding-top: 10px;
}

/* Detay grid: sol medya + sağ içerik düzgün otursun */
#attractionDetailsBody .details-grid{
  align-items: start;
  gap: 14px;
}

/* AttrMain host: boş yüksekliği sıfırla */
#attrMain{
  width: 100%;
}

/* Media viewer main alanı: tam oran, boşluk yok */
#attractionDetailsBody .media-viewer{
  background: transparent; /* gri arka plan istemiyorsan */
  border-radius: 16px;
  overflow: hidden;
}

/* buildMediaViewer içindeki ana kısım */
#attractionDetailsBody .media-viewer .media-main,
#attractionDetailsBody .media-viewer .viewer{
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  overflow: hidden;
  border-radius: 16px;
  background: rgba(0,0,0,.10); /* istersen tamamen transparent yap */
}

/* Ana görsel/iframe/video tam otursun */
#attractionDetailsBody .media-viewer img,
#attractionDetailsBody .media-viewer iframe,
#attractionDetailsBody .media-viewer video{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  border: 0;
}

/* Thumb şeridi: düzgün hizalanma */
#attractionDetailsBody .media-thumbs{
  margin-top: 10px;
  padding: 10px 4px;
  display: flex;
  gap: 10px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Thumb’lar aynı boy/oran */
#attractionDetailsBody .media-thumbs img,
#attractionDetailsBody .media-thumbs .thumb-video{
  width: 96px;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.12);
  flex: 0 0 auto;
}
#attractionDetailsBody .media-thumbs img{
  height: auto;
  object-fit: cover;
  object-position: center;
}

/* Mobilde daha iyi görünüm: 4/3 */
@media (max-width: 520px){
  #attractionDetailsBody .media-viewer .media-main,
  #attractionDetailsBody .media-viewer .viewer{
    aspect-ratio: 4 / 3;
  }
  #attractionDetailsBody .media-thumbs img,
  #attractionDetailsBody .media-thumbs .thumb-video{
    width: 82px;
    aspect-ratio: 4 / 3;
  }
}
#carFilters input[type="date"]:not(:valid){
  color: rgba(0,0,0,.45);
}