/* ==========================================================================
   site.css — Projeye özgü stiller.
   Tasarım sistemi (token'lar) → theme.css
   Header stilleri            → header-3.css
   Vitrin bileşenleri        → vitrin.css
   Burada yalnızca:
     1) Tasarımda karşılığı olmayan ek bileşenler (kategori kartı, footer, form sayfaları)
     2) Ürün kartı görseli için kaplama (kart koyu kaplamayı varsayıyor; mockup'ta
        görsel yerine monogram vardı, bizde gerçek <img> basılıyor)
   ========================================================================== */

/* 1) Vitrin: kategori kartı ---------------------------------------------------- */
.grid--cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .grid--cats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .grid--cats { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

.catcard {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: 1.15rem 1.25rem 2.25rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-1);
  color: var(--text);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.catcard:hover { border-color: var(--brand); box-shadow: var(--shadow-2); transform: translateY(-2px); }
.catcard__name { font-weight: 600; font-size: var(--fs-15); }
.catcard__count { font-size: var(--fs-12); color: var(--text-3); }
.catcard__desc { font-size: var(--fs-13); color: var(--text-2); line-height: var(--lh-snug); }
.catcard__go {
  position: absolute;
  bottom: 1rem;
  right: 1.1rem;
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--radius-pill);
  background: var(--bg-muted);
  color: var(--brand);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.catcard:hover .catcard__go { background: var(--primary); color: var(--primary-fg); }

/* 2) Vitrin: ürün kartı görseli ------------------------------------------------ */
.card__media { overflow: hidden; }
.card__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--t-slow) var(--ease);
}
.card:hover .card__media img { transform: scale(1.04); }
.card__media:has(img) { background: var(--bg-muted); }
.card__desc {
  font-size: var(--fs-12);
  color: var(--text-3);
  margin-top: .2rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card__add[disabled], .card__fav[disabled] { opacity: .55; cursor: not-allowed; }

/* 3) Mega menü içeriği (sunucudan basıldığı için stiller burada) ----------------- */
.h3-mega__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem 2rem;
  padding: 1.5rem 0 1.75rem;
}
@media (min-width: 768px) { .h3-mega__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .h3-mega__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.h3-mega__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem;
  padding-bottom: .5rem;
  margin-bottom: .6rem;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  font-size: var(--fs-15);
  color: var(--text);
}
.h3-mega__head:hover { color: var(--brand); }
.h3-mega__count { font-size: var(--fs-11); color: var(--text-3); font-weight: 400; }

.h3-mega__list { display: flex; flex-direction: column; gap: .1rem; }
.h3-mega__list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .34rem .5rem;
  margin: 0 -.5rem;
  border-radius: var(--radius-xs);
  font-size: var(--fs-13);
  color: var(--text-2);
}
.h3-mega__list a:hover { background: var(--bg-muted); color: var(--text); }
/* 4) Footer --------------------------------------------------------------------
   Faz 18 Ek: üstte marka şeridi, altında 4 blok — İletişim Bilgileri, Üyelik,
   Kurumsal, Alışveriş. Blok başlıkları ve bağlantı stilleri ortak. */
.site-footer { margin-top: 3rem; background: var(--surface-2); border-top: 1px solid var(--border); }

/* Marka şeridi: logo + ad + slogan (+ çalışma saatleri) — bloklardan ayrı bant. */
.site-footer__brandbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem 1.5rem;
  padding: 2.25rem 0 0;
}
.site-footer__brand { display: inline-flex; align-items: center; gap: .85rem; color: inherit; }
.site-footer__brand .brand__logo--mark { width: 42px; height: auto; }
.site-footer__brandtext { display: flex; flex-direction: column; }
.site-footer__name { font-weight: 600; font-size: var(--fs-16); }
.site-footer__tagline { font-size: var(--fs-13); color: var(--text-3); }
.site-footer__hours { display: inline-flex; align-items: center; gap: .45rem; font-size: var(--fs-13); color: var(--text-3); }
.site-footer__hours svg { color: var(--brand); }

