/* ==========================================================================
   V-IBAN — Design System
   Kurumsal finans / fintech estetiği: bol beyaz alan, lacivert + turkuaz,
   yumuşak gölgeler, büyük border-radius, sakin geçişler.
   ========================================================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root{

    --primary:#003B8E;
    --primary-hover:#0B57C0;
    --accent:#35B6E8;

    --bg:#F7F9FC;
    --card:#FFFFFF;
    --border:#E5EAF2;

    --title:#12284C;
    --text:#4B5A70;
    --text-muted:#8996A9;

    --success:#16A34A;
    --success-tint:#EAF7EF;
    --success-border:#CFEEDA;

    --danger:#DC2626;
    --danger-tint:#FDEDED;
    --danger-border:#F6CFCF;

    --shadow-sm:0 2px 10px rgba(18,40,76,.05);
    --shadow-md:0 16px 40px rgba(18,40,76,.08);
    --shadow-lg:0 28px 70px rgba(18,40,76,.12);

    --radius-lg:26px;
    --radius-md:16px;
    --radius-sm:11px;
    --radius-full:999px;

    --ease:cubic-bezier(.4,0,.2,1);
    --transition-fast:.25s var(--ease);
    --transition:.4s var(--ease);

    --footer-bg:#12284C;

    --badge-bg:#EAF4FF;

    --nav-bg:rgba(255,255,255,.85);

}

:root[data-theme="dark"]{

    --primary:#3D8BFF;

    --primary-hover:#649BFF;

    --accent:#35B6E8;

    --bg:#0B1220;

    --card:#141B2D;

    --border:#26314A;

    --title:#EDF1FA;

    --text:#AEB9CE;

    --text-muted:#7C879E;

    --success:#4ADE80;

    --success-tint:#123424;

    --success-border:#1F5138;

    --danger:#F87171;

    --danger-tint:#3A1414;

    --danger-border:#5C2222;

    --shadow-sm:0 2px 10px rgba(0,0,0,.35);

    --shadow-md:0 16px 40px rgba(0,0,0,.45);

    --shadow-lg:0 28px 70px rgba(0,0,0,.55);

    --badge-bg:#132A4A;

    --nav-bg:rgba(11,18,32,.85);

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:'Inter','Segoe UI',sans-serif;

    background:var(--bg);

    color:var(--text);

    line-height:1.65;

    -webkit-font-smoothing:antialiased;

}

.container{

    width:1180px;

    max-width:92%;

    margin:auto;

}

h1,h2,h3{

    color:var(--title);

    font-weight:700;

    letter-spacing:-.02em;

    line-height:1.2;

}

a{

    color:inherit;

}

/* ==========================================================================
   NAVBAR
   ========================================================================== */

nav{

    width:100%;

    background:var(--nav-bg);

    backdrop-filter:blur(14px);

    -webkit-backdrop-filter:blur(14px);

    border-bottom:1px solid var(--border);

    position:sticky;

    top:0;

    z-index:999;

}

.nav{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:20px 0;

}

.logo{

    display:flex;

    align-items:center;

    gap:10px;

    text-decoration:none;

}

.logoMark{

    font-size:22px;

    font-weight:800;

    color:var(--title);

    letter-spacing:-.02em;

}

.logoMark span{

    color:var(--primary);

}

.navLinks{

    display:flex;

    list-style:none;

    gap:8px;

    align-items:center;

}

.navLinks li a{

    display:block;

    padding:10px 18px;

    border-radius:var(--radius-full);

    text-decoration:none;

    color:var(--text);

    font-size:14.5px;

    font-weight:500;

    transition:background var(--transition-fast), color var(--transition-fast);

}

.navLinks li a:hover{

    background:var(--bg);

    color:var(--primary);

}

.navLinks li:last-child a{

    background:var(--primary);

    color:#fff;

    font-weight:600;

    box-shadow:var(--shadow-sm);

}

.navLinks li:last-child a:hover{

    background:var(--primary-hover);

    color:#fff;

}

