*{box-sizing:border-box}body{margin:0;font-family:Arial,sans-serif;background:#35003f;color:#fff}a{color:inherit;text-decoration:none}.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#25002d,#4a0057)}.login-box{width:380px;background:#2a0033;border:1px solid #6f327c;border-radius:18px;padding:28px;box-shadow:0 15px 50px rgba(0,0,0,.35)}.login-box h1{margin-top:0;font-size:28px}.input,textarea,select{width:100%;padding:13px 14px;border-radius:10px;border:1px solid #764381;background:#4a0057;color:#fff;margin:8px 0 15px}.btn{background:#ff7a00;color:#fff;border:0;border-radius:10px;padding:12px 16px;font-weight:bold;cursor:pointer;display:inline-block}.btn:hover{background:#ff932e}.btn-danger{background:#c62828}.btn-small{padding:8px 12px;font-size:13px}.topbar{background:#2a0033;padding:20px 40px;display:flex;justify-content:space-between;align-items:center;border-bottom:3px solid #5a2b66}.brand{font-size:30px;font-weight:bold}.layout{display:flex;min-height:calc(100vh - 76px)}.sidebar{width:280px;background:#33003d;padding:28px 20px;border-right:1px solid #5a2b66}.side-link,.cat-btn{display:block;width:100%;padding:14px 16px;border-radius:12px;margin-bottom:8px;font-weight:bold;background:transparent;border:0;color:#fff;text-align:left;cursor:pointer}.side-link:hover,.cat-btn:hover,.cat-btn.active{background:#ff7a00}.main{flex:1;padding:35px}.search{font-size:17px;padding:18px;background:#5a2b66}.article{border:1px solid #d7bde2;background:#3b0045;margin-bottom:10px;border-radius:8px;overflow:hidden}.article-title{padding:18px 22px;font-weight:bold;cursor:pointer;display:flex;justify-content:space-between}.article-body{display:none;background:#4a0057;padding:22px;line-height:1.65;border-top:1px solid #d7bde2}.copy-box{background:#26002e;border-left:5px solid #ff7a00;padding:14px;border-radius:8px;margin-top:15px;white-space:pre-wrap}.muted{color:#d1b6d8}.card{background:#3b0045;border:1px solid #6f327c;border-radius:14px;padding:20px;margin-bottom:18px}.table{width:100%;border-collapse:collapse;background:#3b0045;border-radius:12px;overflow:hidden}.table th,.table td{padding:13px;border-bottom:1px solid #6f327c;text-align:left}.badge{padding:5px 9px;border-radius:20px;background:#ff7a00;font-size:12px}.hidden{display:none}.article-img{max-width:320px;border-radius:10px;margin:12px 0;display:block}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:15px}.notice{background:#1b5e20;padding:12px;border-radius:10px;margin-bottom:15px}.error{background:#8b1a1a;padding:12px;border-radius:10px;margin-bottom:15px}
/* MOB力L TEM力Z TASARIM */
@media (max-width: 768px) {

    body {
        overflow-x: hidden;
    }

    .topbar {
        display: block;
        padding: 18px 16px;
        text-align: left;
    }

    .brand {
        font-size: 30px;
        margin-bottom: 12px;
    }

    .topbar > div:last-child {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        font-size: 14px;
    }

    .layout {
        display: block;
    }

    .sidebar {
        width: 100% !important;
        display: flex;
        overflow-x: auto;
        gap: 10px;
        padding: 12px;
        border-right: none;
        border-bottom: 1px solid #5a2b66;
        background: #33003d;
    }

    .sidebar::-webkit-scrollbar {
        display: none;
    }

    .cat-btn {
        min-width: max-content;
        padding: 10px 14px;
        font-size: 14px;
        border-radius: 999px;
        margin: 0;
        background: #4a0057;
    }

    .cat-btn.active {
        background: #ff7a00;
    }

    .main {
        padding: 14px !important;
        width: 100%;
    }

    .search {
        width: 100%;
        font-size: 16px;
        padding: 15px;
        border-radius: 14px;
        margin-bottom: 14px;
    }

    .article {
        width: 100%;
        border-radius: 14px;
        margin-bottom: 12px;
    }

    .article-title {
        font-size: 17px;
        padding: 16px;
        line-height: 1.4;
    }

    .article-body {
        font-size: 15px;
        padding: 16px;
        line-height: 1.6;
    }

    .copy-box {
        font-size: 15px;
        padding: 14px;
        max-height: 180px;
        overflow-y: auto;
    }

    .btn,
    .btn-small {
        font-size: 14px;
        padding: 9px 12px;
    }
}
@media only screen and (max-width: 768px) {

    html, body {
        width: 100% !important;
        overflow-x: hidden !important;
    }

    .topbar {
        display: block !important;
        width: 100% !important;
        padding: 16px !important;
    }

    .brand {
        font-size: 30px !important;
        margin-bottom: 12px !important;
    }

    .topbar > div:last-child {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        font-size: 14px !important;
    }

    .layout {
        display: block !important;
        width: 100% !important;
    }

    .sidebar {
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        gap: 10px !important;
        padding: 12px !important;
        border-right: none !important;
        border-bottom: 1px solid #5a2b66 !important;
    }

    .cat-btn {
        min-width: max-content !important;
        width: auto !important;
        padding: 10px 14px !important;
        font-size: 14px !important;
        border-radius: 999px !important;
        margin: 0 !important;
    }

    .main {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 14px !important;
    }

    .search {
        width: 100% !important;
        max-width: 100% !important;
        font-size: 16px !important;
        padding: 15px !important;
        margin-bottom: 14px !important;
    }

    .article {
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 12px !important;
        border-radius: 14px !important;
    }

    .article-title {
        font-size: 17px !important;
        padding: 16px !important;
        line-height: 1.4 !important;
    }

    .article-body {
        font-size: 15px !important;
        padding: 16px !important;
        line-height: 1.6 !important;
    }
}
/* LOGIN MOBİL DÜZELTME */
@media (max-width: 768px) {
    .login-wrap {
        min-height: 100vh !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 16px !important;
    }

    .login-box {
        width: 100% !important;
        max-width: 380px !important;
        padding: 24px !important;
        margin: 0 auto !important;
        border-radius: 18px !important;
    }

    .login-box h1 {
        font-size: 28px !important;
        line-height: 1.2 !important;
    }

    .login-box .input {
        font-size: 16px !important;
        padding: 14px !important;
    }

    .login-box .btn {
        width: 100% !important;
        font-size: 16px !important;
        padding: 14px !important;
    }
}
/* LOGIN MOBİL KESİN DÜZELTME */
@media (max-width: 768px) {
    .login-wrap {
        min-height: 100vh !important;
        width: 100% !important;
        padding: 20px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .login-box {
        width: 100% !important;
        max-width: 360px !important;
        padding: 24px !important;
        margin: 0 auto !important;
        transform: none !important;
    }

    .login-box h1 {
        font-size: 26px !important;
    }

    .login-box .input {
        height: 48px !important;
        font-size: 16px !important;
    }

    .login-box .btn {
        width: 100% !important;
        height: 48px !important;
        font-size: 16px !important;
    }
}
/* GLOBAL DÜZELTME */
* {
    box-sizing: border-box;
}

/* ANA LAYOUT */
.layout {
    display: flex;
    width: 100%;
}

/* SIDEBAR */
.sidebar {
    width: 260px;
    min-width: 260px;
}

/* MAIN */
.main {
    flex: 1;
    padding: 20px;
}

/* MOBİL PROFESYONEL */
@media (max-width: 768px) {

    .layout {
        display: block !important;
    }

    /* ÜST BAR */
    .topbar {
        display: block !important;
        padding: 16px !important;
    }

    .brand {
        font-size: 26px !important;
        margin-bottom: 10px;
    }

    .topbar > div:last-child {
        display: flex !important;
        flex-wrap: wrap;
        gap: 8px;
    }

    /* SIDEBAR YATAY */
    .sidebar {
        width: 100% !important;
        min-width: 100% !important;
        display: flex !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        gap: 10px;
        padding: 10px;
        border-right: none !important;
        border-bottom: 1px solid #5a2b66;
    }

    /* KATEGORİ BUTON */
    .cat-btn {
        min-width: max-content !important;
        padding: 10px 14px !important;
        font-size: 14px !important;
        border-radius: 999px;
    }

    /* ANA İÇERİK */
    .main {
        width: 100% !important;
        padding: 14px !important;
    }

    /* SEARCH */
    .search {
        width: 100% !important;
        font-size: 16px !important;
        padding: 14px;
        margin-bottom: 14px;
    }

    /* MAKALE */
    .article {
        width: 100% !important;
        margin-bottom: 12px;
        border-radius: 14px;
    }

    .article-title {
        font-size: 16px !important;
        padding: 14px;
    }

    .article-body {
        font-size: 14px !important;
        padding: 14px;
    }
}
/* LOGIN PREMIUM */
.login-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #2b0035, #4a0057);
}

.login-box {
    background: #3a0047;
    padding: 30px;
    border-radius: 20px;
    width: 100%;
    max-width: 400px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.4);
}

