/* =========================================================
   HUKUKSINAV - CORE DESIGN SYSTEM
   SIFIRDAN KURULAN ORTAK CSS
   ========================================================= */

:root{
    --bg: #0b1120;
    --bg-2: #10182b;
    --surface: #121c31;
    --surface-2: #16223b;
    --surface-3: #1a2947;

    --line: rgba(255,255,255,.08);
    --line-strong: rgba(255,255,255,.14);

    --text: #edf3ff;
    --muted: #9fb0d1;
    --muted-2: #7f92b8;

    --accent: #6ea8ff;
    --accent-2: #4d7fe0;
    --accent-soft: rgba(110,168,255,.14);

    --success: #27c07d;
    --danger: #e05d6f;
    --warning: #e6b85c;

    --shadow-sm: 0 6px 18px rgba(0,0,0,.16);
    --shadow-md: 0 16px 42px rgba(0,0,0,.22);
    --shadow-lg: 0 22px 54px rgba(0,0,0,.28);

    --radius-xs: 10px;
    --radius-sm: 14px;
    --radius-md: 18px;
    --radius-lg: 24px;
    --radius-xl: 30px;

    --container: 1180px;

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 32px;
    --space-8: 40px;
    --space-9: 48px;
    --space-10: 64px;

    --text-xs: 12px;
    --text-sm: 13px;
    --text-md: 15px;
    --text-lg: 17px;
    --text-xl: 20px;
    --text-2xl: 28px;
    --text-3xl: 36px;

    --header-height: 64px;
    --mobile-nav-height: 76px;
}

*,
*::before,
*::after{
    box-sizing:border-box;
}

html{
    width:100%;
    min-height:100%;
    -webkit-text-size-adjust:100%;
    scroll-behavior:smooth;
}

body{
    width:100%;
    min-height:100vh;
    margin:0;
    background:
        radial-gradient(circle at top left, rgba(110,168,255,.08), transparent 28%),
        linear-gradient(180deg, #0b1120 0%, #10182b 100%);
    color:var(--text);
    font-family:Arial, Helvetica, sans-serif;
    font-size:var(--text-md);
    line-height:1.55;
    overflow-x:hidden;
}

img{
    display:block;
    max-width:100%;
    height:auto;
}

svg{
    display:block;
}

button,
input,
select,
textarea{
    font:inherit;
    color:inherit;
}

button{
    border:none;
    background:none;
    padding:0;
    cursor:pointer;
}

a{
    color:inherit;
    text-decoration:none;
}

ul,
ol{
    margin:0;
    padding:0;
    list-style:none;
}

h1,
h2,
h3,
h4,
h5,
h6,
p{
    margin:0;
}

::selection{
    background:rgba(110,168,255,.24);
    color:#ffffff;
}

/* =========================================================
   SCROLLBAR
   ========================================================= */
*{
    scrollbar-width:thin;
    scrollbar-color: rgba(255,255,255,.18) transparent;
}

*::-webkit-scrollbar{
    width:10px;
    height:10px;
}

*::-webkit-scrollbar-track{
    background:transparent;
}

*::-webkit-scrollbar-thumb{
    border-radius:999px;
    background:rgba(255,255,255,.16);
    border:2px solid transparent;
    background-clip:padding-box;
}

*::-webkit-scrollbar-thumb:hover{
    background:rgba(255,255,255,.24);
    border:2px solid transparent;
    background-clip:padding-box;
}

/* =========================================================
   LAYOUT
   ========================================================= */
.page-shell{
    width:min(100%, var(--container));
    margin:0 auto;
    padding-left:var(--space-5);
    padding-right:var(--space-5);
}

.page-stack{
    display:grid;
    gap:var(--space-6);
}

.section-stack{
    display:grid;
    gap:var(--space-5);
}

.grid-2{
    display:grid;
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:var(--space-4);
}

.grid-3{
    display:grid;
    grid-template-columns:repeat(3, minmax(0,1fr));
    gap:var(--space-4);
}

.grid-4{
    display:grid;
    grid-template-columns:repeat(4, minmax(0,1fr));
    gap:var(--space-4);
}

.flex-row{
    display:flex;
    align-items:center;
    gap:var(--space-3);
}

.flex-between{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--space-4);
}

.flex-wrap{
    display:flex;
    flex-wrap:wrap;
    gap:var(--space-3);
}

/* =========================================================
   TYPOGRAPHY
   ========================================================= */
