.lacivert-baslik { display: block; text-align: center; font-weight: 900; color: #172554; font-size: 18px; margin-bottom: 15px; }
.arama-kutusu-grubu { position: relative; display: flex; gap: 5px; max-width: 400px; margin: 0 auto; }
#wpc_renk_ara { flex: 1; padding: 12px; border: 2px solid #1e3a8a; border-radius: 8px; outline: none; font-weight: 600; }
#wpc_ara_btn { padding: 10px 25px; background: #172554; color: white; border: none; border-radius: 8px; font-weight: 800; cursor: pointer; }

.modal { display: none; position: fixed; z-index: 99999; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.85); backdrop-filter: blur(5px); }
.modal-icerik { background: white; margin: 5% auto; width: 90%; max-width: 500px; border-radius: 15px; position: relative; overflow: hidden; }
.kapat { position: absolute; right: 15px; top: 10px; font-size: 35px; color: #fff; cursor: pointer; z-index: 10; text-shadow: 0 0 5px #000; }

.galeri-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-height: 400px; overflow-y: auto; padding: 10px; }
.renk-kart { border: 1px solid #ddd; padding: 8px; border-radius: 8px; text-align: center; cursor: pointer; }
.renk-kart img { width: 100%; border-radius: 5px; }
.modal-bilgi { padding: 20px; text-align: center; }
.modal-bilgi h3 { color: #172554; font-weight: 800; margin-bottom: 5px; }
.geri-btn { background: #1e3a8a; color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; font-weight: bold; }
.arama-notu {
    text-align: center;
    font-size: 13px;
    color: #64748b;
    margin-top: 10px;
    font-weight: 600;
}