:root{
  --g-500:#679c21;
  --g-600:#4f7d1a;
  --g-400:#7fbf2a;

  --bg-900:#0b1220;
  --bg-850:#0e1728;
  --bg-800:#101c30;

  --card: rgba(255,255,255,.06);
  --card2: rgba(255,255,255,.08);
  --line: rgba(255,255,255,.12);

  --text:#f4f7fb;
  --muted: rgba(244,247,251,.72);

  --shadow: 0 20px 60px rgba(0,0,0,.45);
  --shadow2: 0 10px 30px rgba(0,0,0,.35);

  --r-xl: 28px;
  --r-lg: 22px;
  --r-md: 16px;

  --ease: cubic-bezier(.2,.8,.2,1);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  font-family:"Manrope",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(1000px 700px at 15% 10%, rgba(127,191,42,.12), transparent 60%),
    radial-gradient(900px 600px at 85% 20%, rgba(103,156,33,.10), transparent 55%),
    radial-gradient(1200px 900px at 40% 110%, rgba(255,255,255,.05), transparent 60%),
    linear-gradient(180deg, var(--bg-900), var(--bg-850) 35%, var(--bg-800));
  overflow-x:hidden;
}

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; }
button, input, textarea{ font:inherit; }
.wrap{
  width:calc(100% - 80px);
  max-width:none;
  margin:0 auto;
}

@media (min-width:1900px){
  .wrap{
    width:calc(100% - 96px);
    max-width:1840px;
  }
}

@media (max-width:980px){
  .wrap{ width:calc(100% - 32px); }
}

.skipLink{
  position:absolute;
  left:-9999px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}

.skipLink:focus{
  left:12px;
  top:12px;
  width:auto;
  height:auto;
  padding:6px 9px;
  border-radius:10px;
  background:#fff;
  color:#111;
  z-index:5000;
  font-weight:900;
}

.topbar{
  position:fixed;
  top:14px;
  left:0;
  right:0;
  z-index:1000;
  pointer-events:none;
}

.topbar .wrap{ pointer-events:auto; }

.topbarInner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(16,28,48,.55);
  border:1px solid rgba(255,255,255,.10);
  backdrop-filter:blur(14px);
  box-shadow:var(--shadow2);
  transition:transform .25s var(--ease), background .25s var(--ease);
}

.topbarInner.isTop{
  background:rgba(16,28,48,.38);
}

.brand{
  display:flex;
  align-items:center;
  gap:9px;
  min-width:215px;
}

.logoBox{
  width:205px;
  height:86px;
  border-radius:16px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(12px);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.logoBox img{
  width:150%;
  height:150%;
  object-fit:contain;
  transform:translateY(1px);
}

nav{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  justify-content:center;
}

nav a{
  padding:8px 12px;
  border-radius:999px;
  border:1px solid transparent;
  background:transparent;
  color:rgba(244,247,251,.92);
  font-weight:800;
  font-size:13px;
  letter-spacing:.1px;
  cursor:pointer;
  transition:background .2s var(--ease), transform .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
  display:inline-flex;
  align-items:center;
  gap:8px;
}

nav a:hover,
nav a:focus-visible{
  transform:translateY(-1px);
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.10);
  color:#fff;
  outline:none;
}

nav a.active{
  background:rgba(103,156,33,.16);
  border-color:rgba(127,191,42,.32);
  color:#fff;
}

.actions{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:230px;
  justify-content:flex-end;
}

.pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  backdrop-filter:blur(12px);
  color:rgba(244,247,251,.92);
  font-weight:900;
  font-size:13px;
  transition:transform .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease);
  white-space:nowrap;
}

.pill:hover,
.pill:focus-visible{
  transform:translateY(-1px);
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.18);
  outline:none;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05);
  color:rgba(244,247,251,.95);
  font-weight:950;
  font-size:13px;
  cursor:pointer;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease);
  white-space:nowrap;
}

.btn:hover,
.btn:focus-visible{
  transform:translateY(-2px);
  border-color:rgba(255,255,255,.18);
  outline:none;
}

