/* ══════════════════════════════════════════════════════════════════════════ PH YAZILIM — PUBLIC (ziyaretçi tarafı) bildirim modalı 06.08.2026 ────────────────────────────────────────────────────────────────────────── Markup : Views/Shared/_BildirimModal.cshtml (layout'ta her sayfada basılır) Davranış: /tema/js/bildirim.js → window.bildir(...) ⚠ SINIF ÖNEKİ "ph-bildirim-*": panelin /admin/bildirim.css dosyası ".bildirim-*" kullanır. İki dosya asla aynı sayfada yüklenmez ama önek ayrımı bilinçlidir — public tarafın koyu tema desteği vardır, panelinki yalnız açık temadır; ileride biri değiştiğinde diğeri sessizce bozulmasın. ⚠ RENKLER BOOTSTRAP DEĞİŞKENLERİNDEN (--bs-body-bg / --bs-body-color / --bs-border-color): tema anahtarı değerini çevirdiğinde kutu kendiliğinden uyar, ayrı bir koyu tema kuralı yazmak gerekmez. Türe göre renkler ise sabittir (yeşil/kırmızı/amber) — anlamları temaya göre değişmez. Vanilla overlay: Bootstrap modal'ı KULLANILMAZ. Sebep panelinkiyle aynı — açık bir Bootstrap modalinin (ör. Teklif Al) üstüne ikinci Bootstrap modali binince backdrop ve gövde kaydırma kilidi bozulurdu. Kendi z-index'i (2000 > Bootstrap 1055) ile her şeyin üstünde durur. ══════════════════════════════════════════════════════════════════════════ */ .ph-bildirim-ortu { position: fixed; inset: 0; z-index: 2000; /* Bootstrap modal (1055) ve backdrop dahil her katmanın üstü */ display: none; align-items: center; justify-content: center; padding: 16px; background: rgba(10, 14, 30, .58); backdrop-filter: blur(3px); } .ph-bildirim-ortu.goster { display: flex; animation: phBildirimAc .16s ease-out; } @keyframes phBildirimAc { from { opacity: 0; } to { opacity: 1; } } .ph-bildirim-kutu { width: 400px; max-width: 100%; max-height: calc(100vh - 32px); overflow-y: auto; padding: 30px 26px 24px; text-align: center; background: var(--bs-body-bg, #fff); color: var(--bs-body-color, #212529); border: 1px solid var(--bs-border-color, rgba(0, 0, 0, .12)); border-radius: 20px; box-shadow: 0 24px 60px rgba(10, 14, 30, .28); animation: phBildirimYukari .2s cubic-bezier(.22, 1, .36, 1); } @keyframes phBildirimYukari { from { transform: translateY(14px) scale(.97); opacity: 0; } to { transform: none; opacity: 1; } } .ph-bildirim-cember { width: 66px; height: 66px; margin: 0 auto; display: grid; place-items: center; border-radius: 50%; } .ph-bildirim-cember i { font-size: 2rem; line-height: 1; } .ph-bildirim-baslik { margin: 16px 0 0; font-family: 'Exo 2', 'Inter', sans-serif; font-size: 1.15rem; font-weight: 700; } /* white-space: pre-line — sunucu mesajındaki satır sonları korunur. */ .ph-bildirim-metin { margin: 10px 0 0; font-size: .95rem; line-height: 1.55; color: var(--bs-secondary-color, #5a6472); white-space: pre-line; } .ph-bildirim-baslik + .ph-bildirim-metin:empty { display: none; } /* ── Madde listesi (eksik/hatalı alanlar) ── Sola dayalıdır: kutunun geri kalanı ortalı olsa da liste okunurluğu için sol hizadır. */ .ph-bildirim-liste { margin: 16px 0 0; padding: 12px 14px; list-style: none; text-align: left; background: var(--bs-tertiary-bg, rgba(0, 0, 0, .035)); border-radius: 12px; max-height: 34vh; overflow-y: auto; } .ph-bildirim-liste li { position: relative; padding-left: 20px; font-size: .9rem; line-height: 1.5; } .ph-bildirim-liste li + li { margin-top: 7px; } .ph-bildirim-liste li::before { content: ""; position: absolute; left: 6px; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .55; } .ph-bildirim-butonlar { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 24px; } .ph-bildirim-tamam { min-width: 150px; padding: .62rem 1.4rem; border: none; border-radius: 50rem; color: #fff; font-weight: 600; font-size: .95rem; cursor: pointer; transition: background .15s, transform .15s; } .ph-bildirim-tamam:hover { transform: translateY(-1px); } .ph-bildirim-tamam:focus-visible { outline: 2px solid var(--bs-body-color, #212529); outline-offset: 3px; } /* İkincil kısayol — DAİMA "Tamam"ın altında, ikinci planda (en fazla 1 tane). */ .ph-bildirim-kisayol { display: none; padding: 2px; color: var(--bs-secondary-color, #6c757d); font-size: .86rem; font-weight: 500; text-decoration: underline; } .ph-bildirim-kisayol:hover { color: var(--bs-body-color, #212529); } /* ── Türe göre renk: basari yeşil · hata kırmızı · uyari amber · bilgi marka ── */ .ph-bildirim-kutu[data-tur="basari"] .ph-bildirim-cember { background: rgba(25, 135, 84, .14); color: #198754; } .ph-bildirim-kutu[data-tur="basari"] .ph-bildirim-tamam { background: #198754; } .ph-bildirim-kutu[data-tur="basari"] .ph-bildirim-tamam:hover { background: #157347; } .ph-bildirim-kutu[data-tur="hata"] .ph-bildirim-cember { background: rgba(220, 53, 69, .14); color: #dc3545; } .ph-bildirim-kutu[data-tur="hata"] .ph-bildirim-tamam { background: #dc3545; } .ph-bildirim-kutu[data-tur="hata"] .ph-bildirim-tamam:hover { background: #bb2d3b; } .ph-bildirim-kutu[data-tur="uyari"] .ph-bildirim-cember { background: rgba(245, 158, 11, .16); color: #d97706; } .ph-bildirim-kutu[data-tur="uyari"] .ph-bildirim-tamam { background: #d97706; } .ph-bildirim-kutu[data-tur="uyari"] .ph-bildirim-tamam:hover { background: #b45309; } .ph-bildirim-kutu[data-tur="bilgi"] .ph-bildirim-cember { background: rgba(13, 110, 253, .13); color: var(--secondary-color, #0d6efd); } .ph-bildirim-kutu[data-tur="bilgi"] .ph-bildirim-tamam { background: var(--secondary-color, #0d6efd); } .ph-bildirim-kutu[data-tur="bilgi"] .ph-bildirim-tamam:hover { background: #0b5ed7; } /* Koyu temada nötr zeminler biraz açılır (şeffaf siyah koyu üstünde kaybolurdu). */ [data-bs-theme="dark"] .ph-bildirim-liste { background: rgba(255, 255, 255, .06); } [data-bs-theme="dark"] .ph-bildirim-kutu { box-shadow: 0 24px 60px rgba(0, 0, 0, .55); } /* ── Mobil ── */ @media (max-width: 460px) { .ph-bildirim-kutu { padding: 26px 18px 20px; border-radius: 18px; } .ph-bildirim-cember { width: 58px; height: 58px; } .ph-bildirim-cember i { font-size: 1.7rem; } .ph-bildirim-tamam { width: 100%; } } /* Hareket azaltma tercihi: açılış animasyonları kapanır. */ @media (prefers-reduced-motion: reduce) { .ph-bildirim-ortu.goster, .ph-bildirim-kutu { animation: none; } .ph-bildirim-tamam:hover { transform: none; } }