:root {
    --powder-pink: #db9e9eec;
    --metallic-grey: #a8a9aa;
    --dark-grey: #222427;
    --white: #ffffff;
}

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', sans-serif; }

body { background: #fdfdfd; color: var(--dark-grey); }

/* --- Navigasyon & Mobile Uyumluluk --- */
.navbar {
    display: flex; justify-content: space-between; align-items: center;
    padding: 15px 5%; background: var(--white); border-bottom: 2px solid var(--powder-pink);
    position: sticky; top: 0; z-index: 1000; flex-wrap: wrap;
}

.logo-text { font-size: 24px; font-weight: bold; }
.logo-text span { color: var(--powder-pink); text-shadow: 1px 1px 1px var(--metallic-grey); }

.search-box { position: relative; display: flex; align-items: center; }
.search-box input {
    padding: 8px 15px; border: 1px solid var(--metallic-grey); border-radius: 20px; outline: none;
}

.icon-group { display: flex; gap: 20px; margin-left: 15px; }
.icon-item { position: relative; cursor: pointer; font-size: 20px; }
.badge {
    position: absolute; top: -10px; right: -10px; background: var(--powder-pink);
    font-size: 10px; padding: 2px 6px; border-radius: 50%;
}

/* --- Hero Bölümü --- */
.hero {
    height: 60vh;
    background: linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.2)),
                url('https://images.unsplash.com/photo-1590794056226-79ef3a8147e1?auto=format&fit=crop&w=1350'); /* Ocak üstü tencere görseli */
    background-size: cover; background-position: center;
    display: flex; align-items: center; justify-content: center;
}
.hero h1 { color: white; font-size: clamp(1.5rem, 5vw, 3.5rem); letter-spacing: 3px; text-align: center;}

/* --- Kategori Menüsü --- */
.category-menu { display: flex; justify-content: center; gap: 10px; padding: 20px; background: var(--powder-pink); }
.category-menu button {
    background: var(--white); border: 1px solid var(--metallic-grey); padding: 10px 20px;
    border-radius: 5px; cursor: pointer; transition: 0.3s;
}
.category-menu button:hover { background: var(--metallic-grey); color: white; }

