/* Caffolia vitrin — temeller, tipografi, düğmeler
   Kaynak: onaylı sunumv2 tasarımı (kurulum/tasarim-referans).  */

/* -------------------------------------------------------------- 2. TEMELLER */
*,*::before,*::after{box-sizing:border-box}
html{font-size:16px;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--zemin);color:var(--metin);
  font-family:var(--yazi);font-size:1rem;line-height:1.6;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
body[data-kilit="1"]{overflow:hidden}
img{max-width:100%;display:block}
[hidden]{display:none!important}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer;padding:0}
h1,h2,h3,h4,p,figure{margin:0}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--gold-400);outline-offset:3px;border-radius:4px}
.gizli{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

.kap{width:100%;max-width:var(--en);margin-inline:auto;padding-inline:clamp(16px,4vw,40px)}

/* ------------------------------------------------------- 3. ORTAK TİPOGRAFİ */
.ustbasli{
  display:block;font-size:.75rem;font-weight:600;letter-spacing:.26em;
  text-transform:uppercase;color:var(--gold-metin);margin-bottom:14px;
}
.ustbasli--ac{color:var(--gold-400)}
.bolum-basli{
  font-size:clamp(1.9rem,3.6vw,2.9rem);line-height:1.1;font-weight:700;
  letter-spacing:-.02em;color:var(--metin);
}
.bolum-basli--ac{color:var(--metin-ac)}
.bolum{padding:clamp(56px,7vw,88px) 0}
.bolum__tepe{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:24px;margin-bottom:clamp(28px,3.4vw,42px);flex-wrap:wrap;
}

/* düz altı çizili bağlantı — “Tüm Ürünler →” */
.bag-ok{
  display:inline-flex;align-items:center;gap:9px;font-size:.94rem;font-weight:500;
  color:var(--metin);padding-bottom:4px;border-bottom:1px solid var(--cizgi);
  transition:gap var(--gecis),border-color var(--gecis),color var(--gecis);
}
.bag-ok:hover{gap:15px;color:var(--bordo-700);border-bottom-color:var(--bordo-700)}
.bag-ok svg{width:15px;height:15px;flex:none}
.bag-ok--ac{color:var(--metin-ac);border-bottom-color:var(--cizgi-ac)}
.bag-ok--ac:hover{color:var(--gold-400);border-bottom-color:var(--gold-400)}

/* ------------------------------------------------------------- 4. DÜĞMELER */
.dugme{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 30px;border-radius:var(--r-tam);font-size:.97rem;font-weight:600;
  letter-spacing:.005em;white-space:nowrap;cursor:pointer;
  transition:transform var(--gecis),box-shadow var(--gecis),
             background-color var(--gecis),color var(--gecis),border-color var(--gecis);
}
.dugme svg{width:17px;height:17px;flex:none;transition:transform var(--gecis)}
.dugme:hover{transform:translateY(-2px)}
.dugme:active{transform:translateY(0)}
.dugme:hover svg{transform:translateX(3px)}

.dugme--gold{
  background:linear-gradient(180deg,var(--gold-200) 0%,#DCB36B 100%);
  color:#2A1B08;box-shadow:0 6px 18px rgba(198,148,62,.30);
}
.dugme--gold:hover{box-shadow:0 10px 26px rgba(198,148,62,.42)}

.dugme--cerceve{border:1px solid rgba(249,244,236,.45);color:var(--metin-ac);background:transparent}
.dugme--cerceve:hover{background:rgba(249,244,236,.10);border-color:rgba(249,244,236,.75)}

.dugme--koyu{background:var(--kahve-800);color:var(--metin-ac);box-shadow:var(--golge-s)}
.dugme--koyu:hover{background:var(--kahve-700);box-shadow:var(--golge-m)}

.dugme--tam{width:100%}