/**
 * assets/css/style.css
 */

/* Reset & container */
*{box-sizing:border-box}body{font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial;color:#0f172a;background:#f8fafc;margin:0}
.container{max-width:1100px;margin:0 auto;padding:20px}

/* Header */
.site-header{background:#000000;border-bottom:1px solid #ff69b4}
.site-header .container{display:flex;align-items:center;justify-content:space-between;padding:14px 20px}
.logo{font-weight:700;color:#ffffff}
.admin-link{color:#0ea5e9;text-decoration:none}

/* Hero */
.hero{background:linear-gradient(90deg,#000000,#000000);padding:28px;border-radius:8px;margin:18px 0}
.hero-title{margin:0;font-size:20px;color:#ffffff}
.hero-sub{margin:6px 0 0;color:#ffffff}

/* Listings grid */
.listings-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;margin-top:18px}
.card{background:#fff;border-radius:10px;overflow:hidden;box-shadow:0 1px 4px rgba(2,6,23,0.06);transition:transform .18s ease,box-shadow .18s ease;cursor:pointer}
.card:hover{transform:translateY(-6px);box-shadow:0 8px 30px rgba(2,6,23,0.08)}
.card .img{height:160px;background:#e6eef6;overflow:hidden}
.card img{width:100%;height:100%;object-fit:cover;display:block}
.card .body{padding:12px}
.card h3{margin:0;font-size:15px;color:#08203a}
.card .muted{color:#64748b;font-size:13px;margin-top:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card .meta{display:flex;justify-content:space-between;align-items:center;margin-top:10px}
.btn-small{padding:6px 10px;border-radius:6px;border:none;background:#ecfeff;color:#0369a1;font-weight:600}

.card.vip {
    grid-column: 1 / -1 !important; 
    display: block !important; /* Esnek yapıyı iptal edip dikey istiflemeye geçiyoruz */
    background: linear-gradient(to bottom, #fffdf0, #fff) !important;
    border: 1px solid #ff0000 !important;
}

.card.vip .img {
    width: 100% !important; /* Genişliği tam ekran yapar */
    height: 200px !important; /* Banner yüksekliğini ayarlar */
}

.card.vip .img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* Görselin alanı tam kaplamasını sağlar */
}

.card.vip .body {
    padding: 20px !important; /* Metin alanına ferahlık verir */
}

@media (max-width: 600px) {
    .card.vip { display: block !important; }
    .card.vip .img { width: 100% !important; height: 200px !important; }
}

/* badge + ribbon */
.badge{display:inline-flex;align-items:center;gap:6px;padding:6px 8px;border-radius:999px;font-size:12px;font-weight:600}
.badge.vip{background:linear-gradient(90deg,#FDE68A,#F59E0B);color:#7c2d12;box-shadow:0 3px 10px rgba(245,158,11,0.12)}
.badge.gold{background:#ffedd5;color:#7c2d12}
.ribbon{position:absolute;right:0;top:0;transform:translate(12px,-12px);opacity:.9}

/* modal */
.modal{display:none;position:fixed;inset:0;z-index:60;align-items:center;justify-content:center}
.modal[aria-hidden="false"]{display:flex}
.modal-backdrop{position:absolute;inset:0;background:rgba(2,6,23,.5)}
.modal-panel{position:relative;background:#fff;border-radius:8px;z-index:70;max-width:900px;width:100%;padding:18px;box-shadow:0 12px 40px rgba(2,6,23,.2)}
.modal-close{position:absolute;right:10px;top:10px;border:0;background:transparent;font-size:20px}

/* admin */
.admin-grid{display:grid;grid-template-columns:320px 1fr;gap:18px}
.admin-left{background:#fff;padding:14px;border-radius:8px}
.admin-left label{display:block;margin-bottom:8px;font-size:13px}
.admin-left input, .admin-left textarea{width:100%;padding:8px;margin-top:6px;border:1px solid #e6eef6;border-radius:6px}
.btn{background:#0369a1;color:#fff;padding:8px 12px;border-radius:8px;border:0}
.btn.small{padding:6px;border-radius:6px}
.btn.danger{background:#ef4444}
.admin-right{background:#fff;padding:12px;border-radius:8px}
.admin-row{display:flex;align-items:center;gap:10px;padding:10px;border-bottom:1px solid #f1f5f9}
.admin-thumb img{width:80px;height:60px;object-fit:cover;border-radius:6px}
.admin-title{font-weight:600}
.alert{background:#fee2e2;padding:8px;border-radius:6px;color:#611a15}

/* v0.2 public navigation and filters */
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:24px}
.logo{text-decoration:none;font-size:1.3rem}
.main-nav{display:flex;align-items:center;gap:6px}
.nav-link,.nav-dropdown-toggle{display:inline-flex;align-items:center;gap:6px;min-height:42px;padding:9px 13px;border:0;border-radius:8px;background:transparent;color:#334155;font:inherit;font-weight:650;text-decoration:none;cursor:pointer}
.nav-link:hover,.nav-dropdown-toggle:hover,.nav-dropdown.is-open .nav-dropdown-toggle{background:#f0f9ff;color:#0369a1}
.nav-dropdown{position:relative}
.nav-dropdown-menu{position:absolute;right:0;top:calc(100% + 8px);display:none;width:220px;max-height:360px;overflow:auto;padding:8px;background:#fff;border:1px solid #e2e8f0;border-radius:12px;box-shadow:0 18px 45px rgba(15,23,42,.14);z-index:100}
.nav-dropdown.is-open .nav-dropdown-menu{display:grid}
.nav-dropdown-menu a{padding:10px 12px;border-radius:8px;color:#334155;text-decoration:none}
.nav-dropdown-menu a:hover{background:#f0f9ff;color:#0369a1}
.categories-menu{grid-template-columns:repeat(3,1fr);width:270px}
.filter-panel{padding:18px;background:#fff;border:1px solid #e6eef6;border-radius:10px;box-shadow:0 1px 4px rgba(2,6,23,.04)}
.filter-form{display:grid;grid-template-columns:repeat(4,minmax(150px,1fr)) auto;gap:12px;align-items:end}
.filter-form label{display:grid;gap:6px;color:#475569;font-size:13px;font-weight:650}
.filter-form select,.filter-form input{width:100%;min-height:42px;padding:9px 10px;border:1px solid #cbd5e1;border-radius:8px;background:#fff;color:#0f172a;font:inherit}
.filter-actions{display:flex;gap:8px}
.btn.secondary{display:inline-flex;align-items:center;background:#e2e8f0;color:#334155;text-decoration:none}
.active-filter{margin-top:12px;color:#64748b;font-size:13px}
.empty-state,.loading-state{grid-column:1/-1;padding:28px;text-align:center;color:#64748b;background:#fff;border-radius:10px}
.category-badge{position:absolute;right:10px;bottom:10px;padding:6px 8px;border-radius:999px;background:rgba(15,23,42,.82);color:#fff;font-size:12px;font-weight:700}
.detail-tags{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.detail-tags span{padding:6px 9px;border-radius:999px;background:#e0f2fe;color:#075985;font-size:12px;font-weight:700}
.admin-left select{width:100%;margin-top:6px;padding:8px;border:1px solid #e6eef6;border-radius:6px;background:#fff}

@media (max-width:900px){
  .filter-form{grid-template-columns:repeat(2,minmax(0,1fr))}
  .filter-actions{align-self:end}
}
@media (max-width:640px){
  .site-header .container{align-items:flex-start;flex-direction:column}
  .main-nav{width:100%;flex-wrap:wrap}
  .nav-link,.nav-dropdown{flex:1}
  .nav-dropdown-toggle{width:100%;justify-content:center}
  .nav-dropdown-menu{left:0;right:auto;width:min(280px,calc(100vw - 40px))}
  .filter-form{grid-template-columns:1fr}
  .filter-actions .btn{flex:1;justify-content:center}
}


/* v0.3 admin improvements */
.auth{max-width:440px;margin-top:70px;background:#fff;border-radius:12px;box-shadow:0 12px 40px rgba(15,23,42,.08)}
.auth label{display:grid;gap:7px}.auth input{padding:10px;border:1px solid #cbd5e1;border-radius:8px}
.admin-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:4px 0 18px}.admin-stats div{display:grid;gap:4px;padding:18px;background:#fff;border-radius:10px;box-shadow:0 1px 4px rgba(2,6,23,.05)}.admin-stats strong{font-size:24px}.admin-stats span{color:#64748b;font-size:13px}
.admin-left textarea,.admin-left select{width:100%;padding:8px;margin-top:6px;border:1px solid #e6eef6;border-radius:6px}.check-label{display:flex!important;align-items:center;gap:8px}.check-label input{width:auto!important;margin:0!important}.form-actions{display:flex;gap:8px;margin-top:12px}.upload-preview{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}.upload-preview img{width:100px;height:70px;object-fit:cover;border-radius:7px}.admin-list-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.admin-list-head input{max-width:260px;padding:9px;border:1px solid #cbd5e1;border-radius:8px}.admin-info{min-width:0;flex:1}.admin-meta{margin-top:4px;color:#64748b;font-size:12px}.admin-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px}.admin-row.expired{opacity:.65;background:#f8fafc}.btn{cursor:pointer}.btn.secondary{border:0}
@media(max-width:900px){.admin-grid{grid-template-columns:1fr}.admin-stats{grid-template-columns:repeat(2,1fr)}.admin-row{align-items:flex-start;flex-wrap:wrap}.admin-actions{width:100%;justify-content:flex-start}}
.pagination{display:flex;justify-content:center;gap:8px;margin:28px 0 40px;flex-wrap:wrap}.pagination a{min-width:38px;padding:9px 12px;text-align:center;background:#fff;border:1px solid #e2e8f0;border-radius:8px;color:#334155;text-decoration:none}.pagination a.active,.pagination a:hover{background:#0369a1;color:#fff;border-color:#0369a1}.detail-gallery{display:grid;gap:10px}.detail-main{width:100%;max-height:420px;object-fit:contain;background:#f1f5f9;border-radius:8px}.detail-thumbs{display:flex;gap:8px;overflow:auto}.detail-thumbs button{padding:2px;border:2px solid transparent;background:none;border-radius:7px}.detail-thumbs button.active{border-color:#0369a1}.detail-thumbs img{width:72px;height:56px;object-fit:cover;border-radius:5px;display:block}.card .img{position:relative}.card .badge{position:absolute;left:10px;top:10px}

/* v1.0 ilan detay ve hata sayfaları */
.breadcrumb{display:flex;gap:8px;align-items:center;margin:22px 0;color:#64748b;font-size:14px}.breadcrumb a{color:#0369a1;text-decoration:none}
.listing-detail-card{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);gap:28px;background:#fff;border-radius:14px;padding:22px;box-shadow:0 8px 30px rgba(15,23,42,.07);margin-bottom:40px}.listing-detail-content h1{margin:12px 0;font-size:clamp(24px,4vw,38px)}.listing-price{font-size:28px;font-weight:800;color:#0369a1;margin:12px 0}.listing-description{line-height:1.75;color:#334155;margin:22px 0;white-space:normal}.listing-call{display:inline-flex;text-decoration:none}.detail-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}.detail-actions a{text-decoration:none}.error-page{min-height:100vh;display:grid;place-items:center;text-align:center}.error-code{font-size:clamp(72px,18vw,160px);font-weight:900;line-height:1;color:#cbd5e1}.error-page h1{margin:16px 0 8px}.error-page p{color:#64748b;margin-bottom:24px}
@media(max-width:760px){.listing-detail-card{grid-template-columns:1fr;padding:14px}.listing-detail-content h1{font-size:26px}}

/* =========================================================
   Anasayfa: 10 VIP / 40 GOLD / 80 SILVER
   ========================================================= */
#listings.listings-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    align-items:stretch;
    gap:20px;
    width:100%;
    margin-top:20px;
}
#listings .card{
    position:relative;
    display:flex;
    flex-direction:column;
    width:100%;
    min-width:0;
    height:100%;
    overflow:hidden;
    background:#fff;
    border:1px solid #e2e8f0;
    border-radius:14px;
    box-shadow:0 4px 14px rgba(15,23,42,.07);
}
#listings .card.vip{
    grid-column:1/-1!important;
    display:grid!important;
    grid-template-columns:minmax(320px,42%) 1fr;
    min-height:360px;
    background:linear-gradient(135deg,#fffdf2 0%,#fff 58%)!important;
    border:2px solid #f59e0b!important;
}
#listings .card.gold{grid-column:span 2;border-color:#f59e0b;background:linear-gradient(180deg,#fffdf5 0%,#fff 40%)}
#listings .card.silver{grid-column:span 1;border-color:#cbd5e1}
#listings .card .img{position:relative;width:100%;height:220px;overflow:hidden;background:#f1f5f9}
#listings .card.vip .img{width:100%!important;height:100%!important;min-height:360px}
#listings .card.gold .img{height:290px}
#listings .card.silver .img{height:220px}
#listings .card .img>img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .3s ease}
#listings .card:hover .img>img{transform:scale(1.025)}
#listings .card .body{display:flex;flex:1;flex-direction:column;min-width:0;padding:18px}
#listings .card.vip .body{padding:30px!important;justify-content:center}
#listings .card h3{margin:0;color:#08203a;font-weight:800}
#listings .card.vip h3{font-size:28px;line-height:1.3}
#listings .card.gold h3{font-size:21px}
#listings .card.silver h3{font-size:17px}
#listings .card .muted{color:#64748b;font-size:13px;line-height:1.55;white-space:normal}
#listings .card-description{display:-webkit-box;margin:12px 0 0;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3}
#listings .card.silver .card-description{-webkit-line-clamp:2}
#listings .card-price{margin-top:12px;color:#0369a1;font-size:20px;font-weight:800}
#listings .card .meta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding-top:18px}
#listings .badge{position:absolute;top:12px;left:12px;z-index:3;display:inline-flex;align-items:center;justify-content:center;min-width:72px;padding:8px 12px;border-radius:999px;font-size:12px;font-weight:900;letter-spacing:.5px}
#listings .badge.vip{background:linear-gradient(135deg,#fde68a,#f59e0b);color:#713f12}
#listings .badge.gold{background:#f59e0b;color:#fff}
#listings .badge.silver{background:#64748b;color:#fff}
#listings .category-badge{position:absolute;right:12px;bottom:12px;z-index:3;padding:7px 10px;background:rgba(15,23,42,.82);border-radius:999px;color:#fff;font-size:11px;font-weight:700}
#listings .btn-small{display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:8px 14px;background:#0369a1;border-radius:8px;color:#fff;text-decoration:none}
#listings .loading-state,#listings .alert{grid-column:1/-1}

@media(max-width:1000px){
    #listings.listings-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    #listings .card.vip{grid-column:1/-1;grid-template-columns:minmax(260px,42%) 1fr}
    #listings .card.gold,#listings .card.silver{grid-column:span 1}
}
@media(max-width:640px){
    #listings.listings-grid{grid-template-columns:1fr;gap:16px}
    #listings .card.vip,#listings .card.gold,#listings .card.silver{grid-column:1/-1;display:flex!important;min-height:0;flex-direction:column}
    #listings .card.vip .img,#listings .card.gold .img,#listings .card.silver .img{width:100%!important;height:220px!important;min-height:220px}
    #listings .card.vip .body,#listings .card.gold .body,#listings .card.silver .body{padding:16px!important}
    #listings .card.vip h3,#listings .card.gold h3,#listings .card.silver h3{font-size:18px}
    #listings .card .meta{align-items:stretch;flex-direction:column}
    #listings .btn-small{width:100%}
}

/* =========================================================
   VIP KART ÖZEL GÖRÜNÜMÜ
   Görsel üstte; başlık/kategori solda, ilçe/buton sağda
   ========================================================= */
#listings .card.vip{
    display:flex!important;
    flex-direction:column!important;
    min-height:0;
}

#listings .card.vip .img{
    width:100%!important;
    height:360px!important;
    min-height:360px!important;
    border-bottom:1px solid #e2e8f0;
}

#listings .card.vip .body.vip-body{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:stretch;
    gap:28px;
    min-height:120px;
    padding:22px 26px!important;
}

#listings .vip-info-left,
#listings .vip-info-right{
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    gap:12px;
    min-width:0;
}

#listings .vip-info-right{
    align-items:flex-end;
    text-align:right;
}

#listings .vip-title{
    margin:0;
    overflow:hidden;
    color:#08203a;
    font-size:24px!important;
    font-weight:800;
    line-height:1.3;
    text-overflow:ellipsis;
    white-space:nowrap;
}

#listings .vip-category{
    color:#b45309;
    font-size:14px;
    font-weight:800;
    letter-spacing:.25px;
}

#listings .vip-district{
    color:#334155;
    font-size:16px;
    font-weight:750;
}

#listings .vip-detail-button{
    min-width:110px;
}

@media(max-width:640px){
    #listings .card.vip .img{
        height:240px!important;
        min-height:240px!important;
    }

    #listings .card.vip .body.vip-body{
        grid-template-columns:minmax(0,1fr) auto;
        gap:14px;
        min-height:105px;
        padding:16px!important;
    }

    #listings .vip-title{
        font-size:18px!important;
    }

    #listings .vip-category{
        font-size:12px;
    }

    #listings .vip-district{
        font-size:14px;
    }

    #listings .vip-detail-button{
        min-width:88px;
    }
}

@media(max-width:420px){
    #listings .card.vip .body.vip-body{
        grid-template-columns:1fr;
    }

    #listings .vip-info-right{
        align-items:stretch;
        text-align:left;
    }

    #listings .vip-detail-button{
        width:100%;
    }
}
.contact-buttons{
    margin-top:30px;
}

.btn-whatsapp{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    height:56px;
    background:#25D366;
    color:#ffffff;
    font-size:18px;
    font-weight:700;
    text-decoration:none;
    border-radius:10px;
    transition:.2s;
}

.btn-whatsapp:hover{
    background:#1ebe5d;
    transform:translateY(-2px);
}
/* WhatsApp Buton Tasarımı (CSS) */
.whatsapp-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: #25D366;
  color: white;
  text-decoration: none;
  font-family: Arial, sans-serif;
  font-weight: bold;
  font-size: 15px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-radius: 50px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  z-index: 9999;
  transition: transform 0.2s ease, background-color 0.2s ease;
}

/* Üzerine gelindiğinde (Hover) efektler */
.whatsapp-btn:hover {
  background-color: #20ba5a;
  transform: scale(1.05);
  color: white;
}

/* =========================================================
   MOBİL UYUMLULUK - SON VE ÖNCELİKLİ KURALLAR
   Bu bölüm dosyanın sonunda kalmalıdır.
   ========================================================= */

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

img,
svg,
video,
iframe {
    max-width: 100%;
}

img {
    height: auto;
}

button,
a,
input,
select,
textarea {
    -webkit-tap-highlight-color: transparent;
}

/* Tablet */
@media (max-width: 900px) {
    .container {
        width: 100%;
        max-width: none;
        padding: 16px;
    }

    .site-header .container,
    .header-inner {
        gap: 14px;
    }

    .main-nav {
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    #listings.listings-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }

    #listings .card.vip {
        grid-column: 1 / -1 !important;
    }

    #listings .card.gold,
    #listings .card.silver {
        grid-column: span 1;
    }

    .listing-detail-card {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 18px;
    }

    .detail-main {
        width: 100%;
        max-height: 520px;
    }

    .admin-grid {
        grid-template-columns: 1fr;
    }

    .admin-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-row {
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .admin-actions {
        width: 100%;
        justify-content: flex-start;
    }
}

/* Telefon */
@media (max-width: 640px) {
    body {
        font-size: 15px;
    }

    .container {
        padding: 12px;
    }

    .site-header .container,
    .header-inner {
        width: 100%;
        align-items: stretch;
        flex-direction: column;
        gap: 10px;
        padding: 12px;
    }

    .logo {
        display: block;
        width: 100%;
        font-size: 1.1rem;
        text-align: center;
    }

    .main-nav {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
        gap: 8px;
    }

    .nav-link,
    .nav-dropdown,
    .nav-dropdown-toggle {
        width: 100%;
    }

    .nav-link,
    .nav-dropdown-toggle {
        justify-content: center;
        min-height: 46px;
    }

    .nav-dropdown-menu,
    .categories-menu {
        position: static;
        width: 100%;
        max-height: 280px;
        margin-top: 6px;
        box-shadow: none;
    }

    .categories-menu {
        grid-template-columns: 1fr;
    }

    .hero {
        margin: 12px 0;
        padding: 18px 14px;
        text-align: center;
    }

    .hero-title {
        font-size: 18px;
        line-height: 1.4;
    }

    #listings.listings-grid {
        grid-template-columns: 1fr;
        gap: 14px;
        margin-top: 14px;
    }

    #listings .card.vip,
    #listings .card.gold,
    #listings .card.silver {
        grid-column: 1 / -1 !important;
        display: flex !important;
        min-height: 0;
        flex-direction: column !important;
    }

    #listings .card.vip .img,
    #listings .card.gold .img,
    #listings .card.silver .img {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        aspect-ratio: auto !important;
        overflow: hidden;
        background: #f1f5f9;
    }

    #listings .card.vip .img > img,
    #listings .card.gold .img > img,
    #listings .card.silver .img > img {
        display: block;
        width: 100% !important;
        height: auto !important;
        max-width: 100%;
        object-fit: contain !important;
        object-position: center;
    }

    #listings .card .body,
    #listings .card.vip .body,
    #listings .card.gold .body,
    #listings .card.silver .body {
        padding: 14px !important;
    }

    #listings .card.vip .body.vip-body {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 12px;
        min-height: 100px;
    }

    #listings .vip-title,
    #listings .card h3 {
        font-size: 17px !important;
        line-height: 1.35;
        white-space: normal;
    }

    #listings .vip-category,
    #listings .vip-district,
    #listings .card .muted {
        font-size: 13px;
    }

    #listings .card .meta {
        align-items: stretch;
        flex-direction: column;
        gap: 10px;
    }

    #listings .btn-small,
    #listings .vip-detail-button {
        width: 100%;
        min-width: 0;
        min-height: 44px;
    }

    #listings .category-badge {
        max-width: calc(100% - 24px);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .breadcrumb {
        flex-wrap: wrap;
        margin: 14px 0;
        font-size: 13px;
    }

    .listing-detail-card {
        gap: 16px;
        padding: 12px;
        border-radius: 10px;
    }

    .detail-main {
        width: 100%;
        max-height: none;
        aspect-ratio: 4 / 3;
        object-fit: contain;
    }

    .detail-thumbs {
        gap: 6px;
        padding-bottom: 4px;
    }

    .detail-thumbs img {
        width: 64px;
        height: 50px;
    }

    .listing-detail-content h1 {
        font-size: 24px;
        line-height: 1.3;
    }

    .listing-price {
        font-size: 22px;
    }

    .listing-description {
        font-size: 15px;
        line-height: 1.65;
        overflow-wrap: anywhere;
    }

    .detail-tags {
        gap: 6px;
    }

    .detail-tags span {
        font-size: 11px;
    }

    .btn-whatsapp {
        width: 100%;
        min-height: 52px;
        height: auto;
        padding: 0;
        overflow: hidden;
        border-radius: 12px;
    }

    .btn-whatsapp svg {
        display: block;
        width: 100%;
        max-width: 320px;
        height: auto;
    }

    .contact-buttons {
        margin-top: 18px;
    }

    .modal {
        padding: 8px;
    }

    .modal-panel {
        width: 100%;
        max-height: calc(100vh - 16px);
        padding: 12px;
        overflow-y: auto;
    }

    .admin-stats {
        grid-template-columns: 1fr;
    }

    .admin-list-head {
        align-items: stretch;
        flex-direction: column;
    }

    .admin-list-head input {
        width: 100%;
        max-width: none;
    }

    .admin-row {
        align-items: stretch;
        flex-direction: column;
    }

    .admin-thumb,
    .admin-thumb img {
        width: 100%;
    }

    .admin-thumb img {
        height: 190px;
    }

    .admin-actions,
    .form-actions {
        width: 100%;
        flex-direction: column;
    }

    .admin-actions .btn,
    .form-actions .btn {
        width: 100%;
        min-height: 44px;
    }

    .auth {
        margin-top: 24px;
    }

    .pagination {
        gap: 6px;
        margin: 20px 0 28px;
    }

    .pagination a {
        min-width: 36px;
        padding: 8px 10px;
    }
}

/* Küçük telefon */
@media (max-width: 420px) {
    .container {
        padding: 9px;
    }

    #listings .card.vip .body.vip-body {
        grid-template-columns: 1fr;
    }

    #listings .vip-info-right {
        align-items: stretch;
        text-align: left;
    }

    #listings .vip-detail-button {
        width: 100%;
    }

    .hero-title {
        font-size: 16px;
    }

    .listing-detail-content h1 {
        font-size: 21px;
    }

    .detail-main {
        aspect-ratio: 1 / 1;
    }
}

/* Kartların görsel altındaki sade ad / ilçe satırı */
#listings .card .body.card-summary,
#listings .card.vip .body.card-summary,
#listings .card.gold .body.card-summary,
#listings .card.silver .body.card-summary {
    display: flex !important;
    min-height: 62px;
    padding: 16px 18px !important;
    align-items: center;
    justify-content: space-between;
    flex-direction: row !important;
    gap: 16px;
}

#listings .card-summary-title {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    color: #08203a;
    font-size: 17px;
    line-height: 1.35;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#listings .card-summary-district {
    flex: 0 0 auto;
    color: #64748b;
    font-size: 14px;
    font-weight: 650;
    text-align: right;
    white-space: nowrap;
}

@media (max-width: 640px) {
    #listings .card .body.card-summary,
    #listings .card.vip .body.card-summary,
    #listings .card.gold .body.card-summary,
    #listings .card.silver .body.card-summary {
        min-height: 42px;
        padding: 8px 12px !important;
        flex-direction: row !important;
        gap: 10px;
    }

    #listings .card-summary-title {
        font-size: 16px !important;
    }

    #listings .card-summary-district {
        max-width: 42%;
        overflow: hidden;
        font-size: 13px;
        text-overflow: ellipsis;
    }
}

/* =========================================================
   MOBİL GÖRSEL VE SABİT ALT NAVİGASYON DÜZELTMESİ
   Masaüstü görünümü bu kurallardan etkilenmez.
   ========================================================= */
@media (max-width: 640px) {
    :root {
        --mobile-nav-height: 68px;
    }

    body {
        padding-bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom) + 18px);
    }

    main,
    .listing-detail-page {
        padding-bottom: 24px;
    }

    .main-nav {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1000;
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: minmax(0, 1fr);
        width: 100%;
        min-height: var(--mobile-nav-height);
        padding: 7px 8px calc(7px + env(safe-area-inset-bottom));
        gap: 6px;
        background: #000;
        border-top: 1px solid #ff69b4;
        box-shadow: 0 -8px 24px rgba(15, 23, 42, .18);
    }

    .main-nav .nav-link,
    .main-nav .nav-dropdown,
    .main-nav .nav-dropdown-toggle {
        width: 100%;
        min-width: 0;
    }

    .main-nav .nav-link,
    .main-nav .nav-dropdown-toggle {
        min-height: 48px;
        padding: 7px 5px;
        justify-content: center;
        color: #fff;
        font-size: 13px;
        line-height: 1.15;
        text-align: center;
    }

    .main-nav .nav-link:hover,
    .main-nav .nav-dropdown-toggle:hover,
    .main-nav .nav-dropdown.is-open .nav-dropdown-toggle {
        background: rgba(255, 105, 180, .16);
        color: #fff;
    }

    .main-nav .nav-dropdown-menu,
    .main-nav .categories-menu {
        position: fixed;
        right: 8px;
        bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom) + 8px);
        left: 8px;
        width: auto;
        max-height: min(55vh, 360px);
        margin: 0;
        overflow-y: auto;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        border: 1px solid #e2e8f0;
        border-radius: 12px;
        box-shadow: 0 -12px 32px rgba(15, 23, 42, .2);
    }

    #listings .card.vip .img,
    #listings .card.gold .img,
    #listings .card.silver .img {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        aspect-ratio: auto !important;
        background: #f1f5f9;
    }

    #listings .card.vip .img > img,
    #listings .card.gold .img > img,
    #listings .card.silver .img > img {
        display: block;
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        object-fit: contain !important;
        object-position: center;
        transform: none !important;
    }

    .detail-main {
        display: block;
        width: 100%;
        height: auto;
        max-height: none;
        aspect-ratio: auto;
        object-fit: contain;
        object-position: center;
    }
}

