:root{
  --brand:#a92b22;
  --brand2:#d04a3d;
  --teal:#1aa39a;
  --blue:#315d9c;
  --ink:#0f2340;
  --ink2:#253754;
  --paper:#fbfaf7;
  --paper2:#f3f7fb;
  --rose:#fff2ef;
  --mint:#effaf9;
  --line:#dfe7f0;
  --card:#ffffff;
  --max:1200px;
  --shadow:0 16px 50px rgba(20,38,69,.10);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  background:
   radial-gradient(circle at 10% 0%, rgba(208,74,61,.10), transparent 30%),
   radial-gradient(circle at 95% 20%, rgba(26,163,154,.12), transparent 22%),
   linear-gradient(180deg,var(--paper),#ffffff 38%, var(--paper2) 100%);
  color:var(--ink);
  line-height:1.65;
}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
.wrap{width:min(var(--max), calc(100% - 40px)); margin:auto}
header{
  position:sticky; top:0; z-index:60;
  background:rgba(255,255,255,.86);
  border-bottom:1px solid rgba(15,35,64,.08);
  backdrop-filter: blur(14px);
}
.nav{height:78px; display:flex; align-items:center; justify-content:space-between; gap:24px}
.brand img{height:40px; width:auto}
.navlinks{display:flex; gap:22px; align-items:center; color:var(--ink2); font-size:14px; font-weight:600}
.navlinks a{position:relative}
.navlinks a:after{content:"";position:absolute;left:0;bottom:-6px;width:0;height:2px;background:linear-gradient(90deg,var(--brand2),var(--teal));transition:.25s}
.navlinks a:hover:after{width:100%}
.lang{border:1px solid var(--line);border-radius:999px;background:#fff;padding:8px 12px;color:var(--ink);cursor:pointer;font-weight:700}
.hero{padding:88px 0 70px; position:relative; overflow:hidden}
.hero:before{content:""; position:absolute; right:-140px; top:-110px; width:420px; height:420px; border-radius:50%;
  background: radial-gradient(circle, rgba(208,74,61,.12), rgba(208,74,61,0) 66%);}
.hero:after{content:""; position:absolute; left:-120px; bottom:-120px; width:360px; height:360px; border-radius:50%;
  background: radial-gradient(circle, rgba(26,163,154,.10), rgba(26,163,154,0) 66%);}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr; gap:44px; align-items:center}
.kicker{letter-spacing:.16em;text-transform:uppercase;color:var(--teal);font-weight:800;font-size:12px}
h1{font-size:clamp(42px,6vw,74px);line-height:1.02;letter-spacing:-.04em;margin:14px 0 22px;max-width:900px}
h2{font-size:clamp(30px,4vw,48px);line-height:1.08;letter-spacing:-.03em;margin:10px 0 16px}
h3{font-size:22px;margin:8px 0 8px}
.lead{font-size:clamp(18px,2.2vw,24px);color:#485a73;max-width:840px}
.actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:13px 18px;border-radius:14px;border:1px solid var(--line);font-weight:800;font-size:14px;transition:.2s}
.btn.primary{background:linear-gradient(135deg,var(--brand),var(--brand2)); color:#fff; border-color:transparent; box-shadow:0 12px 30px rgba(169,43,34,.22)}
.btn.secondary{background:linear-gradient(135deg,var(--teal), #4eb7b0); color:#fff; border-color:transparent; box-shadow:0 12px 30px rgba(26,163,154,.2)}
.btn.ghost{background:#fff}
.btn:hover{transform:translateY(-1px)}
.hero-panel{
  background:linear-gradient(180deg, #ffffff, #f8fbff);
  border:1px solid var(--line);
  border-radius:28px;
  box-shadow:var(--shadow);
  padding:18px;
}
.hero-panel .screen{aspect-ratio:16/10; border-radius:22px; overflow:hidden; background:#fff}
.hero-panel .screen img{width:100%;height:100%;object-fit:cover}
.trustbar{display:flex; gap:12px; flex-wrap:wrap; margin-top:34px}
.pill{border:1px solid var(--line);background:rgba(255,255,255,.8); padding:10px 13px;border-radius:999px;font-size:13px;color:#44556e}
.section{padding:84px 0}
.section.soft{background:linear-gradient(180deg,#ffffff, #f7fbff)}
.section.rose{background:linear-gradient(180deg,#fff9f7,#fff3ef)}
.section.mint{background:linear-gradient(180deg,#f8fdfc,#effaf9)}
.section.blue{background:linear-gradient(180deg,#f7fbff,#eef5fe)}
.sub{max-width:760px;color:#5e7088;margin-bottom:34px}
.grid{display:grid;gap:22px}
.grid.three{grid-template-columns:repeat(3,1fr)}
.grid.two{grid-template-columns:repeat(2,1fr)}
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:24px;
  padding:24px;
  box-shadow:var(--shadow);
}
.card .eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:.14em;color:var(--teal);font-weight:800}
.card p{color:#586a82;margin:0}
.icon-dot{width:12px;height:12px;border-radius:50%;display:inline-block;background:linear-gradient(135deg,var(--brand2),var(--teal));margin-right:8px}
.case{padding:0;overflow:hidden}
.case .media{aspect-ratio:16/10;overflow:hidden;background:#f0f4f8}
.case .media img{width:100%;height:100%;object-fit:cover}
.case .body{padding:22px}
.accent-red{border-top:5px solid var(--brand2)}
.accent-teal{border-top:5px solid var(--teal)}
.accent-blue{border-top:5px solid var(--blue)}
.split{display:grid;grid-template-columns:1.05fr .95fr; gap:42px; align-items:center}
.timeline{display:grid;grid-template-columns:120px 1fr; gap:0 20px}
.timeline .yr{font-weight:800;color:var(--brand);padding:16px 0;border-top:1px solid var(--line)}
.timeline .ev{padding:16px 0;border-top:1px solid var(--line);color:#51647d}
.notice{border-left:4px solid var(--brand2);background:#fff8f6;padding:16px 18px;border-radius:12px;color:#586a82}
.quote-panel{
  background:linear-gradient(135deg,#fff2ef,#eef9f8);
  border:1px solid #efdcd8;border-radius:28px;padding:28px;box-shadow:var(--shadow)
}
.quote{font-size:28px;line-height:1.3;letter-spacing:-.02em;color:var(--ink)}
.statrow{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:24px}
.stat{background:#fff;border:1px solid var(--line);border-radius:18px;padding:16px;box-shadow:var(--shadow)}
.stat b{font-size:28px;display:block;color:var(--ink)}
.stat span{font-size:12px;color:#657690}
.media-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.media-strip img{width:100%;height:220px;object-fit:cover;border-radius:18px;border:1px solid var(--line);box-shadow:var(--shadow);cursor:pointer}
.badges{display:flex;gap:14px;flex-wrap:wrap;margin-top:18px}
.badges a{padding:10px 14px;border-radius:999px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);font-size:13px;font-weight:700;color:#4b5d76}
footer{padding:58px 0;border-top:1px solid var(--line);background:rgba(255,255,255,.7)}
.footergrid{display:grid;grid-template-columns:1.1fr .9fr;gap:40px}
.small{font-size:13px;color:#64758d}
.lang-tr{display:none}
body.tr .lang-en{display:none}
body.tr .lang-tr{display:block}
body.tr span.lang-tr, body.tr a.lang-tr, body.tr button.lang-tr{display:inline}
.modal{position:fixed;inset:0;background:rgba(9,18,33,.88);display:none;align-items:center;justify-content:center;z-index:100;padding:24px}
.modal.open{display:flex}
.modal img{max-width:95vw;max-height:90vh;border-radius:12px;box-shadow:0 18px 40px rgba(0,0,0,.4)}
.close{position:absolute;top:18px;right:22px;font-size:34px;color:white;cursor:pointer}
@media(max-width:950px){
  .navlinks{display:none}
  .hero-grid,.grid.three,.grid.two,.split,.footergrid,.statrow,.media-strip{grid-template-columns:1fr}
  .timeline{grid-template-columns:90px 1fr}
  .hero{padding-top:72px}
  .section{padding:64px 0}
  .media-strip img{height:260px}
}