/* ============================================================
   BADEM ÇİKOLATA — Core Design System
   Tech-luxury chocolate atelier. Cream / cocoa / whisper-gold.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Hanken+Grotesk:wght@300;400;500;600;700&family=Spline+Sans+Mono:wght@400;500&display=swap');

:root{
  /* ---- palette ---- */
  --paper:#FDFBF7;
  --cream:#F8F1E7;
  --cream-2:#F1E7D8;
  --cream-3:#EADDC9;
  --ink:#23190F;          /* warm near-black for text */
  --cocoa:#3B2418;        /* dark chocolate */
  --cocoa-2:#2A1A10;
  --milk:#8B5A3C;
  --gold:#C9A24D;
  --gold-deep:#A67F33;
  --ruby:#C76D7E;
  --muted:#8C7B68;        /* secondary text on cream */
  --muted-2:#B6A88F;      /* faint text / placeholder */
  --line:rgba(59,36,24,.12);
  --line-2:rgba(59,36,24,.20);
  --line-light:rgba(248,241,231,.16);

  /* ---- type ---- */
  --serif:'Cormorant', Georgia, 'Times New Roman', serif;
  --sans:'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --mono:'Spline Sans Mono', ui-monospace, monospace;

  /* ---- metrics ---- */
  --maxw:1320px;
  --gutter:clamp(20px,5vw,72px);
  --radius:2px;
  --radius-lg:6px;

  /* ---- motion ---- */
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --dur:.55s;

  /* ---- shadow ---- */
  --shadow-sm:0 1px 2px rgba(40,24,14,.04), 0 2px 8px rgba(40,24,14,.05);
  --shadow:0 8px 30px rgba(40,24,14,.08), 0 2px 8px rgba(40,24,14,.05);
  --shadow-lg:0 30px 70px -20px rgba(40,24,14,.28), 0 8px 24px rgba(40,24,14,.10);
}

*{box-sizing:border-box;}
html{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; scroll-behavior:smooth;}
body{
  margin:0; background:var(--cream); color:var(--ink);
  font-family:var(--sans); font-weight:400; font-size:16px; line-height:1.6;
  letter-spacing:.005em;
}
img{display:block; max-width:100%;}
a{color:inherit; text-decoration:none;}
button{font-family:inherit; cursor:pointer;}
::selection{background:var(--cocoa); color:var(--cream);}

/* ---------------- typography ---------------- */
.serif{font-family:var(--serif);}
.display{
  font-family:var(--serif); font-weight:500; line-height:.96;
  letter-spacing:-.01em; font-size:clamp(46px,8vw,128px);
}
.h1{font-family:var(--serif); font-weight:500; line-height:1.0; letter-spacing:-.01em; font-size:clamp(38px,5.4vw,76px);}
.h2{font-family:var(--serif); font-weight:500; line-height:1.04; letter-spacing:-.005em; font-size:clamp(30px,4vw,52px);}
.h3{font-family:var(--serif); font-weight:500; line-height:1.1; font-size:clamp(24px,2.6vw,34px);}
.lede{font-size:clamp(17px,1.5vw,21px); line-height:1.55; color:var(--muted); font-weight:400;}
.kicker{
  font-family:var(--mono); font-weight:500; text-transform:uppercase;
  letter-spacing:.28em; font-size:11.5px; color:var(--gold-deep);
}
.eyebrow{
  font-family:var(--sans); font-weight:600; text-transform:uppercase;
  letter-spacing:.18em; font-size:12px; color:var(--muted);
}
.italic{font-style:italic;}

/* ---------------- layout ---------------- */
.wrap{max-width:var(--maxw); margin:0 auto; padding-inline:var(--gutter); width:100%;}
.section{padding-block:clamp(64px,9vw,140px);}
.center{text-align:center;}
.eyer{display:flex; align-items:center; gap:14px;}
.rule{height:1px; background:var(--line); border:0; margin:0;}

/* ---------------- buttons ---------------- */
.btn{
  --bg:var(--cocoa); --fg:var(--cream);
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--sans); font-weight:600; font-size:13.5px; letter-spacing:.02em;
  padding:15px 28px; border:1px solid transparent; border-radius:100px;
  background:var(--bg); color:var(--fg);
  transition:transform .4s var(--ease-out), background .35s var(--ease), color .35s var(--ease), box-shadow .35s var(--ease);
  position:relative; overflow:hidden; white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 14px 30px -12px rgba(40,24,14,.5);}
