/* ===========================================================
   Yedi Liman · Çeşme → Bodrum
   Coastal Aegean cycling tour, 28.06–04.07.2026
   =========================================================== */

:root{
  --bg:#EAF3F2;
  --surface:#FFFFFF;
  --ink:#0F2F33;
  --ink-2:#234A4F;
  --muted:#5C7A7E;
  --line:rgba(15,47,51,0.14);
  --line-soft:rgba(15,47,51,0.08);
  --accent:#E6724B;
  --accent-soft:#F2B79E;
  --accent-2:#1E5C66;
  --accent-2-soft:#5A8A92;
  --sand:#F4EBDD;
  --header-h:74px;
  --maxw:1400px;
  --r-sm:4px;
  --r-md:10px;
  --r-lg:18px;
  --shadow-1: 0 8px 24px -16px rgba(15,47,51,0.18);
  --shadow-2: 0 24px 60px -32px rgba(15,47,51,0.32);
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;max-width:100vw;overflow-x:hidden}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'DM Sans', system-ui, sans-serif;
  font-weight:400;
  font-size:17px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:transparent}
ul,ol{margin:0;padding:0}
li{list-style:none}

::selection{background:var(--accent);color:#fff}

/* ---------- Typography ---------- */
h1,h2,h3,h4{
  font-family:'DM Serif Display', Georgia, serif;
  font-weight:400;
  letter-spacing:-0.01em;
  color:var(--ink);
  margin:0 0 0.4em;
  line-height:1.05;
}
h1{font-size:clamp(40px, 6vw, 88px)}
h2{font-size:clamp(28px, 3.6vw, 52px)}
h3{font-size:clamp(20px, 2vw, 28px)}
h4{font-size:clamp(17px, 1.4vw, 22px)}
p{margin:0 0 1em;color:var(--ink-2)}
.eyebrow{
  font-family:'DM Mono', ui-monospace, monospace;
  font-size:12px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--accent-2);
  font-weight:500;
  display:inline-block;
}
.num, .mono{font-family:'DM Mono', ui-monospace, monospace; font-feature-settings:"tnum"}

/* ---------- Container ---------- */
.container{
  width:100%;
  max-width:var(--maxw);
  margin:0 auto;
  padding-left:clamp(16px,4vw,48px);
  padding-right:clamp(16px,4vw,48px);
}

/* ---------- Skip link ---------- */
.skip-link{
  position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:10px 16px;z-index:2000;border-radius:0 0 6px 0;
}
.skip-link:focus{left:0}

/* ---------- Header ---------- */
.site-header{
  position:fixed;top:0;left:0;right:0;
  /* must stay above the mobile drawer (z=1150) so the toggle/X stays visible when drawer is open */
  z-index:1180;
  height:var(--header-h);
  background:rgba(234,243,242,0.92);
  backdrop-filter:saturate(140%) blur(8px);
  -webkit-backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid transparent;
  transition:background 240ms ease, border-color 240ms ease, box-shadow 240ms ease, height 240ms ease;
}
.site-header.is-scrolled{
  background:#EAF3F2;
  border-bottom-color:var(--line-soft);
  box-shadow:var(--shadow-1);
  height:64px;
}
.scroll-progress{
  position:absolute;left:0;bottom:0;height:2px;width:0;
  background:linear-gradient(90deg, var(--accent), var(--accent-soft));
  transition:width 80ms linear;
  pointer-events:none;
  z-index:1;
}
.header-inner{
  max-width:var(--maxw);
  margin:0 auto;
  height:100%;
  display:flex;
  align-items:center;
  gap:24px;
  padding-left:clamp(16px,4vw,48px);
  padding-right:clamp(16px,4vw,48px);
}
.brand{
  display:flex;align-items:center;gap:12px;
  font-family:'DM Serif Display', Georgia, serif;
  font-size:22px;
  letter-spacing:-0.01em;
  color:var(--ink);
  flex:0 0 auto;
}
.brand-mark{
  width:36px;height:36px;border-radius:50%;
  background:var(--accent);
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;
  flex:0 0 auto;
}
.brand-mark::before{
  content:"";
  width:18px;height:18px;border-radius:50%;
  border:2px solid #fff;
}
.brand-mark::after{
  content:"";
  position:absolute;left:50%;top:50%;width:22px;height:1.5px;background:#fff;transform:translate(-50%,-50%) rotate(-22deg);
}
.brand-meta{display:flex;flex-direction:column;line-height:1}
.brand-meta strong{font-weight:400}
.brand-meta span{font-family:'DM Mono', ui-monospace, monospace;font-size:10px;letter-spacing:0.18em;color:var(--accent-2);margin-top:4px;text-transform:uppercase}

.nav-desktop{
  display:flex;align-items:center;gap:28px;margin-left:auto;
}
.nav-desktop a{
  font-size:14px;
  color:var(--ink);
  position:relative;
  padding:8px 0;
  transition:color 200ms ease;
}
.nav-desktop a:not(.nav-cta)::after{
  content:"";
  position:absolute;left:0;right:0;bottom:2px;
  height:1px;background:var(--accent);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform 240ms cubic-bezier(.2,.7,.2,1);
}
.nav-desktop a:not(.nav-cta):hover{color:var(--accent)}
.nav-desktop a:not(.nav-cta):hover::after{transform:scaleX(1)}
.nav-desktop a.is-active{color:var(--accent)}
.nav-desktop a.is-active:not(.nav-cta)::after{transform:scaleX(1)}

.nav-cta{
  background:var(--ink);
  color:var(--surface) !important;
  padding:10px 18px !important;
  border-radius:999px;
  font-size:13px;
  letter-spacing:0.02em;
  transition:background 220ms ease, color 220ms ease, transform 220ms ease;
}
.nav-desktop .nav-cta::after{display:none !important}
.nav-desktop .nav-cta:hover,
.nav-desktop .nav-cta:focus-visible{
  background:var(--accent);
  color:#fff !important;
  transform:translateY(-1px);
}