/* --- Ürün Kartları --- */
.container { padding: 40px 5%; }
.product-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px;
}
.product-card {
    background: white; border: 1px solid #eee; border-radius: 10px; overflow: hidden;
    transition: transform 0.3s;
}
.product-card:hover { transform: translateY(-5px); }
.img-wrapper { height: 200px; background: #f9f9f9; display: flex; align-items: center; justify-content: center; }
.img-wrapper img { max-width: 30%; }

.p-info { padding: 20px; }
.stars { color: #f1c40f; font-size: 14px; margin: 10px 0; }
.mini-specs { list-style: none; font-size: 13px; color: #1c1a1a; margin-bottom: 15px; }
.mini-specs li::before { content: "• "; color: var(--powder-pink); }
.price { font-size: 20px; font-weight: bold; color: var(--metallic-black); }

.actions { display: flex; gap: 10px; margin-top: 15px; align-items: center;}
.qty { display: flex; border: 1px solid #ddd; }
.qty input { width: 30px; border: none; text-align: center; }
.qty button { background: #eee; border: none; padding: 5px 10px; cursor: pointer;}

.add-to-cart { background: var(--powder-pink); border: none; padding: 10px; flex: 1; cursor: pointer; font-weight: bold;}
.add-to-wish { background: none; border: 1px solid var(--powder-pink); padding: 10px; cursor: pointer; color: var(--powder-pink); }

/* --- Alt Sayfalar (Full Page) --- */
.full-page {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: white; z-index: 2000; display: none; padding: 50px;
}
.image-grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 30px;
}
.empty-img-slot {
    height: 200px; background: #f0f0f0; border: 2px dashed var(--metallic-grey);
    display: flex; flex-direction: column; align-items: center; justify-content: center; color: #999;
}

/* --- Yan Paneller & Footer --- */
.side-panel {
    position: fixed; right: -400px; top: 0; width: 350px; height: 100%;
    background: white; z-index: 1500; transition: 0.4s; padding: 20px;
}
.side-panel.active { right: 0; }
#overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); display: none; z-index: 1400; }

footer { background: var(--dark-grey); color: white; padding: 50px 5% 20px; margin-top: 50px;}
.footer-content { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 40px; border-bottom: 1px solid #444; padding-bottom: 30px; }
.footer-bottom { text-align: center; padding-top: 20px; font-size: 12px; color: #888; }

/* --- Mobile --- */
@media (max-width: 768px) {
    .navbar { flex-direction: column; gap: 15px; }
    .search-box input { width: 100%; }
    .hero { height: 40vh; }
    .image-grid { grid-template-columns: 1fr; }
}
.site-logo {
    height: 65px; /* Logonun yüksekliğini buradan değiştirebilirsin */
    width: auto;  /* Genişliği oranlı şekilde kendi ayarlar */
    display: block;
    cursor: pointer;
}
  /* --- Geri Dön Butonu (Birleştirilmiş & Optimize Edilmiş) --- */
.close-page {
    /* Konumlandırma */
    position: absolute;
    top: 15px;
    left: 15px;
    z-index: 10;

    /* İçerik Hizalama */
    display: flex;
    align-items: center;
    gap: 6px; /* İkon ve yazı arası daraltıldı */

    /* Boyutlandırma ve Stil */
    background-color: var(--dark-grey); /* Tema rengin */
    color: var(--white);
    border: none;
    padding: 6px 14px; /* Buton küçültüldü */
    font-size: 12px;   /* Yazı küçültüldü */
    font-weight: 600;
    border-radius: 20px; /* Hap şeklinde yuvarlak köşeler */
    
    /* Etkileşim */
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    outline: none;
}

/* Hover (Üzerine Gelince) Efekti */
.close-page:hover {
    background-color: var(--powder-pink); /* Pembe tonuna döner */
    transform: translateX(-4px);         /* Hafif sola kayma animasyonu */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

/* İkon Boyutu */
.close-page i {
    font-size: 13px;
} 
/* Alt Sayfa Ürün Düzeni */
.product-detail-container {
    display: flex;
    flex-direction: column;
    gap: 40px;
    margin-top: 50px;
    overflow-y: auto;
    max-height: 80vh;
}

.product-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    background: #fff;
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

/* Kaydırmalı Fotoğraf Alanı */
.product-slider {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    height: 300px;
    background: #f9f9f9;
}

.slider-wrapper {
    display: flex;
    transition: transform 0.4s ease-in-out;
    height: 100%;
}

.slider-wrapper img {
    min-width: 100%;
    object-fit: contain;
}

.slider-nav {
    position: absolute;
    top: 50%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    transform: translateY(-50%);
    padding: 0 10px;
}

.slider-nav button {
    background: rgba(255,255,255,0.7);
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    cursor: pointer;
}

/* Ürün Bilgileri Alanı */
.product-details h3 { font-size: 24px; color: var(--dark-grey); }
.product-desc { margin: 15px 0; color: #666; line-height: 1.6; }
.specs-list { list-style: none; margin-bottom: 20px; }
.specs-list li { font-size: 14px; margin-bottom: 5px; color: var(--metallic-grey); }
.price-tag { font-size: 28px; font-weight: bold; color: var(--powder-pink); margin-bottom: 20px; }

/* Mobil Uyumluluk */
@media (max-width: 768px) {
    .product-row { grid-template-columns: 1fr; }
    .product-slider { height: 250px; }
}
/* Butonları yan yana dizen alan */
.actions {
    display: flex;
    gap: 10px;
    margin-top: 15px;
    align-items: center;
}

/* Beğenme Butonu Tasarımı */
.add-to-wish {
    background: none;
    border: 1px solid #ddd;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
    color: #555;
}

.add-to-wish:hover {
    background-color: #fff0f3; /* Çok açık bir pembe */
    color: #e91e63; /* Canlı pembe/kırmızı */
    border-color: #e91e63;
}

.add-to-wish i {
    font-size: 1.2rem;
}
.panel-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-bottom: 1px solid #eee;
}
.panel-item img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 4px;
}
.item-info { flex-grow: 1; }
.item-name { font-size: 14px; margin: 0; }
.item-price { font-weight: bold; color: #e67e22; margin: 0; }
.remove-btn { background: none; border: none; color: red; cursor: pointer; font-size: 18px; }