/* --- FONT TANIMLAMALARI --- */
@font-face {
    font-family: 'SF Pro Text';
    src: url('fonts/SF-Pro-Text-Regular.otf') format('opentype');
    font-weight: 400; font-style: normal;
}
@font-face {
    font-family: 'SF Pro Text';
    src: url('fonts/SF-Pro-Text-Medium.otf') format('opentype');
    font-weight: 500; font-style: normal;
}
@font-face {
    font-family: 'SF Pro Display';
    src: url('fonts/SF-Pro-Display-Bold.otf') format('opentype');
    font-weight: 700; font-style: normal;
}

/* --- TEMEL AYARLAR --- */
:root {
    --nav-height: 48px;
    --bg-color: #ffffff;
    --text-color: #1d1d1f;
    --nav-bg: rgba(255, 255, 255, 0.8);
    --dropdown-bg: #ffffff;
    --item-bg: #f5f5f7;
    --item-hover: #e8e8ed;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body { 
    font-family: 'SF Pro Text', sans-serif; 
    background-color: var(--bg-color); 
    color: var(--text-color); 
    overflow-x: hidden; 
}

h1, h2, h3, h4 { font-family: 'SF Pro Display', sans-serif; }

/* --- NAVBAR STİLİ (Index ile Aynı) --- */
.main-navigation {
    position: fixed; top: 0; left: 0; width: 100%; height: var(--nav-height);
    background: var(--nav-bg); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    z-index: 1000; border-bottom: 1px solid rgba(0,0,0,0.1);
    transition: background-color 0.3s ease;
}
.main-navigation.is-open { background-color: var(--dropdown-bg); height: auto; }

.nav-container { max-width: 1024px; margin: 0 auto; height: var(--nav-height); display: flex; align-items: center; justify-content: space-between; padding: 0 20px; }
.brand-logo img { height: 28px; width: auto; opacity: 0.9; transition: opacity 0.2s; }
.brand-logo:hover img { opacity: 1; }

.nav-links { display: flex; list-style: none; gap: 24px; height: 100%; }
.nav-item { height: 100%; display: flex; align-items: center; }
.nav-btn { background: none; border: none; cursor: pointer; font-family: 'SF Pro Text', sans-serif; font-size: 12px; color: var(--text-color); opacity: 0.8; transition: opacity 0.2s; text-decoration: none; }
.nav-btn:hover { opacity: 1; }

.nav-actions { display: flex; align-items: center; gap: 16px; }
.action-btn { background: none; border: none; cursor: pointer; color: var(--text-color); opacity: 0.8; padding: 4px; display: flex; }
.action-btn:hover { opacity: 1; }

.dropdown-wrapper { position: absolute; top: var(--nav-height); left: 0; width: 100%; background-color: var(--dropdown-bg); overflow: hidden; max-height: 0; transition: max-height 0.4s cubic-bezier(0.25, 1, 0.5, 1); border-bottom: 1px solid rgba(0,0,0,0.05); }
.nav-item.active .dropdown-wrapper { max-height: 400px; padding-bottom: 40px; box-shadow: 0 10px 30px rgba(0,0,0,0.05); }
.dropdown-content { max-width: 1024px; margin: 0 auto; padding: 30px 20px 10px 20px; }
.dropdown-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.sub-link { display: block; background-color: var(--item-bg); padding: 14px 18px; border-radius: 12px; text-decoration: none; color: var(--text-color); font-size: 13px; font-weight: 500; transition: background-color 0.2s; }
.sub-link:hover { background-color: var(--item-hover); }

/* --- STICKY HEADER (BAŞLIK ALANI) --- */
.sticky-header-container {
    position: sticky; top: var(--nav-height);
    background: rgba(255, 255, 255, 0.95);
    z-index: 900;
    padding: 30px 40px 20px 40px;
    border-bottom: 1px solid #f0f0f0;
    margin-top: var(--nav-height);
}

.header-content { display: flex; justify-content: space-between; align-items: center; max-width: 1300px; margin: 0 auto; }

#pageTitle {
    font-size: 28px; font-weight: 700; color: #1d1d1f; margin: 0; transition: font-size 0.3s ease;
}
#pageTitle.title-shrunk { font-size: 20px; }

/* Menüleri Gizle Butonu */
.header-actions {
    opacity: 0; /* Başlangıçta gizli, animasyonla gelecek */
    transform: translateX(20px);
    transition: all 0.5s ease;
}
.header-actions.visible { opacity: 1; transform: translateX(0); }

