/* ===== RESET & BASE ===== */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;color:#333;background:#f8f9fa;line-height:1.6}
a{text-decoration:none;color:inherit}
img{max-width:100%;height:auto}
.container{max-width:1200px;margin:0 auto;padding:0 20px}

/* ===== HEADER ===== */
.top-bar{background:#1a1a2e;color:#fff;padding:8px 0;font-size:13px}
.top-bar .container{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap}
.top-bar a{color:#e0e0e0}
.top-bar a:hover{color:#f39c12}
.top-info{display:flex;gap:20px;flex-wrap:wrap}
.top-info span{display:flex;align-items:center;gap:5px}

header{background:#fff;box-shadow:0 2px 15px rgba(0,0,0,.08);position:sticky;top:0;z-index:100}
.header-main{display:flex;justify-content:space-between;align-items:center;padding:15px 0}
.logo{display:flex;align-items:center;gap:12px}
.logo-icon{width:48px;height:48px;background:linear-gradient(135deg,#f39c12,#e67e22);border-radius:10px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:24px;font-weight:bold}
.logo-text h1{font-size:22px;color:#1a1a2e;line-height:1.2}
.logo-text span{font-size:12px;color:#888;letter-spacing:1px;text-transform:uppercase}

/* NAV */
nav ul{display:flex;list-style:none;gap:5px}
nav a{padding:10px 18px;border-radius:6px;font-weight:500;color:#555;transition:.2s}
nav a:hover,nav a.active{background:#f39c12;color:#fff}

.hamburger{display:none;background:none;border:none;font-size:28px;cursor:pointer;color:#333}

/* ===== HERO ===== */
.hero{background:linear-gradient(135deg,#1a1a2e 0%,#16213e 50%,#0f3460 100%);color:#fff;padding:80px 0;text-align:center;position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(243,156,18,.1) 0%,transparent 50%);animation:pulse 4s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
.hero h2{font-size:42px;margin-bottom:15px;position:relative}
.hero p{font-size:18px;opacity:.85;max-width:600px;margin:0 auto 30px;position:relative}
.hero-buttons{display:flex;gap:15px;justify-content:center;position:relative;flex-wrap:wrap}
.btn{padding:14px 32px;border-radius:8px;font-weight:600;font-size:15px;transition:.3s;cursor:pointer;border:none;display:inline-flex;align-items:center;gap:8px}
.btn-primary{background:#f39c12;color:#fff}
.btn-primary:hover{background:#e67e22;transform:translateY(-2px);box-shadow:0 5px 20px rgba(243,156,18,.4)}
.btn-secondary{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.3)}
.btn-secondary:hover{border-color:#f39c12;color:#f39c12}

/* ===== FEATURES ===== */
.features{padding:60px 0;background:#fff}
.features .container{display:grid;grid-template-columns:repeat(4,1fr);gap:30px}
.feature-card{text-align:center;padding:30px 20px;border-radius:12px;transition:.3s}
.feature-card:hover{background:#f8f9fa;transform:translateY(-5px)}
.feature-icon{width:70px;height:70px;background:linear-gradient(135deg,#f39c12,#e67e22);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 15px;font-size:30px;color:#fff}
.feature-card h3{margin-bottom:8px;color:#1a1a2e}
.feature-card p{color:#888;font-size:14px}

/* ===== SECTION TITLE ===== */
.section-title{text-align:center;margin-bottom:40px}
.section-title h2{font-size:32px;color:#1a1a2e;margin-bottom:10px}
.section-title p{color:#888;max-width:500px;margin:0 auto}
.section-title .line{width:60px;height:3px;background:#f39c12;margin:10px auto 0;border-radius:2px}

/* ===== CATEGORIES ===== */
.categories{padding:60px 0}
.cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:25px}
.cat-card{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 3px 15px rgba(0,0,0,.06);transition:.3s;cursor:pointer}
.cat-card:hover{transform:translateY(-5px);box-shadow:0 8px 30px rgba(0,0,0,.12)}
.cat-img{height:200px;display:flex;align-items:center;justify-content:center;font-size:60px;position:relative}
.cat-img.el-aletleri{background:linear-gradient(135deg,#e74c3c,#c0392b)}
.cat-img.elektrik{background:linear-gradient(135deg,#f39c12,#d35400)}
.cat-img.boya{background:linear-gradient(135deg,#3498db,#2980b9)}
.cat-img.tesisat{background:linear-gradient(135deg,#27ae60,#229954)}
.cat-img.hirdavat{background:linear-gradient(135deg,#8e44ad,#7d3c98)}
.cat-img.bahce{background:linear-gradient(135deg,#1abc9c,#16a085)}
.cat-body{padding:20px}
.cat-body h3{margin-bottom:5px;color:#1a1a2e}
.cat-body p{color:#888;font-size:14px}

/* ===== PRODUCTS ===== */
.products{padding:60px 0;background:#fff}
.product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:25px}
.product-card{background:#f8f9fa;border-radius:12px;overflow:hidden;transition:.3s}
.product-card:hover{transform:translateY(-3px);box-shadow:0 8px 25px rgba(0,0,0,.1)}
.product-img{height:200px;display:flex;align-items:center;justify-content:center;font-size:50px;background:#e9ecef}
.product-body{padding:15px}
.product-body h4{margin-bottom:5px;font-size:15px}
.product-body .price{color:#f39c12;font-weight:700;font-size:18px}
.product-body .old-price{color:#aaa;text-decoration:line-through;font-size:13px;margin-left:8px}
.product-body .brand{color:#888;font-size:12px;margin-bottom:5px}
.stock-badge{display:inline-block;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:600;margin-top:8px}
.in-stock{background:#d4edda;color:#155724}
.limited{background:#fff3cd;color:#856404}

/* ===== BRANDS ===== */
.brands{padding:50px 0;text-align:center}
.brand-logos{display:flex;justify-content:center;align-items:center;gap:40px;flex-wrap:wrap;margin-top:30px}
.brand-logo{width:120px;height:60px;background:#fff;border-radius:8px;display:flex;align-items:center;justify-content:center;font-weight:700;color:#999;font-size:14px;box-shadow:0 2px 10px rgba(0,0,0,.05)}

/* ===== ABOUT SECTION ===== */
.about-section{padding:60px 0;background:#fff}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.about-img{background:linear-gradient(135deg,#1a1a2e,#16213e);border-radius:16px;height:400px;display:flex;align-items:center;justify-content:center;font-size:80px;color:#f39c12}
.about-content h2{font-size:28px;color:#1a1a2e;margin-bottom:15px}
.about-content p{color:#666;margin-bottom:15px;line-height:1.8}
.about-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:25px}
.stat-box{text-align:center;padding:15px;background:#f8f9fa;border-radius:10px}
.stat-box .num{font-size:28px;font-weight:700;color:#f39c12}
.stat-box .label{font-size:13px;color:#888}

/* ===== CONTACT ===== */
.contact-section{padding:60px 0}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.contact-info{display:flex;flex-direction:column;gap:20px}
.contact-card{background:#fff;padding:25px;border-radius:12px;display:flex;gap:15px;align-items:flex-start;box-shadow:0 2px 10px rgba(0,0,0,.05)}
.contact-card .icon{width:50px;height:50px;background:linear-gradient(135deg,#f39c12,#e67e22);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:22px;color:#fff;flex-shrink:0}
.contact-card h4{margin-bottom:5px;color:#1a1a2e}
.contact-card p{color:#888;font-size:14px}
.contact-form{background:#fff;padding:30px;border-radius:12px;box-shadow:0 2px 10px rgba(0,0,0,.05)}
.form-group{margin-bottom:15px}
.form-group label{display:block;margin-bottom:5px;font-weight:500;color:#555;font-size:14px}
.form-group input,.form-group textarea,.form-group select{width:100%;padding:12px 15px;border:2px solid #e9ecef;border-radius:8px;font-size:14px;font-family:inherit;transition:.2s}
.form-group input:focus,.form-group textarea:focus{border-color:#f39c12;outline:none}
.form-group textarea{height:120px;resize:vertical}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:15px}

/* ===== FOOTER ===== */
footer{background:#1a1a2e;color:#ccc;padding:50px 0 20px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:30px;margin-bottom:30px}
.footer-col h3{color:#fff;margin-bottom:15px;font-size:16px}
.footer-col p{font-size:14px;line-height:1.8}
.footer-col ul{list-style:none}
.footer-col li{margin-bottom:8px}
.footer-col a{color:#aaa;font-size:14px;transition:.2s}
.footer-col a:hover{color:#f39c12}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding-top:20px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;font-size:13px}

/* ===== MAP ===== */
.map-section{height:300px;background:#e9ecef;display:flex;align-items:center;justify-content:center;color:#888;font-size:18px}

/* ===== BREADCRUMB ===== */
.breadcrumb{padding:15px 0;background:#fff;border-bottom:1px solid #eee}
.breadcrumb a{color:#f39c12}
.breadcrumb span{color:#888}

/* ===== PAGE HERO ===== */
.page-hero{background:linear-gradient(135deg,#1a1a2e,#0f3460);color:#fff;padding:50px 0;text-align:center}
.page-hero h2{font-size:36px;margin-bottom:10px}
.page-hero p{opacity:.7}

/* ===== PRODUCT LIST ===== */
.product-filters{padding:20px 0;display:flex;gap:10px;flex-wrap:wrap}
.filter-btn{padding:8px 20px;border:2px solid #e9ecef;border-radius:25px;background:#fff;cursor:pointer;font-size:13px;transition:.2s}
.filter-btn:hover,.filter-btn.active{border-color:#f39c12;background:#f39c12;color:#fff}

/* ===== CTA ===== */
.cta{background:linear-gradient(135deg,#f39c12,#e67e22);padding:50px 0;text-align:center;color:#fff}
.cta h2{font-size:28px;margin-bottom:10px}
.cta p{opacity:.85;margin-bottom:25px}
.cta .btn{background:#1a1a2e;color:#fff}
.cta .btn:hover{background:#16213e}

/* ===== RESPONSIVE ===== */
@media(max-width:992px){
  .features .container{grid-template-columns:repeat(2,1fr)}
  .product-grid{grid-template-columns:repeat(2,1fr)}
  .cat-grid{grid-template-columns:repeat(2,1fr)}
  .about-grid,.contact-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
  .hero h2{font-size:28px}
  .hero{padding:50px 0}
  nav ul{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;flex-direction:column;padding:15px;box-shadow:0 5px 20px rgba(0,0,0,.1)}
  nav ul.open{display:flex}
  .hamburger{display:block}
  .header-main{flex-wrap:wrap}
  .features .container{grid-template-columns:1fr 1fr}
  .product-grid{grid-template-columns:1fr 1fr}
  .cat-grid{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
  .top-bar .container{justify-content:center;text-align:center}
  .about-stats{grid-template-columns:repeat(3,1fr)}
  .footer-grid{grid-template-columns:1fr}
}
@media(max-width:480px){
  .features .container{grid-template-columns:1fr}
  .product-grid{grid-template-columns:1fr}
  .hero-buttons{flex-direction:column;align-items:center}
}