:root{
  --paper:#F7F5F0;
  --ink:#131311;
  --gray:#7C7770;
  --lightgray:#E6E2D9;
  --border:3px solid var(--ink);
  --shadow:6px 6px 0 var(--ink);
  --font-display:'Archivo Black','Manrope',system-ui,sans-serif;
  --font-body:'Manrope','Archivo',system-ui,sans-serif;
  --font-script:'Caveat','Yellowtail',cursive;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body);
  background:var(--paper);
  color:var(--ink);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
::selection{background:var(--ink);color:var(--paper)}

/* ---------- HEADER ---------- */
header{
  position:fixed;inset:0 0 auto 0;z-index:260;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:10px 16px;
  background:var(--paper);
  border-bottom:var(--border);
  transition:padding .3s;
}
body.scrolled header{padding:6px 16px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none}
.logo-img{height:clamp(38px,6vw,68px);width:auto}
.header-social{display:flex;gap:8px;align-items:center}
.icon-btn{
  width:36px;height:36px;display:grid;place-items:center;
  border:var(--border);border-radius:50%;background:var(--paper);
  text-decoration:none;transition:transform .15s, background .15s;
}
.icon-btn:hover{background:var(--ink);transform:rotate(-8deg) scale(1.06)}
.icon-btn:hover svg{fill:var(--paper);stroke:var(--paper)}
.icon-btn svg{width:17px;height:17px;fill:var(--ink);stroke:var(--ink);transition:fill .15s, stroke .15s}

/* ---------- NAV ---------- */
.nav-links{display:none}
.header-right{display:flex;align-items:center;gap:10px}
.header-right .header-order{display:none}
.nav-toggle{
  width:40px;height:40px;display:grid;place-items:center;align-content:center;gap:3.5px;
  border:var(--border);border-radius:50%;background:var(--paper);
  padding:0;cursor:pointer;flex-shrink:0;
}
.nav-toggle span{display:block;width:17px;height:2.5px;border-radius:2px;background:var(--ink);transition:transform .25s ease, opacity .2s ease}
body.nav-open .nav-toggle span:nth-child(1){transform:translateY(6px) rotate(45deg)}
body.nav-open .nav-toggle span:nth-child(2){opacity:0}
body.nav-open .nav-toggle span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

.mobile-nav{
  position:fixed;inset:0;z-index:250;background:var(--paper);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;
  transform:translateY(-100%);opacity:0;
  transition:transform .35s cubic-bezier(.2,.8,.2,1), opacity .35s ease;
  visibility:hidden;
}
body.nav-open .mobile-nav{transform:translateY(0);opacity:1;visibility:visible}
.mobile-nav nav{display:flex;flex-direction:column;align-items:center;gap:22px}
.mobile-nav nav a{
  font-family:var(--font-display);font-size:clamp(1.7rem,8vw,2.4rem);
  text-transform:uppercase;text-decoration:none;color:var(--ink);
}
.mobile-nav nav a[aria-current="page"]{text-decoration:underline;text-decoration-thickness:4px;text-underline-offset:8px}
.mobile-nav .mobile-nav-social{display:flex;gap:14px}
body.nav-open{overflow:hidden}

@media(min-width:900px){
  .nav-links{display:flex;gap:26px;align-items:center;font-weight:800;font-size:.92rem;letter-spacing:.03em;text-transform:uppercase}
  .nav-links a{text-decoration:none;position:relative;padding:4px 0}
  .nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:3px;background:var(--ink);transition:right .25s ease}
  .nav-links a:hover::after,.nav-links a[aria-current="page"]::after{right:0}
  .header-right .header-order{display:inline-flex}
  .nav-toggle{display:none}
}

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-display);font-size:1rem;
  text-decoration:none;text-align:center;
  padding:14px 22px;border:var(--border);border-radius:999px;
  box-shadow:var(--shadow);
  transition:transform .15s, box-shadow .15s;
  cursor:pointer;
}
.btn:active,.btn:hover{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--ink)}
.btn-ink{background:var(--ink);color:var(--paper)}
.btn-paper{background:var(--paper);color:var(--ink)}
.btn-white{background:#fff;color:var(--ink)}
.btn-ink.on-ink{box-shadow:6px 6px 0 var(--paper);border-color:var(--paper)}
.btn-ink.on-ink:hover{box-shadow:2px 2px 0 var(--paper)}
.btn-sm{padding:9px 14px;font-size:.82rem;box-shadow:3px 3px 0 var(--ink)}
.btn-sm:hover,.btn-sm:active{box-shadow:1px 1px 0 var(--ink)}

/* ---------- HERO + EXPLOSION ---------- */
#hero{position:relative;background:var(--paper)}
.hero-pin{
  height:100svh;
  position:relative;overflow:hidden;
}
.hero-top{
  position:absolute;top:calc(119px + 1vh);left:0;right:0;
  text-align:center;z-index:3;
}
.hero-logo-text{width:min(34vw,208px);height:auto;margin:0 auto}
.hero-tag{margin-top:10px;font-weight:800;font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink)}

.hero-canvas-wrap{
  position:absolute;inset:0;z-index:2;
}
.hero-poster{object-fit:cover;object-position:49% 63%}

.scroll-cue{
  position:absolute;bottom:calc(86px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);
  font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  display:flex;flex-direction:column;align-items:center;gap:4px;z-index:3;
  width:max-content;max-width:92vw;
  background:none;border:0;padding:6px;margin:0;font-family:inherit;color:inherit;
  appearance:none;-webkit-appearance:none;text-align:center;line-height:normal;
  cursor:pointer;transition:opacity .2s ease;
}
.scroll-cue:hover,.scroll-cue:focus-visible{opacity:.7}
.scroll-cue .cue-text{font-size:clamp(.56rem,2.6vw,.72rem);white-space:nowrap}
.scroll-cue .cue-arrow{font-size:1.1rem;animation:cuebounce 1.4s ease-in-out infinite}
@keyframes cuebounce{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}

.seed{position:absolute;width:13px;height:8px;background:var(--lightgray);border:2px solid var(--ink);border-radius:50%;opacity:.8;z-index:1}
.badge-open{
  position:absolute;top:130px;right:12px;width:92px;height:92px;z-index:3;
  animation:spin 16s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

@media(max-width:899px){
  /* The wide BIBO logo lockup can reach far enough right on narrow
     screens to collide with this corner badge — shrink the badge and
     narrow the logo enough that neither one reaches into the other's
     lane, keeping the badge clear of the fixed header above it too. */
  .badge-open{width:58px;height:58px;top:112px;right:10px}
  .hero-logo-text{width:min(26vw,152px)}
}

body.reduced .hero-pin{height:auto;min-height:100svh;padding-bottom:60px}

/* ---------- MARQUEE ---------- */
.marquee{
  overflow:hidden;border-top:var(--border);border-bottom:var(--border);
  background:var(--ink);color:var(--paper);
  padding:10px 0;white-space:nowrap;
}
.marquee.invert{background:var(--paper);color:var(--ink)}
.marquee-track{display:inline-flex;animation:marquee 22s linear infinite;width:max-content}
.marquee span{
  font-family:var(--font-display);font-size:1.1rem;letter-spacing:.06em;
  padding:0 14px;
}
@keyframes marquee{to{transform:translateX(-25%)}}

/* ---------- SECTIONS COMMON ---------- */
section{position:relative}
.wrap{max-width:1100px;margin:0 auto;padding:0 18px}
.section-head{padding:120px 0 8px;text-align:center}
.section-head .eyebrow{font-family:var(--font-script);font-size:clamp(1.5rem,6vw,2.2rem);display:block;transform:rotate(-2deg)}
.section-head h1,
.section-head h2{
  font-family:var(--font-display);
  font-size:clamp(2.2rem,9vw,4rem);
  text-transform:uppercase;line-height:1.05;
  display:inline-block;
}
.section-head h1 em,
.section-head h2 em{
  font-style:normal;
  background:linear-gradient(transparent 60%, var(--lightgray) 60%, var(--lightgray) 94%, transparent 94%);
}
.sticker-note{
  display:inline-block;margin-top:14px;
  font-family:var(--font-script);font-size:1.25rem;color:var(--paper);
  background:var(--ink);
  padding:7px 16px;transform:rotate(-3deg);
  animation:wiggle 3.4s ease-in-out infinite;
}
@keyframes wiggle{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(2deg)}}

