/* ===== Tema ===== */
:root {
    --bg: #090413;
    --bg2: #0b0814;
    --card: #12081f;
    --muted: #c6c8d1;
    --accent: #ff00c8;
    --accent2: #ff7a00;
    --accent3: #ffd028;
    --ok: #00e676;
    --warn: #ffd028;
    --err: #ff2557;
    --radius: 12px;
    --shadow: 0 10px 28px rgba(0, 0, 0, .35);
}

/* ===== Reset / Baz ===== */
* {
    box-sizing: border-box
}

html,
body {
    margin: 0;
    padding: 0;
    background:
        radial-gradient(1300px 650px at -10% -20%, rgba(255, 0, 128, .22), transparent 60%) no-repeat,
        radial-gradient(1100px 700px at 110% 15%, rgba(255, 80, 0, .20), transparent 60%) no-repeat,
        radial-gradient(900px 480px at 50% 100%, rgba(124, 58, 237, .18), transparent 65%) no-repeat,
        linear-gradient(180deg, var(--bg), var(--bg2) 45%, var(--bg)) no-repeat;
    background-attachment: fixed, fixed, fixed, fixed;
    color: #e9eaf0;
    font: 14px/1.45 Inter, system-ui, Segoe UI, Roboto, Arial, sans-serif;
}

a {
    color: inherit;
    text-decoration: none
}

img {
    max-width: 100%;
    display: block
}

.hidden {
    display: none !important
}

.muted {
    color: var(--muted)
}

/* kenarlar: ~7vh (maks 140px) */
.container {
    padding-left: clamp(16px, 7vh, 140px);
    padding-right: clamp(16px, 7vh, 140px)
}

.page {
    padding: 20px 0
}

/* ===== Header / Footer (değişmedi) ===== */
.site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgba(16, 8, 24, .75);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, .08)
}

.nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0
}

