:root{
    --ink:#0B2545;
    --azure:#1E6FEB;
    --azure-deep:#1550B0;
    --ice:#EAF2FF;
    --fizz:#39C7DE;
    --white:#FFFFFF;
    --slate:#4C5A72;
    --slate-light:#8695AC;
    --line:#D7E4F7;
    --danger:#d32f2f;
    --danger-soft:#FFEBEE;
    --danger-line:#FFCDD2;
    --warn:#ff9800;
    --success:#4caf50;
    --radius:14px;
    --shadow:0 10px 30px -12px rgba(11,37,69,0.25);
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{font-family:'Inter',sans-serif;color:var(--ink);background:var(--white);line-height:1.5;-webkit-font-smoothing:antialiased;}
  h1,h2,h3,h4{font-family:'Sora',sans-serif;letter-spacing:-0.02em;}
  .mono{font-family:'JetBrains Mono',monospace;}
  a{color:inherit;text-decoration:none;}
  ul{list-style:none;}
  img,svg{display:block;max-width:100%;}
  button{font-family:inherit;cursor:pointer;border:none;background:none;}
  .wrap{max-width:1200px;margin:0 auto;padding:0 24px;}
  .eyebrow{font-family:'JetBrains Mono',monospace;font-size:12.5px;letter-spacing:0.14em;text-transform:uppercase;color:var(--azure);font-weight:700;display:flex;align-items:center;gap:8px;}
  .eyebrow::before{content:"";width:16px;height:2px;background:var(--azure);display:inline-block;}
  .eyebrow--fizz{color:var(--fizz);}
  .eyebrow--fizz::before{background:var(--fizz);}
  .eyebrow--red{color:var(--danger);}
  .eyebrow--red::before{background:var(--danger);}
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 26px;border-radius:999px;font-weight:600;font-size:15px;transition:transform .18s ease,box-shadow .18s ease,background .18s ease;white-space:nowrap;}
  .btn-primary{background:var(--azure);color:var(--white);box-shadow:0 8px 20px -6px rgba(30,111,235,0.55);}
  .btn-primary:hover{background:var(--azure-deep);transform:translateY(-2px);}
  .btn-ghost{background:var(--ice);color:var(--ink);}
  .btn-ghost:hover{background:#DCEAFF;transform:translateY(-2px);}
  .btn-outline{border:1.5px solid var(--line);color:var(--ink);}
  .btn-outline:hover{border-color:var(--azure);color:var(--azure);}
  .btn-camp{background:var(--danger-soft);color:var(--danger);border:1.5px solid var(--danger-line);}
  .btn-camp:hover{background:#FFDDE0;transform:translateY(-2px);}
  .btn-block{width:100%;}
  .btn-compact{padding:10px 20px;font-size:13.5px;}

  /* ===== HEADER ===== */
  header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,0.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line);}
  .nav{display:flex;align-items:center;justify-content:space-between;gap:16px;height:76px;}
  .logo{flex:1;display:flex;align-items:center;gap:10px;font-family:'Sora',sans-serif;font-weight:800;font-size:19px;cursor:pointer;white-space:nowrap;min-width:0;}
  .logo-img{width:56px;height:56px;border-radius:12px;object-fit:cover;}
  .logo-mark{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,var(--azure),var(--fizz));display:flex;align-items:center;justify-content:center;}

  /* ===== TAB NAV ===== */
  .tab-nav{display:flex;align-items:center;gap:4px;flex-shrink:0;}
  .tab-btn{display:flex;align-items:center;gap:7px;padding:9px 18px;border-radius:999px;font-size:14.5px;font-weight:500;color:var(--slate);transition:background .15s ease,color .15s ease,box-shadow .15s ease;}
  .tab-btn:hover{color:var(--ink);background:var(--ice);}
  .tab-btn.active{background:var(--azure);color:#fff;font-weight:600;box-shadow:0 4px 14px -4px rgba(30,111,235,0.45);}
  .tab-btn.active:hover{background:var(--azure-deep);}
  .tab-icon{font-size:15px;}

  .nav-right{flex:1;display:flex;justify-content:flex-end;align-items:center;gap:16px;min-width:0;}
  .nav-cta{padding:10px 18px;font-size:13.5px;gap:6px;}
  .cart-btn{position:relative;width:44px;height:44px;border-radius:12px;background:var(--ice);display:flex;align-items:center;justify-content:center;transition:background .15s ease;}
  .cart-btn:hover{background:#DCEAFF;}
  .cart-count{position:absolute;top:-6px;right:-6px;background:var(--azure);color:#fff;font-size:11px;font-weight:700;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;}

  /* ===== PAGE ANIMATION ===== */
  main{display:block;animation:fadeSlide .28s ease both;}
  @keyframes fadeSlide{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}

  /* ===== HERO ===== */
  .hero{position:relative;padding:100px 0 90px;background:radial-gradient(ellipse at top right,#EAF2FF 0%,rgba(234,242,255,0) 55%),var(--white);overflow:hidden;}
  .hero::before{content:"";position:absolute;right:4%;top:6%;width:400px;height:400px;border-radius:50%;background:radial-gradient(circle,rgba(57,199,222,0.22),transparent 65%);filter:blur(60px);pointer-events:none;}
  .hero::after{content:"";position:absolute;right:20%;bottom:2%;width:360px;height:360px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,0.5),transparent 65%);filter:blur(70px);pointer-events:none;}
  .hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr 0.95fr;gap:60px;align-items:center;}
  .hero h1{font-size:clamp(36px,5vw,58px);font-weight:800;line-height:1.06;margin:18px 0 22px;}
  .hero h1 span{color:var(--azure);}
  .hero p{font-size:17px;color:var(--slate);max-width:480px;margin-bottom:34px;}
  .hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:44px;}
  .hero-stats{display:flex;gap:36px;flex-wrap:wrap;}
  .stat-num{font-family:'JetBrains Mono',monospace;font-size:26px;font-weight:700;color:var(--ink);}
  .stat-label{font-size:13px;color:var(--slate-light);}

  .countdown-card{background:rgba(255,255,255,0.45);backdrop-filter:blur(28px) saturate(160%);-webkit-backdrop-filter:blur(28px) saturate(160%);border:1px solid var(--azure);border-radius:24px;padding:36px;position:relative;overflow:hidden;min-height:420px;display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 0 26px -6px rgba(30,111,235,0.35),0 0 80px -12px rgba(30,111,235,0.45),0 20px 50px -20px rgba(11,37,69,0.25),inset 0 1px 0 rgba(255,255,255,0.9);}
  @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.countdown-card{background:#F2F7FD;}}
  .countdown-card::after{content:"";position:absolute;inset:-20%;background:radial-gradient(circle at 50% 0%,rgba(57,199,222,0.1),transparent 65%);filter:blur(36px);pointer-events:none;}
  .countdown-card::before{content:"";position:absolute;left:-30%;bottom:-25%;width:75%;height:60%;background:radial-gradient(circle,rgba(30,111,235,0.08),transparent 70%);filter:blur(44px);pointer-events:none;}
  .cd-top{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:8px;}
  .cd-badge{font-family:'JetBrains Mono',monospace;font-size:12px;color:#0B7A93;letter-spacing:0.05em;background:rgba(57,199,222,0.14);padding:6px 12px;border-radius:999px;border:1px solid rgba(57,199,222,0.4);}
  .cd-badge--alt{background:rgba(11,37,69,0.05);border-color:rgba(11,37,69,0.12);color:var(--slate);}
  .cd-accent{color:var(--azure);}
  .cd-title{position:relative;z-index:1;color:var(--ink);font-family:'Sora',sans-serif;font-size:28px;font-weight:700;line-height:1.2;margin:20px 0 10px;}
  .cd-subtitle{position:relative;z-index:1;color:var(--slate);font-size:15px;line-height:1.5;}
  .cd-timer{position:relative;z-index:1;display:flex;gap:12px;align-items:center;margin-top:20px;}
  .cd-box{background:rgba(255,255,255,0.55);border:1px solid rgba(11,37,69,0.1);border-radius:16px;padding:16px;flex:1;text-align:center;}
  .cd-val{color:var(--azure);font-weight:800;font-size:36px;font-family:'JetBrains Mono',monospace;line-height:1;}
  .cd-lbl{color:var(--slate);font-size:11px;font-weight:600;letter-spacing:0.1em;margin-top:8px;}
  .cd-colon{color:rgba(11,37,69,0.35);font-size:32px;font-weight:700;margin-top:-24px;}
  /* Hero — dönen kampanyalar (countdown-card içinde) */
  .hero-camp-slider{position:relative;z-index:1;flex:1;margin-top:14px;display:grid;align-items:center;}
  .hero-camp-slide{grid-area:1/1;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;text-decoration:none;opacity:0;visibility:hidden;transform:translateY(14px) scale(0.97);transition:opacity .55s ease,transform .55s cubic-bezier(.22,1,.36,1),visibility .55s;}
  .hero-camp-slide.is-active{opacity:1;visibility:visible;transform:translateY(0) scale(1);}
  .hero-camp-visual{position:relative;width:122px;height:122px;display:flex;align-items:center;justify-content:center;font-size:60px;background:linear-gradient(160deg,rgba(255,255,255,0.9),rgba(255,255,255,0.55));border:1px solid rgba(255,255,255,0.9);border-radius:26px;overflow:visible;margin-bottom:16px;box-shadow:0 18px 40px -18px rgba(11,37,69,0.3),0 0 70px -8px rgba(57,199,222,0.18);}
  .hero-camp-slide.is-active .hero-camp-visual{animation:campFloat 3.2s ease-in-out infinite;}
  @keyframes campFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-6px);}}
  .hero-camp-visual .card-img{width:100%;height:100%;object-fit:contain;padding:10px;border-radius:26px;}
  .hero-camp-disc{position:absolute;top:-10px;right:-14px;background:linear-gradient(135deg,#FF5252,#d32f2f);color:#fff;font-size:13px;font-weight:700;padding:5px 10px;border-radius:999px;transform:rotate(8deg);box-shadow:0 6px 16px -4px rgba(211,47,47,0.6);border:1.5px solid rgba(255,255,255,0.35);}
  .hero-camp-tag{display:inline-block;font-size:11px;color:#0B7A93;letter-spacing:0.08em;text-transform:uppercase;background:rgba(57,199,222,0.14);border:1px solid rgba(57,199,222,0.4);padding:4px 12px;border-radius:999px;margin-bottom:10px;}
  .hero-camp-name{color:var(--ink);font-family:'Sora',sans-serif;font-size:20px;font-weight:700;line-height:1.25;margin:0 0 5px;max-width:340px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
  .hero-camp-pack{color:var(--slate);font-size:13px;margin-bottom:12px;}
  .hero-camp-prices{display:flex;align-items:baseline;gap:12px;justify-content:center;}
  .hero-camp-old{color:var(--slate-light);font-size:15px;text-decoration:line-through;font-family:'JetBrains Mono',monospace;}
  .hero-camp-new{color:var(--azure);font-weight:800;font-size:30px;font-family:'JetBrains Mono',monospace;line-height:1;text-shadow:0 0 28px rgba(30,111,235,0.2);}
  .hero-camp-new small{font-size:12px;font-weight:600;color:var(--slate);opacity:0.9;text-shadow:none;}
  .hero-camp-cta{display:inline-flex;align-items:center;gap:6px;margin-top:16px;color:var(--ink);font-size:13.5px;font-weight:600;background:rgba(255,255,255,0.6);border:1px solid rgba(11,37,69,0.12);padding:9px 20px;border-radius:999px;transition:background .2s ease,border-color .2s ease,transform .2s ease;}
  .hero-camp-cta-arrow{transition:transform .2s ease;}
  .hero-camp-slide:hover .hero-camp-cta{background:var(--fizz);border-color:var(--fizz);color:var(--ink);transform:translateY(-2px);}
  .hero-camp-slide:hover .hero-camp-cta-arrow{transform:translateX(3px);}
  .hero-camp-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--ink);background:rgba(255,255,255,0.6);border:1px solid rgba(11,37,69,0.12);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);cursor:pointer;transition:background .2s ease,border-color .2s ease,color .2s ease,transform .2s ease;}
  .hero-camp-arrow--prev{left:-6px;}
  .hero-camp-arrow--next{right:-6px;}
  .hero-camp-arrow:hover{background:var(--fizz);border-color:var(--fizz);color:var(--ink);transform:translateY(-50%) scale(1.08);}
  .hero-camp-arrow:active{transform:translateY(-50%) scale(0.96);}
  .hero-camp-dots{position:relative;z-index:1;display:flex;gap:8px;justify-content:center;margin-top:14px;}
  .hero-camp-dot{position:relative;width:8px;height:8px;border-radius:999px;border:none;padding:0;background:rgba(11,37,69,0.18);cursor:pointer;overflow:hidden;transition:background .3s,width .35s cubic-bezier(.22,1,.36,1);}
  .hero-camp-dot:hover{background:rgba(11,37,69,0.35);}
  .hero-camp-dot.is-active{background:rgba(57,199,222,0.3);width:26px;}
  .hero-camp-dot.is-active::after{content:"";position:absolute;inset:0;border-radius:999px;background:var(--fizz);transform-origin:left;animation:campDotFill 4s linear forwards;}
  @keyframes campDotFill{from{transform:scaleX(0);}to{transform:scaleX(1);}}
  @media(max-width:560px){
    /* Hero butonları: ilk ikisi yan yana, kampanya butonu altta tam genişlik */
    .hero-actions{gap:10px;}
    .hero-actions .btn{flex:1 1 calc(50% - 5px);padding:13px 10px;font-size:14px;}
    .hero-actions .btn-camp{flex-basis:100%;}
    .countdown-card{min-height:0;padding:26px 20px;}
    .hero-camp-slider{margin-top:18px;}
    .hero-camp-visual{width:96px;height:96px;font-size:46px;border-radius:22px;}
    .hero-camp-visual .card-img{border-radius:22px;}
    .hero-camp-disc{font-size:12px;padding:4px 9px;top:-8px;right:-10px;}
    .hero-camp-slide{padding:0 36px;}
    .hero-camp-arrow{width:32px;height:32px;}
    .hero-camp-arrow--prev{left:-8px;}
    .hero-camp-arrow--next{right:-8px;}
    .hero-camp-name{font-size:17px;max-width:100%;}
    .hero-camp-new{font-size:24px;}
    .hero-camp-old{font-size:13px;}
    .hero-camp-cta{margin-top:14px;padding:8px 18px;font-size:13px;}
    .hero-camp-dots{margin-top:18px;}
  }

  /* ===== CATS STRIP ===== */
  .cats{padding:50px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--ice);}
  .cats-row{display:flex;gap:14px;overflow-x:auto;padding-top:6px;padding-bottom:4px;margin-top:-6px;scrollbar-width:none;-ms-overflow-style:none;}
  .cats-row::-webkit-scrollbar{display:none;}
  .cat-chip{flex:0 0 auto;display:flex;align-items:center;gap:10px;background:var(--white);border:1.5px solid var(--line);border-radius:999px;padding:10px 20px 10px 12px;font-weight:600;font-size:14px;transition:border-color .15s ease,transform .15s ease,color .15s ease;cursor:pointer;}
  .cat-chip:hover{border-color:var(--azure);transform:translateY(-2px);color:var(--azure);}
  .cat-ic{width:30px;height:30px;border-radius:9px;background:var(--ice);display:flex;align-items:center;justify-content:center;}

  /* ===== SECTION ===== */
  .section{padding:88px 0;}
  .section-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:44px;gap:24px;flex-wrap:wrap;}
  .section-head h2{font-size:clamp(26px,3vw,36px);margin-top:14px;}
  .section-head p{color:var(--slate);max-width:420px;font-size:15px;}
  .section-head-side{display:flex;flex-direction:column;align-items:flex-end;gap:10px;}

  /* ===== PAGE HERO (ürünler / kampanyalar) ===== */
  .page-hero{padding:48px 0 36px;border-bottom:1px solid var(--line);}
  .page-hero--blue{background:linear-gradient(135deg,#EAF2FF 0%,#fff 100%);}
  .page-hero--red{background:linear-gradient(135deg,#FFF0F2 0%,#fff 100%);border-bottom-color:var(--danger-line);}
  .page-hero-title{font-size:clamp(26px,3.5vw,40px);margin-top:12px;}
  .page-hero-title--red{color:#b71c1c;}
  .page-hero-sub{color:var(--slate);margin-top:8px;font-size:15px;}
  .page-body{padding-top:44px;padding-bottom:96px;}
  .products-camp-strip{margin-bottom:56px;padding-bottom:48px;border-bottom:1px solid var(--line);}
  .products-camp-strip .section-head{margin-bottom:28px;}
  /* Kampanya şeridi: yatay kaydırmalı — PC'de 4, mobilde 2 kart görünür */
  .products-camp-strip .product-grid{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:calc((100% - 60px)/4);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px;scrollbar-width:none;-ms-overflow-style:none;}
  .products-camp-strip .product-grid::-webkit-scrollbar{display:none;}
  .products-camp-strip .product-card{scroll-snap-align:start;}
  .camp-strip-controls{display:flex;align-items:center;gap:10px;}
  .camp-strip-arrow{width:40px;height:40px;border-radius:50%;border:1.5px solid var(--line);background:#fff;color:var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:border-color .15s ease,color .15s ease,background .15s ease,transform .15s ease;}
  .camp-strip-arrow:hover{border-color:var(--azure);color:var(--azure);transform:translateY(-2px);}
  .camp-strip-arrow:active{transform:translateY(0);}

  /* ===== PRODUCTS ===== */
  .product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
  .product-card{border:1px solid var(--line);border-radius:var(--radius);padding:20px;display:flex;flex-direction:column;transition:box-shadow .2s ease,transform .2s ease,border-color .2s ease;background:var(--white);}
  .product-card:hover{box-shadow:var(--shadow);transform:translateY(-4px);border-color:transparent;}
  .product-card--campaign{border:1px solid var(--danger-line);background:linear-gradient(180deg,#FFF9FA 0%,#FFFFFF 100%);}
  .product-visual{background:var(--ice);border-radius:10px;height:150px;display:flex;align-items:center;justify-content:center;margin-bottom:16px;font-size:52px;overflow:hidden;}
  .card-img{width:100%;height:100%;object-fit:contain;}
  .product-tag{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--azure);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:6px;}
  .product-tag--campaign{background:var(--danger-soft);color:var(--danger);border:1px solid var(--danger-line);border-radius:6px;padding:2px 8px;display:inline-block;width:fit-content;}
  .product-card h4{font-size:16px;margin-bottom:4px;}
  .product-pack{font-size:13px;color:var(--slate-light);margin-bottom:14px;}
  .product-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px;}
  .product-foot--end{align-items:flex-end;}
  .price{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:17px;}
  .price small{font-family:'Inter',sans-serif;font-weight:500;font-size:11.5px;color:var(--slate-light);}
  .price--campaign{color:var(--danger);}
  .price--campaign small{color:var(--danger);}
  .price-old{text-decoration:line-through;color:#9e9e9e;font-size:12px;margin-bottom:2px;font-family:'JetBrains Mono',monospace;}
  .qty-add{display:flex;align-items:center;gap:6px;}
  .qty-input{width:44px;height:38px;text-align:center;border:1px solid #e0e0e0;border-radius:10px;font-size:14px;outline:none;font-family:'Inter',sans-serif;}
  .qty-input--campaign{border-color:var(--danger-line);}
  .add-btn{width:38px;height:38px;border-radius:10px;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font-size:20px;transition:background .15s ease,transform .15s ease;}
  .add-btn:hover{background:var(--azure);transform:scale(1.06);}
  .add-btn--campaign{background:var(--danger);}
  .add-btn--campaign:hover{background:#b71c1c;}

  /* ===== SEARCH ===== */
  .search-bar-wrap{margin-bottom:32px;display:flex;gap:12px;flex-wrap:wrap;align-items:center;}
  .search-input{flex:1;min-width:200px;padding:13px 18px 13px 44px;border:1.5px solid var(--line);border-radius:999px;font-size:14.5px;font-family:'Inter',sans-serif;color:var(--ink);background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238695AC' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") no-repeat 16px center;transition:border-color .15s,box-shadow .15s;outline:none;}
  .search-input:focus{border-color:var(--azure);box-shadow:0 0 0 3px rgba(30,111,235,0.12);}
  .sort-select{padding:12px 38px 12px 18px;border:1.5px solid var(--line);border-radius:999px;font-size:14px;font-weight:600;font-family:'Inter',sans-serif;color:var(--ink);background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238695AC' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 14px center;appearance:none;-webkit-appearance:none;cursor:pointer;outline:none;transition:border-color .15s,box-shadow .15s;}
  .sort-select:focus{border-color:var(--azure);box-shadow:0 0 0 3px rgba(30,111,235,0.12);}
  .filter-chips{display:flex;gap:8px;flex-wrap:wrap;}
  .filter-chip{padding:8px 16px;border-radius:999px;font-size:13px;font-weight:600;border:1.5px solid var(--line);color:var(--slate);transition:all .15s;cursor:pointer;}
  .filter-chip:hover{border-color:var(--azure);color:var(--azure);}
  .filter-chip.active{background:var(--azure);color:#fff;border-color:var(--azure);}
  .no-results{text-align:center;padding:60px 20px;color:var(--slate-light);font-size:15px;grid-column:1/-1;}
  .no-results span{font-size:40px;display:block;margin-bottom:12px;}
  .no-results--wide{grid-column:1/-1;}

  /* ===== CATEGORIES / MARKALAR PAGE HEADER ===== */
  .cat-page-header{padding:60px 0 40px;background:linear-gradient(135deg,var(--ink) 0%,#1a3d6e 100%);color:#fff;position:relative;overflow:hidden;}
  .cat-page-header::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 70% 50%,rgba(57,199,222,0.2),transparent 60%);}
  .cat-page-header .wrap{position:relative;z-index:1;}
  .cat-page-header h1, .cat-page-header h2{color:#fff;font-size:clamp(28px,3.5vw,42px);margin-top:12px;}
  .cat-page-header p{color:#B9C7E0;margin-top:10px;font-size:16px;}

  /* ===== MARKA DETAY ===== */
  .brand-detail-head{display:flex;align-items:center;gap:20px;margin:40px 0 30px;}
  .brand-detail-logo{width:120px;height:120px;border-radius:24px;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 30px rgba(0,0,0,0.06);padding:10px;overflow:hidden;}
  .brand-detail-img{max-width:100%;max-height:100%;}
  .brand-detail-name{margin:0;font-size:42px;}
  .filter-bar{margin-bottom:20px;}
  .filter-bar-title{margin:0;font-size:22px;}
  .brand-product-grid{margin-bottom:80px;}

  /* ===== WHY ===== */
  .why{background:var(--ink);color:#fff;}
  .why .eyebrow{color:var(--fizz);}
  .why .eyebrow::before{background:var(--fizz);}
  .why h2{color:#fff;}
  .why .section-head p{color:#B9C7E0;}
  .why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
  .why-card{background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);border-radius:var(--radius);padding:26px;transition:background .2s,border-color .2s;}
  .why-card:hover{background:rgba(255,255,255,0.09);border-color:rgba(57,199,222,0.35);}
  .why-ic{width:44px;height:44px;border-radius:12px;background:rgba(57,199,222,0.15);display:flex;align-items:center;justify-content:center;margin-bottom:18px;font-size:20px;}
  .why-card h4{color:#fff;font-size:16px;margin-bottom:8px;}
  .why-card p{color:#A9B8D4;font-size:14px;}

  /* ===== STEPS ===== */
  .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
  .step{border:1px solid var(--line);border-radius:var(--radius);padding:30px 26px;transition:box-shadow .2s;}
  .step:hover{box-shadow:var(--shadow);}
  .step-num{font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--azure);font-weight:700;background:var(--ice);width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:20px;}
  .step h4{font-size:17px;margin-bottom:8px;}
  .step p{font-size:14px;color:var(--slate);}

  /* ===== CTA ===== */
  .cta-section{padding:0 24px 96px;}
  .cta-banner{max-width:1152px;margin-left:auto;margin-right:auto;background:linear-gradient(120deg,var(--azure) 0%,var(--azure-deep) 60%,var(--ink) 100%);border-radius:28px;padding:56px;display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap;color:#fff;position:relative;overflow:hidden;}
  .cta-banner h3{font-size:clamp(22px,2.6vw,30px);max-width:480px;}
  .cta-banner p{color:#DCEAFF;margin-top:10px;max-width:420px;font-size:15px;}
  .cta-banner .btn-ghost{background:#fff;color:var(--ink);}
  .cta-banner .btn-ghost:hover{background:#EAF2FF;}

  /* ===== FOOTER ===== */
  footer{background:#081A33;color:#B9C7E0;padding:64px 0 28px;}
  .footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;padding-bottom:44px;border-bottom:1px solid rgba(255,255,255,0.08);}
  .footer-grid .logo{color:#fff;}
  .footer-logo{display:flex;align-items:center;gap:10px;}
  .footer-grid p{font-size:14px;margin-top:14px;max-width:280px;color:#8FA0C2;}
  .footer-col h5{color:#fff;font-size:13px;margin-bottom:16px;letter-spacing:0.04em;}
  .footer-col li{margin-bottom:10px;}
  .footer-col a{font-size:14px;color:#8FA0C2;}
  .footer-col a:hover{color:#fff;}
  .footer-bottom{display:flex;justify-content:space-between;padding-top:24px;font-size:13px;color:#6B7E9F;flex-wrap:wrap;gap:10px;}

  /* ===== CART DRAWER ===== */
  .overlay{position:fixed;inset:0;background:rgba(8,26,51,0.5);opacity:0;pointer-events:none;transition:opacity .25s;z-index:200;}
  .overlay.active{opacity:1;pointer-events:auto;}
  .drawer{position:fixed;top:0;right:0;height:100%;width:420px;max-width:92vw;background:#fff;z-index:201;transform:translateX(100%);transition:transform .3s ease;display:flex;flex-direction:column;box-shadow:-20px 0 40px rgba(8,26,51,0.15);}
  .drawer.active{transform:translateX(0);}
  .form-drawer{z-index:10001;}
  .drawer-head{padding:24px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;}
  .drawer-head h3{font-size:19px;}
  .close-btn{width:34px;height:34px;border-radius:50%;background:var(--ice);font-size:18px;display:flex;align-items:center;justify-content:center;}
  .drawer-body{flex:1;overflow-y:auto;padding:20px 24px;}
  .drawer-form{padding:24px;}
  .drawer-intro{color:var(--slate);margin-bottom:20px;font-size:14px;line-height:1.5;}
  .form-group--last{margin-bottom:24px;}
  .cart-item{display:flex;gap:14px;padding:16px 0;border-bottom:1px solid var(--line);}
  .cart-item-visual{width:56px;height:56px;border-radius:10px;background:var(--ice);display:flex;align-items:center;justify-content:center;flex:0 0 auto;font-size:24px;overflow:hidden;}
  .cart-item-info{flex:1;}
  .cart-item-info h5{font-size:14.5px;margin-bottom:4px;}
  .cart-item-info .mono{font-size:12px;color:var(--slate-light);}
  .cart-price-old{text-decoration:line-through;color:#9e9e9e;font-size:11px;margin-bottom:1px;}
  .cart-price-active{color:var(--danger);font-weight:bold;font-size:13px;}
  .cart-hint{font-size:11px;margin-top:4px;}
  .cart-hint--warn{color:var(--warn);font-weight:500;}
  .cart-hint--ok{color:var(--success);font-weight:600;}
  .qty-row{display:flex;align-items:center;gap:10px;margin-top:8px;}
  .qty-btn{width:24px;height:24px;border-radius:6px;background:var(--ice);display:flex;align-items:center;justify-content:center;font-size:14px;}
  .qty-val{font-family:'JetBrains Mono',monospace;font-size:13px;min-width:16px;text-align:center;}
  .cart-empty{text-align:center;padding:60px 20px;color:var(--slate-light);font-size:14px;}
  .cart-empty-icon{font-size:40px;display:block;margin-bottom:12px;}
  .drawer-foot{padding:22px 24px;border-top:1px solid var(--line);}
  .total-row{display:flex;justify-content:space-between;margin-bottom:16px;font-size:15px;}
  .total-row .mono{font-weight:700;font-size:18px;}
  .cart-summary{margin-bottom:12px;border-bottom:1px dashed #e2e8f0;padding-bottom:8px;}
  .cart-summary[hidden]{display:none;}
  .cart-summary-row{display:flex;justify-content:space-between;margin-bottom:6px;font-size:13px;color:#666;}
  .cart-summary-row .mono{font-weight:500;}
  .cart-summary-row--discount{color:var(--danger);font-weight:600;margin-bottom:2px;}

  /* ===== MODALLAR (checkout / ödeme) ===== */
  .ht-modal{position:fixed;inset:0;background:rgba(11,37,69,0.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:99999;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s ease;}
  .ht-modal.open{opacity:1;}
  .ht-modal-box{background:#fff;border-radius:24px;padding:40px;width:90%;max-width:400px;text-align:center;box-shadow:0 24px 48px rgba(0,0,0,0.2);transform:translateY(20px);transition:transform .2s ease;}
  .ht-modal.open .ht-modal-box{transform:translateY(0);}
  .ht-modal-box h3{font-family:'Sora',sans-serif;font-size:24px;color:var(--ink);margin-bottom:12px;}
  .ht-modal-box > p{color:var(--slate);margin-bottom:32px;font-size:15px;line-height:1.5;}
  .ht-modal-actions{display:flex;flex-direction:column;gap:12px;}
  .ht-modal-btn{width:100%;padding:16px;font-size:15.5px;justify-content:center;}
  .ht-modal-cancel{margin-top:24px;background:none;border:none;color:var(--slate-light);font-size:14px;cursor:pointer;text-decoration:underline;}

  /* ===== TOAST ===== */
  .toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%) translateY(80px);background:#fff;color:var(--ink);border:1.5px solid var(--line);padding:13px 22px;border-radius:16px;font-size:14px;font-weight:600;line-height:1.45;z-index:100010;transition:transform .3s cubic-bezier(0.34,1.56,0.64,1),opacity .3s;opacity:0;pointer-events:none;max-width:calc(100vw - 32px);white-space:normal;text-align:center;box-shadow:0 14px 36px -10px rgba(11,37,69,0.3);}
  .toast.show{transform:translateX(-50%) translateY(0);opacity:1;}
  /* Mesaj türüne göre yumuşak renkler (site paletiyle uyumlu açık tema) */
  .toast--error{background:var(--danger-soft);color:var(--danger);border-color:var(--danger-line);}
  .toast--success{background:#E8F5E9;color:#2E7D32;border-color:#C8E6C9;}
  @media(max-width:560px){
    .toast{left:14px;right:14px;bottom:calc(14px + env(safe-area-inset-bottom, 0px));max-width:none;transform:translateY(90px);font-size:15px;padding:15px 18px;}
    .toast.show{transform:translateY(0);}
  }

  /* ===== İLETİŞİM SAYFASI ===== */
  .contact-hero{
    background:linear-gradient(135deg,var(--ink) 0%,#1a3d6e 100%);
    padding:60px 0 50px;
    color:#fff;
    position:relative;
    overflow:hidden;
  }
  .contact-hero::before{
    content:"";
    position:absolute;inset:0;
    background:radial-gradient(circle at 80% 50%,rgba(57,199,222,0.18),transparent 60%);
  }
  .contact-hero .wrap{position:relative;z-index:1;}
  .contact-hero h1, .contact-hero h2{color:#fff;font-size:clamp(28px,3.5vw,42px);margin-top:12px;}
  .contact-hero p{color:#B9C7E0;margin-top:10px;font-size:16px;max-width:520px;}

  .contact-layout{
    display:grid;
    grid-template-columns:1fr 1.4fr;
    gap:40px;
    padding:60px 0 96px;
    align-items:start;
  }
  .contact-info-col{display:flex;flex-direction:column;gap:20px;}
  .contact-info-card{
    border:1.5px solid var(--line);
    border-radius:var(--radius);
    padding:24px;
    display:flex;
    gap:16px;
    align-items:flex-start;
    background:#fff;
    transition:box-shadow .2s ease,border-color .2s ease,transform .2s ease;
  }
  .contact-info-card:hover{box-shadow:var(--shadow);border-color:var(--azure);transform:translateY(-3px);}
  .contact-info-icon{
    width:46px;height:46px;border-radius:12px;
    background:var(--ice);
    display:flex;align-items:center;justify-content:center;
    font-size:20px;flex:0 0 auto;
  }
  .contact-info-card h4{font-size:14px;color:var(--slate-light);font-weight:600;letter-spacing:0.04em;text-transform:uppercase;margin-bottom:5px;font-family:'JetBrains Mono',monospace;}
  .contact-info-card p,.contact-info-card a{font-size:15.5px;color:var(--ink);font-weight:500;line-height:1.5;}
  .contact-info-card a:hover{color:var(--azure);}
  .contact-sub-link{color:var(--slate-light);font-size:14px;}
  .contact-muted{color:var(--slate-light);font-size:13.5px;}

  .map-wrap{
    border-radius:var(--radius);
    overflow:hidden;
    border:1.5px solid var(--line);
    margin-bottom:0;
  }
  .map-iframe{border:0;display:block;}
  .map-actions{
    display:flex;
    border-top:1px solid var(--line);
  }
  .map-btn{
    flex:1;
    display:flex;align-items:center;justify-content:center;gap:7px;
    padding:11px 14px;
    font-size:13px;font-weight:600;
    transition:background .15s,color .15s;
    white-space:nowrap;
  }
  .map-btn-primary{
    background:var(--azure);
    color:#fff;
  }
  .map-btn-primary:hover{background:var(--azure-deep);}
  .map-btn-ghost{
    background:var(--ice);
    color:var(--ink);
    border-left:1px solid var(--line);
  }
  .map-btn-ghost:hover{background:#DCEAFF;color:var(--azure);}

  .contact-form-col{
    background:#fff;
    border:1.5px solid var(--line);
    border-radius:20px;
    padding:36px;
  }
  .contact-form-col h3{font-size:22px;margin-bottom:6px;}
  .contact-form-col > p{color:var(--slate);font-size:14.5px;margin-bottom:28px;}
  .form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px;}
  .form-group{display:flex;flex-direction:column;gap:7px;margin-bottom:16px;}
  .form-group label{font-size:13px;font-weight:600;color:var(--slate);letter-spacing:0.02em;}
  .form-control{
    padding:13px 16px;
    border:1.5px solid var(--line);
    border-radius:10px;
    font-size:14.5px;
    font-family:'Inter',sans-serif;
    color:var(--ink);
    background:#fff;
    transition:border-color .15s,box-shadow .15s;
    outline:none;
    width:100%;
  }
  .form-control:focus{border-color:var(--azure);box-shadow:0 0 0 3px rgba(30,111,235,0.12);}
  .form-control::placeholder{color:var(--slate-light);}
  textarea.form-control{resize:vertical;min-height:130px;}
  .form-success{
    display:none;
    text-align:center;
    padding:40px 20px;
  }
  .form-success .success-icon{font-size:52px;display:block;margin-bottom:16px;}
  .form-success h3{font-size:22px;margin-bottom:8px;}
  .form-success p{color:var(--slate);font-size:15px;}

  /* ===== MARKA GRID ===== */
  .brand-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(160px,1fr));
    gap:20px;
  }
  .brand-card{
    border:1.5px solid var(--line);
    border-radius:16px;
    padding:24px 16px 18px;
    display:flex; flex-direction:column; align-items:center; gap:12px;
    background:#fff;
    transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    text-align:center;
  }
  .brand-card:hover{
    transform:translateY(-5px);
    box-shadow:0 12px 32px -10px rgba(11,37,69,0.2);
    border-color:var(--azure);
  }
  .brand-logo-wrap{
    width:100%; height:72px;
    display:flex; align-items:center; justify-content:center;
  }
  .brand-logo-img{
    max-width:120px; max-height:64px;
    object-fit:contain;
  }
  .brand-initial{
    width:64px; height:64px; border-radius:14px;
    display:flex; align-items:center; justify-content:center;
    color:#fff; font-family:'Sora',sans-serif;
    font-weight:800; font-size:20px;
    letter-spacing:-0.02em;
  }
  .brand-initial--hidden{display:none;}
  .brand-initial--lg{width:100%;height:100%;font-size:36px;border-radius:12px;}
  .brand-name{
    font-family:'Sora',sans-serif;
    font-weight:700; font-size:14px; color:var(--ink);
    line-height:1.2;
  }
  .brand-cat{
    font-family:'JetBrains Mono',monospace;
    font-size:11px; color:var(--slate-light);
    text-transform:uppercase; letter-spacing:0.08em;
    background:var(--ice); padding:3px 10px; border-radius:999px;
  }

  /* ===== RESPONSIVE ===== */

  @media(max-width:1120px){
    .tab-icon{display:none;}
    .tab-btn{padding:8px 14px;font-size:13.5px;}
    .logo{font-size:17px;gap:8px;}
    .logo-img{width:44px;height:44px;}
    .nav-cta{padding:9px 14px;font-size:13px;}
    .nav-right{gap:10px;}
  }
  @media(max-width:900px){
    .tab-btn{padding:7px 12px;font-size:13px;}
    .tab-icon{display:none;}
    .nav-cta{display:none;}
    .hero-grid{grid-template-columns:1fr;}
    .product-grid{grid-template-columns:repeat(2,1fr);}
    .products-camp-strip .product-grid{grid-auto-columns:calc((100% - 40px)/3);}
    .why-grid{grid-template-columns:repeat(2,1fr);}
    .steps{grid-template-columns:1fr;}
    .footer-grid{grid-template-columns:1fr 1fr;}
    .contact-layout{grid-template-columns:1fr;}
    .brand-detail-head{flex-wrap:wrap;}
    .brand-detail-name{font-size:30px;}
  }
  @media(max-width:768px){
    .tab-nav { display: none !important; }
    .nav-right .nav-cta { display: none !important; }
    .menu-toggle { display: flex !important; }
  }
  @media(max-width:560px){
    .product-grid{grid-template-columns:1fr;}
    /* Ürünler sayfası: mobilde 2'li dizilim + kompakt kart */
    #page-urunler .product-grid, #page-marka .product-grid{grid-template-columns:repeat(2,1fr);gap:12px;}
    #page-urunler .products-camp-strip .product-grid{grid-template-columns:none;grid-auto-columns:calc((100% - 12px)/2);}
    #page-urunler .product-card, #page-marka .product-card{padding:12px;}
    #page-urunler .product-visual, #page-marka .product-visual{height:104px;font-size:40px;margin-bottom:10px;}
    #page-urunler .product-card h4, #page-marka .product-card h4{font-size:13.5px;line-height:1.3;}
    #page-urunler .product-tag, #page-marka .product-tag{font-size:9.5px;}
    #page-urunler .product-pack, #page-marka .product-pack{font-size:11.5px;margin-bottom:10px;}
    #page-urunler .product-foot, #page-marka .product-foot{flex-wrap:wrap;gap:8px;}
    #page-urunler .price, #page-marka .price{font-size:14.5px;}
    #page-urunler .qty-input, #page-marka .qty-input{width:38px;height:34px;font-size:13px;}
    #page-urunler .add-btn, #page-marka .add-btn{width:34px;height:34px;font-size:18px;}
    .why-grid{grid-template-columns:1fr;}
    .footer-grid{grid-template-columns:1fr;}
    .cta-banner{padding:36px 24px;}
    .drawer{width:100vw;}
    .tab-label{display:none;}
    .tab-icon{display:inline-block !important;}
    .tab-btn{padding:8px 10px;}
  }

  /* Hamburger Menu Toggle */
  .menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    flex-direction: column;
    gap: 5px;
    padding: 8px;
    z-index: 1001;
    align-items: center;
    justify-content: center;
  }
  .menu-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background-color: #0B2545;
    border-radius: 2px;
    transition: transform 0.3s, opacity 0.3s;
  }
  .menu-toggle.active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .menu-toggle.active span:nth-child(2) {
    opacity: 0;
  }
  .menu-toggle.active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  /* Mobile Drawer Menu */
  .mobile-menu-drawer {
    position: fixed;
    top: 0;
    right: -280px;
    width: 280px;
    height: 100vh;
    background: #ffffff;
    box-shadow: -5px 0 25px rgba(0,0,0,0.08);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 100px 24px 40px 24px;
  }
  .mobile-menu-drawer.open {
    right: 0;
  }
  .mobile-menu-links {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .mobile-menu-link {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: #0B2545;
    font-family: 'Sora', sans-serif;
    font-weight: 600;
    font-size: 16px;
    padding: 12px 16px;
    border-radius: 12px;
    transition: background 0.2s, color 0.2s;
  }
  .mobile-menu-link:hover, .mobile-menu-link.active {
    background: #F4F7FA;
    color: #1E6FEB;
  }
  .mobile-menu-link .icon {
    font-size: 20px;
  }
  .mobile-menu-cta{margin-top:20px;justify-content:center;padding:14px;font-size:15px;display:flex;}
  :focus-visible{outline:2.5px solid var(--azure);outline-offset:3px;}
  @media(prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important;}}