/* ==========================================================================
   utilities.css — Hazır Utility Class'lar
   Requires: _variables.css
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { overflow-x: hidden; }
button { outline:none; background-color:transparent; box-shadow:none; border:0 }
img, video, svg { display: block; max-width: 100%; user-select:none; pointer-events:none; }
.svg-icon {
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
    fill: currentColor;
}

/* --------------------------------------------------------------------------
   BACKGROUND COLOR UTILITIES
   -------------------------------------------------------------------------- */
.df-bg-red-5F070B  { background-color: var(--red-5F070B) !important; }
.df-bg-red-980B12  { background-color: var(--red-980B12) !important; }
.df-bg-red-BF0D16  { background-color: var(--red-BF0D16) !important; }
.df-bg-red-D11019  { background-color: var(--red-D11019) !important; }
.df-bg-red-F53D46  { background-color: var(--red-F53D46) !important; }
.df-bg-red-F8777E  { background-color: var(--red-F8777E) !important; }
.df-bg-red-FA9EA3  { background-color: var(--red-FA9EA3) !important; }
.df-bg-red-FCC5C8  { background-color: var(--red-FCC5C8) !important; }
.df-bg-red-FEECED  { background-color: var(--red-FEECED) !important; }

.df-bg-neutral-1A1818 { background-color: var(--neutral-1A1818) !important; }
.df-bg-neutral-141414 { background-color: var(--neutral-141414) !important; }
.df-bg-neutral-292929 { background-color: var(--neutral-292929) !important; }
.df-bg-neutral-3D3D3D { background-color: var(--neutral-3D3D3D) !important; }
.df-bg-neutral-4E4E4E { background-color: var(--neutral-4E4E4E) !important; }
.df-bg-neutral-666666 { background-color: var(--neutral-666666) !important; }
.df-bg-neutral-858585 { background-color: var(--neutral-858585) !important; }
.df-bg-neutral-A3A3A3 { background-color: var(--neutral-A3A3A3) !important; }
.df-bg-neutral-E0E0E0 { background-color: var(--neutral-E0E0E0) !important; }
.df-bg-neutral-F5F5F5 { background-color: var(--neutral-F5F5F5) !important; }
.df-bg-neutral-FFFFFF { background-color: var(--neutral-FFFFFF) !important; }

/* --------------------------------------------------------------------------
   BORDER COLOR UTILITIES
   -------------------------------------------------------------------------- */
.df-border-red-5F070B  { border-color: var(--red-5F070B) !important; }
.df-border-red-980B12  { border-color: var(--red-980B12) !important; }
.df-border-red-BF0D16  { border-color: var(--red-BF0D16) !important; }
.df-border-red-D11019  { border-color: var(--red-D11019) !important; }
.df-border-red-F53D46  { border-color: var(--red-F53D46) !important; }
.df-border-red-F8777E  { border-color: var(--red-F8777E) !important; }
.df-border-red-FCC5C8  { border-color: var(--red-FCC5C8) !important; }
.df-border-red-FEECED  { border-color: var(--red-FEECED) !important; }

.df-border-neutral-1A1818 { border-color: var(--neutral-1A1818) !important; }
.df-border-neutral-3D3D3D { border-color: var(--neutral-3D3D3D) !important; }
.df-border-neutral-4E4E4E { border-color: var(--neutral-4E4E4E) !important; }
.df-border-neutral-858585 { border-color: var(--neutral-858585) !important; }
.df-border-neutral-A3A3A3 { border-color: var(--neutral-A3A3A3) !important; }
.df-border-neutral-E0E0E0 { border-color: var(--neutral-E0E0E0) !important; }
.df-border-neutral-F5F5F5 { border-color: var(--neutral-F5F5F5) !important; }

/* --------------------------------------------------------------------------
   BORDER RADIUS UTILITIES
   -------------------------------------------------------------------------- */
.df-rounded-sm   { border-radius: var(--radius-sm) !important; }
.df-rounded-md   { border-radius: var(--radius-md) !important; }
.df-rounded-lg   { border-radius: var(--radius-lg) !important; }
.df-rounded-xl   { border-radius: var(--radius-xl) !important; }
.df-rounded-full { border-radius: var(--radius-full) !important; }

/* --------------------------------------------------------------------------
   SHADOW UTILITIES
   -------------------------------------------------------------------------- */
.df-shadow-sm-brand { box-shadow: var(--shadow-sm) !important; }
.df-shadow-md-brand { box-shadow: var(--shadow-md) !important; }
.df-shadow-lg-brand { box-shadow: var(--shadow-lg) !important; }
.df-shadow-red      { box-shadow: var(--shadow-red) !important; }

/* --------------------------------------------------------------------------
   SECTION SPACING — Fluid, media query yok
   -------------------------------------------------------------------------- */
