/* Nef — site.css (legacy bundle) üzerine yazılan küçük arayüz bileşenleri.
   Legacy bundle'a dokunmamak için ayrı dosyada tutulur; base.html'de
   site.css'ten SONRA yüklenir. */

/* ---------------------------------------------------------------------------
   Bildirimler (form sonuçları) — templates/includes/messages.html
   --------------------------------------------------------------------------- */
.nef-toasts {
    position: fixed;
    top: 96px;                /* sabit header'ın altı */
    right: 24px;
    z-index: 1100;            /* uk-navbar (980) ve modal arka planının üstü */
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: min(420px, calc(100vw - 32px));
    pointer-events: none;     /* kartların dışı tıklamayı engellemesin */
}

.nef-toast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 16px 16px 18px;
    background: #fff;
    color: #1d1d1b;
    border: 1px solid #ededed;
    border-left: 3px solid #1d1d1b;
    border-radius: 4px;       /* tema: butonlarla aynı yarıçap */
    box-shadow: 0 12px 32px rgba(29, 29, 27, .12);
    font-family: "Chalet", "Poppins", -apple-system, BlinkMacSystemFont, sans-serif;
    animation: nef-toast-in .32s cubic-bezier(.16, .84, .44, 1) both;
}

.nef-toast.is-hiding {
    animation: nef-toast-out .28s ease forwards;
}