.nav-toggle{
  display:none;
  width:48px;height:48px;
  border-radius:50%;
  background:var(--ink);
  color:#fff;
  margin-left:auto;
  /* fixed so the toggle (and the X when drawer is open) escapes the header
     stacking context and stays above the mobile drawer (z=1150) */
  position:fixed;
  top:13px;
  right:16px;
  z-index:1200;
  align-items:center;justify-content:center;
  transition:background 220ms ease, transform 220ms ease, box-shadow 220ms ease;
}
.sr-only{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.nav-toggle:hover, .nav-toggle:focus-visible{background:var(--accent); box-shadow:0 8px 22px -10px rgba(230,114,75,0.55)}
.nav-toggle:active{transform:scale(0.96)}
.nav-toggle span{
  position:absolute;left:16px;width:16px;height:1.5px;background:#fff;border-radius:1px;
  pointer-events:none;
  transition:transform 280ms cubic-bezier(.2,.7,.2,1), top 280ms cubic-bezier(.2,.7,.2,1), opacity 200ms ease;
}
/* sr-only is nth-child(1), so visible bars are nth-child(2/3/4) */
.nav-toggle span:nth-child(2){top:19px}
.nav-toggle span:nth-child(3){top:23.25px}
.nav-toggle span:nth-child(4){top:27.5px}
.nav-toggle.is-open span:nth-child(2){top:23.25px;transform:rotate(45deg)}
.nav-toggle.is-open span:nth-child(3){opacity:0}
.nav-toggle.is-open span:nth-child(4){top:23.25px;transform:rotate(-45deg)}

.nav-backdrop{
  position:fixed;inset:0;background:rgba(15,47,51,0.55);
  opacity:0;pointer-events:none;
  transition:opacity 240ms ease;
  z-index:1140;
}
.nav-backdrop.is-open{opacity:1;pointer-events:auto}

.mobile-menu{
  position:fixed;top:0;right:0;bottom:0;
  width:min(360px, 92vw);
  background:var(--bg);
  border-left:1px solid var(--line-soft);
  padding:96px 28px 28px;
  z-index:1150;
  transform:translateX(100%);
  visibility:hidden;
  pointer-events:none;
  transition:transform 360ms cubic-bezier(.22,.8,.24,1), visibility 0s linear 360ms;
  overflow-y:auto;
  display:flex;flex-direction:column;gap:8px;
  box-shadow:-30px 0 60px -30px rgba(15,47,51,0.35);
}
.mobile-menu.is-open{
  transform:translateX(0);
  visibility:visible;
  pointer-events:auto;
  transition:transform 360ms cubic-bezier(.22,.8,.24,1), visibility 0s linear 0s;
}
html.menu-open, body.menu-open{overflow:hidden;touch-action:none}
@media (max-width:1024px){
  body.menu-open{position:relative}
}
.mobile-menu a{transform:translateX(12px); opacity:0; transition:transform 320ms cubic-bezier(.22,.8,.24,1), opacity 280ms ease, color 200ms ease}
.mobile-menu.is-open a{transform:translateX(0); opacity:1}
.mobile-menu.is-open a:nth-child(1){transition-delay:80ms}
.mobile-menu.is-open a:nth-child(2){transition-delay:120ms}
.mobile-menu.is-open a:nth-child(3){transition-delay:160ms}
.mobile-menu.is-open a:nth-child(4){transition-delay:200ms}
.mobile-menu.is-open a:nth-child(5){transition-delay:240ms}
.mobile-menu.is-open a:nth-child(6){transition-delay:280ms}
.mobile-menu.is-open a:nth-child(7){transition-delay:320ms}
.mobile-menu.is-open a:nth-child(8){transition-delay:360ms}
.mobile-menu a{
  font-family:'DM Serif Display', Georgia, serif;
  font-size:28px;
  color:var(--ink);
  padding:14px 0;
  border-bottom:1px solid var(--line-soft);
  letter-spacing:-0.01em;
}
.mobile-menu a:hover, .mobile-menu a.is-active{color:var(--accent)}
.mobile-menu .mm-foot{
  margin-top:auto;
  padding-top:24px;
  font-family:'DM Mono', ui-monospace, monospace;
  font-size:11px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--muted);
  border-top:1px solid var(--line-soft);
}

@media (max-width:1024px){
  .nav-desktop{display:none}
  .nav-toggle{display:inline-flex}
}

