/* Little pages inside our album: play, care, places and songs. */

/* Two sides of the same story. */

/* A folded page for the days when she needs a little care. */
.care-wrapper { width:min(1120px,calc(100% - 96px)); margin:38px auto 0; }
.care-details { border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.care-details > summary { display:flex; align-items:center; gap:24px; padding:32px 0; list-style:none; cursor:pointer; }
.care-details > summary::-webkit-details-marker { display:none; }
.care-symbol { display:grid; place-items:center; width:60px; height:60px; flex-shrink:0; border:1px solid var(--line); border-radius:50%; color:var(--rose); font-size:38px; line-height:1; }
.care-details > summary strong { display:block; margin-bottom:5px; font:500 29px/1.15 var(--font-serif); }
.care-details > summary strong + span { color:var(--muted); font-size:12px; }
.care-open { display:flex; align-items:center; gap:24px; margin-left:auto; color:var(--wine); font-size:11px; white-space:nowrap; }
.care-open > span { display:inline-block; font:300 28px var(--font-sans); transition:transform .25s; }
.care-details[open] .care-open > span { transform:rotate(45deg); }
.section.section-cycle { width:100%; max-width:none; padding:32px 0 42px; }
.section-cycle .section-header { margin-bottom:28px; }
.section-cycle .section-title { font-size:42px; }
.cycle-layout { display:grid; grid-template-columns:.9fr 1.2fr 1fr; grid-template-areas:"phase calendar mood" "stats calendar mood"; gap:18px; align-items:start; }
.cycle-phase-card { grid-area:phase; padding:25px 22px; text-align:center; }
.cycle-stats-col { grid-area:stats; display:grid; gap:10px; }
.cycle-calendar-card { grid-area:calendar; padding:25px 20px; }
.mood-logger-card { grid-area:mood; padding:25px 22px; }
.cycle-layout .glass-card { border:1px solid var(--line); border-radius:13px; background:var(--paper-light); box-shadow:none; }
.phase-ring-wrapper { position:relative; width:148px; height:148px; margin:0 auto 15px; }
.phase-ring { width:100%; height:100%; }
.phase-ring > circle:first-child { stroke:#f0e0e4; }
.phase-ring-inner { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.phase-icon { font-size:22px; line-height:1.25; }
.phase-day { color:var(--wine); font:500 37px/1 var(--font-serif); }
.phase-day-label { margin-top:3px; color:var(--muted); font-size:10px; }
.phase-name { margin-bottom:9px; font:500 23px/1.2 var(--font-serif); }
.phase-advice { font-size:12px; line-height:1.65; color:var(--muted); }
.cycle-settings-btn { margin-top:18px; padding:9px 16px; background:#f6e9ed; border:1px solid var(--line); border-radius:6px; color:var(--wine); font:500 11px var(--font-sans); cursor:pointer; }
.cycle-settings-btn:hover { background:#efdae1; }
.cycle-stat-card { padding:15px 19px; }
.cstat-label { margin-bottom:5px; color:var(--muted); font-size:9px; letter-spacing:.1em; text-transform:uppercase; }
.cstat-val { font:500 25px/1.15 var(--font-serif); color:var(--wine); }
.cstat-sub { margin-top:4px; font-size:10px; color:var(--muted); }
.cal-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:21px; }
.cal-month-title { font:500 23px var(--font-serif); }
.cal-nav { display:grid; place-items:center; width:34px; height:34px; border:1px solid var(--line); border-radius:50%; background:none; color:var(--wine); font:400 25px var(--font-serif); cursor:pointer; }
.cal-nav:hover { background:#f6e9ed; }
.cal-weekdays,.cal-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:5px; }
.cal-weekdays { margin-bottom:8px; text-align:center; color:var(--muted); font-size:10px; }
.cal-day { position:relative; display:grid; place-items:center; appearance:none; aspect-ratio:1; min-width:0; padding:0; border:1px solid transparent; border-radius:7px; background:transparent; color:var(--ink); font:400 12px var(--font-sans); cursor:pointer; }
.cal-day:not(.empty):hover { border-color:var(--rose); }
.cal-day.empty { pointer-events:none; }
.cal-day.period { background:#efd3dd; color:var(--wine); }
.cal-day.ovulation { background:#f3e5c7; color:#79622b; }
.cal-day.fertile { background:#e5eedf; color:#4d6542; }
.cal-day.luteal { background:#ece6f4; color:#675278; }
.cal-day.today { border:1px solid var(--wine); font-weight:600; }
.cal-day.selected { box-shadow:inset 0 0 0 2px var(--rose); }
.cal-day.has-log::after { content:""; position:absolute; width:3px; height:3px; bottom:4px; left:calc(50% - 1.5px); border-radius:50%; background:var(--wine); }
.cal-legend { display:flex; flex-wrap:wrap; gap:10px 13px; padding-top:18px; margin-top:18px; border-top:1px solid var(--line); }
.legend-item { display:inline-flex; align-items:center; gap:5px; color:var(--muted); font-size:9px; }
.legend-dot { width:6px; height:6px; border-radius:50%; }
.mood-logger-title { margin-bottom:18px; font:500 24px/1.2 var(--font-serif); }
.mood-options { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:4px; margin-bottom:23px; }
.mood-btn { display:grid; place-items:center; min-width:0; aspect-ratio:1; padding:4px; border:1px solid transparent; border-radius:8px; background:none; font-size:23px; cursor:pointer; }
.mood-btn:hover,.mood-btn.selected { border-color:var(--rose); background:#f4e3e9; }
.symptom-label { margin-bottom:10px; color:var(--muted); font-size:9px; letter-spacing:.11em; text-transform:uppercase; }
.symptom-grid { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:18px; }
.symptom-btn { padding:7px 10px; border:1px solid var(--line); border-radius:20px; background:none; color:var(--muted); font:400 10px var(--font-sans); cursor:pointer; }
.symptom-btn:hover,.symptom-btn.selected { border-color:var(--rose); background:#f4e3e9; color:var(--wine); }
.mood-note { display:block; width:100%; min-height:94px; resize:vertical; padding:12px; border:1px solid var(--line); border-radius:7px; background:#fcf7f5; color:var(--ink); font:400 13px/1.55 var(--font-sans); }
.mood-note::placeholder { color:var(--muted); }
.save-mood-btn,.btn-save { padding:11px 20px; border:1px solid var(--wine); border-radius:7px; background:var(--wine); color:var(--paper-light); font:500 12px var(--font-sans); cursor:pointer; }
.save-mood-btn { width:100%; margin-top:13px; }
.save-mood-btn:disabled { opacity:.5; cursor:not-allowed; }
.mood-saved-msg { margin-top:10px; font-size:11px; line-height:1.5; color:var(--wine); }
.mood-saved-msg:empty { margin:0; }

/* The atlas on our coffee table. */
.map-shell { padding:25px 30px 20px; border:1px solid var(--line); border-radius:17px; background:var(--paper-light); }
.map-toolbar { display:flex; align-items:center; justify-content:space-between; gap:18px; color:var(--muted); font-size:11px; }
.map-toolbar > span { display:inline-flex; align-items:center; gap:9px; }
.map-dot { width:6px; height:6px; border-radius:50%; background:var(--rose); }
#mapCitySelect { max-width:52%; width:180px; min-height:36px; padding:8px 22px 8px 10px; border:0; border-bottom:1px solid var(--line); background:transparent; color:var(--wine); font:400 12px var(--font-sans); cursor:pointer; }
.map-container { padding:30px 6px 8px; }
.map-container svg { display:block; width:100%; height:auto; overflow:visible; }
.map-container svg path { fill:#e8c9d3; stroke:var(--paper-light); stroke-width:1.2; transition:fill .2s,stroke .2s; }
.map-container svg g { cursor:pointer; outline:none; }
.map-container svg g:hover path,.map-container svg g.is-selected path { fill:var(--wine); }
.map-container svg g:focus-visible path { fill:var(--rose); stroke:var(--wine); stroke-width:2.5; }
.map-loading { padding:70px 15px; text-align:center; color:var(--muted); font-size:14px; }
.map-caption { display:flex; align-items:center; justify-content:center; gap:12px; margin:10px 0 0; font:400 23px var(--font-hand); color:var(--muted); }
.map-caption .icon { width:16px; height:16px; color:var(--rose); }
.map-tooltip { position:fixed; z-index:900; padding:7px 13px; border:1px solid var(--line); border-radius:7px; background:var(--paper-light); color:var(--wine); font-size:12px; box-shadow:0 5px 18px #753c501a; pointer-events:none; opacity:0; transition:opacity .15s; }
.map-tooltip.visible { opacity:1; }

/* Letters, small wishes and photographs held up to the light. */
.dialog-overlay,.cycle-settings-modal,.map-modal-overlay,.map-lightbox-overlay { position:fixed; inset:0; z-index:1000; display:none; align-items:center; justify-content:center; padding:32px; background:#62404c66; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); overscroll-behavior:contain; }
.dialog-overlay.active,.dialog-overlay.open,.cycle-settings-modal.active,.cycle-settings-modal.open,.map-modal-overlay.active,.map-modal-overlay.open,.map-lightbox-overlay.active,.map-lightbox-overlay.open { display:flex; }
.dialog-overlay[hidden],.cycle-settings-modal[hidden],.map-modal-overlay[hidden],.map-lightbox-overlay[hidden],.playlist-dropdown[hidden],#youtubePlayer[hidden] { display:none!important; }
.dialog-close,.map-modal-close { position:absolute; top:16px; right:16px; display:grid; place-items:center; width:40px; height:40px; padding:0; border:1px solid var(--line); border-radius:50%; background:var(--paper-light); color:var(--wine); font:300 27px/1 var(--font-sans); cursor:pointer; }
.dialog-close:hover,.map-modal-close:hover { background:#f4e3e9; }
.letter-sheet,.wish-dialog,.map-modal,.cycle-settings-inner { position:relative; max-height:calc(100dvh - 64px); overflow-y:auto; overscroll-behavior:contain; border:1px solid #ead9da; border-radius:14px; background:var(--paper-light); color:var(--ink); box-shadow:0 28px 100px #45263329; }
.map-modal { width:780px; padding:42px; }
.map-modal > .section-tag { display:block; padding-right:25px; font-size:9px; }
.map-modal-title { margin:12px 0 8px; font:500 47px/1 var(--font-serif); color:var(--wine); }
.map-modal-subtitle { margin:0 0 25px; color:var(--muted); font-size:13px; line-height:1.5; }
.map-gallery { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.map-gallery-item { position:relative; padding:7px 7px 17px; background:white; border:1px solid var(--line); box-shadow:0 4px 13px #753c500a; }
.map-gallery-open { display:block; width:100%; aspect-ratio:1; overflow:hidden; padding:0; border:0; background:#f1e7e5; color:var(--muted); font:400 12px var(--font-sans); cursor:pointer; }
.map-gallery-open img { width:100%; height:100%; object-fit:cover; transition:transform .35s ease; }
.map-gallery-open:hover img { transform:scale(1.04); }
.map-photo-delete { position:absolute; top:10px; right:10px; display:grid; place-items:center; width:30px; height:30px; border:0; border-radius:50%; background:#fffaf5ed; color:var(--wine); font:400 20px var(--font-sans); cursor:pointer; }
.map-photo-delete:hover { background:var(--wine); color:white; }
.map-photo-delete:disabled { opacity:.5; cursor:wait; }
.map-gallery-empty { grid-column:1/-1; padding:40px 20px; border:1px dashed var(--line); border-radius:9px; text-align:center; }
.map-gallery-empty p:first-child { margin:0 0 9px; color:var(--wine); font:500 27px var(--font-serif); }
.map-gallery-empty p + p { margin:0; color:var(--muted); font-size:13px; line-height:1.5; }
.map-gallery-retry { margin-top:13px; padding:8px 13px; border:1px solid var(--line); border-radius:5px; background:var(--paper-light); color:var(--wine); font:500 12px var(--font-sans); cursor:pointer; }
.map-upload-bar { display:flex; align-items:center; flex-wrap:wrap; gap:15px; margin-top:23px; padding-top:23px; border-top:1px solid var(--line); }
.map-add-photo-btn { cursor:pointer; }
.map-add-photo-btn[aria-disabled="true"] { pointer-events:none; opacity:.5; }
.map-upload-bar:has(input:focus-visible) .map-add-photo-btn { outline:2px solid var(--wine); outline-offset:4px; }
.map-photo-count { flex:1; min-width:140px; color:var(--muted); font-size:11px; line-height:1.5; }
.map-lightbox-overlay { flex-direction:column; background:#f0e2e7ed; }
.map-lightbox-overlay > img,.map-lightbox-overlay figure img { display:block; max-width:min(900px,calc(100vw - 180px)); max-height:calc(100dvh - 155px); width:auto; height:auto; object-fit:contain; padding:9px; border:1px solid var(--line); background:var(--paper-light); box-shadow:0 20px 60px #753c5020; }
.map-lightbox-overlay figure { margin:0; max-width:100%; }
.map-lightbox-overlay figcaption { margin-top:15px; color:var(--wine); text-align:center; font:400 27px var(--font-hand); }
.lbx-close,.lbx-nav { position:absolute; display:grid; place-items:center; width:46px; height:46px; border:1px solid #cfb0ba; border-radius:50%; background:#fffaf8cc; color:var(--wine); cursor:pointer; }
.lbx-close { top:23px; right:23px; font:300 30px var(--font-sans); }
.lbx-nav { top:50%; transform:translateY(-50%); font:400 34px/1 var(--font-serif); }
.lbx-prev { left:25px; }.lbx-next { right:25px; }
.lbx-close:hover,.lbx-nav:hover { background:white; border-color:var(--wine); }
.lbx-nav:disabled { opacity:.3; cursor:default; }
.lightbox-counter { position:absolute; bottom:22px; color:var(--muted); font-size:11px; letter-spacing:.15em; }
.cycle-settings-inner { width:420px; padding:35px; }
.cycle-settings-inner h3 { margin:0 0 25px; font:500 31px var(--font-serif); }
.settings-field { margin-bottom:19px; }
.settings-field label { display:block; margin-bottom:8px; color:var(--muted); font-size:12px; }
.settings-field input { display:block; width:100%; min-height:46px; padding:10px 12px; border:1px solid var(--line); border-radius:6px; background:#fcf7f5; color:var(--ink); font:400 16px var(--font-sans); color-scheme:light; }
.settings-field input[aria-invalid="true"] { border-color:var(--wine); }
.settings-error { margin:0 0 17px; padding:10px 12px; border-radius:6px; background:#f7e6ea; color:var(--wine); font-size:12px; line-height:1.5; }
.settings-error:empty { margin:0; padding:0; }
.settings-modal-btns { display:flex; gap:10px; padding-top:3px; }
.btn-close { padding:11px 20px; border:1px solid var(--line); border-radius:7px; background:none; color:var(--muted); font:500 12px var(--font-sans); cursor:pointer; }

/* A small record player that follows us from page to page. */
.vinyl { display:grid; place-items:center; width:44px; height:44px; border:1px solid #cda6b5; border-radius:50%; background:repeating-radial-gradient(circle,#70414f 0 1px,#80505e 2px 3px); animation:recordSpin 9s linear infinite; animation-play-state:paused; }
.vinyl span { display:grid; place-items:center; width:20px; height:20px; border-radius:50%; background:#e1b2c2; color:var(--wine); font-size:12px; }
.vinyl.is-playing { animation-play-state:running; }
.music-info { display:flex; flex-direction:column; min-width:0; gap:2px; }
.music-label { font-size:7px; letter-spacing:.13em; color:var(--rose); }
.music-song-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink); font:500 13px var(--font-sans); }
.music-artist { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:9px; color:var(--muted); }
.music-controls { display:flex; align-items:center; justify-content:center; gap:3px; }
.music-ctrl { display:grid; place-items:center; width:30px; height:36px; padding:0; border:0; background:none; color:var(--wine); font-size:13px; cursor:pointer; }
.music-play { width:39px; height:39px; border-radius:50%; background:var(--wine); color:var(--paper-light); font-size:13px; }
.music-play:hover { background:var(--rose); }
.music-play.is-loading { animation:musicLoading 1s ease-in-out infinite alternate; }
.music-timeline { display:flex; align-items:center; min-width:0; gap:6px; color:var(--muted); font-size:8px; font-variant-numeric:tabular-nums; }
.music-timeline > span { white-space:nowrap; }
#musicProgress { appearance:none; -webkit-appearance:none; width:100%; min-width:30px; height:18px; margin:0; border:0; border-radius:3px; background:transparent; cursor:pointer; accent-color:var(--rose); }
#musicProgress::-webkit-slider-runnable-track { height:3px; border-radius:3px; background:linear-gradient(to right,var(--rose) var(--progress,0%),#e5d4da var(--progress,0%)); }
#musicProgress::-webkit-slider-thumb { -webkit-appearance:none; width:8px; height:8px; margin-top:-2.5px; border:0; border-radius:50%; background:var(--rose); }
#musicProgress::-moz-range-track { height:3px; border-radius:3px; background:#e5d4da; }
#musicProgress::-moz-range-progress { height:3px; border-radius:3px; background:var(--rose); }
#musicProgress::-moz-range-thumb { width:8px; height:8px; border:0; border-radius:50%; background:var(--rose); }
#musicProgress:disabled { cursor:default; opacity:.5; }
.playlist-header { position:sticky; top:0; z-index:1; padding:22px 23px 16px; border-bottom:1px solid var(--line); background:var(--paper-light); }
#musicSearch { width:100%; min-height:40px; padding:10px 12px; border:1px solid var(--line); border-radius:6px; background:var(--paper); color:var(--ink); font:400 13px var(--font-sans); }
#musicSearch::placeholder { color:var(--muted); }
#playlistItems { display:flex; flex-direction:column; margin:0; padding:8px 10px 12px; list-style:none; }
.playlist-item { display:flex; align-items:center; gap:12px; width:100%; min-height:62px; padding:10px 12px; border:0; border-radius:7px; background:none; color:var(--ink); font-family:var(--font-sans); text-align:left; cursor:pointer; }
.playlist-item:hover { background:var(--paper); }.playlist-item.is-active { background:#f2e0e7; color:var(--wine); }
.playlist-track-number { width:18px; flex-shrink:0; color:var(--muted); font-size:10px; font-variant-numeric:tabular-nums; }
.playlist-track-copy { display:flex; flex:1; min-width:0; flex-direction:column; gap:4px; }
.playlist-track-title { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; font-weight:500; }
.playlist-track-meta { color:var(--muted); font-size:10px; }.playlist-track-kind { white-space:nowrap; font-size:8px; color:var(--muted); }
.playlist-empty { padding:20px 14px; color:var(--muted); font-size:13px; line-height:1.6; }
#youtubePlayer { padding:17px; border-bottom:1px solid var(--line); }
.youtube-note { margin:12px 0 8px; color:var(--muted); font-size:11px; line-height:1.5; }.youtube-link { color:var(--wine); font-size:11px; text-decoration:underline; text-underline-offset:3px; }
@keyframes recordSpin { to { transform:rotate(360deg); } }
@keyframes musicLoading { to { opacity:.55; } }

@media (max-width:800px) {
  .care-wrapper { width:calc(100% - 56px); }.care-details > summary { gap:17px; }.care-details > summary strong { font-size:26px; }.care-open { gap:16px; font-size:10px; }.care-symbol { width:48px; height:48px; font-size:30px; }
  .cycle-layout { grid-template-columns:1fr 1.2fr; grid-template-areas:"phase calendar" "stats calendar" "mood mood"; }.mood-options { max-width:320px; }.cycle-stats-col { grid-template-columns:repeat(3,minmax(0,1fr)); }.cycle-stat-card { padding:13px 10px; }.cstat-val { font-size:21px; }.cstat-label { font-size:8px; }
  .map-shell { padding:20px 20px 18px; }.map-container { padding:25px 0 10px; }.map-modal { padding:35px 28px; }
}

@media (max-width:600px) {
  .care-wrapper { width:calc(100% - 40px); margin-top:15px; }.care-details > summary { align-items:center; gap:12px; padding:25px 0; }.care-symbol { width:38px; height:38px; font-size:25px; }.care-details > summary strong { font-size:23px; }.care-details > summary strong + span { display:block; max-width:235px; font-size:10px; line-height:1.5; }.care-open { font-size:0; gap:0; }.care-open > span { font-size:26px; }.section.section-cycle { padding:26px 0 30px; }.section-cycle .section-title { font-size:36px; }
  .cycle-layout { grid-template-columns:1fr; grid-template-areas:"phase" "stats" "calendar" "mood"; gap:13px; }.cycle-phase-card { padding:23px; }.cycle-stats-col { gap:7px; }.cycle-stat-card { padding:14px 9px; }.cstat-val { font-size:22px; }.cycle-calendar-card,.mood-logger-card { padding:23px 20px; }.cal-day { font-size:13px; }.cal-weekdays,.cal-grid { gap:7px; }.mood-options { max-width:none; gap:8px; }.mood-btn { font-size:27px; }.symptom-btn { padding:8px 12px; font-size:11px; }.mood-note { font-size:16px; }
  .map-shell { padding:18px 13px; border-radius:12px; }.map-toolbar { gap:8px; font-size:9px; }#mapCitySelect { width:135px; padding-left:4px; font-size:11px; }.map-container { padding:32px 0 19px; }.map-caption { gap:7px; margin:0; font-size:18px; }.map-caption .icon { width:13px; height:13px; }
  .dialog-overlay,.cycle-settings-modal,.map-modal-overlay { padding:15px; }.letter-sheet,.wish-dialog,.map-modal,.cycle-settings-inner { max-height:calc(100dvh - 30px); border-radius:11px; }.letter-sheet { padding:47px 28px 30px; background-image:none; }.letter-sheet h2 { font-size:36px; }.letter-content { font-size:21px; line-height:1.55; }.letter-content p { margin-bottom:16px; }.letter-postscript { font-size:21px; }.dialog-close,.map-modal-close { top:10px; right:10px; width:34px; height:34px; }
  .wish-dialog { padding:48px 25px 30px; }.wish-dialog h2 { font-size:38px; }.wish-dialog > p { font-size:13px; }.wish-actions { margin-top:23px; }.map-modal { padding:40px 20px 23px; }.map-modal-title { font-size:40px; }.map-modal-subtitle { font-size:12px; }.map-gallery { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }.map-gallery-empty { padding:30px 15px; }.map-gallery-empty p:first-child { font-size:24px; }.map-photo-count { font-size:10px; }.map-upload-bar { gap:12px; }.cycle-settings-inner { padding:30px 23px; }
  .map-lightbox-overlay { padding:15px; }.map-lightbox-overlay > img,.map-lightbox-overlay figure img { max-width:calc(100vw - 32px); max-height:calc(100dvh - 190px); padding:6px; }.map-lightbox-overlay figcaption { max-width:calc(100vw - 48px); font-size:24px; }.lbx-nav { top:auto; bottom:23px; transform:none; width:40px; height:40px; }.lbx-prev { left:calc(50% - 85px); }.lbx-next { right:calc(50% - 85px); }.lbx-close { top:15px; right:15px; width:38px; height:38px; }.lightbox-counter { bottom:35px; }
}

@media (prefers-reduced-motion:reduce) {
  .quiz-progress-fill,.quiz-opt,.care-open > span,.map-container svg path,.map-tooltip,.map-gallery-open img { transition:none; }
  .vinyl,.music-play.is-loading { animation:none; }
  .quiz-opt:not(:disabled):hover,.map-gallery-open:hover img { transform:none; }
}

/* A little more room for the photographs and the words. */
.bot-challenge { margin-bottom:16px; min-height:65px; }
#worldRoot { overflow-x:clip; }
.section-home { grid-template-columns:minmax(0,1fr) minmax(0,1.03fr); }
.hero-copy,.hero-collage,.surprise-copy { min-width:0; }
.wordmark { font-size:38px; }
.button { min-height:53px; font-size:14px; }
.eyebrow,.section-tag { font-size:11px; }
.hero-copy h1 { font-size:clamp(68px,7vw,104px); }
.hero-description,.section-desc,.archive-entry p { font-size:15px; }
.hero-footnote { font-size:26px; }
.section-title { font-size:clamp(42px,4.5vw,64px); }
.together-intro h2 { font-size:36px; }
.timer-val { font-size:48px; }
.timer-unit { font-size:10px; }
.timer-since { font-size:12px; }
.photo-caption > span:first-child { font-size:25px; }
.archive-entry h3 { font-size:31px; }
.login-copy h1 { font-size:clamp(56px,5.1vw,82px); }
.login-copy > p { font-size:15px; }
.login-privacy { font-size:12px; }

@media (min-width:1101px) {
  .section:not(.surprise-section),.together-section,.footer-bottom { max-width:1280px; }
  .top-nav { padding-inline:max(calc((100vw - 1280px)/2),5vw); }
  .nav-link { font-size:12px; }
  .hero-collage { height:552px; }
  .polaroid-main { width:280px; height:363px; top:88px; }
  .polaroid-back { width:253px; height:323px; top:44px; }
  .polaroid-small { width:201px; height:249px; }
}

@media (max-width:1000px) {
  .hero-copy h1 { font-size:77px; }
}

@media (max-width:800px) {
  .hero-copy h1 { font-size:64px; }
  .section-title { font-size:50px; }
  .login-copy h1 { font-size:59px; }
}

@media (max-width:600px) {
  .top-nav { gap:8px; }
  .nav-actions { gap:6px; }
  .wordmark { font-size:34px; }
  .section-home,.surprise-section { grid-template-columns:minmax(0,1fr); }
  .nav-link { font-size:14px; }
  .hero-copy h1 { font-size:clamp(56px,18.8vw,74px); }
  .hero-description,.section-desc { font-size:14px; }
  .hero-actions { gap:10px; flex-wrap:wrap; }
  .hero-actions .button { min-height:48px; font-size:12px; padding-inline:12px; }
  .hero-collage { width:350px; height:400px; }
  .polaroid-main { width:189px; height:256px; }
  .polaroid-back { width:167px; height:226px; }
  .polaroid-small { width:143px; height:186px; }
  .together-intro h2 { font-size:33px; }
  .timer-val { font-size:36px; }
  .timer-unit { font-size:9px; letter-spacing:.6px; }
  .timer-since { font-size:11px; }
  .section-title { font-size:clamp(42px,12.3vw,48px); }
  .photo-caption > span:first-child { font-size:20px; }
  .login-copy h1 { font-size:64px; }
  .login-copy > p { font-size:14px; }
}
@media(max-width:600px) {
  .top-nav { backdrop-filter:none; -webkit-backdrop-filter:none; background:var(--paper); }
  .page-grain { display:none; }
}

/* ============================================================
   Döngü (tracker.js) — tam ekran, uygulama gibi
   ============================================================ */
.cycle-entry { display:flex; align-items:center; gap:24px; width:100%; padding:32px 0; border:0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:none; color:var(--ink); text-align:left; cursor:pointer; font:inherit; }
.cycle-entry-text strong { display:block; margin-bottom:5px; font:500 29px/1.15 var(--font-serif); }
.cycle-entry-text > span { color:var(--muted); font-size:13px; }
.cycle-entry:hover .care-open > span { transform:translateX(4px); }
.cycle-entry .care-open > span { transition:transform .25s; }
body.cy-locked { overflow:hidden; }
.cy-app { --cy-card:#fffbf8; --cy-wine:var(--wine); --cy-period:#c2415f; --cy-elapsed:#ecbfca; --cy-track:#efe3e5; --cy-fertile:#9db8a6; --cy-ovu:#c9a24c;
  position:fixed; inset:0; z-index:200; display:flex; flex-direction:column; background:var(--paper); color:var(--ink); font-family:var(--font-sans); animation:cy-in .32s cubic-bezier(.16,1,.3,1); }
.cy-app[hidden] { display:none; }
@keyframes cy-in { from { opacity:0; transform:translateY(18px); } }
.cy-top, .cy-body, .cy-tabs { width:100%; max-width:520px; margin:0 auto; }
.cy-top { display:flex; align-items:center; justify-content:space-between; padding:calc(env(safe-area-inset-top) + 14px) 22px 6px; }
.cy-brand { font:600 26px var(--font-serif); color:var(--wine); }
.cy-brand em { color:var(--rose); }
.cy-close { width:38px; height:38px; border-radius:50%; border:1px solid var(--line); background:var(--cy-card); color:var(--wine); font-size:22px; line-height:1; cursor:pointer; }
.cy-body { flex:1; overflow-y:auto; padding:6px 22px calc(env(safe-area-inset-bottom) + 110px); -webkit-overflow-scrolling:touch; }
.cy-view > * + * { margin-top:14px; }
.cy-view > .cy-view-gap { margin-top:22px; }
.cy-loading, .cy-muted { color:var(--muted); font-size:14px; }
.cy-loading { padding:40px 0; text-align:center; }
.center { text-align:center; display:block; margin-left:auto; margin-right:auto; }
.cy-eyebrow { font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--rose); font-weight:500; margin-top:22px !important; }
.cy-h1 { font:500 34px/1.06 var(--font-serif); color:var(--ink); margin:6px 0 0; }
.cy-h1 em { color:var(--rose); }
.cy-h1.small { font-size:30px; margin:0; }
.cy-card { background:var(--cy-card); border:1px solid var(--line); border-radius:22px; box-shadow:0 14px 40px #65354210; }
.cy-pad { padding:14px 16px; }
.cy-text { font-size:14px; color:var(--muted); margin-top:10px; line-height:1.45; }
.cy-quote { font:italic 500 19px/1.25 var(--font-serif); color:var(--wine); display:block; }
.cy-meta { display:block; font-size:12px; color:var(--muted); margin-top:3px; }
/* ring */
.cy-ring { position:relative; width:250px; height:250px; margin:8px auto 0 !important; }
.cy-ring-svg { width:100%; height:100%; display:block; }
.cy-ring-svg circle { transition:stroke-dasharray .8s cubic-bezier(.16,1,.3,1), cx .8s, cy .8s; }
.cy-ring-c { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.cy-k { font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.cy-n { font:500 76px/.9 var(--font-serif); color:var(--wine); }
.cy-s { font-size:13px; color:var(--muted); }
.cy-phase { margin-top:8px; padding:5px 12px; border-radius:99px; background:#f6eaee; color:var(--wine); font-size:12.5px; font-weight:500; }
.cy-phase-follicular, .cy-phase-fertile { background:#eef3ef; color:#4f6b58; }
.cy-phase-ovulation { background:#f6ecd2; color:#7d6020; }
.cy-phase-period { background:#fbe9ee; color:#8d2d47; }
/* stats / buttons */
.cy-row { display:flex; gap:10px; }
.cy-row > * { flex:1; }
.cy-stat { padding:13px 14px; border-radius:18px; background:var(--cy-card); border:1px solid var(--line); min-width:0; }
.cy-l { font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.cy-v { font:500 25px/1.15 var(--font-serif); color:var(--ink); margin-top:3px; }
.cy-v small { font:400 12px var(--font-sans); color:var(--muted); }
.cy-btn { display:flex; align-items:center; justify-content:center; gap:8px; min-height:52px; padding:0 16px; border-radius:16px; font:500 15px var(--font-sans); cursor:pointer; border:1px solid var(--line); background:var(--cy-card); color:var(--wine); transition:transform .15s; }
.cy-btn:active { transform:scale(.97); }
.cy-btn.primary { background:var(--wine); border-color:var(--wine); color:#fff; box-shadow:0 10px 24px #753c5033; }
.cy-btn.primary { flex:1.3; }
.cy-btn.wide { width:100%; }
.cy-btn:disabled { opacity:.6; }
.cy-link { background:none; border:0; color:var(--wine); font:500 14px var(--font-sans); padding:10px 0 0; cursor:pointer; }
.cy-link.danger { color:#b23a4f; margin-top:6px; }
.cy-note { display:flex; gap:12px; align-items:center; width:100%; padding:14px 16px; text-align:left; cursor:pointer; font:inherit; color:inherit; }
.cy-note-ic { font-size:22px; }
/* chips */
.cy-chips { display:flex; flex-wrap:wrap; gap:8px; }
.cy-chip, .cy-chips.pick button { padding:8px 13px; border-radius:99px; border:1px solid var(--line); background:var(--cy-card); font:400 13.5px var(--font-sans); color:var(--ink); }
.cy-chip.soft { background:#fbe9ee; border-color:#f1c9d3; color:#8d2d47; }
.cy-chips.pick button { cursor:pointer; }
.cy-chips.pick button.is-on { background:var(--wine); border-color:var(--wine); color:#fff; }
/* partner */
.cy-hero { position:relative; overflow:hidden; padding:20px; border-radius:24px; background:linear-gradient(150deg,#7f4257,#a75470 60%,#c97a8f); color:#fff; box-shadow:0 18px 40px #753c5040; }
.cy-hero::after { content:''; position:absolute; right:-40px; top:-40px; width:170px; height:170px; border-radius:50%; background:#ffffff1f; }
.cy-hero-k { font-size:11px; letter-spacing:.16em; text-transform:uppercase; opacity:.85; }
.cy-hero-big { font:500 40px/1 var(--font-serif); margin:8px 0 6px; }
.cy-hero-sub { font-size:14px; opacity:.92; line-height:1.45; }
.cy-bar { height:8px; border-radius:9px; background:#ffffff33; margin-top:14px; overflow:hidden; }
.cy-bar i { display:block; height:100%; background:#fff; border-radius:9px; transition:width .8s cubic-bezier(.16,1,.3,1); }
.cy-advice { font:italic 500 18px/1.3 var(--font-serif); color:var(--wine); }
.cy-tip { display:flex; gap:12px; padding:14px; align-items:flex-start; }
.cy-tip + .cy-tip { border-top:1px solid var(--line); }
.cy-tip-e { width:40px; height:40px; border-radius:14px; display:grid; place-items:center; font-size:20px; flex:none; background:#fbe9ee; }
.cy-tip b { display:block; font-size:14.5px; font-weight:500; }
.cy-tip span span { font-size:13px; color:var(--muted); line-height:1.35; display:block; margin-top:2px; }
/* calendar */
.cy-cal-head { display:flex; align-items:center; justify-content:space-between; }
.cy-month { display:flex; align-items:center; gap:10px; color:var(--muted); font-size:14px; }
.cy-month button { width:34px; height:34px; border-radius:50%; border:1px solid var(--line); background:var(--cy-card); color:var(--wine); font-size:18px; cursor:pointer; }
.cy-cal { padding:14px 10px 12px; }
.cy-grid { display:grid; grid-template-columns:repeat(7,1fr); row-gap:4px; text-align:center; }
.cy-wd { font-size:11px; color:var(--muted); padding-bottom:6px; }
.cy-d { position:relative; height:44px; display:grid; place-items:center; border:0; background:none; font:400 15px var(--font-sans); color:var(--ink); cursor:pointer; padding:0; }
.cy-d.is-empty { cursor:default; }
.cy-d > span { width:38px; height:38px; display:grid; place-items:center; border-radius:50%; transition:transform .15s; }
.cy-d:active > span { transform:scale(.9); }
.cy-d.is-period > span { background:var(--cy-period); color:#fff; font-weight:500; }
.cy-d.is-pred > span { border:1.6px dashed var(--cy-period); color:var(--cy-period); }
.cy-d.is-fert > span { background:#e4ede7; color:#3f5b48; }
.cy-d.is-ovu > span { background:#f6ecd2; color:#8a6a1e; box-shadow:inset 0 0 0 1.6px var(--cy-ovu); }
.cy-d.is-today > span { box-shadow:0 0 0 2px var(--wine); font-weight:600; }
.cy-d.is-sel:not(.is-today) > span { box-shadow:0 0 0 2px var(--rose-soft); }
.cy-dot { position:absolute; bottom:1px; width:4px; height:4px; border-radius:50%; background:var(--rose); }
.cy-legend { display:flex; flex-wrap:wrap; gap:6px 12px; margin-top:12px; padding:0 6px; font-size:12px; color:var(--muted); }
.cy-legend i { display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:5px; vertical-align:-1px; }
.lg-period { background:var(--cy-period); } .lg-pred { border:1.6px dashed var(--cy-period); } .lg-fert { background:#cfe0d4; } .lg-ovu { background:var(--cy-ovu); } .lg-dot { background:var(--rose); width:6px !important; height:6px !important; }
.cy-row.three .cy-v { font-size:23px; }
.cy-period-row { display:flex; justify-content:space-between; align-items:center; padding:10px 16px; font-size:14px; }
.cy-period-row + .cy-period-row { border-top:1px solid var(--line); }
.cy-period-row .cy-link { padding:0; }
/* notes */
.cy-thread { display:flex; flex-direction:column; gap:10px; }
.cy-bubble { max-width:86%; padding:12px 14px; border-radius:20px 20px 20px 6px; background:var(--cy-card); border:1px solid var(--line); }
.cy-bubble.is-me { align-self:flex-end; border-radius:20px 20px 6px 20px; background:#f6eaee; border-color:#efd6dd; }
.cy-bubble .cy-quote { font-size:18px; }
/* tabs */
.cy-tabs { position:fixed; left:50%; transform:translateX(-50%); bottom:calc(env(safe-area-inset-bottom) + 16px); width:calc(100% - 32px); max-width:488px; height:64px; display:flex; align-items:center; justify-content:space-around; border-radius:24px; background:#fffbf8ee; border:1px solid var(--line); box-shadow:0 14px 34px #65354222; backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); }
.cy-tab { display:flex; flex-direction:column; align-items:center; gap:3px; min-width:72px; padding:6px 0; border:0; background:none; color:var(--muted); font:400 10.5px var(--font-sans); cursor:pointer; border-radius:18px; }
.cy-tab.is-on { color:var(--wine); font-weight:600; background:#f6eaee; }
.cy-tab-ic { font-size:19px; line-height:1; }
/* sheets */
.cy-sheet-wrap { position:fixed; inset:0; z-index:5; display:flex; align-items:flex-end; justify-content:center; background:#45303900; transition:background .25s; }
.cy-sheet-wrap.is-in { background:#4530394d; }
.cy-sheet { width:100%; max-width:520px; max-height:88vh; overflow-y:auto; padding:12px 22px calc(env(safe-area-inset-bottom) + 22px); border-radius:28px 28px 0 0; background:var(--cy-card); box-shadow:0 -10px 40px #65354226; transform:translateY(100%); transition:transform .32s cubic-bezier(.16,1,.3,1); }
.cy-sheet-wrap.is-in .cy-sheet { transform:none; }
.cy-sheet > * + * { margin-top:12px; }
.cy-grab { width:40px; height:5px; border-radius:9px; background:#e6d5d7; margin:0 auto 6px; }
.cy-sheet-head { display:flex; justify-content:space-between; align-items:center; }
.cy-sec { font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-weight:500; margin-top:18px !important; }
.cy-sec small { text-transform:none; letter-spacing:0; }
.cy-flow { display:flex; gap:7px; }
.cy-flow button { flex:1; min-width:0; height:58px; border-radius:16px; border:1px solid var(--line); background:var(--cy-card); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; font:400 11.5px var(--font-sans); color:var(--muted); cursor:pointer; }
.cy-flow button small { font-size:15px; letter-spacing:1px; color:var(--cy-period); line-height:1; }
.cy-flow button.is-on { border-color:var(--cy-period); background:#fbe9ee; color:#8d2d47; }
.cy-mood { display:grid; grid-template-columns:repeat(6,1fr); gap:7px; }
.cy-mood button { height:64px; border-radius:16px; border:1px solid var(--line); background:var(--cy-card); display:flex; flex-direction:column; align-items:center; justify-content:center; font-size:24px; cursor:pointer; }
.cy-mood button small { font:400 10.5px var(--font-sans); color:var(--muted); margin-top:2px; }
.cy-mood button.is-on { border-color:var(--wine); background:#f6eaee; }
.cy-input { width:100%; padding:13px 14px; border-radius:16px; border:1px solid var(--line); background:#fff; font:400 15px var(--font-sans); color:var(--ink); resize:none; }
.cy-input:focus { outline:2px solid var(--rose-soft); border-color:var(--rose); }
/* toast */
.cy-toast { position:fixed; left:50%; bottom:calc(env(safe-area-inset-bottom) + 96px); transform:translateX(-50%); z-index:10; padding:11px 18px; border-radius:99px; background:var(--wine); color:#fff; font-size:14px; box-shadow:0 10px 30px #45303940; white-space:nowrap; transition:opacity .4s, transform .4s; }
.cy-toast.is-error { background:#b23a4f; }
.cy-toast.is-out { opacity:0; transform:translate(-50%,8px); }
@media (prefers-reduced-motion: reduce) { .cy-app, .cy-sheet, .cy-ring-svg circle, .cy-bar i { animation:none !important; transition:none !important; } }

/* Döngü motion polish (WordMate-like) */
@media (prefers-reduced-motion: no-preference) {
  @keyframes cy-rise { from { opacity:0; transform:translateY(16px) scale(.985); } to { opacity:1; transform:none; } }
  .cy-body.is-entering .cy-view > * { animation:cy-rise .55s cubic-bezier(.16,1,.3,1) both; }
  .cy-body.is-entering .cy-view > :nth-child(2) { animation-delay:.05s; }
  .cy-body.is-entering .cy-view > :nth-child(3) { animation-delay:.1s; }
  .cy-body.is-entering .cy-view > :nth-child(4) { animation-delay:.15s; }
  .cy-body.is-entering .cy-view > :nth-child(5) { animation-delay:.2s; }
  .cy-body.is-entering .cy-view > :nth-child(n+6) { animation-delay:.25s; }
  .cy-body.is-entering .cy-grid > .cy-d { animation:cy-rise .4s cubic-bezier(.16,1,.3,1) both; }
  .cy-body.is-entering .cy-grid > .cy-d:nth-child(7n+1) { animation-delay:.08s; } .cy-body.is-entering .cy-grid > .cy-d:nth-child(7n+2) { animation-delay:.11s; }
  .cy-body.is-entering .cy-grid > .cy-d:nth-child(7n+3) { animation-delay:.14s; } .cy-body.is-entering .cy-grid > .cy-d:nth-child(7n+4) { animation-delay:.17s; }
  .cy-body.is-entering .cy-grid > .cy-d:nth-child(7n+5) { animation-delay:.2s; } .cy-body.is-entering .cy-grid > .cy-d:nth-child(7n+6) { animation-delay:.23s; }
  .cy-body.is-entering .cy-grid > .cy-d:nth-child(7n) { animation-delay:.26s; }
  .cy-body.is-entering .cy-bubble { animation:cy-rise .5s cubic-bezier(.16,1,.3,1) both; }
  .cy-ring-svg circle { transition:stroke-dasharray 1.1s cubic-bezier(.16,1,.3,1); }
  @keyframes cy-pop { 0% { transform:scale(1); } 40% { transform:scale(1.08); } 100% { transform:scale(1); } }
  .cy-chips.pick button.is-on, .cy-mood button.is-on, .cy-flow button.is-on { animation:cy-pop .32s cubic-bezier(.34,1.56,.64,1); }
  .cy-chips.pick button, .cy-mood button, .cy-flow button, .cy-tab, .cy-d > span, .cy-close, .cy-month button { transition:transform .16s cubic-bezier(.16,1,.3,1), background .2s, color .2s, border-color .2s; }
  .cy-chips.pick button:active, .cy-mood button:active, .cy-flow button:active, .cy-tab:active, .cy-close:active, .cy-month button:active { transform:scale(.93); }
  @keyframes cy-hop { 0% { transform:translateY(0) scale(1); } 40% { transform:translateY(-4px) scale(1.15); } 100% { transform:none; } }
  .cy-tab.is-on .cy-tab-ic { display:inline-block; animation:cy-hop .45s cubic-bezier(.34,1.56,.64,1); }
  @keyframes cy-toast-in { from { opacity:0; transform:translate(-50%,14px) scale(.96); } }
  .cy-toast { animation:cy-toast-in .38s cubic-bezier(.34,1.56,.64,1); }
  @keyframes cy-sheen { 0%,72% { transform:translateX(-130%) skewX(-18deg); } 100% { transform:translateX(260%) skewX(-18deg); } }
  .cy-btn.primary { position:relative; overflow:hidden; }
  .cy-btn.primary::after { content:''; position:absolute; inset:0 auto 0 0; width:38%; background:linear-gradient(90deg,transparent,#ffffff2e,transparent); animation:cy-sheen 4.6s ease-in-out 1.4s infinite; pointer-events:none; }
  @keyframes cy-breathe { 0%,100% { box-shadow:0 0 0 0 #c2415f00; } 50% { box-shadow:0 0 0 6px #c2415f1f; } }
  .cy-phase-period { animation:cy-breathe 2.8s ease-in-out infinite; }
  .cy-hero::after { animation:cy-float 9s ease-in-out infinite; }
  @keyframes cy-float { 0%,100% { transform:translate(0,0); } 50% { transform:translate(-14px,10px); } }
}
.cy-tab { transition:background .25s, color .25s; }

/* Döngü notifications */
.cy-push { display:flex; align-items:center; gap:12px; padding:12px 10px 12px 14px; }
.cy-push-ic { width:38px; height:38px; flex:none; display:grid; place-items:center; border-radius:50%; background:#f6eaee; font-size:18px; }
.cy-push-t { flex:1; min-width:0; font-size:12.5px; color:var(--muted); line-height:1.35; }
.cy-push-t b { display:block; color:var(--ink); font-size:14px; font-weight:500; }
.cy-btn.sm { min-height:38px; padding:0 14px; flex:none; font-size:14px; }
.cy-close.sm { width:30px; height:30px; font-size:17px; flex:none; border:0; background:none; }
.cy-push-settings b { font-weight:500; }
.cy-push-settings > * + * { margin-top:10px; }

/* "Yeni sürüm hazır" (tracker.js checkVersion) */
.mm-update { position:fixed; left:50%; top:calc(env(safe-area-inset-top) + 14px); transform:translateX(-50%); z-index:400; width:calc(100% - 32px); max-width:460px; display:flex; align-items:center; gap:12px; padding:12px 12px 12px 16px; border-radius:22px; background:#fffbf8f2; border:1px solid var(--line); box-shadow:0 18px 44px #45303933; backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); font-family:var(--font-sans); color:var(--ink); }
.mm-update-ic { font-size:20px; }
.mm-update-t { flex:1; min-width:0; font-size:12.5px; color:var(--muted); line-height:1.35; }
.mm-update-t b { display:block; color:var(--ink); font-size:14px; font-weight:500; }
@media (prefers-reduced-motion: no-preference) { .mm-update { animation:mm-up .45s cubic-bezier(.34,1.56,.64,1); } @keyframes mm-up { from { opacity:0; transform:translate(-50%,-24px); } } }

/* Aşağı çekip yenileme (pull.js) */
.mm-pull { position:fixed; left:50%; top:calc(env(safe-area-inset-top) + 6px); z-index:600; display:flex; flex-direction:column; align-items:center; gap:6px; opacity:0; transform:translate(-50%,-30px); pointer-events:none; transition:opacity .2s; }
.mm-pull.is-on { opacity:1; }
.mm-pull:not(.is-on) { transition:opacity .25s, transform .35s cubic-bezier(.16,1,.3,1); }
.mm-pull-heart { width:56px; height:56px; padding:11px; transition:transform .12s; border-radius:50%; background:#fffbf8; box-shadow:0 10px 26px #65354226, 0 0 0 1px var(--line); overflow:visible; }
.mm-pull-outline { fill:none; stroke:var(--rose); stroke-width:1.6; }
.mm-pull-fill { fill:var(--wine); }
.mm-pull-label { padding:4px 11px; border-radius:99px; background:#fffbf8e6; color:var(--wine); font:500 12px var(--font-sans); white-space:nowrap; box-shadow:0 6px 16px #6535421a; }
.mm-pull.is-ready .mm-pull-heart { box-shadow:0 10px 26px #753c5040, 0 0 0 2px var(--rose-soft); }
.mm-pull.is-beating .mm-pull-heart { animation:mm-beat .9s cubic-bezier(.4,0,.2,1) infinite; }
@keyframes mm-beat { 0%,100% { transform:scale(1); } 14% { transform:scale(1.22); } 28% { transform:scale(1); } 42% { transform:scale(1.14); } 60% { transform:scale(1); } }
.mm-pull-spark { position:absolute; top:14px; left:50%; color:var(--rose); font-size:13px; opacity:0; animation:mm-spark 1.1s ease-out var(--d) forwards; }
@keyframes mm-spark { 0% { opacity:0; transform:translate(-50%,0) scale(.4); } 20% { opacity:1; } 100% { opacity:0; transform:translate(calc(-50% + var(--dx)), var(--dy)) scale(1.1); } }
@media (prefers-reduced-motion: reduce) { .mm-pull.is-beating .mm-pull-heart, .mm-pull-spark { animation:none; } }

/* ============================================================
   Alt menü (dock) — WordMate'teki gibi yüzen cam bar, ortada Döngü
   ============================================================ */
.dock { position:fixed; left:0; right:0; bottom:calc(env(safe-area-inset-bottom) + 10px); z-index:120; display:flex; justify-content:center; padding:0 14px; pointer-events:none; }
.dock-inner { pointer-events:auto; width:100%; max-width:440px; height:66px; display:flex; align-items:stretch; gap:2px; padding:6px; border-radius:26px; background:#fffaf7db; border:1px solid #ead5db; box-shadow:0 14px 34px -12px #753c5050, 0 2px 8px #753c5012; backdrop-filter:blur(22px) saturate(170%); -webkit-backdrop-filter:blur(22px) saturate(170%); }
.dock-tab { flex:1; position:relative; z-index:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; min-width:0; padding:0; border-radius:20px; color:var(--muted); font:500 10.5px/1 var(--font-sans); letter-spacing:.02em; transition:color .2s; }
.dock-tab .icon { width:22px; height:22px; stroke-width:1.6; transition:transform .3s cubic-bezier(.34,1.56,.64,1), stroke-width .2s; }
.dock-pill { position:absolute; inset:0; z-index:-1; border-radius:20px; background:#f4e0e6; opacity:0; transform:scale(.6); transition:opacity .25s, transform .4s cubic-bezier(.34,1.56,.64,1); }
.dock-tab.active, .dock-music[aria-expanded="true"] { color:var(--wine); }
.dock-tab.active .dock-pill, .dock-music[aria-expanded="true"] .dock-pill { opacity:1; transform:none; }
.dock-tab.active .icon, .dock-music[aria-expanded="true"] .icon { stroke-width:2.1; transform:translateY(-1px) scale(1.06); }
.dock-fab-slot { position:relative; flex:0 0 68px; display:flex; align-items:flex-end; justify-content:center; padding-bottom:6px; }
.dock-fab { position:absolute; left:50%; top:-25px; width:60px; height:60px; margin-left:-30px; display:grid; place-items:center; border:4px solid var(--paper); border-radius:50%; background:linear-gradient(145deg,#c65b7f,#753c50); color:#fff4f6; font-size:28px; line-height:1; box-shadow:0 10px 22px -6px #9c3f5f99, 0 2px 6px #45303930; transition:transform .15s cubic-bezier(.16,1,.3,1); }
.dock-fab span { display:block; transition:transform .5s cubic-bezier(.34,1.56,.64,1); }
.dock-fab:active { transform:scale(.92); }
.dock-fab:active span { transform:rotate(72deg); }
.dock-fab-label { font:500 10.5px/1 var(--font-sans); letter-spacing:.02em; color:var(--muted); }
.dock-music-icon { position:relative; display:grid; place-items:center; }
.dock-eq { position:absolute; top:-4px; right:-10px; display:none; align-items:flex-end; gap:1.5px; height:10px; }
.dock-eq i { width:2.5px; height:40%; border-radius:2px; background:var(--rose); }
.dock-music.is-playing { color:var(--rose); }
.dock-music.is-playing .dock-eq { display:flex; }
.site-footer { padding-bottom:calc(env(safe-area-inset-bottom) + 125px); }

/* Şarkılarımız: alttaki "Müzik"ten açılan sayfa */
.music-player { position:fixed; left:0; right:0; bottom:calc(env(safe-area-inset-bottom) + 88px); z-index:115; display:flex; flex-direction:column; width:calc(100% - 24px); max-width:440px; max-height:calc(100dvh - env(safe-area-inset-bottom) - env(safe-area-inset-top) - 112px); margin:0 auto; overflow:hidden; border:1px solid #e8d2d9; border-radius:26px; background:#fffaf7f7; box-shadow:0 26px 60px -18px #753c5066; backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px); opacity:0; visibility:hidden; transform:translateY(26px) scale(.97); transform-origin:50% 100%; transition:opacity .2s, transform .35s cubic-bezier(.16,1,.3,1), visibility 0s .35s; }
.music-player.is-open { opacity:1; visibility:visible; transform:none; transition:opacity .2s, transform .45s cubic-bezier(.34,1.3,.64,1), visibility 0s; }
.music-backdrop { position:fixed; inset:0; z-index:110; background:#4530392e; opacity:0; pointer-events:none; transition:opacity .25s; }
.music-player.is-open + .music-backdrop { opacity:1; pointer-events:auto; }
html.music-open, html.music-open body { overflow:hidden; }
.music-sheet-head { position:relative; display:flex; align-items:center; gap:10px; padding:24px 16px 8px 22px; }
.music-grabber { position:absolute; top:9px; left:50%; width:38px; height:4px; margin-left:-19px; border-radius:4px; background:#e6cfd6; }
.music-sheet-head > div { flex:1; min-width:0; }
.music-label { display:block; font-size:9px; font-weight:500; letter-spacing:.16em; color:var(--rose); }
.music-sheet-head h2 { margin-top:4px; font:500 26px/1.1 var(--font-serif); color:var(--wine); }
.music-sheet-head .music-sync-btn { position:static; padding:8px 12px; font-size:11px; box-shadow:none; }
.music-sheet-close { flex-shrink:0; display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:#f3e4e8; color:var(--wine); font-size:20px; line-height:1; }
.music-player-inner { display:grid; grid-template-columns:58px minmax(0,1fr); grid-template-areas:"vinyl info" "time time" "ctrl ctrl"; align-items:center; gap:14px 14px; margin:8px 14px 6px; padding:18px 18px 14px; border:1px solid #efdbe1; border-radius:20px; background:linear-gradient(150deg,#f6e1e8,#fcf3ef); }
.vinyl { grid-area:vinyl; display:grid; place-items:center; width:58px; height:58px; border:1px solid #cda6b5; border-radius:50%; background:repeating-radial-gradient(circle,#70414f 0 1px,#80505e 2px 3px); box-shadow:0 6px 16px -6px #45303980; animation:recordSpin 9s linear infinite; animation-play-state:paused; }
.vinyl span { display:grid; place-items:center; width:24px; height:24px; border-radius:50%; background:#e1b2c2; color:var(--wine); font-size:13px; }
.music-info { grid-area:info; display:flex; flex-direction:column; gap:3px; min-width:0; }
.music-song-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink); font:500 22px/1.15 var(--font-serif); }
.music-artist { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted); font-size:12px; }
.music-timeline { grid-area:time; font-size:10px; gap:9px; }
.music-controls { grid-area:ctrl; gap:22px; }
.music-ctrl { width:44px; height:44px; font-size:16px; }
.music-play { width:58px; height:58px; font-size:19px; box-shadow:0 10px 20px -8px #753c50aa; }
.playlist-dropdown { flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
.playlist-header { padding:8px 14px; border:0; background:#fffaf7; }
#musicSearch { min-height:42px; border-radius:12px; font-size:16px; }
#youtubePlayer { padding:4px 14px 12px; border:0; }
#playlistItems { padding:2px 8px 14px; }
.playlist-item { min-height:58px; border-radius:12px; }
@keyframes dock-eq { from { height:25%; } to { height:100%; } }
@keyframes dock-breathe { 0%,100% { box-shadow:0 10px 22px -6px #9c3f5f99, 0 2px 6px #45303930; } 50% { box-shadow:0 12px 30px -4px #c65b7fb3, 0 2px 6px #45303930; } }
@keyframes dock-hop { 0% { transform:translateY(0) scale(1); } 40% { transform:translateY(-5px) scale(1.14); } 100% { transform:translateY(-1px) scale(1.06); } }
@media (prefers-reduced-motion:no-preference) {
  .dock-fab { animation:dock-breathe 3.4s ease-in-out infinite; }
  .dock-tab.active .icon { animation:dock-hop .45s cubic-bezier(.34,1.56,.64,1); }
  .dock-music.is-playing .dock-eq i { animation:dock-eq .8s ease-in-out infinite alternate; }
  .dock-music.is-playing .dock-eq i:nth-child(2) { animation-duration:.6s; animation-delay:-.3s; }
  .dock-music.is-playing .dock-eq i:nth-child(3) { animation-duration:.95s; animation-delay:-.5s; }
}
@media (max-width:600px) { .dock-inner { backdrop-filter:none; -webkit-backdrop-filter:none; background:#fffaf7f5; } }

/* Açılış: giriş yapılmış cihazda davetiye yerine küçük bir "minemir ♡" */
.login-splash { display:none; }
.mm-returning .login-overlay > :not(.login-splash) { display:none; }
.mm-returning .login-splash { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; flex:1; }
.login-splash .wordmark { font-size:46px; }
.login-splash-line { position:relative; width:64px; height:2px; overflow:hidden; border-radius:2px; background:#ead6dc; }
.login-splash-line::after { content:''; position:absolute; inset:0; width:40%; border-radius:2px; background:var(--rose); }
@media (prefers-reduced-motion:no-preference) {
  .mm-returning .login-splash { animation:mm-splash-in .5s ease-out both; }
  .login-splash .wordmark span { display:inline-block; animation:mm-splash-beat 1.3s ease-in-out infinite; }
  .login-splash-line::after { animation:mm-splash-load 1.1s ease-in-out infinite; }
  @keyframes mm-splash-in { from { opacity:0; transform:translateY(6px); } }
  @keyframes mm-splash-beat { 0%,100% { transform:scale(1); } 15% { transform:scale(1.25); } 30% { transform:scale(1.05); } 45% { transform:scale(1.18); } }
  @keyframes mm-splash-load { from { transform:translateX(-100%); } to { transform:translateX(250%); } }
}

/* ============================================================
   Hareket (motion.js): yalnızca .mm-motion varken ve hareket azaltma kapalıyken
   ============================================================ */
.dock-inner { position:relative; }
.dock-glider { position:absolute; top:6px; bottom:6px; left:0; z-index:0; width:0; border-radius:20px; background:#f4e0e6; opacity:0; pointer-events:none; }
.dock-glider.is-on { opacity:1; }
.dock-glider.is-ready { transition:transform .5s cubic-bezier(.34,1.45,.64,1), width .5s cubic-bezier(.34,1.45,.64,1), opacity .25s; }
.mm-motion .dock-tab[data-section] .dock-pill { display:none; }
.login-overlay { transition:opacity .5s, transform .6s cubic-bezier(.16,1,.3,1); }
.login-overlay.fade-out { transform:scale(1.04); }

@media (prefers-reduced-motion:no-preference) {
  /* Sections: rise, fade and come into focus. */
  .mm-motion :is(.reveal, .section-header, .archive-section):not(.hero-copy, .hero-collage) { opacity:0; transform:translateY(34px); filter:blur(6px); transition:opacity .9s cubic-bezier(.16,1,.3,1), transform 1s cubic-bezier(.16,1,.3,1), filter .9s ease; }
  .mm-motion :is(.reveal, .section-header, .archive-section).is-in:not(.hero-copy, .hero-collage) { opacity:1; transform:none; filter:none; }
  .mm-motion .section-header.is-in .section-title em { display:inline-block; animation:mm-glow 1.4s .35s cubic-bezier(.16,1,.3,1) both; }

  /* The cover, line by line, then the photographs fall onto the table. */
  .mm-motion .hero-copy:not(.is-in) > *, .mm-motion .hero-collage:not(.is-in) > * { opacity:0; }
  .hero-copy.is-in > * { animation:mm-rise 1s cubic-bezier(.16,1,.3,1) both; }
  .hero-copy.is-in > :nth-child(2) { animation-delay:.1s; }
  .hero-copy.is-in > :nth-child(3) { animation-delay:.28s; }
  .hero-copy.is-in > :nth-child(4) { animation-delay:.4s; }
  .hero-copy.is-in > :nth-child(5) { animation-delay:.9s; }
  .hero-copy.is-in h1 em { display:inline-block; animation:mm-glow 1.3s .55s cubic-bezier(.16,1,.3,1) both; }
  .hero-collage.is-in .collage-halo { animation:mm-bloom 1.2s cubic-bezier(.16,1,.3,1) both, mm-breathe 7s 1.2s ease-in-out infinite; }
  .hero-collage.is-in .collage-orbit { animation:mm-orbit 1.4s .1s cubic-bezier(.16,1,.3,1) both; }
  .hero-collage.is-in .polaroid-back { animation:mm-drop-r 1s .3s cubic-bezier(.22,1.3,.36,1) backwards; }
  .hero-collage.is-in .polaroid-main { animation:mm-drop-l 1s .45s cubic-bezier(.22,1.3,.36,1) backwards; }
  .hero-collage.is-in .polaroid-small { animation:mm-drop-r 1s .62s cubic-bezier(.22,1.3,.36,1) backwards; }
  .hero-collage.is-in .memory-stamp { animation:mm-stamp .7s 1.05s cubic-bezier(.34,1.56,.64,1) backwards; }
  .hero-collage.is-in .collage-caption { animation:mm-write .9s 1.2s ease-out backwards; }
  .hero-collage.is-in .collage-doodle path { stroke-dasharray:420; animation:mm-draw 1.6s 1.1s ease-out both; }
  .hero-collage.is-in .collage-doodle, .hero-collage.is-in .collage-halo, .hero-collage.is-in .collage-orbit { opacity:1; }

  /* Album: the prints land one after another; extra ones too, when "bütün anılarımız" opens. */
  .mm-motion .album-grid .photo-item { animation:mm-print .9s cubic-bezier(.22,1.2,.36,1) backwards; animation-play-state:paused; }
  .mm-motion .album-grid.is-in .photo-item { animation-play-state:running; }
  .album-grid .photo-item:nth-child(6n + 2) { animation-delay:.08s; } .album-grid .photo-item:nth-child(6n + 3) { animation-delay:.16s; }
  .album-grid .photo-item:nth-child(6n + 4) { animation-delay:.24s; } .album-grid .photo-item:nth-child(6n + 5) { animation-delay:.32s; }
  .album-grid .photo-item:nth-child(6n) { animation-delay:.4s; }
  .mm-motion .archive-entry { animation:mm-rise .7s cubic-bezier(.16,1,.3,1) backwards; }
  .mm-motion .archive-entry:nth-child(2) { animation-delay:.07s; } .mm-motion .archive-entry:nth-child(3) { animation-delay:.14s; } .mm-motion .archive-entry:nth-child(n + 4) { animation-delay:.21s; }

  /* Our time together: count up, then each change rolls in. */
  .mm-motion .together-section .timer-card { transition:opacity .7s, transform .8s cubic-bezier(.16,1,.3,1); }
  .mm-motion .together-section:not(.is-in) .timer-card { opacity:0; transform:translateY(18px); }
  .together-section .timer-card:nth-child(2) { transition-delay:.05s; } .together-section .timer-card:nth-child(3) { transition-delay:.1s; }
  .together-section .timer-card:nth-child(4) { transition-delay:.15s; } .together-section .timer-card:nth-child(5) { transition-delay:.2s; } .together-section .timer-card:nth-child(6) { transition-delay:.25s; }
  .timer-val.is-tick { animation:mm-tick .45s cubic-bezier(.34,1.56,.64,1); }

  /* The ribbon flows. */
  .love-ribbon.is-moving { justify-content:flex-start; gap:0; }
  .love-ribbon.is-moving .ribbon-track { display:flex; flex-shrink:0; align-items:center; gap:35px; padding-right:35px; animation:mm-marquee 32s linear infinite; }

  /* Touch: everything gives a little under the finger. */
  :is(.button, .polaroid, .photo-item, .music-ctrl, .playlist-item, .dock-tab, .archive-entry, .cycle-entry, .nav-music-btn) { transition:scale .2s cubic-bezier(.34,1.56,.64,1), background .2s, color .2s, box-shadow .3s; }
  :is(.button, .music-ctrl, .playlist-item, .dock-tab, .cycle-entry):active { scale:.95; }
  :is(.polaroid, .photo-item, .archive-entry):active { scale:.97; }
  .photo-item:hover { box-shadow:0 18px 40px -16px #70405255; }
  .button-primary { position:relative; overflow:hidden; }
  .hero-actions .button-primary::after { content:''; position:absolute; inset:0 auto 0 0; width:40%; background:linear-gradient(90deg,transparent,#ffffff33,transparent); animation:mm-sheen 4.5s ease-in-out 2.4s infinite; pointer-events:none; }

  /* Photographs open from where they were. */
  #photoLightbox.active figure { animation:mm-zoom .55s cubic-bezier(.16,1,.3,1); }
  #photoLightboxImg.mm-swap { animation:mm-swap .45s cubic-bezier(.16,1,.3,1); }
  .dialog-overlay.active > * { animation:mm-zoom .45s cubic-bezier(.16,1,.3,1); }

  @keyframes mm-rise { from { opacity:0; transform:translateY(26px); filter:blur(5px); } to { opacity:1; transform:none; filter:none; } }
  @keyframes mm-glow { from { opacity:0; transform:translateY(10px) scale(.94); filter:blur(8px); letter-spacing:.04em; } }
  @keyframes mm-bloom { from { opacity:0; transform:scale(.55); } to { opacity:1; } }
  @keyframes mm-breathe { 0%,100% { scale:1; } 50% { scale:1.035; } }
  @keyframes mm-orbit { from { opacity:0; transform:rotate(-80deg) scale(.8); } to { opacity:1; } }
  @keyframes mm-drop-r { from { opacity:0; transform:translate(40px,-90px) rotate(28deg) scale(.88); } }
  @keyframes mm-drop-l { from { opacity:0; transform:translate(-40px,-90px) rotate(-30deg) scale(.88); } }
  @keyframes mm-stamp { from { opacity:0; transform:rotate(-140deg) scale(.3); } }
  @keyframes mm-write { from { opacity:0; clip-path:inset(0 100% 0 0); } to { opacity:1; clip-path:inset(0 0 0 0); } }
  @keyframes mm-draw { from { stroke-dashoffset:420; } to { stroke-dashoffset:0; } }
  @keyframes mm-print { from { opacity:0; transform:translateY(46px) rotate(0) scale(.92); } }
  @keyframes mm-tick { from { opacity:.2; transform:translateY(-35%) scale(.9); } }
  @keyframes mm-marquee { to { transform:translateX(-100%); } }
  @keyframes mm-sheen { 0%,72% { transform:translateX(-130%) skewX(-18deg); } 100% { transform:translateX(330%) skewX(-18deg); } }
  @keyframes mm-zoom { from { opacity:0; transform:scale(.92) translateY(14px); } }
  @keyframes mm-swap { from { opacity:0; transform:scale(.97); filter:blur(4px); } }
}

/* Şarkı ekleme: YouTube'da bul, bağlantıyı yapıştır */
.song-add { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:9px; }
.song-add-btn { display:flex; align-items:center; justify-content:center; gap:7px; min-height:42px; padding:0 10px; border:1px solid #e8d2d9; border-radius:12px; background:#fff; color:var(--wine); font:500 12px var(--font-sans); }
.song-add-btn .icon { width:18px; height:18px; stroke-width:1.7; }
.song-add-yt { border-color:#f1c9c9; color:#b3261e; background:#fff6f5; }
.song-add-hint { margin-top:8px; color:var(--muted); font-size:11px; line-height:1.5; }
.song-add-hint b { font-weight:500; color:var(--wine); }
.playlist-row { display:flex; align-items:center; gap:2px; }
.playlist-row .playlist-item { flex:1; min-width:0; }
.playlist-remove { flex-shrink:0; display:grid; place-items:center; width:34px; height:34px; border-radius:50%; color:var(--muted); font-size:18px; line-height:1; }
.playlist-remove:hover, .playlist-remove:focus-visible { background:#f6e6ea; color:var(--wine); }
.playlist-track-kind { font-size:8px; letter-spacing:.06em; }

/* ============================================================
   Bugün (today.js): kalp, özel günlerimiz, defterimizden bir sayfa
   ============================================================ */
.today-section { width:90%; max-width:1280px; margin:0 auto; padding:72px 0 30px; }
.today-head { margin-bottom:28px; }
.today-head .section-title { margin-top:14px; }
.today-head .section-desc { margin-top:12px; }
.today-grid { display:grid; grid-template-columns:1fr 1.15fr 1fr; gap:20px; align-items:stretch; }
.today-card { position:relative; min-width:0; overflow:hidden; padding:24px; border:1px solid var(--line); border-radius:24px; background:var(--paper-light); box-shadow:0 22px 44px -30px #75405070; }
.today-k { display:block; font-size:10px; font-weight:500; letter-spacing:.16em; color:var(--rose); }
.today-card h3 { margin-top:8px; font:500 26px/1.15 var(--font-serif); color:var(--ink); }

.heart-card { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; background:linear-gradient(165deg,#fbe8ee,#fffbf8 62%); }
.heart-send { position:relative; display:grid; place-items:center; width:120px; height:120px; margin:22px auto 16px; border-radius:50%; background:radial-gradient(circle at 34% 28%,#d97795,#8e3d5b 72%); box-shadow:0 18px 36px -12px #9c3f5fa6, inset 0 2px 0 #ffffff45; }
.heart-send svg { width:54px; height:54px; fill:#fff4f6; filter:drop-shadow(0 3px 6px #5a1f3366); }
.heart-ring { position:absolute; inset:-10px; border:1.5px solid #c65b7f66; border-radius:50%; opacity:0; pointer-events:none; }
.heart-status { color:var(--muted); font-size:13px; line-height:1.5; }
.heart-counts { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:14px; }
.heart-count { display:inline-flex; align-items:center; gap:6px; padding:7px 12px; border-radius:99px; background:#f6e2e8; color:var(--wine); font-size:12px; }
.heart-count.is-you { background:#fff; border:1px solid #efd6dd; }
.heart-count svg { width:13px; height:13px; fill:var(--rose); }
.heart-count b { font-weight:600; font-variant-numeric:tabular-nums; }
.heart-push { margin-top:14px; color:var(--wine); font-size:12px; text-decoration:underline; text-underline-offset:3px; }
.heart-push:disabled { opacity:.75; text-decoration:none; }

.days-top { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.days-add { padding:8px 13px; border-radius:99px; background:#f4e2e7; color:var(--wine); font-size:12px; font-weight:500; white-space:nowrap; }
.days-next { position:relative; overflow:hidden; display:grid; grid-template-columns:auto minmax(0,1fr); grid-template-areas:"emoji big" "what what"; align-items:center; gap:10px 14px; margin-top:16px; padding:18px 18px 16px; border-radius:20px; background:linear-gradient(140deg,#6f3449,#a64f70); color:#fff6f8; }
.days-next::after { content:''; position:absolute; right:-40px; top:-50px; width:150px; height:150px; border-radius:50%; background:radial-gradient(circle,#ffffff26,transparent 70%); pointer-events:none; }
.days-next:empty { display:none; }
.days-emoji { grid-area:emoji; display:grid; place-items:center; width:58px; height:58px; border-radius:17px; background:#ffffff22; font-size:31px; }
.days-big { grid-area:big; display:flex; align-items:baseline; gap:8px; }
.days-big b { font:500 56px/1 var(--font-serif); font-variant-numeric:tabular-nums; }
.days-big b.is-word { font-size:42px; }
.days-big span { font-size:13px; opacity:.85; }
.days-what { grid-area:what; }
.days-what strong { display:block; font:500 22px/1.2 var(--font-serif); }
.days-what small { display:block; margin-top:3px; font-size:12px; opacity:.82; }
.days-list { margin:10px 0 0; padding:0; list-style:none; }
.days-row { display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--line); }
.days-row:last-child { border-bottom:0; }
.days-row-emoji { flex-shrink:0; display:grid; place-items:center; width:38px; height:38px; border-radius:12px; background:#f8eaee; font-size:19px; }
.days-row.is-auto .days-row-emoji { background:#f2eee7; }
.days-row-t { flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.days-row-t b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; font-weight:500; }
.days-row-t small { font-size:11px; color:var(--muted); }
.days-row-in { padding:5px 10px; border-radius:99px; background:#f6e5ea; color:var(--wine); font-size:12px; font-weight:500; white-space:nowrap; font-variant-numeric:tabular-nums; }
.days-row-in.is-soon { background:var(--wine); color:#fff; }
.days-row-x { flex-shrink:0; display:grid; place-items:center; width:28px; height:28px; margin-left:-6px; border-radius:50%; color:var(--muted); font-size:17px; }
.days-hint { margin-top:10px; color:var(--muted); font-size:11px; line-height:1.55; }

.memory-card { display:flex; flex-direction:column; }
.memory-top { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.memory-next { display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:#f4e2e7; color:var(--wine); font-size:17px; }
.memory-photo { margin:14px 4px 12px; padding:8px 8px 24px; border-radius:3px; background:#fff; box-shadow:0 12px 26px -14px #45303970; transform:rotate(-2deg); }
.memory-photo img { width:100%; aspect-ratio:4/3; object-fit:cover; }
.memory-date { display:block; margin-top:4px; color:var(--muted); font-size:11px; letter-spacing:.06em; }
.memory-body { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:4; overflow:hidden; margin-top:8px; color:var(--muted); font-size:13px; line-height:1.65; }
.memory-open { align-self:flex-start; margin-top:auto; padding-top:14px; color:var(--wine); font-size:12px; font-weight:500; }
.memory-card.is-empty { align-items:flex-start; justify-content:center; gap:4px; background:linear-gradient(165deg,#f1f3ec,#fffbf8 65%); }
.memory-card.is-empty .button { margin-top:14px; }

.day-form fieldset { min-width:0; margin:0; padding:0; border:0; }
.day-form legend { margin-bottom:7px; padding:0; font-size:12px; }
.day-choice { display:flex; flex-wrap:wrap; gap:8px; }
.day-form .day-choice label { position:relative; display:block; }
.day-form .day-choice input { position:absolute; inset:0; opacity:0; margin:0; padding:0; }
.day-choice span { display:inline-flex; align-items:center; justify-content:center; padding:9px 13px; border:1px solid var(--line); border-radius:99px; background:var(--paper); font-size:13px; cursor:pointer; transition:background .2s, color .2s, border-color .2s; }
.day-emojis span { width:42px; height:42px; padding:0; font-size:19px; }
.day-choice input:checked + span { border-color:var(--wine); background:var(--wine); color:#fff; }
.day-emojis input:checked + span { background:#f4e2e7; color:inherit; box-shadow:inset 0 0 0 2px var(--wine); }
.day-choice input:focus-visible + span { outline:2px solid var(--wine); outline-offset:3px; }
.day-note { color:var(--muted); font-size:11px; line-height:1.55; }

/* Bir kalp geldi: ekrana kalp yağmuru */
.heart-rain { position:fixed; inset:0; z-index:1200; display:grid; place-items:center; padding:24px; overflow:hidden; background:radial-gradient(circle at 50% 45%,#fbe1e9e6,#f8efedf2 62%); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); transition:opacity .4s; }
.heart-rain.is-out { opacity:0; }
.rain-heart { position:absolute; bottom:-60px; color:var(--rose); font-size:var(--size); opacity:0; pointer-events:none; }
.rain-card { position:relative; z-index:1; width:min(340px,100%); padding:30px 24px 20px; border:1px solid #efd4db; border-radius:28px; background:#fffbf8f5; box-shadow:0 30px 70px -30px #7540508c; text-align:center; }
.rain-beat { display:inline-grid; }
.rain-beat svg { width:74px; height:74px; fill:#c2577a; filter:drop-shadow(0 8px 14px #c2577a66); }
.rain-card h2 { margin:12px 0 6px; font:500 34px/1.1 var(--font-serif); color:var(--ink); }
.rain-card h2 em { color:var(--rose); }
.rain-card p { color:var(--muted); font-size:13px; }
.rain-actions { display:flex; flex-direction:column; gap:4px; margin-top:18px; }

@media (max-width:900px) {
  .today-section { padding-top:56px; }
  .today-grid { grid-template-columns:minmax(0,1fr); gap:16px; }
  .memory-photo { max-width:320px; }
}
@media (max-width:600px) {
  .today-section { width:calc(100% - 32px); padding:48px 0 18px; }
  .today-card { padding:22px 20px; border-radius:22px; }
  .days-big b { font-size:50px; }
}
@media (prefers-reduced-motion:no-preference) {
  .heart-ring { animation:heart-ring 2.8s ease-out infinite; }
  .heart-ring.two { animation-delay:1.4s; }
  .heart-send svg { animation:heart-idle 1.8s ease-in-out infinite; }
  .heart-send.is-sent svg { animation:heart-pop .55s cubic-bezier(.34,1.56,.64,1); }
  .heart-send { transition:scale .2s cubic-bezier(.34,1.56,.64,1); }
  .heart-send:active { scale:.93; }
  .days-next.is-today::before { content:''; position:absolute; inset:0 auto 0 0; width:45%; background:linear-gradient(90deg,transparent,#ffffff30,transparent); animation:mm-sheen 3.2s ease-in-out infinite; }
  .memory-inner.is-flip { animation:mm-swap .5s cubic-bezier(.16,1,.3,1); }
  .heart-rain { animation:rain-in .45s ease-out; }
  .rain-heart { animation:rain-up 4s linear forwards; }
  .rain-card { animation:rain-card .7s cubic-bezier(.34,1.56,.64,1) both; }
  .rain-beat svg { animation:heart-idle 1.1s ease-in-out infinite; }
  @keyframes heart-ring { from { opacity:.9; transform:scale(.86); } to { opacity:0; transform:scale(1.38); } }
  @keyframes heart-idle { 0%,100% { transform:scale(1); } 14% { transform:scale(1.09); } 28% { transform:scale(1.01); } 42% { transform:scale(1.06); } }
  @keyframes heart-pop { 0% { transform:scale(1); } 35% { transform:scale(1.32) rotate(-6deg); } 100% { transform:scale(1); } }
  @keyframes rain-in { from { opacity:0; } }
  @keyframes rain-up { 0% { opacity:0; transform:translate(0,0) rotate(0); } 12% { opacity:.9; } 100% { opacity:0; transform:translate(var(--sway),-118vh) rotate(28deg); } }
  @keyframes rain-card { from { opacity:0; transform:translateY(30px) scale(.9); } }
}