*{box-sizing:border-box}body{margin:0;font-family:Arial,Helvetica,sans-serif;background:#f4f6f8;color:#1f2937}.wrap{min-height:70vh;display:flex;align-items:center;justify-content:center;padding:24px}.card{width:100%;max-width:395px;border-radius:18px;box-shadow:0 12px 40px rgba(0,0,0,.08);padding:30px}.brand{display:inline-block;background:#e30613;color:white;padding:8px 14px;border-radius:999px;font-weight:bold}h1{margin:18px 0 8px}.muted{color:#6b7280}.pay-form{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:22px}.pay-form label{font-size:14px;font-weight:bold}.pay-form input{width:100%;margin-top:7px;padding:12px;border:1px solid #d1d5db;border-radius:10px;font-size:15px}.pay-form button{grid-column:1/-1;padding:14px;border:0;border-radius:12px;background:#e30613;color:white;font-size:17px;font-weight:bold;cursor:pointer}.pay-form button{
    display:block;
    width:180px;      /* istediğin genişlik */
    margin:25px auto 0 auto;
}.test-cards{margin:20px 0;padding:14px;border:1px dashed #cbd5e1;border-radius:12px;background:#f8fafc;display:flex;flex-wrap:wrap;gap:10px}.logos{
    margin-top:25px;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
}.bank,.scheme{border:1px solid #d1d5db;background:white;border-radius:10px;padding:9px 12px;font-weight:bold}.visa{color:#174ea6}.troy{color:#008c95}.mc{display:flex;gap:6px;align-items:center}.mc i,.mc b{width:18px;height:18px;border-radius:50%;display:inline-block;background:#e74c3c}.mc b{background:#f1c40f;margin-left:-12px;opacity:.88}pre{background:#111827;color:#e5e7eb;padding:16px;border-radius:12px;overflow:auto}.error{border-left:6px solid #e30613}@media(max-width:640px)

.header-mobile {display:none;}
.header { position: fixed; top: 0; left: 0; width: 100vw; height: 6vw; display: flex; align-items: center; justify-content: center; z-index: 999;font-family:Barlow, 'Sans-Serif'; }
.nav-surface {position: absolute;top: 0;left: 0;width: 100vw;height: 10vw;z-index: -1;opacity: 1;transition: opacity 0.4s ease;fill: #fff;color: #fff;}
.nav-surface.scrolled { opacity: 1; }
.main-bg { fill: #4a5871; }
.header-content {display: flex;justify-content: space-between;align-items: center;width: 100%;box-sizing: border-box;height: 100%;position: relative;z-index: 1;padding: 0 3vw;}
.logo-img { height: 4vw; object-fit: contain; }
.nav-menu ul {display: flex;list-style: none;gap: 2vw;}
.nav-menu a { text-decoration: none; color: #0f172a; font-size: 0.8vw; font-weight: 600; position: relative; padding-bottom: 0.5vw; transition: color 0.3s; letter-spacing: 0.05vw; }
.nav-menu a::after {content: '';position: absolute;bottom: 0;left: 0;width: 0;height: 0.15vw;background-color: #1b4b6d;transition: width 0.4s ease-in-out;}
.nav-menu a:hover::after, .nav-menu a.active::after { width: 100%; }
.header-right { display: flex; align-items: center; gap: 0.8vw; }
.contact-btn {display: flex;align-items: center;justify-content: center;border: 0.1vw solid rgb(0 0 0 / 70%);border-radius: 0.4vw;color: #000000;text-decoration: none;font-size: 0.85vw;padding: 0.5vw 1vw;font-weight: 500;transition: all 0.3s ease;}
.contact-btn:hover, .beyhouse-box:hover { background-color: #1b4b6d; border-color: white; }
.contact-btn.icon-only { padding: 0.5vw 0.8vw; font-size: 1vw; }
.contact-btn .icon { margin-right: 0.4vw; font-size: 0.9vw; }
.beyhouse-box {display: flex;flex-direction: column;align-items: center;justify-content: center;border: 0.1vw solid rgb(0 0 0 / 70%);border-radius: 0.4vw;color: #000000;padding: 0.3vw 1.2vw;cursor: pointer;transition: all 0.3s ease;}
.beyhouse-logo { font-size: 1.1vw; font-weight: 800; display: flex; align-items: center; gap: 0.2vw; }
.orange-text { color: #e67e22; }
.beyhouse-sub { font-size: 0.55vw; font-weight: 400; margin-top: 0.1vw; opacity: 0.9; }
.beyhouse-logo img {width: 6.1vw;height: 2vw;object-fit: contain;}

a.online {transition:All 0.2s ease;display: flex;align-items: center;justify-content: center;border: 0.1vw solid rgba(255, 255, 255, 0.7);border-radius: 0.4vw;color: white;text-decoration: none;font-size: 0.85vw;padding: 0.5vw 1vw;font-weight: 500;transition: all 0.3s ease;background: #dc3232;}
a.online:hover {background:#1b4b6d;}
.headerContent .beyhouse-box {border: 0.1vw solid #0f172a;color: #0f172a;}

@media only screen and  (max-width:481px){
.header {display:none;}	
.header-mobile { display: flex; position: fixed; top: 0; left: 0; width: 100vw; z-index: 999; flex-direction: column; }
.nav-surface-mobile {position: absolute;top: 0;left: 0;width: 100vw;height: 25vw;z-index: -1;opacity: 1;}
.fill-mobile { fill: #fff; }
.mobile-top-bar {display: flex;justify-content: space-between;align-items: center;width: 100vw;padding: 1vw 6vw;box-sizing: border-box;}
.mobile-logo-img { height: 12vw; object-fit: contain; }
.hamburger-btn {font-size: 8vw;color: #1b4b6d;cursor: pointer;display: flex;align-items: center;justify-content: center;}
.mobile-menu-overlay {position: fixed;top: 0;right: -100vw;width: 100vw;height: 100vh;background-color: #ffffff;z-index: 1000;display: flex;flex-direction: column;padding: 10vw 8vw;box-sizing: border-box;transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);box-shadow: -2vw 0 5vw rgb(0 0 0 / 7%);overflow-y: auto;}
.mobile-menu-overlay.open { right: 0; }
.mobile-menu-close {align-self: flex-end;font-size: 10vw;color: #000000;cursor: pointer;margin-bottom: 8vw;transition: transform 0.3s ease;}
.mobile-menu-close:hover { transform: scale(1.1) rotate(90deg); color: #e74c3c; }
.mobile-nav-menu ul {list-style: none;display: flex;flex-direction: column;gap: 6vw;padding: 0;margin: 0 0 0vw 0;}
.mobile-nav-menu a {text-decoration: none;color: #000000;font-size: 3.5vw;font-weight: 600;letter-spacing: 0.2vw;border-bottom: 0.2vw solid #00000000;padding-bottom: 1vw;transition: all 0.3s ease;}
.mobile-nav-menu a.active, .mobile-nav-menu a:hover {color: #174261;border-bottom-color: #174261;}
.mobile-header-right { display: flex; flex-direction: column; gap: 5vw; border-top: 0.1vw solid rgba(255,255,255,0.1); padding-top: 8vw; }
.mobile-online {display: flex;align-items: center;justify-content: center;background-color: #dc3232;color: #ffffff;text-decoration: none;padding: 2.5vw;border-radius: 2vw;font-size: 3.5vw;font-weight: 600;gap: 2vw;transition: background-color 0.3s;}
.mobile-online:active { background-color: #cf6d18; }
.mobile-contact-btn {display: flex;align-items: center;color: #000000;text-decoration: none;font-size: 3.5vw;gap: 3vw;opacity: 0.9;}
.mobile-contact-btn .icon {font-size: 5.5vw;color: #143b57;width: 6vw;text-align: center;}
.mobile-beyhouse-box {display: flex;flex-direction: column;align-items: flex-start;margin-top: 2vw;padding: 4vw;background-color: rgb(255 255 255 / 5%);border-radius: 2vw;border: 0.1vw solid rgb(0 0 0 / 37%);}
.mobile-beyhouse-logo img { height: 8vw; object-fit: contain; }
.mobile-beyhouse-sub {font-size: 3.2vw;color: #000000;margin-top: 1vw;font-weight: 500;}
}


.footer { width: 100vw; display: flex; flex-direction: column; background-color: #1a1a1a; box-sizing: border-box; }
.footer-ust {display: flex;width: 100vw;height: 28vw;}
.footer-harita { width: 50vw; height: 100%; background-color: #e5e5e5; }
.footer-harita iframe { width: 100%; height: 100%; border: none; }
.footer-icerik {width: 50vw;height: 100%;padding: 2vw 4vw;display: flex;justify-content: flex-start;gap: 5vw;box-sizing: border-box;background-color: #1f1f1f;}
.footer-sutun {display: flex;flex-direction: column;gap: 0.5vw;}
.footer-baslik {font-size: 1.4vw;font-weight: 400;letter-spacing: 0.05vw;color: #fdfdfd;}
.footer-linkler {list-style: none;display: flex;flex-direction: column;gap: .5vw;padding: 0;margin: 0;}
.footer-linkler a {color: #a0a0a0;text-decoration: none;font-size: .9vw;transition: color 0.3s ease;}
.footer-linkler a:hover { color: #ffffff; }
.footer-metin { color: #d0d0d0; font-size: 1.1vw; line-height: 1.8vw; font-weight: 300; }
.mt-1 { margin-top: 1vw; }
.footer-mail { color: #a0a0a0; font-size: 0.75vw;text-decoration: none; border-bottom: 0.05vw solid #444; padding-bottom: 0.2vw; width: max-content; margin-top: 0.5vw; transition: all 0.3s ease; }
.footer-mail:hover { color: #ffffff; border-color: #ffffff; }
.footer-sosyal {display: flex;gap: 1vw;margin-top: 1vw;}
.footer-sosyal a {color: #a0a0a0;width: 1.5vw;height: 1.5vw;display: flex;align-items: center;justify-content: center;transition: color 0.3s ease;}
.footer-sosyal a:hover { color: #ffffff; }
.footer-sosyal svg { width: 100%; height: 100%; fill: currentColor; }
.footer-alt { width: 100vw; height: 5vw; background-color: #151515; display: flex; align-items: center; justify-content: center; position: relative; box-sizing: border-box; border-top: 0.05vw solid #252525; }
.footer-telif { display: flex; align-items: center; gap: 0.6vw; font-size: 0.65vw; color: #666666; letter-spacing: 0.05vw; }
.footer-telif img { height: 1.2vw; object-fit: contain; opacity: 0.8; transition: opacity 0.3s ease; cursor: pointer; }
.footer-telif img:hover { opacity: 1; }
.ssl-3d {width:20vw; object-fit:cover;}


@media only screen and  (max-width:481px){
    
    .footer .footer-harita {display:none;}
.footer-icerik {width: 100%;height: 100%;padding: 7vw 15vw;display: flex;justify-content: flex-start;gap: 10vw;box-sizing: border-box;background-color: #1f1f1f;flex-direction: column;}
.footer-ust {display: flex;width: 100vw;height: auto;}
.footer-baslik {font-size: 3.4vw;font-weight: 400;letter-spacing: 0.05vw;color: #fdfdfd;}
.footer-linkler a {color: #a0a0a0;text-decoration: none;font-size: 3vw;transition: color 0.3s ease;}
.footer-metin {color: #d0d0d0;font-size: 3.1vw;line-height: 4.8vw;font-weight: 300;}
.footer-mail {color: #a0a0a0;font-size: 3vw;text-decoration: none;border-bottom: 0.05vw solid #444;padding-bottom: 0.2vw;width: max-content;margin-top: 0.5vw;transition: all 0.3s ease;}
.footer-sosyal a {color: #a0a0a0;width: 4.5vw;height: 4.5vw;display: flex;align-items: center;justify-content: center;transition: color 0.3s ease;}
.ssl-3d {width: 67vw;object-fit: cover;}
.footer-telif {display: flex;align-items: center;gap: 2.6vw;font-size: 2vw;color: #666666;letter-spacing: 0.05vw;}
.footer-telif img {height: 3.2vw;object-fit: contain;opacity: 0.8;transition: opacity 0.3s ease;cursor: pointer;}
    
}


.pay-form{
    display:block !important;
}

.pay-form label{
    display:block;
    font-size:14px;
    font-weight:bold;
    margin-top:3px;
}

.pay-form input{
    width:100%;
    margin-top:7px;
    padding:12px;
    border:1px solid #d1d5db;
    border-radius:10px;
    font-size:15px;
}

.expiry-row{
    display:flex;
    gap:16px;
    margin-top:10px;
    margin-bottom:10px;
}

.expiry-row > div{
    flex:1;
}

.expiry-row input{
    width:100%;
}

@media(max-width:640px){

    .expiry-row{
        flex-direction:column;
    }

}
.payment-logos{
    margin-top:25px;

    display:grid;
    grid-template-columns:repeat(3,1fr);

    gap:20px;
    justify-items:center;
    align-items:center;
}

.payment-logos img{
    max-width:120px;
    max-height:45px;

    width:auto;
    height:auto;

    object-fit:contain;
}