*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden;background:#111;font-family:Arial,Helvetica,sans-serif;color:#111}button,a{font:inherit}button{border:0;background:none;cursor:pointer}a{text-decoration:none;color:inherit}
#viewport{width:100vw;height:100vh;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#0d1114}
#canvas{position:relative;width:1024px;height:1536px;transform-origin:center center;background:#fff;box-shadow:0 0 50px #0008;overflow:hidden}
.topbar{height:90px;background:#090e11;color:#fff;display:flex;align-items:center;padding:0 31px;gap:36px}
.logo{display:flex;align-items:center;color:#fff;min-width:215px}.logo-mark{width:48px;height:48px;border-radius:50%;background:#ffc400;color:#111;display:grid;place-items:center;font-size:29px;font-weight:900;margin-right:9px}.logo-text{display:flex;flex-direction:column;align-items:flex-start;line-height:.9}.logo-text strong{font-size:42px;letter-spacing:1px}.logo-text small{font-size:11px;font-weight:800;letter-spacing:.8px;margin-left:3px}
.nav{display:flex;align-items:center;gap:26px;height:100%}.nav button{color:#fff;font-size:13px;font-weight:800;height:100%;position:relative;white-space:nowrap}.nav button.active,.nav button:hover{color:#ffc400}.nav button.active:after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:#ffc400}
.phone-top{margin-left:auto;display:flex;align-items:center;gap:10px}.phone-icon{width:42px;height:42px;border:3px solid #ffc400;border-radius:50%;display:grid;place-items:center;color:#ffc400;font-size:22px}.phone-top span:last-child{display:flex;flex-direction:column}.phone-top small{font-size:10px;color:#ddd}.phone-top strong{font-size:16px;white-space:nowrap;margin-top:3px}
.hero{height:435px;position:relative;overflow:hidden;background:#111}.hero>img{width:100%;height:100%;object-fit:cover}.hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.95) 0%,rgba(0,0,0,.82) 35%,rgba(0,0,0,.2) 70%,rgba(0,0,0,0) 100%)}
.hero-content{position:absolute;left:35px;top:43px;color:#fff}.eyebrow{color:#ffc400;font-size:15px;font-weight:800;margin:0 0 18px}.hero h1{font-size:55px;line-height:1.02;margin:0 0 12px;letter-spacing:-1px}.hero-text{font-size:15px;line-height:1.45;margin:0 0 20px}
.benefits{display:flex;gap:25px;margin-bottom:28px}.benefits div{display:flex;align-items:center;gap:9px}.benefits span{font-size:27px}.benefits b{font-size:11px;line-height:1.25}
.hero-actions{display:flex;gap:16px}.btn{height:52px;padding:0 22px;border-radius:5px;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:900}.btn-yellow{background:#ffc400;color:#111}.btn-dark{border:1px solid #fff;color:#fff;min-width:167px}.btn:hover{transform:translateY(-1px);filter:brightness(1.05)}
.info-strip{height:84px;background:#0b1013;color:#fff;display:grid;grid-template-columns:1fr 1fr 1fr;padding:0 50px}.info-strip button{color:#fff;display:grid;grid-template-columns:40px 1fr;grid-template-rows:auto auto;align-content:center;text-align:left;padding-left:13px;border-right:1px solid #ffffff25}.info-strip button:last-child{border-right:0}.info-strip span{grid-row:1/3;font-size:30px;color:#ffc400;align-self:center}.info-strip b{font-size:12px}.info-strip small{font-size:11px;line-height:1.4;color:#eee;margin-top:3px}
.section-white{background:#fff}.products{height:313px;padding:26px 28px 0;text-align:center}.products h2,.brands h2{font-size:21px;margin:0 0 7px}.products>p{font-size:12px;margin:0 0 23px;color:#333}
.product-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}.product-card{position:relative;height:92px;overflow:hidden;border:1px solid #d8dde1;border-radius:8px;padding:10px 10px 12px;background:#f7f8f9;display:grid;grid-template-columns:28px 1fr;grid-template-rows:1fr auto;align-items:start;gap:4px 7px;text-align:left;transition:.2s}.product-card:hover{transform:translateY(-3px);border-color:#c9a000;box-shadow:0 8px 18px #0002}.product-card>span{grid-row:1/3;width:28px;height:28px;display:grid;place-items:center;border-radius:6px;background:#111;color:#ffc400;font-size:9px;font-weight:900;font-variant-numeric:tabular-nums}.product-card b{align-self:center;font-size:9px;line-height:1.22}.product-card small{color:#65717b;font-size:8px;font-weight:800;font-variant-numeric:tabular-nums}.product-card:after{content:"";position:absolute;left:0;bottom:0;width:100%;height:3px;background:#ffc400;transform:scaleX(.22);transform-origin:left;transition:transform .2s}.product-card:hover:after{transform:scaleX(1)}.product-card:focus-visible{outline:3px solid #111;outline-offset:2px}
.brands{height:147px;padding:10px 35px 0;text-align:center}.brand-row{height:70px;border:1px solid #ddd;border-radius:8px;display:grid;grid-template-columns:repeat(7,1fr);align-items:center;margin-top:4px}.brand-row button{height:40px;border-right:1px solid #e5e5e5;font-size:18px}.brand-row button:last-child{border-right:0}.brand-row small{display:block;font-size:9px}.brand-row .italic{font-style:italic;font-size:26px}.stanley{background:#ffd21c;padding:5px 9px}.all-brands{background:#111;color:#fff;border-radius:4px;padding:9px 26px;font-size:11px;font-weight:800;margin-top:6px}
.service-strip{height:104px;background:#0a0f12;color:#fff;display:grid;grid-template-columns:repeat(4,1fr);padding:0 47px}.service-strip div{display:grid;grid-template-columns:45px 1fr;grid-template-rows:auto auto;align-content:center}.service-strip span{grid-row:1/3;font-size:31px;color:#ffc400}.service-strip b{font-size:12px}.service-strip small{font-size:10px;line-height:1.35;margin-top:4px}
.about-contact{height:261px;display:grid;grid-template-columns:1fr 320px 1fr;background:#fff}.about-copy,.contact-copy{padding:34px}.about-copy h2,.contact-copy h2{font-size:19px;margin:0 0 18px}.about-copy p{font-size:11px;line-height:1.65;color:#222;margin:0 0 21px}.btn-small{background:#ffc400;padding:10px 18px;font-size:11px;font-weight:900;border-radius:4px}.about-contact>img{width:100%;height:100%;object-fit:cover}.contact-copy{display:flex;flex-direction:column;gap:8px}.contact-copy a,.contact-copy button{font-size:11px;text-align:left}.socials{display:flex;gap:10px;margin-top:5px}.socials a{width:25px;height:25px;border-radius:50%;background:#111;color:#fff;display:grid;place-items:center;font-weight:900}
footer{height:102px;background:#0b1013;color:#fff;display:grid;grid-template-columns:220px 1fr;grid-template-rows:58px 30px;padding:9px 38px}.footer-logo{grid-row:1/3;color:#fff;display:grid;grid-template-columns:43px 1fr;grid-template-rows:30px 18px;align-content:center;text-align:left}.footer-logo span{grid-row:1/3;width:35px;height:35px;border-radius:50%;background:#ffc400;color:#111;display:grid;place-items:center}.footer-logo b{font-size:25px}.footer-logo small{font-size:8px}.footer-logo+nav{display:flex;align-items:center;justify-content:center;gap:18px}.footer-logo+nav button{color:#fff;font-size:10px;font-weight:800}.footer-logo+nav button:not(:last-child):after{content:" | ";margin-left:18px;color:#888}footer p{text-align:center;font-size:9px;color:#ddd;margin:0}
.floating-whatsapp{position:absolute;right:16px;bottom:56px;background:#19c63b;color:#fff;border-radius:28px;padding:10px 23px 10px 47px;font-size:12px;font-weight:800;line-height:1.25;box-shadow:0 5px 16px #0003}.floating-whatsapp span{position:absolute;left:14px;top:9px;font-size:28px}
.modal{position:absolute;inset:0;background:#0009;display:none;align-items:center;justify-content:center;z-index:50}.modal.show{display:flex}.modal-card{width:540px;max-height:760px;overflow:auto;background:#fff;border-radius:12px;padding:31px;position:relative;box-shadow:0 25px 60px #0007}.modal-card h3{font-size:25px;margin:0 0 17px}.modal-card p,.modal-card li{font-size:14px;line-height:1.6}.modal-close{position:absolute;right:15px;top:10px;font-size:32px}.modal-list{display:grid;grid-template-columns:1fr 1fr;gap:10px}.modal-list button{background:#f3f3f3;padding:13px;border-radius:7px;text-align:left;font-weight:700}.modal-list button:hover{background:#ffc400}

/* Header sağ taşma düzeltmesi */
.topbar{
  display:grid;
  grid-template-columns:220px minmax(0,1fr) 190px;
  align-items:center;
  column-gap:18px;
  padding:0 28px;
}
.logo{
  min-width:0;
  width:220px;
}
.nav{
  min-width:0;
  width:100%;
  justify-content:center;
  gap:21px;
}
.nav button{
  font-size:12px;
}
.phone-top{
  width:190px;
  min-width:190px;
  margin-left:0;
  justify-content:flex-end;
  overflow:visible;
}
.phone-top span:last-child{
  min-width:132px;
}
.phone-top strong{
  display:block;
  width:132px;
  font-size:15px;
  white-space:nowrap;
  overflow:visible;
}
.phone-top small{
  white-space:nowrap;
}

/* Yeni MTK logo görseli */
.logo-image-button{
  width:220px;
  min-width:220px;
  height:74px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  overflow:hidden;
}
.logo-image-button img{
  display:block;
  width:185px;
  height:58px;
  object-fit:contain;
  object-position:left center;
  border-radius:4px;
}
.footer-logo-image{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  padding:0;
}
.footer-logo-image img{
  display:block;
  width:145px;
  height:60px;
  object-fit:contain;
  object-position:left center;
  border-radius:4px;
}

/* Transparan logo için boyut güncellemesi */
.logo-image-button img{
  width:210px !important;
  height:72px !important;
  object-fit:contain;
}
.footer-logo-image img{
  width:170px !important;
  height:70px !important;
  object-fit:contain;
}


/* Logo görünürlüğü artırıldı */
.logo-image-button{
    position: relative !important;
    padding: 8px 12px !important;
    border-radius: 12px !important;
    background: rgba(255,255,255,0.05) !important;
    backdrop-filter: blur(4px);
}

.logo-image-button::before{
    content:"";
    position:absolute;
    inset:-10px;
    border-radius:16px;
    background: radial-gradient(circle,
        rgba(255,196,0,0.35) 0%,
        rgba(255,196,0,0.12) 45%,
        transparent 75%);
    z-index:-1;
}

.footer-logo-image{
    position: relative !important;
    padding: 6px 10px !important;
    border-radius: 10px !important;
    background: rgba(255,255,255,0.04) !important;
}

.footer-logo-image::before{
    content:"";
    position:absolute;
    inset:-8px;
    border-radius:14px;
    background: radial-gradient(circle,
        rgba(255,196,0,0.28) 0%,
        rgba(255,196,0,0.10) 45%,
        transparent 75%);
    z-index:-1;
}


/* Sarı logo bloğu */
.topbar{
    display:grid !important;
    grid-template-columns:260px 1fr 200px !important;
    padding:0 !important;
    overflow:hidden;
}

.logo-image-button{
    background:#ffc400 !important;
    height:90px !important;
    width:260px !important;
    min-width:260px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    border-radius:0 !important;
    padding:0 15px !important;
}

.logo-image-button::before{
    display:none !important;
}

.logo-image-button img{
    width:220px !important;
    height:72px !important;
    object-fit:contain !important;
}

.nav{
    padding-left:20px;
}

.phone-top{
    padding-right:20px;
}

.footer-logo-image::before{
    display:none !important;
}


/* Son header düzeni */
.topbar{
    display:grid !important;
    grid-template-columns:220px 1fr 180px !important;
    padding:0 !important;
}

.logo-image-button{
    width:220px !important;
    min-width:220px !important;
    height:90px !important;
    background:#ffc400 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
}

.logo-image-button img{
    width:185px !important;
    height:60px !important;
    object-fit:contain !important;
}

.nav{
    padding-left:15px !important;
    gap:18px !important;
}

.nav button{
    font-size:12px !important;
}

.phone-top{
    width:180px !important;
    min-width:180px !important;
    justify-content:flex-end !important;
    padding-right:12px !important;
}

.phone-top strong{
    font-size:14px !important;
}


/* Ürün kataloğu */
.catalog-overlay{
  position:absolute;
  inset:0;
  z-index:100;
  display:none;
  background:rgba(5,8,10,.92);
  padding:26px;
}
.catalog-overlay.show{display:block}
.catalog-shell{
  width:100%;
  height:100%;
  background:#f4f4f4;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 24px 80px rgba(0,0,0,.7);
  display:grid;
  grid-template-rows:105px 1fr;
}
.catalog-header{
  background:#0a0f12;
  color:#fff;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:20px 28px;
  border-bottom:4px solid #ffc400;
}
.catalog-kicker{
  color:#ffc400;
  font-size:10px;
  font-weight:900;
  letter-spacing:1px;
}
.catalog-header h2{
  margin:4px 0 3px;
  font-size:26px;
}
.catalog-header p{
  margin:0;
  font-size:11px;
  color:#d8d8d8;
}
.catalog-close{
  width:42px;
  height:42px;
  border-radius:50%;
  background:#ffc400;
  color:#111;
  font-size:29px;
  line-height:1;
  font-weight:900;
}
.catalog-body{
  min-height:0;
  display:grid;
  grid-template-columns:225px minmax(0,1fr);
}
.catalog-sidebar{
  background:#11171b;
  padding:15px 11px;
  overflow:auto;
}
.catalog-category{
  width:100%;
  color:#fff;
  background:transparent;
  border:1px solid rgba(255,255,255,.1);
  border-radius:7px;
  padding:11px 10px;
  margin-bottom:7px;
  text-align:left;
  font-size:11px;
  font-weight:800;
  line-height:1.25;
}
.catalog-category:hover,
.catalog-category.active{
  color:#111;
  background:#ffc400;
  border-color:#ffc400;
}
.catalog-view{
  min-width:0;
  min-height:0;
  display:grid;
  grid-template-rows:52px 38px 1fr;
  padding:14px;
  gap:8px;
}
.catalog-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.catalog-source-tabs{
  display:flex;
  gap:7px;
  flex-wrap:wrap;
}
.catalog-source-tab{
  background:#e0e0e0;
  color:#111;
  border-radius:5px;
  padding:9px 12px;
  font-size:10px;
  font-weight:900;
}
.catalog-source-tab.active{
  background:#111;
  color:#ffc400;
}
.catalog-open-pdf{
  background:#ffc400;
  color:#111;
  border-radius:5px;
  padding:9px 13px;
  font-size:10px;
  font-weight:900;
  white-space:nowrap;
}
.catalog-page-info{
  background:#fff;
  border:1px solid #ddd;
  border-radius:6px;
  padding:7px 11px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  font-size:11px;
}
.catalog-page-info span{
  color:#666;
  text-align:right;
}
.catalog-frame{
  width:100%;
  height:100%;
  min-height:0;
  border:1px solid #ccc;
  border-radius:7px;
  background:#fff;
}

.catalog-image-note{
  color:#555;
  font-size:10px;
  font-weight:700;
  text-align:right;
}
.catalog-gallery{
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  background:#d8d8d8;
  border:1px solid #c6c6c6;
  border-radius:7px;
  padding:12px;
  scroll-behavior:smooth;
}
.catalog-page-shot{
  display:block;
  width:min(100%, 920px);
  height:auto;
  margin:0 auto 14px;
  border-radius:5px;
  background:#fff;
  box-shadow:0 4px 16px rgba(0,0,0,.18);
}
.catalog-empty{
  background:#fff;
  padding:30px;
  border-radius:7px;
  text-align:center;
  font-size:13px;
}
.catalog-view{
  grid-template-rows:52px 38px 1fr !important;
}

.catalog-frame{width:100%;height:100%;min-height:0;border:1px solid #c7c7c7;border-radius:7px;background:#fff}
.catalog-open-pdf{background:#ffc400;color:#111;border-radius:5px;padding:9px 13px;font-size:10px;font-weight:900;white-space:nowrap}
.catalog-view{grid-template-rows:52px 38px 1fr!important}
.nav{gap:28px!important}.footer-logo+nav{gap:24px!important}

/* Katalog penceresi: ekran ölçeğinden bağımsız, okunabilir ve kaydırılabilir */
body.catalog-open{overflow:hidden!important}
body > .catalog-overlay{
  position:fixed!important;
  inset:0!important;
  width:100vw!important;
  height:100vh!important;
  padding:18px!important;
  z-index:99999!important;
  transform:none!important;
}
body > .catalog-overlay .catalog-shell{
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
}
body > .catalog-overlay .catalog-body{
  min-height:0!important;
  grid-template-columns:240px minmax(0,1fr)!important;
}
body > .catalog-overlay .catalog-view{
  min-height:0!important;
  overflow:hidden!important;
}
body > .catalog-overlay .catalog-frame{
  width:100%!important;
  height:100%!important;
  min-height:650px!important;
  overflow:auto!important;
}
body > .catalog-overlay .catalog-sidebar{
  overflow-y:auto!important;
}
@media (max-width:800px){
  body > .catalog-overlay{padding:0!important}
  body > .catalog-overlay .catalog-shell{border-radius:0!important}
  body > .catalog-overlay .catalog-body{grid-template-columns:1fr!important;grid-template-rows:auto 1fr!important}
  body > .catalog-overlay .catalog-sidebar{display:flex!important;gap:7px!important;overflow-x:auto!important;overflow-y:hidden!important;padding:10px!important}
  body > .catalog-overlay .catalog-category{min-width:155px!important;margin:0!important}
  body > .catalog-overlay .catalog-header{padding:14px 16px!important}
  body > .catalog-overlay .catalog-header p{display:none!important}
  body > .catalog-overlay .catalog-view{padding:8px!important}
}

footer nav,
.footer-nav{
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  width:100% !important;
  margin:0 auto !important;
}

.footer-bottom,
.footer-inner{
  text-align:center !important;
}

.phone-top .icon,
.phone-top i{
  background:#ffc400 !important;
  border-radius:50% !important;
  width:42px !important;
  height:42px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}


/* ---- Son hizalama ve telefon düzeltmeleri ---- */

/* Banner altındaki üç bilgi alanı eşit ve ortalı */
.info-strip{
  display:grid !important;
  grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  align-items:stretch !important;
  padding:0 34px !important;
}
.info-strip > button,
.info-strip > a{
  width:100% !important;
  min-width:0 !important;
  display:grid !important;
  grid-template-columns:38px minmax(0, 1fr) !important;
  grid-template-rows:auto auto !important;
  align-content:center !important;
  justify-content:center !important;
  padding:0 24px !important;
  text-align:left !important;
}
.info-strip > button span,
.info-strip > a span{
  grid-row:1 / 3 !important;
  align-self:center !important;
  justify-self:center !important;
  margin:0 !important;
}
.info-strip > button b,
.info-strip > button small,
.info-strip > a b,
.info-strip > a small{
  width:100% !important;
  max-width:215px !important;
}
.info-strip > button:nth-child(2),
.info-strip > a:nth-child(2){
  border-left:1px solid rgba(255,255,255,.13) !important;
}
.info-strip > button:nth-child(3),
.info-strip > a:nth-child(3){
  border-left:1px solid rgba(255,255,255,.13) !important;
}

/* Sağ üstte temiz telefon ikonu */
.phone-top{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:10px !important;
}
.phone-icon{
  width:38px !important;
  height:38px !important;
  min-width:38px !important;
  border:2px solid #ffc400 !important;
  border-radius:50% !important;
  background:transparent !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:8px !important;
}
.phone-icon svg{
  width:100% !important;
  height:100% !important;
  display:block !important;
  fill:#ffc400 !important;
}

/* Banner telefon butonu kesin tıklanabilir */
.hero-phone-button{
  position:relative !important;
  z-index:5 !important;
  pointer-events:auto !important;
  cursor:pointer !important;
}
.hero-actions{
  position:relative !important;
  z-index:6 !important;
  pointer-events:auto !important;
}

/* Footer menüsünü logodan bağımsız, gerçek merkeze al */
footer{
  position:relative !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  padding:10px 200px !important;
}
footer .footer-logo{
  position:absolute !important;
  left:38px !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  margin:0 !important;
}
footer nav{
  position:static !important;
  width:auto !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  margin:0 auto 8px !important;
  gap:22px !important;
}
footer p{
  width:100% !important;
  text-align:center !important;
  margin:0 !important;
}

.phone-top{
  cursor:pointer !important;
  pointer-events:auto !important;
  position:relative !important;
  z-index:20 !important;
}
.phone-top:hover strong,
.phone-top:hover small{
  color:#ffc400 !important;
}
.phone-top .phone-icon svg{
  fill:#ffc400 !important;
}

.phone-icon{
  color:#FFC400 !important;
  font-size:24px !important;
  width:auto !important;
  height:auto !important;
  border:none !important;
  background:none !important;
  padding:0 !important;
  min-width:auto !important;
}
.phone-icon svg{display:none !important;}


/* =========================================================
   MOBİL RESPONSIVE DÜZEN
   ========================================================= */
@media (max-width: 768px){

  html,
  body{
    width:100% !important;
    min-height:100% !important;
    height:auto !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    background:#0d1114 !important;
  }

  #viewport{
    width:100% !important;
    height:auto !important;
    min-height:100vh !important;
    display:block !important;
    overflow:visible !important;
    background:#0d1114 !important;
  }

  #canvas{
    width:100% !important;
    height:auto !important;
    min-height:100vh !important;
    transform:none !important;
    overflow:visible !important;
    box-shadow:none !important;
    background:#fff !important;
  }

  /* Header */
  .topbar{
    width:100% !important;
    height:auto !important;
    min-height:72px !important;
    display:grid !important;
    grid-template-columns:132px 1fr !important;
    grid-template-rows:auto auto !important;
    padding:0 !important;
    column-gap:0 !important;
    overflow:visible !important;
  }

  .logo-image-button{
    width:132px !important;
    min-width:132px !important;
    height:72px !important;
    padding:7px 10px !important;
    grid-column:1 !important;
    grid-row:1 !important;
  }

  .logo-image-button img{
    width:112px !important;
    height:56px !important;
  }

  .phone-top{
    width:auto !important;
    min-width:0 !important;
    height:72px !important;
    grid-column:2 !important;
    grid-row:1 !important;
    padding:0 14px !important;
    justify-content:flex-end !important;
    gap:8px !important;
  }

  .phone-top .phone-icon{
    font-size:21px !important;
  }

  .phone-top small{
    font-size:8px !important;
  }

  .phone-top strong{
    width:auto !important;
    min-width:0 !important;
    font-size:13px !important;
  }

  .nav{
    grid-column:1 / 3 !important;
    grid-row:2 !important;
    width:100% !important;
    min-height:48px !important;
    padding:0 10px !important;
    gap:0 !important;
    justify-content:space-around !important;
    overflow-x:auto !important;
    background:#11171b !important;
    border-top:1px solid rgba(255,255,255,.08) !important;
  }

  .nav button{
    min-width:max-content !important;
    height:48px !important;
    padding:0 9px !important;
    font-size:10px !important;
  }

  /* Hero */
  .hero{
    width:100% !important;
    height:560px !important;
  }

  .hero > img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center !important;
  }

  .hero-overlay{
    background:linear-gradient(
      180deg,
      rgba(0,0,0,.72) 0%,
      rgba(0,0,0,.58) 45%,
      rgba(0,0,0,.86) 100%
    ) !important;
  }

  .hero-content{
    left:0 !important;
    top:0 !important;
    width:100% !important;
    height:100% !important;
    padding:42px 22px 28px !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:flex-end !important;
  }

  .eyebrow{
    font-size:11px !important;
    margin-bottom:12px !important;
  }

  .hero h1{
    font-size:42px !important;
    line-height:1.02 !important;
    margin-bottom:13px !important;
  }

  .hero-text{
    font-size:13px !important;
    line-height:1.55 !important;
    margin-bottom:18px !important;
  }

  .hero-text br{
    display:none !important;
  }

  .benefits{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:9px !important;
    margin-bottom:20px !important;
  }

  .benefits div{
    gap:9px !important;
  }

  .benefits span{
    font-size:22px !important;
  }

  .benefits b{
    font-size:10px !important;
  }

  .hero-actions{
    width:100% !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:10px !important;
  }

  .hero-actions .btn{
    width:100% !important;
    min-width:0 !important;
    height:48px !important;
    font-size:12px !important;
  }

  /* Banner altı bilgi alanları */
  .info-strip{
    width:100% !important;
    height:auto !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    padding:0 !important;
  }

  .info-strip > button,
  .info-strip > a{
    min-height:82px !important;
    padding:16px 22px !important;
    border-right:0 !important;
    border-left:0 !important;
    border-bottom:1px solid rgba(255,255,255,.12) !important;
  }

  .info-strip > button:last-child,
  .info-strip > a:last-child{
    border-bottom:0 !important;
  }

  /* Ürün grupları */
  .products{
    width:100% !important;
    height:auto !important;
    padding:30px 16px 28px !important;
  }

  .products h2{
    font-size:24px !important;
  }

  .products > p{
    font-size:12px !important;
    line-height:1.5 !important;
    padding:0 8px !important;
  }

  .product-grid{
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:12px !important;
  }

  .product-card{
    height:132px !important;
    padding:13px 11px 14px !important;
    grid-template-columns:32px 1fr !important;
    gap:6px 8px !important;
  }

  .product-card > span{
    width:32px !important;
    height:32px !important;
  }

  .product-card b{
    font-size:10px !important;
  }

  /* Marka alanı sayfada kalsa da mobilde sade */
  .brands{
    width:100% !important;
    height:auto !important;
    padding:24px 14px 28px !important;
  }

  .brand-row{
    height:auto !important;
    grid-template-columns:repeat(2, 1fr) !important;
    gap:0 !important;
  }

  .brand-row button{
    min-height:58px !important;
    border-bottom:1px solid #e5e5e5 !important;
  }

  /* Hizmet avantajları */
  .service-strip{
    width:100% !important;
    height:auto !important;
    grid-template-columns:1fr 1fr !important;
    padding:12px 16px !important;
    gap:0 !important;
  }

  .service-strip div{
    min-height:94px !important;
    padding:14px 8px !important;
  }

  /* Hakkımızda / iletişim */
  .about-contact{
    width:100% !important;
    height:auto !important;
    display:grid !important;
    grid-template-columns:1fr !important;
  }

  .about-copy,
  .contact-copy{
    padding:28px 22px !important;
  }

  .about-contact > img{
    width:100% !important;
    height:260px !important;
    object-fit:cover !important;
  }

  .contact-copy a,
  .contact-copy button{
    font-size:12px !important;
    line-height:1.55 !important;
  }

  /* Footer */
  footer{
    width:100% !important;
    height:auto !important;
    min-height:190px !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    padding:24px 18px !important;
    gap:18px !important;
  }

  footer .footer-logo{
    position:static !important;
    transform:none !important;
    width:auto !important;
    height:auto !important;
  }

  .footer-logo-image img{
    width:150px !important;
    height:62px !important;
  }

  footer nav{
    width:100% !important;
    display:flex !important;
    flex-wrap:wrap !important;
    justify-content:center !important;
    gap:12px 18px !important;
    margin:0 !important;
  }

  footer nav button{
    font-size:10px !important;
  }

  footer p{
    font-size:9px !important;
    line-height:1.5 !important;
  }

  /* Sağ alttaki WhatsApp */
  .floating-whatsapp{
    position:fixed !important;
    right:12px !important;
    bottom:12px !important;
    z-index:120 !important;
    padding:9px 14px 9px 42px !important;
    font-size:10px !important;
  }

  .floating-whatsapp span{
    left:12px !important;
    top:8px !important;
    font-size:23px !important;
  }

  /* Katalog penceresi mobilde tam ekran */
  .catalog-overlay{
    position:fixed !important;
    inset:0 !important;
    padding:0 !important;
    z-index:999 !important;
  }

  .catalog-shell{
    width:100% !important;
    height:100vh !important;
    border-radius:0 !important;
    grid-template-rows:auto 1fr !important;
  }

  .catalog-header{
    padding:14px 16px !important;
  }

  .catalog-header h2{
    font-size:20px !important;
  }

  .catalog-header p{
    font-size:10px !important;
    line-height:1.4 !important;
  }

  .catalog-body{
    grid-template-columns:1fr !important;
    grid-template-rows:auto 1fr !important;
    overflow:hidden !important;
  }

  .catalog-sidebar{
    display:flex !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    gap:7px !important;
    padding:9px !important;
    white-space:nowrap !important;
  }

  .catalog-category{
    width:auto !important;
    min-width:max-content !important;
    margin:0 !important;
    padding:9px 11px !important;
    font-size:10px !important;
  }

  .catalog-view{
    min-height:0 !important;
    padding:9px !important;
    grid-template-rows:auto auto minmax(0,1fr) !important;
  }

  .catalog-toolbar{
    align-items:flex-start !important;
    flex-direction:column !important;
    gap:8px !important;
  }

  .catalog-source-tabs{
    width:100% !important;
    overflow-x:auto !important;
    flex-wrap:nowrap !important;
    padding-bottom:3px !important;
  }

  .catalog-source-tab{
    min-width:max-content !important;
  }

  .catalog-open-pdf{
    width:100% !important;
    text-align:center !important;
  }

  .catalog-page-info{
    align-items:flex-start !important;
    flex-direction:column !important;
    gap:3px !important;
  }

  .catalog-frame{
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
  }

  /* Modal */
  .modal{
    position:fixed !important;
    padding:16px !important;
  }

  .modal-card{
    width:100% !important;
    max-height:82vh !important;
    padding:25px 20px !important;
  }
}

@media (max-width: 420px){
  .topbar{
    grid-template-columns:118px 1fr !important;
  }

  .logo-image-button{
    width:118px !important;
    min-width:118px !important;
  }

  .logo-image-button img{
    width:100px !important;
  }

  .phone-top{
    padding:0 9px !important;
  }

  .phone-top strong{
    font-size:12px !important;
  }

  .hero{
    height:590px !important;
  }

  .hero h1{
    font-size:37px !important;
  }

  .product-grid{
    grid-template-columns:1fr 1fr !important;
    gap:9px !important;
  }

  .product-card{
    height:138px !important;
  }

  .service-strip{
    grid-template-columns:1fr !important;
  }
}
.contact-copy[data-action="contact"]{cursor:pointer}.contact-copy[data-action="contact"]:focus-visible{outline:3px solid #ffc400;outline-offset:-3px}.contact-copy span{font-size:11px}
.brands-modal-intro{margin-top:0}.brand-gallery{display:grid;gap:13px}.brand-gallery img{display:block;width:100%;border:1px solid #e2e5e7;border-radius:8px}
.contact-copy .contact-open-btn{align-self:flex-start;margin-top:5px;border:0;border-radius:4px;background:#ffc400;color:#101010;padding:10px 15px!important;font-size:10px!important;font-weight:900!important;letter-spacing:.02em;cursor:pointer;box-shadow:0 4px 10px #0002}.contact-copy .contact-open-btn:hover{background:#e9b500;transform:translateY(-1px)}.contact-copy .contact-open-btn:focus-visible{outline:3px solid #111;outline-offset:2px}
@media (max-width:768px){
  body > .catalog-overlay .catalog-view{grid-template-rows:auto auto auto!important;align-content:start!important}
  body > .catalog-overlay .catalog-frame{display:none!important}
  body > .catalog-overlay .catalog-page-info{min-height:86px!important;padding:15px!important;justify-content:center!important}
  body > .catalog-overlay .catalog-page-info strong{display:none!important}
  body > .catalog-overlay .catalog-page-info span{font-size:12px!important;line-height:1.45!important;text-align:left!important;color:#333!important}
}
.catalog-toolbar-hidden{display:none!important}.catalog-view:has(.catalog-cards:not([hidden])){grid-template-rows:38px minmax(0,1fr)!important}.catalog-cards{min-height:0;overflow-y:auto;padding:5px 1px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.catalog-card{background:#fff;border:1px solid #d9dcdf;border-radius:8px;padding:14px;display:grid;grid-template-columns:40px 1fr;gap:10px;align-items:start}.catalog-card-icon{width:38px;height:38px;border-radius:6px;background:#e83232;color:#fff;display:grid;place-items:center;font-size:9px;font-weight:900}.catalog-card h3{margin:0 0 4px;font-size:14px;line-height:1.2}.catalog-card p{margin:0;color:#687077;font-size:11px;line-height:1.4}.catalog-card a{grid-column:1 / -1;display:block;background:#ffc400;color:#111;border-radius:4px;padding:9px 11px;text-align:center;font-size:10px;font-weight:900}.catalog-card a:hover{background:#e9b500}@media(max-width:768px){.catalog-view:has(.catalog-cards:not([hidden])){grid-template-rows:48px minmax(0,1fr)!important}.catalog-cards{grid-template-columns:1fr;gap:9px}.catalog-card{padding:12px}.catalog-card h3{font-size:13px}.catalog-card p{font-size:10px}}

/* Tek katalog görünümü: kategori listesi sabit, PDF sağ panelde görünür. */
body > .catalog-overlay .catalog-view{
  grid-template-rows:42px 38px minmax(0,1fr)!important;
}
body > .catalog-overlay .catalog-frame{
  display:block!important;
  min-height:0!important;
}
@media (max-width:768px){
  body > .catalog-overlay .catalog-view{
    grid-template-rows:42px 38px minmax(0,1fr)!important;
    align-content:stretch!important;
  }
  body > .catalog-overlay .catalog-page-info{
    min-height:0!important;
    padding:7px 10px!important;
    flex-direction:row!important;
    align-items:center!important;
    justify-content:space-between!important;
  }
  body > .catalog-overlay .catalog-page-info strong{
    display:block!important;
  }
  body > .catalog-overlay .catalog-page-info span{
    font-size:10px!important;
    text-align:right!important;
  }
}