:root {
  --kagit: #f8f6f1;
  --murekkep: #24282d;
  --soluk: #5b6168;
  --cizgi: #cfc9bd;
  --ince: #e2ddd2;
  --vurgu: #1d5c57;
  --vurgu-acik: #e3ece9;
  --dugme-yazi: #ffffff;
  --panel: #efebe2;
  --serif: Charter, "Bitstream Charter", "Iowan Old Style", Georgia, serif;
  --sans: "Avenir Next", Avenir, "Segoe UI", "Helvetica Neue", sans-serif;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --kagit: #1b1d1f;
    --murekkep: #e7e3da;
    --soluk: #a2a39f;
    --cizgi: #45474a;
    --ince: #323436;
    --vurgu: #7cc2b9;
    --vurgu-acik: #233331;
    --dugme-yazi: #12201f;
    --panel: #222527;
  }
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { background: var(--kagit); color: var(--murekkep); font-family: var(--serif);
       font-size: 1.0625rem; line-height: 1.55; }

a { color: var(--vurgu); text-underline-offset: .18em; }
a:focus-visible, .kaydir:focus-visible { outline: 2px solid var(--vurgu); outline-offset: 3px; border-radius: 2px; }

.kap { width: min(58rem, 100% - 2rem); margin-inline: auto; }
@media (min-width: 40rem) { .kap { width: min(58rem, 100% - 3rem); } }
.giris, .bolum > p { max-width: 44rem; }

/* üst */
.ust { padding-top: 3.5rem; }
.ust .kap { border-bottom: 1.5px solid var(--murekkep); padding-bottom: 2rem; }
h1 { font-size: clamp(2rem, 6vw, 2.75rem); font-weight: 700; line-height: 1.1; letter-spacing: -.01em; }
.giris { font-size: 1.15rem; margin-top: 1.25rem; max-width: 40rem; }

.eylem { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; margin-top: 1.75rem;
         font-family: var(--sans); font-size: .95rem; }
.dugme { display: inline-block; background: var(--vurgu); color: var(--dugme-yazi); text-decoration: none;
         font-weight: 600; padding: .7rem 1.2rem; border-radius: 4px; }
.dugme:hover { filter: brightness(1.1); }

/* bölümler */
.bolum { padding-top: 2.75rem; }
h2 { font-size: 1.4rem; font-weight: 700; color: var(--vurgu); padding-bottom: .4rem;
     border-bottom: 1px solid var(--vurgu); line-height: 1.25; }
h2 .no { font-family: var(--sans); font-weight: 600; margin-right: .6rem; }
h3 { font-size: 1.05rem; font-weight: 700; margin-top: 1.4rem; }
.bolum > p { margin-top: 1rem; }

.iki { display: grid; gap: 0 2.5rem; }
@media (min-width: 44rem) { .iki { grid-template-columns: 1fr 1fr; } }
ul, ol { margin: .4rem 0 0 1.25rem; }
li { margin-top: .4rem; padding-left: .2rem; }

.not { margin-top: 1.75rem !important; padding-top: 1rem; border-top: 1px solid var(--cizgi); font-size: 1rem; }

