/* =========================================================
   styleSheet2.css
   ADABI - Editorial Team & Reviewer Board
   Layout follows styleSheet1.css:
   Photo | Profile Information | Author Statistics
   Palette: Adabiah green + warm gold accent
   ========================================================= */

:root{
  --adabi-green-950:#06351f;
  --adabi-green-900:#084628;
  --adabi-green-800:#0b5a34;
  --adabi-green-700:#0f7141;
  --adabi-green-600:#17894f;
  --adabi-green-500:#22a45f;

  --adabi-gold:#e9bd4d;
  --adabi-gold-soft:#f7e8b5;

  --adabi-white:#ffffff;
  --adabi-ink:#153122;
  --adabi-soft:#e8f5ed;
  --adabi-soft-2:#d7eddf;

  --adabi-border:rgba(255,255,255,.72);
  --adabi-shadow:rgba(3,46,25,.22);
}

*{
  box-sizing:border-box;
}

html,
body{
  margin:0;
  padding:0;
  width:100%;
  min-height:100%;
}

body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  background:transparent;
}

/* =========================================================
   MAIN WRAPPER
   ========================================================= */

.page_editorial_team .tim-editor{
  position:relative;
  overflow:hidden;
  width:100%;
  padding:18px 20px 26px;
  text-align:center;

  background:
    radial-gradient(circle at 90% 5%, rgba(233,189,77,.18), transparent 26%),
    linear-gradient(120deg,
      var(--adabi-green-950) 0%,
      var(--adabi-green-800) 48%,
      var(--adabi-green-600) 100%
    );

  border-radius:15px;
  box-shadow:0 8px 22px rgba(0,0,0,.12);
  animation:adabiFadeIn .7s ease-out both;
}

/* moving soft highlight */
.page_editorial_team .tim-editor::before{
  content:"";
  position:absolute;
  inset:-60% auto auto -80%;
  width:200%;
  height:220%;
  pointer-events:none;
  z-index:0;

  background:linear-gradient(
    105deg,
    transparent 30%,
    rgba(255,255,255,.045) 45%,
    rgba(255,255,255,.11) 50%,
    rgba(255,255,255,.045) 55%,
    transparent 70%
  );

  animation:adabiMoveBackground 12s linear infinite;
}

@keyframes adabiMoveBackground{
  from{ transform:translateX(-15%); }
  to{ transform:translateX(45%); }
}

