/*REDACTION STYLE*/

/*01. PENCIL UNDERLINE*/
/* STYLE 01*/
.my-tf-pencil-underline-v1 {
  position: relative;
  display: inline-block;
  color: #222;
}

.my-tf-pencil-underline-v1::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0.1em;
  width: 100%;
  height: 6px;
  background: none;
  border-bottom: 2.5px solid var(--my-tf-accent);
  transform: rotate(-2deg);
  border-radius: 50% 30% 70% 40%;
  opacity: 0.7;
}

/* >>> STYLE 02 */
.my-tf-pencil-underline-v2 {
  position: relative;
  display: inline-block;
  padding-bottom: 1px;
}

.my-tf-pencil-underline-v2 span {
  position: relative;
  z-index: 2;
}

.my-tf-pencil-underline-v2::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  height: 6px;
  background: var(--my-tf-accent);
  clip-path: polygon(
    0% 65%, 8% 60%, 16% 70%, 24% 62%, 32% 68%, 40% 60%,
    48% 72%, 56% 63%, 64% 70%, 72% 62%, 80% 68%, 90% 60%,
    100% 66%, 100% 100%, 0% 100%
  );
  transform: rotate(-0.4deg);
  opacity: 0.9;
}

.my-tf-pencil-underline-v2::after {
  content: "";
  position: absolute;
  left: 3%;
  right: 2%;
  bottom: 0px;
  height: 4px;
  background: var(--my-tf-accent);
  clip-path: polygon(
    0% 62%, 10% 66%, 18% 60%, 28% 68%, 36% 62%, 44% 66%,
    52% 60%, 60% 69%, 70% 62%, 80% 66%, 90% 61%, 100% 64%,
    100% 100%, 0% 100%
  );
  transform: rotate(0.5deg);
  opacity: 0.75;
  filter: blur(0.25px);
}

/* STYLE 03 */
.my-tf-pencil-underline-v3 {
  position: relative;
  display: inline-block;
}

.my-tf-pencil-underline-v3::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;

  bottom: 1px; 

  height: 5px;

  background: var(--my-tf-accent);

  clip-path: polygon(
    0% 70%, 10% 62%, 18% 72%, 28% 60%, 38% 70%,
    48% 60%, 58% 72%, 68% 62%, 78% 70%, 88% 60%,
    100% 66%, 100% 100%, 0% 100%
  );

  transform: rotate(-0.3deg);
  opacity: 0.85;

  z-index: -1;
}

.my-tf-pencil-underline-v3::after {
  content: "";
  position: absolute;
  left: 4%;
  right: 2%;

  bottom: -3px; 

  height: 4px;

  background: var(--my-tf-accent);

  clip-path: polygon(
    0% 62%, 12% 70%, 22% 58%, 32% 70%, 42% 60%,
    52% 68%, 62% 60%, 72% 70%, 82% 62%, 92% 68%,
    100% 60%, 100% 100%, 0% 100%
  );

  transform: rotate(0.5deg);
  opacity: 0.65;

  filter: blur(0.2px);

  z-index: -2;
}

/* STYLE 04 */
.my-tf-pencil-underline-v4 {
  position: relative;
  display: inline-block;
  padding: 4px 0;
}

.my-tf-pencil-underline-v4 span {
  position: relative;
  z-index: 2;
}

.my-tf-pencil-underline-v4::before {
  content: "";
  position: absolute;
  left: -2%;
  right: -2%;
  top: -0.1em;

  height: 5px;

  background: var(--my-tf-accent);

  transform: rotate(-1deg);

  opacity: 0.85;

  clip-path: polygon(
    0% 55%, 6% 45%, 12% 60%, 18% 50%, 24% 62%,
    30% 48%, 36% 65%, 42% 52%, 48% 60%, 54% 50%,
    60% 62%, 66% 48%, 72% 60%, 78% 50%, 84% 62%,
    90% 48%, 96% 60%, 100% 55%, 100% 100%, 0% 100%
  );
}

