/* public_html/assets/css/theme.css */

/* =========================
   TikTok palette
   ========================= */
:root{
  --tt-black:#0b0b0f;
  --tt-white:#ffffff;
  --tt-cyan:#25F4EE;
  --tt-pink:#FE2C55;
  --tt-gray:#6b7280;
  --tt-border:rgba(15,23,42,.10);
  --tt-shadow:0 10px 30px rgba(2,6,23,.10);
  --tt-radius:18px;
}

/* =========================
   Global
   ========================= */
body{
  background: #f6f7fb;
  color:#0f172a;
}

a{ color: inherit; }
a:hover{ opacity:.92; }

.container{ max-width: 1040px; }

/* =========================
   Navbar / Header
   ========================= */
.navbar{
  backdrop-filter: blur(8px);
  background: rgba(255,255,255,.90) !important;
}

.navbar-brand{
  letter-spacing:.2px;
  font-weight: 700;
}

.brand-dot{
  width:10px;
  height:10px;
  border-radius:999px;
  background:#111;
  display:inline-block;
}

.navbar .nav-link{
  color:#111827;
  border-radius: 12px;
  padding:.55rem .85rem;
  transition: background .15s ease;
}

.navbar .nav-link:hover{
  background: rgba(37,244,238,.12);
}

.navbar .nav-link.active,
.navbar .nav-link.nav-active{
  background: rgba(254,44,85,.10);
  font-weight: 600;
}

/* Mobile offcanvas helpers */
.mobile-drop:hover{
  background: rgba(15,23,42,.04);
}

/* =========================
   Header Logo (FIX)
   ========================= */
.header-logo{
  height: 46px;         /* desktop logo size */
  width: auto;
  max-width: 140px;     /* wide logos won't overflow */
  object-fit: contain;
  display: block;
}

.navbar-brand{
  display:flex;
  align-items:center;
  gap:.65rem;
}

.brand-text{
  font-weight: 800;
  font-size: 1.15rem;
  line-height: 1;
}

/* Mobile */
@media (max-width: 991.98px){
  .header-logo{
    height: 38px;
    max-width: 120px;
  }
  .brand-text{
    font-size: 1.05rem;
  }
}

/* If brand-dot still exists in markup, hide it (logo varken gereksiz) */
.brand-dot{
  display:none !important;
}

/* =========================
   Cards
   ========================= */
.bg-white.border.rounded-3,
.p-4.bg-white.border.rounded-3,
.p-4.p-md-5.bg-white.border.rounded-3{
  border-color: var(--tt-border) !important;
  border-radius: var(--tt-radius) !important;
  box-shadow: var(--tt-shadow);
}

/* =========================
   Buttons
   ========================= */
.btn{
  border-radius: 14px;
  padding: .62rem 1rem;
}

.btn-primary{
  background: linear-gradient(135deg, var(--tt-pink), var(--tt-cyan));
  border: 0;
}

.btn-primary:hover{
  filter: saturate(1.05);
  transform: translateY(-1px);
}

.btn-outline-primary{
  border-color: rgba(254,44,85,.35);
  color: #111827;
}

.btn-outline-primary:hover{
  background: rgba(254,44,85,.10);
  border-color: rgba(254,44,85,.55);
  color:#111827;
}

.btn-outline-secondary{
  border-color: rgba(15,23,42,.18);
}

/* =========================
   Forms
   ========================= */
.form-control{
  border-radius: 14px;
  border-color: rgba(15,23,42,.15);
  padding: .85rem 1rem;
}

.form-control:focus{
  border-color: rgba(37,244,238,.70);
  box-shadow: 0 0 0 .25rem rgba(37,244,238,.18);
}

.input-group-lg > .form-control{
  font-size: 1rem;
}

/* =========================
   Badges
   ========================= */
.badge.text-bg-light.border{
  border-color: rgba(15,23,42,.12) !important;
}

/* =========================
   Alerts
   ========================= */
.alert{
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.10);
}

/* =========================
   Accordion
   ========================= */
.accordion-item{
  border-radius: 14px !important;
  overflow: hidden;
  border-color: rgba(15,23,42,.10) !important;
  margin-bottom: .75rem;
  box-shadow: 0 8px 22px rgba(2,6,23,.06);
}

.accordion-button{
  font-weight: 700;
}

.accordion-button:focus{
  box-shadow: 0 0 0 .25rem rgba(254,44,85,.12);
}

