/* ═══════════════════════════════════════════
   EgzotikMarket — PEMBE TEMA
   Tüm sayfalarda ortak kullanılır
   ═══════════════════════════════════════════ */

:root {
  /* Ana renkler - Ejder Pembe/Bordo */
  --g: #C71585 !important;
  --g2: #db2777 !important;
  --g3: #fce7f3 !important;
  --gl: #fdf2f8 !important;
  
  /* Arka plan */
  --bg: #fdf2f8 !important;
  --bg2: #fff !important;
  --bg3: #fce7f3 !important;
  
  /* Border'lar */
  --border: #fbcfe8 !important;
  --border2: #f9a8d4 !important;
  
  /* Text renkleri */
  --text: #831843 !important;
  --text2: #9d174d !important;
  --text3: #be185d !important;
}

/* Body arka plan */
body {
  background: linear-gradient(180deg, #fdf2f8 0%, #fce7f3 100%) !important;
}

/* Sidebar başlık */
.sb-hd {
  background: linear-gradient(135deg, #C71585, #db2777) !important;
}

/* Center banner (slider) */
.cban {
  background: linear-gradient(135deg, #831843 0%, #9d174d 100%) !important;
}

/* Ürün kartları hover */
.prc-g:hover {
  border-color: #f472b6 !important;
  box-shadow: 0 8px 30px rgba(199, 21, 133, 0.15) !important;
}

/* Badge'ler */
.sb-bdg-g {
  background: #C71585 !important;
}

/* Footer arka plan */
footer, #footer {
  background: linear-gradient(180deg, #831843, #4a0d2a) !important;
}

/* Scrollbar */
::-webkit-scrollbar-thumb {
  background: #db2777 !important;
}

/* Butonlar */
.btn-primary, .hbtn {
  background: linear-gradient(135deg, #C71585, #db2777) !important;
}
.btn-primary:hover, .hbtn:hover {
  background: linear-gradient(135deg, #db2777, #ec4899) !important;
}


/* ═══ ÜRÜN GRID 3'LÜ ═══ */
.pgrid {
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 20px !important;
}

/* MOBİL ÜRÜN GRID */
@media (max-width: 768px) {
  .pgrid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
}
@media (max-width: 480px) {
  .pgrid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
}

/* Ürün kartı border küçült */
.prc-g {
  border-width: 1px !important;
  border-radius: 8px !important;
}

.prc-g img {
  border-radius: 6px 6px 0 0 !important;
}


/* ═══ BLOG SAYFASI ═══ */
.blog-hero {
  background: linear-gradient(135deg, #831843, #C71585) !important;
  margin-top: 0 !important;
  padding-top: 60px !important;
}
.blog-hero h1 em {
  color: #5a9e3a !important;
}


/* ═══ BUTONLAR PEMBE-YEŞİL ═══ */
.btn-g,
button.btn-g,
.btn-primary {
  background: linear-gradient(135deg, #C71585, #5a9e3a) !important;
}
.btn-g:hover,
button.btn-g:hover,
.btn-primary:hover {
  background: linear-gradient(135deg, #db2777, #6dbe47) !important;
}

/* Auth modal butonları */
#auth-modal-box .btn-g,
.am-body .btn-g {
  background: linear-gradient(135deg, #C71585, #5a9e3a) !important;
}


/* ═══ SSL GÜVENLİ BAĞLANTI KUTUSU ═══ */
.am-sec-note {
  background: linear-gradient(135deg, #C71585, #5a9e3a) !important;
  color: #fff !important;
}


/* ═══════════════════════════════════════════════════════════════
   MODAL İÇERİK TASARIMI - Pembe-Yeşil Arka Plan
   ═══════════════════════════════════════════════════════════════ */

/* Body arka plan - pembe-yeşil gradient */
body {
  background: linear-gradient(135deg, #fce7f3 0%, #d1fae5 50%, #fdf2f8 100%) !important;
  background-attachment: fixed !important;
  min-height: 100vh;
}

/* Ana içerik alanı - modal kutu */
main,
.main-content,
#main-content,
.page-content {
  max-width: 1200px !important;
  margin: 30px auto !important;
  background: rgba(255, 255, 255, 0.95) !important;
  border-radius: 20px !important;
  box-shadow: 0 8px 32px rgba(199, 21, 133, 0.15), 0 2px 8px rgba(0,0,0,0.08) !important;
  padding: 30px !important;
  backdrop-filter: blur(10px) !important;
}

/* Sidebar + ürünler wrapper */
.wrap,
.page-wrap,
#wrap {
  max-width: 1200px !important;
  margin: 30px auto !important;
  background: rgba(255, 255, 255, 0.95) !important;
  border-radius: 20px !important;
  box-shadow: 0 8px 32px rgba(199, 21, 133, 0.15), 0 2px 8px rgba(0,0,0,0.08) !important;
  padding: 25px !important;
  backdrop-filter: blur(10px) !important;
}

/* Footer da kutu içinde */
footer,
#footer,
.footer {
  max-width: 1200px !important;
  margin: 0 auto 30px auto !important;
  background: rgba(255, 255, 255, 0.95) !important;
  border-radius: 20px !important;
  box-shadow: 0 8px 32px rgba(199, 21, 133, 0.15) !important;
  padding: 30px !important;
}

/* Blog hero ve diğer tam genişlik bölümler */
.blog-hero,
.hero-section {
  max-width: 1200px !important;
  margin: 30px auto !important;
  border-radius: 20px !important;
  overflow: hidden !important;
}

/* İletişim, Hakkımızda vb sayfalar */
.ci-wrap,
.ab-wrap,
.page-box {
  max-width: 1200px !important;
  margin: 30px auto !important;
  background: rgba(255, 255, 255, 0.95) !important;
  border-radius: 20px !important;
  box-shadow: 0 8px 32px rgba(199, 21, 133, 0.15) !important;
  padding: 30px !important;
}


/* ═══ FOOTER KUTUSU ═══ */
body > footer,
main > footer,
footer {
  max-width: 1200px !important;
  margin: 0 auto 30px auto !important;
  background: rgba(255, 255, 255, 0.97) !important;
  border-radius: 20px !important;
  box-shadow: 0 8px 32px rgba(199, 21, 133, 0.15), 0 2px 8px rgba(0,0,0,0.1) !important;
  padding: 30px !important;
  backdrop-filter: blur(10px) !important;
}

footer .ftop,
footer .fbot {
  background: transparent !important;
}


/* ═══ FOOTER TÜM SAYFALAR İÇİN ═══ */
footer,
footer.footer,
body footer,
html body footer,
#app footer,
.blog-wrap + footer,
main + footer {
  max-width: 1200px !important;
  margin: 30px auto !important;
  background: #fff !important;
  border-radius: 20px !important;
  box-shadow: 0 8px 32px rgba(199, 21, 133, 0.15), 0 2px 8px rgba(0,0,0,0.1) !important;
  padding: 30px !important;
}

footer .ftop,
footer .fbot,
footer .flogo,
footer .fcol,
footer h4,
footer ul,
footer li,
footer a {
  background: transparent !important;
}

footer .flogo {
  color: #C71585 !important;
}

footer .flogo span {
  color: #5a9e3a !important;
}

footer h4 {
  color: #333 !important;
}

footer a {
  color: #555 !important;
}

footer a:hover {
  color: #C71585 !important;
}

footer .fcopy {
  color: #666 !important;
}


/* ═══════════════════════════════════════════════════════════════
   ADMIN PANEL - PEMBE-YEŞİL TEMA
   ═══════════════════════════════════════════════════════════════ */

/* Admin panel arka plan */
#adm-modal .ap {
  background: linear-gradient(135deg, #fdf2f8 0%, #ecfdf5 100%) !important;
}

/* Admin bar */
#adm-modal .apbar {
  background: linear-gradient(135deg, #831843 0%, #166534 100%) !important;
  border-bottom: 3px solid #C71585 !important;
}

#adm-modal .ap-logo {
  color: #fff !important;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.3) !important;
}

/* Admin sekmeler */
#adm-modal .atab {
  background: rgba(255,255,255,0.15) !important;
  color: #fff !important;
  border: none !important;
  transition: all 0.2s !important;
}

#adm-modal .atab:hover {
  background: rgba(255,255,255,0.25) !important;
}

#adm-modal .atab.on {
  background: linear-gradient(135deg, #C71585, #5a9e3a) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(199,21,133,0.4) !important;
}

/* Admin içerik alanı */
#adm-modal .apbody {
  background: #fff !important;
  border-radius: 0 0 12px 12px !important;
}

/* Başlıklar */
#adm-modal .ap-sec-t {
  color: #831843 !important;
  border-bottom: 2px solid #fce7f3 !important;
}

/* Dashboard kartları */
#adm-modal .dstat {
  background: linear-gradient(135deg, #fff 0%, #fdf2f8 100%) !important;
  border: 1px solid #fce7f3 !important;
  border-radius: 12px !important;
}

#adm-modal .dstat:hover {
  border-color: #C71585 !important;
  box-shadow: 0 4px 12px rgba(199,21,133,0.15) !important;
}

#adm-modal .dstat-n {
  color: #C71585 !important;
}

#adm-modal .dstat-l {
  color: #666 !important;
}

/* Butonlar */
#adm-modal .btn-g,
#adm-modal button.btn-g {
  background: linear-gradient(135deg, #C71585, #5a9e3a) !important;
  border: none !important;
  color: #fff !important;
}

#adm-modal .btn-g:hover {
  background: linear-gradient(135deg, #db2777, #6dbe47) !important;
}

/* Tablolar */
#adm-modal .ot {
  border: 1px solid #fce7f3 !important;
}

#adm-modal .ot th {
  background: linear-gradient(135deg, #831843, #166534) !important;
  color: #fff !important;
}

#adm-modal .ot tr:nth-child(even) {
  background: #fdf2f8 !important;
}

