/* =========================================================
   ALTUNBİZ Güçlendirme – Mobil Offcanvas Yan Menü (yannavbar.css)
   ========================================================= */

/* ===================== */
/*     RENK DEĞİŞKENLERİ   */
/* ===================== */
:root {
    --accent: #e67e22; /* Turuncu vurgu */
    --dark:   #020c3a; /* Lacivert */
}

/* ===================== */
/*   ANİMASYONLAR & AKTİF DURUM */
/* ===================== */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Offcanvas içinde aktif link boyası (JS ile .active ekleniyor) */
.offcanvas .nav-link.active,
.offcanvas .dropdown-item.active {
    color: var(--accent) !important;
    font-weight: 700;
}

/* ===================== */
/*   OFFCANVAS MOBİL MENÜ */
/* ===================== */
@media (max-width: 991.98px) {

    /* Tüm sayfalarda offcanvas'ı lacivert zorla */
    .offcanvas,
    .offcanvas-start,
    .offcanvas.show,
    .offcanvas-start.show,
    .offcanvas-body {
      --bs-offcanvas-bg: var(--dark) !important;
      background-color: var(--dark) !important;
      color: #fff !important;
    }

    /* Offcanvas gövdesi */
    .offcanvas-start {
        width: 64% !important;
        background-color: var(--dark) !important;
        padding-top: 0; /* header kendi padding'ini alıyor */
        border-right: 3px solid var(--accent);
        transition: all 0.35s ease;
        color: #fff;
    }

    /* Header */
    .offcanvas-header {
        height: 64px; /* üst bar yüksekliği */
        padding: 0 16px;
        border-bottom: 1px solid rgba(255,255,255,0.1);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
    }

    /* Logo – inline height'ı ezmek için !important */
    .offcanvas-logo {
        height: 32px !important;  /* 30–34 aralığı ideal */
        width: auto !important;
        margin-right: 8px;
        display: block;
    }

    /* Başlık – net ve kompakt tipografi */
    .offcanvas-title {
        color: #ffffff;
        font-size: 0.98rem !important; /* ~%70–75 küçülme */
        font-weight: 700;
        letter-spacing: 0.2px;
        line-height: 1.05;
        margin: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* X ikonunu gizle (isteğe bağlı) */
    .offcanvas-header .btn-close {
        display: none !important;
    }

    /* Üst seviye linkler */
    .offcanvas .nav-link {
        color: #ffffff !important;
        font-size: 1.05rem; /* mobilde biraz daha kompakt */
        font-weight: 600;
        padding: 10px 18px;
        border-radius: 6px;
        margin-bottom: 6px;
        transition: color 0.25s ease;
        background: transparent !important;
        opacity: 1 !important;
    }

    .offcanvas .nav-link:hover,
    .offcanvas .nav-link:focus,
    .offcanvas .nav-link.active {
        background-color: transparent !important;
        color: var(--accent) !important;
        font-weight: 700;
        outline: none;
    }

    /* ===================== */
    /*   DROPDOWN STİLLERİ – beyaza dönmeyi engelle */
    .offcanvas .dropdown { position: static !important; }

    .offcanvas .dropdown-menu {
        position: relative !important;
        float: none !important;
        inset: 0 !important;
        transform: none !important;
        background-color: transparent !important; /* <- beyaz yapma */
        border: none !important;
        border-radius: 0.5rem;
        margin: 6px 0 10px 14px;
        box-shadow: none !important; /* gölgeyi de kaldır */
        width: calc(100% - 24px);
        overflow: hidden;
        z-index: 1;
        animation: fadeIn 0.25s ease;
    }

    .offcanvas .dropdown-menu.show { display: block !important; }

    /* Offcanvas içindeki dropdown item'lar koyu zeminde beyaz */
    .offcanvas .dropdown-item {
        color: #ffffff !important;
        font-size: 0.95rem;
        padding: 10px 16px;
        transition: all 0.25s ease;
        background: transparent !important;
    }

    .offcanvas .dropdown-item:hover,
    .offcanvas .dropdown-item:focus {
        color: var(--accent) !important;
        background: transparent !important;   /* turuncu arka planı kaldır */
        outline: none;
    }

    /* Ok simgesi (dropdown toggle) */
    .offcanvas .dropdown-toggle::after {
        margin-left: 6px;
        transition: transform 0.3s ease;
    }
    .offcanvas .dropdown.show .dropdown-toggle::after {
        transform: rotate(180deg);
    }

    /* ===================== */
    /*   COLLAPSE TABANLI ALT MENÜ (Hizmetler) – TEK PANEL */
    /* ===================== */

    /* Tetikleyici (Hizmetler) */
    .collapse-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;

        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;

        /* metin hizası: panel ile birebir */
        padding: 0 18px 6px 18px !important;
        line-height: 1.2;
    }
    .collapse-toggle:focus,
    .collapse-toggle:focus-visible,
    .collapse-toggle:active {
        outline: none !important;
        box-shadow: none !important;
        background: transparent !important;
    }

    /* Tetikleyicideki küçük ok */
    [data-bs-toggle="collapse"] .chev {
        display: inline-block;
        transition: transform .25s ease;
    }
    [data-bs-toggle="collapse"][aria-expanded="true"] .chev {
        transform: rotate(180deg);
    }

    /* Panel: tek görünen kutu; H'nin altında */
    #mobilHizmetler.collapse.services-panel {
        margin: 0 0 10px 0 !important;
        padding: 0;
        background: transparent;
        overflow: hidden;
        border-radius: 8px;
    }

    /* KAPSAYICI: PANELİN SOL TURUNCU ŞERİDİ DURSUN */
    .service-links-container {
        padding: 6px 0 6px 18px;
        box-shadow: inset 2px 0 0 var(--accent);   /* panel sol şerit */
        background: rgba(255,255,255,0.03);
        border-radius: 8px;
    }

    /* Linkler – kelimenin solundaki turuncu çizgi/ikon YOK, sadece yazı turuncuya döner */
    #mobilHizmetler .service-link {
        display: block;
        color: #fff !important;
        background: transparent !important;
        padding: 10px 16px;
        font-weight: 500;
        border-bottom: 1px solid rgba(255,255,255,0.06);
        transition: color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
        border-left: none !important;       /* kelimenin sol çizgisi YOK */
        box-shadow: none !important;         /* linke özel inset sol çizgi varsa YOK */
        background-image: none !important;   /* olası pseudo arka planlar YOK */
        position: relative;
    }
    #mobilHizmetler .service-link:last-child { border-bottom: none; }

    #mobilHizmetler .service-link::before { content: none !important; }

    /* Hover/Focus/Active: SADECE YAZI TURUNCU, ZEMİN VE SOL ÇİZGİ YOK */
    #mobilHizmetler .service-link:hover,
    #mobilHizmetler .service-link:focus,
    #mobilHizmetler .service-link.active {
        color: var(--accent) !important;
        background: transparent !important;
        border-left: none !important;
        box-shadow: none !important;
        outline: none;
    }

    /* ===================== */
    /*   DİKEY BOŞLUKLARI SABİTLE (gap ile) */
    .offcanvas .offcanvas-body .navbar-nav {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;         /* öğeler arası sabit boşluk */
        padding: 8px 0 !important;
        margin: 0 !important;
        list-style: none !important;
        justify-content: flex-start !important; /* justify-content-end'i sıfırla */
    }
    .offcanvas .offcanvas-body .navbar-nav.pe-3 { padding-right: 0 !important; }

    .offcanvas .offcanvas-body .navbar-nav > li {
        margin: 0 !important;
        padding: 0 !important;
    }

    .offcanvas .offcanvas-body .navbar-nav > li > .nav-link,
    .offcanvas .offcanvas-body .navbar-nav > li > .collapse-toggle {
        display: block !important;
        margin: 0 !important;                 /* aralığı sadece gap yönetsin */
        padding: 12px 18px !important;        /* tıklama alanı eşit */
        line-height: 1.25 !important;
        background: transparent !important;
        border: 0 !important;
    }

    .offcanvas .offcanvas-body .navbar-nav > li > .collapse-toggle {
        padding-right: 22px !important;       /* ok için alan */
    }

    .offcanvas .offcanvas-body .navbar-nav [class*="mb-"],
    .offcanvas .offcanvas-body .navbar-nav [class*="py-"]{
        margin-bottom: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
}

