/* ==========================================================================
   TanselTözün — "Alpin" tasarım sistemi
   Palet, Kartepe hero fotoğrafından türetildi: soğuk mavi gölgeler,
   kar beyazı yüzeyler, tek sıcak vurgu olarak ahşap kızılı.
   Tüm metin renkleri WCAG AA (>= 4.5:1) doğrulanmıştır.
   ========================================================================== */

:root {
    /* Yüzeyler */
    --paper: #FFFFFF; /* kart ve panel zemini */
    --snow: #F4F7F9; /* sayfa zemini, bölüm dolgusu */
    --line: #E2E7EC; /* saç teli kenarlık */
    /* Metin */
    --ink: #101B26; /* birincil metin, koyu bölümler   17.4:1 */
    --slate: #4A5C6E; /* ikincil metin                    6.9:1 */
    --mist: #5F7488; /* üçüncül / meta metin             4.8:1 */
    /* Vurgular */
    --ember: #A84E28; /* ahşap kızılı — CTA, rozet        5.6:1 */
    --ember-dark: #8A3F1F; /* hover                            7.5:1 */
    --pine: #1F4034; /* koyu ladin — ikincil rozet      11.4:1 */
    /* Ölçek */
    --radius: 3px;
    --radius-lg: 6px;
    --shell: 1240px;
    --gut: clamp(20px, 5vw, 64px);
    /* Gölgeler — hafif ve soğuk tonlu */
    --shadow-sm: 0 1px 2px rgba(16,27,38,.05);
    --shadow-md: 0 4px 16px rgba(16,27,38,.07);
    --shadow-lg: 0 18px 48px rgba(16,27,38,.13);
    --ease: cubic-bezier(.22,.61,.36,1);
}

/* --------------------------------------------------------------- temel -- */

*, *::before, *::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--snow);
    color: var(--ink);
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
    font-family: 'Newsreader', 'Inter', Georgia, 'Times New Roman', serif;
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: var(--ink);
    margin: 0;
}

p {
    margin: 0;
}

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

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

/* Klavye kullanıcıları için görünür odak — erişilebilirlik şartı */
:focus-visible {
    outline: 2px solid var(--ember);
    outline-offset: 3px;
    border-radius: 2px;
}

.shell {
    max-width: var(--shell);
    margin-inline: auto;
    padding-inline: var(--gut);
}

/* Lira simgesi her zaman Inter'den gelir; Newsreader'ın U+20BA glifi bozuk. */
.tl {
    font-family: 'Inter', system-ui, sans-serif;
    font-weight: inherit;
}

.eyebrow {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ember);
}

/* Yalnızca ekran okuyucular için */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* ------------------------------------------------------------- butonlar -- */

.btn-a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 13px 26px;
    border: 1px solid transparent;
    border-radius: var(--radius);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .01em;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}

    .btn-a:active {
        transform: translateY(1px);
    }

.btn-a--ember {
    background: var(--ember);
    color: #fff;
}

    .btn-a--ember:hover {
        background: var(--ember-dark);
        color: #fff;
    }

.btn-a--ink {
    background: var(--ink);
    color: #fff;
}

    .btn-a--ink:hover {
        background: #1D3145;
        color: #fff;
    }

.btn-a--outline {
    background: transparent;
    border-color: var(--line);
    color: var(--ink);
}

    .btn-a--outline:hover {
        border-color: var(--ink);
        background: var(--paper);
    }

/* Koyu zemin üzerinde ters kontrast */
.btn-a--ghost {
    background: rgba(255,255,255,.10);
    border-color: rgba(255,255,255,.45);
    color: #fff;
    backdrop-filter: blur(6px);
}

    .btn-a--ghost:hover {
        background: rgba(255,255,255,.20);
        border-color: #fff;
        color: #fff;
    }

.btn-a--danger {
    background: #9B2C2C;
    color: #fff;
}

    .btn-a--danger:hover {
        background: #7F2323;
        color: #fff;
    }

.btn-a--sm {
    padding: 9px 16px;
    font-size: 13px;
}

.btn-a--block {
    width: 100%;
}

