/* ================================================
   Kakao Atölyesi — Dark Cacao / Gold Foil / Quiet Luxe
   ================================================ */

/* --- Reset & Base --- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  /* Palette */
  --bg-deep:#110e0c;
  --bg-card:#1e1714;
  --bg-card-hover:#2a201a;
  --bg-surface:#16120f;
  --gold:#c8a55a;
  --gold-light:#d4b87a;
  --gold-muted:#a08640;
  --text:#e8e0d8;
  --text-muted:#a89888;
  --text-dim:#786858;
  --border:#3a2e24;
  --border-light:#4a3e34;
  --error:#c45e4a;
  --success:#6a9a5a;

  /* Type scale */
  --fs-xs:0.75rem;
  --fs-sm:0.875rem;
  --fs-base:1rem;
  --fs-md:1.125rem;
  --fs-lg:1.375rem;
  --fs-xl:1.75rem;
  --fs-2xl:2.25rem;
  --fs-3xl:3rem;
  --fs-hero:3.75rem;

  /* Spacing */
  --sp-xs:0.25rem;
  --sp-sm:0.5rem;
  --sp-md:1rem;
  --sp-lg:1.5rem;
  --sp-xl:2rem;
  --sp-2xl:3rem;
  --sp-3xl:4rem;
  --sp-4xl:6rem;

  /* Layout */
  --max-w:1200px;
  --radius:6px;
  --radius-lg:12px;

  /* Transitions */
  --ease:cubic-bezier(0.4,0,0.2,1);
  --dur:0.3s;
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
  }
}

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  font-size:16px;
  overflow-x:hidden;
}

body{
  font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;
  background:var(--bg-deep);
  color:var(--text);
  line-height:1.7;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  -webkit-font-smoothing:antialiased;
}

/* Texture overlay on body */
body::before{
  content:'';
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(ellipse 80% 60% at 20% 10%,rgba(200,165,90,0.03),transparent),
    radial-gradient(ellipse 60% 50% at 80% 90%,rgba(200,165,90,0.02),transparent);
}

body>*{position:relative;z-index:1}

/* --- Skip Link --- */
.skip-link{
  position:absolute;
  top:-100%;
  left:var(--sp-md);
  background:var(--gold);
  color:var(--bg-deep);
  padding:var(--sp-sm) var(--sp-md);
  border-radius:0 0 var(--radius) var(--radius);
  font-weight:700;
  z-index:9999;
  text-decoration:none;
}
.skip-link:focus{top:0}

/* --- Utility --- */
.container{
  width:100%;
  max-width:var(--max-w);
  margin:0 auto;
  padding:0 var(--sp-lg);
}

.sr-only{
  position:absolute;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* --- Typography --- */
h1,h2,h3,h4{
  font-weight:700;
  line-height:1.2;
  color:var(--text);
  letter-spacing:-0.01em;
}
h1{font-size:var(--fs-2xl);margin-bottom:var(--sp-lg)}
h2{font-size:var(--fs-xl);margin-bottom:var(--sp-md)}
h3{font-size:var(--fs-lg);margin-bottom:var(--sp-sm)}
h4{font-size:var(--fs-md);margin-bottom:var(--sp-sm)}

p{margin-bottom:var(--sp-md);color:var(--text-muted)}
p:last-child{margin-bottom:0}

a{
  color:var(--gold);
  text-decoration:none;
  transition:color var(--dur) var(--ease);
}
a:hover,a:focus-visible{color:var(--gold-light)}
a:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:2px}

strong{color:var(--text);font-weight:600}

/* --- Header --- */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:rgba(17,14,12,0.92);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
  transition:background 0.4s var(--ease),box-shadow 0.4s var(--ease);
}
.site-header.is-scrolled{
  background:rgba(17,14,12,0.98);
  box-shadow:0 4px 20px rgba(0,0,0,0.4);
}
.site-header .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:72px;
}
/* Offset body content for fixed header */
body{padding-top:72px}

.logo{
  display:flex;
  align-items:center;
  gap:var(--sp-sm);
  text-decoration:none;
  color:var(--text);
  font-weight:700;
  font-size:var(--fs-md);
  letter-spacing:0.04em;
}
.logo-icon{
  width:36px;height:36px;
  display:flex;align-items:center;justify-content:center;
}
.logo-icon svg{width:100%;height:100%}

/* Nav */
.main-nav{display:flex;align-items:center}
.nav-list{
  display:flex;
  list-style:none;
  gap:var(--sp-xs);
}
.nav-list a{
  display:block;
  padding:var(--sp-sm) var(--sp-md);
  font-size:var(--fs-sm);
  color:var(--text-muted);
  border-radius:var(--radius);
  transition:color var(--dur) var(--ease),background var(--dur) var(--ease);
  white-space:nowrap;
}
.nav-list a:hover,
.nav-list a[aria-current="page"]{
  color:var(--gold);
  background:rgba(200,165,90,0.08);
}