/* =========================
   Typography helpers
   ========================= */
h1,h2,h3{
  letter-spacing: -.2px;
}

/* =========================
   Footer
   ========================= */
footer{
  background: rgba(255,255,255,.92);
}

footer a.link-secondary:hover{
  text-decoration: underline !important;
}

/* =========================
   Small helpers
   ========================= */
.tt-gradient-text{
  background: linear-gradient(135deg, var(--tt-pink), var(--tt-cyan));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.tt-soft{
  background: linear-gradient(
    180deg,
    rgba(37,244,238,.10),
    rgba(254,44,85,.08)
  );
  border: 1px solid rgba(15,23,42,.08);
  border-radius: var(--tt-radius);
}
/* HARD FIX: logo asla patlamas覺n */
.navbar .navbar-brand img,
.header-logo{
  height: 42px !important;
  width: auto !important;
  max-width: 150px !important;
  object-fit: contain !important;
  display: block !important;
}

/* Mobile */
@media (max-width: 991.98px){
  .navbar .navbar-brand img,
  .header-logo{
    height: 34px !important;
    max-width: 130px !important;
  }
}
/* Hero Visual (Home) - refined */
.hero-visual-wrapper{
  background: rgba(255,255,255,.65);
  border: 1px solid rgba(15,23,42,.10);
  border-radius: var(--tt-radius);
  box-shadow: 0 10px 28px rgba(2,6,23,.08);
  display:flex;
  align-items:center;
  justify-content:center;
  min-height: 240px;
  padding: 18px;
}

.hero-visual-placeholder{
  text-align:left;
  width: 100%;
  max-width: 320px;
  color:#0f172a;
}

.hero-visual-icon{
  font-size: 34px;
  line-height: 1;
  margin-bottom: .6rem;
}

.hero-visual-text strong{
  font-size: 1.05rem;
}

.hero-visual-text small{
  color: #64748b;
}
/* Hero image fine-tuning */

/* Genel */
.hero-visual-img{
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* Desktop iyileştirme */
@media (min-width: 992px){
  .hero-visual-wrapper{
    padding: 12px;
  }

  .hero-visual-img{
    border-radius: 14px;
  }
}

/* Mobile iyileştirme */
@media (max-width: 767px){
  .hero-visual-wrapper{
    margin-top: 16px;
    padding: 10px;
  }

  .hero-visual-img{
    max-width: 88%;
  }
}
/* =========================
   MP3 right visual (premium)
   ========================= */
.mp3-visual{
  width: 100%;
  max-width: 360px;
}

.mp3-visual-top{
  display:flex;
  gap:12px;
  align-items:center;
  margin-bottom: 14px;
}

.mp3-visual-icon{
  font-size: 34px;
  line-height: 1;
}

.mp3-visual-title strong{
  font-size: 1.05rem;
}

.mp3-visual-title small{
  color:#64748b;
}

.mp3-wave{
  display:flex;
  gap:6px;
  align-items:flex-end;
  height: 64px;
  padding: 12px 10px;
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 14px;
  background: rgba(255,255,255,.75);
  margin-bottom: 12px;
  overflow:hidden;
}

.mp3-wave span{
  display:block;
  width: 6px;
  border-radius: 999px;
  background: rgba(15,23,42,.22);
  animation: mp3Wave 1.2s ease-in-out infinite;
}

.mp3-wave span:nth-child(1){ height: 18px; animation-delay: .0s; }
.mp3-wave span:nth-child(2){ height: 34px; animation-delay: .1s; }
.mp3-wave span:nth-child(3){ height: 22px; animation-delay: .2s; }
.mp3-wave span:nth-child(4){ height: 42px; animation-delay: .3s; }
.mp3-wave span:nth-child(5){ height: 28px; animation-delay: .4s; }
.mp3-wave span:nth-child(6){ height: 48px; animation-delay: .5s; }
.mp3-wave span:nth-child(7){ height: 20px; animation-delay: .6s; }
.mp3-wave span:nth-child(8){ height: 40px; animation-delay: .7s; }
.mp3-wave span:nth-child(9){ height: 26px; animation-delay: .8s; }
.mp3-wave span:nth-child(10){ height: 52px; animation-delay: .9s; }
.mp3-wave span:nth-child(11){ height: 24px; animation-delay: 1.0s; }
.mp3-wave span:nth-child(12){ height: 44px; animation-delay: 1.1s; }
.mp3-wave span:nth-child(13){ height: 18px; animation-delay: 1.2s; }
.mp3-wave span:nth-child(14){ height: 38px; animation-delay: 1.3s; }
.mp3-wave span:nth-child(15){ height: 24px; animation-delay: 1.4s; }
.mp3-wave span:nth-child(16){ height: 46px; animation-delay: 1.5s; }

@keyframes mp3Wave{
  0%,100%{ transform: scaleY(.75); opacity:.75; }
  50%{ transform: scaleY(1.10); opacity:1; }
}

.mp3-chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom: 10px;
}

.mp3-chip{
  display:inline-flex;
  align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.12);
  background: rgba(255,255,255,.85);
  font-size: .85rem;
  color:#0f172a;
}

