@import url("https://fonts.googleapis.com/css2?family=VT323&display=swap");

/* Azka Garden V13 — mobile WEBTEXT with the original live WebGL plant */
:root{
  --azka-mwt-screen:#00091a;
  --azka-mwt-card:#000d22;
  --azka-mwt-grid:#050a14;
  --azka-mwt-gap:2px;
  --azka-mwt-space:.78rem;
  --azka-mwt-cyan:#00cccc;
  --azka-mwt-green:#00c000;
  --azka-mwt-red:#dd2222;
  --azka-mwt-yellow:#dddd00;
  --azka-mwt-magenta:#cc00cc;
  --azka-mwt-blue:#3333dd;
  --azka-mwt-headline:#ffff55;
  --azka-mwt-date:#00ffff;
  --azka-mwt-copy:#d0dce8;
  --azka-mwt-border:#102548;
}

#azkaMobileWebtextV12{
  display:none;
}

@media (max-width:640px){
  html:has(body.azka-mobile-webtext-v12){
    background:#000!important;
    color-scheme:dark;
    scrollbar-width:thin;
    scrollbar-color:var(--azka-mwt-cyan) #000;
  }

  html:has(body.azka-mobile-webtext-v12)::-webkit-scrollbar{
    width:8px;
  }

  html:has(body.azka-mobile-webtext-v12)::-webkit-scrollbar-track{
    background:#000;
  }

  html:has(body.azka-mobile-webtext-v12)::-webkit-scrollbar-thumb{
    background:linear-gradient(
      180deg,
      var(--azka-mwt-cyan),
      var(--azka-mwt-green),
      var(--azka-mwt-yellow),
      var(--azka-mwt-magenta)
    );
    border:2px solid #000;
  }

  body.azka-mobile-webtext-v12{
    margin:0!important;
    min-height:100vh!important;
    overflow-x:hidden!important;
    color:#fff!important;
    background:#000!important;
    font-family:"VT323",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace!important;
  }

  body.azka-mobile-webtext-v12 > #root{
    display:none!important;
  }

  #azkaMobileWebtextV12{
    display:block;
    min-height:100vh;
    position:relative;
    color:#fff;
    background:var(--azka-mwt-screen);
    counter-reset:azka-mobile-page 99;
  }

  #azkaMobileWebtextV12,
  #azkaMobileWebtextV12 *,
  #azkaMobileWebtextV12 *::before,
  #azkaMobileWebtextV12 *::after{
    box-sizing:border-box;
  }

  .azka-mwt-progress{
    position:fixed;
    top:0;
    left:0;
    z-index:1005;
    width:0;
    height:3px;
    pointer-events:none;
    background:linear-gradient(
      90deg,
      var(--azka-mwt-green),
      var(--azka-mwt-cyan),
      var(--azka-mwt-yellow),
      var(--azka-mwt-magenta)
    );
    box-shadow:0 0 12px var(--azka-mwt-cyan);
  }

  .azka-mwt-masthead{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    gap:.6rem;
    min-height:5rem;
    padding:.65rem .75rem;
    color:#000;
    background:
      repeating-linear-gradient(
        180deg,
        rgba(255,255,255,.16) 0,
        rgba(255,255,255,.16) 1px,
        transparent 1px,
        transparent 4px
      ),
      var(--azka-mwt-cyan);
    border-bottom:2px solid #000;
  }

  .azka-mwt-masthead-left{
    min-width:0;
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    align-items:baseline;
    gap:.42rem;
  }

  .azka-mwt-logo{
    color:#000;
    font-size:clamp(1.75rem,9vw,2.4rem);
    line-height:.85;
    letter-spacing:.08em;
    text-decoration:none;
    white-space:nowrap;
  }

  .azka-mwt-tagline{
    min-width:0;
    overflow:hidden;
    color:#001018;
    font-size:.84rem;
    letter-spacing:.14em;
    text-overflow:ellipsis;
    text-transform:uppercase;
    white-space:nowrap;
    opacity:.72;
  }

  .azka-mwt-cursor{
    font-size:1rem;
    animation:azka-mwt-blink 1s step-end infinite;
  }

  .azka-mwt-masthead-right{
    display:grid;
    justify-items:end;
    color:#001018;
    font-size:.72rem;
    line-height:1.2;
    letter-spacing:.07em;
    text-align:right;
    text-transform:uppercase;
    white-space:nowrap;
  }

  .azka-mwt-page{
    font-size:1rem;
    font-weight:700;
  }

  .azka-mwt-ticker{
    display:flex;
    align-items:stretch;
    min-height:2rem;
    overflow:hidden;
    color:#fff;
    background:#000;
    border-top:1px solid #0a2040;
    border-bottom:1px solid #0a2040;
  }

  .azka-mwt-ticker-label{
    flex:0 0 auto;
    display:flex;
    align-items:center;
    padding:.2rem .62rem;
    color:#fff;
    background:var(--azka-mwt-red);
    font-size:.92rem;
    letter-spacing:.18em;
    text-transform:uppercase;
  }

  .azka-mwt-ticker-track{
    min-width:0;
    flex:1;
    display:flex;
    align-items:center;
    overflow:hidden;
  }

  .azka-mwt-ticker-text{
    display:block;
    padding:.2rem 0;
    color:var(--azka-mwt-yellow);
    font-size:.96rem;
    letter-spacing:.08em;
    text-transform:uppercase;
    white-space:nowrap;
    animation:azka-mwt-ticker 42s linear infinite;
  }

  .azka-mwt-feed{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    gap:var(--azka-mwt-gap);
    padding:var(--azka-mwt-gap);
    background:var(--azka-mwt-grid);
    counter-reset:azka-mobile-page 99;
  }

  .azka-mwt-item{
    --source:var(--azka-mwt-cyan);
    --source-text:#000;
    min-width:0;
    display:grid;
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:
      "source"
      "media"
      "headline"
      "date"
      "excerpt"
      "actions";
    align-content:start;
    overflow:hidden;
    color:#fff;
    background:var(--azka-mwt-card);
    border:1px solid rgba(16,37,72,.9);
    counter-increment:azka-mobile-page;
    animation:azka-mwt-card-in .42s cubic-bezier(.2,.8,.2,1) both;
    animation-delay:calc(var(--item-order,1) * 42ms);
  }

  .azka-mwt-item:nth-of-type(6n + 1){
    --source:var(--azka-mwt-cyan);
    --source-text:#000;
  }

  .azka-mwt-item:nth-of-type(6n + 2){
    --source:var(--azka-mwt-green);
    --source-text:#000;
  }

  .azka-mwt-item:nth-of-type(6n + 3){
    --source:var(--azka-mwt-red);
    --source-text:#fff;
  }

  .azka-mwt-item:nth-of-type(6n + 4){
    --source:var(--azka-mwt-yellow);
    --source-text:#000;
  }

  .azka-mwt-item:nth-of-type(6n + 5){
    --source:var(--azka-mwt-magenta);
    --source-text:#fff;
  }

  .azka-mwt-item:nth-of-type(6n + 6){
    --source:var(--azka-mwt-blue);
    --source-text:#fff;
  }

  .azka-mwt-source{
    grid-area:source;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:.65rem;
    min-height:2.2rem;
    padding:.25rem .68rem;
    overflow:hidden;
    color:var(--source-text);
    background:
      repeating-linear-gradient(
        180deg,
        rgba(255,255,255,.13) 0,
        rgba(255,255,255,.13) 1px,
        transparent 1px,
        transparent 4px
      ),
      var(--source);
    font-size:1rem;
    letter-spacing:.15em;
    text-transform:uppercase;
    white-space:nowrap;
  }

  .azka-mwt-source::before{
    content:"P" counter(azka-mobile-page);
    flex:0 0 auto;
    opacity:.86;
  }

  .azka-mwt-source span{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .azka-mwt-media{
    grid-area:media;
    position:relative;
    width:100%;
    min-height:14rem;
    overflow:hidden;
    background:#071322;
    border-bottom:1px solid var(--azka-mwt-border);
  }

  .azka-mwt-media img{
    width:100%;
    height:100%;
    min-height:14rem;
    display:block;
    object-fit:cover;
    object-position:center;
    image-rendering:auto;
    filter:none!important;
    mix-blend-mode:normal!important;
    opacity:1!important;
  }

  .azka-mwt-item--hero .azka-mwt-media{
    min-height:19rem;
    background:
      radial-gradient(circle at 50% 48%,rgba(82,183,136,.18),transparent 56%),
      #071a12;
  }

  .azka-mwt-item--hero .azka-mwt-media img{
    min-height:19rem;
    object-fit:contain;
    object-position:center bottom;
  }

  .azka-mwt-item h1,
  .azka-mwt-item h2{
    grid-area:headline;
    margin:0;
    padding:.72rem .78rem .18rem;
    color:var(--azka-mwt-headline);
    font-size:clamp(1.65rem,9vw,2.45rem);
    line-height:.94;
    letter-spacing:.02em;
    text-transform:uppercase;
    text-wrap:balance;
  }

  .azka-mwt-item--hero h1{
    font-size:clamp(2.75rem,15vw,4.25rem);
    line-height:.82;
    text-shadow:2px 0 0 rgba(204,0,204,.34);
  }

  .azka-mwt-item h1 a,
  .azka-mwt-item h2 a{
    color:inherit;
    text-decoration:none;
  }

  .azka-mwt-date{
    grid-area:date;
    display:block;
    padding:.15rem .78rem;
    color:var(--azka-mwt-date);
    font-size:1rem;
    letter-spacing:.12em;
    text-transform:uppercase;
  }

  .azka-mwt-item p{
    grid-area:excerpt;
    margin:0;
    padding:.35rem .78rem .85rem;
    color:var(--azka-mwt-copy);
    font-size:1.11rem;
    line-height:1.42;
  }

  .azka-mwt-price{
    color:#8dffce;
    font-size:1.28rem;
    font-weight:700;
  }

  .azka-mwt-actions{
    grid-area:actions;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:var(--azka-mwt-gap);
    padding:var(--azka-mwt-gap);
    background:var(--azka-mwt-grid);
  }

  .azka-mwt-item--hero .azka-mwt-actions{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .azka-mwt-action{
    min-width:0;
    min-height:3rem;
    display:grid;
    place-items:center;
    padding:.58rem .62rem;
    color:#000;
    background:var(--source);
    border:0;
    font:400 1.03rem/1 "VT323",ui-monospace,monospace;
    letter-spacing:.09em;
    text-align:center;
    text-decoration:none;
    text-transform:uppercase;
  }

  .azka-mwt-action--dark{
    color:#fff;
    background:#07111e;
    box-shadow:inset 0 0 0 1px var(--source);
  }

  .azka-mwt-info-band{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:var(--azka-mwt-gap);
    padding:var(--azka-mwt-gap);
    background:var(--azka-mwt-grid);
  }

  .azka-mwt-info{
    min-width:0;
    min-height:5.5rem;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:.7rem .72rem;
    color:#07101f;
    background:var(--azka-mwt-cyan);
  }

  .azka-mwt-info:nth-child(2){
    background:var(--azka-mwt-green);
  }

  .azka-mwt-info:nth-child(3){
    background:var(--azka-mwt-yellow);
  }

  .azka-mwt-info:nth-child(4){
    color:#fff;
    background:var(--azka-mwt-magenta);
  }

  .azka-mwt-info strong{
    font-size:1.12rem;
    letter-spacing:.06em;
    text-transform:uppercase;
  }

  .azka-mwt-info span{
    margin-top:.22rem;
    font-size:.92rem;
    line-height:1.18;
  }

  .azka-mwt-footer{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:var(--azka-mwt-gap);
    padding:var(--azka-mwt-gap);
    background:var(--azka-mwt-grid);
  }

  .azka-mwt-fast{
    min-height:3.35rem;
    display:grid;
    place-items:center;
    color:#fff;
    background:var(--azka-mwt-red);
    font-size:1.1rem;
    letter-spacing:.12em;
    text-decoration:none;
    text-transform:uppercase;
  }

  .azka-mwt-fast:nth-child(2){
    color:#000;
    background:var(--azka-mwt-green);
  }

  .azka-mwt-fast:nth-child(3){
    color:#000;
    background:var(--azka-mwt-yellow);
  }

  .azka-mwt-fast:nth-child(4){
    color:#000;
    background:var(--azka-mwt-cyan);
  }

  .azka-mwt-copyright{
    padding:.8rem .75rem 1.1rem;
    color:#8aa5b8;
    background:#000;
    font-size:.82rem;
    letter-spacing:.09em;
    text-align:center;
    text-transform:uppercase;
  }
}

@keyframes azka-mwt-ticker{
  from{transform:translateX(100vw)}
  to{transform:translateX(-100%)}
}

@keyframes azka-mwt-card-in{
  from{
    opacity:0;
    transform:translateY(10px);
  }
  to{
    opacity:1;
    transform:none;
  }
}

@keyframes azka-mwt-blink{
  0%,100%{opacity:1}
  50%{opacity:0}
}

@media (max-width:380px){
  .azka-mwt-masthead{
    grid-template-columns:minmax(0,1fr);
    gap:.35rem;
  }

  .azka-mwt-masthead-right{
    grid-template-columns:auto 1fr auto;
    align-items:center;
    justify-items:start;
    gap:.5rem;
    width:100%;
    text-align:left;
  }

  .azka-mwt-masthead-right span:last-child{
    justify-self:end;
  }

  .azka-mwt-item--hero .azka-mwt-media,
  .azka-mwt-item--hero .azka-mwt-media img{
    min-height:17rem;
  }

  .azka-mwt-info-band{
    grid-template-columns:minmax(0,1fr);
  }
}

@media (prefers-reduced-motion:reduce){
  .azka-mwt-ticker-text,
  .azka-mwt-item,
  .azka-mwt-cursor{
    animation:none!important;
  }
}
/* ==================================================================
   V13 — ORIGINAL LIVE WEBGL HERO + PASSION IMAGE 4 (MOBILE ONLY)
   ================================================================== */

@media (max-width:640px){
  /*
   * Keep the React application mounted so its original R3F/WebGL scene
   * continues running. All original content is placed safely offscreen;
   * the actual .hero-3d-panel node is moved into the visible P100 slot.
   */
  body.azka-mobile-webtext-v13 > #root{
    display:block!important;
    position:fixed!important;
    top:0!important;
    left:-220vw!important;
    width:100vw!important;
    min-height:100vh!important;
    opacity:0!important;
    pointer-events:none!important;
    overflow:hidden!important;
    z-index:-10!important;
  }

  body.azka-mobile-webtext-v13 > #root .hero-3d-panel{
    opacity:1!important;
  }

  /* The WebGL slot replaces the incorrect logo/seeds placeholder. */
  .azka-mwt-webgl-slot{
    grid-area:media;
    position:relative;
    width:100%;
    min-height:22rem;
    overflow:hidden;
    isolation:isolate;
    background:
      radial-gradient(circle at 50% 38%,rgba(82,183,136,.26),transparent 48%),
      radial-gradient(circle at 25% 85%,rgba(212,163,115,.15),transparent 38%),
      linear-gradient(160deg,#07180f 0%,#0d2a1c 48%,#1b4332 100%);
    border-bottom:1px solid var(--azka-mwt-border);
  }

  .azka-mwt-webgl-slot::before{
    content:"LIVE WEBGL · ORIGINAL DESKTOP SCENE";
    position:absolute;
    top:.55rem;
    left:.55rem;
    z-index:20;
    padding:.24rem .46rem;
    color:#001018;
    background:rgba(0,204,204,.94);
    border:1px solid #000;
    font:400 .74rem/1 "VT323",ui-monospace,monospace;
    letter-spacing:.1em;
    text-transform:uppercase;
    pointer-events:none;
  }

  .azka-mwt-webgl-slot::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:19;
    pointer-events:none;
    background:
      linear-gradient(90deg,transparent,rgba(0,255,204,.08),transparent),
      repeating-linear-gradient(
        180deg,
        transparent 0,
        transparent 3px,
        rgba(0,0,0,.09) 3px,
        rgba(0,0,0,.09) 4px
      );
    mix-blend-mode:screen;
  }

  .azka-mwt-webgl-fallback{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    object-position:center;
    filter:none!important;
    opacity:1;
    transition:opacity .3s ease;
  }

  .azka-mwt-webgl-slot[data-webgl-ready="true"] .azka-mwt-webgl-fallback{
    opacity:0;
    pointer-events:none;
  }

  /*
   * The original React-managed element is used directly. Its canvas,
   * procedural Monstera, palm, cactus, particles, lights and badges are
   * preserved; only its mobile geometry is overridden.
   */
  .azka-mwt-webgl-slot > .hero-3d-panel{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    min-width:0!important;
    max-width:none!important;
    z-index:5!important;
    pointer-events:auto!important;
    opacity:1!important;
    transform:none!important;
    overflow:hidden!important;
    background:transparent!important;
  }

  .azka-mwt-webgl-slot > .hero-3d-panel canvas{
    display:block!important;
    width:100%!important;
    height:100%!important;
    opacity:1!important;
    filter:none!important;
    touch-action:pan-y!important;
  }

  /* Scale the original floating information badges to fit mobile. */
  .azka-mwt-webgl-slot > .hero-3d-panel > :nth-child(2){
    left:.25rem!important;
    bottom:.3rem!important;
    min-width:0!important;
    transform:scale(.72)!important;
    transform-origin:left bottom!important;
  }

  .azka-mwt-webgl-slot > .hero-3d-panel > :nth-child(3){
    top:.7rem!important;
    right:.35rem!important;
    transform:scale(.72)!important;
    transform-origin:right top!important;
  }

  .azka-mwt-webgl-slot > .hero-3d-panel > :nth-child(4){
    top:3.2rem!important;
    right:.35rem!important;
    transform:scale(.74)!important;
    transform-origin:right top!important;
  }

  /* Passion section: image four from the original desktop composition. */
  .azka-mwt-passion-media{
    min-height:20rem!important;
    background:#07180f!important;
  }

  .azka-mwt-passion-media img{
    width:100%!important;
    height:100%!important;
    min-height:20rem!important;
    object-fit:cover!important;
    object-position:center!important;
    filter:none!important;
    mix-blend-mode:normal!important;
    opacity:1!important;
  }

  .azka-mwt-passion-media::after{
    content:"GAMBAR 4 · ORIGINAL PASSION VISUAL";
    position:absolute;
    right:.55rem;
    bottom:.55rem;
    z-index:3;
    padding:.25rem .45rem;
    color:#000;
    background:var(--azka-mwt-green);
    border:1px solid #000;
    font:400 .74rem/1 "VT323",ui-monospace,monospace;
    letter-spacing:.08em;
    text-transform:uppercase;
  }
}

@media (max-width:380px){
  .azka-mwt-webgl-slot{
    min-height:19rem;
  }

  .azka-mwt-webgl-slot > .hero-3d-panel > :nth-child(2){
    transform:scale(.62)!important;
  }

  .azka-mwt-webgl-slot > .hero-3d-panel > :nth-child(3),
  .azka-mwt-webgl-slot > .hero-3d-panel > :nth-child(4){
    transform:scale(.64)!important;
  }

  .azka-mwt-passion-media,
  .azka-mwt-passion-media img{
    min-height:17rem!important;
  }
}

@media (prefers-reduced-motion:reduce){
  .azka-mwt-webgl-fallback{
    transition:none!important;
  }
}