/* ═══════════════════════════════════════════════════════════════
   PAGE DECOR — her sayfanın kendine özgü arka plan motifi.
   Gövdeye header.php tarafından `page-{anahtar}` sınıfı eklenir;
   motifler başlık bandının ::before / ::after katmanlarında çizilir.
   Tamamı saf CSS gradyan (ek istek yok), z-index 0/1 → içerik (z:2) üstte.
   ═══════════════════════════════════════════════════════════════ */

.page-header-band::before, .projects-hero::before, .ilan-gnav::before,
.page-header-band::after,  .projects-hero::after,  .ilan-gnav::after {
    content: '';
    position: absolute;
    pointer-events: none;
    z-index: 0;
}

/* Ortak: motif sağ tarafta, sola doğru siliniyor */
.page-header-band::before, .projects-hero::before, .ilan-gnav::before {
    top: 0; bottom: 0; right: 0;
    width: min(620px, 55%);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 42%);
            mask-image: linear-gradient(90deg, transparent, #000 42%);
}

/* ─────────────── KURUMSAL — mimari cephe ───────────────
   Dikey kolonlar + kat çizgileri; sağ üstte altın bir kat vurgusu. */
.page-about .page-header-band::before {
    background-image:
        repeating-linear-gradient(90deg, rgba(16,20,30,.11) 0 1px, transparent 1px 34px),
        repeating-linear-gradient(0deg,  rgba(16,20,30,.07) 0 1px, transparent 1px 26px);
}
.page-about .page-header-band::after {
    right: 8%; top: 22%;
    width: 148px; height: 168px;
    border: 1.5px solid rgba(var(--primary-rgb), .5);
    border-radius: var(--r-sm);
    background: repeating-linear-gradient(0deg, rgba(var(--primary-rgb), .13) 0 1px, transparent 1px 24px);
}

/* ─────────────── PROJELER — teknik çizim ───────────────
   Kesik yapı çizgileri (45°) + köşe hizalama işaretleri. */
.page-projects .projects-hero::before {
    background-image:
        repeating-linear-gradient(45deg, rgba(16,20,30,.075) 0 1px, transparent 1px 22px),
        repeating-linear-gradient(-45deg, rgba(var(--primary-rgb), .16) 0 1px, transparent 1px 64px);
}
.page-projects .projects-hero::after {
    right: 10%; top: 50%;
    width: 190px; height: 190px;
    transform: translateY(-50%) rotate(45deg);
    border: 1.5px dashed rgba(var(--primary-rgb), .45);
    border-radius: var(--r-sm);
}

/* ─────────────── İLANLAR — vitrin ızgarası ───────────────
   Kart benzeri yuvarlak bloklar. */
