@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Poppins:wght@300;400;500;600&display=swap');

:root {
    --ana:      #1e272e;
    --vurgu:    #c8a97e;
    --arka:     #fdfcfb;
    --beyaz:    #ffffff;
    --gri:      #555555;
    --giris:    #f4f4f4;
    --kart-gl:  0 8px 25px rgba(0,0,0,.06);
    --gecis:    .3s ease;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
    font-family:'Poppins',sans-serif;
    background:var(--arka);
    color:var(--ana);
    line-height:1.6;
    overflow-x:hidden;
}
h1,h2,h3 { font-family:'Playfair Display',serif; font-weight:700; }
a { text-decoration:none; color:inherit; }
img { display:block; max-width:100%; }

/* ─── HEADER ─── */
header {
    background:var(--beyaz);
    padding:20px 5%;
    display:flex;
    justify-content:space-between;
    align-items:center;
    box-shadow:0 2px 10px rgba(0,0,0,.05);
    position:sticky;
    top:0;
    z-index:100;
}
.logo { font-size:24px; font-family:'Playfair Display',serif; font-weight:bold; }
.logo span { color:var(--vurgu); }
nav ul { list-style:none; display:flex; gap:25px; }
nav ul li a { font-weight:500; font-size:15px; transition:color var(--gecis); }
nav ul li a:hover { color:var(--vurgu); }
.header-sag { display:flex; align-items:center; gap:20px; }
.iletisim-btn {
    background:var(--ana);
    color:var(--beyaz);
    padding:10px 22px;
    border-radius:25px;
    font-size:14px;
    transition:background var(--gecis);
}
.iletisim-btn:hover { background:var(--vurgu); color:var(--ana); }

/* ─── SEPET ─── */
.sepet-kapsayici { position:relative; cursor:pointer; display:flex; align-items:center; }
.sepet-ikon { font-size:24px; }
.sepet-badge {
    position:absolute; top:-8px; right:-10px;
    background:var(--vurgu); color:var(--ana);
    border-radius:50%; padding:2px 6px;
    font-size:12px; font-weight:bold;
}
.sepet-panel {
    position:fixed; top:0; right:-400px;
    width:350px; height:100vh;
    background:var(--beyaz);
    box-shadow:-5px 0 15px rgba(0,0,0,.1);
    z-index:1000;
    transition:right var(--gecis);
    padding:25px;
    display:flex; flex-direction:column;
}
.sepet-panel.acik { right:0; }
.sepet-baslik {
    display:flex; justify-content:space-between; align-items:center;
    border-bottom:2px solid var(--giris);
    padding-bottom:15px; margin-bottom:15px;
}
.sepet-kapat { font-size:28px; cursor:pointer; color:var(--ana); line-height:1; }
.sepet-liste { flex-grow:1; overflow-y:auto; }
.sepet-oge {
    display:flex; justify-content:space-between; align-items:center;
    margin-bottom:15px; border-bottom:1px solid #eee; padding-bottom:10px;
}
.sepet-oge-detay h4 { font-size:14px; margin-bottom:5px; }
.sepet-oge-fiyat { font-size:14px; font-weight:bold; color:var(--vurgu); }
.sepet-oge-sil { color:red; cursor:pointer; font-size:20px; background:none; border:none; font-weight:bold; }
.sepet-bos { text-align:center; color:var(--gri); margin-top:50px; }
.sepet-alt { border-top:2px solid var(--giris); padding-top:20px; margin-top:auto; }
.sepet-toplam { display:flex; justify-content:space-between; font-weight:bold; font-size:18px; margin-bottom:20px; }
.siparis-tamamla-btn {
    width:100%; background:var(--vurgu); color:var(--ana);
    padding:15px; text-align:center; border:none; border-radius:25px;
    font-weight:bold; font-size:16px; cursor:pointer; transition:all var(--gecis);
    display:block;
}
.siparis-tamamla-btn:hover { background:var(--ana); color:var(--beyaz); }

