/* ============================================================
   Turkey Tours Istanbul — UI/UX Polish Layer (v1)
   Loaded LAST. Overrides only (no structural change). Safe/reversible.
   Brand orange #ed8323 preserved.
   ============================================================ */
:root{
  --brand:#ed8323; --brand-dark:#d26f14; --brand-soft:#fff4e8;
  --ink:#242a33; --ink-soft:#5a6572; --line:#e7eaee;
  --teal:#16708a; --navy:#16304a;
  --radius:12px; --radius-sm:8px;
  --shadow:0 2px 14px rgba(20,30,45,.08); --shadow-lg:0 14px 34px rgba(20,30,45,.16);
}

/* ---------- Typography ---------- */
body{ color:var(--ink); font-size:15.5px; line-height:1.68; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
h1,h2,h3,h4,h5,.vc_custom_heading,.thumb-title,.booking-item-title{ font-family:"Poppins","Open Sans",system-ui,sans-serif !important; color:var(--ink); letter-spacing:-.01em; }
h1,h2{ font-weight:700; line-height:1.18; }
h3,h4{ font-weight:600; }
p{ color:var(--ink-soft); }
a{ transition:color .18s ease; }

/* ---------- Buttons ---------- */
.btn{ border-radius:var(--radius-sm) !important; font-weight:600 !important; letter-spacing:.01em; transition:all .2s ease !important; border-width:0; }
.btn-primary,.btn-primary:focus{ background:var(--brand) !important; border-color:var(--brand) !important; color:#fff !important; box-shadow:0 4px 12px rgba(237,131,35,.28) !important; }
.btn-primary:hover{ background:var(--brand-dark) !important; border-color:var(--brand-dark) !important; transform:translateY(-1px); box-shadow:0 7px 18px rgba(237,131,35,.38) !important; }
.btn-xs{ padding:7px 16px !important; font-size:12.5px !important; border-radius:6px !important; }
.btn-ghost,.btn-white.btn-ghost{ background:rgba(255,255,255,.08) !important; border:2px solid rgba(255,255,255,.9) !important; color:#fff !important; backdrop-filter:blur(2px); border-radius:8px !important; }
.btn-ghost:hover{ background:#fff !important; color:var(--brand) !important; border-color:#fff !important; }
.btn-lg{ padding:14px 30px !important; font-size:15px !important; }

/* ---------- Tour cards (.thumb) ---------- */
.thumb{ background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; transition:transform .25s ease, box-shadow .25s ease; border:1px solid var(--line); margin-bottom:26px; }
.thumb:hover{ transform:translateY(-5px); box-shadow:var(--shadow-lg); }
.thumb-header{ overflow:hidden; position:relative; }
.thumb-header img,.hover-img img{ transition:transform .5s ease; width:100%; }
.thumb:hover .thumb-header img,.thumb:hover .hover-img img{ transform:scale(1.07); }
.thumb-caption{ padding:18px 20px 20px !important; }
.thumb-title,.hover-title-center{ font-weight:600 !important; font-size:16.5px !important; line-height:1.35 !important; }
.thumb-caption p{ font-size:14px; line-height:1.6; color:var(--ink-soft); }
/* price emphasis */
.booking-item-price,.last-minute-price,.tour-price{ color:var(--brand) !important; font-weight:700 !important; }

/* ---------- Section headers (teal bars) ---------- */
.bg-holder,[class*="bg-holder"]{ }
.text-center h2,.text-center h3{ letter-spacing:-.015em; }

/* ---------- Forms (booking / inquiry) ---------- */
input[type=text],input[type=email],input[type=tel],input[type=number],input[type=date],select,textarea,.form-control{
  border:1.5px solid var(--line) !important; border-radius:var(--radius-sm) !important; padding:11px 13px !important;
  transition:border-color .18s ease, box-shadow .18s ease !important; font-size:14.5px !important; color:var(--ink) !important; box-shadow:none !important;
}
input:focus,select:focus,textarea:focus,.form-control:focus{ border-color:var(--brand) !important; box-shadow:0 0 0 3px rgba(237,131,35,.15) !important; outline:none !important; }
label{ font-weight:600; color:var(--ink); }

/* ---------- Hero ---------- */
.owl-cap-title,.fittext,.slider-caption h1,.slider-caption h2{ text-shadow:0 2px 20px rgba(0,0,0,.45); font-weight:700 !important; letter-spacing:-.01em; }
/* hero quick-link tabs */
.last-minute-title,.hero-tab,.quick-link{ border-radius:8px !important; }

/* ---------- Header / nav polish ---------- */
.header-top,.top-user-area{ }
.slimmenu > li > a,.menu > li > a{ font-weight:600 !important; letter-spacing:.005em; transition:color .18s ease; }
.slimmenu > li > a:hover{ color:var(--brand) !important; }
/* mega-menu dropdown softer */
.sub-menu,.mega-menu,.dropdown-menu{ border-radius:0 0 10px 10px !important; box-shadow:0 18px 40px rgba(0,0,0,.22) !important; }

/* ---------- Misc polish ---------- */
.container{ }
img{ max-width:100%; height:auto; }
/* smoother everything interactive */
.thumb,.btn,.booking-item,a.thumb-header{ will-change:transform; }
/* breathing room on card rows */
.row-wrap > [class*="col-"]{ margin-bottom:6px; }

/* ======================= v2: hero / header / palette / spacing ======================= */

/* Hero — gradient overlay for readability + premium depth */
.owl-carousel-area,.owl-slider{ position:relative; }
.owl-slider .owl-item{ position:relative; }
.owl-slider .owl-item:after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(10,16,26,.30) 0%, rgba(10,16,26,.10) 42%, rgba(10,16,26,.66) 100%); }
.owl-cap,.owl-cap *{ position:relative; z-index:3; }
.owl-cap-title.fittext,.owl-cap-title{ letter-spacing:-.02em !important; text-shadow:0 6px 34px rgba(0,0,0,.55) !important; font-weight:700 !important; }
/* hero CTA: ghost -> solid brand */
.owl-cap .btn-white.btn-ghost,.owl-cap .btn-ghost{ background:var(--brand) !important; border-color:var(--brand) !important; color:#fff !important; padding:14px 32px !important; font-size:14.5px !important; box-shadow:0 10px 28px rgba(237,131,35,.42) !important; }
.owl-cap .btn-ghost:hover{ background:#fff !important; color:var(--brand) !important; transform:translateY(-2px); }

/* Header — refined dark navy instead of flat gray */
.header-top{ background:#1b2634 !important; border:0 !important; }
.header-top, .header-top a, .top-user-area-list a, .top-user-area-list{ color:#c3cdd8 !important; }
.header-top a:hover, .top-user-area-list a:hover{ color:#fff !important; }
.global-wrap.header-wrap{ box-shadow:0 3px 16px rgba(16,30,45,.07); background:#fff; }
.header-wrap .btn, a.btn[href*="destination" i]{ }
/* DESTINATIONS TURKEY button -> brand */
.header-wrap a.btn, .main-header a.btn-default{ background:var(--brand) !important; border-color:var(--brand) !important; color:#fff !important; border-radius:8px !important; font-weight:600 !important; box-shadow:0 4px 12px rgba(237,131,35,.25) !important; }

/* Nav — active/hover */
.slimmenu > li.active > a, .slimmenu > li.current-menu-item > a, .slimmenu > li.current_page_item > a{ color:var(--brand) !important; }
.nav, .main_menu_wrap{ box-shadow:none; }

/* Section heading bars (teal) -> richer, modern */
[class*="bg-holder"], .bg-holder{ }
.bg-holder h2, .bg-holder h3{ letter-spacing:-.01em !important; font-weight:700 !important; }

/* Spacing — more breathing room between sections */
.vc_row.wpb_row{ padding-top:8px; padding-bottom:8px; }
.row-wrap{ margin-top:6px; }
.thumb-caption .btn{ margin-top:4px; }

/* Breadcrumb links -> brand */
.breadcrumb a, .st-breadcrumb a, nav.breadcrumb a{ color:var(--brand) !important; }

/* Footer subtle polish */
footer a:hover, .footer a:hover{ color:var(--brand) !important; }

/* ======================= v3: SPEED / CLS (layout stability) ======================= */
/* Reserve gallery space BEFORE Fotorama JS mounts. min-height = stage + thumb-nav (~64px), so the
   restructure (eager img -> stage, + thumbs strip) lands inside the reservation with no shift. */
.fotorama{ min-height:320px; background:#f4f6f8; }
@media(min-width:768px){ .fotorama{ min-height:570px; } }
/* Eager LCP image: paints the first frame at ~FCP (before 324KB theme JS). aspect-ratio 4/3 makes its
   height match Fotorama's fitted stage (width x 0.75) at any width, so swapping to the real stage
   doesn't resize it. Selector only matches the pre-init markup; Fotorama restructures the DOM away from it. */
.fotorama > a:first-child{ display:block; }
.fotorama > a > .ftr-lcp{ display:block; width:100%; aspect-ratio:4/3; object-fit:cover; }
/* Hero owl-carousel (v1: adds .owl-theme + wraps slides in .owl-wrapper-outer on init). Before init the
   .bg-holder slides stack full-height, so the hero balloons then collapses to one slide on init, which
   shoves the whole page content up/down -> catastrophic CLS (was 0.9 on the homepage). Fix: RESERVE the
   hero's final height (min-height) AND clip the pre-init stacked slides (max-height+overflow) so the hero
   occupies the same box before and after init. Once owl adds .owl-theme the clip is lifted and owl rules.
   Scoped to .owl-carousel-area (hero-only class) so in-content carousels are untouched. */
/* The owl hero itself is display:none until its JS inits (theme FOUC guard), so reserving height ON the
   owl does nothing pre-init — the hero row collapses to 0 and the whole page sits 600px too high, then
   drops when owl appears. Reserve the height on the ROW WRAPPER instead (holds space while owl is hidden). */
.vc_row:has(.owl-carousel-area){ min-height:600px; }
@media(min-width:768px){ .vc_row:has(.owl-carousel-area){ min-height:700px; } }
/* Fallback for engines without :has() — also clip stacked slides once owl is visible. */
.owl-carousel-area:not(.owl-theme){ max-height:600px; overflow:hidden; }
@media(min-width:768px){ .owl-carousel-area:not(.owl-theme){ max-height:700px; } }
/* LCP: the hero is display:none until owl inits, so its background image is neither fetched nor painted
   until JS runs ~2.5s in (LCP was 12s). Force the first slide visible at first render so the browser
   fetches + paints the hero image immediately; the clip above keeps it to one slide, owl then takes over. */
.owl-carousel-area:not(.owl-theme){ display:block !important; }
.owl-carousel-area:not(.owl-theme) > .bg-holder:not(:first-child){ display:none !important; }
/* Give card thumbnails a stable aspect box so rows of tours don't shift as images arrive. */
.thumb-header,.hover-img{ aspect-ratio:3/2; background:#eef1f4; overflow:hidden; }
.thumb-header img,.hover-img img{ width:100%; height:100%; object-fit:cover; }
/* Any explicitly-sized media keeps its ratio instead of reflowing. */
img[width][height]{ height:auto; }
/* Mobile menu (slimmenu) is initialised by the deferred theme JS. Without this the full menu first
   renders expanded, then snaps to a hamburger when JS runs -> a large upward content shift (the main
   CLS source). Hide the pre-init expanded list (slimmenu's own inline display wins once it toggles)
   and reserve the collapsed bar height so nothing jumps. Plain rule (no !important) so toggling works. */
@media (max-width: 767px){
  ul#slimmenu.menu{ display: none; }
  .main_menu_wrap .nav{ min-height: 52px; }
}
/* Reduce text reflow from the async font swap. */
body{ font-family:"Open Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif; }