/* Dil sayfaları — sağdan sola dillerde de doğru çalışması için
   fiziksel değil MANTIKSAL özellikler kullanılıyor:
   margin-inline / padding-inline / border-inline-start / text-align:start
   Böylece dir="rtl" verildiğinde düzen kendiliğinden aynalanıyor. */

:root {
  --paper: #F3F1EC; --paper-2: #E9E6DF; --card: #FBFAF7;
  --ink: #191C1A; --ink-2: #3D423E; --muted: #6F736D; --line: #D6D2C9;
  --accent: #1B3FC4; --gold: #B8912B; --clay: #C26A55;
  --fd: "Helvetica Neue", Helvetica, Arial, "Segoe UI", sans-serif;
  --fb: Georgia, "Times New Roman", serif;
  --fm: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --pad: clamp(20px, 5vw, 56px);
}
@media (prefers-color-scheme: dark) {
  :root { --paper:#151816; --paper-2:#1D211E; --card:#1E2220; --ink:#EDEAE3;
          --ink-2:#C3C0B8; --muted:#8C918A; --line:#333833; --accent:#7A96F5;
          --gold:#D9B451; --clay:#DD8A74; }
}

/* yazı sistemi yedekleri — her dilin kendi yazı tipi ailesi */
html[lang="ar"], html[lang="fa"] {
  --fd: "Segoe UI", Tahoma, "Noto Naskh Arabic", "Geeza Pro", sans-serif;
  --fb: "Segoe UI", Tahoma, "Noto Naskh Arabic", serif;
}
html[lang="zh"] {
  --fd: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", "Hiragino Sans GB", sans-serif;
  --fb: "Songti SC", "SimSun", "Noto Serif CJK SC", serif;
}
html[lang="ru"] { --fb: Georgia, "PT Serif", "Times New Roman", serif; }

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--fb); font-size: 17px; line-height: 1.65;
  -webkit-text-size-adjust: 100%;
}
html[lang="ar"] body, html[lang="fa"] body { font-size: 18px; line-height: 1.85; }
html[lang="zh"] body { line-height: 1.85; }

.wrap { max-width: 940px; margin-inline: auto; padding-inline: var(--pad); }
h1, h2, h3 { font-family: var(--fd); }
a { color: var(--accent); }
p { margin-block: 0 16px; }

/* --- dil çubuğu --- */
.dilbar { border-block-end: 1px solid var(--line); background: var(--paper);
          position: sticky; inset-block-start: 0; z-index: 40; }
.dilbar .wrap { display: flex; align-items: center; gap: 14px;
                padding-block: 11px; flex-wrap: wrap; }
.dilbar .mk { font-family: var(--fd); font-weight: 800; font-size: 13px;
              letter-spacing: .12em; text-transform: uppercase;
              color: var(--ink); text-decoration: none; margin-inline-end: auto; }
/* tek düğmelik dil seçici — 11 bağlantıyı yan yana yaymak yerine */
.dilsec { position: relative; }
.dilsec summary {
  list-style: none; cursor: pointer; font-family: var(--fm); font-size: 12.5px;
  color: var(--ink-2); border: 1px solid var(--line); background: var(--card);
  padding-block: 6px; padding-inline: 12px 30px; position: relative; white-space: nowrap;
}
.dilsec summary::-webkit-details-marker { display: none; }
.dilsec summary::after {
  content: ''; position: absolute; inset-inline-end: 12px; inset-block-start: 50%;
  margin-block-start: -2px; border: 4px solid transparent;
  border-block-start-color: var(--muted);
}
.dilsec summary:hover, .dilsec[open] summary { border-color: var(--accent); color: var(--accent); }
.dilsec[open] summary::after { transform: rotate(180deg); margin-block-start: -6px; }
.dilmenu {
  position: absolute; inset-inline-end: 0; inset-block-start: calc(100% + 5px); z-index: 90;
  background: var(--card); border: 1px solid var(--line); min-width: 178px; padding: 5px;
  display: grid; box-shadow: 0 10px 30px rgba(0,0,0,.14);
}
.dilmenu a {
  font-family: var(--fm); font-size: 12.5px; color: var(--ink-2);
  text-decoration: none; padding-block: 8px; padding-inline: 11px; text-align: start;
}
.dilmenu a:hover { background: var(--paper-2); color: var(--accent); }
.dilmenu a.on { color: var(--accent); }

/* --- hero --- */
.hero { padding-block: clamp(46px, 8vw, 88px) clamp(28px, 5vw, 48px); }
.hero .ust { font-family: var(--fm); font-size: 12.5px; letter-spacing: .12em;
             text-transform: uppercase; color: var(--accent); margin-block: 0 18px; }
.hero h1 { font-size: clamp(31px, 5.4vw, 54px); font-weight: 800;
           letter-spacing: -.03em; line-height: 1.06; margin-block: 0 20px; max-width: 21ch; }