#adm-modal .ot tr:hover {
  background: #fce7f3 !important;
}

/* Sipariş durum select */
#adm-modal .ossel {
  border: 1px solid #fce7f3 !important;
  background: #fff !important;
}

#adm-modal .ossel:focus {
  border-color: #C71585 !important;
}

/* Form elemanları */
#adm-modal input,
#adm-modal select,
#adm-modal textarea {
  border: 1px solid #fce7f3 !important;
  border-radius: 6px !important;
}

#adm-modal input:focus,
#adm-modal select:focus,
#adm-modal textarea:focus {
  border-color: #C71585 !important;
  box-shadow: 0 0 0 3px rgba(199,21,133,0.1) !important;
}

/* Kapatma butonu */
#adm-modal .ap-x {
  background: rgba(255,255,255,0.2) !important;
  color: #fff !important;
}

#adm-modal .ap-x:hover {
  background: #e11d48 !important;
}


/* ═══ MESAJLAR MODÜLÜ CSS ═══ */
.msg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 15px;
}

.msg-card {
  background: #fff;
  border: 1px solid #fce7f3;
  border-radius: 12px;
  padding: 16px;
  cursor: pointer;
  transition: all 0.2s;
}

.msg-card:hover {
  border-color: #C71585;
  box-shadow: 0 4px 12px rgba(199,21,133,0.15);
  transform: translateY(-2px);
}

