

.contact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px
}

.contact-grid>div {
  padding: 18px;
  border-radius: 14px;
  background: var(--soft)
}

.contact-grid b {
  color: var(--primary);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .1em
}

.contact-grid p {
  margin: 9px 0 0;
  color: var(--muted);
  font-size: 14px
}

@media(max-width:620px) {
  .cart-list>div {
    grid-template-columns: 58px 1fr
  }

  .cart-list img {
    width: 58px;
    height: 58px
  }

  .cart-list strong {
    grid-column: 2
  }

  .contact-grid {
    grid-template-columns: 1fr
  }

  .settings-list {
    grid-template-columns: 1fr
  }
}

.branch-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px
}

.branch-tone {
  position: relative;
  height: 200px;
  overflow: hidden
}

.branch-tone::before,
.branch-tone::after {
  position: absolute;
  content: '';
  border-radius: 90px 90px 0 0;
  background: #fffdf966
}

.branch-tone::before {
  left: 14%;
  top: 18%;
  width: 34%;
  height: 64%
}

.branch-tone::after {
  right: -16%;
  bottom: -45%;
  width: 78%;
  height: 125%;
  border: 1px solid var(--line);
  background: #fffdf930
}

.branch-tone i {
  position: absolute;
  right: 28px;
  bottom: 15px;
  z-index: 1;
  color: #fffdf9c7;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 40px;
  font-style: normal
}

.branch-grid h3 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 27px;
  font-weight: 500
}

.branch-grid p {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 13px
}

.branch-grid nav {
  display: flex;
  gap: 12px;
  margin-top: 23px
}

.branch-grid nav a {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 11px 16px;
  color: var(--primary);
  font-size: 13px;
  font-weight: 700
}

.branch-grid nav a:last-child {
  border-color: var(--line);
  background: var(--primary);
  color: #fffdf9
}

.faq-list p {
  margin: 0 22px 19px 0;
  color: #765f55;
  font-size: 14px;
  line-height: 1.6
}

.contact-links {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 58px;
  margin-bottom: 70px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: #fffdf9
}

.contact-links i {
  font: 23px Georgia, serif;
  color: var(--primary);
  font-style: normal
}

.contact-links h2 {
  margin: 15px 0 6px;
  font: 22px Georgia, serif;
  font-weight: 500
}

.contact-links p {
  min-height: 34px;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5
}

.contact-links a {
  display: inline-block;
  margin-top: 15px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 3px;
  color: var(--primary);
  font-size: 12px;
  font-weight: 700
}

.contact-form-section {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 26px;
  padding-bottom: 80px
}

.contact-form,
.contact-address {
  border-radius: 27px
}

.contact-form {
  padding: 34px;
  border: 1px solid var(--line);
  background: #fffdf9
}

.contact-form h2,
.contact-address h2 {
  font-size: 34px;
  margin: 0
}

.contact-form>p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7
}

.contact-form>div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 28px
}

.contact-form label {
  display: grid;
  gap: 7px;
  font-size: 12px;
  font-weight: 700
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fffdfa;
  padding: 10px;
  color: var(--ink)
}

.contact-form input,
.contact-form select {
  height: 42px
}

.contact-form textarea {
  resize: vertical
}

.contact-form .wide {
  grid-column: 1/-1
}

.contact-form .consent {
  display: flex;
  align-items: flex-start;
  font-weight: 400;
  line-height: 1.5
}

.contact-form .consent input {
  width: 15px;
  height: 15px;
  margin-top: 2px
}

.contact-form button {
  justify-self: start
}

.contact-feedback {
  margin: 0;
  color: #356d44;
  font-size: 13px
}

.contact-address {
  padding: 37px;
  background: #f1e7df
}

.contact-address dl {
  margin: 32px 0
}

.contact-address dl div {
  margin: 18px 0
}

.contact-address dt,
.contact-address small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em
}

.contact-address dd {
  margin: 6px 0;
  font: 17px Georgia, serif
}

.contact-address hr {
  border: 0;
  border-top: 1px solid var(--line)
}

.contact-address>p:last-child {
  font-size: 13px
}

.contact-hours {
  background: #f4ede6
}

.contact-hours>.wrap {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 70px;
  align-items: center;
  padding-top: 72px;
  padding-bottom: 72px
}

.contact-hours h2 {
  font-size: 38px;
  margin: 12px 0
}

.contact-hours dl {
  margin: 28px 0 0
}

.contact-hours dl div {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid var(--line);
  padding: 10px 0;
  font-size: 13px
}

.contact-hours dd {
  margin: 0;
  font-weight: 700
}

