/* ====================================================
   FANTAZI — HESAP PANELİ (sol menü + sağ içerik)
   ==================================================== */
.hesap { padding: var(--space-44) 0 var(--space-64); }
/* 12 kolon grid: 3 menü / 9 içerik */
.hesap__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--grid-gap);
  align-items: start;
}
.hmenu { grid-column: 1 / 4; }     /* 3 kolon */
.hcontent { grid-column: 4 / 13; } /* 9 kolon */

/* --- Sol menü --- */
.hmenu {
  background: var(--renk-beyaz);
  border: 1px solid var(--renk-cizgi);
  border-radius: var(--radius);
  overflow: hidden;
  position: sticky;
  top: var(--sticky-top);
}
.hmenu__user {
  display: flex; align-items: center; gap: var(--space-12);
  padding: var(--space-20);
  background: var(--renk-soft);
  border-bottom: 1px solid var(--renk-cizgi);
}
.hmenu__avatar {
  width: 46px; height: 46px; border-radius: var(--radius-full);
  background: var(--renk-koyu); color: var(--renk-beyaz);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-baslik); font-size: var(--fs-18); flex-shrink: 0;
}
.hmenu__name { font-weight: var(--fw-bold); font-size: var(--fs-15); }
.hmenu__email { font-size: var(--fs-13); color: var(--renk-metin-soft); }
.hmenu__list { padding: var(--space-8); }
.hmenu__link {
  display: flex; align-items: center; gap: var(--space-12);
  padding: var(--space-12) var(--space-14);
  border-radius: 8px;
  font-size: var(--fs-14);
  font-weight: var(--fw-medium);
  color: var(--renk-metin);
  transition: var(--transition);
}
.hmenu__link .icon { width: 18px; height: 18px; color: var(--renk-metin-soft); }
.hmenu__link:hover { background: var(--renk-soft); color: var(--renk-marka); }
.hmenu__link:hover .icon { color: var(--renk-marka); }
.hmenu__link.is-active { background: var(--renk-koyu); color: var(--renk-beyaz); }
.hmenu__link.is-active .icon { color: var(--renk-beyaz); }
.hmenu__sep { height: 1px; background: var(--renk-cizgi); margin: var(--space-8) var(--space-14); }
.hmenu__link--exit { color: var(--renk-marka); }

/* --- Sağ içerik --- */
.hcontent { min-width: 0; }
.hpanel {
  background: var(--renk-beyaz);
  border: 1px solid var(--renk-cizgi);
  border-radius: var(--radius);
  padding: var(--space-30);
}
.hpanel + .hpanel { margin-top: var(--sticky-top); }
.hpanel__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-16);
  margin-bottom: var(--space-24);
  padding-bottom: var(--space-16);
  border-bottom: 1px solid var(--renk-cizgi);
}
.hpanel__head h1 { font-size: var(--fs-20); }
.hpanel__head p { font-size: var(--fs-13); color: var(--renk-metin-soft); margin-top: 2px; }

/* Bilgi formu satırları */
.hform-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-18); }
.hform-full { grid-column: 1 / -1; }
.hlabel { display: block; font-size: var(--fs-14); font-weight: var(--fw-semibold); margin-bottom: var(--space-8); }
.hinput {
  width: 100%; padding: 12px var(--space-14);
  background: var(--renk-soft); border: 1px solid var(--renk-cizgi); border-radius: var(--radius);
  font-family: var(--font); color: var(--renk-metin); outline: none; transition: var(--transition);
}
.hinput:focus { border-color: var(--renk-marka); background: var(--renk-beyaz); }
.hform-actions { margin-top: var(--sticky-top); display: flex; gap: var(--space-12); }

/* Şifre alanı — göster/gizle */
.hpass { position: relative; }
.hpass .hinput { padding-right: 44px; }
.hpass__toggle {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer; color: var(--renk-metin-soft); padding: 4px;
}
.hpass__toggle:hover { color: var(--renk-marka); }

/* Şifre güncelle: 2 kolon (sol form + sağ ipuçları) */
.sifre-layout { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: var(--space-32); align-items: start; }
.sifre-tips {
  background: var(--renk-soft); border: 1px solid var(--renk-cizgi);
  border-radius: var(--radius); padding: var(--space-24);
}
.sifre-tips h3 { font-size: var(--fs-16); margin-bottom: var(--space-16); }
.sifre-tips ul { display: flex; flex-direction: column; gap: var(--space-12); }
.sifre-tips li { display: flex; align-items: center; gap: var(--space-10); font-size: var(--fs-14); color: var(--renk-metin); }
.sifre-tips li .icon { color: var(--renk-marka); flex-shrink: 0; }