@media (max-width: 420px) {
    .detail-main {
        aspect-ratio: auto;
    }

    .main-nav .nav-dropdown-menu,
    .main-nav .categories-menu {
        grid-template-columns: 1fr;
    }
}

/* Blog */
.blog-page,.blog-detail-page{padding-top:28px;padding-bottom:50px}
.blog-page-header{margin-bottom:24px}.blog-page-header h1{margin:0 0 6px;font-size:34px}.blog-page-header p{margin:0;color:#64748b}
.blog-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.blog-card{overflow:hidden;background:#fff;border:1px solid #e2e8f0;border-radius:14px;box-shadow:0 4px 16px rgba(15,23,42,.06)}
.blog-card-image{display:block;aspect-ratio:16/9;background:#e6eef6}.blog-card-image img{display:block;width:100%;height:100%;object-fit:cover}
.blog-card-body{padding:20px}.blog-card time,.blog-article time{color:#64748b;font-size:13px}.blog-card h2{margin:8px 0 10px;font-size:21px;line-height:1.35}.blog-card h2 a{color:#08203a;text-decoration:none}.blog-card p{margin:0 0 16px;color:#475569;line-height:1.65}.blog-read-more{color:#0369a1;font-weight:750;text-decoration:none}
.blog-empty{padding:32px;background:#fff;border:1px solid #e2e8f0;border-radius:12px;text-align:center}
.blog-article{max-width:820px;margin:0 auto;padding:30px;background:#fff;border:1px solid #e2e8f0;border-radius:16px}.blog-article h1{margin:8px 0 24px;font-size:36px;line-height:1.25}.blog-cover{display:block;width:100%;height:auto;max-height:600px;margin-bottom:28px;object-fit:contain;border-radius:12px;background:#f1f5f9}.blog-content{color:#1e293b;font-size:17px;line-height:1.85;overflow-wrap:anywhere}
.blog-admin-grid{display:grid;grid-template-columns:minmax(320px,420px) 1fr;gap:18px}.blog-editor textarea{resize:vertical}.blog-cover-preview img{display:block;width:100%;max-height:220px;margin:8px 0 12px;object-fit:contain;background:#f1f5f9;border-radius:8px}.notice-success{margin-bottom:16px;padding:12px;background:#dcfce7;border-radius:8px;color:#166534}.admin-actions form{margin:0}.admin-actions a.btn{text-decoration:none}.blog-editor .form-actions a{display:inline-flex;align-items:center;text-decoration:none}
@media(max-width:900px){.blog-admin-grid{grid-template-columns:1fr}}
@media(max-width:640px){.blog-grid{grid-template-columns:1fr}.blog-page,.blog-detail-page{padding-top:16px}.blog-page-header h1{font-size:27px}.blog-card-body{padding:16px}.blog-article{padding:18px 14px}.blog-article h1{font-size:27px}.blog-content{font-size:16px;line-height:1.75}.blog-card-image img{object-fit:contain;background:#f1f5f9}}

/* =========================================================
   V2 TASARIM SİSTEMİ
   Turkuaz ana renk, siyah metin ve her ekranda eşit ilan kartları.
   Bu bölüm eski sürüm kurallarını güvenli biçimde geçersiz kılmak için sondadır.
   ========================================================= */
:root {
    --v2-turquoise: #12b8ad; /* Ana marka rengi. */
    --v2-turquoise-dark: #087f79; /* Hover ve güçlü vurgu rengi. */
    --v2-turquoise-soft: #e8fbf9; /* Açık yüzey ve seçili durum rengi. */
    --v2-ink: #050505; /* Kullanıcının istediği siyah metin rengi. */
    --v2-muted: #4b5563; /* İkincil metinlerde okunabilir gri. */
    --v2-line: #ccecea; /* Turkuaz tonlu ince ayırıcı. */
    --v2-surface: #ffffff; /* Kart yüzeyi. */
    --v2-page: #f4fbfa; /* Kartları öne çıkaran açık sayfa zemini. */
}

body {
    color: var(--v2-ink); /* Tüm temel yazıları siyaha çeker. */
    background: var(--v2-page); /* Turkuazla uyumlu ferah arka plan oluşturur. */
}

.site-header {
    background: var(--v2-surface); /* Siyah başlığı daha ferah beyaz yüzeye dönüştürür. */
    border-bottom: 3px solid var(--v2-turquoise); /* Markayı ince turkuaz çizgiyle vurgular. */
    box-shadow: 0 6px 24px rgba(8, 127, 121, .08); /* Başlığı zeminden hafifçe ayırır. */
}

.logo,
.nav-link,
.nav-dropdown-toggle,
.main-nav .nav-link,
.main-nav .nav-dropdown-toggle {
    color: var(--v2-ink); /* Menü yazılarını siyah yapar. */
}

.nav-link:hover,
.nav-dropdown-toggle:hover,
.nav-dropdown.is-open .nav-dropdown-toggle,
.main-nav .nav-link:hover,
.main-nav .nav-dropdown-toggle:hover,
.main-nav .nav-dropdown.is-open .nav-dropdown-toggle {
    color: var(--v2-ink); /* Hover sırasında da siyah okunabilirliği korur. */
    background: var(--v2-turquoise-soft); /* Etkileşimi açık turkuazla belirtir. */
}

.hero {
    background: linear-gradient(135deg, var(--v2-turquoise-dark), var(--v2-turquoise)); /* Ana vitrini turkuaz yapar. */
    border-radius: 18px; /* V2'nin daha modern köşe yapısını uygular. */
    box-shadow: 0 14px 32px rgba(8, 127, 121, .16); /* Turkuaz alanı görsel olarak öne çıkarır. */
}

.hero-title,
.hero-sub {
    color: #ffffff; /* Turkuaz zemin üzerinde yüksek kontrast sağlar. */
}

.btn,
.btn-small,
.pagination a.active,
.pagination a:hover,
#listings .btn-small {
    color: #ffffff; /* Ana buton yazılarını okunabilir tutar. */
    background: var(--v2-turquoise-dark); /* Butonları marka rengine bağlar. */
    border-color: var(--v2-turquoise-dark); /* Kenarlık ve zemini aynı tonda birleştirir. */
}

.btn:hover,
.btn-small:hover,
#listings .btn-small:hover {
    background: #056b66; /* Hover anında kontrollü koyulaşma sağlar. */
}

.filter-panel,
.listing-detail-card,
.blog-card,
.blog-article,
.admin-left,
.admin-right {
    border-color: var(--v2-line); /* Bütün ana yüzeylerde tutarlı turkuaz ayırıcı kullanır. */
    box-shadow: 0 10px 28px rgba(8, 127, 121, .07); /* Ağır olmayan ortak gölge sistemi kurar. */
}

.filter-form label,
.active-filter,
.muted,
.blog-card p,
.blog-content,
.listing-description {
    color: var(--v2-ink); /* İçerik metinlerini siyah palete taşır. */
}

.filter-form select:focus,
.filter-form input:focus,
input:focus,
select:focus,
textarea:focus {
    outline: 3px solid rgba(18, 184, 173, .22); /* Klavye ve dokunma odağını görünür kılar. */
    border-color: var(--v2-turquoise-dark); /* Aktif alanı marka rengiyle belirginleştirir. */
}

/* Tüm ilan seviyeleri aynı ölçüde görünür; VIP artık bir satırı kaplamaz. */
#listings.listings-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)); /* Her satıra tam dört ilan yerleştirir. */
    gap: 14px; /* Kartlar arasında kompakt ve düzenli boşluk bırakır. */
}

#listings .card,
#listings .card.vip,
#listings .card.gold,
#listings .card.silver {
    grid-column: span 1 !important; /* Hiçbir ilan kartının satırı tek başına kaplamasını engeller. */
    display: flex !important; /* Fotoğraf ve ilan adını dikey sıraya dizer. */
    min-width: 0; /* Dar ekranlarda grid taşmasını önler. */
    min-height: 0; /* Eski VIP yükseklik zorlamasını kaldırır. */
    flex-direction: column !important; /* Kart sırasını yukarıdan aşağıya korur. */
    background: var(--v2-surface) !important; /* Tüm kart seviyelerini aynı beyaz yüzeyde birleştirir. */
    border: 1px solid var(--v2-line) !important; /* VIP/GOLD renk ayrımını sade turkuaz çizgiye dönüştürür. */
    border-radius: 14px; /* Kartlara modern fakat kompakt köşe verir. */
    box-shadow: 0 7px 20px rgba(8, 127, 121, .08); /* Kartları zeminden hafifçe ayırır. */
}

#listings .card:hover {
    transform: translateY(-3px); /* Masaüstünde hafif yükselme geri bildirimi verir. */
    border-color: var(--v2-turquoise) !important; /* Hover sırasında turkuaz vurguyu güçlendirir. */
    box-shadow: 0 12px 28px rgba(8, 127, 121, .14); /* Etkileşim derinliğini artırır. */
}

#listings .card-summary-title {
    display: -webkit-box; /* Uzun isimleri iki satırla sınırlar. */
    min-height: 0; /* Başlığın gereksiz sabit yüksekliğini kaldırır. */
    margin: 2px 0 0; /* Fotoğrafın altındaki ilan adına 2 piksel boşluk verir. */
    padding: 4px 6px 6px; /* Fotoğraf altındaki başlığı kart kenarlarından ayırır. */
    overflow: hidden; /* Taşan metni kart içinde tutar. */
    color: var(--v2-ink); /* İlan adını siyah gösterir. */
    font-size: 16px; /* Masaüstünde rahat okunur başlık ölçüsü. */
    font-weight: 800; /* İlan adını görsel hiyerarşide öne çıkarır. */
    line-height: 1.25; /* İki satırlı başlığı kompakt tutar. */
    text-align: center; /* Dört sütunlu düzende dengeli görünüm sağlar. */
    white-space: normal; /* Uzun adların ikinci satıra geçmesine izin verir. */
    -webkit-box-orient: vertical; /* Satır sınırlamasının yönünü dikey yapar. */
    -webkit-line-clamp: 2; /* En fazla iki satır ilan adı gösterir. */
}

#listings .card .img,
#listings .card.vip .img,
#listings .card.gold .img,
#listings .card.silver .img {
    width: 100% !important; /* Görseli kart genişliğine eşitler. */
    height: auto !important; /* Eski sabit piksel yüksekliklerini kaldırır. */
    min-height: 0 !important; /* VIP kartın zorunlu yüksekliğini sıfırlar. */
    aspect-ratio: 4 / 5 !important; /* Dört sütunda düzenli portre oranı oluşturur. */
    background: var(--v2-turquoise-soft); /* Geç yüklenen görsellerde markalı zemin gösterir. */
    border-block: 0; /* Belirlenen 2px ve 0,4px mesafeye fazladan çizgi eklenmesini önler. */
}

#listings .card .img > img,
#listings .card.vip .img > img,
#listings .card.gold .img > img,
#listings .card.silver .img > img {
    width: 100% !important; /* Fotoğrafı görsel alanına yayar. */
    height: 100% !important; /* Portre çerçevesini eksiksiz doldurur. */
    object-fit: cover !important; /* Farklı görselleri ortak ölçüde kırpar. */
    object-position: center top; /* Portrelerde üst bölgenin korunmasını sağlar. */
}

#listings .card-summary-district {
    display: block; /* İlçeyi görselin altındaki ayrı satıra taşır. */
    min-height: 0; /* İlçe alanındaki gereksiz sabit yüksekliği kaldırır. */
    margin: .4px 0 0; /* Fotoğraf ile ilçe bilgisi arasında istenen 0,4 pikseli bırakır. */
    padding: 3px 4px; /* İlçe bilgisinin çevresindeki boşluğu kompaktlaştırır. */
    overflow: hidden; /* Uzun ilçe metninin kartı bozmasını önler. */
    color: var(--v2-ink); /* İlçe bilgisini siyah gösterir. */
    font-size: 13px; /* İkincil bilgi için dengeli ölçü kullanır. */
    font-weight: 700; /* Küçük boyutta okunabilirliği artırır. */
    line-height: 1.2; /* Alt satırı kompakt tutar. */
    text-align: center; /* Başlıkla aynı görsel ekseni korur. */
    text-overflow: ellipsis; /* Taşan ilçeyi üç noktayla kısaltır. */
    white-space: nowrap; /* İlçe yüksekliğinin değişmesini engeller. */
}

