/* ══════════════════════════════════════════════════════════════════════
   ORTAK PARÇALAR — HEADER (h01) & FOOTER (f01)
   Yüzen hap (pill) bar tasarımı. Tüm renk/ ölçüler tema değişkenlerinden
   gelir (--oc-*) ve fallback içerir; böylece HER TEMA kendi paletinde
   kendini ayarlar, yeni tema yüklenince de doğru görünür.
   Yapı: çekirdek (app/theme/variants) + buradaki temel CSS.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Tema değişkenleriyle çalışan ortak token katmanı ── */
.hd-variant,.ft-variant{
  --hd-surface:var(--oc-surface,#fff);
  --hd-surface-2:var(--oc-surface-2,#f5f7f4);
  --hd-surface-3:var(--oc-surface-3,#eef1ee);
  --hd-ink:var(--oc-ink,#16211c);
  --hd-ink-2:var(--oc-ink-2,#41524a);
  --hd-muted:var(--oc-muted,#84948c);
  --hd-line:var(--oc-border,#e3e8e4);
  --hd-accent:var(--oc-accent,#146b4c);
  --hd-accent-2:var(--oc-accent-2,#0f8a5f);
  --hd-accent-soft:var(--oc-accent-soft,rgba(20,107,76,.1));
  --hd-radius:999px;
  --hd-card-radius:22px;
  --hd-shadow:var(--oc-shadow,0 14px 34px -22px rgba(16,44,32,.35));
  --hd-gap:var(--oc-l,20px);
  --hd-pad:var(--oc-m,20px);
  font-family:var(--oc-body,inherit)
}

/* ══ HEADER — yüzen hap bar ══ */
.hd-1{background:transparent;padding:0;margin:0}
.hd-1 .hd-shell{display:block;padding-top:16px}
.hd-1 .hd-bar{
  display:flex;align-items:center;gap:14px;
  background:var(--hd-surface);border:1px solid var(--hd-line);
  border-radius:999px;box-shadow:var(--hd-shadow);
  padding:9px 12px 9px 20px;min-width:0
}
/* Marka */
.hd-1 .hd-brand{
  display:flex;align-items:center;gap:10px;flex:none;max-width:34%;
  text-decoration:none;color:var(--hd-ink)
}
.hd-1 .hd-brand img{height:30px;width:auto;max-height:30px;object-fit:contain}
.hd-1 .hd-brand b{
  font-family:var(--oc-head,inherit);font-weight:800;font-size:17px;
  letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
/* Arama: barın içine gömülü, sağında dairesel aksiyon butonu */
.hd-1 .hd-search{
  flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:6px;
  background:var(--hd-surface-2);border:1px solid var(--hd-line);
  border-radius:var(--hd-radius);padding:4px 4px 4px 16px;height:46px
}
.hd-1 .hd-search input{
  flex:1 1 auto;min-width:0;width:100%;height:100%;border:0;background:transparent;
  color:var(--hd-ink);font-family:inherit;font-size:13.5px;outline:none
}
.hd-1 .hd-search input::placeholder{color:var(--hd-muted)}
.hd-1 .hd-search-go{
  flex:none;width:36px;height:36px;border-radius:50%;border:0;cursor:pointer;
  display:grid;place-items:center;background:var(--hd-accent);color:#fff;
  transition:transform .16s ease,background .16s ease
}
.hd-1 .hd-search-go:hover{background:var(--hd-accent-2);transform:scale(1.06)}
.hd-1 .hd-search-go svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
/* Sağ aksiyon kümesi */
.hd-1 .hd-actions{display:flex;align-items:center;gap:8px;flex:none}
.hd-1 .hd-iconbtn{
  position:relative;width:40px;height:40px;border-radius:50%;
  display:grid;place-items:center;text-decoration:none;color:var(--hd-ink-2);
  background:var(--hd-surface-2);border:1px solid var(--hd-line);
  transition:background .16s ease,color .16s ease,transform .16s ease
}
.hd-1 .hd-iconbtn:hover{background:var(--hd-accent-soft);color:var(--hd-accent);transform:translateY(-1px)}
.hd-1 .hd-iconbtn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hd-1 .hd-count{
  position:absolute;top:-3px;right:-3px;min-width:18px;height:18px;padding:0 5px;
  border-radius:99px;background:var(--hd-accent);color:#fff;
  font-size:10.5px;font-weight:800;display:grid;place-items:center;line-height:1
}
/* Kullanıcı hapı */
.hd-1 .hd-user{
  display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--hd-ink);
  background:var(--hd-surface-2);border:1px solid var(--hd-line);
  border-radius:var(--hd-radius);padding:4px 14px 4px 4px;min-width:0
}
.hd-1 .hd-avatar{
  width:32px;height:32px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--hd-accent);color:#fff;font-size:11.5px;font-weight:800;letter-spacing:.02em
}
.hd-1 .hd-user-name{
  font-size:12.5px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px
}
/* Menü şeridi: barın altında ikinci hap */
.hd-1 .hd-nav{
  display:flex;align-items:center;gap:4px;flex:1 1 auto;min-width:0;
  flex-wrap:nowrap;overflow:hidden
}
.hd-1 .hd-nav a{
  padding:9px 15px;border-radius:999px;text-decoration:none;white-space:nowrap;
  color:var(--hd-ink-2);font-size:13px;font-weight:650;
  transition:background .16s ease,color .16s ease
}
.hd-1 .hd-nav a:hover{background:var(--hd-accent-soft);color:var(--hd-accent)}
.hd-1 .hd-catbtn{
  display:none;align-items:center;gap:7px;flex:none;cursor:pointer;
  border:1px solid var(--hd-line);background:var(--hd-surface-2);color:var(--hd-ink-2);
  border-radius:var(--hd-radius);padding:0 14px;height:40px;font:650 12.5px inherit
}
.hd-1 .hd-catbtn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round}

/* ── Mobil ── */
@media (max-width:900px){
  .hd-1 .hd-shell{gap:8px;padding-top:10px}
  /* Mobil bar: [logo][kategori][arama][sepet] — menu çekmecede */
  .hd-1 .hd-bar{gap:8px;padding:8px 10px 8px 12px;flex-wrap:nowrap}
  .hd-1 .hd-brand{order:1;max-width:none;width:auto;flex:none;gap:0}
  .hd-1 .hd-brand b{display:none}
  .hd-1 .hd-brand img{height:28px}
  .hd-1 .hd-catbtn{order:2;display:inline-flex;width:38px;padding:0;justify-content:center;height:38px}
  .hd-1 .hd-catbtn span{display:none}
  .hd-1 .hd-search{order:3;flex:1 1 auto;min-width:0;height:38px;padding:3px 3px 3px 13px}
  .hd-1 .hd-search input{font-size:13px}
  .hd-1 .hd-search-go{width:30px;height:30px}
  .hd-1 .hd-actions{order:4;gap:6px}
  .hd-1 .hd-iconbtn{width:34px;height:34px}
  .hd-1 .hd-user{display:none}
  .hd-1 .hd-nav{display:none}
}
@media (max-width:560px){
  .hd-1 .hd-brand b{display:none}
  .hd-1 .hd-brand img{height:26px}
  .hd-1 .hd-search input{font-size:13px}
  .hd-1 .hd-search-go{width:30px;height:30px}
}

/* ══ FOOTER — aynı dil: yumuşak kartlar + hap satırlar ══ */
.ft-1{margin-top:var(--oc-3xl,48px);padding:0 0 28px;background:transparent;color:var(--hd-ink)}
.ft-1 .ft-shell{display:flex;flex-direction:column;gap:14px}
.ft-1 .ft-banner{
  display:flex;align-items:center;justify-content:space-between;gap:var(--hd-gap);flex-wrap:wrap;
  background:var(--hd-surface);border:1px solid var(--hd-line);border-radius:var(--hd-card-radius);
  box-shadow:var(--hd-shadow);padding:22px 26px
}
.ft-1 .ft-banner h3{font-family:var(--oc-head,inherit);font-size:20px;font-weight:800;margin:0 0 4px;letter-spacing:-.02em}
.ft-1 .ft-banner p{margin:0;color:var(--hd-muted);font-size:13px}
.ft-1 .ft-newsletter{display:flex;align-items:center;gap:8px;flex:1 1 320px;max-width:460px;min-width:0}
.ft-1 .ft-newsletter input{
  flex:1 1 auto;min-width:0;height:46px;border-radius:999px;border:1px solid var(--hd-line);
  background:var(--hd-surface-2);padding:0 18px;color:var(--hd-ink);font-family:inherit;font-size:13.5px;outline:none
}
.ft-1 .ft-newsletter input:focus{border-color:var(--hd-accent)}
.ft-1 .ft-newsletter button{
  flex:none;height:46px;padding:0 22px;border:0;border-radius:999px;cursor:pointer;
  background:var(--hd-accent);color:#fff;font:700 13px inherit;transition:background .16s ease
}
.ft-1 .ft-newsletter button:hover{background:var(--hd-accent-2)}
/* Kart ızgarası */
.ft-1 .ft-grid{display:grid;grid-template-columns:1.4fr repeat(auto-fit,minmax(150px,1fr));gap:14px}
.ft-1 .ft-grid>div{
  background:var(--hd-surface);border:1px solid var(--hd-line);border-radius:var(--hd-card-radius);
  box-shadow:var(--hd-shadow);padding:20px
}
.ft-1 .ft-brand img{height:30px;width:auto;max-height:30px;margin-bottom:10px;object-fit:contain}
.ft-1 .ft-brand b{font-family:var(--oc-head,inherit);font-size:16px;font-weight:800;letter-spacing:-.01em;display:block}
.ft-1 .ft-brand p{margin:8px 0 12px;color:var(--hd-muted);font-size:12.5px;line-height:1.6}
.ft-1 .ft-social{display:flex;gap:8px;flex-wrap:wrap}
.ft-1 .ft-social a{
  width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:var(--hd-surface-2);border:1px solid var(--hd-line);color:var(--hd-ink-2);
  text-decoration:none;font-size:11px;font-weight:700;transition:background .16s ease,color .16s ease
}
.ft-1 .ft-social a:hover{background:var(--hd-accent-soft);color:var(--hd-accent)}
.ft-1 .ft-col h3{
  font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--hd-muted);margin:0 0 12px
}
.ft-1 .ft-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.ft-1 .ft-col a{
  color:var(--hd-ink-2);text-decoration:none;font-size:13px;font-weight:600;
  transition:color .16s ease
}
.ft-1 .ft-col a:hover{color:var(--hd-accent)}
/* Alt satır: hap */
.ft-1 .ft-bottom{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  background:var(--hd-surface);border:1px solid var(--hd-line);border-radius:var(--hd-radius);
  box-shadow:var(--hd-shadow);padding:12px 20px;color:var(--hd-muted);font-size:12px
}
.ft-1 .ft-bottom .ft-pay{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.ft-1 .ft-bottom .ft-pay span{
  padding:5px 11px;border-radius:999px;background:var(--hd-surface-2);
  border:1px solid var(--hd-line);font-size:11px;font-weight:700;color:var(--hd-ink-2)
}
@media (max-width:900px){
  .ft-1 .ft-grid{grid-template-columns:1fr 1fr}
  .ft-1 .ft-brand{grid-column:1 / -1}
  .ft-1 .ft-banner{flex-direction:column;align-items:flex-start}
  .ft-1 .ft-newsletter{max-width:none;width:100%}
}
@media (max-width:560px){
  .ft-1 .ft-grid{grid-template-columns:1fr}
  .ft-1 .ft-banner{padding:18px}
  .ft-1 .ft-bottom{flex-direction:column;align-items:flex-start}
}

/* Marka: tema/global kurallar üst harflemeyi dayatabiliyor → çekirdek tasarım kazanır */
.hd-1 .hd-brand b{text-transform:none!important;letter-spacing:-.02em!important}
/* Misafir avatarı: harf yerine kişi ikonu */
.hd-1 .hd-avatar:has(svg){
  background:var(--hd-accent-soft)!important;color:var(--hd-accent)!important
}
.hd-1 .hd-avatar--guest svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}

/* ══ MOBİL: tek satır — [☰][logo][arama][🛒][👤] ══ */
@media (max-width:900px){
  .hd-1 .hd-bar{flex-wrap:nowrap;gap:8px;padding:8px 10px 8px 10px}
  .hd-1 .hd-catbtn{display:inline-flex;order:1;padding:0 11px;height:40px}
  .hd-1 .hd-catbtn span{display:none}
  .hd-1 .hd-brand{order:2;max-width:34px}
  .hd-1 .hd-brand b{display:none}
  .hd-1 .hd-search{order:3;flex:1 1 auto;min-width:0;height:40px;padding:3px 3px 3px 13px}
  .hd-1 .hd-search input{font-size:13px}
  .hd-1 .hd-search-go{width:32px;height:32px}
  .hd-1 .hd-actions{order:4;gap:6px}
  .hd-1 .hd-iconbtn{width:36px;height:36px}
  .hd-1 .hd-user{display:none}
  .hd-1 .hd-nav{padding:6px 10px}
  .hd-1 .hd-nav a{padding:6px 12px;font-size:12px}
}
@media (max-width:420px){
  .hd-1 .hd-brand{display:none}
  .hd-1 .hd-search input{font-size:12.5px}
}