.msg-card.yeni {
  border-left: 4px solid #ef4444;
  background: linear-gradient(90deg, #fef2f2 0%, #fff 20%);
}

.msg-card.okundu {
  border-left: 4px solid #f59e0b;
}

.msg-card.cevaplandi {
  border-left: 4px solid #22c55e;
}

.msg-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.msg-name {
  font-weight: 600;
  color: #333;
  font-size: 14px;
}

.msg-stat {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 10px;
}

.msg-stat-yeni { background: #fef2f2; color: #dc2626; }
.msg-stat-okundu { background: #fffbeb; color: #d97706; }
.msg-stat-cevaplandi { background: #f0fdf4; color: #16a34a; }

.msg-email {
  font-size: 12px;
  color: #C71585;
  margin-bottom: 4px;
}

.msg-tel, .msg-konu {
  font-size: 11px;
  color: #666;
  margin-bottom: 3px;
}

.msg-preview {
  font-size: 12px;
  color: #555;
  margin: 10px 0;
  line-height: 1.4;
  border-top: 1px solid #f3f4f6;
  padding-top: 10px;
}

.msg-date {
  font-size: 10px;
  color: #999;
  text-align: right;
}

/* Mesaj Modal */
.msg-modal-bg {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999999;
}

.msg-modal {
  background: #fff;
  border-radius: 16px;
  width: 90%;
  max-width: 550px;
  max-height: 85vh;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0,0,0,0.3);
}

.msg-modal-hd {
  background: linear-gradient(135deg, #831843, #166534);
  color: #fff;
  padding: 16px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
}

.msg-modal-hd button {
  background: rgba(255,255,255,0.2);
  border: none;
  color: #fff;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 14px;
}

.msg-modal-body {
  padding: 20px;
  overflow-y: auto;
  max-height: calc(85vh - 60px);
}

.msg-info {
  margin-bottom: 10px;
  font-size: 13px;
}

.msg-info strong {
  color: #831843;
}

.msg-info a {
  color: #C71585;
  text-decoration: none;
}

.msg-info a:hover {
  text-decoration: underline;
}

.msg-info select {
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 12px;
}

.msg-content-box {
  margin-top: 16px;
  padding: 15px;
  background: #fdf2f8;
  border-radius: 10px;
  border: 1px solid #fce7f3;
}

.msg-content-box strong {
  display: block;
  margin-bottom: 10px;
  color: #831843;
}

.msg-content {
  font-size: 13px;
  line-height: 1.6;
  color: #333;
  white-space: pre-wrap;
}

.msg-actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
  flex-wrap: wrap;
}

.msg-actions .btn-g {
  padding: 10px 16px;
  font-size: 12px;
  border-radius: 8px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}


/* ═══════════════════════════════════════════
   FOOTER PEMBE-YEŞİL GRADİENT
   ═══════════════════════════════════════════ */
html body footer,
html body main footer,
html body main > footer,
body > main > footer,
footer {
  max-width: 1200px !important;
  margin: 30px auto !important;
  background: linear-gradient(135deg, #831843 0%, #166534 100%) !important;
  border-radius: 20px !important;
  box-shadow: 0 8px 32px rgba(199, 21, 133, 0.25), 0 4px 16px rgba(22, 101, 52, 0.15) !important;
  padding: 30px 40px !important;
}

footer .ftop,
footer .fbot {
  background: transparent !important;
}

footer .flogo {
  color: #fff !important;
  font-family: 'Playfair Display', serif !important;
  font-size: 26px !important;
}

footer .flogo span {
  color: #a5d6a7 !important;
}

footer .fdesc {
  color: rgba(255,255,255,0.7) !important;
  font-size: 12px !important;
  margin-top: 8px !important;
}

footer h4 {
  color: #fff !important;
  font-size: 13px !important;
  margin-bottom: 12px !important;
}

footer ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

footer li {
  margin-bottom: 6px !important;
}

footer a {
  color: rgba(255,255,255,0.8) !important;
  text-decoration: none !important;
  font-size: 12px !important;
  transition: color 0.2s !important;
}

footer a:hover {
  color: #f9a8d4 !important;
}

footer .fcopy {
  color: rgba(255,255,255,0.6) !important;
  font-size: 11px !important;
}

footer .fbot {
  border-top: 1px solid rgba(255,255,255,0.15) !important;
  margin-top: 20px !important;
  padding-top: 16px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

footer .fps {
  display: flex !important;
  gap: 8px !important;
}

footer .fpb {
  background: rgba(255,255,255,0.15) !important;
  color: #fff !important;
  padding: 4px 10px !important;
  border-radius: 4px !important;
  font-size: 10px !important;
  font-weight: 600 !important;
}

footer .fsoc {
  display: flex !important;
  gap: 8px !important;
  margin-top: 12px !important;
}

footer .fsb {
  width: 32px !important;
  height: 32px !important;
  background: rgba(255,255,255,0.15) !important;
  color: #fff !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: background 0.2s !important;
}

footer .fsb:hover {
  background: rgba(255,255,255,0.25) !important;
}


/* ═══════════════════════════════════════════════════════════════
   HESABIM SAYFASI - PEMBE TEMA UYUMU
   ═══════════════════════════════════════════════════════════════ */

/* Sidebar */
.acc-sb {
  background: #fff !important;
  border-radius: 16px !important;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(219,39,119,0.1) !important;
  border: 1px solid rgba(219,39,119,0.15) !important;
}

/* Kullanıcı bilgileri header */
.acc-user {
  background: linear-gradient(135deg, #db2777, #166534) !important;
  padding: 24px 20px !important;
  text-align: center;
}

.acc-av {
  background: rgba(255,255,255,0.2) !important;
  border: 3px solid rgba(255,255,255,0.4) !important;
  color: #fff !important;
}

.acc-nm {
  color: #fff !important;
  font-weight: 600 !important;
}

.acc-em {
  color: rgba(255,255,255,0.8) !important;
}

/* Menü öğeleri */
.acc-mit {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 14px 20px !important;
  border-bottom: 1px solid rgba(219,39,119,0.1) !important;
  cursor: pointer;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #374151 !important;
  transition: all 0.2s ease !important;
  background: transparent !important;
}

.acc-mit span {
  font-size: 18px !important;
  width: 24px !important;
  text-align: center !important;
}

.acc-mit:hover {
  background: linear-gradient(135deg, #fdf2f8, #ecfdf5) !important;
  color: #db2777 !important;
}

.acc-mit.on {
  background: linear-gradient(135deg, #fce7f3, #d1fae5) !important;
  color: #db2777 !important;
  border-left: 4px solid #db2777 !important;
  font-weight: 600 !important;
}

/* Çıkış butonu */
.acc-logout {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 14px 20px !important;
  cursor: pointer;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #dc2626 !important;
  transition: all 0.2s ease !important;
  margin-top: auto;
}

.acc-logout span {
  font-size: 18px !important;
}

.acc-logout:hover {
  background: #fef2f2 !important;
}

/* İçerik alanı */
.acc-content {
  background: #fff !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 20px rgba(219,39,119,0.1) !important;
  border: 1px solid rgba(219,39,119,0.15) !important;
}

.acc-t {
  color: #1f2937 !important;
  border-bottom: 2px solid rgba(219,39,119,0.15) !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  padding: 20px 24px !important;
}

/* Boş durum */
.empty-st {
  text-align: center;
  padding: 48px 24px !important;
  color: #9ca3af !important;
}

.empty-st div:first-child {
  font-size: 48px !important;
  margin-bottom: 12px;
}


/* ═══════════════════════════════════════════════════════════════
   HEADER DROPDOWN MENÜ - PEMBE TEMA FIX
   ═══════════════════════════════════════════════════════════════ */

/* Dropdown container */
.usr-dropdown {
  background: #fff !important;
  border: 1px solid rgba(219,39,119,0.2) !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 40px rgba(219,39,119,0.15) !important;
}

/* Dropdown header */
.ud-header {
  background: linear-gradient(135deg, #db2777, #166534) !important;
  padding: 16px !important;
}

.ud-av {
  background: rgba(255,255,255,0.2) !important;
  border: 2px solid rgba(255,255,255,0.4) !important;
  color: #fff !important;
}

.ud-nm {
  color: #fff !important;
  font-weight: 600 !important;
  font-size: 13px !important;
}

.ud-em {
  color: rgba(255,255,255,0.8) !important;
  font-size: 11px !important;
}

/* Dropdown menu items */
.ud-it,
.ud-it span,
.usr-dropdown .ud-it,
.usr-dropdown a.ud-it {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 16px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #1f2937 !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  background: transparent !important;
}

.ud-it span:not(.ud-it-icon) {
  color: #1f2937 !important;
}

.ud-it:hover,
.ud-it:hover span {
  background: linear-gradient(135deg, #fdf2f8, #ecfdf5) !important;
  color: #db2777 !important;
}

.ud-it-icon {
  font-size: 16px !important;
  width: 24px !important;
  text-align: center !important;
  flex-shrink: 0 !important;
}

/* Logout button */
.ud-logout,
.ud-logout span,
.usr-dropdown .ud-logout {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 16px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #dc2626 !important;
  border-top: 1px solid rgba(219,39,119,0.1) !important;
  margin-top: 4px !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
}

.ud-logout span:not(.ud-it-icon) {
  color: #dc2626 !important;
}

.ud-logout:hover {
  background: #fef2f2 !important;
}

/* Separator */
.ud-sep {
  height: 1px !important;
  background: rgba(219,39,119,0.1) !important;
  margin: 4px 0 !important;
}