/* ==========================================================
   HOSTOYUN CUSTOMER PANEL V12
   ========================================================== */

:root{
  --v12-bg:#080d18;
  --v12-bg2:#0d1422;
  --v12-sidebar:#09101d;
  --v12-card:#101829;
  --v12-card2:#121c30;
  --v12-row:#0c1423;
  --v12-border:rgba(132,151,194,.14);
  --v12-border2:rgba(105,130,205,.23);

  --v12-text:#f5f7fc;
  --v12-muted:#8b98b3;
  --v12-muted2:#66738e;

  --v12-blue:#536cff;
  --v12-purple:#713cff;
  --v12-pink:#ff315e;
  --v12-red:#f3224f;
  --v12-green:#2bd879;

  --v12-radius:16px;
}


/* ==========================================================
   GLOBAL CUSTOMER PANEL
   ========================================================== */

.customer-body{
  margin:0;
  background:
    radial-gradient(
      circle at 72% -20%,
      rgba(65,74,140,.12),
      transparent 42%
    ),
    linear-gradient(
      135deg,
      #080d17,
      #0b1220
    ) !important;

  color:var(--v12-text);
}


.customer-app{
  display:grid !important;
  grid-template-columns:
    220px minmax(0,1fr) !important;

  min-height:100vh;
}


/* ==========================================================
   SIDEBAR
   ========================================================== */

.customer-sidebar{
  position:fixed !important;

  inset:0 auto 0 0;

  z-index:50;

  width:220px !important;

  display:flex !important;
  flex-direction:column;

  padding:
    18px 16px !important;

  border-right:
    1px solid
    rgba(255,255,255,.055) !important;

  background:
    linear-gradient(
      180deg,
      #080e1b,
      #0b1221
    ) !important;

  box-sizing:border-box;
}


.customer-brand{
  min-height:58px;

  display:flex !important;
  align-items:center;

  padding:
    0 5px 18px !important;

  border-bottom:
    1px solid
    rgba(255,255,255,.045);
}


.customer-brand img{
  width:142px !important;
  height:52px !important;

  object-fit:contain;

  object-position:left center;
}


.customer-brand strong,
.customer-brand small{
  display:none !important;
}


.customer-menu{
  margin-top:14px;

  display:flex;
  flex-direction:column;

  gap:4px !important;
}


.menu-heading{
  margin:
    14px 0 5px;

  padding:
    0 8px !important;

  color:#56617a !important;

  font-size:9px !important;

  font-weight:900;

  letter-spacing:1.4px;
}


.customer-menu a,
.customer-nav-disabled{

  min-height:42px;

  display:flex !important;

  align-items:center;

  gap:11px;

  padding:
    0 11px !important;

  border-radius:9px !important;

  color:#8d9ab3 !important;

  font-size:12px;

  font-weight:700;

  text-decoration:none;

  box-sizing:border-box;

  transition:.15s ease;
}


.customer-menu a i,
.customer-nav-disabled i{

  width:22px;

  color:#7a89aa;

  font-style:normal;

  text-align:center;
}


.customer-menu a:hover{

  background:
    rgba(91,104,179,.08) !important;

  color:#fff !important;

  transform:none !important;
}


.customer-menu a.active{

  position:relative;

  background:
    linear-gradient(
      90deg,
      rgba(87,67,180,.18),
      rgba(41,51,85,.14)
    ) !important;

  border:0 !important;

  color:#fff !important;

  box-shadow:none !important;
}


.customer-menu a.active:after{

  content:"";

  position:absolute;

  right:-16px;

  top:0;
  bottom:0;

  width:2px;

  background:
    var(--v12-pink);
}


.customer-menu a.active i{

  color:
    var(--v12-pink);
}


.customer-nav-disabled{
  opacity:.6;
}


/* ==========================================================
   REFERRAL
   ========================================================== */

.v12-referral-card{

  position:relative;

  overflow:hidden;

  margin-top:auto;

  margin-bottom:12px;

  min-height:144px;

  padding:16px;

  border:
    1px solid
    rgba(255,49,94,.28);

  border-radius:13px;

  background:
    linear-gradient(
      145deg,
      rgba(86,21,51,.31),
      rgba(19,28,48,.95)
    );
}


.v12-referral-card b{

  display:block;

  color:#ffa4b6;

  font-size:13px;
}


.v12-referral-card strong{

  display:block;

  margin-top:4px;

  color:#fff;

  font-size:13px;
}


.v12-referral-card p{

  max-width:120px;

  margin:
    12px 0;

  color:#8d98ae;

  font-size:10px;

  line-height:1.5;
}


.v12-referral-card a{

  display:inline-flex;

  padding:
    7px 10px;

  border:
    1px solid
    rgba(112,133,195,.32);

  border-radius:7px;

  color:#d8e1ff;

  font-size:9px;

  font-weight:800;

  text-decoration:none;
}


.v12-referral-card > span{

  position:absolute;

  right:6px;

  bottom:6px;

  font-size:50px;

  filter:
    drop-shadow(
      0 8px 15px rgba(0,0,0,.3)
    );
}


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

.customer-main{

  grid-column:2 !important;

  width:auto !important;

  min-width:0;

  margin-left:0 !important;

  background:
    transparent !important;
}


.customer-topbar{

  position:sticky;

  top:0;

  z-index:40;

  height:64px !important;

  display:flex;

  align-items:center;

  justify-content:space-between;

  padding:
    0 42px !important;

  border-bottom:
    1px solid
    rgba(255,255,255,.055) !important;

  background:
    rgba(8,13,24,.86) !important;

  backdrop-filter:
    blur(18px);
}


.breadcrumb{

  color:#69758d !important;

  font-size:11px !important;
}


.breadcrumb b{

  color:#d8ddec !important;
}


.balance-pill{

  display:flex;

  align-items:center;

  gap:9px;

  border:0 !important;

  background:
    transparent !important;

  color:#8d98ae !important;

  font-size:9px !important;
}


.balance-pill b{

  color:#ff446a !important;

  font-size:13px !important;
}


.notice-btn{

  border:
    1px solid
    rgba(132,151,194,.11) !important;

  background:#101728 !important;
}


.customer-content{

  width:100% !important;

  max-width:1440px !important;

  margin:0 auto !important;

  padding:
    26px 42px
    70px !important;

  box-sizing:border-box;
}


/* ==========================================================
   GLOBAL OTHER CUSTOMER PAGES
   ========================================================== */

.customer-card,
.welcome-card,
.summary-grid article,
.purchase-step,
.purchase-summary,
.buy-card{

  border:
    1px solid
    var(--v12-border) !important;

  border-radius:
    var(--v12-radius) !important;

  background:
    linear-gradient(
      145deg,
      rgba(18,27,46,.98),
      rgba(12,19,34,.98)
    ) !important;

  box-shadow:
    0 16px 40px
    rgba(0,0,0,.12) !important;
}


.page-head h1,
.welcome-card h1{

  color:
    var(--v12-text) !important;
}


.page-head p,
.customer-card p{

  color:
    var(--v12-muted) !important;
}


.customer-main input,
.customer-main textarea,
.customer-main select{

  border:
    1px solid
    rgba(118,135,177,.17) !important;

  border-radius:9px !important;

  background:
    #0c1423 !important;

  color:#fff !important;
}


/* ==========================================================
   V12 SERVICE PAGE
   ========================================================== */

.v12-service-page{

  max-width:1240px;

  margin:
    0 auto;

  display:grid;

  gap:10px;
}


/* ==========================================================
   HERO
   ========================================================== */

.v12-service-hero{

  padding:
    22px 24px;

  border:
    1px solid
    rgba(120,139,185,.13);

  border-radius:15px;

  background:
    linear-gradient(
      145deg,
      rgba(15,23,40,.95),
      rgba(9,16,30,.98)
    );

  box-shadow:
    0 18px 45px
    rgba(0,0,0,.12);
}


.v12-hero-head{

  display:flex;

  align-items:flex-start;

  justify-content:space-between;

  gap:25px;
}


.v12-breadcrumb{

  margin-bottom:14px;

  color:#6e7991;

  font-size:10px;
}


.v12-breadcrumb span{

  margin:0 6px;

  color:#3f4960;
}


.v12-hero-head h1{

  margin:0;

  color:#f4f6fb;

  font-size:
    clamp(24px,2.1vw,31px);

  line-height:1.1;

  letter-spacing:-.7px;
}


.v12-hero-head h1 span{

  color:#9ca7bd;
}


.v12-hero-sub{

  display:flex;

  align-items:center;

  gap:11px;

  margin-top:14px;

  color:#8692aa;

  font-size:11px;
}


.v12-hero-sub b{

  color:#e4e8f0;
}


.v12-live-badge{

  display:inline-flex;

  align-items:center;

  gap:6px;

  padding:
    5px 12px;

  border-radius:999px;

  background:
    rgba(36,205,112,.17);

  color:#43dd85;

  font-size:9px;

  font-weight:900;
}


.v12-live-badge i{

  width:6px;
  height:6px;

  border-radius:50%;

  background:#2edb7a;

  box-shadow:
    0 0 9px
    rgba(46,219,122,.6);
}


.v12-inline-copy{

  width:25px !important;
  height:25px !important;

  min-width:0 !important;

  padding:0 !important;

  border:0 !important;

  background:
    transparent !important;

  color:#8794af !important;
}


.v12-back-button{

  min-height:40px;

  display:inline-flex;

  align-items:center;

  gap:9px;

  padding:
    0 15px;

  border:
    1px solid
    rgba(100,118,164,.16);

  border-radius:9px;

  background:
    #10182a;

  color:#aeb7c9;

  font-size:11px;

  font-weight:800;

  text-decoration:none;
}


