/* Caffolia vitrin — perde, yan paneller, arama, bildirim
   Kaynak: onaylı sunumv2 tasarımı (kurulum/tasarim-referans).  */

/* ===================================================== 16. PANELLER / PERDE */
.perde{
  position:fixed;inset:0;z-index:100;background:rgba(12,7,4,.58);
  backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity var(--gecis);
}
.perde[data-acik="1"]{opacity:1;pointer-events:auto}

/* yan panel — sepet & arama & mobil menü ortak iskelet */
.panel{
  position:fixed;top:0;right:0;z-index:101;
  display:flex;flex-direction:column;
  width:min(420px,100vw);height:100dvh;background:var(--zemin);
  box-shadow:var(--golge-l);transform:translateX(102%);
  /* kapalıyken gizli: gölgesi sağ kenara taşmaz, içindekiler sekme sırasına girmez */
  visibility:hidden;transition:transform var(--gecis),visibility 0s linear .28s;
}
.panel[data-acik="1"]{transform:translateX(0);visibility:visible;transition:transform var(--gecis)}
.panel__tepe{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:20px clamp(18px,3vw,26px);border-bottom:1px solid var(--cizgi);flex:none;
}
.panel__tepe h2{font-size:1.06rem;font-weight:600;letter-spacing:-.01em}
.panel__kapat{
  display:grid;place-items:center;width:38px;height:38px;border-radius:var(--r-tam);
  color:var(--metin);transition:background-color var(--gecis)}
.panel__kapat:hover{background:rgba(36,26,20,.07)}
.panel__kapat svg{width:19px;height:19px}
.panel__govde{flex:1;overflow-y:auto;padding:clamp(18px,3vw,26px)}
.panel__alt{flex:none;padding:clamp(18px,3vw,26px);border-top:1px solid var(--cizgi);background:var(--zemin-2)}

/* sepet */
.sepet-satir{display:flex;gap:14px;padding-block:16px;border-bottom:1px solid var(--cizgi)}
.sepet-satir:first-child{padding-top:0}
.sepet-satir__gorsel{flex:none;width:74px;aspect-ratio:4/5;border-radius:var(--r-s);
  overflow:hidden;background:var(--kart);border:1px solid var(--cizgi)}
.sepet-satir__gorsel img{width:100%;height:100%;object-fit:cover}
.sepet-satir__govde{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.sepet-satir__ad{font-size:.93rem;font-weight:600;line-height:1.35}
.sepet-satir__not{font-size:.79rem;color:var(--metin-2)}
.sepet-satir__alt{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:6px}
.adet{display:flex;align-items:center;gap:2px;border:1px solid var(--cizgi);border-radius:var(--r-tam);padding:2px}
.adet button{display:grid;place-items:center;width:28px;height:28px;border-radius:var(--r-tam);
  color:var(--metin);transition:background-color var(--gecis)}
.adet button:hover{background:rgba(36,26,20,.08)}
.adet span{min-width:26px;text-align:center;font-size:.88rem;font-weight:600}
.sepet-satir__fiyat{font-size:.95rem;font-weight:700}
.sepet-satir__sil{align-self:flex-start;font-size:.78rem;color:var(--metin-2);
  border-bottom:1px solid transparent}
.sepet-satir__sil:hover{color:var(--bordo-700);border-bottom-color:currentColor}

.bos-durum{display:flex;flex-direction:column;align-items:center;gap:14px;
  padding:56px 20px;text-align:center;color:var(--metin-2)}
.bos-durum svg{width:46px;height:46px;color:var(--cizgi);stroke-width:1.2}
.bos-durum p{font-size:.94rem;max-width:26ch}

.indirim-cubugu{margin-bottom:16px}
.indirim-cubugu p{font-size:.82rem;color:var(--metin-2);margin-bottom:8px}
.indirim-cubugu b{color:var(--metin);font-weight:600}
.indirim-cubugu div{height:6px;border-radius:var(--r-tam);background:rgba(36,26,20,.10);overflow:hidden}
.indirim-cubugu i{display:block;height:100%;border-radius:var(--r-tam);
  background:linear-gradient(90deg,var(--gold-600),var(--gold-400));transition:width .4s ease}
.toplam{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:14px}
.toplam span{font-size:.92rem;color:var(--metin-2)}
.toplam b{font-size:1.32rem;font-weight:700;letter-spacing:-.015em}

/* arama */
.arama{
  position:fixed;inset-inline:0;top:0;z-index:101;background:var(--zemin);
  box-shadow:var(--golge-l);transform:translateY(-102%);transition:transform var(--gecis);
  max-height:100dvh;overflow-y:auto;
}
.arama[data-acik="1"]{transform:translateY(0)}
.arama__ic{padding-block:clamp(24px,3.4vw,40px)}
.arama__alan{display:flex;align-items:center;gap:14px;padding-bottom:16px;border-bottom:1px solid var(--cizgi)}
.arama__alan svg{width:22px;height:22px;flex:none;color:var(--metin-2)}
.arama__alan input{flex:1;min-width:0;border:0;background:transparent;
  font-size:clamp(1.1rem,2vw,1.5rem);font-weight:500;letter-spacing:-.015em;padding:6px 0}
.arama__alan input:focus{outline:none}
.arama__alan input::-webkit-search-cancel-button,
.arama__alan input::-webkit-search-decoration{-webkit-appearance:none;appearance:none}
.arama__sonuc{margin-top:22px;display:grid;gap:10px}
.arama__satir{display:flex;align-items:center;gap:14px;padding:10px;border-radius:var(--r-s);
  transition:background-color var(--gecis)}
.arama__satir:hover{background:var(--zemin-2)}
.arama__satir img{width:54px;aspect-ratio:4/5;object-fit:cover;border-radius:8px;flex:none;
  background:var(--kart);border:1px solid var(--cizgi)}
.arama__satir b{display:block;font-size:.95rem;font-weight:600}
.arama__satir span{display:block;font-size:.81rem;color:var(--metin-2)}
.arama__satir em{margin-left:auto;font-style:normal;font-weight:700;font-size:.95rem}
.arama__bos{padding:26px 10px;color:var(--metin-2);font-size:.94rem}
.arama__oneri{display:flex;flex-wrap:wrap;gap:9px;margin-top:20px}
.arama__oneri button{padding:8px 15px;border-radius:var(--r-tam);border:1px solid var(--cizgi);
  font-size:.85rem;color:var(--metin-2);transition:background-color var(--gecis),color var(--gecis)}
.arama__oneri button:hover{background:var(--kahve-800);border-color:var(--kahve-800);color:var(--krem)}

/* bildirim */
.bildirim-alani{position:fixed;left:50%;bottom:26px;z-index:120;transform:translateX(-50%);
  display:flex;flex-direction:column;gap:10px;align-items:center;pointer-events:none}
.bildirim{
  display:flex;align-items:center;gap:11px;padding:13px 22px;border-radius:var(--r-tam);
  background:var(--kahve-900);color:var(--metin-ac);font-size:.9rem;font-weight:500;
  box-shadow:var(--golge-l);opacity:0;transform:translateY(12px);
  transition:opacity .25s ease,transform .25s ease;max-width:min(92vw,460px)
}
.bildirim[data-gor="1"]{opacity:1;transform:translateY(0)}
.bildirim svg{width:17px;height:17px;flex:none;color:var(--gold-400)}