/*
 * İşletme sayfaları mobil tasarımdan birebir alınmıştır. Tüm ölçüler .page
 * genişliğine göre cqi (1cqi = sayfa genişliğinin %1'i) cinsindendir;
 * böylece sayfa her ekranda tasarımla aynı oranda ölçeklenir.
 * Referans: 4500px genişliğindeki tasarımda 1cqi = 45px.
 */
:root {
    color-scheme: light;
    --primary: #fd5d2b;
    --text: #000;
    --muted: #5f5f5f;
    --follow: #dd8716;
    --review: #f0ba1c;
    --franchise: #608dd1;
    --survey: #f0ba1c;
    --card-width: 75.07cqi;
    --card-radius: 2.67cqi;
}

* { box-sizing: border-box; }
[x-cloak] { display: none !important; }

html, body { overflow-x: clip; }
/* Çift dokunma ile yakınlaştırmayı kapatır (ör. yıldızlara hızlı dokunurken); iki parmakla yakınlaştırma erişilebilirlik için açık kalır. */
html { touch-action: manipulation; }

body {
    margin: 0;
    background: #fff;
    color: var(--text);
    font-family: "Rubik", system-ui, -apple-system, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }

.page {
    position: relative;
    max-width: 480px;
    min-height: 100vh;
    margin: 0 auto;
    container-type: inline-size;
}

/* ---------- Arka plan bulanık şekilleri ---------- */
.hero-bg {
    position: absolute;
    inset: 0 0 auto;
    height: 52.9cqi;
    overflow-x: visible; /* geniş ekranda şekiller sütun dışına taşabilir */
    overflow-y: clip;
    pointer-events: none;
}
/* Alt kenar keskin kesilmesin: şekiller sayfa arka planına (beyaz) yumuşakça karışır.
   Sütun dışına taşan şekilleri de örtmek için yanlara taşar. */
