/* =========================================
   LA'VIESTA ROLEPLAY — PAGES CSS v2
   (Gallery, Rules, Contact, Borsa, Araçlar, Ceza)
   ========================================= */

/* ══════════════════════════════════
   PAGE LAYOUT
══════════════════════════════════ */
.main-content {
    min-height: calc(100vh - var(--header-h));
    padding-top: calc(var(--header-h) + 2.5rem);
    padding-bottom: 6rem;
}
.content-wrapper { max-width:1200px; margin:0 auto; padding:0 2rem; }

/* ── Page Header Animation ── */

/* ── Search & Filter States ── */
.hidden-rule {
    display: none;
    opacity: 0;
    pointer-events: none;
}
.page-header {
    text-align:center; margin-bottom:4rem;
    position:relative; animation:fade-in-up 0.8s ease-out;
}
.page-header::after {
    content:''; position:absolute; bottom:-1.2rem; left:50%;
    transform:translateX(-50%);
    width:80px; height:3px;
    background:linear-gradient(90deg,transparent,var(--gold),transparent);
    border-radius:2px;
}
.page-header .page-title {
    font-family:'Outfit',sans-serif;
    font-size:clamp(2.4rem,5vw,4rem); font-weight:900; color:#fff;
    margin-bottom:1rem; line-height:1.1;
}
.page-header .page-subtitle { font-size:1.05rem; color:var(--text-muted); max-width:600px; margin:0 auto; line-height:1.7; }

/* ══════════════════════════════════
   GALLERY / CAROUSEL
══════════════════════════════════ */
.carousel-section { margin-top:3rem; }
/* Card entrance animation (scroll-triggered via JS) */
.carousel-slide { opacity:0; transform:translateY(28px); transition:opacity 0.55s ease, transform 0.55s ease; }
.carousel-slide.visible { opacity:1; transform:translateY(0); }
.carousel-track { display:flex; flex-wrap:wrap; gap:1.5rem; justify-content:center; }
.carousel-slide { flex:0 0 calc(33.333% - 1rem); margin-bottom:1.5rem; }

.screenshot-card {
    position:relative; border-radius:var(--radius); overflow:hidden;
    border:1px solid var(--border);
    transition:border-color 0.3s ease, box-shadow 0.3s ease; background:var(--bg-2);
}
.screenshot-card::before {
    content:''; position:absolute; inset:0;
    background:linear-gradient(to top,rgba(0,0,0,0.85) 0%,transparent 55%);
    opacity:0.5; transition:opacity 0.3s ease; z-index:1;
}
.screenshot-card:hover { border-color:var(--border-gold); box-shadow:0 6px 20px rgba(200,146,42,0.18); }
.screenshot-card:hover::before { opacity:0.7; }
.screenshot-img { width:100%; height:260px; object-fit:cover; display:block; }