/* === Offcanvas tipografi: ekran genişliğine göre akıllı ölçek === */
@media (max-width: 991.98px){
  /* Başlık: 0.9rem ile 1.05rem arasında, ekrana göre akışkan */
  .offcanvas-title{
    font-size: clamp(0.90rem, 2.4vw, 1.05rem) !important;
  }

  /* Üst seviye linkler: 0.95rem–1.05rem aralığında akışkan */
  .offcanvas .nav-link,
  .offcanvas .collapse-toggle{
    font-size: clamp(0.95rem, 2.6vw, 1.05rem) !important;
  }

  /* Hizmetler alt linkleri */
  #mobilHizmetler .service-link{
    font-size: clamp(0.90rem, 2.3vw, 1.00rem) !important;
  }

  /* Uzun metinler taşmasın; satır kır, kelimeleri bölme */
  .offcanvas .nav-link,
  .offcanvas .collapse-toggle,
  #mobilHizmetler .service-link{
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* Küçük ekranlarda (≤360px) padding ve aralıkları biraz kıs */
  @media (max-width: 360px){
    .offcanvas .offcanvas-body .navbar-nav{
      gap: 8px !important;
    }
    .offcanvas .nav-link,
    .offcanvas .collapse-toggle{
      padding: 10px 16px !important;
      line-height: 1.25 !important;
    }
    #mobilHizmetler .service-link{
      padding: 9px 14px !important;
    }
  }

  /* Çok küçük cihazlar (≤320px) için son çare sıkılaştırma */
  @media (max-width: 320px){
    .offcanvas .nav-link,
    .offcanvas .collapse-toggle,
    #mobilHizmetler .service-link{
      font-size: clamp(0.88rem, 3vw, 0.98rem) !important;
      padding: 9px 12px !important;
    }
  }
}