/* Dindar — destek, gizlilik ve koşullar sayfaları.
   Renkler uygulamanın paletinden (lib/theme/app_colors.dart): gündüz krem +
   zümrüt + altın, gece kararmış zümrüt. Yazı tipleri uygulamanınkiler
   (Amiri, Noto Serif), yalnızca kullanılan harflere indirilip yerel olarak
   sunuluyor — sayfa dışarıya hiçbir istek atmıyor. */

@font-face {
  font-family: "Amiri";
  src: url("yazi/amiri.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Amiri";
  src: url("yazi/amiri-bold.woff2") format("woff2");
  font-weight: 600 700;
  font-display: swap;
}
@font-face {
  font-family: "Noto Serif";
  src: url("yazi/notoserif.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Noto Serif";
  src: url("yazi/notoserif-semibold.woff2") format("woff2");
  font-weight: 600 700;
  font-display: swap;
}

:root {
  --zemin: #f5f0e1;
  --zemin-2: #efe8d4;
  --kart: #fffdf7;
  --yazi: #1b2a23;
  --ikincil: #46564e;
  --soluk: #7a857e;
  --yesil: #0d4f3c;
  --yesil-derin: #072a20;
  --yesil-yazi: #0d4f3c;
  --altin: #c9a961;
  --altin-parlak: #d4b876;
  --altin-yazi: #8a6d2c;
  --krem: #faf6e9;
  --cizgi: #e2d9c2;
  --golge: 0 1px 2px rgba(7, 42, 32, .06), 0 8px 24px rgba(7, 42, 32, .07);
  --serif: "Noto Serif", Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --zemin: #0b1512;
    --zemin-2: #0f1c17;
    --kart: #13221c;
    --yazi: #f1ece0;
    --ikincil: #c6c0b1;
    --soluk: #8e9a93;
    --yesil: #0f3f31;
    --yesil-derin: #0b1512;
    --yesil-yazi: #8fc3a8;
    --altin: #cfaf68;
    --altin-parlak: #dcc07f;
    --altin-yazi: #dcc07f;
    --cizgi: #22362d;
    --golge: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 30px rgba(0, 0, 0, .35);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--zemin);
  color: var(--yazi);
  font: 16px/1.7 var(--sans);
  overflow-x: hidden;
}

a { color: var(--yesil-yazi); text-underline-offset: 3px; }
a:hover { color: var(--altin-yazi); }

/* ── Geometrik desen (sekiz köşeli yıldız, girih) ─────────────────── */

.desen {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .16;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='%23d4b876' stroke-width='1'%3E%3Cpath d='M23 23h34v34H23z'/%3E%3Cpath d='M40 16l24 24-24 24-24-24z'/%3E%3Cpath d='M40 0v16M40 64v16M0 40h16M64 40h16'/%3E%3Cpath d='M0 8l8-8M72 0l8 8M80 72l-8 8M8 80l-8-8'/%3E%3Ccircle cx='40' cy='40' r='6'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 80px 80px;
  animation: desen-kay 90s linear infinite;
  -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 30%, transparent 80%);
          mask-image: radial-gradient(ellipse at 50% 40%, #000 30%, transparent 80%);
}

@keyframes desen-kay {
  to { background-position: 80px 160px; }
}

/* ── Üst bölüm ────────────────────────────────────────────────────── */

.ust {
  position: relative;
  overflow: hidden;
  color: var(--krem);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(212, 184, 118, .18), transparent 60%),
    linear-gradient(180deg, var(--yesil) 0%, var(--yesil-derin) 100%);
  border-bottom: 1px solid rgba(201, 169, 97, .5);
  text-align: center;
  padding: 28px 16px 0;
}

.ust::after {
  /* alt kenarda altın süs çizgisi */
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--altin) 20%, var(--altin-parlak) 50%, var(--altin) 80%, transparent);
}

.ust .ic { position: relative; max-width: 760px; margin: 0 auto; }

