:root {
  --zemin: #f5f5f7; --yuzey: #ffffff; --metin: #1d1d1f; --ikincil: #6e6e73; --cizgi: rgba(0,0,0,.09);
  --vurgu: #2f9e44; --hap: #ebebf0; --hap-metin: #2f9e44; --golge: 0 8px 28px rgba(0,0,0,.10);
  --cubuk: rgba(250,250,252,.82);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --zemin: #000; --yuzey: #1c1c1e; --metin: #f5f5f7; --ikincil: #98989d; --cizgi: rgba(255,255,255,.12);
    --vurgu: #5fd068; --hap: #2c2c2e; --hap-metin: #6fe07a; --golge: 0 8px 28px rgba(0,0,0,.5);
    --cubuk: rgba(22,22,24,.82); color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --zemin: #000; --yuzey: #1c1c1e; --metin: #f5f5f7; --ikincil: #98989d; --cizgi: rgba(255,255,255,.12);
  --vurgu: #5fd068; --hap: #2c2c2e; --hap-metin: #6fe07a; --golge: 0 8px 28px rgba(0,0,0,.5);
  --cubuk: rgba(22,22,24,.82); color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--zemin); color: var(--metin);
  font: 16px/1.4 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased; padding-bottom: calc(84px + env(safe-area-inset-bottom));
}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
img { display: block; }
:focus-visible { outline: 3px solid var(--vurgu); outline-offset: 2px; border-radius: 8px; }

/* Üst çubuk */
.ust { position: sticky; top: 0; z-index: 20; background: var(--cubuk); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--cizgi); }
.ust-ic { max-width: 1080px; margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; gap: 24px; }
.marka { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 19px; letter-spacing: -.02em; }
.marka em { font-style: normal; color: var(--vurgu); }
.ust-nav { display: none; gap: 4px; margin-left: auto; }
.ust-nav button { padding: 8px 14px; border-radius: 999px; font-size: 15px; font-weight: 500; color: var(--ikincil); min-height: 40px; }
.ust-nav button[aria-current="page"] { background: var(--hap); color: var(--metin); }
@media (hover: hover) { .ust-nav button:hover { color: var(--metin); } }

.kap { max-width: 1080px; margin: 0 auto; padding: 18px 16px 0; }
.tarih { margin: 4px 0 0; font-size: 13px; font-weight: 600; color: var(--ikincil); letter-spacing: .02em; }
h1 { margin: 2px 0 18px; font-size: 34px; font-weight: 800; letter-spacing: -.03em; }

/* Öne çıkan kartlar */
.one-kay { display: grid; grid-auto-flow: column; grid-auto-columns: min(88%, 420px); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; margin: 0 -16px; padding-inline: 16px; scrollbar-width: none; }
.one-kay::-webkit-scrollbar, .raf-kay::-webkit-scrollbar, .vitrin-kay::-webkit-scrollbar { display: none; }
.one { scroll-snap-align: start; border-radius: 22px; overflow: hidden; background: var(--k); color: #fff; box-shadow: var(--golge); display: flex; flex-direction: column; }
.one-ac { position: relative; display: block; aspect-ratio: 4 / 4.4; text-align: left; overflow: hidden; }
.one-gorsel { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .5s ease; }
.one-ac::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.88) 0%, rgba(0,0,0,.55) 30%, rgba(0,0,0,0) 50%, rgba(0,0,0,0) 62%, var(--k) 100%); }
.one-ust, .one-baslik { position: absolute; left: 18px; right: 18px; z-index: 1; }
.one-ust { top: 16px; font-size: 13px; font-weight: 700; letter-spacing: .06em; opacity: .85; }
.one-baslik { top: 36px; font-size: 28px; font-weight: 800; line-height: 1.08; letter-spacing: -.025em; }
.one-alt { display: flex; align-items: center; gap: 12px; padding: 12px 16px 16px; }
.one-alt small { color: rgba(255,255,255,.72); }
@media (hover: hover) { .one-ac:hover .one-gorsel { transform: scale(1.03); } }

/* Raflar */
.raf { margin-top: 30px; border-top: 1px solid var(--cizgi); padding-top: 14px; }
.raf-bas h2 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.raf-bas p { margin: 2px 0 0; color: var(--ikincil); font-size: 15px; }
.raf-kay { display: grid; grid-auto-flow: column; grid-auto-columns: min(86%, 340px); gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 10px -16px 0; padding-inline: 16px; }
.sutun { list-style: none; margin: 0; padding: 0; scroll-snap-align: start; }
.liste { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 0 28px; }
@media (min-width: 760px) { .liste { grid-template-columns: 1fr 1fr; } }

