@font-face {
    font-family: 'Kabut Hitam';
    src: url('https://pindrinks.com/KabutHitam.woff2') format('woff2'),
        url('https://pindrinks.com/KabutHitam.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@media (min-width:1200px) {
    .forMobile {
        display:none !important;
    }
}
@media (max-width:1190px) {
    .forDesktop {
        display:none !important;
    }
    .container {
        max-width: 100%;
    }
}

.wrapper {
    width: 100%;
    max-width: 1530px;
    margin: 20px auto 0;
}
.container {
    width: 100%;
    max-width: 1330px;
    margin: 0 auto;
}
.container-fluid {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
}
#headerLogo .logo {
    height: 100%;
    max-height: 65px;
}
#headerLogo .logo img {
    height: 65px;
}
.hover-effect {
    display: block;
    transition: transform 0.3s ease;
}
.menuIcon:hover .hover-effect {
    transform: rotate(-15deg);
}
.shop-icon:hover .hover-effect {
    transform: rotate(-15deg);
}
.shop-icon sup {
    background: var(--bg-info);
    border-radius: 100%;
    position: absolute;
    width: 23px;
    height: 23px;
    right: -13px;
    top: -3px;
}
#header-right-user {
    background: var(--bg-info);
    border-radius: 22px;
    padding: 0 4%;
    min-height: 47px;
    height: auto;
}
#header-right-user a.login {
    color: var(--color-ten);
}
#header-right-cart {
    padding-top: 2%;
}

@media (max-width:1190px) {
    .mobile-pindrinks .hero {
        top: 0;
        padding: 0 2px;
    }

    /* HEADER */
    header#headerMain {
        padding: 0 20px;
        margin-top: 15px;
    }
    #headerContainer {
        height: 100px;
        align-items: flex-start !important;
    }
    #headerMenu {
        order: 1;
        justify-content: flex-start;
        position: relative;
        left: -20px;
    }
    header.headerMainScroll #headerMenu {
        top: 7px;
        left: -22px;
    }
    #headerRight {
        order: 3;
        position: relative;
        top: 25px;
        right: 5px;
    }
    /*#headerLogo {
        order: 2;
        position: relative;
        top: 45px;
    }*/
    #headerLogo {
        order: 2;
        position: relative;
        top: 15px;
    }
    #headerRight #cartPrice {
        display: none;
    }
    #headerRight .shop-icon sup {
        top: auto;
        bottom: 13px;
    }
    #headerMenu img {
        height: 90%;
        width: 100%;
    }
    /* HEADER */
}

/* MENU POPUP */
/* Toggle kapsayıcı başlangıçta gizli olsun */
/* 1) Menü konteyneri: başlangıçta gizli, sadece yukarıdan inme animasyonu */
.menu-toggle-container847 {
    position: absolute;
    top: 3vw;
    left: 12vw;
    width: 2vw;
    min-width: 20vw;
    background: var(--bg-white);
    box-shadow: 20px 23px 20px -6px rgba(0, 0, 0, 0.25);
    border-radius: 0 7vw 3vw 3vw;
    padding: 2vw 2.5vw;
    z-index: 999;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-10px);
    transition:
      transform 0.25s ease-out,
      opacity   0.25s ease-out;
  }
a#menuButtonToggle847 {
    z-index: 1000;
}
/* 2) Açık hâl */
.menu-toggle-container847.show {
    visibility: visible;   /* hemen görünür */
    opacity: 1;            /* tam opak */
    transform: translateY(0);
    transition-delay: 0s;
}
.menu-toggle-container847.show a.logo {
    display: flex;
}
.menu-toggle-container847.show a.logo img.logoImg {
    width: 125px;
}
/* 3) Overlay: aynı fade mantığı */
.menu-overlay {
    position: fixed;
    inset: 0;
    background: transparent;
    z-index: 998;

    visibility: hidden;
    opacity: 0;
    transition: opacity 0.25s ease-out, visibility 0s linear 0.25s;
}
.menu-overlay.show {
    visibility: visible;
    opacity: 1;
    transition-delay: 0s;
}
/* .no-scroll (opsiyonel: arka planı kaydırmayı kapatmak isterseniz) */
.no-scroll {
    overflow: hidden;
}

/* Tab menü (Giriş Yap, Hesap Oluştur) */
.menu-tab-nav847 {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}
.menu-tab-link847 {
    flex: 1;
    text-align: center;
    cursor: pointer;
    font-weight: 500;
    transition: 0.2s;
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: var(--bg-one);
}
.menu-tab-link847.active {
    border-bottom: 2px solid #90D7E7;
    font-weight: bold;
}
.menu-tab-content847 {
    display: none;
    padding: 30px 0 0;
}
.menu-tab-content847.active {
    display: block;
}