.display-title{
    font-size:clamp(28px, 5vw, 44px);
    line-height:1.08;
    font-weight:800;
    letter-spacing:-.02em;
    color:#f4f7ff;
}

.page-title{
    font-size:clamp(24px, 4vw, 34px);
    line-height:1.12;
    font-weight:800;
    letter-spacing:-.02em;
    color:#f4f7ff;
}

.section-title{
    font-size:18px;
    line-height:1.2;
    font-weight:800;
    color:#f2f6ff;
}

.card-title{
    font-size:16px;
    line-height:1.25;
    font-weight:800;
    color:#f3f7ff;
}

.kicker{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:11px;
    line-height:1;
    letter-spacing:1.4px;
    text-transform:uppercase;
    font-weight:800;
    color:var(--accent);
}

.text-muted{
    color:var(--muted);
}

.text-soft{
    color:var(--muted-2);
}

.text-center{
    text-align:center;
}

.text-right{
    text-align:right;
}

.lead{
    font-size:var(--text-lg);
    line-height:1.7;
    color:var(--muted);
}

.small{
    font-size:var(--text-sm);
    line-height:1.6;
}

.tiny{
    font-size:var(--text-xs);
    line-height:1.5;
}

/* =========================================================
   SURFACES
   ========================================================= */
.surface{
    background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
    border:1px solid var(--line);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-md);
}

.surface-soft{
    background:rgba(255,255,255,.03);
    border:1px solid var(--line);
    border-radius:var(--radius-md);
}

.card{
    background:linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.012));
    border:1px solid var(--line);
    border-radius:var(--radius-md);
    box-shadow:var(--shadow-sm);
    padding:var(--space-5);
}

.card-compact{
    background:rgba(255,255,255,.03);
    border:1px solid var(--line);
    border-radius:var(--radius-sm);
    padding:var(--space-4);
}

.card-hero{
    background:
        radial-gradient(circle at top left, rgba(110,168,255,.12), transparent 30%),
        linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.012));
    border:1px solid var(--line);
    border-radius:var(--radius-xl);
    box-shadow:var(--shadow-lg);
    padding:clamp(20px, 4vw, 34px);
}

.card-hover{
    transition:transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.card-hover:hover{
    transform:translateY(-2px);
    border-color:var(--line-strong);
    background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.018));
    box-shadow:0 18px 48px rgba(0,0,0,.24);
}

/* =========================================================
   BUTTONS
   ========================================================= */
.btn{
    min-height:46px;
    padding:0 16px;
    border-radius:14px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    font-size:14px;
    font-weight:800;
    letter-spacing:.2px;
    white-space:nowrap;
    transition:transform .16s ease, background .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease;
    user-select:none;
}

.btn:disabled,
.btn[disabled]{
    opacity:.6;
    cursor:not-allowed;
    transform:none !important;
}

.btn-primary{
    background:linear-gradient(180deg, var(--accent) 0%, var(--accent-2) 100%);
    color:#ffffff;
    box-shadow:0 12px 24px rgba(78,127,224,.24);
}

.btn-primary:hover{
    transform:translateY(-1px);
    box-shadow:0 16px 28px rgba(78,127,224,.28);
}

.btn-secondary{
    background:rgba(255,255,255,.04);
    border:1px solid var(--line);
    color:#eef4ff;
}

.btn-secondary:hover{
    transform:translateY(-1px);
    background:rgba(255,255,255,.06);
    border-color:var(--line-strong);
}

.btn-ghost{
    background:transparent;
    border:1px solid transparent;
    color:var(--muted);
}

.btn-ghost:hover{
    background:rgba(255,255,255,.04);
    color:#f0f5ff;
}

.btn-danger{
    background:linear-gradient(180deg, #ef7586 0%, #d95668 100%);
    color:#ffffff;
    box-shadow:0 12px 24px rgba(217,86,104,.22);
}

.btn-block{
    width:100%;
}

.btn-sm{
    min-height:40px;
    padding:0 14px;
    border-radius:12px;
    font-size:13px;
}

.btn-lg{
    min-height:52px;
    padding:0 18px;
    border-radius:16px;
    font-size:15px;
}

/* =========================================================
   BADGES
   ========================================================= */
.badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:28px;
    padding:0 10px;
    border-radius:999px;
    border:1px solid var(--line);
    background:rgba(255,255,255,.04);
    font-size:11px;
    font-weight:800;
    letter-spacing:1px;
    text-transform:uppercase;
    color:var(--muted);
}

.badge-accent{
    background:var(--accent-soft);
    border-color:rgba(110,168,255,.24);
    color:#cfe0ff;
}

