/* Doğa Haritası sitesi — açık, sade tema. Renkler uygulamanın açık temasından:
   orman yeşili, beyaz kâğıt, gün batımı turuncusu (yalnız küçük vurgularda).
   Bu dosya site-uret.py ile kaynak/temel.css + kaynak/telefon.css birleştirilerek stil.css olur. */
:root {
  --zemin: #f4f7f3;
  --yuzey: #ffffff;
  --murekkep: #102119;
  --soluk: #45554b;
  --yesil: #0e8c4f;
  --yesil-koyu: #07633a;
  --yesil-acik: #e3f2e8;
  --turuncu: #e5701a;
  --cizgi: #dfe5dd;
  --gece: #0a110d;
  --yazi: 'Plus Jakarta Sans', system-ui, sans-serif;
  --olcu: 'IBM Plex Mono', ui-monospace, monospace;
  --ic: clamp(18px, 5vw, 64px);
  --genislik: 1440px;
  --yuvarlak: 24px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--zemin); color: var(--murekkep);
  font: 500 18px/1.65 var(--yazi); -webkit-font-smoothing: antialiased;
  font-variant-ligatures: no-common-ligatures;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible { outline: 2.5px solid var(--yesil); outline-offset: 3px; border-radius: 6px; }
.kap { max-width: var(--genislik); margin: 0 auto; padding: 0 var(--ic); }
.gizli-baslik { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

h1, h2, h3 { margin: 0; letter-spacing: -0.02em; font-weight: 800; }
h1 { font-size: clamp(38px, 5.4vw, 80px); line-height: 1.16; }
h2 { font-size: clamp(30px, 3.6vw, 52px); line-height: 1.18; }
h3 { font-size: 20px; line-height: 1.25; letter-spacing: -0.015em; }
.ust-yazi { margin: 0 0 14px; font: 600 12.5px/1 var(--olcu); letter-spacing: 0.08em; text-transform: uppercase; color: var(--yesil); }
.ozet { margin: 28px 0 0; color: var(--soluk); font-size: clamp(17px, 1.45vw, 21px); max-width: 34em; }

/* ── Düğmeler ───────────────────────────────── */
.dugme {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font: 700 15.5px/1 var(--yazi); text-decoration: none; cursor: pointer; white-space: nowrap;
  border: 0; border-radius: 14px; padding: 15px 22px; background: var(--yesil); color: #fff;
  transition: background 0.15s ease, transform 0.15s ease;
}
.dugme:hover { background: var(--yesil-koyu); }
.dugme:active { transform: scale(0.97); }
.dugme.ikincil { background: var(--yuzey); color: var(--murekkep); box-shadow: inset 0 0 0 1.5px var(--cizgi); }
.dugme.ikincil:hover { box-shadow: inset 0 0 0 1.5px var(--murekkep); }
.magazalar { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.magaza { display: inline-flex; align-items: center; gap: 12px; padding: 11px 20px 11px 16px; border-radius: 14px; background: var(--gece); color: #fff; text-decoration: none; transition: transform 0.15s ease, background 0.15s ease; }
.magaza:hover { background: #1c2a22; }
.magaza:active { transform: scale(0.97); }
.magaza svg { width: 26px; height: 26px; flex: none; }
.magaza span { display: grid; line-height: 1.15; }
.magaza small { font-size: 11px; font-weight: 600; opacity: 0.75; }
.magaza b { font-size: 17px; letter-spacing: -0.01em; }

/* ── Üst çubuk: beyaz bar, ortada barın altına sarkan yuvarlak logo rozeti, iki yanda menüler ── */
.ust { position: sticky; top: 0; z-index: 1000; background: #fff; border-bottom: 1px solid var(--cizgi); box-shadow: 0 6px 24px rgba(16, 33, 25, 0.05); }
.ust::before { content: ''; display: block; height: 4px; background: linear-gradient(90deg, var(--yesil), #3dd68c 60%, var(--turuncu)); }
.kapsul { position: relative; display: grid; grid-template-columns: 1fr 150px 1fr; grid-template-rows: 80px; align-items: center; }
.ust-sol { justify-self: start; margin-left: -16px; }
.ust-sag { justify-self: end; display: flex; align-items: center; gap: 12px; height: 100%; }
/* Rozet satırı uzatmasın diye yüksekliği satırdan taşar; çizgisi ve gölgesi yalnız barın altında görünür */
.rozet { grid-column: 2; grid-row: 1; justify-self: center; align-self: start; position: relative; z-index: 1; width: 116px; height: 116px; border-radius: 50%; background: #fff; display: grid; place-items: center; }
.rozet::before { content: ''; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 1px var(--cizgi), 0 12px 24px rgba(16, 33, 25, 0.08); clip-path: inset(81px -40px -40px -40px); }
.rozet img { position: relative; width: 84px; height: 84px; border-radius: 23px; transition: transform 0.2s ease; }
.rozet:hover img { transform: scale(1.04); }
.marka { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 800; font-size: 19px; letter-spacing: -0.02em; }
.ust nav { display: flex; gap: 6px; height: 100%; }
.ust nav a { position: relative; display: flex; align-items: center; padding: 0 16px; text-decoration: none; font-weight: 700; font-size: 16.5px; color: var(--murekkep); transition: color 0.15s; }
.ust nav a::after { content: ''; position: absolute; left: 16px; right: 16px; bottom: -1px; height: 4px; border-radius: 4px 4px 0 0; background: var(--yesil); transform: scaleX(0); transition: transform 0.2s ease; }
.ust nav a:hover { color: var(--yesil); }
.ust nav a:hover::after { transform: scaleX(0.5); }
.ust nav a[aria-current] { color: var(--yesil); }
.ust nav a[aria-current]::after { transform: scaleX(1); }
.ust-indir {
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  padding: 14px 20px; border-radius: 14px; text-decoration: none;
  background: var(--yesil); color: #fff; font-weight: 800; font-size: 15.5px;
  transition: background 0.15s, transform 0.15s;
}
.ust-indir:hover { background: var(--yesil-koyu); }
.ust-indir:active { transform: scale(0.97); }
.ust-indir svg { width: 17px; height: 17px; }
.menu { display: none; grid-column: 1; grid-row: 1; justify-self: start; }
.menu summary { list-style: none; cursor: pointer; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; color: var(--murekkep); background: var(--zemin); border: 1px solid var(--cizgi); }
.menu summary::-webkit-details-marker { display: none; }
.menu summary svg { width: 24px; height: 24px; grid-area: 1 / 1; }
.menu summary .kapa, .menu[open] summary .ac { display: none; }
.menu[open] summary .kapa { display: block; }
.menu[open] summary { background: var(--murekkep); color: #fff; border-color: var(--murekkep); }
/* Telefon menüsü: barın altından ekranın sonuna kadar; arkadaki sayfa kaymaz */
html:has(.menu[open]) { overflow: hidden; }
.menu-panel { position: fixed; left: 0; right: 0; top: var(--ust-boy, 73px); bottom: 0; overflow-y: auto; overscroll-behavior: contain; background: var(--zemin); padding: 44px var(--ic) calc(28px + env(safe-area-inset-bottom)); display: grid; align-content: start; gap: 26px; animation: menu-gel 0.22s ease-out; }
@keyframes menu-gel { from { opacity: 0; transform: translateY(-8px); } }
.mp-kutular { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.mp-kutu { display: grid; justify-items: start; gap: 18px; padding: 16px 14px 14px; border-radius: 18px; background: #fff; border: 1px solid var(--cizgi); text-decoration: none; color: var(--murekkep); font-weight: 800; font-size: 15px; line-height: 1.2; }
.mp-kutu svg { width: 26px; height: 26px; color: var(--yesil); }
.mp-kutu[aria-current] { background: var(--yesil); border-color: var(--yesil); color: #fff; }
.mp-kutu[aria-current] svg { color: #fff; }
.mp-grup p { margin: 0 0 6px; font: 600 12px/1 var(--olcu); letter-spacing: 0.1em; text-transform: uppercase; color: var(--yesil); }
.mp-grup { display: grid; }
.mp-grup a { display: flex; justify-content: space-between; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--cizgi); text-decoration: none; font-weight: 700; font-size: 17px; color: var(--murekkep); }
.mp-grup a::after { content: '→'; color: var(--yesil); font-weight: 700; }
.mp-grup a[aria-current] { color: var(--yesil); }
.mp-alt { padding: 22px 18px 20px; border-radius: 22px; background: var(--gece); color: #fff; }
.mp-alt p { margin: 0 0 14px; font-weight: 800; font-size: 18px; }
.mp-alt .magazalar { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; }
.mp-alt .magaza { background: #fff; color: var(--murekkep); justify-content: center; padding-left: 10px; padding-right: 10px; }
.mp-alt .magaza b { white-space: nowrap; font-size: 15.5px; }
.mp-alt .magaza svg { flex: none; }
@media (max-width: 1060px) {
  .ust .ust-sol, .ust .ust-sag nav { display: none; }
  .menu { display: block; }
  .kapsul { grid-template-columns: 1fr 110px 1fr; grid-template-rows: 68px; }
  .rozet { width: 92px; height: 92px; }
  .rozet::before { clip-path: inset(69px -40px -40px -40px); }
  .rozet img { width: 64px; height: 64px; border-radius: 18px; }
  /* Telefonda indirme düğmesi yalnız ok simgesi */
  .ust-indir { width: 48px; height: 48px; padding: 0; justify-content: center; }
  .ust-indir span { display: none; }
  .ust-indir svg { width: 20px; height: 20px; }
}

/* Tüm Özellikler: açılır menü */
.acilir { position: relative; display: flex; }
.acilir button { display: flex; align-items: center; gap: 6px; padding: 0 16px; border: 0; background: none; cursor: pointer; font: 700 16.5px var(--yazi); color: var(--murekkep); }
.acilir button svg { width: 16px; height: 16px; transition: transform 0.2s ease; }
.acilir button[data-simdiki] { color: var(--yesil); }
.acilir:hover button, .acilir:focus-within button { color: var(--yesil); }
.acilir:hover button svg, .acilir:focus-within button svg { transform: rotate(180deg); }
.mega {
  position: absolute; z-index: 5; top: 100%; right: -120px; width: min(860px, 92vw);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 28px;
  padding: 26px 30px; background: #fff; border: 1px solid var(--cizgi); border-radius: 24px;
  box-shadow: 0 30px 60px rgba(16, 33, 25, 0.14);
  opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity 0.18s, transform 0.18s, visibility 0s linear 0.18s;
}
.acilir:hover .mega, .acilir:focus-within .mega { opacity: 1; visibility: visible; transform: none; transition: opacity 0.18s, transform 0.18s; }
.mega div { display: grid; align-content: start; gap: 2px; }
.mega p { margin: 0 0 10px; padding-bottom: 10px; border-bottom: 2px solid var(--yesil); font-weight: 800; font-size: 17px; letter-spacing: -0.01em; color: var(--murekkep); }
.ust nav .mega a { display: block; height: auto; position: static; padding: 8px 10px; margin: 0 -10px; border-radius: 10px; text-decoration: none; font-weight: 700; font-size: 15.5px; color: var(--murekkep); }
.ust nav .mega a:hover { background: var(--yesil-acik); color: var(--yesil-koyu); }
.ust nav .mega a[aria-current] { color: var(--yesil); }
.ust nav .mega a::after { display: none; }

/* Ana sayfa: gruplu özellik kartları */
.grup-baslik { flex: 1; display: flex; align-items: center; gap: 14px; margin: 0; font-size: clamp(24px, 2.4vw, 32px); font-weight: 800; letter-spacing: -0.02em; color: var(--murekkep); }
.grup-baslik::before { content: ''; width: 8px; height: 1.1em; border-radius: 4px; background: var(--yesil); flex: none; }
.grup-baslik::after { content: ''; flex: 1; height: 1px; background: var(--cizgi); }
.kartlar.kucuk { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .kartlar.kucuk { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px) { .kartlar.kucuk { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .kartlar.kucuk { grid-template-columns: 1fr; } }
.kartlar.kucuk h3 { font-size: 19px; }
.kartlar.kucuk p { font-size: 15.5px; }

/* Ana sayfa: her özellik grubu yana kayan bir şerit */
.kaydirak + .kaydirak { margin-top: clamp(36px, 4vw, 56px); }
.kaydirak-bas { display: flex; align-items: center; gap: 20px; margin-bottom: 20px; }
.kaydirak-oklar { display: flex; gap: 8px; flex: none; }
.kaydirak-oklar button { width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid var(--cizgi); background: #fff; color: var(--murekkep); display: grid; place-items: center; cursor: pointer; transition: border-color 0.15s, color 0.15s, background 0.15s; }
.kaydirak-oklar button:hover { border-color: var(--yesil); color: #fff; background: var(--yesil); }
.kaydirak-oklar svg { width: 20px; height: 20px; }
.kartlar.kayan { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * 22px) / 4); grid-template-columns: none; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 4px 2px 12px; margin: -4px -2px 0; }
.kartlar.kayan::-webkit-scrollbar { display: none; }
.kartlar.kayan .kart { scroll-snap-align: start; }
@media (max-width: 1100px) { .kartlar.kayan { grid-auto-columns: calc((100% - 2 * 22px) / 3); } }
@media (max-width: 820px) { .kartlar.kayan { grid-auto-columns: 44%; } }
@media (max-width: 520px) { .kartlar.kayan { grid-auto-columns: 78%; } .kaydirak-oklar { display: none; } }

/* Topluluk haritası: gözlem noktaları ve lejant */
.lejant { position: absolute; z-index: 500; right: 12px; bottom: 30px; display: grid; gap: 6px; padding: 10px 12px; background: rgba(255, 255, 255, 0.95); border: 1px solid var(--cizgi); border-radius: 12px; font-size: 13px; font-weight: 600; }
.lejant span { display: flex; align-items: center; gap: 8px; }
.lejant i { width: 12px; height: 12px; border-radius: 50%; background: var(--yesil); }
.lejant i.cicek { background: #d6578d; }
.lejant i.gokyuzu { background: #3f7fd9; }
.lejant i.nokta { border-radius: 4px; background: var(--turuncu); }
.gozlem-noktasi { width: 26px; height: 26px; border-radius: 9px; display: grid; place-items: center; background: var(--turuncu); color: #fff; border: 2px solid #fff; box-shadow: 0 4px 12px rgba(16, 33, 25, 0.25); }
.gozlem-noktasi svg { width: 14px; height: 14px; }
.nokta-kart { padding: 14px 16px; font: 500 14px/1.45 var(--yazi); }
.nokta-kart small { font: 600 11px/1 var(--olcu); letter-spacing: 0.06em; text-transform: uppercase; color: var(--turuncu); }
.nokta-kart strong { display: block; font-size: 16px; margin: 6px 0 2px; }
.nokta-kart p { margin: 6px 0 0; color: var(--soluk); }
.nokta-kart .turler { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 4px; }
.nokta-kart .turler span { font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: 8px; background: var(--yesil-acik); color: var(--yesil-koyu); }

/* ── Özellik sayfasından geri bağlantısı ── */
.geri-bag { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 26px; padding: 9px 14px 9px 11px; border-radius: 999px; background: #fff; border: 1px solid var(--cizgi); text-decoration: none; font-weight: 700; font-size: 14.5px; color: var(--murekkep); transition: border-color 0.15s, color 0.15s; }
.geri-bag:hover { border-color: var(--yesil); color: var(--yesil); }
.geri-bag svg { width: 16px; height: 16px; transition: transform 0.15s; }
.geri-bag:hover svg { transform: translateX(-3px); }

/* ── Giriş (ana sayfa ve özellik sayfaları) ─── */
.giris { padding: clamp(24px, 3.5vw, 48px) 0 clamp(32px, 4vw, 56px); }
.giris .kap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 112px); align-items: start; }
.giris .kap > div:first-child { padding-top: clamp(4px, 2.5vw, 40px); }
@media (max-width: 960px) { .giris .kap { grid-template-columns: 1fr; } }
.giris h1 { font-size: clamp(36px, 4.4vw, 68px); }
.giris h1 em { font-style: normal; color: var(--yesil); }

/* Telefon, ilgili doğa fotoğrafının önünde */
.sahne { position: relative; width: 100%; max-width: 500px; justify-self: end; border-radius: 32px; overflow: hidden; padding: clamp(20px, 2vw, 28px) 0; background: var(--gece); }
.sahne .telefon { --g: clamp(256px, 19vw, 284px); }
@media (max-width: 960px) { .sahne { justify-self: center; } }
.sahne > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.9; }
.sahne::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 17, 13, 0) 30%, rgba(10, 17, 13, 0.45)); }
.sahne .telefon { position: relative; z-index: 1; }
.sahne figcaption { position: absolute; z-index: 2; left: 16px; bottom: 14px; font: 500 12px/1.3 var(--olcu); color: #fff; background: rgba(10, 17, 13, 0.6); backdrop-filter: blur(6px); padding: 7px 10px; border-radius: 9px; }
.sahne figcaption i { opacity: 0.75; }
figure.sahne { margin: 0; }

/* ── Bölümler ───────────────────────────────── */
.bolum { padding: clamp(44px, 5.5vw, 80px) 0; }
.bolum.beyaz { background: var(--yuzey); border-block: 1px solid var(--cizgi); }
.bolum-bas { max-width: 46em; margin-bottom: clamp(24px, 3vw, 40px); }
.bolum-bas p:not(.ust-yazi) { margin: 14px 0 0; color: var(--soluk); font-size: clamp(17.5px, 1.4vw, 19.5px); }
/* Açıklaması geniş ekranda tek satır kalan başlık */
.bolum-bas.genis { max-width: none; }
@media (min-width: 1100px) { .bolum-bas.genis p:not(.ust-yazi) { white-space: nowrap; font-size: clamp(16px, 1.3vw, 18.5px); } }

/* Özellik kartları (ana sayfa ve "Diğer özellikler") */
.kartlar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2vw, 28px); }
@media (max-width: 920px) { .kartlar { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 580px) { .kartlar { grid-template-columns: 1fr; } }
.kart { display: flex; flex-direction: column; background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--yuvarlak); overflow: hidden; text-decoration: none; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; }
.kart:hover { transform: translateY(-3px); border-color: #c9d4c8; box-shadow: 0 18px 40px rgba(16, 33, 25, 0.08); }
.kart img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.kart div { padding: 22px 24px 24px; display: grid; gap: 6px; flex: 1; }
.kart small { font: 600 11.5px/1 var(--olcu); letter-spacing: 0.08em; text-transform: uppercase; color: var(--yesil); }
.kart p { margin: 0; color: var(--soluk); font-size: 16.5px; line-height: 1.55; }
.kart .devam { margin-top: auto; padding-top: 8px; font-weight: 700; font-size: 15px; color: var(--yesil); }

/* Nasıl çalışır: gerçek bir sıra; numaralar kesikli bir çizgiyle bağlı */
.adimlar { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 44px); counter-reset: adim; position: relative; }
.adimlar::before { content: ''; position: absolute; top: 31px; left: 32px; right: 32px; border-top: 2px dashed #b9d9c4; }
@media (max-width: 820px) { .adimlar { grid-template-columns: 1fr; } .adimlar::before { display: none; } }
.adimlar li { counter-increment: adim; position: relative; }
.adimlar li::before { content: counter(adim); display: grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; background: var(--yesil); color: #fff; font-size: 26px; font-weight: 800; margin-bottom: 22px; box-shadow: 0 0 0 8px #fff; }
.adimlar h3 { font-size: clamp(21px, 1.8vw, 25px); }
.adimlar p { margin: 10px 0 0; color: var(--soluk); font-size: 18px; max-width: 24em; }

/* Ayrıntılar: açık yeşil zeminde beyaz kartlar */
.yesil-zemin { background: #e8f3eb; }
.ozellik-izgara { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); }
@media (max-width: 760px) { .ozellik-izgara { grid-template-columns: 1fr; } }
.ozellik-izgara li { display: flex; gap: 18px; align-items: flex-start; background: #fff; border-radius: var(--yuvarlak); padding: clamp(22px, 2.4vw, 32px); }
.tik { flex: none; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--yesil-acik); color: var(--yesil); }
.tik svg { width: 22px; height: 22px; }
.ozellik-izgara h3 { font-size: clamp(20px, 1.6vw, 23px); }
.ozellik-izgara p { margin: 8px 0 0; color: var(--soluk); font-size: 17.5px; }

/* Geniş fotoğraf şeridi */
.serit-kap { padding-top: clamp(44px, 5.5vw, 80px); }
.serit { margin: 0; border-radius: 32px; overflow: hidden; position: relative; }
.serit img { width: 100%; aspect-ratio: 3 / 1; max-height: 380px; object-fit: cover; }
@media (max-width: 700px) { .serit img { aspect-ratio: 16 / 10; } }

/* Sıkça sorulanlar: solda başlık, sağda beyaz kartta sorular */
.sss-izgara { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(28px, 6vw, 112px); align-items: start; }
@media (max-width: 860px) { .sss-izgara { grid-template-columns: 1fr; } }
.sss-izgara .bolum-bas a { color: var(--yesil); font-weight: 700; }
.sss { background: #fff; border: 1px solid var(--cizgi); border-radius: var(--yuvarlak); padding: 6px clamp(20px, 2.5vw, 32px); }
.sss details + details { border-top: 1px solid var(--cizgi); }
.sss summary { cursor: pointer; list-style: none; padding: 24px 52px 24px 0; position: relative; font-weight: 700; font-size: clamp(18px, 1.5vw, 20px); letter-spacing: -0.01em; }
.sss summary::-webkit-details-marker { display: none; }
.sss summary::after { content: '+'; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--yesil-acik); color: var(--yesil); font-size: 22px; font-weight: 600; transition: transform 0.2s ease, background 0.2s; }
.sss details[open] summary::after { transform: translateY(-50%) rotate(45deg); background: var(--yesil); color: #fff; }
.sss details p { margin: -8px 0 24px; color: var(--soluk); font-size: 17.5px; max-width: 42em; }

/* ── İndir bandı ────────────────────────────── */
.indir { background: var(--gece); color: #eef4ef; border-radius: 36px; padding: clamp(36px, 6vw, 72px); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: center; position: relative; overflow: hidden; }
@media (max-width: 860px) { .indir { grid-template-columns: 1fr; } }
.indir h2 { color: #fff; }
.indir p { margin: 12px 0 0; color: #a9bcaf; max-width: 32em; }
.indir .magazalar { margin-top: 0; }
.indir .magaza { background: #fff; color: var(--gece); }
.indir .magaza:hover { background: var(--yesil-acik); }
.indir-bolum { padding: clamp(44px, 5.5vw, 80px) 0; }

/* ── Canlı harita (ana sayfa) ───────────────── */
.harita-cerceve { position: relative; border-radius: 28px; overflow: hidden; border: 1px solid var(--cizgi); background: #dfe7dc; aspect-ratio: 16 / 7; min-height: 360px; }
@media (max-width: 760px) { .harita-cerceve { aspect-ratio: 4 / 5; } }
#harita { position: absolute; inset: 0; }
.olcer { position: absolute; left: 12px; bottom: 12px; z-index: 500; font: 500 12px/1.4 var(--olcu); background: rgba(255, 255, 255, 0.9); border: 1px solid var(--cizgi); padding: 8px 10px; border-radius: 10px; pointer-events: none; }
.olcer b { color: var(--yesil); font-weight: 600; }
#sayi { font-family: var(--olcu); color: var(--murekkep); }
.igne { width: 14px; height: 14px; border-radius: 50%; background: var(--yesil); border: 2px solid #fff; box-shadow: 0 0 0 4px rgba(14, 140, 79, 0.22); transition: transform 0.15s ease; }
.igne:hover { transform: scale(1.35); }
.igne.cicek { background: #d6578d; box-shadow: 0 0 0 4px rgba(214, 87, 141, 0.22); }
.igne.gokyuzu { background: #3f7fd9; box-shadow: 0 0 0 4px rgba(63, 127, 217, 0.22); }
.igne.manzara { background: #c58b1f; box-shadow: 0 0 0 4px rgba(197, 139, 31, 0.22); }
.leaflet-popup-content-wrapper { border-radius: 16px; padding: 0; overflow: hidden; }
.leaflet-popup-content { margin: 0; width: 220px !important; }
.kart-foto { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.kart-bilgi { padding: 10px 12px 12px; font: 500 14px/1.4 var(--yazi); }
.kart-bilgi strong { display: block; font-size: 15px; }
.kart-bilgi i { color: var(--soluk); }
.kart-bilgi a { display: inline-block; margin-top: 6px; color: var(--yesil); font-weight: 700; text-decoration: none; }
.leaflet-container { font-family: var(--yazi); }

/* Önce doğa: üç kısa ilke */
.ilkeler { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); }
@media (max-width: 820px) { .ilkeler { grid-template-columns: 1fr; } }
.ilkeler div { border-top: 2px solid var(--yesil); padding-top: 18px; }
.ilkeler p { margin: 10px 0 0; color: var(--soluk); font-size: 17.5px; }

/* E-posta listesi */
form.liste { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 24px; max-width: 520px; }
form.liste label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
form.liste input { flex: 1 1 240px; min-width: 0; font: 500 16px/1 var(--yazi); color: var(--murekkep); background: var(--yuzey); border: 1.5px solid var(--cizgi); border-radius: 14px; padding: 15px 16px; }
form.liste input:focus { border-color: var(--yesil); outline: none; }
.durum { min-height: 24px; margin: 12px 0 0; font-size: 15px; }
.durum.tamam { color: var(--yesil); }
.durum.hata { color: #c62828; }
.gizlilik { margin: 6px 0 0; font-size: 13.5px; color: var(--soluk); }

/* ── Alt bilgi ──────────────────────────────── */
.alt-bilgi { background: var(--gece); color: #a9bcaf; padding: clamp(48px, 6vw, 72px) 0 36px; font-size: 15px; }
.alt-izgara { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); gap: 32px; }
@media (max-width: 820px) { .alt-izgara { grid-template-columns: 1fr 1fr; } }
.alt-bilgi .marka { color: #fff; margin-bottom: 12px; }
.alt-bilgi p { margin: 0; max-width: 24em; }
.alt-bilgi h2 { font-size: 16px; font-weight: 800; letter-spacing: -0.01em; color: #fff; margin: 4px 0 16px; padding-bottom: 10px; border-bottom: 2px solid #3dd68c; width: fit-content; }
.alt-bilgi ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.alt-bilgi a { text-decoration: none; color: #d6e2d9; }
.alt-bilgi a:hover { color: #fff; }
.alt-son { margin-top: 44px; padding-top: 22px; border-top: 1px solid rgba(232, 241, 234, 0.12); display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 13.5px; }

/* ── Paylaşım sayfası (p.html) ──────────────── */
.paylasim { padding: 0 0 clamp(64px, 8vw, 104px); }
.pg-kahraman { position: relative; background: var(--gece); overflow: hidden; display: grid; place-items: center; min-height: 360px; }
.pg-bulanik { position: absolute; inset: -40px; width: calc(100% + 80px); height: calc(100% + 80px); object-fit: cover; filter: blur(40px) brightness(0.45) saturate(1.2); }
.pg-foto { position: relative; max-width: 100%; max-height: min(78vh, 820px); object-fit: contain; }
.pg-baslik { position: absolute; left: 0; right: 0; bottom: 0; padding: 120px 0 clamp(26px, 3vw, 40px); background: linear-gradient(transparent, rgba(10, 17, 13, 0.85)); color: #fff; }
.pg-baslik h1 { font-size: clamp(36px, 5vw, 72px); color: #fff; margin: 12px 0 2px; }
.pg-baslik p { margin: 0; font-style: italic; font-size: clamp(17px, 1.6vw, 21px); color: rgba(255, 255, 255, 0.8); }
.pg-etiket { display: inline-block; font: 600 12px/1 var(--olcu); letter-spacing: 0.08em; text-transform: uppercase; color: #03190d; background: #3dd68c; padding: 7px 10px; border-radius: 8px; }
@media (max-width: 700px) { .pg-baslik { position: relative; width: 100%; justify-self: stretch; background: var(--gece); padding-top: 20px; } }

.pg-kutular { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin: 28px 0 0; position: relative; z-index: 2; }
@media (max-width: 700px) { .pg-kutular { grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; } .pg-kutular > div { padding: 14px; } .pg-kutular b { font-size: 16px; } .pg-kutular .olcu { font-size: 12.5px; } }
.pg-kutular > div { background: #fff; border: 1px solid var(--cizgi); border-radius: 20px; padding: 18px 20px; display: grid; gap: 2px; box-shadow: 0 14px 34px rgba(16, 33, 25, 0.07); }
.pg-simge { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--yesil-acik); color: var(--yesil); margin-bottom: 10px; }
.pg-simge svg { width: 20px; height: 20px; }
.pg-avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #8de8b8, #0e8c4f); color: #fff; font-weight: 800; }
.pg-kutular .pg-simge:has(.pg-avatar) { background: none; }
.pg-kutular small { font-size: 13px; font-weight: 600; color: var(--soluk); }
.pg-kutular b { font-size: 18px; }
.pg-kutular .olcu { font: 600 15px var(--olcu); }

.pg-not { margin: 28px 0 0; padding: 22px 26px; background: #fff; border-left: 4px solid var(--yesil); border-radius: 0 18px 18px 0; font-size: 19px; line-height: 1.6; }

.pg-izgara { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 20px; margin-top: 28px; }
.pg-izgara.tek { grid-template-columns: 1fr; }
@media (max-width: 900px) { .pg-izgara { grid-template-columns: 1fr; } }
.pg-harita { min-height: 380px; border-radius: 24px; overflow: hidden; border: 1px solid var(--cizgi); }
.pg-igne { width: 54px; height: 54px; border-radius: 50%; border: 3px solid #fff; overflow: hidden; box-shadow: 0 0 0 6px rgba(14, 140, 79, 0.35), 0 10px 24px rgba(0, 0, 0, 0.3); }
.pg-igne img { width: 100%; height: 100%; object-fit: cover; }
.pg-uygulama { background: var(--gece); color: #eef4ef; border-radius: 24px; padding: clamp(24px, 3vw, 36px); display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.pg-uygulama img { border-radius: 16px; margin-bottom: 14px; }
.pg-uygulama h2 { color: #fff; font-size: clamp(24px, 2.2vw, 30px); }
.pg-uygulama p { margin: 8px 0 20px; color: #b5c6ba; font-size: 17px; }
.pg-uygulama .eylemler { display: flex; flex-wrap: wrap; gap: 10px; }
.pg-uygulama .dugme { background: #3dd68c; color: #03190d; }
.pg-uygulama .dugme:hover { background: #6fe6aa; }
.pg-uygulama .dugme.ikincil { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.3); }

.pg-diger { margin-top: clamp(48px, 6vw, 80px); }
.pg-diger h2 { font-size: clamp(24px, 2.4vw, 32px); margin-bottom: 20px; }
.pg-diger-izgara { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 820px) { .pg-diger-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pg-diger-izgara a { text-decoration: none; display: grid; gap: 2px; }
.pg-diger-izgara img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 18px; margin-bottom: 8px; transition: transform 0.2s; }
.pg-diger-izgara a:hover img { transform: scale(1.02); }
.pg-diger-izgara b { font-size: 16.5px; }
.pg-diger-izgara small { font-size: 14px; color: var(--soluk); }
.bulunamadi { text-align: center; padding: 80px 0; color: var(--soluk); }

/* 404 sayfası */
.yok-sayfa { padding: clamp(40px, 6vw, 96px) 0 clamp(56px, 7vw, 112px); }
.yok-izgara { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
.yok-kod { margin: 0 0 6px; font-family: 'IBM Plex Mono', monospace; font-weight: 600; font-size: 15px; letter-spacing: 0.18em; color: var(--yesil); }
.yok-sayfa h1 { margin: 0; font-size: clamp(38px, 5vw, 64px); line-height: 1.08; letter-spacing: -0.02em; }
.yok-sayfa .ozet { margin: 18px 0 0; max-width: 34em; color: var(--soluk); font-size: clamp(17px, 1.35vw, 19px); }
.yok-sayfa .eylemler { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.yok-oneriler { list-style: none; padding: 0; margin: 36px 0 0; border-top: 1px solid var(--cizgi); max-width: 30em; }
.yok-oneriler a { display: flex; justify-content: space-between; align-items: center; padding: 14px 2px; border-bottom: 1px solid var(--cizgi); color: var(--murekkep); font-weight: 700; text-decoration: none; }
.yok-oneriler a span { color: var(--yesil); transition: transform 0.15s; }
.yok-oneriler a:hover { color: var(--yesil); }
.yok-oneriler a:hover span { transform: translateX(4px); }
.yok-foto { margin: 0; border-radius: 28px; overflow: hidden; aspect-ratio: 4 / 3; }
.yok-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 820px) { .yok-izgara { grid-template-columns: 1fr; } .yok-foto { order: -1; aspect-ratio: 16 / 9; } }

/* ── Gizlilik ve şartlar ────────────────────── */
.yasal { padding: clamp(28px, 5vw, 64px) 0 80px; }
.yasal-kap { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 56px; align-items: start; }
@media (max-width: 900px) { .yasal-kap { grid-template-columns: 1fr; } .yasal-icindekiler { display: none; } }
.yasal article { max-width: 72ch; }
.yasal h1 { font-size: clamp(34px, 5vw, 52px); margin: 6px 0 16px; }
.yasal-alt-baslik { margin: 0; font: 600 13px/1 var(--olcu); color: var(--yesil); letter-spacing: 0.04em; }
.yasal-ozet { font-size: 19px; line-height: 1.6; margin: 0 0 10px; }
.yasal-tarih { font: 500 13px/1.4 var(--olcu); color: var(--soluk); margin: 0 0 28px; }
.yasal section { padding-top: 28px; margin-top: 28px; border-top: 1px solid var(--cizgi); }
.yasal h2 { font-size: 22px; margin: 0 0 12px; scroll-margin-top: 90px; }
.yasal p, .yasal li { font-size: 16px; line-height: 1.7; color: var(--soluk); }
.yasal p { margin: 0 0 12px; }
.yasal ul { margin: 0 0 12px; padding-left: 20px; }
.yasal li { margin-bottom: 8px; }
.yasal li::marker { color: var(--yesil); }
.yasal a { color: var(--yesil); }
.yasal-diger { margin-top: 36px !important; font-weight: 700; }
.yasal-icindekiler { position: sticky; top: 96px; font-size: 14px; }
.yasal-icindekiler p { font: 600 12px/1 var(--olcu); color: var(--soluk); letter-spacing: 0.04em; margin: 0 0 12px; }
.yasal-icindekiler ol { margin: 0; padding-left: 18px; color: var(--soluk); }
.yasal-icindekiler li { margin-bottom: 8px; }
.yasal-icindekiler a { text-decoration: none; }
.yasal-icindekiler a:hover { color: var(--yesil); }

/* ── Telefon ve uygulama ekranları (uygulamanın koyu teması, ek- önekli) ── */
:root {
  --ek-zemin: #0a110d;
  --ek-kart: #17211b;
  --ek-secili: #123d27;
  --ek-yazi: #f1f5f0;
  --ek-soluk: #9daaa1;
  --ek-cizgi: #24302a;
  --ek-yesil: #3dd68c;
  --ek-turuncu: #ff9b45;
}
.telefon {
  --g: clamp(285px, 23vw, 330px);
  /* Ekran alanı uygulama görüntülerinin oranında (320×693): görüntü kırpılmaz, alt menü de görünür.
     22px çerçeve payı, 46px çizilen durum çubuğu */
  width: var(--g); height: calc((var(--g) - 22px) * 2.166 + 68px); margin: 0 auto;
  padding: 11px; border-radius: 54px;
  background: linear-gradient(145deg, #2b3530, #0f1512 40%, #1c2420);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.07), 0 50px 100px rgba(0, 0, 0, 0.6), inset 0 0 0 2px #050806;
}
@media (max-width: 380px) { .telefon { --g: 272px; } }
.cerceve { position: relative; width: 100%; height: 100%; border-radius: 44px; overflow: hidden; background: var(--ek-zemin); color: var(--ek-yazi); font-family: var(--yazi); }
.centik { position: absolute; z-index: 30; left: 50%; top: 10px; width: 96px; height: 28px; margin-left: -48px; border-radius: 20px; background: #000; }
.durum-cubugu { position: absolute; z-index: 29; left: 0; right: 0; top: 0; height: 46px; display: flex; justify-content: space-between; align-items: center; padding: 4px 28px 0 32px; font: 700 14px/1 var(--yazi); pointer-events: none; }
.pil { width: 24px; height: 11px; border-radius: 3.5px; border: 1.5px solid rgba(241, 245, 240, 0.8); position: relative; }
.pil::after { content: ''; position: absolute; inset: 1.5px 5px 1.5px 1.5px; border-radius: 1.5px; background: var(--ek-yazi); }

.ekran { position: absolute; inset: 0; padding-top: 46px; display: flex; flex-direction: column; background: var(--ek-zemin); }

.ekran svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ekran img { display: block; }

.ek-baslik { display: flex; align-items: center; gap: 8px; padding: 8px 16px 10px; font-weight: 800; font-size: 17px; letter-spacing: -0.01em; }
.ek-baslik svg { width: 20px; height: 20px; color: var(--ek-soluk); }
.ek-baslik.ana { font-size: 24px; padding: 6px 18px 10px; }
.ek-icerik { flex: 1; min-height: 0; overflow: hidden; padding: 4px 14px 14px; display: flex; flex-direction: column; gap: 10px; }
.ek-ortali { align-items: center; text-align: center; }
.ek-ust-yazi { margin: 0; font-size: 12.5px; color: var(--ek-soluk); font-weight: 600; }
.ek-etiket { margin: 2px 0 -2px; font-size: 13px; font-weight: 700; }

.ek-cipler { display: flex; gap: 6px; flex-wrap: nowrap; overflow: hidden; }
.ek-cipler span { flex: none; font-size: 12.5px; font-weight: 700; padding: 7px 12px; border-radius: 999px; background: var(--ek-kart); color: var(--ek-yazi); }
.ek-cipler span.secili { background: var(--ek-yesil); color: #03190d; }

.ek-kart { background: var(--ek-kart); border-radius: 18px; padding: 12px 14px; text-align: left; width: 100%; box-sizing: border-box; }
.ek-kart p { margin: 6px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--ek-soluk); }
.ek-kart p b { color: var(--ek-yazi); }
.ek-sonuc-ust { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.ek-sonuc-ust b { font-size: 18px; letter-spacing: -0.01em; }
.ek-guven { font-size: 11px; font-weight: 800; color: #03190d; background: var(--ek-yesil); padding: 4px 8px; border-radius: 8px; }
.ek-latince { font-size: 13px; color: var(--ek-soluk); }

.ek-dugme { display: block; text-align: center; background: var(--ek-yesil); color: #03190d; font-weight: 800; font-size: 14.5px; padding: 13px; border-radius: 16px; margin-top: auto; }
.ek-dugme.kucuk { display: inline-block; padding: 7px 14px; font-size: 12.5px; border-radius: 11px; margin: 0; }
.ek-dugme.ikincil { background: var(--ek-secili); color: var(--ek-yesil); }

.ek-foto { width: 100%; height: 190px; object-fit: cover; border-radius: 18px; }
.ek-foto.kisa { height: 128px; }

.ek-satir { display: flex; align-items: center; gap: 10px; background: var(--ek-kart); border-radius: 16px; padding: 8px 10px 8px 8px; }
.ek-satir img { width: 46px; height: 46px; border-radius: 12px; object-fit: cover; flex: none; }
.ek-satir div { flex: 1; min-width: 0; display: grid; gap: 2px; text-align: left; }
.ek-satir b { font-size: 14px; }
.ek-satir small, .ek-alt-kart small { font-size: 11.5px; color: var(--ek-soluk); }
.ek-satir.ince { background: var(--ek-zemin); margin-top: 10px; }
.ek-oynat { width: 30px; height: 30px; border-radius: 50%; background: var(--ek-yesil); color: #03190d; display: grid; place-items: center; }
.ek-oynat svg { width: 14px; height: 14px; stroke: none; }
.ek-yeni { font-size: 10.5px; font-weight: 800; color: #2a1400; background: var(--ek-turuncu); padding: 3px 7px; border-radius: 7px; }

/* Harita ekranı */
.ek-harita { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; background: #0d1712; }
.ek-ust-yuzen { position: relative; z-index: 5; padding: 6px 12px 0; display: grid; gap: 8px; }
.ek-arama { display: flex; align-items: center; gap: 8px; background: rgba(23, 33, 27, 0.94); border: 1px solid var(--ek-cizgi); border-radius: 16px; padding: 11px 12px; font-size: 13px; color: var(--ek-soluk); }
.ek-ust-yuzen .ek-cipler span:not(.secili) { background: rgba(23, 33, 27, 0.94); }
.ek-alt-kart { position: absolute; z-index: 5; left: 12px; right: 12px; bottom: 84px; display: flex; align-items: center; gap: 10px; background: rgba(23, 33, 27, 0.96); border: 1px solid var(--ek-cizgi); border-radius: 18px; padding: 8px; }
.ek-alt-kart img { width: 52px; height: 52px; border-radius: 12px; object-fit: cover; }
.ek-alt-kart div { flex: 1; display: grid; gap: 2px; }
.ek-alt-kart b { font-size: 14.5px; }
.ek-rozet { font-size: 11px; font-weight: 800; color: #03190d; background: var(--ek-yesil); padding: 4px 8px; border-radius: 8px; margin-right: 4px; }
.mini-igne { width: 12px; height: 12px; border-radius: 50%; background: var(--ek-yesil); border: 2px solid var(--ek-zemin); box-shadow: 0 0 0 4px rgba(61, 214, 140, 0.22); }
.mini-igne.cicek { background: #f2a3c4; box-shadow: 0 0 0 4px rgba(242, 163, 196, 0.22); }
.mini-igne.gokyuzu { background: #8fb8ff; box-shadow: 0 0 0 4px rgba(143, 184, 255, 0.22); }
.mini-foto { width: 40px; height: 40px; border-radius: 50%; border: 2.5px solid var(--ek-yesil); background-size: cover; background-position: center; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5); }

/* Alt sekme çubuğu (tur.js doldurur) */
.ek-sekmeler { position: absolute; left: 0; right: 0; bottom: 0; z-index: 6; height: 74px; padding: 8px 14px 18px; display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; background: rgba(10, 17, 13, 0.96); border-top: 1px solid var(--ek-cizgi); }
.ek-sekmeler span { display: grid; justify-items: center; gap: 3px; font-size: 10px; font-weight: 700; color: var(--ek-soluk); }
.ek-sekmeler span.secili { color: var(--ek-yesil); }
.ek-sekmeler svg { width: 21px; height: 21px; }
.ek-sekmeler .orta { width: 46px; height: 46px; border-radius: 16px; background: var(--ek-yesil); color: #03190d; display: grid; place-items: center; justify-self: center; }
.ek-sekmeler .orta svg { width: 26px; height: 26px; stroke-width: 2.6; }
.ekran:has(.ek-sekmeler) .ek-icerik { padding-bottom: 84px; }

/* Bu ay */
.ek-buay-kahraman { position: relative; border-radius: 18px; overflow: hidden; height: 150px; }
.ek-buay-kahraman img { width: 100%; height: 100%; object-fit: cover; }
.ek-buay-kahraman div { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 12px 10px; background: linear-gradient(transparent, rgba(0, 0, 0, 0.75)); display: grid; }
.ek-buay-kahraman small { font-size: 11px; font-weight: 800; color: var(--ek-turuncu); text-transform: uppercase; letter-spacing: 0.06em; }
.ek-buay-kahraman b { font-size: 19px; }

/* Ses */
.ek-dalga { display: flex; align-items: center; justify-content: center; gap: 3px; height: 96px; width: 100%; margin-top: 8px; }
.ek-dalga i { width: 4px; border-radius: 3px; background: var(--ek-yesil); opacity: 0.85; }
@media (prefers-reduced-motion: no-preference) {
  .ek-dalga i { animation: dalga 1.4s ease-in-out infinite alternate; }
  @keyframes dalga { to { transform: scaleY(0.45); } }
}
.ek-mik { margin-top: auto; width: 62px; height: 62px; border-radius: 50%; background: var(--ek-turuncu); color: #2a1400; display: grid; place-items: center; box-shadow: 0 0 0 8px rgba(255, 155, 69, 0.16); }
.ek-mik svg { width: 26px; height: 26px; }

/* Paylaş */
.ek-girdi { background: var(--ek-kart); border: 1.5px solid var(--ek-yesil); border-radius: 14px; padding: 11px 12px; font-size: 14.5px; font-weight: 600; }
.imlec { display: inline-block; width: 1.5px; height: 16px; background: var(--ek-yesil); vertical-align: -3px; margin-left: 1px; }
@media (prefers-reduced-motion: no-preference) { .imlec { animation: imlec 1s steps(1) infinite; } @keyframes imlec { 50% { opacity: 0; } } }
.ek-oneriler { background: var(--ek-kart); border-radius: 14px; overflow: hidden; margin-top: -4px; }
.ek-oneriler div { padding: 9px 12px; display: grid; gap: 1px; border-top: 1px solid var(--ek-cizgi); }
.ek-oneriler div:first-child { border-top: 0; background: var(--ek-secili); }
.ek-oneriler b { font-size: 14px; }
.ek-oneriler i { font-size: 11.5px; color: var(--ek-soluk); }
.ek-oneriler .soluk { font-size: 12.5px; font-weight: 700; color: var(--ek-soluk); }

/* Akış */
.ek-akis { gap: 16px; padding: 0 0 84px; }
.ek-gonderi { display: grid; gap: 8px; }
.ek-gonderi img { width: 100%; height: 240px; object-fit: cover; }
.ek-gonderi p { margin: 0; padding: 0 14px; font-size: 13px; line-height: 1.45; color: var(--ek-soluk); }
.ek-gonderi p b { color: var(--ek-yazi); }
.ek-yazar { display: flex; align-items: center; gap: 10px; padding: 0 14px; }
.ek-yazar div { display: grid; }
.ek-yazar b { font-size: 13.5px; }
.ek-yazar small { font-size: 11.5px; color: var(--ek-soluk); }
.ek-avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; color: #03190d; background: linear-gradient(135deg, #8de8b8, #22b06c); flex: none; }
.ek-avatar.b { background: linear-gradient(135deg, #ffd29a, #ff9b45); color: #2a1400; }
.ek-avatar.buyuk { width: 64px; height: 64px; font-size: 20px; }
.ek-eylem { display: flex; gap: 16px; padding: 0 14px; font-size: 13px; font-weight: 700; }
.ek-eylem span { display: flex; align-items: center; gap: 5px; }
.ek-eylem svg { width: 20px; height: 20px; }
.ek-eylem svg.dolu { fill: #ff5a6e; stroke: #ff5a6e; }

/* Etkinlik */
.ek-etkinlik { display: flex; gap: 10px; background: var(--ek-kart); border-radius: 18px; padding: 8px; }
.ek-etkinlik img { width: 84px; height: 108px; border-radius: 13px; object-fit: cover; flex: none; }
.ek-etkinlik > div { flex: 1; display: grid; gap: 3px; align-content: start; padding: 2px 2px 0 0; }
.ek-etkinlik b { font-size: 14.5px; line-height: 1.25; }
.ek-etkinlik small { font-size: 11.5px; color: var(--ek-soluk); }
.ek-tur { font-size: 10px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.ek-tur.yesil { color: var(--ek-yesil); }
.ek-tur.mavi { color: #6fb2ef; }
.ek-katil { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; font-size: 11.5px; color: var(--ek-soluk); font-weight: 600; }

/* Göç */
.ek-sayac { background: var(--ek-kart); border-radius: 18px; padding: 14px; display: grid; gap: 2px; }
.ek-sayac b { font-size: 38px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.ek-sayac small { font-size: 12.5px; color: var(--ek-soluk); }
.ek-canli { justify-self: start; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: #ff6b6b; display: flex; align-items: center; gap: 6px; }
.ek-canli::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #ff6b6b; }
@media (prefers-reduced-motion: no-preference) { .ek-canli::before { animation: nabiz 1.6s ease-in-out infinite; } @keyframes nabiz { 50% { opacity: 0.25; } } }
.ek-cubuklar { display: flex; align-items: flex-end; gap: 4px; height: 56px; padding: 0 2px; }
.ek-cubuklar i { flex: 1; border-radius: 4px 4px 2px 2px; background: var(--ek-secili); }
.ek-cubuklar i:last-child { background: var(--ek-yesil); }

/* Görev */
.ek-gorev { display: grid; gap: 3px; background: linear-gradient(160deg, #1d3a29, var(--ek-kart)); }
.ek-gorev small { font-size: 11.5px; color: var(--ek-soluk); font-weight: 600; }
.ek-gorev b { font-size: 18px; }
.ek-gorev p { margin: 0 0 6px; }
.ek-ilerleme { height: 8px; border-radius: 6px; background: rgba(241, 245, 240, 0.1); overflow: hidden; }
.ek-ilerleme.ince { height: 6px; margin: 5px 0 3px; }
.ek-ilerleme span { display: block; height: 100%; border-radius: inherit; background: var(--ek-yesil); }
.ek-rutbe { display: flex; gap: 12px; align-items: center; background: var(--ek-kart); border-radius: 18px; padding: 12px; }
.ek-rutbe > div { flex: 1; display: grid; }
.ek-rutbe small { font-size: 11.5px; color: var(--ek-soluk); }
.ek-rutbe b { font-size: 15.5px; }
.ek-rutbe-rozet { width: 50px; height: 50px; border-radius: 16px; display: grid; place-items: center; background: linear-gradient(145deg, #e3f6c9, #9ed27f); color: #234012; flex: none; }
.ek-rutbe-rozet svg { width: 26px; height: 26px; }
.ek-rozetler { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ek-rozetler span { font-size: 12px; font-weight: 700; padding: 12px 10px; border-radius: 14px; background: var(--ek-kart); border-left: 4px solid var(--ek-yesil); }
.ek-rozetler .r2 { border-color: #6fb2ef; }
.ek-rozetler .r3 { border-color: var(--ek-turuncu); }
.ek-rozetler .kilitli { opacity: 0.4; border-color: var(--ek-soluk); }

/* Yarışma */
.ek-buyuk-oynat { width: 92px; height: 92px; border-radius: 50%; background: var(--ek-yesil); color: #03190d; display: grid; place-items: center; margin: 22px 0 6px; box-shadow: 0 0 0 12px rgba(61, 214, 140, 0.12), 0 0 0 26px rgba(61, 214, 140, 0.06); }
.ek-buyuk-oynat svg { width: 36px; height: 36px; stroke: none; margin-left: 4px; }
.ek-soru { margin: 18px 0 4px; font-size: 18px; font-weight: 800; letter-spacing: -0.01em; }
.ek-secenekler { width: 100%; display: grid; gap: 8px; }
.ek-secenekler span { display: flex; justify-content: center; align-items: center; gap: 6px; padding: 12px; border-radius: 14px; background: var(--ek-kart); font-weight: 700; font-size: 14px; }
.ek-secenekler .dogru { background: var(--ek-yesil); color: #03190d; }

/* Yaşam listesi */
.ek-yasam-ust { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ek-yasam-ust div { background: var(--ek-kart); border-radius: 16px; padding: 12px; display: grid; }
.ek-yasam-ust b { font-size: 30px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; }
.ek-yasam-ust div:last-child b { color: var(--ek-turuncu); }
.ek-yasam-ust small { font-size: 11.5px; color: var(--ek-soluk); }

/* Profil */
.ek-profil { padding-top: 10px; }
.ek-profil-ust { display: flex; align-items: center; gap: 14px; }
.ek-profil-ust > div { display: grid; gap: 2px; justify-items: start; }
.ek-profil-ust b { font-size: 18px; }
.ek-profil-ust small { font-size: 12px; color: var(--ek-soluk); }
.ek-rutbe-cip { margin-top: 4px; font-size: 11px; font-weight: 800; padding: 4px 9px; border-radius: 8px; background: linear-gradient(135deg, #c5e8ff, #6fb2ef); color: #0c2a44; }
.ek-sayilar { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--ek-kart); border-radius: 16px; padding: 10px 0; text-align: center; }
.ek-sayilar div { display: grid; }
.ek-sayilar b { font-size: 17px; }
.ek-sayilar small { font-size: 11px; color: var(--ek-soluk); }
.ek-izgara { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; margin: 0 -14px; }
.ek-izgara img { width: 100%; aspect-ratio: 1; object-fit: cover; }

/* Gökyüzü */
.ek-gunes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ek-gunes div { background: var(--ek-kart); border-radius: 16px; padding: 12px; display: grid; gap: 2px; }
.ek-gunes small { font-size: 11.5px; color: var(--ek-soluk); font-weight: 600; }
.ek-gunes b { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.ek-gunes .altin b { color: #ffc35a; }
.ek-gunes .mavi b { color: #7fb4ff; }
.ek-ay { display: flex; align-items: center; gap: 12px; background: var(--ek-kart); border-radius: 16px; padding: 10px; }
.ek-ay img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.ek-ay div { display: grid; gap: 2px; }
.ek-ay b { font-size: 14px; }
.ek-ay small { font-size: 11.5px; color: var(--ek-soluk); }
.ek-meteor { display: grid; gap: 4px; background: linear-gradient(160deg, #1b2240, var(--ek-kart)); }
.ek-meteor b { font-size: 15px; }

/* Gözlem yeri */
.ek-yer-ad { font-size: 21px; letter-spacing: -0.02em; }
.ek-simge { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--ek-secili); color: var(--ek-yesil); flex: none; }
.ek-simge.turuncu { background: rgba(255, 155, 69, 0.16); color: var(--ek-turuncu); }
.ek-cipler.sarili { flex-wrap: wrap; }

/* Bildirim (kilit ekranı) */
.ek-kilit { padding-top: 0; }
.ek-kilit-zemin { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.75); }
.ek-kilit-saat { position: relative; text-align: center; margin-top: 74px; display: grid; }
.ek-kilit-saat small { font-size: 14px; font-weight: 600; }
.ek-kilit-saat b { font-size: 72px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.ek-bildirim { position: relative; margin: 26px 12px 0; display: flex; gap: 10px; align-items: flex-start; padding: 12px; border-radius: 20px; background: rgba(30, 30, 30, 0.55); backdrop-filter: blur(16px); }
.ek-bildirim img { width: 38px; height: 38px; border-radius: 9px; flex: none; }
.ek-bildirim div { display: grid; gap: 2px; }
.ek-bildirim small { font-size: 10.5px; color: rgba(255, 255, 255, 0.75); letter-spacing: 0.02em; }
.ek-bildirim b { font-size: 13.5px; }
.ek-bildirim p { margin: 0; font-size: 12.5px; line-height: 1.35; color: rgba(255, 255, 255, 0.9); }

/* Mesaj */
.ek-sohbet { gap: 8px; justify-content: flex-end; }
.balon { margin: 0; max-width: 78%; padding: 9px 12px; border-radius: 18px; font-size: 13.5px; line-height: 1.4; }
.balon.onlar { background: var(--ek-kart); align-self: flex-start; border-bottom-left-radius: 6px; }
.balon.ben { background: var(--ek-yesil); color: #03190d; align-self: flex-end; border-bottom-right-radius: 6px; font-weight: 600; }
.balon-foto { align-self: flex-end; width: 62%; height: 120px; object-fit: cover; border-radius: 16px; }
.ek-yazma { display: flex; align-items: center; gap: 8px; margin: 0 12px 26px; padding: 6px 6px 6px 14px; background: var(--ek-kart); border-radius: 22px; font-size: 13.5px; color: var(--ek-soluk); }
.ek-yazma span { flex: 1; }
.ek-yazma i { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--ek-yesil); color: #03190d; }
.ek-yazma svg { width: 14px; height: 14px; stroke: none; }

/* Haftanın fotoğrafı */
.ek-haftanin { position: relative; border-radius: 20px; overflow: hidden; height: 270px; flex: none; }
.ek-haftanin img { width: 100%; height: 100%; object-fit: cover; }
.ek-haftanin-rozet { position: absolute; top: 10px; left: 10px; display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 10px; background: var(--ek-turuncu); color: #2a1400; font-size: 11.5px; font-weight: 800; }
.ek-haftanin-rozet svg { width: 14px; height: 14px; }
.ek-haftanin > div { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 14px 12px; background: linear-gradient(transparent, rgba(0, 0, 0, 0.75)); display: grid; }
.ek-haftanin b { font-size: 18px; }
.ek-haftanin small { font-size: 12px; color: rgba(255, 255, 255, 0.8); }

/* Galeri */
.ek-galeri { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ek-galeri img { width: 100%; height: 104px; object-fit: cover; border-radius: 14px; }
.ek-galeri img:first-child { grid-column: span 2; height: 140px; }

/* Yıl özeti */
.ek-ozet { flex: 1; margin: 6px 12px 26px; border-radius: 26px; padding: 20px 16px 16px; display: flex; flex-direction: column; gap: 4px; background: linear-gradient(165deg, #1d6b45, #0f3b27 55%, #0a110d); }
.ek-ozet > small { font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #a8f0c8; }
.ek-ozet-buyuk { font-size: 72px; line-height: 1; letter-spacing: -0.04em; margin-top: 6px; }
.ek-ozet > span { font-size: 15px; font-weight: 700; }
.ek-ozet-izgara { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 12px 0 8px; }
.ek-ozet-izgara div { background: rgba(255, 255, 255, 0.08); border-radius: 12px; padding: 8px 10px; display: grid; }
.ek-ozet-izgara b { font-size: 15px; }
.ek-ozet-izgara small { font-size: 10.5px; color: rgba(241, 245, 240, 0.7); }
.ek-ozet img { width: 100%; height: 90px; object-fit: cover; border-radius: 14px; margin-bottom: 8px; }

/* Gerçek ekran görüntüsü: durum çubuğunun altından başlar */
.ekran-goruntu { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }