@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');



* { margin:0; padding:0; box-sizing:border-box;font-family: "Poppins", sans-serif; }
body {
  font-family: 'Poppins', sans-serif;
  background: #fff;
  color: var(--text);
  overflow-x:hidden;
  line-height:1.5;
  text-align: center; /* Genel ortalama */
}

.gt_float_switcher {
    border-radius: 5px !important;
}

.gt_float_switcher .gt_options a {
    font-size: small !important;
    font-family: system-ui !important;
}

.gt_float_switcher img {
    width: 25px !important;
}

.gt_float_switcher .gt-selected .gt-current-lang span.gt-lang-code {
    font-family: system-ui !important;
    font-weight: 400 !important;
    background: #ebebeb !important;
    padding: 0px 10px 0 10px !important;
    display: none !important;
    border-radius: 10px !important;
}

/* Bayrak ve metin hizalaması 07.10.2025*/
.gt_float_switcher .gt_options a {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 10px !important;
  background: transparent !important;
  border: none !important;
}

.gt_float_switcher .gt_options a img {
  width: 20px !important;
  height: 14px !important;
  object-fit: cover !important;
  border-radius: 2px !important;
  margin: 0 !important;
}

.gt_float_switcher .gt_options a span {
  font-size: 14px !important;
  color: #000 !important;
  line-height: 1.4 !important;
}


/* ÜST ÇİZGİ + LOGO */
.line-logo{
  position: sticky; 
  top: 5px;
  display: flex;
  align-items: center;
  justify-content: flex-start;        /* logo solda */
  gap: 12px;
  height: 56px;
  padding: 0 16px;
  margin: 12px auto;                  /* sayfa içinde üst boşluk + ortalama */
  max-width: 1200px;
  background: #ffffff;
  border: 1px solid #eceff3;
  border-radius: 10px;
  box-shadow: 0 6px 18px -12px rgba(15,23,42,.16);
  z-index: 999;
}

.line-logo::before,
.line-logo::after{ content:none !important; }


.line-logo img{
  height: 40px;        /* 2. görseldeki gibi ince */
  width: auto;
  margin: 0;
  object-fit: contain;
  display: block;
}


/* Genel animasyon */
.animate-in {
  opacity:0; transform: translateY(30px);
  animation:fadeInUp .6s forwards;
}
.delay-1 { animation-delay:.1s; }
.delay-2 { animation-delay:.2s; }
.delay-3 { animation-delay:.3s; }
.delay-4 { animation-delay:.4s; }
.delay-5 { animation-delay:.5s; }
.delay-6 { animation-delay:.6s; }
@keyframes fadeInUp {
  to { opacity:1; transform: translateY(0); }
}

