/* =========================================================================
   OCEAN LUXE — Ultra-premium sea-concept design system
   Line-art marine motifs, wave seams, rising bubbles, parallax & tilt depth.
   Loaded after style.css / enhancements.css — extends, never overrides layout.
   ========================================================================= */

:root{
  --motif-fish: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20220%20200%22%20fill%3D%22none%22%20stroke%3D%22%23f4efe2%22%20stroke-width%3D%221.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%0A%3Cpath%20d%3D%22M20%20100c22-34%2060-52%2096-52%2030%200%2052%2016%2064%2036-12%2020-34%2036-64%2036-36%200-74-18-96-52z%22/%3E%0A%3Cpath%20d%3D%22M180%2084l24-20-6%2036%206%2036-24-20%22/%3E%0A%3Ccircle%20cx%3D%2272%22%20cy%3D%2288%22%20r%3D%223.5%22%20fill%3D%22%23f4efe2%22%20stroke%3D%22none%22/%3E%0A%3Cpath%20d%3D%22M60%20100c14-6%2030-8%2046-4M56%20116c18%206%2040%206%2058-2%22%20stroke-width%3D%221%22/%3E%0A%3C/svg%3E");
  --motif-crab: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20200%20170%22%20fill%3D%22none%22%20stroke%3D%22%23f4efe2%22%20stroke-width%3D%221.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%0A%3Cellipse%20cx%3D%22100%22%20cy%3D%22110%22%20rx%3D%2246%22%20ry%3D%2230%22/%3E%0A%3Cpath%20d%3D%22M60%2095C40%2080%2026%2078%2014%2084M64%20128c-18%2010-34%2010-46%204M140%2095c20-15%2034-17%2046-11M136%20128c18%2010%2034%2010%2046%204%22/%3E%0A%3Cpath%20d%3D%22M70%2084C58%2064%2054%2046%2060%2030M130%2084c12-20%2016-38%2010-54%22/%3E%0A%3Cpath%20d%3D%22M56%2028c-6-4-14-2-16%204M64%2032c-8-2-14%204-14%2010M144%2028c6-4%2014-2%2016%204M136%2032c8-2%2014%204%2014%2010%22/%3E%0A%3Ccircle%20cx%3D%2282%22%20cy%3D%22104%22%20r%3D%223%22%20fill%3D%22%23f4efe2%22%20stroke%3D%22none%22/%3E%0A%3Ccircle%20cx%3D%22118%22%20cy%3D%22104%22%20r%3D%223%22%20fill%3D%22%23f4efe2%22%20stroke%3D%22none%22/%3E%0A%3C/svg%3E");
  --motif-starfish: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20200%20200%22%20fill%3D%22none%22%20stroke%3D%22%23f4efe2%22%20stroke-width%3D%221.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%0A%3Cpath%20d%3D%22M100%2012c8%2030%2014%2042%2030%2052%2026-18%2040-16%2040-16-10%2024-14%2036-8%2056%2020%2012%2028%2024%2028%2024-26-2-38%202-52%2020-2%2026%204%2040%204%2040-20-16-32-22-52-22-20%200-32%206-52%2022%200%200%206-14%204-40-14-18-26-24-52-20%200%200%208-12%2028-24%206-20%202-32-8-56%200%200%2014-2%2040%2016%2016-10%2022-22%2030-52z%22/%3E%0A%3Ccircle%20cx%3D%22100%22%20cy%3D%22100%22%20r%3D%2210%22/%3E%0A%3C/svg%3E");
  --motif-coral: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20200%20200%22%20fill%3D%22none%22%20stroke%3D%22%23f4efe2%22%20stroke-width%3D%221.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%0A%3Cpath%20d%3D%22M100%20190V110M100%20130c-18-10-24-28-18-46M100%20120c20-8%2028-24%2024-44M100%20150c-26%200-38-14-40-32M100%20145c24-4%2036-18%2038-36M82%2064c-4-12%202-24%2012-28M118%2060c6-12%202-24-8-30M100%20110c10-16%208-30%200-42%22/%3E%0A%3Ccircle%20cx%3D%2294%22%20cy%3D%2234%22%20r%3D%223%22/%3E%3Ccircle%20cx%3D%22130%22%20cy%3D%2230%22%20r%3D%222.4%22/%3E%3Ccircle%20cx%3D%2260%22%20cy%3D%2234%22%20r%3D%222.4%22/%3E%0A%3C/svg%3E");
  --motif-shell: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20200%20190%22%20fill%3D%22none%22%20stroke%3D%22%23f4efe2%22%20stroke-width%3D%221.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%0A%3Cpath%20d%3D%22M100%20170C50%20150%2024%20108%2030%2062c22%2010%2034%204%2042-14%2010%2020%2020%2026%2028%2026s18-6%2028-26c8%2018%2020%2024%2042%2014%206%2046-20%2088-70%20108z%22/%3E%0A%3Cpath%20d%3D%22M100%20170V70M76%2074l6%2092M124%2074l-6%2092M54%2084l16%2082M146%2084l-16%2082%22/%3E%0A%3C/svg%3E");
  --motif-octopus: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20200%20220%22%20fill%3D%22none%22%20stroke%3D%22%23f4efe2%22%20stroke-width%3D%221.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%0A%3Cpath%20d%3D%22M70%2090a30%2030%200%201160%200c0%2014-8%2020-8%2030%22/%3E%0A%3Ccircle%20cx%3D%2282%22%20cy%3D%2282%22%20r%3D%223%22%20fill%3D%22%23f4efe2%22%20stroke%3D%22none%22/%3E%0A%3Ccircle%20cx%3D%22118%22%20cy%3D%2282%22%20r%3D%223%22%20fill%3D%22%23f4efe2%22%20stroke%3D%22none%22/%3E%0A%3Cpath%20d%3D%22M62%20108c-10%2014-6%2030%204%2034-10%206-14%2022-4%2030M78%20116c-6%2018%200%2032%2014%2034-8%2010-6%2026%206%2030M100%20120v40c0%2016%206%2026%2018%2028M122%20116c6%2018%200%2032-14%2034%208%2010%206%2026-6%2030M138%20108c10%2014%206%2030-4%2034%2010%206%2014%2022%204%2030%22/%3E%0A%3C/svg%3E");
  --motif-seahorse: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20170%20210%22%20fill%3D%22none%22%20stroke%3D%22%23f4efe2%22%20stroke-width%3D%221.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%0A%3Cpath%20d%3D%22M108%2030c16%202%2026%2016%2022%2032-3%2012-14%2016-14%2026%200%208%2010%208%2014%2018%206%2014-4%2026-18%2026%204%208%202%2016-6%2020%206%206%206%2016-2%2022-10%208-26%206-34-4-14-16-16-40-6-58%206-11%204-16-2-22-10-10-8-26%204-34%208-6%2014-4%2022-6%208-2%2012-10%2020-20z%22/%3E%0A%3Ccircle%20cx%3D%22112%22%20cy%3D%2248%22%20r%3D%223%22%20fill%3D%22%23f4efe2%22%20stroke%3D%22none%22/%3E%0A%3Cpath%20d%3D%22M70%2096c-10-2-18%204-18%2012M62%20118c-8%204-10%2014-4%2020%22%20stroke-width%3D%221%22/%3E%0A%3C/svg%3E");
  --motif-seaweed: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20200%20190%22%20fill%3D%22none%22%20stroke%3D%22%23f4efe2%22%20stroke-width%3D%221.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%0A%3Cpath%20d%3D%22M40%20190c0-50%2020-60%204-90s10-64-4-90%22/%3E%0A%3Cpath%20d%3D%22M100%20190c0-60-24-70-6-104s-8-56%206-80%22/%3E%0A%3Cpath%20d%3D%22M160%20190c0-46%2018-56%204-84s8-58-4-86%22/%3E%0A%3C/svg%3E");
  --motif-wave: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20300%20100%22%20fill%3D%22none%22%20stroke%3D%22%23f4efe2%22%20stroke-width%3D%221.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%0A%3Cpath%20d%3D%22M0%2040c20-16%2040-16%2060%200s40%2016%2060%200%2040-16%2060%200%2040%2016%2060%200%2040-16%2060%200%22/%3E%0A%3Cpath%20d%3D%22M0%2070c20-16%2040-16%2060%200s40%2016%2060%200%2040-16%2060%200%2040%2016%2060%200%2040-16%2060%200%22%20stroke-width%3D%221%22/%3E%0A%3C/svg%3E");
  --motif-bubbles: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20140%20190%22%20fill%3D%22none%22%20stroke%3D%22%23f4efe2%22%20stroke-width%3D%221.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%0A%3Ccircle%20cx%3D%2240%22%20cy%3D%22150%22%20r%3D%2210%22/%3E%3Ccircle%20cx%3D%2270%22%20cy%3D%22110%22%20r%3D%226%22/%3E%3Ccircle%20cx%3D%2260%22%20cy%3D%2270%22%20r%3D%2214%22/%3E%0A%3Ccircle%20cx%3D%22100%22%20cy%3D%2240%22%20r%3D%225%22/%3E%3Ccircle%20cx%3D%2230%22%20cy%3D%2290%22%20r%3D%224%22/%3E%3Ccircle%20cx%3D%2295%22%20cy%3D%22130%22%20r%3D%228%22/%3E%0A%3C/svg%3E");
}