.v12-back-button:hover{

  color:#fff;

  border-color:
    rgba(100,120,200,.4);
}


/* HERO STATS */

.v12-hero-stats{

  display:grid;

  grid-template-columns:
    1fr 1fr 1fr 1.08fr;

  gap:0;

  margin-top:21px;

  padding:
    0;

  border-radius:11px;

  background:
    linear-gradient(
      90deg,
      #101829,
      #0e1627
    );

  overflow:hidden;
}


.v12-hero-stats > div{

  min-height:70px;

  display:flex;

  flex-direction:column;

  justify-content:center;

  gap:7px;

  padding:
    0 20px;

  border-right:
    1px solid
    rgba(255,255,255,.045);
}


.v12-hero-stats span{

  color:#6f7c95;

  font-size:9px;
}


.v12-hero-stats b{

  color:#eceff6;

  font-size:12px;
}


.v12-hero-stats
.v12-remaining-box{

  position:relative;

  border-right:0;

  background:
    linear-gradient(
      120deg,
      rgba(55,75,155,.35),
      rgba(153,25,69,.52)
    );
}


.v12-remaining-box b{

  max-width:
    calc(100% - 32px);

  color:#e6ebff;

  font-size:14px;

  white-space:nowrap;

  overflow:hidden;

  text-overflow:ellipsis;
}


.v12-remaining-box i{

  position:absolute;

  right:17px;

  color:#d4b9d1;

  font-size:26px;

  font-style:normal;
}


/* ==========================================================
   CARD SYSTEM
   ========================================================== */

.v12-main-grid,
.v12-action-grid{

  display:grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap:10px;
}


.v12-card{

  position:relative;

  min-width:0;

  overflow:hidden;

  padding:
    20px;

  border:
    1px solid
    rgba(117,136,183,.14);

  border-radius:
    14px;

  background:
    linear-gradient(
      145deg,
      #111a2d,
      #0d1627
    );

  box-shadow:
    0 15px 35px
    rgba(0,0,0,.11);
}


.v12-card-accent{

  position:absolute;

  left:8px;
  right:8px;
  top:0;

  height:1px;

  background:
    linear-gradient(
      90deg,
      #586cff,
      #7248ff,
      #ff335d
    );
}


.v12-card-accent.blue-red{

  background:
    linear-gradient(
      90deg,
      #4f70ff,
      #ff315c
    );
}


.v12-card-header{

  display:flex;

  align-items:center;

  gap:13px;

  margin-bottom:18px;
}


.v12-card-header h2{

  margin:0;

  color:#f2f4f9;

  font-size:16px;
}


.v12-card-header p{

  margin:5px 0 0;

  color:#69758d;

  font-size:9px;
}


.v12-card-icon{

  width:39px;
  height:39px;

  display:grid;

  place-items:center;

  flex:0 0 auto;

  border:
    1px solid
    rgba(123,109,255,.27);

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(106,79,255,.17),
      rgba(50,51,100,.1)
    );

  color:#bec1ff;

  font-size:18px;
}


.v12-card-icon.blue{

  border-color:
    rgba(58,132,255,.28);

  color:#82b6ff;
}


/* ==========================================================
   DATA ROWS
   ========================================================== */

.v12-data-list{

  display:grid;

  gap:5px;
}


.v12-data-row{

  min-height:43px;

  display:grid;

  grid-template-columns:
    minmax(100px,.8fr)
    minmax(0,1.3fr)
    30px;

  align-items:center;

  gap:9px;

  padding:
    0 9px 0 13px;

  border:
    1px solid
    rgba(118,136,174,.055);

  border-radius:7px;

  background:
    #0c1423;
}


.v12-data-row > span{

  color:#7f8ca5;

  font-size:10px;
}


.v12-data-row > strong{

  min-width:0;

  justify-self:end;

  color:#edf0f7;

  font-size:11px;

  font-weight:800;

  white-space:nowrap;

  overflow:hidden;

  text-overflow:ellipsis;
}


.v12-icon-button{

  width:29px !important;
  height:29px !important;

  min-width:0 !important;

  display:grid !important;

  place-items:center;

  padding:0 !important;

  border:
    1px solid
    rgba(106,126,182,.12) !important;

  border-radius:
    7px !important;

  background:
    #111a2c !important;

  color:#b9c1d5 !important;

  font-size:11px !important;

  cursor:pointer;
}


.v12-icon-button:hover{

  border-color:
    rgba(91,109,255,.45) !important;

  color:#fff !important;
}


.v12-password-actions{

  display:flex;

  gap:4px;
}


.v12-password-data{

  grid-template-columns:
    minmax(100px,.8fr)
    minmax(0,1.3fr)
    auto;
}


.v12-blue-text{

  color:
    #6ca4ff !important;
}


.v12-status-green{

  color:
    #3cdb7d !important;
}


/* ==========================================================
   PASSWORD CHANGE
   ========================================================== */