.my-tf-pencil-underline-v4::after {
  content: "";
  position: absolute;
  left: -3%;
  right: -1%;
  bottom: -0.01em;

  height: 5.5px;

  background: var(--my-tf-accent);

  transform: rotate(-1.2deg);

  opacity: 0.75;

  filter: blur(0.2px);

  clip-path: polygon(
    0% 60%, 5% 50%, 10% 65%, 16% 52%, 22% 66%,
    28% 48%, 34% 62%, 40% 50%, 46% 64%, 52% 52%,
    58% 66%, 64% 48%, 70% 62%, 76% 50%, 82% 64%,
    88% 52%, 94% 60%, 100% 55%, 100% 100%, 0% 100%
  );
}

/* STYLE 05 */

    .my-tf-pencil-underline-v5 {
        position: relative;
        display: inline-block; 
        padding-bottom: 2px;
    }

    .my-tf-pencil-underline-v5 span {
        position: relative;
        z-index: 2;
    }

    .my-tf-pencil-underline-v5::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 1px;
        height: 2px;
        pointer-events: none;
        
        background: repeating-linear-gradient(
            90deg,
            var(--my-tf-accent),     
            var(--my-tf-accent) 5px, 
            transparent 5px,         
            transparent 8px,         
            var(--my-tf-accent) 8px,   
            var(--my-tf-accent) 18px,  
            transparent 18px,         
            transparent 21px,         
            var(--my-tf-accent) 21px,   
            var(--my-tf-accent) 35px,   
            transparent 35px,         
            transparent 38px         
        );
        
        opacity: 0.8;
    }


/*02. PENCIL ROUND*/
/* STYLE 01 */
.my-tf-pencil-round-v1 {
  text-decoration: none;
  position: relative;
  display: inline-block;
  padding: 2px 5px;
}

.my-tf-pencil-round-v1::before {
  content: '';
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  border: 2px solid var(--my-tf-accent-red);
  border-radius: 60% 40% 45% 55% / 55% 45% 60% 40%;
  transform: rotate(2deg);
  pointer-events: none;
}

/* >>> STYLE 02*/
.my-tf-pencil-round-v2 {
  position: relative;
  display: inline-block;
  padding: 2px 16px;
}

.my-tf-pencil-round-v2 span {
  position: relative;
  z-index: 2;
}

.my-tf-pencil-round-v2::before {
  content: "";
  position: absolute;
  inset: -5px;
  border: 3px solid var(--my-tf-accent-red);
  border-radius: 50%;
  transform: scaleY(0.78) rotate(-4deg);
  opacity: 0.9;
  box-shadow:
    1px 0 0 var(--my-tf-accent-red),
    -1px 1px 0 var(--my-tf-accent-red);
}

.my-tf-pencil-round-v2::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: conic-gradient(
    from 35deg,
    var(--my-tf-accent-red) 0deg 50deg,
    transparent 50deg 80deg,
    var(--my-tf-accent-red) 80deg 150deg,
    transparent 150deg 185deg,
    var(--my-tf-accent-red) 185deg 255deg,
    transparent 255deg 290deg,
    var(--my-tf-accent-red) 290deg 360deg
  );
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 0);
          mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 0);
  transform: scaleY(0.82) rotate(9deg);
  transform-origin: center;
  opacity: 0.85;
  filter: blur(0.25px);
}

/*03. PENCIL STABILO*/
/* STYLE 01 */
.my-tf-pencil-stabilo-v1 {
  background-color: var(--my-tf-stabilo-color);
  transform: skew(-5deg, 0deg);
  display: inline;
  line-height: 1.5;
}

/* STYLE 02 */
.my-tf-pencil-stabilo-v2 {
  position: relative;
  display: inline-block;
  padding: 4px 12px;
  z-index: 1;
}

.my-tf-pencil-stabilo-v2::before {
  content: "";
  position: absolute;
  inset: -4px;

  border-radius: 50%;
  background: var(--my-tf-stabilo-color);

  transform: rotate(-4deg) scaleY(0.82);
  opacity: 0.95;

  z-index: -2;
}

