/* 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 — sağlayıcının varsayılanı #0069be (mavi),
   Nef paletinde yeri yok. #9a6d4f sitenin kendi vurgu rengidir
   (`.fixed-buttons > div:first-child` ve tarihçe sekmelerinin aktif hâli).
   Widget'ın CSS'i <head>'de bu dosyadan ÖNCE yüklenir ve kuralı
   `!important` taşımaz; aynı özgüllükte (ID) sonra geldiğimiz için kazanır. */
#izinmerkezi-modal-button {
    background-color: #9a6d4f;
}

/* ---------------------------------------------------------------------------
   GEÇİCİ — İzin Merkezi'nin eksik `mono-light` teması.

   Panelde seçili tema `mono-light`; widget bunu doğrulamadan sınıfa çeviriyor
   (`class = izinmerkezi--${theme}`), ama sağlayıcının CSS'inde mono temaların
   HİÇBİRİ yok — tanımlı olanlar: light, light-funky, dark, dark-turquoise,
   elegant-black. Eşleşen sınıf olmayınca bütün `--izinmerkezi-*` değişkenleri
   tanımsız kalıyor ve rıza banner'ı renksiz/bozuk çiziliyor.

   Aşağıdaki blok, sağlayıcının kendi `light` teması `mono-light` adına
   kopyalanmasıdır (44 değişken + 6 tema kapsamlı buton kuralı, olduğu gibi).
   Kendi tasarımımız değildir; paletle oynanmamıştır.

   KALDIRMA KOŞULU: sağlayıcı mono temaların CSS'ini yayınlarsa ya da panelde
   tema desteklenen bir değere çekilirse bu bloğun tamamı silinmelidir —
   aksi hâlde bizim kopyamız (sonra yüklendiği için) gerçek temayı ezer.
   Kontrol:  curl -s https://app2.izinmerkezi.com/static/js/widgets/nef-web-tr/nef-web-tr.css | grep -c mono
   --------------------------------------------------------------------------- */
