:root{
  --brand:#16a34a;
  --brand-dark:#15803d;
}
body{
  background:#f6f7fb;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
}

main {
  flex: 1;
}

/* === Topbar === */
.topbar{ background:#0f172a; color:#cbd5e1 }
.contact-pill{
  display:inline-flex; align-items:center; gap:.4rem;
  background:#111827; color:#e5e7eb; text-decoration:none;
  padding:.25rem .6rem; border-radius:999px; border:1px solid #1f2937
}
.contact-pill.whatsapp{ background:#065f46; border-color:#064e3b }
.topbar .topbar-link{ color:#cbd5e1; text-decoration:none }
.topbar .topbar-link:hover{ color:#fff }
.cart-pill{
  background:#0b1220; border:1px solid #1f2937; color:#e5e7eb;
  padding:.2rem .55rem; border-radius:999px;
  display:inline-flex; align-items:center; gap:.4rem; text-decoration:none;
}
.cart-count{
  background:#16a34a; color:#fff; border-radius:999px; padding:0 .35rem;
  font-size:.75rem; line-height:1.4;
}

/* Genel buton */
.btn-pill{ border-radius:999px; padding:.45rem .9rem }

/* Logo */
.logo{
  width:48px; height:48px; border-radius:12px;
  background:linear-gradient(135deg,#22c55e,#16a34a);
  display:grid; place-items:center; color:#fff; font-weight:800
}

/* Hero fallback */
.hero{
  border-radius:1.5rem;
  background:linear-gradient(120deg, rgba(22,163,74,.08), rgba(34,197,94,.04)), url('/static/hero_placeholder.jpg') center/cover no-repeat;
  padding:4rem 2rem; display:flex; align-items:center; min-height:320px; margin-bottom:1rem;
}

/* Kartlar */
.card{ border:0; border-radius:1rem }

/* Footer */
footer.site-footer{
  background:#0f172a; border-top:1px solid #1e293b; color:#e2e8f0;
  margin-top: auto;
}
footer.site-footer p, footer.site-footer li, footer.site-footer a, footer.site-footer .small{ color:#cbd5e1 }
footer.site-footer a:hover{ color:#ffffff }
footer.site-footer h6{ color:#94a3b8; letter-spacing:.04em }
footer.site-footer .text-muted{ color:#cbd5e1 !important; opacity:.95 }
footer.site-footer hr{ border-color:#1e293b; opacity:1 }
footer.site-footer .contact-pill{ background:#0b1220; border-color:#1f2a44; color:#e2e8f0 }
footer.site-footer .contact-pill.whatsapp{ background:#065f46; border-color:#0b7a5b; color:#e2e8f0 }
footer.site-footer .contact-pill i{ color:#e2e8f0 }
footer.site-footer .bi{ color:#94a3b8 }
footer.site-footer .bi:hover{ color:#ffffff }
.footer-links li{ margin:.2rem 0 }
.footer-links a{ text-decoration:none; color:#cbd5e1 }
.footer-links a:hover{ color:#fff }

/* Navbar logo */
.navbar-logo {
  height: 48px;
  width: 150px;
  object-fit: contain;
  margin-right: 8px;
  transition: all 0.3s ease;
}

/* Navbar menü (Montserrat + pill hover) */
.navbar .navbar-nav .nav-link{
  font-family:'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  font-weight:700; text-transform:uppercase; letter-spacing:.02em;
  color:#374151;
  display:inline-flex; align-items:center;
  padding:.55rem 1rem; border-radius:999px;
  transition:background-color .25s ease, color .25s ease, transform .2s ease;
}
.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link:focus{
  background-color:#0f172a !important; color:#fff !important; text-decoration:none; transform:translateY(-1px);
}
.navbar .navbar-nav .nav-link.active{ background-color:#e8f6ee; color:var(--brand-dark) !important }

/* Dropdown - hover ile açık kalma, küçük yazı */
.navbar .nav-item.dropdown:hover > .dropdown-menu,
.navbar .dropdown-menu:hover{ display:block }
.navbar .dropdown-menu{
  margin-top:0; border:0; border-radius:12px; padding:.5rem;
  box-shadow:0 12px 30px rgba(15,23,42,.15); min-width:260px;
  z-index: 1010;
}
.navbar .dropdown-item{
  font-family:'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  font-weight:700; text-transform:uppercase; letter-spacing:.02em;
  font-size:.9rem; color:#0f172a;
  border-radius:.6rem; padding:.6rem 1rem; transition:background-color .2s ease, color .2s ease;
}
.navbar .dropdown-item:hover{ background:#0f172a; color:#fff }

/* HERO SLIDER */
.hero-slider{ border-radius:1.5rem }
.hero-slider .carousel{ border-radius:1.5rem; overflow:hidden }
.hero-slider .carousel-inner{ border-radius:1.5rem; overflow:hidden }
.hero-img{ height:550px; object-fit:cover }
@media (max-width: 992px){ .hero-img{ height:450px } }
@media (max-width: 768px){ .hero-img{ height:320px } }
/* Oklar */
.hero-slider .carousel-control-prev, .hero-slider .carousel-control-next{ width:10%; opacity:0; transition:opacity .25s ease }
.hero-slider:hover .carousel-control-prev, .hero-slider:hover .carousel-control-next{ opacity:1 }
.hero-slider .carousel-control-prev-icon, .hero-slider .carousel-control-next-icon{
  background-color:rgba(15,23,42,.35); border-radius:999px; padding:16px; background-size:60% 60%;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.45));
}
.carousel-item{ transition:transform .6s ease-in-out }

/* === Bağış Yap sayfası modern tasarım === */
.donate-hero{
  background: radial-gradient(1200px 300px at -10% -50%, #0ea5e9 0%, rgba(14,165,233,0) 50%),
              radial-gradient(1200px 300px at 110% 150%, #0284c7 0%, rgba(2,132,199,0) 50%),
              linear-gradient(120deg,#0ea5e9,#0284c7);
  color:#fff;
}
.cat-card{
  background: #ffffffaa;
  backdrop-filter: blur(6px);
  border:1px solid #eef2f7;
  border-radius: 18px;
  padding: 16px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.cat-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 16px 30px rgba(15,23,42,.12);
  border-color: #e2e8f0;
}
.cat-icon{
  width:52px;height:52px;border-radius:14px;
  display:grid;place-items:center;
  background:#f1f5f9;color:#0f172a;font-size:22px;
  box-shadow: inset 0 2px 6px rgba(0,0,0,.05);
}
.cat-title{
  font-family:'Montserrat',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  font-weight:700;text-transform:uppercase;letter-spacing:.02em;color:#0f172a
}
.cat-sub{ color:#64748b; font-size:.9rem }
.amount-pill{
  border:1px solid #e2e8f0; background:#fff; color:#0f172a;
  padding:.35rem .7rem; border-radius:999px; font-weight:600; font-size:.95rem;
  transition: all .15s ease; cursor:pointer;
}
.amount-pill:hover{ background:#0f172a; color:#fff; border-color:#0f172a }
.input-group .btn-add-custom{ border-top-right-radius:999px; border-bottom-right-radius:999px }

/* === Kategori sekmeleri === */
/* Yeni kategori barı */
.cat-bar{
  display:flex; gap:.8rem; overflow:auto; padding:.25rem 0 .5rem;
  scroll-snap-type:x mandatory;
}
.cat-chip{
  scroll-snap-align:start;
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.6rem .95rem; border-radius:999px;
  background:#ffffff; border:1px solid #e3e8ef; color:#0f172a;
  font-weight:700; text-transform:uppercase; font-family:'Montserrat',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  letter-spacing:.02em; white-space:nowrap; cursor:pointer;
  box-shadow:0 4px 12px rgba(15,23,42,.06);
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease, color .16s ease;
}
.cat-chip .chip-ico{
  width:36px; height:36px; border-radius:999px; display:grid; place-items:center;
  background:#f1f5f9; color:#0f172a; font-size:18px; box-shadow: inset 0 2px 6px rgba(0,0,0,.05);
}
.cat-chip:hover{ transform:translateY(-1px); box-shadow:0 10px 20px rgba(15,23,42,.10); background:#f8fafc }
.cat-chip.active{
  background:linear-gradient(135deg,#22c55e,#16a34a); color:#fff; border-color:transparent;
  box-shadow:0 14px 26px rgba(22,163,74,.28);
}
.cat-chip.active .chip-ico{ background:rgba(255,255,255,.15); color:#fff }


/* === Alt bağış kartları === */
.don-box{ border:1px solid #eef2f7; border-radius:16px; overflow:hidden; background:#fff; box-shadow:0 6px 16px rgba(15,23,42,.06); display:flex; flex-direction:column }
.don-img{ width:100%; height:190px; object-fit:cover; display:block }
.don-body{ padding:16px }
.don-title{ font-family:'Montserrat',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:.02em; color:#0f172a }
.don-desc{ color:#64748b; font-size:.95rem; margin:.25rem 0  .6rem }
.don-controls .input-group .form-control{text-align:right}

/* === Sepet hover popover === */
.cart-hover{ position:relative }
.cart-popover{
  position:absolute; right:0; top:calc(100% + 8px); width:320px;
  background:#fff; border:1px solid #e2e8f0; border-radius:14px;
  opacity:0; transform:translateY(-6px); pointer-events:none; transition:opacity .2s ease, transform .2s ease;
}
.cart-hover:hover .cart-popover{ opacity:1; transform:translateY(0); pointer-events:auto }
.cart-popover .list-group-item{ font-size:.9rem }
.cart-popover .cp-footer{ padding:.75rem; border-top:1px solid #eef2f7; background:#fafafa; border-bottom-left-radius:14px; border-bottom-right-radius:14px }

/* === Kategori sekmeleri - modern === */
.cat-tabs{ display:flex; gap:.6rem; overflow:auto; padding-bottom:.25rem }
.cat-tab{
  border:1px solid #e3e8ef; background:#fff; color:#0f172a;
  padding:.6rem 1rem; border-radius:999px; font-weight:700;
  text-transform:uppercase; letter-spacing:.02em;
  font-family:'Montserrat',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  white-space:nowrap; transition:transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
  box-shadow:0 2px 6px rgba(15,23,42,.04);
}
.cat-tab i{ margin-right:.45rem }
.cat-tab:hover{ background:#f8fafc; color:#0f172a; transform:translateY(-1px) }
.cat-tab.active{
  background:linear-gradient(135deg,#22c55e,#16a34a); color:#fff; border-color:transparent;
  box-shadow:0 8px 18px rgba(22,163,74,.25);
}

/* ========== Kullanıcı menüsü ========== */
.user-menu{ position:relative; z-index:1500; }
.user-btn{
  width:38px; height:38px; border-radius:999px; cursor:pointer;
  border:1px solid #e2e8f0; background:#fff; color:#0f172a;
  display:grid; place-items:center; box-shadow:0 4px 10px rgba(15,23,42,.12);
}
.user-popover{
  position:absolute; right:0; top:calc(100% + 8px); min-width:220px;
  background:#fff; border:1px solid #e2e8f0; border-radius:12px;
  box-shadow:0 18px 36px rgba(15,23,42,.18);
  display:none; z-index:2000; overflow:hidden;
}
.user-menu.open .user-popover{ display:block; }
.user-popover .dropdown-item{
  display:flex; gap:.55rem; padding:.6rem .9rem; color:#0f172a; text-decoration:none
}
.user-popover .dropdown-item:hover{ background:#f8fafc }

/* ========== Gezen sepet (FAB) ========== */
.floating-cart{ position:fixed; right:18px; bottom:18px; z-index:1080 }
.floating-cart .fab{
  width:56px; height:56px; border-radius:50%; border:0;
  display:grid; place-items:center; color:#fff; background:var(--brand);
  box-shadow:0 10px 24px rgba(22,163,74,.35); position:relative;
}
.floating-cart .fab .badge{
  position:absolute; top:-4px; right:-4px; background:#0f172a; color:#fff;
  border-radius:999px; padding:0 .35rem; font-size:.75rem;
}
.floating-cart .panel{
  position:absolute; right:0; bottom:70px; width:360px; max-height:60vh; overflow:auto;
  background:#fff; border:1px solid #e6ecf3; border-radius:14px; display:none;
}
.floating-cart.open .panel{ display:block; }
.floating-cart .panel-header{ padding:.65rem .8rem; border-bottom:1px solid #eef2f7; background:#fafafa }
.floating-cart .panel-body{ padding:.4rem }

/* Sepet paneli: footer default gizli, ürün varsa görünür */
.floating-cart .panel-footer{ display:none !important; }
.floating-cart.has-items .panel-footer{ display:flex !important; }

/* === KATEGORİ RAYI (modern) === */
.cat-rail-wrap{
  display:grid; grid-template-columns: 42px 1fr 42px; align-items:center; gap:.5rem;
}
.rail-arrow{
  height:42px; width:42px; border-radius:12px; border:1px solid #e5e9f2; background:#fff;
  display:grid; place-items:center; box-shadow:0 6px 14px rgba(15,23,42,.08);
  cursor:pointer; transition:transform .12s ease,opacity .12s ease, background .12s ease;
}
.rail-arrow:disabled{ opacity:.35; pointer-events:none }
.rail-arrow:hover{ transform:translateY(-1px); background:#f8fafc }

.cat-rail{
  display:flex; gap:.8rem; overflow:auto; padding:.25rem; scroll-snap-type:x proximity;
  -ms-overflow-style: none; scrollbar-width: none;
}
.cat-rail::-webkit-scrollbar{ display:none }

.cat-tile{
  position:relative; scroll-snap-align:start;
  display:inline-flex; align-items:center; gap:.7rem;
  padding:.8rem 1rem; border-radius:16px; border:2px solid transparent;
  background: linear-gradient(#fff,#fff) padding-box,
              linear-gradient(120deg,#e2e8f0,#f1f5f9) border-box;
  box-shadow:0 8px 20px rgba(15,23,42,.07);
  font-weight:800; text-transform:uppercase; letter-spacing:.02em; color:#0f172a;
  user-select:none; cursor:pointer; transition:transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.cat-tile:hover{ transform:translateY(-1px); box-shadow:0 14px 28px rgba(15,23,42,.12) }
.cat-tile.active{
  background: linear-gradient(#fff,#fff) padding-box,
              linear-gradient(135deg,#22c55e,#16a34a) border-box;
  box-shadow:0 18px 38px rgba(22,163,74,.28);
}
.cat-tile .tile-ico{
  width:38px; height:38px; border-radius:999px; display:grid; place-items:center;
  background:#f1f5f9; font-size:18px; color:#0f172a;
}
.cat-tile.active .tile-ico{ background:rgba(22,163,74,.12); color:#16a34a }
.cat-tile .tile-title{ white-space:nowrap }
.cat-tile .tile-count{
  margin-left:.25rem; font-size:.75rem; line-height:1; padding:.25rem .45rem;
  border-radius:999px; background:#f1f5f9; color:#475569; font-weight:700;
}
.cat-tile.active .tile-count{ background:rgba(22,163,74,.12); color:#16a34a }

/* Küçük ekranlarda taşma olursa tile'lar küçülür */
@media (max-width: 420px){
  .cat-tile{ padding:.65rem .8rem; gap:.55rem }
  .cat-tile .tile-ico{ width:34px; height:34px; font-size:16px }
}

/* === BAĞIŞ GRIDİ: CSS Grid ile 3 sütun (md ve üstü) === */
#donationGrid.don-grid{
  display:grid;
  grid-template-columns: 1fr;         /* mobil: 1 sütun */
  gap: 1.25rem;                        /* kartlar arası boşluk */
}
@media (min-width: 768px){
  #donationGrid.don-grid{
    grid-template-columns: repeat(3, 1fr); /* md ve üstü: 3 sütun */
  }
}

/* Grid item’ı kartı esnetsin (eşit yükseklik için) */
#donationGrid.don-grid .don-item{ display:flex; }
#donationGrid.don-grid .don-item .don-card{
  display:flex; flex-direction:column; width:100%; height:100%;
}

/* Kart kutusu (zaten vardı; tekrar koyuyorum ki net olsun) */
.don-card .don-box{
  display:flex; flex-direction:column; height:100%;
  min-height:480px;                   /* hepsi aynı taban yüksekliği */
  border-radius:18px; background:#fff;
  border:1px solid #eef2f7; box-shadow:0 8px 22px rgba(15,23,42,.06);
}

/* Görsel alanı sabit; resim yoksa da aynı yükseklik */
.don-card .don-media{
  width:100%; aspect-ratio:16/9; overflow:hidden;
  border-radius:16px; margin-bottom:.75rem; background:#f6f7fa;
}
.don-card .don-media img{ 
  width:100%; 
  height:100%; 
  object-fit:contain;  /* Görsel tam görünsün, kesilmesin */
  display:block; 
}
@supports not (aspect-ratio: 16 / 9){
  .don-card .don-media{ position:relative; padding-top:56.25%; }
  .don-card .don-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
}
@supports not (aspect-ratio: 16 / 9){
  .don-card .don-media{ position:relative; padding-top:56.25%; }
  .don-card .don-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
}

/* Başlık + açıklama sabit, butonlar her zaman altta */
.don-card .don-title{
  font-weight:800; line-height:1.25; font-size:1.15rem;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  min-height: calc(1.25em * 2); margin-bottom:.3rem;
  text-overflow: ellipsis;
}
.don-card .don-desc{
  color:#475569;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
  min-height: calc(1em * 3 + .4rem); margin-bottom:.75rem;
}
.don-card .don-controls{ margin-top:auto; }
.don-card .don-controls .input-group{ max-width:520px; }


/* Buton/inputs daima altta */
.don-card .don-controls{ margin-top:auto; }
.don-card .don-controls .input-group{ max-width:520px; }

/* Bağış grid: md'de 2, lg'de 3 sütun */
#donationGrid.don-grid{
  display:grid;
  grid-template-columns: 1fr;            /* mobil: 1 */
  gap: 1.25rem;
}
@media (min-width: 768px){
  #donationGrid.don-grid{ grid-template-columns: repeat(2,1fr); }
}
@media (min-width: 992px){
  #donationGrid.don-grid{ grid-template-columns: repeat(3,1fr); }  /* 3 sütun */
}

/* Grid item kartı esnetsin (eşit yükseklik) */
#donationGrid.don-grid .don-item{ display:flex; }
#donationGrid.don-grid .don-item .don-card{
  display:flex; flex-direction:column; width:100%; height:100%;
}

/* (Daha önce verdiğim don-box / don-media / don-desc / don-controls kuralları aynen durabilir) */

/* Bağış başlığını ortala (tüm kartlar) */
.don-card .don-title{
  display:flex;                 /* min-height varken dikeyde de hizalı dursun */
  align-items:center;
  justify-content:center;       /* yatay merkez */
  text-align:center;            /* çok satırda merkez */
}


/* ---------- Bağış kartı: çerçeve + hover gölge ---------- */
.don-card .don-box{
  display:flex; flex-direction:column; height:100%;
  /* mevcut min-height’inizi koruyun/istenirse artırın */
  min-height: 520px;                              /* açıklama + butonlara yer */
  border:1px solid #e9eef6;
  border-radius:20px;
  background:#fff;
  box-shadow:0 8px 26px rgba(15,23,42,.06);
  transition: box-shadow .2s ease, transform .2s ease;
}
.don-card .don-box:hover{
  box-shadow:0 20px 40px rgba(15,23,42,.12);
  transform: translateY(-2px);
}

/* Görsel kenarlarını biraz daha yumuşat */
.don-card .don-media{ border-radius:16px; overflow:hidden; }
.don-card .don-media img{ display:block; width:100%; height:100%; object-fit:cover; }

/* === Bağış kartı: kompakt kontrol alanı ve butonlar === */

/* Kartın genel yüksekliği */
.don-card .don-box{
  display:flex; flex-direction:column; height:100%;
  min-height: 520px;
  border:1px solid #e9eef6;
  border-radius:20px;
  background:#fff;
  box-shadow:0 8px 26px rgba(15,23,42,.06);
  transition: box-shadow .2s ease, transform .2s ease;
  padding-bottom: 0;
}
.don-card .don-box:hover{
  box-shadow:0 20px 40px rgba(15,23,42,.12);
  transform: translateY(-2px);
}


/* TL – Tutar – Adet satırı: kompakt ve küçük */
.don-card .don-controls .input-group{
  max-width:520px;
  margin-bottom:.55rem;                 /* hemen altında butonlar */
}
.don-card .don-controls .input-group .input-group-text,
.don-card .don-controls .input-group .form-control{
  height:42px;                          /* daha kompakt */
  font-size:.95rem;
}

/* Butonları küçült, eşit genişlik, altta hizalı */
.don-card .don-controls .d-flex{ gap:.55rem; }
.don-card .don-controls .d-flex > .btn{
  flex:1;                               /* iki buton eşit genişlikte */
  padding:.65rem .8rem;                 /* küçük/orta boy */
  font-size:.95rem;
  line-height:1.1;
  border-radius:12px;
}

/* Biraz yumuşak gölge (hover büyüme yok) */
.don-card .btn-primary{
  box-shadow:0 4px 12px rgba(25,118,210,.22);
}
.don-card .btn-primary:hover{
  box-shadow:0 6px 16px rgba(25,118,210,.28);
  transform: none !important;
}
.don-card .btn-outline-primary{ border-width:2px; }
.don-card .btn-outline-primary:hover{ 
  background:#eef4ff; 
  transform: none !important;
}

.don-card .don-desc{
  color:#475569;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
  min-height: calc(1em * 3 + .4rem); margin-bottom:.75rem;
  text-overflow: ellipsis;
}
.don-card .don-controls{ margin-top:auto; }
.don-card .don-controls .input-group{ max-width:520px; }

/* Buton/inputs daima altta */
.don-card .don-body{
  display:flex; flex-direction:column; flex:1;
  padding: 1rem 1rem .25rem;
}

/* Kontroller her zaman en altta */
.don-card .don-controls{
  margin-top:auto;
  padding-bottom: 0;
}
.don-card .don-controls .d-flex{ margin-bottom:0; gap:.55rem; }
.don-card .don-controls .btn{ margin-bottom:0; }

/* TL – Tutar – Adet satırı: kompakt */
.don-card .don-controls .input-group{
  max-width:520px;
  margin-bottom:.55rem;
}
.don-card .don-controls .input-group .input-group-text,
.don-card .don-controls .input-group .form-control{
  height:42px;
  font-size:.95rem;
}

/* Butonları küçült, eşit genişlik */
.don-card .don-controls .d-flex > .btn{
  flex:1;
  padding:.65rem .8rem;
  font-size:.95rem;
  line-height:1.1;
  border-radius:12px;
}

/* --- Kartın dibindeki boşluğu kaldır --- */
.don-card .don-box{
  display:flex; flex-direction:column; height:100%;
  padding-bottom: 0;                 /* kutunun alt pedi yok */
}

.don-card .don-body{
  display:flex; flex-direction:column; flex:1;
  padding: 1rem 1rem .25rem;         /* alt pedi minimuma indir */
}

/* Kontroller her zaman en altta ve altında boşluk olmasın */
.don-card .don-controls{
  margin-top:auto;                   /* aşağı it */
  padding-bottom: 0;
}
.don-card .don-controls .d-flex{ margin-bottom:0; }
.don-card .don-controls .btn{ margin-bottom:0; }

/* Eğer başka yerden pb-* (padding-bottom) geliyorsa ezmek için: */
:root{ --don-bottom-gap: .6rem; }   /* istersen .4rem / 6px yapabilirsin */

.don-card .don-controls{
  padding-bottom: var(--don-bottom-gap) !important;
}

/* Modal form: form-floating içinde etiket net görünsün */
.modal .form-floating > label { color:#64748b; }
.modal .form-floating > .form-control,
.modal .form-floating > .form-select { padding-top: 1.125rem; padding-bottom: .5rem; }

/* Bağış özeti şeridi (modal içinde) */
#donorModal .alert-light{
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(15,23,42,.06);
}

/* Swiper scrollbar'larını tamamen gizle */
.swiper-scrollbar,
.swiper-scrollbar-horizontal,
.swiper-scrollbar-vertical {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Profil menüsünü ikonun altına, ortaya hizala */
.profile-wrap { position: relative; }

.profile-wrap .dropdown-menu{
  left: 50% !important;         /* orta hizalama */
  right: auto !important;
  transform: translate(-50%, 6px);  /* hafif aşağı animasyon başlangıcı */
  margin-top: 0;                    /* ikon ile menü arasında GAP olmasın */
}

/* Tıklama ile açılma (.show class'ı ile) */
.profile-wrap .dropdown-menu.show {
  display: block;
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

/* === Header/dropdown üstte kalsın, taşma kapatma olmasın === */
.site-header,
.navbar {
  position: relative;
  z-index: 1000;           /* header katmanı */
  overflow: visible !important;
}

.topbar {
  position: relative;
  z-index: 1000;
}

/* profil kapsayıcısı ve menü */
.profile-wrap { 
  position: relative; 
  z-index: 1150 !important; 
}

.profile-wrap .dropdown-menu.profile-menu{
  display: none;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 8px);
  transition: opacity .18s ease, transform .18s ease;
  left: 50% !important;
  right: auto !important;
  top: calc(100% + 8px);
  min-width: 220px;
  z-index: 1160 !important;
  pointer-events: none;
}

/* Tıklama ile açılma (.show class'ı ile) - hem mobil hem desktop */
.profile-wrap .dropdown-menu.profile-menu.show {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: translate(-50%, 0) !important;
  pointer-events: auto !important;
}

/* varsayılan list-style ve olası ::before/::marker noktalarını kaldır */
.site-header .navbar-nav,
.site-header .navbar-nav * { list-style: none !important; }
.site-header .navbar-nav > li::marker,
.site-header .navbar-nav > li::before,
.site-header .navbar-nav > li::after,
.profile-wrap::before,
.profile-trigger::before,
.profile-trigger::after { content: none !important; display: none !important; }

/* === Avatar Tasarımı === */
:root{
  --brand: #189a6b;           /* tema yeşilin */
  --brand-ink: #0e2a3a;       /* koyu lacivert */
  --avatar-bg: #0f1a27;       /* header zeminine uyumlu koyu */
  --avatar-ring: rgba(255,255,255,.12);
}

.avatar{
  width: 36px; height: 36px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--avatar-bg);
  color: #d8e3ea;
  border: 1px solid var(--avatar-ring);
  box-shadow: 0 2px 8px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.04);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.avatar:hover{
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0,0,0,.32), inset 0 0 0 1px rgba(255,255,255,.06);
}

/* girişli baş-harfli avatar */
.avatar--user{
  background: linear-gradient(180deg, rgba(24,154,107,.18), rgba(24,154,107,.05)) var(--avatar-bg);
  color: #fff;
  font-weight: 700;
  letter-spacing: .5px;
  font-size: 0.95rem;
}

/* girişsiz ikonda svg rengi */
.avatar--anon{
  color: #d7dee7;  /* ikon çizgisi */
}
.avatar--anon svg{ display:block; }

/* küçük ekranlarda menü kırpılmasın */
.navbar,
.navbar > .container,
.navbar > .container-fluid { overflow: visible !important; }

:root { --header-h: 0px; }

/* Header modalin üstüne çıkmasın */
.modal           { z-index: 1200; }
.modal-backdrop  { z-index: 1190; }
/* Header/topbar varsa, modalın altına düşmesin diye header z-index'i bundan küçük olmalı */
.navbar, header, .site-header, .topbar { z-index: 1000; }

/* Modalı header yüksekliği kadar aşağıdan başlat */
.modal.show .modal-dialog {
  margin-top: calc(var(--header-h) + 1rem) !important;
}

/* SLIDER boyutları */
.home-hero { margin-bottom: 1.5rem; position: relative; }
.home-hero .carousel-item img { width:100%; height:550px; object-fit:cover; }
@media (max-width: 992px){ .home-hero .carousel-item img{ height:450px; } }
@media (max-width: 576px){ .home-hero .carousel-item img{ height:320px; } }

/* Slider sol sosyal ikonlar */
.slider-socials{
  position:absolute; left:8px; top:50%; transform:translateY(-50%);
  display:flex; flex-direction:column; gap:12px; z-index:2;
}
.slider-socials a{
  width:36px; height:36px; border-radius:50%;
  background: var(--accent, #fff); opacity:.22; transition:opacity .2s, transform .2s;
  mask-size: 60% 60%; mask-position:center; mask-repeat:no-repeat;
  -webkit-mask-size: 60% 60%; -webkit-mask-position:center; -webkit-mask-repeat:no-repeat;
}
.slider-socials a:hover{ opacity:.9; transform:scale(1.04); }
.ss-instagram{ mask-image:url('/static/icons/instagram.svg'); -webkit-mask-image:url('/static/icons/instagram.svg'); }
.ss-facebook { mask-image:url('/static/icons/facebook.svg');  -webkit-mask-image:url('/static/icons/facebook.svg'); }
.ss-youtube  { mask-image:url('/static/icons/youtube.svg');   -webkit-mask-image:url('/static/icons/youtube.svg'); }

/* 3 blok görsellere maksimum yükseklik */
.home-sections .card-img-top{ object-fit:cover; max-height:220px; }

/* Slider sol sosyal ikonlar */
.slider-socials{
  position:absolute; left:8px; top:50%; transform:translateY(-50%);
  display:flex; flex-direction:column; gap:12px; z-index:2;
}
.slider-socials a{
  width:36px; height:36px; border-radius:50%;
  background: var(--accent, #fff); opacity:.22; transition:opacity .2s, transform .2s;
  mask-size: 60% 60%; mask-position:center; mask-repeat:no-repeat;
  -webkit-mask-size: 60% 60%; -webkit-mask-position:center; -webkit-mask-repeat:no-repeat;
}
.slider-socials a:hover{ opacity:.9; transform:scale(1.04); }
.ss-instagram{ mask-image:url('/static/icons/instagram.svg'); -webkit-mask-image:url('/static/icons/instagram.svg'); }
.ss-facebook { mask-image:url('/static/icons/facebook.svg');  -webkit-mask-image:url('/static/icons/facebook.svg'); }
.ss-youtube  { mask-image:url('/static/icons/youtube.svg');   -webkit-mask-image:url('/static/icons/youtube.svg'); }

/* 3 blok görselleri */
.home-sections .card-img-top{ object-fit:cover; max-height:220px; }


/* === Floating Cart === */
.floating-cart {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1000;
}

.floating-cart .fab {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  border: none;
  box-shadow: 0 4px 12px rgba(22, 163, 74, 0.4);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: all 0.3s ease;
}

.floating-cart .fab:hover {
  background: var(--brand-dark);
  transform: scale(1.05);
}

.floating-cart .fab i {
  font-size: 24px;
}

.floating-cart .fab .badge {
  position: absolute;
  top: -5px;
  right: -5px;
  background: #dc3545;
  color: #fff;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  border: 2px solid #fff;
}

.floating-cart .panel {
  position: absolute;
  bottom: 70px;
  right: 0;
  width: 380px;
  max-width: calc(100vw - 40px);
  background: #fff;
  border-radius: 12px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.3s ease;
  max-height: 500px;
  display: flex;
  flex-direction: column;
}

.floating-cart.open .panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.floating-cart .panel-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #e5e7eb;
  font-weight: 600;
}

.floating-cart .panel-body {
  flex: 1;
  overflow-y: auto;
  max-height: 300px;
}

.floating-cart .panel-footer {
  border-top: 1px solid #e5e7eb;
  padding: 1rem 1.25rem;
  background: #f9fafb;
  border-radius: 0 0 12px 12px;
}

@media (max-width: 576px) {
  .floating-cart {
    bottom: 15px;
    right: 15px;
  }
  
  .floating-cart .fab {
    width: 56px;
    height: 56px;
  }
  
  .floating-cart .panel {
    width: calc(100vw - 30px);
  }
}

/* === Profile Menu === */
.profile-wrap {
  list-style: none;
  position: relative;
}

.profile-trigger {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.5rem;
  border-radius: 8px;
  transition: background 0.2s;
  cursor: pointer;
  text-decoration: none;
}

.profile-trigger:hover {
  background: rgba(255, 255, 255, 0.1);
}

.avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.875rem;
  transition: all 0.2s;
}

.avatar--user {
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
  color: #fff;
  box-shadow: 0 2px 8px rgba(22, 163, 74, 0.3);
}

.avatar--anon {
  background: #e5e7eb;
  color: #6b7280;
}

.avatar:hover {
  transform: scale(1.05);
}

.profile-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 0.5rem;
  min-width: 200px;
  max-width: 200px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
  border: 1px solid #e5e7eb;
  padding: 0.5rem 0;
  z-index: 1100;
  display: none;
  overflow: hidden;
}

/* Tıklama ile açılma - .show class'ı ile */
.profile-menu.show {
  display: block;
}

.profile-menu .dropdown-header {
  padding: 0.75rem 1rem;
  font-weight: 600;
  color: #111827;
  font-size: 0.875rem;
  border-bottom: 1px solid #f3f4f6;
}

.profile-menu .dropdown-item {
  padding: 0.625rem 1rem;
  color: #4b5563;
  text-decoration: none;
  display: block;
  transition: all 0.2s;
  font-size: 0.875rem;
}

.profile-menu .dropdown-item:hover {
  background: #f9fafb;
  color: var(--brand);
}

.profile-menu .dropdown-divider {
  margin: 0.5rem 0;
}

/* === WhatsApp Floating Button === */
.whatsapp-float {
  position: fixed;
  bottom: 90px;
  right: 20px;
  width: 56px;
  height: 56px;
  background: #25d366;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4);
  z-index: 999;
  transition: all 0.3s ease;
  text-decoration: none;
}

.whatsapp-float:hover {
  background: #20ba5a;
  transform: scale(1.05);
  color: #fff;
}

/* === Donation Float Button (Sağ kenar) === */
.donation-float {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: #fff;
  padding: 12px 8px;
  border-radius: 12px 0 0 12px;
  box-shadow: -2px 0 12px rgba(22, 163, 74, 0.4);
  z-index: 998;
  text-decoration: none;
  transition: all 0.3s ease;
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

.donation-float:hover {
  background: linear-gradient(135deg, #16a34a, #15803d);
  color: #fff;
  padding-left: 12px;
}

.donation-float-text {
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 2px;
  font-family: 'Montserrat', sans-serif;
}

/* === Topbar Dropdown Cart === */
.cart-topbar {
  position: relative;
}

.cart-dropdown {
  min-width: 380px;
  max-width: 90vw;
  border: 1px solid #e5e7eb;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  border-radius: 12px;
  overflow: hidden;
}

.cart-dropdown-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #e5e7eb;
  background: #f9fafb;
}

.cart-dropdown-body {
  max-height: 400px;
  overflow-y: auto;
}

.cart-dropdown-items {
  padding: 0.5rem;
}

.cart-dropdown-item {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 0.75rem;
  margin-bottom: 0.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
}

.cart-dropdown-item .item-left {
  flex: 1;
  min-width: 0;
}

.cart-dropdown-item .item-title {
  font-weight: 600;
  font-size: 0.875rem;
  margin-bottom: 0.25rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cart-dropdown-item .item-price {
  font-size: 0.75rem;
  color: #6b7280;
}

.cart-dropdown-item .item-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.cart-dropdown-item .btn-qty {
  width: 28px;
  height: 28px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.cart-dropdown-item .qty-display {
  min-width: 32px;
  text-align: center;
  font-weight: 600;
  font-size: 0.875rem;
}

.cart-dropdown-item .btn-remove {
  width: 28px;
  height: 28px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cart-dropdown-item .item-total {
  font-weight: 700;
  font-size: 0.875rem;
  color: #16a34a;
  min-width: 70px;
  text-align: right;
}

.cart-dropdown-footer {
  padding: 1rem 1.25rem;
  border-top: 1px solid #e5e7eb;
  background: #f9fafb;
}

.cart-dropdown-footer .total {
  margin-bottom: 0.75rem;
  font-size: 1.125rem;
}

.cart-dropdown-footer .actions {
  display: flex;
  gap: 0.5rem;
}

.cart-dropdown-footer .actions > * {
  flex: 1;
}

.badge-cart {
  position: absolute;
  top: -6px;
  right: -6px;
  background: #dc3545;
  color: #fff;
  border-radius: 10px;
  padding: 2px 6px;
  font-size: 11px;
  font-weight: 600;
  min-width: 20px;
  text-align: center;
}

/* === RESPONSIVE: MOBILE FIRST === */

/* Topbar mobil düzenlemeler */
@media (max-width: 991px) {
  .topbar .container {
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  
  .topbar .contact-pill {
    font-size: 0.75rem;
    padding: 0.2rem 0.5rem;
  }
  
  .topbar .contact-pill i {
    font-size: 0.85rem;
  }
}

@media (max-width: 576px) {
  .topbar {
    font-size: 0.75rem;
  }
  
  .topbar .container {
    padding: 0.5rem 0.75rem;
  }
  
  .topbar .contact-pill {
    font-size: 0.7rem;
    padding: 0.15rem 0.4rem;
    gap: 0.25rem;
  }
  
  .topbar .contact-pill i {
    font-size: 0.75rem;
  }
  
  /* Mobilde sadece telefon numarasını göster */
  .topbar .contact-pill span {
    display: none;
  }
  
  .topbar .contact-pill i {
    margin: 0;
  }
  
  /* Logo küçük mobilde daha küçük */
  .navbar-logo {
    height: 36px !important;
    width: 110px !important;
  }
}

/* Navbar mobil */
@media (max-width: 991px) {
  .navbar-logo {
    height: 42px !important;
    width: 130px !important;
  }
  
  .navbar-collapse {
    margin-top: 1rem;
  }
  
  .navbar .navbar-nav .nav-link {
    padding: 0.65rem 1rem;
    margin: 0.25rem 0;
  }
  
  .navbar .dropdown-menu {
    border: 1px solid #e5e7eb;
    margin-top: 0.5rem;
  }
  
  .btn-pill {
    width: 100%;
    text-align: center;
  }
}

/* Hero slider mobil */
@media (max-width: 768px) {
  .hero-slider {
    border-radius: 1rem;
  }
  
  .hero-slider .carousel,
  .hero-slider .carousel-inner {
    border-radius: 1rem;
  }
  
  .slider-socials {
    left: 4px;
    gap: 8px;
  }
  
  .slider-socials a {
    width: 32px;
    height: 32px;
  }
  
  .slider-socials img {
    width: 18px;
    height: 18px;
  }
}

@media (max-width: 576px) {
  .hero-slider {
    border-radius: 0.75rem;
    margin-bottom: 1rem;
  }
  
  .slider-socials {
    display: none; /* Çok küçük ekranlarda sosyal ikonları gizle */
  }
}

/* Ana sayfa kartları mobil */
@media (max-width: 768px) {
  .home-sections .card {
    margin-bottom: 1rem;
  }
  
  .home-sections .card-img-top {
    max-height: 180px;
  }
  
  .home-sections .card-body {
    padding: 1rem;
  }
  
  .home-sections .card-title {
    font-size: 1.1rem;
  }
}

/* Bağış sayfası mobil */
@media (max-width: 991px) {
  .cat-rail-wrap {
    grid-template-columns: 36px 1fr 36px;
    gap: 0.35rem;
  }
  
  .rail-arrow {
    width: 36px;
    height: 36px;
    font-size: 14px;
  }
  
  .cat-tile {
    padding: 0.6rem 0.8rem;
    gap: 0.5rem;
  }
  
  .cat-tile .tile-ico {
    width: 32px;
    height: 32px;
    font-size: 16px;
  }
  
  .cat-tile .tile-title {
    font-size: 0.85rem;
  }
  
  .cat-tile .tile-count {
    font-size: 0.7rem;
    padding: 0.2rem 0.35rem;
  }
}

@media (max-width: 768px) {
  #donationGrid.don-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .don-card .don-box {
    min-height: 460px;
  }
  
  .don-card .don-title {
    font-size: 1rem;
  }
  
  .don-card .don-desc {
    font-size: 0.875rem;
  }
  
  .don-card .don-controls .input-group {
    flex-wrap: nowrap;
  }
  
  .don-card .don-controls .input-group-text,
  .don-card .don-controls .input-group .form-control {
    height: 38px;
    font-size: 0.875rem;
  }
  
  .don-card .don-controls .d-flex > .btn {
    padding: 0.55rem 0.7rem;
    font-size: 0.875rem;
  }
}

@media (max-width: 576px) {
  .cat-rail-wrap {
    grid-template-columns: 32px 1fr 32px;
  }
  
  .rail-arrow {
    width: 32px;
    height: 32px;
    font-size: 12px;
  }
  
  .cat-tile {
    padding: 0.5rem 0.65rem;
    gap: 0.4rem;
  }
  
  .cat-tile .tile-ico {
    width: 28px;
    height: 28px;
    font-size: 14px;
  }
  
  .cat-tile .tile-title {
    font-size: 0.75rem;
  }
  
  .don-card .don-box {
    min-height: 440px;
  }
  
  .don-card .don-media {
    margin-bottom: 0.5rem;
  }
  
  .don-card .don-title {
    font-size: 0.95rem;
    margin-bottom: 0.25rem;
  }
  
  .don-card .don-desc {
    font-size: 0.8rem;
    margin-bottom: 0.5rem;
  }
  
  .don-card .don-controls .input-group {
    margin-bottom: 0.4rem;
  }
  
  .don-card .don-controls .input-group-text,
  .don-card .don-controls .input-group .form-control {
    height: 36px;
    font-size: 0.8rem;
  }
  
  .don-card .don-controls .d-flex {
    gap: 0.4rem;
  }
  
  .don-card .don-controls .d-flex > .btn {
    padding: 0.5rem 0.6rem;
    font-size: 0.8rem;
    border-radius: 10px;
  }
}

/* Floating butonlar mobil */
@media (max-width: 768px) {
  .whatsapp-float {
    width: 52px;
    height: 52px;
    font-size: 26px;
    bottom: 80px;
    right: 15px;
  }
  
  .donation-float {
    padding: 10px 6px;
  }
  
  .donation-float-text {
    font-size: 12px;
    letter-spacing: 1.5px;
  }
}

@media (max-width: 576px) {
  .whatsapp-float {
    width: 48px;
    height: 48px;
    font-size: 24px;
    bottom: 75px;
    right: 12px;
  }
  
  .donation-float {
    padding: 8px 5px;
  }
  
  .donation-float-text {
    font-size: 11px;
    letter-spacing: 1px;
  }
}

/* Footer mobil */
@media (max-width: 768px) {
  footer.site-footer .container {
    padding: 2rem 1rem;
  }
  
  footer.site-footer .row {
    gap: 2rem;
  }
  
  footer.site-footer h6 {
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
  }
  
  footer.site-footer .footer-links {
    font-size: 0.875rem;
  }
  
  footer.site-footer .contact-pill {
    font-size: 0.85rem;
    padding: 0.3rem 0.7rem;
  }
}

@media (max-width: 576px) {
  footer.site-footer .container {
    padding: 1.5rem 0.75rem;
  }
  
  footer.site-footer h6 {
    font-size: 0.85rem;
  }
  
  footer.site-footer .footer-links {
    font-size: 0.8rem;
  }
  
  footer.site-footer .small {
    font-size: 0.75rem;
  }
}

/* Modal mobil */
@media (max-width: 768px) {
  .modal-dialog {
    margin: 0.5rem;
  }
  
  .modal-content {
    border-radius: 12px;
  }
  
  .modal-header {
    padding: 1rem;
  }
  
  .modal-body {
    padding: 1rem;
  }
  
  .modal-footer {
    padding: 0.75rem 1rem;
  }
  
  .modal-title {
    font-size: 1.1rem;
  }
  
  .form-floating > label {
    font-size: 0.875rem;
  }
  
  .form-floating > .form-control,
  .form-floating > .form-select {
    font-size: 0.875rem;
  }
}

@media (max-width: 576px) {
  .modal-dialog {
    margin: 0.25rem;
  }
  
  .modal-header {
    padding: 0.75rem;
  }
  
  .modal-body {
    padding: 0.75rem;
  }
  
  .modal-footer {
    padding: 0.65rem 0.75rem;
    flex-direction: column;
    gap: 0.5rem;
  }
  
  .modal-footer .btn {
    width: 100%;
  }
  
  .modal-title {
    font-size: 1rem;
  }
}

/* Sticky sidebar mobil */
@media (max-width: 991px) {
  #pageCart {
    position: static !important;
    margin-top: 2rem;
  }
}

/* Container padding mobil */
@media (max-width: 768px) {
  .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
  main.py-4 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }
}

@media (max-width: 576px) {
  .container {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  
  main.py-4 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }
}

/* Genel buton mobil */
@media (max-width: 576px) {
  .btn {
    font-size: 0.875rem;
    padding: 0.5rem 0.75rem;
  }
  
  .btn-sm {
    font-size: 0.8rem;
    padding: 0.35rem 0.6rem;
  }
  
  .btn-lg {
    font-size: 1rem;
    padding: 0.65rem 1rem;
  }
}

/* Kart responsive */
@media (max-width: 768px) {
  .card {
    border-radius: 0.875rem;
  }
  
  .card-body {
    padding: 1rem;
  }
  
  .card-title {
    font-size: 1.1rem;
  }
}

@media (max-width: 576px) {
  .card {
    border-radius: 0.75rem;
  }
  
  .card-body {
    padding: 0.875rem;
  }
  
  .card-title {
    font-size: 1rem;
  }
}

/* Avatar mobil */
@media (max-width: 576px) {
  .avatar {
    width: 32px;
    height: 32px;
    font-size: 0.85rem;
  }
  
  .avatar--cart {
    width: 34px;
    height: 34px;
  }
  
  .badge-cart {
    top: -4px;
    right: -4px;
    font-size: 10px;
    padding: 1px 4px;
    min-width: 18px;
  }
}


/* === CART TOPBAR (üst bar sepet) === */
.cart-topbar {
  position: relative;
  display: inline-flex;
  z-index: 1150 !important;
  transition: z-index 0.3s ease;
}

#cartTopbarWrapper {
  position: relative;
  z-index: 1150 !important;
  transition: z-index 0.3s ease;
}

/* Scroll yapıldığında sepet dropdown z-index'i düşür */
body.scrolled .cart-topbar,
body.scrolled #cartTopbarWrapper {
  z-index: 900 !important;
}

body.scrolled .cart-dropdown {
  z-index: 910 !important;
}

/* Bağış sayfasında sepet dropdown'ı devre dışı bırak */
body.page-bagis .cart-topbar .dropdown-menu {
  display: none !important;
}

body.page-bagis .cart-btn {
  cursor: pointer;
}

body.page-bagis .cart-btn:hover {
  opacity: 0.8;
}

.cart-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #0f172a;
  border: 2px solid #1e293b;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  transition: all 0.3s ease;
  font-size: 16px;
}

.cart-btn:hover {
  background: #1e293b;
  transform: scale(1.05);
  border-color: #334155;
}

.cart-btn:focus,
.cart-btn:active {
  outline: none !important;
  box-shadow: none !important;
  border-color: #334155 !important;
}

.cart-btn:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* Mobil sepet butonu (link) */
.cart-btn-mobile {
  text-decoration: none;
}

.cart-btn-mobile:hover {
  color: #fff;
  text-decoration: none;
}

.cart-btn .badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #16a34a;
  color: #fff;
  border-radius: 999px;
  padding: 2px 5px;
  font-size: 10px;
  font-weight: 700;
  min-width: 18px;
  text-align: center;
}

.cart-dropdown {
  width: 380px;
  background: #fff;
  border-radius: 12px;
  max-height: 500px;
  overflow: hidden;
  border: 0;
  margin-top: 0.5rem;
  padding: 0;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15) !important;
  z-index: 1160 !important;
  position: absolute !important;
}

/* Dropdown içeriği flex yapısı */
.cart-dropdown.show {
  display: block;
}

.cart-topbar {
  position: relative;
  display: inline-flex;
  z-index: 10000;
}

/* Dropdown menu override */
.dropdown-menu.cart-dropdown {
  position: absolute !important;
  inset: 0px auto auto 0px !important;
  transform: translate(-280px, 42px) !important;
}

/* Mobilde sepet dropdown tam genişlik ve ortalanmış */
@media (max-width: 767px) {
  .dropdown-menu.cart-dropdown {
    position: fixed !important;
    top: 60px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: calc(100vw - 20px) !important;
    max-width: 380px !important;
    z-index: 1200 !important;
  }
  
  .cart-dropdown-header .btn-close {
    display: block !important;
  }
  
  /* Mobilde backdrop */
  .cart-dropdown-backdrop.show {
    z-index: 1150 !important;
  }
}

.cart-dropdown-header {
  padding: 1rem;
  border-bottom: 1px solid #e5e7eb;
  background: #f9fafb;
  border-radius: 12px 12px 0 0;
}

.cart-dropdown-body {
  overflow-y: auto;
  max-height: 300px;
}

.cart-dropdown-footer {
  padding: 1rem;
  border-top: 1px solid #e5e7eb;
  border-radius: 0 0 12px 12px;
}

.cart-dropdown-footer .total {
  margin-bottom: 0.75rem;
}

.cart-dropdown-footer .actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.fc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.75rem;
  border-bottom: 1px solid #f1f3f5;
}

.fc-row:last-child {
  border-bottom: 0;
}

.fc-title {
  font-weight: 600;
  font-size: 0.9rem;
}

.fc-sub {
  font-size: 0.78rem;
  color: #6c757d;
}

.fc-remove {
  border: 0;
  background: transparent;
  color: #dc3545;
  font-size: 18px;
  line-height: 1;
  padding: 0 0.25rem;
  cursor: pointer;
}

/* === WHATSAPP FLOAT (sağ alt) === */
.whatsapp-float {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 60px;
  height: 60px;
  background: #25D366;
  border-radius: 50%;
  display: flex !important;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 32px;
  box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4);
  z-index: 999;
  transition: all 0.3s ease;
  text-decoration: none;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  will-change: auto;
}

.whatsapp-float:hover {
  background: #128C7E;
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.6);
  color: #fff;
}

/* === DONATION FLOAT (sağ kenar dikey) === */
.donation-float {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  background: #0f172a;
  color: #fff;
  padding: 1rem 0.5rem;
  border-radius: 12px 0 0 12px;
  box-shadow: -4px 0 12px rgba(15, 23, 42, 0.3);
  z-index: 998;
  text-decoration: none;
  transition: all 0.3s ease;
  writing-mode: vertical-rl;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  will-change: auto;
  text-orientation: mixed;
}

.donation-float:hover {
  background: #1e293b;
  padding-right: 0.75rem;
  color: #fff;
  box-shadow: -6px 0 20px rgba(15, 23, 42, 0.5);
}

.donation-float-text {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

@media (max-width: 768px) {
  /* Mobilde topbar telefon ve WP butonlarını gizle */
  .topbar .contact-pill {
    display: none !important;
  }
  
  /* Mobilde sepet dropdown tam genişlik */
  .cart-dropdown {
    width: calc(100vw - 20px);
    max-width: 380px;
  }
  
  /* Mobilde sepet butonu tıklanabilir link olarak */
  .cart-btn-mobile {
    display: flex !important;
  }
  
  /* Desktop sepet butonu mobilde gizli */
  .cart-topbar .d-none.d-md-flex {
    display: none !important;
  }
  
  /* WhatsApp float butonu mobilde daha küçük ve altta */
  .whatsapp-float {
    width: 50px !important;
    height: 50px !important;
    font-size: 26px !important;
    bottom: 20px !important;
    right: 20px !important;
    z-index: 999 !important;
    display: flex !important;
  }
  
  /* Donation float butonu mobilde de görünsün, tüm sayfalarda */
  .donation-float {
    padding: 0.75rem 0.4rem;
    z-index: 998;
    right: 0;
  }
  
  .donation-float-text {
    font-size: 0.85rem;
    letter-spacing: 0.12em;
  }
  
  /* Mobilde navbar düzgün görünsün */
  .navbar-collapse {
    background: #fff;
    padding: 1rem;
    border-radius: 12px;
    margin-top: 0.5rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  }
  
  /* Mobilde dropdown menüler düzgün açılsın */
  .navbar .dropdown-menu {
    border: 0;
    box-shadow: none;
    padding-left: 1rem;
  }
}


/* === PROFILE ICON (sepet ile uyumlu) === */
.profile-wrap {
  list-style: none;
  margin: 0;
  padding: 0;
}

.profile-trigger {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #0f172a;
  border: 2px solid #1e293b;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  padding: 0;
}

.profile-trigger:hover {
  background: #1e293b;
  transform: scale(1.05);
  border-color: #334155;
}

.profile-trigger .avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
}

.profile-trigger .avatar--user {
  background: #16a34a;
  color: #fff;
}

.profile-trigger .avatar--anon {
  background: transparent;
  color: #fff;
}

.profile-trigger .avatar--anon svg {
  width: 20px;
  height: 20px;
}

.profile-menu {
  margin-top: 0.5rem;
  border: 0;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.15);
  min-width: 200px;
}

.profile-menu .dropdown-header {
  font-weight: 600;
  color: #0f172a;
  padding: 0.75rem 1rem;
}

.profile-menu .dropdown-item {
  padding: 0.6rem 1rem;
  border-radius: 6px;
  margin: 0.25rem 0.5rem;
  transition: background 0.2s ease, color 0.2s ease;
  color: #0f172a;
  overflow: hidden;
  white-space: nowrap;
}

.profile-menu .dropdown-item:hover {
  background: #0f172a !important;
  color: #fff !important;
  box-shadow: none !important;
}

.profile-menu .dropdown-item:active {
  background: #1e293b !important;
  color: #fff !important;
}

/* Bağış yap sayfasında sağ kenar butonu gizle */
body.page-bagis .donation-float,
body.page-donation .donation-float {
  display: none !important;
}

/* === SOSYAL MEDYA FLOAT (sol kenar) === */
.social-float-left {
  position: fixed;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 997;
  padding: 8px 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  will-change: auto;
}

.social-icon-float {
  width: 48px;
  height: 48px;
  border-radius: 0 12px 12px 0;
  background: var(--accent, #fff);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  box-shadow: 2px 0 12px rgba(0, 0, 0, 0.15);
  text-decoration: none;
  transition: all 0.3s ease;
  opacity: 0.85;
}

.social-icon-float:hover {
  opacity: 1;
  transform: translateX(4px);
  box-shadow: 4px 0 16px rgba(0, 0, 0, 0.25);
  color: #fff;
}

/* Mobil için sosyal medya ikonları */
@media (max-width: 768px) {
  .social-float-left {
    gap: 8px;
    padding: 6px 0;
  }
  
  .social-icon-float {
    width: 42px;
    height: 42px;
    font-size: 20px;
    border-radius: 0 10px 10px 0;
  }
}

@media (max-width: 576px) {
  .social-float-left {
    gap: 6px;
    padding: 4px 0;
  }
  
  .social-icon-float {
    width: 38px;
    height: 38px;
    font-size: 18px;
    border-radius: 0 8px 8px 0;
  }
}

/* Mobil sepet dropdown için backdrop */
.cart-dropdown-backdrop {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9999;
}

@media (max-width: 767px) {
  .cart-dropdown-backdrop.show {
    display: block;
  }
  
  /* Mobilde dropdown backdrop üstünde */
  .dropdown-menu.cart-dropdown.show {
    z-index: 10000 !important;
  }
}

/* === Mobil Buton Fix: Basılı Kalma Sorunu === */
@media (hover: none) and (pointer: coarse) {
  /* Touch cihazlarda tap highlight'ı kaldır */
  .btn,
  .btn-primary,
  .btn-outline-primary,
  .btn-checkout,
  .btn-to-cart {
    -webkit-tap-highlight-color: transparent !important;
    -webkit-touch-callout: none !important;
    touch-action: manipulation !important;
  }
  
  /* Focus ve active state'lerini tamamen kaldır */
  .btn:focus,
  .btn:active,
  .btn:focus-visible,
  .btn-primary:focus,
  .btn-primary:active,
  .btn-primary:focus-visible,
  .btn-outline-primary:focus,
  .btn-outline-primary:active,
  .btn-outline-primary:focus-visible,
  .btn-to-cart:focus,
  .btn-to-cart:active {
    outline: none !important;
    box-shadow: none !important;
  }
  
  /* Outline primary butonun active state'ini normal haline döndür */
  .btn-outline-primary:active,
  .btn-outline-primary:focus,
  .btn-outline-primary.active {
    background-color: transparent !important;
    color: var(--brand, #0d6efd) !important;
    border-color: var(--brand, #0d6efd) !important;
  }
  
  /* Primary butonun active state'ini normal haline döndür */
  .btn-primary:active,
  .btn-primary:focus,
  .btn-primary.active {
    background-color: var(--brand, #0d6efd) !important;
    border-color: var(--brand, #0d6efd) !important;
  }
}


/* === Mobilde Ana Sayfada Floating Butonları Aşağıya Çek === */
@media (max-width: 768px) {
  /* Ana sayfada (slider olan sayfa) sosyal medya butonlarını aşağıya çek */
  body.has-hero-slider .social-float-left {
    top: 60% !important;
    transform: translateY(-50%) !important;
  }
  
  /* Ana sayfada bağış yap butonunu aşağıya çek - dikey kalacak */
  body.has-hero-slider .donation-float {
    top: 60% !important;
  }
}

@media (max-width: 576px) {
  /* Küçük mobilde daha da aşağıya */
  body.has-hero-slider .social-float-left {
    top: 65% !important;
  }
  
  body.has-hero-slider .donation-float {
    top: 65% !important;
  }
}


/* === Mobilde Ana Sayfa Kartlarını Sağ/Sol Kenarlardan Küçült === */
@media (max-width: 768px) {
  /* Ana sayfadaki kartları sağ ve soldan biraz içeri çek */
  body.has-hero-slider .home-sections {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }
  
  body.has-hero-slider .home-sections .card {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  /* Kampanya kartlarını da aynı şekilde */
  body.has-hero-slider .campaigns-section {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }
}

@media (max-width: 576px) {
  /* Küçük mobilde biraz daha az */
  body.has-hero-slider .home-sections {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }
  
  body.has-hero-slider .campaigns-section {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }
}


/* === PROFIL DROPDOWN FIX === */
/* Varsayılan: kapalı */
#profileDropdownWrapper .dropdown-menu,
#profileDropdownWrapper .profile-menu,
.profile-wrap .dropdown-menu,
.profile-wrap .profile-menu {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Hover ile AÇILMASIN - kesinlikle */
.profile-wrap:hover > .dropdown-menu,
.profile-wrap:hover .profile-menu,
.profile-wrap:focus-within > .dropdown-menu,
#profileDropdownWrapper:hover .dropdown-menu {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* SADECE .show class'ı ile açılsın */
#profileDropdownWrapper .dropdown-menu.show,
#profileDropdownWrapper .profile-menu.show,
.profile-wrap .dropdown-menu.show,
.profile-wrap .profile-menu.show {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  z-index: 9999 !important;
}

/* === FLOATING BUTONLAR - KESİNLİKLE SABİT === */
.social-float-left {
  position: fixed !important;
  left: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 900 !important;
  display: flex !important;
  flex-direction: column !important;
  -webkit-transform: translateY(-50%) !important;
  will-change: transform;
  contain: layout style;
}

.donation-float {
  position: fixed !important;
  right: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 900 !important;
  display: block !important;
  -webkit-transform: translateY(-50%) !important;
  will-change: transform;
  contain: layout style;
}

.whatsapp-float {
  position: fixed !important;
  right: 30px !important;
  bottom: 30px !important;
  z-index: 900 !important;
  display: flex !important;
  will-change: transform;
  contain: layout style;
}

/* Mobilde floating butonlar kesinlikle sabit kalsın */
@media (max-width: 992px) {
  html, body {
    overflow-x: hidden;
  }
  
  .social-float-left,
  .donation-float,
  .whatsapp-float {
    position: fixed !important;
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
    -webkit-perspective: 1000 !important;
    perspective: 1000 !important;
  }
  
  /* Dropdown açıkken bile floating butonlar yerinde kalsın */
  .dropdown-menu.show ~ .social-float-left,
  .dropdown-menu.show ~ .donation-float,
  body.dropdown-open .social-float-left,
  body.dropdown-open .donation-float {
    position: fixed !important;
    transform: translateY(-50%) !important;
  }
}


/* Footer mobilde düzenleme */
@media (max-width: 768px) {
  footer.site-footer .container {
    padding-left: 60px !important;
    padding-right: 50px !important;
  }
}

/* Footer Kurumsal ve İçerik yan yana - her ekranda */
footer.site-footer .row .row {
  display: flex !important;
  flex-wrap: nowrap !important;
}

footer.site-footer .row .row > .col-6 {
  flex: 0 0 50% !important;
  max-width: 50% !important;
  width: 50% !important;
}