/* Mobile toggle */
.nav-toggle{
  display:none;
  background:none;border:none;
  color:var(--text);cursor:pointer;
  padding:var(--sp-sm);
  line-height:0;
}
.nav-toggle svg{width:24px;height:24px}
.nav-toggle line{
  transition:transform var(--dur) var(--ease),opacity var(--dur) var(--ease);
  transform-origin:center;
}
.nav-toggle[aria-expanded="true"] line:nth-child(1){
  transform:translateY(6px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] line:nth-child(2){
  opacity:0;
}
.nav-toggle[aria-expanded="true"] line:nth-child(3){
  transform:translateY(-6px) rotate(-45deg);
}

@media(max-width:900px){
  .nav-toggle{display:block;z-index:110}
  .main-nav{
    position:fixed;
    top:72px;
    left:0;
    width:100%;
    height:calc(100vh - 72px);
    height:calc(100dvh - 72px);
    background:#110e0c;
    flex-direction:column;
    justify-content:flex-start;
    align-items:stretch;
    padding:var(--sp-2xl) var(--sp-lg) var(--sp-lg);
    overflow:hidden;
    visibility:hidden;
    opacity:0;
    transition:opacity var(--dur) var(--ease),visibility var(--dur) var(--ease);
  }
  .main-nav.is-open{
    visibility:visible;
    opacity:1;
  }
  .nav-list{
    flex-direction:column;
    gap:0;
    width:100%;
  }
  .nav-list a{
    font-size:var(--fs-md);
    padding:var(--sp-md) var(--sp-lg);
  }
  /* Lock body scroll when menu is open */
  html.menu-open,
  html.menu-open body{
    overflow:hidden;
  }
}

/* --- Hero --- */
.hero{
  padding:var(--sp-4xl) 0;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.hero::before{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(ellipse 50% 80% at 50% 0%,rgba(200,165,90,0.06),transparent 70%);
  pointer-events:none;
}
.hero h1{
  font-size:var(--fs-hero);
  background:linear-gradient(135deg,var(--gold-light),var(--gold),var(--gold-muted));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  margin-bottom:var(--sp-md);
}
.hero .subtitle{
  font-size:var(--fs-lg);
  color:var(--text-muted);
  max-width:600px;
  margin:0 auto var(--sp-xl);
}

@media(max-width:600px){
  .hero{padding:var(--sp-3xl) 0 var(--sp-2xl)}
  .hero h1{font-size:var(--fs-2xl)}
  .hero .subtitle{font-size:var(--fs-base)}
}

/* --- Sections --- */
.section{
  padding:var(--sp-4xl) 0;
}
.section--alt{
  background:var(--bg-surface);
}
.section-header{
  text-align:center;
  margin-bottom:var(--sp-3xl);
}
.section-header p{
  max-width:640px;
  margin:0 auto;
}

/* Gold rule */
.gold-rule{
  width:60px;height:2px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  margin:var(--sp-md) auto var(--sp-lg);
  border:none;
}

/* --- Cards --- */
.card-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:var(--sp-xl);
}

.card{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:var(--sp-xl);
  transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
  position:relative;
  overflow:hidden;
}
.card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--gold-muted),var(--gold),var(--gold-muted));
  opacity:0;
  transition:opacity var(--dur) var(--ease);
}
.card:hover{
  border-color:var(--border-light);
  transform:translateY(-2px);
  box-shadow:0 8px 32px rgba(0,0,0,0.3);
}
.card:hover::before{opacity:1}

.card h3{color:var(--gold-light)}
.card-icon{
  width:48px;height:48px;
  margin-bottom:var(--sp-md);
  color:var(--gold);
}
.card-icon svg{width:100%;height:100%}

/* --- Placeholder visual panels --- */
.visual-panel{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  min-height:200px;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;
}
.visual-panel::after{
  content:'';position:absolute;inset:0;
  background:
    repeating-linear-gradient(
      45deg,
      transparent,transparent 20px,
      rgba(200,165,90,0.03) 20px,
      rgba(200,165,90,0.03) 22px
    );
  pointer-events:none;
}
.visual-panel svg{
  width:80px;height:80px;
  color:var(--text-dim);
  opacity:0.5;
}

/* --- Price Table --- */
.table-wrap{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  margin:var(--sp-xl) 0;
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  background:var(--bg-card);
}
.price-table{
  width:100%;
  min-width:540px;
  border-collapse:collapse;
}
.price-table thead{
  background:rgba(200,165,90,0.06);
}
.price-table th,
.price-table td{
  text-align:left;
  padding:var(--sp-md) var(--sp-lg);
}
.price-table th{
  color:var(--gold);
  font-size:var(--fs-sm);
  text-transform:uppercase;
  letter-spacing:0.06em;
  font-weight:600;
  border-bottom:2px solid var(--border);
}
.price-table td{
  color:var(--text-muted);
  border-bottom:1px solid var(--border);
}
.price-table tbody tr:last-child td{border-bottom:none}
.price-table tbody tr{
  transition:background var(--dur) var(--ease);
}
.price-table tbody tr:hover{
  background:rgba(200,165,90,0.06);
}
.price-range{
  color:var(--gold-light);
  font-weight:600;
  white-space:nowrap;
}

@media(max-width:600px){
  .price-table th,
  .price-table td{
    padding:var(--sp-sm) var(--sp-md);
    font-size:var(--fs-sm);
  }
}

/* --- Flavor selector --- */
.flavor-selector{
  display:flex;
  gap:var(--sp-md);
  justify-content:center;
  flex-wrap:wrap;
  margin-bottom:var(--sp-2xl);
}
.flavor-btn{
  background:var(--bg-card);
  border:1px solid var(--border);
  color:var(--text-muted);
  padding:var(--sp-sm) var(--sp-xl);
  border-radius:999px;
  cursor:pointer;
  font-size:var(--fs-sm);
  font-weight:600;
  transition:all var(--dur) var(--ease);
  letter-spacing:0.02em;
}
.flavor-btn:hover{
  border-color:var(--gold-muted);
  color:var(--text);
}
.flavor-btn[aria-pressed="true"]{
  background:var(--gold);
  color:var(--bg-deep);
  border-color:var(--gold);
}
.flavor-btn:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:2px;
}