/* Sipariş listesi */
.order { border: 1px solid var(--renk-cizgi); border-radius: var(--radius); overflow: hidden; margin-bottom: var(--space-16); }
.order__top {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-12);
  padding: var(--space-16) var(--space-20);
  background: var(--renk-soft);
  border-bottom: 1px solid var(--renk-cizgi);
}
.order__no { font-weight: var(--fw-bold); font-size: var(--fs-14); }
.order__date { font-size: var(--fs-13); color: var(--renk-metin-soft); }
.order__status {
  font-size: var(--fs-12); font-weight: var(--fw-bold);
  padding: 5px var(--space-12); border-radius: var(--radius-pill);
}
.order__status--teslim { background: #e6f4ec; color: #1c7a46; }
.order__status--kargoda { background: #eaf0fb; color: #2a5bd0; }
.order__status--hazirlaniyor { background: var(--renk-nude); color: var(--renk-koyu); }
.order__body { display: flex; align-items: center; gap: var(--space-16); padding: var(--space-16) var(--space-20); }
.order__thumbs { display: flex; }
.order__thumb {
  width: 52px; height: 66px; border-radius: 6px; object-fit: cover;
  border: 2px solid var(--renk-beyaz); margin-left: -12px; background: var(--renk-soft);
}
.order__thumb:first-child { margin-left: 0; }
.order__info { flex: 1; font-size: var(--fs-14); color: var(--renk-metin-soft); }
.order__total { font-weight: var(--fw-bold); color: var(--renk-koyu); }
.order__btn { flex-shrink: 0; }

/* Adres kartları */
.address-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); }
.address {
  border: 1px solid var(--renk-cizgi); border-radius: var(--radius);
  padding: var(--space-20); position: relative;
}
.address--add {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-10); min-height: 160px;
  background: var(--renk-soft); border-style: dashed; color: var(--renk-marka);
  font-weight: var(--fw-semibold); cursor: pointer; transition: var(--transition);
}
.address--add:hover { background: var(--renk-beyaz); border-color: var(--renk-nude); }
.address--add .icon { width: 28px; height: 28px; }
.address__tag {
  display: inline-block; font-size: var(--fs-11); font-weight: var(--fw-bold);
  background: var(--renk-nude); color: var(--renk-koyu);
  padding: 3px var(--space-10); border-radius: var(--radius-pill); margin-bottom: var(--space-10);
}
.address__title { font-weight: var(--fw-bold); margin-bottom: var(--space-8); }
.address__text { font-size: var(--fs-14); color: var(--renk-metin-soft); line-height: 1.6; }
.address__actions { display: flex; gap: var(--space-14); margin-top: var(--space-14); font-size: var(--fs-13); }
.address__actions a { color: var(--renk-marka); font-weight: var(--fw-semibold); }
.address__actions a.del { color: var(--renk-metin-soft); }

/* ====================================================
   Adres + onay modalları — sipariş detay modalı (.omodal)
   ile aynı iskelet: sabit başlık/footer, kaydırılan gövde.
   ==================================================== */
.amodal, .cmodal { position: fixed; inset: 0; z-index: 1100; display: flex; align-items: center; justify-content: center; padding: var(--space-20); }
.amodal[hidden], .cmodal[hidden] { display: none; }
.amodal__overlay, .cmodal__overlay { position: absolute; inset: 0; background: rgba(42, 25, 34, .5); opacity: 0; transition: opacity .28s ease; }
.amodal.is-open .amodal__overlay, .cmodal.is-open .cmodal__overlay { opacity: 1; }
.cmodal { z-index: 1110; }   /* onay, adres modalının üstünde */

.amodal__box {
  position: relative; z-index: 1;
  width: 100%; max-width: 560px; max-height: 88vh;
  background: var(--renk-beyaz); border-radius: 18px;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 20px 60px rgba(42, 25, 34, .3);
  opacity: 0; transform: translateY(16px) scale(.98); transition: opacity .28s cubic-bezier(.4, 0, .2, 1), transform .28s cubic-bezier(.4, 0, .2, 1);
}
.amodal.is-open .amodal__box { opacity: 1; transform: none; }

.amodal__head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-16);
  padding: var(--space-20) var(--space-24);
  border-bottom: 1px solid var(--renk-cizgi);
  flex-shrink: 0;
}
.amodal__title { font-size: var(--fs-18); line-height: 1.2; }
.amodal__sub { font-size: var(--fs-13); color: var(--renk-metin-soft); margin-top: 2px; }

.amodal__body { padding: var(--space-24); overflow-y: auto; }

