/* BALCI OTO AKSESUAR — main.css — Tema, tipografi, temel stiller */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;600&display=swap');
:root{--color-black:#0a0a0a;--color-anthracite:#131316;--color-dark:#1a1a1f;--color-dark-gray:#222228;--color-mid-gray:#2d2d35;--color-light-gray:#8a8a95;--color-silver:#b8b8c4;--color-white:#f0f0f2;--color-red:#e31937;--color-red-dark:#b8132c;--color-red-glow:rgba(227,25,55,0.25);--color-red-subtle:rgba(227,25,55,0.08);--color-gold:#d4a843;--color-green:#22c55e;--color-green-subtle:rgba(34,197,94,0.12);--color-orange:#f59e0b;--color-orange-subtle:rgba(245,158,11,0.12);--color-blue:#3b82f6;--color-blue-subtle:rgba(59,130,246,0.12);--font-main:'Outfit',-apple-system,BlinkMacSystemFont,sans-serif;--font-mono:'JetBrains Mono',monospace;--max-width:1320px;--radius-sm:6px;--radius-md:10px;--radius-lg:14px;--radius-xl:20px;--shadow-sm:0 2px 8px rgba(0,0,0,0.3);--shadow-md:0 4px 16px rgba(0,0,0,0.4);--shadow-lg:0 8px 32px rgba(0,0,0,0.5);--shadow-red:0 4px 24px var(--color-red-glow);--transition-fast:0.15s ease;--transition:0.25s ease;--transition-slow:0.4s ease}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{font-family:var(--font-main);background:var(--color-anthracite);color:var(--color-white);line-height:1.6;min-height:100vh;overflow-x:hidden}
a{color:inherit;text-decoration:none;transition:color var(--transition-fast)}a:hover{color:var(--color-red)}
img{max-width:100%;height:auto;display:block}
button{font-family:var(--font-main);cursor:pointer;border:none;outline:none;transition:all var(--transition)}
input,select,textarea{font-family:var(--font-main);outline:none}
ul,ol{list-style:none}
::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--color-anthracite)}::-webkit-scrollbar-thumb{background:var(--color-mid-gray);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--color-red)}
h1,h2,h3,h4,h5,h6{font-weight:800;line-height:1.15;color:var(--color-white)}
h1{font-size:clamp(1.75rem,4vw,2.75rem)}h2{font-size:clamp(1.375rem,3vw,1.75rem)}h3{font-size:clamp(1.1rem,2vw,1.375rem)}
p{color:var(--color-silver);line-height:1.65}
.text-red{color:var(--color-red)}.text-green{color:var(--color-green)}.text-orange{color:var(--color-orange)}.text-gold{color:var(--color-gold)}.text-muted{color:var(--color-light-gray)}
.container{width:100%;max-width:var(--max-width);margin:0 auto;padding:0 20px}
.section{padding:64px 0}.section-dark{background:linear-gradient(180deg,var(--color-dark) 0%,var(--color-black) 100%)}
.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;flex-wrap:wrap;gap:16px}
.grid{display:grid;gap:16px}.grid-2{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}.grid-3{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}.grid-4{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}.grid-8{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
.flex{display:flex;align-items:center}.flex-between{display:flex;justify-content:space-between;align-items:center}.flex-center{display:flex;align-items:center;justify-content:center}.flex-wrap{flex-wrap:wrap}.flex-col{flex-direction:column}
.gap-sm{gap:8px}.gap-md{gap:16px}.gap-lg{gap:24px}.gap-xl{gap:32px}
.card{background:var(--color-dark-gray);border:1px solid var(--color-mid-gray);border-radius:var(--radius-lg);transition:all var(--transition);overflow:hidden}.card:hover{border-color:var(--color-red);transform:translateY(-4px);box-shadow:var(--shadow-md)}.card-body{padding:16px 20px}.card-flat{background:var(--color-dark-gray);border:1px solid var(--color-mid-gray);border-radius:var(--radius-lg);padding:24px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 28px;border-radius:var(--radius-md);font-size:0.875rem;font-weight:700;letter-spacing:0.3px;white-space:nowrap;text-decoration:none}.btn-primary{background:var(--color-red);color:#fff;box-shadow:var(--shadow-red)}.btn-primary:hover{background:var(--color-red-dark);transform:translateY(-2px);color:#fff}.btn-secondary{background:var(--color-dark-gray);color:var(--color-silver);border:1px solid var(--color-mid-gray)}.btn-secondary:hover{border-color:var(--color-red);color:var(--color-white)}.btn-outline{background:transparent;color:var(--color-red);border:1px solid var(--color-red)}.btn-outline:hover{background:var(--color-red);color:#fff}.btn-ghost{background:transparent;color:var(--color-silver);padding:8px 16px}.btn-ghost:hover{color:var(--color-red)}.btn-sm{padding:8px 16px;font-size:0.75rem}.btn-lg{padding:16px 40px;font-size:1rem}.btn-block{width:100%}
.form-group{margin-bottom:16px}.form-label{display:block;font-size:0.8125rem;font-weight:600;color:var(--color-silver);margin-bottom:4px}.form-input,.form-select,.form-textarea{width:100%;padding:12px 16px;background:var(--color-dark);border:1px solid var(--color-mid-gray);border-radius:var(--radius-md);color:var(--color-white);font-size:0.875rem;transition:border-color var(--transition-fast)}.form-input:focus,.form-select:focus,.form-textarea:focus{border-color:var(--color-red);box-shadow:0 0 0 3px var(--color-red-subtle)}.form-input::placeholder,.form-textarea::placeholder{color:var(--color-light-gray)}.form-select{appearance:auto}.form-textarea{resize:vertical;min-height:80px}.form-row{display:flex;gap:16px}.form-row>*{flex:1}
.badge{display:inline-flex;align-items:center;padding:3px 10px;border-radius:4px;font-size:0.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:0.5px}.badge-red{background:var(--color-red);color:#fff}.badge-green{background:var(--color-green);color:#fff}.badge-orange{background:var(--color-orange);color:#000}.badge-gold{background:var(--color-gold);color:#000}.badge-outline-green{background:var(--color-green-subtle);color:var(--color-green)}.badge-outline-orange{background:var(--color-orange-subtle);color:var(--color-orange)}.badge-outline-blue{background:var(--color-blue-subtle);color:var(--color-blue)}.badge-outline-red{background:var(--color-red-subtle);color:var(--color-red)}
.stars{display:inline-flex;gap:1px}.stars .star{color:var(--color-mid-gray);font-size:14px}.stars .star.active{color:var(--color-gold)}
.price{font-weight:900;color:var(--color-red)}.price-lg{font-size:1.75rem}.price-md{font-size:1.25rem}.price-old{color:var(--color-light-gray);text-decoration:line-through;font-weight:400;font-size:0.8125rem;margin-left:8px}.discount-badge{display:inline-flex;background:var(--color-green);color:#fff;padding:2px 8px;border-radius:4px;font-size:0.6875rem;font-weight:700;margin-left:8px}
.toast{position:fixed;top:100px;right:20px;z-index:10000;background:var(--color-green);color:#fff;padding:14px 24px;border-radius:var(--radius-md);font-size:0.8125rem;font-weight:600;box-shadow:0 4px 20px rgba(34,197,94,0.4);transform:translateX(120%);transition:transform var(--transition)}.toast.active{transform:translateX(0)}.toast-error{background:var(--color-red);box-shadow:var(--shadow-red)}
@keyframes fadeIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.animate-fadeIn{animation:fadeIn .5s ease forwards}
.stagger-1{animation-delay:.05s;opacity:0}.stagger-2{animation-delay:.1s;opacity:0}.stagger-3{animation-delay:.15s;opacity:0}.stagger-4{animation-delay:.2s;opacity:0}.stagger-5{animation-delay:.25s;opacity:0}.stagger-6{animation-delay:.3s;opacity:0}.stagger-7{animation-delay:.35s;opacity:0}.stagger-8{animation-delay:.4s;opacity:0}
.divider{height:1px;background:var(--color-mid-gray);margin:24px 0}
.text-center{text-align:center}.mt-sm{margin-top:8px}.mt-md{margin-top:16px}.mt-lg{margin-top:24px}.mt-xl{margin-top:32px}.mb-sm{margin-bottom:8px}.mb-md{margin-bottom:16px}.mb-lg{margin-bottom:24px}.mb-xl{margin-bottom:32px}.p-md{padding:16px}.p-lg{padding:24px}.hidden{display:none!important}.relative{position:relative}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}