#listings .badge {
    top: 7px; /* Rozeti fotoğrafın üst kenarına yaklaştırır. */
    left: 7px; /* Rozeti kompakt kart içinde dengeler. */
    min-width: 0; /* Eski geniş rozet zorlamasını kaldırır. */
    padding: 4px 7px; /* Rozeti küçük kartlara uyarlar. */
    font-size: 9px; /* Fotoğrafı kapatmadan seviyeyi gösterir. */
}

#listings .badge.vip,
#listings .badge.gold,
#listings .badge.silver {
    color: #ffffff; /* Tüm seviye yazılarında yüksek kontrast sağlar. */
    background: rgba(5, 5, 5, .72); /* Renk karmaşasını kaldıran nötr rozet oluşturur. */
}

/* Mobilde kullanıcının istediği dört sütun kesin olarak korunur. */
@media (max-width: 640px) {
    .container {
        padding: 6px; /* Mobilde sayfa kenarlarındaki kullanılmayan alanı azaltır. */
    }

    .site-header .container,
    .header-inner {
        padding: 8px 6px; /* Mobil başlığın dikey ve yatay boşluğunu azaltır. */
    }

    .hero {
        margin: 7px 0; /* Vitrin çevresindeki büyük boşlukları temizler. */
        padding: 12px 9px; /* Vitrini daha kompakt hâle getirir. */
    }

    #listings.listings-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)); /* Telefon ekranında satır başına dört ilan verir. */
        gap: 3px; /* Kartlar arasındaki boşluğu azaltarak ilan alanını büyütür. */
        margin-top: 6px; /* Izgara üstündeki gereksiz boşluğu yarıya indirir. */
    }

    #listings .card,
    #listings .card.vip,
    #listings .card.gold,
    #listings .card.silver {
        grid-column: span 1 !important; /* Önceki tek sütunlu mobil kuralını geçersiz kılar. */
        display: flex !important; /* Tüm ilan türlerinde aynı dikey kart yapısını korur. */
        border-radius: 8px; /* Dar kartlarda köşe yarıçapını küçültür. */
        box-shadow: 0 3px 10px rgba(8, 127, 121, .08); /* Mobilde daha hafif gölge kullanır. */
    }

    #listings .card-summary-title {
        min-height: 0; /* Mobil başlık alanının boş yere uzamasını önler. */
        margin: 2px 0 0; /* Mobilde fotoğraf ile alttaki ilan adı arasını 2 piksel yapar. */
        padding: 2px; /* Mobilde ilan adının çevresinde küçük ve dengeli boşluk bırakır. */
        font-size: clamp(9px, 2.65vw, 11px) !important; /* Farklı telefon genişliklerine uyum sağlar. */
        line-height: 1.05; /* İki satırlı küçük başlığı daha kompakt tutar. */
    }

    #listings .card .img,
    #listings .card.vip .img,
    #listings .card.gold .img,
    #listings .card.silver .img {
        width: 100% !important; /* Eski mobil genişlik kurallarını sıfırlar. */
        height: auto !important; /* Görsel yüksekliğini en-boy oranından üretir. */
        min-height: 0 !important; /* Eski 220 piksel zorlamasını kaldırır. */
        aspect-ratio: 3 / 4 !important; /* Dar sütunda fotoğrafa daha dengeli portre alanı verir. */
    }

    #listings .card .img > img,
    #listings .card.vip .img > img,
    #listings .card.gold .img > img,
    #listings .card.silver .img > img {
        width: 100% !important; /* Mobilde fotoğrafı kart genişliğine uydurur. */
        height: 100% !important; /* En-boy çerçevesinin tamamını doldurur. */
        object-fit: cover !important; /* Görsellerin kart yüksekliğini bozmasını engeller. */
        transform: none !important; /* Hover büyütmesini dokunmatik ekranda kapatır. */
    }

    #listings .card-summary-district {
        min-height: 0; /* Mobil ilçe alanındaki zorunlu yüksekliği kaldırır. */
        max-width: 100%; /* Eski yüzde 42 genişlik sınırlamasını kaldırır. */
        margin: .4px 0 0; /* Mobilde fotoğraf ile ilçe arasını 0,4 piksel yapar. */
        padding: 2px 1px; /* İlçe kutusunun üst ve alt boşluğunu minimuma indirir. */
        color: var(--v2-ink); /* Mobil ilçe yazısını siyah yapar. */
        font-size: clamp(8px, 2.3vw, 10px); /* İlçenin dört sütunda okunmasını sağlar. */
        line-height: 1.05; /* İlçe satırının yüksekliğini gereksiz büyütmez. */
        text-align: center; /* Alt satırı kart ekseninde tutar. */
    }

    .pagination {
        margin: 12px 0 18px; /* Sayfalama çevresindeki dikey boşluğu azaltır. */
    }

    #listings .badge {
        display: none; /* İstenen ad-fotoğraf-ilçe düzenini mobilde temiz tutar. */
    }

    .main-nav {
        background: var(--v2-turquoise-dark); /* Sabit mobil menüyü ana renge dönüştürür. */
        border-top-color: var(--v2-turquoise); /* Menü üst çizgisini paletle uyumlu yapar. */
    }

    .main-nav .nav-link,
    .main-nav .nav-dropdown-toggle {
        color: #ffffff; /* Koyu turkuaz menü üzerinde okunabilirlik sağlar. */
    }
}