/* ---------- Main ---------- */
main{padding-top:var(--header-h)}
main section[id]{scroll-margin-top:calc(var(--header-h) + 16px)}
.day-card[id]{scroll-margin-top:calc(var(--header-h) + 16px)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 22px;
  border-radius:999px;
  font-family:'DM Sans', sans-serif;
  font-size:15px;
  letter-spacing:0.01em;
  border:1px solid transparent;
  transition:background 260ms cubic-bezier(.22,.8,.24,1), color 220ms ease, border-color 220ms ease, transform 260ms cubic-bezier(.22,.8,.24,1), box-shadow 260ms ease;
  cursor:pointer;
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.btn::before{
  content:"";
  position:absolute;inset:0;
  background:radial-gradient(120% 100% at 0% 50%, rgba(230,114,75,0.35), transparent 60%);
  opacity:0;
  transition:opacity 260ms ease;
  z-index:-1;
}
.btn:hover::before, .btn:focus-visible::before{opacity:1}
.btn-primary{background:var(--ink);color:var(--surface)}
.btn-primary:hover, .btn-primary:focus-visible{background:var(--accent);color:#fff;transform:translateY(-2px);box-shadow:0 14px 28px -16px rgba(230,114,75,0.65)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-ghost:hover, .btn-ghost:focus-visible{background:var(--ink);color:#fff;transform:translateY(-2px)}
.btn-accent{background:var(--accent);color:#fff}
.btn-accent:hover, .btn-accent:focus-visible{background:var(--ink);color:#fff;transform:translateY(-2px)}
.btn .btn-arrow{
  display:inline-block;width:8px;height:8px;
  border-top:1.5px solid currentColor;
  border-right:1.5px solid currentColor;
  transform:rotate(45deg);
  transition:transform 260ms cubic-bezier(.22,.8,.24,1), margin-left 260ms cubic-bezier(.22,.8,.24,1);
}
.btn:hover .btn-arrow, .btn:focus-visible .btn-arrow{transform:rotate(45deg) translate(2px,-2px)}

/* ---------- HERO ---------- */
.hero{
  padding:48px 0 0;
  position:relative;
}
.hero-stripe{
  position:relative;
  height:clamp(180px, 28vw, 320px);
  width:100%;
  border-radius:var(--r-md);
  overflow:hidden;
  background:
    linear-gradient(180deg, rgba(15,47,51,0.05), rgba(15,47,51,0.18)),
    url("/assets/images/hero-stripe.jpg") center/cover no-repeat,
    var(--accent-2);
  margin-bottom:clamp(28px, 5vw, 56px);
  isolation:isolate;
}
.hero-stripe::after{
  content:"";
  position:absolute;inset:0;
  background:
    radial-gradient(80% 60% at 80% 50%, rgba(230,114,75,0.18), transparent 70%),
    linear-gradient(180deg, transparent 60%, rgba(15,47,51,0.45) 100%);
  z-index:1;
}
.hero-stripe .hero-corners{
  position:absolute;left:18px;right:18px;top:18px;bottom:18px;
  display:flex;justify-content:space-between;align-items:flex-start;
  z-index:2;
  font-family:'DM Mono', ui-monospace, monospace;
  font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:rgba(255,255,255,0.92);
}
.hero-stripe .hero-corners > div{display:flex;flex-direction:column;gap:4px}
.hero-stripe .hero-corners > div:last-child{align-items:flex-end;text-align:right}
.hero-stripe .hero-corners small{color:rgba(255,255,255,0.65);font-size:10px}

.hero-h1{
  display:grid;
  grid-template-columns:1fr;
  gap:24px;
  margin-bottom:clamp(28px, 5vw, 56px);
}
.hero-h1 .eyebrow{margin-bottom:18px}
.hero-h1 h1{max-width:14ch}
.hero-sub{
  max-width:60ch;
  font-size:clamp(17px, 1.6vw, 21px);
  color:var(--ink-2);
  margin-top:8px;
}
.hero-actions{
  display:flex;flex-wrap:wrap;gap:12px;margin-top:24px;
}
.hero-stats{
  display:flex;flex-wrap:wrap;gap:clamp(20px, 4vw, 56px);
  margin-top:28px;
  padding-top:24px;
  border-top:1px solid var(--line);
}
.hero-stat{display:flex;flex-direction:column;gap:4px}
.hero-stat .num{font-family:'DM Mono', ui-monospace, monospace;font-size:clamp(22px, 2.2vw, 30px);color:var(--ink);letter-spacing:-0.01em}
.hero-stat span{font-family:'DM Mono', ui-monospace, monospace;font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:var(--muted)}

/* ---------- Timeline (yatay) ---------- */
.timeline-wrap{
  position:relative;
  margin-bottom:clamp(40px, 7vw, 96px);
}
.timeline-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:24px;flex-wrap:wrap;
}
.timeline-head h2{margin:0;font-size:clamp(22px,2.2vw,30px)}
.timeline-head .meta{font-family:'DM Mono', ui-monospace, monospace;font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:var(--muted)}

.timeline{
  position:relative;
  padding:34px 0 22px;
  background:
    linear-gradient(180deg, var(--surface), var(--surface));
  border:1px solid var(--line-soft);
  border-radius:var(--r-md);
  overflow:hidden;
}
.timeline-track{
  position:relative;
  height:120px;
  display:grid;
  grid-template-columns:repeat(7, 1fr);
  align-items:center;
  padding:0 clamp(18px, 3vw, 36px);
}
.timeline-line{
  position:absolute;
  left:clamp(28px, 4vw, 60px);
  right:clamp(28px, 4vw, 60px);
  top:50%;
  height:2px;
  transform:translateY(-50%);
  pointer-events:none;
}
.timeline-line svg{width:100%;height:100%;overflow:visible;display:block}
.timeline-line path{
  fill:none;
  stroke:var(--accent-2-soft);
  stroke-width:1.5;
  stroke-dasharray:1500;
  stroke-dashoffset:1500;
  animation:drawLine 1.8s cubic-bezier(.4,.1,.2,1) forwards;
}
@keyframes drawLine{ to { stroke-dashoffset:0 } }

.bike-rider{
  position:absolute;
  top:50%;
  left:0;
  transform:translate(-50%, -68%);
  width:34px;height:34px;
  pointer-events:none;
  transition:left 380ms cubic-bezier(.22,.8,.24,1);
  z-index:5;
  animation:bikebob 2.6s ease-in-out infinite;
}
.bike-rider svg{width:100%;height:100%;display:block;color:var(--accent);filter:drop-shadow(0 4px 8px rgba(230,114,75,0.35))}
@keyframes bikebob{
  0%, 100%{transform:translate(-50%, -68%)}
  50%{transform:translate(-50%, -72%)}
}
@media (prefers-reduced-motion:reduce){
  .bike-rider{animation:none}
}
.bike-trail{
  position:absolute;
  top:50%;
  left:clamp(28px, 4vw, 60px);
  height:2px;
  width:0;
  background:linear-gradient(90deg, transparent, rgba(230,114,75,0.55));
  transform:translateY(-50%);
  pointer-events:none;
  z-index:4;
  border-radius:2px;
}

.tl-stop{
  position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  z-index:3;
  cursor:pointer;
  background:transparent;
  padding:0;
}
.tl-stop .tl-day{
  font-family:'DM Mono', ui-monospace, monospace;
  font-size:10px;letter-spacing:0.18em;text-transform:uppercase;color:var(--muted);
}
.tl-stop .tl-dot{
  width:18px;height:18px;border-radius:50%;
  background:var(--surface);
  border:2px solid var(--accent-2);
  position:relative;
  transition:transform 220ms ease, background 220ms ease, border-color 220ms ease;
}
.tl-stop .tl-dot::after{
  content:"";
  position:absolute;inset:-8px;border-radius:50%;
  border:1px solid transparent;
  transition:border-color 220ms ease;
}
.tl-stop .tl-name{
  font-family:'DM Serif Display', Georgia, serif;
  font-size:15px;color:var(--ink);
  white-space:nowrap;
  letter-spacing:-0.01em;
}
.tl-stop:hover .tl-dot{background:var(--accent);border-color:var(--accent);transform:scale(1.1)}
.tl-stop:hover .tl-dot::after{border-color:var(--accent-soft)}
.tl-stop:hover .tl-name{color:var(--ink)}
.tl-stop.is-active .tl-dot{
  background:var(--accent);border-color:var(--accent);transform:scale(1.18);
  box-shadow:0 0 0 6px rgba(230,114,75,0.18);
}
.tl-stop.is-active .tl-dot::after{border-color:var(--accent)}
.tl-stop.is-active .tl-name{color:var(--accent)}
.tl-stop.is-active .tl-day{color:var(--accent-2)}

.tl-km{
  font-family:'DM Mono', ui-monospace, monospace;
  font-size:10px;letter-spacing:0.12em;color:var(--muted);
  margin-top:2px;
}
@media (max-width:760px){
  .timeline-track{
    grid-template-columns:repeat(7, 96px);
    overflow-x:auto;
    height:140px;
    scrollbar-width:thin;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
  }
  .tl-stop{scroll-snap-align:center}
  .timeline-line{display:none}
  .bike-trail{display:none}
  .bike-rider{display:none}
}

/* ---------- Section base ---------- */
.section{
  padding:clamp(72px, 9vw, 140px) 0;
  position:relative;
}
.section-head{
  display:grid;
  grid-template-columns:1fr;
  gap:18px;
  margin-bottom:clamp(36px, 5vw, 72px);
  max-width:780px;
}
.section-head h2{margin:0}
.section-head p{font-size:clamp(16px, 1.4vw, 19px); color:var(--ink-2)}
.section-divider{
  height:1px;background:var(--line);margin:0;
}

/* ---------- TAKVIM YATAY (Day cards horizontal scroll-snap) ---------- */
.takvim{
  background:var(--surface);
  border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
}
.takvim-rail{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:min(560px, 86vw);
  gap:24px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-padding:clamp(16px, 4vw, 48px);
  -webkit-overflow-scrolling:touch;
  padding:8px clamp(16px, 4vw, 48px) 32px;
  margin:0 calc(-1 * clamp(16px, 4vw, 48px));
  scrollbar-width:thin;
  scrollbar-color:var(--accent-2-soft) transparent;
}
.takvim-rail::-webkit-scrollbar{height:6px}
.takvim-rail::-webkit-scrollbar-thumb{background:var(--accent-2-soft);border-radius:3px}

.day-card{
  scroll-snap-align:start;
  background:var(--bg);
  border:1px solid var(--line-soft);
  border-radius:var(--r-lg);
  padding:clamp(22px, 3vw, 36px);
  display:flex;flex-direction:column;
  gap:18px;
  position:relative;
  overflow:hidden;
  transition:transform 360ms cubic-bezier(.22,.8,.24,1), border-color 320ms ease, box-shadow 360ms ease;
}
.day-card::before{
  content:"";
  position:absolute;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg, var(--accent), var(--accent-soft));
  transition:width 700ms cubic-bezier(.22,.8,.24,1);
}
.day-card:hover{transform:translateY(-3px); border-color:var(--accent-soft); box-shadow:var(--shadow-1)}
.day-card:hover::before{width:100%}

.day-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:16px;border-bottom:1px solid var(--line-soft);padding-bottom:18px;
}
.day-num{
  font-family:'DM Mono', ui-monospace, monospace;
  font-size:11px;letter-spacing:0.22em;text-transform:uppercase;color:var(--accent);
}
.day-route{
  font-family:'DM Serif Display', Georgia, serif;
  font-size:clamp(20px, 2vw, 26px);
  letter-spacing:-0.01em;
  margin-top:6px;
}
.day-stat{
  text-align:right;
  font-family:'DM Mono', ui-monospace, monospace;
  font-size:11px;letter-spacing:0.12em;color:var(--muted);
}
.day-stat strong{display:block;color:var(--ink);font-size:18px;font-weight:400;letter-spacing:-0.01em;margin-bottom:2px}

.day-schedule{display:flex;flex-direction:column}
.day-schedule li{
  display:grid;
  grid-template-columns:78px 1fr;
  gap:18px;
  padding:12px 0;
  border-bottom:1px dashed var(--line-soft);
  align-items:flex-start;
}
.day-schedule li:last-child{border-bottom:0}
.day-schedule .t{
  font-family:'DM Mono', ui-monospace, monospace;
  font-size:13px;color:var(--accent-2);letter-spacing:0.04em;padding-top:2px;
}
.day-schedule .e{font-size:15px;color:var(--ink);line-height:1.5}
.day-schedule .e small{display:block;color:var(--muted);font-size:13px;margin-top:2px}

.day-tag{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 10px;border-radius:999px;
  background:var(--accent-soft);
  color:#7a2f15;
  font-family:'DM Mono', ui-monospace, monospace;
  font-size:10px;letter-spacing:0.14em;text-transform:uppercase;
  align-self:flex-start;
  margin-top:auto;
}
.day-tag.sea{background:rgba(30,92,102,0.12);color:var(--accent-2)}

/* ---------- ETAP DETAY (per-day detailed blocks) ---------- */
.etap-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(360px, 100%), 1fr));
  gap:clamp(16px, 2vw, 28px);
}
.etap-card{
  background:var(--surface);
  border:1px solid var(--line-soft);
  border-radius:var(--r-md);
  padding:clamp(20px,2.4vw,28px);
  display:flex;flex-direction:column;gap:14px;
  position:relative;
  overflow:hidden;
  transition:transform 360ms cubic-bezier(.22,.8,.24,1), box-shadow 360ms ease, border-color 320ms ease;
}
.etap-card::after{
  content:"";
  position:absolute;left:50%;bottom:-1px;width:0;height:2px;
  background:linear-gradient(90deg, transparent, var(--accent), transparent);
  transform:translateX(-50%);
  transition:width 520ms cubic-bezier(.22,.8,.24,1);
}
.etap-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-1);border-color:var(--accent-soft)}
.etap-card:hover::after{width:80%}
.etap-card ul.molas li{transition:transform 240ms ease, color 200ms ease}
.etap-card:hover ul.molas li{transform:translateX(2px)}
.etap-card .etap-num{
  display:flex;align-items:center;gap:10px;
}
.etap-card .etap-num .pill{
  font-family:'DM Mono', ui-monospace, monospace;
  font-size:10px;letter-spacing:0.18em;text-transform:uppercase;
  padding:4px 10px;border-radius:999px;
  background:var(--ink);color:#fff;
}
.etap-card h3{margin:4px 0 0; font-size:clamp(18px,1.7vw,22px)}
.etap-card .stats{
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px;
  border-top:1px solid var(--line-soft);
  padding-top:14px;margin-top:auto;
}
.etap-card .stats div{display:flex;flex-direction:column;gap:2px}
.etap-card .stats span{font-family:'DM Mono', ui-monospace, monospace;font-size:10px;letter-spacing:0.14em;color:var(--muted);text-transform:uppercase}
.etap-card .stats strong{font-family:'DM Mono', ui-monospace, monospace;font-size:16px;color:var(--ink);font-weight:400}
.etap-card ul.molas{margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.etap-card ul.molas li{
  display:flex;align-items:flex-start;gap:10px;font-size:14px;color:var(--ink-2);
}
.etap-card ul.molas li::before{
  content:"";display:block;flex:0 0 6px;height:6px;border-radius:50%;background:var(--accent);margin-top:8px;
}
.etap-card ul.molas li strong{color:var(--ink);font-weight:400}

/* ---------- KONAKLAMA ---------- */
.konaklama-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap:clamp(16px,2vw,24px);
}
.hotel-card{
  background:var(--surface);
  border:1px solid var(--line-soft);
  border-radius:var(--r-md);
  overflow:hidden;
  display:flex;flex-direction:column;
  transition:transform 380ms cubic-bezier(.22,.8,.24,1), box-shadow 380ms ease, border-color 320ms ease;
}
.hotel-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-2); border-color:var(--accent-soft)}
.hotel-cover{
  aspect-ratio:4/3;
  background:var(--accent-2-soft);
  background-size:cover;background-position:center;
  position:relative;
  overflow:hidden;
  transition:transform 600ms cubic-bezier(.22,.8,.24,1);
}
/* SVG line-art (coast horizon / silhouette) layered on the inline gradient — turns the
   gradient block from "missing photo" into a designed editorial card. */
