:root { --theme: #e30613; --header: #0a1a44; }
html[lang=ar] body, html[lang=ar] h1, html[lang=ar] h2, html[lang=ar] h3, html[lang=ar] h4, html[lang=ar] p, html[lang=ar] a, html[lang=ar] input, html[lang=ar] textarea, html[lang=ar] button { font-family: 'Cairo', sans-serif; }
.lang-switch a { margin-inline: 4px; opacity: .7 } .lang-switch a.on { opacity: 1; font-weight: 700 }
.mice-hero { padding: 120px 0 140px; max-width: 760px } .mice-hero h1 { color: #fff; font-size: clamp(34px, 6vw, 68px); line-height: 1.1 } .mice-hero p { color: #e8ecf8; font-size: 20px; margin: 24px 0 32px }
.section-padding { padding: 80px 0 } .bg-soft { background: #f5f7fb }
.mice-h2 { color: var(--header); font-size: clamp(28px, 4vw, 44px); margin-bottom: 16px } .mice-p { font-size: 18px; margin-bottom: 24px }
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px } .stat-grid div { background: var(--header); color: #fff; padding: 28px; border-radius: 12px } .stat-grid b { display: block; font-size: 40px; color: var(--theme) } .stat-grid span { opacity: .85 }
.card-mice { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 26px; height: 100%; transition: .25s; color: var(--text) } .card-mice:hover { transform: translateY(-4px); box-shadow: var(--box-shadow) }
.card-mice h3 { color: var(--header); font-size: 22px; margin-bottom: 10px } .card-mice > i { font-size: 30px; color: var(--theme); margin-bottom: 14px; display: block } .card-mice span { color: var(--theme); font-weight: 600; margin-top: auto; padding-top: 12px } .card-mice img { border-radius: 10px; width: 100% }
.ref-logo { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px; border: 1px solid var(--border); border-radius: 12px; background: #fff } .ref-logo img { max-height: 70px; width: auto; filter: grayscale(1); transition: .3s } .ref-logo:hover img { filter: none } .ref-logo small, .meta { color: var(--text) }
.quote { background: #fff; border-radius: 14px; padding: 28px; border-inline-start: 4px solid var(--theme); height: 100% } .quote footer small { display: block; color: var(--text) }
.mice-cta { padding: 90px 0 } .mice-cta h2, .mice-cta p { color: #fff } .mice-cta p { margin: 14px 0 28px }
.page-top { background: var(--header); color: #fff; padding: 210px 0 70px } .page-top h1 { color: #fff; font-size: clamp(30px, 5vw, 52px) } .page-top .meta { color: #cfd6ee }
.article { font-size: 18px; line-height: 1.8 } .article h2, .article h3 { color: var(--header); margin: 28px 0 12px }
.contact-form input, .contact-form textarea, .sub-form input { width: 100%; padding: 14px 18px; border: 1px solid var(--border); border-radius: 10px }
.sub-form { display: flex; gap: 8px } .sub-form button { background: var(--theme); color: #fff; border: 0; border-radius: 10px; padding: 0 18px } .hp { position: absolute; left: -9999px; height: 0; opacity: 0 }
.foot-h { color: #fff; font-size: 20px; margin-bottom: 18px } .foot-links { list-style: none; padding: 0 } .foot-links a, .footer-content p { color: #c9d0e6 } .foot-copy { border-top: 1px solid rgba(255, 255, 255, .15); margin-top: 40px; padding: 20px 0; color: #c9d0e6; text-align: center } .ok { color: #7ee2a8 }
.wa-float { position: fixed; bottom: 20px; inset-inline-end: 20px; width: 54px; height: 54px; border-radius: 50%; background: #25d366; color: #fff; display: grid; place-items: center; font-size: 28px; z-index: 99 }
@media (max-width: 1199px) { .header-top-wrapper { display: none !important } .section-padding { padding: 56px 0 } }
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 30px } .chips a { padding: 8px 18px; border: 1px solid var(--border); border-radius: 30px; color: var(--header); background: #fff } .chips a.on, .chips a:hover { background: var(--theme); border-color: var(--theme); color: #fff }
.card-mice img[src*="/refs/"] { object-fit: contain; max-height: 150px; padding: 8px }

/* --- ANKA: marka, header ve hero --- */
.logo img { height: 54px; width: auto; max-width: 250px; display: block }
.footer-logo img { height: 58px; width: auto; max-width: 260px; display: block; margin-bottom: 18px }
.hero-1 .hero-content h1 { font-size: clamp(34px, 5vw, 64px); line-height: 1.08; letter-spacing: 0; max-width: 900px }
.hero-1::before { background: linear-gradient(90deg, rgba(5,11,30,.88) 0%, rgba(5,11,30,.62) 55%, rgba(5,11,30,.30) 100%) }
.footer-section::before { background: linear-gradient(180deg, rgba(5,11,30,.55), rgba(5,11,30,.78)) }
.mice-hero { max-width: 860px }

/* --- ANKA: iç sayfa başlığı ve sidebar --- */
aside .card-mice, .col-lg-4 > .card-mice, .col-lg-5 > .card-mice { height: auto }
.article img[src*="/refs/"] { max-height: 220px; width: auto }
.article { overflow-wrap: anywhere }

/* --- ANKA: RTL sayaçlarda + işareti --- */
.stat-grid b[data-count] { direction: ltr; unicode-bidi: isolate; display: block; text-align: left }
html[dir=rtl] .stat-grid b[data-count] { text-align: right }

/* --- ANKA: hakkımızda görseli --- */
.about-img { width: 100%; height: auto; max-height: 380px; object-fit: cover; border-radius: 14px }

/* --- ANKA: form geri bildirimi --- */
.sub-form + .err, p.err { color: #ffb3b3; margin-top: 10px }
.alert-danger { background: #fdeaea; border: 1px solid #f5c2c7; color: #842029; padding: 14px 18px; border-radius: 10px }

/* --- ANKA: mobil menü --- */
@media (max-width: 1199px) {
  .logo img { height: 42px; max-width: 190px }
  .page-top { padding-top: 120px }
  .mobile-menu { position: absolute; top: 15px; right: 27px; width: 42px; height: 42px; z-index: 1000 }
  .mean-push { display: none !important }
  .mean-container .mean-bar { position: relative; float: none; width: 42px; height: 42px; min-height: 42px; background: transparent; padding: 0; z-index: 1000 }
  .mean-container a.meanmenu-reveal { display: block; position: absolute; top: 50%; left: 50% !important; right: auto !important; transform: translate(-50%, -50%); width: 24px; height: 24px; padding: 9px; text-indent: -9999em; z-index: 1002 }
  .mean-container a.meanmenu-reveal span { display: none }
  .mean-container a.meanmenu-reveal::before { content: ""; position: absolute; top: 50%; left: 50%; width: 22px; height: 2px; background: #0a1a44; transform: translate(-50%, -50%); box-shadow: 0 -7px 0 #0a1a44, 0 7px 0 #0a1a44; border-radius: 2px }
  .mean-container a.meanmenu-reveal::after { content: none }
  .mean-container a.meanmenu-reveal.meanclose::before { transform: translate(-50%, -50%) rotate(45deg); box-shadow: none }
  .mean-container a.meanmenu-reveal.meanclose::after { content: ""; position: absolute; top: 50%; left: 50%; width: 22px; height: 2px; background: #0a1a44; transform: translate(-50%, -50%) rotate(-45deg); border-radius: 2px }
  .mean-container .mean-nav { position: fixed; top: 108px; left: 12px; right: 12px; width: auto; float: none; margin: 0; background: #fff; border-radius: 16px; box-shadow: 0 24px 50px rgba(5,11,30,.18); overflow: hidden; z-index: 10001; max-height: 70vh; overflow-y: auto }
  .mean-container .mean-nav ul li a { padding: 13px 22px; color: #0a1a44; border-bottom: 1px solid #e8ebf3 !important; font-size: 15px; text-transform: uppercase }
  .mean-container .mean-nav ul li:last-child a { border-bottom: 0 !important }
  .mean-container .mean-nav ul li a.mean-expand { display: none }
}