:root{
  --bg:#ffffff; --fg:#0b1620; --muted:#6b7280; --line:#e7e7e7;
  --brand:#009ea6; --brand-weak:#e6f7f8;
}
.dark:root,.dark body{ --bg:#0e1116; --fg:#e5e7eb; --muted:#9aa3af; --line:#283241; --brand:#0fbfc8; --brand-weak:#0b3b3f; }
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font-family:"Cairo",system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,sans-serif}
.container{max-width:1200px;margin:0 auto;padding:0 16px}

/* ===== Header (classic thin bar) ===== */
.header{position:sticky;top:0;background:var(--bg);z-index:50;border-bottom:1px solid var(--line)}
.header .row{display:flex;align-items:center;justify-content:space-between;padding:10px 0;gap:12px}
.brand{display:flex;align-items:center;gap:8px}
.brand img{width:40px;height:40px;object-fit:contain}
.brand h1{font-size:20px;margin:0}
.nav{display:flex;gap:22px}
.nav a{color:var(--fg);text-decoration:none}
.top{display:flex;align-items:center;gap:8px}
.badge{background:var(--brand-weak);color:var(--fg);padding:6px 10px;border-radius:999px}
.icon-btn{border:1px solid var(--line);background:transparent;padding:6px 10px;border-radius:10px;cursor:pointer}
.lang-btn{min-width:40px}
.btn{background:var(--brand);color:#fff;border:none;padding:9px 12px;border-radius:12px;text-decoration:none}

/* shrink on scroll */
.header.shrink .row{padding:6px 0}

/* mobile drawer */
.hamburger{display:none}
.drawer{position:fixed;inset:0;display:none}
.drawer.open{display:block}
.drawer-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.35)}
.drawer-panel{position:absolute;right:0;top:0;width:300px;height:100%;background:var(--bg);border-left:1px solid var(--line);padding:16px;display:flex;flex-direction:column;gap:16px}
.m-nav a{display:block;padding:10px;border-bottom:1px dashed var(--line);color:var(--fg);text-decoration:none}

/* ===== Hero/Slider ===== */
.section{padding:30px 0}
.hero{display:grid;grid-template-columns:1.2fr .8fr;gap:18px;align-items:stretch}
.card{border:1px solid var(--line);border-radius:16px;padding:16px;background:var(--bg)}

.slider{position:relative !important;overflow:hidden;border-radius:16px;border:1px solid var(--line);min-height:420px}
.slide{position:absolute;inset:0;opacity:0;transition:opacity .6s ease}
.slide.active{opacity:1}
.slide img{width:100%;height:100%;object-fit:cover;display:block}
.caption{position:absolute;right:16px;top:16px;background:rgba(0,0,0,.45);color:#fff;padding:10px 12px;border-radius:10px;animation:capIn .5s ease}
@keyframes capIn{from{transform:translateX(30px);opacity:.2}to{transform:none;opacity:1}}
.controls{position:absolute;inset:0;display:flex;align-items:center;justify-content:space-between;padding:10px}
.controls button{background:rgba(0,0,0,.4);border:none;color:#fff;border-radius:10px;padding:8px 10px;cursor:pointer}

/* ===== Services + Testi ===== */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.s-item{display:flex;align-items:center;gap:10px;border:1px solid var(--line);padding:10px;border-radius:12px;cursor:pointer;background:var(--bg)}
.right{display:flex;flex-direction:column;gap:12px}
.t-wrap{border:1px solid var(--line);border-radius:16px;padding:18px;min-height:140px}
.t-dot{width:8px;height:8px;border-radius:999px;background:#cbd5e1;display:inline-block;margin:0 4px;cursor:pointer}
.t-dot.active{background:var(--brand)}

/* ===== Footer with brand color background ===== */
footer{background:var(--brand);color:#fff;margin-top:30px}
.footer-inner{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding:20px 0}
footer a{color:#fff}
.copy{background:rgba(0,0,0,.07);padding:10px 0}
/* ===== Responsive ===== */
@media(max-width:992px){
  .hamburger{display:inline-flex}
  .nav{display:none}
  .hero{grid-template-columns:1fr}
  .slider{min-height:260px}
  .grid{grid-template-columns:1fr}
}