@keyframes adabiFadeIn{
  from{
    opacity:0;
    transform:translateY(10px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

/* =========================================================
   TITLE
   ========================================================= */

.page_editorial_team .tim-editor h2{
  position:relative;
  z-index:2;

  margin:12px 0 26px;
  padding:0;

  font-family:Georgia,"Times New Roman",serif;
  font-size:2.05rem;
  line-height:1.2;
  font-weight:700;
  letter-spacing:2px;
  text-transform:uppercase;

  color:#ffffff;
  text-shadow:0 2px 7px rgba(0,0,0,.18);
}

.page_editorial_team .tim-editor h2::after{
  content:"";
  display:block;
  width:64px;
  height:4px;
  margin:12px auto 0;

  border-radius:10px;
  background:var(--adabi-gold);
  box-shadow:0 2px 8px rgba(233,189,77,.35);
}

/* =========================================================
   EDITOR / REVIEWER CARD
   Photo | Info | Statistics
   ========================================================= */

.page_editorial_team .tim-editor .editor-grid{
  position:relative;
  z-index:2;

  display:grid !important;
  grid-template-columns:145px minmax(0,1fr) 320px !important;
  align-items:center !important;
  gap:18px !important;

  width:100%;
  margin:0 0 20px;
  padding:18px;

  text-align:left;
  overflow:hidden;

  border:1px solid var(--adabi-border);
  border-radius:20px;

  background:
    linear-gradient(
      100deg,
      rgba(7,76,43,.94) 0%,
      rgba(13,105,60,.92) 50%,
      rgba(28,137,79,.90) 100%
    );

  box-shadow:0 10px 24px var(--adabi-shadow);

  transition:
    transform .22s ease,
    box-shadow .22s ease,
    border-color .22s ease;
}
.page_editorial_team .tim-editor .editor-grid:hover{
  transform: scale(1.05);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
    background: linear-gradient(135deg, #fecb55, #fff);
}

.page_editorial_team .tim-editor .editor-grid:last-child{
  margin-bottom:0;
}

/* decorative soft circle — no JPAPS logo */
.page_editorial_team .tim-editor .editor-grid::before{
  content: "";
    
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at center, rgba(0, 123, 255, 0.1), rgba(0, 123, 255, 0));
    background-image: url('https://adabi.ejournaladabiah.org/public/site/images/adminadabi/adabilogo.png'); /* Ganti URL_LOGO dengan URL logo Anda */
    background-repeat: no-repeat;
    background-position: center;
    background-size: 13%; /* Atur ukuran logo sesuai kebutuhan */
    transition: opacity 0.3s;
    opacity: 0;
    z-index: 1;
    animation: float 5s cubic-bezier(1, -0.32, 0.05, 0.72) infinite, bubble 20s infinite;
    transform: rotate(0deg);
}
@keyframes bubble {
    0% {
        transform: translateY(0) translateX(0) rotate(0deg);
    }
    25% {
        transform: translateY(-10px) translateX(10px) rotate(45deg);
    }
    50% {
        transform: translateY(-20px) translateX(-10px) rotate(0deg);
    }
    75% {
        transform: translateY(-10px) translateX(10px) rotate(45deg);
    }
    100% {
        transform: translateY(0) translateX(0) rotate(0deg);
    }
}

.page_editorial_team .tim-editor .editor-grid:hover::before {
    opacity: 0.5;
    
}

.page_editorial_team .tim-editor .editor-grid > *{
  position: relative;
  z-index: 1;
}
/* =========================================================
   PHOTO
   ========================================================= */

.page_editorial_team .tim-editor .editor-image-wrapper{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0;
}

.page_editorial_team .tim-editor .editor-image-wrapper img{
  display:block;

  width:120px;
  height:150px;
  object-fit:cover;
  object-position:center;

  border-radius:16px;
  border:3px solid rgba(255,255,255,.88);

  background:#f4f4f4;

  box-shadow:
    0 7px 18px rgba(0,0,0,.24),
    0 0 0 2px rgba(233,189,77,.18);
}

/* =========================================================
   PROFILE INFO
   ========================================================= */

.page_editorial_team .tim-editor .editor-info{
  min-width:0;
  padding-right:6px;
}

.page_editorial_team .tim-editor .editor-info h3{
  margin:0 0 7px;
  padding:0;

  color:#ffffff;
  font-size:1.08rem;
  line-height:1.35;
  font-weight:800;
}

.page_editorial_team .tim-editor .editor-role{
  margin:0 0 7px !important;

  color:var(--adabi-gold-soft) !important;
  font-weight:800 !important;
  font-size:.98rem;
}

.page_editorial_team .tim-editor .editor-info p{
  margin:0 0 9px;

  color:rgba(255,255,255,.96);
  font-size:.95rem;
  line-height:1.45;
}

/* Expertise */
.page_editorial_team .tim-editor .editor-expertise{
  width:100%;
  max-width:560px;

  margin:10px 0 0;
  padding:9px 13px;

  border:1px solid rgba(255,255,255,.38);
  border-radius:8px;

  background:rgba(232,245,237,.90);
  color:var(--adabi-ink);

  font-size:.93rem;
  line-height:1.4;
}

.page_editorial_team .tim-editor .editor-expertise strong{
  color:var(--adabi-green-950);
  font-weight:800;
}

/* =========================================================
   SOCIAL LINKS
   ========================================================= */

.page_editorial_team .tim-editor .social-links{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;

  margin-top:11px;
}

.page_editorial_team .tim-editor .social-links a{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  width:38px;
  height:38px;

  border:2px solid rgba(255,255,255,.88);
  border-radius:999px;

  background:#ffffff;

  text-decoration:none;

  box-shadow:0 6px 14px rgba(0,0,0,.18);

  transition:
    transform .16s ease,
    box-shadow .16s ease,
    border-color .16s ease;
}

.page_editorial_team .tim-editor .social-links a:hover{
  transform:translateY(-2px);
  border-color:var(--adabi-gold);
  box-shadow:0 9px 18px rgba(0,0,0,.23);
}

.page_editorial_team .tim-editor .social-links img{
  display:block;
  width:22px;
  height:22px;
  object-fit:contain;
}

/* =========================================================
   AUTHOR / REVIEWER STATISTICS
   ========================================================= */

.page_editorial_team .tim-editor .editor-stats-widget{
  grid-column:auto !important;
  justify-self:end !important;

  width:100%;
  max-width:300px;
  min-width:0;

  margin-top:0 !important;
  padding:17px 18px 12px;

  border:1px solid rgba(255,255,255,.50);
  border-radius:16px;

  background:
    linear-gradient(
      150deg,
      rgba(242,249,244,.94),
      rgba(216,239,224,.90)
    );

  box-shadow:0 8px 18px rgba(0,0,0,.13);
}

.page_editorial_team .tim-editor .editor-stats-widget h4{
  margin:0 0 13px;
  padding:0;

  text-align:center;

  color:var(--adabi-green-800);
  font-size:1rem;
  line-height:1.3;
  font-weight:850;
}

.page_editorial_team .tim-editor .stats-row{
  display:flex;
  align-items:center;
  justify-content:space-between;

  min-height:38px;
  gap:12px;
  padding:8px 0;

  border-bottom:1px solid rgba(15,113,65,.16);
}

.page_editorial_team .tim-editor .stats-row:last-child{
  border-bottom:0;
}

.page_editorial_team .tim-editor .stats-label{
  display:flex;
  align-items:center;
  gap:7px;

  color:#31483a;
  font-size:.92rem;
  line-height:1.2;
}

.page_editorial_team .tim-editor .stats-label img{
  flex:0 0 auto;

  width:18px;
  height:18px;
  object-fit:contain;
}

.page_editorial_team .tim-editor .stats-value{
  min-width:36px;

  color:var(--adabi-green-700);
  font-size:1.05rem;
  line-height:1;
  font-weight:800;
  text-align:right;
}

.page_editorial_team .tim-editor .stats-value iframe{
  display:inline-block;

  width:34px !important;
  height:24px !important;

  border:0 !important;
  overflow:hidden !important;

  background:transparent !important;
  vertical-align:middle;
}

/* =========================================================
   REVIEWER BOARD
   Same visual system as Editorial Team
   ========================================================= */

.page_reviewer_board .tim-editor h2::after{
  background:var(--adabi-gold);
}

.page_reviewer_board .tim-editor .editor-stats-widget h4{
  color:var(--adabi-green-800);
}

/* =========================================================
   RESPONSIVE
   Preserve 3-column design as long as possible
   ========================================================= */

@media (max-width:900px){
  /*
   * Deliberately keep three columns.
   * styleSheet1 previously stacked the statistics too early.
   * This keeps the desired desktop appearance inside OJS iframe.
   */
  .page_editorial_team .tim-editor .editor-grid{
    grid-template-columns:135px minmax(0,1fr) 275px !important;
    gap:14px !important;
    padding:16px;
  }

  .page_editorial_team .tim-editor .editor-image-wrapper img{
    width:112px;
    height:140px;
  }

  .page_editorial_team .tim-editor .editor-stats-widget{
    max-width:275px;
    padding-left:14px;
    padding-right:14px;
  }
}

/* Stack only on genuinely small screens */
@media (max-width:720px){
  .page_editorial_team .tim-editor{
    padding:14px 12px 20px;
  }

  .page_editorial_team .tim-editor h2{
    margin-bottom:22px;
    font-size:1.7rem;
  }

  .page_editorial_team .tim-editor .editor-grid{
    grid-template-columns:1fr !important;
    grid-template-rows:auto auto auto !important;

    gap:14px !important;
    padding:16px 14px;
  }

  .page_editorial_team .tim-editor .editor-image-wrapper{
    justify-content:center;
  }

  .page_editorial_team .tim-editor .editor-image-wrapper img{
    width:120px;
    height:150px;
  }

  .page_editorial_team .tim-editor .editor-info{
    padding-right:0;
    text-align:center;
  }

  .page_editorial_team .tim-editor .editor-expertise{
    max-width:100%;
    text-align:left;
  }

  .page_editorial_team .tim-editor .social-links{
    justify-content:center;
  }

  .page_editorial_team .tim-editor .editor-stats-widget{
    grid-column:auto !important;
    justify-self:stretch !important;

    max-width:100%;
    margin-top:3px !important;
  }
}

@media (max-width:420px){
  .page_editorial_team .tim-editor{
    padding-left:9px;
    padding-right:9px;
    border-radius:12px;
  }

  .page_editorial_team .tim-editor .editor-grid{
    padding:14px 10px;
    border-radius:16px;
  }

  .page_editorial_team .tim-editor h2{
    font-size:1.45rem;
    letter-spacing:1.3px;
  }

  .page_editorial_team .tim-editor .stats-label{
    font-size:.87rem;
  }
}