/* ================= CARD ================= */
.card {
    background: #fff;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    margin-bottom: 20px;
}

.card h3 {
    margin-bottom: 15px;
}

/* ================= PAGE HEADER ================= */
.page-header {
    margin-bottom: 20px;
}

.page-header h2 {
    margin-bottom: 5px;
}

.page-header p {
    font-size: 14px;
    color: #6b7280;
}

/* ================= FORM ================= */
.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 6px;
    font-weight: 500;
}

.form-group input,
.form-group select {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #fff;
}

/* focus efekti */
.form-group input:focus,
.form-group select:focus {
    border-color: #4f46e5;
    outline: none;
    box-shadow: 0 0 0 2px rgba(79,70,229,0.1);
}

/* ================= BUTTON ================= */
.btn-primary {
    background: #4f46e5;
    color: #fff;
    border: none;
    padding: 12px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: bold;
    width: 100%;
}

.btn-primary:hover {
    background: #4338ca;
}

.btn-success {
    background: #22c55e;
    color: #fff;
    border: none;
    padding: 12px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: bold;
    width: 100%;
}

.btn-success:hover {
    background: #16a34a;
}

/* BUTON GRUP */
.btn-group {
    display: flex;
    gap: 10px;
}

.btn-group button {
    flex: 1;
}

/* ================= TABLE ================= */
.table-wrapper {
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

thead {
    background: #f1f5f9;
}

th, td {
    padding: 10px;
    border-bottom: 1px solid #eee;
    text-align: left;
}

tbody tr:hover {
    background: #f9fafb;
}

/* ================= BADGE ================= */
.badge {
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 12px;
    color: #fff;
}

.badge-active {
    background: #22c55e;
}

.badge-passive {
    background: #ef4444;
}

.badge-warning {
    background: orange;
}

.badge-danger {
    background: #ef4444;
}

.badge-ok {
    background: #22c55e;
}

/* ================= TOGGLE BUTTON ================= */
.btn-toggle {
    padding: 6px 10px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    font-size: 12px;
    color: white;
}

.btn-activate {
    background: #16a34a;
}

.btn-deactivate {
    background: #dc2626;
}

/* ================= DASHBOARD ================= */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
}

.stat-card {
    display: flex;
    align-items: center;
    gap: 15px;
}

.stat-icon {
    font-size: 28px;
    background: #eef2ff;
    padding: 15px;
    border-radius: 10px;
}

/* ================= INPUT EXTRA ================= */
#ip_address {
    font-family: monospace;
    letter-spacing: 1px;
}

.system-grid {
    margin-top: 20px;
}

.system-card {
    min-height: 100px;
}

.system-card p {
    font-size: 14px;
    color: #555;
}

.top-grid {
    grid-template-columns: repeat(5, 1fr);
}

.system-grid {
    margin-top: 20px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.status-ok {
    border-left: 5px solid #22c55e;
}

.status-warning {
    border-left: 5px solid #f59e0b;
}

.status-danger {
    border-left: 5px solid #ef4444;
}

/* CONTROL GRID */
.control-grid {
    margin-top: 20px;
}

/* CONTROL CARD */
.control-card {
    padding: 20px;
}

/* BUTTON WRAP */
.control-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

/* BUTTON BASE */
.btn {
    padding: 10px 15px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    transition: 0.2s;
}

/* SAFE BUTTON */
.btn-safe {
    background: #2ecc71;
    color: white;
}

.btn-safe:hover {
    background: #27ae60;
}

/* DANGER BUTTON */
.btn-danger {
    background: #e74c3c;
    color: white;
}

.btn-danger:hover {
    background: #c0392b;
}

/* CLICK EFFECT */
.btn:active {
    transform: scale(0.95);
}

/* CONTROL WRAPPER */
.control-wrapper {
    margin-top: 25px;
}

/* CARD */
.control-card {
    max-width: 700px;
    margin: 0 auto;
    padding: 20px;
}

/* BUTTON AREA */
.control-buttons {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 15px;
}

/* BUTTON */
.btn {
    padding: 10px 18px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 600;
    min-width: 150px;
    transition: 0.2s;
}

/* SAFE */
.btn-safe {
    background: #2ecc71;
    color: white;
}

.btn-safe:hover {
    background: #27ae60;
}

/* DANGER */
.btn-danger {
    background: #e74c3c;
    color: white;
}

.btn-danger:hover {
    background: #c0392b;
}

/* MOBILE */
@media (max-width: 600px) {
    .control-buttons {
        flex-direction: column;
    }

    .btn {
        width: 100%;
    }
}

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-gap: 20px;
    margin-top: 20px;
}

.control-wrapper {
    margin-top: 20px;
}

.control-card {
    width: 100%;
}

.control-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 15px;
}

#logBox {
    background: #111;
    color: #0f0;
    padding: 10px;
    border-radius: 8px;
    font-family: monospace;
}

/* =========================
   PARK İŞLEM SELECT
========================= */

