:root{
    --navy:#0A2A4E;
    --deep-blue:#123C6B;
    --accent-blue:#2E7BC4;
    --sky:#F2F7FC;
    --powder:#E4EEF8;
    --white:#FFFFFF;
    --ink:#0E2233;
    --muted:#5B7590;
    --line:#D7E4F1;
    --cream:#FBFAF7;
    --shadow: 0 20px 45px -20px rgba(10,42,78,.25);
    --shadow-sm: 0 8px 20px -10px rgba(10,42,78,.2);
    --radius: 18px;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    font-family:'Manrope', sans-serif;
    color:var(--ink);
    background:var(--white);
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  img{max-width:100%; display:block; object-fit:cover;}
  a{text-decoration:none; color:inherit;}
  ul{list-style:none;}
  button{font-family:inherit; cursor:pointer; border:none; background:none;}
  h1,h2,h3,h4{font-family:'Fraunces', serif; color:var(--navy); font-weight:600; letter-spacing:-0.01em;}
  .container{max-width:1280px; margin:0 auto; padding:0 24px;}
  .eyebrow{
    font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-blue); font-weight:700;
    display:flex; align-items:center; gap:10px;
  }
  .eyebrow::before{content:''; width:22px; height:2px; background:var(--accent-blue); display:inline-block; border-radius:2px;}
  .section-head{max-width:640px; margin-bottom:38px;}
  .section-head h2{font-size:clamp(26px,3.4vw,38px); margin-top:10px; line-height:1.15;}
  .section-head p{color:var(--muted); margin-top:12px; font-size:15.5px; line-height:1.6;}
  .section-head.center{margin-left:auto; margin-right:auto; text-align:center;}
  .section{padding:78px 0;}
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    padding:14px 26px; border-radius:999px; font-weight:700; font-size:14.5px;
    transition:.25s ease; white-space:nowrap;
  }
  .btn-primary{background:var(--navy); color:var(--white);}
  .btn-primary:hover{background:var(--deep-blue); transform:translateY(-2px);}
  .btn-outline{background:transparent; color:var(--navy); border:1.5px solid var(--navy);}
  .btn-outline:hover{background:var(--navy); color:var(--white);}
  .btn-light{background:var(--white); color:var(--navy);}
  .btn-light:hover{background:var(--sky);}
  .icon{width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;}

  /* ===== WAVE DIVIDER (signature) ===== */
  .wave{display:block; width:100%; line-height:0;}
  .wave svg{width:100%; height:auto; display:block;}

  /* ===== TOP BAR ===== */
  .topbar{background:linear-gradient(90deg,var(--navy),var(--deep-blue) 55%,var(--navy)); color:#DCEAFB; font-size:12.5px; position:relative;}
  .topbar::after{content:''; position:absolute; left:0; right:0; bottom:0; height:1px; background:linear-gradient(90deg, transparent, rgba(143,193,242,.5), transparent);}
  .topbar .container{display:flex; align-items:center; justify-content:space-between; height:40px; gap:20px;}
  .topbar-msgs{display:flex; gap:30px; overflow:hidden;}
  .topbar-msgs span{display:flex; align-items:center; gap:8px; white-space:nowrap; font-weight:500; letter-spacing:.01em;}
  .topbar-msgs svg{width:14px; height:14px; stroke:#8FC1F2;}
  .topbar-links{display:flex; gap:22px; align-items:center;}
  .topbar-links a{opacity:.88; font-weight:700; letter-spacing:.01em; position:relative;}
  .topbar-links a:not(:last-child)::after{content:''; position:absolute; right:-11px; top:50%; transform:translateY(-50%); width:1px; height:12px; background:rgba(255,255,255,.2);}
  .topbar-links a:hover{opacity:1; color:#fff;}

  /* ===== HEADER / NAVBAR ===== */
  header.site{position:sticky; top:0; z-index:200; background:rgba(255,255,255,.98); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); transition:box-shadow .3s ease;}
  header.site.scrolled{box-shadow:0 10px 30px -18px rgba(10,42,78,.35);}
  .navwrap{display:flex; align-items:center; gap:24px; height:94px;}
  .logo{display:flex; align-items:center; gap:12px; flex-shrink:0;}
  .logo .mark{width:48px; height:48px; border-radius:15px; background:linear-gradient(155deg,var(--navy),var(--accent-blue)); display:flex; align-items:center; justify-content:center; box-shadow:0 8px 18px -8px rgba(18,60,107,.55); position:relative;}
  .logo .mark::after{content:''; position:absolute; inset:0; border-radius:15px; border:1px solid rgba(255,255,255,.25);}
  .logo .mark svg{width:27px; height:27px; stroke:#fff; fill:none; stroke-width:1.5;}
  .logo .word{font-family:'Fraunces', serif; font-weight:700; font-size:23px; color:var(--navy); line-height:1; letter-spacing:-.01em;}
  .logo .word small{display:block; font-family:'Manrope',sans-serif; font-size:10px; font-weight:800; letter-spacing:.18em; color:var(--accent-blue); margin-top:4px;}

  .nav-divider{width:1px; height:34px; background:var(--line); flex-shrink:0;}

  .cat-trigger{
    display:flex; align-items:center; gap:10px; background:var(--navy); border:1px solid var(--navy);
    padding:13px 20px; border-radius:12px; font-weight:700; font-size:14.5px; color:#fff; flex-shrink:0;
    box-shadow:0 8px 18px -10px rgba(10,42,78,.5); transition:.2s ease;
  }
  .cat-trigger:hover{background:var(--deep-blue); transform:translateY(-1px);}
  .cat-trigger svg.burger-ic{width:17px; height:17px;}
  .cat-trigger svg.chev{width:13px; height:13px; opacity:.8; transition:.2s;}
  .cat-trigger:hover svg.chev{transform:translateY(1px);}

  .searchbar{flex:1; position:relative; max-width:580px;}
  .searchbar .lens{position:absolute; left:17px; top:50%; transform:translateY(-50%); width:17px; height:17px; stroke:var(--muted); pointer-events:none;}
  .searchbar input{
    width:100%; height:50px; border-radius:14px; border:1.5px solid var(--line); background:var(--sky);
    padding:0 52px 0 46px; font-family:inherit; font-size:14.5px; color:var(--ink); transition:.2s ease;
  }
  .searchbar input:focus{outline:none; border-color:var(--accent-blue); background:var(--white); box-shadow:0 0 0 4px rgba(46,123,196,.12);}
  .searchbar button{position:absolute; right:6px; top:6px; width:38px; height:38px; border-radius:10px; background:var(--navy); display:flex; align-items:center; justify-content:center; transition:.2s;}
  .searchbar button:hover{background:var(--deep-blue);}
  .searchbar button svg{width:17px; height:17px; stroke:#fff;}
  .search-suggestions{
    position:absolute; top:calc(100% + 8px); left:0; right:0; background:#fff; border-radius:14px; border:1px solid var(--line);
    box-shadow:var(--shadow); z-index:50; overflow:hidden; display:none;
  }
  .search-suggestions.open{display:block;}
  .search-suggestions a{display:flex; align-items:center; gap:12px; padding:10px 16px; border-bottom:1px solid var(--line);}
  .search-suggestions a:last-child{border-bottom:none;}
  .search-suggestions a:hover{background:var(--sky);}
  .search-suggestions img{width:40px; height:40px; border-radius:8px; object-fit:cover; flex-shrink:0;}
  .search-suggestions .name{font-size:13.5px; font-weight:700; color:var(--ink); flex:1;}
  .search-suggestions .price{font-size:13px; font-weight:800; color:var(--navy);}
  .search-suggestions .see-all{justify-content:center; background:var(--sky); font-weight:700; color:var(--accent-blue); font-size:12.5px;}

  .nav-actions{display:flex; align-items:center; gap:4px; flex-shrink:0; margin-left:auto;}
  .nav-icon-btn{
    display:flex; flex-direction:column; align-items:center; gap:3px; padding:9px 15px; border-radius:12px; position:relative; transition:.2s;
  }
  .nav-icon-btn:hover{background:var(--sky);}
  .nav-icon-btn svg{width:21px; height:21px; stroke:var(--navy);}
  .nav-icon-btn span{font-size:10.5px; font-weight:700; color:var(--deep-blue); letter-spacing:.01em;}
  .nav-icon-btn.cta{background:var(--navy); flex-direction:row; gap:8px; padding:12px 18px; margin-left:8px;}
  .nav-icon-btn.cta:hover{background:var(--deep-blue);}
  .nav-icon-btn.cta svg{stroke:#fff;}
  .nav-icon-btn.cta span{color:#fff; font-size:12.5px;}
  .cart-badge{
    position:absolute; top:2px; right:9px; background:var(--accent-blue); color:#fff; font-size:10px; font-weight:800;
    width:17px; height:17px; border-radius:50%; display:flex; align-items:center; justify-content:center; border:2px solid #fff;
  }
  .burger{display:none; width:44px; height:44px; align-items:center; justify-content:center; border-radius:10px;}
  .burger svg{width:24px; height:24px; stroke:var(--navy);}

  .subnav{border-top:1px solid var(--line); background:linear-gradient(180deg,var(--sky),#EDF4FB);}
  .subnav .container{display:flex; gap:8px; height:52px; align-items:center; overflow-x:auto;}
  .subnav a{font-size:13.5px; font-weight:700; color:var(--deep-blue); white-space:nowrap; padding:8px 14px; border-radius:9px; transition:.2s; position:relative;}
  .subnav a:hover{color:var(--navy); background:rgba(255,255,255,.7);}
  .subnav a.hot{color:#B33B2E;}
  .subnav a::after{content:''; position:absolute; left:14px; right:14px; bottom:2px; height:2px; background:var(--accent-blue); border-radius:2px; transform:scaleX(0); transition:.2s;}
  .subnav a:hover::after{transform:scaleX(1);}

  /* ===== MEGA MENU ===== */
  .megamenu{
    position:fixed; inset:0; z-index:300; display:none;
  }
  .megamenu.open{display:block;}
  .megamenu .backdrop{position:absolute; inset:0; background:rgba(10,26,46,.45);}
  .megamenu .panel{
    position:absolute; top:0; left:0; height:100%; width:min(880px,92vw); background:#fff; display:flex;
    box-shadow:30px 0 60px rgba(0,0,0,.2); animation:slideIn .28s ease;
  }
  @keyframes slideIn{from{transform:translateX(-30px); opacity:0;} to{transform:translateX(0); opacity:1;}}
  .megamenu .close-btn{position:absolute; top:18px; right:-54px; width:40px; height:40px; background:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center;}
  .megamenu .close-btn svg{width:20px; height:20px;}
  .cat-list{width:290px; background:var(--sky); padding:26px 0; overflow-y:auto; flex-shrink:0;}
  .cat-list h4{padding:0 26px 14px; font-size:12px; text-transform:uppercase; letter-spacing:.12em; color:var(--muted); font-family:'Manrope'; font-weight:800;}
  .cat-list li a{display:flex; align-items:center; justify-content:space-between; padding:13px 26px; font-weight:700; font-size:14.5px; color:var(--deep-blue); border-left:3px solid transparent;}
  .cat-list li a svg{width:16px; height:16px; opacity:.5;}
  .cat-list li a.active, .cat-list li a:hover{background:var(--white); border-left-color:var(--accent-blue); color:var(--navy);}
  .cat-detail{flex:1; padding:32px 32px; overflow-y:auto;}
  .cat-detail h3{font-size:24px; margin-bottom:6px;}
  .cat-detail p.desc{color:var(--muted); font-size:14px; margin-bottom:22px;}
  .cat-detail .grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
  .cat-detail .grid a{text-align:center;}
  .cat-detail .grid .thumb{border-radius:14px; overflow:hidden; aspect-ratio:1/1; margin-bottom:8px; border:1px solid var(--line);}
  .cat-detail .grid span{font-size:13px; font-weight:700; color:var(--ink);}
  .cat-pane{display:none;}
  .cat-pane.active{display:block;}

  /* ===== CART DRAWER ===== */
  .cart-drawer{position:fixed; inset:0; z-index:320; display:none;}
  .cart-drawer.open{display:block;}
  .cart-drawer .backdrop{position:absolute; inset:0; background:rgba(10,26,46,.45);}
  .cart-panel{
    position:absolute; top:0; right:0; height:100%; width:min(440px,92vw); background:#fff; display:flex; flex-direction:column;
    animation:slideInR .28s ease;
  }
  @keyframes slideInR{from{transform:translateX(30px); opacity:0;} to{transform:translateX(0); opacity:1;}}
  .cart-head{padding:24px 26px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between;}
  .cart-head h3{font-size:20px;}
  .cart-items{flex:1; overflow-y:auto; padding:10px 26px;}
  .cart-row{display:flex; gap:14px; padding:16px 0; border-bottom:1px solid var(--line); align-items:center;}
  .cart-row img{width:64px; height:64px; border-radius:12px; flex-shrink:0; border:1px solid var(--line);}
  .cart-row .info{flex:1;}
  .cart-row .info h5{font-size:14px; font-weight:700; margin-bottom:4px;}
  .cart-row .info span{font-size:12.5px; color:var(--muted);}
  .cart-row .price{font-weight:800; color:var(--navy); font-size:14px;}
  .cart-foot{padding:22px 26px; border-top:1px solid var(--line);}
  .cart-foot .row{display:flex; justify-content:space-between; margin-bottom:16px; font-weight:700; color:var(--navy); font-size:16px;}
  .cart-foot .btn{width:100%;}

  /* ===== HERO SLIDER ===== */
  .hero{position:relative; overflow:hidden; background:var(--navy);}
  .hero-track{display:flex; transition:transform .6s cubic-bezier(.65,0,.35,1); height:min(640px,86vh);}
  .hero-slide{min-width:100%; position:relative; height:100%; overflow:hidden;}
  .hero-slide img{width:100%; height:100%; object-fit:cover; object-position:center 42%;}
  .hero-slide::after{content:''; position:absolute; inset:0; background:linear-gradient(90deg, rgba(10,26,46,.72) 0%, rgba(10,26,46,.32) 45%, rgba(10,26,46,.05) 75%);}
  .hero-copy{position:absolute; left:0; top:0; height:100%; display:flex; flex-direction:column; justify-content:center; max-width:560px; padding:0 60px; z-index:5; color:#fff;}
  .hero-copy .eyebrow{color:#8FC1F2;}
  .hero-copy .eyebrow::before{background:#8FC1F2;}
  .hero-copy h1{color:#fff; font-size:clamp(32px,4.6vw,54px); line-height:1.08; margin-top:14px;}
  .hero-copy p{color:#CFE1F5; margin-top:16px; font-size:16px; max-width:440px; line-height:1.6;}
  .hero-copy .btns{display:flex; gap:14px; margin-top:30px;}
  .hero-dots{position:absolute; left:0; right:0; bottom:22px; display:flex; justify-content:center; gap:10px; z-index:6;}
  .hero-dots button{width:30px; height:4px; border-radius:3px; background:rgba(255,255,255,.35); transition:.25s;}
  .hero-dots button.active{background:#fff; width:44px;}
  .hero-arrows{position:absolute; left:0; right:0; bottom:56px; display:flex; justify-content:center; gap:10px; z-index:6;}
  .hero-arrows button{width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.35); display:flex; align-items:center; justify-content:center;}
  .hero-arrows button svg{width:16px; height:16px; stroke:#fff;}
  .hero-arrows button:hover{background:rgba(255,255,255,.28);}
  @media(max-width:720px){
    .hero-copy{padding:0 26px; max-width:100%; align-items:flex-start;}
    .hero-slide::after{background:linear-gradient(180deg, rgba(10,26,46,.35) 0%, rgba(10,26,46,.88) 78%);}
    .hero-copy{justify-content:flex-end; padding-bottom:90px;}
  }

  /* ===== TRUST STRIP ===== */
  .trust{background:var(--sky); border-bottom:1px solid var(--line);}
  .trust .container{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; padding:24px 24px;}
  .trust-item{display:flex; align-items:center; gap:12px;}
  .trust-item svg{width:26px; height:26px; stroke:var(--accent-blue); flex-shrink:0;}
  .trust-item b{display:block; font-size:13.5px; color:var(--navy);}
  .trust-item span{font-size:12px; color:var(--muted);}
  @media(max-width:900px){.trust .container{grid-template-columns:repeat(2,1fr);}}

  /* ===== CATEGORY GRID ===== */
  .cat-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:18px;}
  .cat-card{position:relative; border-radius:18px; overflow:hidden; aspect-ratio:3/4; border:1px solid var(--line);}
  .cat-card img{width:100%; height:100%; transition:.5s ease;}
  .cat-card:hover img{transform:scale(1.08);}
  .cat-card::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,42,78,0) 40%, rgba(9,26,46,.82) 100%);}
  .cat-card span{position:absolute; left:14px; right:14px; bottom:14px; color:#fff; font-weight:700; font-size:14px; z-index:2;}
  @media(max-width:980px){.cat-grid{grid-template-columns:repeat(3,1fr);}}
  @media(max-width:560px){.cat-grid{grid-template-columns:repeat(2,1fr); gap:12px;}}

  /* ===== CAMPAIGN STRIP ===== */
  .campaigns{display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:20px;}
  .campaign-card{
    border-radius:var(--radius); overflow:hidden; position:relative; min-height:220px; display:flex; align-items:flex-end; padding:26px;
    color:#fff;
  }
  .campaign-card img{position:absolute; inset:0; width:100%; height:100%;}
  .campaign-card::before{content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,42,78,.05), rgba(9,26,46,.85));}
  .campaign-card .cc-body{position:relative; z-index:2;}
  .campaign-card .tag{background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.4); padding:5px 12px; border-radius:999px; font-size:11px; font-weight:800; letter-spacing:.05em;}
  .campaign-card h4{color:#fff; font-size:20px; margin-top:10px;}
  .campaign-card p{font-size:13px; color:#DCEAFB; margin-top:6px;}
  @media(max-width:900px){.campaigns{grid-template-columns:1fr; }}

  /* ===== PRODUCT SLIDER ===== */
  .prod-head{display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:30px; gap:20px;}
  .slider-nav{display:flex; gap:10px;}
  .slider-nav button{width:42px; height:42px; border-radius:50%; border:1.5px solid var(--line); display:flex; align-items:center; justify-content:center;}
  .slider-nav button:hover{background:var(--navy); border-color:var(--navy);}
  .slider-nav button:hover svg{stroke:#fff;}
  .slider-nav button svg{width:17px; height:17px; stroke:var(--navy);}
  .prod-track-wrap{overflow:hidden;}
  .prod-track{display:flex; gap:20px; overflow-x:auto; scroll-behavior:smooth; padding-bottom:6px; scrollbar-width:none;}
  .prod-track::-webkit-scrollbar{display:none;}
  .product-card{
    min-width:255px; max-width:255px; background:#fff; border:1px solid var(--line); border-radius:var(--radius);
    overflow:hidden; flex-shrink:0; transition:.25s ease; display:flex; flex-direction:column;
  }
  .product-card:hover{box-shadow:var(--shadow); transform:translateY(-4px); border-color:transparent;}
  .product-media{position:relative; aspect-ratio:1/1; background:var(--sky);}
  .product-media img{width:100%; height:100%;}
  .product-badge{position:absolute; top:12px; left:12px; background:var(--navy); color:#fff; font-size:10.5px; font-weight:800; padding:5px 10px; border-radius:999px; letter-spacing:.03em;}
  .product-badge.new{background:var(--accent-blue);}
  .fav-toggle{
    position:absolute; top:12px; right:12px; width:34px; height:34px; border-radius:50%;
    background:rgba(255,255,255,.92); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center;
    box-shadow:var(--shadow-sm); transition:.2s ease; z-index:2;
  }
  .fav-toggle svg{width:17px; height:17px; color:var(--navy); transition:.2s;}
  .fav-toggle:hover{transform:scale(1.08);}
  .fav-toggle.active svg{color:#E0435B;}
  .brand-chip{
    position:absolute; bottom:10px; left:10px; background:rgba(255,255,255,.92); backdrop-filter:blur(4px);
    display:flex; align-items:center; gap:6px; padding:5px 10px 5px 6px; border-radius:999px; box-shadow:var(--shadow-sm);
  }
  .brand-chip .dot{width:20px; height:20px; border-radius:50%; background:linear-gradient(155deg,var(--navy),var(--accent-blue)); display:flex; align-items:center; justify-content:center;}
  .brand-chip .dot svg{width:12px; height:12px; stroke:#fff;}
  .brand-chip span{font-size:9.5px; font-weight:800; color:var(--navy); letter-spacing:.02em;}
  .product-info{padding:16px 16px 18px; display:flex; flex-direction:column; gap:8px; flex:1;}
  .product-info .cat{font-size:11px; color:var(--muted); font-weight:700; text-transform:uppercase; letter-spacing:.05em;}
  .product-info h5{font-size:15px; font-weight:700; color:var(--ink); line-height:1.35;}
  .rating{display:flex; align-items:center; gap:5px; font-size:12px; color:var(--muted);}
  .rating svg{width:13px; height:13px; fill:#F3B13A; stroke:none;}
  .price-row{display:flex; align-items:baseline; gap:8px; margin-top:2px;}
  .price-row .now{font-size:18px; font-weight:800; color:var(--navy);}
  .price-row .old{font-size:13px; color:var(--muted); text-decoration:line-through;}
  .product-actions{display:flex; gap:8px; margin-top:auto; padding-top:6px;}
  .btn-cart{
    flex:1; background:var(--navy); color:#fff; border-radius:10px; padding:11px 10px; font-size:12.5px; font-weight:800;
    display:flex; align-items:center; justify-content:center; gap:6px;
  }
  .btn-cart:hover{background:var(--deep-blue);}
  .btn-cart svg{width:15px; height:15px; stroke:#fff;}
  .btn-wa{
    width:42px; height:42px; border-radius:10px; background:#e9f8f0; border:1px solid #cdeedd; display:flex; align-items:center; justify-content:center; flex-shrink:0;
  }
  .btn-wa svg{width:19px; height:19px; stroke:#189B54; fill:none;}
  .btn-wa:hover{background:#d7f3e4;}

  /* ===== VIDEO / TANITIM ===== */
  .video-grid{display:grid; grid-template-columns:1fr 1fr; gap:26px;}
  .video-card{background:var(--sky); border-radius:var(--radius); overflow:hidden; border:1px solid var(--line);}
  .video-frame{aspect-ratio:16/9; background:#000; position:relative;}
  .video-frame iframe{width:100%; height:100%; border:0;}
  .video-text{padding:20px 22px 24px;}
  .video-text h4{font-size:17px; margin-bottom:8px;}
  .video-text p{font-size:13.5px; color:var(--muted); line-height:1.6;}
  @media(max-width:820px){.video-grid{grid-template-columns:1fr;}}

  /* ===== ABOUT ===== */
  .about{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;}
  .about-media{position:relative;}
  .about-media .main-img{border-radius:22px; overflow:hidden; aspect-ratio:4/5; border:1px solid var(--line);}
  .about-media .float-card{
    position:absolute; bottom:-26px; left:-26px; background:#fff; border-radius:16px; padding:18px 22px; box-shadow:var(--shadow);
    display:flex; align-items:center; gap:14px; max-width:250px;
  }
  .about-media .float-card .num{font-family:'Fraunces',serif; font-size:26px; font-weight:700; color:var(--navy);}
  .about-media .float-card p{font-size:12px; color:var(--muted); line-height:1.4;}
  .about-list{display:flex; flex-direction:column; gap:16px; margin-top:24px;}
  .about-list li{display:flex; gap:14px; align-items:flex-start;}
  .about-list .ic{width:38px; height:38px; border-radius:11px; background:var(--sky); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
  .about-list .ic svg{width:19px; height:19px; stroke:var(--accent-blue);}
  .about-list b{font-size:14.5px; color:var(--navy); display:block;}
  .about-list span{font-size:13px; color:var(--muted);}
  @media(max-width:900px){.about{grid-template-columns:1fr;} .about-media .float-card{position:static; margin-top:16px; max-width:100%;}}

  /* ===== INSTAGRAM (vertical reels) ===== */
  .insta-strip{display:flex; gap:18px; overflow-x:auto; padding-bottom:8px; scrollbar-width:none;}
  .insta-strip::-webkit-scrollbar{display:none;}
  .insta-card{
    min-width:190px; max-width:190px; aspect-ratio:9/16; border-radius:18px; overflow:hidden; position:relative; flex-shrink:0;
    border:1px solid var(--line);
  }
  .insta-card img{width:100%; height:100%;}
  .insta-card::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,26,46,0) 55%, rgba(9,20,35,.85));}
  .insta-play{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; z-index:3;}
  .insta-play .circ{width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,.25); border:1.5px solid rgba(255,255,255,.7); display:flex; align-items:center; justify-content:center; backdrop-filter:blur(3px);}
  .insta-play svg{width:16px; height:16px; fill:#fff; stroke:none;}
  .insta-meta{position:absolute; left:12px; right:12px; bottom:12px; z-index:3; color:#fff;}
  .insta-meta .handle{display:flex; align-items:center; gap:6px; font-size:11.5px; font-weight:800;}
  .insta-meta .handle svg{width:14px; height:14px; stroke:#fff;}
  .insta-meta p{font-size:11px; color:#DCEAFB; margin-top:4px; line-height:1.4;}

  /* ===== BLOG ===== */
  .blog-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px;}
  .blog-card{border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); background:#fff; transition:.25s;}
  .blog-card:hover{box-shadow:var(--shadow); transform:translateY(-4px);}
  .blog-media{aspect-ratio:16/10;}
  .blog-body{padding:20px 22px 24px;}
  .blog-body .meta{display:flex; gap:12px; font-size:11.5px; color:var(--accent-blue); font-weight:800; text-transform:uppercase; letter-spacing:.04em; margin-bottom:10px;}
  .blog-body h4{font-size:17px; line-height:1.35; margin-bottom:10px;}
  .blog-body p{font-size:13.5px; color:var(--muted); line-height:1.6; margin-bottom:14px;}
  .blog-body .read{font-size:13px; font-weight:800; color:var(--navy); display:flex; align-items:center; gap:6px;}
  .blog-body .read svg{width:14px; height:14px;}
  @media(max-width:900px){.blog-grid{grid-template-columns:1fr;}}

  /* ===== NEWSLETTER ===== */
  .newsletter{background:linear-gradient(120deg,var(--navy),var(--deep-blue) 60%, var(--accent-blue)); border-radius:26px; padding:56px 50px; display:flex; align-items:center; justify-content:space-between; gap:40px; color:#fff; position:relative; overflow:hidden;}
  .newsletter::before{content:''; position:absolute; right:-60px; top:-60px; width:260px; height:260px; border-radius:50%; background:rgba(255,255,255,.06);}
  .newsletter::after{content:''; position:absolute; left:-40px; bottom:-80px; width:220px; height:220px; border-radius:50%; background:rgba(255,255,255,.06);}
  .newsletter .txt{position:relative; z-index:2; max-width:440px;}
  .newsletter h3{color:#fff; font-size:26px;}
  .newsletter p{color:#CFE1F5; margin-top:10px; font-size:14px; line-height:1.6;}
  .newsletter form{position:relative; z-index:2; display:flex; gap:10px; flex-shrink:0; width:100%; max-width:420px;}
  .newsletter input{flex:1; height:54px; border-radius:12px; border:0; padding:0 18px; font-family:inherit; font-size:14px;}
  .newsletter input:focus{outline:2px solid #fff;}
  .newsletter button{height:54px; padding:0 26px; border-radius:12px; background:#fff; color:var(--navy); font-weight:800; font-size:14px; flex-shrink:0;}
  .newsletter button:hover{background:var(--sky);}
  @media(max-width:820px){.newsletter{flex-direction:column; align-items:flex-start; padding:40px 26px;} .newsletter form{max-width:100%;}}
  @media(max-width:480px){.newsletter form{flex-direction:column;} .newsletter button{width:100%;}}

  /* ===== FOOTER ===== */
  footer.site{background:var(--navy); color:#B9D0E8; position:relative; overflow:hidden; margin-top:80px;}
  .foot-container{max-width:1400px; margin:0 auto; padding:0 32px;}
  .foot-media{position:relative; height:380px; overflow:hidden; background:var(--navy);}
  .foot-media img{width:100%; height:100%; object-fit:cover; object-position:center 42%; filter:saturate(.92) brightness(.98);}
  .foot-media::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,26,46,.1) 0%, rgba(10,26,46,.55) 65%, var(--navy) 100%);}
  .foot-media .cap{position:absolute; left:0; right:0; bottom:34px; text-align:center; z-index:2;}
  .foot-media .cap span.eyebrow{justify-content:center; color:#9CCBF5;}
  .foot-media .cap span.eyebrow::before{background:#9CCBF5;}
  .foot-media .cap h3{color:#fff; font-size:clamp(24px,3.4vw,34px); margin-top:10px;}
  .foot-media .cap p{color:#CFE1F5; font-size:14px; margin-top:8px;}

  .foot-badges{border-bottom:1px solid rgba(255,255,255,.1);}
  .foot-badges .row{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; padding:30px 0;}
  .foot-badge{display:flex; align-items:center; gap:14px;}
  .foot-badge .ic{width:46px; height:46px; border-radius:13px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
  .foot-badge .ic svg{width:22px; height:22px; stroke:#8FC1F2;}
  .foot-badge b{display:block; color:#fff; font-size:13.5px; font-weight:800;}
  .foot-badge span{font-size:12px; color:#8FA8C6;}
  @media(max-width:900px){.foot-badges .row{grid-template-columns:repeat(2,1fr);}}

  .foot-top{display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr 1.3fr; gap:40px; padding:60px 0 36px;}
  .foot-brand .logo .word{color:#fff;}
  .foot-brand .mark{background:rgba(255,255,255,.12);}
  .foot-brand p{font-size:13.5px; color:#9FBBD9; line-height:1.75; margin:16px 0 22px; max-width:300px;}
  .foot-mini-form{display:flex; gap:8px; margin-bottom:22px; max-width:320px;}
  .foot-mini-form input{flex:1; height:44px; border-radius:10px; border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.06); padding:0 14px; color:#fff; font-family:inherit; font-size:13px;}
  .foot-mini-form input::placeholder{color:#7E9DBD;}
  .foot-mini-form input:focus{outline:none; border-color:var(--accent-blue);}
  .foot-mini-form button{width:44px; height:44px; border-radius:10px; background:var(--accent-blue); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
  .foot-mini-form button svg{width:17px; height:17px; stroke:#fff;}
  .foot-social{display:flex; gap:10px;}
  .foot-social a{width:38px; height:38px; border-radius:10px; background:rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.12);}
  .foot-social a:hover{background:var(--accent-blue);}
  .foot-social svg{width:17px; height:17px; stroke:#fff;}
  .foot-col h5{color:#fff; font-size:14px; font-weight:800; margin-bottom:18px; letter-spacing:.02em; display:flex; align-items:center; gap:8px;}
  .foot-col h5::before{content:''; width:14px; height:2px; background:var(--accent-blue); display:inline-block; border-radius:2px;}
  .foot-col li{margin-bottom:11px;}
  .foot-col a{font-size:13.5px; color:#9FBBD9;}
  .foot-col a:hover{color:#fff;}
  .foot-contact li{display:flex; gap:10px; align-items:flex-start; font-size:13.5px; color:#9FBBD9; margin-bottom:15px;}
  .foot-contact svg{width:17px; height:17px; stroke:#8FC1F2; flex-shrink:0; margin-top:1px;}
  .foot-contact b{display:block; color:#DCEAFB; font-weight:700; margin-bottom:2px;}
  .foot-hours{margin-top:20px; padding-top:18px; border-top:1px solid rgba(255,255,255,.1);}
  .foot-hours h6{font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; margin-bottom:10px; color:#8FC1F2;}
  .foot-hours .hr{display:flex; justify-content:space-between; font-size:12.5px; color:#9FBBD9; margin-bottom:6px;}
  .foot-hours .hr b{color:#DCEAFB; font-weight:700;}
  .foot-pay{display:flex; gap:8px; flex-wrap:wrap; margin-top:16px;}
  .foot-pay span{background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); font-size:11px; font-weight:700; color:#CFE1F5; padding:6px 10px; border-radius:8px;}
  .foot-certs{border-top:1px solid rgba(255,255,255,.1); padding:24px 0; display:flex; align-items:center; gap:14px; flex-wrap:wrap;}
  .foot-certs span.lbl{font-size:12px; color:#7E9DBD; font-weight:700; margin-right:6px;}
  .foot-certs .cert{display:flex; align-items:center; gap:7px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); padding:8px 14px; border-radius:999px; font-size:12px; font-weight:700; color:#CFE1F5;}
  .foot-certs .cert svg{width:15px; height:15px; stroke:#8FC1F2;}
  .foot-bottom{border-top:1px solid rgba(255,255,255,.12); padding:24px 0; display:flex; align-items:center; justify-content:space-between; gap:16px; font-size:12.5px; color:#88A6C4; flex-wrap:wrap;}
  .foot-bottom .legal{display:flex; gap:18px; flex-wrap:wrap;}
  .foot-bottom .legal a{color:#88A6C4;}
  .foot-bottom .legal a:hover{color:#fff;}
  .foot-bottom .credit a{color:#CFE1F5; font-weight:800; border-bottom:1px solid rgba(207,225,245,.4);}
  .foot-bottom .credit a:hover{color:#fff;}
  @media(max-width:1080px){.foot-top{grid-template-columns:1.3fr 1fr 1fr; row-gap:36px;} .foot-top .foot-col:nth-child(4){grid-column:1;} .foot-top .foot-col:nth-child(5){grid-column:2/4;}}
  @media(max-width:760px){.foot-top{grid-template-columns:1fr 1fr; row-gap:36px;} .foot-top .foot-brand{grid-column:1/3;} .foot-top .foot-col:nth-child(4){grid-column:1;} .foot-top .foot-col:nth-child(5){grid-column:2;}}
  @media(max-width:560px){.foot-top{grid-template-columns:1fr;} .foot-top .foot-brand, .foot-top .foot-col:nth-child(4), .foot-top .foot-col:nth-child(5){grid-column:1;} .foot-media{height:280px;}}

  /* ===== BACK TO TOP ===== */
  .totop{position:fixed; right:22px; bottom:22px; width:48px; height:48px; border-radius:50%; background:var(--navy); display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow); z-index:150; opacity:0; pointer-events:none; transition:.3s;}
  .totop.show{opacity:1; pointer-events:auto;}
  .totop svg{width:19px; height:19px; stroke:#fff;}
  .wa-float{position:fixed; left:22px; bottom:22px; width:54px; height:54px; border-radius:50%; background:#25D366; display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow); z-index:150;}
  .wa-float svg{width:26px; height:26px; fill:#fff; stroke:none;}

  /* ===== MOBILE NAV ===== */
  .mobile-nav{position:fixed; inset:0; z-index:400; display:none;}
  .mobile-nav.open{display:block;}
  .mobile-nav .backdrop{position:absolute; inset:0; background:rgba(10,26,46,.5);}
  .mobile-nav .panel{position:absolute; top:0; left:0; height:100%; width:82vw; max-width:340px; background:#fff; padding:24px; overflow-y:auto; animation:slideIn .25s ease;}
  .mobile-nav .panel .top{display:flex; justify-content:space-between; align-items:center; margin-bottom:22px;}
  .mobile-nav li a{display:flex; justify-content:space-between; padding:14px 4px; font-weight:700; color:var(--navy); border-bottom:1px solid var(--line); font-size:15px;}

  /* ===== RESPONSIVE HEADER ===== */
  @media(max-width:1080px){
    .searchbar{display:none;}
    .cat-trigger span.lbl{display:none;}
  }
  @media(max-width:860px){
    .subnav{display:none;}
    .cat-trigger{display:none;}
    .nav-divider{display:none;}
    .burger{display:flex;}
    .nav-icon-btn span{display:none;}
    .nav-icon-btn{padding:8px 10px;}
    .nav-icon-btn.cta{background:transparent; flex-direction:column; gap:3px; padding:8px 10px; margin-left:0; box-shadow:none;}
    .nav-icon-btn.cta:hover{background:var(--sky);}
    .nav-icon-btn.cta svg{stroke:var(--navy); width:21px; height:21px;}
    .nav-actions{gap:0;}
    .cart-badge{top:2px; right:4px;}
    .navwrap{height:74px; gap:12px;}
    .logo .mark{width:38px; height:38px;}
    .logo .word{font-size:19px;}
    .logo .word small{display:none;}
    .section{padding:54px 0;}
    .about-media .float-card{display:flex;}
  }
  @media(max-width:600px){
    .container{padding:0 18px;}
    .hero-copy .btns{flex-wrap:wrap;}
  }

  /* ===== ÜRÜN DETAY SAYFASI ===== */
  .pd-grid{display:grid; grid-template-columns:1.1fr 1fr; gap:56px; align-items:start;}
  .pd-gallery{position:sticky; top:110px;}
  .pd-main-img{position:relative; border-radius:22px; overflow:hidden; aspect-ratio:1/1; border:1px solid var(--line); background:var(--sky);}
  .pd-main-img img{width:100%; height:100%; object-fit:cover;}
  .pd-thumbs{display:flex; gap:12px; margin-top:14px; flex-wrap:wrap;}
  .gallery-thumb{width:76px; height:76px; border-radius:12px; overflow:hidden; border:2px solid var(--line); cursor:pointer; transition:.2s; flex-shrink:0;}
  .gallery-thumb.active, .gallery-thumb:hover{border-color:var(--accent-blue);}
  .gallery-thumb img{width:100%; height:100%; object-fit:cover;}

  .variant-options{display:flex; gap:10px; flex-wrap:wrap;}
  .variant-option{position:relative;}
  .variant-option input{position:absolute; opacity:0; width:100%; height:100%; cursor:pointer; margin:0;}
  .variant-option span{
    display:inline-flex; align-items:center; justify-content:center; padding:12px 20px; border-radius:12px;
    border:1.5px solid var(--line); font-weight:700; font-size:14px; color:var(--navy); background:#fff; transition:.2s;
  }
  .variant-option input:checked + span{background:var(--navy); border-color:var(--navy); color:#fff;}
  .variant-option:hover span{border-color:var(--accent-blue);}

  .qty-stepper{display:flex; align-items:center; border:1.5px solid var(--line); border-radius:12px; overflow:hidden; height:52px;}
  .qty-stepper button{width:44px; height:100%; font-size:20px; font-weight:700; color:var(--navy); background:var(--sky);}
  .qty-stepper button:hover{background:var(--powder);}
  .qty-stepper input{width:56px; height:100%; text-align:center; border:none; border-left:1px solid var(--line); border-right:1px solid var(--line); font-weight:800; font-size:15px; color:var(--ink); font-family:inherit;}
  .qty-stepper input::-webkit-outer-spin-button, .qty-stepper input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0;}

  .pd-description{margin-top:60px; padding-top:40px; border-top:1px solid var(--line); max-width:900px;}

  @media(max-width:900px){
    .pd-grid{grid-template-columns:1fr; gap:30px;}
    .pd-gallery{position:static;}
  }