/* ============================================================
   KARAGULV2 (kv2-) — Ana Stil Dosyasi
   login.php, index.php, install/index.php taranarak yeniden
   olusturulmustur. Kullanilan tum kv2- class'lari ve CSS
   degiskenlerini (--kv2-*) kapsar. Admin panel / register.php
   gibi henuz gorulmemis sayfalar icin ek class'lar gerekebilir.
   ============================================================ */

:root{
    --font-display: 'Barlow Condensed', system-ui, sans-serif;
    --font-body: 'Manrope', system-ui, sans-serif;

    --kv2-bg-1:#0d1117;      /* en koyu zemin */
    --kv2-bg-2:#1b1f27;      /* panel/kart zemini */
    --kv2-panel:#161b22;     /* auth/install kart zemini */
    --kv2-border:#2a2f3a;
    --kv2-text:#f2f3f5;
    --kv2-muted:#8a8f9c;

    --kv2-teal:#2EC4B6;
    --kv2-amber:#ffb347;
    --kv2-red:#e63946;
    --kv2-blue:#2563eb;
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
    margin:0;
    background:var(--kv2-bg-1);
    color:var(--kv2-text);
    font-family:var(--font-body);
    font-size:14px;
    line-height:1.5;
}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:800;margin:0;}
a{color:var(--kv2-teal);text-decoration:none;}
a:hover{text-decoration:underline;}
code{background:rgba(255,255,255,.08);padding:1px 5px;border-radius:4px;font-size:12px;}
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--kv2-border);border-radius:6px;}

/* ============================================================
   Ortak form/buton elemanlari
   ============================================================ */
input,textarea,select{
    font-family:inherit;
    font-size:14px;
    color:var(--kv2-text);
    background:var(--kv2-bg-1);
    border:1px solid var(--kv2-border);
    border-radius:8px;
    padding:9px 10px;
    outline:none;
}
input:focus,textarea:focus,select:focus{border-color:var(--kv2-teal);}
button{font-family:inherit;cursor:pointer;}