/* --------------------------------------------------------------- başlık -- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    transition: background-color .3s var(--ease), border-color .3s var(--ease);
}

/* Ana sayfada başlık hero'nun üzerinde şeffaf durur */
.site-header--over {
    position: fixed;
    left: 0;
    right: 0;
    background: transparent;
    border-bottom-color: transparent;
}

    /* Sayfa kaydırılınca site.js bu sınıfı ekler */
    .site-header--over.is-stuck {
        background: rgba(255,255,255,.94);
        backdrop-filter: blur(10px);
        border-bottom-color: var(--line);
    }

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 76px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.brand__mark {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: block;
}


.brand__name {
    font-family: 'Newsreader', 'Inter', Georgia, serif;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1;
    color: var(--ink);
    white-space: nowrap;
    
    transform: translateY(3px); 
}
.brand__first {
    color: var(--ink);
    color: var(--guter);
}

.brand__last {
    color: var(--mist);
    color: var(--mist);
}
.brand__mark-letters {
    fill: var(--ink);
}

.site-header--over:not(.is-stuck) .brand__mark-letters {
    fill: #F5F8FA;
}
.site-header--over:not(.is-stuck) .brand__first {
    color: #fff;
}

.site-header--over:not(.is-stuck) .brand__last {
    color: var(--mist);
}

.site-header--over:not(.is-stuck) .brand__mark [stroke] {
    stroke: #fff;
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

.site-nav__link {
    position: relative;
    padding: 9px 14px;
    font-size: 14.5px;
    font-weight: 500;
    color: var(--slate);
    border-radius: var(--radius);
    transition: color .2s var(--ease), background-color .2s var(--ease);
}

    .site-nav__link:hover {
        color: var(--ink);
        background: var(--snow);
    }

    .site-nav__link.is-active {
        color: var(--ink);
        font-weight: 600;
    }

        .site-nav__link.is-active::after {
            content: "";
            position: absolute;
            left: 14px;
            right: 14px;
            bottom: 2px;
            height: 2px;
            background: var(--ember);
        }

.site-header--over:not(.is-stuck) .site-nav__link {
    color: rgba(255,255,255,.85);
}

    .site-header--over:not(.is-stuck) .site-nav__link:hover,
    .site-header--over:not(.is-stuck) .site-nav__link.is-active {
        color: #fff;
        background: rgba(255,255,255,.12);
    }

.site-header__actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--ink);
    font-size: 20px;
    cursor: pointer;
}

.site-header--over:not(.is-stuck) .nav-toggle {
    color: #fff;
    border-color: rgba(255,255,255,.45);
    background: rgba(255,255,255,.10);
}

@media (max-width: 900px) {
    .site-nav {
        display: none;
    }

    .nav-toggle {
        display: inline-flex;
    }
}

/* ------------------------------------------------------------- yan menü -- */

.offcanvas {
    background: var(--paper);
    color: var(--ink);
}

.side-menu__head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px var(--gut);
    border-bottom: 1px solid var(--line);
}

.side-menu__body {
    padding: 24px var(--gut) 40px;
}

.side-menu__list {
    list-style: none;
    margin: 0 0 32px;
    padding: 0;
    display: grid;
    gap: 2px;
}

.side-menu__link {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 12px;
    margin-inline: -12px;
    border-radius: var(--radius);
    font-size: 15.5px;
    font-weight: 500;
    color: var(--ink);
    transition: background-color .2s var(--ease);
}

    .side-menu__link:hover,
    .side-menu__link.is-active {
        background: var(--snow);
    }

    .side-menu__link i {
        color: var(--ember);
        font-size: 18px;
        width: 22px;
        text-align: center;
    }

.side-menu__section {
    padding-top: 26px;
    border-top: 1px solid var(--line);
}

.side-menu__label {
    font-family: 'Inter', sans-serif;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ember);
    margin-bottom: 16px;
}

.contact-row {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
    font-size: 14px;
    color: var(--slate);
    line-height: 1.6;
}

    .contact-row i {
        color: var(--mist);
        font-size: 16px;
        margin-top: 3px;
    }

    .contact-row strong {
        display: block;
        color: var(--ink);
        font-size: 12px;
        font-weight: 600;
        letter-spacing: .05em;
        text-transform: uppercase;
        margin-bottom: 2px;
    }

    .contact-row a:hover {
        color: var(--ember);
        text-decoration: underline;
    }