.marka {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--krem);
  text-decoration: none;
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: .5px;
}
.marka:hover { color: var(--altin-parlak); }
.marka img { width: 36px; height: 36px; border-radius: 9px; box-shadow: 0 0 0 1px rgba(212, 184, 118, .4); }

.ust-cubuk {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  max-width: 760px;
  margin: 0 auto;
  position: relative;
}

.dil a {
  color: var(--krem);
  font-size: 14px;
  text-decoration: none;
  border: 1px solid rgba(212, 184, 118, .45);
  border-radius: 999px;
  padding: 4px 12px;
  transition: background .3s, color .3s;
}
.dil a:hover { background: rgba(212, 184, 118, .15); color: var(--altin-parlak); }
.dil a[aria-current="page"] { background: rgba(212, 184, 118, .22); color: var(--altin-parlak); border-color: var(--altin); }

/* Ana sayfaların dil seçicisi — mihrabın üstünde, ortada */
.dil-ana {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
}
.dil-ana a { font-size: 13px; padding: 3px 12px; }
.dil-ana a[lang="ar"] { font-family: "Geeza Pro", "Noto Sans Arabic", "Segoe UI", Tahoma, sans-serif; }

/* Mihrap kemeri — altın çizgi kendini çiziyor */
.mihrap {
  position: relative;
  width: min(340px, 86vw);
  margin: 26px auto 0;
  padding: 92px 24px 34px;
}
.mihrap svg.kemer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.kemer path {
  fill: none;
  stroke: var(--altin);
  stroke-width: 1.6;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: ciz 2.6s cubic-bezier(.6, .1, .3, 1) .2s forwards;
}
.kemer path.ic-hat { stroke-width: .8; opacity: .55; animation-delay: .7s; }
@keyframes ciz { to { stroke-dashoffset: 0; } }

.mihrap .simge {
  width: 76px;
  height: 76px;
  border-radius: 18px;
  box-shadow: 0 0 0 1px rgba(212, 184, 118, .5), 0 10px 30px rgba(0, 0, 0, .35);
  opacity: 0;
  animation: belir 1s ease 1.2s forwards;
}

.besmele {
  font-family: "Amiri", "Traditional Arabic", serif;
  direction: rtl;
  font-size: clamp(26px, 7vw, 34px);
  line-height: 1.6;
  color: var(--altin-parlak);
  margin: 14px 0 4px;
  opacity: 0;
  animation: belir 1.4s ease 1.6s forwards;
  text-shadow: 0 0 24px rgba(212, 184, 118, .35);
}

.ust h1 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(28px, 7vw, 38px);
  margin: 4px 0 6px;
  letter-spacing: .5px;
  opacity: 0;
  animation: yuksel 1s ease 2s forwards;
}
.ust .alt {
  margin: 0 auto;
  max-width: 30ch;
  color: rgba(250, 246, 233, .82);
  opacity: 0;
  animation: yuksel 1s ease 2.25s forwards;
}

.yildiz {
  display: block;
  color: var(--altin-parlak);
  font-size: 18px;
  line-height: 1;
}

@keyframes belir { to { opacity: 1; } }
@keyframes yuksel {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
@keyframes parilda {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .55; transform: scale(.85); }
}

/* Kandiller — iki yanda yavaşça salınıyor */
.kandil {
  position: absolute;
  top: 0;
  width: 34px;
  transform-origin: 50% 0;
  animation: salin 6s ease-in-out infinite;
  opacity: .9;
}
.kandil.sol { left: 7%; }
.kandil.sag { right: 7%; animation-delay: -3s; animation-duration: 7s; }
.kandil .isik { animation: yan 3s ease-in-out infinite; }
@keyframes salin {
  0%, 100% { transform: rotate(3deg); }
  50% { transform: rotate(-3deg); }
}
@keyframes yan {
  0%, 100% { opacity: .9; }
  50% { opacity: .5; }
}
@media (max-width: 560px) { .kandil { width: 26px; } .kandil.sol { left: 3%; } .kandil.sag { right: 3%; } }

