@import url("https://fonts.googleapis.com/css2?family=Raleway:wght@100;300;400;500;600&display=swap");

      :root{ --header-h: 160px; }

      *{
        font-family: 'Raleway', sans-serif;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        text-decoration: none;
        outline: none;
        border: none;
        text-transform: capitalize;
        transition: all .2s linear;
      }

      html{
        font-size: 62.5%;
        scroll-behavior: smooth;
        overflow-x: hidden;
      }

      html::-webkit-scrollbar{ width: 1rem; }
      html::-webkit-scrollbar-track{ background: #000; }
      html::-webkit-scrollbar-thumb{ background: #eacf4f; border-radius: 5rem; }

     body{
      background: url(../images/background.webp);
      background-attachment: fixed;
      background-position: center;
      overflow-x: hidden;
    }


      section{ padding: 3rem 9%; }

      .heading{ text-align: center; margin-bottom: 3rem; }
      .heading h3{
        font-size: 3rem;
        text-transform: uppercase;
        color: #fff;
        margin-top: 1rem;
      }

      .btn{
        display: inline-block;
        margin-top: 1rem;
        cursor: pointer;
        color: #fff;
        border: 0.2rem solid rgba(255,255,255,0.3);
        background: no-repeat;
        font-size: 1.7rem;
        padding: 1rem 3rem;
        border-radius: .8rem;
      }
      .btn:hover{ color: #000; background: #fff; }

      /* =========================
        HEADER (DESKTOP varsayılan)
        ========================= */
      .header{
        position: absolute;
        top: 0; left: 0; right: 0;
        z-index: 1000;
        background: transparent;
      }

      .header-top{
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        gap: 1.2rem;
        padding: 1.4rem 9%;
      }

      .header-left{ min-height: 1px; }

      .header-actions{
        display: inline-flex;
        justify-content: flex-end;
        align-items: center;
        gap: 1.2rem;
      }

      .logo{
        display: inline-flex;
        align-items: center;
        justify-content: center;
      }

      .logo img{
        width: 18rem;
        height: auto;
        display: block;
        filter: drop-shadow(0 6px 18px rgba(0,0,0,0.45));
      }

      .icons{
        font-size: 2.4rem;
        cursor: pointer;
        color: #fff;
        text-shadow: 0 2px 10px rgba(0,0,0,0.65);
      }
      .icons:hover{ color: #eacf4f; }
      .fa-times{ transform: rotate(180deg); }

      /* Desktop'ta hamburger kesin gizli */
      #menu-btn{ display: none !important; }

      .navbar{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        gap: 1.4rem;
        padding: 1.1rem 9% 1.6rem;
        background: transparent;
      }

      .navbar a{
        font-size: 1.7rem;
        color: #fff;
        padding: .6rem 0;
        border-radius: .8rem;
        line-height: 1.2;
        white-space: nowrap;
        text-shadow: 0 2px 10px rgba(0,0,0,0.65);
        background: transparent;
        position: relative;
        margin: 0 .9rem;
      }

      .navbar a::after{
        content: "";
        position: absolute;
        left: 50%;
        bottom: -0.4rem;
        transform: translateX(-50%);
        width: 0%;
        height: 2px;
        background: #eacf4f;
        transition: width .25s ease;
      }

      .navbar a:hover{
        color: #eacf4f;
        background: transparent;
        text-shadow: 0 2px 10px rgba(0,0,0,0.65);
      }

      .navbar a:hover::after,
      .navbar a.active::after{
        width: 100%;
      }

      .search-form{
        height: 6.5rem;
        padding: 0 2rem;
        display: flex;
        align-items: center;
        background: rgba(0,0,0,0.75);
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
        z-index: 1001;
      }
      .search-form.active{
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
      }
      .search-form input{
        width: 100%;
        background: none;
        text-transform: none;
        font-size: 1.6rem;
        color: #fff;
      }

      /* Desktop'ta arama ikon+form yok */
      @media (min-width: 992px){
        #search-btn{ display: none !important; }
        .search-form{ display: none !important; }
      }

      /* Bu sayfanın ilk section'ı header altında kalmasın */
      .page-top{
        padding-top: calc(var(--header-h) + 2rem);
      }

      /* MENU SECTION */
      .menu .box-container{
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(31rem, 1fr));
        gap: 2rem;
      }

      .menu .box-container .box{
        text-align: center;
        background: transparent;
        border: none;
        border-radius: 0;
        padding: 2rem 1.5rem;
        overflow: visible;
      }

      .menu .box-container .box:hover img{ transform: translateY(0.8rem); }

      .menu .box-container .box img{
        height: 25rem;
        object-fit: contain;
        max-width: 100%;
      }

      .menu .box-container .box .content{ padding: 1rem 0 0; }

      .menu .box-container .box .content .stars{ margin-bottom: 1.2rem; }
      .menu .box-container .box .content .stars i{ font-size: 1.7rem; color: #eacf4f; }

      .menu .box-container .box .content h3{
        font-size: 2rem;
        text-transform: uppercase;
        color: #fff;
        margin-bottom: .8rem;
        text-shadow: 0 2px 10px rgba(0,0,0,0.6);
      }

      .menu .box-container .box .content .price{
        font-size: 1.55rem;
        line-height: 1.9;
        color: #ddd;
        text-shadow: 0 2px 10px rgba(0,0,0,0.6);
        min-height: 7.5rem;
      }

      /* PHONE ICON (sadece mobilde) */
      .phone-icon{
        position: fixed;
        right: 2rem;
        bottom: 2rem;
        z-index: 2000;
        display: none;
      }
      .phone-icon a{
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 5.6rem;
        height: 5.6rem;
        border-radius: 50%;
        background: #eacf4f;
        color: #000;
        font-size: 2.2rem;
        box-shadow: 0 0.8rem 2rem rgba(0,0,0,0.35);
      }
      .phone-icon a:hover{ transform: translateY(-2px); }

      /* FOOTER */
      .footer{
        text-align: center;
        background: linear-gradient(transparent, #000);
        padding-bottom: 2rem;
      }
      .footer .credit{
        font-size: 2rem;
        line-height: 2;
        color: #aaa;
        padding-top: 2rem;
      }
      .footer .credit span{ color: #eacf4f; }
      .footer .credit span a{ color: #eacf4f; text-decoration: none; }
      .footer .credit span a:hover{
        text-decoration: underline;
        text-underline-offset: 0.4rem;
      }

      /* =========================
        RESPONSIVE
        ========================= */
      @media (max-width: 1200px){
        section{ padding: 3rem 2rem; }
        .header-top{ padding: 1.2rem 2rem; }
        .navbar{ padding: 1.1rem 2rem 1.5rem; }
        .logo img{ width: 16.5rem; }
      }

      @media (max-width: 991px){
        html{ font-size: 55%; }

        .header{
          position: fixed;
          background: #000;
        }

        .header-top{
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 1.2rem 2rem;
        }

        .header-left{ display: none; }

        .logo img{
          width: 13.4rem;
          filter: none;
        }

        #menu-btn{ display: inline-flex !important; }
        #search-btn{ display: inline-flex !important; }

        .navbar{
          position: absolute;
          top: 100%;
          left: 0; right: 0;
          background: #000;
          flex-direction: column;
          align-items: flex-start;
          justify-content: flex-start;
          gap: 0;
          padding: 1rem 2rem;
          clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
          border-radius: 0 0 1.2rem 1.2rem;
          z-index: 1000;
        }

        .navbar.active{
          clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        }

        .navbar a{
          width: 100%;
          padding: 1.4rem 0.6rem;
          border-radius: .8rem;
          background: transparent;
          text-shadow: none;
          margin: 0;
        }

        .navbar a::after{
          left: .6rem;
          transform: none;
          bottom: .6rem;
        }

        .navbar a:hover::after,
        .navbar a.active::after{
          width: calc(100% - 1.2rem);
        }

        .navbar a + a{
          border-top: 0.1rem solid rgba(255,255,255,0.10);
        }

        .phone-icon{ display: block; }
      }

      @media (max-width: 450px){
        html{ font-size: 50%; }
        .logo img{ width: 12.6rem; }
      }