.flavor-result{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:var(--sp-xl);
  text-align:center;
  min-height:120px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  transition:opacity var(--dur) var(--ease);
}
.flavor-result h3{color:var(--gold-light);margin-bottom:var(--sp-sm)}

/* --- FAQ Accordion --- */
.faq-list{
  max-width:800px;
  margin:0 auto;
}
.faq-item{
  border-bottom:1px solid var(--border);
}
.faq-question{
  width:100%;
  background:none;border:none;
  color:var(--text);
  font-size:var(--fs-base);
  font-weight:600;
  text-align:left;
  padding:var(--sp-lg) 0;
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:var(--sp-md);
  line-height:1.4;
}
.faq-question:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:2px;
  border-radius:2px;
}
.faq-question::after{
  content:'+';
  font-size:var(--fs-lg);
  color:var(--gold);
  flex-shrink:0;
  transition:transform 0.25s var(--ease);
}
.faq-item.is-open .faq-question::after{
  content:'\2212';
}
.faq-answer{
  overflow:hidden;
  height:0;
  transition:height 0.3s ease;
}
.faq-answer-inner{
  padding-bottom:var(--sp-lg);
}
.faq-answer p{
  color:var(--text-muted);
  line-height:1.7;
}

/* --- Form --- */
.form-group{
  margin-bottom:var(--sp-lg);
}
.form-group label{
  display:block;
  font-size:var(--fs-sm);
  font-weight:600;
  color:var(--text);
  margin-bottom:var(--sp-sm);
}
.form-group label .required{
  color:var(--gold);
  margin-left:2px;
}
.form-input,
.form-textarea{
  width:100%;
  background:var(--bg-surface);
  border:1px solid var(--border);
  color:var(--text);
  padding:var(--sp-md);
  border-radius:var(--radius);
  font-family:inherit;
  font-size:var(--fs-base);
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.form-input:focus,
.form-textarea:focus{
  outline:none;
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(200,165,90,0.15);
}
.form-input::placeholder,
.form-textarea::placeholder{
  color:var(--text-dim);
}
.form-textarea{
  resize:vertical;
  min-height:120px;
}
.form-input.is-error,
.form-textarea.is-error{
  border-color:var(--error);
}
.form-error{
  color:var(--error);
  font-size:var(--fs-xs);
  margin-top:var(--sp-xs);
  display:none;
}
.form-group.has-error .form-error{display:block}

.form-check{
  display:flex;
  align-items:flex-start;
  gap:var(--sp-sm);
  margin-bottom:var(--sp-lg);
}
.form-check input[type="checkbox"]{
  margin-top:4px;
  accent-color:var(--gold);
  flex-shrink:0;
}
.form-check label{
  font-size:var(--fs-sm);
  color:var(--text-muted);
  cursor:pointer;
}

.honeypot-field{
  position:absolute;left:-9999px;
  opacity:0;height:0;width:0;overflow:hidden;
  tab-index:-1;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--sp-sm);
  padding:var(--sp-md) var(--sp-2xl);
  background:var(--gold);
  color:var(--bg-deep);
  border:none;
  border-radius:var(--radius);
  font-family:inherit;
  font-size:var(--fs-sm);
  font-weight:700;
  letter-spacing:0.04em;
  cursor:pointer;
  transition:background var(--dur) var(--ease),transform var(--dur) var(--ease);
  text-transform:uppercase;
  text-decoration:none;
}
.btn:hover{
  background:var(--gold-light);
  transform:translateY(-1px);
}
.btn:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:2px;
}
.btn:active{transform:translateY(0)}

.btn--outline{
  background:transparent;
  border:1px solid var(--gold);
  color:var(--gold);
}
.btn--outline:hover{
  background:rgba(200,165,90,0.1);
  color:var(--gold-light);
}

.btn--sm{
  padding:var(--sp-sm) var(--sp-lg);
  font-size:var(--fs-xs);
}

/* Form response */
.form-response{
  padding:var(--sp-md) var(--sp-lg);
  border-radius:var(--radius);
  margin-top:var(--sp-md);
  font-size:var(--fs-sm);
  display:none;
}
.form-response.is-success{
  display:block;
  background:rgba(106,154,90,0.1);
  border:1px solid rgba(106,154,90,0.3);
  color:var(--success);
}
.form-response.is-error{
  display:block;
  background:rgba(196,94,74,0.1);
  border:1px solid rgba(196,94,74,0.3);
  color:var(--error);
}

/* --- Related content links --- */
.related-links{
  margin-top:var(--sp-3xl);
  padding-top:var(--sp-2xl);
  border-top:1px solid var(--border);
}
.related-links h3{
  font-size:var(--fs-sm);
  text-transform:uppercase;
  letter-spacing:0.08em;
  color:var(--text-dim);
  margin-bottom:var(--sp-md);
}
.related-links ul{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:var(--sp-sm);
}
.related-links a{
  display:inline-block;
  padding:var(--sp-sm) var(--sp-md);
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  font-size:var(--fs-sm);
  transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease);
}
.related-links a:hover{
  border-color:var(--gold-muted);
  background:var(--bg-card-hover);
}

/* --- Footer --- */
.site-footer{
  margin-top:auto;
  background:var(--bg-surface);
  border-top:1px solid var(--border);
  padding:var(--sp-3xl) 0 var(--sp-xl);
}
.footer-grid{
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1fr;
  gap:var(--sp-2xl);
  margin-bottom:var(--sp-2xl);
}
.footer-brand p{
  font-size:var(--fs-sm);
  margin-top:var(--sp-md);
}
.footer-col h4{
  font-size:var(--fs-xs);
  text-transform:uppercase;
  letter-spacing:0.08em;
  color:var(--text-dim);
  margin-bottom:var(--sp-md);
}
.footer-col ul{list-style:none}
.footer-col li{margin-bottom:var(--sp-sm)}
.footer-col a{
  font-size:var(--fs-sm);
  color:var(--text-muted);
}
.footer-col a:hover{color:var(--gold)}