.amodal__foot {
  display: flex; justify-content: flex-end; gap: var(--space-12);
  padding: var(--space-16) var(--space-24);
  border-top: 1px solid var(--renk-cizgi);
  background: var(--renk-soft);
  flex-shrink: 0;
}
.amodal__foot .btn { padding-left: var(--space-24); padding-right: var(--space-24); }

/* Adres formu grid'i: 2 kolon, hizalı satırlar */
.afgrid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16) var(--space-18); }
.afgrid__col { grid-column: span 1; }
.afgrid__full { grid-column: 1 / -1; }
.hinput--area { resize: vertical; min-height: 52px; line-height: 1.5; }

/* --- Onay penceresi (window.confirm yerine) --- */
.cmodal__box {
  position: relative; z-index: 1; width: 100%; max-width: 420px; text-align: center;
  background: var(--renk-beyaz); border-radius: 18px;
  box-shadow: 0 20px 60px rgba(42, 25, 34, .3);
  padding: var(--space-36) var(--space-32) var(--space-32);
  opacity: 0; transform: translateY(16px) scale(.98); transition: opacity .28s cubic-bezier(.4, 0, .2, 1), transform .28s cubic-bezier(.4, 0, .2, 1);
}
.cmodal.is-open .cmodal__box { opacity: 1; transform: none; }
.cmodal__ic {
  width: 56px; height: 56px; margin: 0 auto var(--space-20); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: #fbe9e7; color: var(--renk-hata); border-radius: 50%;
}
.cmodal__mark {
  width: 28px; height: 28px; display: block; flex-shrink: 0;
  fill: none; stroke: currentColor; stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round;
}
.cmodal__title { font-size: var(--fs-18); margin-bottom: var(--space-10); }
.cmodal__text { font-size: var(--fs-14); color: var(--renk-metin-soft); line-height: 1.6; margin-bottom: var(--space-28); padding: 0 var(--space-8); }
.cmodal__text b { color: var(--renk-koyu); font-weight: var(--fw-bold); }
.cmodal__actions { display: flex; gap: var(--space-12); }
.cmodal__actions .btn { flex: 1; padding-top: var(--space-14); padding-bottom: var(--space-14); }

/* İzinler (toggle switch) */
.perm { display: flex; align-items: center; justify-content: space-between; gap: var(--space-16); padding: var(--space-18) 0; border-bottom: 1px solid var(--renk-cizgi); }
.perm:last-child { border-bottom: none; }
.perm__txt strong { display: block; font-size: var(--fs-15); }
.perm__txt span { font-size: var(--fs-13); color: var(--renk-metin-soft); }
.switch { position: relative; width: 46px; height: 26px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch__slider {
  position: absolute; inset: 0; cursor: pointer;
  background: var(--renk-cizgi); border-radius: 999px; transition: var(--transition);
}
.switch__slider::before {
  content: ""; position: absolute; height: 20px; width: 20px; left: 3px; top: 3px;
  background: var(--renk-beyaz); border-radius: 50%; transition: var(--transition);
}
.switch input:checked + .switch__slider { background: var(--renk-koyu); }
.switch input:checked + .switch__slider::before { transform: translateX(20px); }

/* Favorilerim artık klasik ürün kartını (.pcard) .pcard-grid içinde kullanır
   (components.css). Eski .hfav bileşeni kaldırıldı. */

/* Boş durum (panel içi) */
.hempty { text-align: center; padding: var(--space-44) var(--space-16); }
.hempty__ic {
  width: 64px; height: 64px; margin: 0 auto var(--space-16);
  border-radius: var(--radius-full); background: var(--renk-soft); border: 1px solid var(--renk-cizgi);
  display: flex; align-items: center; justify-content: center; color: var(--renk-marka);
}
.hempty__ic .icon { width: 28px; height: 28px; }
.hempty strong { display: block; font-size: var(--fs-18); color: var(--renk-koyu); margin-bottom: var(--space-8); }
.hempty p { color: var(--renk-metin-soft); margin-bottom: var(--space-20); }

/* ====================================================
   SİPARİŞ DETAY MODALI
   ==================================================== */
.omodal { position: fixed; inset: 0; z-index: 1100; display: flex; align-items: center; justify-content: center; padding: var(--space-20); }
.omodal__overlay { position: absolute; inset: 0; background: rgba(42, 25, 34, .5); animation: omodal-fade .25s ease; }
.omodal__box {
  position: relative; z-index: 1;
  width: 100%; max-width: 560px; max-height: 88vh;
  background: var(--renk-beyaz); border-radius: 18px;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 20px 60px rgba(42, 25, 34, .3);
  animation: omodal-in .28s cubic-bezier(.4, 0, .2, 1);
}
@keyframes omodal-fade { from { opacity: 0; } }
@keyframes omodal-in { from { opacity: 0; transform: translateY(16px) scale(.98); } }
.omodal__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-16);
  padding: var(--space-20) var(--space-24);
  border-bottom: 1px solid var(--renk-cizgi);
}
.omodal__title { font-size: var(--fs-18); }
.omodal__date { font-size: var(--fs-13); color: var(--renk-metin-soft); margin-top: 2px; }
.omodal__body { padding: var(--space-24); overflow-y: auto; }