.park-action {
    width: 180px;
    height: 40px;

    border: 1px solid #dbe3f0;
    border-radius: 10px;

    background: linear-gradient(
        180deg,
        #ffffff,
        #f5f8fc
    );

    color: #374151;

    font-size: 14px;
    font-weight: 600;

    padding: 0 12px;

    cursor: pointer;

    box-shadow:
        0 2px 8px rgba(0,0,0,.06);

    transition: .2s;
}

.park-action:hover{
    border-color:#4f7cff;
    box-shadow:
        0 4px 12px rgba(79,124,255,.15);
}

.park-action:focus{
    outline:none;
    border-color:#4f7cff;
    box-shadow:
        0 0 0 3px rgba(79,124,255,.15);
}

/* tablo içi ortalama */

#parkTable td:last-child{
    text-align:center;
}

.btn-action{

    background:linear-gradient(
        135deg,
        #4f7cff,
        #3366ff
    );

    color:white;
    border:none;

    padding:8px 14px;

    border-radius:8px;

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

    cursor:pointer;

    box-shadow:
        0 4px 10px rgba(79,124,255,.20);
}

.btn-action:hover{
    transform:translateY(-1px);
}

/* =========================
   PARK İŞLEM MODAL
========================= */

.park-modal{
    position:fixed;
    inset:0;

    background:rgba(0,0,0,.45);

    display:flex;
    align-items:center;
    justify-content:center;

    z-index:99999;
}

.park-modal.hidden{
    display:none;
}

.park-modal-box{

    width:420px;
    max-width:95%;

    background:#fff;

    border-radius:16px;

    padding:24px;

    box-shadow:
        0 20px 50px rgba(0,0,0,.25);

    animation:parkPop .2s ease;
}

@keyframes parkPop{

    from{
        opacity:0;
        transform:scale(.92);
    }

    to{
        opacity:1;
        transform:scale(1);
    }
}

.park-modal-box h3{

    margin:0 0 20px;

    text-align:center;

    font-size:22px;

    color:#1f2937;
}

/* Butonlar */

.park-modal-box button{

    width:100%;

    border:none;

    padding:14px;

    margin-bottom:10px;

    border-radius:10px;

    font-size:15px;

    font-weight:600;

    cursor:pointer;

    transition:.15s;
}

.park-modal-box button:hover{
    transform:translateY(-1px);
}

/* Aktif */

.park-modal-box button:nth-child(2){

    background:#22c55e;
    color:#fff;
}

/* Pasif */

.park-modal-box button:nth-child(3){

    background:#ef4444;
    color:#fff;
}

/* Paket */

.park-modal-box button:nth-child(4){

    background:#3b82f6;
    color:#fff;
}

/* Admin */

.park-modal-box button:nth-child(5){

    background:#8b5cf6;
    color:#fff;
}

/* Şifre */

.park-modal-box button:nth-child(6){

    background:#f59e0b;
    color:#fff;
}

/* Sil */

.park-modal-box .danger{

    background:#991b1b;
    color:#fff;
}

/* Kapat */

.park-modal-box .close-btn{

    background:#e5e7eb;
    color:#111827;
}

/* =========================
   PAKET MODAL
========================= */

#packageModal{
    position:fixed;
    inset:0;

    display:flex;
    align-items:center;
    justify-content:center;

    background:rgba(0,0,0,.45);

    z-index:99999;
}

#packageModal.hidden{
    display:none;
}

#packageModal .modal-box{

    width:420px;
    max-width:95%;

    background:#fff;

    border-radius:18px;

    padding:25px;

    box-shadow:
        0 20px 50px rgba(0,0,0,.25);

    animation:packagePop .18s ease;
}

@keyframes packagePop{

    from{
        opacity:0;
        transform:scale(.92);
    }

    to{
        opacity:1;
        transform:scale(1);
    }
}

/* Başlık */

#packageModal h3{

    margin:0 0 20px;

    text-align:center;

    font-size:24px;

    color:#1f2937;
}

/* Select */

#newPackageType{

    width:100%;

    height:52px;

    padding:0 12px;

    border:2px solid #dbeafe;

    border-radius:12px;

    font-size:15px;

    font-weight:600;

    margin-bottom:18px;

    outline:none;

    background:#f8fafc;
}

#newPackageType:focus{

    border-color:#3b82f6;

    box-shadow:
        0 0 0 4px rgba(59,130,246,.15);
}

/* Butonlar */

#packageModal button{

    width:100%;

    height:50px;

    border:none;

    border-radius:12px;

    font-size:15px;

    font-weight:700;

    cursor:pointer;

    margin-top:10px;

    transition:.15s;
}

#packageModal button:hover{
    transform:translateY(-1px);
}

/* Kaydet */

#packageModal button:first-of-type{

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #3b82f6
        );

    color:#fff;
}

/* İptal */

#packageModal button:last-of-type{

    background:
        linear-gradient(
            135deg,
            #e5e7eb,
            #d1d5db
        );

    color:#111827;
}

/* =========================
   ADMIN MODAL
========================= */

#adminInfoModal{
    position:fixed;
    inset:0;

    display:flex;
    align-items:center;
    justify-content:center;

    background:rgba(0,0,0,.45);

    z-index:999999;
}