/* ─── HAMBURGER + MOBİL MENÜ ─── */
.hamburger {
    display:none; flex-direction:column; gap:5px;
    cursor:pointer; background:none; border:none; padding:4px;
}
.hamburger span { display:block; width:24px; height:2px; background:var(--ana); border-radius:2px; transition:all var(--gecis); }
.nav-mobil {
    display:none; position:fixed; inset:0;
    background:rgba(0,0,0,.5); z-index:200;
}
.nav-mobil.acik { display:block; }
.nav-mobil-icerik {
    position:absolute; top:0; right:0;
    width:260px; height:100%;
    background:var(--beyaz);
    padding:30px 25px;
    display:flex; flex-direction:column;
}
.nav-mobil-kapat {
    align-self:flex-end; font-size:28px; cursor:pointer;
    background:none; border:none; color:var(--ana); line-height:1; margin-bottom:20px;
}
.nav-mobil-icerik a {
    display:block; padding:14px 0; font-size:16px; font-weight:500;
    border-bottom:1px solid #f0f0f0; color:var(--ana); transition:color var(--gecis);
}
.nav-mobil-icerik a:hover { color:var(--vurgu); }
.nav-mobil-icerik .nav-vurgu { color:var(--vurgu); font-weight:600; }

/* ─── HERO ─── */
.hero {
    height:85vh;
    background:linear-gradient(rgba(30,39,46,.7),rgba(30,39,46,.7)),
               url('https://images.unsplash.com/photo-1563241527-3004b7be0ffd?auto=format&fit=crop&w=1920&q=80') center/cover;
    display:flex; flex-direction:column;
    justify-content:center; align-items:center;
    text-align:center; color:var(--beyaz); padding:0 20px;
}
.hero h1 { font-size:56px; margin-bottom:20px; text-shadow:2px 2px 4px rgba(0,0,0,.4); }
.hero p  { font-size:20px; max-width:650px; margin-bottom:35px; font-weight:300; }
.hero-btn {
    background:var(--vurgu); color:var(--ana);
    padding:15px 35px; font-size:16px; font-weight:bold;
    border-radius:30px; transition:all var(--gecis);
    box-shadow:0 4px 15px rgba(0,0,0,.2);
}
.hero-btn:hover { transform:translateY(-3px); box-shadow:0 6px 20px rgba(0,0,0,.3); background:var(--beyaz); }

/* ─── GENEL BÖLÜM ─── */
section { padding:90px 5%; text-align:center; }
section h2 {
    font-size:40px; margin-bottom:15px;
    position:relative; display:inline-block;
}
section h2::after {
    content:''; display:block; width:60px; height:3px;
    background:var(--vurgu); margin:10px auto 0;
}
p.alt-baslik {
    color:var(--gri); margin-bottom:60px; max-width:600px;
    margin-left:auto; margin-right:auto; font-weight:300;
}

/* ─── ÜRÜNLER ─── */
.urunler-bolumu { background:var(--arka); }
.urun-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px; max-width:1200px; margin:0 auto;
}
.urun-karti {
    background:var(--beyaz); border-radius:12px; overflow:hidden;
    box-shadow:var(--kart-gl); transition:all .4s ease;
    border:1px solid rgba(0,0,0,.02); position:relative;
}
.urun-karti:hover { transform:translateY(-10px); border-color:var(--vurgu); box-shadow:0 15px 35px rgba(0,0,0,.1); }
.etiket {
    position:absolute; top:15px; right:15px;
    background:var(--vurgu); color:var(--ana);
    padding:5px 12px; font-size:11px; font-weight:600;
    border-radius:20px; z-index:2; letter-spacing:.5px;
}
.etiket.yeni { background:var(--ana); color:var(--beyaz); }
.urun-gorsel-kutu { width:100%; height:320px; overflow:hidden; }
.urun-gorsel {
    width:100%; height:100%; object-fit:cover;
    transition:transform .6s ease;
}
.urun-karti:hover .urun-gorsel { transform:scale(1.08); }
.urun-icerik { padding:25px 20px; text-align:center; }
.urun-icerik h3 {
    font-size:18px; margin-bottom:8px; color:var(--ana); font-weight:600;
    height:54px; display:flex; align-items:center; justify-content:center;
}
.fiyat {
    font-size:18px; font-family:'Playfair Display',serif; font-weight:700;
    color:var(--vurgu); margin-bottom:20px; display:block;
}
.satin-al-btn {
    display:inline-block; border:1px solid var(--ana);
    background:transparent; padding:8px 30px;
    border-radius:25px; font-size:14px; font-weight:500;
    transition:all var(--gecis); color:var(--ana); cursor:pointer;
    font-family:'Poppins',sans-serif;
}
.urun-karti:hover .satin-al-btn { background:var(--ana); color:var(--beyaz); }