.footer-bottom{
  border-top:1px solid var(--border);
  padding-top:var(--sp-lg);
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:var(--sp-md);
  font-size:var(--fs-xs);
  color:var(--text-dim);
}

@media(max-width:768px){
  .footer-grid{
    grid-template-columns:1fr 1fr;
    gap:var(--sp-xl);
  }
}
@media(max-width:480px){
  .footer-grid{
    grid-template-columns:1fr;
  }
}

/* --- Cookie Banner --- */
.cookie-banner{
  position:fixed;
  bottom:0;left:0;right:0;
  z-index:9999;
  background:var(--bg-card);
  border-top:1px solid var(--border);
  padding:var(--sp-lg);
  transform:translateY(100%);
  transition:transform 0.4s var(--ease);
  box-shadow:0 -4px 24px rgba(0,0,0,0.4);
}
.cookie-banner.is-visible{
  transform:translateY(0);
}
.cookie-inner{
  max-width:var(--max-w);
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-lg);
  flex-wrap:wrap;
}
.cookie-text{
  flex:1;
  min-width:240px;
  font-size:var(--fs-sm);
  color:var(--text-muted);
}
.cookie-text a{text-decoration:underline}
.cookie-actions{
  display:flex;
  gap:var(--sp-sm);
  flex-wrap:wrap;
}
.cookie-actions .btn{
  font-size:var(--fs-xs);
  padding:var(--sp-sm) var(--sp-lg);
}

/* Cookie Settings Panel */
.cookie-settings-panel{
  display:none;
  margin-top:var(--sp-md);
  padding:var(--sp-lg);
  background:var(--bg-surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
}
.cookie-settings-panel.is-visible{display:block}
.cookie-setting{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:var(--sp-sm) 0;
  border-bottom:1px solid var(--border);
}
.cookie-setting:last-child{border-bottom:none}
.cookie-setting-label{font-size:var(--fs-sm);color:var(--text)}
.cookie-setting-label small{display:block;color:var(--text-dim);font-weight:400;margin-top:2px}

/* Toggle switch */
.toggle{
  position:relative;
  width:44px;height:24px;
  flex-shrink:0;
}
.toggle input{opacity:0;width:0;height:0;position:absolute}
.toggle-track{
  position:absolute;inset:0;
  background:var(--border);
  border-radius:12px;
  cursor:pointer;
  transition:background var(--dur) var(--ease);
}
.toggle-track::after{
  content:'';
  position:absolute;
  top:2px;left:2px;
  width:20px;height:20px;
  background:var(--text);
  border-radius:50%;
  transition:transform var(--dur) var(--ease);
}
.toggle input:checked+.toggle-track{
  background:var(--gold);
}
.toggle input:checked+.toggle-track::after{
  transform:translateX(20px);
}
.toggle input:disabled+.toggle-track{
  opacity:0.6;
  cursor:not-allowed;
}
.toggle input:focus-visible+.toggle-track{
  outline:2px solid var(--gold);
  outline-offset:2px;
}

/* --- Breadcrumb --- */
.breadcrumb{
  padding:var(--sp-md) 0;
  font-size:var(--fs-xs);
  color:var(--text-dim);
}
.breadcrumb a{color:var(--text-dim)}
.breadcrumb a:hover{color:var(--gold)}
.breadcrumb span{margin:0 var(--sp-sm)}

/* --- Page header (hero-like) --- */
.page-header{
  padding:var(--sp-4xl) 0 var(--sp-2xl);
  text-align:center;
  position:relative;
  overflow:hidden;
}
.page-header::before{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(ellipse 60% 80% at 50% 0%,rgba(200,165,90,0.05),transparent 70%),
    radial-gradient(ellipse 40% 60% at 80% 100%,rgba(200,165,90,0.03),transparent 60%);
  pointer-events:none;
}
.page-header .container{position:relative;z-index:1}
.page-header h1{
  background:linear-gradient(135deg,var(--gold-light),var(--gold),var(--gold-muted));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  background-size:200% auto;
}
.page-header p{
  max-width:640px;
  margin:0 auto;
}
@media(max-width:600px){
  .page-header{padding:var(--sp-2xl) 0 var(--sp-lg)}
}

/* --- Two-column layout --- */
.two-col{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--sp-2xl);
  align-items:start;
}
@media(max-width:768px){
  .two-col{grid-template-columns:1fr}
}

/* --- Content prose --- */
.prose h2{margin-top:var(--sp-2xl)}
.prose h3{margin-top:var(--sp-xl)}
.prose ul,.prose ol{
  margin:var(--sp-md) 0;
  padding-left:var(--sp-xl);
  color:var(--text-muted);
}
.prose li{margin-bottom:var(--sp-sm)}
.prose li::marker{color:var(--gold-muted)}

/* --- Allergen badge --- */
.allergen-badge{
  display:inline-flex;
  align-items:center;
  gap:var(--sp-sm);
  padding:var(--sp-sm) var(--sp-lg);
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  font-size:var(--fs-sm);
  color:var(--gold-light);
  font-weight:600;
  transition:border-color var(--dur) var(--ease);
}
.allergen-badge:hover{border-color:var(--gold-muted)}