.my-tf-pencil-stabilo-v2::after {
  content: "";
  position: absolute;
  inset: -2px;

  border-radius: 50%;
  background: var(--my-tf-stabilo-color);

  transform: rotate(6deg) scaleY(0.86);
  opacity: 0.6;

  filter: blur(0.4px);
  z-index: -1;
}

/*STYLE 03*/
.my-tf-pencil-stabilo-v3 {
  position: relative;
  display: inline-block;
}

.my-tf-pencil-stabilo-v3 span {
  position: relative;
  z-index: 2;
}

.my-tf-pencil-stabilo-v3::before {
  content: "";
  position: absolute;
  top: -1px; 
  bottom: -1px;
  left: -4px;
  right: -4px;
  
  pointer-events: none;
  z-index: 1; 
  
  background: repeating-linear-gradient(
    -60deg,
    var(--my-tf-accent), 
    var(--my-tf-accent) 2px, 
    transparent 2px, 
    transparent 4px
  );
  
  opacity: 0.4; 
}

/*04. PENCIL STRIKE*/
/*STYLE 01*/
.my-tf-pencil-strike-v1 {
  position: relative;
  display: inline-block;
}

.my-tf-pencil-strike-v1 span {
  position: relative;
  z-index: 2;
}

.my-tf-pencil-strike-v1::before {
  content: "";
  position: absolute;
  left: -10;
  right: -10;
  top: 50%;
  height: 5px;
  background: var(--my-tf-accent-red);
  clip-path: polygon(
    0% 55%, 8% 45%, 16% 60%, 24% 48%, 32% 62%, 40% 50%,
    48% 65%, 56% 52%, 64% 60%, 72% 48%, 80% 62%, 90% 50%,
    100% 55%, 100% 100%, 0% 100%
  );
  transform: translateY(-50%) rotate(-20deg);
  opacity: 0.9;
}

.my-tf-pencil-strike-v1::after {
  content: "";
  position: absolute;
  left: 4%;
  right: 2%;
  top: 52%;
  height: 3px;
  background: var(--my-tf-accent-red);
  clip-path: polygon(
    0% 50%, 10% 62%, 18% 48%, 28% 60%, 36% 50%, 44% 64%,
    52% 52%, 60% 58%, 70% 48%, 80% 62%, 90% 50%, 100% 56%,
    100% 100%, 0% 100%
  );
  transform: translateY(-50%) rotate(-20deg);
  opacity: 0.75;
  filter: blur(0.25px);
}

/*STYLE 02*/
.my-tf-pencil-strike-v2 {
  position: relative;
  display: inline-block;
}

.my-tf-pencil-strike-v2 span {
  position: relative;
  z-index: 2;
}

.my-tf-pencil-strike-v2::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 5px;
  background: var(--my-tf-accent-red);
  clip-path: polygon(
    0% 55%, 8% 45%, 16% 60%, 24% 48%, 32% 62%, 40% 50%,
    48% 65%, 56% 52%, 64% 60%, 72% 48%, 80% 62%, 90% 50%,
    100% 55%, 100% 100%, 0% 100%
  );
  transform: translateY(-50%) rotate(-0.6deg);
  opacity: 0.9;
}

.my-tf-pencil-strike-v2::after {
  content: "";
  position: absolute;
  left: 4%;
  right: 2%;
  top: 52%;
  height: 3px;
  background: var(--my-tf-accent-red);
  clip-path: polygon(
    0% 50%, 10% 62%, 18% 48%, 28% 60%, 36% 50%, 44% 64%,
    52% 52%, 60% 58%, 70% 48%, 80% 62%, 90% 50%, 100% 56%,
    100% 100%, 0% 100%
  );
  transform: translateY(-50%) rotate(0.5deg);
  opacity: 0.75;
  filter: blur(0.25px);
}

/*STYLE 03*/
.my-tf-pencil-strike-v3 {
  position: relative;
  display: inline-block;
}

.my-tf-pencil-strike-v3 span {
  position: relative;
  z-index: 2;
}

.my-tf-pencil-strike-v3::before,
.my-tf-pencil-strike-v3::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 95%;
  left: 2.5%;
  transform-origin: center;
}