/* ─── ÖZEL GÜNLER ─── */
.ozel-gunler-bolumu { background:var(--beyaz); }
.ozel-gun-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:25px; margin-top:40px; }
.ozel-gun-kart {
    background:var(--arka); color:var(--ana);
    padding:40px; border-radius:12px;
    font-family:'Playfair Display',serif; font-size:22px; font-weight:bold;
    cursor:pointer; transition:all var(--gecis);
    border:1px solid rgba(30,39,46,.1);
    display:flex; align-items:center; justify-content:center; height:120px;
}
.ozel-gun-kart:hover { transform:translateY(-5px); background:var(--ana); color:var(--vurgu); box-shadow:0 10px 20px rgba(0,0,0,.1); border-color:var(--ana); }

/* ─── BLOG ─── */
.blog-bolumu { background:var(--arka); }
.blog-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:30px; max-width:1200px; margin:0 auto; }
.blog-karti {
    background:var(--beyaz); border-radius:12px; overflow:hidden;
    box-shadow:var(--kart-gl); transition:all .4s ease;
}
.blog-karti:hover { transform:translateY(-8px); box-shadow:0 15px 35px rgba(0,0,0,.1); }
.blog-gorsel-kutu { height:220px; overflow:hidden; }
.blog-gorsel { width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.blog-karti:hover .blog-gorsel { transform:scale(1.06); }
.blog-icerik { padding:25px 20px; }
.blog-tarih { font-size:12px; color:var(--gri); margin-bottom:10px; letter-spacing:.5px; }
.blog-icerik h3 { font-size:18px; margin-bottom:10px; color:var(--ana); line-height:1.4; }
.blog-ozet { font-size:14px; color:var(--gri); line-height:1.7; margin-bottom:16px; }
.blog-devami {
    font-size:13px; font-weight:600; color:var(--vurgu);
    letter-spacing:.5px; transition:color var(--gecis);
}
.blog-karti:hover .blog-devami { color:var(--ana); }

/* ─── İLETİŞİM / SİPARİŞ ─── */
.iletisim-bolumu { background:var(--ana); color:var(--arka); padding-bottom:40px; }
.iletisim-bolumu h2 { color:var(--vurgu); }
.iletisim-bolumu p.alt-baslik { color:var(--arka); opacity:.85; }
.iletisim-izgara {
    display:grid; grid-template-columns:1fr 1.2fr; gap:40px;
    max-width:1000px; margin:0 auto; text-align:left;
}
.iletisim-bilgileri { padding:20px 0; }
.iletisim-bilgileri h3 { font-size:28px; margin-bottom:30px; color:var(--vurgu); }
.bilgi-kutu { margin-bottom:25px; }
.bilgi-kutu strong { display:block; font-size:16px; color:var(--vurgu); margin-bottom:5px; }
.bilgi-kutu p { color:var(--beyaz); font-size:14px; opacity:.9; line-height:1.6; }
.form-konteyner {
    background:var(--beyaz); padding:35px;
    border-radius:20px; box-shadow:0 15px 40px rgba(0,0,0,.2); color:var(--ana);
}
.form-grup { margin-bottom:20px; }
.form-grup label { display:block; margin-bottom:8px; font-weight:600; font-size:14px; }
.form-input, .form-textarea {
    width:100%; padding:12px; border:1px solid #ddd; border-radius:8px;
    background:var(--giris); font-family:'Poppins',sans-serif; font-size:14px;
    transition:border-color var(--gecis);
}
.form-input:focus, .form-textarea:focus { outline:none; border-color:var(--vurgu); background:#fff; }
.form-textarea { resize:vertical; height:100px; }
.form-gonder-btn {
    background:var(--ana); color:var(--beyaz);
    padding:12px; border:none; border-radius:30px;
    font-size:15px; font-weight:bold; cursor:pointer;
    transition:all var(--gecis); width:100%;
}
.form-gonder-btn:hover { background:var(--vurgu); color:var(--ana); }
.odeme-notu { font-size:12px; color:var(--gri); margin-top:-10px; margin-bottom:12px; text-align:center; }
.basari-mesaj {
    background:#d4edda; color:#155724; border:1px solid #c3e6cb;
    padding:14px 20px; border-radius:8px; margin-bottom:20px; font-size:14px;
}
.hata-mesaj {
    background:#f8d7da; color:#721c24; border:1px solid #f5c6cb;
    padding:14px 20px; border-radius:8px; margin-bottom:20px; font-size:14px;
}

/* ─── GİRİŞ / KAYIT ─── */
.auth-sayfa {
    min-height:100vh; background:var(--arka);
    display:flex; align-items:center; justify-content:center; padding:40px 20px;
}
.auth-kutu {
    background:var(--beyaz); padding:50px 45px; border-radius:20px;
    box-shadow:0 10px 40px rgba(0,0,0,.08); width:100%; max-width:460px;
}
.auth-logo { text-align:center; font-size:26px; font-family:'Playfair Display',serif; margin-bottom:10px; }
.auth-logo span { color:var(--vurgu); }
.auth-tabs { display:flex; border-bottom:2px solid #eee; margin-bottom:30px; }
.auth-tab {
    flex:1; padding:12px; font-size:15px; font-weight:600; text-align:center;
    cursor:pointer; border:none; background:none; color:var(--gri);
    transition:color var(--gecis); border-bottom:2px solid transparent; margin-bottom:-2px;
}
.auth-tab.aktif { color:var(--ana); border-bottom-color:var(--vurgu); }
.auth-form { display:none; }
.auth-form.aktif { display:block; }
.auth-alt { text-align:center; margin-top:20px; font-size:14px; color:var(--gri); }
.auth-alt a { color:var(--vurgu); font-weight:600; }

/* ─── FOOTER ─── */
footer {
    background:var(--ana); color:var(--arka);
    text-align:center; padding:20px;
    border-top:1px solid rgba(255,255,255,.05);
    font-size:13px; opacity:.6;
}

/* ─── BLOG DETAY ─── */
.blog-detay-sayfa { max-width:800px; margin:60px auto; padding:0 20px; }
.blog-detay-gorsel { width:100%; height:400px; object-fit:cover; border-radius:16px; margin-bottom:40px; }
.blog-detay-baslik { font-size:36px; margin-bottom:16px; }
.blog-detay-tarih { color:var(--gri); font-size:13px; margin-bottom:30px; }
.blog-detay-icerik { font-size:16px; line-height:1.9; color:#333; }
.blog-geri { display:inline-block; margin-bottom:30px; color:var(--vurgu); font-weight:600; }

/* ─── ADMİN PANEL ─── */
.admin-sayfa { display:flex; min-height:100vh; }
.admin-sidebar {
    width:240px; background:var(--ana); color:var(--beyaz);
    padding:30px 0; position:fixed; height:100vh; overflow-y:auto;
}
.admin-logo { padding:0 25px 30px; font-family:'Playfair Display',serif; font-size:20px; border-bottom:1px solid rgba(255,255,255,.1); margin-bottom:10px; }
.admin-logo span { color:var(--vurgu); }
.admin-nav a {
    display:block; padding:12px 25px; color:rgba(255,255,255,.75);
    font-size:14px; font-weight:500; transition:all var(--gecis); border-left:3px solid transparent;
}
.admin-nav a:hover, .admin-nav a.aktif { background:rgba(255,255,255,.05); color:var(--beyaz); border-left-color:var(--vurgu); }
.admin-icerik { margin-left:240px; padding:35px; flex:1; background:#f5f5f5; min-height:100vh; }
.admin-baslik { display:flex; justify-content:space-between; align-items:center; margin-bottom:30px; }
.admin-baslik h1 { font-size:28px; color:var(--ana); }
.btn { display:inline-block; padding:10px 22px; border-radius:8px; font-size:14px; font-weight:600; cursor:pointer; border:none; transition:all var(--gecis); }
.btn-ana { background:var(--ana); color:var(--beyaz); }
.btn-ana:hover { background:#2d3d47; }
.btn-vurgu { background:var(--vurgu); color:var(--ana); }
.btn-vurgu:hover { background:#b8976b; }
.btn-tehlike { background:#e74c3c; color:#fff; }
.btn-tehlike:hover { background:#c0392b; }
.btn-kucuk { padding:6px 14px; font-size:13px; }
.kart { background:var(--beyaz); border-radius:12px; padding:25px; box-shadow:0 2px 10px rgba(0,0,0,.05); margin-bottom:25px; }
.kart-baslik { font-size:16px; font-weight:600; color:var(--ana); margin-bottom:20px; padding-bottom:12px; border-bottom:1px solid #eee; }
.istatistik-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-bottom:30px; }
.istatistik-kutu {
    background:var(--beyaz); border-radius:12px; padding:25px;
    box-shadow:0 2px 10px rgba(0,0,0,.05); text-align:center;
    border-left:4px solid var(--vurgu);
}
.istatistik-kutu .sayi { font-size:36px; font-weight:700; color:var(--ana); font-family:'Playfair Display',serif; }
.istatistik-kutu .etiket-ist { font-size:13px; color:var(--gri); margin-top:5px; }
.tablo { width:100%; border-collapse:collapse; }
.tablo th { background:#f8f8f8; padding:12px 16px; text-align:left; font-size:13px; font-weight:600; color:var(--gri); border-bottom:2px solid #eee; }
.tablo td { padding:12px 16px; border-bottom:1px solid #f0f0f0; font-size:14px; vertical-align:middle; }
.tablo tr:hover td { background:#fafafa; }
.tablo-gorsel { width:60px; height:45px; object-fit:cover; border-radius:6px; }
.durum-badge { display:inline-block; padding:4px 10px; border-radius:20px; font-size:12px; font-weight:600; }
.d-beklemede   { background:#fff3cd; color:#856404; }
.d-hazirlaniyor{ background:#cce5ff; color:#004085; }
.d-teslimatta  { background:#d4edda; color:#155724; }
.d-teslim      { background:#d4edda; color:#155724; }
.d-iptal       { background:#f8d7da; color:#721c24; }
.admin-form .form-grup { margin-bottom:20px; }
.admin-form .form-grup label { display:block; margin-bottom:6px; font-size:14px; font-weight:600; color:var(--ana); }
.admin-form .form-input,
.admin-form .form-textarea,
.admin-form select {
    width:100%; padding:10px 14px; border:1px solid #ddd; border-radius:8px;
    font-family:'Poppins',sans-serif; font-size:14px; background:#fff;
    transition:border-color var(--gecis);
}
.admin-form .form-input:focus,
.admin-form .form-textarea:focus,
.admin-form select:focus { outline:none; border-color:var(--vurgu); }
.admin-form .form-textarea { height:100px; resize:vertical; }
.urun-onizleme { width:120px; height:90px; object-fit:cover; border-radius:8px; margin-top:8px; }

/* ─── RESPONSIVE ─── */
@media (max-width:1024px) {
    .istatistik-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:992px) {
    .urun-grid { grid-template-columns:repeat(2,1fr); gap:20px; }
    .blog-grid { grid-template-columns:repeat(2,1fr); }
    .admin-sidebar { width:200px; }
    .admin-icerik { margin-left:200px; }
}
@media (max-width:900px) { .iletisim-izgara { grid-template-columns:1fr; gap:30px; } }
@media (max-width:768px) {
    header { padding:15px 20px; }
    nav ul { display:none; }
    .iletisim-btn { display:none; }
    .hamburger { display:flex; }
    .hero h1 { font-size:36px; }
    .hero p   { font-size:16px; }
    section   { padding:60px 20px; }
    section h2 { font-size:30px; }
    .urun-grid { grid-template-columns:1fr; }
    .blog-grid { grid-template-columns:1fr; }
    .form-konteyner { padding:25px; }
    .sepet-panel { width:300px; }
    .admin-sayfa { flex-direction:column; }
    .admin-sidebar { width:100%; height:auto; position:relative; }
    .admin-icerik { margin-left:0; padding:20px; }
    .istatistik-grid { grid-template-columns:repeat(2,1fr); }
    .auth-kutu { padding:35px 25px; }
    .tablo { font-size:13px; }
}
@media (max-width:480px) {
    .istatistik-grid { grid-template-columns:1fr 1fr; }
    .admin-icerik { padding:15px; }
    .blog-detay-baslik { font-size:26px; }
}