/* ---------------------------------------------------------------------
   1. TYPOGRAPHY — refined serif/sans premium scale
   --------------------------------------------------------------------- */
h1, h2, h3{ letter-spacing:0.005em; }
.eyebrow{
  font-family:'Space Mono',monospace; font-size:0.68rem; letter-spacing:0.22em;
  text-transform:uppercase; color:var(--gold); opacity:0.92;
}
.explore-head h2, .story h2, .menu-intro h2, section > .wrap > h2{
  font-weight:500;
}

/* ---------------------------------------------------------------------
   2. LINE-ART SEA MOTIFS — decorative, non-blocking, section-unique
   --------------------------------------------------------------------- */
.sea-motif{ position:absolute; pointer-events:none; z-index:0; background-repeat:no-repeat; background-size:contain; will-change:transform; }
section{ position:relative; }

/* Guarantee real content always paints above the z-index:0 decorative motifs,
   even where the section's content wrapper had no stacking context of its own. */
.testimonials > .wrap, .explore > .wrap, .menu-highlight > .wrap,
.gallery-preview > .wrap, .contact > .wrap, .contact > .reserve-wrap, .category > .wrap,
footer > .wrap, #dukkan > .gallery-intro, #dukkan > .gallery-filter,
#dukkan > .gallery-grid{
  position:relative; z-index:1;
}