/* Örnek form stilleri */
#menuForm847 {
    display: flex;
    flex-direction: column;
}
#menuForm847 button {
    margin-top: 30px;
    cursor: pointer;
    border: none;
    background: var(--bg-one);
    color: var(--border-secondary);
    font-size: 1.2rem;
    font-weight: 600;
    min-height: 50px;
    width: 100%;
    border-radius: 33px;
}
#menu-bottomButton {
    margin-top: 70px;
}
#menu-bottomButton button {
    background: var(--bg-one);
    color: var(--bg-white);
    border-radius: 33px;
    min-height: 50px;
    gap: 10px;
    max-height: 50px;
    font-size: 1rem;
}
#menu-bottomButton button.login-page-button {
    border: none;
    background: var(--bg-one);
    color: var(--bg-white);
    border-radius: 22px;
    max-height: 45px;
    min-height: 45px;
}
#menu-bottomButton button.registerForm847 {
    border: none;
    background: var(--bg-blue);
    color: var(--bg-white);
    min-height: 45px;
    border-radius: 22px;
    margin: auto;
    font-weight: inherit;
}
.menu-tab-content847.active nav {
    width: 100%;
}
.menu-tab-content847.active nav ul {
    width: 100%;
}
.menu-tab-content847.active nav ul li {
    min-height: 60px;
    width: 100%;
    align-items: center;
    border-bottom: 1px solid var(--bg-one);
}
.menu-tab-content847.active nav ul li a {
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    color: var(--bg-one);
}

@media (max-width:1499px) and (min-width:1201px) {
    .login-toggle-container847.show {
        top: 7vw !important;
        right: 1vw !important;
    }
    .menu-toggle-container847.show {
        left: 3vw;
        top: 5vw;
        padding: 2vw 2vw;
    }
    .menu-tab-content847.active {
        padding-top: 10px;
    }
    .menu-toggle-container847.show a.logo img.logoImg {
        width: 7vw;
    }
    #menu-bottomButton {
        margin-top: 2vw;
    }
    #menu-bottomButton button {
        font-size: 0.8rem;
    }
    .menu-tab-content847.active nav ul li a {
        font-size: 0.9rem;
        gap: 15px;
    }
    .menu-tab-content847.active nav ul li {
        min-height: 3vw;
    }
    #menu-bottomButton button.login-page-button {
        max-height: 2.5vw;
        min-height: 2.5vw;
    }
    #menu-bottomButton button.registerForm847 {
        max-height: 2.5vw;
        min-height: 2.5vw;
    }
    .login-tab-content847.active {
        padding: 5px 15px 15px;
    }
    .login-tab-content847 button {
        font-size: 0.8rem;
    }
    #loginForm847 button {
        font-size: 0.8rem !important;
    }
    #tabRegisterForm847 .custom-checkbox {
        font-size: 0.8rem;
    }
    #tabRegisterForm847 span.checkmark + a {
        font-size: 0.8rem;
    }
    button.registerForm847 {
        font-size: 0.8rem;
    }
    button.registerForm847 {
        font-size: 0.8rem;
    }
    #tabRegisterForm847 input.custom {
        padding-top: 8px;
        padding-bottom: 8px;
        font-size: 0.8rem;
    }
    #tabRegisterForm847 .custom-checkbox {
        margin-top: 10px;
        padding-left: 30px;
    }
    #tabRegisterForm847 span.checkmark {
        width: 18px;
        height: 18px;
    }
    .login-tab-link847 {
        min-height: 50px;
        font-size: 0.8rem;
    }
    button#loginButton {
        min-height: 30px;
        margin-top: 10px;
    }
}