.site-footer__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  padding: 2rem 0 2.25rem;
}
@media (min-width: 640px) { .site-footer__inner { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .site-footer__inner { grid-template-columns: repeat(4, 1fr); } }

.site-footer__head {
  font-size: var(--fs-13);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  color: var(--text-3);
  margin-bottom: .85rem;
}
.site-footer__col ul { display: flex; flex-direction: column; gap: .5rem; }
.site-footer__col a { font-size: var(--fs-14); color: var(--text-2); }
.site-footer__col a:hover { color: var(--brand); }
.site-footer__contact li { display: flex; align-items: flex-start; gap: .55rem; font-size: var(--fs-14); color: var(--text-2); }
.site-footer__contact svg { flex: none; margin-top: .25rem; color: var(--brand); }

.site-footer__bottom { border-top: 1px solid var(--border); padding: 1.1rem 0; font-size: var(--fs-13); color: var(--text-3); }

/* Faz 18: Hukuki metin sayfaları (üyelik sözleşmesi / KVKK aydınlatma metni).
   İçerik HTML kaçışlı basılır; paragraflar pre-line ile korunur. */
.legal-doc { white-space: pre-line; line-height: 1.7; font-size: var(--fs-14); color: var(--text-2); margin-top: 1.25rem; }

/* 5) Faz 2 ekranları (giriş/kayıt/hesap paneli) --------------------------------- */
/*    Eski EF Bootstrap şablonundan taşındı; artık tema token'larını kullanır. */
.page { max-width: 34rem; margin: 2.5rem auto; padding: 0 1rem; }
.page--wide { max-width: 62rem; }
/* `.page--container` — hesap (Hesabım) bölümü. İçerik, header/footer'daki
   `.container` ile AYNI genişlik ve AYNI kenar boşluğunu kullanır: sayfa
   ortalanır ama dar 62rem kolonu yerine site genişliğinde hizalanır.
   `.page`/`.page--wide` (34rem / 62rem) form ve uzun metin sayfalarında kalır. */
.page--container { max-width: var(--container); margin: 2.5rem auto; padding-inline: var(--gutter); }
.grid--cards { display: grid; grid-template-columns: 1fr; gap: 1.25rem; margin-top: 1.25rem; }
@media (min-width: 768px) { .grid--cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.form-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
  padding: 2rem;
}
.form-group { margin-bottom: 1.1rem; }
.form-label { display: block; margin-bottom: .35rem; font-size: var(--fs-13); font-weight: 500; }
.form-control {
  width: 100%;
  padding: .6rem .75rem;
  font: inherit;
  font-size: var(--fs-14);
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
}
.form-control:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--ring); }
.form-control[readonly] { background: var(--bg-muted); color: var(--text-2); }
.form-check { display: flex; align-items: center; gap: .5rem; font-size: var(--fs-14); }

.validation-summary-errors, .field-validation-error { color: var(--r-600); font-size: var(--fs-13); }
.field-validation-error { display: block; margin-top: .25rem; }
.validation-summary-errors ul { margin: 0; padding-left: 1.1rem; }

.btn--block { width: 100%; }
.btn--secondary { background: var(--bg-muted); border-color: var(--border-2); color: var(--text); }
.btn--secondary:hover { background: var(--border); }