.contact-hours aside p:not(.eyebrow) {
  color: var(--muted);
  line-height: 1.7
}

.contact-branches {
  padding-top: 75px;
  padding-bottom: 68px
}

.contact-branches h2 {
  margin: 11px 0 40px
}

.contact-branches>div {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px
}

.contact-branches figure {
  position: relative;
  display: flex;
  justify-content: flex-end;
  align-items: end;
  height: 170px;
  margin: 0;
  padding: 18px;
  color: #ffffffad;
  font: 42px Georgia, serif;
  background: #e5c3b5
}

.contact-branches figure:after {
  content: "";
  position: absolute;
  right: -10%;
  bottom: -33%;
  width: 76%;
  aspect-ratio: 1;
  border: 1px solid var(--line);
  border-radius: 50%
}

.contact-branches .tone-two {
  background: #d9d2c5
}

.contact-branches .tone-three {
  background: #ead5ca
}

.contact-branches h3 {
  margin-top: 19px;
  margin-bottom: 10px;
  font: 25px Georgia, serif
}

.contact-map {
  display: grid;
  grid-template-columns: .7fr 1.3fr;
  overflow: hidden;
  margin-bottom: 75px;
  border-radius: 28px;
  background: #ded6ca
}

.contact-map>div {
  padding: 52px
}

.contact-map h2 {
  font-size: 42px;
  margin: 15px 0
}

.contact-map p:not(.eyebrow) {
  color: #786e67;
  font-size: 13px;
  line-height: 1.7
}

.contact-map aside {
  position: relative;
  min-height: 300px;
  background: #c9c2b6
}

.contact-map aside i {
  position: absolute;
  left: 8%;
  top: 20%;
  width: 84%;
  height: 1px;
  transform: rotate(-9deg);
  background: #fff9f499
}

.contact-map aside i:nth-child(2) {
  top: 65%;
  transform: rotate(7deg)
}

.contact-map aside i:nth-child(3) {
  left: 48%;
  top: 0;
  width: 1px;
  height: 100%;
  transform: rotate(18deg)
}

.contact-map aside b {
  position: absolute;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: #fffdfa;
  padding: 5px 9px;
  color: #76564b;
  font-size: 10px
}

.contact-fast {
  background: #e7c9bc
}

.contact-fast>.wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding-top: 54px;
  padding-bottom: 54px
}

.contact-fast h2 {
  font-size: 38px;
  margin: 0
}

.contact-fast p {
  color: #755e55;
  font-size: 13px
}

.contact-fast span {
  display: flex;
  gap: 10px;
  flex-wrap: wrap
}

.contact-fast span>* {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  padding: 11px 16px;
  color: var(--primary);
  font-size: 13px;
  font-weight: 700
}

.contact-fast span .button {
  background: var(--primary);
  color: #fff
}

.contact-faq {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 70px;
  padding-top: 75px;
  padding-bottom: 75px
}

.contact-faq h2 {
  margin-top: 12px
}

.contact-faq p {
  margin: 0 25px 17px 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6
}

.contact-cta {
  margin-bottom: 70px;
  border-radius: 29px;
  background: #e5c5b7;
  padding: 58px 25px;
  text-align: center
}

.contact-cta h2 {
  max-width: 620px;
  margin: 14px auto;
  font-size: 43px
}

.contact-cta>p:not(.eyebrow) {
  color: #745d53;
  font-size: 13px
}

.contact-cta .button {
  margin: 16px 4px 0
}

.contact-cta .ghost {
  background: transparent;
  color: var(--primary)
}

/* Sol alt iletişim menüsü ve mobil üst menü. */
.floating-contact[hidden] {
  display: none
}

.floating-contact {
  position: fixed;
  z-index: 45;
  left: 20px;
  bottom: 24px;
  display: flex;
  align-items: center;
  gap: 10px
}

.floating-contact-trigger {
  order: 1;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 0;
  border-radius: 999px;
  background: #8f6657;
  padding: 13px 17px;
  box-shadow: 0 12px 28px #4f2f232e;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer
}

.floating-contact-trigger i {
  font-size: 17px
}

.floating-contact-options {
  order: 2;
  display: flex;
  max-width: 0;
  gap: 8px;
  overflow: hidden;
  opacity: 0;
  transform: translateX(8px);
  transition: max-width .24s ease, opacity .18s ease, transform .24s ease
}

.floating-contact.is-open .floating-contact-options {
  max-width: 300px;
  opacity: 1;
  transform: translateX(0)
}