.btn:active{ transform:translateY(0);}
.btn .arr{transition:transform .4s var(--ease-out);}
.btn:hover .arr{transform:translateX(4px);}
.btn--ghost{ --bg:transparent; --fg:var(--ink); border-color:var(--line-2);}
.btn--ghost:hover{ background:var(--cocoa); color:var(--cream); border-color:var(--cocoa);}
.btn--gold{ --bg:var(--gold); --fg:var(--cocoa-2);}
.btn--light{ --bg:var(--cream); --fg:var(--cocoa);}
.btn--lg{padding:18px 36px; font-size:14.5px;}
.btn--sm{padding:11px 18px; font-size:12.5px;}
.btn--block{display:flex; width:100%;}

.link-underline{position:relative; display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:13.5px;}
.link-underline::after{content:""; position:absolute; left:0; bottom:-3px; width:100%; height:1px; background:currentColor; transform:scaleX(.0); transform-origin:left; transition:transform .45s var(--ease-out);}
.link-underline:hover::after{transform:scaleX(1);}
.link-underline .arr{transition:transform .4s var(--ease-out);}
.link-underline:hover .arr{transform:translateX(3px);}

/* ---------------- header / nav ---------------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px var(--gutter); gap:24px;
  transition:background .4s var(--ease), backdrop-filter .4s var(--ease), border-color .4s var(--ease), padding .4s var(--ease);
  border-bottom:1px solid transparent;
}
.nav--scrolled{ background:rgba(248,241,231,.82); backdrop-filter:blur(18px) saturate(1.4); border-bottom-color:var(--line); padding-block:13px;}
.nav__logo{height:21px; width:auto;}
.nav__links{display:flex; align-items:center; gap:30px; list-style:none; margin:0; padding:0;}
.nav__links a{font-size:14px; font-weight:500; color:var(--ink); opacity:.78; transition:opacity .3s, color .3s; position:relative; white-space:nowrap;}
.nav__links a:hover{opacity:1;}
.nav__links a.active{opacity:1;}
.nav__links a.active::after{content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px; background:var(--gold);}
.nav__right{display:flex; align-items:center; gap:18px;}
.nav__icon{display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:100px; transition:background .3s; color:var(--ink);}
.nav__icon:hover{background:rgba(59,36,24,.07);}
.nav__cart{position:relative;}
.nav__cart-count{position:absolute; top:4px; right:3px; min-width:17px; height:17px; padding:0 4px; border-radius:100px; background:var(--gold); color:var(--cocoa-2); font-size:10px; font-weight:700; display:flex; align-items:center; justify-content:center; font-family:var(--mono);}
.nav__burger{display:none;}

/* mobile slide-over nav */
.mobnav{position:fixed; inset:0; z-index:200; background:var(--cream); padding:18px var(--gutter) 40px;
  transform:translateX(100%); transition:transform .5s var(--ease-out); display:flex; flex-direction:column; visibility:hidden;}
.mobnav.open{transform:none; visibility:visible;}
.mobnav__head{display:flex; align-items:center; justify-content:space-between; margin-bottom:30px;}
.mobnav ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column;}
.mobnav ul li a{display:flex; align-items:center; justify-content:space-between; padding:20px 0; font-family:var(--serif); font-size:30px; font-weight:500; border-bottom:1px solid var(--line);}
.mobnav ul li a .arr{opacity:.4;}

/* ---------------- footer ---------------- */
.footer{ background:var(--cocoa); color:var(--cream); padding-block:clamp(56px,7vw,96px) 36px;}
.footer a{opacity:.7; transition:opacity .3s;}
.footer a:hover{opacity:1;}
.footer__grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:48px; padding-bottom:56px; border-bottom:1px solid var(--line-light);}
.footer__logo{height:22px; margin-bottom:22px;}
.footer__col h4{font-family:var(--mono); text-transform:uppercase; letter-spacing:.2em; font-size:11px; font-weight:500; color:var(--gold); margin:0 0 18px;}
.footer__col ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; font-size:14px;}
.footer__bottom{display:flex; justify-content:space-between; align-items:center; padding-top:28px; font-size:12.5px; opacity:.6; gap:20px; flex-wrap:wrap;}
.footer__news{display:flex; gap:8px; margin-top:18px;}
.footer__news input{flex:1; background:transparent; border:1px solid var(--line-light); border-radius:100px; padding:13px 18px; color:var(--cream); font-family:var(--sans); font-size:13.5px; outline:none; transition:border-color .3s;}
.footer__news input::placeholder{color:rgba(248,241,231,.45);}
.footer__news input:focus{border-color:var(--gold);}
.footer__news button{background:var(--cream); color:var(--cocoa); border:0; border-radius:100px; width:46px; display:flex; align-items:center; justify-content:center; flex:0 0 auto; transition:background .3s, transform .3s;}
.footer__news button:hover{background:var(--gold); transform:translateX(2px);}