.v12-password-change{

  margin-top:8px;

  border:
    1px solid
    rgba(111,130,176,.075);

  border-radius:8px;

  background:
    #10192a;
}


.v12-password-change summary{

  min-height:48px;

  display:grid;

  grid-template-columns:
    31px minmax(0,1fr) 20px;

  align-items:center;

  gap:10px;

  padding:
    0 11px;

  list-style:none;

  cursor:pointer;
}


.v12-password-change
summary::-webkit-details-marker{

  display:none;
}


.v12-mini-icon{

  width:29px;
  height:29px;

  display:grid;

  place-items:center;

  border-radius:7px;

  background:
    #131e31;

  color:#cbd2e2;
}


.v12-password-change b{

  display:block;

  color:#eef1f7;

  font-size:10px;
}


.v12-password-change small{

  display:block;

  margin-top:3px;

  color:#6c7890;

  font-size:8px;
}


.v12-password-change
summary > span{

  color:#8793ab;

  font-size:20px;
}


.v12-password-form{

  display:grid;

  gap:10px;

  padding:
    12px;

  border-top:
    1px solid
    rgba(255,255,255,.045);
}


.v12-password-form label{

  display:grid;

  gap:5px;

  color:#8f9ab0;

  font-size:9px;
}


.v12-password-form input{

  min-height:38px;

  padding:0 10px;
}


.v12-secondary-button{

  min-height:38px;

  border:0;

  border-radius:8px;

  background:#202d46;

  color:#fff;

  font-weight:800;
}


/* ==========================================================
   GRADIENT BUTTON
   ========================================================== */

.v12-gradient-button{

  min-height:43px;

  display:flex;

  align-items:center;

  justify-content:center;

  gap:9px;

  margin-top:9px;

  padding:
    0 16px;

  border:0;

  border-radius:7px;

  background:
    linear-gradient(
      100deg,
      #5036c7,
      #c43272,
      #f22752
    );

  color:#fff !important;

  font-family:inherit;

  font-size:10px;

  font-weight:900;

  text-decoration:none;

  cursor:pointer;

  box-shadow:
    0 8px 22px
    rgba(126,37,111,.14);
}


.v12-gradient-button:hover{

  filter:brightness(1.08);
}


.v12-gradient-button b{

  margin-left:4px;

  font-size:15px;
}


/* ==========================================================
   ACTION CARDS
   ========================================================== */

.v12-action-card{

  padding:
    18px;
}


.v12-action-head h2{

  margin:0;

  color:#f2f4f8;

  font-size:14px;
}


.v12-action-head p{

  margin:
    5px 0 0;

  color:#707b92;

  font-size:9px;
}


.v12-step-line{

  position:relative;

  display:grid;

  grid-template-columns:
    repeat(3,1fr);

  margin:
    14px 3px 17px;
}


.v12-step-line:before{

  content:"";

  position:absolute;

  left:8%;
  right:8%;

  top:9px;

  height:1px;

  background:
    rgba(99,112,149,.23);
}


.v12-step-line span{

  position:relative;

  z-index:1;

  display:flex;

  align-items:center;

  justify-content:center;

  gap:6px;

  color:#68758d;

  font-size:8px;
}


.v12-step-line i{

  width:19px;
  height:19px;

  display:grid;

  place-items:center;

  border:
    1px solid
    rgba(107,123,162,.33);

  border-radius:50%;

  background:
    #111a2b;

  color:#9ea8bc;

  font-style:normal;
}


.v12-step-line
span.active{

  color:#fff;
}


.v12-step-line
span.active i{

  border-color:
    var(--v12-pink);

  background:
    var(--v12-pink);

  color:#fff;
}


/* ==========================================================
   CHOICES
   ========================================================== */

.v12-choice-grid{

  display:grid;

  grid-template-columns:
    repeat(4,minmax(0,1fr));

  gap:8px;
}


.v12-choice{

  position:relative;

  min-width:0;

  min-height:99px;

  display:flex;

  flex-direction:column;

  padding:
    12px;

  border:
    1px solid
    rgba(118,137,179,.18);

  border-radius:
    9px;

  background:
    linear-gradient(
      145deg,
      #121b2e,
      #101828
    );

  cursor:pointer;

  box-sizing:border-box;

  transition:.15s ease;
}


.v12-choice input{

  position:absolute;

  opacity:0;

  pointer-events:none;
}


.v12-choice-check{

  position:absolute;

  right:8px;
  top:7px;

  display:none;

  color:
    var(--v12-pink);

  font-size:10px;
}


.v12-choice:has(input:checked){

  border-color:
    var(--v12-pink);

  background:
    linear-gradient(
      145deg,
      rgba(126,28,75,.24),
      #13192a
    );

  box-shadow:
    inset 0 0 0 1px
    rgba(255,49,94,.06);
}


.v12-choice:has(input:checked)
.v12-choice-check{

  display:block;
}


