/* =====================================================================
   Safe Light — tasarım dosyası style.css'e DOKUNMADAN eklenen kurallar.

   style.css Figma'dan gelen tasarımın kendisidir ve değiştirilmez. Tasarımda
   olmayan üç davranış burada:
     1. telefonda menü gövdesindeki EN/TR satırı,
     2. Projeler sayfasında grup başlığı ile kart ızgarası arası,
     3. ÜRÜNLERİMİZ menüsünün alt kategori panelleri (sağa açılan flyout).
   Her kural mevcut sınıf adlarını kullanır; yeni sınıf yalnızca gerektiğinde
   ve "menu-sub__" / "site-menu__" / "arama" ön ekleriyle.
     4. liste sayfalarında arama kutusu (ürünler, projeler, blog),
     5. liste sayfalarında sayfalama (9 kart / sayfa).
   ===================================================================== */

/* --- 1. Telefonda dil değiştirici (≤620: üst bardaki kopya style.css'te gizli) --- */
.site-menu__lang { display: none; }

@media (max-width: 620px) {
    .site-menu__lang { display: flex; justify-content: center; margin-top: 1.5rem; }
}

/* --- 2. Projeler sayfası: grup başlığı → kartlar (ürün sayfasındaki ölçü) --- */
.posts .latest__head + .post-grid,
.posts .latest__head + .product__text { margin-top: 4.25rem; }

/* --- 3. Alt kategori panelleri --------------------------------------------
   Üst panel (.menu-sub) tasarımdan: buzlu cam, 244px, akışta ve ortalı.
   Alt kırılımı olan madde (.menu-sub__parent) kendi panelini taşır; fare
   maddenin üzerine gelince panel maddenin hizasından SAĞA açılır, aynı cam.
   Üçüncü seviye (Halojen / LED) ikinci panelin sağına açılır.               */

.menu-sub li { position: relative; }

.menu-sub .menu-sub {
    position: absolute;
    top: -1.625rem;                 /* ilk madde, üzerine gelinen maddeyle aynı hizada */
    left: calc(100% + 0.5rem);
    z-index: 2;
    display: none;
    margin: 0;
}

/* Paneller arası 8px boşlukta fare "kaybolmasın": görünmez köprü. */
.menu-sub .menu-sub::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -0.75rem;
    width: 0.75rem;
}

.menu-sub li:hover > .menu-sub,
.menu-sub li:focus-within > .menu-sub,
.menu-sub li.is-open > .menu-sub { display: block; }

/* Alt kırılımı olan maddede ok hep görünür (tasarımda ok üzerine gelince). */
.menu-sub__parent > a .menu-sub__caret { opacity: 1; }

/* Dokunmatik / dar ekran için aç-kapa düğmesi; JS ekler (assets/js/main.js). */
.menu-sub__more {
    position: absolute;
    top: 0;
    right: 0;
    display: none;
    width: 3.125rem;
    height: 2.6rem;
    padding: 0;
    border: 0;
    background: none;
    color: #fff;
    font: inherit;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}

@media (hover: none), (max-width: 1100px) {
    /* Fare yok ya da üç panel yan yana sığmaz: paneller maddenin ALTINA açılır
       (akordeon), üzerine gelmek değil düğmeye dokunmak açar. */
    .menu-sub .menu-sub {
        position: static;
        display: none;
        width: auto;
        margin: 0.5rem 0 0 0.75rem;
        padding-block: 0.75rem;
        background: rgba(74, 91, 81, 0.28);
    }

    .menu-sub .menu-sub::before { display: none; }

    .menu-sub li:hover > .menu-sub,
    .menu-sub li:focus-within > .menu-sub { display: none; }

    .menu-sub li.is-open > .menu-sub { display: block; }

    .menu-sub__more { display: flex; align-items: center; justify-content: center; }

    /* Düğme okun yerini alır: ok gizlenir, dokunma hedefi 44px'e çıkar. */
    .menu-sub__parent > a .menu-sub__caret { opacity: 0; }
}

@media (max-width: 620px) {
    .menu-sub .menu-sub { width: auto; }
}

/* --- 4. Liste sayfalarında arama ------------------------------------------
   Girdi kutusu iletişim formununki (.field__box / .field__input), düğme
   tasarımdaki hap (.pill). Genişlik kart ızgarasıyla aynı (74.4375rem).       */

.arama {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    width: 74.4375rem;
    max-width: calc(100% - var(--gutter) * 2);
    margin: 1.25rem auto 2.75rem;
}

.arama__box { flex: 1 1 18rem; }

.arama__box .field__input { color: #fff; }

/* <button> olarak .pill: tarayıcı çerçevesi ve yazı tipi sıfırlanır. */
.arama__dugme {
    flex: none;
    border: 0;
    font-family: inherit;
    cursor: pointer;
    transition: background .25s ease;
}

.arama__dugme:hover { background: #d3e2d9; }

.arama__temizle { flex: none; font-size: var(--fs-12); }

.arama__sonuc {
    width: 74.4375rem;
    max-width: calc(100% - var(--gutter) * 2);
    margin: -1.5rem auto 2.5rem;
    font-size: var(--fs-15);
    letter-spacing: 0.1em;
    color: var(--sage);
}

/* Projeler: arama bölümü kendi .posts kutusunda; alt boşluğu gruplara bırakır. */
#proje-arama { padding-bottom: 0; }

#proje-arama .arama { margin-bottom: 0.5rem; }

#proje-arama .arama__sonuc { margin: 1rem auto 0; }

@media (max-width: 620px) {
    .arama { gap: 0.75rem; }

    .arama__dugme { width: 100%; justify-content: center; }
}

/* --- 5. Sayfalama ----------------------------------------------------------
   Kart ızgarasının altında; numaralar ince adaçayı halka, etkin sayfa dolu.
   Önceki / Sonraki tasarımdaki .link-arrow diliyle (ok ikonu aynı dosya).   */

.sayfalama {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1.25rem 1.75rem;
    width: 74.4375rem;
    max-width: calc(100% - var(--gutter) * 2);
    margin: 3.5rem auto 0;
    font-family: var(--font-alt);
    color: var(--sage);
}

.sayfalama__liste {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sayfalama__no {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: max(2.5rem, 40px);
    height: max(2.5rem, 40px);
    padding: 0 0.5rem;
    border: 1px solid var(--sage);
    border-radius: 999px;
    font-size: var(--fs-15);
    font-weight: 500;
    letter-spacing: 0.05em;
    color: var(--sage);
    text-decoration: none;
    transition: background .25s ease, color .25s ease;
}

a.sayfalama__no:hover { background: rgba(183, 202, 191, 0.16); }

.sayfalama__no.is-active { background: var(--sage); color: var(--sage-ink); }

.sayfalama__bosluk { padding: 0 0.25rem; color: var(--grey-1); }

.sayfalama__adim {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    font-size: var(--fs-15);
    font-weight: 500;
    letter-spacing: 0.1em;
    color: var(--sage);
    text-decoration: none;
    transition: color .25s ease;
}

.sayfalama__adim:hover { color: #fff; }

.sayfalama__adim img { width: 1.0625rem; height: 0.8125rem; }

.sayfalama__adim[rel="prev"] img { transform: rotate(180deg); }

@media (max-width: 620px) {
    .sayfalama { gap: 1rem; margin-top: 2.5rem; }
}