/* MARCELLA — ortak taban stilleri (yeni sayfalar icin) */

/* ==========================================================
   MARCELLA ATELIER — RANDEVU OLUSTUR
   Palet ve tipografi diger sayfalarla ayni.
   Uc adim + onay ekrani, calisan takvim, saat yuvalari,
   dogrulama, .ics takvim dosyasi.
   ========================================================== */

:root{
  --paper:#FFFFFF; --paper-2:#FAFAF9; --paper-3:#F2F1EF;
  --ink:#191512; --ink-soft:#241F1A;
  --tx:#191512;           /* 15.8:1 */
  --tx-2:#3A332C;         /* 10.4:1 */
  --tx-3:#6B6158;         /*  6.0:1 */
  --tx-brass:#7A6641;     /*  5.5:1 */
  --rule:#E3DFD8; --rule-soft:#F0EDE8; --brass:#9C8763;
  --ok:#16803C;           /*  5.0:1 */
  --ok-soft:#E7F4EC;
  --danger:#C2321F;       /*  5.6:1 */
  --danger-soft:#FBEEEC;

  --shell:min(1240px,92vw);
  --t-body:17px;
  --r:10px;
}

*,*::before,*::after{box-sizing:border-box}
*{-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%;color-scheme:light}
body{
  margin:0;background:var(--paper);color:var(--tx);
  font-family:'Jost',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-weight:400;font-size:var(--t-body);line-height:1.7;
  -webkit-font-smoothing:antialiased;overflow-x:clip;
}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4,p,dl,dt,dd,fieldset,legend{margin:0}
fieldset{border:0;padding:0;min-width:0}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--tx-brass);outline-offset:3px;border-radius:4px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;top:-9999px;left:16px;z-index:400;background:var(--ink);color:#fff;padding:14px 22px}
.skip:focus{left:16px;top:16px}
.shell{width:var(--shell);margin-inline:auto}
.serif{font-family:'Cormorant Garamond',Georgia,'Times New Roman',serif;line-height:1.18}
.num{font-variant-numeric:tabular-nums}
.hr{height:1px;background:var(--rule)}

.label{display:inline-block;font-size:12px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tx-brass)}

/* ---------- Butonlar ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:16px 32px;min-height:56px;
  font-size:14px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid var(--ink);transition:background .3s,color .3s,opacity .2s}
.btn-solid{background:var(--ink);color:#fff}
.btn-solid:hover{background:var(--ink-soft);border-color:var(--ink-soft)}
.btn-ghost{background:transparent;color:var(--tx);border-color:var(--rule)}
.btn-ghost:hover{border-color:var(--tx);background:var(--paper-2)}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.4;pointer-events:none}

/* ---------- Logo (SVG) ---------- */
.logo{display:block;height:auto;width:auto}
.wordmark .logo{height:34px}
.drawer-top .logo,.drawer-top .wordmark .logo{height:26px}
.foot .about .logo{height:30px}
@media (max-width:980px){.wordmark .logo{height:28px}}

/* ---------- Instagram ikonu ---------- */
.ig-ic{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.7;display:inline-block;vertical-align:-4px}
.hnav .ig-link{display:inline-flex;align-items:center;gap:8px}
.dfoot .ig-link,.contact .ig-link{display:inline-flex;align-items:center;gap:8px}

/* ---------- Header ---------- */
.topbar{background:var(--paper);color:var(--tx-2);text-align:center;padding:11px 16px;
  font-size:13.5px;border-bottom:1px solid var(--rule-soft)}
.topbar a{border-bottom:1px solid var(--brass)}
.head{position:sticky;top:0;z-index:120;background:var(--paper);border-bottom:1px solid var(--rule)}
.head-in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;padding:16px 0}
.wordmark{font-family:'Cormorant Garamond',serif;font-weight:500;font-size:26px;
  letter-spacing:.3em;text-indent:.3em;text-align:center;line-height:1}
.wordmark small{display:block;font-family:'Jost',sans-serif;font-size:9px;font-weight:500;
  letter-spacing:.42em;text-indent:.42em;margin-top:6px;color:var(--tx-3)}
