/* =========================================================
   AAK Homepage Refresh (v3) — carousel removed, search box is
   now the sole hero element (original white/orange/green stock
   look kept, just widened and enlarged). CTA banner simplified
   to match. Brand orange kept throughout (#e7ab3c / #333).
   ========================================================= */

/* ---------- search box (original white/orange/green stock look — just
   made wider + a bit larger, no color/shape changes) ---------- */
.home-domain-search h2{
    font-size: 2rem;
    font-weight: 800;
    color: #333;
}
.home-domain-search .input-group-wrapper{
    width: 100%;
}
.home-domain-search .form-control{
    padding: 18px 22px;
    font-size: 1.1rem;
}
.home-domain-search .input-group-append .btn{
    padding: 18px 30px !important;
    font-size: 1rem !important;
}

@media(max-width: 576px){
    .home-domain-search h2{ font-size: 1.5rem; }
    .home-domain-search .form-control{ padding: 14px 18px; font-size: 1rem; }
}

/* ---------- footer (rebuilt from scratch) ----------
   Previous attempts patched the stock Bootstrap .list-inline/.nav
   classes, which kept colliding with unrelated generic rules
   elsewhere in the theme's CSS (padding, dividers) and — separately —
   a float-clearing bug in the CTA/install-app sections above the
   footer let this content overlap upward on Chrome/Safari (visible,
   inconsistently, depending on browser float-height quirks). Fixed
   at the root: the CTA/install-app sections no longer float (see
   footer.tpl), and the footer's own markup now uses dedicated
   classes instead of the generic ones, so there's nothing left to
   collide with. clear:both is kept as cheap insurance regardless. */
.aak-footer{
    clear: both;
}
.aak-footer-top{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 16px 24px;
    margin-bottom: 28px;
}
.aak-footer-social{
    display: flex;
    list-style: none;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    padding: 0;
    margin: 0;
}
.aak-footer-social li{
    display: flex;
}
.aak-footer-social .btn-icon{
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255,255,255,.08);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}
.aak-footer-social .btn-icon:hover{
    background: #e7ab3c;
    color: #fff;
}
.aak-footer-lang{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,.08);
    color: #fff;
    border-radius: 30px;
    padding: 8px 18px;
    font-size: .85rem;
    border: none;
}
.aak-footer-lang:hover{
    background: rgba(255,255,255,.16);
    color: #fff;
}
.aak-footer-links{
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 24px;
    padding: 0;
    margin: 0 0 26px;
}
.aak-footer-links a{
    color: #ddd;
    font-size: .9rem;
}
.aak-footer-links a:hover{
    color: #e7ab3c;
    text-decoration: none;
}
.aak-footer-contact{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px 26px;
    margin-bottom: 26px;
    font-size: .88rem;
    color: #ccc;
    text-align: center;
}
.aak-footer-contact-item{
    display: flex;
    align-items: center;
    gap: 6px;
}
.aak-footer-contact-item i{
    color: #e7ab3c;
    flex-shrink: 0;
}
.aak-footer-contact-item a{
    color: #ccc;
}
.aak-footer-contact-item a:hover{
    color: #fff;
}
.aak-footer-copyright{
    text-align: center;
    color: #999;
    font-size: .82rem;
    margin: 0;
}

@media(max-width: 576px){
    .aak-footer-top{
        flex-direction: column;
        gap: 14px;
    }
    .aak-footer-contact{
        flex-direction: column;
        gap: 10px;
    }
    .aak-footer-contact-item{
        text-align: center;
    }
}

/* ---------- darker section behind the pricing cards / icon grids, for
   contrast against the white search box above it. Full-bleed via
   margin-only negative-margin trick (no explicit width:100vw) — the
   100vw variant includes the scrollbar in its width calculation
   differently across browsers (fine in Firefox, causes overflow/shift
   in Chrome/Safari when a vertical scrollbar is present), so this is
   the safer cross-browser version. ---------- */
.aak-page-section{
    background: #e4e7eb;
    padding: 8px 0 1px;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

/* ---------- CTA banner ("Kaliteli ve erisilebilir hizmetler") ---------- */
.aak-cta-v3{
    padding: 32px 0;
    background: #333;
}
.aak-cta-panel{
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
    padding: 12px 4px;
}
.aak-cta-icon{
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #e7ab3c;
    color: #fff;
    font-size: 1.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.aak-cta-text{
    flex: 1 1 280px;
    min-width: 200px;
}
.aak-cta-text h2{
    font-size: 1.3rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 6px;
}
.aak-cta-text p{
    font-size: 0.95rem;
    color: #ddd;
    margin: 0;
}
.aak-cta-action{
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-left: auto;
}
.aak-cta-price{
    color: #fff;
    white-space: nowrap;
}
.aak-cta-from{ font-size: 0.85rem; color: #ccc; }
.aak-cta-amount{ font-size: 1.6rem; font-weight: 700; color: #e7ab3c; margin: 0 2px; }
.aak-cta-per{ font-size: 0.85rem; color: #ccc; }
.aak-cta-btn{
    display: inline-block;
    background: #e7ab3c;
    color: #fff;
    font-weight: 600;
    padding: 10px 22px;
    border-radius: 4px;
    text-decoration: none;
    white-space: nowrap;
    transition: background .25s;
}
.aak-cta-btn:hover{
    background: #fff;
    color: #333;
    text-decoration: none;
}

@media(max-width: 576px){
    .aak-cta-v3{ padding: 22px 0; }
    .aak-cta-panel{
        flex-direction: column;
        text-align: center;
        gap: 10px;
        padding: 4px;
    }
    /* Reset flex-basis/min-width for the column layout — in a column
       flex container the main axis is vertical, so leaving the desktop
       row values (flex-basis:280px, min-width:200px) in place stretches
       each block to that HEIGHT instead of width, which is what was
       causing the large empty gap between the text and the price/button
       on phones. */
    .aak-cta-icon,
    .aak-cta-text,
    .aak-cta-action{
        flex: 0 0 auto;
        min-width: auto;
        width: auto;
        margin-left: 0;
    }
    .aak-cta-action{
        flex-direction: column;
        gap: 8px;
    }
    .aak-cta-text p{ margin: 0 auto; max-width: 300px; }
}

/* ---------- pricing card icon badge sizing on small screens ---------- */
@media(max-width: 576px){
    .aak-pricing-icon{
        width: 48px !important;
        height: 48px !important;
        font-size: 1.25rem !important;
        margin: 18px auto 0 !important;
    }
}