.brand {
    font-weight: 900;
    font-size: 24px;
    background: linear-gradient(90deg, #ff0040, #ff7a00, #ffd028, #00ff87, #00f7ff, #7c3aed, #ff00c8, #ff0040);
    background-size: 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: rgbText 6s linear infinite
}

@keyframes rgbText {
    0% {
        background-position: 0
    }

    100% {
        background-position: 300%
    }
}

.btn {
    background: #161324;
    border: 1px solid rgba(255, 255, 255, .14);
    color: #fff;
    border-radius: 10px;
    padding: 8px 12px;
    cursor: pointer
}

.btn:hover {
    filter: brightness(1.06)
}

.btn.primary {
    background: linear-gradient(45deg, var(--accent2), var(--accent));
    border-color: rgba(255, 0, 128, .5)
}

.site-footer {
    margin-top: 26px;
    padding: 16px 0;
    border-top: 1px solid rgba(255, 255, 255, .08);
    text-align: center
}

/* ===== Anasayfa Profil Grid ===== */
/* Büyük ekranda kesin 5 kolon; kademeli düşür */
.grid-home {
    display: grid;
    gap: 12px
}

@media (min-width:1200px) {
    .grid-home {
        grid-template-columns: repeat(5, minmax(210px, 1fr))
    }
}

@media (min-width:900px) and (max-width:1199.98px) {
    .grid-home {
        grid-template-columns: repeat(4, minmax(200px, 1fr))
    }
}

@media (min-width:600px) and (max-width:899.98px) {
    .grid-home {
        grid-template-columns: repeat(3, minmax(190px, 1fr))
    }
}

@media (max-width:599.98px) {
    .grid-home {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
}

/* Kart sabit yükseklik */
.p-card {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    border: 1px solid rgba(156, 39, 176, .45);
    box-shadow: 0 0 10px rgba(156, 39, 176, .18)
}

.p-card .cover {
    width: 100%;
    height: 220px;
    object-fit: cover
}

.tile-link {
    position: absolute;
    inset: 0;
    z-index: 1
}

/* Şehir etiketi */
.p-city {
    position: absolute;
    left: 10px;
    top: 10px;
    z-index: 2;
    padding: 4px 8px;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    background: rgba(0, 0, 0, .45);
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 6px;
    backdrop-filter: blur(6px)
}

/* Kategori şeridi (buton) */
.p-job {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 56px;
    z-index: 3;
    height: 36px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    color: #eaeaea;
    font-weight: 700;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 8px;
    backdrop-filter: blur(6px)
}

.p-job:hover {
    filter: brightness(1.05)
}

.p-job::before {
    content: "";
    width: 0;
    height: 0;
    border-left: 8px solid var(--accent3);
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    margin-right: 2px
}

.p-dot {
    margin-left: auto;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 0 8px rgba(0, 255, 135, .6)
}

.p-dot.green {
    background: var(--ok)
}

.p-dot.yellow {
    background: var(--warn);
    box-shadow: 0 0 8px rgba(255, 208, 40, .6)
}

.p-dot.red {
    background: var(--err);
    box-shadow: 0 0 8px rgba(255, 37, 87, .6)
}

/* İsim barı */
.p-name {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 10px;
    z-index: 2;
    height: 40px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    font-weight: 800;
    color: #fff;
    background: rgba(0, 0, 0, .55);
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 8px
}

.p-card:hover {
    box-shadow: 0 0 14px rgba(255, 0, 160, .25)
}

/* ===== İlanlar toggle ===== */
.listings {
    margin-top: 18px
}

.toggle {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px
}

.listing {
    display: flex;
    gap: 12px;
    align-items: center;
    background: var(--card);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 12px;
    padding: 10px;
    margin: 8px 0
}

.listing .thumb {
    width: 110px;
    height: 80px;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, .18)
}

.listing .title {
    margin: 0 0 4px;
    font-weight: 800
}

.listing .content {
    margin: 0;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

/* ===== Kategori mini panel (sayfa içi) ===== */
.catsheet-back {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 60
}

.catsheet {
    width: clamp(280px, 60vw, 520px);
    max-height: 70vh;
    overflow: auto;
    background: linear-gradient(180deg, rgba(255, 0, 128, .06), transparent), var(--card);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 14px;
    padding: 14px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .45), 0 0 22px rgba(255, 0, 160, .25)
}

.catsheet h3 {
    margin: 0 0 10px
}

.cat-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px
}

.cat-item {
    padding: 8px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 10px;
    background: rgba(255, 255, 255, .05);
    cursor: pointer
}

.cat-item.active {
    border-color: var(--accent3);
    box-shadow: 0 0 12px rgba(255, 208, 40, .3)
}

.cat-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 10px
}

/* ===== Profil Sayfası RGB Çerçeve ===== */
@keyframes rgb-border-anim {
    0% {
        border-color: #ff00c8;
        box-shadow: 0 0 15px #ff00c844;
    }

    25% {
        border-color: #ff7a00;
        box-shadow: 0 0 15px #ff7a0044;
    }

    50% {
        border-color: #ffd028;
        box-shadow: 0 0 15px #ffd02844;
    }

    75% {
        border-color: #00ff87;
        box-shadow: 0 0 15px #00ff8744;
    }

    100% {
        border-color: #ff00c8;
        box-shadow: 0 0 15px #ff00c844;
    }
}

.rgb-border {
    border-width: 2px;
    border-style: solid;
    animation: rgb-border-anim 4s linear infinite;
}

/* ===== İlan Sayfası Galeri ===== */
.ilan-gallery {
    display: flex;
    justify-content: center;
    gap: 0;
    margin: 20px 0;
    padding: 0;
}

.ilan-gallery img {
    width: 120px;
    height: 90px;
    object-fit: cover;
    border-radius: 0;
    border: none;
}

.ilan-tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 16px;
}

.ilan-tags .tag {
    background: #221a31;
    border: 1px solid #4a386b;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 13px;
}

/* ===== Diğer Profiller/İlanlar Grid ===== */
.other-items-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
    margin-top: 16px;
}