@media (max-width:1600px) and (min-width:1500px) {
    .login-toggle-container847.show {
        top: 7vw !important;
        right: 2vw !important;
    }
    .menu-toggle-container847.show {
        left: 5vw;
        top: 4vw;
        padding: 2vw 2vw;
    }
    .menu-tab-content847.active {
        padding-top: 10px;
    }
    .menu-toggle-container847.show a.logo img.logoImg {
        width: 7vw;
    }
    #menu-bottomButton {
        margin-top: 2vw;
    }
    #menu-bottomButton button {
        font-size: 0.9rem;
    }
    .menu-tab-content847.active nav ul li a {
        font-size: 1rem;
        gap: 15px;
    }
    .menu-tab-content847.active nav ul li {
        min-height: 3vw;
    }
    #menu-bottomButton button.login-page-button {
        max-height: 2.5vw;
        min-height: 2.5vw;
    }
    #menu-bottomButton button.registerForm847 {
        max-height: 2.5vw;
        min-height: 2.5vw;
    }
    .login-tab-content847.active {
        padding: 5px 15px 15px;
    }
    .login-tab-content847 button {
        font-size: 0.9rem;
    }
    #loginForm847 button {
        font-size: 0.9rem !important;
    }
    #tabRegisterForm847 .custom-checkbox {
        font-size: 0.9rem;
    }
    #tabRegisterForm847 span.checkmark + a {
        font-size: 0.9rem;
    }
    button.registerForm847 {
        font-size: 0.9rem;
    }
    button.registerForm847 {
        font-size: 0.9rem;
    }
    #tabRegisterForm847 input.custom {
        font-size: 0.9rem;
    }
    #tabRegisterForm847 .custom-checkbox {
        margin-top: 10px;
        padding-left: 30px;
    }
    #tabRegisterForm847 span.checkmark {
        width: 18px;
        height: 18px;
    }
    .login-tab-link847 {
        min-height: 50px;
        font-size: 0.9rem;
    }
    button#loginButton {
        min-height: 30px;
        margin-top: 10px;
    }
}

@media (max-width:1190px) {
    #menu-bottomButton button img {
        width: auto;
        height: 70%;
    }
    .menu-toggle-container847.show {
        right: auto;
        width: 100%;
        left: 40px;
        border-top-left-radius: 0;
        border-top-right-radius: 130px;
        min-width: 390px;
        top: 40px;
        box-shadow: 10px 20px 25px -5px rgba(0, 0, 0, 0.25);
    }
    .menu-tab-content847.active {
        width: 100%;
    }
    .menu-toggle-container847.show nav ul li img {
        height: 22px !important;
        object-fit: contain;
        width: 22px !important;
    }
    .menu-toggle-container847.show a.logo img {
        width: 125px !important;
    }
    .menu-toggle-container847.show a.logo {
        margin-top: 10px;
    }
    .menu-toggle-container847.show {
        min-width: 90vw;
        left: 5vw;
    }
    #headerMenu + #headerLogo {
        z-index: 1001;
    }
    .menu-toggle-container847.show a.logo {
        margin-top: 10px;
        display: none;
    }
}

@media (min-width:320px) and (max-width:359px) {
    .menu-toggle-container847.show a.logo {
        margin-top: 10px;
    }
    #menu-bottomButton {
        margin-top: 30px;
    }
    #menu-bottomButton button {
        font-size: 1rem;
    }
}
@media (min-width:360px) and (max-width:374px) {
    .menu-toggle-container847.show a.logo {
        margin-top: 10px;
    }
    #menu-bottomButton button {
        font-size: 1rem;
    }
}
@media (min-width:375px) and (max-width:389px) {
    .menu-toggle-container847.show a.logo {
        margin-top: 10px;
    }
    #menu-bottomButton button {
        font-size: 1rem;
    }
}
@media (min-width:390px) and (max-width:410px) {
    .menu-toggle-container847.show a.logo {
        margin-top: 10px;
    }
    #menu-bottomButton button {
        font-size: 1rem;
    }
}
@media (min-width:411px) and (max-width:420px) {
    .menu-toggle-container847.show a.logo {
        margin-top: 10px;
    }
    #menu-bottomButton button {
        font-size: 1rem;
    }
}
/* MENU POPUP */

/* HEADER SCROLL */
header.headerMainScroll {
    position: sticky;
    top: 0;
    z-index: 99;
}
header.headerMainScroll div#headerLogo {
    display: none !important;
}
header.headerMainScroll div#headerRight {
    display: none !important;
}
header.headerMainScroll #headerRightScroll-container {
    display: flex !important;
}
header.headerMainScroll #headerRightScroll-container .shop-icon sup {
    background: var(--button-secondary);
    color: var(--bg-one);
    font-weight: 500;
    right: 20px;
    top: 21px;
}
header.headerMainScroll .menu-toggle-container847.show {
    left: 2.5%;
    top: 40%;
}
/*header.headerMainScroll #headerRightScroll-container.cartopenicon {
    position: absolute !important;
    right: 25%;
    z-index: 1003;
}*/