.hero-bg::after {
    content: "";
    position: absolute;
    right: -100vw;
    bottom: 0;
    left: -100vw;
    height: 24cqi;
    background: linear-gradient(to bottom, rgb(255 255 255 / 0), #fff 90%);
}
.blob {
    position: absolute;
    aspect-ratio: 1;
    border-radius: 50%;
    animation: var(--blob-motion) ease-in-out infinite alternate;
    will-change: transform;
}
/* Tam daire; renk işletme sayfasında panelden gelir (--blob), ana sayfada marka turuncusu.
   Merkezler tasarımdaki şekillerle aynı yerde tutulur. */
.blob--left  { left: -14cqi;   top: 30.5cqi; width: 28cqi;   filter: blur(5cqi);
               background: var(--blob, var(--primary)); --blob-motion: blob-drift-left 9s; }
.blob--right { left: 87.45cqi; top: 12.6cqi; width: 30.5cqi; filter: blur(3cqi);
               background: var(--blob, var(--primary)); --blob-motion: blob-drift-right 11s; }
.blob--top   { left: 79.4cqi;  top: -7.2cqi; width: 12.7cqi; filter: blur(1.4cqi);
               background: var(--blob, var(--primary)); --blob-motion: blob-drift-top 7s; }

/* Yavaş süzülme ve nefes alma; yalnızca eşit ölçekleme, böylece şekiller daire kalır */
@keyframes blob-drift-left {
    0%   { transform: translate(0, 0) scale(1); }
    50%  { transform: translate(2.5cqi, -3cqi) scale(1.08); }
    100% { transform: translate(-1cqi, 3.5cqi) scale(0.94); }
}
@keyframes blob-drift-right {
    0%   { transform: translate(0, 0) scale(1); }
    50%  { transform: translate(-3cqi, 2.5cqi) scale(1.1); }
    100% { transform: translate(-1cqi, -2.5cqi) scale(0.93); }
}
@keyframes blob-drift-top {
    0%   { transform: translate(0, 0) scale(1); }
    50%  { transform: translate(-2cqi, 2cqi) scale(1.2); }
    100% { transform: translate(1.5cqi, 1cqi) scale(0.9); }
}
@media (prefers-reduced-motion: reduce) {
    .blob { animation: none; }
}

/* ---------- Başlık ---------- */
.cafe-header {
    position: relative;
    display: flex;
    align-items: center;
    gap: 2.3cqi;
    padding: 10.2cqi 4cqi 0 8.9cqi;
}
.cafe-header__logo {
    flex: none;
    width: 19.4cqi;
    height: 19.4cqi;
    border-radius: 50%;
    object-fit: cover;
}
.cafe-header__text { margin-bottom: 3.2cqi; }
.cafe-header__name {
    margin: 0;
    font-size: 3.87cqi;
    font-weight: 700;
    line-height: 1.2;
}
.cafe-header__location {
    margin: 0;
    font-size: 2.6cqi;
    line-height: 1.2;
}
.amp { font-weight: 400; }

/* ---------- Kampanyalar ---------- */
.campaigns { position: relative; }

.section-title {
    margin: 6.6cqi 0 2cqi;
    color: var(--muted);
    font-size: 3.5cqi;
    font-weight: 700;
    line-height: 1.1;
    text-align: center;
    text-transform: uppercase;
}
.section-title small {
    display: block;
    font-size: 2.1cqi;
    font-weight: 400;
    text-transform: none;
}

.campaigns__track {
    display: flex;
    width: var(--card-width);
    aspect-ratio: 3378 / 2527;
    margin: 0 auto;
    overflow-x: auto;
    border-radius: var(--card-radius);
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
}
.campaigns__track::-webkit-scrollbar { display: none; }
.campaigns__slide {
    flex: 0 0 100%;
    margin: 0;
    scroll-snap-align: start;
}
.campaigns__slide a { display: block; height: 100%; }
.campaigns__slide img { width: 100%; height: 100%; object-fit: cover; }

.campaigns__dots {
    display: flex;
    justify-content: center;
    gap: 1.42cqi;
    margin-top: 2.5cqi;
}
.dot {
    width: 1.78cqi;
    height: 1.78cqi;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #606060;
    opacity: 0.3;
    cursor: pointer;
    transition: opacity 0.2s;
}
.dot.is-active { opacity: 1; }

/* ---------- Hikayeler (Instagram tarzı) ---------- */
.stories { margin-top: 7cqi; }
.stories__list {
    display: flex;
    gap: 3.6cqi;
    margin: 0;
    padding: 1cqi 12.47cqi; /* kartlarla aynı sol hiza */
    overflow-x: auto;
    list-style: none;
    scroll-padding-inline: 12.47cqi;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
}
.stories__list::-webkit-scrollbar { display: none; }
.stories__list li { flex: none; scroll-snap-align: start; }

.story-bubble {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.4cqi;
    width: 16.5cqi;
    padding: 0;
    border: 0;
    background: none;
    color: var(--text);
    font: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.story-bubble__ring {
    display: block;
    width: 16.5cqi;
    height: 16.5cqi;
    padding: 0.6cqi;
    border-radius: 50%;
    background: linear-gradient(45deg, #fbb03b, var(--primary) 60%, #e0245e);
    transition: transform 0.15s;
}
.story-bubble.is-seen .story-bubble__ring { background: #d4d4d4; }
.story-bubble:active .story-bubble__ring { transform: scale(0.94); }
.story-bubble__ring img {
    width: 100%;
    height: 100%;
    border: 0.6cqi solid #fff;
    border-radius: 50%;
    background: #f2f2f2;
    object-fit: cover;
}
.story-bubble__title {
    max-width: 100%;
    overflow: hidden;
    font-size: 2.5cqi;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Oynatıcı body'ye taşındığı için cqi yerine px/vw kullanır */
html.is-story-open { overflow: hidden; }
.story-viewer {
    position: fixed;
    inset: 0;
    z-index: 900;
    display: flex;
    justify-content: center;
    background: #000;
    overscroll-behavior: contain;
}
.story-viewer__stage {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    max-width: 480px;
    height: 100dvh;
    overflow: hidden;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}
.story-viewer__image { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.story-viewer__spinner {
    position: absolute;
    width: 36px;
    height: 36px;
    border: 3px solid rgb(255 255 255 / 0.25);
    border-top-color: #fff;
    border-radius: 50%;
    animation: story-spin 0.8s linear infinite;
}
@keyframes story-spin { to { transform: rotate(360deg); } }

.story-viewer__top {
    position: absolute;
    inset: 0 0 auto;
    padding: calc(10px + env(safe-area-inset-top)) 10px 24px;
    background: linear-gradient(rgb(0 0 0 / 0.45), transparent);
    color: #fff;
}
.story-viewer__bars { display: flex; gap: 4px; }
.story-viewer__bar { flex: 1; height: 3px; overflow: hidden; border-radius: 2px; background: rgb(255 255 255 / 0.35); }
.story-viewer__bar span { display: block; height: 100%; background: #fff; }
.story-viewer__head { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.story-viewer__avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.story-viewer__title { flex: 1; overflow: hidden; font-size: 14px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.story-viewer__close {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin: -6px -6px -6px 0;
    padding: 0;
    border: 0;
    background: none;
    color: #fff;
    font-size: 22px;
    cursor: pointer;
}
@media (prefers-reduced-motion: reduce) {
    .story-viewer__spinner { animation-duration: 2s; }
}

/* ---------- Kartlar ---------- */
.cards {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4.3cqi;
    margin-top: 9.2cqi;
}

.promo-card {
    position: relative;
    display: block;
    width: var(--card-width);
    border-radius: var(--card-radius);
    color: #fff;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.15s;
}
.promo-card:active, .survey:active { transform: scale(0.98); }

.promo-card__body {
    position: relative;
    z-index: 1;
    padding: 4.1cqi 0 0 4.4cqi;
}
.promo-card__title {
    margin: 0;
    font-size: 4.35cqi;
    font-weight: 700;
    line-height: 1.15;
}
.promo-card__text {
    margin: 0;
    font-size: 1.9cqi;
    line-height: 1.1;
}
/* İllüstrasyonlar kart zemin rengiyle kırpıldı; kartın sağ-alt köşesine hizalanınca
   kenarları görünmez olur, üstten taşan kısım (ör. şapka) beyaz sayfaya oturur. */
.promo-card__art {
    position: absolute;
    right: 0;
    bottom: 0;
    height: auto;
    pointer-events: none;
}

.promo-card--follow { aspect-ratio: 3378 / 1498; background: var(--follow); }

/* Kart <button> olduğunda tarayıcı varsayılanlarını sıfırla */
button.promo-card {
    padding: 0;
    border: 0;
    font: inherit;
    text-align: left;
    cursor: pointer;
    appearance: none;
}
.promo-card__body, .promo-card__title, .promo-card__text, .promo-card__brand { display: block; }
.promo-card--follow .promo-card__art { width: 57.99%; }
.promo-card__brand {
    margin: 3.2cqi 0 0;
    font-size: 3.9cqi;
    font-weight: 700;
}

.promo-card--review { aspect-ratio: 3378 / 1497; background: var(--review); }
.promo-card--review .promo-card__art { width: 52.96%; }

.promo-card--franchise { aspect-ratio: 3378 / 730; background: var(--franchise); }
.promo-card--franchise .promo-card__art { width: 40.23%; }
.promo-card--franchise .promo-card__body { padding: 3.2cqi 0 0 2.8cqi; }
.promo-card--franchise .promo-card__title {
    font-size: 4.1cqi;
    line-height: 1.1;
}
.promo-card__button {
    display: inline-block;
    margin-top: 0.5cqi;
    padding: 0.2cqi 1.6cqi;
    border: 0.15cqi solid #fff;
    font-size: 1.8cqi;
    font-weight: 700;
    text-transform: uppercase;
}

/* ---------- Bizi takip edin: akordeon ---------- */
.follow { width: var(--card-width); }
/* Karttaki görsel kartın üstünden ~5.2cqi taşar (görsel 38.5cqi, kart 33.3cqi);
   üstünde başka kart (ör. menü) varsa taşma kadar ek boşluk bırakılır ki görünen aralık diğer kartlarla eşit olsun. */
.cards > * + .follow { margin-top: 5.2cqi; }

/* Akordeon (takip + anket): grid-template-rows 0fr -> 1fr, içerik yüksekliği bilinmeden yumuşak açılma */
.accordion__panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.35s ease;
}
.accordion__panel.is-open { grid-template-rows: 1fr; }
.accordion__inner { min-height: 0; overflow: hidden; }

.follow__links {
    display: flex;
    justify-content: center;
    gap: 7cqi;
    margin: 2.2cqi 0 0;
    padding: 3.2cqi 2cqi;
    list-style: none;
    background: #fdf1e3;
    border-radius: var(--card-radius);
    opacity: 0;
    transform: translateY(-2cqi);
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.accordion__panel.is-open .follow__links { opacity: 1; transform: none; }

.social {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.2cqi;
    color: var(--muted);
    font-size: 2cqi;
    font-weight: 500;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}
.social__icon {
    position: relative;
    display: grid;
    place-items: center;
    width: 11cqi;
    height: 11cqi;
    border-radius: 50%;
    background: var(--brand);
    box-shadow: 0 1cqi 2.5cqi rgb(0 0 0 / 0.15);
    transition: transform 0.15s;
}
/* SVG ikon beyaz renkte maske olarak çizilir */
.social__icon::after {
    content: "";
    width: 5.4cqi;
    height: 5.4cqi;
    background: #fff;
    -webkit-mask: var(--icon) center / contain no-repeat;
    mask: var(--icon) center / contain no-repeat;
}
.social:active .social__icon { transform: scale(0.92); }
.social--instagram { --brand: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }
.social--youtube { --brand: #ff0000; }
.social--tiktok { --brand: #000; }

@media (prefers-reduced-motion: reduce) {
    .accordion__panel, .follow__links, .survey-accordion { transition: none; }
}

/* ---------- Mini anket ---------- */
.survey-block { width: var(--card-width); }

.survey-accordion {
    display: flex;
    flex-direction: column;
    gap: 3cqi;
    padding-top: 4cqi;
    opacity: 0;
    transform: translateY(-2cqi);
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.accordion__panel.is-open .survey-accordion { opacity: 1; transform: none; }
/* Kart genişliğinde 5 yıldızın rahat sığması için */
.survey-accordion .rating-card { padding: 4cqi 3.5cqi 2.5cqi; }
.survey-accordion .rating label { font-size: 9.5cqi; }

.survey-done { padding: 4cqi 0 2cqi; text-align: center; }
.survey-done .thanks-badge { width: 16cqi; height: 16cqi; margin-bottom: 3cqi; font-size: 9cqi; }
.survey-done__title { margin: 0; color: var(--survey); font-size: 6cqi; font-weight: 800; text-transform: uppercase; }
.survey-done__text { margin: 1.5cqi 0 0; color: var(--muted); font-size: 3.2cqi; }

/* Kart <button> olduğunda tarayıcı varsayılanlarını sıfırla */
button.survey {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
    appearance: none;
}
.survey__body, .survey__title, .survey__text { display: block; }

.survey {
    display: flex;
    align-items: center;
    width: var(--card-width);
    margin-top: 1.5cqi;
    color: var(--muted);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.15s;
}
.survey__body { flex: 1; padding-left: 1.9cqi; }
.survey__title {
    margin: 0;
    color: var(--survey);
    font-size: 6cqi;
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
}
.survey__text {
    max-width: 36cqi;
    margin: 0;
    font-size: 2.85cqi;
    line-height: 1.3;
}
.survey__button {
    display: inline-block;
    min-width: 18.3cqi;
    margin-top: 1.1cqi;
    padding: 0.6cqi 2.5cqi;
    border-radius: 999px;
    background: var(--survey);
    color: #fff;
    font-size: 2.8cqi;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
}
.survey__art { flex: none; width: 35.6cqi; height: auto; margin-right: 0.9cqi; }

/* ---------- Menü kartı (işletme sayfası) ---------- */
.menu-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 3cqi;
    width: var(--card-width);
    min-height: 23cqi;
    padding: 4cqi 4cqi 4cqi 4.4cqi;
    overflow: hidden;
    border-radius: var(--card-radius);
    background: linear-gradient(115deg, #fd5d2b 0%, #ff8a4a 100%);
    color: #fff;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.15s;
}
.menu-card:active { transform: scale(0.98); }
.menu-card__body { display: flex; flex: 1; flex-direction: column; align-items: flex-start; gap: 0.6cqi; }
.menu-card__title { font-size: 6.4cqi; font-weight: 800; line-height: 1; text-transform: uppercase; }
.menu-card__text { font-size: 2.2cqi; opacity: 0.92; }
.menu-card__button {
    margin-top: 1.6cqi;
    padding: 0.7cqi 3cqi;
    border-radius: 999px;
    background: #fff;
    color: var(--primary);
    font-size: 2cqi;
    font-weight: 700;
    text-transform: uppercase;
}
.menu-card__art { display: flex; flex: none; align-items: center; }
.menu-card__art img {
    width: 16cqi;
    height: 16cqi;
    border: 0.8cqi solid #fff;
    border-radius: 50%;
    object-fit: cover;
    background: #fff;
    box-shadow: 0 1cqi 2.5cqi rgb(0 0 0 / 0.18);
}
.menu-card__art svg { width: 15cqi; height: 15cqi; color: rgb(255 255 255 / 0.9); }

/* ---------- Menü sayfası ---------- */
.menu-page { width: 87cqi; margin: 0 auto; padding-top: 6cqi; }
.menu-page__title {
    margin: 0 0 3cqi;
    color: var(--primary);
    font-size: 8cqi;
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
}
.menu-nav {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    gap: 2cqi;
    margin: 0 -6.5cqi;
    padding: 2.6cqi 6.5cqi;
    overflow-x: auto;
    background: rgb(255 255 255 / 0.95);
    box-shadow: 0 1px 0 #ececef;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    scrollbar-width: none;
}
.menu-nav::-webkit-scrollbar { display: none; }
.menu-nav__chip {
    flex: none;
    padding: 1.7cqi 3.6cqi;
    border-radius: 999px;
    background: #f3f3f5;
    color: var(--text);
    font-size: 3cqi;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.2s, color 0.2s;
}
.menu-nav__chip.is-active { background: var(--primary); color: #fff; }

.menu-section { padding-top: 5cqi; scroll-margin-top: 15cqi; }
.menu-section__title { margin: 0; font-size: 5.4cqi; font-weight: 800; line-height: 1.2; }
.menu-section__desc { margin: 1cqi 0 0; color: var(--muted); font-size: 3cqi; }

.menu-list { margin: 1.5cqi 0 0; padding: 0; list-style: none; }
.menu-item {
    display: flex;
    align-items: center;
    gap: 3.5cqi;
    padding: 3.2cqi 0;
    border-bottom: 1px solid #efeff2;
}
.menu-item:last-child { border-bottom: 0; }
.menu-item__image {
    flex: none;
    width: 19cqi;
    height: 19cqi;
    border-radius: 3cqi;
    object-fit: cover;
    background: #f5f5f7;
}
/* Fotoğraf dokununca büyür */
.menu-item__zoom {
    flex: none;
    padding: 0;
    border: 0;
    border-radius: 3cqi;
    background: none;
    cursor: zoom-in;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.15s;
}
.menu-item__zoom:active { transform: scale(0.95); }
.menu-item__zoom:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.menu-item__zoom .menu-item__image { display: block; }
.menu-item__body { flex: 1; min-width: 0; }
.menu-item__name { margin: 0; font-size: 3.7cqi; font-weight: 700; line-height: 1.25; }
.menu-item__desc { margin: 0.8cqi 0 0; color: var(--muted); font-size: 3cqi; line-height: 1.35; }
.menu-item__price { flex: none; color: var(--primary); font-size: 3.8cqi; font-weight: 800; white-space: nowrap; }
.menu-item__soldout {
    display: inline-block;
    margin-top: 1.2cqi;
    padding: 0.3cqi 2cqi;
    border-radius: 999px;
    background: #f1f1f3;
    color: var(--muted);
    font-size: 2.3cqi;
    font-weight: 700;
    text-transform: uppercase;
}
.menu-item.is-soldout .menu-item__image,
.menu-item.is-soldout .menu-item__name,
.menu-item.is-soldout .menu-item__desc { opacity: 0.45; }
.menu-item.is-soldout .menu-item__price { color: var(--muted); text-decoration: line-through; }

.menu-page__back {
    display: block;
    margin-top: 8cqi;
    color: var(--primary);
    font-size: 3.2cqi;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
}

/* ---------- Ürün fotoğrafı görüntüleyici ---------- */
html.is-lightbox-open { overflow: hidden; }
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: grid;
    place-items: center;
    padding: 16px;
    background: rgb(12 12 14 / 0.88);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.lightbox__figure {
    display: flex;
    flex-direction: column;
    width: min(92vw, 480px);
    margin: 0;
    overflow: hidden;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 20px 60px rgb(0 0 0 / 0.4);
}
.lightbox__image {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    max-height: 70vh;
    object-fit: cover;
    background: #f5f5f7;
    cursor: zoom-out;
}
.lightbox__caption {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 12px;
    padding: 16px 18px 18px;
    color: #111;
}
.lightbox__name { font-size: 18px; font-weight: 700; line-height: 1.25; }
.lightbox__price { color: var(--primary); font-size: 18px; font-weight: 800; white-space: nowrap; }
.lightbox__desc { grid-column: 1 / -1; color: var(--muted); font-size: 14px; line-height: 1.4; }
.lightbox__price.is-soldout { color: var(--muted); text-decoration: line-through; }
.lightbox__soldout {
    grid-column: 1 / -1;
    justify-self: start;
    padding: 2px 10px;
    border-radius: 999px;
    background: #f1f1f3;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}
.lightbox__close {
    position: fixed;
    top: max(14px, env(safe-area-inset-top));
    right: 14px;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: rgb(255 255 255 / 0.16);
    color: #fff;
    cursor: pointer;
}
.lightbox__close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
    .menu-item__zoom { transition: none; }
}

/* ---------- Mini anket sayfası ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.mini-header {
    display: flex;
    align-items: center;
    gap: 3cqi;
    padding: 6cqi 6cqi 0;
    color: var(--text);
    text-decoration: none;
}
.mini-header__logo { width: 12cqi; height: 12cqi; border-radius: 50%; object-fit: cover; }
.mini-header__name { display: block; font-size: 3.6cqi; font-weight: 700; }
.mini-header__location { display: block; color: var(--muted); font-size: 2.6cqi; }

.survey-page { width: 87cqi; margin: 0 auto; padding-top: 8cqi; }
.survey-page__title {
    margin: 0;
    color: var(--survey);
    font-size: 8cqi;
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
}
.survey-page__lead { margin: 2cqi 0 5cqi; color: var(--muted); font-size: 3.4cqi; line-height: 1.4; }
.survey-page__error {
    margin: 0 0 4cqi;
    padding: 3cqi 4cqi;
    border-radius: 2.5cqi;
    background: #fdecec;
    color: #991b1b;
    font-size: 3.2cqi;
}

.survey-form { display: flex; flex-direction: column; gap: 4cqi; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.rating-card {
    margin: 0;
    padding: 4.5cqi 4.5cqi 3cqi;
    border: 0;
    border-radius: var(--card-radius);
    background: #fff8e6;
}
.rating-card__question {
    display: flex;
    gap: 2.5cqi;
    float: left; /* legend'ı fieldset kenarlığından çıkarır */
    width: 100%;
    margin-bottom: 3cqi;
    padding: 0;
    color: var(--text);
    font-size: 3.8cqi;
    font-weight: 500;
    line-height: 1.35;
}
.rating-card__no {
    display: grid;
    place-items: center;
    flex: none;
    width: 6cqi;
    height: 6cqi;
    border-radius: 50%;
    background: var(--survey);
    color: #fff;
    font-size: 3cqi;
    font-weight: 700;
}
.rating-card__caption {
    clear: both;
    min-height: 1.4em;
    margin: 1cqi 0 0;
    color: #b7860b;
    font-size: 3cqi;
    font-weight: 500;
    text-align: center;
}

.rating {
    clear: both;
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
    gap: 1.5cqi;
}
.rating input { position: absolute; opacity: 0; pointer-events: none; }
.rating label {
    padding: 0 0.5cqi;
    color: #e3ddcf;
    font-size: 11cqi;
    line-height: 1;
    cursor: pointer;
    transition: color 0.12s, transform 0.12s;
    -webkit-tap-highlight-color: transparent;
}
.rating input:checked ~ label { color: var(--survey); }
.rating input:checked + label { transform: scale(1.12); }
.rating input:focus-visible + label { outline: 2px solid var(--survey); outline-offset: 2px; border-radius: 1cqi; }
@media (hover: hover) {
    .rating:hover label { color: #e3ddcf; }
    .rating label:hover, .rating label:hover ~ label { color: #f6d168; }
}

.survey-form__submit {
    display: block;
    width: 100%;
    margin-top: 2cqi;
    padding: 3.6cqi;
    border: 0;
    border-radius: 999px;
    background: var(--survey);
    color: #fff;
    font: inherit;
    font-size: 4cqi;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
}
.survey-form__submit:disabled { opacity: 0.6; cursor: wait; }
.survey-form__progress { margin: 0; color: var(--muted); font-size: 3cqi; text-align: center; }

.survey-page--thanks { padding-top: 16cqi; text-align: center; }
.survey-page--thanks .survey-form__submit { width: auto; display: inline-block; padding: 3.2cqi 8cqi; }
.thanks-badge {
    display: grid;
    place-items: center;
    width: 22cqi;
    height: 22cqi;
    margin: 0 auto 5cqi;
    border-radius: 50%;
    background: #fff8e6;
    color: var(--survey);
    font-size: 12cqi;
    line-height: 1;
}

/* ---------- Footer ---------- */
.site-footer {
    margin-top: 32cqi;
    padding-bottom: 7cqi;
    color: var(--muted);
    text-align: center;
}
.site-footer__logo img { width: 25.6cqi; height: auto; margin: 0 auto; }
.site-footer__copy { margin: 2.1cqi 0 0; font-size: 1.9cqi; }
.site-footer__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1cqi 1.6cqi;
    padding: 0 6cqi;
    margin-top: 2.2cqi;
    font-size: 2.85cqi;
}
.site-footer__links a { color: inherit; text-decoration: none; }

/* ---------- Ana sayfa ve hata sayfası ---------- */
.error-page { padding: 30cqi 8cqi 0; text-align: center; }
.error-page__status { margin: 0; font-size: 7cqi; font-weight: 800; }
.error-page__message { margin: 3cqi auto 0; max-width: 70cqi; color: var(--muted); font-size: 3.4cqi; line-height: 1.4; }
.error-page__status { color: var(--primary); font-size: 16cqi; }
.error-page__link { display: inline-block; margin-top: 5cqi; color: var(--primary); font-size: 3.4cqi; font-weight: 700; }
.error-page__trace { overflow-x: auto; padding: 3cqi; background: #f5f5f5; font-size: 2.4cqi; text-align: left; }

/* ---------- Colovery ana sayfası ---------- */
.home { position: relative; }
.home-hero { padding: 22cqi 8cqi 0; text-align: center; }
.home-hero__logo { width: 36cqi; height: auto; margin: 0 auto; }
.home-hero__title { margin: 7cqi 0 0; font-size: 10cqi; font-weight: 800; line-height: 1.05; }
.home-hero__text { margin: 4cqi auto 0; max-width: 76cqi; color: var(--muted); font-size: 3.7cqi; line-height: 1.5; }
.home-hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 2.5cqi; margin-top: 6cqi; }
.home-hero__url {
    display: inline-block;
    margin: 6cqi 0 0;
    padding: 1.6cqi 4cqi;
    border-radius: 999px;
    background: #fff4ef;
    color: var(--muted);
    font-size: 3.4cqi;
}
.home-hero__url strong { color: var(--primary); }

.home-button {
    display: inline-block;
    padding: 2.6cqi 6cqi;
    border: 0.4cqi solid var(--primary);
    border-radius: 999px;
    background: var(--primary);
    color: #fff;
    font-size: 3.6cqi;
    font-weight: 700;
    text-decoration: none;
}
.home-button--ghost { background: #fff; color: var(--primary); }
.home-button--light { border-color: #fff; background: #fff; color: var(--primary); }

.home-section { margin-top: 14cqi; }
.home-section .section-title { margin-bottom: 5cqi; }

.home-steps {
    display: flex;
    flex-direction: column;
    gap: 5cqi;
    width: var(--card-width);
    margin: 0 auto;
    padding: 0;
    list-style: none;
}
.home-step { display: flex; align-items: flex-start; gap: 4cqi; }
.home-step__number {
    display: grid;
    flex: none;
    place-items: center;
    width: 10cqi;
    height: 10cqi;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-size: 4.6cqi;
    font-weight: 800;
}
.home-step__title { margin: 0.6cqi 0 0; font-size: 4.2cqi; font-weight: 700; }
.home-step__text { margin: 1cqi 0 0; color: var(--muted); font-size: 3.3cqi; line-height: 1.45; }
.home-step__text strong { color: var(--text); }

.home-features { display: flex; flex-direction: column; gap: 4.3cqi; width: var(--card-width); margin: 0 auto; }
.home-feature {
    display: flex;
    align-items: center;
    overflow: hidden;
    border-radius: var(--card-radius);
    color: #fff;
}
.home-feature__body { flex: 1; padding: 5cqi 0 5cqi 5cqi; }
.home-feature__title { margin: 0; font-size: 5cqi; font-weight: 800; line-height: 1.1; }
.home-feature__text { margin: 1.5cqi 0 0; font-size: 3cqi; line-height: 1.4; }
.home-feature__art { flex: none; width: 32cqi; height: auto; align-self: flex-end; }
.home-feature--campaign { flex-direction: column; align-items: stretch; background: var(--primary); }
.home-feature--campaign .home-feature__body { padding-right: 5cqi; }
.home-feature__campaign { width: 100%; height: auto; }
.home-feature--follow { background: var(--follow); }
.home-feature--review { background: var(--review); }
.home-feature--survey { background: #f5f5f5; color: var(--text); }
.home-feature--survey .home-feature__title { color: var(--survey); }
.home-feature--survey .home-feature__art { width: 30cqi; align-self: center; }
.home-feature--franchise { background: var(--franchise); }
.home-feature--franchise .home-feature__art { width: 28cqi; align-self: center; margin-right: 2cqi; }

.home-points {
    display: flex;
    flex-direction: column;
    gap: 3.5cqi;
    width: var(--card-width);
    margin: 0 auto;
    padding: 0;
    list-style: none;
    color: var(--muted);
    font-size: 3.4cqi;
    line-height: 1.5;
}
.home-points li { padding-left: 5cqi; background: radial-gradient(circle, var(--primary) 0.9cqi, transparent 1cqi) 0 1.4cqi / 2cqi 2cqi no-repeat; }
.home-points strong { color: var(--text); }

.home-cta {
    width: var(--card-width);
    margin: 14cqi auto 0;
    padding: 8cqi 6cqi;
    border-radius: var(--card-radius);
    background: var(--primary);
    color: #fff;
    text-align: center;
}
.home-cta__title { margin: 0; font-size: 6cqi; font-weight: 800; line-height: 1.15; }
.home-cta__text { margin: 2.5cqi 0 5cqi; font-size: 3.4cqi; line-height: 1.45; }

/* ---------- Yasal sayfalar ---------- */
.legal { padding: 10cqi 7cqi 0; font-size: 3.6cqi; line-height: 1.6; }
.legal__back { color: var(--muted); font-size: 3.2cqi; text-decoration: none; }
.legal__title { margin: 5cqi 0 0; font-size: 7cqi; font-weight: 800; line-height: 1.15; }
.legal__updated { margin: 1.5cqi 0 6cqi; color: var(--muted); font-size: 3cqi; }
.legal h2 { margin: 7cqi 0 2cqi; font-size: 4.4cqi; font-weight: 700; line-height: 1.3; }
.legal p, .legal ul { margin: 0 0 3cqi; }
.legal ul { padding-left: 5cqi; }
.legal li + li { margin-top: 1.5cqi; }
.legal a:not(.legal__back) { color: var(--primary); }
.legal__table { overflow-x: auto; margin: 0 0 3cqi; }
.legal table { width: 100%; border-collapse: collapse; font-size: 3cqi; line-height: 1.4; }
.legal th, .legal td { padding: 2cqi; border: 1px solid #e5e5e5; text-align: left; vertical-align: top; }
.legal th { background: #f7f7f7; }
.legal code { font-size: 0.95em; word-break: break-all; }

/* ---------- Açılış ekranı (preloader) ---------- */
.preloader {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    background: #fff;
    transition: opacity 0.35s ease, visibility 0.35s;
}
.preloader.is-hidden { opacity: 0; visibility: hidden; }
.preloader__logo { width: min(56vw, 240px); height: auto; overflow: visible; }
.preloader__smile,
.preloader__wink { transform-box: fill-box; }
.preloader__smile {
    transform-origin: 50% 0;
    animation: preloader-smile 1.4s cubic-bezier(0.45, 0, 0.3, 1) infinite;
}
.preloader__wink {
    transform-origin: 50% 50%;
    animation: preloader-wink 1.4s ease-in-out infinite;
}
@keyframes preloader-smile {
    0%, 100% { transform: scale(1, 1); }
    30%      { transform: scale(1.08, 0.45); }
    55%      { transform: scale(0.96, 1.2); }
    75%      { transform: scale(1.02, 0.94); }
}
/* Ağız en geniş gülüşteyken (%30) göz kapalı kalır */
@keyframes preloader-wink {
    0%, 15%, 50%, 100% { transform: scaleY(1); }
    25%, 38%           { transform: scaleY(0.1); }
}
@media (prefers-reduced-motion: reduce) {
    .preloader__smile, .preloader__wink { animation: none; }
}