/* ================================================================
   İstanbul Arçelik Servisi — Global CSS v6
   ================================================================ */

/* ---------- RESET ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: 'Segoe UI', Arial, sans-serif; font-size: 14px; color: #333; background: #f5f5f5; line-height: 1.7; }
a { color: #c0392b; text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; display: block; }

/* ---------- MARKA RENKLERİ ---------- */
:root               { --brand:#c0392b; --brand2:#922b21; --dark:#1a1a2e; --r:10px; }
body.marka-bosch    { --brand:#c00000; --brand2:#900000; }
body.marka-profilo  { --brand:#e65100; --brand2:#bf360c; }
body.marka-siemens  { --brand:#009999; --brand2:#00838f; }
body.marka-altus    { --brand:#6a1b9a; --brand2:#4a148c; }
body.marka-beko     { --brand:#1428A0; --brand2:#0d1f7a; }

/* ---------- LAYOUT ---------- */
.w990 { max-width: 990px; }
.ort  { margin-left: auto; margin-right: auto; padding-left: 12px; padding-right: 12px; }
.fl   { float: left; }
.fr   { float: right; }
.cbot { clear: both; }

/* ================================================================
   HEADER
   ================================================================ */
.ust002 { background:#fff; box-shadow:0 2px 8px rgba(0,0,0,.10); position:sticky; top:0; z-index:1000; }
.gri2   { background:#fff; border-bottom:1px solid #eee; }
.gri2 .w990 { display:flex; align-items:center; justify-content:space-between; min-height:52px; padding:3px 12px; gap:12px; }

.logo img { height:46px; width:auto; }

/* Kayan şerit */
.top-bar { flex:1; overflow:hidden; background:linear-gradient(90deg,var(--brand),var(--brand2)); border-radius:20px; height:28px; display:flex; align-items:center; margin:0 12px; }
.marquee { display:flex; overflow:hidden; width:100%; }
.marquee span { display:inline-block; white-space:nowrap; animation:scrollLeft 30s linear infinite; color:#fff; font-size:12.5px; font-weight:600; padding:0 40px; }
.marquee span:nth-child(2) { animation-delay:-15s; }
@keyframes scrollLeft { from{transform:translateX(100%)} to{transform:translateX(-100%)} }

.usttelefon { flex-shrink:0; }
.usttelefon a.gritext2 { font-size:16px; font-weight:700; color:var(--brand); text-decoration:none; white-space:nowrap; }
.usttelefon a.gritext2:hover { color:var(--brand2); }

/* ================================================================
   NAV ÇUBUĞU
   ================================================================ */
.gri3 { background:var(--dark); }
.gri3 .w990 { display:flex; align-items:stretch; min-height:46px; position:relative; }

.mobilmenuicon { display:none; flex-direction:column; justify-content:space-between; width:22px; height:16px; cursor:pointer; margin:auto 14px; }
.mobilmenuicon span { display:block; height:2px; background:#fff; border-radius:2px; }

.gri7lnk { display:flex; align-items:stretch; flex-wrap:wrap; }
.gri7lnk > a, .gri7lnk .dropbtn {
  display:flex; align-items:center; padding:0 15px; color:#fff;
  font-size:13px; font-weight:600; text-decoration:none; white-space:nowrap;
  border-right:1px solid rgba(255,255,255,.08); transition:background .2s;
  cursor:pointer; background:none; border-top:none; border-bottom:none; border-left:none;
}
.gri7lnk > a:hover, .gri7lnk .dropbtn:hover { background:var(--brand); color:#fff; text-decoration:none; }
.gri3lnk a { display:flex; align-items:center; color:#fff; font-size:13.5px; font-weight:700; padding:0 16px; text-decoration:none; background:var(--brand); transition:background .2s; }
.gri3lnk a:hover { background:var(--brand2); text-decoration:none; }

/* ================================================================
   MEGA MENÜ (Servis Bölgelerimiz)
   ================================================================ */
.dropdown { position:relative; display:flex; align-items:stretch; }

.dropdown-content {
  display:none; position:absolute; top:100%; left:0;
  background:#fff; width:700px; z-index:2000;
  border-top:3px solid var(--brand);
  border-radius:0 0 10px 10px;
  box-shadow:0 12px 40px rgba(0,0,0,.20);
  overflow:hidden;
}
.dropdown:hover .dropdown-content,
.dropdown-content.show { display:block; }

/* İç grid: sol kategori + sağ panel */
.mega-inner { display:grid; grid-template-columns:190px 1fr; min-height:280px; }

.mega-cats { background:var(--dark); padding:6px 0; }
.mega-cat-btn {
  display:block; width:100%; padding:11px 16px;
  color:#bbb; font-size:12.5px; font-weight:600;
  background:none; border:none; border-left:3px solid transparent;
  text-align:left; cursor:pointer; transition:.15s;
}
.mega-cat-btn:hover, .mega-cat-btn.active { color:#fff; background:rgba(255,255,255,.07); border-left-color:var(--brand); }

.mega-panels { padding:14px 18px; background:#fff; }
.mega-panel { display:none; }
.mega-panel.active { display:block; }
.mega-panel h4 { font-size:11px; font-weight:700; color:#999; letter-spacing:1px; text-transform:uppercase; margin:0 0 8px; border-bottom:1px solid #eee; padding-bottom:5px; }
.mega-links { display:grid; grid-template-columns:repeat(3,1fr); gap:2px 10px; }
.mega-links a { color:#333; font-size:12.5px; padding:5px 8px; border-radius:5px; text-decoration:none; transition:.15s; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mega-links a:hover { background:#fef2f2; color:var(--brand); text-decoration:none; }

.mega-footer { border-top:1px solid #eee; padding:10px 18px; background:#fafafa; display:flex; gap:7px; flex-wrap:wrap; }
.mega-footer a { font-size:12px; color:#666; background:#fff; border:1px solid #ddd; border-radius:14px; padding:4px 12px; text-decoration:none; transition:.15s; }
.mega-footer a:hover { background:var(--brand); color:#fff; border-color:var(--brand); text-decoration:none; }

/* ================================================================
   YÜZEN ÇAĞRI
   ================================================================ */
#araicon { position:fixed; bottom:22px; right:22px; z-index:9999; }
.araiconno { display:flex; align-items:center; gap:8px; background:var(--brand); color:#fff!important; border-radius:30px; padding:13px 20px; font-size:14px; font-weight:700; text-decoration:none!important; box-shadow:0 4px 18px rgba(0,0,0,.35); animation:pulse 2.5s infinite; }
.araiconno:hover { background:var(--brand2); }
@keyframes pulse { 0%,100%{box-shadow:0 4px 18px rgba(0,0,0,.30)} 50%{box-shadow:0 6px 28px rgba(0,0,0,.50)} }

/* ================================================================
   FOOTER
   ================================================================ */
.yok162 { height:14px; background:#f0f0f0; }
.gri5   { height:36px; }
.gri6   { background:var(--dark); padding:22px 0; }
.gri6 .w990 { display:flex; flex-wrap:wrap; align-items:center; gap:5px 12px; }
.aktmenu { display:flex; flex-wrap:wrap; gap:5px; }
a.altlink { color:#aaa; font-size:12.5px; text-decoration:none; transition:color .2s; }
a.altlink:hover { color:#fff; }
.altsosyal { width:24px; height:24px; display:inline-block; }
.fr.copy { display:flex; align-items:center; gap:6px; margin-left:auto; }

/* ================================================================
   GLOBAL BAŞLIKLAR — tüm h1/h2/h3 kırmızı
   ================================================================ */
h2 { color:var(--brand); }
h3 { color:var(--brand); }

/* ================================================================
   H1
   ================================================================ */
h1.alth1, h1.arcelikih1, h1.bekoh1, h1.boschh1, h1.siemensh1, h1.profiloh1, h1.altush1, h1.mieleh1 { font-size:22px; font-weight:800; color:var(--brand); line-height:1.3; padding:16px 0 8px; margin-bottom:6px; border-bottom:2px solid var(--brand); }
h1.alth1 br, h1.alth1 .transformm, h1.alth1 .alth1p, h1.alth1 .alth1resim1 { display:none; }

/* ================================================================
   MAKALELERİN İÇERİĞİ — sade, spam yok
   ================================================================ */
.ortaarcelik2 { background:#fff; border-radius:var(--r); padding:24px; box-shadow:0 2px 12px rgba(0,0,0,.07); margin-top:14px; }
.padtop { padding-top:4px; }
.texalcent { text-align:left!important; }

.ortaarcelik2 h2 { font-size:16px; font-weight:700; color:var(--brand); margin:18px 0 8px; padding-bottom:5px; border-bottom:1px solid var(--brand); }
.ortaarcelik2 h3 { font-size:14px; font-weight:600; color:var(--brand); margin:12px 0 5px; }
.ortaarcelik2 p  { font-size:13.5px; color:#444; line-height:1.85; margin:0 0 11px; }
.ortaarcelik2 b, .ortaarcelik2 strong { color:var(--dark); }
.ortaarcelik2 hr { border:none; border-top:1px solid #eee; margin:18px 0; }

/* ================================================================
   HİZMET KUTULARI
   ================================================================ */
.iciOrt.padtop { padding-top:6px; }
.row { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:8px; }

/* === YENİ KART TASARIMI === */
.hangimarka {
  flex:1; min-width:160px;
  position:relative; overflow:hidden;
  background:#fff; border:1.5px solid #e8eaf0; border-radius:14px;
  text-align:center; transition:.25s; min-height:240px;
  box-shadow:0 3px 14px rgba(0,0,0,.09);
  display:flex; flex-direction:column;
  padding:0; background-image:none !important;
}
.hangimarka::before {
  content:'';
  display:block;
  width:100%; height:170px;
  background-repeat:no-repeat;
  background-position:center center;
  background-size:cover;
  background-color:#f8f9fc;
  border-bottom:1px solid #eee;
  flex-shrink:0;
}
.hangimarka01::before { background-image:url('../images/buzdolabi.jpg'); }
.hangimarka02::before { background-image:url('../images/camasirmakinesi.jpg'); }
.hangimarka03::before { background-image:url('../images/bulasikmakinesi.jpg'); }
.hangimarka04::before { background-image:url('../images/kurutmamakinesi.jpg'); }
.hangimarka05::before { background-image:url('../images/televizyon.jpg'); }
.hangimarka06::before { background-image:url('../images/firin.jpg'); }
.hangimarka07::before { background-image:url('../images/ocak.jpg'); }
.hangimarka08::before { background-image:url('../images/klima.jpg'); }
.hangimarka09::before { background-image:url('../images/telve.jpg'); }

.hangimarka a {
  color:var(--dark); text-decoration:none;
  display:flex; flex-direction:column; flex:1;
  padding:10px 10px 12px; gap:8px;
}
.hangimarka a span.hm-title {
  font-size:12.5px; font-weight:700; color:var(--dark); line-height:1.3;
}
.hangimarka a span.hm-btn {
  display:inline-block;
  background:var(--brand); color:#fff;
  font-size:11px; font-weight:700;
  padding:5px 10px; border-radius:20px;
  margin-top:auto;
  transition:background .2s;
}
.hangimarka:hover { border-color:var(--brand); box-shadow:0 6px 20px rgba(192,57,43,.15); }
.hangimarka:hover a span.hm-btn { background:var(--brand2); }
.hangimarka:hover a span.hm-title { color:var(--brand); }



/* ================================================================
   BÖLGE LİNKLERİ
   ================================================================ */
.altBolgeFleft { display:inline-block; margin:3px; }
.altBolgeFleft a { display:inline-block; background:#f5f7ff; border:1px solid #d4dcf7; border-radius:20px; padding:5px 13px; font-size:12.5px; color:#1a3c7a; text-decoration:none; transition:.2s; }
.altBolgeFleft a:hover { background:var(--brand); color:#fff; border-color:var(--brand); text-decoration:none; }

/* ================================================================
   MOBİL
   ================================================================ */
@media (max-width:768px) {
  .logo img { height:44px; }
  .top-bar  { display:flex; height:30px; margin:0 6px; overflow:hidden; }
  .marquee span { font-size:11px; padding:0 20px; animation-duration:20s; }
  .usttelefon a.gritext2 { font-size:15px; }
  .mobilmenuicon { display:flex; width:28px; height:20px; margin:auto 16px; }
  .gri3 .w990 { flex-direction:column; align-items:flex-start; min-height:auto; }
  .fl,.fr { float:none; }
  .gri7lnk { display:none; flex-direction:column; width:100%; background:var(--dark); border-top:1px solid rgba(255,255,255,.08); }
  .gri7lnk.mobile-open { display:flex; }
  .gri7lnk > a, .gri7lnk .dropbtn { padding:16px 20px; border-right:none; border-bottom:1px solid rgba(255,255,255,.06); width:100%; font-size:15px; font-weight:700; }
  .dropdown { flex-direction:column; position:static; }
  .dropdown-content { position:static; display:none; width:100%; box-shadow:none; border-top:none; border-radius:0; background:#111122; }
  .dropdown-content.show { display:block; }
  .mega-inner { grid-template-columns:1fr; }
  .mega-cats  { display:none; }
  .mega-panel { display:block!important; }
  .mega-links { grid-template-columns:1fr 1fr; }
  .mega-panels { padding:10px 14px; background:#111122; }
  .mega-links a { color:#ccc; }
  .mega-links a:hover { background:rgba(255,255,255,.08); color:#fff; text-decoration:none; }
  .mega-panel h4 { color:#aaa; border-color:rgba(255,255,255,.1); }
  .mega-footer { display:none; }
  .gri3lnk { display:none; }
  .ortaarcelik2 { padding:16px; }
  h1.alth1, h1.arcelikih1, h1.bekoh1, h1.boschh1, h1.siemensh1, h1.profiloh1, h1.altush1, h1.mieleh1 { font-size:26px; padding:14px 0 10px; margin-bottom:10px; border-bottom-width:3px; }
  .hangimarka { min-width:calc(50% - 4px); min-height:220px; }
  .hangimarka::before { height:150px; }
  .hangimarka a span.hm-title { font-size:12px; }
  .hangimarka a span.hm-btn { font-size:11px; padding:5px 9px; }
  .fr.copy { margin-left:0; }
}
@media (max-width:480px) {
  .mega-links { grid-template-columns:1fr; }
  .gri6 .w990 { flex-direction:column; align-items:flex-start; }
  .hangimarka { min-width:calc(50% - 4px); min-height:200px; }
  .hangimarka::before { height:135px; }
  h1.alth1, h1.arcelikih1, h1.bekoh1, h1.boschh1, h1.siemensh1, h1.profiloh1, h1.altush1, h1.mieleh1 { font-size:24px; }
}

body.marka-arcelik { --brand:#c0392b; --brand2:#922b21; }

/* ================================================================
   SVG BANNER — MOBİL RESPONSIVE
   ================================================================ */
@media (max-width:768px) {
  svg.svg-banner {
    height: 130px !important;
  }
}
@media (max-width:480px) {
  svg.svg-banner {
    height: 150px !important;
  }
}