@media (max-width: 340px) {
    #listings.listings-grid {
        gap: 3px; /* Çok dar telefonlarda dört sütunun taşmasını önler. */
    }

    #listings .card-summary-title {
        font-size: 8px !important; /* 320 piksel civarında başlığı karta sığdırır. */
    }

    #listings .card-summary-district {
        font-size: 8px; /* Çok dar ekranda ilçe satırını dengeler. */
    }
}

/* V2 dinamik içerik sayfaları */
.content-page {
    padding-top: 18px; /* Sayfa yoluyla içerik arasında dengeli alan bırakır. */
    padding-bottom: 42px; /* Son ilan satırının mobil menüye yapışmasını engeller. */
}

.content-page-header {
    margin: 0 0 12px; /* H1 alanını ilan ızgarasına kompakt bağlar. */
    padding: 18px; /* Başlık ve açıklamayı okunabilir tek yüzeyde toplar. */
    background: linear-gradient(135deg, var(--v2-turquoise-soft), #ffffff); /* V2 turkuaz temasını sürdürür. */
    border: 1px solid var(--v2-line); /* İçerik başlığını zeminden ayırır. */
    border-radius: 14px; /* Diğer v2 yüzeylerle aynı köşe dilini kullanır. */
}

.content-page-header h1 {
    margin: 0; /* Tarayıcının varsayılan büyük üst-alt boşluğunu kaldırır. */
    color: var(--v2-ink); /* Başlığı siyah tutar. */
    font-size: clamp(22px, 4vw, 34px); /* Başlığı telefondan masaüstüne akıcı ölçekler. */
    line-height: 1.2; /* Çok kelimeli URL başlıklarını kompakt tutar. */
}

.content-page-header p {
    margin: 7px 0 0; /* Açıklamayı başlığa yakın tutar. */
    color: var(--v2-ink); /* Açıklamada istenen siyah metni korur. */
    line-height: 1.55; /* Kısa açıklamanın rahat okunmasını sağlar. */
}

@media (max-width: 640px) {
    .content-page {
        padding-top: 6px; /* Mobilde üst boşluğu azaltır. */
    }

    .content-page-header {
        margin-bottom: 6px; /* Başlık ile dört sütunlu ilan alanını yaklaştırır. */
        padding: 10px 8px; /* Mobil içerik başlığındaki gereksiz boşluğu temizler. */
        border-radius: 9px; /* Küçük ekranda köşeleri orantılar. */
    }

    .content-page-header h1 {
        font-size: 18px; /* Uzun sayfa adlarının taşmasını azaltır. */
    }

    .content-page-header p {
        margin-top: 4px; /* Mobil açıklamayı başlığa yaklaştırır. */
        font-size: 12px; /* Dört sütun alanına daha fazla dikey yer bırakır. */
        line-height: 1.35; /* Açıklamayı kompakt tutar. */
    }
}