.hotel-cover .hc-art{
  position:absolute; inset:0;
  width:100%; height:100%;
  pointer-events:none;
  mix-blend-mode:screen;
  opacity:0.9;
}
.hotel-card:hover .hotel-cover{transform:scale(1.04)}
.hotel-cover::before{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(180deg, transparent 55%, rgba(15,47,51,0.18) 100%);
  opacity:0;
  transition:opacity 360ms ease;
}
.hotel-card:hover .hotel-cover::before{opacity:1}
.hotel-cover::after{
  content:attr(data-night);
  position:absolute;left:14px;top:14px;
  font-family:'DM Mono', ui-monospace, monospace;
  font-size:10px;letter-spacing:0.18em;text-transform:uppercase;
  background:rgba(255,255,255,0.92);color:var(--ink);
  padding:5px 9px;border-radius:999px;
}
.hotel-body{padding:18px 20px 22px;display:flex;flex-direction:column;gap:8px}
.hotel-body h4{margin:0;font-size:20px}
.hotel-body .place{
  font-family:'DM Mono', ui-monospace, monospace;
  font-size:11px;letter-spacing:0.16em;text-transform:uppercase;color:var(--accent-2);
}
.hotel-body p{margin:6px 0 0;font-size:14px;color:var(--ink-2)}
.hotel-body .feat{
  display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:12px;
}
.hotel-body .feat span{
  font-family:'DM Mono', ui-monospace, monospace;
  font-size:10px;letter-spacing:0.12em;text-transform:uppercase;
  background:var(--bg);color:var(--ink-2);padding:4px 8px;border-radius:4px;
}

/* ---------- NE GETIR ---------- */
.bring-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap:clamp(16px, 2vw, 28px);
}
.bring-col{
  background:var(--surface);
  border:1px solid var(--line-soft);
  border-radius:var(--r-md);
  padding:clamp(22px,2.4vw,30px);
}
.bring-col h3{font-size:clamp(18px,1.7vw,22px); margin-bottom:8px}
.bring-col .lead{font-family:'DM Mono', ui-monospace, monospace;font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:var(--accent);margin-bottom:18px;display:block}
.bring-col ul{display:flex;flex-direction:column;gap:10px}
.bring-col li{
  display:flex;align-items:flex-start;gap:12px;
  font-size:15px;color:var(--ink-2);
  padding-bottom:10px;border-bottom:1px solid var(--line-soft);
}
.bring-col li:last-child{border-bottom:0;padding-bottom:0}
.bring-col li::before{
  content:"";flex:0 0 14px;height:14px;border:1.5px solid var(--accent-2);border-radius:3px;margin-top:3px;background:var(--surface);
}

/* ---------- FIYAT ---------- */
.price-wrap{
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:clamp(20px, 3vw, 48px);
  align-items:stretch;
}
@media (max-width:900px){.price-wrap{grid-template-columns:1fr}}

.price-main{
  background:var(--ink);
  color:#fff;
  border-radius:var(--r-lg);
  padding:clamp(28px, 4vw, 56px);
  position:relative;
  overflow:hidden;
}
.price-main::before{
  content:"";
  position:absolute;
  right:-80px;top:-80px;
  width:280px;height:280px;border-radius:50%;
  background:radial-gradient(circle at center, rgba(230,114,75,0.45), transparent 65%);
  pointer-events:none;
}
.price-main .eyebrow{color:var(--accent-soft)}
.price-main h2{color:#fff;margin:8px 0 24px}
.price-main .price-num{
  font-family:'DM Mono', ui-monospace, monospace;
  font-size:clamp(44px, 6vw, 72px);
  letter-spacing:-0.02em;
  line-height:1;
  color:#fff;
}
.price-main .price-unit{font-family:'DM Mono', ui-monospace, monospace; font-size:12px;letter-spacing:0.18em;text-transform:uppercase;color:var(--accent-soft);display:block;margin-top:10px}
.price-main .price-includes{
  margin-top:32px;padding-top:24px;border-top:1px solid rgba(255,255,255,0.18);
  display:flex;flex-direction:column;gap:10px;
}
.price-main .price-includes li{display:flex;gap:10px;align-items:flex-start;color:rgba(255,255,255,0.84);font-size:14.5px}
.price-main .price-includes li::before{
  content:"";flex:0 0 6px;height:6px;border-radius:50%;background:var(--accent);margin-top:9px;
}
.price-main .price-foot{
  margin-top:28px;padding-top:18px;border-top:1px solid rgba(255,255,255,0.18);
  font-family:'DM Mono', ui-monospace, monospace;font-size:11px;letter-spacing:0.16em;text-transform:uppercase;color:rgba(255,255,255,0.6);
}

.price-extras{display:flex;flex-direction:column;gap:12px}
.extra-card{
  background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r-md);
  padding:22px 24px;
  display:flex;justify-content:space-between;align-items:center;gap:18px;
}
.extra-card h4{margin:0;font-size:17px}
.extra-card p{margin:4px 0 0;font-size:13.5px;color:var(--muted)}
.extra-card .delta{
  font-family:'DM Mono', ui-monospace, monospace;
  font-size:18px;color:var(--accent);letter-spacing:-0.01em;flex:0 0 auto;text-align:right;
}
.extra-card .delta.minus{color:var(--accent-2)}

