*{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{margin:0;}
  @media (prefers-reduced-motion: reduce){ *{animation:none !important; transition:none !important;} }

  /* divider between the two concepts */
  .divider{
    text-align:center;
    padding:22px 10px;
    background:#efe3e7;
    color:#2e2630;
    font-family:'Space Mono', monospace;
    font-size:12px;
    letter-spacing:.12em;
    text-transform:uppercase;
  }
  .divider strong{display:block; font-size:15px; margin-top:2px; letter-spacing:.02em;}

  /* ============ KONSEP 1 : PASTEL SCRAPBOOK ============ */
  .concept1{
    --cream:#FFF8F1;
    --blush:#FFD9E4;
    --blush-deep:#FF9EB8;
    --lavender:#E9DEFF;
    --mint:#CFF3E4;
    --butter:#FFEFC2;
    --ink:#5B4B4E;
    --ink-soft:#8A7579;
    --white:#FFFFFF;
    --tape:#F6E9C9;

    position:relative;
    background:var(--cream);
    color:var(--ink);
    font-family:'Quicksand', sans-serif;
    overflow-x:hidden;
  }

  .concept1 #heartLayer{
    position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden;
  }
  .concept1 .bg-heart{
    position:absolute; bottom:-10%; font-size:22px; opacity:.35;
    animation:c1-floatUp linear infinite;
    color:var(--blush-deep);
  }
  @keyframes c1-floatUp{
    0%{transform:translateY(0) rotate(0deg); opacity:0;}
    10%{opacity:.4;}
    90%{opacity:.3;}
    100%{transform:translateY(-110vh) rotate(25deg); opacity:0;}
  }

  .concept1 section{position:relative; z-index:1;}

  .concept1 .hero{
    min-height:100svh;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    text-align:center; padding:40px 20px;
    background:
      radial-gradient(circle at 15% 20%, var(--lavender) 0%, transparent 45%),
      radial-gradient(circle at 85% 15%, var(--butter) 0%, transparent 40%),
      radial-gradient(circle at 50% 90%, var(--mint) 0%, transparent 45%),
      var(--cream);
  }
  .concept1 .eyebrow{
    font-family:'Fredoka', sans-serif;
    letter-spacing:.12em;
    text-transform:uppercase;
    font-size:13px;
    background:var(--white);
    color:var(--blush-deep);
    padding:8px 18px;
    border-radius:999px;
    box-shadow:0 4px 14px rgba(255,158,184,.25);
    margin-bottom:22px;
  }
  .concept1 .hero h1{
    font-family:'Caveat', cursive;
    font-weight:700;
    font-size:clamp(48px,10vw,96px);
    margin:0;
    line-height:1;
    color:var(--blush-deep);
    text-shadow:2px 2px 0 var(--white);
  }
  .concept1 .hero .names{
    font-family:'Fredoka', sans-serif;
    font-weight:600;
    font-size:clamp(20px,3.6vw,30px);
    margin-top:14px;
    color:var(--ink);
  }
  .concept1 .hero .names span{color:var(--blush-deep);}
  .concept1 .hero p.sub{
    max-width:480px;
    margin:18px auto 0;
    font-size:16px;
    color:var(--ink-soft);
    line-height:1.6;
  }

  .concept1 .counter{
    margin-top:38px;
    display:flex; gap:14px; flex-wrap:wrap; justify-content:center;
  }
  .concept1 .counter .box{
    background:var(--white);
    border-radius:18px;
    padding:16px 18px;
    min-width:78px;
    box-shadow:0 8px 20px rgba(255,158,184,.18);
    border:2px solid var(--blush);
  }
  .concept1 .counter .num{
    font-family:'Fredoka', sans-serif;
    font-weight:700;
    font-size:28px;
    color:var(--blush-deep);
  }
  .concept1 .counter .label{
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.08em;
    color:var(--ink-soft);
    margin-top:2px;
  }

  .concept1 .scrollcue{
    margin-top:50px;
    font-size:13px;
    color:var(--ink-soft);
    display:flex; flex-direction:column; align-items:center; gap:6px;
  }
  .concept1 .scrollcue .arrow{
    width:10px;height:10px;
    border-right:2px solid var(--blush-deep);
    border-bottom:2px solid var(--blush-deep);
    transform:rotate(45deg);
    animation:c1-bob 1.6s ease-in-out infinite;
  }
  @keyframes c1-bob{0%,100%{transform:translateY(0) rotate(45deg);}50%{transform:translateY(6px) rotate(45deg);}}

  .concept1 .section-inner{max-width:960px; margin:0 auto; padding:100px 22px;}
  .concept1 .section-title{text-align:center; margin-bottom:56px;}
  .concept1 .section-title .tag{
    font-family:'Fredoka'; font-size:13px; letter-spacing:.14em; text-transform:uppercase;
    color:var(--blush-deep); font-weight:600;
  }
  .concept1 .section-title h2{
    font-family:'Caveat', cursive; font-size:clamp(36px,6vw,56px); margin:8px 0 0;
    color:var(--ink);
  }

  .concept1 .timeline{position:relative; padding-left:0;}
  .concept1 .timeline::before{
    content:''; position:absolute; left:50%; top:0; bottom:0; width:3px;
    background:repeating-linear-gradient(var(--blush) 0 10px, transparent 10px 20px);
    transform:translateX(-50%);
  }
  .concept1 .tl-item{display:flex; width:100%; margin-bottom:46px; position:relative;}
  .concept1 .tl-item:nth-child(odd){justify-content:flex-start;}
  .concept1 .tl-item:nth-child(even){justify-content:flex-end;}
  .concept1 .tl-card{
    width:44%;
    background:var(--white);
    border-radius:20px;
    padding:22px 24px;
    box-shadow:0 10px 24px rgba(90,75,79,.08);
    border:2px solid var(--lavender);
    position:relative;
  }
  .concept1 .tl-item:nth-child(even) .tl-card{border-color:var(--mint);}
  .concept1 .tl-dot{
    position:absolute; top:24px; left:50%; transform:translateX(-50%);
    width:16px; height:16px; border-radius:50%;
    background:var(--blush-deep); border:3px solid var(--white);
    box-shadow:0 0 0 3px var(--blush);
  }
  .concept1 .tl-date{
    font-family:'Fredoka'; font-size:12px; letter-spacing:.06em; text-transform:uppercase;
    color:var(--blush-deep); font-weight:600; margin-bottom:6px;
  }
  .concept1 .tl-card h3{margin:0 0 6px; font-family:'Fredoka'; font-size:18px; color:var(--ink);}
  .concept1 .tl-card p{margin:0; font-size:14.5px; color:var(--ink-soft); line-height:1.6;}

  @media (max-width:680px){
    .concept1 .timeline::before{left:20px;}
    .concept1 .tl-item, .concept1 .tl-item:nth-child(even){justify-content:flex-start; padding-left:44px;}
    .concept1 .tl-card{width:100%;}
    .concept1 .tl-dot{left:20px;}
  }

  .concept1 .gallery{
    display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
    gap:34px 24px; margin-top:10px;
  }
  .concept1 .polaroid{
    background:var(--white);
    padding:14px 14px 18px;
    border-radius:8px;
    box-shadow:0 14px 26px rgba(90,75,79,.14);
    transform:rotate(var(--r,0deg));
    transition:transform .25s ease;
    position:relative;
    display:flex;
    flex-direction:column;
    height:auto;
  }
  .concept1 .polaroid:hover{transform:rotate(0deg) scale(1.04); z-index:2;}
  .concept1 .polaroid:nth-child(1){--r:-3deg;}
  .concept1 .polaroid:nth-child(2){--r:3deg;}
  .concept1 .polaroid:nth-child(3){--r:-2deg;}
  .concept1 .polaroid:nth-child(4){--r:3deg;}
  .concept1 .polaroid .frame{
    aspect-ratio:1/1;
    border-radius:4px;
    display:flex; align-items:center; justify-content:center;
    font-size:34px;
    background:linear-gradient(135deg,var(--blush),var(--lavender));
    color:var(--white);
    overflow:hidden;
  }
  .concept1 .polaroid .frame.m2{background:linear-gradient(135deg,var(--mint),var(--butter));}
  .concept1 .polaroid .frame.m3{background:linear-gradient(135deg,var(--butter),var(--blush));}
  .concept1 .polaroid .cap{
    position:relative;
    bottom:auto; left:auto; right:auto;
    text-align:center;
    font-family:'Caveat', cursive;
    font-size:17px;
    font-weight:600;
    color:var(--ink-soft);
    line-height:1.35;
    margin-top:12px;
    padding:0 4px;
    word-break:break-word;
  }
  .concept1 .tape{
    position:absolute; top:-10px; left:50%; transform:translateX(-50%) rotate(-2deg);
    width:60px; height:22px; background:var(--tape); opacity:.85;
    box-shadow:0 2px 4px rgba(0,0,0,.08);
  }
  .concept1 .gallery-note{
    text-align:center; margin-top:34px; font-size:13.5px; color:var(--ink-soft);
    background:var(--white); display:inline-block; padding:10px 18px; border-radius:12px;
    border:1.5px dashed var(--blush-deep);
  }
  .concept1 .gallery-wrap{text-align:center;}

  .concept1 .letter-section{
    background:linear-gradient(180deg, transparent, var(--lavender) 12%, var(--lavender) 88%, transparent);
  }
  .concept1 .letter{
    background:var(--white);
    border-radius:22px;
    padding:46px 40px;
    box-shadow:0 16px 40px rgba(90,75,79,.14);
    position:relative;
    max-width:640px; margin:0 auto;
  }
  .concept1 .letter::before{
    content:''; position:absolute; top:-20px; left:50%; transform:translateX(-50%);
    background:var(--white) url("../svg/heart-pink.svg") center/60% no-repeat; width:52px; height:52px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 6px 14px rgba(90,75,79,.15);
  }
  .concept1 .letter p{
    font-family:'Caveat'; font-size:23px; line-height:1.65; color:var(--ink); margin:0 0 16px;
  }
  .concept1 .letter .sign{
    text-align:right; font-family:'Caveat'; font-size:26px; color:var(--blush-deep); margin-top:26px;
  }

  .concept1 .c1-music-bar{
    position:fixed; right:18px; bottom:18px; z-index:5;
    background:var(--white); border-radius:999px;
    padding:10px 16px; box-shadow:0 10px 24px rgba(90,75,79,.2);
    display:flex; align-items:center; gap:10px; cursor:pointer;
    border:2px solid var(--blush);
    font-family:'Fredoka'; font-size:13px; color:var(--ink);
  }
  .concept1 .c1-music-bar .disc{
    width:22px; height:22px; border-radius:50%;
    background:conic-gradient(var(--blush-deep) 0 25%, var(--lavender) 25% 50%, var(--blush-deep) 50% 75%, var(--lavender) 75% 100%);
    animation:c1-spin 3s linear infinite paused;
  }
  .concept1 .c1-music-bar.playing .disc{animation-play-state:running;}
  @keyframes c1-spin{to{transform:rotate(360deg);}}

  .concept1 footer{
    text-align:center; padding:60px 20px 90px;
    font-family:'Caveat'; font-size:20px; color:var(--ink-soft);
  }

  /* ===== "Danusan Natal"  tema khusus ala Kaguya Shinomiya ===== */
  .concept1{
    --kaguya-black:#15121A;
    --kaguya-wine:#3B0F1C;
    --kaguya-gold:#D8B26A;
    --kaguya-gold-soft:#F1DDA6;
    --kaguya-rose:#7A1E33;
  }

  .concept1 .tl-item.kaguya .tl-card{
    background:
      radial-gradient(circle at 15% 0%, rgba(216,178,106,.10), transparent 55%),
      linear-gradient(160deg, var(--kaguya-black) 0%, var(--kaguya-wine) 65%, var(--kaguya-black) 100%);
    border:1.5px solid var(--kaguya-gold);
    box-shadow:0 14px 34px rgba(15,10,20,.35), inset 0 0 0 3px rgba(216,178,106,.12);
    color:var(--kaguya-gold-soft);
    padding:26px 28px;
    overflow:visible;
  }
  .concept1 .tl-item.kaguya .tl-card::before,
  .concept1 .tl-item.kaguya .tl-card::after{
    content:''; position:absolute; width:12px; height:12px; background:url("../svg/star-gold.svg") center/contain no-repeat; opacity:.85;
  }
  .concept1 .tl-item.kaguya .tl-card::before{top:10px; left:12px;}
  .concept1 .tl-item.kaguya .tl-card::after{bottom:10px; right:12px;}
  .concept1 .tl-item.kaguya .tl-dot{
    background:var(--kaguya-gold); box-shadow:0 0 0 3px rgba(216,178,106,.35), 0 0 14px rgba(216,178,106,.6);
  }
  .concept1 .tl-item.kaguya .tl-date{
    font-family:'Cinzel', serif; font-weight:600; letter-spacing:.16em;
    color:var(--kaguya-gold); font-size:11px;
    display:flex; align-items:center; gap:8px;
  }
  .concept1 .tl-item.kaguya .tl-date::before{content:''; display:inline-block; width:14px; height:14px; background:url("../svg/rose.svg") center/contain no-repeat; vertical-align:middle;}
  .concept1 .tl-item.kaguya .tl-card h3{
    font-family:'Cinzel', serif; font-weight:600; letter-spacing:.03em;
    color:var(--kaguya-gold-soft); font-size:19px; margin-top:8px;
    text-shadow:0 0 18px rgba(216,178,106,.25);
  }
  .concept1 .tl-item.kaguya .tl-card p{
    font-family:'Cormorant Garamond', serif; font-style:italic; font-size:17px;
    color:#E8D9C4; line-height:1.75;
  }
  .concept1 .tl-item.kaguya{margin-top:160px;}
  .concept1 .tl-item.kaguya .tl-card{z-index:2;}
  .concept1 .tl-item.kaguya .kaguya-portrait{
    position:absolute;
    top:32%; left:20%;
    width:48%;
    transform:translateY(-50%) rotate(9deg);
    z-index:1;
  }
  .concept1 .tl-item.kaguya .kaguya-portrait img{
    display:block; width:100%; height:auto;
    object-fit:cover;
    filter:sepia(.15) contrast(1.03) drop-shadow(0 10px 18px rgba(15,10,20,.5));
  }
  @media (max-width:680px){
    .concept1 .tl-item.kaguya .kaguya-portrait{
      top:-24%; left:auto; right:10%; width:62%;
      transform:rotate(7deg);
    }
  }

  .concept1 .polaroid.kaguya{
    background:linear-gradient(160deg, var(--kaguya-black), var(--kaguya-wine));
    border:1px solid var(--kaguya-gold);
    box-shadow:0 16px 30px rgba(15,10,20,.4);
  }
  .concept1 .polaroid.kaguya .frame{
    background:radial-gradient(circle at 30% 25%, rgba(216,178,106,.35), transparent 60%),
      linear-gradient(135deg, var(--kaguya-wine), var(--kaguya-black));
    border:1px solid rgba(216,178,106,.5);
  }
  .concept1 .polaroid.kaguya .cap{
    font-family:'Cinzel', serif; font-size:12.5px; letter-spacing:.1em; text-transform:uppercase;
    color:var(--kaguya-gold);
  }
  .concept1 .polaroid.kaguya .tape{background:var(--kaguya-gold); opacity:.9;}

  /* ============ KONSEP 2 : STRUK BELANJA CINTA ============ */
  .concept2{
    --outer:#EFE3E7;
    --paper:#FBF6EC;
    --ink2:#2E2630;
    --ink2-soft:#7A6B70;
    --accent:#D94E70;
    --highlight:#FFE79A;
    --line:#CFC3B8;

    background:var(--outer);
    background-image:radial-gradient(circle at 20% 10%, rgba(217,78,112,.06), transparent 40%),
                      radial-gradient(circle at 80% 90%, rgba(217,78,112,.06), transparent 40%);
    color:var(--ink2);
    font-family:'Space Mono', monospace;
    padding:60px 16px 140px;
    display:flex; justify-content:center;
  }

  .concept2 .receipt{
    position:relative;
    width:100%;
    max-width:420px;
    background:var(--paper);
    padding:38px 26px 30px;
    box-shadow:0 30px 60px rgba(46,38,48,.18), 0 4px 14px rgba(46,38,48,.08);
  }
  .concept2 .zig{ position:absolute; left:0; right:0; height:12px;
    background-image:
      linear-gradient(45deg, var(--outer) 50%, transparent 50%),
      linear-gradient(-45deg, var(--outer) 50%, transparent 50%);
    background-position: top left, top left;
    background-size: 18px 18px;
    background-repeat: repeat-x;
  }
  .concept2 .zig.top{ top:-11px; }
  .concept2 .zig.bottom{ bottom:-11px; transform:scaleY(-1); }

  .concept2 .center{text-align:center;}
  .concept2 .logo{
    font-family:'Permanent Marker', cursive;
    font-size:26px;
    color:var(--accent);
    letter-spacing:.02em;
    margin:0 0 2px;
  }
  .concept2 .addr{font-size:11px; color:var(--ink2-soft); line-height:1.6; margin:0 0 2px;}
  .concept2 .meta{font-size:11px; color:var(--ink2-soft); margin-top:14px; display:flex; justify-content:space-between;}
  .concept2 .meta span:last-child{color:var(--ink2);}

  .concept2 .dash{border:none; border-top:2px dashed var(--line); margin:16px 0;}

  .concept2 .item{display:flex; justify-content:space-between; gap:10px; font-size:12.5px; margin-bottom:10px; align-items:flex-start;}
  .concept2 .item .qty{color:var(--accent); font-weight:700; white-space:nowrap;}
  .concept2 .item .desc{flex:1; margin:0 8px; line-height:1.5;}
  .concept2 .item .desc .note{display:block; color:var(--ink2-soft); font-size:10.5px; margin-top:2px;}
  .concept2 .item .price{white-space:nowrap; font-weight:700;}

  .concept2 .row{display:flex; justify-content:space-between; font-size:12.5px; margin-bottom:6px;}
  .concept2 .row.total{
    font-size:15px; font-weight:700; margin-top:10px;
    background:var(--highlight);
    padding:8px 10px;
    margin-left:-10px; margin-right:-10px;
  }

  .concept2 .live{margin-top:4px; font-size:12px; display:flex; justify-content:space-between; align-items:center;}
  .concept2 .live .clock{font-weight:700; letter-spacing:.03em; color:var(--accent);}
  .concept2 .blinker{animation:c2-blink 1s step-start infinite;}
  @keyframes c2-blink{50%{opacity:0;}}

  .concept2 .attach{margin-top:6px; text-align:center;}
  .concept2 .attach .label{font-size:10.5px; color:var(--ink2-soft); letter-spacing:.08em; text-transform:uppercase; margin-bottom:10px;}
  .concept2 .filmstrip{display:flex; gap:8px; justify-content:center; flex-wrap:wrap;}
  .concept2 .s-frame{
    width:64px; height:64px;
    background:linear-gradient(135deg,#e9dfe2,#f3e9ea);
    filter:grayscale(.15) contrast(1.05);
    display:flex; align-items:center; justify-content:center;
    font-size:22px;
    border:1px solid var(--line);
  }

  .concept2 .stamp{
    position:relative;
    width:150px; height:150px; margin:26px auto 6px;
    border:3px solid var(--accent);
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    transform:rotate(-14deg);
    opacity:.9;
  }
  .concept2 .stamp::before{content:''; position:absolute; inset:8px; border:1px dashed var(--accent); border-radius:50%;}
  .concept2 .stamp span{
    font-family:'Permanent Marker', cursive; color:var(--accent); font-size:16px;
    text-align:center; line-height:1.3; transform:rotate(2deg);
  }

  .concept2 .barcode{
    height:46px; margin:20px 0 6px;
    background-image: repeating-linear-gradient(90deg,
      var(--ink2) 0px, var(--ink2) 2px,
      transparent 2px, transparent 3px,
      var(--ink2) 3px, var(--ink2) 4px,
      transparent 4px, transparent 7px,
      var(--ink2) 7px, var(--ink2) 9px,
      transparent 9px, transparent 10px);
  }
  .concept2 .barcode-num{text-align:center; font-size:11px; letter-spacing:.25em; color:var(--ink2-soft);}

  .concept2 .footnote{font-size:10.5px; color:var(--ink2-soft); text-align:center; line-height:1.7; margin-top:18px;}
  .concept2 .thanks{font-family:'Permanent Marker', cursive; color:var(--accent); font-size:17px; text-align:center; margin-top:14px;}

  .concept2 .s-music-bar{
    position:fixed; right:16px; bottom:80px; z-index:6;
    background:var(--paper); border:2px solid var(--ink2);
    padding:9px 14px; font-size:11px; cursor:pointer;
    box-shadow:0 8px 18px rgba(46,38,48,.2);
    display:flex; align-items:center; gap:8px;
    font-family:'Space Mono', monospace; color:var(--ink2);
  }
  .concept2 .s-music-bar .dot{width:8px; height:8px; border-radius:50%; background:var(--accent);}
  .concept2 .s-music-bar.playing .dot{animation:c2-pulse 1s ease-in-out infinite;}
  @keyframes c2-pulse{50%{transform:scale(1.6); opacity:.5;}}

  
  /* ============================================================
     CONCEPT 1: TIMELINE DESIGN SYSTEM (DESKTOP & MOBILE)
     ============================================================ */
  .concept1 .timeline {
    position: relative;
    padding: 20px 0;
  }
  .concept1 .timeline::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 3px;
    background: repeating-linear-gradient(var(--blush) 0 10px, transparent 10px 20px);
    transform: translateX(-50%);
    z-index: 1;
  }

  .concept1 .tl-item {
    display: flex;
    width: 100%;
    margin-bottom: 50px;
    position: relative;
    z-index: 2;
  }
  .concept1 .tl-item:nth-child(odd) {
    justify-content: flex-start;
  }
  .concept1 .tl-item:nth-child(even) {
    justify-content: flex-end;
  }

  .concept1 .tl-card {
    width: 45%;
    background: var(--white);
    border-radius: 20px;
    padding: 22px 24px;
    box-shadow: 0 10px 24px rgba(90,75,79,.08);
    border: 2px solid var(--lavender);
    position: relative;
    box-sizing: border-box;
  }
  .concept1 .tl-item:nth-child(even) .tl-card {
    border-color: var(--mint);
  }

  .concept1 .tl-dot {
    position: absolute;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--blush-deep);
    border: 3px solid var(--white);
    box-shadow: 0 0 0 3px var(--blush);
    z-index: 3;
  }

  .concept1 .tl-date {
    font-family: 'Fredoka', sans-serif;
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--blush-deep);
    font-weight: 600;
    margin-bottom: 6px;
  }
  .concept1 .tl-card h3 {
    margin: 0 0 8px;
    font-family: 'Fredoka', sans-serif;
    font-size: 18px;
    color: var(--ink);
  }
  .concept1 .tl-card p {
    margin: 0;
    font-size: 14.5px;
    color: var(--ink-soft);
    line-height: 1.65;
  }

  /* Kaguya Special Card Styling */
  .concept1 .tl-item.kaguya {
    margin-top: 40px;
  }
  .concept1 .tl-item.kaguya .tl-card {
    background:
      radial-gradient(circle at 15% 0%, rgba(216,178,106,.10), transparent 55%),
      linear-gradient(160deg, var(--kaguya-black) 0%, var(--kaguya-wine) 65%, var(--kaguya-black) 100%);
    border: 1.5px solid var(--kaguya-gold);
    box-shadow: 0 14px 34px rgba(15,10,20,.35), inset 0 0 0 3px rgba(216,178,106,.12);
    color: var(--kaguya-gold-soft);
    padding: 26px 28px;
    z-index: 2;
  }
  .concept1 .tl-item.kaguya .tl-dot {
    background: var(--kaguya-gold);
    box-shadow: 0 0 0 3px rgba(216,178,106,.35), 0 0 14px rgba(216,178,106,.6);
  }
  .concept1 .tl-item.kaguya .tl-date {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    letter-spacing: .16em;
    color: var(--kaguya-gold);
    font-size: 11px;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .concept1 .tl-item.kaguya .tl-card h3 {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    letter-spacing: .03em;
    color: var(--kaguya-gold-soft);
    font-size: 19px;
    margin-top: 8px;
    text-shadow: 0 0 18px rgba(216,178,106,.25);
  }
  .concept1 .tl-item.kaguya .tl-card p {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 16.5px;
    color: #E8D9C4;
    line-height: 1.75;
  }
  .concept1 .tl-item.kaguya .kaguya-portrait {
    position: absolute;
    top: -95px;
    right: 50%;
    width: 230px;
    max-width: 45%;
    transform: rotate(-4deg);
    z-index: 1;
    pointer-events: none;
  }
  .concept1 .tl-item.kaguya .kaguya-portrait img {
    display: block;
    width: 100%;
    height: auto;
    filter: sepia(.15) contrast(1.03) drop-shadow(0 10px 18px rgba(15,10,20,.5));
    border-radius: 8px;
  }

  /* Responsive Mobile Layout for Timeline */
  @media (max-width: 768px) {
    .concept1 .timeline::before {
      left: 20px;
      transform: none;
    }
    .concept1 .tl-item, .concept1 .tl-item:nth-child(even), .concept1 .tl-item:nth-child(odd) {
      justify-content: flex-start;
      padding-left: 44px;
      box-sizing: border-box;
    }
    .concept1 .tl-card {
      width: 100% !important;
    }
    .concept1 .tl-dot {
      left: 20px;
      transform: translateX(-50%);
    }
    .concept1 .tl-item.kaguya .kaguya-portrait {
      top: -85px;
      right: 10px;
      left: auto;
      width: 160px;
      transform: rotate(5deg);
      z-index: 1;
    }
  }


  /* Instagram Direct Message Card Style */
  .concept1 .tl-card.ig-dm-container {
    padding: 16px 18px;
    border-color: #E1306C;
    background: linear-gradient(180deg, #FFFFFF 0%, #FFF5F8 100%);
  }
  .ig-dm-box {
    background: #FFFFFF;
    border-radius: 16px;
    border: 1px solid #F0E6EA;
    box-shadow: 0 8px 24px rgba(225, 48, 108, 0.12);
    overflow: hidden;
    margin-top: 12px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  }
  .ig-dm-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid #F3E8EE;
    background: #FFFDFE;
  }
  .ig-dm-user {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .ig-dm-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(45deg, #F09433, #E6683C, #DC2743, #CC2366, #BC1888);
    padding: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .ig-dm-avatar-inner {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
    color: #E1306C;
  }
  .ig-dm-name-wrap {
    display: flex;
    flex-direction: column;
    text-align: left;
  }
  .ig-dm-name {
    font-weight: 600;
    font-size: 13px;
    color: #262626;
    line-height: 1.2;
    display: flex;
    align-items: center;
    gap: 4px;
  }
  .ig-dm-badge {
    width: 13px;
    height: 13px;
    fill: #0095F6;
  }
  .ig-dm-status {
    font-size: 10.5px;
    color: #8E8E8E;
  }
  .ig-dm-body {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: #FAF8F9;
    max-height: 320px;
    overflow-y: auto;
  }
  .ig-dm-time {
    text-align: center;
    font-size: 10px;
    color: #A89FA4;
    margin: 4px 0 2px;
    font-weight: 500;
  }
  .ig-msg {
    max-width: 85%;
    padding: 8px 13px;
    border-radius: 18px;
    font-size: 12px;
    line-height: 1.45;
    word-break: break-word;
    text-align: left;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  }
  .ig-msg.sent {
    align-self: flex-end;
    background: linear-gradient(135deg, #7C3AED, #EC4899);
    color: #FFFFFF;
    border-bottom-right-radius: 4px;
  }
  .ig-msg.received {
    align-self: flex-start;
    background: #FFFFFF;
    color: #262626;
    border: 1px solid #EFEFEF;
    border-bottom-left-radius: 4px;
  }
  .ig-dm-footer {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    border-top: 1px solid #F3E8EE;
    background: #FFFFFF;
  }
  .ig-dm-input {
    flex: 1;
    background: #F4EFF2;
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 11.5px;
    color: #8E8E8E;
    text-align: left;
  }
  .ig-dm-avatar-small {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
  }
  .ig-dm-avatar-small img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* IG DM Chat Bubble Styles */
  .ig-dm-msg {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    margin-bottom: 6px;
  }
  .ig-dm-msg-me {
    justify-content: flex-end;
  }
  .ig-dm-bubble {
    max-width: 80%;
    padding: 8px 14px;
    border-radius: 18px;
    font-size: 12.5px;
    line-height: 1.45;
    word-break: break-word;
  }
  .ig-dm-msg-me .ig-dm-bubble {
    background: linear-gradient(135deg, #7C3AED, #EC4899);
    color: #FFFFFF;
    border-bottom-right-radius: 4px;
  }
  .ig-dm-msg:not(.ig-dm-msg-me) .ig-dm-bubble {
    background: #FFFFFF;
    color: #262626;
    border: 1px solid #EFEFEF;
    border-bottom-left-radius: 4px;
  }

  /* WhatsApp DM / Chat Mockup Styles */
  .concept1 .tl-card.wa-chat-container {
    padding: 16px 18px;
    border-color: #25D366;
    background: linear-gradient(180deg, #FFFFFF 0%, #F0FDF4 100%);
  }
  .wa-chat-box {
    background: #EFEAE2;
    background-image: radial-gradient(#dcd5cb 0.75px, transparent 0.75px);
    background-size: 12px 12px;
    border-radius: 16px;
    border: 1px solid #D1E7DD;
    box-shadow: 0 8px 24px rgba(37, 211, 102, 0.12);
    overflow: hidden;
    margin-top: 12px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  }
  .wa-chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: #008069;
    color: #FFFFFF;
  }
  .wa-chat-user {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .wa-chat-avatar {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    border: 1.5px solid rgba(255,255,255,0.7);
    flex-shrink: 0 !important;
    display: block !important;
  }
  .wa-chat-avatar img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: cover !important;
    border-radius: 50% !important;
    display: block !important;
  }
  .wa-chat-name-wrap {
    display: flex;
    flex-direction: column;
    text-align: left;
  }
  .wa-chat-name {
    font-weight: 600;
    font-size: 13.5px;
    color: #FFFFFF;
    line-height: 1.2;
    display: flex;
    align-items: center;
    gap: 5px;
  }
  .wa-chat-status {
    font-size: 11px;
    color: #D1F4E0;
  }
  .wa-chat-body {
    padding: 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 340px;
    overflow-y: auto;
  }
  .wa-chat-date-pill {
    align-self: center;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 1px 2px rgba(11,20,26,0.12);
    padding: 4px 12px;
    border-radius: 8px;
    font-size: 11px;
    color: #54656F;
    font-weight: 600;
    margin: 2px 0 6px;
  }
  .wa-msg {
    max-width: 82%;
    padding: 7px 11px 6px;
    border-radius: 9px;
    font-size: 12.5px;
    line-height: 1.45;
    word-break: break-word;
    box-shadow: 0 1px 2px rgba(11,20,26,0.1);
    position: relative;
    text-align: left;
  }
  .wa-msg.sent {
    align-self: flex-end;
    background: #D9FDD3;
    color: #111B21;
    border-top-right-radius: 2px;
  }
  .wa-msg.received {
    align-self: flex-start;
    background: #FFFFFF;
    color: #111B21;
    border-top-left-radius: 2px;
  }
  .wa-msg-meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 3px;
    float: right;
    margin-left: 10px;
    margin-top: 4px;
  }
  .wa-msg-time {
    font-size: 10px;
    color: #667781;
  }
  .wa-msg-check {
    font-size: 12px;
    color: #53BDEB;
    line-height: 1;
  }
  .wa-msg-link {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(0,128,105,0.08);
    border-radius: 8px;
    padding: 6px 10px;
    margin-top: 5px;
    color: #008069;
    font-weight: 600;
    font-size: 11.5px;
    text-decoration: none;
    border: 1px dashed #008069;
  }
  .wa-chat-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #F0F2F5;
    border-top: 1px solid #E2E8F0;
  }
  .wa-chat-input {
    flex: 1;
    background: #FFFFFF;
    border-radius: 20px;
    padding: 7px 14px;
    font-size: 12px;
    color: #8696A0;
    text-align: left;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  }

  /* Month 2 Specific Badges */
  .badge-month2 {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: linear-gradient(135deg, #FF6FA0, #7C3AED);
    color: #FFFFFF;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 999px;
    letter-spacing: .04em;
    margin-bottom: 8px;
    text-transform: uppercase;
  }
  .badge-birthday {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: linear-gradient(135deg, #F59E0B, #EF4444);
    color: #FFFFFF;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 999px;
    letter-spacing: .04em;
    margin-bottom: 8px;
    text-transform: uppercase;
    box-shadow: 0 4px 12px rgba(245,158,11,0.3);
  }


  /* ============================================================
     STATS SECTION: WHATSAPP & INSTAGRAM CHAT ANALYTICS
     ============================================================ */
  .concept1 .stats-section {
    padding: 60px 20px;
    background: linear-gradient(180deg, transparent 0%, rgba(255,214,232,0.18) 50%, transparent 100%);
  }
  .stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-top: 30px;
  }
  .stat-card {
    background: var(--white);
    border-radius: 18px;
    padding: 22px 20px;
    box-shadow: 0 10px 28px rgba(90,75,79,.09);
    border: 1.5px solid var(--lavender);
    text-align: center;
    transition: transform .25s ease, box-shadow .25s ease;
  }
  .stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 32px rgba(90,75,79,.14);
  }
  .stat-card .stat-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    margin: 0 auto 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--blush);
  }
  .stat-card .stat-num {
    font-family: 'Fredoka', sans-serif;
    font-size: 28px;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.1;
    margin-bottom: 6px;
  }
  .stat-card .stat-label {
    font-size: 13px;
    color: var(--ink-soft);
    font-weight: 500;
  }

  /* Detailed Platform Comparison Cards */
  .platform-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    margin-top: 28px;
  }
  .platform-card {
    background: var(--white);
    border-radius: 20px;
    padding: 24px 26px;
    box-shadow: 0 12px 30px rgba(90,75,79,.10);
    border: 2px solid var(--blush);
    text-align: left;
  }
  .platform-card.wa {
    border-color: #25D366;
    background: linear-gradient(180deg, #FFFFFF 0%, #F0FDF4 100%);
  }
  .platform-card.ig {
    border-color: #E1306C;
    background: linear-gradient(180deg, #FFFFFF 0%, #FFF5F8 100%);
  }
  .platform-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
  }
  .platform-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFF;
    font-weight: 700;
    font-size: 16px;
  }
  .platform-card.wa .platform-icon { background: #25D366; }
  .platform-card.ig .platform-icon { background: linear-gradient(45deg, #F09433, #DC2743, #BC1888); }
  .platform-title {
    font-family: 'Fredoka', sans-serif;
    font-size: 17px;
    font-weight: 600;
    color: var(--ink);
  }
  .platform-stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: var(--ink-soft);
    margin-bottom: 8px;
  }
  .platform-stat-row span.val {
    font-family: 'Fredoka', sans-serif;
    font-weight: 600;
    color: var(--ink);
  }
  .progress-bar-bg {
    width: 100%;
    height: 8px;
    background: #EAEAEA;
    border-radius: 999px;
    overflow: hidden;
    margin: 10px 0 16px;
    display: flex;
  }
  .progress-fill-aku {
    height: 100%;
    background: linear-gradient(90deg, #7C3AED, #EC4899);
  }
  .progress-fill-kamu {
    height: 100%;
    background: linear-gradient(90deg, #3B82F6, #10B981);
  }


  /* ============================================================
     AESTHETIC WINNER SHOWCASE CARDS (KAMU)
     ============================================================ */
  .winner-showcase {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 24px;
    margin-top: 30px;
  }
  .showcase-card {
    background: linear-gradient(145deg, #FFFFFF 0%, #FFF6F9 100%);
    border-radius: 24px;
    padding: 24px 26px;
    box-shadow: 0 14px 34px rgba(232, 111, 160, 0.12);
    border: 1.5px solid #FFD0E0;
    text-align: left;
    position: relative;
    transition: transform .25s ease, box-shadow .25s ease;
  }
  .showcase-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(232, 111, 160, 0.18);
  }
  .showcase-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    gap: 10px;
  }
  .showcase-title {
    font-family: 'Fredoka', sans-serif;
    font-size: 16.5px;
    font-weight: 700;
    color: #372A35;
    line-height: 1.3;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .showcase-badge {
    background: linear-gradient(135deg, #FF6FA0, #E86FA0);
    color: #FFFFFF;
    font-size: 10.5px;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 999px;
    box-shadow: 0 4px 12px rgba(232,111,160,0.3);
    text-transform: uppercase;
    letter-spacing: .05em;
    white-space: nowrap;
  }

  /* Performer Stat Rows */
  .performer-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
  }
  .performer-row.kamu-winner {
    background: linear-gradient(135deg, #FFE8F0 0%, #FFF0F5 100%);
    border: 1px solid #FFC2D6;
    border-radius: 14px;
    padding: 10px 14px;
    margin: 12px 0 8px;
  }
  .performer-row.kamu-winner .lbl {
    font-size: 13.5px;
    font-weight: 700;
    color: #D44070;
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .performer-row.kamu-winner .val {
    font-family: 'Fredoka', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #D44070;
    background: #FFFFFF;
    padding: 3px 12px;
    border-radius: 999px;
    box-shadow: 0 2px 6px rgba(212,64,112,0.15);
  }

  .performer-row.aku-second {
    background: #F9FAFB;
    border: 1px solid #F3F4F6;
    border-radius: 12px;
    padding: 8px 14px;
    margin-bottom: 14px;
  }
  .performer-row.aku-second .lbl {
    font-size: 12.5px;
    color: #6B7280;
    font-weight: 500;
  }
  .performer-row.aku-second .val {
    font-family: 'Fredoka', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #9CA3AF;
  }

  /* Aesthetic Progress Bar */
  .aesthetic-progress-bg {
    width: 100%;
    height: 10px;
    border-radius: 999px;
    background: #F3F4F6;
    overflow: hidden;
    padding: 2px;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.06);
    display: flex;
    box-sizing: border-box;
  }
  .aesthetic-progress-kamu {
    height: 100%;
    background: linear-gradient(90deg, #FF6FA0, #FF3366);
    border-radius: 999px;
    box-shadow: 0 2px 8px rgba(255, 51, 102, 0.4);
  }
  .aesthetic-progress-aku {
    height: 100%;
    background: #E5E7EB;
    border-radius: 999px;
  }


  /* ============================================================
     STATS SECTION: WHATSAPP, INSTAGRAM & TIKTOK ANALYTICS
     ============================================================ */
  .concept1 .stats-section {
    padding: 60px 20px;
    background: linear-gradient(180deg, transparent 0%, rgba(255,214,232,0.22) 50%, transparent 100%);
  }
  .stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin-top: 30px;
  }
  .stat-card {
    background: var(--white);
    border-radius: 20px;
    padding: 22px 18px;
    box-shadow: 0 10px 28px rgba(90,75,79,.09);
    border: 2px solid var(--blush);
    text-align: center;
    transition: transform .25s ease, box-shadow .25s ease;
    position: relative;
    overflow: hidden;
  }
  .stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 34px rgba(90,75,79,.15);
  }
  .stat-card .stat-num {
    font-family: 'Fredoka', sans-serif;
    font-size: 28px;
    font-weight: 700;
    color: var(--blush-deep);
    line-height: 1.1;
    margin-bottom: 6px;
  }
  .stat-card .stat-label {
    font-size: 13.5px;
    font-family: 'Fredoka', sans-serif;
    color: var(--ink);
    font-weight: 600;
    margin-bottom: 4px;
  }
  .stat-card .stat-sub {
    font-size: 11.5px;
    color: var(--ink-soft);
    line-height: 1.35;
  }

  /* Detailed Platform Comparison Cards */
  .platform-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
    margin-top: 28px;
  }
  .platform-card {
    background: var(--white);
    border-radius: 20px;
    padding: 22px 24px;
    box-shadow: 0 12px 30px rgba(90,75,79,.10);
    border: 2px solid var(--blush);
    text-align: left;
  }
  .platform-card.wa {
    border-color: #25D366;
    background: linear-gradient(180deg, #FFFFFF 0%, #F0FDF4 100%);
  }
  .platform-card.tt {
    border-color: #000000;
    background: linear-gradient(180deg, #FFFFFF 0%, #F4F4F6 100%);
  }
  .platform-card.ig {
    border-color: #E1306C;
    background: linear-gradient(180deg, #FFFFFF 0%, #FFF5F8 100%);
  }
  .platform-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
  }
  .platform-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFF;
    font-weight: 700;
    font-size: 14px;
  }
  .platform-card.wa .platform-icon { background: #25D366; }
  .platform-card.tt .platform-icon { background: #000000; color: #00F2FE; text-shadow: 1px 1px 0 #FF0050; }
  .platform-card.ig .platform-icon { background: linear-gradient(45deg, #F09433, #DC2743, #BC1888); }
  .platform-title {
    font-family: 'Fredoka', sans-serif;
    font-size: 16.5px;
    font-weight: 600;
    color: var(--ink);
  }
  .platform-stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: var(--ink-soft);
    margin-bottom: 6px;
  }
  .platform-stat-row span.val {
    font-family: 'Fredoka', sans-serif;
    font-weight: 700;
    color: var(--ink);
  }
  .progress-bar-bg {
    width: 100%;
    height: 8px;
    background: #EAEAEA;
    border-radius: 999px;
    overflow: hidden;
    margin: 8px 0 14px;
    display: flex;
  }
  .progress-fill-aku {
    height: 100%;
    background: linear-gradient(90deg, #7C3AED, #EC4899);
  }
  .progress-fill-kamu {
    height: 100%;
    background: linear-gradient(90deg, #FF6FA0, #FF3366);
  }

  /* Aesthetic Winner Showcase Cards */
  .winner-showcase {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 28px;
  }
  .showcase-card {
    background: linear-gradient(145deg, #FFFFFF 0%, #FFF6F9 100%);
    border-radius: 22px;
    padding: 22px 24px;
    box-shadow: 0 14px 34px rgba(232, 111, 160, 0.12);
    border: 1.5px solid #FFD0E0;
    text-align: left;
    position: relative;
  }
  .showcase-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    gap: 8px;
  }
  .showcase-title {
    font-family: 'Fredoka', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #372A35;
  }
  .showcase-badge {
    background: linear-gradient(135deg, #FF6FA0, #E86FA0);
    color: #FFFFFF;
    font-size: 10px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
    box-shadow: 0 4px 12px rgba(232,111,160,0.3);
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space: nowrap;
  }
  .performer-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .performer-row.kamu-winner {
    background: linear-gradient(135deg, #FFE8F0 0%, #FFF0F5 100%);
    border: 1px solid #FFC2D6;
    border-radius: 14px;
    padding: 10px 14px;
    margin: 10px 0 8px;
  }
  .performer-row.kamu-winner .lbl {
    font-size: 13.5px;
    font-weight: 700;
    color: #D44070;
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .performer-row.kamu-winner .val {
    font-family: 'Fredoka', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #D44070;
    background: #FFFFFF;
    padding: 3px 12px;
    border-radius: 999px;
    box-shadow: 0 2px 6px rgba(212,64,112,0.15);
  }
  .performer-row.aku-second {
    background: #F9FAFB;
    border: 1px solid #F3F4F6;
    border-radius: 12px;
    padding: 8px 14px;
    margin-bottom: 12px;
  }
  .performer-row.aku-second .lbl {
    font-size: 12.5px;
    color: #6B7280;
    font-weight: 500;
  }
  .performer-row.aku-second .val {
    font-family: 'Fredoka', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #9CA3AF;
  }
  .aesthetic-progress-bg {
    width: 100%;
    height: 10px;
    border-radius: 999px;
    background: #F3F4F6;
    overflow: hidden;
    padding: 2px;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.06);
    display: flex;
  }
  .aesthetic-progress-kamu {
    height: 100%;
    background: linear-gradient(90deg, #FF6FA0, #FF3366);
    border-radius: 999px;
    box-shadow: 0 2px 8px rgba(255, 51, 102, 0.4);
  }
  .aesthetic-progress-aku {
    height: 100%;
    background: #E5E7EB;
    border-radius: 999px;
  }


  /* ============================================================
     SPECIAL RESMI JADIAN CARD & CUKING CAT STICKER DESIGN SYSTEM
     ============================================================ */
  .cuking-sticker {
    display: inline-block;
    vertical-align: middle;
    pointer-events: none;
    user-select: none;
  }

  /* Floating Cuking in Hero */
  .hero-cuking {
    position: absolute;
    top: 40px;
    right: 8%;
    width: 110px;
    height: auto;
    filter: drop-shadow(0 8px 18px rgba(255, 111, 160, 0.25));
    animation: floatCuking 4s ease-in-out infinite;
    z-index: 4;
  }
  @keyframes floatCuking {
    0%, 100% { transform: translateY(0) rotate(2deg); }
    50% { transform: translateY(-10px) rotate(-3deg); }
  }

  /* Special Resmi Jadian Timeline Card */
  .concept1 .tl-item.jadian {
    margin-top: 20px;
    margin-bottom: 55px;
  }
  .concept1 .tl-item.jadian .tl-card {
    background: linear-gradient(145deg, #FFF0F5 0%, #FFE4EC 45%, #FFD6E8 100%);
    border: 2.5px solid #FF7597;
    box-shadow: 0 16px 42px rgba(255, 111, 160, 0.28), inset 0 0 0 3px rgba(255, 255, 255, 0.7);
    padding: 28px 30px;
    border-radius: 24px;
    position: relative;
    overflow: visible;
  }
  .concept1 .tl-item.jadian .tl-dot {
    background: #FF2E63;
    border-color: #FFFFFF;
    box-shadow: 0 0 0 4px #FF85A2, 0 0 18px rgba(255, 46, 99, 0.6);
    width: 20px;
    height: 20px;
  }
  .concept1 .tl-item.jadian .jadian-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #FF2E63, #FF6FA0);
    color: #FFFFFF;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 999px;
    box-shadow: 0 4px 12px rgba(255, 46, 99, 0.3);
    letter-spacing: .06em;
    text-transform: uppercase;
    margin-bottom: 8px;
  }
  .concept1 .tl-item.jadian .tl-date {
    color: #E81A53;
    font-weight: 700;
    font-size: 12.5px;
    letter-spacing: .08em;
  }
  .concept1 .tl-item.jadian h3 {
    font-family: 'Fredoka', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: #2E0514;
    margin-top: 4px;
    margin-bottom: 10px;
    text-shadow: 0 2px 10px rgba(255, 111, 160, 0.2);
  }
  .concept1 .tl-item.jadian p {
    font-size: 15px;
    color: #4A1A2A;
    line-height: 1.7;
    font-weight: 500;
  }
  
  /* Cuking Sticker Peeking on Jadian Card */
  .jadian-cuking-peeking {
    position: absolute;
    top: -45px;
    right: -15px;
    width: 95px;
    height: auto;
    filter: drop-shadow(0 6px 14px rgba(0,0,0,0.15));
    transform: rotate(12deg);
    z-index: 5;
  }

  /* Section Title Cuking Stickers */
  .title-cuking {
    width: 45px;
    height: auto;
    vertical-align: middle;
    margin-left: 8px;
    filter: drop-shadow(0 4px 10px rgba(255,111,160,0.25));
  }

  /* Polaroid Corner Cuking */
  .polaroid-cuking {
    position: absolute;
    bottom: 8px;
    right: 8px;
    width: 42px;
    height: auto;
    filter: drop-shadow(0 3px 6px rgba(0,0,0,0.15));
    z-index: 3;
  }

  /* Letter Corner Cuking */
  .letter-cuking {
    position: absolute;
    top: -30px;
    right: 20px;
    width: 75px;
    height: auto;
    filter: drop-shadow(0 6px 14px rgba(0,0,0,0.15));
    z-index: 4;
  }


  /* ============================================================
     SUNFLOWER STICKER DECORATIONS
     ============================================================ */
  .sunflower-sticker {
    display: inline-block;
    vertical-align: middle;
    pointer-events: none;
    user-select: none;
  }

  /* Hero Left Sunflower */
  .hero-sunflower {
    position: absolute;
    top: 50px;
    left: 7%;
    width: 90px;
    height: auto;
    filter: drop-shadow(0 8px 18px rgba(255, 200, 50, 0.35));
    animation: floatSunflower 4.5s ease-in-out infinite;
    z-index: 4;
  }
  @keyframes floatSunflower {
    0%, 100% { transform: translateY(0) rotate(-4deg); }
    50% { transform: translateY(-12px) rotate(4deg); }
  }

  /* Section Title Sunflower Sticker */
  .title-sunflower {
    width: 38px;
    height: auto;
    vertical-align: middle;
    margin-left: 6px;
    filter: drop-shadow(0 4px 10px rgba(255, 180, 0, 0.3));
  }

  /* Jadian Sunflower Badge */
  .jadian-sunflower {
    position: absolute;
    bottom: -20px;
    left: 18px;
    width: 65px;
    height: auto;
    filter: drop-shadow(0 6px 14px rgba(255, 180, 0, 0.4));
    z-index: 5;
  }

  /* Polaroid Sunflower Pin */
  .polaroid-sunflower {
    position: absolute;
    top: -14px;
    right: -10px;
    width: 48px;
    height: auto;
    filter: drop-shadow(0 4px 10px rgba(0,0,0,0.18));
    z-index: 4;
    transform: rotate(15deg);
  }

  /* Letter Sunflower Corner */
  .letter-sunflower {
    position: absolute;
    bottom: -25px;
    left: -15px;
    width: 70px;
    height: auto;
    filter: drop-shadow(0 6px 14px rgba(255, 180, 0, 0.35));
    z-index: 4;
    transform: rotate(-10deg);
  }


  /* Ensure Hero Text stays on top of stickers */
  .hero .eyebrow, .hero h1, .hero .names, .hero .sub, .hero .counter {
    position: relative;
    z-index: 5;
  }

  /* Hero Sunflower Sticker - Behind Text & Shifted Left */
  .hero-sunflower {
    position: absolute;
    top: 15px;
    left: 2%;
    width: 80px;
    height: auto;
    filter: drop-shadow(0 8px 18px rgba(255, 200, 50, 0.25));
    animation: floatSunflower 4.5s ease-in-out infinite;
    z-index: 1;
    opacity: 0.85;
    pointer-events: none;
  }

  /* Hero Cuking Sticker - Behind Text & Shifted Right */
  .hero-cuking {
    position: absolute;
    top: 15px;
    right: 2%;
    width: 95px;
    height: auto;
    filter: drop-shadow(0 8px 18px rgba(255, 111, 160, 0.25));
    animation: floatCuking 4s ease-in-out infinite;
    z-index: 1;
    opacity: 0.85;
    pointer-events: none;
  }



/* Inline SVG Image Replacements */
.icon-svg-inline { display: inline-block; vertical-align: middle; height: 1em; width: auto; }