/* SUSOFTECH tasarım sistemi — yerleşim katmanı: header, mega menü, footer. */

/* ============================================================
   1. Üst şerit — marka geçişi + duyuru + dil
   Tek satırda üç iş: SUSOFTECH|SU AGENCY geçişi (sol), kampanya duyurusu
   ve geri sayım (orta), dil (sağ). Ana navigasyondan görsel olarak daha hafif.
   ============================================================ */

.brandbar {
    position: relative;
    z-index: 2;
    background: var(--grad-deep);
    color: var(--ink-300);
    font-size: var(--fs-xs);
}

.brandbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    min-height: 44px;
}

/* --- duyuru + geri sayım --- */

.promo {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    flex: 1 1 auto;
    justify-content: center;
    min-width: 0;
}

.promo__text {
    color: #fff;
    font-weight: var(--fw-semibold);
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

a.promo__text:hover { color: var(--brand-200); }

.promo__clock {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex: none;
}

.promo__unit {
    display: flex;
    align-items: baseline;
    gap: 4px;
    padding: 3px var(--sp-3);
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: var(--r-full);
    line-height: 1;
}

.promo__num {
    font-size: 0.8125rem;
    font-weight: var(--fw-bold);
    color: #fff;
    font-variant-numeric: tabular-nums;
}

.promo__label {
    font-size: 9px;
    font-weight: var(--fw-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--brand-200);
}

@media (max-width: 1080px) {
    .promo { justify-content: flex-end; }
    .promo__text { display: none; }
}

@media (max-width: 720px) {
    .promo__clock { display: none; }
}

.brandswitch {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
}

.brandswitch__item {
    /* Marka adı BÖLÜNMEZ. 375 px'te "SU AGENCY" iki satıra iniyor ve üst
       şerit 44 → 60 px oluyordu (ölçüldü) — hem marka adı kırılmış
       görünüyor hem de hero 16 px aşağı kayıyordu. Sığmama sorunu değil:
       şeridin içeriği 292 px, kap 375 px. */
    white-space: nowrap;
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--r-xs);
    /* Koyu degrade üstünde ink-400 yalnızca 3.8:1 veriyordu; 13px metin için yetersiz. */
    color: var(--ink-300);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.brandswitch__item:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

.brandswitch__item.is-active {
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
}

/* Yalnızca ayraç (aria-hidden); metin taşımadığı için kontrast eşiğine tabi değil,
   ama görünür olması gerekir — koyu degrade üstünde yarı saydam beyaz. */
.brandswitch__sep {
    color: rgba(255, 255, 255, 0.38);
    user-select: none;
}

.brandbar__right {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
}

.brandbar__link {
    color: var(--ink-300);
    font-weight: var(--fw-medium);
}

.brandbar__link:hover { color: #fff; }

.langswitch {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
}

.langswitch__item {
    padding: 2px var(--sp-2);
    border-radius: var(--r-xs);
    color: var(--ink-300);
    font-weight: var(--fw-semibold);
}

.langswitch__item:hover { color: #fff; }
.langswitch__item.is-active { color: #fff; background: rgba(255, 255, 255, 0.12); }

@media (max-width: 720px) {
    .brandbar__right .brandbar__link { display: none; }
}

/* ============================================================
   2. Ana navigasyon
   ============================================================ */

.site-header {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.site-header.is-scrolled { box-shadow: var(--sh-sm); }

/* ---------- Şeffaf header (videolu hero'nun üstünde) ----------
   Hero videosu header'ın ARDINDAN başlar; başlık şeridi görüntünün üstünde durur.
   Kaydırıldığında beyaz ve sabit hale gelir. */

.site-header--overlay {
    position: absolute;
    inset: 0 0 auto 0;
    background: transparent;
    border-bottom-color: transparent;
}

.site-header--overlay .brandbar {
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(6px);
}

.site-header--overlay .navbar { border-bottom: 1px solid rgba(255, 255, 255, 0.14); }

.site-header--overlay .logo,
.site-header--overlay .mainnav__link,
.site-header--overlay .navbar__phone { color: #fff; }

.site-header--overlay .mainnav__link:hover,
.site-header--overlay .mainnav__item:focus-within > .mainnav__link {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
}

/* Aktif sayfanın menü öğesi normalde brand-700; koyu bandın üstünde bu renk
   1,7:1 veriyor ve okunmuyor. Şeffaf header'da aktiflik renkle değil, hafif
   bir zeminle gösterilir. */
.site-header--overlay .mainnav__link.is-active {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
}

/* Kaydırılıp beyazlayınca normal aktif rengine döner */
.site-header--overlay.is-stuck .mainnav__link.is-active {
    background: transparent;
    color: var(--brand-700);
}

.site-header--overlay .btn--secondary {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.55);
    color: #fff;
}

.site-header--overlay .btn--secondary:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: #fff;
    color: #fff;
}

.site-header--overlay .navtoggle { color: #fff; }

/* Kaydırınca: sabitlenir ve normal (beyaz) haline döner */
.site-header--overlay.is-stuck {
    position: fixed;
    background: var(--surface);
    border-bottom-color: var(--border);
    box-shadow: var(--sh-md);
    animation: header-drop var(--dur) var(--ease-out);
}

.site-header--overlay.is-stuck .brandbar { display: none; }
.site-header--overlay.is-stuck .navbar { border-bottom: 0; }

.site-header--overlay.is-stuck .logo { color: var(--ink-900); }

.site-header--overlay.is-stuck .mainnav__link,
.site-header--overlay.is-stuck .navbar__phone { color: var(--ink-700); }

.site-header--overlay.is-stuck .mainnav__link:hover {
    background: var(--ink-100);
    color: var(--ink-900);
}

.site-header--overlay.is-stuck .btn--secondary {
    background: var(--surface);
    border-color: var(--border-strong);
    color: var(--ink-800);
}

.site-header--overlay.is-stuck .navtoggle { color: var(--ink-800); }

@keyframes header-drop {
    from { transform: translateY(-100%); }
    to   { transform: translateY(0); }
}

/* --- header sağ tarafı: telefon ve giriş --- */

.navbar__phone {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    color: var(--ink-800);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    white-space: nowrap;
}

.navbar__phone:hover { color: var(--brand-700); }


@media (max-width: 1280px) {
    .navbar__phone span { display: none; }
}

.navbar__inner {
    display: flex;
    align-items: center;
    gap: var(--sp-8);
    min-height: 72px;
}

/* SUSOFTECH logo bileşeni.

   Header'da İKİ logo birden basılır; hangisinin görüneceğini CSS seçer.
   Böylece kaydırma sırasında JS beklenmez, geçiş anında ve titremesiz olur:

     header şeffafken (video üstünde)  → gradyan logo
     header beyazladığında (.is-stuck) → siyah logo   */

.logo {
    display: inline-flex;
    align-items: center;
    flex: none;
    /* Logo kendi rengini taşır; bağlantı rengi devralmaz */
    text-decoration: none;
}

.brandlogo {
    display: block;
    width: auto;
    height: 26px;
    /* Görsel yüklenene kadar satır zıplamasın */
    max-width: 200px;
}

/* --- Dosya yokken kullanılan yazı karşılığı ---
   Markanın dili: büyük harf, çok kalın, sıkı harf aralığı. */

.brandtype {
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.045em;
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;
}

.brandtype--dark  { color: var(--ink-900); }
.brandtype--light { color: #fff; }

/* Gradyan AÇIK zeminde kullanılır (header beyazladığında, iç sayfalarda).
   Ana logonun geçişi gibi: iki uçta koyu lacivert, ortada turkuaz. */
.brandtype--gradient {
    background: linear-gradient(90deg, #0d3e6f 0%, #30a9b7 50%, #0d3e6f 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

@supports not (background-clip: text) {
    .brandtype--gradient { color: var(--ink-900); }
}

/* --- Header: duruma göre değişim --- */

.logo--swap .logo__stuck { display: none; }

/* Şeffaf header: gradyan görünür, siyah gizli */
.site-header--overlay .logo--swap .logo__stuck { display: none; }
.site-header--overlay .logo--swap .logo__over  { display: block; }

/* Beyazlamış header: siyah görünür, gradyan gizli */
.site-header--overlay.is-stuck .logo--swap .logo__over  { display: none; }
.site-header--overlay.is-stuck .logo--swap .logo__stuck { display: block; }

/* Şeffaf olmayan (iç sayfa) header her zaman siyah logoyu gösterir */
.site-header:not(.site-header--overlay) .logo--swap .logo__over  { display: none; }
.site-header:not(.site-header--overlay) .logo--swap .logo__stuck { display: block; }

/* Yazı karşılığı da aynı kuralı izler */
.logo--swap .logo__over.brandtype,
.logo--swap .logo__stuck.brandtype { display: inline-block; }

.site-header--overlay .logo--swap .logo__stuck.brandtype { display: none; }
.site-header--overlay.is-stuck .logo--swap .logo__over.brandtype { display: none; }
.site-header--overlay.is-stuck .logo--swap .logo__stuck.brandtype { display: inline-block; }
.site-header:not(.site-header--overlay) .logo--swap .logo__over.brandtype { display: none; }

@media (max-width: 560px) {
    .brandlogo { height: 22px; }
    .brandtype { font-size: 1.0625rem; }
}

/* --- masaüstü menü --- */

.mainnav {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    margin-right: auto;
}

/* Mega menü konumlandırma bağlamı ÖĞE değil ÇUBUKtur.
   Öğeye göre ortalanınca soldaki menüler ekranın dışına taşıyordu (-205px). */
.navbar { position: relative; }

.mainnav__item { position: static; }

.mainnav__link {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--r-sm);
    color: var(--ink-700);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    white-space: nowrap;
}

.mainnav__link:hover,
.mainnav__item:focus-within > .mainnav__link {
    background: var(--ink-100);
    color: var(--ink-900);
}

.mainnav__link.is-active { color: var(--brand-700); }

.mainnav__caret {
    width: 10px;
    height: 10px;
    transition: transform var(--dur) var(--ease);
}

.mainnav__item:hover .mainnav__caret,
.mainnav__item:focus-within .mainnav__caret { transform: rotate(180deg); }

.navbar__actions {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    flex: none;
}

/* --- mega menü --- */

.mega {
    position: absolute;
    top: calc(100% - 6px);
    left: 50%;
    z-index: var(--z-mega);
    /* Varsayılan: dört sütunluk genişlik.
       4 × 260 sütun + 3 × 32 boşluk + 2 × 32 iç boşluk = 1200 */
    width: min(1200px, calc(100vw - 3rem));
    transform: translate(-50%, -8px);
    padding: var(--sp-8);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-xl);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur) var(--ease),
                transform var(--dur) var(--ease-out),
                visibility var(--dur);
}

/* Fare menüye giderken boşluğa düşmesin diye görünmez köprü */
.mega::before {
    content: "";
    position: absolute;
    inset: -12px 0 auto 0;
    height: 12px;
}

.mainnav__item:hover > .mega,
.mainnav__item:focus-within > .mega {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

/* Mega menü bir bağlantı listesi değil, bir seçim ekranıdır: her satır
   başlık + tek satırlık açıklama taşır. İkon KULLANILMAZ — on iki satırda
   on iki ikon menüyü kalabalıklaştırıyor, açıklamalar zaten yönlendiriyor. */

/* Sütun taban genişliği 260 → 220. `auto-fit` sığmayan sütunu alta atar:
   260 tabanla dört sütun 1200 px'lik panele girmiyor, 220 tabanla giriyor
   ve sütunlar yine 260 px'e yayılıyor (1fr). Taban yalnızca "kaç sütun
   sığar" hesabını değiştiriyor, görünen genişliği değil. */
.mega__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--sp-6) var(--sp-8);
}

.mega__col-title {
    margin-bottom: var(--sp-3);
    padding-bottom: var(--sp-3);
    border-bottom: 1px solid var(--border);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-500);
}

.mega__link {
    display: block;
    padding: 9px var(--sp-3);
    margin-left: calc(var(--sp-3) * -1);
    border-radius: var(--r-md);
    transition: background-color var(--dur) var(--ease);
}

.mega__label {
    display: block;
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    line-height: 1.35;
    color: var(--ink-900);
}

.mega__note {
    display: block;
    margin-top: 2px;
    font-size: var(--fs-xs);
    font-weight: var(--fw-regular);
    line-height: 1.45;
    color: var(--ink-600);
}

.mega__link:hover { background: var(--brand-50); }
.mega__link:hover .mega__label { color: var(--brand-700); }

/* Açıklama vurgu rengine BOYANMAZ: mikro metin okunur kalmalı */
.mega__link:hover .mega__note { color: var(--ink-700); }

/* --------------------------------------------------- Çizgi altı bağlantılar */

.mega__foot {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--sp-3);
    margin-top: var(--sp-6);
    padding-top: var(--sp-5);
    border-top: 1px solid var(--border);
}

/* Eski tek satırlık CTA düzeni — başka mega gruplarında hâlâ kullanılıyor */
.mega__foot--cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
}

.mega__jump {
    display: block;
    padding: 10px var(--sp-3);
    margin-inline: calc(var(--sp-3) * -1) 0;
    border-radius: var(--r-md);
    transition: background-color var(--dur) var(--ease);
}

.mega__jump-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    line-height: 1.3;
    color: var(--brand-700);
}

