/* ==============================================
   klik-klic.css
   ============================================== */
 
.klik-chrome {
   width: 100%;
   max-width: 780px;
   border-radius: 16px;
   overflow: hidden;
}
.klik-titlebar {
   background: #dee1e6;
   padding: 10px 14px 0;
   display: flex;
   align-items: center;
   gap: 8px;
}
.klik-dots {
   display: flex;
   gap: 6px;
}
.klik-dot {
   width: 13px;
   height: 13px;
   border-radius: 50%;
}
.klik-dot-red {
   background: #ff5f57;
}
.klik-dot-yellow {
   background: #febc2e;
}
.klik-dot-green {
   background: #28c840;
}
.klik-tab {
   background: white;
   border-radius: 8px 8px 0 0;
   padding: 6px 16px;
   font-size: 12px;
   color: #061b31;
   display: flex;
   align-items: center;
   gap: 8px;
   margin-left: 10px;
   min-width: 200px;
}
.klik-tab-close {
   margin-left: auto;
   color: #888;
   font-size: 18px;
   line-height: 0;
}
.klik-toolbar {
   background: white;
   padding: 8px 14px;
   display: flex;
   align-items: center;
   gap: 8px;
   border-bottom: 1px solid #ddd;
}
.klik-toolbar-icon {
   flex-shrink: 0;
}
.klik-address-bar {
   flex: 1;
   background: #f1f3f4;
   border-radius: 20px;
   padding: 5px 14px;
   display: flex;
   align-items: center;
   gap: 8px;
   font-size: 12px;
   color: #50617a;
}
.klik-address-bar span {
   flex: 1;
}
.klik-page {
   background: linear-gradient(160deg, #0b57d0 0%, #122054 100%);
}
.klik-page-2 {
   background: none;
}
.klik-page-inner {
   max-width: 1200px;
   margin: 0 auto;
   padding: 20px 20px;
}
.klik-page-inner-2 {
   max-width: 1200px;
   margin: 0 auto;
}
.klik-card {
   background: rgba(255,255,255,0.78);
   border-radius: 8px;
   border: 1px solid white;
   padding: 40px 22px 20px;
   display: flex;
   flex-direction: column;
   gap: 16px;
   max-width: 460px;
   margin: 0 auto;
}
.klik-card-header {
   text-align: center;
}
.klik-logo {
   display: inline-block;
   text-align: left;
}
.klik-tagline {
   color: #061b31;
   text-transform: uppercase;
   font-size: 14px;
   font-weight: 600;
   line-height: 1.8;
}
.klik-btn {
   width: 100%;
   padding: 10px 0;
   border-radius: 8px;
   font-weight: 500;
   font-size: 14px;
   text-transform: uppercase;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   border: none;
}
.klik-btn-google {
   background: #061b31;
   color: white;
}
.klik-btn-outline {
   background: transparent;
   color: #061b31;
   border: 2px solid #061b31;
   font-weight: 600;
}
.klik-btn-primary {
   background: #1D4ED8;
   color: white;
   border-radius: 6px;
}
.klik-btn-link {
   background: transparent;
   color: #3b82f6;
   font-weight: 400;
   text-transform: none;
   font-size: 14px;
}
.klik-divider {
   text-align: center;
   color: #50617a;
   font-size: 14px;
}
.klik-form {
   display: flex;
   flex-direction:
   column; gap: 10px;
}
.klik-input {
   padding: 10px 12px;
   background: rgba(255, 255, 255, 0.8);
   border: 1px solid rgba(255, 255, 255, 0.8);
   border-radius: 8px;
   font-size: 14px;
   width: 100%;
}
.klik-footer {
   padding: 16px 0;
   text-align: center;
}
.klik-footer p {
   font-size: 12px;
   font-weight: 500;
   text-transform: uppercase;
   color: white;
}
.klik-footer a {
   color: white;
   text-decoration: none;
}
.klik-footer a:hover {
   text-decoration: underline;
}
.klik-sep {
   padding: 0 8px;
}