.btnPrimary{
  border:0;
  background:linear-gradient(180deg, var(--g-400), var(--g-600));
  box-shadow:0 14px 40px rgba(103,156,33,.28), inset 0 1px 0 rgba(255,255,255,.18);
  color:#fff;
}

.btnPrimary:hover,
.btnPrimary:focus-visible{
  box-shadow:0 18px 55px rgba(103,156,33,.34), inset 0 1px 0 rgba(255,255,255,.22);
}

.btnGhost{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.16);
}

.btnIcon{
  width:36px;
  height:36px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.16);
  font-weight:950;
}

.mobileBtn{ display:none; }

@media (max-width:980px){
  nav{ display:none; }
  .actions{ min-width:auto; }
  .brand{ min-width:auto; }
  .mobileBtn{ display:inline-flex; }
  .logoBox{ width:175px; height:58px; }
  .logoBox img{ width:145%; height:145%; }
  .pill{ display:none; }
}

.drawer{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.55);
  display:none;
  z-index:2000;
  padding:18px;
}

.drawer.open{ display:block; }

.drawerPanel{
  width:min(420px, 92vw);
  background:rgba(16,28,48,.96);
  border:1px solid rgba(255,255,255,.14);
  border-radius:22px;
  backdrop-filter:blur(14px);
  box-shadow:var(--shadow);
  padding:16px;
  margin-left:auto;
}

.drawerTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:10px;
}

.drawerTop b{ font-size:13px; }

.drawer a{
  display:flex;
  padding:12px 12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  margin-top:10px;
  font-weight:850;
}

.drawer a:hover,
.drawer a:focus-visible{
  background:rgba(103,156,33,.14);
  border-color:rgba(127,191,42,.25);
  outline:none;
}

.hero{
  position:relative;
  padding:112px 0 30px;
  min-height:510px;
  display:flex;
  align-items:center;
}

.heroBg{
  position:absolute;
  inset:0;
  background:url("../images/hero.jpg") center/cover no-repeat;
  opacity:.42;
  filter:saturate(.95) contrast(1.05);
}

.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 600px at 20% 25%, rgba(0,0,0,.30), rgba(0,0,0,.10) 60%),
    linear-gradient(90deg, rgba(0,0,0,.55), rgba(0,0,0,.18) 55%, rgba(0,0,0,.45)),
    linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.25), rgba(0,0,0,.68));
  backdrop-filter:blur(1px);
}

.heroGrid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1.12fr .88fr;
  gap:18px;
  align-items:start;
  padding-top:0;
}

.kicker{
  display:inline-flex;
  gap:10px;
  align-items:center;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid rgba(127,191,42,.26);
  background:rgba(103,156,33,.12);
  color:rgba(244,247,251,.92);
  font-weight:900;
  width:fit-content;
  margin-bottom:10px;
}

.kicker i{
  width:22px;
  height:22px;
  border-radius:10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:rgba(127,191,42,.18);
  border:1px solid rgba(127,191,42,.28);
  font-style:normal;
}

.heroTitle{
  margin:0 0 10px;
  font-size:clamp(32px, 3vw, 44px);
  line-height:1.02;
  letter-spacing:-1.2px;
  font-weight:950;
  background:linear-gradient(180deg, #ffffff, rgba(255,255,255,.78));
  background-clip:text;
  -webkit-background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
}

.heroTitle b{
  background:linear-gradient(180deg, var(--g-400), var(--g-600));
  background-clip:text;
  -webkit-background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
  font-weight:1000;
}

.heroSub{
  margin:0 0 18px;
  max-width:62ch;
  color:rgba(244,247,251,.86);
  font-size:clamp(13px, .9vw, 15px);
  line-height:1.6;
  font-weight:650;
}

.heroCtas{
  display:flex;
  gap:9px;
  flex-wrap:wrap;
  margin-top:10px;
}

.heroBadges{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:12px;
}

.badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:6px 8px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  backdrop-filter:blur(14px);
  color:rgba(244,247,251,.92);
  font-weight:850;
  font-size:12px;
}

