/**
 * Gtekal 3D v66.0 - ULTRA REALISTIC
 * ✅ Sistem Tipi & Mekanizma Popup Stilleri
 * ✅ Gelişmiş Görsel Efektler
 * ✅ 3D Ölçülendirme Stilleri
 */

/* =============================================
   ANA WRAPPER - STICKY LAYOUT
   ============================================= */
.gtekal-wrapper{
    width:100%;
    display:flex;
    gap:20px;
    min-height:650px;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    align-items:flex-start;
}

/* =============================================
   SOL: FORM PANELİ
   ============================================= */
.gtekal-form-panel{
    width:300px;
    min-width:280px;
    flex-shrink:0;
    background:linear-gradient(180deg, #ffffff 0%, #f8f9ff 100%);
    border-radius:20px;
    padding:25px;
    box-shadow:0 10px 40px rgba(102,126,234,0.12);
    display:flex;
    flex-direction:column;
    border:1px solid rgba(102,126,234,0.1);
}
.gtekal-form-panel h3{
    margin:0 0 20px;
    padding-bottom:15px;
    border-bottom:3px solid #667eea;
    color:#1a1a2e;
    font-size:18px;
    font-weight:700;
    display:flex;
    align-items:center;
    gap:8px;
}
.gtekal-form-panel .form-group{
    margin-bottom:16px;
}
.gtekal-form-panel .form-group label{
    display:block;
    font-size:11px;
    font-weight:700;
    color:#667eea;
    text-transform:uppercase;
    letter-spacing:1px;
    margin-bottom:8px;
}
.gtekal-form-panel select{
    width:100%;
    padding:12px 15px;
    border:2px solid #e8ecf4;
    border-radius:10px;
    font-size:14px;
    color:#333;
    background:#fff;
    cursor:pointer;
    transition:all 0.3s ease;
    font-weight:500;
}
.gtekal-form-panel select:hover{
    border-color:#667eea;
}
.gtekal-form-panel select:focus{
    outline:none;
    border-color:#667eea;
    box-shadow:0 0 0 4px rgba(102,126,234,0.15);
}
.gtekal-form-panel input[type="range"]{
    width:100%;
    margin-top:8px;
    height:8px;
    -webkit-appearance:none;
    background:linear-gradient(to right, #667eea, #764ba2);
    border-radius:4px;
    cursor:pointer;
}
.gtekal-form-panel input[type="range"]::-webkit-slider-thumb{
    -webkit-appearance:none;
    width:22px;
    height:22px;
    background:#fff;
    border:3px solid #667eea;
    border-radius:50%;
    box-shadow:0 2px 8px rgba(0,0,0,0.2);
    cursor:pointer;
    transition:transform 0.2s;
}
.gtekal-form-panel input[type="range"]::-webkit-slider-thumb:hover{
    transform:scale(1.15);
}
.gtekal-form-panel .val{
    background:linear-gradient(135deg, #667eea, #764ba2);
    color:#fff;
    padding:4px 10px;
    border-radius:6px;
    font-size:12px;
    font-weight:700;
    margin-left:5px;
}

/* Cam Rengi Grid */
.glass-color-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:5px;
}
.glass-color-btn{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:3px;
    padding:6px 4px;
    border:2px solid #e0e0e0;
    border-radius:6px;
    background:#fff;
    cursor:pointer;
    transition:all 0.2s;
}
.glass-color-btn:hover{
    border-color:#667eea;
    transform:scale(1.05);
}
.glass-color-btn.active{
    border-color:#667eea;
    background:#f0f4ff;
    box-shadow:0 2px 8px rgba(102,126,234,0.3);
}
.gc-circle{
    width:20px;
    height:20px;
    border-radius:50%;
    border:1px solid rgba(0,0,0,0.1);
}
.gc-name{
    font-size:9px;
    color:#666;
}

/* Fiyat Kilitli */
.price-locked{
    margin-top:auto;
    background:linear-gradient(135deg,#f5f5f5,#e8e8e8);
    border-radius:12px;
    padding:20px;
    text-align:center;
}
.price-locked .lock-icon{
    font-size:32px;
    margin-bottom:8px;
}
.price-locked .lock-text{
    font-size:12px;
    color:#666;
    margin-bottom:12px;
}
.btn-unlock{
    width:100%;
    padding:12px;
    background:linear-gradient(135deg,#667eea,#764ba2);
    color:#fff;
    border:none;
    border-radius:8px;
    font-size:14px;
    font-weight:600;
    cursor:pointer;
    transition:transform 0.2s, box-shadow 0.2s;
}
.btn-unlock:hover{
    transform:scale(1.02);
    box-shadow:0 5px 20px rgba(102,126,234,0.4);
}

/* Fiyat Açık */
.price-unlocked{
    margin-top:auto;
    background:linear-gradient(135deg,#667eea,#764ba2);
    border-radius:12px;
    padding:20px;
    text-align:center;
    color:#fff;
}
.price-unlocked .price-label{
    font-size:11px;
    opacity:0.8;
    text-transform:uppercase;
}
.price-unlocked .price-value{
    font-size:32px;
    font-weight:800;
    margin:5px 0;
}
.price-unlocked .price-note{
    font-size:11px;
    opacity:0.7;
}
.action-buttons{
    display:flex;
    gap:8px;
    margin-top:12px;
    flex-wrap:wrap;
}
.btn-action{
    flex:1;
    min-width:80px;
    padding:12px 16px;
    background:rgba(255,255,255,0.08);
    color:rgba(255,255,255,0.85);
    border:1px solid rgba(255,255,255,0.15);
    border-radius:8px;
    font-size:13px;
    font-weight:800;
    cursor:pointer;
    transition:all 0.2s;
}
.btn-action:hover{
    background:rgba(255,255,255,0.15);
    transform:scale(1.03);
    box-shadow:0 3px 10px rgba(0,0,0,0.25);
    color:#fff;
}
.btn-pdf{ background:rgba(102,126,234,0.5); }
.btn-save{ background:rgba(40,167,69,0.5); }
.btn-save.saved{ background:rgba(40,167,69,0.8); }
.btn-email{ background:rgba(76,175,80,0.5); }
.btn-cart{ background:rgba(255,152,0,0.5); }

/* View Controls */
.btn-animate{
    background:linear-gradient(135deg,rgba(255,152,0,0.5),rgba(245,124,0,0.5));
    color:#fff;
}
.btn-rotate{
    background:linear-gradient(135deg,rgba(0,188,212,0.5),rgba(0,151,167,0.5));
    color:#fff;
}
.btn-rotate.active{
    background:linear-gradient(135deg,rgba(255,87,34,0.75),rgba(244,67,54,0.75));
    animation:rotate-pulse 2s infinite;
}
@keyframes rotate-pulse{
    0%,100%{transform:scale(1);}
    50%{transform:scale(1.05);}
}
.btn-ar{
    background:linear-gradient(135deg,rgba(156,39,176,0.5),rgba(123,31,162,0.5));
    color:#fff;
}

/* =============================================
   ORTA: 3D MODEL PANELİ - ULTRA REALİSTİK
   ============================================= */
.gtekal-3d-panel{
    flex:1;
    position:sticky;
    top:20px;
    align-self:flex-start;
    background:#ffffff;
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 15px 50px rgba(0,0,0,0.15), 0 5px 15px rgba(102,126,234,0.1);
    min-height:550px;
    max-height:650px;
    border:1px solid rgba(102,126,234,0.1);
    z-index:100;
}
.canvas-container{
    width:100%;
    height:100%;
    min-height:550px;
    max-height:650px;
    background:linear-gradient(180deg, #f8f9fa 0%, #eef1f5 100%);
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
}
.canvas-container canvas{
    display:block !important;
    width:100% !important;
    height:100% !important;
    image-rendering:high-quality !important;
}

/* View Controls - Premium */
.view-controls{
    position:absolute;
    bottom:20px;
    left:50%;
    transform:translateX(-50%);
    z-index:1000;
    display:flex;
    gap:10px;
    background:rgba(30,30,40,0.9);
    padding:12px 18px;
    border-radius:16px;
    box-shadow:0 10px 40px rgba(0,0,0,0.3);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    border:1px solid rgba(255,255,255,0.1);
}
.view-btn{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:4px;
    padding:12px 16px;
    border:none;
    background:rgba(255,255,255,0.1);
    border-radius:12px;
    cursor:pointer;
    transition:all 0.3s ease;
    border:1px solid rgba(255,255,255,0.15);
    color:#fff;
    font-weight:600;
}
.view-btn:hover{
    transform:translateY(-3px);
    box-shadow:0 8px 25px rgba(102,126,234,0.4);
    background:rgba(102,126,234,0.3);
    border-color:rgba(102,126,234,0.5);
}
.view-btn.active{
    background:linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color:#fff;
    border-color:transparent;
    box-shadow:0 8px 25px rgba(102,126,234,0.5);
}
.view-icon{
    font-size:22px;
}
.view-text{
    font-size:9px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:0.5px;
    opacity:0.9;
}

/* Loading Overlay - Premium */
.loading-overlay{
    position:absolute;
    top:0;left:0;right:0;bottom:0;
    background:linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(248,249,255,0.98) 100%);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    z-index:200;
}
.spinner{
    width:60px;
    height:60px;
    border:4px solid #e8ecf4;
    border-top-color:#667eea;
    border-radius:50%;
    animation:spin 0.8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* =============================================
   SAĞ: SİPARİŞ DETAYI
   ============================================= */
.gtekal-order-panel{
    width:320px;
    min-width:300px;
    flex-shrink:0;
    position:sticky;
    top:20px;
    align-self:flex-start;
    background:linear-gradient(180deg, #ffffff 0%, #f8f9ff 100%);
    border-radius:20px;
    padding:25px;
    box-shadow:0 10px 40px rgba(102,126,234,0.12);
    display:flex;
    flex-direction:column;
    gap:15px;
    border:1px solid rgba(102,126,234,0.1);
    max-height:calc(100vh - 40px);
    overflow-y:auto;
    z-index:100;
}
.gtekal-order-panel::-webkit-scrollbar{
    width:6px;
}
.gtekal-order-panel::-webkit-scrollbar-track{
    background:#f1f1f1;
    border-radius:3px;
}
.gtekal-order-panel::-webkit-scrollbar-thumb{
    background:linear-gradient(180deg, #667eea, #764ba2);
    border-radius:3px;
}
.gtekal-order-panel h3{
    margin:0;
    padding-bottom:15px;
    border-bottom:3px solid #667eea;
    color:#1a1a2e;
    font-size:18px;
    font-weight:700;
}

/* 2D Çizim */
.order-2d-box{
    background:linear-gradient(180deg, #f0f4ff 0%, #e8ecf4 100%);
    border-radius:15px;
    padding:20px;
    display:flex;
    flex-direction:column;
    align-items:center;
    position:relative;
    border:1px solid rgba(102,126,234,0.15);
}
.order-2d-box svg{
    background:#fff;
    border-radius:12px;
    box-shadow:0 6px 20px rgba(0,0,0,0.1);
}

/* SVG Çizim Container */
.gtekal-svg-drawing {
    width: 100%;
    max-width: 280px;
    margin: 0 auto;
    display: block;
}

/* SVG Animasyon - Panel Hareketleri */
/* Paneller AŞAĞI doğru açılır, YUKARI doğru kapanır */
#svg-panel-1,
#svg-panel-2 {
    transition: transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) !important;
    transform-origin: center center;
}

/* 2H1S için (3 panel) - Animasyon */
/* En üstteki panel (panel-2) en çok aşağı iner */
/* Ortadaki panel (panel-1) biraz aşağı iner */
/* En alttaki sabit panel yerinde kalır */
.svg-2h1s #svg-panel-1 {
    transform: translateY(0);
}
.svg-2h1s #svg-panel-2 {
    transform: translateY(0);
}
/* AÇIK durumda - paneller AŞAĞI iner ve sabit panelin üstünde toplanır */
.svg-2h1s #svg-panel-1.open {
    transform: translateY(78px) !important;
}
.svg-2h1s #svg-panel-2.open {
    transform: translateY(156px) !important;
}

/* 1H1S için (2 panel) - Animasyon */
/* Üstteki panel aşağı iner, alttaki sabit kalır */
.svg-1h1s #svg-panel-1 {
    transform: translateY(0);
}
.svg-1h1s #svg-panel-1.open {
    transform: translateY(118px) !important;
}

.svg-anim-controls{
    margin-top:15px;
}
.svg-anim-btn{
    background:linear-gradient(135deg,#667eea,#764ba2);
    border:none;
    border-radius:50%;
    width:48px;
    height:48px;
    color:#fff;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:16px;
    transition:all 0.3s ease;
    box-shadow:0 6px 20px rgba(102,126,234,0.4);
}
.svg-anim-btn:hover{
    transform:scale(1.15);
    box-shadow:0 8px 30px rgba(102,126,234,0.5);
}
.svg-anim-btn.playing .play-icon{
    animation:pulse-icon 1s infinite;
}
@keyframes pulse-icon{
    0%,100%{opacity:1;}
    50%{opacity:0.5;}
}

/* Specs Box */
.specs-box{
    display:flex;
    flex-direction:column;
    gap:8px;
}
.spec-item{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:10px 14px;
    background:#f8f9fa;
    border-radius:10px;
    transition:all 0.2s;
}
.spec-item:hover{
    background:#f0f4ff;
    transform:translateX(3px);
}
.spec-label{
    font-size:11px;
    color:#888;
    text-transform:uppercase;
    font-weight:600;
}
.spec-value{
    font-size:13px;
    font-weight:600;
    color:#333;
    display:flex;
    align-items:center;
    gap:6px;
}
.color-dot{
    width:14px;
    height:14px;
    border-radius:50%;
    border:2px solid rgba(0,0,0,0.1);
    box-shadow:0 2px 4px rgba(0,0,0,0.1);
}

/* =============================================
   SİSTEM TİPİ & MEKANİZMA POPUP - PREMIUM
   ============================================= */
.info-popup-overlay{
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:rgba(0,0,0,0);
    z-index:99999;
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:0;
    visibility:hidden;
    transition:all 0.4s ease;
}
.info-popup-overlay.active{
    background:rgba(0,0,0,0.6);
    opacity:1;
    visibility:visible;
    backdrop-filter:blur(5px);
    -webkit-backdrop-filter:blur(5px);
}

.info-popup-content{
    background:linear-gradient(180deg, #ffffff 0%, #f8f9ff 100%);
    border-radius:24px;
    padding:0;
    max-width:420px;
    width:92%;
    max-height:90vh;
    overflow:hidden;
    position:relative;
    transform:scale(0.8) translateY(30px);
    opacity:0;
    transition:all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow:0 25px 80px rgba(0,0,0,0.3), 0 10px 30px rgba(102,126,234,0.2);
}
.info-popup-overlay.active .info-popup-content{
    transform:scale(1) translateY(0);
    opacity:1;
}

.info-popup-close{
    position:absolute;
    top:15px;
    right:15px;
    width:36px;
    height:36px;
    border:none;
    background:rgba(255,255,255,0.9);
    border-radius:50%;
    font-size:24px;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#666;
    transition:all 0.2s;
    z-index:10;
    box-shadow:0 2px 10px rgba(0,0,0,0.1);
}
.info-popup-close:hover{
    background:#fff;
    color:#333;
    transform:rotate(90deg) scale(1.1);
}

.info-popup-header{
    background:linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding:30px 25px 25px;
    text-align:center;
    color:#fff;
}
.info-popup-icon{
    font-size:56px;
    margin-bottom:10px;
    filter:drop-shadow(0 4px 8px rgba(0,0,0,0.2));
}
.info-popup-header h3{
    margin:0;
    font-size:24px;
    font-weight:700;
    text-shadow:0 2px 4px rgba(0,0,0,0.2);
}

.info-popup-image{
    padding:25px;
    background:#f8f9ff;
    display:flex;
    justify-content:center;
}
.info-popup-image svg{
    width:100%;
    max-width:300px;
    height:auto;
    filter:drop-shadow(0 4px 12px rgba(0,0,0,0.1));
}
.system-svg, .mechanism-svg{
    background:#fff;
    border-radius:12px;
}

.info-popup-desc{
    padding:0 25px;
    margin:0;
    color:#555;
    font-size:15px;
    line-height:1.6;
    text-align:center;
}

.info-popup-features{
    padding:20px 25px;
}
.info-popup-features h4{
    margin:0 0 12px;
    color:#333;
    font-size:14px;
    text-transform:uppercase;
    letter-spacing:1px;
}
.info-popup-features ul{
    list-style:none;
    margin:0;
    padding:0;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
}
.info-popup-features li{
    display:flex;
    align-items:center;
    gap:8px;
    padding:10px 12px;
    background:#f0f4ff;
    border-radius:8px;
    font-size:13px;
    color:#444;
    transition:all 0.2s;
}
.info-popup-features li:hover{
    background:#e8ecff;
    transform:translateX(3px);
}
.feature-icon{
    color:#28a745;
    font-weight:bold;
    font-size:14px;
}

.info-popup-btn{
    display:block;
    width:calc(100% - 50px);
    margin:0 25px 25px;
    padding:16px;
    background:linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color:#fff;
    border:none;
    border-radius:12px;
    font-size:16px;
    font-weight:700;
    cursor:pointer;
    transition:all 0.3s;
    box-shadow:0 6px 20px rgba(102,126,234,0.4);
}
.info-popup-btn:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 30px rgba(102,126,234,0.5);
}

/* =============================================
   FİYAT POPUP
   ============================================= */
.popup-overlay{
    display:none;
    position:fixed;
    top:0;left:0;right:0;bottom:0;
    background:rgba(0,0,0,0.6);
    z-index:9999;
    align-items:center;
    justify-content:center;
    backdrop-filter:blur(5px);
}
.popup-overlay.active{
    display:flex;
}
.popup-content{
    background:linear-gradient(180deg, #ffffff 0%, #f8f9ff 100%);
    border-radius:24px;
    padding:35px;
    max-width:420px;
    width:92%;
    max-height:90vh;
    overflow-y:auto;
    position:relative;
    animation:popIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow:0 25px 80px rgba(0,0,0,0.3);
}
@keyframes popIn{
    from{opacity:0;transform:scale(0.8) translateY(30px)}
    to{opacity:1;transform:scale(1) translateY(0)}
}
.popup-close{
    position:absolute;
    top:15px;
    right:15px;
    width:36px;
    height:36px;
    border:none;
    background:#f0f0f0;
    border-radius:50%;
    font-size:24px;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:all 0.2s;
}
.popup-close:hover{
    background:#e0e0e0;
    transform:rotate(90deg);
}
.popup-content h3{
    margin:0 0 10px;
    color:#333;
    font-size:22px;
}
.popup-desc{
    color:#666;
    font-size:14px;
    margin-bottom:25px;
}
.popup-content .form-row{
    margin-bottom:18px;
}
.popup-content label{
    display:block;
    font-size:12px;
    font-weight:600;
    color:#555;
    margin-bottom:6px;
    text-transform:uppercase;
    letter-spacing:0.5px;
}
.popup-content input,
.popup-content textarea{
    width:100%;
    padding:14px 16px;
    border:2px solid #e8ecf4;
    border-radius:10px;
    font-size:15px;
    box-sizing:border-box;
    transition:all 0.2s;
}
.popup-content input:focus,
.popup-content textarea:focus{
    border-color:#667eea;
    outline:none;
    box-shadow:0 0 0 4px rgba(102,126,234,0.15);
}
.checkbox-wrap{
    display:flex;
    align-items:flex-start;
    gap:10px;
    cursor:pointer;
}
.checkbox-wrap input{
    width:auto;
    margin-top:3px;
    transform:scale(1.2);
}
.checkbox-wrap span{
    font-size:13px;
    color:#666;
    line-height:1.4;
}
.btn-submit{
    width:100%;
    padding:16px;
    background:linear-gradient(135deg,#28a745,#20c997);
    color:#fff;
    border:none;
    border-radius:12px;
    font-size:16px;
    font-weight:700;
    cursor:pointer;
    margin-top:15px;
    transition:all 0.3s;
    box-shadow:0 6px 20px rgba(40,167,69,0.4);
}
.btn-submit:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 30px rgba(40,167,69,0.5);
}

/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width:1200px){
    .gtekal-wrapper{
        flex-wrap:wrap;
    }
    .gtekal-form-panel{
        width:100%;
        order:1;
    }
    .gtekal-3d-panel{
        flex:1 1 60%;
        min-width:400px;
        order:2;
        position:sticky;
        top:10px;
    }
    .gtekal-order-panel{
        flex:1 1 35%;
        min-width:280px;
        order:3;
        position:sticky;
        top:10px;
        max-height:calc(100vh - 20px);
    }
}
@media (max-width:768px){
    .gtekal-wrapper{
        flex-direction:column;
    }
    .gtekal-form-panel,
    .gtekal-3d-panel,
    .gtekal-order-panel{
        width:100%;
        min-width:auto;
        position:relative;
        top:auto;
        max-height:none;
    }
    .gtekal-3d-panel{
        min-height:400px;
    }
    .canvas-container{
        min-height:400px;
    }
    
    .view-controls{
        flex-wrap:wrap;
        max-width:calc(100% - 30px);
    }
    
    .info-popup-features ul{
        grid-template-columns:1fr;
    }
}

/* =============================================
   SİPARİŞ YÖNETİMİ POPUP
   ============================================= */
.orders-popup-overlay{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.7);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:10000;
    opacity:0;
    visibility:hidden;
    transition:all 0.3s ease;
    backdrop-filter:blur(5px);
}
.orders-popup-overlay.active{
    opacity:1;
    visibility:visible;
}
.orders-popup-content{
    background:#fff;
    border-radius:16px;
    padding:25px;
    max-width:900px;
    width:95%;
    max-height:80vh;
    overflow-y:auto;
    box-shadow:0 25px 80px rgba(0,0,0,0.4);
    transform:translateY(-20px);
    transition:transform 0.3s ease;
}
.orders-popup-overlay.active .orders-popup-content{
    transform:translateY(0);
}
.orders-popup-close{
    position:absolute;
    top:15px;
    right:15px;
    background:none;
    border:none;
    font-size:28px;
    cursor:pointer;
    color:#666;
    width:40px;
    height:40px;
    border-radius:50%;
    transition:all 0.2s;
}
.orders-popup-close:hover{
    background:#f0f0f0;
    color:#333;
}
.orders-popup-content h3{
    margin:0 0 20px;
    color:#1a1a2e;
    font-size:20px;
    padding-bottom:15px;
    border-bottom:2px solid #667eea;
}
.orders-list{
    margin-top:15px;
}
.orders-table{
    width:100%;
    border-collapse:collapse;
    font-size:14px;
}
.orders-table th{
    background:linear-gradient(135deg, #667eea, #764ba2);
    color:#fff;
    padding:12px 10px;
    text-align:left;
    font-weight:600;
}
.orders-table th:first-child{
    border-radius:8px 0 0 0;
}
.orders-table th:last-child{
    border-radius:0 8px 0 0;
}
.orders-table td{
    padding:12px 10px;
    border-bottom:1px solid #eee;
    vertical-align:middle;
}
.orders-table tr:hover td{
    background:#f8f9ff;
}
.orders-table tr:last-child td:first-child{
    border-radius:0 0 0 8px;
}
.orders-table tr:last-child td:last-child{
    border-radius:0 0 8px 0;
}
.order-actions{
    display:flex;
    gap:8px;
}
.btn-edit-order,
.btn-delete-order{
    width:36px;
    height:36px;
    border:none;
    border-radius:8px;
    cursor:pointer;
    font-size:16px;
    transition:all 0.2s;
    display:flex;
    align-items:center;
    justify-content:center;
}
.btn-edit-order{
    background:#e3f2fd;
    color:#1976d2;
}
.btn-edit-order:hover{
    background:#1976d2;
    color:#fff;
    transform:scale(1.1);
}
.btn-delete-order{
    background:#ffebee;
    color:#d32f2f;
}
.btn-delete-order:hover{
    background:#d32f2f;
    color:#fff;
    transform:scale(1.1);
}
.no-orders{
    text-align:center;
    color:#666;
    padding:40px;
    font-size:16px;
}

/* Siparişler Butonu */
#show-orders-btn{
    background:linear-gradient(135deg, #667eea, #764ba2);
    color:#fff;
    border:none;
    padding:10px 20px;
    border-radius:10px;
    cursor:pointer;
    font-size:14px;
    font-weight:600;
    transition:all 0.3s;
    margin-top:10px;
    width:100%;
}
#show-orders-btn:hover{
    transform:translateY(-2px);
    box-shadow:0 6px 20px rgba(102,126,234,0.4);
}

/* ============================================
   SİPARİŞ POPUP STİLLERİ
   ============================================ */
.order-popup-content {
    background: #fff;
}
.order-popup-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-top: 20px;
}
@media (max-width: 768px) {
    .order-popup-grid {
        grid-template-columns: 1fr;
    }
}
.order-summary-section h4,
.order-details-section h4 {
    color: #333;
    font-size: 14px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid #667eea;
}
.order-summary-box {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 10px;
    margin-bottom: 20px;
}
.summary-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #e9ecef;
    font-size: 13px;
}
.summary-row:last-child {
    border-bottom: none;
}
.summary-row span {
    color: #6c757d;
}
.summary-row strong {
    color: #333;
}