/* ---------- MENU CARDS ---------- */
.card{
  scroll-snap-align:center;
  background:#fff;border:var(--border);border-radius:18px;
  box-shadow:var(--shadow);overflow:hidden;
  display:flex;flex-direction:column;position:relative;
  transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s cubic-bezier(.2,.8,.2,1);
}
.card:hover,.card:focus-within{
  transform:translate(-6px,-6px);
  box-shadow:11px 11px 0 var(--ink);
}
.card::before{
  content:"";
  position:absolute;top:0;left:0;right:0;aspect-ratio:4/3;
  background:linear-gradient(115deg, transparent 25%, rgba(255,255,255,.55) 48%, transparent 72%);
  transform:translateX(-130%);
  transition:transform .8s cubic-bezier(.2,.8,.2,1);
  pointer-events:none;z-index:1;
}
.card:hover::before{transform:translateX(130%)}
.card-img{aspect-ratio:4/3;object-fit:cover;width:100%;border-bottom:var(--border);background:var(--paper);transition:filter .4s ease}
.card:hover .card-img{filter:brightness(1.03)}
.card-illu{aspect-ratio:4/3;display:grid;place-items:center;border-bottom:var(--border);background:var(--lightgray);font-size:4.2rem}
.card-body{padding:14px 16px 18px;display:flex;flex-direction:column;gap:6px;flex:1}
.price-opts{font-size:.78rem;font-weight:800;letter-spacing:.02em;color:var(--ink);margin:2px 0 6px}
.card h3{font-family:var(--font-display);font-size:1.08rem;line-height:1.15}
.card p{font-size:.86rem;line-height:1.45;color:#4c4841}
.price{
  position:absolute;top:10px;right:10px;z-index:2;
  font-family:var(--font-display);font-size:1rem;
  background:var(--paper);border:var(--border);border-radius:999px;
  padding:6px 12px;box-shadow:3px 3px 0 var(--ink);
  transform:rotate(4deg);
  animation:pricewiggle 3.6s ease-in-out infinite;
}
@keyframes pricewiggle{0%,100%{transform:rotate(4deg)}50%{transform:rotate(-3deg) translateY(-2px)}}
.card:nth-child(2n) .price{animation-delay:.9s}
.card:nth-child(3n) .price{animation-delay:1.8s}
.card:nth-child(4n) .price{animation-delay:2.4s}
.tag{
  align-self:flex-start;font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  background:var(--ink);color:var(--paper);padding:3px 9px;border-radius:999px;
}
.tag.outline{background:transparent;color:var(--ink);border:2px solid var(--ink)}

.grid{
  display:grid;grid-template-columns:1fr;gap:20px;padding:26px 0 10px;
}
.grid.sides{grid-template-columns:1fr 1fr;gap:14px}
.grid.sides .card h3{font-size:.92rem}
.grid.sides .card p{display:none}
.grid.sides .price{font-size:.85rem;padding:5px 10px}
.subhead{
  display:flex;align-items:center;gap:12px;margin:42px 0 4px;
  font-family:var(--font-display);font-size:1.3rem;text-transform:uppercase;
}
.subhead::after{content:"";flex:1;height:3px;background:var(--ink)}

.chips{display:flex;flex-wrap:wrap;gap:10px;padding:16px 0 10px}
#menu .chips{padding-bottom:70px}
.chip{
  font-weight:800;font-size:.9rem;
  border:var(--border);border-radius:999px;background:#fff;
  padding:10px 16px;box-shadow:3px 3px 0 var(--ink);
}
.chip small{font-weight:600;color:var(--gray)}

/* ---------- ORDER / FAIM ---------- */
#commander{background:var(--lightgray);color:var(--ink);border-top:var(--border);margin-top:70px}
#wrapPoster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:4;pointer-events:none}
#wrapCanvas{position:absolute;inset:0;width:100%;height:100%;z-index:5;pointer-events:none}
@media(prefers-reduced-motion:reduce){#wrapPoster{display:none}}
#commander .wrap{position:relative;z-index:1;padding:64px 18px;text-align:center}
#commander h2{margin:0;font-weight:400;line-height:1}
#commander .sub{font-family:var(--font-script);font-size:1.7rem;color:var(--gray);margin:8px 0 26px;display:block;transform:rotate(-2deg)}
#commander .platforms{display:flex;flex-direction:column;gap:14px;max-width:420px;margin:0 auto}
#commander .note{margin-top:18px;font-size:.85rem;font-weight:600;color:var(--gray)}
#commander .note a{color:var(--ink);text-decoration:underline}

/* ---------- MENU CTA BANNER (home / about) ---------- */
.menu-cta{text-align:center;padding:20px 18px 10px}
.menu-cta p{font-size:.95rem;color:var(--gray);margin-bottom:16px;max-width:420px;margin-left:auto;margin-right:auto}
#about .menu-cta{padding-bottom:70px}

/* ---------- ADDRESSES ---------- */
#adresses .cards,.addr-cards{display:grid;grid-template-columns:minmax(0,420px);justify-content:center;gap:16px;padding:26px 0}
.addr{
  background:#fff;border:var(--border);border-radius:16px;box-shadow:var(--shadow);
  padding:18px;position:relative;
}
.addr .arr{
  font-family:var(--font-display);font-size:.85rem;
  background:var(--ink);color:var(--paper);
  display:inline-block;padding:4px 12px;border-radius:999px;margin-bottom:10px;
}
.addr{text-align:center}
.addr .actions{justify-content:center}
.addr .hours{text-align:center}
.addr h3{font-family:var(--font-display);font-size:1.15rem}
.addr p{font-size:.9rem;margin-top:4px}
.addr .hours{font-size:.82rem;color:var(--gray);margin-top:8px;line-height:1.5}
.addr .actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
#map{
  background:#EFEDE6;
  height:380px;border:var(--border);border-radius:16px;box-shadow:var(--shadow);
  margin:6px 0 14px;z-index:1;
  filter:grayscale(1) contrast(1.05);
}
.map-pin{
  width:38px;height:38px;display:grid;place-items:center;
  background:var(--paper);border:3px solid var(--ink);border-radius:50% 50% 50% 4px;
  font-family:var(--font-display);font-size:1rem;color:var(--ink);
  box-shadow:3px 3px 0 rgba(19,19,17,.35);
  animation:pinbob 2.8s ease-in-out infinite;
}
@keyframes pinbob{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-7px) rotate(-4deg)}}
.hours-note{font-size:.78rem;color:var(--gray);margin:0 0 50px;text-align:center}