.v12-choice b{

  max-width:
    calc(100% - 12px);

  color:#eceff5;

  font-size:11px;

  white-space:nowrap;

  overflow:hidden;

  text-overflow:ellipsis;
}


.v12-choice small{

  margin-top:5px;

  color:#6d7890;

  font-size:8px;
}


.v12-choice strong{

  margin-top:auto;

  color:#eef0f6;

  font-size:10px;
}


.v12-choice-grid.package
.v12-choice{

  min-height:100px;
}


/* ==========================================================
   PACKAGE PREVIEW
   ========================================================== */

.v12-package-preview{

  margin-top:8px;

  padding:
    8px 10px;

  border:
    1px solid
    rgba(92,116,174,.11);

  border-radius:7px;

  background:
    #0c1423;

  color:#7f8aa2;

  font-size:8px;

  line-height:1.5;
}


/* ==========================================================
   BOTTOM SUMMARY
   ========================================================== */

.v12-bottom-summary{

  display:grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr))
    minmax(145px,.9fr);

  gap:6px;

  margin-top:10px;
}


.v12-bottom-summary > div{

  min-width:0;

  min-height:48px;

  display:flex;

  flex-direction:column;

  justify-content:center;

  padding:
    0 11px;

  border:
    1px solid
    rgba(113,130,174,.08);

  border-radius:7px;

  background:
    #0c1423;
}


.v12-bottom-summary span{

  color:#66728a;

  font-size:7px;
}


.v12-bottom-summary b{

  max-width:100%;

  margin-top:5px;

  color:#f0f2f7;

  font-size:9px;

  white-space:nowrap;

  overflow:hidden;

  text-overflow:ellipsis;
}


.v12-bottom-summary
.v12-gradient-button{

  margin-top:0;
}


/* ==========================================================
   COPY SUCCESS
   ========================================================== */

.copy-credential.copied,
.copy-credential:focus{

  border-color:
    rgba(42,216,120,.35) !important;
}


.copy-credential.copied{

  color:
    #48e28d !important;
}


/* ==========================================================
   TABLES / OTHER PAGES
   ========================================================== */

.customer-card table{

  width:100%;

  border-collapse:collapse;
}


.customer-card table th{

  padding:
    12px;

  color:#66748e;

  font-size:8px;

  text-align:left;

  text-transform:uppercase;

  letter-spacing:.7px;
}


.customer-card table td{

  padding:
    13px 12px;

  border-top:
    1px solid
    rgba(255,255,255,.045);

  color:#cbd2e0;

  font-size:10px;
}


/* ==========================================================
   TABLET
   ========================================================== */