/* ── İçerik ───────────────────────────────────────────────────────── */

main { max-width: 760px; margin: 0 auto; padding: 8px 16px 40px; }

section { margin-top: 44px; }

h2 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.35;
  margin: 0 0 12px;
  color: var(--yazi);
  text-align: center;
}

/* Başlık altında süs: altın çizgi — yıldız — altın çizgi */
h2::after {
  content: "";
  display: block;
  width: 140px;
  height: 12px;
  margin: 10px auto 0;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M6 0l1.6 4.4L12 6l-4.4 1.6L6 12 4.4 7.6 0 6l4.4-1.6z' fill='%23c9a961'/%3E%3C/svg%3E") center / 12px no-repeat,
    linear-gradient(90deg, transparent, var(--altin)) left center / 56px 1px no-repeat,
    linear-gradient(270deg, transparent, var(--altin)) right center / 56px 1px no-repeat;
}

h3 {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 600;
  margin: 22px 0 4px;
  color: var(--yesil-yazi);
}

p, li { color: var(--ikincil); }
.ortali { text-align: center; max-width: 56ch; margin-left: auto; margin-right: auto; }

ul { padding-left: 22px; }
li { margin-bottom: 6px; }
li::marker { content: "✦  "; color: var(--altin); font-size: .8em; }

/* Ayet kartı */
.ayet {
  position: relative;
  margin: 36px auto 0;
  padding: 30px 22px 24px;
  text-align: center;
  background: var(--kart);
  border: 1px solid var(--cizgi);
  border-radius: 18px;
  box-shadow: var(--golge);
  overflow: hidden;
}
.ayet::before, .ayet::after {
  content: "۞";
  position: absolute;
  top: 12px;
  color: var(--altin);
  opacity: .5;
  font-size: 18px;
}
.ayet::before { left: 16px; }
.ayet::after { right: 16px; }
.ayet .arapca {
  font-family: "Amiri", "Traditional Arabic", serif;
  direction: rtl;
  font-size: clamp(24px, 6vw, 30px);
  line-height: 1.9;
  color: var(--yazi);
  margin: 0 0 12px;
}
.ayet .meal { font-family: var(--serif); font-style: italic; font-size: 17px; color: var(--ikincil); margin: 0 0 8px; }
.ayet .kaynak { font-size: 13px; letter-spacing: .5px; color: var(--altin-yazi); margin: 0; }

/* Söz şeridi — hesap yok, reklam yok, veriler telefonda */
.sozler {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 18px;
}
.sozler div {
  text-align: center;
  padding: 16px 10px;
  border-radius: 14px;
  background: var(--zemin-2);
  border: 1px solid var(--cizgi);
  font-size: 14px;
  color: var(--ikincil);
}
.sozler strong { display: block; font-family: var(--serif); font-size: 16px; color: var(--yesil-yazi); margin-bottom: 2px; }
@media (max-width: 520px) { .sozler { grid-template-columns: 1fr; } }

/* Özellik ızgarası */
.ozellikler {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 18px;
}
.ozellik {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px;
  background: var(--kart);
  border: 1px solid var(--cizgi);
  border-radius: 14px;
  box-shadow: var(--golge);
  transition: transform .35s ease, border-color .35s ease;
}
.ozellik:hover { transform: translateY(-3px); border-color: var(--altin); }
.ozellik svg {
  flex: none;
  width: 40px;
  height: 40px;
  padding: 8px;
  border-radius: 12px;
  background: var(--yesil);
  stroke: var(--altin-parlak);
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ozellik b { display: block; font-family: var(--serif); font-weight: 600; color: var(--yazi); line-height: 1.35; margin-bottom: 2px; }
.ozellik span { font-size: 14px; color: var(--ikincil); line-height: 1.5; }
@media (max-width: 560px) { .ozellikler { grid-template-columns: 1fr; } }

/* Sık sorulanlar */
details {
  background: var(--kart);
  border: 1px solid var(--cizgi);
  border-radius: 12px;
  margin-bottom: 10px;
  overflow: hidden;
}
summary {
  cursor: pointer;
  list-style: none;
  padding: 14px 44px 14px 16px;
  font-family: var(--serif);
  font-weight: 600;
  color: var(--yazi);
  position: relative;
}
summary::-webkit-details-marker { display: none; }
summary::after {
  content: "+";
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--altin);
  font-size: 22px;
  font-family: var(--sans);
  transition: transform .3s ease;
}
details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
details p { margin: 0; padding: 0 16px 16px; animation: yuksel .4s ease; }