.floating-contact-options a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fffdf9;
  padding: 12px 14px;
  box-shadow: 0 10px 24px #4f2f231c;
  color: #62453a;
  font-size: 12px;
  font-weight: 800
}

.floating-contact-options a:first-child i {
  color: #8f6657
}

.floating-contact-options a:last-child i {
  color: #218b58;
  font-size: 17px
}

@media(max-width:620px) {
  .site-header .navbar {
    width: calc(100% - 28px);
    gap: 7px
  }

  .site-header .brand {
    min-width: 0
  }

  .site-header .brand-mark.has-logo {
    width: 134px;
    height: 48px
  }

  .site-header .menu-button {
    order: 2;
    margin-left: auto;
    padding: 10px
  }

  .site-header .menu-button {
    font-size: 0
  }

  .site-header .menu-button i {
    font-size: 16px
  }

  .site-header .nav-actions {
    order: 3;
    gap: 6px
  }

  .site-header .cart-circle {
    width: 38px;
    height: 38px
  }

  .site-header .guest-actions {
    gap: 5px
  }

  .guest-login {
    width: 38px;
    height: 38px;
    justify-content: center;
    padding: 0
  }

  .guest-login {
    font-size: 0
  }

  .guest-login i {
    font-size: 16px
  }

  .guest-register {
    display: none
  }

  .site-header .nav-links.open {
    grid-template-columns: 1fr !important
  }

  .site-header .nav-links.open a {
    min-height: 42px
  }

  .floating-contact {
    left: 14px;
    bottom: 14px;
    gap: 7px
  }

  .floating-contact-trigger {
    padding: 12px
  }

  .floating-contact-trigger b {
    display: none
  }

  .floating-contact.is-open .floating-contact-options {
    max-width: 238px
  }

  .floating-contact-options a {
    width: 42px;
    height: 42px;
    justify-content: center;
    padding: 0
  }

  .floating-contact-options a span {
    display: none
  }
}

.working-hours-form {
  display: grid;
  gap: 9px;
  max-width: 780px
}

.working-hours-form>label {
  display: grid;
  grid-template-columns: 1fr 145px 145px;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fffdfa;
  color: #493229;
  font-size: 13px;
  font-weight: 700
}

.working-hours-form label span {
  display: flex;
  align-items: center;
  gap: 9px
}

.working-hours-form input[type=time],
.days-off-form input {
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 0 9px
}

/* Sabit iletişim: altta WhatsApp, üstünde telefon */
.floating-contact {
  position: fixed !important;
  left: 20px !important;
  bottom: 24px !important;
  z-index: 9999 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
}
.floating-contact-options {
  display: flex;
  flex-direction: column;
  max-width: none;
  gap: 9px;
  overflow: visible;
  opacity: 1;
  transform: none;
}
.floating-contact-options a {
  width: 46px;
  min-width: 46px;
  height: 46px;
  justify-content: center;
  padding: 0;
  border-radius: 999px;
  box-shadow: 0 8px 20px rgba(78, 49, 36, .14);
}
.floating-contact-options a[hidden] { display: none; }
.floating-contact-options a span { display: none; }
.floating-contact-options a i { font-size: 21px; }
.floating-contact-options a[data-contact-whatsapp] {
  border-color: var(--line);
  background: #2ba466;
  color: #fff;
}
.floating-contact-options a[data-contact-whatsapp] i { color: #fff; }

@media (max-width: 700px) {
  .floating-contact { left: 14px; bottom: 14px; }
  .floating-contact-options { gap: 8px; }
  .floating-contact-options a { width: 46px; min-width: 46px; height: 46px; justify-content: center; padding: 0; }
  .floating-contact-options a span { display: none; }
}

.branch-icon {
  font-size: 18px;
  color: var(--primary);
}

.branch-info {
  flex: 1;
}

.branch-info strong {
  display: block;
  font-size: 14px;
  color: #31211a;
}

.branch-info small {
  display: block;
  font-size: 11px;
  color: #7d655a;
}

.location-header {
  margin-bottom: 6px !important;
}

.location-badge {
  display: inline-block !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.14em !important;
  color: #8f6657 !important;
  text-transform: uppercase !important;
  margin-bottom: 2px !important;
}

.location-title {
  display: block !important;
  font-family: Georgia, serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #2e1a11 !important;
}

.location-desc {
  font-size: 12px !important;
  line-height: 1.4 !important;
  color: #6d554a !important;
  margin: 0 0 10px 0 !important;
}

.location-actions {
  display: flex !important;
  gap: 8px !important;
}

.location-actions .button {
  padding: 6px 12px !important;
  font-size: 11.5px !important;
  border-radius: 8px !important;
}