html[lang="ar"] .hero h1, html[lang="fa"] .hero h1 { letter-spacing: 0; line-height: 1.35; }
html[lang="zh"] .hero h1 { letter-spacing: 0; }
.hero .lede { font-size: clamp(17px, 2vw, 20.5px); color: var(--ink-2);
              max-width: 62ch; margin: 0; }

/* --- bölümler --- */
.blok { padding-block: clamp(34px, 5.5vw, 62px); border-block-start: 1px solid var(--line); }
.blok h2 { font-size: clamp(21px, 3.2vw, 31px); font-weight: 800;
           letter-spacing: -.025em; margin-block: 0 18px; }
html[lang="ar"] .blok h2, html[lang="fa"] .blok h2, html[lang="zh"] .blok h2 { letter-spacing: 0; }
.blok p { color: var(--ink-2); max-width: 66ch; }

.rakamlar { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 1px; background: var(--line); border: 1px solid var(--line); margin-block-start: 24px; }
.rakam { background: var(--card); padding: 20px; }
.rakam b { display: block; font-family: var(--fd); font-weight: 800;
           font-size: clamp(26px, 3.6vw, 36px); letter-spacing: -.03em;
           color: var(--accent); line-height: 1; }
.rakam span { display: block; margin-block-start: 8px; font-size: 14.5px;
              color: var(--ink-2); line-height: 1.45; }

.liste { margin: 0; padding: 0; list-style: none;
         display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px 30px; }
.liste li { position: relative; padding-inline-start: 20px;
            font-size: 16px; line-height: 1.55; color: var(--ink-2); }
.liste li::before { content: ''; position: absolute; inset-inline-start: 0;
                    inset-block-start: 9px; width: 7px; height: 7px; background: var(--accent); }

.vurgu { background: var(--card); border: 1px solid var(--line);
         border-inline-start: 3px solid var(--accent);
         padding: clamp(20px, 3vw, 30px); margin-block-start: 26px; }
.vurgu p:last-child { margin-block-end: 0; }

/* --- yerel biçim gösterimi --- */
.yerel { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
         gap: 1px; background: var(--line); border: 1px solid var(--line); margin-block-start: 24px; }
.yerel div { background: var(--card); padding: 18px 20px; }
.yerel .k { display: block; font-family: var(--fm); font-size: 11px; letter-spacing: .1em;
            text-transform: uppercase; color: var(--muted); margin-block-end: 7px; }
.yerel .v { font-family: var(--fd); font-weight: 700; font-size: clamp(16px, 2.1vw, 20px);
            letter-spacing: -.015em; }

/* --- iletişim --- */
.son { padding-block: clamp(40px, 6vw, 76px); border-block-start: 1px solid var(--line); }
.son h2 { font-size: clamp(22px, 3.4vw, 33px); font-weight: 800; letter-spacing: -.028em; margin-block: 0 14px; }
.son p { color: var(--ink-2); max-width: 56ch; }
.dugmeler { display: flex; flex-wrap: wrap; gap: 12px; margin-block-start: 24px; }
.btn { display: inline-block; background: var(--accent); color: #fff; text-decoration: none;
       font-family: var(--fd); font-weight: 700; font-size: 15px;
       padding: 14px 26px; border: 1px solid var(--accent); }
.btn:hover { background: transparent; color: var(--accent); }
.btn.ikincil { background: transparent; color: var(--ink); border-color: var(--line); }
.btn.ikincil:hover { border-color: var(--accent); color: var(--accent); }

footer { border-block-start: 1px solid var(--line); padding-block: 26px;
         font-family: var(--fm); font-size: 12.5px; color: var(--muted); }
footer a { color: var(--muted); }

@media (max-width: 620px) { .liste { grid-template-columns: 1fr; } }

/* alt sayfalar: haftalık plan */
.haftalar { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.hafta { background: var(--card); padding: clamp(18px, 2.6vw, 26px);
         display: grid; grid-template-columns: minmax(120px, 175px) 1fr; gap: 20px; }
.hno span { display: block; font-family: var(--fm); font-size: 11.5px; letter-spacing: .1em;
            text-transform: uppercase; color: var(--accent); margin-block-end: 5px; }
.hno b { font-family: var(--fd); font-weight: 800; font-size: 17px; letter-spacing: -.02em;
         display: block; overflow-wrap: break-word; hyphens: auto; }
.hic p { margin-block-end: 10px; font-size: 16px; color: var(--ink-2); }
.hic p.siz { margin-block-end: 0; padding-inline-start: 14px;
             border-inline-start: 2px solid var(--gold); color: var(--muted); font-size: 15px; }
@media (max-width: 680px) { .hafta { grid-template-columns: 1fr; gap: 10px; } }