.filter-action-btn {
    background: none; border: none; font-family: 'SF Pro Text', sans-serif;
    font-size: 14px; font-weight: 500; cursor: pointer; display: flex; align-items: center; gap: 8px; color: #075bb0;
    transition: opacity 0.2s;
}
.filter-action-btn:hover { opacity: 0.8; }
.filter-action-btn svg { width: 18px; height: 18px; fill: currentColor; }

/* --- MAIN LAYOUT --- */
.shop-layout {
    display: flex; padding: 40px; max-width: 1400px; margin: 0 auto;
    /* Gap kullanmıyoruz çünkü margin ile animasyon yapacağız */
}

/* --- SIDEBAR ANIMASYONU --- */
.sidebar {
    width: 0; /* BAŞLANGIÇTA KAPALI */
    opacity: 0;
    overflow: hidden;
    flex-shrink: 0;
    /* Geçiş Efekti */
    transition: width 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), 
                opacity 0.4s ease 0.1s, 
                margin-right 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.sidebar.show-sidebar {
    width: 280px; /* AÇILINCA GENİŞLİK */
    opacity: 1;
    margin-right: 40px; /* Sağa boşluk ver */
}

/* Sidebar İçeriği */
.sidebar-inner { min-width: 250px; } /* İçerik daralmasın diye */

