/* fixes.css - overrides to fix scrolling, footer gap, admin responsiveness, and hero tweaks */

/* Make sure page can scroll naturally */
html, body {
  height: auto !important;
  min-height: 100% !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  scroll-behavior: auto !important;
}

/* Avoid locking scroll except when drawer explicitly sets overflow:hidden inline */
body[style*="overflow: hidden"] {
  /* allow inline drawer behavior, do not override here */
}

/* Prevent full-height containers from forcing strange scroll behavior */
section, .hero, .main, main {
  min-height: 0;
  height: auto !important;
}

/* Ensure hero behaves like the screenshot: large left text, gradient background and social icons on right */
.hero {
  background: var(--gradient);
  padding: 64px 20px;
  position: relative;
  overflow: visible !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.hero .hero-content {
  max-width: 680px;
  color: var(--text-light);
}
.hero h1 {
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: 1.05;
  margin-bottom: 1rem;
  color: var(--text-light);
}
.hero p {
  opacity: 0.9;
  margin-bottom: 1.25rem;
}

/* Buttons in hero */
.hero .btn {
  margin-right: 1rem;
  padding: 0.9rem 1.6rem;
  border-radius: 12px;
}

/* Floating social icons area -- ensure it doesn't capture pointer events */
.floating-social, .hero-icons {
  pointer-events: none;
}

/* Footer always at bottom; remove accidental gap */
html, body, .site-wrapper {
  height: auto;
}
footer {
  margin: 0;
  padding-bottom: 40px;
  position: relative;
}

/* Fix admin responsiveness */
#admin-panel, .admin-container {
  padding: 16px;
  box-sizing: border-box;
}
.admin-container {
  max-width: 1200px;
  margin: 0 auto;
}
.admin-section {
  margin-bottom: 1.5rem;
  overflow: visible;
}
.admin-table {
  width: 100% !important;
  display: block !important;
  overflow-x: auto !important;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  border-collapse: collapse;
  box-shadow: none;
}
.admin-table thead, .admin-table tbody, .admin-table tr {
  display: table;
  width: 100%;
  table-layout: auto;
}
.admin-table td, .admin-table th {
  padding: 0.6rem 0.75rem;
  white-space: normal;
}

/* Ensure forms and inputs wrap on small screens */
.admin-container .form-group, .admin-container form {
  width: 100% !important;
  box-sizing: border-box;
}

/* Mobile specific fixes */
@media (max-width: 768px) {
  .hero {
    flex-direction: column;
    align-items: flex-start;
    padding: 40px 18px;
  }
  .hero .hero-content { width: 100%; }
  .floating-social { display: none; } /* hide decorative floating icons on small screens to avoid overlap */
  .hamburger-btn { position: fixed; top: 12px; right: 12px; z-index: 2002; }
  .mobile-drawer { transform: translateX(0); } /* ensure drawer works correctly */
  .admin-table thead, .admin-table tbody, .admin-table tr { display: block; width: 100%; }
}

/* Safety: remove accidental large negative margins or gaps affecting footer */
*[style*="margin-bottom: 100vh"], *[style*="margin-bottom: 100%"] {
  margin-bottom: 0 !important;
}


/* Hero and Influencer card styles added by assistant */
.hero {
  display: flex;
  gap: 2rem;
  align-items: center;
  justify-content: space-between;
  padding: 64px 18px;
  background: var(--gradient);
  color: var(--text-light);
}
.hero .hero-content { max-width: 680px; }
.hero h1 { font-size: clamp(2rem, 4.5vw, 3.6rem); margin-bottom: 0.5rem; }
.hero p { opacity: 0.95; margin-bottom: 1rem; font-size: 1.05rem; }
.hero-actions .btn { margin-right: 0.75rem; border-radius: 12px; }

.hero-media .social-cards { display:flex; flex-direction:column; gap:12px; align-items:flex-end; }
.social-card {
  display:flex; align-items:center; gap:10px; padding:10px 14px; border-radius:12px;
  background: rgba(255,255,255,0.06); backdrop-filter: blur(6px); color: #fff; min-width:120px;
  box-shadow: 0 6px 18px rgba(10,10,20,0.12);
}
.social-card i { font-size:1.2rem; }

/* Influencer grid */
.influencer-list { padding: 48px 18px; background: transparent; }
.influencer-list .container { max-width: 1200px; margin: 0 auto; }
.section-title { color: var(--primary-color); margin-bottom: 18px; font-size: 1.6rem; }

.influencer-grid {
  display: grid;
  grid-template-columns: repeat(1,1fr);
  gap: 1.25rem;
}
.influencer-card {
  display:flex; gap:14px; align-items:flex-start; background: rgba(255,255,255,0.98);
  border-radius: 14px; padding: 14px; box-shadow: 0 6px 18px rgba(20,20,40,0.06);
}
.card-media img { width:88px; height:88px; object-fit:cover; border-radius:12px; }
.card-body { flex:1; }
.card-body .name { margin:0; font-size:1.05rem; color: var(--primary-color); }
.card-body .meta { margin:6px 0; color:#6b7280; font-size:0.95rem; }
.card-body .bio { margin:6px 0 10px; color:#374151; font-size:0.98rem; }
.card-actions .btn { padding:8px 12px; border-radius:10px; margin-right:8px; }

@media (min-width:600px) {
  .influencer-grid { grid-template-columns: repeat(2,1fr); }
}
@media (min-width:992px) {
  .influencer-grid { grid-template-columns: repeat(3,1fr); }
  .hero { padding: 80px 36px; }
  .hero-media { max-width: 360px; }
}



/* Small adjustments to ensure no overflow */
html, body { overflow-x: hidden; }

/* İçeride oluşan anlamsız vertical scroll fix */
body,
html {
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
}

/* Mobile drawer açıkken scroll kilitleme */
body.drawer-open {
    overflow: hidden;
}

/* Referans grid daha düzenli olsun */
.referanslar-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1.2rem;
    justify-items: center;
    align-items: center;
}

/* Kart boyutu sabitleme */
.referans-card {
    width: 100%;
    max-width: 160px;
    min-height: 90px;
    padding: 10px;
    background: #fff;
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.referans-card img {
    max-width: 100%;
    max-height: 60px;
    object-fit: contain;
}

/* Mobil için 3'lü grid garantisi */
@media(max-width: 600px) {
    .referanslar-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.8rem;
    }

    .referans-card {
        max-width: 100%;
        min-height: 70px;
        padding: 6px;
    }

    .referans-card img {
        max-height: 50px;
    }
}