.mega__jump-label svg { transition: transform var(--dur) var(--ease); }

.mega__jump-note {
    display: block;
    margin-top: 3px;
    font-size: var(--fs-xs);
    line-height: 1.45;
    color: var(--ink-600);
}

.mega__jump:hover { background: var(--brand-50); }
.mega__jump:hover .mega__jump-label svg { transform: translateX(3px); }

/* ============================================================
   3. Mobil navigasyon
   ============================================================ */

.navtoggle {
    display: none;
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: var(--r-sm);
    color: var(--ink-800);
    align-items: center;
    justify-content: center;
}

.navtoggle:hover { background: var(--ink-100); }

.mobilenav {
    display: none;
    position: fixed;
    inset: 0 0 0 auto;
    z-index: var(--z-overlay);
    width: min(420px, 100%);
    padding: var(--sp-6) var(--sp-5) var(--sp-10);
    background: var(--surface);
    box-shadow: var(--sh-xl);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.mobilenav.is-open { display: block; }

.mobilenav__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--sp-6);
}

.mobilenav__group + .mobilenav__group { border-top: 1px solid var(--border); }

.mobilenav__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: var(--sp-4) 0;
    color: var(--ink-900);
    font-weight: var(--fw-semibold);
    cursor: pointer;
    list-style: none;
}