.login-box h1 {
    font-size: 28px;
    margin-bottom: 10px;
}

.login-box .input {
    width: 100%;
    padding: 14px;
    border-radius: 10px;
    margin-bottom: 12px;
    border: none;
}

.login-box .btn {
    width: 100%;
    padding: 14px;
    border-radius: 10px;
}
/* SADECE ADMIN PANEL MOBİL DÜZELTME */
@media (max-width: 768px) {

    body:has(.side-link) .layout {
        display: block !important;
    }

    body:has(.side-link) .sidebar {
        width: 100% !important;
        min-width: 100% !important;
        display: flex !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        gap: 8px !important;
        padding: 10px !important;
        border-right: none !important;
        border-bottom: 1px solid #5a2b66 !important;
        white-space: nowrap !important;
    }

    body:has(.side-link) .side-link {
        min-width: max-content !important;
        width: auto !important;
        padding: 10px 14px !important;
        font-size: 14px !important;
        border-radius: 999px !important;
        background: #4a0057 !important;
        margin-bottom: 0 !important;
    }

    body:has(.side-link) .main {
        width: 100% !important;
        padding: 14px !important;
    }

    body:has(.side-link) .topbar {
        display: block !important;
        padding: 16px !important;
    }

    body:has(.side-link) .brand {
        font-size: 24px !important;
        margin-bottom: 10px !important;
    }

    body:has(.side-link) .topbar > div:last-child {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    body:has(.side-link) .card {
        padding: 16px !important;
        border-radius: 14px !important;
    }

    body:has(.side-link) .table {
        display: block !important;
        width: 100% !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
    }

    body:has(.side-link) .input,
    body:has(.side-link) textarea,
    body:has(.side-link) select {
        font-size: 16px !important;
        width: 100% !important;
    }
}
/* ADMIN MOBİL KESİN DÜZELTME */
@media (max-width: 768px) {

    .admin-page .layout {
        display: block !important;
        width: 100% !important;
    }

    .admin-page .sidebar {
        width: 100% !important;
        min-width: 100% !important;
        display: flex !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        gap: 10px !important;
        padding: 12px !important;
        border-right: none !important;
        border-bottom: 1px solid #5a2b66 !important;
        white-space: nowrap !important;
    }

    .admin-page .side-link {
        width: auto !important;
        min-width: max-content !important;
        padding: 10px 14px !important;
        font-size: 14px !important;
        border-radius: 999px !important;
        background: #4a0057 !important;
        margin-bottom: 0 !important;
    }

    .admin-page .main {
        width: 100% !important;
        padding: 16px !important;
    }

    .admin-page .topbar {
        display: block !important;
        padding: 16px !important;
    }

    .admin-page .brand {
        font-size: 24px !important;
        margin-bottom: 10px !important;
    }

    .admin-page .topbar > div:last-child {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .admin-page .grid {
        display: block !important;
    }

    .admin-page .card {
        width: 100% !important;
        margin-bottom: 12px !important;
    }

    .admin-page .table {
        display: block !important;
        width: 100% !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
    }
}
/* HESAP AYARLARI MOBİL */
@media (max-width: 768px) {

    .account-page {
        overflow-x: hidden !important;
    }

    .account-page .topbar {
        display: block !important;
        padding: 16px !important;
    }

    .account-page .brand {
        font-size: 24px !important;
        margin-bottom: 10px !important;
    }

    .account-page .topbar > div:last-child {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .account-page .main {
        width: 100% !important;
        padding: 14px !important;
    }

    .account-page .card {
        width: 100% !important;
        padding: 16px !important;
        border-radius: 14px !important;
    }

    .account-page .input,
    .account-page textarea,
    .account-page select {
        width: 100% !important;
        font-size: 16px !important;
        padding: 14px !important;
    }

    .account-page .btn {
        width: 100% !important;
        margin-top: 8px !important;
        padding: 14px !important;
        font-size: 16px !important;
    }
}
.copy-box {
  white-space: pre-line;
}