.badge i{
  width:20px;
  height:20px;
  border-radius:10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:rgba(103,156,33,.14);
  border:1px solid rgba(127,191,42,.22);
  font-style:normal;
}

.heroCard,
.pCard,
.baSide,
.infoCard,
.formCard,
.legalCard,
.refCard{
  border-radius:var(--r-xl);
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(16px);
  box-shadow:var(--shadow2);
}

.heroCard{
  overflow:hidden;
  margin-top:0;
}

.heroCardTop{
  padding:10px 12px 8px;
  border-bottom:1px solid rgba(255,255,255,.10);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.heroCardTop b{
  font-size:12px;
  color:rgba(244,247,251,.92);
  letter-spacing:.2px;
}

.miniTag{
  padding:6px 8px;
  border-radius:999px;
  border:1px solid rgba(127,191,42,.26);
  background:rgba(103,156,33,.10);
  font-weight:950;
  color:rgba(244,247,251,.92);
  font-size:11px;
  white-space:nowrap;
}

.heroCardBody{
  padding:10px 12px 12px;
  display:grid;
  gap:10px;
}

.quickItem,
.contactItem{
  display:flex;
  align-items:flex-start;
  gap:9px;
  padding:7px;
  border-radius:11px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  transition:transform .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}

.quickItem:hover,
.quickItem:focus-visible,
.contactItem:hover,
.contactItem:focus-visible{
  transform:translateY(-2px);
  border-color:rgba(127,191,42,.22);
  background:rgba(255,255,255,.06);
  outline:none;
}

.qiIcon,
.ciIcon{
  width:28px;
  height:28px;
  border-radius:11px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(103,156,33,.14);
  border:1px solid rgba(127,191,42,.22);
  font-size:14px;
  flex-shrink:0;
}

.quickItem b,
.contactItem b{
  display:block;
  font-size:12px;
  font-weight:1000;
}

.quickItem span,
.contactItem small{
  display:block;
  color:var(--muted);
  font-size:11px;
  margin-top:2px;
  font-weight:750;
}

.divider{
  height:1px;
  background:rgba(255,255,255,.10);
  margin:4px 0;
}

.statsRow{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:10px;
}

.stat{
  padding:7px;
  border-radius:11px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  text-align:center;
}

.stat strong,
.mini strong{
  display:block;
  font-size:16px;
  letter-spacing:-0.3px;
  background:linear-gradient(180deg, var(--g-400), var(--g-600));
  background-clip:text;
  -webkit-background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
  font-weight:1000;
}

.stat small,
.mini small{
  display:block;
  color:var(--muted);
  font-weight:800;
  margin-top:4px;
  font-size:10px;
}

@media (max-width:980px){
  .hero{ min-height:760px; padding-top:108px; }
  .heroGrid{ grid-template-columns:1fr; }
}

@media (min-width:1500px){
  .hero{ min-height:640px; }
}

@media (min-width:1700px){
  .hero{ min-height:620px; }
}

.section{ padding:38px 0; }

.sectionHead{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
  margin-bottom:18px;
}

.sectionTitle{
  margin:0;
  font-size:clamp(20px, 1.8vw, 26px);
  letter-spacing:-0.6px;
  font-weight:950;
}

.sectionDesc{
  margin:0;
  max-width:56ch;
  color:var(--muted);
  font-weight:650;
  line-height:1.6;
  font-size:10px;
}

.sectionLine{
  height:1px;
  background:linear-gradient(90deg, rgba(127,191,42,.28), rgba(255,255,255,.10), rgba(127,191,42,.12));
  margin-top:10px;
}

.pCard{
  overflow:hidden;
  transition:transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}

.pCard:hover,
.pCard:focus-visible{
  transform:translateY(-8px);
  border-color:rgba(127,191,42,.22);
  box-shadow:0 26px 70px rgba(0,0,0,.50);
  outline:none;
}

.grid3{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:10px;
}

@media (min-width:1500px){
  .grid3{ grid-template-columns:repeat(4, 1fr); }
}

#servicesGrid{
  grid-template-columns:repeat(3, 1fr);
}