/* --- Info card (saklama etc.) --- */
.info-card{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:var(--sp-xl);
  position:relative;
}
.info-card h3{
  color:var(--gold-light);
  margin-bottom:var(--sp-sm);
}
.info-card-icon{
  width:40px;height:40px;
  color:var(--gold);
  margin-bottom:var(--sp-md);
}
.info-card-icon svg{width:100%;height:100%}

/* --- Shelf life bar --- */
.shelf-life{
  display:flex;
  flex-direction:column;
  gap:var(--sp-md);
  margin:var(--sp-xl) 0;
}
.shelf-item{
  display:flex;
  align-items:center;
  gap:var(--sp-lg);
}
.shelf-label{
  flex-shrink:0;
  width:180px;
  font-size:var(--fs-sm);
  font-weight:600;
  color:var(--text);
}
.shelf-bar{
  flex:1;
  height:8px;
  background:var(--border);
  border-radius:4px;
  overflow:hidden;
}
.shelf-fill{
  height:100%;
  border-radius:4px;
  background:linear-gradient(90deg,var(--gold-muted),var(--gold));
}
.shelf-value{
  flex-shrink:0;
  font-size:var(--fs-sm);
  color:var(--gold-light);
  font-weight:600;
}
@media(max-width:600px){
  .shelf-label{width:auto;min-width:100px}
  .shelf-item{flex-wrap:wrap;gap:var(--sp-sm)}
}

/* --- Stamp decorative SVG --- */
.stamp{
  display:flex;
  align-items:center;
  justify-content:center;
  width:120px;height:120px;
  margin:var(--sp-xl) auto;
  opacity:0.15;
}
.stamp svg{width:100%;height:100%}

/* --- Sitemap page --- */
.sitemap-list{
  list-style:none;
  columns:2;
  gap:var(--sp-2xl);
}
.sitemap-list li{
  margin-bottom:var(--sp-sm);
  break-inside:avoid;
}
.sitemap-list a{
  font-size:var(--fs-base);
  color:var(--text-muted);
}
.sitemap-list a:hover{color:var(--gold)}

@media(max-width:600px){
  .sitemap-list{columns:1}
}

/* --- 404 --- */
.error-page{
  min-height:60vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:var(--sp-3xl);
}
.error-page h1{
  font-size:8rem;
  background:linear-gradient(135deg,var(--gold-light),var(--gold-muted));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  line-height:1;
  margin-bottom:var(--sp-md);
}
.error-page h2{margin-bottom:var(--sp-md)}
.error-page p{margin-bottom:var(--sp-xl)}

/* --- Disclaimer box --- */
.disclaimer{
  background:rgba(200,165,90,0.05);
  border:1px solid var(--border);
  border-left:3px solid var(--gold-muted);
  border-radius:var(--radius);
  padding:var(--sp-md) var(--sp-lg);
  font-size:var(--fs-sm);
  color:var(--text-muted);
  margin:var(--sp-xl) 0;
}

/* --- Gift box visual --- */
.gift-visual{
  background:linear-gradient(135deg,var(--bg-card),var(--bg-card-hover));
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:var(--sp-2xl);
  text-align:center;
  position:relative;
  overflow:hidden;
}
.gift-visual::before{
  content:'';position:absolute;
  top:50%;left:50%;
  width:200%;height:200%;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(200,165,90,0.04),transparent 50%);
  pointer-events:none;
}
.gift-visual svg{
  width:100px;height:100px;
  color:var(--gold-muted);
  opacity:0.4;
}

/* --- Contact info --- */
.contact-info{
  display:flex;
  flex-direction:column;
  gap:var(--sp-md);
}
.contact-item{
  display:flex;
  align-items:center;
  gap:var(--sp-md);
  padding:var(--sp-md);
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius);
}
.contact-item svg{
  width:20px;height:20px;
  color:var(--gold);
  flex-shrink:0;
}
.contact-item span{
  font-size:var(--fs-sm);
  color:var(--text-muted);
}

/* --- Legal pages --- */
.legal-content{
  max-width:800px;
  margin:0 auto;
  padding-bottom:var(--sp-4xl);
}
.legal-content h2{
  margin-top:var(--sp-2xl);
  padding-top:var(--sp-xl);
  border-top:1px solid var(--border);
}
.legal-content h2:first-of-type{
  border-top:none;
  padding-top:0;
}

/* Inline SVG decorations */
.deco-line{
  display:block;
  width:100%;
  height:40px;
  color:var(--border);
  margin:var(--sp-xl) 0;
}

/* --- Content images --- */
.content-img{
  display:block;
  max-width:380px;
  width:100%;
  height:auto;
  border-radius:var(--radius-lg);
  border:1px solid var(--border);
  object-fit:cover;
}
.img-float-right{
  float:right;
  margin:0 0 var(--sp-lg) var(--sp-xl);
}
.img-float-left{
  float:left;
  margin:0 var(--sp-xl) var(--sp-lg) 0;
}
.img-center{
  margin:var(--sp-xl) auto;
  max-width:480px;
}
.clearfix::after{
  content:'';display:table;clear:both;
}
@media(max-width:600px){
  .content-img{max-width:100%;float:none !important;margin:var(--sp-md) 0 !important}
}

/* ================================================
   ADVANCED ANIMATIONS & EFFECTS
   ================================================ */

