/* ==========================================================================
   01 ‑ Google Fonts
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Poppins:wght@300;400;500;600;700;800&display=swap');


/* ==========================================================================
   02 ‑ Temel Tipografi & Yardımcılar
   ========================================================================== */
body                 {font-family:'Inter',sans-serif;scroll-behavior:smooth;}
h1,h2,h3,h4,h5,h6    {font-family:'Poppins',sans-serif;}
.font-poppins        {font-family:'Poppins',sans-serif;}

.hero-gradient {background:linear-gradient(135deg,#3274f6 0%,#14b8a6 100%);}


/* ==========================================================================
   03 ‑ Bileşenler
   -------------------------------------------------------------------------- */

/* ---- Kart --------------------------------------------------------------- */
.card-hover {transition:all .3s ease;}
.card-hover:hover {transform:translateY(-5px);box-shadow:0 10px 25px rgba(0,0,0,.08);}
.feature-icon,.contact-icon {transition:all .3s ease;}
.card-hover:hover .feature-icon {transform:scale(1.1);}

/* ---- Buton -------------------------------------------------------------- */
.btn-primary {
    background:linear-gradient(135deg,#3274f6 0%,#2058eb 100%);
    transition:all .3s ease;
}
.btn-primary:hover {transform:translateY(-2px);box-shadow:0 5px 15px rgba(50,116,246,.3);}
.search-button {background:#3274f6;}

/* ---- Form --------------------------------------------------------------- */
.form-input {transition:all .3s ease;border:1px solid #e2e8f0;}
.form-input:focus {border-color:#3274f6;box-shadow:0 0 0 3px rgba(50,116,246,.2);}
.search-input {background:#fff;border:1px solid #e5e7eb;}

/* ---- Navigation --------------------------------------------------------- */
.nav-link {position:relative;}
.nav-link::after {content:'';position:absolute;bottom:-2px;left:0;width:0;height:2px;background:#3274f6;transition:width .3s ease;}
.nav-link:hover::after,.active-nav::after {width:100%;}

/* ---- Sidebar ------------------------------------------------------------ */
.sidebar-link {transition:all .3s ease;}
.sidebar-link:hover {background:#f0f7ff;color:#3274f6;}
.sidebar-link.active {background:#e0eefe;color:#3274f6;border-right:3px solid #3274f6;}

/* ---- Timeline / Step List --------------------------------------------- */
.timeline-item,.step-item {position:relative;padding-left:30px;}
.timeline-item::before,.step-item::before {
    content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:#e0eefe;}
.timeline-item:last-child::before,.step-item:last-child::before {height:24px;}
.timeline-dot,.step-dot {
    position:absolute;left:-5px;top:24px;width:12px;height:12px;border-radius:50%;background:#3274f6;}

/* ---- Medya Kartları ---------------------------------------------------- */
.screenshot{
    border:1px solid #e5e7eb;border-radius:.5rem;overflow:hidden;
    box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06);}
.video-container{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;border-radius:.5rem;}
.video-container iframe{position:absolute;top:0;left:0;width:100%;height:100%;}

/* ---- İçindekiler ------------------------------------------------------- */
.toc-link {transition:all .2s ease;}
.toc-link:hover {color:#3274f6;background:#f0f7ff;}
.toc-link.active {color:#3274f6;border-left:3px solid #3274f6;background:#f0f7ff;}

/* ---- İkon Kutuları ----------------------------------------------------- */
.contact-icon-box {transition:all .3s ease;}
.contact-icon-box:hover {transform:translateY(-5px);}
.contact-icon-box:hover .contact-icon {transform:scale(1.1);color:#3274f6;}

/* ---- Harita & Dalga ---------------------------------------------------- */
.map-container{position:relative;overflow:hidden;border-radius:12px;}
.map-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(50,116,246,.1);opacity:0;transition:.5s;}
.map-container:hover .map-overlay{opacity:1;}
.wave-top,.wave-bottom,.cta-wave-top,.cta-wave-bottom{position:absolute;width:100%;overflow:hidden;line-height:0;}
.wave-bottom,.cta-wave-bottom{bottom:-1px;left:0;transform:rotate(180deg);}
.wave-top,.cta-wave-top{top:-1px;left:0;}
.wave-top svg,.wave-bottom svg,.cta-wave-top svg,.cta-wave-bottom svg{width:calc(100% + 1.3px);height:70px;}
.wave-bottom .shape-fill,.cta-wave-bottom .shape-fill{fill:#FFFFFF;}
.cta-wave-top .shape-fill{fill:#F9FAFB;}

/* ==========================================================================
   04 ‑ Animasyonlar
   ========================================================================== */
@keyframes fadeIn{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:translateY(0);}}
.animate-fade-in{opacity:0;animation:fadeIn .8s ease forwards;}
.animate-delay-1{animation-delay:.2s;}
.animate-delay-2{animation-delay:.4s;}
.animate-delay-3{animation-delay:.6s;}
.animate-delay-4{animation-delay:.8s;}
.animate-delay-5{animation-delay:1s;}

/* ==========================================================================
   05 ‑ Özel Scrollbar
   ========================================================================== */
.custom-scrollbar::-webkit-scrollbar{width:6px;}
.custom-scrollbar::-webkit-scrollbar-track{background:#f1f1f1;}
.custom-scrollbar::-webkit-scrollbar-thumb{background:#c5c5c5;border-radius:3px;}
.custom-scrollbar::-webkit-scrollbar-thumb:hover{background:#a0a0a0;}


/* ===============================================================
   Promo‑Video bloğu (pv‑)
   =============================================================== */
.pv-section      {padding:5rem 0;background:#f9fafb;}
.pv-container    {max-width:1120px;margin:auto;padding:0 1rem;text-align:center;}
.pv-header       {margin-bottom:3rem;}
.pv-title        {font:700 2.25rem/1.2 'Poppins',sans-serif;color:#1f2937;}
.pv-subtitle     {max-width:640px;margin:0.75rem auto 0;color:#6b7280;font-size:1rem;}

.pv-video-wrapper{
    position:relative;max-width:960px;margin:auto;border-radius:1rem;
    overflow:hidden;aspect-ratio:16/9;background:#000;box-shadow:0 18px 40px rgba(0,0,0,.12);
}
.pv-video-wrapper picture,      /* kapak görseli */
.pv-video-wrapper iframe{width:100%;height:100%;object-fit:cover;display:block;}

.pv-play-btn{
    --size:96px;
    position:absolute;inset:0;margin:auto;width:var(--size);height:var(--size);
    border:0;border-radius:50%;cursor:pointer;backdrop-filter:blur(6px);
    background:rgba(255,255,255,.18);transition:transform .3s,background .3s;
}
.pv-play-btn::before{content:'';border-style:solid;border-width:22px 0 22px 34px;
    border-color:transparent transparent transparent #fff;display:block;margin-left:6px;}
.pv-play-btn:hover{transform:scale(1.08);background:rgba(255,255,255,.28);}

@media (max-width:640px){
    .pv-title{font-size:1.75rem;}
    .pv-play-btn{--size:68px;}
    .pv-play-btn::before{border-width:14px 0 14px 22px;}
}


/* ------------------------------------------------------------------
   Afinitem Landing – Ek Stiller (.ahbs- prefix)
-------------------------------------------------------------------*/

/* Ortak hover yükseltme */
.ahbs-card-hover{
    transition:transform .25s ease,box-shadow .25s ease;
}
.ahbs-card-hover:hover{
    transform:translateY(-4px);
    box-shadow:0 14px 28px rgba(0,0,0,.08);
}

/* Logo gri & opaklık */
.ahbs-logo{
    filter:grayscale(100%) opacity(.7);
    transition:filter .3s ease,opacity .3s ease;
}
.ahbs-logo:hover{
    filter:none; opacity:1;
}

/* Küçük rozet */
.ahbs-badge{
    display:inline-flex;
    align-items:center;
    padding:.25rem .75rem;
    border-radius:9999px;
    font-size:.75rem;
    font-weight:500;
}
.ahbs-badge-green{background:#ccfbf1;color:#0d9488}
.ahbs-badge-blue {background:#e0eefe;color:#2058eb}
/* -------------------------------------------------
   Guide TOC – Aktif bağlantı vurgusu
--------------------------------------------------*/
.toc-link.active{
    background:#e0eefe;          /* primary‑100 */
    color:#2058eb;               /* primary‑600 */
    font-weight:600;
}