/* ==========================================================
   DEEPDEDEKTOR MASTER.CSS (FINAL CLEAN)
   - Generator ile birebir uyumlu
   - Mobil nav aktif
   - Ürün kartları, filtre sidebar, featured box, seo blocks
   ========================================================== */

   @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Rajdhani:wght@500;600;700;800&display=swap");

   /* ------------------------------
      0) ROOT / RESET
   -------------------------------- */
   :root{
     --bg-app:#0b1120;
     --bg-panel:#111827;
     --bg-panel-2:#1e293b;
     --bg-panel-hover:#243244;
   
     --primary:#3b82f6;
     --accent:#f59e0b;
   
     --text-main:#f8fafc;
     --text-muted:#94a3b8;
   
     --border:#1e293b;
     --border-2:#334155;
   
     --success:#10b981;
     --danger:#ef4444;
   
     --radius:12px;
     --shadow: 0 10px 30px rgba(0,0,0,.35);
     --shadow-soft: 0 6px 18px rgba(0,0,0,.25);
   }
   
   *{ box-sizing:border-box; margin:0; padding:0; outline:none; -webkit-tap-highlight-color:transparent; }
   html{ scroll-behavior:smooth; }
   body{
     font-family:"Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
     background:var(--bg-app);
     color:var(--text-main);
     line-height:1.55;
     font-size:14px;
   
     /* sabit header + mobil nav için */
     padding-top:60px;
     padding-bottom:86px;
   }
   
   img{ max-width:100%; height:auto; display:block; }
   a{ color:inherit; text-decoration:none; transition:.2s ease; }
   ul{ list-style:none; }
   
   .container{
     max-width:1200px;
     margin:0 auto;
     padding:0 15px;
   }
   
   /* ------------------------------
      1) HEADER
   -------------------------------- */
   .site-header{
     position:fixed;
     top:0; left:0;
     width:100%;
     height:60px;
     z-index:1000;
   
     background:rgba(11,17,32,.95);
     backdrop-filter: blur(10px);
     border-bottom:1px solid var(--border);
   }
   
   .header-inner{
     height:60px;
     display:flex;
     align-items:center;
     justify-content:space-between;
     gap:14px;
   }
   
   .brand{
     font-family:"Rajdhani", sans-serif;
     font-weight:900;
     font-size:1.55rem;
     letter-spacing:1px;
     color:#fff;
     white-space:nowrap;
   }
   .brand span{ color:var(--primary); }
   
   .desktop-nav{
     display:flex;
     align-items:center;
     gap:18px;
   }
   
   .nav-link{
     font-size:.85rem;
     font-weight:800;
     text-transform:uppercase;
     color:var(--text-muted);
     padding:8px 4px;
     border-bottom:2px solid transparent;
   }
   .nav-link:hover{ color:#fff; }
   .nav-link.active{
     color:#fff;
     border-bottom-color:var(--primary);
   }
   
   .header-contact{
     display:flex;
     align-items:center;
     gap:8px;
     padding:8px 14px;
     border-radius:999px;
     background:var(--primary);
     color:#fff;
     font-weight:900;
     font-size:.85rem;
     white-space:nowrap;
     box-shadow: 0 10px 25px rgba(59,130,246,.25);
   }
   .header-contact .material-icons-round{
     font-size:18px;
   }
   
   /* ------------------------------
      2) HERO / PAGE HEADER
   -------------------------------- */
   .page-header{
     padding:44px 0 30px;
     border-bottom:1px solid var(--border);
     background:linear-gradient(180deg, #0f172a 0%, #0b1120 100%);
   }
   
   .ph-badge{
     display:inline-flex;
     align-items:center;
     gap:8px;
     padding:6px 12px;
     border-radius:999px;
     font-weight:900;
     font-size:.75rem;
     letter-spacing:.4px;
   
     background:rgba(59,130,246,.12);
     color:var(--primary);
     border:1px solid rgba(59,130,246,.28);
   }
   
   .ph-title{
     font-family:"Rajdhani", sans-serif;
     font-weight:900;
     font-size:2.3rem;
     line-height:1.1;
     margin:12px 0 8px;
     color:#fff;
   }
   
   .ph-desc{
     color:var(--text-muted);
     font-size:1rem;
     max-width:820px;
   }
   
   /* ------------------------------
      3) BUTTONS
   -------------------------------- */
   .li-btn{
     display:inline-flex;
     align-items:center;
     justify-content:center;
     gap:8px;
   
     padding:10px 14px;
     border-radius:10px;
     border:1px solid var(--border);
     background:rgba(255,255,255,.06);
     color:#fff;
     font-weight:900;
     font-size:.85rem;
     cursor:pointer;
   }
   .li-btn:hover{
     background:rgba(255,255,255,.10);
     border-color:var(--border-2);
   }
   .li-btn:active{ transform: translateY(1px); }
   
   /* ------------------------------
      4) FEATURED BOX (TEKNO US)
   -------------------------------- */
   .featured-box{
     background: linear-gradient(90deg, rgba(59,130,246,.14) 0%, rgba(255,255,255,0) 100%);
     border:1px solid rgba(59,130,246,.7);
     border-radius: var(--radius);
     padding:22px;
     box-shadow: var(--shadow-soft);
   
     display:flex;
     align-items:center;
     justify-content:space-between;
     gap:16px;
   }
   
   .fb-left{ flex:1; }
   .fb-left h3{
     font-family:"Rajdhani", sans-serif;
     font-weight:900;
     font-size:1.6rem;
     color:#fff;
   }
   .fb-badge{
     display:inline-block;
     background:var(--accent);
     color:#000;
     font-weight:1000;
     font-size:.75rem;
     padding:4px 10px;
     border-radius:8px;
   }
   
   /* ------------------------------
      5) LAYOUT WRAPPER / SIDEBAR
   -------------------------------- */
   .layout-wrapper{
     display:grid;
     grid-template-columns: 270px 1fr;
     gap:22px;
     align-items:start;
   }
   
   .sidebar{
     background:var(--bg-panel);
     border:1px solid var(--border);
     border-radius: var(--radius);
     padding:18px;
     position:sticky;
     top:78px;
     height:fit-content;
     box-shadow: var(--shadow-soft);
   }
   
   .filter-head{
     font-family:"Rajdhani", sans-serif;
     font-weight:900;
     font-size:1.15rem;
     color:#fff;
     margin-bottom:12px;
     padding-bottom:10px;
     border-bottom:1px solid var(--border);
   }
   
   .filter-row{
     display:flex;
     align-items:center;
     gap:10px;
     padding:8px 8px;
     border-radius:10px;
     cursor:pointer;
     color:var(--text-muted);
     transition:.15s ease;
     user-select:none;
   }
   .filter-row:hover{
     background:rgba(255,255,255,.06);
     color:#fff;
   }
   .filter-row input{
     accent-color: var(--primary);
   }
   
   /* (City pages old) compatibility */
   .filter-item{
     display:flex;
     align-items:center;
     gap:10px;
     margin-bottom:8px;
     color:var(--text-muted);
   }
   .filter-title{
     font-family:"Rajdhani", sans-serif;
     font-weight:900;
     color:#fff;
     margin-bottom:10px;
   }
   .filter-group{ }
   
   /* ------------------------------
      6) PRODUCT GRID + CARD
   -------------------------------- */
   .product-grid{
     display:grid;
     grid-template-columns: repeat(3, 1fr);
     gap:14px;
   }
   
   .product-card{
     background:var(--bg-panel);
     border:1px solid var(--border);
     border-radius:16px;
     overflow:hidden;
     box-shadow: var(--shadow-soft);
     transition:.18s ease;
     display:flex;
     flex-direction:column;
     min-height: 330px;
   }
   .product-card:hover{
     transform: translateY(-2px);
     border-color: rgba(59,130,246,.45);
     box-shadow: 0 16px 40px rgba(0,0,0,.35);
   }
   
   .card-img-area{
     position:relative;
     background: rgba(255,255,255,.04);
     border-bottom:1px solid var(--border);
     min-height: 190px;
   
     display:flex;
     align-items:center;
     justify-content:center;
   }
   
   .card-img-area img{
     width:100%;
     height:190px;
     object-fit:contain;
     padding:14px;
   }
   
   /* placeholder: generator inline style ile display none -> flex yapıyor */
   .no-image-placeholder{
     width:100%;
     min-height:190px;
     display:flex;
     align-items:center;
     justify-content:center;
     flex-direction:column;
     gap:6px;
     color:var(--text-muted);
     padding:16px;
     text-align:center;
   }
   
   .card-info{
     padding:14px 14px 16px;
     display:flex;
     flex-direction:column;
     gap:8px;
   }
   
   .card-brand{
     font-size:.75rem;
     font-weight:1000;
     letter-spacing:.5px;
     text-transform:uppercase;
     color:var(--primary);
   }
   
   .card-title{
     font-size:1.05rem;
     font-weight:900;
     color:#fff;
     line-height:1.2;
   }
   
   .card-desc{
     color:var(--text-muted);
     font-size:.9rem;
   }
   
   /* ------------------------------
      7) SPEC TABLE (Product Page)
   -------------------------------- */
   .spec-table td{
     padding:12px 14px;
     border-bottom:1px solid var(--border);
   }
   .spec-table tr:last-child td{ border-bottom:none; }
   .spec-table td:first-child{
     width:42%;
     color:#fff;
     font-weight:900;
   }
   .spec-table td:last-child{
     color:var(--text-muted);
     text-align:right;
   }
   
   /* Related grid links (generator inline uses li-btn) */
   .related-grid a{
     border-radius:12px;
   }
   
   /* ------------------------------
      8) SEO ARTICLE BLOCK
   -------------------------------- */
   .seo-article{
     margin-top:26px;
     background:var(--bg-panel);
     border:1px solid var(--border);
     border-left:4px solid var(--primary);
     border-radius: var(--radius);
     padding:22px;
     box-shadow: var(--shadow-soft);
   }
   .seo-article h2{
     font-family:"Rajdhani", sans-serif;
     font-weight:900;
     font-size:1.45rem;
     margin-bottom:12px;
     color:#fff;
   }
   .seo-article p{
     color:var(--text-muted);
     margin-bottom:12px;
     line-height:1.75;
   }
   .seo-article p strong{ color:#fff; }
   
   /* City page extra */
   .city-seo-content{
     margin-top:24px;
     background:var(--bg-panel);
     border:1px solid var(--border);
     border-radius: var(--radius);
     padding:20px;
   }
   .city-seo-content h2{
     font-family:"Rajdhani", sans-serif;
     font-weight:900;
     color:#fff;
     margin-bottom:10px;
   }
   .city-seo-content p{ color:var(--text-muted); margin-bottom:10px; line-height:1.75; }
   
   /* ------------------------------
      9) FOOTER
   -------------------------------- */
   footer{
     margin-top:52px;
     background:#070b16;
     border-top:1px solid var(--border);
     padding:40px 0 95px; /* mobil nav için boşluk */
     color:var(--text-muted);
     font-size:.9rem;
   }
   footer a{ color:#fff; opacity:.9; }
   footer a:hover{ opacity:1; color:#fff; }
   footer h4{ letter-spacing:.4px; }
   
   /* ------------------------------
      10) MOBILE NAV
   -------------------------------- */
   .mobile-nav{
     position:fixed;
     left:0; bottom:0;
     width:100%;
     height:70px;
     z-index:9999;
   
     display:flex;
     align-items:center;
     justify-content:space-around;
   
     background: rgba(0,0,0,.92);
     backdrop-filter: blur(12px);
     border-top:1px solid var(--border);
     padding-bottom: env(safe-area-inset-bottom);
     box-shadow: 0 -12px 24px rgba(0,0,0,.45);
   }
   
   .mn-item{
     flex:1;
     height:70px;
     display:flex;
     flex-direction:column;
     align-items:center;
     justify-content:center;
     gap:4px;
   
     color:#64748b;
     font-weight:900;
     font-size:.72rem;
   }
   .mn-item .material-icons-round{ font-size:24px; }
   .mn-item small{
     font-size:.68rem;
     letter-spacing:.4px;
     text-transform:uppercase;
     font-weight:900;
   }
   .mn-item:hover{ color:#cbd5e1; }
   
   .mn-center{
     width:58px;
     height:58px;
     border-radius:50%;
     background: var(--primary);
     color:#fff;
   
     display:flex;
     align-items:center;
     justify-content:center;
   
     transform: translateY(-18px);
     border: 4px solid #000;
     box-shadow: 0 10px 22px rgba(59,130,246,.35);
   }
   .mn-center .material-icons-round{ font-size:26px; }
   .mn-center:active{ transform: translateY(-18px) scale(.96); }
   
   /* ------------------------------
      11) RESPONSIVE
   -------------------------------- */
   @media (max-width: 1100px){
     .product-grid{ grid-template-columns: repeat(2, 1fr); }
   }
   
   @media (max-width: 991px){
     .desktop-nav, .header-contact{ display:none; }
   
     body{ padding-top:60px; padding-bottom:86px; }
   
     .layout-wrapper{ grid-template-columns: 1fr; }
     .sidebar{ display:none; }
   
     .ph-title{ font-size:1.9rem; }
     .ph-desc{ font-size:.95rem; }
   
     .featured-box{
       flex-direction:column;
       align-items:flex-start;
     }
   }
   
   @media (max-width: 560px){
     .product-grid{ grid-template-columns: 1fr; }
     .brand{ font-size:1.4rem; }
     .ph-title{ font-size:1.75rem; }
     .card-img-area img{ height:180px; }
     .no-image-placeholder{ min-height:180px; }
   }
   
   /* ------------------------------
      12) NICE DETAILS
   -------------------------------- */
   ::selection{ background: rgba(59,130,246,.35); }
   
   hr{
     border:none;
     border-top:1px solid var(--border);
     margin:20px 0;
   }
   
   /* If you later add forms */
   input, textarea, select{
     font-family:inherit;
     background:rgba(255,255,255,.06);
     border:1px solid var(--border);
     border-radius:10px;
     padding:10px 12px;
     color:#fff;
   }
   input::placeholder, textarea::placeholder{ color:#64748b; }
   /* --- ULTIMATE PRODUCT ADDONS --- */
.panel{
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 18px;
  }
  .grid-2{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .ul-tech{
    margin-left: 18px;
    color: var(--text-muted);
    line-height: 1.8;
  }
  .ul-tech li{ margin: 6px 0; }
  
  .spec-mini{
    display:grid;
    grid-template-columns: 1fr;
    gap: 8px;
    color: var(--text-muted);
  }
  .spec-mini strong{ color:#fff; }
  
  .faq{ display:flex; flex-direction:column; gap:10px; }
  .faq-item{
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px 14px;
  }
  .faq-item summary{
    cursor:pointer;
    font-weight: 800;
    color:#fff;
    list-style:none;
  }
  .faq-item summary::-webkit-details-marker{ display:none; }
  .faq-body{ margin-top:10px; color: var(--text-muted); line-height:1.7; }
  
  @media (max-width: 991px){
    .grid-2{ grid-template-columns: 1fr; }
  }