/* --- Keyframes --- */
@keyframes fadeUp{
  from{opacity:0;transform:translateY(40px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes scaleIn{
  from{opacity:0;transform:scale(0.88)}
  to{opacity:1;transform:scale(1)}
}
@keyframes slideLeft{
  from{opacity:0;transform:translateX(60px)}
  to{opacity:1;transform:translateX(0)}
}
@keyframes slideRight{
  from{opacity:0;transform:translateX(-60px)}
  to{opacity:1;transform:translateX(0)}
}
@keyframes goldShimmer{
  0%{background-position:200% center}
  100%{background-position:-200% center}
}
@keyframes pulse{0%,100%{opacity:0.3}50%{opacity:0.7}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes rotateFloat{0%,100%{transform:rotate(-2deg) translateY(0)}50%{transform:rotate(2deg) translateY(-6px)}}
@keyframes borderGlow{
  0%,100%{border-color:var(--border)}
  50%{border-color:var(--gold-muted)}
}
@keyframes textReveal{
  from{clip-path:inset(0 100% 0 0)}
  to{clip-path:inset(0 0 0 0)}
}
@keyframes lineGrow{
  from{transform:scaleX(0)}
  to{transform:scaleX(1)}
}
@keyframes particleDrift{
  0%{transform:translate(0,0) scale(1);opacity:0.6}
  50%{opacity:1}
  100%{transform:translate(var(--dx,30px),var(--dy,-60px)) scale(0);opacity:0}
}
@keyframes heroGlow{
  0%,100%{filter:drop-shadow(0 0 20px rgba(200,165,90,0))}
  50%{filter:drop-shadow(0 0 30px rgba(200,165,90,0.15))}
}
@keyframes morphBg{
  0%{border-radius:60% 40% 30% 70%/60% 30% 70% 40%}
  50%{border-radius:30% 60% 70% 40%/50% 60% 30% 60%}
  100%{border-radius:60% 40% 30% 70%/60% 30% 70% 40%}
}
@keyframes countUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* --- Scroll Reveal base --- */
.reveal{
  opacity:0;
  transform:translateY(30px);
  transition:opacity 0.7s cubic-bezier(0.22,1,0.36,1),transform 0.7s cubic-bezier(0.22,1,0.36,1);
  will-change:opacity,transform;
}
.reveal.is-visible{
  opacity:1;
  transform:translateY(0);
}
.reveal-left{
  opacity:0;
  transform:translateX(-40px);
  transition:opacity 0.7s cubic-bezier(0.22,1,0.36,1),transform 0.7s cubic-bezier(0.22,1,0.36,1);
}
.reveal-left.is-visible{
  opacity:1;
  transform:translateX(0);
}
.reveal-right{
  opacity:0;
  transform:translateX(40px);
  transition:opacity 0.7s cubic-bezier(0.22,1,0.36,1),transform 0.7s cubic-bezier(0.22,1,0.36,1);
}
.reveal-right.is-visible{
  opacity:1;
  transform:translateX(0);
}
.reveal-scale{
  opacity:0;
  transform:scale(0.9);
  transition:opacity 0.6s cubic-bezier(0.22,1,0.36,1),transform 0.6s cubic-bezier(0.22,1,0.36,1);
}
.reveal-scale.is-visible{
  opacity:1;
  transform:scale(1);
}

/* Stagger children delay */
.stagger>*:nth-child(1){transition-delay:0s}
.stagger>*:nth-child(2){transition-delay:0.1s}
.stagger>*:nth-child(3){transition-delay:0.2s}
.stagger>*:nth-child(4){transition-delay:0.3s}
.stagger>*:nth-child(5){transition-delay:0.4s}
.stagger>*:nth-child(6){transition-delay:0.5s}

/* --- Cursor glow (desktop) --- */
.cursor-glow{
  position:fixed;
  width:350px;height:350px;
  border-radius:50%;
  pointer-events:none;
  z-index:9998;
  background:radial-gradient(circle,rgba(200,165,90,0.06) 0%,transparent 70%);
  transform:translate(-50%,-50%);
  transition:opacity 0.4s;
  opacity:0;
  mix-blend-mode:screen;
}
body:hover .cursor-glow{opacity:1}

/* --- Hero advanced --- */
.hero{position:relative}
.hero h1{
  animation:fadeUp 1s cubic-bezier(0.16,1,0.3,1) 0.15s both;
  background-size:200% auto;
}
.hero h1:hover{animation:goldShimmer 2.5s ease infinite;background-size:200% auto}
.hero .subtitle{animation:fadeUp 1s cubic-bezier(0.16,1,0.3,1) 0.35s both}
.hero .btn,.hero .btn--outline{animation:fadeUp 0.9s cubic-bezier(0.16,1,0.3,1) 0.55s both}

/* Hero floating blobs */
.hero-blob{
  position:absolute;
  border-radius:50%;
  pointer-events:none;
  opacity:0.04;
  background:var(--gold);
  filter:blur(60px);
  animation:morphBg 12s ease-in-out infinite;
}
.hero-blob--1{width:300px;height:300px;top:-60px;left:10%;animation-delay:0s}
.hero-blob--2{width:220px;height:220px;bottom:0;right:12%;animation-delay:-4s}
.hero-blob--3{width:160px;height:160px;top:40%;left:55%;animation-delay:-8s}

/* Hero parallax layer */
.hero[data-parallax]{will-change:transform}

/* --- Particle container --- */
.particles{
  position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;
}
.particle{
  position:absolute;
  width:3px;height:3px;
  border-radius:50%;
  background:var(--gold);
  opacity:0;
  animation:particleDrift var(--dur-p,4s) ease-out var(--delay-p,0s) infinite;
}

/* --- Nav animated underline --- */
@media(min-width:901px){
  .nav-list a{position:relative}
  .nav-list a::after{
    content:'';position:absolute;bottom:2px;left:0;right:0;
    height:2px;
    background:linear-gradient(90deg,var(--gold),var(--gold-light));
    transform:scaleX(0);
    transform-origin:right;
    transition:transform 0.4s cubic-bezier(0.16,1,0.3,1);
  }
  .nav-list a:hover::after{transform:scaleX(1);transform-origin:left}
  .nav-list a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}
}

/* --- Mobile nav stagger --- */
@media(max-width:900px){
  .main-nav.is-open .nav-list li{animation:fadeUp 0.45s cubic-bezier(0.16,1,0.3,1) both}
  .main-nav.is-open .nav-list li:nth-child(1){animation-delay:0.04s}
  .main-nav.is-open .nav-list li:nth-child(2){animation-delay:0.08s}
  .main-nav.is-open .nav-list li:nth-child(3){animation-delay:0.12s}
  .main-nav.is-open .nav-list li:nth-child(4){animation-delay:0.16s}
  .main-nav.is-open .nav-list li:nth-child(5){animation-delay:0.2s}
  .main-nav.is-open .nav-list li:nth-child(6){animation-delay:0.24s}
  .main-nav.is-open .nav-list li:nth-child(7){animation-delay:0.28s}
  .main-nav.is-open .nav-list li:nth-child(8){animation-delay:0.32s}
}

/* --- Card 3D tilt + glow --- */
.card{
  transition:transform 0.45s cubic-bezier(0.03,0.98,0.52,0.99),box-shadow 0.45s var(--ease),border-color 0.45s var(--ease);
  transform-style:preserve-3d;
  perspective:800px;
}
.card::after{
  content:'';position:absolute;inset:-1px;border-radius:inherit;
  background:radial-gradient(600px circle at var(--mouse-x,50%) var(--mouse-y,50%),rgba(200,165,90,0.1),transparent 40%);
  opacity:0;transition:opacity 0.4s;pointer-events:none;z-index:0;
}
.card:hover::after{opacity:1}
.card>*{position:relative;z-index:1}
.card:hover{
  box-shadow:0 20px 50px rgba(0,0,0,0.35),0 0 30px rgba(200,165,90,0.06);
}
/* JS sets --rx --ry for 3D tilt */
.card.is-tilting{
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-6px);
}

/* --- Info card hover --- */
.info-card{
  transition:border-color 0.4s var(--ease),transform 0.4s var(--ease),box-shadow 0.4s var(--ease);
}
.info-card:hover{
  border-color:var(--border-light);
  transform:translateY(-4px);
  box-shadow:0 12px 36px rgba(0,0,0,0.3),inset 0 1px 0 rgba(200,165,90,0.08);
}
.info-card-icon svg{
  transition:transform 0.5s cubic-bezier(0.16,1,0.3,1);
}
.info-card:hover .info-card-icon svg{
  transform:scale(1.15) rotate(-5deg);
}

/* --- Button magnetic + shine --- */
.btn{position:relative;overflow:hidden;transition:transform 0.3s cubic-bezier(0.16,1,0.3,1),box-shadow 0.3s var(--ease)}
.btn::after{
  content:'';position:absolute;top:0;left:-75%;
  width:50%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.2),transparent);
  transform:skewX(-20deg);
  transition:left 0.6s cubic-bezier(0.16,1,0.3,1);
  pointer-events:none;
}
.btn:hover::after{left:130%}
.btn:hover{box-shadow:0 6px 24px rgba(200,165,90,0.2)}
/* JS applies magnetic pull via --mx --my */
.btn.is-magnetic{transform:translate(var(--mx,0),var(--my,0))}