/* ----------------------------------------------------------------- hero -- */

.hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: min(92vh, 860px);
    overflow: hidden;
    background: var(--ink);
}

.hero__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 62% center;
}

/* İki katmanlı örtü: dikey katman başlık ve alt şeridi, yatay katman ise
   metnin durduğu sol tarafı karartır. Fotoğraftaki kar çok parlak olduğu
   için tek katman beyaz metni okunmaz bırakıyordu. */
.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    /* Yatay katman metnin durduğu sol yarıyı örter, dikey katmanın dibi
       bilerek açık bırakıldı: eskiden ikisi alt-solda üst üste binip
       fotoğrafı %90 karartıyordu. Sağdaki kulübe neredeyse hiç örtülmez. */
    background: linear-gradient(90deg, rgba(16,27,38,.60) 0%, rgba(16,27,38,.50) 38%, rgba(16,27,38,.12) 64%, rgba(16,27,38,0) 78%), linear-gradient(180deg, rgba(16,27,38,.30) 0%, rgba(16,27,38,.02) 30%, rgba(16,27,38,.05) 60%, rgba(16,27,38,.32) 100%);
}

/* Dar ekranda metin tam genişlikte durduğu için yatay katman işe yaramaz;
   onun yerine dikey karartmayı bir miktar güçlendiriyoruz. */
@media (max-width: 860px) {
    .hero::after {
        background: linear-gradient(180deg, rgba(16,27,38,.46) 0%, rgba(16,27,38,.50) 30%, rgba(16,27,38,.58) 58%, rgba(16,27,38,.66) 100%);
    }
}

/* Örtü hafifletildiği için okunabilirliği gölge taşıyor: fotoğrafın parlak
   kar bölgeleri üzerinde bile beyaz metni ayakta tutar, ama düz karartma
   gibi tüm kareyi soldurmaz. */
.hero__eyebrow,
.hero__title,
.hero__sub,
.hero__stat-num,
.hero__stat-label {
    text-shadow: 0 1px 3px rgba(16,27,38,.45), 0 3px 18px rgba(16,27,38,.55);
}

.hero__content {
    position: relative;
    z-index: 2;
    width: 100%;
    padding-block: 0 clamp(48px, 8vh, 88px);
}

.hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    margin-bottom: 18px;
}

    .hero__eyebrow::before {
        content: "";
        width: 34px;
        height: 1px;
        background: var(--ember);
    }

.hero__title {
    font-size: clamp(40px, 6.4vw, 76px);
    font-weight: 400;
    line-height: 1.03;
    letter-spacing: -0.025em;
    color: #fff;
    max-width: 15ch;
    margin-bottom: 20px;
    text-wrap: balance;
}

    .hero__title em {
        font-style: italic;
        color: #F0C9AE;
    }

.hero__sub {
    color: rgba(255,255,255,.88);
    font-size: clamp(15px, 1.5vw, 18px);
    line-height: 1.65;
    max-width: 50ch;
    margin-bottom: 32px;
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* Hero altındaki istatistik şeridi */
.hero__stats {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(28px, 5vw, 64px);
    margin-top: 44px;
    padding-top: 26px;
    border-top: 1px solid rgba(255,255,255,.22);
}

.hero__stat-num {
    font-family: 'Newsreader', 'Inter', Georgia, serif;
    font-size: 32px;
    font-weight: 500;
    line-height: 1;
    color: #fff;
}

.hero__stat-label {
    font-size: 12.5px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255,255,255,.72);
    margin-top: 7px;
}

@media (max-width: 768px) {
    .hero {
        min-height: 78vh;
    }

    .hero__stats {
        gap: 24px 36px;
    }

    .hero__stat-num {
        font-size: 26px;
    }
}

/* -------------------------------------------------------------- bölümler -- */

.section {
    padding-block: clamp(56px, 8vw, 96px);
}

.section--paper {
    background: var(--paper);
}

.section--snow {
    background: var(--snow);
}

.section__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 18px;
    margin-bottom: 40px;
}

.section__title {
    font-size: clamp(28px, 3.4vw, 42px);
    font-weight: 400;
    margin-top: 10px;
    text-wrap: balance;
}