/* Belge kartları */
.kartlar { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 16px; }
.kartlar a {
  position: relative;
  display: block;
  background: var(--kart);
  border: 1px solid var(--cizgi);
  border-radius: 14px;
  padding: 16px 40px 16px 18px;
  text-decoration: none;
  color: var(--yazi);
  font-family: var(--serif);
  font-weight: 600;
  box-shadow: var(--golge);
  transition: transform .35s ease, border-color .35s ease;
}
.kartlar a::after {
  content: "→";
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--altin);
  font-family: var(--sans);
  transition: right .35s ease;
}
.kartlar a:hover { transform: translateY(-3px); border-color: var(--altin); }
.kartlar a:hover::after { right: 12px; }
.kartlar a span { display: block; font-family: var(--sans); font-weight: 400; color: var(--ikincil); font-size: 14px; }
@media (max-width: 520px) { .kartlar { grid-template-columns: 1fr; } }

.iletisim {
  text-align: center;
  margin-top: 18px;
  padding: 22px 16px;
  border-radius: 16px;
  background:
    linear-gradient(180deg, var(--yesil), var(--yesil-derin));
  color: var(--krem);
  position: relative;
  overflow: hidden;
}
.iletisim p { color: rgba(250, 246, 233, .85); margin: 0 0 12px; position: relative; }
.dugme {
  position: relative;
  display: inline-block;
  padding: 10px 22px;
  border-radius: 999px;
  background: var(--altin);
  color: #072a20;
  font-weight: 600;
  text-decoration: none;
  transition: transform .3s ease, box-shadow .3s ease;
}
.dugme:hover { color: #072a20; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(201, 169, 97, .35); }

/* ══ Yasal sayfalar (gizlilik, koşullar) ══════════════════════════════
   tool/site_uret.dart üretiyor. Masaüstünde iki sütun: yapışkan
   içindekiler + okuma sütunu. Telefonda içindekiler üstte açılır menü. */

body.yasal { --okuma: 68ch; }

/* Okuma ilerlemesi */
.ilerleme {
  position: fixed;
  inset: 0 0 auto 0;
  height: 3px;
  z-index: 30;
  background: transparent;
}
.ilerleme span {
  display: block;
  height: 100%;
  width: 100%;
  transform-origin: 0 50%;
  transform: scaleX(var(--ilerleme, 0));
  background: linear-gradient(90deg, var(--altin), var(--altin-parlak));
  box-shadow: 0 0 8px rgba(212, 184, 118, .6);
}

/* Üst bölüm */
.yasal-ust { padding: 22px 16px 0; text-align: left; }
.yasal-ust::after { display: none; }
.yasal-ust { border-bottom: 0; }
.yasal-baslik {
  position: relative;
  max-width: 1080px;
  margin: 0 auto;
  padding: 44px 0 64px;
}
.yasal-baslik > * { opacity: 0; animation: yuksel .9s ease forwards; }
.yasal-baslik > :nth-child(2) { animation-delay: .12s; }
.yasal-baslik > :nth-child(3) { animation-delay: .24s; }
.iz { font-size: 13px; letter-spacing: .4px; color: rgba(250, 246, 233, .7); }
.iz a { color: var(--altin-parlak); text-decoration: none; }
.iz span { margin: 0 8px; opacity: .6; }
.yasal-baslik h1 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(32px, 6vw, 48px);
  line-height: 1.15;
  letter-spacing: -.3px;
  margin: 12px 0 14px;
  color: var(--krem);
}
.kunye { display: flex; flex-wrap: wrap; gap: 6px 10px; margin: 0; font-size: 14px; color: rgba(250, 246, 233, .78); }
.kunye span:first-child {
  color: var(--altin-parlak);
  border: 1px solid rgba(212, 184, 118, .4);
  border-radius: 999px;
  padding: 1px 10px;
}
.ust-cubuk { max-width: 1080px; }