/* Bölümler */
section { padding:2rem 1rem; }
h2, h3, .rec-item span, .ge-item span, .kategori-item span {
  margin:0 auto 1rem;
}
h2 { font-weight:600; color:var(--accent); }
h3 { font-weight:600; color:#fff; }

/* 1) Recommendations */
.rec-list {
  display:flex; gap:1rem; overflow-x:auto; padding-bottom:1rem;
}

.kategori-item {
    position: relative;
    flex: 0 0 160px;
    height: 170px;
    background: var(--card-bg);
    border-radius: 16px;
    box-shadow: 0 8px 0px var(--shadow-light);
    cursor: pointer;
    overflow: hidden;
    transition: var(--transition);
    text-align: center;
}
.kategori-item::before {
  content:''; position:absolute; inset:0;
  background: url("data:image/svg+xml,%3Csvg width='4' height='4' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 0 L0 4' stroke='%23eee' stroke-width='1'/%3E%3C/svg%3E");
  opacity:.1;
}
.kategori-item:hover {
  box-shadow:0 8px 10px var(--shadow-dark);
}


.rec-item {
    position: relative;
    flex: 0 0 160px;
    height: 140px;
    background: var(--card-bg);
    border-radius: 16px;
    box-shadow: 0 8px 0px var(--accent-solid);
    cursor: pointer;
    overflow: hidden;
    transition: var(--transition);
    text-align: center;
}
.rec-item::before {
  content:''; position:absolute; inset:0;
  background: url("data:image/svg+xml,%3Csvg width='4' height='4' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 0 L0 4' stroke='%23eee' stroke-width='1'/%3E%3C/svg%3E");
  opacity:.1;
}
.rec-item:hover {
  box-shadow:0 8px 10px var(--shadow-dark);
}
.rec-thumb {
   height: 88px;
    width: 100%;
    background-size: cover;
    background-position: center;
}

.kategori-thumb {
   height: 120px;
    width: 100%;
    background-size: cover;
    background-position: center;
}

.quick-cats a{
  text-decoration:none;
  color:inherit;
  display:block;
}

@media (max-width: 480px){
  .quick-cats{ gap:12px; }
  .qc-item{ aspect-ratio: 3 / 2; padding:10px; }
  .qc-item::before{ inset:8px 10px 50px; }
  .qc-item h3{ font-size:15px; padding:10px; }
}

.kategori-item p{
  position: relative;
    top: -4px;
    font-size: 13px;
    font-weight: 400;
}

.kategori-thumb img {
      width: 90%;
    margin-top: 5px;
    height: 92%;
    object-fit: cover;
    border-radius: 16px;
}

.feedback h2{
font-weight: 600;
    background: linear-gradient(to right, #0000000a, rgba(173, 41, 41, 0));
    text-align: left;
    padding: 10px;
    font-size: 16px;
    color: #000000;
    border-radius: 10px;
    text-transform: uppercase;
}

.rec-item p{
  position: relative;
    top: -4px;
    font-size: 15px;
    color: #000000;
    font-weight: 500;
}
.rec-thumb img {
      width: 90%;
    margin-top: 5px;
    height: 92%;
    object-fit: cover;
    border-radius: 16px;
}
.rec-item span {
  display:block; padding:.5rem 0 0 0;font-weight:600;margin:0px;font-size: 12px; color:#000000;
}

.kategori-item span {
  display:block; padding:.3rem 0 0 0;font-weight:600;margin:0px;font-size: 13px; color:#000000;
}

/* 2) Quick cats — mobilde yan yana sabit */
.quick-cats {
  display: grid;
  grid-template-columns: 1fr; /* varsayılan: mobil için 1 sütun */
  gap: 16px;
}

/* Masaüstü için (992px ve üzeri) */
@media (min-width: 992px) {
  .quick-cats {
    grid-template-columns: 1fr 1fr; /* 2 sütun */
  }
}
@media (max-width: 500px) {
  .quick-cats { grid-template-columns:1fr 1fr; }
}
.qc-item{
  position:relative;
  /* kart */
  border:1px solid #e5e7eb;
  border-radius:10px;
  background-color:#fff;
  box-shadow:0 8px 20px -12px rgba(2,6,23,.18);
  overflow:hidden;
  background-position-y: top!important;
  /* görsel */
  background-repeat:no-repeat;
  background-position:top 14px;   /* görsel üstte ortalı */
  background-size:contain;           /* görsel tamamen görünsün (ekran görüntüsündeki gibi) */

  /* oran + iç boşluk */
  aspect-ratio: 4 / 3;               /* kutu oranı */
  padding:12px;                      /* içten beyaz pay */
}

@media (min-width: 768px) {
  .app {
    padding-left: 30%;
    padding-right: 30%;
  }
}


/* Karartma katmanı */
.qc-item::before{
  content:"";
  position:absolute; inset:10px 12px 56px;   /* alt şerit için boşluk bırak */
  background:transparent;
  border:0px solid #eceff3;
  border-radius:6px;
  pointer-events:none;
}

.qc-item h3{
  position:absolute;
  left:0; right:0; bottom:0;
  margin:0;
  padding:12px 10px;
  background:#fff;                 /* gri şerit */
  text-align:center;
  font-weight:500;
  font-size:16px;
  text-transform:uppercase;
  color:#000;
  border-top:1px solid #e5e7eb;
}


.quick-cats a:hover .qc-item{
  transform:translateY(-2px);
  box-shadow:0 16px 30px -14px rgba(2,6,23,.22);
  transition:.18s ease;
}

.qc-item h2,
.qc-item h4,
.qc-item h1,
.qc-item h6,
.qc-item h5 {
  font-weight: 300;
  color: #fff;
  margin: 0;
  position: relative;
  z-index: 2;
}

.qc-item p{
  z-index: 2;
    color: white;
    text-align: left;
    font-size: 10px;
}


.recommendations h2{
font-weight: 600;
    background: linear-gradient(to right, #0000000a, rgba(173, 41, 41, 0));
    text-align: left;
    padding: 10px;
    font-size: 16px;
    color: #000000;
    border-radius: 10px;
    text-transform: uppercase;
}

/* 3) Grid eight */
.grid-eight {
  display:grid; grid-template-columns:1fr 1fr; gap:1rem;
}
.ge-item {
position: relative;
    flex: 0 0 160px;
    height: 140px;
    background: var(--card-bg);
    border-radius: 16px;
    box-shadow: 0 8px 0px var(--shadow-light);
    cursor: pointer;
    overflow: hidden;
    transition: var(--transition);
    text-align: center;
}
.ge-item::before {
  content:''; position:absolute; inset:0;
  background: url("data:image/svg+xml,%3Csvg width='4' height='4' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0 L4 4' stroke='%23eee' stroke-width='1'/%3E%3C/svg%3E");
  opacity:.07;
}
.ge-item:hover {
  transform:translateY(-8px);
  box-shadow:0 12px 32px var(--shadow-light),0 24px 64px var(--shadow-dark);
}
.ge-thumb {
  width:60px; height:60px;
  background-size:cover; background-position:center;
  border-radius:8px; margin-bottom:.75rem;
}
.grid-eight .ge-item:nth-child(1) .ge-thumb { background-image:url("https://via.placeholder.com/400x300"); }
.grid-eight .ge-item:nth-child(2) .ge-thumb { background-image:url("https://via.placeholder.com/400x300"); }
.grid-eight .ge-item:nth-child(3) .ge-thumb { background-image:url("https://via.placeholder.com/400x300"); }
.grid-eight .ge-item:nth-child(4) .ge-thumb { background-image:url("https://via.placeholder.com/400x300"); }
.grid-eight .ge-item:nth-child(5) .ge-thumb { background-image:url("https://via.placeholder.com/400x300"); }
.grid-eight .ge-item:nth-child(6) .ge-thumb { background-image:url("https://via.placeholder.com/400x300"); }
.grid-eight .ge-item:nth-child(7) .ge-thumb { background-image:url("https://via.placeholder.com/400x300"); }
.grid-eight .ge-item:nth-child(8) .ge-thumb { background-image:url("https://via.placeholder.com/400x300"); }
.ge-item span { font-weight:600; color:var(--text); }

/* 4) Big card */
.big-card-section .qc-item{
  border: 2px solid var(--accent-light);
  display: flex;flex-direction: column;
 
}
.big-card-section .big-card:hover {
  background: var(--accent);
  transform:translateY(-6px);
  box-shadow:0 12px 32px var(--shadow-light),0 24px 64px var(--shadow-dark);
}

hr{
      border-radius: 40px;
    width: 60%;
    border: 1px solid #000;
    justify-self: center;
}

/* 5) Top choices */
.top-choices .top-list {
  display:flex; gap:1rem; overflow-x:auto; padding-bottom:1rem;
}
.top-item {
  position:relative; flex:0 0 120px; height:120px;
  background: var(--card-bg); border-radius:16px;
  box-shadow:0 8px 24px var(--shadow-light),0 16px 48px var(--shadow-dark);
  cursor:pointer; overflow:hidden; transition:var(--transition);
  text-align:center;
}
.top-item:hover {
  transform:translateY(-8px);
  box-shadow:0 12px 32px var(--shadow-light),0 24px 64px var(--shadow-dark);
}

/* 6) Restaurant photo */
.restaurant-card {
  width: 100%;
  max-width: 800px;
  border-radius: 16px;
  overflow: hidden;
  margin: 0 auto;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15), 0 16px 48px rgba(0,0,0,0.1);
}

.restaurant-image {
  position: relative;
  width: 100%;
  height: 250px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: flex-end; /* Alt kısma hizala */
}

.restaurant-info-gradient {
width: 100%;
    padding: 10px;
    margin: 0px;
    color: #fff;
    background: linear-gradient(178deg, rgb(0 174 243 / 0%) 10%, #000000b3 30%);
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.restaurant-info-gradient h3 {
  margin: 0;
  font-size: 24px;
      text-shadow: 0px 2px #000000;
  font-weight: 600;
}

.restaurant-info-gradient p {
  margin: 4px 0 0;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.4;
}

/* Mobil uyum */
@media (max-width: 767px) {
  .restaurant-image {
    height: 180px;
  }

  .restaurant-info-gradient h3 {
    font-size: 20px;
  }

  .restaurant-info-gradient p {
    font-size: 14px;
  }
}

footer{
  user-select: none;
      margin-bottom: 30px;
}

/* 7) Feedback */
.feedback textarea {
  width:100%; min-height:100px; padding:1rem;
  border-radius:12px; border:2px solid var(--shadow-light);
  resize:none; font-family:inherit; box-shadow:inset 0 4px 12px var(--shadow-light);
}
.feedback button {
    background: linear-gradient(90deg, rgba(42, 123, 155, 0) -15%, #000 25%);
    color: #fff;
    border: none;
    padding: 3px 5%;
    border-radius: 12px;
    cursor: pointer;
    float: right;
    font-weight: 500;
    box-shadow: 0 8px 24px var(--shadow-light), 0 16px 48px var(--shadow-dark);
    transition: var(--transition), transform .2s;
}
.feedback button:hover {
  background: var(--accent-light);
  transform:translateY(-4px);
}

/* 8) Contact Info */
.contact-info {
  background: var(--card-bg);
  border-radius: 12px;
  box-shadow: 0 8px 24px var(--shadow-light), 0 16px 48px var(--shadow-dark);
  padding: 1.5rem;
  margin: 2rem 1rem;
  text-align: center;
}
.contact-info div {
  margin: 0.75rem 0;
  font-size: 1rem;
}
.contact-info strong {
  color: var(--accent);
}

/* Modal */
.modal{
  position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
  background: radial-gradient(1200px 600px at 30% 10%, rgba(255,77,46,.08), transparent 50%),
              rgba(9,14,24,.62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity:0; pointer-events:none; transition:opacity .22s ease;
  z-index:1000;
}
.modal.show{ opacity:1; pointer-events:auto; }
.modal-content{
  width:min(92vw, 440px);
  border-radius:18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.96)) padding-box,
    linear-gradient(180deg, #ffffff, #fafbfd) border-box;
  border:1px solid rgba(231,233,238,.9);
  box-shadow: 0 28px 80px -24px rgba(12,17,29,.35);
  padding:16px 16px 18px;
  transform: translateY(14px) scale(.98);
  transition: transform .22s ease;
  color:#0f172a;
  position:relative;
}
.modal.show .modal-content{ transform:none; }
.modal-content .close{
  position:absolute; top:10px; right:10px;
  width:34px; height:34px; border-radius:10px;
  border:1px solid #e7e9ee;
  background:#ffffff;
  box-shadow: 0 10px 28px -16px rgba(12,17,29,.22);
  color:#2b2f33; font-size:20px; line-height:32px; text-align:center;
  cursor:pointer; transition: transform .16s ease, background .16s ease;
}
.modal-content .close:hover{ transform:translateY(-2px); background:#f6f7fb; }
.modal-content img{
  width:88%;
  margin:4px auto 12px; display:block;
  border-radius:14px; background:#f3f4f6; object-fit:cover; aspect-ratio:4/3;
  box-shadow:0 16px 40px -24px rgba(12,17,29,.28);
  border:1px solid #eef1f5;
}

#modalName{
  margin:0 auto 10px; padding:10px 14px; width:calc(88% - 2px);
  text-align:center; font:700 .98rem/1.2 system-ui,"Poppins",sans-serif; color:#fff;
  border-radius:12px;
  background: linear-gradient(90deg, #000000, #454545);
  box-shadow:0 12px 28px -18px rgba(255,77,46,.55);
}

#modalDesc{
  width:calc(88% - 2px); margin:0 auto 14px; padding:12px;
  background:#f7f8fb; border:1px solid #edf0f5; border-radius:12px;
  color:#334155; font:500 .92rem/1.5 system-ui,"Poppins",sans-serif;
  max-height:144px; overflow:auto;
}
/* scrollbar */
#modalDesc::-webkit-scrollbar{ width:8px; height:8px }
#modalDesc::-webkit-scrollbar-thumb{ background:#dfe3ea; border-radius:10px }

.modal-content h2 {    font-weight: 400;
    background: radial-gradient(circle, rgba(42, 123, 155, 0) 56%, var(--accent) 376%);
    padding: 10px;
    font-size: 15px;
    color: var(--accent);
    margin-bottom: 15px;
    border-radius: 10px; }
.modal-content p {border-radius: 8px;
    margin-bottom: 1.5rem;
    background: #00000008;
    font-size: 13px;
    color: var(--transition);
    font-weight: 400;
    padding: 11px;}
#modalButton{
  display:block; width:calc(88% - 2px); margin:0 auto;
  border:1px solid #ff4d2e; border-radius:12px; padding:.9rem 1rem;
  background:linear-gradient(90deg, #000000, #454545);
  color:#fff; font-weight:800; letter-spacing:.02em;
  box-shadow:0 18px 36px -18px rgb(0 0 0 / 18%);
  transition: transform .16s ease, box-shadow .16s ease;
  cursor:pointer;
}
#modalButton:hover{ transform:translateY(-2px); box-shadow:0 24px 42px -18px rgba(255,77,46,.65) }
.close:focus, #modalButton:focus{
  outline:3px solid rgba(255,77,46,.35); outline-offset:2px; border-radius:12px;
}

/* Small screens */
@media (max-width:420px){
  .modal-content{ width:calc(100vw - 24px); border-radius:16px }
  .modal-content img{ width:92%; border-radius:12px }
  #modalName, #modalDesc, #modalButton{ width:92% }
}
.menu-content{
    padding: 20px;
    border-radius: 10px;
}
#likeBtn:hover {
  background: var(--accent-light);
  transform:translateY(-4px);
}

#menu-toggle{
  position: absolute;                 /* barın içine sabitle */
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
  color: inherit;
  cursor: pointer;

  font-size: 0;
  line-height: 0;
  padding: 0;
}

#menu-toggle::before{
  content:"";
  position:absolute; left:50%; top:50%;
  width: 18px; height: 2px; background:#2b2f33;
  transform: translate(-50%, -6px);
  box-shadow:
    0   6px 0 0 #2b2f33,   /* orta */
    0  -6px 0 0 #2b2f33;   /* üst */
}
#menu-toggle:hover{ background:#f7f8fb; }

@media (max-width:480px){
  .line-logo{ height: 52px; padding: 0 12px; margin: 10px 10px 8px; }
  .line-logo img{ height: 65px; }
  #menu-toggle{ right: 10px; width: 32px; height: 32px; }
  #menu-toggle::before{ width: 16px; transform: translate(-50%, -5px); box-shadow: 0 5px 0 0 #2b2f33, 0 -5px 0 0 #2b2f33; }
}

/* YAN MENÜ */
#side-menu {
  position: fixed;
  top: 0;
  left: -360px;
  width: 300px;
  height: 100%;
  backdrop-filter: blur(10px);
  color: white;
  background: #fff;
  padding: 20px;
  transition: left 0.3s ease;
  z-index: 1002;
  box-shadow: 2px 0 12px rgba(0,0,0,0.4);
}

#side-menu.active {
  left: 0;
}

#side-menu h3 {
  margin-top: 10px;
  color:#000000;
}

#side-menu p {
  font-size: 14px;
  margin: 8px 0;
  color: #000000;
}

/* KAPATMA BUTONU */
#close-menu {
  position: absolute;
  top: 10px;
  right: 12px;
  font-size: 24px;
  color: #000000;
  background: transparent;
  border: none;
  cursor: pointer;
}

/* ARKA PLAN GÖLGESİ */
#overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.4);
  display: none;
  z-index: 1001;
}

#overlay.active {
  display: block;
}