.menuToggle{

    display:none;

    flex-direction:column;

    justify-content:center;

    gap:5px;

    width:38px;

    height:38px;

    background:none;

    border:none;

    cursor:pointer;

    padding:0;

}

.menuToggle span{

    display:block;

    width:100%;

    height:2px;

    background:var(--title);

    border-radius:2px;

    transition:transform var(--transition-fast), opacity var(--transition-fast);

}

.menuToggle.active span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.menuToggle.active span:nth-child(2){ opacity:0; }
.menuToggle.active span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.themeToggle{

    margin-right:4px;

}

.themeToggle .moonIcon{

    display:none;

}

:root[data-theme="dark"] .themeToggle .sunIcon{

    display:none;

}

:root[data-theme="dark"] .themeToggle .moonIcon{

    display:block;

}

/* ==========================================================================
   HERO
   ========================================================================== */

.hero{

    padding:100px 0 60px;

    background:var(--bg);

    text-align:center;

}

.heroBadge{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:9px 20px;

    border-radius:var(--radius-full);

    background:var(--card);

    border:1px solid var(--border);

    box-shadow:var(--shadow-sm);

    color:var(--primary);

    font-size:13px;

    font-weight:600;

    margin-bottom:28px;

}

.heroBadge svg{

    width:15px;

    height:15px;

    flex-shrink:0;

}

.hero h1{

    font-size:56px;

    max-width:820px;

    margin:0 auto 22px;

}

.hero h1 .accentWord{

    color:var(--accent);

}

.heroText{

    font-size:19px;

    color:var(--text);

    max-width:600px;

    margin:0 auto;

}

.heroStats{

    display:flex;

    justify-content:center;

    gap:56px;

    margin-top:52px;

}

.heroStats div{

    display:flex;

    flex-direction:column;

    gap:4px;

}

.heroStats strong{

    font-size:28px;

    color:var(--title);

    font-weight:800;

    letter-spacing:-.02em;

}

.heroStats span{

    font-size:13px;

    color:var(--text-muted);

    font-weight:500;

}

/* ==========================================================================
   VERIFY CARD
   ========================================================================== */

.verifySection{

    padding:0 0 90px;

}

.verifyCard{

    background:var(--card);

    border-radius:var(--radius-lg);

    box-shadow:var(--shadow-lg);

    border:1px solid var(--border);

    padding:48px;

    max-width:640px;

    margin:0 auto;

}

.cardLabel{

    font-size:13px;

    font-weight:700;

    color:var(--text-muted);

    text-transform:uppercase;

    letter-spacing:.06em;

    margin-bottom:14px;

}

.inputWrapper{

    position:relative;

}

.inputWrapper input{

    width:100%;

    padding:20px 100px 20px 22px;

    border-radius:var(--radius-md);

    border:1.5px solid var(--border);

    background:var(--bg);

    font-family:inherit;

    font-size:21px;

    font-weight:600;

    color:var(--title);

    letter-spacing:.02em;

    outline:none;

    transition:border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);

}

.inputWrapper input::placeholder{

    color:var(--text-muted);

    font-weight:500;

}

.inputWrapper input:focus{

    border-color:var(--primary);

    background:var(--card);

    box-shadow:0 0 0 4px rgba(0,59,142,.08);

}

.inputActions{

    position:absolute;

    top:50%;

    right:10px;

    transform:translateY(-50%);

    display:flex;

    gap:6px;

}

.iconBtn{

    width:36px;

    height:36px;

    padding:0;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:var(--radius-sm);

    border:1.5px solid var(--border);

    background:var(--card);

    color:var(--text-muted);

    cursor:pointer;

    transition:border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast);

}

.iconBtn svg{

    width:16px;

    height:16px;

}

.iconBtn:hover{

    border-color:var(--primary);

    color:var(--primary);

    background:var(--bg);

}

.iconBtn.copied{

    border-color:var(--success);

    color:var(--success);

    background:var(--success-tint);

}