.satir { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--cizgi); min-height: 82px; }
.sutun .satir:last-child { border-bottom: 0; }
.sira { width: 18px; font-weight: 700; font-size: 17px; color: var(--metin); flex: none; }
.satir-ac { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; text-align: left; }
.satir-metin { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.satir-metin b { font-size: 16px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.satir-metin small { font-size: 13px; color: var(--ikincil); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ikon { width: 64px; height: 64px; border-radius: 22%; flex: none; box-shadow: 0 0 0 1px var(--cizgi); object-fit: cover; background: var(--hap); }
.ikon.kucuk { width: 44px; height: 44px; box-shadow: none; }
.ikon.buyuk { width: 118px; height: 118px; }

.hap { flex: none; min-width: 74px; min-height: 32px; padding: 6px 16px; border-radius: 999px; background: var(--hap); color: var(--hap-metin); font-size: 14px; font-weight: 700; text-align: center; letter-spacing: .02em; display: inline-flex; align-items: center; justify-content: center; position: relative; }
.hap::before { content: ""; position: absolute; inset: -6px -2px; } /* 44px dokunma alanı */
.hap.acik { background: rgba(255,255,255,.22); color: #fff; }
@media (hover: hover) { .hap:hover { filter: brightness(1.08); } }

/* Ekran vitrini */
.vitrin-kay { display: grid; grid-auto-flow: column; grid-auto-columns: 168px; gap: 14px; overflow-x: auto; margin: 12px -16px 0; padding: 0 16px 4px; scroll-snap-type: x mandatory; }
.vitrin { scroll-snap-align: start; text-align: left; }
.vitrin img { width: 168px; aspect-ratio: 1 / 2; object-fit: cover; object-position: top; border-radius: 18px; box-shadow: 0 0 0 1px var(--cizgi); background: var(--hap); }
.vitrin span { display: block; margin-top: 7px; font-size: 14px; font-weight: 600; }

/* Arama */
.ara-kutu input { width: 100%; height: 44px; border-radius: 12px; border: 0; padding: 0 14px; font: inherit; font-size: 17px; background: var(--hap); color: var(--metin); }
.bos { padding: 30px 0; color: var(--ikincil); text-align: center; }

/* Ayrıntı sayfası */
dialog#detay { width: min(640px, 100%); max-height: 100dvh; margin: auto auto 0; padding: 0; border: 0; border-radius: 22px 22px 0 0; background: var(--yuzey); color: var(--metin); overflow-y: auto; }
@media (min-width: 700px) { dialog#detay { margin: auto; border-radius: 22px; max-height: 90dvh; } }
dialog#detay::backdrop { background: rgba(0,0,0,.45); backdrop-filter: blur(4px); }
dialog#detay[open] { animation: yukari .28s cubic-bezier(.2,.8,.2,1); }
@keyframes yukari { from { transform: translateY(40px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { dialog#detay[open] { animation: none; } .one-gorsel { transition: none; } }
#detay-govde { padding: 22px 20px 28px; }
.kapat { position: sticky; top: 10px; float: right; margin: 10px 10px 0 0; width: 44px; height: 44px; border-radius: 50%; background: var(--hap); color: var(--ikincil); font-size: 17px; z-index: 2; }
.d-bas { display: flex; gap: 16px; align-items: flex-start; }
.d-bas h3 { margin: 4px 0 2px; font-size: 24px; letter-spacing: -.02em; }
.d-bas p { margin: 0 0 14px; color: var(--ikincil); }
.buyuk-hap { background: var(--vurgu) !important; color: #fff !important; min-width: 96px; min-height: 34px; font-size: 15px; }
:root .buyuk-hap { color: #fff; }
.d-bilgi { display: grid; grid-template-columns: repeat(4, 1fr); margin: 20px 0 0; padding: 12px 0; border-block: 1px solid var(--cizgi); }
.d-bilgi div { text-align: center; padding: 0 4px; border-left: 1px solid var(--cizgi); }
.d-bilgi div:first-child { border-left: 0; }
.d-bilgi dt { font-size: 10.5px; font-weight: 700; color: var(--ikincil); letter-spacing: .05em; }
.d-bilgi dd { margin: 4px 0 0; font-size: 15px; font-weight: 700; color: var(--ikincil); }
.d-ekran { width: min(260px, 70%); margin: 20px 0 0; border-radius: 20px; box-shadow: 0 0 0 1px var(--cizgi); }
.d-acik { margin: 18px 0 0; font-size: 16px; line-height: 1.5; }
.not { margin: 12px 0 0; font-size: 14px; color: var(--ikincil); }

/* Alt sekme çubuğu (telefon) */
.sekme-cubugu { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: grid; grid-template-columns: repeat(4, 1fr); background: var(--cubuk); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-top: 1px solid var(--cizgi); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); }
.sekme-cubugu button { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 11px; font-weight: 500; color: var(--ikincil); min-height: 48px; justify-content: center; }
.sekme-cubugu svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sekme-cubugu button[aria-current="page"] { color: var(--vurgu); }

@media (min-width: 760px) {
  .ust-nav { display: flex; }
  .sekme-cubugu { display: none; }
  body { padding-bottom: 0; }
  h1 { font-size: 40px; }
  .one-kay { grid-auto-columns: calc((100% - 32px) / 3); margin: 0; padding-inline: 0; }
  .raf-kay { grid-auto-columns: calc((100% - 36px) / 3); margin-inline: 0; padding-inline: 0; }
  .vitrin-kay { margin-inline: 0; padding-inline: 0; grid-auto-columns: 180px; }
  .vitrin img { width: 180px; }
}
.dip { margin: 44px 0 28px; padding-top: 16px; border-top: 1px solid var(--cizgi); font-size: 13px; color: var(--ikincil); }

/* Dil seçici */
.dil { display: flex; gap: 2px; margin-left: auto; background: var(--hap); border-radius: 999px; padding: 3px; }
.ust-nav + .dil { margin-left: 8px; }
.dil button { min-width: 40px; min-height: 34px; padding: 0 10px; border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--ikincil); letter-spacing: .03em; }
.dil button[aria-pressed="true"] { background: var(--yuzey); color: var(--metin); box-shadow: 0 1px 3px rgba(0,0,0,.15); }
@media (hover: hover) { .dil button:hover { color: var(--metin); } }