/* Alt kenarda ortası sivri kemer — mihrabın imzası */
.kemer-alt {
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 46px;
}
.kemer-alt .dolgu { fill: var(--zemin); }
.kemer-alt .hat {
  fill: none;
  stroke: var(--altin);
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
  opacity: 0;
  animation: belir 1.2s ease .3s forwards;
}

/* Düzen */
.duzen {
  max-width: 1080px;
  margin: 0 auto;
  padding: 24px 16px 0;
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}

/* Yan içindekiler */
.yan { position: sticky; top: 24px; }
.yan-baslik {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--soluk);
  margin: 0 0 10px;
}
.icindekiler { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--cizgi); }
.icindekiler li { margin: 0; }
.icindekiler li::marker { content: none; }
.icindekiler a {
  position: relative;
  display: flex;
  gap: 10px;
  padding: 7px 0 7px 16px;
  margin-left: -1px;
  border-left: 2px solid transparent;
  color: var(--ikincil);
  text-decoration: none;
  font-size: 14.5px;
  line-height: 1.4;
  transition: color .25s, border-color .25s, background .25s;
}
.icindekiler a .no { color: var(--soluk); font-variant-numeric: tabular-nums; min-width: 1.2em; }
.icindekiler a:hover { color: var(--yazi); }
.icindekiler a.etkin { color: var(--yesil-yazi); border-left-color: var(--altin); font-weight: 600; }
.icindekiler a.etkin .no { color: var(--altin-yazi); }
.yan-alt {
  display: grid;
  gap: 4px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--cizgi);
}
.yan-alt a, .yan-alt button {
  font: inherit;
  font-size: 14px;
  color: var(--ikincil);
  text-decoration: none;
  background: none;
  border: 0;
  padding: 4px 0;
  text-align: left;
  cursor: pointer;
}
.yan-alt a:hover, .yan-alt button:hover { color: var(--altin-yazi); }

/* Telefonda içindekiler */
.mobil-icindekiler { display: none; }

/* Okuma sütunu */
.metin { max-width: var(--okuma); min-width: 0; }
.metin p, .metin li { font-size: 16.5px; line-height: 1.75; }
.metin p { margin: 0 0 14px; }
.metin p strong { color: var(--yazi); font-weight: 600; }
.giris p { font-size: 18px; line-height: 1.7; color: var(--yazi); }