/* paket tablosu */
table { border-collapse: collapse; width: 100%; }
th { font-weight: inherit; text-align: left; }
.gizli { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.kaydir { overflow-x: auto; margin-top: 1.25rem; -webkit-overflow-scrolling: touch; }
.paket { min-width: 44rem; border-top: 2px solid var(--murekkep); border-bottom: 1.5px solid var(--murekkep);
         font-family: var(--sans); font-size: .9rem; }
.paket th, .paket td { padding: .45rem .6rem; vertical-align: middle; }
.paket td { text-align: center; width: 13.5%; }
.paket tbody th[scope="row"] { font-family: var(--serif); font-size: .98rem; line-height: 1.35; padding-left: 0;
                               position: sticky; left: 0; background: var(--kagit); }
.paket thead th { font-weight: 600; text-align: center; vertical-align: bottom; line-height: 1.25; padding-top: .9rem; }
.paket thead th { border-bottom: 1px solid var(--murekkep); }
.paket thead th:first-child { position: sticky; left: 0; background: var(--kagit); }
.paket thead small, .fiyat small { display: block; font-weight: 400; font-size: .78rem; color: var(--soluk); margin-top: .2rem; }
.fiyat td { font-size: 1.15rem; font-weight: 600; white-space: nowrap; padding-bottom: .8rem;
            border-bottom: 1px solid var(--murekkep); }
.fiyat th { border-bottom: 1px solid var(--murekkep); }
.grup th { font-size: .8rem; font-weight: 600; color: var(--soluk); padding: 1rem 0 .3rem;
           border-bottom: 1px solid var(--cizgi); }
.paket tbody tr:not(.fiyat):not(.grup) > * { border-bottom: 1px solid var(--ince); }
.paket tbody tr:last-child > * { border-bottom: none !important; }
.var { color: var(--vurgu); }
.yok { color: var(--soluk); }
.metin { font-weight: 500; font-size: .85rem; }
.paket .one { background: var(--vurgu-acik); }
.paket thead th.one { border-top: 3px solid var(--vurgu); }

/* dar ekranda her satırın adı üstte, dört paket altında; paket adları yapışık başlıkta */
@media (max-width: 43.99rem) {
  .kaydir { overflow: visible; }
  .paket { min-width: 0; }
  .paket thead, .paket tbody { display: block; }
  .paket tr { display: grid; grid-template-columns: repeat(4, 1fr); }
  .paket thead { position: sticky; top: 0; z-index: 1; background: var(--kagit); border-bottom: 1px solid var(--murekkep); }
  .paket thead th:first-child, .fiyat th { display: none; }
  .paket thead th { font-size: .78rem; padding: .6rem .25rem .5rem; }
  .paket thead small { font-size: .7rem; }
  .paket th, .paket td { width: auto; }
  .paket tbody th[scope="row"] { grid-column: 1 / -1; position: static; padding: .55rem 0 .1rem; }
  .paket tbody tr:not(.fiyat):not(.grup) > * { border-bottom: none; }
  .paket tbody tr:not(.fiyat):not(.grup) { border-bottom: 1px solid var(--ince); }
  .paket td { padding: .2rem .25rem .5rem; }
  .paket td.one { padding-top: .25rem; }
  .fiyat td { font-size: .95rem; padding: .7rem .25rem; }
  .fiyat td small { font-size: .68rem; white-space: normal; }
  .grup th { grid-column: 1 / -1; }
}

.dipnot { font-size: .92rem; color: var(--soluk); margin-top: .75rem; }

.alt-iki { display: grid; gap: 0 2.5rem; margin-top: 1rem; }
@media (min-width: 52rem) { .alt-iki { grid-template-columns: 1.15fr 1fr; } }
.ek { list-style: none; margin: .6rem 0 0; border-top: 1.5px solid var(--murekkep);
      border-bottom: 1.5px solid var(--murekkep); font-size: .98rem; }
.ek li { margin: 0; padding: .5rem 0; line-height: 1.4; }
.ek li + li { border-top: 1px solid var(--cizgi); }
.kosul p { margin-top: .6rem; font-size: .98rem; }
.kosul h3 + p { margin-top: .6rem; }

.iletisim { padding-bottom: 3.5rem; }

/* yan panel: geniş ekranda sol sütun, dar ekranda yok */
.yan { display: none; }
[id] { scroll-margin-top: 1.5rem; }
@media (min-width: 64rem) {
  .duzen { display: grid; grid-template-columns: 16rem minmax(0, 1fr); }
  .yan { display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto;
         padding: 3.5rem 1.75rem 2rem; background: var(--panel); border-right: 1px solid var(--cizgi);
         font-family: var(--sans); font-size: .92rem; }
  .yan-ad { color: var(--murekkep); text-decoration: none; font-family: var(--serif); font-weight: 700;
            font-size: 1.1rem; line-height: 1.25; }
  .yan ol { list-style: none; margin: 2rem 0 0; counter-reset: b; }
  .yan li { margin: 0; padding: 0; }
  .yan ol a { display: block; padding: .45rem 0; color: var(--soluk); text-decoration: none; border-top: 1px solid var(--cizgi); }
  .yan li:last-child a { border-bottom: 1px solid var(--cizgi); }
  .yan ol a:hover { color: var(--vurgu); }
  .yan-iletisim { margin-top: auto; padding-top: 2rem; display: flex; flex-direction: column; gap: .75rem; font-size: .85rem; }
  .yan-iletisim .dugme { text-align: center; }
  .icerik .kap { width: min(52rem, 100% - 5rem); }
  .ust .eylem { display: none; }
}