/* ---------- CONTACT ---------- */
#contact{border-top:var(--border)}
#contact .wrap{padding:0 18px 70px}
.contact-card{
  border:var(--border);border-radius:18px;box-shadow:var(--shadow);
  background:#fff;padding:26px 20px;text-align:center;
  max-width:640px;margin:28px auto 26px;
}
.contact-card .eyebrow{font-family:var(--font-script);font-size:1.6rem;display:block;transform:rotate(-2deg)}
.contact-card h2{font-family:var(--font-display);font-size:clamp(1.6rem,7vw,2.6rem);text-transform:uppercase;line-height:1.1;margin:4px 0 10px}
.contact-card p{font-size:.92rem;color:#4c4841;max-width:440px;margin:0 auto}
.contact-actions{display:flex;flex-direction:column;gap:12px;margin-top:22px;align-items:center}
.contact-actions .btn{width:100%;max-width:360px;white-space:nowrap}
.contact-form{display:flex;flex-direction:column;gap:14px;margin-top:22px;text-align:left;max-width:440px;margin-left:auto;margin-right:auto}
.contact-form label{font-weight:800;font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px;display:block}
.contact-form input,.contact-form textarea{
  width:100%;font-family:var(--font-body);font-size:.95rem;
  border:var(--border);border-radius:12px;padding:12px 14px;background:var(--paper);
  color:var(--ink);
}
.contact-form textarea{min-height:120px;resize:vertical}
.contact-form input:focus,.contact-form textarea:focus{outline:3px solid var(--ink);outline-offset:2px}
.contact-form .btn{align-self:center;margin-top:4px}
.contact-form .btn[disabled]{opacity:.6;cursor:progress}
.form-status{font-size:.88rem;font-weight:700;text-align:center;margin:2px auto 0;
  border:var(--border);border-radius:12px;padding:10px 14px;background:var(--paper)}
.form-status.is-error{background:#ffe9e2}

/* ---------- ABOUT ---------- */
.about-copy{max-width:640px;margin:0 auto;padding:14px 0 10px;text-align:center}
.about-copy p{font-size:1rem;line-height:1.65;color:#3a3833;margin-bottom:16px}
.pillars{display:grid;grid-template-columns:1fr;gap:14px;padding:20px 0 50px;max-width:1100px;margin:0 auto}
.pillar{
  background:#fff;border:var(--border);border-radius:16px;box-shadow:var(--shadow);
  padding:22px 18px;text-align:center;
}
.pillar .pillar-emoji{font-size:2rem;display:block;margin-bottom:8px}
.pillar h3{font-family:var(--font-display);font-size:1rem;text-transform:uppercase;margin-bottom:6px}
.pillar p{font-size:.85rem;color:#4c4841;line-height:1.4}

/* ---------- ABOUT CAROUSEL ---------- */
.carousel-section{background:var(--ink);color:var(--paper);padding:56px 0 40px;margin:56px 0;overflow:hidden}
.carousel-eyebrow{font-family:var(--font-script);font-size:1.5rem;color:#CFCBC2;display:block;transform:rotate(-2deg)}
.carousel-section h3{font-family:var(--font-display);font-size:clamp(1.5rem,5.5vw,2.4rem);text-transform:uppercase;margin:4px 0 32px}

.carousel-track{
  display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:6px 11vw 10px;scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.carousel-track::-webkit-scrollbar{display:none}
.carousel-slide{
  flex:0 0 78vw;max-width:340px;aspect-ratio:1/1;scroll-snap-align:center;
  border-radius:20px;overflow:hidden;opacity:.4;transform:scale(.8);
  transition:opacity .45s ease, transform .45s ease;
}
.carousel-slide.is-active{opacity:1;transform:scale(1)}
.carousel-slide img{width:100%;height:100%;object-fit:cover;display:block}

.carousel-controls{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:22px}
.carousel-dots{display:flex;gap:8px}
.carousel-dot{
  width:7px;height:7px;border-radius:50%;background:#4a4841;border:0;padding:0;cursor:pointer;
  transition:background .3s ease, transform .3s ease;
}
.carousel-dot.is-active{background:var(--paper);transform:scale(1.4)}
.carousel-arrow{
  width:38px;height:38px;border-radius:50%;border:2px solid #55524b;background:none;color:var(--paper);
  display:none;place-items:center;font-size:1.3rem;line-height:1;cursor:pointer;flex-shrink:0;
  transition:border-color .15s ease, background .15s ease;
}
.carousel-arrow:hover{border-color:var(--paper);background:rgba(247,245,240,.08)}

@media(min-width:640px){
  .carousel-slide{flex:0 0 340px}
  .carousel-track{padding:6px calc(50% - 170px) 10px}
}
@media(min-width:900px){
  .carousel-arrow{display:grid}
}

/* ---------- FOOTER ---------- */
footer{
  background:var(--ink);color:var(--paper);
  padding:30px 18px calc(100px + env(safe-area-inset-bottom));
  text-align:center;border-top:2px solid #3a3833;
}
footer .footer-logo{width:min(56vw,168px);height:auto;margin:0 auto}
footer .cols{font-size:.82rem;line-height:1.7;color:#B5B1A8;margin-top:18px}
footer .cols strong{color:var(--paper)}
footer .cols a{text-decoration:underline}
footer .fin{font-size:.75rem;color:#7C7770;margin-top:22px}
footer .footer-legal{font-size:.78rem;line-height:1.9;color:#B5B1A8;margin-top:18px}
footer .footer-legal a{text-decoration:underline;color:inherit}
footer .footer-legal a:hover{color:var(--paper)}
footer .fin.credit{margin-top:8px}
footer .fin.credit a{color:#B5B1A8;text-decoration:underline}
footer .fin.credit a:hover{color:var(--paper)}

/* ---------- BOTTOM BAR (mobile) ---------- */
.orderbar{
  position:fixed;left:0;right:0;bottom:0;z-index:300;
  display:flex;gap:10px;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:var(--paper);border-top:var(--border);
}
.orderbar .btn{flex:1;font-size:.9rem;padding:12px 10px;box-shadow:3px 3px 0 var(--ink)}

.reveal{will-change:transform,opacity}

/* ---------- DESKTOP ---------- */
@media(min-width:900px){
  .orderbar{display:none}
  .scroll-cue{bottom:16px}
  footer{padding-bottom:40px}
  .grid{grid-template-columns:repeat(3,1fr)}
  .grid.sides{grid-template-columns:repeat(5,1fr)}
  #adresses .cards,.addr-cards{grid-template-columns:minmax(0,420px)}
  #commander .platforms{flex-direction:row;justify-content:center;max-width:none}
  .contact-actions{flex-direction:row;justify-content:center;flex-wrap:wrap}
  .contact-actions .btn{width:auto}
  #map{height:460px}
  .pillars{grid-template-columns:repeat(4,1fr)}
}

@media(prefers-reduced-motion:reduce){
  .marquee-track,.scroll-cue .cue-arrow,.badge-open,.sticker-note,.map-pin,.price{animation:none}
  html{scroll-behavior:auto}
}

/* ---------- PAGES LÉGALES ---------- */
.legal-page{border-top:var(--border)}
.legal-page .section-head{padding-bottom:4px}
.crumbs{padding-top:104px;font-size:.78rem;color:var(--gray);letter-spacing:.02em}
.crumbs a{text-decoration:underline}
.crumbs a:hover{color:var(--ink)}
.legal-page .section-head{padding-top:16px}
.legal{
  max-width:760px;margin:0 auto;padding:14px 0 80px;
  font-size:.95rem;line-height:1.75;color:#3A3733;
}
.legal h2{
  font-family:var(--font-display);font-size:clamp(1.1rem,4vw,1.45rem);
  text-transform:uppercase;line-height:1.2;color:var(--ink);
  margin:38px 0 12px;padding-top:18px;border-top:3px solid var(--ink);
}
.legal h3{
  font-family:var(--font-body);font-weight:800;font-size:1rem;
  color:var(--ink);margin:22px 0 8px;
}
.legal p{margin:0 0 14px}
.legal a{text-decoration:underline;font-weight:600}
.legal a:hover{background:var(--lightgray)}
.legal ul{margin:0 0 16px;padding-left:22px}
.legal li{margin-bottom:8px}
.legal-intro{
  font-size:1.02rem;background:var(--lightgray);
  border:var(--border);border-radius:14px;padding:18px 20px;
}
.legal-dl{
  display:grid;grid-template-columns:minmax(150px,32%) 1fr;
  gap:0;border:var(--border);border-radius:14px;overflow:hidden;margin:0 0 18px;
}
.legal-dl dt{
  font-weight:800;font-size:.76rem;text-transform:uppercase;letter-spacing:.05em;
  padding:11px 14px;background:var(--lightgray);border-bottom:1px solid var(--ink);
  color:var(--ink);
}
.legal-dl dd{padding:11px 14px;border-bottom:1px solid var(--ink);background:var(--paper)}
.legal-dl dt:nth-last-of-type(1),.legal-dl dd:nth-last-of-type(1){border-bottom:none}
.legal-table{
  width:100%;border-collapse:collapse;margin:0 0 20px;
  font-size:.84rem;border:var(--border);border-radius:14px;overflow:hidden;
}
.legal-table th,.legal-table td{
  padding:11px 12px;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--ink);
}
.legal-table th{
  background:var(--ink);color:var(--paper);
  font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;font-weight:800;
}
.legal-table tbody tr:last-child td{border-bottom:none}
.legal-table td:first-child{font-weight:700;color:var(--ink)}
.legal-updated{
  margin-top:34px;padding-top:16px;border-top:3px solid var(--ink);
  font-size:.8rem;color:var(--gray);font-style:italic;
}
@media(max-width:600px){
  .legal-dl{grid-template-columns:1fr;border-radius:12px}
  .legal-dl dt{border-bottom:none;padding-bottom:4px}
  .legal-dl dd{padding-top:2px}
  .legal-table{display:block;overflow-x:auto;white-space:nowrap}
  .legal-table td,.legal-table th{white-space:normal;min-width:130px}
}

/* ---------- 404 ---------- */
.notfound{max-width:620px;margin:0 auto;padding:20px 0 110px;text-align:center}
.notfound p{font-size:1.02rem;line-height:1.7;color:#4c4841;margin-bottom:28px}
.notfound-actions{display:flex;flex-direction:column;gap:12px;align-items:center}
.notfound-actions .btn{width:100%;max-width:320px}
@media(min-width:700px){
  .notfound-actions{flex-direction:row;justify-content:center}
  .notfound-actions .btn{width:auto}
}

/* ---------- PROCHAINEMENT : pas encore au menu ---------- */
/* même rail que les temporaires ; la carte se lit « pas encore dispo » : photo pâlie, cadre en pointillés, tampon « Bientôt » */
#prochainement .rail{
  display:grid;grid-auto-flow:column;grid-auto-columns:min(78vw,320px);
  gap:16px;overflow-x:auto;padding:26px 18px 40px;
  scroll-snap-type:x mandatory;scrollbar-width:none;
}
#prochainement .rail::-webkit-scrollbar{display:none}
.card.bientot{border-style:dashed;box-shadow:6px 6px 0 var(--lightgray);background:var(--paper)}
.card.bientot:hover,.card.bientot:focus-within{transform:none;box-shadow:6px 6px 0 var(--lightgray)}
.card.bientot::before{display:none}
.card-media{position:relative;overflow:hidden;border-bottom:var(--border);border-bottom-style:dashed}
.card.bientot .card-img{border-bottom:0;opacity:.62;filter:grayscale(.6) contrast(.92)}
.card.bientot:hover .card-img{filter:grayscale(.6) contrast(.92)}
.card-media::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(135deg, rgba(19,19,17,.05) 0 10px, transparent 10px 22px);
}
.stamp{
  position:absolute;left:50%;bottom:14px;z-index:1;
  transform:translateX(-50%) rotate(-6deg);
  font-family:var(--font-display);font-size:1.15rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--paper);background:var(--ink);
  border:3px solid var(--paper);outline:3px solid var(--ink);
  padding:6px 16px;border-radius:12px;box-shadow:5px 5px 0 rgba(19,19,17,.35);
  animation:stampwiggle 3.4s ease-in-out infinite;
}
@keyframes stampwiggle{0%,100%{transform:translateX(-50%) rotate(-6deg)}50%{transform:translateX(-50%) rotate(-2deg) scale(1.04)}}
.card.bientot .card-body{opacity:.62}
.card.bientot .price{opacity:.5;animation:none;transform:rotate(4deg)}
.tag.soon{background:transparent;color:var(--ink);border:2px dashed var(--ink)}
@media(min-width:900px){
  #prochainement .rail{grid-auto-columns:280px;justify-content:center;overflow-x:visible}
}
@media(prefers-reduced-motion:reduce){
  .stamp{animation:none}
}
/* un élément masqué du menu reste masqué, même si sa classe le met en flex (.card, .subhead) */
#menu [hidden]{display:none !important}

.fin.credit .onlyfive{display:inline-block;height:13px;width:auto;vertical-align:-2px}

:root{--brand-red:#640000}


/* ---- Double Up: palette ---- */
:root{--coffee:#B4632A}

/* ---- hero wordmark is written by a pen (assets/signature.js) ----
   The artwork rides along as a CSS background so the logo is present even if
   the script never runs; signature.js clears it once it takes over.
   url() is relative to this stylesheet, which already lives in /assets. */
.hero-logo-text{width:min(34vw,208px);aspect-ratio:829/432;height:auto;margin:0 auto;
  display:block;background:url(logo-script.png) center/contain no-repeat}
@media (max-width:820px){.hero-logo-text{width:min(26vw,152px)}}

/* ---- "Kahve molasına hazır mısın?" ---- */
#commander .rev{margin:0}
#commander .rev-1{display:block;font-family:var(--font-display);
  font-size:clamp(1.9rem,6.2vw,4.1rem);line-height:1.02;text-transform:uppercase}
#commander .rev-2{display:block;font-style:normal;font-family:var(--font-script);
  font-size:clamp(2.5rem,8.2vw,5rem);line-height:1;color:var(--coffee);margin-top:.04em}
#commander .rev-facts{display:flex;flex-wrap:wrap;justify-content:center;gap:16px 30px;
  list-style:none;margin:26px 0 28px;padding:0}
#commander .rev-facts li{display:flex;align-items:center;gap:9px;font-size:.78rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink);opacity:.9}
#commander .rev-facts svg{width:26px;height:26px;flex:none;fill:none;stroke:var(--coffee);
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:560px){
  #commander .rev-facts{gap:12px 18px;margin:20px 0 22px}
  #commander .rev-facts li{font-size:.7rem;letter-spacing:.1em}
  #commander .rev-facts svg{width:22px;height:22px}
}

/* ---- the bean pile (assets/wrap-beans.js, Matter.js) ----
   #wrapCanvas is the renderer's host element, not a canvas: Matter.Render
   creates its own canvas inside it. The host sits BELOW the copy and the copy
   is transparent to pointer events, so a sweep anywhere reaches the beans
   while the links and the button on top still take their own clicks. The extra
   bottom padding is the room the pile accumulates in, so it never buries the
   call to action. */
#commander{overflow:hidden}
#commander .wrap{padding:64px 18px 232px;pointer-events:none}
#commander .wrap a,#commander .wrap button{pointer-events:auto}
/* position:absolute is load-bearing, not decoration. Without it the host is
   static, its z-index:0 does nothing, and Matter's canvas - which is itself
   absolutely positioned - painted over the copy and swallowed every click on
   the button underneath ("menüye tam tıklayamıyorum"). */
#wrapCanvas{position:absolute;inset:0;z-index:0;pointer-events:auto;touch-action:pan-y}
#wrapCanvas canvas{position:absolute;inset:0;width:100%;height:100%;display:block}

/* ---- the custom pointer (assets/cursor.js) ----
   Two problems the first version had, both fixed here:

   1. ACCURACY. The hotspot sat at the top-CENTRE of the artwork, which is the
      notch between the fingers - empty space. Nothing visible was ever at the
      click point, so aiming felt wrong. The artwork's topmost ink is the right
      fingertip (x 73%, y 0), and that is now the hotspot: the tip of the
      finger is the point, exactly like an arrow cursor.

   2. THE SECOND CURSOR. Matter.js paints "cursor: grab" onto its canvas to
      signal draggability, which showed through as a fist sitting on top of
      the hand. cursor:none is now applied to everything under .has-cursor
      rather than to a list of elements that missed the canvas.

   The native cursor is still only hidden once the script has run, so a script
   failure leaves the visitor a working pointer. */
.custom-cursor{position:fixed;top:0;left:0;width:19px;height:40px;
  background:url(cursor.png) center/contain no-repeat;
  pointer-events:none;z-index:99999;opacity:0;transition:none;
  transform:translate3d(-100px,-100px,0) translate(-73%,0);
  transform-origin:73% 0;will-change:transform}
/* NOTE: no CSS "scale" property here. It composes as
   translate x rotate x scale x transform, so it multiplies the transform's own
   translation and threw the hand 229px off the moment it touched a link. The
   zoom-in is applied inside the transform by cursor.js instead. */
/* ---------------------------------------------------------------------
   Kart animasyonu her karti ±36px yana atarak basliyor. Dar ekranda bu,
   dokumani viewport'tan genis yapiyordu (390px'te 407px) ve position:fixed
   olan header, mobil menu ile siparis cubugu bu genislige geriliyordu - sag
   kenarda gorunen beyaz serit buydu. Bolumu kirpmak, hem animasyonu korur hem
   de tasmanin dokunma gecmesini engeller. Genislik yatayda kirpilir, dikeyde
   degil; boylece pinlenmis ogeler etkilenmez. */
#icecekler{overflow-x:clip}

.has-cursor,.has-cursor *{cursor:none!important}
@media (pointer:coarse),(max-width:768px){
  .custom-cursor{display:none}
  .has-cursor,.has-cursor *{cursor:auto!important}
}

/* =====================================================================
   FOOTER
   ---------------------------------------------------------------------
   Their footer is three centred columns (a small link list, the big menu,
   a newsletter column) over a hairline rule and a legal row, with the studio
   mark watermarked behind everything at 5% and a giant wordmark bleeding off
   the bottom.

   Kept from theirs: the column rhythm, the faded-white type that only comes
   up to full white on hover, and the little white chip that pops in beside a
   link with the arrow turned 45 degrees.

   Changed on purpose: every size was a raw vw in their stylesheet, which is
   desktop-only typography — at 375px a 3.5vw heading is 13px. All of it is
   clamped here.
   ===================================================================== */
.du-footer{position:relative;overflow:hidden;background:#0d0d0d;color:#f1f1f1;
  padding:clamp(52px,7vw,116px) clamp(18px,3vw,52px) clamp(26px,3vw,46px);
  text-align:center;border-top:1px solid rgba(241,241,241,.08)}
.du-f-inner{position:relative;z-index:2;max-width:1180px;margin:0 auto}
.du-f-cols{display:flex;justify-content:space-between;align-items:center;
  gap:clamp(22px,5vw,72px);flex-wrap:wrap}
.du-f-col{display:flex;flex-direction:column;align-items:center;gap:.15em;flex:1 1 0;min-width:180px}
.du-f-col.du-f-main{flex:0 1 auto}
.du-f-eyebrow{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(241,241,241,.45);margin-bottom:.9em}
.du-f-lead{font-size:.82rem;color:rgba(241,241,241,.5);margin:0 0 .9em;max-width:22ch;line-height:1.5}
.du-f-link{display:inline-flex;align-items:center;gap:.34em;text-decoration:none;
  font-family:var(--font-display);text-transform:uppercase;letter-spacing:-.02em;
  font-size:clamp(1.35rem,3.1vw,3rem);line-height:1.1;color:rgba(241,241,241,.55);
  transition:color .3s cubic-bezier(.165,.84,.44,1)}
.du-f-link:hover{color:#f1f1f1}
.du-f-link--sm{font-family:var(--font-body);font-weight:800;
  font-size:clamp(.95rem,1.5vw,1.45rem);letter-spacing:-.01em}
.du-f-link i{flex:none;width:.66em;height:.66em;border-radius:.2em;background:#f1f1f1;
  display:inline-grid;place-items:center;opacity:0;
  transform:scale(.4) rotate(-45deg);transform-origin:0 100%;
  transition:opacity .3s cubic-bezier(.165,.84,.44,1),transform .3s cubic-bezier(.165,.84,.44,1)}
.du-f-link:hover i,.du-f-link:focus-visible i{opacity:1;transform:scale(1) rotate(0deg)}
.du-f-link i svg{width:62%;height:62%;fill:none;stroke:#0d0d0d;stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round}
.du-f-sub{display:inline-flex;align-items:center;gap:.5em;text-decoration:none;
  background:#f1f1f1;color:#0d0d0d;font-weight:800;font-size:.82rem;letter-spacing:.06em;
  text-transform:uppercase;padding:.62em 1.05em;border-radius:.35em;
  transition:transform .25s cubic-bezier(.165,.84,.44,1),background .25s}
.du-f-sub:hover{transform:translateY(-2px);background:#fff}
.du-f-rule{height:1px;background:rgba(241,241,241,.13);
  margin:clamp(30px,5vw,68px) 0 clamp(16px,2vw,26px)}
.du-f-legal{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  align-items:center}
.du-f-policies{display:flex;gap:clamp(14px,1.8vw,30px);flex-wrap:wrap;align-items:center}
.du-f-policies a,.du-f-policies span{font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(241,241,241,.45);text-decoration:none;
  transition:color .3s}
.du-f-policies a:hover{color:#f1f1f1}
.du-f-meta{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  align-items:center;margin-top:clamp(16px,2.2vw,32px);
  font-size:.74rem;color:rgba(241,241,241,.42)}
.du-f-meta a{color:inherit;text-decoration:none;transition:color .3s}
.du-f-meta a:hover{color:#f1f1f1}
.du-f-credit{display:inline-flex;align-items:center;gap:8px}
.du-f-credit .onlyfive{display:inline-block;height:12px;width:auto;opacity:.75}
.du-f-mark{position:absolute;inset:0;display:grid;place-items:center;
  pointer-events:none;z-index:1}
.du-f-mark img{width:min(76vw,880px);height:auto;opacity:.055}
@media (max-width:860px){
  .du-f-cols{flex-direction:column;gap:34px}
  .du-f-col{flex:0 0 auto}
  .du-f-legal,.du-f-meta{flex-direction:column;text-align:center;gap:12px}
  .du-f-policies{justify-content:center}
  /* the sticky order bar sits over the last ~80px of every page, which was
     swallowing the phone number and the credit line */
  .du-footer{padding-bottom:calc(clamp(26px,3vw,46px) + 88px)}
}

header>.logo{justify-self:start}
header>.nav-links{justify-self:center}
header>.header-right{justify-self:end;display:flex;align-items:center;gap:10px}

/* ============================ icecek bolumu + stickerlar + kaydirma cubugu ==
   The drink cards carry a transparent mug rather than a photograph, so the
   image sits on the card's own ground instead of filling a fixed frame. */
.grid--icecek{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.card-img.is-icecek{aspect-ratio:4/5;object-fit:contain;padding:12px 12px 2px;
  background:linear-gradient(180deg,#FBF8F2 0%,#F2ECE0 100%)}

/* the sticker sheet, placed only where the layout leaves room */
.du-stickers{position:absolute;inset:0;pointer-events:none;z-index:1}
#icecekler{position:relative;overflow:hidden}
.du-sticker{position:absolute;width:clamp(58px,7vw,104px);height:auto;
  opacity:.9;animation:duFloat 7s ease-in-out infinite}
.du-sticker--a{top:11%;left:2%;transform:rotate(-12deg)}
.du-sticker--b{top:44%;right:3%;transform:rotate(9deg);animation-delay:-2.4s}
.du-sticker--c{bottom:9%;left:5%;transform:rotate(4deg);animation-delay:-4.6s;width:clamp(48px,5.6vw,84px)}
@keyframes duFloat{0%,100%{translate:0 0}50%{translate:0 -12px}}
@media (prefers-reduced-motion: reduce){.du-sticker{animation:none}}
@media (max-width:900px){
  .grid--icecek{grid-template-columns:repeat(2,minmax(0,1fr))}
  .du-sticker{width:clamp(46px,11vw,72px)}
  .du-sticker--a{left:1%}
  .du-sticker--c{display:none}
}

/* ------------------------------------------------------------------ scroll --
   Grey rather than the platform default, matching the site's paper ground. */
html{scrollbar-color:#202020 #EFE9DC;scrollbar-width:thin}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:#EFE9DC}
::-webkit-scrollbar-thumb{background:#202020;border-radius:6px;
  border:2px solid #EFE9DC}
::-webkit-scrollbar-thumb:hover{background:#3a3a3a}

.grid--icecek .card-body h3{overflow-wrap:anywhere}
@media (max-width:760px){
  .grid--icecek .card-body{padding:12px 12px 16px}
  .grid--icecek .card-body h3{font-size:.98rem;line-height:1.2;margin:0 0 .35em}
  .grid--icecek .card-body p{font-size:.78rem;line-height:1.45}
}
@media (max-width:380px){
  .grid--icecek{grid-template-columns:1fr}
}

/* ============================================ instagram + mascotlar =========
   The behind-the-scenes strip: each frame is a link to the profile, with the
   badge making that clear on hover and on touch. The track keeps the page's own
   carousel behaviour; only the cells changed, from a plain div to an anchor.

   id="duIGFeed" on that track is the drop-in point for a feed service - see the
   note in rebrand-doubleup.mjs. */
.carousel-slide.du-ig-card{position:relative;display:block;text-decoration:none;
  color:inherit;background:linear-gradient(180deg,#FBF8F2 0%,#F2ECE0 100%)}
.du-ig-card img{display:block;width:100%;height:100%;object-fit:cover;
  transition:transform .5s cubic-bezier(.165,.84,.44,1)}
.du-ig-card:hover img{transform:scale(1.04)}
.du-ig-badge{position:absolute;left:10px;bottom:10px;z-index:2;
  font-family:var(--font-body);font-size:.66rem;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:#fff;background:rgba(19,19,17,.72);
  padding:5px 10px;border-radius:999px;backdrop-filter:blur(4px);
  opacity:0;transform:translateY(6px);
  transition:opacity .3s,transform .3s cubic-bezier(.165,.84,.44,1)}
.du-ig-card:hover .du-ig-badge,
.du-ig-card:focus-visible .du-ig-badge{opacity:1;transform:none}
@media (hover:none){.du-ig-badge{opacity:1;transform:none}}

/* Akis yerel JSON'dan geliyor (assets/ig-feed.json, scripts/ig-fetch.mjs uretir).
   Okunamazsa veya bayatlarsa serit bos kalmasin diye kisa bir not cikar. */
.du-ig-not{margin:14px 0 0;font-family:var(--font-body);font-size:.85rem;
  line-height:1.5;color:inherit;opacity:.75}
.du-ig-not a{color:inherit;text-decoration:underline;text-underline-offset:3px}

.du-ig-cta{display:inline-flex;align-items:center;gap:7px;
  margin-top:14px;font-family:var(--font-body);font-size:.85rem;font-weight:700;
  color:#F7F5F0;text-decoration:none;
  border-bottom:1.5px solid rgba(247,245,240,.35);padding-bottom:2px;
  transition:border-color .25s}
.du-ig-cta:hover{border-color:#F7F5F0}
.du-ig-cta-dot{opacity:.45}

/* the mascot sheet, parked in the gutter either side of the centred .wrap.
   The offsets are measured from the centre (50% - half the wrap - the mascot
   itself), so a mascot can never reach the cards however wide the window gets.
   Below 1280px that gutter is narrower than a mascot, so the layer is off. */
.du-mascots{display:none}
#about > .wrap{position:relative}
@media (min-width:1400px){
  .du-mascots{display:block;position:absolute;inset:0;pointer-events:none;z-index:1}
  .du-mascot{position:absolute;height:auto;opacity:.92;
    animation:duFloat 7.5s ease-in-out infinite;
    filter:drop-shadow(0 1px 3px rgba(251,248,242,.85))}
  /* Konumlar KAPSAYICIYA gore. Once sayfa genisligine gore hesaplaniyordu
     (calc(50% - 550px ...)), ama kapsayici artik 1100px'lik .wrap: o matematik
     negatife dusup ikonu sayfanin kenarina, koyu seride savuruyordu - tam da
     urunun uzerine. Kapsayici .wrap oldugu icin basit yuzde yeterli ve metin
     sutunu iki yanda ~200px bosluk birakiyor. */
  .du-mascot--a{top:26%;left:3%;width:clamp(90px,8vw,116px);transform:rotate(-7deg)}
  .du-mascot--b{top:26%;right:3%;width:clamp(84px,7.4vw,108px);transform:rotate(6deg);
    animation-delay:-2.6s}
  .du-mascot--c{bottom:12%;left:6%;width:clamp(70px,6.4vw,94px);transform:rotate(4deg);
    animation-delay:-5s}
}
@media (prefers-reduced-motion: reduce){.du-mascot{animation:none}}

/* Sus ikonlari: konumlari deco-place.js olcup yaziyor, burada sadece cerceve
   var. Katman belge boyunca uzaniyor - body'ye position eklemek sayfadaki
   baska mutlak konumlu ogeleri bozabilirdi. */
#duDeco{position:absolute;top:0;left:0;width:100%;pointer-events:none;z-index:1}
#duDeco img{position:absolute;display:none;height:auto;opacity:.92;
  animation:duFloat 7s ease-in-out infinite}
#duDeco img:nth-child(2){animation-delay:-1.8s}
#duDeco img:nth-child(3){animation-delay:-3.4s}
#duDeco img:nth-child(4){animation-delay:-5.2s}
@media (prefers-reduced-motion: reduce){#duDeco img{animation:none}}

.du-stickers{display:none}
@media (min-width:1400px){
  .du-stickers{display:block;position:absolute;inset:0;pointer-events:none;z-index:1}
  .du-sticker{position:absolute;height:auto;opacity:.9;
    animation:duFloat 7s ease-in-out infinite}
  .du-sticker--a{top:9%;width:clamp(76px,7vw,104px);transform:rotate(-12deg);
    left:calc(50% - 550px - clamp(76px,7vw,104px) - 22px)}
  .du-sticker--b{top:46%;width:clamp(66px,6.2vw,92px);transform:rotate(9deg);
    animation-delay:-2.4s;
    right:calc(50% - 550px - clamp(66px,6.2vw,92px) - 22px)}
  .du-sticker--c{bottom:7%;width:clamp(58px,5.4vw,80px);transform:rotate(4deg);
    animation-delay:-4.6s;
    left:calc(50% - 550px - clamp(58px,5.4vw,80px) - 22px)}
}

/* ============================================================================
   İletişim — istemcinin son düzeltmeleri.

   1. Dallar kartın İÇİNDEN çıkıyor gibi görünmeli. Şimdiye kadar kartın çocuğu
      oldukları için hep kartın üstünde duruyorlardı ve kesildikleri uçları
      görünüyordu. Bu yüzden kart dalları bandın çocuğu yapıldı ve z-index'leri
      kartın ALTINA alındı: kartın arkasına giren kısım artık görünmüyor, geriye
      yalnızca dışarı taşan kısım kalıyor. Form dalları zaten doğru çalışıyor -
      alanların z-index'i onların üstünde, dolayısıyla uçları alanların arkasında.

   2. Zemin en üstten footer çizgisine kadar inmeli. Bant artık bölümün tamamı;
      başlık da görselin üzerinde duruyor.
   ========================================================================= */

/* Bölüm: başlık dahil her şey fotoğrafın üzerinde */
#contact{position:relative;
  background:#0f1c0d url("contact-bg.jpg") center center / cover no-repeat;
  border-top:0;
  padding:clamp(26px,4vw,52px) 0 clamp(30px,4.6vw,62px);
  overflow:hidden}
#contact::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg, rgba(8,16,8,.52) 0%, rgba(8,16,8,.30) 42%, rgba(8,16,8,.52) 100%)}
#contact .wrap{position:relative;z-index:2}

/* Başlık artık koyu zeminde */
#contact .section-head .eyebrow{color:rgba(247,245,240,.86)}
#contact .section-head h2,
#contact .section-head h2 em{color:#F7F5F0}

/* Kartların çevresindeki sarmalayıcı */
.contact-band{position:relative;z-index:2;padding:0 18px}

.contact-band .contact-card{position:relative;z-index:2;   /* kart dalların ÜSTÜNDE */
  background:#FBF8F1;
  border:2px solid var(--ink);
  border-radius:26px;
  box-shadow:10px 10px 0 rgba(19,19,17,.92);
  max-width:660px;margin:0 auto 30px;
  padding:clamp(30px,4.4vw,50px) clamp(22px,3.8vw,44px);
  text-align:center}
.contact-band .contact-card:last-child{margin-bottom:0}
.contact-band .contact-card::after{content:"";position:absolute;inset:9px;
  border:1px solid rgba(19,19,17,.16);border-radius:19px;pointer-events:none}

/* ------------------------------------------------------------ dallar ---
   Kart dalları .contact-band'ın çocuğu ve z-index:1 - kartın (2) altında.
   Konumlar kartın kenarına göre: kart max-width 660px ve ortada, dolayısıyla
   sol kenarı calc(50% - 330px). Dalın bir kısmı kartın altına giriyor, kesik
   ucu görünmüyor; dışarı taşan kısmı kalıyor. */
.du-dal{position:absolute;height:auto;pointer-events:none;
  user-select:none;z-index:1;filter:drop-shadow(0 4px 7px rgba(19,19,17,.22))}

.du-dal--tl{top:clamp(6px,1.4vw,20px);left:calc(50% - 330px - 96px);width:200px}
.du-dal--tr{top:clamp(4px,1.2vw,16px);right:calc(50% - 330px - 92px);width:208px;transform:scaleX(-1)}
.du-dal--lm{top:32%;left:calc(50% - 330px - 78px);width:158px;transform:rotate(-6deg)}
.du-dal--rm{top:54%;right:calc(50% - 330px - 74px);width:192px;transform:scaleX(-1)}

/* form alanlarının uçlarındaki dallar: alanların arkasında kalırlar */
.contact-band .contact-form > div{position:relative}
.du-dal--alan{width:104px;z-index:1}
.du-dal--alan.sol{left:-40px;top:34px}
.du-dal--alan.sag{right:-40px;top:34px}
/* Yalnizca gereken parca aynalanir: sap yonu ice bakmali. */
.du-dal--alan.ayna{transform:scaleX(-1)}
.du-dal--alan.alt{left:-38px;top:42%;width:96px}
.du-dal--alan.sagalt{right:-42px;top:50%;width:112px}

.contact-band .contact-card .eyebrow{font-family:var(--font-script);
  font-size:clamp(1.35rem,3.4vw,1.7rem);color:var(--ink);
  display:block;transform:rotate(-2deg);margin-bottom:2px}
.contact-band .contact-card h2{font-family:var(--font-display);
  font-size:clamp(1.7rem,5.4vw,2.7rem);text-transform:uppercase;
  letter-spacing:-.01em;line-height:1.05;margin:.1em 0 .45em;
  position:relative;z-index:2}
.contact-band .contact-card > p{font-size:clamp(.88rem,2.2vw,.95rem);
  color:#4c4841;max-width:460px;margin:0 auto;position:relative;z-index:2}

.contact-band .contact-actions{display:flex;flex-wrap:wrap;justify-content:center;
  gap:11px;margin-top:clamp(20px,3vw,28px);position:relative;z-index:2}
.contact-band .contact-actions .btn{width:auto;max-width:none;white-space:nowrap;
  border-radius:999px;padding:13px 26px;font-size:.9rem}
.contact-band .contact-actions .btn:nth-child(3){flex-basis:100%;max-width:320px;margin:2px auto 0}
.contact-band .hours-note{font-size:.8rem;color:#5a554c;margin:18px 0 0;position:relative;z-index:2}

.contact-band .contact-form{display:flex;flex-direction:column;gap:18px;
  margin-top:clamp(24px,3.6vw,36px);text-align:left;max-width:100%}
.contact-band .contact-form label{display:block;font-weight:800;
  font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink);margin-bottom:7px;position:relative;z-index:2}
.contact-band .contact-form input,
.contact-band .contact-form textarea{
  width:100%;font-family:var(--font-body);font-size:.95rem;color:var(--ink);
  background:#FCFAF4;border:2px solid var(--ink);border-radius:14px;
  padding:13px 16px;transition:box-shadow .2s;position:relative;z-index:2}
.contact-band .contact-form textarea{min-height:150px;resize:vertical}
.contact-band .contact-form input:focus,
.contact-band .contact-form textarea:focus{outline:none;
  box-shadow:0 0 0 3px rgba(19,19,17,.18)}
.contact-band .contact-form button[type="submit"]{
  align-self:center;border-radius:999px;padding:14px 38px;margin-top:4px;position:relative;z-index:2}
.contact-band .form-status{text-align:center;font-size:.82rem;color:#4c4841;margin:0}

/* Karusel sayfalama noktaları ve okları: istemci anlamsız buldu, kaldırıldı.
   site.js bu kapları aradığı için gizleniyor, silinmiyor. */
.carousel-controls{display:none !important}

@media (max-width:900px){
  .du-dal--tl,.du-dal--tr{width:150px}
  .du-dal--tl{left:calc(50% - 330px - 60px)}
  .du-dal--tr{right:calc(50% - 330px - 56px)}
}
@media (max-width:700px){
  .du-dal--lm,.du-dal--rm{display:none}
  .du-dal--tl{width:118px;top:2px;left:-56px}
  .du-dal--tr{width:124px;top:2px;right:-52px}
  .du-dal--alan{width:64px}
  .du-dal--alan.sol{left:-24px;top:30px}
  .du-dal--alan.sag{right:-24px;top:30px}
  .du-dal--alan.sagalt{width:78px;right:-26px;top:48%}
}
@media (max-width:560px){
  .contact-band{padding-left:14px;padding-right:14px}
  .contact-band .contact-card{border-radius:22px;
    box-shadow:7px 7px 0 rgba(19,19,17,.92)}
  .contact-band .contact-card::after{inset:7px;border-radius:16px}
  .contact-band .contact-actions .btn{flex-basis:100%;max-width:340px;margin:0 auto}
  .du-dal--tl,.du-dal--tr{width:96px}
}

/* ============================================================================
   İletişim — düşen yapraklar.

   Referansın altında yere düşmüş yapraklar ve bir kiraz kümesi var; istemci
   "arada bir iki yaprak düşüyor" dedi. Bu yüzden hareket seyrek ve yavaş:
   beş yaprak, uzun aralıklarla, birbirinden farklı gecikmeyle iniyor. Aynı anda
   ekranda genelde bir tane oluyor.

   Yapraklar bandın içinde konumlanıyor ama taşmıyor; bant zaten fotoğraf.
   Hareket azaltma açıkken hepsi duruyor ve yalnızca yere serilmiş hâlleri
   görünüyor.
   ========================================================================= */

.du-yaprak-kat{position:absolute;inset:0;overflow:hidden;
  pointer-events:none;z-index:1}

.du-yaprak{position:absolute;top:-70px;height:auto;opacity:0;
  pointer-events:none;user-select:none;
  filter:drop-shadow(0 4px 6px rgba(19,19,17,.22));
  animation:duYaprak 17s linear infinite}

/* Beş yaprak: farklı boy, yatay konum, süre ve gecikme. Gecikmeler bilerek
   dağınık - hepsi birlikte inerse kar gibi görünür. */
.du-yaprak:nth-child(1){left:6%;  width:60px; animation-duration:21s; animation-delay:-3s}
.du-yaprak:nth-child(2){left:27%; width:44px; animation-duration:26s; animation-delay:-14s}
.du-yaprak:nth-child(3){left:58%; width:52px; animation-duration:23s; animation-delay:-8s}
.du-yaprak:nth-child(4){left:79%; width:38px; animation-duration:29s; animation-delay:-20s}
.du-yaprak:nth-child(5){left:44%; width:30px; animation-duration:33s; animation-delay:-26s}

@keyframes duYaprak{
  0%   {opacity:0;   transform:translate3d(0,0,0) rotate(0deg)}
  6%   {opacity:.85}
  50%  {              transform:translate3d(34px,52vh,0) rotate(160deg)}
  88%  {opacity:.85}
  100% {opacity:0;   transform:translate3d(-18px,104vh,0) rotate(320deg)}
}
@media (prefers-reduced-motion: reduce){
  .du-yaprak{animation:none;opacity:0}
}
@media (max-width:700px){
  .du-yaprak:nth-child(1){width:44px}
  .du-yaprak:nth-child(2){width:34px}
  .du-yaprak:nth-child(3){width:38px}
  .du-yaprak:nth-child(4){width:30px}
  .du-yaprak:nth-child(5){display:none}
}

/* ============================================================================
   Hero çekirdekleri — apocalypsecoffee.com'daki efektin aynısı.

   O sitede "renkli elips" diye görünen şey aslında bir drop-shadow:
       filter: drop-shadow(4px 5px 0 <renk>);
   Yani çekirdeğin sert, offset, renkli bir gölgesi var. Paletleri on renk:
   #3aaae0 #30a050 #e07a30 #f2a01e #c9281e #e62a8a #6090e0 #6a4d9c #a89018 #3aaab8

   Belirip kaybolma da onların kalıbı: çekirdek küçülüp soluyor, sonra
   büyüyüp görünüyor. steps(2) geçişi piksel/poster hissi veriyor. Animasyon
   tamamen CSS; her çekirdeğin süresi, gecikmesi, açısı ve rengi kendi
   değişkenlerinde, böylece hiçbiri diğeriyle aynı anda oynamıyor.
   ========================================================================= */

.du-bean-alan{position:absolute;inset:0;overflow:hidden;
  pointer-events:none;z-index:1}

.du-bean{position:absolute;
  width:var(--bw,44px);height:auto;
  transform:translate(-50%,-50%) rotate(var(--br,0deg)) scale(.45);
  opacity:0;
  filter:drop-shadow(4px 5px 0 var(--bsh,#e06d2d));
  animation:duBeanPop var(--bd,3.2s) steps(2,end) var(--bdel,0s) infinite}

@keyframes duBeanPop{
  0%,12%   {opacity:0;transform:translate(-50%,-50%) rotate(var(--br,0deg)) scale(.45)}
  16%,78%  {opacity:1;transform:translate(-50%,-50%) rotate(var(--br,0deg)) scale(1)}
  84%,100% {opacity:0;transform:translate(-50%,-50%) rotate(var(--br,0deg)) scale(.45)}
}

@media (prefers-reduced-motion: reduce){
  .du-bean{animation:none;opacity:0}
}
@media (max-width:767px){
  .du-bean{width:calc(var(--bw,44px) * .72);
    filter:drop-shadow(3px 4px 0 var(--bsh,#e06d2d))}
}

/* Renkli cekirdekler yalnizca Iced Caramel Latte seciliyken gorunur. */
.du-bean-alan{opacity:0;transition:opacity .45s ease}
.du-bean-alan.is-on{opacity:1}
@media (prefers-reduced-motion: reduce){.du-bean-alan{transition:none}}

/* Hakkimizda sutunundaki cekirdek gorseli (eskiden peynir emojisiydi) */
.pillar-bean{display:inline-block;width:1em;height:1em;object-fit:contain;
  vertical-align:-0.12em;filter:drop-shadow(0 1px 2px rgba(19,19,17,.25))}

/* Lastik bant alani: sayfa yatayda kaymiyor, bosluk tuvalin arka planini gosteriyordu. */
html{background:var(--paper);overscroll-behavior-x:none}
body{background:var(--paper)}
/* Koyu zeminde fosforlu kalem vurgusu beyaz serit gibi gorunuyor. */


/* Baslik vurgusu koyu fotografin uzerinde beyaz bir cubuk gibi duruyordu.
   Renk, kagitta oldugu gibi birakilinca serit okunuyor; koyu zeminde ise
   yari saydam sicak bir tona cevriliyor. */
/* koyu zeminde vurgu tonu */
#contact .section-head h2 em{
  background:linear-gradient(transparent 60%, rgba(180,99,42,.42) 60%,
    rgba(180,99,42,.42) 94%, transparent 94%)}

/* ---- header genisligi sabit ---- */
/* Header 701 px olcuyordu (ekran 390) ve sagdaki hamburger kesiliyordu.
   Element secici sinif kuralini ezmedigi icin hepsi birlikte hedefleniyor. */
html body header,html body .site-header{
  left:0;right:0;width:100%;max-width:100vw;box-sizing:border-box;
  overflow-x:clip}
html body header > *,html body .site-header > *{min-width:0}
@media (max-width:560px){
  html body header{gap:6px;padding:10px 12px}
  .header-right{margin-left:auto;gap:5px;flex-shrink:0}
  .header-right .icon-btn{width:32px;height:32px}
  .nav-toggle{width:34px;height:34px;flex-shrink:0}
  header .logo,header .logo img{width:42px;height:42px}
}

/* ---- yatay tasma kesin ---- */
html,body{overflow-x:clip!important;max-width:100%}
.marquee{overflow:hidden!important;max-width:100vw}
.marquee-track{max-width:none}
header,.orderbar,.mobile-nav{max-width:100vw;box-sizing:border-box}
@supports not (overflow-x: clip){html,body{overflow-x:hidden!important}}

/* ---- hero otomatik donus ---- */
.scene-dots{display:none!important}

/* ---- acilis perdesi ® ---- */
#duIntro .du-intro-reg{position:absolute;
  top:calc(50% - min(45vw,490px) * 336 / 728 - 34px);
  left:calc(50% + min(45vw,490px) - 18px);
  font-family:var(--font-body);font-weight:800;
  font-size:clamp(13px,1.6vw,20px);line-height:1;color:var(--ink);
  opacity:0;animation:duIntroReg .4s ease .9s forwards}
@keyframes duIntroReg{to{opacity:1}}
@media (max-width:560px){#duIntro .du-intro-reg{font-size:15px}}

/* ---- acilis ® : DOUBLE UP yazisinin sag ustu ---- */
#duIntro .du-intro-reg{position:absolute!important;
  /* canvas sol kenari: 50% - min(45vw,490px); sag kenari: 50% + min(45vw,490px) */
  left:calc(50% + min(45vw, 490px) - 62px)!important;
  right:auto!important;
  /* canvas ust kenari: 50% - (min(45vw,490px) * 336 / 728) */
  top:calc(50% - min(45vw, 490px) * 336 / 728 + 30px)!important;
  font-size:clamp(16px,2.2vw,30px)!important;
  font-weight:700!important;line-height:1!important;color:var(--ink)!important;
  opacity:0;animation:duIntroReg .4s ease 0.9s forwards!important}

/* ---- tatli kekleri ortala ---- */
#hero .scene-glass[data-set="marlenka"],


/* ---- fistik: kek buyutuldu ---- */
#hero .scene-glass[data-set="fistik"],

@media (min-width:1500px){
  #hero .scene-glass[data-set="fistik"],
  }
@media (max-width:760px){
  #hero .scene-glass[data-set="fistik"],
  }

/* ---- coco star ---- */

@media (min-width:1500px){}
@media (max-width:760px){}

/* ---- coco arka plani: ortalanmis ---- */
#hero .scene-coco{
  height:168%!important;width:auto!important;
  transform:translate(-50%,-50%) translateZ(-140px)!important;
  filter:drop-shadow(0 22px 32px rgba(60,45,25,.22)) blur(.3px)}
@media (max-width:760px){#hero .scene-coco{height:155%!important}}

/* ---- marlenka arka plani ---- */
#hero .scene-marlenka{
  height:165%!important;width:auto!important;
  transform:translate(-50%,-50%) translateZ(-140px)!important;
  filter:drop-shadow(0 22px 32px rgba(50,30,15,.22)) blur(.3px)}
@media (max-width:760px){#hero .scene-marlenka{height:min(560px,66vh)!important;max-height:none!important;max-width:none!important;width:auto!important}}

/* ---- tatli arka planlari sigdir ---- */
#hero .scene-fistik,
#hero .scene-marlenka,
#hero .scene-coco{
  height:min(760px,84vh)!important;width:auto!important;
  max-height:84vh!important;max-width:none!important;
  left:50%!important;top:50%!important;
  transform:translate(-50%,-50%) translateZ(-140px)!important}
@media (max-width:760px){
  #hero .scene-fistik,#hero .scene-marlenka,#hero .scene-coco{
    height:min(420px,62vh)!important;max-height:62vh!important}}

/* ---- parlama tam kart ---- */
.card::before{aspect-ratio:auto!important;inset:0!important;height:100%!important}

/* ---- mobilde kekler kucultuldu ---- */
@media (max-width:760px){
  #hero .scene-glass[data-set="marlenka"],
  #hero .scene-glass[data-set="fistik"],
  

  /* coco keki yukari ortala */
  
}

/* ================= KEKLER TAM ORTADA ================= */
/* Görsellerin sağında/solunda boşluk olduğu için kutu ortada olsa da
   kek kaymış görünüyordu. Her biri kendi boşluğuna göre kaydırılıyor. */

#hero .scene-glass[data-set="marlenka"],
#hero .scene-glass[data-set="fistik"],


/* tek tek ince ayar (görselin asimetrik boşluğu) */




/* mobilde de aynı */
@media (max-width:760px){
  
  
  
}

/* ==== arka planlar: içerik tam merkezde ==== */
#hero .scene-marlenka{
  transform:translate(calc(-50% + 3.16%), calc(-50% + 6.25%)) translateZ(-140px)!important;
}
#hero .scene-fistik{
  transform:translate(calc(-50% + 5.23%), calc(-50% + 10.91%)) translateZ(-140px)!important;
}
#hero .scene-coco{
  transform:translate(calc(-50% + 3.84%), calc(-50% + 6.15%)) translateZ(-140px)!important;
}

/* ==== kekler: tam merkez (ölçülmüş) ==== */



@media (max-width:760px){
  
  
  
}

/* ---- fistik biraz asagi (mobil) ---- */
@media (max-width:760px){
  
}

/* ---- marlenka biraz asagi (mobil) ---- */
@media (max-width:760px){
  
}

/* ==== KEKLER: telefonda tam ortalı, taşma yok ==== */
#hero .scene-glass[data-set="marlenka"],
#hero .scene-glass[data-set="fistik"],
#hero .scene-glass[data-set="coco"]{
  top:50%!important;
  left:50%!important;
  transform:none!important;
  translate:-50% -50%!important;
  max-width:86vw!important;
}

@media (max-width:760px){
  #hero .scene-glass[data-set="marlenka"],
  #hero .scene-glass[data-set="fistik"],
  #hero .scene-glass[data-set="coco"]{
    height:min(210px,23vh)!important;
    max-width:84vw!important;
    top:50%!important;
    translate:-50% -50%!important;
  }
}

/* ==== KEKLER: ortalı ve DAHA BÜYÜK ==== */
@media (max-width:760px){
  #hero .scene-glass[data-set="marlenka"],
  #hero .scene-glass[data-set="fistik"],
  #hero .scene-glass[data-set="coco"]{
    height:min(300px,34vh)!important;
    max-width:92vw!important;
    top:50%!important;
    translate:-50% -50%!important;
  }
}
@media (min-width:761px){
  #hero .scene-glass[data-set="marlenka"],
  #hero .scene-glass[data-set="fistik"],
  #hero .scene-glass[data-set="coco"]{
    height:min(430px,40vh)!important;
    translate:-50% -50%!important;
  }
}

/* ==== KEKLER: telefonda BUYUK ==== */
@media (max-width:760px){
  #hero .scene-glass[data-set="marlenka"],
  #hero .scene-glass[data-set="fistik"],
  #hero .scene-glass[data-set="coco"]{
    height:min(430px,48vh)!important;
    max-width:96vw!important;
    width:auto!important;
    top:50%!important;
    translate:-50% -50%!important;
  }
}

/* ==== KEKLER: telefonda EKRAN GENISLIGI KADAR ==== */
@media (max-width:760px){
  #hero .scene-glass[data-set="marlenka"],
  #hero .scene-glass[data-set="fistik"],
  #hero .scene-glass[data-set="coco"]{
    height:min(640px,74vh)!important;
    max-width:100vw!important;
    width:auto!important;
    top:50%!important;
    translate:-50% -50%!important;
  }
}

/* ---- MARLENKA 3D ---- */
#hero .scene-items[data-set="marlenka"] img:nth-child(n+5){z-index:-1!important}
#hero .scene-items[data-set="marlenka"] img:nth-child(-n+4){z-index:5!important}
@media (max-width:760px){
  #hero .scene-items[data-set="marlenka"] img{width:44px!important;height:44px!important}
}

/* ---- MARLENKA BOY ---- */
#hero .scene-items[data-set="marlenka"] img{
  width:44px!important;height:44px!important;
  max-width:44px!important;max-height:44px!important;
}

/* ---- FISTIK MOBIL: sos tam arkada, kenarlardan taşsın ---- */
@media (max-width:760px){
  #hero .scene-fistik{
    height:200%!important;
    max-height:none!important;
    max-width:none!important;
    width:auto!important;
    transform:translate(-50%, calc(-50% - 1.5%)) translateZ(-140px)!important;
  }
}

/* ---- MASAUSTU KEK BUYUK (telefonu etkilemez) ---- */
@media (min-width:761px){
  #hero .scene-glass[data-set="marlenka"],
  #hero .scene-glass[data-set="fistik"],
  #hero .scene-glass[data-set="coco"]{
    height:auto!important;
    width:min(520px,44vw)!important;
    max-width:none!important;
    max-height:none!important;
    top:50%!important;left:50%!important;
    transform:none!important;
    translate:-50% -50%!important;
  }
}
@media (min-width:1600px){
  #hero .scene-glass[data-set="marlenka"],
  #hero .scene-glass[data-set="fistik"],
  #hero .scene-glass[data-set="coco"]{width:min(600px,40vw)!important}
}

@media (max-width:760px){
body #hero .scene-marlenka{
  height:580px!important;
  max-height:none!important;
  max-width:none!important;
  width:auto!important;
}
}

/* ---- INTRO REG MOBIL ---- */
@media (max-width:760px){
  #duIntro .du-intro-reg{
    left:calc(50% + min(45vw,490px) - 26px)!important;
    top:calc(50% - min(45vw,490px) * 336 / 728 - 6px)!important;
    font-size:13px!important;
  }
}

/* ---- platform alt yazi ---- */

.platforms{margin-bottom:0!important}

/* ---- platform alt yazi ---- */
.platforms-not{
  display:block!important;
  margin:26px auto 0!important;
  padding:0!important;
  text-align:center!important;
  font-size:clamp(14px,1.6vw,17px)!important;
  line-height:1.5!important;
  opacity:.72!important;
  text-decoration:none!important;
}
.platforms-not a,
.platforms-not u{text-decoration:none!important;border:0!important}
.platforms{margin-bottom:0!important}

/* ---- PLATFORMS DUZEN ---- */
.platforms{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:18px!important;
  margin:0 auto!important;
  text-align:center!important;
}
.platforms .btn{margin:0 auto!important}
.platforms-not{
  margin:0!important;
  max-width:640px!important;
}

/* ---- PLATFORMS SON ---- */
.platforms .platforms-not{
  position:static!important;
  inset:auto!important;
  transform:none!important;
  margin:0 auto!important;
  display:block!important;
  width:auto!important;
}

/* ---- PLATFORMS FINAL ---- */
.platforms{position:relative!important;display:block!important;height:auto!important;min-height:0!important;padding:0!important;margin:0 auto!important;text-align:center!important}
.platforms .btn{position:relative!important;inset:auto!important;display:inline-block!important;margin:0 auto!important}
.platforms .platforms-not{position:relative!important;inset:auto!important;display:block!important;margin:26px auto 0!important;padding:0!important;transform:none!important;width:auto!important;max-width:640px!important}