.page-ilanlar .ilan-gnav::before,
.page-ilanlar .page-header-band::before {
    background-image:
        repeating-linear-gradient(90deg, rgba(16,20,30,.09) 0 2px, transparent 2px 92px),
        repeating-linear-gradient(0deg,  rgba(16,20,30,.09) 0 2px, transparent 2px 68px);
    -webkit-mask-image: radial-gradient(110% 100% at 100% 50%, #000 34%, transparent 76%);
            mask-image: radial-gradient(110% 100% at 100% 50%, #000 34%, transparent 76%);
}
.page-ilanlar .ilan-gnav::after,
.page-ilanlar .page-header-band::after {
    right: 12%; top: 28%;
    width: 120px; height: 84px;
    border-radius: var(--r-sm);
    background: rgba(var(--primary-rgb), .13);
    box-shadow: 26px 30px 0 rgba(var(--primary-rgb), .09), 52px 60px 0 rgba(var(--primary-rgb), .05);
}

/* ─────────────── MOBİLYA — yumuşak kavisler ───────────────
   İç içe geçen geniş yaylar; mobilyanın organik hattı. */
.page-mobilya .page-header-band::before {
    background-image:
        repeating-radial-gradient(circle at 108% 50%, transparent 0 46px, rgba(16,20,30,.075) 46px 47px),
        repeating-radial-gradient(circle at 108% 50%, transparent 0 138px, rgba(var(--primary-rgb), .28) 138px 140px);
}
.page-mobilya .page-header-band::after {
    right: 14%; bottom: 18%;
    width: 132px; height: 132px; border-radius: 50% 50% 50% 8px;
    background: radial-gradient(circle at 35% 35%, rgba(var(--primary-rgb), .20), transparent 68%);
}

/* ─────────────── İLETİŞİM — sinyal halkaları ───────────────
   Sağ kenardan yayılan dalga halkaları. */
.page-contact .page-header-band::before {
    background-image:
        repeating-radial-gradient(circle at 100% 46%, transparent 0 34px, rgba(var(--primary-rgb), .20) 34px 35px),
        repeating-radial-gradient(circle at 100% 46%, transparent 0 102px, rgba(16,20,30,.06) 102px 103px);
}
.page-contact .page-header-band::after {
    right: 6%; top: 46%;
    width: 16px; height: 16px; border-radius: 50%;
    transform: translateY(-50%);
    background: var(--primary);
    box-shadow: 0 0 0 8px rgba(var(--primary-rgb), .18), 0 0 0 18px rgba(var(--primary-rgb), .08);
}

/* ─────────────── ARSA — parsel haritası ───────────────
   Kadastro benzeri kesik parsel sınırları + eş yükselti halkaları. */
.page-arsa .page-header-band::before {
    background-image:
        repeating-linear-gradient(0deg,  rgba(16,20,30,.08) 0 2px, transparent 2px 12px),
        repeating-linear-gradient(90deg, rgba(16,20,30,.08) 0 2px, transparent 2px 12px),
        repeating-radial-gradient(circle at 82% 58%, transparent 0 30px, rgba(var(--primary-rgb), .18) 30px 31px);
    background-size: 118px 96px, 118px 96px, auto;
}
.page-arsa .page-header-band::after {
    right: 16%; top: 26%;
    width: 128px; height: 104px;
    border: 1.5px dashed rgba(var(--primary-rgb), .55);
    border-radius: var(--r-xs);
    transform: skewX(-9deg);
}

/* ─────────────── SSS — konuşma balonları ───────────────
   Üst üste binen yumuşak daireler. */
.page-sss .page-header-band::before {
    background-image:
        radial-gradient(circle at 78% 32%, rgba(var(--primary-rgb), .20) 0 62px, transparent 63px),
        radial-gradient(circle at 92% 66%, rgba(16,20,30,.055) 0 44px, transparent 45px),
        radial-gradient(circle at 62% 74%, rgba(var(--primary-rgb), .11) 0 30px, transparent 31px);
}
.page-sss .page-header-band::after {
    right: 20%; top: 30%;
    width: 74px; height: 58px;
    border-radius: 18px 18px 18px 4px;
    border: 1.5px solid rgba(var(--primary-rgb), .45);
}

/* ─────────────── GİZLİLİK — güvenlik taraması ───────────────
   Eğik tarama çizgileri + nokta matrisi. */
.page-gizlilik .page-header-band::before {
    background-image:
        repeating-linear-gradient(-45deg, rgba(16,20,30,.07) 0 1px, transparent 1px 14px),
        radial-gradient(rgba(var(--primary-rgb), .30) 1.4px, transparent 1.5px);
    background-size: auto, 30px 30px;
}
.page-gizlilik .page-header-band::after {
    right: 12%; top: 50%;
    width: 108px; height: 128px;
    transform: translateY(-50%);
    border: 1.5px solid rgba(var(--primary-rgb), .45);
    border-radius: 14px 14px 46% 46%;
}

/* Küçük ekranlarda motifler kapanır — içerik nefes alsın */
@media (max-width: 900px) {
    .page-header-band::before, .projects-hero::before, .ilan-gnav::before,
    .page-header-band::after,  .projects-hero::after,  .ilan-gnav::after { display: none; }
}