/* Hero: fish gliding upper-right + seaweed lower-left */
.hero::before{
  content:""; position:absolute; top:6%; right:2%; width:min(30vw,360px); height:min(30vw,360px);
  background-image:var(--motif-fish); background-repeat:no-repeat; background-size:contain;
  opacity:0.05; z-index:0; pointer-events:none; transform:translateY(var(--parallax-a,0px)) scaleX(-1);
}
.hero::after{
  content:""; position:absolute; bottom:-4%; left:-2%; width:min(22vw,260px); height:min(34vw,400px);
  background-image:var(--motif-seaweed); background-repeat:no-repeat; background-size:contain;
  opacity:0.06; z-index:0; pointer-events:none; transform:translateY(var(--parallax-b,0px));
}

/* Testimonials: starfish + bubbles (replaces old single deco) */
.ts-bg-deco{ display:none; }
.testimonials::before{
  content:""; position:absolute; top:-6%; right:-3%; width:min(24vw,300px); height:min(24vw,300px);
  background-image:var(--motif-starfish); opacity:0.05; transform:translateY(var(--parallax-a,0px)) rotate(-8deg);
}
.testimonials::after{
  content:""; position:absolute; bottom:2%; left:-4%; width:min(16vw,190px); height:min(22vw,260px);
  background-image:var(--motif-bubbles); opacity:0.05; transform:translateY(var(--parallax-b,0px));
}

/* Explore / kıyı şeridi sections: crab + coral */
.explore::before{
  content:""; position:absolute; top:-4%; left:-3%; width:min(20vw,240px); height:min(17vw,200px);
  background-image:var(--motif-crab); opacity:0.05; transform:translateY(var(--parallax-a,0px));
}
.explore::after{
  content:""; position:absolute; bottom:-6%; right:-3%; width:min(18vw,220px); height:min(20vw,240px);
  background-image:var(--motif-coral); opacity:0.055; transform:translateY(var(--parallax-b,0px));
}

