/* ============================================================
   HESABIM — profil, hızlı eylemler, menü, siparişler
   ============================================================ */

/* ---------- Trendyol mobil hesap: kimlik → 4 kısayol → gruplu menü ---------- */
.hs{ padding-bottom:24px; }
.hs-kimlik{ display:flex; align-items:center; gap:14px; padding:18px 16px; background:var(--zemin); border-bottom:1px solid var(--hat); }
.hs-avatar{
  display:grid; place-items:center; flex-shrink:0;
  width:52px; height:52px; border-radius:var(--r3);
  background:var(--metin); color:var(--zemin); font-family:var(--yazi-dar); font-size:22px; font-weight:700; letter-spacing:var(--dar-aralik, .04em);
}
.hs-kim{ min-width:0; }
.hs-kim h1{ margin:0; font-size:22px; line-height:1.05; color:var(--metin); overflow-wrap:anywhere; }
.hs-kim p{ margin:2px 0 0; font-size:13px; color:var(--metin2); overflow-wrap:anywhere; }
.hs-kim small{ font-size:11px; color:var(--metin3); }

.hs-hizli{
  display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:4px;
  padding:14px 8px; margin-bottom:8px; background:var(--zemin); border-bottom:1px solid var(--hat);
}
.hs-hizli-kart{ display:flex; flex-direction:column; align-items:center; gap:6px; min-width:0; text-align:center; }
.hs-hizli-ikon{
  position:relative; display:grid; place-items:center; width:44px; height:44px;
  border-radius:var(--r2); background:var(--zemin); box-shadow:inset 0 0 0 1.5px var(--metin); color:var(--metin);
}
.hs-hizli-ikon .ikn{ width:20px; height:20px; }
.hs-hizli-ikon em{
  position:absolute; top:-3px; right:-5px; min-width:18px; height:18px; padding:0 4px;
  display:grid; place-items:center; border-radius:var(--r); background:var(--mandalina); color:#fff;
  font-size:10px; font-style:normal; font-weight:700;
}
.hs-hizli-kart b{ font-family:var(--yazi-dar); font-weight:700; letter-spacing:var(--dar-aralik, .05em); text-transform:var(--buyuk-harf, uppercase); font-size:13px; line-height:1.15; color:var(--metin); }

.hs-menu{ margin-bottom:8px; background:var(--zemin); border-block:var(--cizgi, 1px) solid var(--cerceve, var(--metin)); }
.hs-sat{
  display:flex; align-items:center; gap:12px; width:100%;
  padding:14px 16px; text-align:left; border-bottom:1px solid var(--hat);
}
.hs-sat:last-child{ border-bottom:0; }
.hs-sat-ikon{ display:grid; place-items:center; flex-shrink:0; color:var(--metin); }
.hs-sat-ikon .ikn{ width:20px; height:20px; }
.hs-sat-orta{ flex:1; min-width:0; }
.hs-sat-orta b{ font-size:15px; font-weight:500; color:var(--metin); }
.hs-sat-ok{ flex-shrink:0; color:var(--metin3); }
.hs-sat-ok .ikn{ width:14px; height:14px; }
.hs-cikis b{ color:var(--kirmizi); }
.hs-cikis .hs-sat-ikon{ color:var(--kirmizi); }

/* alt ekranlar: geri + başlık */
.hs-alt-bas{
  position:relative; display:flex; align-items:center; justify-content:center; gap:8px; height:52px; padding:0 48px;
  background:var(--zemin); border-bottom:var(--cizgi, 1px) solid var(--cerceve, var(--metin));
}
.hs-alt-bas h1{ margin:0; font-size:20px; color:var(--metin); white-space:nowrap; }
.hs-alt-bas h1 .sayi{ font-family:var(--yazi); letter-spacing:0; text-transform:none; font-weight:400; color:var(--metin3); font-size:14px; }
.hs-alt-bas .kt-geri{ display:grid; }
.hs-temizle{ position:absolute; right:14px; font-size:13px; font-weight:600; color:var(--metin); text-decoration:underline; text-underline-offset:3px; }
.hs-alt-ic{ padding:12px 12px 0; }
.hs-grid{ gap:10px; padding:10px; }