.kv2-btn{
    display:inline-flex;align-items:center;justify-content:center;gap:6px;
    background:rgba(255,255,255,.06);
    border:1px solid var(--kv2-border);
    color:var(--kv2-text);
    border-radius:8px;
    padding:8px 14px;
    font-size:13px;font-weight:600;
    cursor:pointer;
    transition:background .15s ease;
}
.kv2-btn:hover{background:rgba(255,255,255,.12);text-decoration:none;}
.kv2-btn-teal{background:var(--kv2-teal);border-color:var(--kv2-teal);color:#0b1015;}
.kv2-btn-teal:hover{background:#27b0a3;}
.kv2-btn-amber{background:var(--kv2-amber);border-color:var(--kv2-amber);color:#241800;}
.kv2-btn-amber:hover{background:#ffc46b;}
.kv2-btn-red{background:rgba(230,57,70,.15);border-color:var(--kv2-red);color:#ffb3b3;}
.kv2-btn-red:hover{background:rgba(230,57,70,.3);}
.kv2-btn-blue{background:var(--kv2-blue);border-color:var(--kv2-blue);color:#fff;}

.kv2-alert{
    background:rgba(230,57,70,.12);
    border:1px solid var(--kv2-red);
    color:#ffb3b3;
    border-radius:8px;
    padding:10px 12px;
    font-size:13px;
}

.kv2-form-row{margin-bottom:14px;}
.kv2-form-row label{display:block;margin-bottom:5px;font-size:13px;color:var(--kv2-muted);}
.kv2-form-row input,.kv2-form-row textarea,.kv2-form-row select{width:100%;}

/* ============================================================
   Auth sayfalari (login.php / register.php) + install sihirbazi
   ============================================================ */
.kv2-auth-page{
    min-height:100vh;
    display:flex;align-items:center;justify-content:center;
    padding:24px;
    background:radial-gradient(circle at top,#1a2029,var(--kv2-bg-1));
}
.kv2-auth-card,
.kv2-install-card{
    position:relative;z-index:1;
    width:100%;max-width:420px;
    background:var(--kv2-panel);
    border:1px solid var(--kv2-border);
    border-radius:14px;
    padding:32px;
}
.kv2-install-card{max-width:560px;}

.kv2-onair{
    display:inline-block;
    background:var(--kv2-red);
    color:#fff;
    font-family:var(--font-display);
    font-size:11px;font-weight:800;letter-spacing:.08em;
    padding:3px 10px;border-radius:20px;
    margin-bottom:14px;
}
.kv2-auth-card h1,.kv2-install-card h1{font-size:28px;margin-bottom:4px;}
.kv2-sub{color:var(--kv2-muted);font-size:14px;margin:0 0 18px;}

.kv2-auth-card form{display:flex;flex-direction:column;}
.kv2-auth-card label{font-size:13px;color:var(--kv2-muted);margin:10px 0 4px;}
.kv2-auth-card input{width:100%;}
.kv2-auth-card button{
    margin-top:20px;
    background:var(--kv2-teal);
    border:0;color:#0b1015;
    font-weight:700;font-size:14px;
    padding:12px;border-radius:8px;
}
.kv2-auth-card button:hover{background:#27b0a3;}
.kv2-alt{margin-top:16px;font-size:13px;color:var(--kv2-muted);text-align:center;}

.kv2-req-list{list-style:none;padding:0;margin:18px 0;}
.kv2-req-list li{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--kv2-border);font-size:14px;}
.kv2-req-list .ok{color:var(--kv2-teal);font-weight:700;}
.kv2-req-list .fail{color:var(--kv2-red);font-weight:700;}

/* ============================================================
   Lobi iskeleti (index.php)
   ============================================================ */
.kv2-shell{
    display:flex;
    height:100vh;
    overflow:hidden;
}

/* --- Sidebar --- */
.kv2-sidebar{
    width:280px;flex:0 0 280px;
    background:var(--kv2-bg-2);
    border-right:1px solid var(--kv2-border);
    padding:16px;
    display:flex;flex-direction:column;
    overflow-y:auto;
}
.kv2-brand{min-height:40px;}
.kv2-brand-fallback strong{font-family:var(--font-display);font-size:20px;}
.kv2-notif-bell{
    background:rgba(255,255,255,.08);border:1px solid var(--kv2-border);
    color:var(--kv2-text);border-radius:20px;
    padding:5px 12px;font-size:13px;cursor:pointer;
}

.kv2-side-title{
    font-family:var(--font-display);
    font-size:13px;color:var(--kv2-muted);
    text-transform:uppercase;letter-spacing:.05em;
    margin:16px 0 8px;
}
.kv2-online-list{list-style:none;padding:0;margin:0;flex:0 0 auto;}
.kv2-online-item{
    display:flex;align-items:center;gap:8px;
    padding:7px 4px;border-radius:8px;
}
.kv2-online-item:hover{background:rgba(255,255,255,.04);}
.kv2-dot{width:10px;height:10px;border-radius:50%;display:inline-block;flex:0 0 auto;}
.kv2-uname{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.kv2-clickable-user{cursor:pointer;}
.kv2-clickable-user:hover{text-decoration:underline;}
.kv2-role-badge{margin-left:auto;font-size:12px;flex:0 0 auto;}

.kv2-admin-link{font-size:13px;}
.kv2-logout{color:#ff8a8a;}

/* --- Ana sohbet alani --- */
.kv2-main{
    flex:1;min-width:0;
    display:flex;flex-direction:column;
    padding:16px 20px;
    overflow:hidden;
}

.kv2-bot-pill{
    background:rgba(46,196,182,.15);
    border:1px solid var(--kv2-teal);
    color:#bdf5ef;
    font-size:12px;font-weight:700;
    padding:4px 10px;border-radius:20px;
}

.kv2-composer{display:flex;gap:8px;align-items:center;margin:10px 0;}
.kv2-composer button[type=submit]{
    background:var(--kv2-teal);border:0;color:#0b1015;
    font-weight:700;padding:9px 18px;border-radius:8px;
}
.kv2-composer button[type=submit]:hover{background:#27b0a3;}
#kv2-msg-input{width:100%;border:none;}

.kv2-messages{
    flex:1;min-height:0;
    overflow-y:auto;
    padding:10px 4px;
    font-size:14px;
}
.kv2-msg{
    display:flex;align-items:flex-start;gap:2px;flex-wrap:wrap;
    padding:5px 4px;border-radius:6px;
}
.kv2-msg:hover{background:rgba(255,255,255,.03);}

/* --- Ozel mesaj (PM) paneli --- */
.kv2-pm-panel{
    width:320px;flex:0 0 320px;
    background:var(--kv2-bg-2);
    border-left:1px solid var(--kv2-border);
    padding:16px;
    overflow-y:auto;
}
.kv2-pm-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;}
.kv2-pm-head button{background:none;border:0;color:var(--kv2-muted);font-size:16px;cursor:pointer;}
.kv2-profile-body{font-size:13px;color:var(--kv2-muted);}

/* --- Ozel mesaj sohbet penceresi (alt sagda acilan) --- */
.kv2-chat-window{
    position:fixed;bottom:20px;right:20px;
    width:320px;max-width:90vw;
    background:var(--kv2-bg-2);
    border:1px solid var(--kv2-border);
    border-radius:14px;
    overflow:hidden;
    box-shadow:0 8px 30px rgba(0,0,0,.5);
    z-index:50;
    display:flex;flex-direction:column;
}
.kv2-chat-window-head{
    display:flex;justify-content:space-between;align-items:center;
    background:var(--kv2-teal);color:#0b1015;
    padding:10px 14px;font-weight:700;
}
.kv2-chat-window-head button{background:none;border:0;color:#0b1015;font-size:16px;cursor:pointer;}
.kv2-chat-window-messages{height:260px;overflow-y:auto;padding:10px;font-size:13px;}

/* ============================================================
   Yonetim Paneli (admin/*.php)
   ============================================================ */
body.kv2-admin{
    position:relative;
    background-color:var(--kv2-bg-1);
    background-image:var(--kv2-theme-bg, none);
    background-size:cover;
    background-position:center;
    background-attachment:fixed;
}
body.kv2-admin::before{
    content:'';
    position:fixed;inset:0;z-index:0;
    background:rgba(8,10,14,.82);
    pointer-events:none;
}

.kv2-admin-shell{
    position:relative;z-index:1;
    display:flex;
    min-height:100vh;
}

.kv2-admin-nav{
    width:230px;flex:0 0 230px;
    background:var(--kv2-bg-2);
    border-right:1px solid var(--kv2-border);
    padding:20px 14px;
    display:flex;flex-direction:column;gap:2px;
    overflow-y:auto;
}
.kv2-admin-nav a{
    display:block;
    padding:10px 12px;
    border-radius:8px;
    color:var(--kv2-text);
    font-size:14px;
    text-decoration:none;
}
.kv2-admin-nav a:hover{background:rgba(255,255,255,.06);}
.kv2-admin-nav a.active{background:var(--kv2-teal);color:#0b1015;font-weight:700;}

.kv2-onair-dot{
    width:10px;height:10px;border-radius:50%;
    background:var(--kv2-red);display:inline-block;
    box-shadow:0 0 0 0 rgba(230,57,70,.6);
    animation:kv2-onair-pulse 1.4s infinite;
}
@keyframes kv2-onair-pulse{
    0%{box-shadow:0 0 0 0 rgba(230,57,70,.55);}
    70%{box-shadow:0 0 0 8px rgba(230,57,70,0);}
    100%{box-shadow:0 0 0 0 rgba(230,57,70,0);}
}

.kv2-admin-content{
    flex:1;min-width:0;
    padding:28px 32px;
    overflow-y:auto;
}
.kv2-admin-content h1{font-size:26px;margin-bottom:18px;}

.kv2-card{
    background:var(--kv2-bg-2);
    border:1px solid var(--kv2-border);
    border-radius:12px;
    padding:18px;
    margin-bottom:18px;
}

.kv2-badge-ok{color:var(--kv2-teal);font-weight:700;}
.kv2-badge-off{color:var(--kv2-muted);font-weight:700;}

.kv2-admin-table{width:100%;border-collapse:collapse;font-size:13px;}
.kv2-admin-table th,.kv2-admin-table td{padding:9px;border-bottom:1px solid var(--kv2-border);text-align:left;}
.kv2-admin-table th{color:var(--kv2-muted);font-weight:600;}

@media (max-width:900px){
    .kv2-admin-shell{flex-direction:column;}
    .kv2-admin-nav{width:100%;flex:0 0 auto;flex-direction:row;flex-wrap:wrap;}
    .kv2-admin-content{padding:18px;}
}

/* ══ Renk Seçici — modernize edilmiş görünüm ══ */
.kv2-tab-row{
    display:flex;gap:6px;margin:10px 0 14px;
    background:rgba(255,255,255,.04);
    padding:5px;border-radius:12px;
}
.kv2-tab-btn{
    flex:1;background:none;border:none;color:var(--kv2-muted,#8a8f9c);
    font-size:12px;font-weight:700;padding:9px 6px;border-radius:9px;
    cursor:pointer;transition:all .15s ease;
}
.kv2-tab-btn:hover{background:rgba(255,255,255,.06);color:var(--kv2-text,#fff);}
.kv2-tab-active{
    background:var(--kv2-teal,#2EC4B6) !important;
    color:#0b1015 !important;
    box-shadow:0 2px 8px rgba(46,196,182,.3);
}

.kv2-swatch-grid{
    display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-bottom:14px;
}
.kv2-swatch{
    width:100%;aspect-ratio:1;border-radius:10px;cursor:pointer;
    border:2px solid rgba(255,255,255,.12);
    transition:transform .12s ease, border-color .12s ease;
    position:relative;
}
.kv2-swatch:hover{transform:scale(1.1);border-color:rgba(255,255,255,.35);}
.kv2-swatch-selected{
    border-color:var(--kv2-teal,#2EC4B6) !important;
    box-shadow:0 0 0 3px rgba(46,196,182,.25);
    transform:scale(1.08);
}

.kv2-color-row{
    display:flex;align-items:center;gap:10px;flex-wrap:wrap;
    margin-bottom:10px;
}
.kv2-color-row input[type=color]{
    width:38px;height:38px;padding:0;border-radius:10px;
    border:2px solid var(--kv2-border,#2a2f3a);cursor:pointer;
    background:none;
}
.kv2-color-row button[data-role=add-color]{
    background:rgba(46,196,182,.12);border:1px dashed var(--kv2-teal,#2EC4B6);
    color:var(--kv2-teal,#2EC4B6);border-radius:8px;padding:8px 14px;
    font-size:12px;font-weight:700;cursor:pointer;
}
.kv2-color-row button[data-role=add-color]:hover{background:rgba(46,196,182,.2);}

.kv2-gif-grid{
    display:grid;grid-template-columns:repeat(4,1fr);gap:8px;
    max-height:280px;overflow-y:auto;padding:4px;
}
.kv2-gif-grid img{
    width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px;
    cursor:pointer;border:2px solid rgba(255,255,255,.1);
    transition:transform .12s ease, border-color .12s ease;
}
.kv2-gif-grid img:hover{transform:scale(1.06);border-color:rgba(255,255,255,.3);}
.kv2-gif-selected{
    border-color:var(--kv2-teal,#2EC4B6) !important;
    box-shadow:0 0 0 3px rgba(46,196,182,.25);
}

.kv2-pattern-preview{
    width:100%;height:60px;border-radius:10px;margin-top:10px;
    border:2px solid var(--kv2-border,#2a2f3a);
}

/* Renk paneli genel kart görünümü — profil paneli içinde kullanılınca */
.kv2-color-panel-embed{
    margin-top:14px;padding:14px;
    background:rgba(255,255,255,.03);
    border:1px solid var(--kv2-border,#2a2f3a);
    border-radius:14px;
}
.kv2-color-panel-embed h4{
    margin:0 0 4px;font-size:13px;font-weight:800;
    color:var(--kv2-text,#fff);
}

.kv2-color-panel-embed + .kv2-color-panel-embed{
    margin-top:10px;
}