/* Kısaca */
.kisaca {
  margin: 28px 0 8px;
  padding: 22px 22px 16px;
  border-radius: 18px;
  background: var(--kart);
  border: 1px solid var(--cizgi);
  box-shadow: var(--golge);
  position: relative;
  overflow: hidden;
}
.kisaca::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--yesil), var(--altin), var(--yesil));
}
.kisaca h2 {
  font-size: 13px;
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--altin-yazi);
  text-align: left;
  margin: 0 0 14px;
}
.kisaca h2::after { display: none; }
.kisaca ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px 22px; }
.metin .kisaca li { display: flex; gap: 12px; align-items: flex-start; margin: 0; padding-left: 0; }
.metin .kisaca li::before { display: none; }
.kisaca li::marker { content: none; }
.kisaca svg {
  flex: none;
  width: 38px;
  height: 38px;
  padding: 8px;
  border-radius: 11px;
  background: var(--yesil);
  stroke: var(--altin-parlak);
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.kisaca b { display: block; font-family: var(--serif); font-weight: 600; color: var(--yazi); font-size: 15.5px; line-height: 1.35; }
.kisaca li span { display: block; font-size: 14px; line-height: 1.5; color: var(--ikincil); margin-top: 2px; }
.kisaca .not { font-size: 13px; color: var(--soluk); margin: 16px 0 0; padding-top: 12px; border-top: 1px dashed var(--cizgi); }

/* Bölümler */
.bolum { margin-top: 0; padding: 34px 0 6px; border-top: 1px solid var(--cizgi); scroll-margin-top: 20px; }
.kisaca + .bolum { border-top: 0; }
.bolum h2 {
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
  font-size: clamp(21px, 3.4vw, 25px);
  margin: 0 0 16px;
}
.bolum h2::after { display: none; }
.madalya {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 600;
  color: var(--altin-yazi);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='%23c9a961' stroke-width='1.2'%3E%3Cpath d='M9 9h22v22H9z'/%3E%3Cpath d='M20 4.4L35.6 20 20 35.6 4.4 20z'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .6s ease;
}
.bolum:hover .madalya { transform: rotate(45deg); }
.bolum:hover .madalya { color: var(--altin-yazi); }
.bolum h3 { font-size: 17.5px; margin: 24px 0 8px; }

.metin ul { padding-left: 0; list-style: none; margin: 4px 0 16px; }
.metin ul li { position: relative; padding-left: 26px; margin-bottom: 8px; }
.metin ul li::marker { content: none; }
.metin ul li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .62em;
  width: 10px;
  height: 10px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 0l1.6 4.4L12 6l-4.4 1.6L6 12 4.4 7.6 0 6l4.4-1.6z' fill='%23c9a961'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Tablo (satır kartları) */
.tablo {
  margin: 8px 0 18px;
  border: 1px solid var(--cizgi);
  border-radius: 14px;
  overflow: hidden;
  background: var(--kart);
}
.satir {
  display: grid;
  grid-template-columns: minmax(150px, 34%) 1fr;
  border-bottom: 1px solid var(--cizgi);
  transition: background .25s;
}
.satir:last-child { border-bottom: 0; }
.satir:hover { background: var(--zemin-2); }
.satir .etiket { padding: 12px 16px; font-weight: 600; color: var(--yazi); font-size: 15px; background: color-mix(in srgb, var(--zemin-2) 60%, transparent); }
.satir .deger { padding: 12px 16px; color: var(--ikincil); font-size: 15px; line-height: 1.55; }
.satir code {
  display: inline-block;
  font: 600 13px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--yesil-yazi);
  background: var(--zemin-2);
  border: 1px solid var(--cizgi);
  border-radius: 6px;
  padding: 1px 7px;
  margin: 0 0 4px;
}
.satir .deger span { display: block; }

/* Soru kartı */
.soru {
  position: relative;
  overflow: hidden;
  margin: 40px 0 0;
  padding: 28px 24px;
  border-radius: 18px;
  text-align: center;
  color: var(--krem);
  background: linear-gradient(160deg, var(--yesil), var(--yesil-derin));
  box-shadow: var(--golge);
}
.soru .desen { opacity: .12; }
.soru p { position: relative; color: rgba(250, 246, 233, .85); margin: 0 0 14px; }
.soru .soru-baslik { font-family: var(--serif); font-size: 22px; color: var(--krem); margin-bottom: 6px; }

/* Başa dön */
.yukari {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 20;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--yesil);
  color: var(--altin-parlak);
  border: 1px solid rgba(212, 184, 118, .5);
  text-decoration: none;
  font-size: 18px;
  box-shadow: var(--golge);
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity .3s, transform .3s;
}
.yukari.gorunur { opacity: 1; transform: none; pointer-events: auto; }
.yukari:hover { color: var(--krem); }