.hs-kuponlar{ display:flex; flex-direction:column; gap:10px; padding:12px; }
.hs-kupon{ display:grid; grid-template-columns:96px minmax(0, 1fr); background:var(--zemin); border:1.5px solid var(--metin); border-radius:var(--r3); overflow:hidden; }
.hs-kupon-sol{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  background:var(--karbon-acik, var(--panel)); border-right:1.5px dashed var(--cerceve-kesik, var(--metin));
}
.hs-kupon-sol b{ font-family:var(--yazi-dar); font-size:26px; font-weight:700; line-height:1; color:var(--karbon, var(--metin)); }
.hs-kupon-sol small{ font-family:var(--yazi-dar); font-weight:700; letter-spacing:var(--dar-aralik, .05em); text-transform:var(--buyuk-harf, uppercase); font-size:11px; color:var(--karbon, var(--metin)); }
.hs-kupon-sag{ display:flex; flex-direction:column; gap:3px; padding:12px; font-size:12px; color:var(--metin2); }
.hs-kupon-sag b{ font-size:14px; font-weight:600; color:var(--metin); }
.hs-kupon-sag small{ font-size:11px; color:var(--metin3); }
.hs-kupon-sag a{ display:inline-flex; align-items:center; gap:4px; margin-top:4px; font-family:var(--yazi-dar); font-weight:700; letter-spacing:var(--dar-aralik, .05em); text-transform:var(--buyuk-harf, uppercase); font-size:13px; color:var(--metin); }
.hs-kupon-sag a .ikn{ width:11px; height:11px; }

@media (hover:hover){
  .hs-sat:hover, .hs-hizli-kart:hover b{ color:var(--metin); }
  .hs-hizli-kart:hover .hs-hizli-ikon{ background:var(--metin); color:var(--zemin); }
  .hs-sat:hover{ background:var(--panel); }
}
@media (min-width:900px){
  .hs{ max-width:760px; margin:16px auto 0; }
  .hs-kimlik, .hs-alt-bas{ border-radius:var(--r2) var(--r2) 0 0; }
  .hs-menu, .hs-hizli{ border:var(--cizgi, 1px) solid var(--cerceve, var(--metin)); border-radius:var(--r3); }
  .hs-kuponlar{ display:grid; grid-template-columns:1fr 1fr; }
}

/* ============================================================
   SİPARİŞLERİM
   ============================================================ */

.sp-sekmeler{ display:flex; gap:7px; margin-bottom:12px; }
.sp-sekmeler .cip u{
  text-decoration:none; font-size:11px; font-weight:700;
  color:var(--metin3);
}
.sp-sekmeler .cip[aria-selected="true"]{
  background:var(--metin); border-color:var(--metin);
  color:var(--zemin); font-weight:700;
}
.sp-sekmeler .cip[aria-selected="true"] u{ color:var(--zemin); }

.sp-liste{ display:flex; flex-direction:column; gap:12px; }

.sp-kart{
  border-radius:var(--r3); border:var(--cizgi, 1px) solid var(--cerceve, var(--metin));
  background:var(--zemin); overflow:hidden;
}
.sp-bas{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:10px; padding:12px 15px; background:var(--zemin);
  border-bottom:1px dashed var(--hat2);
}
.sp-bas-sol{ min-width:0; display:flex; flex-direction:column; gap:2px; }
.sp-no{ font-size:12.5px; color:var(--metin2); overflow-wrap:anywhere; }
.sp-no b{ font-family:var(--yazi-dar); font-size:17px; font-weight:700; letter-spacing:var(--dar-aralik, .03em); color:var(--karbon, var(--metin)); }
.sp-tarih{ font-size:11.5px; color:var(--metin3); overflow-wrap:anywhere; }

/* durum kupona damgalanır (.damga dili): çift çizgili, eğik, tek mürekkep.
   Süren ve biten durumlar lacivert; yalnız iptal mandalina. */
.sp-rozet{
  flex-shrink:0; padding:4px 8px 3px; border-radius:var(--r); background:none;
  border:2px solid currentColor; box-shadow:inset 0 0 0 1.5px var(--zemin), inset 0 0 0 2.5px currentColor;
  transform:rotate(-3deg);
  font-family:var(--yazi-dar); font-weight:700; letter-spacing:var(--dar-aralik, .05em); text-transform:var(--buyuk-harf, uppercase); font-size:12px; white-space:nowrap; color:var(--metin);
}
.sp-rozet.iptal { color:var(--mandalina); }

/* ---------- kargo zaman çizelgesi ----------
   Bağlayıcı çizgi ::before ile noktanın arkasından geçer; aktif adıma
   kadar markaya boyanır. Grid hücrelerine min-width:0 şart —
   bu projede min-width:auto üç kez yatay kaymaya yol açtı. */