/* Menu highlight: shell + octopus */
.menu-highlight::before{
  content:""; position:absolute; top:0; right:-2%; width:min(18vw,210px); height:min(17vw,200px);
  background-image:var(--motif-shell); opacity:0.05; transform:translateY(var(--parallax-a,0px));
}

/* Gallery preview: octopus lower-left */
.gallery-preview::before{
  content:""; position:absolute; bottom:-8%; left:-3%; width:min(20vw,230px); height:min(22vw,250px);
  background-image:var(--motif-octopus); opacity:0.05; transform:translateY(var(--parallax-b,0px));
}

/* Story (about) page: seahorse */
.story::before{
  content:""; position:absolute; top:-2%; right:-2%; width:min(18vw,200px); height:min(22vw,250px);
  background-image:var(--motif-seahorse); opacity:0.055; transform:translateY(var(--parallax-a,0px));
}

/* Contact sections: shell + starfish */
.contact::before{
  content:""; position:absolute; top:-4%; left:-3%; width:min(18vw,210px); height:min(17vw,200px);
  background-image:var(--motif-starfish); opacity:0.05; transform:translateY(var(--parallax-a,0px)) rotate(10deg);
}
.contact::after{
  content:""; position:absolute; bottom:-4%; right:-2%; width:min(16vw,190px); height:min(15vw,180px);
  background-image:var(--motif-shell); opacity:0.05; transform:translateY(var(--parallax-b,0px));
}

/* Gallery page main section */
#dukkan::before{
  content:""; position:absolute; top:-3%; right:-3%; width:min(20vw,230px); height:min(20vw,230px);
  background-image:var(--motif-crab); opacity:0.05; transform:translateY(var(--parallax-a,0px));
}
#dukkan::after{
  content:""; position:absolute; bottom:-5%; left:-3%; width:min(16vw,190px); height:min(24vw,280px);
  background-image:var(--motif-coral); opacity:0.055; transform:translateY(var(--parallax-b,0px));
}

/* Menu category sections — cycling distinct motifs, never repeating next to each other */
.category:nth-of-type(9n+1)::before{ background-image:var(--motif-fish); }
.category:nth-of-type(9n+2)::before{ background-image:var(--motif-crab); }
.category:nth-of-type(9n+3)::before{ background-image:var(--motif-starfish); }
.category:nth-of-type(9n+4)::before{ background-image:var(--motif-coral); }
.category:nth-of-type(9n+5)::before{ background-image:var(--motif-shell); }
.category:nth-of-type(9n+6)::before{ background-image:var(--motif-octopus); }
.category:nth-of-type(9n+7)::before{ background-image:var(--motif-seahorse); }
.category:nth-of-type(9n+8)::before{ background-image:var(--motif-seaweed); }
.category:nth-of-type(9n+9)::before{ background-image:var(--motif-bubbles); }
.category::before{
  content:""; position:absolute; top:2%; right:-2%; width:min(14vw,170px); height:min(14vw,170px);
  opacity:0.045; transform:translateY(var(--parallax-a,0px)); background-repeat:no-repeat; background-size:contain;
}
.category:nth-of-type(even)::before{ right:auto; left:-2%; transform:translateY(var(--parallax-b,0px)) scaleX(-1); }

/* Footer: gentle wave-pattern watermark */
footer{ position:relative; overflow:hidden; }
footer::before{
  content:""; position:absolute; top:6%; left:50%; width:min(70vw,640px); height:120px; transform:translateX(-50%);
  background-image:var(--motif-wave); opacity:0.035; background-repeat:no-repeat; background-size:contain;
}

@media (max-width:700px){
  .sea-motif, .hero::before, .hero::after, .testimonials::before, .testimonials::after,
  .explore::before, .explore::after, .menu-highlight::before, .gallery-preview::before,
  .story::before, .contact::before, .contact::after, #dukkan::before, #dukkan::after,
  .category::before{ opacity:0.035; }
}

/* ---------------------------------------------------------------------
   3. WAVE SEAMS — sections meet along a drawn wave line, not a hard edge
   (injected by ocean-luxe.js between consecutive top-level sections)
   --------------------------------------------------------------------- */