@media(max-width:1100px){

  .customer-app{

    grid-template-columns:
      82px minmax(0,1fr) !important;
  }


  .customer-sidebar{

    width:82px !important;

    padding:
      16px 9px !important;
  }


  .customer-brand{

    justify-content:center;
  }


  .customer-brand img{

    width:58px !important;
  }


  .customer-menu a,
  .customer-nav-disabled{

    justify-content:center;

    padding:0 !important;
  }


  .customer-menu a span,
  .customer-nav-disabled span,
  .menu-heading,
  .v12-referral-card,
  .sidebar-user > div:not(.avatar),
  .sidebar-user form{

    display:none !important;
  }


  .customer-menu a.active:after{

    right:-9px;
  }


  .customer-main{

    grid-column:2 !important;
  }


  .v12-hero-stats{

    grid-template-columns:
      repeat(2,1fr);
  }


  .v12-main-grid,
  .v12-action-grid{

    grid-template-columns:1fr;
  }

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media(max-width:700px){

  .customer-app{

    display:block !important;
  }


  .customer-main{

    width:100% !important;
  }


  .customer-sidebar{

    width:
      min(82vw,280px) !important;

    transform:
      translateX(-105%);

    transition:
      transform .2s ease;
  }


  .customer-sidebar.open{

    transform:
      translateX(0);
  }


  .customer-brand{

    justify-content:flex-start;
  }


  .customer-brand img{

    width:130px !important;
  }


  .customer-menu a,
  .customer-nav-disabled{

    justify-content:flex-start;

    padding:
      0 11px !important;
  }


  .customer-menu a span,
  .customer-nav-disabled span,
  .menu-heading{

    display:initial !important;
  }


  .v12-referral-card{

    display:block !important;
  }


  .mobile-menu{

    display:inline-flex !important;
  }


  .customer-topbar{

    height:58px !important;

    padding:
      0 13px !important;
  }


  .breadcrumb{

    display:none;
  }


  .customer-content{

    padding:
      14px 10px
      45px !important;
  }


  .v12-service-hero{

    padding:
      16px;
  }


  .v12-hero-head{

    flex-direction:column;
  }


  .v12-back-button{

    align-self:flex-start;
  }


  .v12-hero-sub{

    align-items:flex-start;

    flex-wrap:wrap;
  }


  .v12-hero-stats{

    grid-template-columns:1fr;
  }


  .v12-hero-stats > div{

    min-height:55px;

    border-right:0;

    border-bottom:
      1px solid
      rgba(255,255,255,.04);
  }


  .v12-card{

    padding:15px;
  }


  .v12-data-row{

    grid-template-columns:
      1fr auto;

    padding:
      8px 9px;

    min-height:48px;
  }


  .v12-data-row > span{

    grid-column:1/-1;
  }


  .v12-data-row > strong{

    justify-self:start;
  }


  .v12-password-data{

    grid-template-columns:
      1fr auto;
  }


  .v12-choice-grid{

    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }


  .v12-bottom-summary{

    grid-template-columns:
      1fr 1fr;
  }


  .v12-bottom-summary
  .v12-gradient-button{

    grid-column:1/-1;
  }

}


@media(max-width:430px){

  .v12-choice-grid{

    grid-template-columns:1fr;
  }


  .v12-bottom-summary{

    grid-template-columns:1fr;
  }

}



/* ==========================================================
   HOSTOYUN V12.0.2 - COPY BUTTON FIX
   ========================================================== */


/* Data row aksiyon alanları */

.v12-data-row{
  grid-template-columns:
    minmax(105px,.75fr)
    minmax(0,1.4fr)
    32px !important;
}


/* Şifre satırında 2 buton olduğu için son kolon auto */

.v12-password-data{
  grid-template-columns:
    minmax(105px,.75fr)
    minmax(0,1.4fr)
    auto !important;
}


.v12-password-actions{
  display:flex !important;

  align-items:center;

  justify-content:flex-end;

  gap:5px !important;

  min-width:63px;
}


/* İkon butonları hiçbir zaman büyümesin */

.v12-icon-button{

  width:30px !important;
  height:30px !important;

  min-width:30px !important;
  max-width:30px !important;

  flex:0 0 30px !important;

  padding:0 !important;

  display:inline-grid !important;

  place-items:center;

  overflow:hidden;

  white-space:nowrap;

  line-height:1;

  font-size:12px !important;
}


/* Hero içindeki mini copy */

.v12-inline-copy{

  width:25px !important;
  height:25px !important;

  min-width:25px !important;
  max-width:25px !important;

  display:inline-grid !important;

  place-items:center;

  overflow:hidden;
}


/* Başarılı kopyalama */

.v12-icon-button.copied,
.v12-inline-copy.copied{

  border-color:
    rgba(43,216,121,.48) !important;

  background:
    rgba(43,216,121,.12) !important;

  color:
    #45e28b !important;

  box-shadow:
    0 0 0 3px
    rgba(43,216,121,.04);
}


/* Hata */

.v12-icon-button.copy-error,
.v12-inline-copy.copy-error{

  border-color:
    rgba(255,49,94,.5) !important;

  color:
    #ff5878 !important;
}


/* Değerler butona girmesin */

.v12-data-row > strong{

  padding-right:5px;

  text-align:right;
}


/* Password mask düzgün dursun */

.v12-password-data
.masked-credential{

  letter-spacing:2px;

  color:#dce3f3;
}


/* Tooltip'i tarayıcı title ile bırakıyoruz.
   Yazı buton içine asla taşmayacak. */


/* MOBILE */

@media(max-width:700px){

  .v12-data-row{

    grid-template-columns:
      minmax(0,1fr)
      32px !important;
  }


  .v12-password-data{

    grid-template-columns:
      minmax(0,1fr)
      auto !important;
  }


  .v12-data-row > span{

    grid-column:1/-1;
  }


  .v12-data-row > strong{

    justify-self:start;

    text-align:left;

    padding-right:0;
  }

}



/* =========================================================
   HOSTOYUN CUSTOMER PANEL V12.1
   TYPOGRAPHY + COPY BUTTON ALIGNMENT
   ========================================================= */


/* ---------------------------------------------------------
   1. GENEL YAZI STİLİ
   --------------------------------------------------------- */

.customer-body,
.customer-body button,
.customer-body input,
.customer-body select,
.customer-body textarea{

  font-family:
    Inter,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif !important;

  font-synthesis:none;
  text-rendering:optimizeLegibility;

  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}


.customer-body{

  font-size:14px !important;
  line-height:1.45;
}


/* ---------------------------------------------------------
   2. SIDEBAR
   --------------------------------------------------------- */

.customer-menu a,
.customer-nav-disabled{

  font-size:13px !important;
  font-weight:600 !important;

  letter-spacing:0 !important;
}


.menu-heading{

  font-size:10px !important;

  font-weight:700 !important;

  letter-spacing:1.3px !important;
}


.customer-menu a i,
.customer-nav-disabled i{

  font-size:15px;
}


/* ---------------------------------------------------------
   3. TOP BAR
   --------------------------------------------------------- */

.breadcrumb{

  font-size:12px !important;

  font-weight:400 !important;
}


.breadcrumb b{

  font-weight:600 !important;
}


.balance-pill{

  font-size:11px !important;
}


.balance-pill b{

  font-size:14px !important;

  font-weight:700 !important;
}


/* ---------------------------------------------------------
   4. HERO
   --------------------------------------------------------- */

.v12-breadcrumb{

  font-size:11px !important;

  font-weight:400;

  letter-spacing:0;
}


.v12-hero-head h1{

  font-size:
    clamp(27px,2vw,34px) !important;

  font-weight:700 !important;

  letter-spacing:-.55px !important;

  line-height:1.2;
}


.v12-hero-sub{

  font-size:12px !important;
}


.v12-hero-sub b{

  font-size:12px;

  font-weight:700;
}


.v12-live-badge{

  font-size:10px !important;

  font-weight:700 !important;
}


/* ---------------------------------------------------------
   5. HERO BİLGİ KUTULARI
   --------------------------------------------------------- */

.v12-hero-stats span{

  font-size:10px !important;

  font-weight:400;
}


.v12-hero-stats b{

  font-size:13px !important;

  font-weight:650 !important;
}


.v12-remaining-box b{

  font-size:14px !important;

  font-weight:700 !important;
}


/* ---------------------------------------------------------
   6. CARD BAŞLIKLARI
   --------------------------------------------------------- */

.v12-card-header h2,
.v12-action-head h2{

  font-size:17px !important;

  font-weight:700 !important;

  letter-spacing:-.2px;
}


.v12-card-header p,
.v12-action-head p{

  margin-top:4px !important;

  font-size:11px !important;

  font-weight:400;

  line-height:1.4;
}


/* ---------------------------------------------------------
   7. BİLGİ SATIRLARI
   --------------------------------------------------------- */

.v12-data-list{

  gap:7px !important;
}


.v12-data-row{

  min-height:48px !important;

  /*
   * Sol: başlık
   * Sağ: değer
   * En sağ: aksiyon
   */

  grid-template-columns:
    minmax(115px,.7fr)
    minmax(0,1.5fr)
    auto !important;

  gap:10px !important;

  padding:
    0 10px 0 14px !important;

  overflow:visible !important;
}


.v12-data-row > span{

  font-size:11px !important;

  font-weight:400 !important;

  color:#8e9ab1 !important;
}


.v12-data-row > strong{

  min-width:0;

  justify-self:end !important;

  padding:0 !important;

  color:#f3f5f9 !important;

  font-size:12px !important;

  font-weight:650 !important;

  line-height:1.2;

  text-align:right !important;

  white-space:nowrap;

  overflow:hidden;

  text-overflow:ellipsis;
}


/* ---------------------------------------------------------
   8. COPY BUTTON
   Her buton değerinin HEMEN sağında
   --------------------------------------------------------- */

.v12-icon-button{

  position:static !important;

  inset:auto !important;

  transform:none !important;

  justify-self:end !important;

  align-self:center !important;

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

  min-width:34px !important;
  max-width:34px !important;

  min-height:34px !important;
  max-height:34px !important;

  margin:0 !important;

  padding:0 !important;

  display:inline-flex !important;

  align-items:center !important;
  justify-content:center !important;

  flex:0 0 34px !important;

  border:
    1px solid
    rgba(102,124,185,.25) !important;

  border-radius:8px !important;

  background:
    #111b2e !important;

  color:
    #b7c4df !important;

  font-size:13px !important;

  font-weight:500 !important;

  line-height:1 !important;

  white-space:nowrap !important;

  overflow:hidden !important;

  cursor:pointer;

  transition:
    border-color .15s ease,
    background .15s ease,
    color .15s ease,
    transform .15s ease;
}


.v12-icon-button:hover{

  border-color:
    rgba(100,116,255,.65) !important;

  background:
    #17223a !important;

  color:#fff !important;

  transform:
    translateY(-1px) !important;
}


/* Copy başarılı */

.v12-icon-button.copied{

  border-color:
    rgba(42,216,120,.55) !important;

  background:
    rgba(42,216,120,.12) !important;

  color:
    #43df87 !important;
}


/* ---------------------------------------------------------
   9. ŞİFRE SATIRI
   Göz ve copy yan yana
   --------------------------------------------------------- */

.v12-password-data{

  grid-template-columns:
    minmax(115px,.7fr)
    minmax(0,1.5fr)
    auto !important;
}


.v12-password-actions{

  position:static !important;

  display:flex !important;

  align-items:center !important;

  justify-content:flex-end !important;

  gap:6px !important;

  min-width:74px !important;

  margin:0 !important;
}


.v12-password-data
.masked-credential{

  justify-self:end !important;

  letter-spacing:2.5px !important;
}


/* Göz butonu hafif pembe */

.v12-password-actions
.reveal-credential{

  border-color:
    rgba(255,49,94,.30) !important;

  color:
    #ff7692 !important;
}


.v12-password-actions
.reveal-credential:hover{

  border-color:
    rgba(255,49,94,.65) !important;

  background:
    rgba(255,49,94,.08) !important;

  color:
    #ff9aad !important;
}


/* ---------------------------------------------------------
   10. IP COPY BUTONU
   --------------------------------------------------------- */

.v12-data-row
.copy-credential{

  grid-column:3 !important;
}


/* ---------------------------------------------------------
   11. HERO IP COPY
   --------------------------------------------------------- */

.v12-inline-copy{

  position:static !important;

  width:28px !important;
  height:28px !important;

  min-width:28px !important;

  display:inline-flex !important;

  align-items:center !important;
  justify-content:center !important;

  margin-left:1px;

  padding:0 !important;

  border:
    1px solid
    rgba(106,125,181,.22) !important;

  border-radius:7px !important;

  background:
    #111a2c !important;

  color:
    #aebbd3 !important;

  font-size:11px !important;

  line-height:1;

  cursor:pointer;
}


/* ---------------------------------------------------------
   12. ŞİFRE DEĞİŞTİR
   --------------------------------------------------------- */

.v12-password-change summary{

  min-height:54px !important;
}


.v12-password-change b{

  font-size:12px !important;

  font-weight:650 !important;
}


.v12-password-change small{

  margin-top:3px !important;

  font-size:10px !important;
}


/* ---------------------------------------------------------
   13. ANA BUTON
   --------------------------------------------------------- */

.v12-gradient-button{

  min-height:46px !important;

  font-size:12px !important;

  font-weight:700 !important;

  letter-spacing:0 !important;
}


/* ---------------------------------------------------------
   14. SÜRE / PAKET SEÇENEKLERİ
   --------------------------------------------------------- */

.v12-choice{

  min-height:108px !important;

  padding:14px !important;
}


.v12-choice b{

  font-size:13px !important;

  font-weight:700 !important;
}


.v12-choice small{

  margin-top:5px !important;

  font-size:10px !important;

  line-height:1.35;
}


.v12-choice strong{

  font-size:12px !important;

  font-weight:700 !important;
}


.v12-step-line span{

  font-size:9px !important;

  font-weight:500;
}


/* ---------------------------------------------------------
   15. ALT ÖZET
   --------------------------------------------------------- */

.v12-bottom-summary span{

  font-size:9px !important;

  font-weight:400;
}


.v12-bottom-summary b{

  font-size:11px !important;

  font-weight:650 !important;
}


/* ---------------------------------------------------------
   16. PAKET PREVIEW
   --------------------------------------------------------- */

.v12-package-preview{

  font-size:10px !important;

  line-height:1.5;
}


/* ---------------------------------------------------------
   17. REFERRAL
   --------------------------------------------------------- */

.v12-referral-card b{

  font-size:14px !important;
}


.v12-referral-card strong{

  font-size:14px !important;
}


.v12-referral-card p{

  font-size:11px !important;
}


.v12-referral-card a{

  font-size:10px !important;
}


/* ---------------------------------------------------------
   18. KOPYALA BUTONU TITLE YERİNE TOOLTIP
   --------------------------------------------------------- */

.v12-icon-button,
.v12-inline-copy{

  position:relative !important;
}


.v12-icon-button[data-copy]:hover:after,
.v12-inline-copy[data-copy]:hover:after{

  content:"Kopyala";

  position:absolute;

  z-index:9999;

  right:0;

  bottom:
    calc(100% + 8px);

  width:max-content;

  padding:
    6px 8px;

  border:
    1px solid
    rgba(111,131,185,.25);

  border-radius:6px;

  background:#050a13;

  color:#e8edf8;

  font-size:10px;

  font-weight:500;

  line-height:1;

  box-shadow:
    0 8px 20px
    rgba(0,0,0,.3);

  pointer-events:none;
}


.v12-icon-button.copied:hover:after,
.v12-inline-copy.copied:hover:after{

  content:"Kopyalandı ✓";

  color:
    #4be18e;
}


/* ---------------------------------------------------------
   19. MOBİL
   --------------------------------------------------------- */

@media(max-width:700px){

  .customer-body{

    font-size:14px !important;
  }


  .v12-hero-head h1{

    font-size:25px !important;
  }


  .v12-data-row{

    grid-template-columns:
      minmax(0,1fr)
      auto !important;

    gap:6px 10px !important;

    min-height:60px !important;

    padding:
      9px 10px 9px 13px !important;
  }


  .v12-data-row > span{

    grid-column:1/-1 !important;

    font-size:10px !important;
  }


  .v12-data-row > strong{

    grid-column:1 !important;

    grid-row:2 !important;

    justify-self:start !important;

    text-align:left !important;

    font-size:12px !important;
  }


  .v12-data-row >
  .v12-icon-button{

    grid-column:2 !important;

    grid-row:2 !important;
  }


  .v12-password-data{

    grid-template-columns:
      minmax(0,1fr)
      auto !important;
  }


  .v12-password-actions{

    grid-column:2 !important;

    grid-row:2 !important;
  }


  .v12-choice{

    min-height:105px !important;
  }

}