/* ── Image Modal ── */
.image-modal {
    display:flex; position:fixed; inset:0; z-index:99999;
    background:rgba(0,0,0,0); justify-content:center; align-items:center;
    pointer-events:none; transition:background 0.3s ease;
}
.image-modal.show { background:rgba(0,0,0,0.92); pointer-events:all; }
.image-modal .close-modal { position:fixed; top:18px; right:28px; font-size:42px; color:#fff; cursor:pointer; line-height:1; z-index:100000; }
.image-modal .close-modal:hover { color:#C8922A; }
.image-modal .modal-nav {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    width: 54px;
    height: 54px;
    border: 1px solid rgba(200,146,42,0.3);
    border-radius: 50%;
    background: rgba(10,10,10,0.72);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100000;
    opacity: 0;
    pointer-events: none;
    transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.image-modal.show .modal-nav {
    opacity: 1;
    pointer-events: auto;
}
.image-modal .modal-nav:hover {
    background: rgba(200,146,42,0.2);
    border-color: rgba(200,146,42,0.65);
    transform: translateY(-50%) scale(1.05);
}
.image-modal .modal-nav-prev { left: 24px; }
.image-modal .modal-nav-next { right: 24px; }
.modal-image { max-width:90vw; max-height:88vh; border-radius:10px; border:2px solid #C8922A; box-shadow:0 0 60px rgba(0,0,0,0.8); opacity:0; transform:scale(0.88); transition:opacity 0.3s ease, transform 0.3s ease; }
.image-modal.show .modal-image { opacity:1; transform:scale(1); }
.close-modal { position:absolute; top:-44px; right:0; color:#fff; font-size:2.2rem; cursor:pointer; transition:color 0.3s ease; }
.close-modal:hover { color:var(--gold); }

/* ══════════════════════════════════
   STATS SECTION
══════════════════════════════════ */
.stats-section {
    margin-top:5rem;
    background:var(--bg-2); border:1px solid var(--border);
    border-radius:var(--radius-xl); padding:4.5rem 2rem; text-align:center;
    position:relative; overflow:hidden;
}
.stats-section::before {
    content:''; position:absolute; top:0; left:0; right:0; height:2px;
    background:linear-gradient(90deg,transparent,var(--gold),transparent);
}
.stats-title { font-family:'Outfit',sans-serif; font-size:2.2rem; font-weight:900; color:#fff; margin-bottom:3.5rem; }
.stats-title .highlight { color:var(--gold); }
.stats-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:2rem; max-width:1000px; margin:0 auto; }
.stat-item {
    padding:2.2rem; background:rgba(255,255,255,0.025);
    border:1px solid var(--border); border-radius:var(--radius);
    transition:all var(--transition);
}
.stat-item:hover { border-color:var(--border-gold); background:rgba(200,146,42,0.06); transform:translateY(-5px); box-shadow:0 12px 35px rgba(0,0,0,0.4); }
.stat-number { font-family:'Outfit',sans-serif; font-size:3.2rem; font-weight:900; color:var(--gold); line-height:1; margin-bottom:0.5rem; text-shadow:0 0 18px rgba(200,146,42,0.3); }
.stat-label  { color:var(--text-muted); font-size:0.85rem; font-weight:600; text-transform:uppercase; letter-spacing:1.2px; }

/* ══════════════════════════════════
   RULES / ACCORDIONS
══════════════════════════════════ */
.rules-dropdown-container { margin-top:3rem; }
.rule-dropdown {
    background:var(--bg-2); border:1px solid var(--border);
    border-radius:var(--radius); margin-bottom:0.9rem;
    /* NO overflow:hidden here — it would clip the animated rule-content */
    transition:border-color var(--transition), box-shadow var(--transition);
}
.rule-dropdown:hover { border-color:rgba(200,146,42,0.28); }
.rule-header {
    padding:1.2rem 1.5rem; display:flex; justify-content:space-between;
    align-items:center; cursor:pointer; background:rgba(255,255,255,0.022);
    font-weight:700; color:#fff; font-size:1.05rem;
    transition:background var(--transition);
    border-radius:var(--radius);
    user-select:none;
}
.rule-header:hover { background:rgba(200,146,42,0.1); }
.rule-header h2, .rule-header .rule-title { pointer-events:none; }
/* Arrow icon inside header */
.rule-header .arrow,
.rule-header i.arrow {
    color:var(--gold);
    transition:transform 0.35s ease;
    flex-shrink:0;
}
.rule-dropdown.active .rule-header .arrow,
.rule-dropdown.active .rule-header i.arrow { transform:rotate(180deg); }
/* Content panel */
.rule-content {
    padding: 0 1.5rem;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.45s ease, padding 0.35s ease;
    background: var(--bg);
    color: var(--text-light);
    line-height: 1.7;
    border-radius: 0 0 var(--radius) var(--radius);
}
.rule-dropdown.active .rule-content {
    padding: 1.5rem;
    max-height: 4000px;
    border-top: 1px solid var(--border);
}
.rule-content ul { padding-left:1.5rem; margin-top:1rem; }
.rule-content li { margin-bottom:0.6rem; }
.rule-content h3 { color:#fff; margin-bottom:0.5rem; margin-top:1.2rem; font-size:1rem; }
.rule-content p  { color:var(--text-light); font-size:0.93rem; line-height:1.75; }

/* ── Ceza Listesi Categories ── */
.rule-category { background:var(--bg-2); border:1px solid var(--border); border-radius:var(--radius); margin-bottom:0.9rem; overflow:hidden; transition:all var(--transition); }
.rule-category:hover { border-color:rgba(200,146,42,0.28); }
.category-header { padding:1.2rem 1.5rem; display:flex; justify-content:space-between; align-items:center; cursor:pointer; background:rgba(255,255,255,0.022); font-weight:700; color:#fff; font-size:1.05rem; transition:background var(--transition); }
.category-header:hover { background:rgba(200,146,42,0.08); }
.category-header h2 { font-size:1.05rem; display:flex; align-items:center; gap:0.5rem; margin:0; }
.category-header h2 i { color:var(--gold); }
.toggle-icon { color:var(--gold); transition:transform var(--transition); }
.rule-category.active .toggle-icon { transform:rotate(180deg); }
.category-content { padding:0; max-height:0; overflow:hidden; transition:max-height 0.42s ease, padding 0.42s ease; background:var(--bg); color:var(--text-light); line-height:1.65; }
.rule-category.active .category-content { padding:1.5rem; max-height:3000px; border-top:1px solid var(--border); }
.rule-list { list-style:none; padding:0; margin:0; }
.rule-list .rule-item { display:flex; align-items:center; padding:0.75rem 0; border-bottom:1px solid rgba(255,255,255,0.05); gap:0.75rem; }
.rule-list .rule-item i { color:var(--gold); }
.rule-text { flex:1; }
.rule-penalty { font-weight:700; color:#fff; background:rgba(255,255,255,0.06); padding:0.2rem 0.65rem; border-radius:6px; font-size:0.83rem; }
.perma-ban { background:rgba(200,146,42,0.2); color:var(--gold); border:1px solid rgba(200,146,42,0.4); }

/* ══════════════════════════════════
   CONTACT PAGE
══════════════════════════════════ */
.contact-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:2rem; margin-top:3rem; }
.contact-card {
    background:var(--bg-2); border:1px solid var(--border);
    border-radius:var(--radius-lg); padding:3rem 2rem; text-align:center;
    transition:all var(--transition); display:flex; flex-direction:column; align-items:center;
    position:relative; overflow:hidden;
}
.contact-card::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,transparent,var(--gold),transparent); opacity:0; transition:opacity var(--transition); }
.contact-card:hover { border-color:var(--border-gold); transform:translateY(-6px); box-shadow:0 18px 45px rgba(200,146,42,0.14); }
.contact-card:hover::before { opacity:1; }
.contact-icon { width:72px; height:72px; border-radius:50%; background:linear-gradient(135deg,var(--gold),var(--gold-dark)); color:#fff; font-size:1.9rem; display:flex; align-items:center; justify-content:center; margin-bottom:1.5rem; box-shadow:0 6px 24px rgba(200,146,42,0.35); }
.contact-card h3 { color:#fff; font-family:'Outfit',sans-serif; font-size:1.3rem; margin-bottom:0.5rem; font-weight:800; }
.contact-card p { color:var(--text-muted); margin-bottom:1.5rem; font-size:0.93rem; }
.contact-card .btn { width:100%; justify-content:center; }
.contact-title { font-family:'Outfit',sans-serif; font-size:1.5rem; font-weight:800; color:#fff; margin-bottom:1rem; }
.contact-description { color:var(--text-light); font-size:1rem; line-height:1.65; margin-bottom:2rem; }
.contact-info { list-style:none; padding:1.5rem; margin:0 0 2rem 0; width:100%; text-align:left; background:rgba(255,255,255,0.03); border-radius:var(--radius); border:1px solid var(--border); }
.contact-info li { display:flex; align-items:center; gap:1rem; padding:0.7rem 0; border-bottom:1px solid var(--border); color:#fff; font-weight:500; }
.contact-info li:last-child { border-bottom:none; }
.contact-info li i { color:var(--gold); font-size:1.1rem; width:22px; text-align:center; }

/* ══════════════════════════════════
   BORSA PAGE / BUSINESS GRID
══════════════════════════════════ */
.business-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:2rem; margin-bottom:4rem; }
.business-card {
    background:var(--bg-2); border:1px solid var(--border);
    border-radius:var(--radius-lg); padding:2rem;
    transition:all 0.4s ease; position:relative; overflow:hidden;
}
.business-card::before {
    content:''; position:absolute; top:-60px; right:-60px;
    width:120px; height:120px; background:var(--gold);
    filter:blur(90px); opacity:0; transition:opacity 0.4s ease;
}
.business-card:hover { transform:translateY(-6px); border-color:var(--border-gold); box-shadow:0 16px 50px rgba(0,0,0,0.5); }
.business-card:hover::before { opacity:0.18; }
.business-title { font-family:'Outfit',sans-serif; font-size:1.2rem; font-weight:800; color:#fff; margin-bottom:1.5rem; display:flex; align-items:center; gap:0.75rem; border-bottom:1px solid var(--border); padding-bottom:1rem; }
.business-icon { color:var(--gold); font-size:1.5rem; }
.price-list { list-style:none; padding:0; margin:0; }
.price-item { display:flex; justify-content:space-between; align-items:center; padding:0.7rem 0; border-bottom:1px dashed rgba(255,255,255,0.07); transition:all 0.28s ease; }
.price-item:last-child { border-bottom:none; }
.price-item:hover { transform:translateX(5px); }
.price-name  { color:var(--text-light); font-weight:500; font-size:0.92rem; }
.price-value, .price-range {
    color:#fff; font-weight:700;
    background:rgba(200,146,42,0.14); padding:0.22rem 0.7rem;
    border-radius:8px; border:1px solid rgba(200,146,42,0.28); font-size:0.88rem;
}
.pawnshop-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1.25rem; }
.pawnshop-card { padding:1.25rem; }
.pawnshop-card .business-title { margin-bottom:1rem; padding-bottom:0.75rem; font-size:1rem; }
.pawnshop-card .price-item { padding:0.5rem 0; }
.pawnshop-card .price-name { font-size:0.84rem; }
.pawnshop-card .price-value { font-size:0.8rem; }
.pawnshop-card .pawnshop-note { color:#cccccc; line-height:1.55; margin-bottom:0.75rem; font-size:0.9rem; }
.pawnshop-house-columns { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.pawnshop-house-columns .price-list { background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.06); border-radius:12px; padding:0 0.9rem; }
.pawnshop-card--wide { grid-column:span 2; }

@media (max-width: 640px) {
    .pawnshop-house-columns { grid-template-columns:1fr; }
    .pawnshop-card--wide { grid-column:auto; }
}

/* ══════════════════════════════════
   TABLES (Vehicles, Borsa, Ceza)
══════════════════════════════════ */
.section-container {
    background:var(--bg-2); border:1px solid var(--border);
    border-radius:var(--radius-lg); padding:2.2rem; margin-bottom:3rem;
    box-shadow:0 12px 45px rgba(0,0,0,0.45); transition:all var(--transition);
    position:relative; overflow:hidden;
}
.section-container::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,transparent,var(--gold),transparent); }
.section-container:hover { transform:translateY(-3px); border-color:var(--border-gold); }
.section-container .section-title { font-family:'Outfit',sans-serif; font-size:1.4rem; font-weight:800; color:#fff; margin-bottom:1.5rem; border-bottom:1px solid var(--border); padding-bottom:1rem; display:flex; align-items:center; gap:10px; }
.section-container .section-title i { color:var(--gold); }

.price-table, .table { width:100%; border-collapse:separate; border-spacing:0 0.45rem; }
.price-table th, .table th { background:rgba(255,255,255,0.03); color:var(--text-muted); padding:0.9rem 1.4rem; text-align:left; font-weight:600; text-transform:uppercase; font-size:0.8rem; letter-spacing:1.2px; }
.price-table th:first-child, .table th:first-child { border-radius:10px 0 0 10px; }
.price-table th:last-child,  .table th:last-child  { border-radius:0 10px 10px 0; }
.price-table td, .table td { padding:0.9rem 1.4rem; background:rgba(255,255,255,0.018); border-top:1px solid transparent; border-bottom:1px solid transparent; transition:all 0.28s ease; }
.price-table td:first-child, .table td:first-child { border-radius:10px 0 0 10px; border-left:1px solid transparent; font-weight:600; color:#fff; }
.price-table td:last-child,  .table td:last-child  { border-radius:0 10px 10px 0; border-right:1px solid transparent; color:var(--gold); font-weight:700; text-align:right; }
.price-table tr:hover td, .table tr:hover td { background:rgba(200,146,42,0.08); border-color:rgba(200,146,42,0.2); transform:scale(1.008); box-shadow:0 6px 18px rgba(0,0,0,0.22); cursor:pointer; }

/* ══════════════════════════════════
   CALCULATOR SECTION (borsahesap)
══════════════════════════════════ */
.calculator-section {
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.09);
    border-radius:var(--radius-lg); padding:3rem; margin-bottom:3rem;
    backdrop-filter:blur(10px); transition:all 0.3s ease;
    animation:fade-in-up 1s ease-out 0.5s both;
}
.calculator-section:hover { background:rgba(255,255,255,0.065); border-color:var(--border-gold); box-shadow:0 12px 35px rgba(200,146,42,0.1); }

.form-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:2rem; margin-bottom:2rem; }
.form-group { background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.09); border-radius:var(--radius); padding:2rem; transition:all 0.3s ease; }
.form-group:hover { background:rgba(255,255,255,0.07); border-color:var(--border-gold); }
.form-label { font-size:1.1rem; font-weight:600; color:#fff; margin-bottom:1rem; display:flex; align-items:center; gap:0.75rem; }
.form-icon  { color:var(--gold); font-size:1.05rem; }
.form-select, .form-input {
    width:100%; padding:1rem 1.4rem; font-size:0.97rem;
    border:2px solid rgba(255,255,255,0.09); border-radius:var(--radius);
    background:rgba(0,0,0,0.35); color:#fff;
    font-family:'Inter',sans-serif; font-weight:500; transition:all 0.3s ease;
}
.form-select:focus, .form-input:focus { outline:none; border-color:var(--gold); box-shadow:0 0 22px rgba(200,146,42,0.28); background:rgba(0,0,0,0.55); }
.form-select option { background:#1a1a1a; color:#fff; }

.calculate-btn {
    width:100%; padding:1.2rem 2rem; font-size:1.05rem; font-weight:700; font-family:'Outfit',sans-serif;
    border:none; border-radius:var(--radius); cursor:pointer; transition:all 0.3s ease;
    text-transform:uppercase; letter-spacing:1px;
    position:relative; overflow:hidden;
    background:linear-gradient(135deg,var(--gold),var(--gold-dark)); color:#fff;
    box-shadow:0 8px 28px rgba(200,146,42,0.32); margin-top:2rem;
}
.calculate-btn::before {
    content:''; position:absolute; top:0; left:-100%;
    width:100%; height:100%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,0.2),transparent);
    transition:left 0.5s;
}
.calculate-btn:hover::before { left:100%; }
.calculate-btn:hover { background:linear-gradient(135deg,var(--gold-dark),var(--gold-darker)); transform:translateY(-3px); box-shadow:0 16px 44px rgba(200,146,42,0.5); }

/* Results */
.results-section { background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.09); border-radius:var(--radius-lg); padding:3rem; margin-top:3rem; backdrop-filter:blur(10px); display:none; animation:fade-in-up 0.5s ease-out; }
.results-section.show { display:block; }
.results-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:2rem; }
.result-card { background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.09); border-radius:var(--radius); padding:2rem; text-align:center; transition:all 0.3s ease; position:relative; overflow:hidden; }
.result-card::before { content:''; position:absolute; left:0; top:0; bottom:0; width:4px; border-radius:0 2px 2px 0; }
.result-card.buyer::before   { background:linear-gradient(45deg,#27ae60,#229954); }
.result-card.customer::before { background:linear-gradient(45deg,#f39c12,#e67e22); }
.result-card.profit::before  { background:linear-gradient(45deg,var(--gold),var(--gold-dark)); }
.result-card.clean-money::before { background:linear-gradient(45deg,#3498db,#2980b9); }
.result-card.commission::before  { background:linear-gradient(45deg,#9b59b6,#8e44ad); }
.result-card:hover { background:rgba(255,255,255,0.08); border-color:var(--border-gold); transform:translateY(-5px); box-shadow:0 12px 32px rgba(200,146,42,0.14); }
.result-title { font-size:1rem; font-weight:600; color:#ccc; margin-bottom:1rem; display:flex; align-items:center; justify-content:center; gap:0.75rem; }
.result-value { font-family:'Outfit',sans-serif; font-size:2rem; font-weight:900; margin-bottom:0.5rem; }
.result-value.buyer       { color:#27ae60; }
.result-value.customer    { color:#f39c12; }
.result-value.profit      { color:var(--gold); }
.result-value.clean-money { color:#3498db; }
.result-value.commission  { color:#9b59b6; }
.result-description { color:#888; font-size:0.87rem; line-height:1.45; }
.summary-card { background:rgba(200,146,42,0.08); border:1.5px solid rgba(200,146,42,0.28); border-radius:var(--radius); padding:2rem; margin-top:2rem; text-align:center; }
.summary-title { font-family:'Outfit',sans-serif; font-size:1.4rem; font-weight:700; color:var(--gold); margin-bottom:1rem; text-transform:uppercase; }
.summary-text { color:#fff; line-height:1.65; font-size:0.97rem; }

/* Important Disclaimer */
.important-disclaimer { background:rgba(200,146,42,0.06); border:1px solid rgba(200,146,42,0.22); border-radius:var(--radius-lg); padding:3rem; margin-top:3rem; text-align:center; }
.disclaimer-icon { font-size:3.5rem; color:var(--gold); margin-bottom:1.2rem; }
.disclaimer-title { font-family:'Outfit',sans-serif; font-size:1.8rem; font-weight:900; color:var(--gold); margin-bottom:1.5rem; text-transform:uppercase; }
.disclaimer-text { color:var(--text-light); line-height:1.75; max-width:800px; margin:0 auto; font-size:0.95rem; }

/* ══════════════════════════════════
   VEHICLES PAGE
══════════════════════════════════ */
.vehicles-hero { background:var(--bg-2); border:1px solid var(--border); border-radius:var(--radius-lg); padding:3rem; margin-bottom:3rem; text-align:center; position:relative; overflow:hidden; }
.vehicles-hero::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,transparent,var(--gold),transparent); }

/* Calculation Example */
.calculation-example { background:rgba(255,255,255,0.03); padding:1.4rem; border-radius:var(--radius); margin-top:1.4rem; border-left:3px solid #2ecc71; }
.calculation-title { font-weight:700; color:#fff; margin-bottom:0.5rem; font-size:0.95rem; }
.calculation-steps { color:var(--text-muted); font-size:0.88rem; line-height:1.6; }

/* ══════════════════════════════════
   SERVER INFO (Contact)
══════════════════════════════════ */
.server-info { background:var(--bg-2); border:1px solid var(--border); border-radius:var(--radius-lg); padding:2rem 2.5rem; text-align:center; margin-top:3rem; position:relative; overflow:hidden; }
.server-info::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,transparent,var(--gold),transparent); }
.server-title { font-family:'Outfit',sans-serif; font-size:1.4rem; font-weight:900; color:#fff; margin-bottom:0.75rem; }
.server-info > p { color:#aaa !important; margin-bottom:1.25rem !important; font-size:0.9rem !important; }
.server-details { display:flex; flex-wrap:wrap; justify-content:center; gap:1rem; }
.server-detail { background:rgba(255,255,255,0.04); border:1px solid var(--border); border-radius:10px; padding:1rem 1.5rem; min-width:140px; flex:1; max-width:200px; }
.server-detail-icon { font-size:1.3rem; color:var(--gold); margin-bottom:0.4rem; }
.server-detail-title { font-size:0.75rem; color:#888; text-transform:uppercase; letter-spacing:0.05em; margin-bottom:0.3rem; }
.server-detail-value { font-size:0.95rem; font-weight:700; color:#fff; }

/* Contact Button */
.contact-button {
    display:inline-flex; align-items:center; justify-content:center; gap:0.75rem;
    width:100%; padding:1rem; border-radius:var(--radius);
    background:linear-gradient(135deg,var(--gold),var(--gold-dark));
    color:#fff; text-decoration:none; font-weight:700; font-size:1.02rem;
    transition:all 0.3s ease; box-shadow:0 6px 22px rgba(200,146,42,0.3);
    position:relative; overflow:hidden;
}
.contact-button:hover { transform:translateY(-3px); box-shadow:0 12px 32px rgba(200,146,42,0.5); color:#fff; }
.contact-button::after { content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:linear-gradient(120deg,transparent,rgba(255,255,255,0.18),transparent); background-size:200% 100%; animation:shimmer 3s infinite linear; pointer-events:none; }

/* ══════════════════════════════════
   RESPONSIVE
══════════════════════════════════ */
@media (max-width:1024px) {
    .carousel-slide { flex:0 0 calc(50% - 1.5rem); }
    .form-grid, .results-grid { grid-template-columns:1fr; }
}
@media (max-width:768px) {
    .carousel-slide { flex:0 0 100%; }
    .stats-grid { grid-template-columns:1fr 1fr; }
    .calculator-section, .results-section { padding:2rem; }
    .form-group { padding:1.5rem; }
}
@media (max-width:480px) {
    .stats-grid { grid-template-columns:1fr; }
    .result-value { font-size:1.6rem; }
}