/* The phone layout remains intact; wide screens have their own composition. */
.desktop-nav { display: none; }

/* Split browser windows still have room for a compact horizontal navigation. */
@media (min-width:821px) and (max-width:1023px) {
  html { scroll-padding-bottom: 24px; }
  .site-header { width: calc(100% - 48px); padding: 10px 16px; gap: 16px; }
  .site-header .brand { flex: 0 1 auto; }
  .site-header .brand-logo-wrap--signature { max-width: 150px; }
  .site-header .brand-logo--signature { width: 150px; height: 44px; }
  .site-header #menu-toggle,
  .site-header #site-menu,
  nav.dock { display: none !important; }
  .site-header .desktop-nav { display: flex; flex: 1 1 auto; min-width: 0; align-items: center; justify-content: flex-end; gap: 2px; }
  .desktop-nav a { display: flex; min-width: 0; min-height: 44px; align-items: center; justify-content: center; padding: 8px; border-radius: 22px; color: #f5f0e8; font-size: 14px; font-weight: 550; line-height: 1.3; text-align: center; overflow-wrap: anywhere; }
  .desktop-nav a:hover { background: #ffffff12; }
  .desktop-nav a[data-booking-nav] { margin-left: 4px; padding-inline: 12px; }
  .desktop-nav a[aria-current="true"] { color: #fff; background: linear-gradient(165deg,#c44d0a,#b23c02); box-shadow: inset 0 1px 1px #ffba8155; }
  .desktop-nav a[aria-current="true"]:hover { background: #a83c07; }
  html[data-theme] .home-sections { padding-bottom: 0; }
  html[data-theme] .home-sections > .home-band--footer { padding-bottom: 36px; }
}

@media (min-width:1024px) {
  html { scroll-padding-top: 118px; scroll-padding-bottom: 24px; }
  html[data-theme] .home-sections {
    --home-content-width: min(1108px, calc(100% - 80px));
    width: 100%; max-width: none; padding: 32px 0 0;
  }
  .site-header {
    position: sticky; top: 16px; left: auto; transform: none;
    width: min(1108px, calc(100% - 80px)); height: 82px;
    margin: 16px auto 0; padding: 10px 22px 10px 24px; gap: 28px;
    z-index: 40;
  }
  .site-header .brand { flex: 0 1 auto; }
  .site-header .brand-logo-wrap--signature { max-width: 190px; }
  .site-header .brand-logo--signature { width: 190px; height: 52px; }
  .site-header .header-cta,
  .site-header #menu-toggle,
  .site-header #site-menu,
  nav.dock { display: none !important; }
  .site-header .desktop-nav {
    display: flex; flex: 1 1 auto; min-width: 0; align-items: center;
    justify-content: flex-end; gap: 4px;
  }
  .desktop-nav a {
    display: flex; min-width: 0; min-height: 46px; align-items: center;
    justify-content: center; padding: 10px 12px; border-radius: 24px;
    color: #f5f0e8; font-size: 15px; font-weight: 550; line-height: 1.3;
    text-align: center; overflow-wrap: anywhere;
  }
  .desktop-nav a:hover { background: #ffffff12; }
  .desktop-nav a[data-booking-nav] {
    margin-left: 6px; padding-inline: 18px;
  }
  .desktop-nav a[aria-current="true"] {
    color: #fff;
    background: linear-gradient(165deg,#c44d0a,#b23c02);
    box-shadow: inset 0 1px 1px #ffba8155;
  }
  .desktop-nav a[aria-current="true"]:hover { background: #a83c07; }

  html[data-theme] .home-sections > .home-band { width: 100%; padding-block: 54px; }
  html[data-theme] .home-sections > .home-band--banner { padding-block: 0 42px; }
  html[data-theme] .home-sections > .home-band--photos { padding-block: 18px 54px; }
  html[data-theme] .home-sections :is(#fotograflar,#videolar,#hizmetler,#referanslar,#iletisim),
  html[data-theme] .home-sections .page-footer,
  html[data-theme] .home-sections #sss.faq-section {
    width: var(--home-content-width); max-width: 1108px; margin-inline: auto;
  }
  html[data-theme] .home-sections .home-band--banner > .home-banner {
    width: var(--home-content-width); max-width: 1108px; margin: 0 auto;
  }
  .home-banner .banner-track { max-height: none; aspect-ratio: 16 / 9; border-radius: 24px; }
  .home-sections .home-heading { margin-bottom: 30px; }
  .home-sections .home-heading h2:is(#photo-heading,#video-heading,#services-heading,#references-heading) { font-size: 48px; }
  .home-sections .home-heading .section-intro { max-width: 720px; font-size: 17px; }
  #photo-categories { max-width: 760px; margin-inline: auto; }

  /* Five portrait cards fill a horizontal stage instead of a tall phone mosaic. */
  #photo-gallery.photo-gallery,
  #video-gallery.video-gallery {
    --desktop-card-width: clamp(220px,22vw,270px);
    max-width: 1108px;
  }
  .photo-rotor, .video-rotor { grid-auto-columns: calc((100% - 72px) / 5); gap: 18px; }
  #photo-gallery.has-photo-rotor .photo-rotor,
  #video-gallery.has-video-rotor .video-rotor { height: calc(var(--desktop-card-width) * 16 / 9); aspect-ratio: auto; }
  #photo-gallery.has-photo-rotor .photo-item,
  #video-gallery.has-video-rotor .video-card { width: var(--desktop-card-width); }
  #photo-gallery.has-photo-rotor .photo-item[data-slot="prev-1"],
  #video-gallery.has-video-rotor .video-card[data-slot="prev-1"] { --card-x: calc(-83% - 18px); --card-y: 0%; --card-scale: .66; }
  #photo-gallery.has-photo-rotor .photo-item[data-slot="prev-2"],
  #video-gallery.has-video-rotor .video-card[data-slot="prev-2"] { --card-x: calc(-149% - 36px); --card-y: 0%; --card-scale: .66; }
  #photo-gallery.has-photo-rotor .photo-item[data-slot="next-1"],
  #video-gallery.has-video-rotor .video-card[data-slot="next-1"] { --card-x: calc(83% + 18px); --card-y: 0%; --card-scale: .66; }
  #photo-gallery.has-photo-rotor .photo-item[data-slot="next-2"],
  #video-gallery.has-video-rotor .video-card[data-slot="next-2"] { --card-x: calc(149% + 36px); --card-y: 0%; --card-scale: .66; }
  #photo-gallery.has-photo-rotor .photo-item[data-slot="off-left"],
  #video-gallery.has-video-rotor .video-card[data-slot="off-left"] { --card-x: -220%; }
  #photo-gallery.has-photo-rotor .photo-item[data-slot="off-right"],
  #video-gallery.has-video-rotor .video-card[data-slot="off-right"] { --card-x: 220%; }
  #photo-gallery.has-photo-rotor .photo-rotor[data-count="1"],
  #video-gallery.has-video-rotor .video-rotor[data-count="1"] { width: var(--desktop-card-width); }
  #photo-gallery.has-photo-rotor .photo-rotor[data-count="1"] .photo-item,
  #video-gallery.has-video-rotor .video-rotor[data-count="1"] .video-card { width: 100%; }
  .photo-carousel-controls, .video-carousel-controls { margin-top: 24px; }

  html[data-theme] .home-sections #hizmetler { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
  #hizmetler .service-list { max-width: none; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
  #hizmetler .service-tile { grid-template-columns: 76px minmax(0,1fr); min-height: 136px; padding: 14px; gap: 14px; }
  #hizmetler .service-tile .service-cover { width: 76px; height: 102px; border-radius: 10px; }
  #hizmetler .service-tile .service-label { padding: 0; font-size: 17px; }
  #hizmetler .service-summary { margin-top: 8px; font-size: 13px; line-height: 1.5; }
  .reference-list { max-width: 1108px; gap: 14px; grid-auto-rows: minmax(190px,auto); }
  .reference-list[data-count="7"] > li:nth-child(-n + 3) { grid-column: span 4; }
  .reference-list[data-count="7"] > li:nth-child(n + 4) { grid-column: span 3; }
  .reference-list[data-count]:not([data-count="7"]) > li,
  .reference-list[data-count]:not([data-count="7"]) > li:last-child:nth-child(odd) { grid-column: span 4; }
  .reference-card { border-radius: 14px; }
  .reference-name { font-size: 16px; }

  /* The service list and its total remain one booking surface. */
  .reservation-section--merged,
  html[data-theme="light"] .home-sections #iletisim.reservation-section--merged { max-width: 1108px; }
  .reservation-booking-panel { padding: 32px; border-radius: 24px; }
  .home-sections #iletisim.reservation-section--merged .home-heading > #contact-heading { font-size: 42px; }
  .reservation-inline-steps { max-width: 600px; margin: 20px auto 28px; }
  .reservation-inline-steps li { font-size: 13px; }
  .reservation-inline-builder {
    display: grid; grid-template-columns: minmax(0,1fr) 280px;
    grid-template-rows: auto auto auto; align-items: start; column-gap: 32px;
  }
  #reservation-inline-error { grid-column: 1 / -1; grid-row: 1; }
  #reservation-inline-fields { grid-column: 1; grid-row: 2; }
  .reservation-inline-builder > .reservation-small { grid-column: 1; grid-row: 3; }
  .reservation-booking-panel #reservation-inline-categories { gap: 3px; margin-bottom: 18px; }
  .reservation-booking-panel #reservation-inline-categories .reservation-category-card { padding-inline: 5px; }
  .reservation-booking-panel .reservation-inline-summary {
    position: sticky; top: 118px; grid-column: 2; grid-row: 2 / span 2;
    align-self: start; margin: 0; padding: 0 0 0 28px;
    border: 0; border-left: 1px solid var(--line);
  }
  .reservation-inline-summary > .reservation-inline-bar--bottom { grid-template-columns: minmax(0,1fr); gap: 18px; }
  .reservation-inline-summary .reservation-total { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 10px; }
  .reservation-inline-summary .reservation-total > span { font-size: 14px; }
  .reservation-inline-summary .reservation-total output { font-size: 32px; }
  .reservation-inline-summary .reservation-primary { min-height: 48px; font-size: 15px; }
  .reservation-booking-panel .reservation-summary-top { margin-top: 12px; }
  .reservation-booking-panel .reservation-extra-name { font-size: 16px; }
  .reservation-booking-panel .reservation-extra-price { font-size: 24px; }
  .reservation-contact-card { display: grid; grid-template-columns: minmax(0,1fr) 380px; align-items: center; column-gap: 32px; padding: 32px; margin-top: 24px; }
  .reservation-contact-heading h3 { font-size: 32px; }
  .reservation-contact-intro { max-width: 560px; font-size: 15px; }
  .reservation-contact-actions { margin-top: 0; }
  .reservation-contact-fallback { grid-column: 1 / -1; }
  html[data-theme] .home-sections > .home-band--contact { padding-block: 54px 28px; }

  html[data-theme] .home-sections > .home-band--faq { padding-block: 48px; }
  #sss.faq-section { display: grid; grid-template-columns: 280px minmax(0,1fr); align-items: start; gap: 56px; }
  .faq-heading { margin: 0; text-align: left; }
  .faq-heading h2 { font-size: 44px; }
  .faq-intro { max-width: 260px; margin: 16px 0 0; font-size: 16px; }
  .faq-item > summary { min-height: 64px; font-size: 17px; }
  .faq-answer { font-size: 15px; line-height: 1.7; }
  html[data-theme] .home-sections > .home-band--footer { padding-block: 48px 36px; }
  .footer-main { gap: 36px; }
  .footer-group a, .footer-group .footer-label, .footer-group .footer-location { font-size: 15px; }

  html[data-theme] body.service-detail-page .site-header { max-width: 1108px; }
  html[data-theme] body.service-detail-page .service-detail-main { width: min(960px,calc(100% - 80px)); padding: 36px 0 48px; }
  .information-page .service-page-description { max-width: 74ch; }
}

@media (min-width:1280px) {
  #hizmetler .service-list { grid-template-columns: repeat(4,minmax(0,1fr)); }
  #hizmetler .service-tile { grid-template-columns: 68px minmax(0,1fr); padding: 12px; gap: 12px; }
  #hizmetler .service-tile .service-cover { width: 68px; height: 92px; }
}