/* ══════════════════════════════════════════════════════════════════════════
   Vitrin ekleri — style.css statik tasarımın birebir kopyasıdır, ona
   dokunulmaz. Panele bağlanınca ortaya çıkan yeni parçaların (bildirim
   şeridi, kupon kutusu, sipariş dökümü, sayfalama) stilleri burada durur.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── bildirim şeridi ─────────────────────────────────────────────── */
.uyari {
  display: flex; align-items: center; gap: 10px;
  margin: 18px 0 0; padding: 13px 18px;
  border-radius: 16px; background: #FFF3D6; color: #7A5A00;
  font-weight: 600; font-size: 15px;
}
.uyari--ok { background: #E4F7E7; color: #1E6B2E; }
.uyari svg { flex: none; }

.uye-hata {
  margin: -4px 0 8px; color: var(--pembe);
  font-size: 14px; font-weight: 600;
}

/* ── onay kutuları (fatura, sözleşme) ───────────────────────────── */
.uye-onay {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 14.5px; line-height: 1.5; cursor: pointer;
}
.uye-onay input { flex: none; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--pembe); }
.uye-onay--sozlesme { margin-top: 16px; }
.uye-onay a { color: var(--pembe); font-weight: 700; }

.secenek-liste--yatay { display: flex; flex-wrap: wrap; gap: 12px; }
.secenek-liste--yatay .secenek { flex: 1 1 200px; }

/* ── sepet: kupon kutusu ────────────────────────────────────────── */
.sepet-kupon { display: flex; gap: 8px; margin: 0 0 16px; }
.sepet-kupon input {
  flex: 1; min-width: 0; padding: 11px 14px;
  border: 1.5px solid var(--hair); border-radius: 13px;
  background: #fff; font: inherit; font-size: 14.5px;
}
.sepet-kupon input:focus-visible { outline: 2px solid var(--pembe); outline-offset: 1px; }
.sepet-kupon .btn { flex: none; }

/* ── sipariş özeti / takip dökümü ───────────────────────────────── */
.takip-dokum { margin: 18px 0 0; }
.takip-dokum > div {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 7px 0; font-size: 15px;
}
.takip-dokum dt { color: var(--ink-3); }
.takip-dokum dd { margin: 0; font-weight: 600; }
.takip-adres {
  margin-top: 18px; padding: 16px 18px;
  border-radius: 16px; background: var(--zemin2); font-size: 14.5px; line-height: 1.6;
}
.takip-adres b { display: block; margin-bottom: 6px; font-family: 'Fredoka', sans-serif; }
.takip-adres p { margin: 0 0 8px; }
.takip-duzen { display: grid; gap: 28px; max-width: 780px; }
.durum {
  padding: 5px 12px; border-radius: 999px;
  background: var(--zemin2); color: var(--ink-2);
  font-size: 13px; font-weight: 700; white-space: nowrap;
}

/* ── sipariş tamamlandı / boş durum ─────────────────────────────── */
.durum-bos--ok .durum-gor { color: var(--yesil); }
.siparis-devam {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: center; gap: 18px; margin-top: 26px;
}

/* ── hesap: çıkış düğmesi menü ögesi gibi görünsün ──────────────── */
.yan-cikis {
  padding: 0; border: 0; background: none;
  color: inherit; font: inherit; cursor: pointer; text-align: left;
}
.yan-cikis:hover { color: var(--pembe); }

/* ── blog sayfalama ─────────────────────────────────────────────── */
.sayfalama { margin-top: 32px; display: flex; justify-content: center; }
.sayfalama svg { width: 16px; height: 16px; }
.sayfalama nav > div:first-child { display: none; }        /* mobil özet metni */
.sayfalama span, .sayfalama a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 38px; height: 38px; padding: 0 10px; margin: 0 3px;
  border-radius: 12px; background: #fff; border: 1.5px solid var(--hair);
  font-size: 14.5px; font-weight: 600; color: var(--ink-2);
}
.sayfalama a:hover { border-color: var(--pembe); color: var(--pembe); }
.sayfalama [aria-current="page"] span {
  background: var(--pembe); border-color: var(--pembe); color: #fff;
}

/* ── kategori döşemesi: panelden gelen sütun sayısı ─────────────── */
.kat-izgara[data-sutun="4"] { grid-template-columns: repeat(4, 1fr); }
.kat-izgara[data-sutun="3"] { grid-template-columns: repeat(3, 1fr); }
.kat-izgara[data-sutun="2"] { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 1180px) {
  .kat-izgara[data-sutun] { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .kat-izgara[data-sutun] { grid-template-columns: repeat(2, 1fr); }
}

/* ── ürün detay: renk seçimi kardeş ürünün görselini gösterir ───── */
.renk-i { background-size: cover; background-position: center; }