.primaryBtn{

    width:100%;

    margin-top:22px;

    border:none;

    background:var(--primary);

    color:#fff;

    font-family:inherit;

    font-size:16.5px;

    font-weight:700;

    padding:19px;

    border-radius:var(--radius-md);

    cursor:pointer;

    box-shadow:var(--shadow-md);

    transition:background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);

}

.primaryBtn:hover:not(:disabled){

    background:var(--primary-hover);

    transform:translateY(-2px);

    box-shadow:var(--shadow-lg);

}

.primaryBtn:active:not(:disabled){

    transform:translateY(0);

}

.primaryBtn:disabled{

    background:#B9C3D4;

    cursor:not-allowed;

    box-shadow:none;

}

.errorBox{

    display:none;

    margin-top:18px;

    padding:15px 18px;

    border-radius:var(--radius-md);

    background:var(--danger-tint);

    color:var(--danger);

    font-size:14px;

    font-weight:600;

    line-height:19px;

    border:1px solid var(--danger-border);

}

.errorBox::before{

    content:"";

    display:inline-block;

    vertical-align:middle;

    width:19px;

    height:19px;

    margin-right:10px;

    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23DC2626' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");

    background-repeat:no-repeat;

    background-size:contain;

}

/* ==========================================================================
   LOADING
   ========================================================================== */

#loading{

    display:none;

    text-align:center;

    padding:0 0 90px;

}

.loadingInner{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:20px;

}

.spinner{

    width:44px;

    height:44px;

    border-radius:50%;

    border:3px solid var(--border);

    border-top-color:var(--primary);

    animation:spin .8s linear infinite;

}

#loading p{

    color:var(--text-muted);

    font-weight:500;

    font-size:14.5px;

}

@keyframes spin{

    to{ transform:rotate(360deg); }

}

/* ==========================================================================
   RESULT
   ========================================================================== */

#result{

    display:none;

    padding:0 0 110px;

}

.resultBanner{

    display:flex;

    align-items:center;

    gap:16px;

    max-width:640px;

    margin:0 auto 40px;

    padding:22px 26px;

    background:var(--success-tint);

    border:1px solid var(--success-border);

    border-radius:var(--radius-md);

}

.resultBannerIcon{

    width:42px;

    height:42px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:var(--success);

    color:#fff;

}

.resultBannerIcon svg{

    width:22px;

    height:22px;

}

.resultBanner h2{

    font-size:17px;

    color:var(--title);

}

.resultBanner p{

    font-size:13.5px;

    color:var(--text);

    margin-top:2px;

}

.resultGrid{

    display:grid;

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

    gap:24px;

}

.infoCard{

    background:var(--card);

    border:1px solid var(--border);

    border-radius:var(--radius-lg);

    padding:32px;

    box-shadow:var(--shadow-sm);

    display:flex;

    flex-direction:column;

    transition:box-shadow var(--transition), transform var(--transition);

}

.infoCard:hover{

    box-shadow:var(--shadow-md);

    transform:translateY(-3px);

}

.infoCardHeader{

    display:flex;

    align-items:center;

    gap:14px;

    margin-bottom:26px;

}

.infoCardIcon{

    width:44px;

    height:44px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:var(--radius-sm);

    background:var(--bg);

    color:var(--primary);

}

.infoCardIcon svg{

    width:21px;

    height:21px;

}

.infoCardTitle{

    font-size:15px;

    font-weight:700;

    color:var(--title);

    display:flex;

    align-items:center;

    gap:8px;

}

.badge{

    display:inline-block;

    padding:3px 10px;

    border-radius:var(--radius-full);

    background:var(--badge-bg);

    color:var(--primary);

    font-size:10.5px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.04em;

}

.infoList{

    display:flex;

    flex-direction:column;

}

.infoRow{

    display:flex;

    justify-content:space-between;

    align-items:baseline;

    gap:12px;

    padding:13px 0;

    border-bottom:1px solid var(--border);

}

.infoRow:last-child{

    border-bottom:none;

    padding-bottom:0;

}

