/* ================================================================
   Ana sayfa — fotoğraf kolajlı hero, canlı sayaç, bugün kartları,
   mini harita, ilkler şeridi, hayaller, keşfet döşemeleri
   ================================================================ */
.home { overflow-x: clip; }
.h-eyebrow { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); }
.h-sec { padding: var(--space-2xl) 0 0; }
.h-sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.h-sec-head h2 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); line-height: 1; }
.h-sec-head p { color: var(--text-muted); font-family: var(--font-display); font-style: italic; font-size: 1.1rem; margin-top: 4px; }
.h-more { font-size: 0.85rem; color: var(--accent); font-weight: 600; white-space: nowrap; }

/* ---------- Hero ---------- */
.h-hero { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; color: #fff; isolation: isolate; overflow: hidden; background: radial-gradient(ellipse at 20% 20%, #5c4a36, #1C1C1A 60%), #1C1C1A; padding: calc(var(--nav-height) + 40px) 20px 90px; }
.h-slides { position: absolute; inset: 0; z-index: -2; }
.h-slides img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.6s ease; animation: kenburns 16s ease-in-out infinite alternate; }
.h-slides img.on { opacity: 1; }
@keyframes kenburns { from { transform: scale(1.02) translate(0, 0); } to { transform: scale(1.12) translate(-1.5%, -1%); } }
.h-hero::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(12,11,10,0.55) 0%, rgba(12,11,10,0.35) 45%, rgba(12,11,10,0.8) 100%); }
.h-hero .h-eyebrow { color: #E0CCA0; }
.h-names { font-size: clamp(3.4rem, 10vw, 7.5rem); line-height: 0.95; color: #fff; margin: 14px 0 10px; text-shadow: 0 4px 40px rgba(0,0,0,0.35); font-weight: 500; }
.h-names .amp { font-style: italic; color: #E0CCA0; padding: 0 0.12em; }
.h-since { font-family: var(--font-display); font-style: italic; font-size: clamp(1.1rem, 2.4vw, 1.5rem); opacity: 0.92; }
.h-hero .love-counter { margin-top: 30px; }
.h-hero .counter-digits { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.h-hero .counter-unit { min-width: 84px; padding: 14px 10px 10px; border-radius: 16px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.18); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.h-hero .counter-unit .number { font-family: var(--font-display); font-size: 2.4rem; line-height: 1; color: #fff; font-variant-numeric: tabular-nums lining-nums; }
.h-hero .counter-unit .label { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.75; margin-top: 6px; color: #fff; }
.h-cta { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 30px; }
.h-cta .btn { border-radius: 99px; padding: 12px 22px; font-size: 0.9rem; }
.h-cta .ghost { background: rgba(255,255,255,0.12); color: #fff; border: 1px solid rgba(255,255,255,0.35); backdrop-filter: blur(8px); }
.h-cta .ghost:hover { background: rgba(255,255,255,0.22); color: #fff; }
.h-cta .solid { background: #fff; color: #1C1C1A; }
.h-scroll { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.7; animation: bob 2s ease-in-out infinite; color: #fff; }
@keyframes bob { 50% { transform: translate(-50%, 6px); } }

/* ---------- Sayaç döşemeleri ---------- */
.h-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-top: -54px; position: relative; z-index: 2; }
.h-stat { display: block; padding: 20px 14px; border-radius: 18px; background: var(--bg-card); border: 1px solid var(--border-light); box-shadow: var(--shadow-lg); text-align: center; color: inherit; transition: transform 200ms var(--ease-out); }
.h-stat:hover { transform: translateY(-3px); }
.h-stat .stat-number { font-family: var(--font-display); font-size: 2.4rem; line-height: 1; color: var(--text-primary); }
.h-stat .stat-label { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-secondary); margin-top: 6px; }
.h-stat .ico { font-size: 1.2rem; display: block; margin-bottom: 6px; }

/* ---------- Bugün ---------- */
.h-today { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.h-tcard { position: relative; display: flex; flex-direction: column; gap: 8px; min-height: 200px; padding: 22px; border-radius: 20px; background: var(--bg-card); border: 1px solid var(--border-light); color: inherit; overflow: hidden; isolation: isolate; }
.h-tcard.photo { color: #fff; border: none; justify-content: flex-end; background: #1C1C1A; }
.h-tcard.photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.h-tcard.photo::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(0,0,0,0.78), rgba(0,0,0,0.05) 70%); }
.h-tcard .h-eyebrow { color: inherit; opacity: 0.8; }
.h-tcard h3 { font-size: 1.6rem; line-height: 1.15; color: inherit; }
.h-tcard p { font-size: 0.9rem; opacity: 0.85; line-height: 1.5; }
.h-tcard blockquote { font-family: var(--font-display); font-style: italic; font-size: 1.5rem; line-height: 1.35; color: var(--text-primary); }
.h-tcard .who { font-size: 0.82rem; color: var(--text-muted); margin-top: auto; }
.h-tcard .big { font-size: 2.4rem; }
.h-tcard.quote { background: linear-gradient(140deg, rgba(142,123,184,0.14), var(--bg-card) 70%); }
.h-tcard.song { background: linear-gradient(140deg, rgba(90,138,106,0.16), var(--bg-card) 70%); }
.h-tcard.today { background: linear-gradient(140deg, rgba(184,149,106,0.18), var(--bg-card) 70%); }
.h-tcard a.go { margin-top: auto; font-size: 0.82rem; font-weight: 600; color: inherit; }
.h-tcard.photo a.go { color: #fff; }

/* ---------- Harita ---------- */
.h-mapwrap { display: grid; grid-template-columns: 320px 1fr; gap: 20px; align-items: stretch; }
.h-mapinfo { padding: 26px; border-radius: 20px; background: var(--bg-card); border: 1px solid var(--border-light); display: flex; flex-direction: column; gap: 14px; }
.h-mapinfo .row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.h-mapinfo strong { display: block; font-family: var(--font-display); font-size: 2.2rem; line-height: 1; }
.h-mapinfo span { font-size: 0.74rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; }
.h-flags { font-size: 1.5rem; letter-spacing: 4px; }
.h-map { min-height: 380px; border-radius: 20px; overflow: hidden; border: 1px solid var(--border-light); z-index: 0; background: var(--bg-secondary); }
.h-map .leaflet-tile-pane { filter: saturate(0.7) sepia(0.12); }
[data-theme="dark"] .h-map .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(0.92) contrast(0.88) saturate(0.45); }
.h-pin { width: 40px; height: 40px; border-radius: 50%; border: 3px solid #fff; background-size: cover; background-position: center; background-color: var(--paper); box-shadow: 0 3px 12px rgba(0,0,0,0.35); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; }
.h-pin.planned { border-style: dashed; border-color: #8E7BB8; }

/* ---------- İlkler şeridi ---------- */
.h-strip { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 2px 16px; scrollbar-width: thin; }
.h-first { flex: 0 0 220px; scroll-snap-align: start; display: flex; flex-direction: column; gap: 8px; padding: 18px; border-radius: 18px; background: var(--bg-card); border: 1px solid var(--border-light); color: inherit; position: relative; overflow: hidden; transition: transform 200ms; }
.h-first:hover { transform: translateY(-3px); }
.h-first::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--c, var(--accent)); }
.h-first .emo { font-size: 1.8rem; }
.h-first h3 { font-size: 1.25rem; line-height: 1.2; }
.h-first small { font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-muted); }

/* ---------- Hayaller ---------- */
.h-dreams { display: grid; grid-template-columns: 260px 1fr; gap: 20px; }
.h-bucket { padding: 24px; border-radius: 20px; background: linear-gradient(140deg, rgba(90,138,106,0.14), var(--bg-card)); border: 1px solid var(--border-light); text-align: center; color: inherit; }
.h-bucket svg { width: 120px; height: 120px; transform: rotate(-90deg); }
.h-bucket circle { fill: none; stroke-width: 11; }
.h-bucket .bg { stroke: var(--border-light); }
.h-bucket .fg { stroke: #5A8A6A; stroke-linecap: round; }
.h-bucket strong { display: block; font-family: var(--font-display); font-size: 1.6rem; margin-top: 8px; }
.h-bucket p { font-size: 0.82rem; color: var(--text-muted); }
.h-dream-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.h-dream { padding: 20px; border-radius: 18px; border: 1px dashed var(--border); background: var(--bg-card); color: inherit; display: flex; flex-direction: column; gap: 6px; }
.h-dream .f { font-size: 1.8rem; }
.h-dream h3 { font-size: 1.3rem; }
.h-dream p { font-size: 0.82rem; color: var(--text-muted); }
.h-dream .st { font-size: 0.74rem; font-weight: 600; color: var(--lavender); margin-top: auto; }

/* ---------- Keşfet ---------- */
.h-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.h-tile { position: relative; min-height: 170px; padding: 20px; border-radius: 20px; display: flex; flex-direction: column; justify-content: flex-end; color: #fff; overflow: hidden; isolation: isolate; background: linear-gradient(135deg, #5c4a36, #8E7BB8); }
.h-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 900ms var(--ease-out); }
.h-tile:hover img { transform: scale(1.06); }
.h-tile::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(0,0,0,0.7), rgba(0,0,0,0.05)); }
.h-tile .ic { font-size: 1.6rem; }
.h-tile h3 { color: #fff; font-size: 1.6rem; line-height: 1.1; }
.h-tile small { opacity: 0.85; font-size: 0.8rem; }

.h-random { text-align: center; padding: var(--space-2xl) 0 var(--space-3xl); }

@media (max-width: 900px) {
  .h-stats { grid-template-columns: repeat(3, 1fr); }
  .h-mapwrap, .h-dreams { grid-template-columns: 1fr; }
  .h-tiles { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .h-stats { grid-template-columns: repeat(2, 1fr); margin-top: -40px; }
  .h-stats .h-stat:last-child { grid-column: 1 / -1; }
  .h-hero .counter-unit { min-width: 64px; padding: 10px 6px 8px; }
  .h-hero .counter-unit .number { font-size: 1.7rem; }
  .h-tiles { grid-template-columns: 1fr 1fr; }
  .h-tile { min-height: 130px; }
  .h-map { min-height: 300px; }
}
@media (prefers-reduced-motion: reduce) { .h-slides img { animation: none; } }