/* ============================================
   MUHANDISLIK HUB - Base Styles
   Reset, Typography & Core Elements
   ============================================ */

/* Reset & Box Sizing */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Smooth Scrolling */
html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
    overflow-x: hidden;
    max-width: 100%;
    overscroll-behavior-x: none;
}

/* Body */
body {
    font-family: var(--font-primary);
    font-size: var(--fs-base);
    line-height: 1.6;
    color: var(--text-primary);
    background: var(--bg-dark);
    overflow-x: hidden;
    min-height: 100vh;
    min-height: -webkit-fill-available;
    max-width: 100%;
    position: relative;
    cursor: none;
    overscroll-behavior-x: none;
    -webkit-overflow-scrolling: touch;
}

/* ============ CUSTOM CURSOR ============ */
.cursor {
    pointer-events: none;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999999;
}

.cursor-dot {
    width: 8px;
    height: 8px;
    background: var(--primary-cyan, #00d4ff);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.2s, height 0.2s, background 0.2s;
    box-shadow: 0 0 10px var(--primary-cyan, #00d4ff), 0 0 20px rgba(0, 212, 255, 0.5);
}

.cursor-outline {
    width: 40px;
    height: 40px;
    border: 2px solid var(--primary-cyan, #00d4ff);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.15s, height 0.15s, border-color 0.15s, transform 0.15s;
    opacity: 0.6;
}

/* Cursor hover states */
.cursor-dot.hover {
    width: 12px;
    height: 12px;
    background: var(--primary-orange, #ff6b35);
    box-shadow: 0 0 15px var(--primary-orange, #ff6b35), 0 0 30px rgba(255, 107, 53, 0.5);
}

.cursor-outline.hover {
    width: 60px;
    height: 60px;
    border-color: var(--primary-orange, #ff6b35);
    opacity: 0.8;
}

/* Cursor click state */
.cursor-dot.click {
    transform: translate(-50%, -50%) scale(0.5);
}

.cursor-outline.click {
    transform: translate(-50%, -50%) scale(0.8);
}

/* Cursor text hover (links, buttons) */
.cursor-dot.text-hover {
    width: 6px;
    height: 6px;
    background: var(--primary-purple, #a855f7);
    box-shadow: 0 0 12px var(--primary-purple, #a855f7), 0 0 25px rgba(168, 85, 247, 0.5);
}

.cursor-outline.text-hover {
    width: 80px;
    height: 80px;
    border-color: var(--primary-purple, #a855f7);
    border-width: 1px;
    opacity: 0.7;
}

/* Cursor on inputs */
.cursor-dot.input-hover {
    width: 3px;
    height: 20px;
    border-radius: 2px;
    background: var(--primary-cyan, #00d4ff);
    box-shadow: 0 0 8px var(--primary-cyan, #00d4ff);
}

.cursor-outline.input-hover {
    opacity: 0;
}

/* Hide custom cursor on touch devices */
@media (hover: none) and (pointer: coarse) {
    .cursor {
        display: none !important;
    }

    body {
        cursor: auto;
    }
}

/* Cursor trail effect */
.cursor-trail {
    position: fixed;
    width: 6px;
    height: 6px;
    background: var(--primary-cyan, #00d4ff);
    border-radius: 50%;
    pointer-events: none;
    z-index: 999998;
    opacity: 0.6;
    transform: translate(-50%, -50%);
    transition: opacity 0.5s;
}

/* Selection */
::selection {
    background: var(--primary-cyan);
    color: var(--bg-dark);
}

::-moz-selection {
    background: var(--primary-cyan);
    color: var(--bg-dark);
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-darker);
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--primary-cyan), var(--primary-purple));
    border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, var(--primary-orange), var(--primary-cyan));
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: var(--space-md);
}

h1 { font-size: var(--fs-5xl); }
h2 { font-size: var(--fs-4xl); }
h3 { font-size: var(--fs-3xl); }
h4 { font-size: var(--fs-2xl); }
h5 { font-size: var(--fs-xl); }
h6 { font-size: var(--fs-lg); }

p {
    margin-bottom: var(--space-md);
    color: var(--text-secondary);
}

a {
    color: var(--primary-cyan);
    text-decoration: none;
    transition: var(--transition-base);
}

a:hover {
    color: var(--primary-orange);
}

/* Lists */
ul, ol {
    list-style: none;
}

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

/* Buttons Base */
button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    outline: none;
    background: transparent;
}

/* Inputs Base */
input, textarea, select {
    font-family: inherit;
    font-size: inherit;
    outline: none;
    border: none;
}

/* Container */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

.container-fluid {
    width: 100%;
    padding: 0 var(--container-padding);
}

/* Section */
.section {
    padding: var(--space-4xl) 0;
}

/* Text Utilities */
.text-gradient {
    background: var(--text-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.text-cyan { color: var(--primary-cyan); }
.text-orange { color: var(--primary-orange); }
.text-purple { color: var(--primary-purple); }
.text-green { color: var(--primary-green); }
.text-muted { color: var(--text-muted); }

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

/* Display Utilities */
.d-none { display: none; }
.d-block { display: block; }
.d-flex { display: flex; }
.d-grid { display: grid; }
.d-inline { display: inline; }
.d-inline-block { display: inline-block; }

/* Flex Utilities */
.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.flex-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.flex-column {
    flex-direction: column;
}

.flex-wrap {
    flex-wrap: wrap;
}

.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }
.gap-xl { gap: var(--space-xl); }

/* Margin Utilities */
.mt-1 { margin-top: var(--space-sm); }
.mt-2 { margin-top: var(--space-md); }
.mt-3 { margin-top: var(--space-lg); }
.mt-4 { margin-top: var(--space-xl); }
.mt-5 { margin-top: var(--space-2xl); }

.mb-1 { margin-bottom: var(--space-sm); }
.mb-2 { margin-bottom: var(--space-md); }
.mb-3 { margin-bottom: var(--space-lg); }
.mb-4 { margin-bottom: var(--space-xl); }
.mb-5 { margin-bottom: var(--space-2xl); }

/* Padding Utilities */
.p-1 { padding: var(--space-sm); }
.p-2 { padding: var(--space-md); }
.p-3 { padding: var(--space-lg); }
.p-4 { padding: var(--space-xl); }
.p-5 { padding: var(--space-2xl); }

/* Width Utilities */
.w-100 { width: 100%; }
.w-auto { width: auto; }

/* Position Utilities */
.position-relative { position: relative; }
.position-absolute { position: absolute; }
.position-fixed { position: fixed; }

/* Visibility */
.visible { visibility: visible; }
.invisible { visibility: hidden; }

/* Overflow */
.overflow-hidden { overflow: hidden; }
.overflow-auto { overflow: auto; }

/* Pointer */
.pointer-none { pointer-events: none; }
.cursor-pointer { cursor: pointer; }