.my-tf-pencil-strike-v3::before {
  height: 0.30em;
  background: var(--my-tf-accent-red);
  clip-path: polygon(
    0% 55%, 8% 45%, 16% 60%, 24% 48%, 32% 62%, 40% 50%,
    48% 65%, 56% 52%, 64% 60%, 72% 48%, 80% 62%, 90% 50%,
    100% 55%, 100% 100%, 0% 100%
  );
  transform: translateY(-50%) rotate(12deg);
  opacity: 0.9;
}

.my-tf-pencil-strike-v3::after {
  height: 0.22em;
  background: var(--my-tf-accent-red);
  clip-path: polygon(
    0% 50%, 10% 62%, 18% 48%, 28% 60%, 36% 50%, 44% 64%,
    52% 52%, 60% 58%, 70% 48%, 80% 62%, 90% 50%, 100% 56%,
    100% 100%, 0% 100%
  );
  transform: translateY(-50%) rotate(-11deg);
  opacity: 0.75;
  filter: blur(0.02em);
}

/*05. PENCIL SQUARE*/
/* STYLE 02 */
.my-tf-pencil-square-v2 {
  position: relative;
  display: inline-block;
  padding: 4px 12px;
}

.my-tf-pencil-square-v2 span {
  position: relative;
  z-index: 2;
}

.my-tf-pencil-square-v2::before {
  content: "";
  position: absolute;
  inset: -3px;

  border: 2px solid var(--my-tf-accent-red);
  border-radius: 0;

  transform: rotate(-0.8deg);
  opacity: 0.9;

  box-shadow: 0.5px 0 0 var(--my-tf-accent-red);
}

.my-tf-pencil-square-v2::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 0;

  background:
    /* atas - gap lebih lebar */
    linear-gradient(var(--my-tf-accent-red), var(--my-tf-accent-red)) top left / 18% 2px no-repeat,
    linear-gradient(var(--my-tf-accent-red), var(--my-tf-accent-red)) top right / 55% 2px no-repeat,

    /* kanan - patah kecil */
    linear-gradient(var(--my-tf-accent-red), var(--my-tf-accent-red)) top right / 2px 38% no-repeat,
    linear-gradient(var(--my-tf-accent-red), var(--my-tf-accent-red)) bottom right / 2px 42% no-repeat,

    /* bawah - gap lebar */
    linear-gradient(var(--my-tf-accent-red), var(--my-tf-accent-red)) bottom left / 58% 2px no-repeat,
    linear-gradient(var(--my-tf-accent-red), var(--my-tf-accent-red)) bottom right / 14% 2px no-repeat,

    /* kiri - gap lebih jelas */
    linear-gradient(var(--my-tf-accent-red), var(--my-tf-accent-red)) top left / 2px 26% no-repeat,
    linear-gradient(var(--my-tf-accent-red), var(--my-tf-accent-red)) bottom left / 2px 34% no-repeat;

  transform: rotate(0.6deg);
  opacity: 0.65;

  filter: blur(0.15px);
}

/*07. PENCIL BRACKET*/
/* STYLE 01 */
.my-tf-pencil-bracket-v1 {
  position: relative;
  display: inline-block;
  padding: 0 10px;
}

.my-tf-pencil-bracket-v1 span {
  position: relative;
  z-index: 2;
}

.my-tf-pencil-bracket-v1::before {
  content: "";
  position: absolute;
  top: -3px;
  bottom: -4px;
  left: 0;

  width: 13px;

  border-left: 3.2px solid var(--my-tf-accent);
  border-top: 5px solid var(--my-tf-accent);
  border-bottom: 2.6px solid var(--my-tf-accent);

  border-radius: 2px;

  transform: rotate(-2.2deg) translateY(-0.5px);

  opacity: 0.92;
}

.my-tf-pencil-bracket-v1::after {
  content: "";
  position: absolute;
  top: -3px;
  bottom: -4px; 
  right: 0;

  width: 10px;

  border-right: 2.6px solid var(--my-tf-accent);
  border-top: 2.8px solid var(--my-tf-accent);
  border-bottom: 4.1px solid var(--my-tf-accent);

  border-radius: 2px;

  transform: rotate(-2.8deg) translateY(1px);

  opacity: 0.85;
}