.hnav{display:flex;gap:28px;font-size:13.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase}
.hnav.right{justify-content:flex-end}
.hnav a{padding:5px 0;border-bottom:1px solid transparent;transition:border-color .3s}
.hnav a:hover{border-color:currentColor}
.head-right{display:contents}
.head-cart{display:none}
.burger{display:none;width:44px;height:44px;position:relative;margin-left:-10px}
.burger span{position:absolute;left:11px;width:22px;height:1.5px;background:currentColor;
  transition:transform .34s cubic-bezier(.22,.7,.3,1),opacity .2s}
.burger span:nth-child(1){top:16px}.burger span:nth-child(2){top:21.5px}.burger span:nth-child(3){top:27px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}
.drawer{position:fixed;inset:0;z-index:320;background:var(--paper);display:flex;flex-direction:column;
  padding:calc(18px + env(safe-area-inset-top)) 6vw calc(28px + env(safe-area-inset-bottom));
  overflow-y:auto;overscroll-behavior:contain;opacity:0;visibility:hidden;transform:translateY(-10px);
  transition:opacity .32s,transform .38s cubic-bezier(.22,.7,.3,1),visibility .32s}
.drawer.open{opacity:1;visibility:visible;transform:none}
.drawer-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:26px;min-height:44px}
.drawer-top .wordmark{text-align:left;font-size:22px}
.drawer-close{width:44px;height:44px;font-size:26px;line-height:1;color:var(--tx-3)}
.dnav>a{display:flex;justify-content:space-between;align-items:center;padding:17px 0;min-height:58px;
  font-family:'Cormorant Garamond',serif;font-size:25px;font-weight:500;border-bottom:1px solid var(--rule-soft)}
.drawer .dfoot{margin-top:26px;padding-top:20px;border-top:1px solid var(--rule);font-size:15px;color:var(--tx-3)}
.drawer .dfoot a{display:block;padding:7px 0;color:var(--tx-2)}

/* ---------- Footer ---------- */
.foot{background:var(--paper);color:var(--tx-2);border-top:1px solid var(--rule);
  padding:clamp(52px,6vw,80px) 0 30px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:clamp(28px,3vw,54px)}
.foot h4{font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tx-brass);margin-bottom:18px}
.foot li{margin-bottom:11px}
.foot li a{font-size:15px;color:var(--tx-2);border-bottom:1px solid transparent;transition:border-color .3s}
.foot li a:hover{border-color:var(--tx-2)}
.foot .about .wordmark{text-align:left;font-size:25px}
.foot .about p{color:var(--tx-3);font-size:15px;margin-top:15px;max-width:34ch}
.foot .contact address{font-style:normal}
.foot .contact p{font-size:15px;margin-bottom:11px;max-width:30ch}
.foot .contact a{border-bottom:1px solid transparent}
.foot .contact a:hover{border-color:var(--tx-2)}
.foot-bottom{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
  margin-top:clamp(38px,4vw,60px);padding-top:22px;border-top:1px solid var(--rule);
  font-size:14px;color:var(--tx-3)}



@media (prefers-reduced-motion:reduce){*{animation:none!important;transition-duration:.01ms!important}}

/* ==========================================================
   RESPONSIVE
   ========================================================== */
@media (max-width:1100px){
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:980px){
  .hnav{display:none}
  .burger{display:block}
  .head-in{grid-template-columns:44px 1fr 44px;gap:8px}
  .head-in .wordmark{justify-self:center}   /* logo mobilde ortada */
  .head-in .wordmark .logo{margin:0 auto}
  .head-right{display:flex;justify-content:flex-end}
  .head-cart{display:inline-flex;align-items:center;justify-content:center;
    width:44px;height:44px;font-size:12px;font-weight:500}
  .wrap{grid-template-columns:1fr;padding-bottom:20px}

  .foot-grid{grid-template-columns:1fr;text-align:center}
  .foot .about{display:flex;flex-direction:column;align-items:center}
  .foot .about .wordmark{text-align:center}
  .foot .about p,.foot .contact p{margin-inline:auto}
  .foot li{margin-bottom:13px}
  .foot-bottom{flex-direction:column;align-items:center;text-align:center;gap:10px}
}
@media (max-width:640px){
}

/* alt bilgi künyesi (yapımcı bağlantısı) */
.foot-bottom .kunye{color:var(--tx-3)}
.foot-bottom .kunye a{color:inherit;border-bottom:1px solid var(--rule)}
.foot-bottom .kunye a:hover{color:var(--tx);border-color:currentColor}