.badge-success{
    background:rgba(39,192,125,.12);
    border-color:rgba(39,192,125,.22);
    color:#bbf6db;
}

.badge-danger{
    background:rgba(224,93,111,.12);
    border-color:rgba(224,93,111,.22);
    color:#ffd3d9;
}

/* =========================================================
   FORMS
   ========================================================= */
.form-stack{
    display:grid;
    gap:var(--space-4);
}

.form-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:var(--space-4);
}

.field{
    display:grid;
    gap:8px;
}

.field.full{
    grid-column:1 / -1;
}

.label{
    font-size:12px;
    line-height:1.2;
    letter-spacing:.8px;
    text-transform:uppercase;
    font-weight:800;
    color:#cfe0ff;
}

.input,
.select,
.textarea{
    width:100%;
    border:1px solid var(--line);
    background:rgba(255,255,255,.035);
    color:var(--text);
    border-radius:14px;
    outline:none;
    transition:border-color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease;
}

.input,
.select{
    height:50px;
    padding:0 16px;
}

.textarea{
    min-height:120px;
    padding:14px 16px;
    resize:vertical;
}

.input::placeholder,
.textarea::placeholder{
    color:rgba(159,176,209,.65);
}

.input:focus,
.select:focus,
.textarea:focus{
    border-color:rgba(110,168,255,.44);
    background:rgba(255,255,255,.05);
    box-shadow:0 0 0 4px rgba(110,168,255,.10);
}

.input[disabled],
.select[disabled],
.textarea[disabled]{
    opacity:.65;
    cursor:not-allowed;
}

.check-row{
    display:flex;
    align-items:flex-start;
    gap:12px;
}

.check-row input[type="checkbox"],
.check-row input[type="radio"]{
    margin-top:2px;
    width:16px;
    height:16px;
    accent-color:var(--accent);
    flex:0 0 auto;
}

.help-text{
    font-size:12px;
    line-height:1.6;
    color:var(--muted-2);
}

/* =========================================================
   STATUS / ALERTS
   ========================================================= */
.alert{
    display:grid;
    gap:6px;
    padding:14px 16px;
    border-radius:14px;
    border:1px solid transparent;
    font-size:13px;
    line-height:1.6;
}

.alert-info{
    background:rgba(110,168,255,.10);
    border-color:rgba(110,168,255,.18);
    color:#d7e6ff;
}

.alert-success{
    background:rgba(39,192,125,.12);
    border-color:rgba(39,192,125,.22);
    color:#c9f8e3;
}

.alert-danger{
    background:rgba(224,93,111,.12);
    border-color:rgba(224,93,111,.22);
    color:#ffd5db;
}

.alert-warning{
    background:rgba(230,184,92,.12);
    border-color:rgba(230,184,92,.22);
    color:#ffe7b6;
}

/* =========================================================
   TOP BAR / MOBILE NAV BASE
   ========================================================= */
.topbar{
    position:sticky;
    top:0;
    z-index:40;
    min-height:var(--header-height);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--space-4);
    padding:12px var(--space-5);
    background:rgba(11,17,32,.78);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    border-bottom:1px solid rgba(255,255,255,.06);
}

.brand{
    display:flex;
    align-items:center;
    gap:12px;
    min-width:0;
}

.brand-mark{
    width:42px;
    height:42px;
    border-radius:14px;
    display:grid;
    place-items:center;
    background:rgba(255,255,255,.04);
    border:1px solid var(--line);
    color:#d5e4ff;
    font-size:18px;
    font-weight:800;
    flex:0 0 auto;
}

.brand-text-wrap{
    min-width:0;
}