.izinmerkezi--mono-light  {
    --izinmerkezi-modal-border-radius: .5rem;
    --izinmerkezi-btn-border-radius: .4rem;
    --izinmerkezi-modal-transition-duration: .25s;
    --izinmerkezi-link-color: var(--izinmerkezi-btn-primary-bg);
    --izinmerkezi-modal-margin: 1rem;
    --izinmerkezi-z-index: 2147483647;
    --izinmerkezi-bg: #fff;
    --izinmerkezi-primary-color: #2c2f31;
    --izinmerkezi-secondary-color: #5e6266;
    --izinmerkezi-btn-primary-bg: #30363c;
    --izinmerkezi-btn-primary-color: #fff;
    --izinmerkezi-btn-primary-border-color: var(--izinmerkezi-btn-primary-bg);
    --izinmerkezi-btn-primary-hover-bg: #000;
    --izinmerkezi-btn-primary-hover-color: #fff;
    --izinmerkezi-btn-primary-hover-border-color: var(--izinmerkezi-btn-primary-hover-bg);
    --izinmerkezi-btn-secondary-bg: #eaeff2;
    --izinmerkezi-btn-secondary-color: var(--izinmerkezi-primary-color);
    --izinmerkezi-btn-secondary-border-color: var(--izinmerkezi-btn-secondary-bg);
    --izinmerkezi-btn-secondary-hover-bg: #d4dae0;
    --izinmerkezi-btn-secondary-hover-color: #000;
    --izinmerkezi-btn-secondary-hover-border-color: #d4dae0;
    --izinmerkezi-separator-border-color: #f0f4f7;
    --izinmerkezi-toggle-on-bg: var(--izinmerkezi-btn-primary-bg);
    --izinmerkezi-toggle-off-bg: #667481;
    --izinmerkezi-toggle-on-knob-bg: #fff;
    --izinmerkezi-toggle-off-knob-bg: var(--izinmerkezi-toggle-on-knob-bg);
    --izinmerkezi-toggle-enabled-icon-color: var(--izinmerkezi-bg);
    --izinmerkezi-toggle-disabled-icon-color: var(--izinmerkezi-bg);
    --izinmerkezi-toggle-readonly-bg: #d5dee2;
    --izinmerkezi-toggle-readonly-knob-bg: #fff;
    --izinmerkezi-toggle-readonly-knob-icon-color: var(--izinmerkezi-toggle-readonly-bg);
    --izinmerkezi-section-category-border: var(--izinmerkezi-cookie-category-block-bg);
    --izinmerkezi-cookie-category-block-bg: #f0f4f7;
    --izinmerkezi-cookie-category-block-border: #f0f4f7;
    --izinmerkezi-cookie-category-block-hover-bg: #e9eff4;
    --izinmerkezi-cookie-category-block-hover-border: #e9eff4;
    --izinmerkezi-cookie-category-expanded-block-bg: transparent;
    --izinmerkezi-cookie-category-expanded-block-hover-bg: #dee4e9;
    --izinmerkezi-overlay-bg: rgba(0, 0, 0, .65);
    --izinmerkezi-webkit-scrollbar-bg: var(--izinmerkezi-section-category-border);
    --izinmerkezi-webkit-scrollbar-hover-bg: var(--izinmerkezi-btn-primary-hover-bg);
    --izinmerkezi-footer-bg: var(--izinmerkezi-btn-secondary-bg);
    --izinmerkezi-footer-color: var(--izinmerkezi-secondary-color);
    --izinmerkezi-footer-border-color: #e4eaed;
    --izinmerkezi-pm-toggle-border-radius: 4em
}
.izinmerkezi--mono-light.cookie-banner .izinmerkezi-btn-primary, .izinmerkezi--mono-light.preferences-modal .izinmerkezi-btn-primary, .cookie-banner.izinmerkezi--mono-light .izinmerkezi-btn-primary, .preferences-modal.izinmerkezi--mono-light .izinmerkezi-btn-primary  {
    background: var(--izinmerkezi-btn-primary-bg, #30363c) !important;
    color: var(--izinmerkezi-btn-primary-color, #fff) !important;
    border: 1px solid var(--izinmerkezi-btn-primary-border-color, var(--izinmerkezi-btn-primary-bg)) !important;
}
.izinmerkezi--mono-light.cookie-banner .izinmerkezi-btn-primary:hover, .izinmerkezi--mono-light.preferences-modal .izinmerkezi-btn-primary:hover, .cookie-banner.izinmerkezi--mono-light .izinmerkezi-btn-primary:hover, .preferences-modal.izinmerkezi--mono-light .izinmerkezi-btn-primary:hover  {
    background: var(--izinmerkezi-btn-primary-hover-bg, #000) !important;
    color: var(--izinmerkezi-btn-primary-hover-color, #fff) !important;
    border-color: var(--izinmerkezi-btn-primary-hover-border-color, var(--izinmerkezi-btn-primary-hover-bg)) !important;
}
.izinmerkezi--mono-light.cookie-banner .izinmerkezi-btn-secondary, .izinmerkezi--mono-light.preferences-modal .izinmerkezi-btn-secondary, .cookie-banner.izinmerkezi--mono-light .izinmerkezi-btn-secondary, .preferences-modal.izinmerkezi--mono-light .izinmerkezi-btn-secondary  {
    background: var(--izinmerkezi-btn-secondary-bg, #eaeff2) !important;
    color: var(--izinmerkezi-btn-secondary-color, var(--izinmerkezi-primary-color)) !important;
    border: 1px solid var(--izinmerkezi-btn-secondary-border-color, var(--izinmerkezi-btn-secondary-bg)) !important;
}
.izinmerkezi--mono-light.cookie-banner .izinmerkezi-btn-secondary:hover, .izinmerkezi--mono-light.preferences-modal .izinmerkezi-btn-secondary:hover, .cookie-banner.izinmerkezi--mono-light .izinmerkezi-btn-secondary:hover, .preferences-modal.izinmerkezi--mono-light .izinmerkezi-btn-secondary:hover  {
    background: var(--izinmerkezi-btn-secondary-hover-bg, #d4dae0) !important;
    color: var(--izinmerkezi-btn-secondary-hover-color, #000) !important;
    border-color: var(--izinmerkezi-btn-secondary-hover-border-color, #d4dae0) !important;
}
.izinmerkezi--mono-light.cookie-banner .izinmerkezi-btn-customize, .izinmerkezi--mono-light.preferences-modal .izinmerkezi-btn-customize, .cookie-banner.izinmerkezi--mono-light .izinmerkezi-btn-customize, .preferences-modal.izinmerkezi--mono-light .izinmerkezi-btn-customize  {
    background: #17a2b8 !important;
    color: #fff !important;
    border: 1px solid #17a2b8 !important;
}
.izinmerkezi--mono-light.cookie-banner .izinmerkezi-btn-customize:hover, .izinmerkezi--mono-light.preferences-modal .izinmerkezi-btn-customize:hover, .cookie-banner.izinmerkezi--mono-light .izinmerkezi-btn-customize:hover, .preferences-modal.izinmerkezi--mono-light .izinmerkezi-btn-customize:hover  {
    background: #138496 !important;
    color: #fff !important;
    border-color: #138496 !important;
}