/* ----------------------------------- */
/* 1. GENEL KAPSAYICI VE DÜZEN         */
/* ----------------------------------- */
.gb-calculator-container { 
    max-width: 800px; 
    margin: 20px auto; 
    background-color: #f5f5f5; 
    padding: 30px; 
    border-radius: 15px; 
    border: 2px solid #222222; 
    font-family: inherit;
}

.gb-step-section { 
    background-color: #ffffff; 
    padding: 20px; 
    border-radius: 10px; 
    border: 1px solid #ddd; 
    margin-bottom: 20px; 
}

/* Yeni Eklenen 2'li Izgara Yapısı */
.gb-grid-2 { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 15px; 
}

/* ----------------------------------- */
/* 2. FORM ELEMANLARI VE METİNLER      */
/* ----------------------------------- */
.gb-input { 
    width: 100%; 
    padding: 12px; 
    border: 2px solid #222222; 
    border-radius: 8px; 
    margin-bottom: 15px; 
    box-sizing: border-box; 
}

.gb-input:focus {
    outline: none;
    border-color: #ff6b00;
}

.gb-label {
    display: block;
    font-weight: bold;
    margin-bottom: 8px;
    color: #333333;
}

.gb-step-title {
    margin-top: 0;
    color: #222222;
    font-size: 1.2rem;
    border-bottom: 2px solid #ff6b00;
    padding-bottom: 10px;
    margin-bottom: 15px;
}

.gb-info-text { 
    font-size: 0.85rem; 
    color: #666666; 
    margin-top: -10px; 
    margin-bottom: 15px; 
}

/* ----------------------------------- */
/* 3. SEYAHAT STİLİ KARTLARI           */
/* ----------------------------------- */
.gb-style-cards { 
    display: grid; 
    grid-template-columns: repeat(3, 1fr); 
    gap: 15px; 
}

.gb-card { 
    background-color: #f9f9f9; 
    border: 2px solid #222222; 
    border-radius: 12px; 
    padding: 15px; 
    text-align: center; 
    cursor: pointer; 
    transition: all 0.3s ease;
}

.gb-card:hover {
    transform: translateY(-3px);
}

.gb-card.active { 
    border-color: #ff6b00; 
    background-color: #fffaf5; 
}

.gb-emoji {
    font-size: 2.5rem;
    margin-bottom: 10px;
}

/* ----------------------------------- */
/* 4. BUTONLAR VE SONUÇ EKRANI         */
/* ----------------------------------- */
.gb-btn { 
    width: 100%; 
    background-color: #ff6b00; 
    color: #ffffff; 
    border: none; 
    padding: 15px; 
    font-weight: bold; 
    font-size: 1.1rem; 
    border-radius: 10px; 
    cursor: pointer; 
    transition: background 0.3s ease;
}

.gb-btn:hover {
    background-color: #e65c00;
}

.gb-result-box { 
    margin-top: 25px; 
    background-color: #222222; 
    color: #ffffff; 
    padding: 25px; 
    border-radius: 12px; 
}

.gb-result-item { 
    display: flex; 
    justify-content: space-between; 
    border-bottom: 1px dashed #555555; 
    padding: 8px 0; 
}

.gb-result-total { 
    display: flex; 
    flex-direction: column; 
    text-align: right; 
    margin-top: 20px; 
    border-top: 2px solid #ff6b00; 
    padding-top: 15px;
}

.gb-total-try { 
    font-size: 1.8rem; 
    color: #ff6b00; 
    font-weight: bold; 
}

.gb-total-currency { 
    font-size: 1.1rem; 
    color: #aaaaaa; 
    margin-top: 5px; 
}

/* ----------------------------------- */
/* 5. MOBİL UYUMLULUK                  */
/* ----------------------------------- */
@media (max-width: 768px) {
    .gb-grid-2, 
    .gb-style-cards { 
        grid-template-columns: 1fr; /* Telefonda her şeyi alt alta dizer */
    }
}