.section__lead {
    color: var(--slate);
    font-size: 16px;
    max-width: 58ch;
    margin-top: 14px;
}

/* Alt çizgili "tümünü gör" bağlantısı */
.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    padding-bottom: 3px;
    border-bottom: 1px solid var(--ink);
    transition: gap .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}

    .link-arrow:hover {
        gap: 13px;
        color: var(--ember);
        border-color: var(--ember);
    }

/* --------------------------------------------------------- ilan kartları -- */
/* Tek tanım — eski dosyadaki .card / .grid çiftlemesi kaldırıldı. */

.listing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
    gap: clamp(20px, 2.4vw, 30px);
}

.listing-card {
    display: flex;
    flex-direction: column;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}

    .listing-card:hover {
        transform: translateY(-4px);
        border-color: transparent;
        box-shadow: var(--shadow-lg);
    }

.listing-card__media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--snow);
}

    .listing-card__media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .6s var(--ease);
    }

.listing-card:hover .listing-card__media img {
    transform: scale(1.045);
}

.listing-card__tags {
    position: absolute;
    top: 14px;
    left: 14px;
    display: flex;
    gap: 7px;
    z-index: 2;
}

/* Fiyat, görselin üzerinde okunaklı bir plaka üstünde durur */
.listing-card__price {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 2;
    padding: 10px 16px;
    background: rgba(16,27,38,.86);
    backdrop-filter: blur(8px);
    border-radius: 0 var(--radius-lg) 0 0;
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

    .listing-card__price small {
        font-size: 12px;
        font-weight: 500;
        opacity: .75;
        margin-left: 3px;
    }

.listing-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 20px 22px 22px;
}

.listing-card__loc {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--mist);
    margin-bottom: 8px;
}

    .listing-card__loc span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.listing-card__title {
    font-size: 20px;
    font-weight: 500;
    line-height: 1.3;
    margin-bottom: 16px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.listing-card__specs {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: auto;
    padding-top: 15px;
    border-top: 1px solid var(--line);
    font-size: 13.5px;
    color: var(--slate);
}

    .listing-card__specs span {
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

    .listing-card__specs i {
        color: var(--mist);
        font-size: 15px;
    }

.listing-card__actions {
    display: flex;
    gap: 8px;
    padding: 0 22px 22px;
}

/* ------------------------------------------------------------ hakkımda -- */

.about {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: clamp(32px, 5vw, 68px);
    align-items: start;
}

@media (max-width: 860px) {
    .about {
        grid-template-columns: minmax(0, 1fr);
        gap: 30px;
    }
}

.about__media {
    position: sticky;
    top: 100px;
}

@media (max-width: 860px) {
    .about__media {
        position: static;
        max-width: 300px;
    }
}

.about__portrait {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: var(--radius-lg);
    background: var(--snow);
}

/* Portre dosyası yüklenene kadar gösterilen monogramlı yer tutucu */
.about__fallback {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    width: 100%;
    aspect-ratio: 4 / 5;
    background: var(--snow);
    border: 1px dashed var(--line);
    border-radius: var(--radius-lg);
    text-align: center;
    padding: 24px;
}

    .about__fallback .brand__mark {
        width: 64px;
        height: 58px;
        opacity: .55;
    }

    .about__fallback span {
        font-size: 12.5px;
        color: var(--mist);
        line-height: 1.5;
    }

    /* Bootstrap <code> etiketini pembe boyuyor; paletin dışına çıkıyordu. */
    .about__fallback code {
        color: var(--slate);
        font-size: 11.5px;
    }

.about__name {
    font-size: clamp(30px, 3.6vw, 42px);
    font-weight: 400;
    margin-top: 10px;
}

.about__role {
    font-size: 16px;
    font-weight: 600;
    color: var(--pine);
    margin-top: 8px;
}

.about__text {
    margin-top: 24px;
    display: grid;
    gap: 16px;
    color: var(--slate);
    font-size: 16.5px;
    line-height: 1.75;
    max-width: 68ch;
}

.about__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px;
}

/* WhatsApp butonu markanın kendi yeşiliyle ayrışır */
.btn-a--whatsapp {
    background: #1D7B58;
    color: #fff;
}

    .btn-a--whatsapp:hover {
        background: #16613F;
        color: #fff;
    }

/* --------------------------------------------------- kapanış çağrı bandı -- */

.cta-band {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 420px;
    overflow: hidden;
    background: var(--ink);
}

.cta-band__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cta-band::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(16,27,38,.90) 0%, rgba(16,27,38,.72) 45%, rgba(16,27,38,.35) 100%);
}