.mobilenav__summary::-webkit-details-marker { display: none; }

.mobilenav__summary::after {
    content: "+";
    color: var(--ink-500);
    font-size: 1.25rem;
    line-height: 1;
}

details[open] > .mobilenav__summary::after { content: "–"; }

.mobilenav__link {
    display: block;
    padding: var(--sp-3) 0 var(--sp-3) var(--sp-4);
    color: var(--ink-700);
    font-size: var(--fs-sm);
}

.mobilenav__actions {
    display: grid;
    gap: var(--sp-3);
    margin-top: var(--sp-8);
}

.nav-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-overlay) - 1);
    background: rgba(15, 23, 42, 0.45);
}

.nav-backdrop.is-open { display: block; }

@media (max-width: 1080px) {
    .mainnav,
    .navbar__actions { display: none; }

    .navtoggle { display: flex; }

    .navbar__inner { justify-content: space-between; min-height: 64px; }
}

/* ============================================================
   4. Footer
   ============================================================ */

.site-footer {
    background: var(--ink-900);
    color: var(--ink-300);
}

/* --- üst CTA bandı --- */

.footer-cta {
    padding-block: var(--section-y-tight);
    background: linear-gradient(135deg, var(--brand-700), var(--brand-900) 60%, var(--ink-900));
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-cta__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-10);
    flex-wrap: wrap;
}