#projeler .sectionTitle{
  color:#fff;
  font-size:clamp(22px, 2vw, 30px);
}

#projectsGrid .serviceBody h3{
  color:#fff;
  font-size:13px;
}

#onceSonra{
  padding:26px 0;
}

#onceSonra .sectionTitle{
  font-size:clamp(26px, 2.2vw, 36px);
}

#onceSonra .sectionDesc{
  font-size:15px;
}

#onceSonra .baWrap{
  max-width:1180px;
  margin:0 auto;
  gap:10px;
}

#onceSonra .baSlider{
  min-height:230px;
}

#onceSonra .baSide{
  padding:10px;
  gap:7px;
}

#onceSonra .baSide h3{
  font-size:16px;
}

#onceSonra .baSide p{
  font-size:14px;
  line-height:1.45;
}

#onceSonra .mini{
  padding:5px;
}

#onceSonra .mini strong{
  font-size:18px;
}

#onceSonra .mini small{
  font-size:12px;
}

#onceSonra .btn{
  width:72% !important;
  justify-self:center;
  padding:6px 10px;
  font-size:13px;
  min-height:34px;
}

@media (max-width:1100px){
  .grid3,
  #servicesGrid{ grid-template-columns:repeat(2, 1fr); }
}

@media (max-width:680px){
  .grid3,
  #servicesGrid{ grid-template-columns:1fr; }
}

.serviceImg{
  height:140px;
  background-size:cover;
  background-position:center;
  position:relative;
  overflow:hidden;
  background-color:rgba(255,255,255,.05);
}

.serviceImg::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.58));
}

.serviceBody{
  padding:10px 10px 12px;
}

.serviceBody h3{
  margin:0 0 8px;
  font-size:13px;
  font-weight:950;
  letter-spacing:-0.2px;
}

.serviceBody p{
  margin:0 0 12px;
  color:var(--muted);
  font-weight:650;
  line-height:1.6;
  font-size:10px;
}

.linkRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:rgba(244,247,251,.92);
  font-weight:900;
  font-size:10px;
}

.linkRow em{
  font-style:normal;
  color:var(--g-400);
}

.baWrap{
  display:grid;
  grid-template-columns:.95fr 1.05fr;
  gap:18px;
  align-items:stretch;
}

@media (max-width:980px){
  .baWrap{ grid-template-columns:1fr; }
}

.baSlider{
  position:relative;
  overflow:hidden;
  border-radius:var(--r-xl);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:var(--shadow2);
  user-select:none;
  cursor:ew-resize;
  min-height:360px;
  background:rgba(255,255,255,.04);
}

.baSlider img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.baBefore{
  position:absolute;
  inset:0;
  width:50%;
  overflow:hidden;
  border-right:2px solid rgba(255,255,255,.75);
}

.baHandle{
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%);
  height:100%;
  width:4px;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
}

.baHandle span{
  background:linear-gradient(180deg, var(--g-400), var(--g-600));
  color:#fff;
  padding:10px 12px;
  border-radius:999px;
  font-weight:950;
  box-shadow:0 10px 28px rgba(0,0,0,.35);
}

.baSide{
  padding:16px;
  display:grid;
  gap:9px;
}

.baSide h3{
  margin:0;
  font-size:13px;
  font-weight:1000;
}

.baSide p{
  margin:0;
  color:var(--muted);
  font-weight:650;
  line-height:1.6;
}

.miniGrid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:10px;
  margin-top:6px;
}

.mini{
  border-radius:11px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  padding:10px;
  text-align:center;
}

.refs{
  overflow:hidden;
  position:relative;
}

.refsTrack{
  display:flex;
  gap:10px;
  transition:transform .6s var(--ease);
  will-change:transform;
}

.refCard{
  min-width:340px;
  padding:16px;
}

