/* ==================================================
   İLAN DETAY SAYFASI CSS
   (Layout root/reset kullanıyor)
================================================= */

.page {
    max-width:1200px;
    margin:24px auto;
    padding:0 16px;
}

.detail {
    display:flex;
    gap:24px;
    align-items:flex-start;
}

@media(max-width:900px){
    .detail { flex-direction:column; }
}

/* GALLERY */
.gallery {
    flex:0 0 55%;
    max-height:560px;
    background:var(--card);
    border-radius:16px;
    overflow:hidden;
    box-shadow:0 8px 20px var(--shadow);
    border:1px solid var(--border);
    display:flex;
    flex-direction:column;
    transition: all 0.3s ease;
}

.main-image {
    aspect-ratio:4/3;
    cursor:zoom-in;
    position:relative;
    overflow:hidden;
    border-bottom:1px solid var(--border);
}

.main-image img {
    width:100%;
    height:100%;
    object-fit:cover;
    transition: transform 0.3s ease;
}

.main-image:hover img { transform: scale(1.05); }

/* THUMBNAILS */
.thumbs-wrapper { position:relative; }

.thumbs {
    display:flex;
    gap:10px;
    padding:12px 44px;
    overflow-x:auto;
    scroll-behavior:smooth;
}

.thumb {
    width:90px;
    height:60px;
    flex:0 0 auto;
    border-radius:10px;
    overflow:hidden;
    cursor:pointer;
    border:2px solid transparent;
    transition: all 0.3s ease;
    box-shadow:0 2px 6px var(--shadow);
}

.thumb:hover { transform:scale(1.05); }

.thumb.active {
    border-color:var(--primary);
    box-shadow:0 4px 12px var(--shadow);
    transform:scale(1.1);
}

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

/* THUMB ARROWS */
.thumb-arrow {
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:36px;
    height:36px;
    border-radius:50%;
    background:#fff;
    border:1px solid var(--border);
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    user-select:none;
    font-size:18px;
    z-index:5;
    box-shadow:0 2px 8px var(--shadow);
    transition: background 0.2s ease, color 0.2s ease;
}

.thumb-arrow.left { left:6px; }
.thumb-arrow.right { right:6px; }

.thumb-arrow:hover { background:var(--primary); color:#fff; }

/* INFO PANEL */
.info {
    flex:1;
    background:var(--card);
    border-radius:16px;
    padding:28px;
    box-shadow:0 8px 20px var(--shadow);
    border:1px solid var(--border);
    display:flex;
    flex-direction:column;
    gap:16px;
}

.title { 
    font-size:1.875rem; 
    font-weight:700; 
    color:var(--text); /* Başlık koyu renk */
    margin-bottom:6px; 
}

.price { 
    font-size:1.875rem; 
    font-weight:700; 
    color:var(--primary); /* Fiyat yeşil */
    margin-bottom:6px; 
}

.meta {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
    margin-bottom:16px;
}

.meta div { font-size:0.875rem; color:var(--muted); }

.meta strong { display:block; color:var(--text); font-weight:500; }

.description { font-size:0.938rem; line-height:1.8; color:#333; }

/* MODAL */
.modal {
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.85);
    display:none;
    align-items:center;
    justify-content:center;
    z-index:1000;
    animation:fadeIn 0.3s ease;
}

@keyframes fadeIn { from{opacity:0;} to{opacity:1;} }

.modal.active { display:flex; }

.modal img {
    max-width:90%;
    max-height:90%;
    object-fit:contain;
    border-radius:12px;
    box-shadow:0 8px 20px var(--shadow);
}

.arrow, .close { color:#fff; cursor:pointer; user-select:none; }

.arrow {
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    font-size:2.5rem;
    transition: color 0.2s ease;
}

.arrow.left { left:20px; }
.arrow.right { right:20px; }

.arrow:hover { color:var(--primary); }

.close {
    position:absolute;
    top:20px;
    right:24px;
    font-size:2.125rem;
    font-weight:600;
}

@media(max-width:900px){
    .gallery { flex:1; max-width:100%; border-radius:12px; }
    .thumbs { padding:12px 16px; gap:8px; }
    .thumb-arrow { display:none; }
}