.footer-cta__title {
    max-width: 22ch;
    color: #fff;
    font-size: var(--fs-h2);
}

.footer-cta__text {
    max-width: 52ch;
    margin-top: var(--sp-3);
    color: var(--brand-100);
}

.footer-cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
}

.footer-cta .btn--primary {
    background: #fff;
    color: var(--brand-700);
    box-shadow: 0 10px 28px rgba(2, 6, 23, 0.35);
}

.footer-cta .btn--primary:hover { background: var(--brand-50); color: var(--brand-800); }

/* --- link kolonları --- */

.footer-main { padding-block: var(--sp-16) var(--sp-12); }

.footer-cols {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--sp-10) var(--sp-8);
}

.footer-col__title {
    margin-bottom: var(--sp-4);
    color: #fff;
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
}

.footer-col__link {
    display: block;
    padding: 5px 0;
    color: var(--ink-400);
    font-size: var(--fs-sm);
    line-height: 1.5;
}

.footer-col__link:hover { color: #fff; }

/* --- güven / iletişim bandı --- */

.footer-trust {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-8);
    margin-top: var(--sp-12);
    padding-top: var(--sp-8);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-contact__row {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 3px 0;
    color: var(--ink-300);
    font-size: var(--fs-sm);
}

.footer-contact__row a { color: var(--ink-300); }
.footer-contact__row a:hover { color: #fff; }

.footer-social {
    display: flex;
    gap: var(--sp-2);
}

.footer-social__item {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: var(--r-sm);
    color: var(--ink-300);
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.footer-social__item:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

/* --- yasal alt bant --- */

.footer-legal {
    padding-block: var(--sp-5);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-legal__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    font-size: var(--fs-xs);
    /* Koyu footer üstünde ink-500 yalnızca 3.5:1 veriyordu */
    color: var(--ink-400);
}

.footer-legal__links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2) var(--sp-4);
}

/* Dokunma hedefi en az 24px olmalı (WCAG 2.5.8); satır yüksekliği tek başına 22px kalıyordu */
.footer-legal__links a {
    display: inline-block;
    padding-block: 5px;
    color: var(--ink-400);
}
.footer-legal__links a:hover { color: #fff; }

/* Mobilde kolonlar accordion'a döner (JS `open` durumunu yönetir) */
.footer-col > summary {
    display: none;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-4) 0;
    color: #fff;
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    cursor: pointer;
    list-style: none;
}

.footer-col > summary::-webkit-details-marker { display: none; }

@media (max-width: 1080px) {
    .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
    .footer-cols {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    .footer-col {
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .footer-col > summary { display: flex; }
    .footer-col > summary::after { content: "+"; font-size: 1.25rem; line-height: 1; color: var(--ink-400); }
    .footer-col[open] > summary::after { content: "–"; }

    .footer-col__title { display: none; }
    .footer-col__links { padding-bottom: var(--sp-4); }

    .footer-cta__inner { flex-direction: column; align-items: flex-start; }
    .footer-cta__actions { width: 100%; }
    .footer-cta__actions .btn { flex: 1 1 auto; }
}

/* ═══════════════════════════════════════════════════════════════════════
   MEGA MENÜ — ÖLÇÜ DÜZELTMESİ
   ═══════════════════════════════════════════════════════════════════════

   Menü büyüdükçe (21 satır, 4 sütun) panel de büyüdü ve ekranı kaplar hâle
   geldi. Üç şey birlikte küçültüldü: panel genişliği, tipografi ve satır
   aralıkları. Dosyanın üstündeki kurallar korunuyor, burada eziliyor —
   ölçü kararları tek blokta dursun diye.

   Panel genişliği artık SÜTUN SAYISINA bağlı (`data-cols`); tek bir sabit
   genişlik dört sütunlu menüde taşırıyor, iki sütunluda yarısını boş
   bırakıyordu. */

.mega {
    width: min(1060px, calc(100vw - 3rem));
    padding: var(--sp-6);
}

.mega[data-cols="1"] { width: min(360px, calc(100vw - 3rem)); }
.mega[data-cols="2"] { width: min(620px, calc(100vw - 3rem)); }
.mega[data-cols="3"] { width: min(840px, calc(100vw - 3rem)); }

/* ---- Dar panel: sayfaya değil, menü öğesine yaslanır ----------------
   Geniş panel (3-4 sütun) neredeyse ekran genişliğinde olduğu için
   sayfaya ortalanması doğru duruyor. Tek sütunluk 360 px'lik panel
   sayfaya ortalanınca ekranın ortasında asılı kalıyor, onu açan menü
   öğesi ise solda; ikisi arasındaki bağ kopuyor.

   Yaslama, öğeye PHP'den eklenen `--anchored` sınıfıyla açılıyor
   (bkz. partials/header.php `$darPanel`). `:has()` ile de yapılabilirdi
   ama destek olmayan tarayıcıda panel sol kenara fırlardı — sınıf
   deterministik. */

.mainnav__item--anchored { position: relative; }

.mainnav__item--anchored > .mega {
    left: 0;
    transform: translate(0, -8px);
}

.mainnav__item--anchored:hover > .mega,
.mainnav__item--anchored:focus-within > .mega {
    transform: translate(0, 0);
}

/* ---- Tek sütun ama çok satır: liste ikiye bölünür ------------------
   SU AGENCY'nin 360° menüsü tek başlık altında yedi hizmet taşıyor.
   360 px'lik tek sütunda bu yedi satırlık uzun bir dropdown oluyor;
   brief "dropdown yerine geniş ve modern bir mega menü" istiyor.

   Uydurma alt başlık eklemek yerine AYNI LİSTE iki kolona akıtılıyor:
   bilgi mimarisi değişmiyor, panel kısalıp genişliyor.

   `columns` kullanılıyor çünkü satır sayısı menüden geliyor ve
   değişebilir; grid'de satır sayısını elle yazmak gerekirdi. */

.mega[data-split="2"] { width: min(660px, calc(100vw - 3rem)); }

.mega[data-split="2"] .mega__col-title { margin-bottom: var(--sp-3); }

.mega[data-split="2"] ul {
    columns: 2;
    column-gap: var(--sp-6);
}

/* Bir satırın başlığı bir kolonda, açıklaması diğerinde kalmasın */
.mega[data-split="2"] li {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
}

@media (max-width: 720px) {
    .mega[data-split="2"] ul { columns: 1; }
}

.mega__grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--sp-4) var(--sp-5);
}

.mega__col-title {
    margin-bottom: var(--sp-2);
    padding-bottom: var(--sp-2);
    font-size: 10.5px;
}

.mega__link {
    padding: 6px 10px;
    margin-left: -10px;
    border-radius: var(--r-sm);
}

.mega__label { font-size: 13.5px; line-height: 1.3; }

/* Açıklama daha küçük ve daha dar satırlı: iki satırda kalması yeter,
   ink-600 beyaz üstünde 7,4:1 olduğu için 11,5 px'te de okunur. */
.mega__note { margin-top: 1px; font-size: 11.5px; line-height: 1.4; }

.mega__foot {
    gap: var(--sp-2);
    margin-top: var(--sp-5);
    padding-top: var(--sp-4);
}

/* ───────────────────────────────────────────────── satır ikonları */

/* İkon SOLDA, iki satırı birden kaplar: başlık ve açıklama aynı hizada
   başlar. Izgara ikonsuz satırda da aynı: eşleşmeyen madde boş bırakılır
   ama metin hizası kaymaz. */
.mega__link {
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr);
    column-gap: 9px;
    align-items: start;
}

.mega__icon {
    grid-area: 1 / 1 / span 2 / 2;
    width: 16px;
    height: 16px;
    margin-top: 1px;
    /* Beyaz üstünde brand-700 → 5,36:1; grafik öğe eşiği 3:1 */
    color: var(--brand-700);
    opacity: 0.85;
}

.mega__label,
.mega__note { grid-column: 2; }

.mega__link:hover .mega__icon { opacity: 1; }

/* Sosyal simgeler: renk düğmeden gelir (currentColor), her ölçüde net */
.soc-ikon {
    width: 18px;
    height: 18px;
    display: block;
}

/* Yuvarlak buton simgeyle daha dengeli duruyor */
.footer-social__item { border-radius: 50%; }