/* Montaj Seçenekleri */
.montaj-section {
    margin-bottom: 20px;
}
.montaj-options,
.payment-options {
    display: flex;
    gap: 12px;
}
.montaj-option,
.payment-option {
    flex: 1;
    cursor: pointer;
}
.montaj-option input,
.payment-option input {
    display: none;
}
.option-box {
    display: block;
    padding: 15px;
    background: #f8f9fa;
    border: 2px solid #e9ecef;
    border-radius: 10px;
    text-align: center;
    transition: all 0.3s ease;
}
.option-box strong {
    display: block;
    color: #333;
    font-size: 13px;
    margin-bottom: 4px;
}
.option-box small {
    display: block;
    color: #6c757d;
    font-size: 11px;
}
.montaj-option input:checked + .option-box,
.payment-option input:checked + .option-box {
    border-color: #667eea;
    background: linear-gradient(135deg, rgba(102,126,234,0.1), rgba(118,75,162,0.1));
}
.option-box.montaj-dahil {
    background: linear-gradient(135deg, rgba(40,167,69,0.1), rgba(32,201,151,0.1));
}
.montaj-option input:checked + .option-box.montaj-dahil {
    border-color: #28a745;
    background: linear-gradient(135deg, rgba(40,167,69,0.2), rgba(32,201,151,0.2));
}