/* Modal içi bölümler */
.odetail__section + .odetail__section { margin-top: var(--sticky-top); }
.odetail__label { font-size: var(--fs-12); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: .5px; color: var(--renk-metin-soft); margin-bottom: var(--space-12); }

/* Modal adım göstergesi (Onaylandı → Hazırlanıyor → Kargoda → Teslim) */
.osteps { display: flex; }
.ostep { flex: 1; text-align: center; position: relative; }
/* Adımlar arası bağlantı çizgisi */
.ostep::before {
  content: ""; position: absolute; top: 15px; left: -50%; width: 100%; height: 2px;
  background: var(--renk-cizgi); z-index: 0;
}
.ostep:first-child::before { display: none; }
.ostep.is-done::before { background: var(--renk-koyu); }
.ostep__dot {
  position: relative; z-index: 1;
  width: 32px; height: 32px; margin: 0 auto var(--space-8);
  border-radius: var(--radius-full);
  background: var(--renk-soft); border: 2px solid var(--renk-cizgi);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-13); font-weight: var(--fw-bold); color: var(--renk-metin-soft);
}
.ostep.is-done .ostep__dot { background: var(--renk-koyu); border-color: var(--renk-koyu); color: var(--renk-beyaz); }
.ostep__label { font-size: var(--fs-12); color: var(--renk-metin-soft); }
.ostep.is-done .ostep__label { color: var(--renk-koyu); font-weight: var(--fw-semibold); }

/* Modal ürün satırı */
.oitem { display: flex; gap: var(--space-14); padding: var(--space-12) 0; border-bottom: 1px solid var(--renk-cizgi); }
.oitem:last-child { border-bottom: none; }
.oitem__img { width: 56px; height: 72px; border-radius: 8px; object-fit: cover; flex-shrink: 0; background: var(--renk-soft); }
.oitem__main { flex: 1; }
.oitem__name { font-size: var(--fs-14); font-weight: var(--fw-semibold); }
.oitem__meta { font-size: var(--fs-13); color: var(--renk-metin-soft); margin-top: 2px; }
.oitem__price { font-weight: var(--fw-bold); color: var(--renk-marka); white-space: nowrap; }
/* İndirimli ürün varyantı: üstü çizili eski + yeni fiyat */
.oitem__price--sale { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.3; white-space: nowrap; }
.oitem__old { font-size: var(--fs-12); font-weight: var(--fw-medium); color: var(--renk-metin-soft); text-decoration: line-through; }
.oitem__now { font-weight: var(--fw-bold); color: var(--renk-marka); }
/* İndirim rozeti (ürün adının yanında) */
.oitem__badge {
  display: inline-block; vertical-align: middle;
  font-size: var(--fs-11); font-weight: var(--fw-bold);
  background: var(--renk-nude); color: var(--renk-koyu);
  padding: 2px var(--space-8); border-radius: var(--radius-pill);
  margin-left: var(--space-4);
}

/* Modal bilgi kutusu (adres/kargo) */
.odetail__box { background: var(--renk-soft); border: 1px solid var(--renk-cizgi); border-radius: var(--radius); padding: var(--space-16); font-size: var(--fs-14); color: var(--renk-metin); line-height: 1.6; }

/* Modal toplam */
.odetail__total { display: flex; justify-content: space-between; align-items: baseline; padding-top: var(--space-16); border-top: 1px solid var(--renk-cizgi); margin-top: var(--space-16); }
.odetail__total span { font-size: var(--fs-15); color: var(--renk-metin-soft); }
.odetail__total strong { font-size: var(--fs-20); color: var(--renk-koyu); font-family: var(--font-baslik); }