.infoLabel{

    font-size:13.5px;

    color:var(--text-muted);

    font-weight:500;

    white-space:nowrap;

}

.infoValue{

    font-size:14.5px;

    color:var(--title);

    font-weight:600;

    text-align:right;

    word-break:break-word;

}

.bankHero{

    display:flex;

    align-items:center;

    gap:18px;

    padding-bottom:24px;

    margin-bottom:24px;

    border-bottom:1px solid var(--border);

}

.bankLogoSlot{

    display:flex;

    flex-shrink:0;

}

.bankHeroText{

    min-width:0;

}

.bankHeroName{

    font-size:19px;

    font-weight:800;

    color:var(--title);

    letter-spacing:-.01em;

    line-height:1.3;

    word-break:break-word;

}

.bankHeroSub{

    margin-top:3px;

    font-size:12px;

    font-weight:600;

    color:var(--text-muted);

    text-transform:uppercase;

    letter-spacing:.06em;

}

.bankIcon{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    border-radius:var(--radius-md);

    background:#fff;

    border:1px solid var(--border);

    box-shadow:var(--shadow-sm);

    object-fit:contain;

    flex-shrink:0;

    padding:8px;

}

.bankIconFallback{

    color:#fff;

    font-weight:800;

    letter-spacing:.01em;

    border:none;

    padding:0;

}

.bulkBankCell{

    display:flex;

    align-items:center;

    gap:10px;

}

.bulkBankCell .bankIcon{

    border-radius:var(--radius-sm);

    padding:4px;

}

#accountNumber{

    letter-spacing:1.5px;

    font-variant-numeric:tabular-nums;

}

.cardNote{

    margin-top:18px;

    font-size:12.5px;

    color:var(--text-muted);

    line-height:1.6;

}

/* ==========================================================================
   QR KOD İLE PAYLAŞ
   ========================================================================== */

.qrCard{

    background:var(--card);

    border:1px solid var(--border);

    border-radius:var(--radius-lg);

    box-shadow:var(--shadow-sm);

    padding:32px;

    margin-top:24px;

}

.qrCardBody{

    display:flex;

    align-items:flex-start;

    gap:32px;

}

.qrCanvasWrapper{

    flex-shrink:0;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:16px;

    background:#fff;

    border-radius:var(--radius-md);

    border:1px solid var(--border);

}

.qrCanvasWrapper canvas{

    display:block;

    width:180px;

    height:180px;

    image-rendering:pixelated;

}

.qrControls{

    flex:1;

    min-width:0;

    padding-top:4px;

}

.qrIbanText{

    font-size:16px;

    font-weight:700;

    color:var(--title);

    letter-spacing:.02em;

    word-break:break-word;

}

.qrNameLabel{

    display:block;

    margin-top:20px;

    margin-bottom:8px;

    font-size:12.5px;

    font-weight:600;

    color:var(--text-muted);

}

#qrNameInput{

    width:100%;

    padding:13px 16px;

    border-radius:var(--radius-sm);

    border:1.5px solid var(--border);

    background:var(--card);

    color:var(--title);

    font-family:inherit;

    font-size:14px;

    outline:none;

    transition:border-color var(--transition-fast);

}

#qrNameInput:focus{

    border-color:var(--primary);

}

.qrButtonRow{

    display:flex;

    gap:12px;

    margin-top:20px;

}

.qrButtonRow .primaryBtn{

    width:auto;

    margin-top:0;

    padding:14px 28px;

}

.qrButtonRow .secondaryBtn{

    padding:14px 24px;

}

/* ==========================================================================
   BRANCH SEARCH
   ========================================================================== */

.branchSearchSection{

    padding:90px 0;

    background:var(--card);

    border-top:1px solid var(--border);

    border-bottom:1px solid var(--border);

}

.sectionHeader{

    text-align:center;

    max-width:560px;

    margin:0 auto 44px;

}

.sectionKicker{

    display:inline-block;

    font-size:12.5px;

    font-weight:700;

    color:var(--accent);

    text-transform:uppercase;

    letter-spacing:.08em;

    margin-bottom:12px;

}

