@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.jpg);
      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; }
    }