.df-section-sm { padding-top: var(--section-sm); padding-bottom: var(--section-sm); }
.df-section-md { padding-top: var(--section-md); padding-bottom: var(--section-md); }
.df-section-lg { padding-top: var(--section-lg); padding-bottom: var(--section-lg); }

.df-section-pt-sm { padding-top: var(--section-sm); }
.df-section-pt-md { padding-top: var(--section-md); }
.df-section-pt-lg { padding-top: var(--section-lg); }

.df-section-pb-sm { padding-bottom: var(--section-sm); }
.df-section-pb-md { padding-bottom: var(--section-md); }
.df-section-pb-lg { padding-bottom: var(--section-lg); }

/* --------------------------------------------------------------------------
   TRANSITION UTILITIES
   -------------------------------------------------------------------------- */
.df-transition-fast { transition: all var(--transition-fast) !important; }
.df-transition-base { transition: all var(--transition-base) !important; }
.df-transition-slow { transition: all var(--transition-slow) !important; }

/* --------------------------------------------------------------------------
   FOCUS ACCESSIBLE
   -------------------------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--red-D11019);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}
/* --------------------------------------------------------------------------
   SECTION WAVE AFTER
   -------------------------------------------------------------------------- */

.has-wave::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 100%;
    height: 130px;
    background: var(--next-bgi);
    background-color: var(--next-bg);
    -webkit-mask: url("../../img/wave.svg") no-repeat center/cover;
    mask: url("../../img/wave.svg") no-repeat center/cover;
    -webkit-mask-size: cover;
    mask-size: cover;
    background-origin: content-box;
    
}

.has-wave.right-wave::after {
    transform:scaleX(-1);
}
.has-wave.bottom-wave::after {
    transform: scaleY(-1);
    bottom: -130px;
}
.has-wave.top-wave::after {
    top: -100px;
    transform:scaleX(-1);
    bottom:initial;
}


@media (max-width:992px) {
    .has-wave::after {
        -webkit-mask: url("../../img/wave-mobile.svg") no-repeat center/cover;
        mask: url("../../img/wave-mobile.svg") no-repeat center/cover;
        height: 220px;
    }

/*    .has-wave.bottom-wave::after {
        height: 120px;
    }*/
    .has-wave.bottom-wave::after {
        bottom: -120px;
    }
}
/*@media (max-width:769px) {
    .has-wave::after {
        height: 170px;
    }
    .has-wave.bottom-wave::after {
        bottom: -170px;
    }
}
@media (max-width:576px) {
    .has-wave::after {
        height: 120px;
    }
    .has-wave.bottom-wave::after {
        bottom: -120px;
    }
}*/

/* --------------------------------------------------------------------------
   DF SCROLL
   -------------------------------------------------------------------------- */


.df-scroll-area::-webkit-scrollbar {
    width: 4px;
    background-color: #F53446;
}

.df-scroll-area::-webkit-scrollbar-thumb {
    background-color: #F53446;
    border-radius: 5rem;
}

.df-scroll-area::-webkit-scrollbar-track {
    background-color: var(--neutral-E0E0E0);
}

/* --------------------------------------------------------------------------
   MINI WRAPPER
   -------------------------------------------------------------------------- */

@media (min-width:768px){
    .df-mini-wrapper {
        max-width: 430px;
    }
}

/* --------------------------------------------------------------------------
   SOCIAL PLATFORM CONTEXT
   data-platform verilen element ve altındaki her şey marka rengini alır.
   --platform-color: solid (metin/ikon) · --platform-bg: dolgu (gradient olabilir)
   -------------------------------------------------------------------------- */

[data-platform="linkedin"] {
    --platform-color: var(--brand-linkedin);
    --platform-bg: var(--brand-linkedin);
}

[data-platform="instagram"] {
    --platform-color: var(--brand-instagram);
    --platform-bg: var(--brand-instagram-bg);
}

[data-platform="facebook"] {
    --platform-color: var(--brand-facebook);
    --platform-bg: var(--brand-facebook);
}

[data-platform="youtube"] {
    --platform-color: var(--brand-youtube);
    --platform-bg: var(--brand-youtube);
}

[data-platform="x"] {
    --platform-color: var(--brand-x);
    --platform-bg: var(--brand-x);
}

/* --------------------------------------------------------------------------
   MASONRY — column tabanlı, media query'siz
   Kolon sayısı --masonry-cols, kolon genişliği --masonry-min ile sınırlanır;
   dar ekranda kolon sayısı otomatik düşer.
   -------------------------------------------------------------------------- */

.df-masonry {
    --masonry-cols: 3;
    --masonry-min: 280px;
    --masonry-gap: clamp(16px, 1.6vw, 24px);
    columns: var(--masonry-cols) var(--masonry-min);
    column-gap: var(--masonry-gap);
}

    .df-masonry > * {
        break-inside: avoid;
        margin-bottom: var(--masonry-gap);
    }