/* Tablet ve telefon */
@media (max-width: 900px) {
  .duzen { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 8px; }
  .yan { display: none; }
  .metin { max-width: none; }
  .yasal-baslik { padding: 30px 0 54px; }

  .mobil-icindekiler {
    display: block;
    margin: 0;
    border: 0;
    border-radius: 0;
    overflow: visible;
    position: sticky;
    top: 0;
    z-index: 15;
    background: color-mix(in srgb, var(--zemin) 92%, transparent);
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--cizgi);
  }
  .mobil-icindekiler summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 44px 12px 16px;
    position: relative;
    font-size: 14px;
  }
  .mobil-icindekiler summary::-webkit-details-marker { display: none; }
  .mobil-icindekiler summary::after {
    content: "";
    position: absolute;
    right: 18px;
    top: 50%;
    width: 8px;
    height: 8px;
    border-right: 1.5px solid var(--altin);
    border-bottom: 1.5px solid var(--altin);
    transform: translateY(-70%) rotate(45deg);
    transition: transform .3s;
  }
  .mobil-icindekiler[open] summary::after { transform: translateY(-30%) rotate(225deg); }
  .mobil-icindekiler .etiket { font-weight: 600; color: var(--yazi); }
  .mobil-icindekiler .simdiki { color: var(--altin-yazi); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mobil-icindekiler ol { list-style: none; margin: 0; padding: 4px 16px 14px; max-height: 60vh; overflow: auto; }
  .mobil-icindekiler li::marker { content: none; }
  .mobil-icindekiler a { display: flex; gap: 10px; padding: 9px 0; color: var(--ikincil); text-decoration: none; border-bottom: 1px solid var(--cizgi); }
  .mobil-icindekiler li:last-child a { border-bottom: 0; }
  .mobil-icindekiler a .no { color: var(--altin-yazi); min-width: 1.2em; }
  .mobil-icindekiler a.etkin { color: var(--yesil-yazi); font-weight: 600; }
  .bolum { scroll-margin-top: 56px; }
}

@media (max-width: 560px) {
  .kisaca { padding: 20px 16px 14px; }
  .kisaca ul { grid-template-columns: 1fr; }
  .satir { grid-template-columns: 1fr; }
  .satir .etiket { padding-bottom: 2px; background: none; }
  .satir .deger { padding-top: 2px; }
  .madalya { width: 34px; height: 34px; font-size: 14px; }
  .metin p, .metin li { font-size: 16px; }
  .giris p { font-size: 17px; }
}