@media (max-width: 989px) {
  .hesap__grid { grid-template-columns: 1fr; gap: var(--space-16); }
  .hmenu, .hcontent { grid-column: 1 / -1; }
  .hform-grid, .address-grid { grid-template-columns: 1fr; }
  .sifre-layout { grid-template-columns: 1fr; }

  /* --- TÜM hesap sayfaları mobilde full genişlik ---
     Container yan boşluğu + panel kartı/kenarlığı kalkar; içerik ekran
     kenarına dayanır. Böylece sayfalar arası geçişte genişlik değişmez. */
  .hesap .container { padding-left: 0; padding-right: 0; }
  .hpanel { padding: 0; border: none; border-radius: 0; background: none; }
  /* Panel içeriği ekran kenarına yapışmasın — doğrudan çocuklara yatay pay ver.
     (Favoriler grid'i muaf; kartları ekran kenarına sıfır-sıfır dayanır.) */
  .hpanel > *:not(.pcard-grid) { padding-left: var(--space-24); padding-right: var(--space-24); }

  /* Modallar: tek kolon + kompakt padding */
  .afgrid { grid-template-columns: 1fr; }
  .amodal__head { padding: var(--space-18) var(--space-20); }
  .amodal__body { padding: var(--space-20); }
  .amodal__foot { flex-direction: column-reverse; padding: var(--space-16) var(--space-20); }
  .amodal__foot .btn { width: 100%; }

  /* --- Menü: yatay kayan sekme şeridi --- */
  .hmenu {
    position: static;
    border-radius: var(--radius);
  }
  .hmenu__user { padding: var(--space-14) var(--space-16); }      /* kullanıcı kartı kalır, ince */
  .hmenu__avatar { width: 38px; height: 38px; font-size: var(--fs-15); }
  .hmenu__name { font-size: var(--fs-14); }

  .hmenu__list {
    display: flex;
    gap: var(--space-4);
    padding: var(--space-8);
    overflow-x: auto;
    scrollbar-width: none;
    border-top: 1px solid var(--renk-cizgi);
    cursor: grab;
    user-select: none;                    /* sürüklerken metin/link seçilmesin */
    -webkit-user-drag: none;
  }
  .hmenu__list a { -webkit-user-drag: none; }
  .hmenu__list::-webkit-scrollbar { display: none; }
  .hmenu__sep { display: none; }                                  /* dikey ayraç yatayda gereksiz */
  .hmenu__link {
    flex: 0 0 auto;                                               /* içerik genişliğinde, sarmasın */
    white-space: nowrap;
    padding: var(--space-10) var(--space-14);
    font-size: var(--fs-13);
  }
  .hmenu__link .icon { width: 16px; height: 16px; }
}

/* ====================================================
   FAVORİLER SAYFASINA ÖZEL (.hesap--fav)
   - Ürünler klasik .pcard, aralarında boşluk YOK (kenarlıklar tek çizgi)
   - Sepete Ekle: fiyatın altında gerçek buton (görsel-hover butonu değil)
   - Favori ikonu medyanın sağ-alt köşesinde (eski "sepete ekle" ikonu yeri)
   ==================================================== */

/* Grid: kartlar bitişik. .pcard'ın margin:-1px hilesiyle kenarlıklar birleşir. */
.pcard-grid--fav { gap: 0; }
/* Kartlar bitişikken köşe yuvarlatma kapalı (blok görünüm) */
.pcard-grid--fav .pcard { border-radius: 0; }

/* Sepete Ekle butonu — fiyatın altında; tıklayınca varyant panelini açar.
   Panel açıkken (is-adding) buton gizlenir, panel görünür. */
.pcard--fav .pcard__buy { margin-top: var(--space-12); }
.pcard--fav.is-adding .pcard__buy { opacity: 0; pointer-events: none; }

/* Favori (kalp) ikonunu medyanın sağ-ALT köşesine al (add butonunun yeriydi) */
.pcard--fav .pcard__fav { top: auto; bottom: var(--space-10); right: var(--space-10); }
/* Panel açılınca favori ikonu (sağ-altta) panelle çakışmasın → gizle */
.pcard--fav.is-adding .pcard__fav { opacity: 0; pointer-events: none; }

@media (max-width: 989px) {
  /* Full genişlik/panel-sıfır davranışı artık TÜM hesap sayfalarında ortak
     (yukarıdaki genel @media bloğunda). Burada yalnızca favori grid'inin
     kartları ekran kenarına sıfır-sıfır dayansın. */
  .pcard-grid--fav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Form içi bölüm başlığı (örn. Kişisel Bilgiler / Fatura Bilgileri ayrımı) */
.hform-section-title {
  font-size: var(--fs-16);
  font-weight: var(--fw-semibold);
  margin: var(--space-30) 0 var(--space-18);
  padding-top: var(--space-24);
  border-top: 1px solid var(--renk-cizgi);
}
.hform-section-title:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}