/*
Theme Name: tmp
Text Domain: gditoima-draft
Description: GDI TO IMA gateway landing draft
Version: 1.2.0
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0-or-later
WPVibe: yes
*/

:root{
  --ink:#050505;
  --white:#fffdf8;
  --gold:#f5b915;
  --gold2:#ffd84a;
  --red:#d4140d;
  --blue:#0a2c72;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--ink)}
body.gdi-home{margin:0;background:var(--ink);color:var(--white);overflow-x:hidden;font-family:Nunito,Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
#glavno{margin:0;padding:0}
a{color:inherit}

.gdi-gateway{min-height:100vh;background:#050505}

/* ZAKLJUČANI MASTER — samo interakcija preko njega */
.gdi-master-hero{
  position:relative;
  width:100%;
  max-width:1448px;
  margin:0 auto;
  aspect-ratio:4/3;
  overflow:hidden;
  background:#050505;
  isolation:isolate;
}
.gdi-master-art{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:contain;
  object-position:center;
  z-index:1;
  user-select:none;
  -webkit-user-drag:none;
}

/* Cijeli svjetovi su klikabilni — ne samo nacrtani gumbi. */
.gdi-world-link{
  position:absolute;
  z-index:4;
  display:block;
  outline:0;
  cursor:pointer;
  touch-action:manipulation;
  transition:transform .16s ease,filter .16s ease;
  -webkit-tap-highlight-color:transparent;
}
.gdi-world-link:before{
  content:"";
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity .16s ease;
  pointer-events:none;
}
.gdi-world-link:hover:before,
.gdi-world-link:focus-visible:before{opacity:1}
.gdi-world-link:hover{filter:brightness(1.05)}
.gdi-world-link:active{transform:scale(.992)}
.gdi-world-link:focus-visible{filter:brightness(1.06) drop-shadow(0 0 12px rgba(255,255,255,.72))}

.gdi-world-temu{
  left:0;top:0;width:51.2%;height:69.5%;
  clip-path:polygon(0 0,100% 0,70% 100%,0 100%);
}
.gdi-world-temu:before{
  background:linear-gradient(135deg,rgba(255,255,255,.12),rgba(212,20,13,.24) 48%,rgba(212,20,13,.04) 76%);
}
.gdi-world-ali{
  right:0;top:0;width:51.5%;height:69.5%;
  clip-path:polygon(0 0,100% 0,100% 100%,30% 100%);
}
.gdi-world-ali:before{
  background:linear-gradient(225deg,rgba(255,255,255,.11),rgba(20,86,199,.22) 48%,rgba(10,44,114,.04) 76%);
}
.gdi-world-vevor{
  left:20.5%;right:20.5%;bottom:0;height:38.5%;
  clip-path:polygon(15% 0,85% 0,100% 100%,0 100%);
}
.gdi-world-vevor:before{
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(245,185,21,.26));
}

/* Donji gateway strip — tri comic segmenta, bez kataloškog grida. */
.gdi-gateway-rail{
  width:min(1448px,100%);
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  background:#050505;
  border-top:5px solid #fff;
  border-bottom:5px solid #050505;
  box-shadow:0 -10px 28px rgba(0,0,0,.4);
  overflow:hidden;
}
.gdi-rail-lead{
  grid-column:1/-1;
  min-height:58px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:9px 34px 10px;
  background:var(--gold);
  color:#050505;
  border-bottom:4px solid #050505;
  text-align:center;
  clip-path:polygon(2% 0,98% 0,100% 50%,98% 100%,2% 100%,0 50%);
}
.gdi-rail-lead strong,
.gdi-rail-lead span,
.gdi-rail-step span{
  position:relative;
  z-index:2;
  font-weight:1000;
  letter-spacing:-.035em;
  text-transform:uppercase;
}
.gdi-rail-lead strong{font-size:clamp(22px,2.3vw,34px);line-height:.95}
.gdi-rail-lead span{font-size:clamp(13px,1.25vw,18px);line-height:1}
.gdi-rail-step{
  position:relative;
  min-height:112px;
  padding:22px 26px 22px 24px;
  display:flex;
  align-items:center;
  gap:16px;
  overflow:hidden;
  isolation:isolate;
  background:#0a0a0a;
}
.gdi-rail-step + .gdi-rail-step{border-left:4px solid #050505}
.gdi-rail-step:before{
  content:"";
  position:absolute;
  z-index:0;
  inset:-28% -16% -48% 30%;
  transform:skewX(-18deg) rotate(-5deg);
  opacity:.16;
}
.gdi-rail-step:after{
  content:"";
  position:absolute;
  z-index:1;
  left:0;top:0;right:0;height:7px;
  background:currentColor;
}
.gdi-rail-step:nth-child(2){color:var(--red);clip-path:polygon(0 0,100% 0,95% 100%,0 100%)}
.gdi-rail-step:nth-child(3){color:#1c5cc7;clip-path:polygon(5% 0,100% 0,95% 100%,0 100%);margin-left:-5%}
.gdi-rail-step:nth-child(4){color:var(--gold);clip-path:polygon(5% 0,100% 0,100% 100%,0 100%);margin-left:-5%}
.gdi-rail-step:nth-child(2):before{background:linear-gradient(135deg,var(--red),transparent 72%)}
.gdi-rail-step:nth-child(3):before{background:linear-gradient(135deg,#1c5cc7,transparent 72%)}
.gdi-rail-step:nth-child(4):before{background:linear-gradient(135deg,var(--gold),transparent 72%)}
.gdi-rail-step b{
  position:relative;
  z-index:2;
  flex:0 0 auto;
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  border:3px solid currentColor;
  border-radius:50%;
  color:currentColor;
  background:#050505;
  font-size:14px;
  line-height:1;
  font-weight:1000;
  transform:rotate(-6deg);
  box-shadow:0 0 0 3px #050505,0 0 0 5px currentColor;
}
.gdi-rail-step span{font-size:clamp(13px,1.2vw,17px);line-height:1.08;color:#f5f5f5}

/* Završni potpis izgleda kao zadnja comic traka, ne kao klasični footer. */
.gdi-gateway-footer{
  position:relative;
  width:min(1448px,100%);
  margin:0 auto;
  min-height:120px;
  padding:24px 28px 28px;
  display:grid;
  grid-template-columns:minmax(0,1.4fr) minmax(220px,.85fr) minmax(180px,.65fr);
  gap:20px;
  align-items:center;
  overflow:hidden;
  border-top:4px solid #151515;
  border-bottom:1px solid #202020;
  background:#050505;
}
.gdi-gateway-footer:before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(120deg,rgba(212,20,13,.13),transparent 31%),
    linear-gradient(240deg,rgba(28,92,199,.10),transparent 32%),
    linear-gradient(300deg,rgba(245,185,21,.11),transparent 34%);
  pointer-events:none;
}
.gdi-gateway-footer:after{
  content:"GDITOIMA.COM";
  position:absolute;
  right:18px;
  bottom:-2px;
  color:#161616;
  font-size:clamp(36px,6vw,78px);
  font-weight:1000;
  line-height:.9;
  letter-spacing:-.07em;
  pointer-events:none;
}
.gdi-gateway-footer p,
.gdi-gateway-footer span,
.gdi-gateway-footer small{position:relative;z-index:2}
.gdi-gateway-footer p{
  margin:0;
  max-width:760px;
  color:#f7f7f7;
  font-size:clamp(18px,1.9vw,28px);
  line-height:1.08;
  font-weight:1000;
  letter-spacing:-.025em;
}
.gdi-gateway-footer p em{
  color:var(--gold);
  font-style:normal;
}
.gdi-gateway-footer span{
  justify-self:start;
  display:inline-block;
  max-width:100%;
  padding:9px 13px;
  border:3px solid #050505;
  border-radius:999px;
  background:var(--gold);
  color:#050505;
  font-size:11px;
  line-height:1.1;
  font-weight:1000;
  transform:rotate(-1.2deg);
  box-shadow:0 0 0 2px var(--gold);
}
.gdi-gateway-footer small{
  justify-self:end;
  padding:8px 2px;
  border-bottom:3px solid var(--gold);
  color:#ededed;
  font-size:13px;
  line-height:1.1;
  font-style:italic;
  font-weight:1000;
  white-space:nowrap;
  transform:rotate(1deg);
}

.screen-reader-text{
  position:absolute!important;
  width:1px!important;height:1px!important;
  padding:0!important;margin:-1px!important;
  overflow:hidden!important;clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;border:0!important;
}

@media(max-width:900px){
  .gdi-gateway-rail{grid-template-columns:1fr}
  .gdi-rail-lead{grid-column:auto;min-height:54px;gap:8px}
  .gdi-rail-step{min-height:84px;margin-left:0!important;clip-path:polygon(0 0,100% 0,96% 100%,0 100%)!important;border-left:0!important;border-bottom:4px solid #050505}
  .gdi-rail-step:nth-child(3){clip-path:polygon(4% 0,100% 0,96% 100%,0 100%)!important;margin-top:-3px!important}
  .gdi-rail-step:nth-child(4){clip-path:polygon(4% 0,100% 0,100% 100%,0 100%)!important;margin-top:-3px!important}
  .gdi-gateway-footer{grid-template-columns:1fr 1fr;padding:24px 22px 30px}
  .gdi-gateway-footer p{grid-column:1/-1}
  .gdi-gateway-footer small{justify-self:start;white-space:normal}
}

@media(max-width:600px){
  .gdi-master-hero{width:100%;max-width:none;aspect-ratio:4/3}
  .gdi-world-link:active:before{opacity:1}
  .gdi-gateway-rail{border-top-width:4px;border-bottom-width:4px}
  .gdi-rail-lead{min-height:50px;padding:8px 14px 9px}
  .gdi-rail-lead strong{font-size:22px}
  .gdi-rail-lead span{font-size:14px}
  .gdi-rail-step{min-height:82px;padding:15px 18px;gap:14px}
  .gdi-rail-step b{width:38px;height:38px;font-size:12px;box-shadow:0 0 0 2px #050505,0 0 0 4px currentColor}
  .gdi-rail-step span{font-size:14px;line-height:1.08}
  .gdi-gateway-footer{grid-template-columns:1fr;min-height:0;padding:22px 16px 30px;gap:14px}
  .gdi-gateway-footer:after{right:8px;bottom:2px;font-size:40px}
  .gdi-gateway-footer p{grid-column:auto;font-size:18px;line-height:1.12}
  .gdi-gateway-footer span{font-size:10px;padding:9px 11px;max-width:100%}
  .gdi-gateway-footer small{grid-column:auto;justify-self:start;font-size:12px;white-space:normal}
}

@media(hover:none) and (pointer:coarse){
  .gdi-world-link{transition:transform .08s ease}
  .gdi-world-link:active:before{opacity:1}
  .gdi-world-link:active{transform:scale(.986)}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .gdi-world-link,.gdi-world-link:before{transition:none}
}