.wave-seam{
  position:relative; z-index:1; width:100%; overflow:hidden;
  height:clamp(46px,7vw,96px); margin:clamp(-30px,-4vw,-56px) 0; pointer-events:none;
}
.wave-seam svg{ display:block; width:100%; height:100%; }
.wave-seam .seam-line{ fill:none; stroke:rgba(244,240,229,0.16); stroke-width:1.1; }
.wave-seam .seam-line-2{ fill:none; stroke:rgba(205,164,74,0.14); stroke-width:1; }
.wave-seam .seam-glint{ fill:none; stroke:rgba(244,240,229,0.34); stroke-width:1; stroke-dasharray:2 7; }
.wave-seam .seam-bubble{ fill:rgba(244,240,229,0.22); }
@media (max-width:700px){
  .wave-seam{ height:clamp(34px,9vw,56px); margin:clamp(-20px,-6vw,-34px) 0; }
}

/* ---------------------------------------------------------------------
   4. RISING BUBBLES — ambient full-page overlay, GPU-cheap (transform+opacity)
   --------------------------------------------------------------------- */
#seaBubbles{
  position:fixed; inset:0; z-index:1; pointer-events:none; overflow:hidden;
}
.sea-bubble{
  position:absolute; bottom:-40px; left:var(--bx,50%);
  width:var(--bs,8px); height:var(--bs,8px); border-radius:50%;
  background:radial-gradient(circle at 32% 28%, rgba(244,240,229,0.55), rgba(244,240,229,0.05) 70%);
  border:1px solid rgba(244,240,229,0.18);
  opacity:0; will-change:transform, opacity;
  animation:seaBubbleRise var(--bd,18s) linear var(--bdelay,0s) infinite;
}
@keyframes seaBubbleRise{
  0%{ transform:translate(0,0) scale(0.8); opacity:0; }
  8%{ opacity:0.55; }
  50%{ transform:translate(calc(var(--bw,14px)),-52vh) scale(1); }
  92%{ opacity:0.4; }
  100%{ transform:translate(calc(var(--bw,14px) * -1),-108vh) scale(0.9); opacity:0; }
}
@media (max-width:700px){
  #seaBubbles{ display:none; } /* keep mobile scroll silky-smooth */
}
@media (prefers-reduced-motion: reduce){
  .sea-bubble{ animation:none; display:none; }
}

/* ---------------------------------------------------------------------
   5. TILT DEPTH — hero responds to pointer with subtle 3D parallax
   --------------------------------------------------------------------- */
.hero{ perspective:1400px; }
.hero-video, .hero-overlay{
  transform:rotateX(var(--tilt-y,0deg)) rotateY(var(--tilt-x,0deg)) scale(1.02);
  transition:transform .5s cubic-bezier(.22,.61,.36,1);
  transform-style:preserve-3d;
}
@media (max-width:900px), (pointer:coarse){
  .hero-video, .hero-overlay{ transform:none !important; transition:none; }
}

/* ---------------------------------------------------------------------
   6. PREMIUM SURFACE POLISH — gold hairlines, glass cards, generous air
   --------------------------------------------------------------------- */
.explore-card, .highlight-card, .contact-card, .photo-slot.filled{
  position:relative;
}
.explore-card::after, .contact-card::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  box-shadow:0 0 0 1px rgba(205,164,74,0.06) inset;
  transition:box-shadow .35s ease;
}
.explore-card:hover::after, .contact-card:hover::after{
  box-shadow:0 0 0 1px rgba(205,164,74,0.22) inset;
}

.btn-primary{
  position:relative; overflow:hidden;
  box-shadow:0 10px 26px -12px rgba(34,184,172,0.5);
}
.btn-primary::before{
  content:""; position:absolute; inset:0; opacity:0; pointer-events:none;
  background:linear-gradient(120deg, transparent, rgba(255,255,255,0.35), transparent);
  transform:translateX(-120%); transition:transform .7s ease, opacity .3s ease;
}
.btn-primary:hover::before{ opacity:1; transform:translateX(120%); }

/* Section rhythm — a touch more breathing room, premium pacing */
.explore-head{ margin-bottom:8px; }
.explore-head p{ opacity:0.86; }

::selection{ background:var(--current); color:var(--foam); }

@media (prefers-reduced-motion: reduce){
  .sea-motif, .hero::before, .hero::after{ transition:none !important; }
}