.brand-title{
    font-size:17px;
    line-height:1.15;
    font-weight:800;
    color:#f2f6ff;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.brand-subtitle{
    margin-top:4px;
    font-size:12px;
    line-height:1.2;
    color:var(--muted);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.mobile-bottom-nav{
    position:fixed;
    left:12px;
    right:12px;
    bottom:12px;
    z-index:55;
    min-height:var(--mobile-nav-height);
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:8px;
    padding:10px;
    border-radius:22px;
    background:rgba(16,24,43,.90);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    border:1px solid rgba(255,255,255,.08);
    box-shadow:0 18px 40px rgba(0,0,0,.28);
}

.mobile-nav-link{
    min-height:54px;
    padding:8px 6px;
    border-radius:16px;
    display:grid;
    align-content:center;
    justify-items:center;
    gap:6px;
    color:var(--muted);
    transition:background .16s ease, color .16s ease, transform .16s ease;
}

.mobile-nav-link:hover{
    background:rgba(255,255,255,.05);
    color:#eef4ff;
}

.mobile-nav-link.active{
    background:rgba(110,168,255,.12);
    color:#ddecff;
}

.mobile-nav-icon{
    font-size:18px;
    line-height:1;
}

.mobile-nav-label{
    font-size:11px;
    line-height:1;
    font-weight:800;
    letter-spacing:.2px;
}

/* =========================================================
   MUSIC BAR BASE
   ========================================================= */
.music-bar{
    position:fixed;
    right:14px;
    bottom:102px;
    z-index:56;
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 12px;
    border-radius:18px;
    background:rgba(16,24,43,.90);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    border:1px solid rgba(255,255,255,.08);
    box-shadow:var(--shadow-md);
}

.music-btn{
    width:38px;
    height:38px;
    border-radius:12px;
    display:grid;
    place-items:center;
    background:rgba(255,255,255,.04);
    border:1px solid var(--line);
    color:#eef4ff;
    font-size:14px;
    font-weight:800;
    transition:background .16s ease, border-color .16s ease, transform .16s ease;
}

.music-btn:hover{
    background:rgba(255,255,255,.06);
    border-color:var(--line-strong);
    transform:translateY(-1px);
}

.music-label{
    font-size:11px;
    letter-spacing:1px;
    text-transform:uppercase;
    font-weight:800;
    color:var(--muted);
    white-space:nowrap;
}

.music-range{
    width:96px;
    accent-color:var(--accent);
}

/* =========================================================
   HELPERS
   ========================================================= */
.hidden{
    display:none !important;
}

.w-100{
    width:100%;
}

.mt-1{ margin-top:var(--space-1); }
.mt-2{ margin-top:var(--space-2); }
.mt-3{ margin-top:var(--space-3); }
.mt-4{ margin-top:var(--space-4); }
.mt-5{ margin-top:var(--space-5); }
.mt-6{ margin-top:var(--space-6); }

.mb-1{ margin-bottom:var(--space-1); }
.mb-2{ margin-bottom:var(--space-2); }
.mb-3{ margin-bottom:var(--space-3); }
.mb-4{ margin-bottom:var(--space-4); }
.mb-5{ margin-bottom:var(--space-5); }
.mb-6{ margin-bottom:var(--space-6); }

.pt-4{ padding-top:var(--space-4); }
.pb-4{ padding-bottom:var(--space-4); }

.no-scroll{
    overflow:hidden !important;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1100px){
    .grid-4{
        grid-template-columns:repeat(2, minmax(0,1fr));
    }

    .grid-3{
        grid-template-columns:repeat(2, minmax(0,1fr));
    }
}

@media (max-width: 820px){
    :root{
        --header-height: 60px;
    }

    .page-shell{
        padding-left:14px;
        padding-right:14px;
    }

    .form-grid,
    .grid-2,
    .grid-3,
    .grid-4{
        grid-template-columns:1fr;
    }

    .card,
    .card-compact{
        padding:16px;
    }

    .topbar{
        padding:10px 14px;
    }

    .brand-mark{
        width:38px;
        height:38px;
        border-radius:12px;
        font-size:16px;
    }

    .brand-title{
        font-size:15px;
    }

    .brand-subtitle{
        font-size:11px;
    }

    .music-bar{
        left:12px;
        right:12px;
        bottom:98px;
        justify-content:space-between;
        padding:9px 10px;
        border-radius:16px;
    }

    .music-range{
        width:82px;
    }
}

@media (max-width: 560px){
    :root{
        --mobile-nav-height: 72px;
    }

    body{
        padding-bottom:calc(var(--mobile-nav-height) + 28px);
    }

    .display-title{
        font-size:30px;
    }

    .page-title{
        font-size:24px;
    }

    .section-title{
        font-size:17px;
    }

    .btn{
        min-height:44px;
        font-size:13px;
        border-radius:13px;
    }

    .btn-lg{
        min-height:48px;
        font-size:14px;
    }

    .input,
    .select{
        height:48px;
    }

    .mobile-bottom-nav{
        left:10px;
        right:10px;
        bottom:10px;
        border-radius:20px;
        padding:8px;
    }

    .mobile-nav-link{
        min-height:52px;
        border-radius:14px;
    }

    .mobile-nav-icon{
        font-size:17px;
    }

    .mobile-nav-label{
        font-size:10px;
    }
}