/* ================================================================
   Servisleri Online — Global CSS v7
   ================================================================ */

/* ---------- 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: #8b0000; text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; display: block; }

/* ---------- MARKA RENKLERİ ---------- */
:root               { --brand:#8b0000; --brand2:#5c0000; --dark:#1a1a2e; --r:10px; }
body.marka-bosch    { --brand:#8b0000; --brand2:#5c0000; }
body.marka-profilo  { --brand:#8b0000; --brand2:#5c0000; }
body.marka-siemens  { --brand:#8b0000; --brand2:#5c0000; }
body.marka-altus    { --brand:#8b0000; --brand2:#5c0000; }
body.marka-beko     { --brand:#8b0000; --brand2:#5c0000; }

/* ---------- 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 — TEMİZ, YAZICILAR ÇAKIŞMAZ */
.top-bar {
  flex:1; min-width:0;
  overflow:hidden;
  background:linear-gradient(90deg,var(--brand),var(--brand2));
  border-radius:20px; height:34px;
  display:flex; align-items:center;
  margin:0 12px;
}
.marquee {
  overflow:hidden;
  width:100%;
  height:100%;
  position:relative;
  display:flex;
  align-items:center;
}
.marquee span {
  position:absolute;
  white-space:nowrap;
  color:#fff;
  font-size:13px;
  font-weight:700;
  letter-spacing:.4px;
  will-change:transform;
  animation:seritKay 25s linear infinite;
}
.marquee span:nth-child(2) {
  animation-delay:-12.5s;
}
@keyframes seritKay {
  0%   { transform:translateX(100vw); }
  100% { 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Ü
   ================================================================ */
.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; }
.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:#fff5f5; 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 — KOYU KIRMIZI
   ================================================================ */
h1, h2, h3, h4, h5, h6 {
  color: #8b0000;
  font-weight: 800;
}
/* Mega menü h4 - navigasyon, koyu kırmızı yapma */
.mega-panel h4 { color:#999 !important; font-weight:700; }

/* ================================================================
   H1 — ANA BAŞLIK
   ================================================================ */
h1.alth1, h1.arcelikih1, h1.bekoh1, h1.boschh1, h1.siemensh1, h1.profiloh1, h1.altush1, h1.mieleh1 {
  font-size:22px; font-weight:800; color:#8b0000;
  line-height:1.3; padding:16px 0 8px; margin-bottom:6px;
  border-bottom:3px solid #8b0000;
}
h1.alth1 br, h1.alth1 .transformm, h1.alth1 .alth1p, h1.alth1 .alth1resim1 { display:none; }

/* ================================================================
   MAKALE + GÖRSEL ALAN
   ================================================================ */
.ortaarcelik2 {
  background:#fff; border-radius:var(--r);
  padding:24px; box-shadow:0 2px 12px rgba(0,0,0,.07);
  margin-top:14px;
  display:flex; flex-direction:column;
}
.padtop { padding-top:4px; }
.texalcent { text-align:left!important; }

/* Kartlar önce, makale metni altında */
.ortaarcelik2 .padtop.texalcent {
  order:3; margin-top:20px; padding-top:18px;
  border-top:2px solid #f0f0f0;
}
.ortaarcelik2 hr { order:2; display:none; }
.ortaarcelik2 > h2:first-of-type,
.ortaarcelik2 > h2:nth-of-type(1) { order:0; }
.ortaarcelik2 h3 { order:0; }
.ortaarcelik2 .iciOrt { order:1; }
.ortaarcelik2 hr[size="1"] { display:none; }

.ortaarcelik2 h2 {
  font-size:17px; font-weight:800; color:#8b0000;
  margin:18px 0 8px; padding-bottom:6px;
  border-bottom:2px solid #8b0000;
}
.ortaarcelik2 h3 {
  font-size:15px; font-weight:700; color:#8b0000;
  margin:14px 0 6px;
}
.ortaarcelik2 p  { font-size:13.5px; color:#444; line-height:1.85; margin:0 0 11px; }
.ortaarcelik2 b, .ortaarcelik2 strong { color:#8b0000; }
.ortaarcelik2 hr { border:none; border-top:1px solid #eee; margin:18px 0; }

/* ================================================================
   HİZMET KARTLARI — GÖRSEL ÖN PLANDA
   ================================================================ */
.iciOrt.padtop { padding-top:6px; }
.row { display:flex; flex-wrap:wrap; gap:14px; margin-bottom:14px; }

.hangimarka {
  flex:1; min-width:180px;
  position:relative; overflow:hidden;
  background:#fff; border:2px solid #eee; border-radius:16px;
  text-align:center; transition:.3s cubic-bezier(.25,.8,.25,1);
  min-height:300px;
  box-shadow:0 4px 18px rgba(0,0,0,.07);
  display:flex; flex-direction:column;
  padding:0; background-image:none !important;
}
/* Resim — büyük, ön planda */
.hangimarka::before {
  content:'';
  display:block;
  width:100%; height:220px;
  background-repeat:no-repeat;
  background-position:center center;
  background-size:cover;
  background-color:#f5f5f5;
  flex-shrink:0;
  transition:transform .45s ease;
}
.hangimarka:hover::before { transform:scale(1.07); }

.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'); }

/* Metin — resmin hemen altında */
.hangimarka a {
  color:#8b0000; text-decoration:none;
  display:flex; flex-direction:column; flex:1;
  padding:14px 12px 14px; gap:10px;
  background:#fff;
  border-top:3px solid transparent;
  transition:border-color .25s;
}
.hangimarka:hover a { border-top-color:#8b0000; }

.hangimarka a span.hm-title {
  font-size:13.5px; font-weight:800; color:#8b0000; line-height:1.4;
}
.hangimarka a span.hm-btn {
  display:inline-block;
  background:#8b0000; color:#fff;
  font-size:12px; font-weight:700;
  padding:8px 18px; border-radius:25px;
  margin-top:auto; align-self:center;
  transition:background .2s, transform .2s;
  box-shadow:0 2px 8px rgba(139,0,0,.3);
}
.hangimarka:hover {
  border-color:#8b0000;
  box-shadow:0 12px 36px rgba(139,0,0,.2);
  transform:translateY(-4px);
}
.hangimarka:hover a span.hm-btn {
  background:#5c0000;
  transform:scale(1.06);
}
.hangimarka:hover a span.hm-title { color:#5c0000; }

/* ================================================================
   BÖLGE LİNKLERİ
   ================================================================ */
.altBolgeFleft { display:inline-block; margin:3px; }
.altBolgeFleft a { display:inline-block; background:#fff5f5; border:1px solid #f0c0c0; border-radius:20px; padding:5px 13px; font-size:12.5px; color:#8b0000; text-decoration:none; transition:.2s; font-weight:600; }
.altBolgeFleft a:hover { background:#8b0000; color:#fff; border-color:#8b0000; text-decoration:none; }

/* ================================================================
   MOBİL — okunabilirlik + şerit
   ================================================================ */
@media (max-width:768px) {
  .logo img { height:44px; }

  /* ── Kayan şerit ── */
  .top-bar  { height:34px; margin:0 8px; border-radius:17px; }
  .marquee span { font-size:12px; animation-duration:20s; letter-spacing:.3px; }

  .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; font-size:13.5px; padding:7px 10px; }
  .mega-links a:hover { background:rgba(255,255,255,.08); color:#fff; }
  .mega-panel h4 { color:#aaa !important; border-color:rgba(255,255,255,.1); }
  .mega-footer { display:none; }
  .gri3lnk { display:none; }

  /* ── Yazı okunabilirliği ── */
  body { font-size:15.5px; line-height:1.8; }
  .ortaarcelik2 { padding:18px 15px; }

  h1.alth1, h1.arcelikih1, h1.bekoh1, h1.boschh1, h1.siemensh1, h1.profiloh1, h1.altush1, h1.mieleh1 {
    font-size:22px; line-height:1.35; padding:14px 0 10px; margin-bottom:10px; border-bottom-width:3px;
  }
  .ortaarcelik2 h2 { font-size:18px; margin:20px 0 10px; padding-bottom:7px; line-height:1.35; }
  .ortaarcelik2 h3 { font-size:16px; margin:15px 0 7px; line-height:1.4; }
  h2 { font-size:18px; }
  h3 { font-size:16px; }
  .ortaarcelik2 p { font-size:15px; line-height:1.9; margin:0 0 13px; }
  .ortaarcelik2 b, .ortaarcelik2 strong { font-size:15px; }

  /* ── Kartlar ── */
  .hangimarka { min-width:calc(50% - 7px); min-height:260px; }
  .hangimarka::before { height:185px; }
  .hangimarka a { padding:12px 10px; }
  .hangimarka a span.hm-title { font-size:13.5px; }
  .hangimarka a span.hm-btn { font-size:12px; padding:7px 12px; }

  /* ── Bölge linkleri ── */
  .altBolgeFleft a { font-size:13.5px; padding:7px 15px; }

  .fr.copy { margin-left:0; }
}

@media (max-width:480px) {
  .gri2 .w990 { gap:5px; padding:3px 8px; }
  .top-bar { margin:0 5px; height:32px; border-radius:15px; }
  .marquee span { font-size:11.5px; animation-duration:18s; }

  .mega-links { grid-template-columns:1fr; }
  .mega-links a { font-size:14px; padding:9px 12px; }
  .gri6 .w990 { flex-direction:column; align-items:flex-start; }

  body { font-size:15px; }
  h1.alth1, h1.arcelikih1, h1.bekoh1, h1.boschh1, h1.siemensh1, h1.profiloh1, h1.altush1, h1.mieleh1 {
    font-size:20px;
  }
  .ortaarcelik2 h2 { font-size:17px; }
  .ortaarcelik2 h3 { font-size:15.5px; }
  .ortaarcelik2 p { font-size:14.5px; line-height:1.85; }

  .hangimarka { min-width:calc(50% - 7px); min-height:230px; }
  .hangimarka::before { height:160px; }
  .hangimarka a { padding:10px 8px; gap:7px; }
  .hangimarka a span.hm-title { font-size:12.5px; }
  .hangimarka a span.hm-btn { font-size:11px; padding:6px 10px; }
}

body.marka-arcelik { --brand:#8b0000; --brand2:#5c0000; }