/* ---------------- chips / pills / badges ---------------- */
.tag{display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); padding:6px 12px; border:1px solid var(--line); border-radius:100px; background:var(--paper);}
.dot{width:6px; height:6px; border-radius:50%; background:var(--gold);}

/* ---------------- utility ---------------- */
.stack{display:flex; flex-direction:column;}
.row{display:flex; align-items:center;}
.gap-8{gap:8px;} .gap-12{gap:12px;} .gap-16{gap:16px;} .gap-24{gap:24px;} .gap-32{gap:32px;}
.mt-8{margin-top:8px;} .mt-16{margin-top:16px;} .mt-24{margin-top:24px;} .mt-32{margin-top:32px;} .mt-48{margin-top:48px;}
.muted{color:var(--muted);}
.gold{color:var(--gold-deep);}
.hide{display:none !important;}

/* photo placeholder — where real product/lifestyle photography goes */
.ph{position:relative; overflow:hidden; background:
   repeating-linear-gradient(135deg, var(--cream-2) 0 14px, var(--cream-3) 14px 28px);
   display:flex; align-items:center; justify-content:center; color:var(--milk);}
.ph::after{content:attr(data-label); font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--milk); opacity:.7; padding:8px 14px; border:1px solid var(--line-2); border-radius:100px; background:rgba(253,251,247,.6); text-align:center;}
.ph--dark{background:repeating-linear-gradient(135deg, #34200f 0 14px, #3e2814 14px 28px);}
.ph--dark::after{color:var(--cream); border-color:var(--line-light); background:rgba(0,0,0,.18);}

/* shared app chrome (configurator + box) */
.cfgbar{display:flex; align-items:center; justify-content:space-between; gap:24px; padding:14px var(--gutter); border-bottom:1px solid var(--line); background:rgba(248,241,231,.86); backdrop-filter:blur(16px); z-index:30; flex:0 0 auto;}
.cfgbar__logo{height:19px;}
.cfgbar__right{display:flex; align-items:center; gap:14px; font-size:13.5px; white-space:nowrap;}
/* studio mode switcher (Tasarla / Kutunu Hazırla) — shared by configurator + box */
.cfgbar__modes{display:flex; gap:3px; padding:3px; background:var(--cream-2); border:1px solid var(--line); border-radius:100px;}
.cfgbar__mode{padding:7px 14px; border-radius:100px; font-size:12.5px; font-weight:600; color:var(--muted); white-space:nowrap; transition:all .3s var(--ease, ease);}
.cfgbar__mode:hover{color:var(--ink);}
.cfgbar__mode.on{background:var(--cocoa); color:var(--cream);}
.cfgbar__icon{display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:50%; color:var(--ink); border:1px solid var(--line); background:var(--paper); transition:all .3s var(--ease, ease);}
.cfgbar__icon:hover{border-color:var(--line-2); background:var(--cream-2);}
@media (max-width:560px){
  .cfgbar__mode{padding:7px 11px; font-size:12px;}
  .cfgbar__link-hide{display:none;}
}
.app-toast{position:fixed; bottom:28px; left:50%; transform:translateX(-50%) translateY(20px); background:var(--cocoa); color:var(--cream); padding:14px 22px; border-radius:100px; font-size:13.5px; font-weight:600; display:flex; gap:12px; align-items:center; opacity:0; pointer-events:none; transition:all .4s var(--ease-out); z-index:80; box-shadow:var(--shadow-lg);}
.app-toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

/* reveal-on-scroll */
.reveal{opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease-out), transform .9s var(--ease-out);}
.reveal.in{opacity:1; transform:none;}
.reveal[data-d="1"]{transition-delay:.08s;}
.reveal[data-d="2"]{transition-delay:.16s;}
.reveal[data-d="3"]{transition-delay:.24s;}
.reveal[data-d="4"]{transition-delay:.32s;}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1 !important; transform:none !important;}
  *{scroll-behavior:auto !important;}
}