.sp-cizelge{
  display:grid; grid-auto-flow:column; grid-auto-columns:1fr;
  margin:0; padding:18px 12px 14px; list-style:none;
}
.sp-cizelge li{
  position:relative; min-width:0;
  display:flex; flex-direction:column; align-items:center; gap:7px;
  text-align:center;
}
.sp-cizelge li::before{
  content:""; position:absolute; top:9px; left:-50%; right:50%; height:2px;
  background:var(--hat2);
}
.sp-cizelge li:first-child::before{ display:none; }
.sp-cizelge li.bitti::before, .sp-cizelge li.simdi::before{ background:var(--metin); }

.sp-nokta{
  position:relative; z-index:1;
  display:grid; place-items:center; width:20px; height:20px;
  border-radius:50%; background:var(--zemin);
  border:2px solid var(--hat2); color:transparent;
}
.sp-cizelge li.bitti .sp-nokta{ background:var(--metin); border-color:var(--metin); color:var(--zemin); }
.sp-cizelge li.simdi .sp-nokta{
  background:var(--zemin); border-color:var(--mandalina); color:var(--mandalina);
  box-shadow:0 0 0 3px var(--zemin), 0 0 0 4.5px var(--mandalina);
}
.sp-nokta .ikn{ width:11px; height:11px; }

.sp-adim-ad{
  font-size:10.5px; font-weight:600; color:var(--metin3);
  overflow-wrap:anywhere; hyphens:auto;
}
.sp-cizelge li.bitti .sp-adim-ad{ color:var(--metin2); }
.sp-cizelge li.simdi .sp-adim-ad{ color:var(--metin); font-weight:700; }

/* ---------- kargo bilgisi ---------- */
.sp-kargo{
  display:flex; align-items:flex-start; gap:10px;
  margin:0 15px 12px; padding:11px 13px;
  border-radius:var(--r2); background:var(--panel);
  font-size:12.5px; color:var(--metin2);
}
.sp-kargo > .ikn{ flex-shrink:0; width:18px; height:18px; color:var(--metin); margin-top:1px; }
.sp-kargo div{ min-width:0; }
.sp-kargo b{ color:var(--metin); font-weight:700; }
.sp-kargo small{ display:block; margin-top:2px; font-size:11.5px; color:var(--metin3); overflow-wrap:anywhere; }

/* ---------- sipariş kalemleri ---------- */
.sp-kalemler{ display:flex; flex-direction:column; }
.sp-kalem{
  display:flex; align-items:center; gap:11px;
  padding:9px 15px; transition:background var(--hiz);
}
.sp-kalem:hover{ background:var(--panel); }
.sp-kalem-gorsel{
  flex-shrink:0; width:48px; aspect-ratio:3/4; overflow:hidden;
  border-radius:var(--r); background:var(--panel);
}
.sp-kalem-gorsel .gorsel{ width:100%; height:100%; }
.sp-kalem-gorsel img{ width:100%; height:100%; object-fit:cover; }
.sp-kalem-orta{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.sp-kalem-orta b{
  font-size:13px; font-weight:600; color:var(--metin2);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.sp-kalem:hover .sp-kalem-orta b{ color:var(--metin); }
.sp-kalem-orta small{ font-size:11.5px; color:var(--metin3); }
.sp-kalem-fiyat{ flex-shrink:0; font-family:var(--yazi-dar); font-size:17px; font-weight:700; }

/* ---------- alt şerit ---------- */
.sp-alt{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; flex-wrap:wrap;
  padding:12px 15px; border-top:1px dashed var(--hat2); background:var(--zemin);
}
.sp-toplam{ font-size:12.5px; color:var(--metin2); }
.sp-toplam b{ margin-left:5px; font-family:var(--yazi-dar); font-size:20px; font-weight:700; color:var(--metin); }
.sp-eyl{ display:flex; gap:7px; flex-wrap:wrap; }
.sp-eyl .btn{ padding:9px 13px; font-size:12.5px; }
.sp-eyl .ikn{ width:15px; height:15px; }

/* ============================================================
   MASAÜSTÜ
   ============================================================ */

@media (min-width:560px){
  .sp-adim-ad{ font-size:11.5px; }
}

@media (min-width:900px){
  .sp-cizelge{ padding:22px 40px 18px; }
}