/* ============================================
   BACKOFFICE - Ana Stil Dosyası
   ============================================ */

/* === BASE === */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Inter', system-ui, sans-serif; color: #1e293b; }

/* Form reset - Tailwind preflight uyumu */
input, select, textarea, button {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
}

::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 10px; }


/* ============================================
   ANIMATED BACKGROUND (Login + Sidebar ortak)
   ============================================ */

/* Scene - tam ekran login arkaplanı */
.scene {
    position: fixed; inset: 0; z-index: 0;
    background: linear-gradient(135deg, #0c0e1a 0%, #121530 30%, #0d1025 60%, #0a0c1a 100%);
}

/* Gradient bloblar */
.blob {
    position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.5;
    animation: blobMove 20s ease-in-out infinite alternate;
}
.blob-1 { width: 600px; height: 600px; background: radial-gradient(circle, #4f46e5 0%, transparent 70%); top: -15%; left: -10%; animation-duration: 22s; }
.blob-2 { width: 500px; height: 500px; background: radial-gradient(circle, #7c3aed 0%, transparent 70%); bottom: -20%; right: -5%; animation-duration: 18s; animation-delay: -5s; }
.blob-3 { width: 400px; height: 400px; background: radial-gradient(circle, #06b6d4 0%, transparent 70%); top: 40%; left: 50%; animation-duration: 25s; animation-delay: -10s; opacity: 0.3; }

@keyframes blobMove {
    0%   { transform: translate(0, 0) scale(1); }
    33%  { transform: translate(60px, -40px) scale(1.1); }
    66%  { transform: translate(-30px, 50px) scale(0.95); }
    100% { transform: translate(40px, 20px) scale(1.05); }
}

/* Yüzen partiküller */
.particles { position: absolute; inset: 0; overflow: hidden; }
.particle {
    position: absolute; width: 3px; height: 3px; background: rgba(255,255,255,0.15);
    border-radius: 50%; animation: particleFloat linear infinite;
}
@keyframes particleFloat {
    0%   { transform: translateY(100vh) scale(0); opacity: 0; }
    10%  { opacity: 1; }
    90%  { opacity: 1; }
    100% { transform: translateY(-10vh) scale(1); opacity: 0; }
}

/* Grid çizgileri */
.grid-lines {
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
    background-size: 60px 60px;
    animation: gridScroll 30s linear infinite;
}
@keyframes gridScroll {
    0%   { transform: translate(0, 0); }
    100% { transform: translate(60px, 60px); }
}

/* Orbit halkaları */
.orbit-ring {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 700px; height: 700px; border-radius: 50%;
    border: 1px solid rgba(99, 102, 241, 0.06);
    animation: orbitSpin 60s linear infinite;
}
.orbit-ring::before {
    content: ''; position: absolute; top: -4px; left: 50%;
    width: 8px; height: 8px; background: #6366f1; border-radius: 50%;
    box-shadow: 0 0 20px 4px rgba(99,102,241,0.4);
}
.orbit-ring-2 {
    width: 500px; height: 500px;
    border: 1px solid rgba(124, 58, 237, 0.06);
    animation: orbitSpin 45s linear infinite reverse;
}
.orbit-ring-2::before { background: #7c3aed; box-shadow: 0 0 20px 4px rgba(124,58,237,0.4); }
@keyframes orbitSpin { 0% { transform: translate(-50%, -50%) rotate(0deg); } 100% { transform: translate(-50%, -50%) rotate(360deg); } }

/* Işık çizgisi */
.light-streak {
    position: absolute; top: 45%; left: -100%;
    width: 200%; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(99,102,241,0.15), rgba(124,58,237,0.1), transparent);
    animation: streakMove 8s ease-in-out infinite;
}
@keyframes streakMove { 0%,100% { transform: translateX(-10%); } 50% { transform: translateX(10%); } }


/* ============================================
   LOGIN CARD
   ============================================ */

.login-card {
    background: rgba(255,255,255,0.04);
    backdrop-filter: blur(40px);
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 25px 60px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.05);
}
.login-card-enter {
    animation: cardEnter 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes cardEnter {
    0%   { opacity: 0; transform: translateY(30px) scale(0.97); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

.input-field {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    transition: all 0.25s ease;
}
.input-field:focus-within {
    border-color: rgba(99,102,241,0.5);
    background: rgba(255,255,255,0.07);
    box-shadow: 0 0 0 3px rgba(99,102,241,0.1);
}

.btn-glow {
    position: relative; overflow: hidden;
    box-shadow: 0 4px 25px rgba(99,102,241,0.3);
    transition: all 0.3s ease;
}
.btn-glow:hover {
    box-shadow: 0 6px 35px rgba(99,102,241,0.45);
    transform: translateY(-1px);
}
.btn-glow::before {
    content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
    animation: shimmer 3s ease-in-out infinite;
}
@keyframes shimmer { 0% { left: -100%; } 100% { left: 200%; } }

/* Login giriş animasyonları */
.logo-enter  { animation: logoIn 1s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both; }
.title-enter { animation: titleIn 0.8s ease 0.4s both; }
.form-enter  { animation: formIn 0.8s ease 0.5s both; }

@keyframes logoIn  { 0% { opacity:0; transform: translateY(-15px) scale(0.9); } 100% { opacity:1; transform: translateY(0) scale(1); } }
@keyframes titleIn { 0% { opacity:0; transform: translateY(10px); } 100% { opacity:1; transform: translateY(0); } }
@keyframes formIn  { 0% { opacity:0; } 100% { opacity:1; } }


/* ============================================
   SIDEBAR (Login temasının küçük hali)
   ============================================ */

.sidebar-scene {
    background: linear-gradient(160deg, #0c0e1a 0%, #121530 40%, #0d1025 100%);
    position: relative; overflow: hidden;
}
.sidebar-scene::before {
    content: ''; position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.015) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.015) 1px, transparent 1px);
    background-size: 40px 40px;
    animation: sidebarGrid 25s linear infinite;
}
@keyframes sidebarGrid { 0% { transform: translate(0,0); } 100% { transform: translate(40px,40px); } }

/* Sidebar bloblar */
.sb-blob {
    position: absolute; border-radius: 50%; filter: blur(60px); pointer-events: none;
    animation: sbBlobMove 18s ease-in-out infinite alternate;
}
.sb-blob-1 { width: 200px; height: 200px; background: radial-gradient(circle, rgba(79,70,229,0.25) 0%, transparent 70%); top: -40px; left: -40px; }
.sb-blob-2 { width: 180px; height: 180px; background: radial-gradient(circle, rgba(124,58,237,0.2) 0%, transparent 70%); bottom: 10%; right: -30px; animation-delay: -6s; }
.sb-blob-3 { width: 120px; height: 120px; background: radial-gradient(circle, rgba(6,182,212,0.12) 0%, transparent 70%); top: 50%; left: 30%; animation-delay: -12s; }
@keyframes sbBlobMove { 0% { transform: translate(0,0) scale(1); } 50% { transform: translate(15px,-10px) scale(1.1); } 100% { transform: translate(-10px,15px) scale(0.95); } }

/* Sidebar partiküller */
.sb-particles { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.sb-particle {
    position: absolute; width: 2px; height: 2px;
    background: rgba(255,255,255,0.12); border-radius: 50%;
    animation: sbParticle linear infinite;
}
@keyframes sbParticle {
    0%   { transform: translateY(100%) scale(0); opacity: 0; }
    10%  { opacity: 1; }
    90%  { opacity: 1; }
    100% { transform: translateY(-120%) scale(1); opacity: 0; }
}

/* Sidebar orbit */
.sb-orbit {
    position: absolute; top: 55%; left: 50%; transform: translate(-50%,-50%);
    width: 300px; height: 300px; border-radius: 50%;
    border: 1px solid rgba(99,102,241,0.04);
    animation: sbOrbit 40s linear infinite; pointer-events: none;
}
.sb-orbit::before {
    content: ''; position: absolute; top: -3px; left: 50%;
    width: 5px; height: 5px; background: #6366f1; border-radius: 50%;
    box-shadow: 0 0 12px 2px rgba(99,102,241,0.4);
}
@keyframes sbOrbit { 0% { transform: translate(-50%,-50%) rotate(0deg); } 100% { transform: translate(-50%,-50%) rotate(360deg); } }

/* Sidebar menü linkleri */
.sidebar-item {
    transition: all 0.2s ease; position: relative; z-index: 1;
    border-left: 2px solid transparent;
}
.sidebar-item:hover {
    background: rgba(255,255,255,0.05);
    backdrop-filter: blur(8px);
}
.sidebar-item.active {
    background: rgba(99,102,241,0.1);
    backdrop-filter: blur(12px);
    border-left: 2px solid rgba(99,102,241,0.8);
    box-shadow: inset 0 0 20px rgba(99,102,241,0.05);
}
.sidebar-item.active::after {
    content: ''; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
    width: 3px; height: 60%; border-radius: 3px;
    background: linear-gradient(180deg, #6366f1, #7c3aed);
    box-shadow: 0 0 8px rgba(99,102,241,0.5);
}

/* Sidebar glass kart */
.sb-glass-card {
    background: rgba(255,255,255,0.03);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.06);
}


/* ============================================
   DASHBOARD
   ============================================ */

.card { transition: all 0.2s ease; }
.card:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.06); }

.bar-grow {
    animation: barGrow 0.5s ease-out forwards;
    transform-origin: bottom; transform: scaleY(0);
}
@keyframes barGrow { to { transform: scaleY(1); } }

.dot-pulse { animation: dotPulse 2s ease-in-out infinite; }
@keyframes dotPulse { 0%,100% { opacity:1; } 50% { opacity:0.5; } }


/* ============================================
   SİPARİŞ SAYFASI
   ============================================ */

/* Kategori tabları */
.cat-tab {
    background: white;
    color: #64748b;
    border: 1px solid #f1f5f9;
}
.cat-tab:hover { background: #f8fafc; color: #334155; }
.cat-tab.active {
    background: #6366f1;
    color: white;
    border-color: #6366f1;
    box-shadow: 0 2px 10px rgba(99, 102, 241, 0.3);
}

/* Ürün kartı hover */
.product-card:hover { border-color: #e0e7ff; }

/* Kategori tab scroll gizle */
.category-tabs::-webkit-scrollbar { display: none; }
.category-tabs { -ms-overflow-style: none; scrollbar-width: none; }

/* Milestone indirim etiketleri */
.milestone-dot { pointer-events: auto; }
.milestone-label { line-height: 1; }

/* Miktar kontrol (+/- butonları) */
.qty-control { transition: all 0.2s ease; }
.qty-control.qty-active .qty-display {
    color: #4f46e5;
    font-weight: 800;
}
.qty-control.qty-active .qty-btn-minus {
    background: #fef2f2;
    border-color: #fecaca;
    color: #ef4444;
}
.qty-control.qty-active .qty-btn-plus {
    background: #eef2ff;
    border-color: #c7d2fe;
    color: #6366f1;
}

/* Sepet badge gizle/göster */
.cart-badge-hidden {
    transform: scale(0);
    opacity: 0;
}
.cart-badge-visible {
    transform: scale(1);
    opacity: 1;
}

/* Sepet badge bounce animasyonu */
.cart-badge-bounce {
    animation: cartBadgeBounce 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}
@keyframes cartBadgeBounce {
    0%   { transform: scale(1); }
    30%  { transform: scale(1.4); }
    50%  { transform: scale(0.85); }
    70%  { transform: scale(1.15); }
    100% { transform: scale(1); }
}

/* Mobil sepet butonu wiggle */
.cart-btn-wiggle {
    animation: cartBtnWiggle 0.6s ease;
}
@keyframes cartBtnWiggle {
    0%   { transform: rotate(0deg); }
    15%  { transform: rotate(-8deg); }
    30%  { transform: rotate(8deg); }
    45%  { transform: rotate(-6deg); }
    60%  { transform: rotate(4deg); }
    75%  { transform: rotate(-2deg); }
    100% { transform: rotate(0deg); }
}

/* Mobil sepet slide-in */
.cart-slide-in {
    animation: cartSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes cartSlideIn {
    0%   { transform: translateX(100%); }
    100% { transform: translateX(0); }
}


/* ============================================
   SİPARİŞ TAMAMLAMA (CHECKOUT)
   ============================================ */

/* Adres kartları */
.address-card {
    border: 2px solid #f1f5f9;
    transition: all 0.2s ease;
    cursor: pointer;
}
.address-card:hover { border-color: #c7d2fe; background: #fafafe; }
.address-card.selected {
    border-color: #6366f1;
    background: #eef2ff;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}
.address-card.selected .address-radio {
    border-color: #6366f1;
    background: #6366f1;
}

/* Ödeme tab butonları */
.payment-tab {
    border: 1.5px solid #e2e8f0;
    background: white;
    transition: all 0.2s ease;
    cursor: pointer;
}
.payment-tab:hover { border-color: #c7d2fe; background: #fafaff; }
.payment-tab.active {
    border-color: #6366f1;
    background: #eef2ff;
    color: #4338ca;
}

/* Checkout input alanları - specificity artırıldı (Tailwind preflight override) */
input.checkout-input,
select.checkout-input,
textarea.checkout-input,
.checkout-input {
    width: 100%;
    padding: 10px 14px;
    border-width: 1.5px;
    border-style: solid;
    border-color: #e2e8f0;
    border-radius: 12px;
    font-size: 14px;
    font-family: 'Inter', system-ui, sans-serif;
    line-height: 1.5;
    color: #1e293b;
    transition: all 0.2s ease;
    background-color: white;
    outline: none;
    display: block;
    height: auto;
    margin: 0;
}
input.checkout-input::placeholder,
textarea.checkout-input::placeholder,
.checkout-input::placeholder {
    color: #94a3b8;
    opacity: 1;
}
input.checkout-input:focus,
select.checkout-input:focus,
textarea.checkout-input:focus,
.checkout-input:focus {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
    outline: none;
}
input.checkout-input:disabled,
select.checkout-input:disabled,
.checkout-input:disabled {
    background-color: #f8fafc;
    color: #94a3b8;
    cursor: not-allowed;
}
.checkout-input.error {
    border-color: #ef4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

/* Checkout select - dropdown ok ikonu */
select.checkout-input,
select.checkout-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2394a3b8' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19.5 8.25l-7.5 7.5-7.5-7.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    padding-right: 40px;
    cursor: pointer;
    background-color: white;
}
select.checkout-input option {
    color: #1e293b;
    background: white;
    padding: 8px;
}

/* Checkout textarea */
textarea.checkout-input {
    resize: vertical;
    min-height: 60px;
}

/* Checkout file input */
input[type="file"].checkout-input {
    padding: 8px 14px;
}

/* Checkout number input - spinner gizle */
input[type="number"].checkout-input::-webkit-outer-spin-button,
input[type="number"].checkout-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"].checkout-input {
    -moz-appearance: textfield;
}

/* Shopping Money toggle switch */
.sm-toggle {
    width: 48px; height: 26px;
    background: #e2e8f0;
    border-radius: 13px;
    position: relative;
    cursor: pointer;
    transition: background 0.3s ease;
}
.sm-toggle.active { background: #6366f1; }
.sm-toggle::after {
    content: '';
    position: absolute; top: 3px; left: 3px;
    width: 20px; height: 20px;
    background: white;
    border-radius: 50%;
    transition: transform 0.3s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.sm-toggle.active::after { transform: translateX(22px); }


/* ============================================
   3D KREDİ KARTI ANİMASYONU
   ============================================ */

.cc-scene {
    perspective: 1200px;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
}
.cc-card {
    position: relative;
    width: 100%;
    aspect-ratio: 1.586; /* Standart kart oranı 85.6mm x 53.98mm */
    transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
}
.cc-card.flipped {
    transform: rotateY(180deg);
}

.cc-front, .cc-back {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    border-radius: 16px;
    padding: 24px 28px;
    color: white;
    overflow: hidden;
}

/* Kart ön yüz - gradient + pattern */
.cc-front {
    background: linear-gradient(135deg, #1e1b4b 0%, #312e81 30%, #4338ca 60%, #6366f1 100%);
    box-shadow:
        0 20px 60px rgba(30, 27, 75, 0.4),
        0 8px 20px rgba(67, 56, 202, 0.3),
        inset 0 1px 0 rgba(255,255,255,0.1);
}
.cc-front::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 20% 50%, rgba(255,255,255,0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(255,255,255,0.05) 0%, transparent 40%);
}
.cc-front::after {
    content: '';
    position: absolute;
    top: 0; left: -50%;
    width: 200%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.03), transparent);
    animation: ccShimmer 6s ease-in-out infinite;
}
@keyframes ccShimmer {
    0%, 100% { transform: translateX(-30%); }
    50% { transform: translateX(30%); }
}

/* Kart arka yüz */
.cc-back {
    background: linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #3730a3 100%);
    transform: rotateY(180deg);
    box-shadow:
        0 20px 60px rgba(30, 27, 75, 0.4),
        0 8px 20px rgba(67, 56, 202, 0.3);
}

/* Manyetik şerit */
.cc-magnetic {
    height: 46px;
    background: linear-gradient(180deg, #1a1a2e 0%, #16162a 50%, #1a1a2e 100%);
    margin: 16px -28px 0;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), inset 0 -1px 0 rgba(0,0,0,0.3);
}

/* CVV şerit */
.cc-cvv-strip {
    background: linear-gradient(90deg, #e5e7eb 0%, #f3f4f6 50%, #e5e7eb 100%);
    height: 40px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 16px;
    margin-top: 20px;
}

/* Chip görseli */
.cc-chip {
    width: 50px; height: 38px;
    background: linear-gradient(135deg, #d4a84b 0%, #f0d68a 40%, #c4973b 60%, #e8c86a 100%);
    border-radius: 8px;
    position: relative;
    box-shadow: inset 0 1px 2px rgba(255,255,255,0.3), 0 2px 4px rgba(0,0,0,0.2);
}
.cc-chip::before {
    content: '';
    position: absolute;
    inset: 4px;
    border: 1px solid rgba(0,0,0,0.15);
    border-radius: 4px;
}
.cc-chip::after {
    content: '';
    position: absolute;
    left: 50%; top: 4px; bottom: 4px;
    width: 1px;
    background: rgba(0,0,0,0.12);
}

/* Contactless ikonu */
.cc-contactless {
    width: 24px; height: 24px;
    opacity: 0.6;
}

/* Kart numarası display */
.cc-number {
    font-family: 'Inter', monospace;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 3px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

/* Kart sahibi ve tarih */
.cc-label {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    opacity: 0.6;
}
.cc-value {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 1px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

/* Brand logo */
.cc-brand {
    transition: opacity 0.3s ease;
}

/* Kart input focus glow */
.cc-input-group {
    position: relative;
}
.cc-input-group .checkout-input:focus {
    border-color: #6366f1;
}

/* Sipariş özeti sticky */
@media (min-width: 1024px) {
    .order-summary-sticky {
        position: sticky;
        top: 24px;
    }
}

/* Sipariş başarılı modal */
.order-success-enter {
    animation: orderSuccessIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes orderSuccessIn {
    0%   { opacity: 0; transform: scale(0.9); }
    100% { opacity: 1; transform: scale(1); }
}

.checkmark-circle {
    animation: checkmarkDraw 0.6s ease 0.2s both;
}
@keyframes checkmarkDraw {
    0%   { stroke-dashoffset: 100; opacity: 0; }
    100% { stroke-dashoffset: 0; opacity: 1; }
}