/* STYLE 02 */
.my-tf-pencil-bracket-v2 {
  position: relative;
  display: inline-block;
  padding: 4px 4px; 
}

.my-tf-pencil-bracket-v2 span {
  position: relative;
  z-index: 2;
}

.my-tf-pencil-bracket-v2::before,
.my-tf-pencil-bracket-v2::after {
  content: "";
  position: absolute;

  inset: -1px;

  pointer-events: none;

  background-image:
    /* KIRI ATAS */
    linear-gradient(var(--my-tf-accent-red), var(--my-tf-accent-red)),
    linear-gradient(var(--my-tf-accent-red), var(--my-tf-accent-red)),

    /* KANAN ATAS */
    linear-gradient(var(--my-tf-accent-red), var(--my-tf-accent-red)),
    linear-gradient(var(--my-tf-accent-red), var(--my-tf-accent-red)),

    /* KIRI BAWAH */
    linear-gradient(var(--my-tf-accent-red), var(--my-tf-accent-red)),
    linear-gradient(var(--my-tf-accent-red), var(--my-tf-accent-red)),

    /* KANAN BAWAH */
    linear-gradient(var(--my-tf-accent-red), var(--my-tf-accent-red)),
    linear-gradient(var(--my-tf-accent-red), var(--my-tf-accent-red));

  background-size:
    12px 2px, 2px 12px,
    12px 2px, 2px 12px,
    12px 2px, 2px 12px,
    12px 2px, 2px 12px;

  background-position:
    0 0, 0 0,
    100% 0, 100% 0,
    0 100%, 0 100%,
    100% 100%, 100% 100%;

  background-repeat: no-repeat;
}

.my-tf-pencil-bracket-v2::after {
  inset: -3px; 

  transform: rotate(0.7deg);
  opacity: 0.5;

  filter: blur(0.15px);
}
    

/*END REDACTION STYLE*/


/*BLOK DIV*/
/* STYLE 01 */
	.my-tf-block-v1 {
		margin: 10px 0;
	}

	.my-tf-block-v1 {
	  display: block;
	  width: 100%;
	  background: #f4f6f8;
	  padding: 16px 18px;
	  border-radius: 10px;
	  text-decoration: none;
	  color: #111;
	  font-weight: 600;
	  font-size: 16px;
	  border-left: 5px solid var(--my-tf-accent);
	  transition: all 0.25s ease;
	  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
	}

	.my-tf-block-v1:hover {
	  background: var(--my-tf-accent);
	  color: #fff;
	  transform: translateX(6px);
	  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	}

/* STYLE-02 */
.my-tf-block-v2 {
  position: relative;
  display: block;

  padding: 14px 16px;
  margin: 12px 0;

  background: #f8f9fb;

  color: #222;
  line-height: 1.6;

  border: 2px solid var(--my-tf-accent);

  transform: rotate(-0.3deg);
	
}

