/* ============================================================
AfyonIlan — MOR-BEYAZ TEMA (beyaz ağırlıklı · logo moru)
------------------------------------------------------------
style.css'ten SONRA yüklenir (renderHead). Hem :root tema
değişkenlerini hem de style.css'te hard-coded kalan koyu
header/footer yüzeylerini açık/mor karşılıklarıyla ezer.
Yalnızca admin "Mor-Beyaz" temasını seçince 'lenir.
Mor, logodaki (logoapp.png) örneklenen tondan türetildi:
500 #7623AF (logo · primary) AA beyaz üstünde 7.9:1
dark #611C90 (hover/aktif)
Metin (açık zeminde AA ≥ 4.5:1):
başlık #3A1060 · ana #55436E · ikincil #6F6190
Yüzeyler:
#FFFFFF header/kart · #FAF8FE gövde
#F4EEFB utility/catnav/footer · #ECE3F8 alt çubuk
Çizgi: #EBE2F7 ince · #E1D3F3 / #DDD0F0 orta
============================================================ */
:root {
--primary: #7623AF;
--primary-dark: #611C90;
--header-bg: #FFFFFF;
--header-border: #EBE2F7;
--link: #7623AF;
--bg: #FAF8FE;
--card: #FFFFFF;
--divider: #EBE2F7;
/* İçerik sayfası hero/CTA bandı → mor gradyan; primary (mor) üstü yazı → beyaz */
--hero-bg: linear-gradient(135deg, #3A1060 0%, #611C90 55%, #7623AF 100%);
--on-primary: #FFFFFF;
}
/* style.css'te değişken kullanmayan global yüzeyler */
body { background: #FAF8FE; }
a { color: #7623AF; }
/* ============ HEADER (beyaz) ============ */
.site-header {
background: #FFFFFF;
color: #3A1060;
border-bottom: 1px solid #EBE2F7;
box-shadow: 0 1px 4px rgba(118,35,175,.08);
}
/* Üst yardımcı şerit */
.header-utility { background: #F4EEFB; border-bottom: 1px solid #EBE2F7; color: #6F6190; }
.utility-link { color: #611C90; }
.utility-link:hover { color: #7623AF; }
.utility-static, .utility-static:hover { color: #6F6190; }
.utility-link-strong, .utility-greeting strong { color: #3A1060; }
.utility-greeting { color: #6F6190; }
.utility-divider { color: #D3C3EA; }
/* Menü / aksiyon ikon-butonları */
.header-menu-btn { color: #611C90; }
.header-menu-btn:hover { background: rgba(118,35,175,.08); }
.header-action-btn { color: #55436E; }
.header-action-btn:hover { background: rgba(118,35,175,.08); color: #3A1060; }
.header-action-login { color: #611C90; border-color: #DDD0F0; }
.header-action-login:hover { border-color: #7623AF; color: #7623AF; }
/* Arama butonu (mor zemin → beyaz ikon) */
.header-search button { color: #FFFFFF; }
/* "Ücretsiz İlan Ver" — mor zemin → beyaz yazı */
.btn-post-ad { color: #FFFFFF; }
.btn-post-ad:hover { color: #FFFFFF; }
/* Kategori navigasyon şeridi */
.header-catnav { background: #F4EEFB; border-top: 1px solid #EBE2F7; }
.catnav-link { color: #55436E; }
.catnav-link:hover { color: #3A1060; background: rgba(118,35,175,.07); }
/* Profil */
.profile-trigger { color: #3A1060; }
.profile-trigger:hover { background: rgba(118,35,175,.08); border-color: #DDD0F0; }
.profile-avatar { color: #FFFFFF; }
/* ============ FOOTER (açık / beyaz) ============ */
.site-footer { background: #F6F1FC; color: #55436E; }
.footer-cta {
background: linear-gradient(135deg, #EFE6FB 0%, #E9DDF7 100%);
border-bottom: 1px solid #E1D3F3;
}
.footer-cta-text h3 { color: #3A1060; }
.footer-cta-text p { color: #55436E; }
.footer-cta-btn-secondary { color: #611C90; border-color: #C9B6E6; }
.footer-cta-btn-secondary:hover { border-color: #7623AF; color: #7623AF; background: rgba(118,35,175,.07); }
.footer-col h4 { color: #3A1060; }
.footer-col a { color: #55436E; }
.footer-col p { color: #6F6190; }
.footer-about { color: #6F6190; }
.footer-social a { border-color: #DDD0F0; color: #7623AF; }
.footer-social a:hover { border-color: #7623AF; color: #7623AF; background: rgba(118,35,175,.08); }
.footer-col-contact .footer-contact-line { color: #55436E; }
.footer-col-contact .footer-contact-line a { color: #55436E; }
.footer-eids { background: rgba(118,35,175,.05); border: 1px solid #E1D3F3; }
.footer-eids strong { color: #3A1060; }
.footer-eids span { color: #6F6190; }
.footer-bottom { background: #ECE3F8; border-top: 1px solid #E1D3F3; }
.footer-bottom-inner { color: #6F6190; }
.footer-copy { color: #55436E; }
.footer-legal a { color: #55436E; }
.footer-legal span { color: #BCA8DC; }
.site-footer.site-footer-compact .footer-bottom { background: #ECE3F8; }
/* ============ SOL MENÜ (sidebar) ============ */
.sidebar { background: linear-gradient(180deg, #FFFFFF 0%, #FAF8FE 100%); }
.sidebar::-webkit-scrollbar-thumb { background: #DDD0F0; }
.sidebar::-webkit-scrollbar-thumb:hover { background: #C9B6E6; }
.sidebar-section { border-bottom-color: #F0EBF8; }
.sidebar-link { color: #574A6E; }
.sidebar-link i { color: #8A7CA8; }
/* sarı hover → mor tint */
.sidebar-link:hover { background: linear-gradient(90deg, rgba(118,35,175,.07) 0%, transparent 70%); }
/* Kategori başlıkları: yeşil/mavi → mor tonları (emlak koyu, vasıta açık) */
.cat-group-header.emlak { background: linear-gradient(135deg, #5B1A86 0%, #7623AF 100%); }
.cat-group-header.vasita { background: linear-gradient(135deg, #7623AF 0%, #9D4EDD 100%); }
.cat-list { background: #FBF9FE; }
.cat-list a { color: #574A6E; border-bottom-color: #F0EBF8; }
.cat-list a:hover { background: #FFFFFF; color: #2A0F45; }
/* sarı aktif arka plan + sarı pulse → mor */
.cat-list a.active {
background: linear-gradient(90deg, #F0E6FB 0%, #F7F2FD 60%, #FFFFFF 100%);
color: #2A0F45;
box-shadow: inset 0 0 0 1px rgba(118,35,175,.18);
}
.cat-list a.active::before {
box-shadow: 0 0 0 3px rgba(118,35,175,.25), 0 0 8px rgba(97,28,144,.45);
}
@keyframes cat-active-pulse {
0%, 100% { box-shadow: 0 0 0 3px rgba(118,35,175,.25), 0 0 8px rgba(97,28,144,.45); }
50% { box-shadow: 0 0 0 5px rgba(118,35,175,.10), 0 0 14px rgba(97,28,144,.65); }
}
.cat-list a .badge { background: #EDE4F8; color: #6F6190; }
.cat-list a:hover .badge { background: var(--primary); color: #FFFFFF; }
.cat-list a.active .badge { background: var(--primary-dark); color: #FFFFFF; }
/* ============ İLAN KARTLARI ============ */
/* turuncu hover kenarı → mor (badge-cat/satılık/kiralık/indirim renkleri
anlamsaldır; bilerek korunur. .price zaten var(--primary-dark) = mor) */
.listing-card:hover { border-color: rgba(118,35,175,.35); }
/* ============ MOR ZEMİN ÜSTÜ YAZI (koyu #333 → beyaz) ============ */
/* Bu öğeler mor (var --primary) zemin kullanır. Açık turuncu temada koyu
yazı okunuyordu; koyu mor zeminde okunmuyor → beyaza çevrilir.
(Buton, aktif sekme/sayfa, mesaj balonu, avatar baş harfleri, rozetler.) */
.btn-primary,
.btn-post-ad,
.home-cta-btn,
.filter-bar button,
.pagination .active,
.tab.active,
.status-tabs a.active,
.filter-tabs.satis-tabs .tab-all.active,
.chip input:checked + span,
.step-indicator .step.active span,
.step-bar .pill.active,
.msg.mine .msg-bubble,
.auth-mini-logo-tag,
.edit-photo-item .cover-badge,
.photo-cover-badge,
.pf2-btn-primary,
.tur-card.selected .tur-icon,
.tur-card:hover .tur-icon,
.tur-card.selected::after,
.attr-item:hover .attr-icon,
.edit-photo-actions .pa-cover:hover,
.profile-avatar,
.profile-avatar-lg,
.pf2-avatar-edit .profile-avatar-lg,
.pf2-avatar-cam,
.pf2-avatar-frame,
.conv-avatar,
.msg-avatar,
.myads-avatar,
.contact-user-avatar,
.header-search button {
color: #FFFFFF;
}
/* ============ Turuncu gradyan → mor gradyan ============ */
.home-cta-btn { background: linear-gradient(135deg, #7623AF 0%, #9D4EDD 100%); }
.seo-block-icon { background: linear-gradient(135deg, #7623AF 0%, #9D4EDD 100%); }
.section-bar::before,
.section-bar-featured::before { background: linear-gradient(180deg, #7623AF 0%, #5B1A86 100%); }
.step-bar .pill.active { background: linear-gradient(90deg, #7623AF 0%, #B57BE0 50%, #7623AF 100%); }
/* ============================================================
EK DÜZELTMELER — mor temada turuncu/koyu kalan yüzeyler
style.css'ten SONRA geldiği için bu kurallar kazanır.
(Acil hover görünmezliği, auth sayfaları, iletişim hapları)
============================================================ */
/* ---- ACİL ACİL (sol menü) ----
theme-mor'un yukarıdaki genel ".sidebar-link:hover" kuralı, style.css'teki
acil hover kırmızı zeminini eziyordu → hover'da beyaz yazı ~beyaz zeminde
görünmez kalıyordu. Acil'e özgü hover'ı burada kesin olarak geri veririz. */
.sidebar-link-acil:hover {
background: linear-gradient(135deg, #E53935 0%, #C62828 100%) !important;
color: #fff !important;
}
.sidebar-link-acil:hover .acil-text,
.sidebar-link-acil:hover .acil-flame i { color: #fff !important; }
/* ---- AUTH: sol marka paneli (turuncu → mor) ---- */
.auth-brand {
background: linear-gradient(160deg, #7623AF 0%, #611C90 50%, #4A1577 100%);
color: #FFFFFF;
}
.auth-brand::after { background: radial-gradient(circle, rgba(0,0,0,0.18) 0%, transparent 70%); }
.auth-brand h2,
.auth-brand .feature strong { color: #FFFFFF; }
.auth-brand p,
.auth-brand .feature { color: rgba(255,255,255,0.90); }
.auth-brand-bot { color: rgba(255,255,255,0.72); }
/* h2 içindeki shimmer vurgu: amber shimmer → beyaz/lavanta shimmer */
.auth-brand-mid h2 em {
background: linear-gradient(120deg, #FFFFFF 0%, #E9D8FF 30%, #FFFFFF 60%, #E9D8FF 100%);
background-size: 200% auto;
-webkit-background-clip: text; background-clip: text;
color: transparent;
}
/* koyu hap rozetler + içlerindeki (eskiden mor) ikon → şeffaf-beyaz hap + beyaz ikon */
.auth-brand-top span,
.auth-brand .feature i,
.auth-brand .features-numbered .feat-num,
.auth-brand .badge-eids {
background: rgba(255,255,255,0.16);
color: #FFFFFF;
}
/* alt güven istatistik şeridi */
.auth-brand-stats { background: rgba(0,0,0,0.22); border-color: rgba(255,255,255,0.14); }
.auth-brand-stat strong { color: #FFFFFF; }
.auth-brand-stat span { color: rgba(255,255,255,0.72); }
/* body zemini turuncu radial → mor */
body.auth-page {
background:
radial-gradient(1100px 500px at 88% -10%, rgba(118,35,175,0.13), transparent 60%),
radial-gradient(900px 500px at -10% 110%, rgba(118,35,175,0.09), transparent 60%),
linear-gradient(180deg, #FAF8FE 0%, #F1ECF8 100%);
}
/* ---- AUTH: birincil "Giriş Yap / Gönder" butonu (amber → mor) ---- */
.auth-btn {
background: linear-gradient(180deg, #7623AF 0%, #611C90 100%);
color: #FFFFFF;
box-shadow: 0 2px 6px rgba(118,35,175,0.40);
}
.auth-btn:hover { box-shadow: 0 4px 12px rgba(118,35,175,0.50); }
/* "Kaydol" animasyonlu butonun amber ikon dairesi → mor + beyaz ikon.
.reg-icon'un kendisi — style.css color:#1a1a1a idi
(amber daire üstünde koyu). Mor daire üstünde okunmuyordu → beyaz. */
.auth-btn-register .reg-icon { background: linear-gradient(180deg, #9D4EDD 0%, #7623AF 100%); color: #FFFFFF; }
/* ---- AUTH: adım göstergesi aktif daire (amber → mor) ---- */
.step-item.current .step-dot {
background: linear-gradient(180deg, #7623AF, #611C90);
color: #FFFFFF;
border-color: #611C90;
box-shadow: 0 0 0 4px rgba(118,35,175,0.18), 0 4px 12px rgba(97,28,144,0.30);
}
.step-item.current .step-label { color: #3A1060; }
/* aktif daire nabız animasyonunu mora çevir (aynı isimle yeniden tanımlanır → kazanır) */
@keyframes step-pulse {
0%, 100% { box-shadow: 0 0 0 4px rgba(118,35,175,0.18), 0 4px 12px rgba(97,28,144,0.30); }
50% { box-shadow: 0 0 0 8px rgba(118,35,175,0.05), 0 4px 12px rgba(97,28,144,0.30); }
}
/* ---- AUTH: "Dikkat" bilgi kutusu (amber → mor) ---- */
.auth-notice {
background:
linear-gradient(135deg, rgba(118,35,175,0.08) 0%, rgba(118,35,175,0.03) 100%),
#FBF9FE;
border-color: #DAC9F2;
color: #4A2A6E;
}
.auth-notice::before { background: radial-gradient(ellipse, rgba(118,35,175,0.22) 0%, transparent 70%); }
.auth-notice-body { color: #4A2A6E; }
.auth-notice-body strong { color: #3A1060; }
/* ---- AUTH: "beni hatırla" onay kutusu ---- */
.auth-check input:checked + .auth-check-box i { color: #FFFFFF; }
.auth-check input:focus-visible + .auth-check-box { box-shadow: 0 0 0 3px rgba(118,35,175,0.32); }
/* ---- İLAN DETAY: iletişim hap ikonları (amber → mor) ---- */
.contact-pill-icon { background: linear-gradient(180deg, #9D4EDD 0%, #7623AF 100%); color: #FFFFFF; }
.contact-pill:hover { background: rgba(118,35,175,0.06); }
/* ---- PROFİL: hover'da koyu metnin geri gelmesi (mor zemin üstü siyah) ----
theme-mor taban .pf2-btn-primary / .pf2-avatar-cam'ı beyaza çeviriyor ama
style.css'teki :hover #1a1a1a'yı geri yüklüyordu → hover'da mor-üstü-siyah. */
.pf2-btn-primary:hover,
.pf2-avatar-edit:hover .pf2-avatar-cam { color: #FFFFFF; }
/* ---- ANASAYFA/SEO: kalan soluk amber tint'ler → mor ---- */
.section-bar:hover .home-cat-count { background: rgba(118,35,175,0.08); color: var(--primary-dark); }
.section-bar .see-all:hover { background: rgba(118,35,175,0.08); color: var(--primary-dark); }
.seo-block::before { background: radial-gradient(circle, rgba(118,35,175,0.10) 0%, transparent 70%); }