/* Caffolia vitrin — üst şerit ve başlık
   Kaynak: onaylı sunumv2 tasarımı (kurulum/tasarim-referans). Ana sayfada başlık hero üzerinde saydam; iç sayfalarda .tepe--dolu. */

/* =========================================================== 5. ÜST ŞERİT */
.ust-serit{
  background:var(--kahve-900);color:var(--metin-ac-2);
  font-size:.8rem;letter-spacing:.01em;
}
.ust-serit__ic{
  display:flex;align-items:center;justify-content:center;gap:10px;
  min-height:44px;padding-block:9px;text-align:center;
}
.ust-serit svg{width:17px;height:17px;flex:none;color:var(--gold-600)}
.ust-serit b{color:var(--gold-400);font-weight:600}

/* ============================================================== 6. BAŞLIK */
.tepe{
  /* Tasarımda başlık hero'nun üzerinde saydam duruyor. Uzun sayfada sepete
     erişim kaybolmasın diye sticky yapıldı: kaydırınca koyu zemine oturur. */
  position:sticky;top:0;z-index:60;margin-bottom:calc(-1 * var(--tepe-h));
  box-shadow:inset 0 -1px 0 rgba(249,244,236,.10);
  transition:background-color var(--gecis),box-shadow var(--gecis);
}
.tepe[data-kaydi="1"]{
  background:rgba(21,11,6,.94);backdrop-filter:blur(14px);
  box-shadow:inset 0 -1px 0 rgba(249,244,236,.14), 0 10px 34px rgba(21,11,6,.34);
}
.tepe__ic{
  display:flex;align-items:center;gap:clamp(14px,2vw,30px);min-height:var(--tepe-h);
  max-width:1420px;   /* menü 7 bağlantıya çıktı — başlık içerikten biraz geniş */
}
.tepe__logo{flex:none;display:block}
.tepe__logo img{width:clamp(126px,11vw,158px);height:auto}

.menu{display:flex;align-items:center;gap:clamp(12px,1.6vw,26px);margin-inline:auto}
.menu__bag{
  position:relative;padding:8px 2px;font-size:.9rem;font-weight:500;
  color:var(--metin-ac);white-space:nowrap;transition:color var(--gecis);
  text-shadow:0 1px 12px rgba(21,11,6,.9);
}
.menu__bag::after{
  content:"";position:absolute;left:0;bottom:2px;width:100%;height:1.5px;
  background:var(--gold-400);transform:scaleX(0);transform-origin:left;
  transition:transform var(--gecis);
}
.menu__bag:hover{color:var(--gold-400)}
.menu__bag[data-aktif]{color:var(--gold-400)}
.menu__bag[data-aktif]::after{transform:scaleX(1)}
.menu__bag:hover::after{transform:scaleX(1)}

.tepe__araclar{display:flex;align-items:center;gap:12px;margin-left:auto}

.ara-kutu{
  display:flex;align-items:center;gap:10px;width:clamp(196px,16vw,232px);
  padding:11px 16px 11px 20px;border-radius:var(--r-tam);
  border:1px solid rgba(249,244,236,.30);background:rgba(249,244,236,.05);
  color:var(--metin-ac-2);font-size:.88rem;cursor:pointer;text-align:left;
  transition:border-color var(--gecis),background-color var(--gecis);
}
.ara-kutu:hover{border-color:rgba(249,244,236,.55);background:rgba(249,244,236,.10)}
.ara-kutu span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ara-kutu svg{width:17px;height:17px;flex:none;color:var(--metin-ac)}

.ikon-dugme--ara{display:none}
.hero__mobil-gorsel{display:none}

.ikon-dugme{
  position:relative;display:grid;place-items:center;width:44px;height:44px;
  border-radius:var(--r-tam);color:var(--metin-ac);
  transition:background-color var(--gecis),color var(--gecis);
}
.ikon-dugme:hover{background:rgba(249,244,236,.12)}
.ikon-dugme svg{width:22px;height:22px}
.rozet{
  position:absolute;top:4px;right:3px;min-width:19px;height:19px;padding:0 5px;
  display:grid;place-items:center;border-radius:var(--r-tam);
  background:var(--gold-400);color:#2A1B08;
  font-size:.75rem;font-weight:700;line-height:1;
  box-shadow:0 0 0 2px var(--kahve-900);
}
.rozet[data-bos="1"]{background:rgba(249,244,236,.22);color:var(--metin-ac);
  box-shadow:0 0 0 2px rgba(21,11,6,.5)}
.rozet--favori[data-bos="1"]{display:none}

.hamburger{display:none}