.stars{
  color:var(--g-400);
  font-size:14px;
  letter-spacing:2px;
  margin-bottom:10px;
}

.refCard p{
  margin:0 0 14px;
  color:rgba(244,247,251,.90);
  line-height:1.7;
  font-weight:650;
  font-size:10px;
}

.refUser b{
  display:block;
  font-weight:1000;
}

.refUser span{
  display:block;
  color:var(--muted);
  font-weight:750;
  font-size:10px;
  margin-top:2px;
}

.contactGrid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:18px;
}

@media (max-width:980px){
  .contactGrid{ grid-template-columns:1fr; }
}

.infoCard{
  padding:18px;
  display:grid;
  gap:9px;
}

.mapBox{
  border-radius:var(--r-xl);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:var(--shadow2);
  background:rgba(255,255,255,.04);
}

.mapBox iframe{
  width:100%;
  height:260px;
  border:0;
  display:block;
}

.formCard{
  padding:18px;
}

.formCard h3{
  margin:0 0 12px;
  font-weight:1000;
  letter-spacing:-0.2px;
}

.row2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

@media (max-width:980px){
  .row2{ grid-template-columns:1fr; }
}

label.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

input, textarea{
  width:100%;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  color:var(--text);
  padding:12px;
  outline:none;
  font-weight:700;
  transition:border-color .2s var(--ease), background .2s var(--ease);
}

input::placeholder,
textarea::placeholder{
  color:rgba(244,247,251,.55);
}

input:focus,
textarea:focus{
  border-color:rgba(127,191,42,.32);
  background:rgba(255,255,255,.08);
}

textarea{
  resize:vertical;
  min-height:120px;
}

.note{
  margin:10px 0 0;
  color:var(--muted);
  font-size:10px;
  font-weight:700;
}

.formStatus{
  margin-top:12px;
  padding:12px 14px;
  border-radius:11px;
  font-size:10px;
  font-weight:800;
  display:none;
}

.formStatus.show{ display:block; }

.formStatus.ok{
  background:rgba(127,191,42,.16);
  border:1px solid rgba(127,191,42,.28);
  color:#eef9df;
}

.formStatus.err{
  background:rgba(255,80,80,.14);
  border:1px solid rgba(255,80,80,.25);
  color:#ffe1e1;
}

.legalGrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}

@media (max-width:980px){
  .legalGrid{ grid-template-columns:1fr; }
}

.legalCard{
  padding:18px;
}

.legalCard h3{
  margin:0 0 10px;
  font-weight:1000;
}

.legalCard p{
  margin:0;
  color:var(--muted);
  line-height:1.7;
  font-weight:650;
  font-size:10px;
}

footer{
  padding:30px 0 60px;
  border-top:1px solid rgba(255,255,255,.08);
  background:rgba(0,0,0,.10);
  backdrop-filter:blur(10px);
}

.footerGrid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:18px;
  padding-top:22px;
}

@media (max-width:980px){
  .footerGrid{ grid-template-columns:1fr 1fr; }
}

@media (max-width:640px){
  .footerGrid{ grid-template-columns:1fr; }
}

.fLogo{
  width:420px;
  height:165px;
  object-fit:contain;
}

.fCol h4{
  margin:10px 0;
  font-weight:1000;
}

.fCol p,
.fCol a,
.fCol span{
  color:rgba(244,247,251,.78);
  font-weight:650;
  line-height:1.7;
  font-size:10px;
  display:block;
  margin:8px 0;
}

.fCol a:hover,
.fCol a:focus-visible{
  color:var(--g-400);
  outline:none;
}

.fBottom{
  margin-top:12px;
  padding-top:16px;
  border-top:1px solid rgba(255,255,255,.08);
  display:flex;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  color:rgba(244,247,251,.65);
  font-weight:650;
  font-size:10px;
}

