/* DTM Plaza magaza katmani — kendi kendine yeten stiller.
   Site WoodMart/WooCommerce kullaniyor (Tailwind yok), bu yuzden bilesenler
   hicbir cerceveye bagli degil. Font ve ana renk siteden miras alinir. */

.sn-duzen,
.sn-duzen * { box-sizing: border-box; }

.sn-duzen {
  --sn-metin: #1d2327;
  --sn-soluk: #6b7280;
  --sn-kenar: #e5e7eb;
  --sn-vurgu: #0d6efd;
  --sn-yesil: #16a34a;
  --sn-kirmizi: #dc2626;
  --sn-yuvarlak: 10px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 24px;
  align-items: start;
  font-family: inherit;
  color: var(--sn-metin);
  margin: 8px 0 40px;
}

/* sitenin ana rengi varsa onu kullan */
.sn-duzen { --sn-vurgu: var(--wd-primary-color, #0d6efd); }

@media (max-width: 991px) {
  .sn-duzen { grid-template-columns: 1fr; }
}

.sn-sol { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.sn-sag { min-width: 0; }

.sn-baslik {
  font-size: 18px;
  font-weight: 600;
  margin: 12px 0 4px;
  color: var(--sn-metin);
}
.sn-baslik:first-child { margin-top: 0; }
.sn-soluk { color: var(--sn-soluk); font-weight: 400; font-size: 14px; }

.sn-kart {
  background: #fff;
  border: 1px solid var(--sn-kenar);
  border-radius: var(--sn-yuvarlak);
  padding: 16px;
}

/* ---- sepet satirlari ---- */
.sn-satirlar { display: flex; flex-direction: column; gap: 10px; }

.sn-satir {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr) auto auto 32px;
  gap: 14px;
  align-items: center;
  background: #fff;
  border: 1px solid var(--sn-kenar);
  border-radius: var(--sn-yuvarlak);
  padding: 12px;
}

.sn-satir-gorsel { display: block; width: 84px; height: 84px; flex: 0 0 auto; }
.sn-satir-gorsel img,
.sn-gorsel { width: 100%; height: 100%; object-fit: contain; background: #f7f7f8; border-radius: 8px; }

.sn-satir-bilgi { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sn-satir-ad {
  font-size: 14px; font-weight: 500; color: var(--sn-metin); text-decoration: none;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sn-satir-ad:hover { color: var(--sn-vurgu); }
.sn-satir-varyant, .sn-satir-birim { font-size: 12px; color: var(--sn-soluk); }

.sn-adet { display: inline-flex; align-items: center; border: 1px solid var(--sn-kenar); border-radius: 8px; overflow: hidden; }
.sn-adet button {
  width: 32px; height: 34px; border: 0; background: #fff; cursor: pointer;
  font-size: 16px; line-height: 1; color: var(--sn-metin); transition: background .15s;
}
.sn-adet button:hover { background: #f3f4f6; }
.sn-adet span { min-width: 34px; text-align: center; font-size: 14px; font-weight: 500; }

.sn-satir-tutar { font-size: 15px; font-weight: 600; white-space: nowrap; }

.sn-sil {
  width: 30px; height: 30px; border: 0; background: transparent; cursor: pointer;
  color: #9ca3af; font-size: 14px; border-radius: 6px; transition: .15s;
}
.sn-sil:hover { color: var(--sn-kirmizi); background: #fef2f2; }

/* ---- ozet kutusu ---- */
.sn-ozet {
  position: sticky; top: 20px;
  background: #fff;
  border: 1px solid var(--sn-kenar);
  border-radius: var(--sn-yuvarlak);
  padding: 18px;
  display: flex; flex-direction: column; gap: 10px;
}
@media (max-width: 991px) { .sn-ozet { position: static; } }

.sn-ozet-baslik { font-size: 16px; font-weight: 600; margin-bottom: 2px; }

.sn-satir-ozet { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px; }
.sn-satir-ozet b { font-weight: 600; }
.sn-indirim, .sn-indirim b { color: var(--sn-yesil); }
.sn-genel { font-size: 16px; }
.sn-genel b { font-size: 18px; color: var(--sn-vurgu); }

.sn-ayrac { height: 1px; background: var(--sn-kenar); margin: 4px 0; }

.sn-ozet-urun { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 13px; }
.sn-ozet-urun img { width: 48px; height: 48px; object-fit: contain; background: #f7f7f8; border-radius: 6px; }
.sn-ozet-urun div { min-width: 0; display: flex; flex-direction: column; }
.sn-ozet-urun span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sn-ozet-urun small { color: var(--sn-soluk); font-size: 11px; }
.sn-ozet-urun b { white-space: nowrap; font-size: 13px; }

/* ---- butonlar ---- */
.sn-buton {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; min-height: 46px; padding: 10px 18px;
  border: 1px solid transparent; border-radius: 8px;
  font-size: 14px; font-weight: 600; font-family: inherit;
  text-align: center; text-decoration: none; cursor: pointer;
  transition: filter .15s, background .15s, color .15s;
}
.sn-birincil { background: var(--sn-vurgu, #0d6efd); color: #fff; }
.sn-birincil:hover { filter: brightness(.92); color: #fff; }
.sn-ikincil { background: #fff; color: var(--sn-metin); border-color: var(--sn-kenar); }
.sn-ikincil:hover { background: #f3f4f6; }
.sn-buton:disabled { opacity: .55; cursor: not-allowed; }
.sn-kucuk { width: auto; min-height: 34px; padding: 6px 14px; font-size: 12px; }

/* ---- form ---- */
.sn-form-izgara { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 575px) { .sn-form-izgara { grid-template-columns: 1fr; } }
.sn-genis { grid-column: 1 / -1; }

.sn-form-izgara label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; }
.sn-form-izgara label > span { color: var(--sn-soluk); }

.sn-duzen input[type="text"],
.sn-duzen input[type="email"],
.sn-duzen input:not([type]),
.sn-duzen select,
.sn-duzen textarea,
.sn-alan {
  width: 100%; padding: 10px 12px;
  border: 1px solid var(--sn-kenar); border-radius: 8px;
  background: #fff; font: inherit; font-size: 14px; color: var(--sn-metin);
  transition: border-color .15s;
}
.sn-duzen input:focus, .sn-duzen select:focus, .sn-duzen textarea:focus, .sn-alan:focus {
  outline: none; border-color: var(--sn-vurgu);
}
.sn-duzen textarea { resize: vertical; min-height: 72px; }

/* ---- secim kartlari (kargo / odeme) ---- */
.sn-secim {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px; align-items: start; cursor: pointer;
}
.sn-secim input[type="radio"] { margin-top: 3px; accent-color: var(--sn-vurgu); width: 16px; height: 16px; }
.sn-secim-govde { display: flex; flex-direction: column; gap: 3px; font-size: 14px; }
.sn-secim-govde small { color: var(--sn-soluk); font-size: 12px; }
.sn-secim-tutar { font-size: 14px; font-weight: 600; white-space: nowrap; }
.sn-secili { border-color: var(--sn-vurgu); }
.sn-pasif { opacity: .6; cursor: not-allowed; }
.sn-rozet {
  font-size: 10px; text-transform: uppercase; letter-spacing: .5px;
  background: #f3f4f6; color: var(--sn-soluk); padding: 4px 8px; border-radius: 6px; white-space: nowrap;
}

/* ---- IBAN kutusu ---- */
.sn-iban-kutu {
  display: flex; flex-direction: column; gap: 4px;
  margin-top: 10px; padding: 12px;
  background: #fafafa; border: 1px dashed #d4d4d8; border-radius: 8px;
}
.sn-iban-ust { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sn-iban-ust > span:first-child { display: flex; flex-direction: column; }
.sn-iban-ust small { color: var(--sn-soluk); font-size: 11px; }
.sn-iban { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; letter-spacing: .4px; word-break: break-all; }
.sn-iban-kutu small { color: var(--sn-soluk); font-size: 12px; }

.sn-uyari { margin: 10px 0 0; padding: 10px 12px; background: #f8fafc; border-radius: 8px; font-size: 13px; }

/* ---- siparis tamamlandi ---- */
.sn-tamam { display: flex; flex-direction: column; gap: 6px; }
.sn-tamam-baslik { font-size: 20px; font-weight: 600; }
.sn-tamam-satir { font-size: 14px; }
.sn-durum-bekliyor { color: #b45309; }
.sn-durum-inceleniyor { color: var(--sn-vurgu); }
.sn-durum-onay { color: var(--sn-yesil); }
.sn-durum-red { color: var(--sn-kirmizi); }

.sn-dosya {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--sn-kenar); border-radius: 8px; padding: 8px;
  cursor: pointer; margin-bottom: 10px;
}
.sn-dosya > span:last-of-type { font-size: 12px; color: var(--sn-soluk); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.sn-hata { color: var(--sn-kirmizi); font-size: 13px; }
.sn-basarili { color: var(--sn-yesil); font-size: 13px; }

/* ---- bos sepet ---- */
.sn-bos { text-align: center; padding: 56px 16px; }
.sn-bos-baslik { font-size: 20px; font-weight: 600; margin-bottom: 8px; }
.sn-bos p { color: var(--sn-soluk); margin-bottom: 18px; }
.sn-bos .sn-buton { width: auto; padding: 12px 28px; }

/* ---- sepete eklendi penceresi ---- */
.sn-popup-baslik {
  display: flex; align-items: center; gap: 10px;
  font-size: 16px; font-weight: 600; color: #16a34a; margin-bottom: 16px;
}
.sn-tik {
  width: 26px; height: 26px; border-radius: 50%; background: #16a34a; color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 15px; flex: 0 0 auto;
}
.sn-popup-urun { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 14px; align-items: center; padding-bottom: 16px; border-bottom: 1px solid #e5e7eb; }
.sn-popup-urun .sn-gorsel { width: 72px; height: 72px; }
.sn-popup-bilgi { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.sn-popup-ad { font-size: 14px; font-weight: 500; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sn-popup-varyant { font-size: 12px; color: #6b7280; }
.sn-popup-fiyat { display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: #6b7280; }
.sn-popup-fiyat b { font-size: 15px; color: #1d2327; }
.sn-popup-butonlar { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.sn-popup-butonlar .button,
.sn-popup-butonlar a {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 10px 16px; border-radius: 8px;
  font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer;
  border: 1px solid #e5e7eb; background: #fff; color: #1d2327;
}
.sn-popup-butonlar .sn-birincil { background: var(--wd-primary-color, #0d6efd); border-color: transparent; color: #fff; }

/* ---- bildirim (toast) ---- */
#sn-toast-kap {
  position: fixed; right: 16px; bottom: 16px; z-index: 999999;
  display: flex; flex-direction: column; gap: 8px; pointer-events: none;
}
.sn-toast {
  background: #111; color: #fff; padding: 12px 18px; border-radius: 8px;
  font-size: 14px; box-shadow: 0 8px 24px rgba(0, 0, 0, .18); max-width: 320px;
  animation: sn-gir .25s ease-out;
}
.sn-toast-hata { background: #b91c1c; }
.sn-toast.sn-cik { opacity: 0; transform: translateY(8px); transition: .3s ease; }
@keyframes sn-gir { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

@media (max-width: 640px) {
  .sn-satir { grid-template-columns: 64px minmax(0, 1fr) auto; row-gap: 10px; }
  .sn-satir-gorsel, .sn-satir-gorsel img { width: 64px; height: 64px; }
  .sn-satir-tutar { grid-column: 2 / 4; text-align: right; }
  .sn-sil { position: absolute; }
  #sn-toast-kap { left: 16px; right: 16px; }
  .sn-toast { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .sn-toast, .sn-buton, .sn-adet button { animation: none; transition: none; }
}

/* ---- modal ---- */
.sn-modal-katman {
  position: fixed; inset: 0; z-index: 999998;
  display: flex; align-items: center; justify-content: center;
  padding: 16px; background: rgba(0, 0, 0, .55);
  opacity: 0; pointer-events: none; transition: opacity .25s ease;
  overflow-y: auto;
}
.sn-modal-katman.sn-acik { opacity: 1; pointer-events: auto; }

.sn-modal-kutu {
  position: relative; width: 100%; max-width: 520px;
  background: #fff; border-radius: 12px;
  box-shadow: 0 24px 60px -12px rgba(0, 0, 0, .35);
  transform: translateY(12px) scale(.98); transition: transform .25s cubic-bezier(.16, 1, .3, 1);
  font-family: inherit; color: #1d2327;
}
.sn-modal-katman.sn-acik .sn-modal-kutu { transform: none; }

.sn-modal-govde { padding: 24px; }

.sn-modal-kapat {
  position: absolute; top: 8px; right: 10px; z-index: 2;
  width: 32px; height: 32px; border: 0; border-radius: 8px;
  background: transparent; color: #9ca3af; font-size: 24px; line-height: 1;
  cursor: pointer; transition: .15s;
}
.sn-modal-kapat:hover { color: #1d2327; background: #f3f4f6; }

@media (prefers-reduced-motion: reduce) {
  .sn-modal-katman, .sn-modal-kutu { transition: none; }
}