.alert { padding: .75rem 1rem; border-radius: var(--radius-sm); font-size: var(--fs-14); }
.alert-success { background: #e8f6ec; border: 1px solid #b7e0c3; color: #1c6b33; }
.alert-danger { background: var(--r-50); border: 1px solid var(--r-200); color: var(--r-700); }

.tabs { display: flex; gap: .25rem; border-bottom: 1px solid var(--border); margin-bottom: 1.75rem; flex-wrap: wrap; }
.tabs a { padding: .7rem 1rem; font-size: var(--fs-14); color: var(--text-2); border-bottom: 2px solid transparent; }
.tabs a:hover { color: var(--text); }
.tabs a.is-active { color: var(--brand); border-bottom-color: var(--brand); font-weight: 500; }

.table { width: 100%; border-collapse: collapse; font-size: var(--fs-14); }
.table th, .table td { padding: .7rem .75rem; border-bottom: 1px solid var(--border); text-align: left; }
.table th { font-size: var(--fs-13); color: var(--text-3); font-weight: 600; }

.muted { color: var(--text-3); font-size: var(--fs-13); }
.stack-sm > * + * { margin-top: .5rem; }
.flex-between { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

.badge { display: inline-block; padding: .2rem .55rem; border-radius: var(--radius-pill); font-size: var(--fs-12); background: var(--bg-muted); color: var(--text-2); }
.badge--accent { background: var(--r-50); color: var(--r-700); }

/* 6) İletişim sayfası ("/iletisim") ------------------------------------------ */
.contact-page__head { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1.5rem; }
.contact-page__head h1 { margin-bottom: .35rem; }
.contact-page__icon {
    display: grid; place-items: center; flex: none;
    width: 3rem; height: 3rem; border-radius: var(--radius-pill);
    background: var(--bg-muted); color: var(--brand);
}
.contact-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 768px) { .contact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.contact-card {
    display: flex; align-items: flex-start; gap: .9rem;
    padding: 1.25rem 1.4rem;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}
.contact-card__icon {
    display: grid; place-items: center; flex: none;
    width: 2.4rem; height: 2.4rem; border-radius: var(--radius-sm);
    background: var(--bg-muted); color: var(--brand);
}
.contact-card__title { font-size: var(--fs-14); font-weight: 600; margin-bottom: .3rem; }
.contact-card__text { font-size: var(--fs-14); color: var(--text-2); line-height: var(--lh-snug); }
.contact-card__text a { color: var(--brand); text-decoration: none; }
.contact-card__text a:hover { text-decoration: underline; }
.contact-page__note { margin-top: 1.5rem; }
.contact-page__note a { color: var(--brand); }

/* Faz 18 Ek: Banka Bilgilerimiz + Havale Bildirim Formu ------------------------ */
/* IBAN gibi kopyalanacak değerler: okunur tek aralıklı yazı + kopyala düğmesi. */
.bank-value {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--fs-14);
  letter-spacing: .01em;
  color: var(--text);
  word-break: break-all;
}
.bank-copy {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-left: .45rem;
  padding: .2rem .6rem;
  background: var(--bg-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font-size: var(--fs-12);
  color: var(--text-2);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.bank-copy:hover { border-color: var(--brand); color: var(--brand); }
.bank-copy.is-copied { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-text); }

/* Sayfa altı düğme grubu (banka sayfası vb.). */
.page-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.5rem; }

/* İki sütunlu form satırı (banka adı + tarih gibi kısa alanlar). */
.form-grid { display: grid; grid-template-columns: 1fr; gap: 0 1rem; }
@media (min-width: 640px) { .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Havale bildirim formundaki banka hesabı hatırlatma kutusu. */
.notice-bank {
  margin-bottom: 1.5rem;
  padding: 1.1rem 1.25rem;
  background: var(--bg-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.notice-bank__title { font-size: var(--fs-14); font-weight: 600; margin-bottom: .6rem; }
.notice-bank__list { display: flex; flex-direction: column; gap: .45rem; list-style: none; padding: 0; font-size: var(--fs-14); color: var(--text-2); }
.notice-bank__list li { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.notice-bank__label { min-width: 7rem; font-size: var(--fs-13); color: var(--text-3); }
.notice-bank__note { margin-top: .75rem; font-size: var(--fs-13); }

/* Faz 25: Bildirim formundaki çoklu banka hesabı blokları (her hesap ayrı
   bir bölüm; aralarında kesikli ayraç çizgisi). */
.notice-bank__account + .notice-bank__account {
  margin-top: .95rem;
  padding-top: .95rem;
  border-top: 1px dashed var(--border);
}
.notice-bank__accounttitle { font-size: var(--fs-14); font-weight: 600; margin: 0 0 .5rem; display: flex; align-items: center; gap: .5rem; }

/* Faz 25: Ödeme ekranındaki çoklu hesap başlıkları ve blok aralığı. */
.banktransfer__account + .banktransfer__account {
  margin-top: 1.1rem;
  padding-top: 1.1rem;
  border-top: 1px dashed var(--border-2);
}
.banktransfer__accounttitle { font-size: var(--fs-14); font-weight: 600; margin: 0 0 .6rem; display: flex; align-items: center; gap: .5rem; }

/* Faz 25: Sonuç ekranında birden fazla hesap alt alta listelenir. */
.payment-result__bank dl + dl { margin-top: .9rem; padding-top: .9rem; border-top: 1px dashed var(--border-2); }
.notice-form__hint { margin-top: .75rem; font-size: var(--fs-13); }

/* 7) Çerez onay banner'ı (cookie-consent.js) --------------------------------- */
.cookie-consent { position: fixed; inset: 0; z-index: 140; display: grid; place-items: center; padding: 1rem; }
.cookie-consent[hidden] { display: none; }
.cookie-consent__scrim {
    position: absolute; inset: 0; background: var(--scrim);
    opacity: 0; transition: opacity var(--t-base) var(--ease);
}
.cookie-consent.is-open .cookie-consent__scrim { opacity: 1; }
.cookie-consent__panel {
    position: relative; width: min(100%, 30rem);
    background: var(--surface); color: var(--text);
    border: 1px solid var(--border); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-3); padding: 2rem;
    text-align: center;
    opacity: 0; transform: translateY(10px);
    transition: opacity var(--t-base) var(--ease), transform var(--t-slow) var(--ease-out);
}
.cookie-consent.is-open .cookie-consent__panel { opacity: 1; transform: none; }
.cookie-consent__close { position: absolute; top: .6rem; inset-inline-end: .6rem; }
.cookie-consent__icon {
    display: grid; place-items: center; margin: 0 auto .9rem;
    width: 3.2rem; height: 3.2rem; border-radius: var(--radius-pill);
    background: var(--bg-muted); color: var(--brand);
}
.cookie-consent__title { font-size: var(--fs-17, 1.05rem); margin-bottom: .6rem; }
.cookie-consent__text { font-size: var(--fs-14); color: var(--text-2); line-height: 1.65; }
.cookie-consent__text a { color: var(--brand); font-weight: 500; }
.cookie-consent__actions { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-top: 1.25rem; }
@media (max-width: 420px) { .cookie-consent__actions { grid-template-columns: 1fr; } }

/* 8) Güvenli çıkış butonları (header dropdown + mobil drawer + Login sayfası) --- */
.h3-dd li form { display: block; }
.h3-dd__logout {
    display: flex; align-items: center; gap: .6rem; padding: .6rem .65rem;
    width: 100%; border: 0; background: none; color: inherit;
    font: inherit; font-size: var(--fs-14); text-align: start; cursor: pointer;
    border-radius: var(--radius-sm);
    transition: background var(--t-fast) var(--ease), padding-inline-start var(--t-base) var(--ease);
}
.h3-dd__logout:hover { background: var(--bg-muted); padding-inline-start: .85rem; }
.h3-drawer__logout {
    display: flex; align-items: center; gap: .65rem; padding: .6rem .25rem;
    width: 100%; border: 0; background: none;
    font: inherit; font-size: var(--fs-14); color: var(--text-2);
    text-align: start; cursor: pointer;
    transition: color var(--t-fast), padding-inline-start var(--t-base) var(--ease);
}
.h3-drawer__logout:hover { color: var(--text); padding-inline-start: .45rem; }
.alert form { margin-top: .7rem; }