@media (max-width: 860px) {
    .cta-band::after {
        background: rgba(16,27,38,.84);
    }
}

.cta-band__content {
    position: relative;
    z-index: 2;
    width: 100%;
    padding-block: clamp(52px, 8vw, 80px);
}

.cta-band__title {
    font-size: clamp(28px, 3.6vw, 42px);
    font-weight: 400;
    color: #fff;
    margin-top: 12px;
    max-width: 18ch;
    text-wrap: balance;
}

.cta-band__text {
    color: rgba(255,255,255,.85);
    font-size: 16.5px;
    line-height: 1.7;
    max-width: 52ch;
    margin-top: 16px;
}

.cta-band__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px;
}

.cta-band .eyebrow {
    color: #E8A87C;
}

/* ---------------------------------------------------------------- rozet -- */

.pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 11px;
    border-radius: var(--radius);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;
}

.pill--sale {
    background: var(--ember);
    color: #fff;
}

.pill--rent {
    background: var(--pine);
    color: #fff;
}

.pill--muted {
    background: rgba(16,27,38,.78);
    color: #fff;
}

.pill--outline {
    background: var(--paper);
    border: 1px solid var(--line);
    color: var(--slate);
}

/* ------------------------------------------------------------ filtreler -- */

.filterbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    padding: 16px 20px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    margin-bottom: 32px;
}

.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.chip {
    padding: 9px 18px;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--slate);
    background: var(--paper);
    transition: all .2s var(--ease);
}

    .chip:hover {
        border-color: var(--ink);
        color: var(--ink);
    }

    .chip.is-active {
        background: var(--ink);
        border-color: var(--ink);
        color: #fff;
        font-weight: 600;
    }

.result-count {
    font-size: 14px;
    color: var(--mist);
}

    .result-count strong {
        color: var(--ink);
        font-weight: 600;
    }

/* --------------------------------------------------------- boş durumlar -- */

.empty {
    text-align: center;
    padding: clamp(48px, 9vw, 88px) 24px;
    background: var(--paper);
    border: 1px dashed var(--line);
    border-radius: var(--radius-lg);
}

.empty__icon {
    font-size: 40px;
    color: var(--mist);
    margin-bottom: 18px;
    line-height: 1;
}

.empty__title {
    font-size: 24px;
    font-weight: 500;
    margin-bottom: 10px;
}

.empty__text {
    color: var(--slate);
    max-width: 44ch;
    margin: 0 auto 26px;
}

/* -------------------------------------------------------- detay sayfası -- */

.crumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    color: var(--mist);
    padding-block: 26px 0;
}

    .crumb a:hover {
        color: var(--ember);
    }

    .crumb i {
        font-size: 12px;
    }

.detail-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 24px;
    padding-block: 20px 30px;
}

.detail-title {
    font-size: clamp(28px, 3.6vw, 44px);
    font-weight: 400;
    margin-bottom: 12px;
    text-wrap: balance;
}

.detail-loc {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--slate);
    font-size: 15px;
}

.detail-price {
    font-family: 'Newsreader', 'Inter', Georgia, serif;
    font-size: clamp(30px, 3.4vw, 42px);
    font-weight: 500;
    line-height: 1;
    color: var(--ink);
    white-space: nowrap;
}

.detail-price__note {
    font-family: 'Inter', sans-serif;
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--mist);
    margin-top: 9px;
    text-align: right;
}

.detail-hero {
    position: relative;
    aspect-ratio: 16 / 9;
    max-height: 560px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--paper);
    border: 1px solid var(--line);
}

    .detail-hero img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.detail-hero__tags {
    position: absolute;
    top: 18px;
    left: 18px;
    display: flex;
    gap: 8px;
}

.detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: clamp(28px, 4vw, 56px);
    padding-block: clamp(36px, 5vw, 56px) clamp(56px, 8vw, 96px);
    align-items: start;
}

@media (max-width: 940px) {
    .detail-layout {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Ayırıcılar gap yerine box-shadow ile çiziliyor: gap + zemin rengi hilesi,
   son satır tam dolmadığında boş hücreleri gri blok gibi gösteriyordu.
   Dış kenarlara taşan gölgeleri overflow:hidden kırpar. */
.spec-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: 40px;
}

.spec {
    padding: 20px 18px;
    box-shadow: 1px 0 0 var(--line), 0 1px 0 var(--line);
}

.spec__icon {
    color: var(--ember);
    font-size: 19px;
    line-height: 1;
    margin-bottom: 10px;
}

.spec__label {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--mist);
    margin-bottom: 5px;
}

.spec__value {
    font-size: 17px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.3;
}

.prose h2 {
    font-size: 24px;
    font-weight: 500;
    margin-bottom: 16px;
}

.prose p {
    color: var(--slate);
    font-size: 16.5px;
    line-height: 1.75;
    white-space: pre-line;
}

/* Yapışkan iletişim paneli */
.aside-card {
    position: sticky;
    top: 100px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 26px;
    box-shadow: var(--shadow-md);
}

@media (max-width: 940px) {
    .aside-card {
        position: static;
    }
}

.aside-card__title {
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 6px;
}

.aside-card__text {
    color: var(--slate);
    font-size: 14.5px;
    margin-bottom: 22px;
}

.aside-card__stack {
    display: grid;
    gap: 10px;
}

.aside-card__divider {
    height: 1px;
    background: var(--line);
    margin-block: 24px;
}

.admin-box {
    background: #FFF8F4;
    border: 1px solid #F0D9CB;
    border-radius: var(--radius-lg);
    padding: 18px;
}

.admin-box__label {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ember);
    margin-bottom: 12px;
}

.admin-box__row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* --------------------------------------------------------------- formlar -- */

.page-head {
    padding-block: clamp(36px, 6vw, 60px) 0;
}

.page-head__title {
    font-size: clamp(28px, 3.6vw, 42px);
    font-weight: 400;
    margin-top: 10px;
}

.page-head__lead {
    color: var(--slate);
    margin-top: 12px;
    max-width: 56ch;
}

.form-card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: clamp(24px, 3.5vw, 40px);
    box-shadow: var(--shadow-sm);
}

.fieldset {
    border: 0;
    padding: 0;
    margin: 0 0 34px;
}

    .fieldset:last-of-type {
        margin-bottom: 0;
    }

.fieldset__legend {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ember);
    margin-bottom: 20px;
    padding: 0;
}

    .fieldset__legend::after {
        content: "";
        flex: 1;
        height: 1px;
        background: var(--line);
    }

.field-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
}

.field {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.field--wide {
    grid-column: 1 / -1;
}

.field__label {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    letter-spacing: .01em;
}

.field__hint {
    font-size: 12.5px;
    color: var(--mist);
}

/* Bootstrap .form-control/.form-select üzerine yazıyoruz */
.form-card .form-control,
.form-card .form-select,
.auth-card .form-control {
    padding: 11px 14px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    font-family: inherit;
    font-size: 15px;
    color: var(--ink);
    box-shadow: none;
    transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}

    .form-card .form-control::placeholder,
    .auth-card .form-control::placeholder {
        color: #A9B7C4;
    }

    .form-card .form-control:focus,
    .form-card .form-select:focus,
    .auth-card .form-control:focus {
        border-color: var(--ember);
        box-shadow: 0 0 0 3px rgba(168,78,40,.14);
        outline: none;
    }

    .form-card textarea.form-control {
        min-height: 140px;
        resize: vertical;
        line-height: 1.65;
    }

/* Anahtar (switch) görünümlü onay kutusu */
.switch-row {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding: 16px 18px;
    background: var(--snow);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

    /* Bootstrap .form-check-input kendi mavisini dayattığı için burada
       geçersiz kılıyoruz; onay kutusu paletin bakır rengini almalı. */
    .switch-row input[type="checkbox"] {
        width: 22px;
        height: 22px;
        margin: 0;
        flex-shrink: 0;
        cursor: pointer;
        accent-color: var(--ember);
        border-radius: 4px;
    }

        .switch-row input[type="checkbox"]:checked {
            background-color: var(--ember);
            border-color: var(--ember);
        }

        .switch-row input[type="checkbox"]:focus {
            border-color: var(--ember);
            box-shadow: 0 0 0 3px rgba(168,78,40,.18);
        }

.switch-row__title {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--ink);
}

.switch-row__text {
    font-size: 13px;
    color: var(--slate);
    margin-top: 2px;
}

.form-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 34px;
    padding-top: 26px;
    border-top: 1px solid var(--line);
}