/* ---------------- responsive ---------------- */
@media (max-width:1000px){
  .footer__grid{grid-template-columns:1fr 1fr; gap:36px;}
}
@media (max-width:860px){
  .nav__links, .nav__right .nav__hide{display:none;}
  .nav__burger{display:inline-flex;}
  .footer__grid{grid-template-columns:1fr 1fr; gap:30px 24px;}
}
@media (max-width:560px){
  .footer__grid{grid-template-columns:1fr;}
  .footer__bottom{flex-direction:column; align-items:flex-start; gap:10px;}
}

/* ============ search overlay (navbar) ============ */
.search-ov{position:fixed; inset:0; z-index:200; display:none;}
.search-ov.open{display:block;}
.search-ov__bg{position:absolute; inset:0; background:rgba(35,25,15,.42); backdrop-filter:blur(4px);}
.search-ov__panel{position:relative; max-width:680px; margin:0 auto; margin-top:12vh; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); overflow:hidden;}
.search-ov__top{display:flex; align-items:center; gap:12px; padding:18px 20px; border-bottom:1px solid var(--line);}
.search-ov__top svg{flex:0 0 auto; color:var(--muted);}
.search-ov__input{flex:1; border:0; background:transparent; font-size:18px; font-family:var(--serif); color:var(--ink); outline:none;}
.search-ov__close{flex:0 0 auto; width:32px; height:32px; border:0; background:var(--cream-2); border-radius:50%; cursor:pointer; color:var(--muted); display:flex; align-items:center; justify-content:center;}
.search-ov__results{max-height:52vh; overflow-y:auto;}
.search-ov__item{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 20px; border-bottom:1px solid var(--line); transition:background .2s;}
.search-ov__item:hover{background:var(--cream);}
.search-ov__item .nm{font-weight:600; font-size:15px;}
.search-ov__item .tg{font-size:12px; color:var(--muted); font-family:var(--mono);}
.search-ov__empty{padding:26px 20px; color:var(--muted); text-align:center; font-size:14px;}

/* ============ document / info pages (legal, SSS, kargo…) ============ */
.doc{max-width:780px; margin:0 auto; padding:130px var(--gutter) 90px;}
.doc__kicker{font-family:var(--mono); font-size:11.5px; text-transform:uppercase; letter-spacing:.16em; color:var(--gold-deep); margin-bottom:14px;}
.doc h1{font-family:var(--serif); font-size:clamp(34px,5vw,52px); line-height:1.05; margin:0 0 14px;}
.doc__lead{font-size:17px; color:var(--muted); line-height:1.6; margin-bottom:18px;}
.doc__meta{font-size:12.5px; color:var(--muted); font-family:var(--mono); border-bottom:1px solid var(--line); padding-bottom:22px; margin-bottom:34px;}
.doc h2{font-family:var(--serif); font-size:24px; margin:38px 0 12px;}
.doc h3{font-size:16px; margin:24px 0 8px;}
.doc p, .doc li{font-size:15.5px; line-height:1.72; color:var(--ink);}
.doc p{margin:0 0 14px;}
.doc ul, .doc ol{margin:0 0 16px; padding-left:22px;}
.doc li{margin-bottom:7px;}
.doc a{color:var(--cocoa); font-weight:600; text-decoration:underline; text-underline-offset:3px;}
.doc__faq{border:1px solid var(--line); border-radius:14px; overflow:hidden; margin-bottom:14px; background:var(--paper);}
.doc__faq summary{cursor:pointer; padding:18px 20px; font-weight:600; font-size:15.5px; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:12px;}
.doc__faq summary::-webkit-details-marker{display:none;}
.doc__faq summary::after{content:"+"; font-size:22px; color:var(--muted); transition:transform .3s;}
.doc__faq[open] summary::after{transform:rotate(45deg);}
.doc__faq .a{padding:0 20px 18px; color:var(--ink); line-height:1.7; font-size:15px;}
.doc__note{background:var(--cream); border:1px solid var(--line-2); border-radius:12px; padding:16px 18px; font-size:14px; color:var(--ink); line-height:1.6; margin:20px 0;}