/* garis dalam (UPDATED IRREGULAR VERSION) */
.my-tf-block-v2::before {
  content: "";
  position: absolute;
  inset: 4px;

  pointer-events: none;

  opacity: 0.4;

  transform: rotate(0.2deg);

  border: none;

  background:
    /* TOP (lebih pendek + rapat + tetap full) */
    repeating-linear-gradient(
      90deg,
      var(--my-tf-accent) 0px,
      var(--my-tf-accent) 10px,
      transparent 10px,
      transparent 16px,
      var(--my-tf-accent) 16px,
      var(--my-tf-accent) 24px,
      transparent 24px,
      transparent 30px,
      var(--my-tf-accent) 30px,
      var(--my-tf-accent) 36px,
      transparent 36px,
      transparent 44px,
      var(--my-tf-accent) 44px,
      var(--my-tf-accent) 50px
    ) top / 100% 2px no-repeat,

    /* BOTTOM (lebih pendek + variatif) */
    repeating-linear-gradient(
      90deg,
      var(--my-tf-accent) 0px,
      var(--my-tf-accent) 8px,
      transparent 8px,
      transparent 14px,
      var(--my-tf-accent) 14px,
      var(--my-tf-accent) 22px,
      transparent 22px,
      transparent 30px,
      var(--my-tf-accent) 30px,
      var(--my-tf-accent) 38px,
      transparent 38px,
      transparent 46px,
      var(--my-tf-accent) 46px,
      var(--my-tf-accent) 54px
    ) bottom / 100% 2px no-repeat,

    /* RIGHT */
    linear-gradient(var(--my-tf-accent), var(--my-tf-accent)) 100% 10px / 2px 14px no-repeat,
    linear-gradient(var(--my-tf-accent), var(--my-tf-accent)) 100% 30px / 2px 6px no-repeat,
    linear-gradient(var(--my-tf-accent), var(--my-tf-accent)) 100% 45px / 2px 18px no-repeat,
    linear-gradient(var(--my-tf-accent), var(--my-tf-accent)) 100% 72px / 2px 8px no-repeat,
    linear-gradient(var(--my-tf-accent), var(--my-tf-accent)) 100% 92px / 2px 6px no-repeat,

    /* LEFT */
    linear-gradient(var(--my-tf-accent), var(--my-tf-accent)) 0 10px / 2px 12px no-repeat,
    linear-gradient(var(--my-tf-accent), var(--my-tf-accent)) 0 30px / 2px 8px no-repeat,
    linear-gradient(var(--my-tf-accent), var(--my-tf-accent)) 0 50px / 2px 18px no-repeat,
    linear-gradient(var(--my-tf-accent), var(--my-tf-accent)) 0 78px / 2px 10px no-repeat,
    linear-gradient(var(--my-tf-accent), var(--my-tf-accent)) 0 96px / 2px 8px no-repeat;
}

/* aksen kiri atas */
.my-tf-block-v2::after {
  content: "";
  position: absolute;

  top: -6px;
  left: 10px;

  width: 40px;
  height: 6px;

  background: var(--my-tf-accent);

  clip-path: polygon(
    0% 60%, 20% 40%, 40% 70%, 60% 45%, 80% 65%, 100% 55%,
    100% 100%, 0% 100%
  );

  opacity: 0.6;

  transform: rotate(-5deg);
}

/*STYLE 03*/
.my-tf-block-v3 {
  position: relative;
  display: block;

  padding: 14px 16px;
  margin: 12px 0;

  background: #f8f9fb;

  color: #222;
  line-height: 1.6;

  transform: rotate(-0.3deg);
}

/* OUTER IRREGULAR BORDER (FINAL) */
.my-tf-block-v3::before {
  content: "";
  position: absolute;
  inset: 4px;

  pointer-events: none;

  opacity: 0.4;

  transform: rotate(0.3deg);

  border: none;

  background:
    /* TOP */
    repeating-linear-gradient(
      90deg,
      var(--my-tf-accent) 0px,
      var(--my-tf-accent) 10px,
      transparent 10px,
      transparent 16px,
      var(--my-tf-accent) 16px,
      var(--my-tf-accent) 24px,
      transparent 24px,
      transparent 30px,
      var(--my-tf-accent) 30px,
      var(--my-tf-accent) 36px,
      transparent 36px,
      transparent 48px
    ) top / 100% 2px no-repeat,

    /* BOTTOM */
    repeating-linear-gradient(
      90deg,
      var(--my-tf-accent) 0px,
      var(--my-tf-accent) 8px,
      transparent 8px,
      transparent 14px,
      var(--my-tf-accent) 14px,
      var(--my-tf-accent) 22px,
      transparent 22px,
      transparent 34px,
      var(--my-tf-accent) 34px,
      var(--my-tf-accent) 40px,
      transparent 40px,
      transparent 52px
    ) bottom / 100% 2px no-repeat,

    /* RIGHT */
    linear-gradient(var(--my-tf-accent), var(--my-tf-accent)) 100% 10px / 2px 14px no-repeat,
    linear-gradient(var(--my-tf-accent), var(--my-tf-accent)) 100% 30px / 2px 6px no-repeat,
    linear-gradient(var(--my-tf-accent), var(--my-tf-accent)) 100% 45px / 2px 16px no-repeat,
    linear-gradient(var(--my-tf-accent), var(--my-tf-accent)) 100% 72px / 2px 8px no-repeat,
    linear-gradient(var(--my-tf-accent), var(--my-tf-accent)) 100% 92px / 2px 6px no-repeat,

    /* LEFT */
    linear-gradient(var(--my-tf-accent), var(--my-tf-accent)) 0 10px / 2px 12px no-repeat,
    linear-gradient(var(--my-tf-accent), var(--my-tf-accent)) 0 30px / 2px 6px no-repeat,
    linear-gradient(var(--my-tf-accent), var(--my-tf-accent)) 0 50px / 2px 18px no-repeat,
    linear-gradient(var(--my-tf-accent), var(--my-tf-accent)) 0 78px / 2px 10px no-repeat,
    linear-gradient(var(--my-tf-accent), var(--my-tf-accent)) 0 96px / 2px 6px no-repeat;
}