/* Fiyat Özeti */
.price-summary-box {
    background: linear-gradient(135deg, #667eea, #764ba2);
    padding: 15px;
    border-radius: 10px;
    color: #fff;
}
.price-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 13px;
}
.price-row.total {
    border-top: 1px solid rgba(255,255,255,0.3);
    margin-top: 8px;
    padding-top: 10px;
    font-size: 16px;
}
.price-row.total strong {
    font-size: 20px;
}

/* Sipariş Formu */
.order-details-section .form-row {
    margin-bottom: 12px;
}
.order-details-section .form-row label {
    display: block;
    font-size: 12px;
    color: #495057;
    margin-bottom: 4px;
    font-weight: 600;
}
.order-details-section .form-row input,
.order-details-section .form-row textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    font-size: 13px;
    transition: border-color 0.3s;
}
.order-details-section .form-row input:focus,
.order-details-section .form-row textarea:focus {
    outline: none;
    border-color: #667eea;
}
.checkbox-wrap {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 12px;
    color: #6c757d;
    cursor: pointer;
}
.checkbox-wrap input {
    width: auto !important;
    margin-top: 2px;
}
.btn-submit-order {
    width: 100%;
    padding: 16px;
    background: linear-gradient(135deg, #28a745, #20c997);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 15px;
}
.btn-submit-order:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(40,167,69,0.4);
}

/* Sipariş Ver Butonu */
.btn-order {
    width: 100%;
    padding: 18px;
    background: linear-gradient(135deg, #28a745, #20c997);
    color: #fff;
    border: none;
    border-radius: 14px;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.btn-order:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(40,167,69,0.4);
}

/* Order Popup Visibility */
#order-popup {
    display: none;
}
#order-popup.active {
    display: flex;
}