@media (max-width:1190px) {
    header.headerMainScroll #headerRightScroll-container {
        display: flex !important    ;
        order: 3;
        right: -20px;
        top: 5px;
    }
    header.headerMainScroll #headerRightScroll-container.cartopenicon {
        right: auto;
        left: 8px;
    }
    header.headerMainScroll .menu-toggle-container847.show {
        left: 40%;
        right: auto;
        border-top-left-radius: 0;
        border-top-right-radius: 130px;
    }
    #headerRightScroll img {
        height: 87px;
    }
    .mobile-pindrinks-checkout #header-right-cart {
        display: none !important;
    }
    .menu-toggle-container847 {
        min-width: auto;
    }
}

@media (max-width:360px) and (min-width:321px) {
    header.headerMainScroll #headerRightScroll-container.cartopenicon {
        right: auto;
        left: 2px;
    }
    #headerRightScroll img {
        height: 78px;
    }
}
@media (max-width:320px) and (min-width:300px) {
    header.headerMainScroll #headerRightScroll-container.cartopenicon {
        right: auto;
        left: 0;
    }
    #headerRightScroll img {
        height: 68px;
    }
}
@media (max-width:375px) and (min-width:361px) {
    header.headerMainScroll #headerRightScroll-container.cartopenicon {
        right: auto;
        left: 3px;
    }
    #headerRightScroll img {
        height: 78px;
    }
}
@media (max-width:390px) and (min-width:376px) {
    header.headerMainScroll #headerRightScroll-container.cartopenicon {
        right: auto;
        left: 2px;
    }
    #headerRightScroll img {
        height: 82px;
    }
}
@media (max-width:414px) and (min-width:391px) {
    header.headerMainScroll #headerRightScroll-container.cartopenicon {
        right: auto;
        left: 4px;
    }
    #headerRightScroll img {
        height: 87px;
    }
}
@media (max-width:430px) and (min-width:415px) {
    header.headerMainScroll #headerRightScroll-container.cartopenicon {
        right: auto;
        left: 8px;
    }
    #headerRightScroll img {
        height: 87px;
    }
}
/* HEADER SCROLL */

/* NAVBAR */
@media (max-width: 768px) {
  .pindrinks .mobil-gorunur {
    display: flex;
  }
}
@media (min-width: 769px) {
    .pindrinks .mobil-gorunur {
      display: none !important;
    }
}
@media (max-width:1190px) {
    .navigation--list .navigation__item svg {
        width: 100%;
        height: 22px;
    }
    .navigation--list .navigation__item sup {
        position: absolute;
        top: 0;
        right: -8px;
        font-size: 0.85em;
    }
    .navigation--list .navigation__item:nth-child(4) svg {
        height: 26px;
    }
    .navigation--list .navigation__item:nth-child(1) svg {
        height: 28px;
    }
}
.navigation--list {
    background-color: #fff;
    border-top: 1px solid #ccc;
    bottom: 0;
    left: 0;
    position: fixed;
    width: 100%;
    z-index: 10002;
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3rem;
}
.navigation--list .navigation__content {
    align-items: center;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
}
.navigation--list .navigation__item {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    justify-content: center;
    position: relative;
}
.navigation--list .navigation__item span {
    font-size: 1rem;
    line-height: 1;
}
.navigation--list .navigation__item img {
    width: 25px;
}

.navigation--list .navigation__item:nth-child(3) {
    display: none;
}
/* NAVBAR */

@media (max-width:1190px) {
    .mobile-pindrinks #pinsearchfoo {
        display: none !important;
    }
}

@media (min-width:320px) and (max-width:520px) {
    .menu-tab-content847.active nav ul li a {
        font-size: 1rem;
    }
    .menu-toggle-container847.show {
        padding: 6vw 8vw;
        border-bottom-left-radius: 10vw;
        border-bottom-right-radius: 10vw;
    }
    .menu-tab-content847.active nav ul li {
        min-height: 50px;
    }
    .menu-tab-content847.active {
        padding-top: 8vw;
    }
    header.headerMainScroll .menu-toggle-container847.show {
        left: 5vw;
    }
}

@media (min-width:768px) and (max-width:1190px) {
    .menu-toggle-container847.show {
        min-width: 45vw;
        left: 5vw;
        padding: 2vw 4vw;
    }
}


    #menu-bottomButton .account-button {
        background: var(--bg-one);
        border-radius: 33px;
        min-height: 50px;
        color: var(--bg-white);
        gap: 5px;
    }
    #menu-bottomButton .account-button:hover {
        background: var(--bg-blue);
    }

@media (max-width:1190px) {
    #menu-bottomButton .account-button {
        height: 40px;
        min-height: 40px;
        font-size: 0.8rem;
    }
    #menu-bottomButton .account-button img {
        height: 60%;
        width: auto;
    }
}