/* --- Image reveal + hover --- */
.content-img{
  transition:transform 0.6s cubic-bezier(0.16,1,0.3,1),box-shadow 0.6s var(--ease),filter 0.6s var(--ease);
  filter:brightness(0.95);
}
.content-img:hover{
  transform:scale(1.04);
  box-shadow:0 16px 50px rgba(0,0,0,0.35);
  filter:brightness(1.05);
}

/* --- Gold rule animated --- */
.gold-rule{
  transform:scaleX(0);
  transition:transform 0.8s cubic-bezier(0.16,1,0.3,1);
}
.is-visible .gold-rule,.reveal.is-visible .gold-rule,.page-header .gold-rule{
  transform:scaleX(1);
  animation:lineGrow 0.8s cubic-bezier(0.16,1,0.3,1) 0.15s both;
}

/* --- Section divider line --- */
.section--alt{position:relative}
.section--alt::before{
  content:'';position:absolute;top:0;left:50%;
  width:120px;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold-muted),transparent);
  transform:translateX(-50%);
}

/* --- Contact item hover --- */
.contact-item{
  transition:border-color 0.3s var(--ease),transform 0.35s cubic-bezier(0.16,1,0.3,1),background 0.3s var(--ease),box-shadow 0.3s var(--ease);
}
.contact-item:hover{
  border-color:var(--gold-muted);transform:translateX(6px);
  background:var(--bg-card-hover);
  box-shadow:0 4px 16px rgba(0,0,0,0.2);
}

/* --- Allergen badge hover --- */
.allergen-badge{
  transition:border-color 0.3s var(--ease),transform 0.3s cubic-bezier(0.16,1,0.3,1),background 0.3s var(--ease),box-shadow 0.3s var(--ease);
}
.allergen-badge:hover{
  border-color:var(--gold-muted);transform:translateY(-3px);
  background:rgba(200,165,90,0.12);
  box-shadow:0 4px 12px rgba(200,165,90,0.1);
}

/* --- Shelf bar fill --- */
.shelf-fill{transition:width 1.4s cubic-bezier(0.16,1,0.3,1)}