.nef-toast--success { border-left-color: #1aa053; }
.nef-toast--error   { border-left-color: #ec2147; }
.nef-toast--warning { border-left-color: #e8a33d; }

.nef-toast__icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #f5f5f5;
    color: #1d1d1b;
}
.nef-toast--success .nef-toast__icon { background: #eaf7f0; color: #1aa053; }
.nef-toast--error   .nef-toast__icon { background: #fdecef; color: #ec2147; }
.nef-toast--warning .nef-toast__icon { background: #fdf4e7; color: #e8a33d; }

.nef-toast__body { flex: 1 1 auto; min-width: 0; }

.nef-toast__title {
    display: block;
    margin-bottom: 2px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .01em;
    color: #1d1d1b;
}

.nef-toast__text {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: #55554f;
    overflow-wrap: anywhere;
}

.nef-toast__close {
    flex: 0 0 auto;
    padding: 2px;
    margin: -2px -4px 0 0;
    background: none;
    border: 0;
    color: #9b9b96;
    cursor: pointer;
    line-height: 0;
    transition: color .2s ease;
}
.nef-toast__close:hover { color: #1d1d1b; }

@keyframes nef-toast-in {
    from { opacity: 0; transform: translateY(-8px) scale(.98); }
    to   { opacity: 1; transform: none; }
}
@keyframes nef-toast-out {
    to { opacity: 0; transform: translateY(-6px); }
}

/* Mobil: alttaki sabit butonların üstünde, tam genişlik */
@media (max-width: 959.98px) {
    .nef-toasts {
        top: auto;
        bottom: 64px;
        left: 16px;
        right: 16px;
        width: auto;
    }
    @keyframes nef-toast-in {
        from { opacity: 0; transform: translateY(10px); }
        to   { opacity: 1; transform: none; }
    }
}

@media (prefers-reduced-motion: reduce) {
    .nef-toast, .nef-toast.is-hiding { animation: none; }
}


/* ---------------------------------------------------------------------------
   Oynatılamayan video bilgilendirmesi — pages/media_center.html
   Kaynağından kaldırılmış videolarda boş iframe yerine gösterilir.
   --------------------------------------------------------------------------- */
.nef-video-notice {
    box-sizing: border-box;
    width: min(560px, calc(100vw - 48px));
    padding: 40px 36px 34px;
    background: #fff;
    border-radius: 4px;
    text-align: center;
    font-family: "Chalet", "Poppins", -apple-system, BlinkMacSystemFont, sans-serif;
    color: #1d1d1b;
}

.nef-video-notice__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 20px;
    border-radius: 50%;
    background: #fdf4e7;
    color: #e8a33d;
}

.nef-video-notice__title {
    /* Ziyaretçiye tek satır gösterilir; açıklama paragrafı yok. */
    margin: 0 0 26px;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
    color: #1d1d1b;
}


.nef-video-notice__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    flex-wrap: wrap;
}

.nef-video-notice__btn {
    padding: 12px 26px;
    border: 0;
    border-radius: 4px;
    background: #1d1d1b;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .02em;
    cursor: pointer;
    transition: background .2s ease;
}
.nef-video-notice__btn:hover { background: #000; }

.nef-video-notice__link {
    font-size: 13px;
    font-weight: 600;
    color: #6b6b6b;
    text-decoration: none;
}
.nef-video-notice__link:hover { color: #1d1d1b; text-decoration: underline; }

/* Yalnızca panel kullanıcılarına görünen teknik sebep */
.nef-video-notice__debug {
    margin: 22px 0 0;
    padding-top: 14px;
    border-top: 1px solid #ededed;
    font-size: 12px;
    line-height: 1.5;
    color: #9a9a9a;
}

/* ---------------------------------------------------------------------------
   Hero görselinin en-boy oranı (SEO raporu — "Responsive Tasarım")

   site.css bu banner'larda `aspect-ratio`yu <picture> öğesine veriyor, ancak
   <picture> satır-içi (inline) bir öğedir; en-boy oranı satır-içi, yerine
   geçmeyen öğelerde uygulanmaz. Kural sessizce düşünce görsel doğal
   yüksekliğiyle akıyor: kaynak dosya dikey olduğunda (ör. Nef Koruköy'ün
   420x520 kapak görseli) hero, 870 px'lik ekranda 2359 px yer kaplıyordu.
   Oranı doğrudan görsele veriyoruz; `cover` ile kırpılır, bölüm taşmaz.
   --------------------------------------------------------------------------- */
.projectDetailBanner .title picture,
.hrBanner .title picture { display: block; }

.projectDetailBanner .title picture > img,
.hrBanner .title picture > img {
    width: 100%;
    height: 100%;
    aspect-ratio: 1440 / 640;
    object-fit: cover;
    object-position: center;
}

@media (max-width: 959.98px) {
    /* Mobilde daha dikey bir kadraj (mobil kapak görseli varsa o kullanılır). */
    .projectDetailBanner .title picture > img,
    .hrBanner .title picture > img { aspect-ratio: 375 / 420; }
}

/* Proje listesi sekmeleri — canlıda <span>, bizde sunucu tarafı filtreleme
   için <a>. UIkit'in genel bağlantı stilini (mavi + altı çizili hover)
   nötrleştirir; görünüm canlıdaki span ile aynı kalır. */
.projectListTabs .tabContent .tabSwiper a.tabLink,
.projectListTabs .tabContent .tabSwiper a.tabLink:hover {
    text-decoration: none;
}
.projectListTabs .tabContent .tabSwiper a.tabLink:hover {
    color: #fff;
    background: #b59a88;
    border-color: #b59a88;
}

/* İzin Merkezi çerez düğmesi — Nef bronzu.
   Sağlayıcının varsayılanı `#izinmerkezi-modal-button { background:#0069be }`
   (mavi), mono temalarında ise `#izinmerkezi-modal-button.izinmerkezi--mono-light`
   ile #181716. İkincisinin özgüllüğü (1,1,0) olduğu için düz `#id` kuralı onu
   yenemez — nitekim ilk denemede rengimiz uygulanmamıştı.

   `[id]` niteliği seçiciye bir "class ağırlığı" daha katar: `#id[id]` de (1,1,0).
   Eşit özgüllükte, bu dosya widget'ın CSS'inden SONRA yüklendiği için kaynak
   sırasıyla kazanır. Tema adına bağlı olmadığından panelde tema değişse de
   (mono-dark, light, elegant-black…) renk korunur; `!important` gerekmez.

   Hover: sağlayıcı mono temada #000000'a gidiyor, biz aynı tonun %15
   koyusunu kullanıyoruz (#835d43). Siyaha atlamak renk kimliğini kaybettiriyor;
   koyulaştırma hem tıklanabilirliği belli eder hem bronzda kalır. Beyaz çerez
   ikonuyla kontrast 5.81:1 — WCAG 1.4.11'in arayüz bileşenleri için istediği
   3:1'in rahat üstünde (taban renkte 4.49:1).

   NOT: İzin Merkezi widget görünümünün kendi tarafından yönetilmesini istiyor.
   Bu rengi orada tanımlatırlarsa aşağıdaki iki kural silinmelidir. */
#izinmerkezi-modal-button[id] {
    background-color: #9a6d4f;
}
#izinmerkezi-modal-button[id]:hover {
    background-color: #835d43;
}