.mp3-visual-foot small{
  color:#64748b;
}

/* Mobile tune */
@media (max-width: 767px){
  .mp3-visual{ max-width: 100%; }
}
/* ===== Footer (from footer.php) ===== */

.ft-title{
  font-weight:700;
  margin-bottom:.75rem;
}

.ft-ico{
  display:inline-flex;
  width:18px;
  height:18px;
}

.ft-links{
  list-style:none;
  padding-left:0;
  margin:0;
  display:grid;
  gap:.55rem;
}

.ft-links a{
  color:rgba(33,37,41,.7);
  text-decoration:none;
}

.ft-links a:hover{
  color:rgba(33,37,41,.95);
  text-decoration:underline;
}

.ft-social a{
  width:38px;
  height:38px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(0,0,0,.15);
  color:rgba(33,37,41,.75);
  background:#fff;
  text-decoration:none;
}

.ft-social a:hover{
  color:rgba(33,37,41,.95);
  border-color:rgba(0,0,0,.28);
}
/* =========================
   HEADER / NAVBAR
========================= */

/* Icon wrapper (Lucide) */
.nav-ico{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:20px;
  height:20px;
}

.nav-ico i{
  width:18px;
  height:18px;
}

/* Language buttons */
.lang-chip{
  border-radius:999px;
}

.lang-dd-btn{
  border-radius:999px;
}

.lang-dd-btn .lang-pill{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
}

/* Mobile dropdown buttons */
.mobile-drop{
  background:#f8f9fa;
}

.mobile-drop:hover{
  background:#eef1f3;
}

/* Mobile dropdown caret animation */
.mobile-caret{
  transition:transform .2s ease;
}

.mobile-drop[aria-expanded="true"] .mobile-caret{
  transform:rotate(180deg);
}

/* Header logo (isteğe bağlı ama temiz olsun diye) */
.header-logo{
  height:52px;
  width:auto;
  max-width:180px;
  object-fit:contain;
  display:block;
}

/* Sticky header blur (eğer class kullanıyorsan) */
.header-blur{
  backdrop-filter:saturate(180%) blur(8px);
  background-color:rgba(255,255,255,.9);
}
@media (min-width: 992px){
  .header-nav-nowrap{ flex-wrap: nowrap; }
  .header-nav-nowrap .nav-link{ white-space: nowrap; }
}
.footer-logo {
  max-width: 100%;
  height: auto;
  transition: opacity .15s ease, transform .15s ease;
}

.footer-logo:hover {
  opacity: .9;
  transform: translateY(-1px);
}
  .footer-gplay-btn img {
    display: block;
    max-width: 100%;
    transition: opacity .15s ease, transform .15s ease;
  }

  .footer-gplay-btn:hover img {
    opacity: .92;
    transform: translateY(-1px);
  }
.flag-ico {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  overflow: hidden;
  flex: 0 0 18px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.10);
}
.flag-ico svg { width: 100%; height: 100%; display: block; }
.lang-chip .flag-ico { width: 16px; height: 16px; flex-basis: 16px; }
.nav-ico svg { width: 18px; height: 18px; }

.lang-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .55rem;
}
@media (min-width: 420px) {
  .lang-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.lang-chip {
  width: 100%;
  justify-content: flex-start;
  padding: .55rem .70rem;
  border-radius: 14px;
  font-weight: 600;
  line-height: 1.1;
}
.lang-chip .lang-name {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.lang-chip.btn-outline-secondary { border-color: rgba(0,0,0,.12); }
.lang-chip.btn-outline-secondary:hover { border-color: rgba(0,0,0,.25); }
.offcanvas-body { padding-bottom: 24px; }