#adminInfoModal.hidden{
    display:none;
}

#adminInfoModal .modal-box{

    width:450px;
    max-width:95%;

    background:#fff;

    border-radius:18px;

    padding:25px;

    box-shadow:
        0 20px 50px rgba(0,0,0,.25);
}

#adminInfoModal h3{

    text-align:center;

    margin-bottom:20px;

    font-size:26px;

    color:#1f2937;
}

.info-row{

    background:#f8fafc;

    padding:14px;

    margin-bottom:10px;

    border-radius:12px;

    font-size:15px;
}

.info-row b{

    display:inline-block;

    width:90px;

    color:#374151;
}

/* Şifre Göster */

.btn-show-password{

    width:100%;
    height:50px;

    margin-top:10px;

    border:none;

    border-radius:12px;

    background:
        linear-gradient(
            135deg,
            #3b82f6,
            #2563eb
        );

    color:white;

    font-size:15px;
    font-weight:700;

    cursor:pointer;
}

/* Şifre Değiştir */

.btn-change-password{

    width:100%;
    height:50px;

    margin-top:10px;

    border:none;

    border-radius:12px;

    background:
        linear-gradient(
            135deg,
            #f59e0b,
            #d97706
        );

    color:white;

    font-size:15px;
    font-weight:700;

    cursor:pointer;
}

/* Kapat */

.btn-close-modal{

    width:100%;
    height:50px;

    margin-top:10px;

    border:none;

    border-radius:12px;

    background:
        linear-gradient(
            135deg,
            #e5e7eb,
            #d1d5db
        );

    color:#111827;

    font-size:15px;
    font-weight:700;

    cursor:pointer;
}

/* =========================
   GLOBAL HIDDEN
========================= */

.hidden{
    display:none !important;
}


/* =========================
   PARK ADI MODAL
========================= */

#parkNameModal{
    position:fixed;
    inset:0;

    display:flex;
    align-items:center;
    justify-content:center;

    background:rgba(0,0,0,.45);

    z-index:999999;
}

#parkNameModal.hidden{
    display:none;
}

#parkNameModal .modal-box{

    width:420px;
    max-width:95%;

    background:#fff;

    border-radius:18px;

    padding:25px;

    box-shadow:
        0 20px 50px rgba(0,0,0,.25);

    animation:parkNamePop .18s ease;
}

@keyframes parkNamePop{

    from{
        opacity:0;
        transform:scale(.92);
    }

    to{
        opacity:1;
        transform:scale(1);
    }
}

#parkNameModal h3{

    margin:0 0 20px;

    text-align:center;

    font-size:24px;

    color:#1f2937;
}

#parkNameModal label{

    display:block;

    margin-bottom:8px;

    font-weight:600;

    color:#374151;
}

#newParkName{

    width:100%;

    height:52px;

    padding:0 14px;

    border:2px solid #dbeafe;

    border-radius:12px;

    font-size:15px;

    margin-bottom:15px;

    outline:none;

    background:#f8fafc;
}

#newParkName:focus{

    border-color:#3b82f6;

    box-shadow:
        0 0 0 4px rgba(59,130,246,.15);
}

#parkNameModal button{

    width:100%;

    height:50px;

    border:none;

    border-radius:12px;

    font-size:15px;

    font-weight:700;

    cursor:pointer;

    margin-top:10px;

    transition:.15s;
}

#parkNameModal button:hover{
    transform:translateY(-1px);
}

/* Kaydet */

#parkNameModal button:first-of-type{

    background:
        linear-gradient(
            135deg,
            #22c55e,
            #16a34a
        );

    color:#fff;
}

/* İptal */

#parkNameModal button:last-of-type{

    background:
        linear-gradient(
            135deg,
            #e5e7eb,
            #d1d5db
        );

    color:#111827;
}

/* =========================
   ADMIN PASSWORD MODAL
========================= */

#adminPasswordModal{
    position:fixed;
    inset:0;

    display:flex;
    align-items:center;
    justify-content:center;

    background:rgba(0,0,0,.45);

    z-index:99999;
}

#adminPasswordModal.hidden{
    display:none;
}

#adminPasswordModal .modal-box{

    width:420px;
    max-width:95%;

    background:#fff;

    border-radius:18px;

    padding:25px;

    box-shadow:
        0 20px 50px rgba(0,0,0,.25);
}

#adminPasswordModal h3{

    text-align:center;

    margin-bottom:20px;
}

#adminPasswordModal label{

    display:block;

    margin-bottom:8px;

    font-weight:600;
}

#adminPasswordModal input{

    width:100%;

    height:50px;

    border:1px solid #ddd;

    border-radius:12px;

    padding:0 12px;

    margin-bottom:15px;
}

#adminPasswordModal button{

    width:100%;

    height:50px;

    border:none;

    border-radius:12px;

    margin-top:10px;

    font-weight:700;

    cursor:pointer;
}

#adminPasswordModal button:first-of-type{

    background:#22c55e;

    color:#fff;
}

#adminPasswordModal button:last-of-type{

    background:#e5e7eb;
}