.main-accordion-item { border-bottom: 1px solid #e5e5ea; padding: 15px 0; }
.main-accordion-header {
    width: 100%; display: flex; justify-content: space-between; align-items: center;
    background: none; border: none; cursor: pointer;
    font-family: 'SF Pro Display', sans-serif; font-size: 17px; font-weight: 600; color: #1d1d1f;
}
.main-acc-icon { width: 12px; height: 12px; transition: transform 0.3s; fill: #86868b; }
.main-accordion-item.active .main-acc-icon { transform: rotate(180deg); }
.main-accordion-content { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; padding-left: 10px; }

.accordion-item { padding: 8px 0; }
.accordion-header {
    width: 100%; display: flex; justify-content: space-between; align-items: center;
    background: none; border: none; cursor: pointer;
    font-family: 'SF Pro Text', sans-serif; font-size: 14px; font-weight: 500; color: #424245;
}
.accordion-header:hover { color: #075bb0; }
.acc-icon { width: 10px; height: 10px; fill: #999; }
.accordion-content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }

.filter-list { list-style: none; margin-top: 5px; padding-left: 10px; border-left: 1px solid #e5e5ea; }
.cat-link {
    display: block; padding: 6px 0; text-decoration: none; color: #86868b; font-size: 13px; transition: color 0.2s;
}
.cat-link:hover, .cat-link.active { color: #075bb0; font-weight: 500; }

/* --- PRODUCT GRID ANIMASYONU --- */
.product-grid {
    flex: 1;
    display: grid;
    /* Başlangıçta 4 Kolon (Tam Genişlik) */
    grid-template-columns: repeat(4, 1fr); 
    gap: 30px;
    transition: all 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Sidebar açılınca Grid 3 kolona düşecek */
.product-grid.sidebar-open {
    grid-template-columns: repeat(3, 1fr);
}

/* Ürün Kartı */
.product-card {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    transition: transform 0.2s;
    height: 100%;              /* Grid hücresini tamamen doldursun */
}

.product-card:hover {
    transform: translateY(-5px);
}

.p-image {
    width: 100%;
    aspect-ratio: 1;
    background-color: #f5f5f7;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    overflow: hidden;
}

.p-image img {
    width: 70%;
    height: auto;
    object-fit: contain;
    mix-blend-mode: multiply;
}

/* Metin ve buton alanı */
.p-info {
    flex: 1;                          /* Kart içinde kalan alanı kaplasın */
    display: flex;
    flex-direction: column;
    align-items: center;
}


.p-text-group {
    flex: 0 0 auto; /* Bunu ekle: Alanı zorla uzatmasın */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 4px;
}

.p-info h4 {
    font-size: 17px;
    font-weight: 600;
    color: #1d1d1f;
}

.p-info p {
    font-size: 13px;
    color: #86868b;
    margin: 0 0  7px;        /* web'de buton yazıya yaklaşsın */
}

.request-btn {
    display: inline-block;
    background-color: #075bb0;
    color: #fff;
    padding: 8px 20px;
    border-radius: 980px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    transition: background-color 0.2s;
    
    margin-top: 15px; /* Sadece 15px boşluk bırak, en alta gitme */
}

.request-btn:hover {
    background-color: #075bb0;
}

/* Mobil Uyum */
@media (max-width: 900px) {
    .sidebar { width: 100%; height: auto; position: relative; margin-bottom: 20px; display: none; }
    .sidebar.show-sidebar { width: 100%; display: block; }
    .product-grid { grid-template-columns: repeat(2, 1fr) !important; }
      .p-info p {
        margin: 0 0 10px;
    }
}

a.accordion-header.cat-link{
    font-size: 14px;
    color: #424245;
}

a.accordion-header.cat-link.active 
{
     color: #075bb0 !important;
    font-weight: 600;
        }

a.accordion-header.cat-link 
{
    color: inherit;
 }

 /*mobil alanı*/

 /* --- 1. MOBİL MENÜNÜN TEMEL TASARIMI (Masaüstünde Gizli) --- */
.mobile-category-scroll-wrapper {
    display: none !important;
    position: sticky;
    top: var(--nav-height);
    z-index: 800;
    background-color: #ffffff;
    padding: 12px 0;
    border-bottom: 1px solid #eee;
}

/* Kaydırma konteyneri */
.mobile-scroll-container {
    display: flex;
    gap: 10px;
    padding: 0 20px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.mobile-scroll-container::-webkit-scrollbar {
    display: none;
}

/* Hap butonlar */
.mobile-cat-pill {
    flex: 0 0 auto;
    padding: 8px 20px;
    background-color: #f2f2f7;
    color: #1d1d1f;
    border: none;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s;
}
.mobile-cat-pill.active {
    background-color: #075bb0;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(7, 91, 176, 0.25);
}





/* --- 2. MEDYA SORGUSU: SADECE TELEFONLAR İÇİN --- */
@media (max-width: 900px) {

    .sidebar,
    .sidebar.show-sidebar,
    .header-actions {
        display: none !important;
    }

    /* Mobil kategori barını göster */
    .mobile-category-scroll-wrapper {
        display: block !important;
        position: sticky;
        top: var(--nav-height);
        z-index: 999;
        width: 100%;
        background-color: #ffffff;
        border-bottom: 1px solid #f0f0f0;
        padding: 12px 0;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    }

    /* Başlık alanı mobil ayarları */
    .sticky-header-container {
        position: relative !important;
        top: auto !important;
        background: transparent !important;
        border: none !important;
        padding: 10px 20px !important;
        margin-top: 0 !important;
    }

    #pageTitle {
        font-size: 20px !important;
        text-align: center;
        margin: 0;
    }

    .header-content {
        justify-content: center;
        text-align: center;
    }
   
    /* E. Ürün Kartlarını 2'li Diz (Sağa sola taşmasın) */
    .product-grid {
        flex: 1;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 36px 32px;            /* Kartlar arası boşluk biraz arttı */
        align-items: stretch;      /* Tüm kartların boyu eşitlensin */
    }
    .product-grid.sidebar-open {
        grid-template-columns: repeat(3, 1fr);
    }

    /* F. Başlık Alanını Ortala ve Küçült */
    .header-content {
        justify-content: center;
        text-align: center;
    }
    #pageTitle {
        font-size: 20px;
    }
    
    /* G. Menü Butonunu (Hamburger) Sadeleştir */
    .nav-links { display: none; } /* Üst menü linklerini gizle */
    .nav-actions { margin-left: auto; }

      .shop-layout {
        padding: 20px !important; /* Kenar boşluklarını eşitle */
        flex-direction: column;
    }

    /* F. Navbar (En üstteki) sabit kalsın */
    .main-navigation {
        position: fixed;
        background-color: #ffffff;

    }

    .mobile-scroll-container {
        display: flex;
        gap: 12px;
        padding: 0 20px; /* Sağdan soldan boşluk */
        overflow-x: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .mobile-scroll-container::-webkit-scrollbar { display: none; }

  .product-card {
        width: 100%;
        background: #fff; /* Kart arka planı */
        /* Eğer kartların çerçevesi yoksa ekleyebiliriz, varsa kalsın */
    }

    /* Navbar Sabitliği */
    .main-navigation {
        position: fixed;
        background-color: #ffffff; /* Navbar da beyaz olsun */
    }

}