/* Yazdırma: yalnızca metin */
@media print {
  .ilerleme, .ust .desen, .ust-cubuk, .kemer-alt, .yan, .mobil-icindekiler, .soru, .yukari, footer nav, footer .dua { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .ust { background: none; color: #000; border: 0; padding: 0; }
  .yasal-baslik { padding: 0 0 12pt; }
  .yasal-baslik > * { opacity: 1 !important; animation: none !important; }
  .yasal-baslik h1, .iz, .kunye { color: #000; }
  .duzen { display: block; padding: 0; }
  .metin { max-width: none; }
  .kisaca, .tablo { box-shadow: none; break-inside: avoid; }
  .bolum { break-inside: avoid-page; }
  a { color: #000; }
  .js .belir { opacity: 1 !important; transform: none !important; }
}

/* ── Alt bilgi ────────────────────────────────────────────────────── */

footer {
  text-align: center;
  padding: 28px 16px 40px;
  color: var(--soluk);
  font-size: 14px;
}
footer .dua {
  font-family: "Amiri", "Traditional Arabic", serif;
  font-size: 22px;
  color: var(--altin-yazi);
  display: block;
  margin-bottom: 8px;
}
footer nav { margin-bottom: 6px; }
footer nav a { margin: 0 8px; }

/* ── Mağaza notu (başlıkta) ───────────────────────────────────────────
   Yalnızca yazı, logo YOK (telif denetimi, 8 Ekim 2026). Apple kendi
   rozetinden başka çizimi, tek başına Apple logosunu ve "yakında"
   rozetini yasaklıyor; Google rozetin değiştirilmemesini ve Play'e
   bağlanmasını istiyor. Uygulama yayına girince bunların yerine iki
   mağazanın RESMÎ rozet görselleri, mağaza bağlantısıyla (<a href>)
   konacak; Apple tek rozet/düzen, Play rozeti ondan küçük olmamalı. */

.magazalar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
  opacity: 0;
  animation: yuksel 1s ease 2.5s forwards;
}
.magaza {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 13px 7px 10px;
  border-radius: 12px;
  border: 1px solid rgba(212, 184, 118, .55);
  background: rgba(4, 18, 13, .55);
  color: var(--krem);
  text-decoration: none;
  text-align: start;
}
a.magaza:hover { border-color: var(--altin-parlak); background: rgba(4, 18, 13, .75); }
.magaza .yazi { display: flex; flex-direction: column; line-height: 1.15; font-size: 15px; font-weight: 600; white-space: nowrap; }
.magaza small { font-size: 10px; font-weight: 400; letter-spacing: .3px; color: var(--altin-parlak); }
[dir="rtl"] .magaza { padding: 7px 10px 7px 13px; }

/* ── Uygulamadan görüntüler: telefon çerçeveleri ─────────────────────
   Masaüstünde dördü yan yana; telefonda yatay kaydırılan şerit (tutunarak
   duruyor). Görüntüler uygulamanın kendisinden, dile göre. */

.goruntuler {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 18px;
}
.telefon { margin: 0; text-align: center; }
.telefon .cerceve {
  border-radius: 28px;
  padding: 7px;
  background: linear-gradient(160deg, #1d3a30, #08150f);
  box-shadow: 0 0 0 1px rgba(212, 184, 118, .45), var(--golge);
}
.telefon img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 540 / 1152;
  border-radius: 22px;
  background: var(--zemin-2);
}
.telefon figcaption {
  margin-top: 10px;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 15px;
  color: var(--yazi);
}
.telefon figcaption span {
  display: block;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 13px;
  color: var(--ikincil);
  margin-top: 2px;
}
@media (max-width: 640px) {
  .goruntuler {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin: 18px -16px 0;
    padding: 4px 16px 12px;
    scrollbar-width: none;
  }
  .goruntuler::-webkit-scrollbar { display: none; }
  .telefon { flex: 0 0 62%; scroll-snap-align: center; }
}

/* ── Kaydırınca belirme ───────────────────────────────────────────── */

.js .belir { opacity: 0; transform: translateY(18px); transition: opacity .8s ease, transform .8s ease; }
.js .belir.gorundu { opacity: 1; transform: none; }

/* ── Hareket istemeyenler için ────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .kemer path { stroke-dashoffset: 0; }
  .mihrap .simge, .besmele, .ust h1, .ust .alt, .magazalar { opacity: 1; }
  .kemer-alt .hat { opacity: 1; }
  .yasal-baslik > * { opacity: 1; }
  .js .belir { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

/* ── Arapça (sağdan sola) ─────────────────────────────────────────────
   Sayfanın Arapça metni sistemin Arapça yazı tipiyle; başlıklar Amiri.
   Amiri yalnızca sitedeki Arapça harflere indirgenmiş (site/yazi) —
   Arapça metin değişirse alt kümeyi yeniden üret (DURUM.md). */
html[lang="ar"] {
  --serif: "Amiri", "Geeza Pro", "Noto Naskh Arabic", "Traditional Arabic", serif;
  --sans: "Geeza Pro", "Noto Sans Arabic", "Segoe UI", Tahoma, sans-serif;
}
html[lang="ar"] [lang="en"] {
  --serif: "Noto Serif", Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
[dir="rtl"] ul { padding-left: 0; padding-right: 22px; }
[dir="rtl"] summary { padding: 14px 16px 14px 44px; }
[dir="rtl"] summary::after { right: auto; left: 16px; }
[dir="rtl"] .kartlar a { padding: 16px 18px 16px 40px; }
[dir="rtl"] .kartlar a::after { content: "←"; right: auto; left: 16px; transition: left .35s ease; }
[dir="rtl"] .kartlar a:hover::after { right: auto; left: 12px; }