/* BilgiGEN örneğinin yerleşimi; mevcut veri alanları, tipografi ve arka plan ayarları korunur. */
:root{--kh-auth-panel:#304460;--kh-auth-accent:#BF2130}
.kh-appearance{background:var(--kh-auth-panel)}
.kh-appearance::before{content:"";position:fixed;inset:0 0 0 62%;background:var(--kh-auth-panel);z-index:-1;pointer-events:none}
.kh-appearance .site-header{border-top:5px solid var(--kh-auth-accent);border-bottom:0;box-shadow:none}
.kh-appearance main{max-width:none}
.welcome-layout{grid-template-columns:minmax(0,1.55fr) minmax(380px,1fr);gap:7%;align-items:center}
.welcome-layout>.benefits{align-self:center;min-height:0;border:0;border-radius:0;background:transparent;box-shadow:none;overflow:visible;padding:32px 0 32px 12px}
.welcome-layout>.benefits>h2{letter-spacing:-1.6px;line-height:1.1;font-weight:750;max-width:760px;margin:24px 0}
.welcome-layout>.benefits>.eyebrow{letter-spacing:.18em;font-weight:600;font-size:13px}
.welcome-layout>.benefits>.lead{max-width:700px;line-height:1.55;margin-bottom:20px}
.kh-appearance .kh-features{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 32px;margin-top:20px}
.kh-appearance .kh-features .benefit{border:0;padding:0;align-items:flex-start;gap:13px}
.kh-appearance .kh-features .icon{width:42px;height:42px;border:1px solid #ffffff50;background:#ffffff15;color:var(--kh-feature-text);flex:none}
.kh-appearance .kh-features .benefit strong{font-weight:650;line-height:1.4}
.kh-appearance .kh-features .benefit p{line-height:1.55;margin-top:3px}
.kh-appearance .form-card{border:0;border-radius:14px;box-shadow:0 15px 45px #0f172a14}
.form-brand{display:flex;align-items:center;justify-content:center;gap:8px;margin:0 0 18px;color:var(--kh-form-heading);font-size:24px;font-weight:750;letter-spacing:-.8px}
.form-brand img{width:40px;height:42px;object-fit:contain}
.kh-appearance #login-panel{max-width:550px;padding:36px 40px}
.kh-appearance #login-panel .form-brand{margin-bottom:28px}
.kh-appearance #login-panel h2{font-weight:750;margin:12px 0}
.kh-appearance #login-panel>p{line-height:1.55}
.kh-appearance #login-panel input:not([type=checkbox]){height:48px;padding:12px 14px;border:1px solid var(--line);border-radius:2px;background:color-mix(in srgb,var(--soft) 60%,white)}
.kh-appearance #login-panel label{margin-top:18px}
.kh-appearance #login-panel button[type=submit],.kh-appearance #login-panel #submit{border-radius:2px;padding:15px;margin-top:20px}
.kh-appearance #register-panel{max-width:550px;padding:20px 28px}
.kh-appearance #register-panel .intro{text-align:left;margin-bottom:8px}
.kh-appearance #register-panel .intro h1{font-weight:750}
.kh-appearance #register-panel .intro h1::after{display:none}
.kh-appearance #register-panel .language{float:right;margin:0;font-size:10px}
.kh-appearance #register-panel .form-brand{margin-bottom:12px}
.kh-appearance #register-panel input:not([type=checkbox]),.kh-appearance #register-panel select{height:29px;padding:4px 8px;border:1px solid var(--line);border-radius:2px;background:color-mix(in srgb,var(--soft) 60%,white)}
.kh-appearance #register-panel .phone-line,.kh-appearance #register-panel .domain-line{border:1px solid var(--line);border-radius:2px;background:color-mix(in srgb,var(--soft) 60%,white);gap:4px}
.kh-appearance #register-panel .phone-line input,.kh-appearance #register-panel .phone-line select,.kh-appearance #register-panel .domain-line input{border:0;background:transparent}
.kh-appearance #register-panel .domain-line span{padding-right:6px}
.kh-appearance #register-panel #demo-submit{border-radius:2px;padding:12px}
.kh-appearance .form-card input:focus,.kh-appearance .form-card select:focus{outline:2px solid var(--brand);outline-offset:1px;box-shadow:none}
.kh-appearance footer{color:#FFFFFF;text-shadow:none;text-align:right}
.welcome-layout.preparing{display:flex;justify-content:center}
.kh-appearance:has(.welcome-layout.preparing)::before{inset:0;background:var(--kh-auth-panel)}
#register-panel.is-preparing{max-width:550px;padding:32px}
@media(min-width:1000px){.kh-appearance main{padding:14px 4%}.welcome-layout>.form-card{width:100%}.kh-appearance footer{padding:6px 2% 10px}}
@media(min-width:1000px) and (max-width:1200px){.welcome-layout{grid-template-columns:minmax(0,1.15fr) minmax(380px,1fr);gap:4%}.kh-appearance::before{left:55%}.kh-appearance .kh-features{grid-template-columns:1fr;gap:18px}}
@media(max-width:999px){.kh-appearance::before{inset:0}.welcome-layout{grid-template-columns:minmax(0,1fr);gap:32px}.welcome-layout>.benefits{padding:24px 8px}.kh-appearance main{padding:24px 5%}.kh-appearance #register-panel,.kh-appearance #login-panel{max-width:600px}.kh-appearance footer{text-align:center}}
@media(max-width:600px){.kh-appearance .kh-features{grid-template-columns:1fr;gap:20px}.kh-appearance #login-panel,.kh-appearance #register-panel{padding:24px 22px}.kh-appearance #register-panel input:not([type=checkbox]),.kh-appearance #register-panel select{height:36px}.form-brand{font-size:23px}}

/* Form, sağ arka planın merkezinde; ölçekleme sütunun merkezini değiştirmez. */
@media(min-width:1000px){
 .kh-appearance main{padding:14px 0}
 .welcome-layout{height:100%;grid-template-columns:minmax(0,62fr) minmax(0,38fr);gap:0;transform:none}
 .welcome-layout>.form-card{max-width:min(550px,calc(100% - 48px))!important;justify-self:center;align-self:center;transform:scale(var(--welcome-scale,1));transform-origin:center}
 .welcome-layout>.benefits{width:calc(100% - 96px);justify-self:center;transform:scale(var(--welcome-scale,1));transform-origin:center;padding:24px 0}
 .welcome-layout.preparing{height:100%;align-items:center}
 .welcome-layout.preparing>.form-card{max-width:550px!important}
 .kh-appearance::before{left:62%}
}
@media(min-width:1000px) and (max-width:1200px){
 .welcome-layout{grid-template-columns:minmax(0,55fr) minmax(0,45fr)}
 .kh-appearance::before{left:55%}
 .welcome-layout>.benefits{width:calc(100% - 64px)}
}

/* Fotoğraf karartması ve sağ panel aynı yönetilen rengi kullanır. */
.kh-appearance #welcome-shade{background:var(--kh-auth-panel)}

/* İçeriğin doğal yüksekliği grid satırını büyütmesin; ölçeklenmiş form merkezde kalsın. */
@media(min-width:1000px){.welcome-layout{grid-template-rows:minmax(0,1fr)}}

/* Menü okunurluğu ve formun sağ kenarıyla hizalanan üst işlem grubu. */
@media(min-width:1000px){
 .kh-appearance .site-header{padding-right:var(--kh-header-right,2%)}
 .kh-appearance .site-header nav a,.kh-appearance .site-header summary{font-size:13px;line-height:1.4}
 .kh-appearance .site-header nav{gap:14px}
}
@media(min-width:1000px) and (max-width:1500px){
 .kh-appearance .site-header{flex-wrap:wrap}
 .kh-appearance .site-header nav{order:3;width:100%;justify-content:center}
 .kh-appearance .header-contact{margin-left:auto}
}

@media(min-width:1000px){.kh-appearance footer{padding-right:var(--kh-header-right,2%)}}

/* KolektifHub simgesi ve yazısı aynı marka rengindedir. */
.kh-appearance .site-header .brand,.kh-appearance .form-brand{color:#314461!important}

/* Kod adımında açıklama, süre, alan ve işlemler ayrı aralıklarla okunur. */
.kh-appearance #register-panel:has(#demo-verify:not([hidden])) #legal-state{display:none}
.kh-appearance #register-panel:has(#demo-verify:not([hidden])) #registration-summary{padding:12px 0}
.kh-appearance #register-panel #demo-verify{margin-top:22px}
.kh-appearance #register-panel #demo-countdown{font-size:13px;line-height:1.6;margin:0 0 18px}
.kh-appearance #register-panel #demo-verify label{margin:0 0 8px;line-height:1.5}
.kh-appearance #register-panel #demo-otp{height:44px;letter-spacing:.22em;font-size:20px;padding:8px 12px}
.kh-appearance #register-panel:has(#demo-verify:not([hidden])) #demo-submit{margin-top:20px}
.kh-appearance #register-panel:has(#demo-verify:not([hidden])) #demo-resend{margin-top:12px;padding:12px}
.kh-appearance #register-panel:has(#demo-verify:not([hidden])) #demo-message{margin-top:20px;line-height:1.6}
.kh-appearance #register-panel:has(#demo-verify:not([hidden])) .switch{margin-top:18px}

/* Masaüstünde form ölçeklense de kod alanı 44 px ve işlem aralıkları okunur kalır. */
@media(min-width:1000px){
 .kh-appearance #register-panel #demo-otp{height:calc(44px / var(--welcome-scale,1));font-size:calc(20px / var(--welcome-scale,1))}
 .kh-appearance #register-panel:has(#demo-verify:not([hidden])) #demo-submit{margin-top:calc(20px / var(--welcome-scale,1))}
 .kh-appearance #register-panel:has(#demo-verify:not([hidden])) #demo-resend{margin-top:calc(12px / var(--welcome-scale,1))}
}

/* Onaylanan kart: açık etiketler, yumuşak köşeler ve sade güven cümlesi. */
.kh-appearance #register-panel{border-radius:22px;padding:22px 28px}
.kh-appearance #register-panel .intro h1{white-space:pre-line;line-height:1.16;margin:0 0 8px;letter-spacing:-.6px}
.kh-appearance #register-panel .intro{margin-bottom:12px}
.kh-appearance #register-panel .intro p{line-height:1.5}
.kh-appearance #register-panel .intro .registration-reassurance{font-size:12px;line-height:1.5;margin-top:9px;color:var(--kh-form-text)}
.kh-appearance #register-panel .registration-fields{gap:4px 16px}
.kh-appearance #register-panel label:not(.check){margin:6px 0 4px;line-height:1.35}
.kh-appearance #register-panel input:not([type=checkbox]),.kh-appearance #register-panel select{border-radius:6px}
.kh-appearance #register-panel .phone-line,.kh-appearance #register-panel .domain-line{border-radius:6px}
.kh-appearance #register-panel .phone-line input,.kh-appearance #register-panel .phone-line select,.kh-appearance #register-panel .domain-line input{border:0}
.kh-appearance #register-panel #demo-submit{border-radius:7px}
.kh-appearance #register-panel .channel-title{border-top:1px solid var(--line);padding-top:9px;margin-top:10px}
.kh-appearance #register-panel .switch{margin-top:12px}
@media(max-width:600px){.kh-appearance #register-panel{padding:24px 22px}}

/* Onaylanan genel görünümde bilgi satırları sade metin olarak yer alır. */
.kh-appearance .kh-features .icon{display:none}
@media(min-width:1501px){.kh-appearance .kh-features{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}}

/* Yalnızca giriş ve kod adımları: onaylanan kayıt kartının iç oranları. */
.kh-appearance #login-panel{border-radius:22px;padding:22px 28px}
.kh-appearance #login-panel .form-brand{margin-bottom:12px}
.kh-appearance #login-panel h2{font-size:24px;line-height:1.16;letter-spacing:-.6px;margin:0 0 8px}
.kh-appearance #login-panel>p{font-size:12px;line-height:1.5}
.kh-appearance #login-panel .pill{font-size:12px;margin-bottom:12px}
.kh-appearance #login-panel label{font-size:11px;line-height:1.35;margin:6px 0 4px}
.kh-appearance #login-panel input:not([type=checkbox]){height:29px;font-size:13px;padding:4px 8px;border-radius:6px}
.kh-appearance #login-panel button[type=submit],.kh-appearance #login-panel #submit{border-radius:7px;padding:12px;margin-top:20px}
.kh-appearance #login-panel .switch{font-size:13px;margin-top:12px}
.kh-appearance #login-panel #login-verify{margin-top:16px}
.kh-appearance #login-panel #otp{height:44px;letter-spacing:.16em}
.kh-appearance #register-panel:has(#demo-verify:not([hidden])) #demo-otp{font-size:13px;letter-spacing:.16em}
.kh-appearance #register-panel:has(#demo-verify:not([hidden])) #demo-resend{border-radius:7px}
@media(min-width:1000px){.kh-appearance #login-panel #otp{height:calc(44px / var(--welcome-scale,1))}}
@media(max-width:600px){.kh-appearance #login-panel{padding:24px 22px}.kh-appearance #login-panel input:not([type=checkbox]){height:36px}}