/* ===========================================================================
   MOBİL MENÜ + KANAL ÇİPLERİ (2026-09-11)
   ===========================================================================
   ⚠️ DÜZELTİLEN KUSUR: `.menu` 960px altında gizleniyordu ama yerine hiçbir
   şey konmamıştı — telefondan gelen ziyaretçinin HİÇBİR menüsü yoktu.
   Ana sayfa dışındaki 15 sayfaya ulaşmanın tek yolu dipnottu.
   =========================================================================== */

/* --- Hamburger düğmesi -------------------------------------------------- */
.mnu-ac {
  display: none; appearance: none; cursor: pointer;
  width: 42px; height: 42px; padding: 0; border-radius: 10px;
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
  align-items: center; justify-content: center; flex: 0 0 auto;
  transition: border-color .18s ease, color .18s ease;
}
.mnu-ac:hover { border-color: var(--accent); color: var(--accent); }
.mnu-ac svg { width: 20px; height: 20px; display: block; }
/* İki simge aynı yerde; açık/kapalı hâle göre biri görünür */
.mnu-ac .mnu-kapa { display: none; }
.nav.acik .mnu-ac .mnu-kapa { display: block; }
.nav.acik .mnu-ac .mnu-cizgi { display: none; }
.nav.acik .mnu-ac { border-color: var(--accent); color: var(--accent); }

/* --- Açılan panel ------------------------------------------------------- */
.mnu-panel {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--card); border-bottom: 1px solid var(--line);
  box-shadow: var(--sh-l);
  /* Kapalıyken yükseklik 0 — `display:none` yerine, açılış animasyonu için */
  max-height: 0; overflow: hidden; visibility: hidden;
  transition: max-height .3s cubic-bezier(.4, 0, .2, 1), visibility .3s;
}
.nav.acik .mnu-panel { max-height: 82vh; overflow-y: auto; visibility: visible; }
.mnu-ic { padding: 10px 24px 22px; display: flex; flex-direction: column; gap: 2px; }
.mnu-ic > a {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 12px; border-radius: 10px; text-decoration: none;
  font-size: 16px; font-weight: 600; color: var(--ink);
  border-bottom: 1px solid var(--line);
}
.mnu-ic > a:last-of-type { border-bottom: 0; }
.mnu-ic > a:active { background: var(--bg-2); }
.mnu-ic > a svg { width: 18px; height: 18px; color: var(--accent); flex: 0 0 auto; }
.mnu-ic > a small { margin-left: auto; font-size: 12.5px; font-weight: 500; color: var(--muted); }
.mnu-alt { display: flex; gap: 10px; align-items: center; margin-top: 16px; flex-wrap: wrap; }
.mnu-alt .btn { flex: 1; min-width: 130px; }
.mnu-dil { display: inline-flex; gap: 2px; border: 1px solid var(--line);
  border-radius: 9px; padding: 3px; font: 600 13px/1 'Inter', sans-serif; }
.mnu-dil a { padding: 9px 13px; border-radius: 7px; color: var(--muted); text-decoration: none; }
.mnu-dil a.on { background: var(--tint); color: var(--accent); }

/* Panel açıkken arkadaki sayfa kaymasın */
body.mnu-kilit { overflow: hidden; }

@media (max-width: 960px) {
  .mnu-ac { display: inline-flex; }
  .nav { position: sticky; }          /* panel `top:100%` ile buna dayanır */
}
@media (min-width: 961px) {
  .mnu-panel { display: none; }       /* masaüstünde hiç render edilmesin */
}

/* ===========================================================================
   KANAL ÇİPLERİ — kahraman başlığının üstündeki şerit
   ===========================================================================
   Düz metin rozeti yerine gerçek marka simgeleri. "Sinyal" animasyonu
   sırayla bir çipi aydınlatıyor: kanalların tek tek mesaj getirmesi
   fikrini gösteriyor — süs değil, ürünün kendisi.
   =========================================================================== */
.cipler { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; }
.cip {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 14px 7px 7px; border-radius: 999px;
  background: var(--card); border: 1px solid var(--line);
  font: 600 13.5px/1 'Inter', sans-serif; color: var(--ink);
  text-decoration: none; position: relative;
  box-shadow: var(--sh-s);
  transition: transform .22s cubic-bezier(.34, 1.4, .64, 1), box-shadow .22s ease,
              border-color .22s ease;
}
.cip:hover { transform: translateY(-3px); box-shadow: var(--sh-m); border-color: var(--line-2); }
.cip { --cip-renk: var(--accent); }
.cip i {
  width: 26px; height: 26px; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center; color: #fff;
  background: var(--cip-renk);
}
.cip i svg { width: 13px; height: 13px; display: block; }

/* Sinyal: JS sırayla `.sinyal` veriyor — bir anda YALNIZ BİRİ yanıyor,
   böylece göz nereye bakacağını biliyor. */
/* Halka KANALIN KENDİ rengiyle: WhatsApp yeşil, Instagram pembe yanar.
   Tek bir mavi halka, hangi kanalın konuştuğunu anlatmazdı. */
.cip.sinyal { border-color: var(--cip-renk); }
.cip.sinyal::after {
  content: ''; position: absolute; inset: -1px; border-radius: 999px;
  border: 1.5px solid var(--cip-renk); opacity: 0;
  animation: cipHalka 1.1s ease-out;
  pointer-events: none;
}
@keyframes cipHalka {
  0%   { opacity: .85; transform: scale(1); }
  100% { opacity: 0;   transform: scale(1.16); }
}

/* "+3 kanal" çipi — diğerlerine götürür */
.cip-daha { background: var(--tint); border-color: transparent; color: var(--accent); padding-left: 14px; }
.cip-daha:hover { border-color: var(--accent); }
.cip-daha svg { width: 13px; height: 13px; }

@media (max-width: 420px) {
  .cip { padding: 6px 11px 6px 6px; font-size: 12.5px; gap: 7px; }
  .cip i { width: 23px; height: 23px; }
  .cip i svg { width: 12px; height: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .cip, .cip:hover { transition: none; transform: none; }
  .cip.sinyal::after { animation: none; }
  .mnu-panel { transition: none; }
}

/* Dar ekranda üst çubuk: logo + CTA + hamburger sığmalı.
   CTA iki satıra kırılıyordu — küçültüp sarmasını engelliyoruz.
   Giriş ve dil zaten panelde var, üst çubuktan kalkıyor. */
@media (max-width: 560px) {
  .nav-ic { gap: 10px; }
  .nav-sag { gap: 8px; }
  .nav-sag .btn-1 { padding: 10px 13px; font-size: 13.5px; white-space: nowrap; }
  .logo { font-size: 18px; }
  .logo-im { width: 26px; height: 26px; }
}
@media (max-width: 380px) {
  /* En dar telefonlarda CTA da panele bırakılır — hamburger asla sıkışmasın */
  .nav-sag .btn-1 { display: none; }
}