.sectionHeader h2{

    font-size:32px;

    margin-bottom:12px;

}

.sectionHeader p{

    color:var(--text);

    font-size:15.5px;

}

.searchCard{

    background:var(--bg);

    border:1px solid var(--border);

    border-radius:var(--radius-lg);

    padding:36px;

    max-width:760px;

    margin:0 auto;

}

.searchCardRow{

    display:grid;

    grid-template-columns:260px 1fr;

    gap:14px;

}

.selectWrapper{

    position:relative;

}

.selectWrapper::after{

    content:"";

    position:absolute;

    top:50%;

    right:18px;

    transform:translateY(-50%);

    width:14px;

    height:14px;

    pointer-events:none;

    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234B5A70' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");

    background-repeat:no-repeat;

    background-size:contain;

}

#bankSelect{

    width:100%;

    height:100%;

    padding:16px 40px 16px 18px;

    border-radius:var(--radius-md);

    border:1.5px solid var(--border);

    font-family:inherit;

    font-size:14.5px;

    font-weight:500;

    outline:none;

    transition:border-color var(--transition-fast);

    background:var(--card);

    color:var(--title);

    appearance:none;

    -webkit-appearance:none;

    cursor:pointer;

}

#bankSelect:focus{

    border-color:var(--primary);

}

.searchInputWrapper{

    position:relative;

    display:flex;

    align-items:center;

}

.searchInputWrapper svg{

    position:absolute;

    left:18px;

    width:17px;

    height:17px;

    color:var(--text-muted);

    pointer-events:none;

}

#branchQuery{

    width:100%;

    padding:16px 18px 16px 46px;

    border-radius:var(--radius-md);

    border:1.5px solid var(--border);

    font-family:inherit;

    font-size:14.5px;

    outline:none;

    background:var(--card);

    color:var(--title);

    transition:border-color var(--transition-fast);

}

#branchQuery::placeholder{

    color:var(--text-muted);

}

#branchQuery:focus{

    border-color:var(--primary);

}

.note{

    margin-top:18px;

    font-size:13px;

    color:var(--text-muted);

}

.branchResults{

    margin-top:8px;

    max-height:420px;

    overflow-y:auto;

}

.branchRow{

    padding:16px 4px;

    border-bottom:1px solid var(--border);

    transition:padding-left var(--transition-fast);

}

.branchRow:hover{

    padding-left:10px;

}

.branchRow:last-child{

    border-bottom:none;

}

.branchRowName{

    font-weight:600;

    color:var(--title);

    font-size:14.5px;

}

.branchRowMeta{

    font-size:12.5px;

    color:var(--text-muted);

    margin-top:4px;

}

/* ==========================================================================
   BULK SEARCH
   ========================================================================== */

.bulkSection{

    padding:90px 0;

}

.bulkTextarea{

    width:100%;

    min-height:150px;

    padding:18px 20px;

    border-radius:var(--radius-md);

    border:1.5px solid var(--border);

    background:var(--card);

    font-family:'Inter','Segoe UI',sans-serif;

    font-size:14.5px;

    color:var(--title);

    letter-spacing:.02em;

    line-height:1.7;

    outline:none;

    resize:vertical;

    transition:border-color var(--transition-fast);

}

.bulkTextarea::placeholder{

    color:var(--text-muted);

}

.bulkTextarea:focus{

    border-color:var(--primary);

}

.bulkActions{

    display:flex;

    gap:12px;

    margin-top:16px;

}

.bulkCard .primaryBtn{

    width:auto;

    padding:15px 32px;

    margin-top:0;

}

.secondaryBtn{

    display:flex;

    align-items:center;

    gap:8px;

    border:1.5px solid var(--border);

    background:var(--card);

    color:var(--title);

    font-family:inherit;

    font-size:14.5px;

    font-weight:700;

    padding:14px 24px;

    border-radius:var(--radius-md);

    cursor:pointer;

    transition:border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast);

}