/* ---------- ILETISIM block ---------- */
.contact-wrap{
  display:grid;grid-template-columns:1.1fr 1fr;
  gap:clamp(24px, 4vw, 56px);
  align-items:start;
}
@media (max-width:900px){.contact-wrap{grid-template-columns:1fr}}
.contact-block{
  background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r-md);
  padding:clamp(24px,3vw,36px);
}
.contact-block h3{margin-bottom:18px}
.contact-list{display:flex;flex-direction:column;gap:14px}
.contact-list li{display:grid;grid-template-columns:96px 1fr;gap:18px;padding-bottom:14px;border-bottom:1px solid var(--line-soft);align-items:start}
.contact-list li:last-child{border-bottom:0}
.contact-list .lbl{font-family:'DM Mono', ui-monospace, monospace; font-size:10px;letter-spacing:0.18em;text-transform:uppercase;color:var(--muted);padding-top:3px}
.contact-list .val{font-size:16px;color:var(--ink);word-break:break-word;overflow-wrap:anywhere}
.contact-list .val a:hover{color:var(--accent)}

/* ---------- Form ---------- */
.form{
  display:flex;flex-direction:column;gap:18px;
}
.field{display:flex;flex-direction:column;gap:6px}
.field label{
  font-family:'DM Mono', ui-monospace, monospace;
  font-size:11px;letter-spacing:0.16em;text-transform:uppercase;color:var(--muted);
}
.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field select,
.field textarea{
  width:100%;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:6px;
  padding:13px 16px;
  font:400 16px 'DM Sans', sans-serif;
  color:var(--ink);
  transition:border-color 200ms ease, background 200ms ease;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none;border-color:var(--accent);background:#fff;
}
.field textarea{min-height:140px; resize:vertical}
.field-hp{position:absolute;left:-9999px;top:-9999px;height:0;width:0;overflow:hidden}
.field.row-checkbox{flex-direction:row;align-items:flex-start;gap:12px}
.field.row-checkbox label{
  font-family:'DM Sans', sans-serif;
  text-transform:none;letter-spacing:0;font-size:13.5px;color:var(--ink-2);
  line-height:1.5;flex:1;
}
.field.row-checkbox label a{color:var(--accent-2);text-decoration:underline;text-underline-offset:2px}
.field input[type="checkbox"]{
  appearance:auto;
  -webkit-appearance:auto;
  width:18px;height:18px;
  min-width:18px;min-height:18px;
  padding:0;border:0;margin:2px 0 0;
  accent-color:var(--accent);
}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:600px){.form-grid{grid-template-columns:1fr}}
.form-msg{
  padding:12px 16px;border-radius:6px;font-size:14.5px;
}
.form-msg[data-state="success"]{background:rgba(30,92,102,0.1);color:var(--accent-2);border:1px solid rgba(30,92,102,0.25)}
.form-msg[data-state="error"]{background:rgba(230,114,75,0.12);color:#7a2f15;border:1px solid var(--accent-soft)}
.form-msg[hidden]{display:none}

/* ---------- FAQ ---------- */
.faq-list{
  display:flex;flex-direction:column;gap:10px;
  border-top:1px solid var(--line-soft);
}
.faq-list details{
  border-bottom:1px solid var(--line-soft);
  padding:6px 0;
}
.faq-list summary{
  list-style:none;
  padding:18px 36px 18px 0;
  cursor:pointer;
  position:relative;
  font-family:'DM Serif Display', Georgia, serif;
  font-size:clamp(17px, 1.5vw, 20px);
  letter-spacing:-0.01em;
}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{
  content:"";position:absolute;right:6px;top:24px;
  width:14px;height:14px;
  background:linear-gradient(currentColor,currentColor) center/14px 1.5px no-repeat,
             linear-gradient(currentColor,currentColor) center/1.5px 14px no-repeat;
  transition:transform 240ms ease;
}
.faq-list details[open] summary::after{transform:rotate(45deg)}
/* Smooth open/close: max-height animated by JS for cross-browser smoothness. */
:root { interpolate-size: allow-keywords; }
.faq-list .answer{
  padding: 0;
  overflow: hidden;
  color: var(--ink-2);
  max-width: 75ch;
  transition: padding-block-end 320ms cubic-bezier(.4,0,.2,1);
  will-change: max-height;
}
.faq-list details[open] > .answer {
  padding-block-end: 18px;
}
.faq-list .answer p{margin:0 0 10px}
@media (prefers-reduced-motion: reduce) { .faq-list .answer { transition: none; } }

/* ---------- Footer ---------- */
.site-footer{
  background:var(--ink);color:rgba(255,255,255,0.78);
  padding:clamp(48px, 7vw, 84px) 0 28px;
  margin-top:60px;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr 1fr;
  gap:clamp(20px, 3vw, 40px);
  margin-bottom:40px;
}
@media (max-width:900px){.footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.footer-grid{grid-template-columns:1fr}}
.footer-grid h5{
  font-family:'DM Mono', ui-monospace, monospace;
  font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:#fff;
  margin:0 0 16px;
}
.footer-grid a{color:rgba(255,255,255,0.72);font-size:14px;display:block;padding:5px 0;transition:color 200ms ease}
.footer-grid a:hover{color:var(--accent)}
.footer-brand{display:flex;flex-direction:column;gap:14px;max-width:38ch;font-size:14px;color:rgba(255,255,255,0.7);line-height:1.6}
.footer-brand .brand{color:#fff}
.footer-brand .brand-meta span{color:var(--accent-soft)}
.footer-bottom{
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;
  padding-top:24px;border-top:1px solid rgba(255,255,255,0.12);
  font-family:'DM Mono', ui-monospace, monospace;font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:rgba(255,255,255,0.55);
}

/* ---------- Cookie banner ---------- */
.cookie-banner{
  position:fixed;bottom:16px;left:16px;right:16px;
  max-width:520px;margin:0 auto;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  box-shadow:var(--shadow-2);
  padding:20px 22px 18px;
  transform:translateY(140%);
  opacity:0;
  transition:transform 280ms cubic-bezier(.2,.7,.2,1), opacity 240ms ease;
  z-index:1060;
}
.cookie-banner.is-visible{transform:translateY(0); opacity:1}
body.menu-open .cookie-banner{
  transform:translateY(140%);
  opacity:0;
  pointer-events:none;
}
.cookie-banner h4{margin:0 0 6px;font-size:18px}
.cookie-banner p{margin:0 0 14px;font-size:13.5px;color:var(--ink-2);line-height:1.6}
.cookie-banner p a{color:var(--accent-2);text-decoration:underline;text-underline-offset:2px}
.cookie-actions{display:grid;grid-template-columns:repeat(3, 1fr);gap:8px}
.cookie-actions button{
  width:100%;min-height:44px;
  padding:11px 12px;border-radius:6px;
  font-size:13.5px;font-weight:500;
  border:1px solid var(--line);
  background:var(--surface);color:var(--ink);
  transition:background 240ms cubic-bezier(.22,.8,.24,1), color 220ms ease, border-color 220ms ease, transform 220ms cubic-bezier(.22,.8,.24,1), box-shadow 240ms ease;
}
.cookie-actions button:hover, .cookie-actions button:focus-visible{transform:translateY(-1px)}
.cookie-actions button[data-consent="accept"]{background:var(--ink);color:#fff;border-color:var(--ink);font-weight:500}
.cookie-actions button[data-consent="accept"]:hover, .cookie-actions button[data-consent="accept"]:focus-visible{background:var(--accent);color:#fff;border-color:var(--accent);box-shadow:0 12px 24px -12px rgba(230,114,75,0.6)}
.cookie-actions button[data-consent="reject"]{color:var(--ink-2);background:var(--surface);border-color:var(--line)}
.cookie-actions button[data-consent="reject"]:hover, .cookie-actions button[data-consent="reject"]:focus-visible{background:var(--ink);color:#fff;border-color:var(--ink);box-shadow:0 10px 22px -12px rgba(15,47,51,0.5)}
.cookie-actions button[data-consent="settings"]{color:var(--ink-2);background:var(--surface)}
.cookie-actions button[data-consent="settings"]:hover, .cookie-actions button[data-consent="settings"]:focus-visible{background:var(--surface);color:var(--accent-2);border-color:var(--accent-2)}
@media (max-width:340px){
  .cookie-actions{grid-template-columns:1fr}
}
@media (min-width:780px){
  .cookie-banner{left:24px;right:auto;max-width:420px;margin:0}
}
/* cookie-banner is a fixed-position overlay (z-index 1100) — no body padding buffer; stays on top of everything */

/* ---------- Reveal ---------- */
.reveal{opacity:0; transform:translateY(28px); transition:opacity 600ms cubic-bezier(.2,.7,.2,1), transform 600ms cubic-bezier(.2,.7,.2,1)}
.reveal.is-in{opacity:1; transform:none}
.reveal.delay-1{transition-delay:80ms}
.reveal.delay-2{transition-delay:160ms}
.reveal.delay-3{transition-delay:240ms}
.reveal.delay-4{transition-delay:320ms}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1 !important; transform:none !important; transition:none !important}
  .timeline-line path{animation:none; stroke-dashoffset:0}
  *{animation-duration:0.001ms !important; transition-duration:0.001ms !important}
}
html.no-js .reveal{opacity:1; transform:none}

/* ---------- Tables (legal pages) ---------- */
.table-scroll{
  position:relative;
  display:block;width:100%;max-width:100%;min-width:0;
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  margin:18px 0;
  border:1px solid var(--line);
  border-radius:6px;
  background:
    linear-gradient(90deg, var(--surface) 30%, rgba(255,255,255,0)) left center/40px 100% no-repeat,
    linear-gradient(90deg, rgba(255,255,255,0), var(--surface) 70%) right center/40px 100% no-repeat,
    radial-gradient(farthest-side at 0 50%, rgba(15,47,51,0.16), transparent) left center/14px 100% no-repeat,
    radial-gradient(farthest-side at 100% 50%, rgba(15,47,51,0.16), transparent) right center/14px 100% no-repeat,
    var(--surface);
  background-attachment:local, local, scroll, scroll, scroll;
}
.table-scroll > table{margin:0 !important; min-width:520px; width:100%; border-collapse:collapse; background:transparent}
.table-scroll th, .table-scroll td{padding:12px 14px; text-align:left; border-bottom:1px solid var(--line-soft); font-size:14.5px; vertical-align:top}
.table-scroll th{background:var(--bg); font-family:'DM Mono', ui-monospace, monospace; font-size:11px;letter-spacing:0.14em;text-transform:uppercase;font-weight:500;color:var(--ink-2)}
.table-scroll tbody tr:last-child td{border-bottom:0}
.table-scroll tbody tr{transition:background 180ms ease}
.table-scroll tbody tr:hover{background:rgba(30,92,102,0.04)}
:where(*:has(> .table-scroll), *:has(> * > .table-scroll), *:has(> * > * > .table-scroll)){min-width:0}
@media (max-width:600px){
  .table-scroll{position:relative}
  .table-scroll::before{
    content:"⇄ kaydır";
    position:sticky;left:0;
    display:block;
    font-family:'DM Mono', ui-monospace, monospace;
    font-size:10px;letter-spacing:0.16em;text-transform:uppercase;
    color:var(--accent);
    padding:6px 12px 0;
    pointer-events:none;
  }
  .table-scroll > table{min-width:480px}
  .table-scroll th, .table-scroll td{padding:10px 12px; font-size:14px}
}

/* ---------- Doc page (legal/about/contact) ---------- */
.doc-hero{
  padding:36px 0 0;
}
.doc-hero h1{font-size:clamp(36px, 5vw, 64px); max-width:18ch}
.doc-hero p.lead{max-width:62ch; font-size:clamp(16px, 1.4vw, 19px); color:var(--ink-2)}

.doc-body{
  padding:48px 0 96px;
  display:grid;
  grid-template-columns:1fr;
  gap:24px;
  max-width:820px;
}
.doc-body h2{margin-top:48px; font-size:clamp(22px, 2.4vw, 32px)}
.doc-body h3{margin-top:28px; font-size:20px}
.doc-body p, .doc-body li{font-size:16px; color:var(--ink-2); line-height:1.7}
.doc-body ul, .doc-body ol{display:flex;flex-direction:column;gap:8px;padding-left:18px}
.doc-body ul li, .doc-body ol li{list-style:disc; margin-left:6px}
.doc-body ol li{list-style:decimal}
.doc-body strong{color:var(--ink); font-weight:500}
.doc-body a{color:var(--accent-2); text-decoration:underline; text-underline-offset:3px}
.doc-meta{
  font-family:'DM Mono', ui-monospace, monospace;font-size:11px;letter-spacing:0.16em;text-transform:uppercase;color:var(--muted);
  border-top:1px solid var(--line-soft);padding-top:16px;
}

/* ---------- 404 ---------- */
.notfound{
  min-height:60vh;
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
  padding:64px 0;
}
.notfound .num{
  font-family:'DM Serif Display', Georgia, serif;
  font-size:clamp(120px, 22vw, 260px);
  line-height:0.9;color:var(--accent);letter-spacing:-0.04em;margin-bottom:12px;
}
.notfound h1{font-size:clamp(28px, 3vw, 40px); margin-bottom:14px}
.notfound p{max-width:50ch; color:var(--ink-2)}
.notfound .actions{display:flex;gap:12px;margin-top:24px;flex-wrap:wrap}

/* ---------- Site map ---------- */
.sm-grid{
  display:grid;grid-template-columns:repeat(auto-fit, minmax(220px,1fr));gap:24px;
}
.sm-grid section{
  background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r-md);padding:22px 24px;
}
.sm-grid h3{font-size:18px;margin-bottom:12px}
.sm-grid a{display:block;padding:6px 0;color:var(--ink-2)}
.sm-grid a:hover{color:var(--accent)}

/* ---------- Focus ring ---------- */
:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-radius:4px;
  box-shadow:0 0 0 4px rgba(230,114,75,0.18);
}

/* ---------- Decorative wave separator ---------- */
.wave-sep{
  display:block;width:100%;height:36px;color:var(--accent-2-soft);
  overflow:hidden;
}
.wave-sep svg{width:100%;height:100%;display:block}
.wave-sep svg path{
  stroke-dasharray:6 4;
  animation:wavedrift 14s linear infinite;
}
@keyframes wavedrift{
  to { stroke-dashoffset:-200 }
}
@media (prefers-reduced-motion:reduce){
  .wave-sep svg path{animation:none}
}

/* ---------- Theme micro-effects: sea shimmer on hero, warm trail on bike ---------- */
.hero-stripe::before{
  content:"";
  position:absolute;inset:0;
  background:
    radial-gradient(60% 50% at 20% 80%, rgba(244,235,221,0.28), transparent 60%),
    radial-gradient(40% 35% at 70% 25%, rgba(230,114,75,0.16), transparent 70%);
  mix-blend-mode:screen;
  opacity:0.9;
  pointer-events:none;
  animation:seaShimmer 9s ease-in-out infinite alternate;
  z-index:2;
}
.hero-stripe .hero-corners{z-index:3}
@keyframes seaShimmer{
  0%   { transform:translate3d(0,0,0) scale(1);    opacity:0.7 }
  100% { transform:translate3d(2%, -1%, 0) scale(1.04); opacity:0.95 }
}
@media (prefers-reduced-motion:reduce){
  .hero-stripe::before{animation:none}
}

/* Bike rider warm trail glow upgrade */
.bike-trail{
  background:linear-gradient(90deg, rgba(230,114,75,0) 0%, rgba(230,114,75,0.45) 60%, rgba(230,114,75,0.85) 100%);
  box-shadow:0 0 14px -4px rgba(230,114,75,0.55);
}

/* Hover lift for footer links — small motion hint */
.footer-grid a{position:relative}
.footer-grid a::after{
  content:"";
  position:absolute;left:0;bottom:2px;width:0;height:1px;background:var(--accent);
  transition:width 280ms cubic-bezier(.22,.8,.24,1);
}
.footer-grid a:hover::after{width:100%}

/* Day-card hover: warm sun glow from corner — coastal at-anchor feel */
.day-card{position:relative}
.day-card::after{
  content:"";
  position:absolute;right:-30%;top:-30%;width:60%;height:60%;
  background:radial-gradient(circle at center, rgba(230,114,75,0.18), transparent 70%);
  opacity:0;
  transition:opacity 420ms ease;
  pointer-events:none;
}
.day-card:hover::after{opacity:1}

/* Hotel card: gentle tilt on hover */
.hotel-card{will-change:transform}
@media (prefers-reduced-motion:reduce){
  .hotel-card, .day-card, .etap-card, .hotel-cover{transition:none !important}
  .day-card::after, .hotel-cover::before{transition:none !important}
}

/* Improve nav-toggle visible when cookie banner overlaps on small screens */
.nav-toggle:focus-visible{
  outline:2px solid var(--accent-soft);
  outline-offset:3px;
  box-shadow:0 0 0 5px rgba(230,114,75,0.28);
}

/* Stagger reveal for grid items inside revealed sections */
.etap-grid > .reveal,
.konaklama-grid > .reveal,
.bring-grid > .reveal{
  transition:opacity 600ms cubic-bezier(.2,.7,.2,1), transform 700ms cubic-bezier(.22,.8,.24,1);
}

/* ---------- Long text break ---------- */
p, li, td, th, h1, h2, h3, h4{word-break:break-word;overflow-wrap:anywhere}

/* ---------- Stagger reveal for grid children (more sophisticated) ---------- */
.etap-grid > .reveal:nth-child(1),
.konaklama-grid > .reveal:nth-child(1),
.bring-grid > .reveal:nth-child(1){transition-delay:0ms}
.etap-grid > .reveal:nth-child(2),
.konaklama-grid > .reveal:nth-child(2),
.bring-grid > .reveal:nth-child(2){transition-delay:90ms}
.etap-grid > .reveal:nth-child(3),
.konaklama-grid > .reveal:nth-child(3),
.bring-grid > .reveal:nth-child(3){transition-delay:180ms}
.etap-grid > .reveal:nth-child(4),
.konaklama-grid > .reveal:nth-child(4),
.bring-grid > .reveal:nth-child(4){transition-delay:270ms}
.etap-grid > .reveal:nth-child(5),
.konaklama-grid > .reveal:nth-child(5){transition-delay:360ms}
.etap-grid > .reveal:nth-child(6),
.konaklama-grid > .reveal:nth-child(6){transition-delay:450ms}
.etap-grid > .reveal:nth-child(7),
.konaklama-grid > .reveal:nth-child(7){transition-delay:540ms}

/* ---------- Timeline stop: theme micro-effect (concentric ripple on hover/active) ---------- */
.tl-stop{transition:transform 240ms cubic-bezier(.22,.8,.24,1)}
.tl-stop:hover{transform:translateY(-2px)}
.tl-stop .tl-dot{
  box-shadow:0 0 0 0 rgba(230,114,75,0);
  transition:transform 240ms cubic-bezier(.22,.8,.24,1), background 220ms ease, border-color 220ms ease, box-shadow 320ms ease;
}
.tl-stop:focus-visible .tl-dot{
  background:var(--accent);border-color:var(--accent);transform:scale(1.18);
  box-shadow:0 0 0 6px rgba(230,114,75,0.18);
}
.tl-stop.is-active .tl-dot{
  animation:dotPulse 2.4s cubic-bezier(.4,.1,.2,1) infinite;
}
@keyframes dotPulse{
  0%,100%{box-shadow:0 0 0 6px rgba(230,114,75,0.18)}
  50%{box-shadow:0 0 0 10px rgba(230,114,75,0.06)}
}
@media (prefers-reduced-motion:reduce){
  .tl-stop.is-active .tl-dot{animation:none}
}

/* ---------- Hotel card: subtle parallax tilt on cover ---------- */
.hotel-cover{will-change:transform}
.hotel-cover::after{
  content:attr(data-night);
  transition:transform 360ms cubic-bezier(.22,.8,.24,1);
}
.hotel-card:hover .hotel-cover::after{transform:translateY(-2px)}
.hotel-card:focus-within{transform:translateY(-4px); box-shadow:var(--shadow-2); border-color:var(--accent-soft)}

/* ---------- Etap card list "ripple" on hover ---------- */
.etap-card ul.molas li{transition:transform 280ms cubic-bezier(.22,.8,.24,1), color 220ms ease}
.etap-card:hover ul.molas li:nth-child(1){transform:translateX(3px); transition-delay:0ms}
.etap-card:hover ul.molas li:nth-child(2){transform:translateX(3px); transition-delay:60ms}
.etap-card:hover ul.molas li:nth-child(3){transform:translateX(3px); transition-delay:120ms}

/* ---------- Bring-col list: warm check tick on hover ---------- */
.bring-col li{transition:color 200ms ease}
.bring-col li::before{
  transition:background 220ms ease, border-color 220ms ease, transform 240ms cubic-bezier(.22,.8,.24,1);
}
.bring-col li:hover{color:var(--ink)}
.bring-col li:hover::before{background:var(--accent); border-color:var(--accent); transform:scale(1.06) rotate(-4deg)}

/* ---------- Extra-card subtle glow on hover ---------- */
.extra-card{
  transition:transform 300ms cubic-bezier(.22,.8,.24,1), border-color 280ms ease, box-shadow 300ms ease, background 220ms ease;
}
.extra-card:hover{transform:translateY(-2px); border-color:var(--accent-soft); box-shadow:var(--shadow-1)}
.extra-card:hover .delta{color:var(--accent)}
.extra-card .delta{transition:color 220ms ease, transform 240ms cubic-bezier(.22,.8,.24,1)}
.extra-card:hover .delta{transform:translateX(-2px)}

/* ---------- Contact list link underline grow ---------- */
.contact-list .val a{
  position:relative;
  display:inline-block;
  transition:color 220ms ease;
}
.contact-list .val a::after{
  content:"";
  position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:var(--accent);
  transform:scaleX(0);transform-origin:left;
  transition:transform 280ms cubic-bezier(.22,.8,.24,1);
}
.contact-list .val a:hover::after, .contact-list .val a:focus-visible::after{transform:scaleX(1)}

/* ---------- FAQ summary: smooth color shift + plus rotation already exists; add focus ring ---------- */
.faq-list summary{transition:color 200ms ease, padding 200ms ease}
.faq-list summary:hover{color:var(--accent)}
.faq-list details[open] > summary{color:var(--accent-2)}

/* ---------- Hero stripe: gentle horizon line that drifts ---------- */
.hero-stripe::after{
  background:
    radial-gradient(80% 60% at 80% 50%, rgba(230,114,75,0.18), transparent 70%),
    linear-gradient(180deg, transparent 60%, rgba(15,47,51,0.45) 100%);
  z-index:1;
  animation:horizonDrift 18s ease-in-out infinite alternate;
}
@keyframes horizonDrift{
  0%   {transform:translate3d(0,0,0)}
  100% {transform:translate3d(-2%,0.5%,0)}
}
@media (prefers-reduced-motion:reduce){
  .hero-stripe::after{animation:none}
}

/* ---------- Day card: warm-glow corner + tag breath ---------- */
.day-card .day-tag{transition:transform 300ms cubic-bezier(.22,.8,.24,1), background 220ms ease, color 220ms ease, box-shadow 280ms ease}
.day-card:hover .day-tag{transform:translateY(-1px); box-shadow:0 6px 14px -8px rgba(230,114,75,0.45)}
.day-card .day-tag.sea{transition:transform 300ms cubic-bezier(.22,.8,.24,1), background 220ms ease, color 220ms ease, box-shadow 280ms ease}
.day-card:hover .day-tag.sea{box-shadow:0 6px 14px -8px rgba(30,92,102,0.45)}

/* ---------- Brand-mark gentle spin on hover ---------- */
.brand:hover .brand-mark{transform:rotate(-12deg) scale(1.04)}
.brand-mark{transition:transform 320ms cubic-bezier(.22,.8,.24,1)}

/* ---------- Footer brand mark animate-in on focus ---------- */
.footer-brand .brand:focus-visible .brand-mark{transform:rotate(-8deg) scale(1.05)}

/* ---------- Improved skip-link visibility ---------- */
.skip-link:focus, .skip-link:focus-visible{
  left:8px;top:8px;border-radius:6px;
  outline:2px solid var(--accent-soft);
  outline-offset:2px;
}

/* ---------- Mobile menu links: bigger tap targets and hover translate ---------- */
.mobile-menu a{
  position:relative;
  transition:transform 320ms cubic-bezier(.22,.8,.24,1), opacity 280ms ease, color 220ms ease, padding-left 240ms ease;
}
.mobile-menu a:hover, .mobile-menu a:focus-visible{padding-left:8px; color:var(--accent)}
.mobile-menu a::before{
  content:"";
  position:absolute;left:-8px;top:50%;transform:translateY(-50%);
  width:0;height:2px;background:var(--accent);
  transition:width 240ms cubic-bezier(.22,.8,.24,1);
}
.mobile-menu a:hover::before, .mobile-menu a:focus-visible::before{width:14px}
.mobile-menu a.is-active{color:var(--accent)}
.mobile-menu a.is-active::before{width:14px}

/* ---------- Smaller phones: stop horizontal scrolling on rails into bleed ---------- */
@media (max-width:600px){
  .takvim-rail{grid-auto-columns:min(420px, 86vw); gap:14px; padding-bottom:24px}
  .day-card{padding:22px}
  .day-schedule li{grid-template-columns:64px 1fr; gap:12px}
  .price-main{padding:28px 22px}
  .price-main .price-num{font-size:48px}
  .extra-card{flex-direction:row; gap:14px; padding:18px 18px}
  .hero-stats{gap:18px}
  .timeline{padding:24px 0 18px}
}

/* ---------- Cookie banner: softer entrance, reject visually clearer ---------- */
.cookie-banner{
  transition:transform 320ms cubic-bezier(.22,.8,.24,1), opacity 260ms ease;
}
.cookie-banner h4{letter-spacing:-0.01em}
.cookie-banner::before{
  content:"";
  position:absolute;left:0;top:0;height:3px;width:100%;
  background:linear-gradient(90deg, var(--accent), var(--accent-soft), var(--accent-2-soft));
  border-radius:var(--r-md) var(--r-md) 0 0;
  opacity:0.85;
}

/* ---------- Section reveal: subtle perspective for atmosphere ---------- */
.section-head.reveal{transform:translateY(28px); transition:opacity 700ms cubic-bezier(.22,.8,.24,1), transform 700ms cubic-bezier(.22,.8,.24,1)}
.section-head.reveal.is-in{transform:translateY(0)}

/* ---------- Theme signature: scroll-linked bike position is handled in JS ---------- */

/* table-scroll v2: horizontal overflow + parent shrink fix */
.table-scroll {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 18px 0;
  border: 1px solid var(--line, rgba(0,0,0,0.12));
  border-radius: 6px;
}
.table-scroll > table { margin: 0 !important; min-width: 480px; width: 100%; }
/* Allow grid/flex ancestors to shrink below their min-content (table) so the
   wrapper can actually scroll instead of pushing the column wider than the
   container. */
:where(*:has(> .table-scroll), *:has(> * > .table-scroll), *:has(> * > * > .table-scroll)) {
  min-width: 0;
}

/* === Contact channels (polished) — egeetap: monoline, lift + underline === */
.contact-list li {
  /* upgrade existing 96px / 1fr grid to 28px / 96px / 1fr */
  grid-template-columns: 28px 88px 1fr;
  gap: 14px;
  padding: 14px 14px 14px 12px;
  border-radius: var(--r-sm);
  border-bottom-color: transparent;
  background: transparent;
  transition:
    background-color 280ms cubic-bezier(.22,.8,.24,1),
    box-shadow 320ms cubic-bezier(.22,.8,.24,1),
    transform 280ms cubic-bezier(.22,.8,.24,1);
  position: relative;
}
.contact-list li::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 14px;
  bottom: 0;
  height: 1px;
  background: var(--line-soft);
  transition: background-color 240ms ease;
}
.contact-list li:last-child::after { display: none; }
.contact-list li:hover,
.contact-list li:focus-within {
  background: var(--surface);
  box-shadow: var(--shadow-1);
  transform: translateY(-1px);
}
.contact-list li:hover::after,
.contact-list li:focus-within::after { background: transparent; }
.cl-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-top: -2px;
  color: var(--accent-2);
  border: 1px solid var(--line-soft);
  border-radius: 50%;
  background: var(--surface);
  transition:
    color 240ms ease,
    border-color 240ms ease,
    transform 320ms cubic-bezier(.22,.8,.24,1);
  flex-shrink: 0;
}
.cl-icon svg { width: 16px; height: 16px; display: block; stroke-width: 1.5; }
.contact-list li:hover .cl-icon,
.contact-list li:focus-within .cl-icon {
  color: var(--accent);
  border-color: var(--accent-soft);
  transform: scale(1.05);
}
.contact-list li:hover .lbl { color: var(--accent-2); }
.contact-list .lbl { transition: color 240ms ease; }

@media (max-width: 600px) {
  .contact-list li {
    grid-template-columns: 24px 1fr;
    grid-template-areas: "icon lbl" "icon val";
    gap: 4px 12px;
    padding: 12px 8px 12px 8px;
  }
  .cl-icon { grid-area: icon; align-self: start; width: 24px; height: 24px; margin-top: 2px; }
  .cl-icon svg { width: 14px; height: 14px; }
  .contact-list li .lbl { grid-area: lbl; padding-top: 4px; }
  .contact-list li .val { grid-area: val; }
}
@media (prefers-reduced-motion: reduce) {
  .contact-list li, .cl-icon {
    transition: color .2s ease, background-color .2s ease !important;
    transform: none !important;
  }
  .contact-list li:hover { transform: none !important; }
}