/*STYLE 04*/
.my-tf-block-v4 {
  background: #f4f6f8;
  padding: 12px 14px;
  border-left: 3px solid var(--my-tf-accent);
}

/*STYLE 05*/
.my-tf-block-v5 {
  position: relative;
  background: #f4f6f8;
  padding: 16px 18px 16px 22px;
  border-radius: 10px;
  color: #111;
  font-weight: 600;
  overflow: hidden;
  transition: all 0.25s ease;
}

/* GARIS ENERGI UTAMA */
.my-tf-block-v5::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 6px;
  height: 100%;
  background: linear-gradient(
    to bottom,
    #00f0ff,
    var(--my-tf-accent),
    #7b61ff,
    #00f0ff
  );
  background-size: 100% 200%;
  animation: energyFlow 3s linear infinite;
}

/* GLOW keluar */
.my-tf-block-v5::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 10px;
  height: 100%;
  background: linear-gradient(
    to bottom,
    #00f0ff,
    var(--my-tf-accent),
    #7b61ff
  );
  filter: blur(6px);
  opacity: 0.7;
  pointer-events: none;
}

/* animasi aliran energi */
@keyframes energyFlow {
  0%   { background-position: 0% 0%; }
  100% { background-position: 0% 200%; }
}

/* hover makin “nyala” */
.my-tf-block-v5:hover {
  transform: translateX(6px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.15);
}

/* hover lebih “hidup” */
.my-tf-block-v5:hover {
  transform: translateX(6px);
  background: linear-gradient(135deg, var(--my-tf-accent), #4facfe);
  color: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,0.15);
}

/*END BLOK DIV*/
  
/*HEADING*/
/*STYLE 01*/
  .my-tf-heading-v1 {
    display: inline;
    font-weight: 400;
    line-height: 1.5;
    color: #111;
    background-image: linear-gradient(var(--my-tf-accent), var(--my-tf-accent));
    background-size: 100% 2.5px;
    background-repeat: repeat-x;
    background-position: 0 100%;
    padding-bottom: 1px;
  }

  .my-tf-heading-v1::before {
    content: "» ";
    color: var(--my-tf-accent);
    font-weight: 400;
  }

/*STYLE 02*/
  .my-tf-heading-v2 {
    display: block;
    background-color: var(--my-tf-accent);
    color: #fff;
    padding: 4px 8px;
    line-height: 1.5;
    position: relative;
    width: fit-content;
  }

  .my-tf-heading-v2::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: calc(100vw - 120px);
    height: 2px;
    background: var(--my-tf-accent);
  }

/* STYLE 03 */
.my-tf-heading-v3 {
  display: inline-block;
  position: relative;
  padding-bottom: 6px;
  font-weight: 600;
}

.my-tf-heading-v3::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 4px;
  background: var(--my-tf-accent);
}

.my-tf-heading-v3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 1.6px;
  width: calc(100vw - 120px);
  height: 1px;
  background: var(--my-tf-accent);
}

/*END H2*/