.waFloat{
  position:fixed;
  right:18px;
  bottom:18px;
  width:56px;
  height:56px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(180deg,#25D366,#20c25a);
  color:#fff;
  font-size:22px;
  box-shadow:0 18px 45px rgba(0,0,0,.40);
  z-index:2500;
}

.reveal{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .65s var(--ease), transform .65s var(--ease);
  will-change:opacity, transform;
}

.reveal.in{
  opacity:1;
  transform:translateY(0);
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .reveal{ transition:none !important; opacity:1 !important; transform:none !important; }
  .refsTrack{ transition:none !important; }
}

.gMain{
  touch-action:pan-y;
  user-select:none;
}

.projCard{
  text-align:left;
  cursor:pointer;
  padding:0;
  width:100%;
  border:1px solid rgba(255,255,255,.12);
}

.gModal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.78);
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
  z-index:3200;
}

.gModal.open{ display:flex; }

.gPanel{
  width:min(1200px, 96vw);
  border-radius:22px;
  overflow:hidden;
  background:rgba(16,28,48,.96);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:var(--shadow);
  position:relative;
}

.gClose{
  position:absolute;
  top:10px;
  right:10px;
  border:0;
  border-radius:11px;
  padding:10px 12px;
  font-weight:1000;
  cursor:pointer;
  background:rgba(255,255,255,.92);
  color:#0b1220;
  z-index:5;
}

.gLayout{
  display:grid;
  grid-template-columns:1.35fr .65fr;
  gap:10px;
  padding:14px;
}

@media (max-width:980px){
  .gLayout{ grid-template-columns:1fr; }
}

.gMain{
  position:relative;
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  min-height:420px;
  box-shadow:var(--shadow2);
}

.gMain img{
  width:100%;
  height:100%;
  min-height:420px;
  object-fit:cover;
  display:block;
}

.gMain::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(520px 320px at 18% 20%, rgba(127,191,42,.14), transparent 55%),
    linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.62));
  pointer-events:none;
}

.gCap{
  position:absolute;
  left:12px;
  right:12px;
  bottom:12px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:10px;
  z-index:2;
}

.gCap b{
  font-weight:1000;
  font-size:10px;
}

.gCap span{
  color:rgba(244,247,251,.78);
  font-weight:750;
  font-size:10px;
}

.gArrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:44px;
  height:44px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(0,0,0,.30);
  color:#fff;
  font-size:26px;
  font-weight:1000;
  cursor:pointer;
  z-index:3;
  display:flex;
  align-items:center;
  justify-content:center;
  backdrop-filter:blur(10px);
  transition:transform .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease);
}

.gArrow:hover,
.gArrow:focus-visible{
  transform:translateY(-50%) scale(1.05);
  background:rgba(103,156,33,.18);
  border-color:rgba(127,191,42,.25);
  outline:none;
}

.gPrev{ left:12px; }
.gNext{ right:12px; }

.gSide{
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  box-shadow:var(--shadow2);
  padding:12px;
  display:grid;
  gap:10px;
  align-content:start;
}

.gSideHead{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  padding:6px 6px 2px;
}

.gSideHead b{ font-weight:1000; }

.gSideHead small{
  color:var(--muted);
  font-weight:800;
}

.gThumbs{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

@media (max-width:980px){
  .gThumbs{
    grid-template-columns:repeat(5, minmax(110px, 1fr));
    overflow:auto;
    padding-bottom:6px;
  }
}

.gThumb{
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  cursor:pointer;
  transition:transform .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
  position:relative;
  padding:0;
}

.gThumb:hover,
.gThumb:focus-visible{
  transform:translateY(-2px);
  border-color:rgba(255,255,255,.18);
  background:rgba(255,255,255,.06);
  outline:none;
}

.gThumb img{
  width:100%;
  height:140px;
  object-fit:cover;
  display:block;
}

.gThumb.active{
  border-color:rgba(127,191,42,.45);
  box-shadow:0 14px 28px rgba(103,156,33,.16);
}

.gThumb.active::after{
  content:"";
  position:absolute;
  inset:0;
  border:2px solid rgba(127,191,42,.55);
  border-radius:16px;
  pointer-events:none;
}