/* Shared dark/light toggle button + transition behavior. Loaded on every page. */

.site-nav .nav-right{display:flex;align-items:center;justify-self:end;grid-column:3}

/* Simple content pages (hakkimizda/iletisim/kvkk): the plain flex .nav only ever had two
   children before; let it wrap so the added toggle button never forces horizontal overflow
   on narrow screens. */
@media(max-width:650px){
  .wrap>.nav{flex-wrap:wrap;row-gap:10px}
}

.theme-toggle{
  position:relative;width:42px;height:42px;flex:0 0 42px;border-radius:50%;
  border:1px solid rgba(23,51,58,.16);background:rgba(255,255,255,.7);
  cursor:pointer;display:grid;place-items:center;overflow:hidden;padding:0;
  transition:background-color .4s ease,border-color .4s ease,transform .2s ease;
}
.theme-toggle:hover{transform:translateY(-1px)}
.theme-toggle svg{position:absolute;width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .5s cubic-bezier(.2,.8,.2,1),opacity .35s ease}
.theme-toggle .ti-sun{color:#0e4f59;opacity:1;transform:rotate(0deg) scale(1)}
.theme-toggle .ti-moon{color:#c9a173;opacity:0;transform:rotate(-90deg) scale(.4)}
html[data-theme="dark"] .theme-toggle{background:rgba(255,255,255,.06);border-color:rgba(201,161,115,.35)}
html[data-theme="dark"] .theme-toggle .ti-sun{opacity:0;transform:rotate(90deg) scale(.4)}
html[data-theme="dark"] .theme-toggle .ti-moon{opacity:1;transform:rotate(0deg) scale(1)}

/* Toggle sitting on the dark hero (home page nav) needs a lighter idle frame than the one
   used on the plain-background subpages, so it stays visible before scroll adds a solid navbar. */
.site-nav .theme-toggle{border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.10)}
.site-nav .theme-toggle .ti-sun{color:#f2a65a}
.site-nav .theme-toggle .ti-moon{color:#f2a65a}
html[data-theme="dark"] .site-nav .theme-toggle{border-color:rgba(201,161,115,.35);background:rgba(255,255,255,.06)}

/* Smooth cross-fade fallback for browsers without the View Transitions API (Firefox, older Safari):
   without this, toggling would just hard-cut between palettes. */
@media (prefers-reduced-motion: no-preference){
  body,.site-nav,.nav,.hero,.hero-media-layer,.search-card:after,.wizard-panel,input,select,textarea,
  .room-opt,.hotel-card,.hotel-card .photo,.hotel-card .shade,.story-copy,.story-photo,footer,
  .brand-board-card,.brand-board-art,.terms-dialog,.hotel-detail-box,.guest-counter,.tool-card,
  .review-card,.review-form,.map-card,.home-map-card,.campaign-card,.newsletter-box,.lookup-box,
  .avail-board-scroll,.calendar-day,.calendar-nav,.card,.contact,.note,.cookie-banner,
  .guest-list .guest-card,.summary-box,.request-success-card,.gallery-dialog,.review-column-card-item{
    transition:background-color .45s ease,color .45s ease,border-color .45s ease,box-shadow .45s ease;
  }
}
@media (prefers-reduced-motion: reduce){
  ::view-transition-group(root),::view-transition-old(root),::view-transition-new(root){animation:none!important}
}

/* Circular reveal driven from JS via Element.animate() on the view-transition pseudo-elements.
   The incoming (new) state always paints on top, clipped to a growing circle from the click
   point, so the same reveal effect is symmetric in both directions (dark<->light). */
::view-transition-old(root),
::view-transition-new(root){
  animation:none;
  mix-blend-mode:normal;
}
::view-transition-old(root){z-index:1}
::view-transition-new(root){z-index:2}