/* Doğrulama mesajları */
.field .text-danger,
.validation-summary-errors {
    font-size: 13px;
    color: #9B2C2C !important;
}

.validation-summary-errors {
    background: #FDF3F3;
    border: 1px solid #F3D6D6;
    border-radius: var(--radius);
    padding: 14px 16px;
    margin-bottom: 24px;
}

    .validation-summary-errors ul {
        margin: 0;
        padding-left: 18px;
    }

.form-card .input-validation-error {
    border-color: #C05353;
}

/* Mevcut görsel önizlemesi */
.image-preview {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px;
    background: var(--snow);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

    .image-preview img {
        width: 92px;
        height: 70px;
        object-fit: cover;
        border-radius: var(--radius);
        flex-shrink: 0;
    }

/* ------------------------------------------------------------ giriş / 404 -- */

.centered-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 76px);
    padding: 48px var(--gut);
}

.auth-card {
    width: 100%;
    max-width: 430px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: clamp(28px, 4vw, 44px);
    box-shadow: var(--shadow-lg);
}

.auth-card__head {
    text-align: center;
    margin-bottom: 30px;
}

.auth-card__title {
    font-size: 27px;
    font-weight: 500;
    margin-top: 16px;
}

.auth-card__text {
    color: var(--slate);
    font-size: 14.5px;
    margin-top: 8px;
}

.auth-card .field + .field {
    margin-top: 18px;
}

.notice-page {
    text-align: center;
    max-width: 560px;
}

.notice-page__code {
    font-family: 'Newsreader', 'Inter', Georgia, serif;
    font-size: clamp(72px, 14vw, 132px);
    font-weight: 400;
    line-height: 1;
    color: var(--ember);
    letter-spacing: -0.04em;
}

.notice-page__title {
    font-size: clamp(26px, 3.4vw, 36px);
    font-weight: 400;
    margin-top: 12px;
}

.notice-page__text {
    color: var(--slate);
    margin-top: 14px;
    margin-bottom: 30px;
}

.notice-page__actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.trace {
    display: inline-block;
    margin-top: 30px;
    padding: 10px 16px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    font-size: 12.5px;
    color: var(--mist);
}

    .trace code {
        color: var(--ink);
        font-size: 12.5px;
    }

/* ----------------------------------------------------------------- alt -- */

.site-footer {
    background: var(--ink);
    color: rgba(255,255,255,.72);
    padding-block: clamp(48px, 7vw, 72px) 0;
}

.site-footer__grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr;
    gap: clamp(28px, 5vw, 64px);
    padding-bottom: 48px;
}

@media (max-width: 780px) {
    .site-footer__grid {
        grid-template-columns: 1fr;
        gap: 34px;
    }
}

.site-footer .brand__name {
    color: #fff;
}

.site-footer .brand__mark [stroke] {
    stroke: #fff;
}

.site-footer__about {
    margin-top: 18px;
    font-size: 14.5px;
    line-height: 1.7;
    max-width: 40ch;
}

.site-footer__label {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 18px;
}

.site-footer__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 11px;
    font-size: 14.5px;
}

/* Adres iki satır olduğu için liste ritmini bozmasın */
.site-footer__adres {
    line-height: 1.55;
    margin-top: 2px;
}

.site-footer a:hover {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.site-footer__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding-block: 22px;
    border-top: 1px solid rgba(255,255,255,.14);
    font-size: 13px;
}

/* --------------------------------------------------------------- hareket -- */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }

    .listing-card:hover {
        transform: none;
    }

    .listing-card:hover .listing-card__media img {
        transform: none;
    }
}