.secondaryBtn svg{

    width:17px;

    height:17px;

}

.secondaryBtn:hover:not(:disabled){

    border-color:var(--primary);

    color:var(--primary);

    background:var(--bg);

}

.secondaryBtn:disabled{

    color:var(--text-muted);

    cursor:not-allowed;

    opacity:.6;

}

.ghostBtn{

    display:flex;

    align-items:center;

    gap:8px;

    border:none;

    background:none;

    color:var(--text-muted);

    font-family:inherit;

    font-size:14.5px;

    font-weight:600;

    padding:14px 16px;

    border-radius:var(--radius-md);

    cursor:pointer;

    transition:color var(--transition-fast), background var(--transition-fast);

}

.ghostBtn svg{

    width:17px;

    height:17px;

}

.ghostBtn:hover{

    color:var(--danger);

    background:var(--danger-tint);

}

.bulkTableWrapper{

    margin-top:22px;

    max-height:460px;

    overflow-y:auto;

    overflow-x:auto;

    border-radius:var(--radius-md);

    border:1px solid var(--border);

}

.bulkTable{

    width:100%;

    border-collapse:collapse;

    font-size:13.5px;

    background:var(--card);

}

.bulkTable thead th{

    position:sticky;

    top:0;

    text-align:left;

    padding:12px 16px;

    background:var(--bg);

    color:var(--text-muted);

    font-size:11.5px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.05em;

    border-bottom:1px solid var(--border);

    white-space:nowrap;

}

.bulkTable tbody td{

    padding:13px 16px;

    border-bottom:1px solid var(--border);

    color:var(--text);

    vertical-align:middle;

}

.bulkTable tbody tr:last-child td{

    border-bottom:none;

}

.bulkTable tbody td:first-child{

    font-weight:600;

    color:var(--title);

    font-variant-numeric:tabular-nums;

    white-space:nowrap;

}

.statusPill{

    display:inline-block;

    padding:4px 12px;

    border-radius:var(--radius-full);

    font-size:11.5px;

    font-weight:700;

}

.statusValid{

    background:var(--success-tint);

    color:var(--success);

}

.statusInvalid{

    background:var(--danger-tint);

    color:var(--danger);

}

/* ==========================================================================
   INFO / TRUST SECTION
   ========================================================================== */

.info{

    padding:100px 0;

}

.infoInner{

    text-align:center;

    max-width:640px;

    margin:0 auto 60px;

}

.infoInner h2{

    font-size:32px;

    margin-bottom:16px;

}

.infoInner p{

    font-size:16px;

    color:var(--text);

}

.trustGrid{

    display:grid;

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

    gap:24px;

}

.trustCard{

    text-align:center;

    padding:36px 24px;

}

.trustIcon{

    width:52px;

    height:52px;

    margin:0 auto 20px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:var(--bg);

    color:var(--primary);

}

.trustIcon svg{

    width:24px;

    height:24px;

}

.trustCard h3{

    font-size:16px;

    margin-bottom:8px;

}

.trustCard p{

    font-size:13.5px;

    color:var(--text-muted);

}

/* ==========================================================================
   SSS (FAQ)
   ========================================================================== */

.faqSection{

    padding:0 0 100px;

}

.faqList{

    max-width:760px;

    margin:0 auto;

    display:flex;

    flex-direction:column;

    gap:12px;

}

.faqItem{

    background:var(--card);

    border:1px solid var(--border);

    border-radius:var(--radius-md);

    box-shadow:var(--shadow-sm);

    overflow:hidden;

    transition:box-shadow var(--transition-fast);

}

.faqItem[open]{

    box-shadow:var(--shadow-md);

}

.faqQuestion{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:16px;

    padding:20px 24px;

    cursor:pointer;

    list-style:none;

    font-size:15px;

    font-weight:700;

    color:var(--title);

}

.faqQuestion::-webkit-details-marker{

    display:none;

}

.faqQuestion::after{

    content:"";

    flex-shrink:0;

    width:14px;

    height:14px;

    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234B5A70' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");

    background-repeat:no-repeat;

    background-size:contain;

    transition:transform var(--transition-fast);

}