/* --- Table row hover --- */
.price-table tbody tr{transition:background 0.4s var(--ease)}
.price-table tbody tr:hover{background:rgba(200,165,90,0.08)}
.price-table tbody tr:hover td{color:var(--text)}
.price-range{transition:color 0.3s var(--ease),text-shadow 0.3s var(--ease)}
tr:hover .price-range{color:var(--gold);text-shadow:0 0 12px rgba(200,165,90,0.3)}

/* --- Disclaimer --- */
.disclaimer{transition:border-color 0.4s var(--ease),box-shadow 0.4s var(--ease),transform 0.3s var(--ease)}
.disclaimer:hover{
  border-left-color:var(--gold);
  box-shadow:-6px 0 20px rgba(200,165,90,0.1);
  transform:translateX(3px);
}

/* --- Related links --- */
.related-links a{transition:all 0.35s cubic-bezier(0.16,1,0.3,1)}
.related-links a:hover{
  transform:translateY(-3px);border-color:var(--gold-muted);
  box-shadow:0 6px 20px rgba(0,0,0,0.25);
  background:var(--bg-card-hover);
}

/* --- Footer links --- */
.footer-col a{transition:color 0.3s var(--ease),transform 0.3s cubic-bezier(0.16,1,0.3,1);display:inline-block}
.footer-col a:hover{color:var(--gold);transform:translateX(4px)}

/* --- Breadcrumb & page header --- */
.breadcrumb{animation:fadeIn 0.6s cubic-bezier(0.16,1,0.3,1) 0.2s both}
.page-header h1{animation:fadeUp 0.9s cubic-bezier(0.16,1,0.3,1) 0.1s both}
.page-header p{animation:fadeUp 0.9s cubic-bezier(0.16,1,0.3,1) 0.3s both}
.page-header .gold-rule{animation:lineGrow 0.8s cubic-bezier(0.16,1,0.3,1) 0.2s both}

/* --- Flavor selector --- */
.flavor-btn{transition:all 0.35s cubic-bezier(0.16,1,0.3,1)}
.flavor-btn:hover{transform:translateY(-3px) scale(1.04);box-shadow:0 6px 20px rgba(0,0,0,0.25)}
.flavor-btn:active{transform:translateY(0) scale(0.97)}
.flavor-btn[aria-pressed="true"]{box-shadow:0 4px 16px rgba(200,165,90,0.3)}
.flavor-result{transition:opacity 0.4s var(--ease),transform 0.4s var(--ease)}
.flavor-result.is-updating{opacity:0;transform:translateY(10px) scale(0.98)}

/* --- FAQ enhanced --- */
.faq-question{transition:color 0.3s var(--ease),padding-left 0.3s var(--ease)}
.faq-question:hover{color:var(--gold-light);padding-left:var(--sp-sm)}
.faq-item{transition:background 0.3s var(--ease)}
.faq-item.is-open{background:rgba(200,165,90,0.02);border-radius:var(--radius)}

/* --- Form focus --- */
.form-input:focus,.form-textarea:focus{
  box-shadow:0 0 0 3px rgba(200,165,90,0.15),0 0 30px rgba(200,165,90,0.06);
}
.form-input,.form-textarea{transition:border-color 0.3s var(--ease),box-shadow 0.4s var(--ease),transform 0.3s var(--ease)}
.form-input:focus,.form-textarea:focus{transform:translateY(-1px)}

/* --- Stamp --- */
.stamp{animation:rotateFloat 5s ease-in-out infinite}

/* --- Cookie banner --- */
.cookie-banner{transition:transform 0.6s cubic-bezier(0.16,1,0.3,1)}

/* --- 404 --- */
.error-page h1{animation:pulse 3s ease-in-out infinite,heroGlow 3s ease-in-out infinite}

/* --- Scrollbar styling --- */
::-webkit-scrollbar{width:8px}
::-webkit-scrollbar-track{background:var(--bg-deep)}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:var(--gold-muted)}

/* --- Selection --- */
::selection{background:rgba(200,165,90,0.25);color:var(--text)}

/* --- Responsive fluid type --- */
@media(max-width:480px){
  :root{--fs-hero:2.25rem;--fs-2xl:1.75rem;--fs-xl:1.375rem;--fs-lg:1.125rem}
  .card-grid{grid-template-columns:1fr;gap:var(--sp-md)}
  .hero-blob{display:none}
}
@media(min-width:481px) and (max-width:768px){
  :root{--fs-hero:2.75rem;--fs-2xl:2rem}
  .card-grid{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
  .hero-blob{opacity:0.02}
}

/* --- Touch devices --- */
@media(hover:none){
  .cursor-glow{display:none}
  .card:hover{transform:none;box-shadow:none}
  .card.is-tilting{transform:none}
  .card:active{transform:scale(0.98);transition-duration:0.1s}
  .btn:hover::after{display:none}
  .btn.is-magnetic{transform:none}
  .btn:active{transform:scale(0.97);transition-duration:0.1s}
  .content-img:hover{transform:none;box-shadow:none;filter:brightness(0.95)}
  .contact-item:hover{transform:none}
  .contact-item:active{background:var(--bg-card-hover);transition-duration:0.1s}
  .faq-question:hover{padding-left:0}
}

/* --- Print --- */
@media print{
  .site-header,.site-footer,.cookie-banner,.nav-toggle{display:none !important}
  body{background:#fff;color:#000}
  .card,.visual-panel{border-color:#ccc}
  a{color:#000;text-decoration:underline}
  .reveal,.reveal-left,.reveal-right,.reveal-scale{opacity:1 !important;transform:none !important}
}