.faqItem[open] .faqQuestion::after{

    transform:rotate(180deg);

}

.faqAnswer{

    padding:0 24px 22px;

    color:var(--text);

    font-size:14px;

    line-height:1.7;

}

/* ==========================================================================
   FOOTER
   ========================================================================== */

footer{

    background:var(--footer-bg);

    color:#fff;

    padding:64px 0 0;

}

.footerInner{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:40px;

    padding-bottom:48px;

}

.footerBrand .logoMark{

    color:#fff;

}

.footerBrand .logoMark span{

    color:var(--accent);

}

.footerBrand p{

    margin-top:12px;

    font-size:13.5px;

    color:rgba(255,255,255,.55);

    max-width:280px;

}

.footerLinks{

    display:flex;

    gap:32px;

}

.footerLinks a{

    text-decoration:none;

    font-size:14px;

    color:rgba(255,255,255,.75);

    transition:color var(--transition-fast);

}

.footerLinks a:hover{

    color:#fff;

}

.footerBottom{

    border-top:1px solid rgba(255,255,255,.1);

    padding:24px 0;

    text-align:center;

    font-size:12.5px;

    color:rgba(255,255,255,.45);

}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media(max-width:960px){

    .resultGrid{

        grid-template-columns:1fr;

    }

    .trustGrid{

        grid-template-columns:1fr;

    }

    .heroStats{

        gap:36px;

    }

}

@media(max-width:768px){

    .navLinks{

        position:absolute;

        top:100%;

        left:0;

        right:0;

        flex-direction:column;

        align-items:stretch;

        gap:4px;

        background:var(--card);

        border-bottom:1px solid var(--border);

        box-shadow:var(--shadow-md);

        padding:14px;

        max-height:0;

        overflow:hidden;

        transition:max-height var(--transition);

    }

    .navLinks.open{

        max-height:320px;

    }

    .navLinks li a{

        padding:14px 16px;

    }

    .navLinks li:last-child a{

        text-align:center;

    }

    .menuToggle{

        display:flex;

    }

    .hero{

        padding:60px 0 44px;

    }

    .hero h1{

        font-size:36px;

    }

    .heroText{

        font-size:16.5px;

    }

    .heroStats{

        gap:0;

        justify-content:space-between;

    }

    .heroStats strong{

        font-size:22px;

    }

    .verifyCard{

        padding:28px 22px;

        border-radius:var(--radius-md);

    }

    .resultBanner{

        flex-wrap:wrap;

    }

    .qrCard{

        padding:24px 20px;

    }

    .qrCardBody{

        flex-direction:column;

        align-items:center;

    }

    .qrCanvasWrapper canvas{

        width:160px;

        height:160px;

    }

    .qrControls{

        width:100%;

        text-align:center;

    }

    .qrButtonRow{

        flex-direction:column;

    }

    .qrButtonRow .primaryBtn,
    .qrButtonRow .secondaryBtn{

        width:100%;

        justify-content:center;

    }

    .inputWrapper input{

        font-size:17px;

        padding:18px 92px 18px 16px;

    }

    .searchCardRow{

        grid-template-columns:1fr;

    }

    .searchCard{

        padding:24px 20px;

    }

    .bulkActions{

        flex-direction:column;

    }

    .bulkCard .primaryBtn,
    .secondaryBtn,
    .ghostBtn{

        width:100%;

        justify-content:center;

    }

    .bulkTableWrapper{

        max-height:360px;

    }

    .sectionHeader h2, .infoInner h2{

        font-size:26px;

    }

    .faqQuestion{

        padding:16px 18px;

        font-size:14px;

    }

    .faqAnswer{

        padding:0 18px 18px;

    }

    .footerInner{

        flex-direction:column;

        gap:28px;

    }

    .footerLinks{

        flex-wrap:wrap;

        gap:16px 24px;

    }

}

@media(min-width:769px){

    .menuToggle{

        display:none;

    }

}