/* TUS Guru — tusguru.com
 *
 * TASARIM NOTU
 *
 * Sayfa iki bölgeden oluşuyor ve bu kasıtlı:
 *
 *   KOYU BÖLGE (üst bar + hero + sayaç): uygulamanın kendi rengi.
 *   Uygulama koyu lacivert-turkuaz; site açılışta onunla aynı görünsün
 *   ki mağazadan gelen kişi aynı ürüne baktığını anlasın. Ekran
 *   görüntüleri de koyu olduğu için burada doğal duruyorlar.
 *
 *   KÂĞIT BÖLGE (özellikler + metin + hukuk sayfaları): okumak için.
 *   Beş sayfanın üçü uzun hukuk metni; koyu zeminde uzun metin okumak
 *   yorucu. Ölçü (satır uzunluğu) dar tutuldu.
 *
 * Tipografi: başlıklar Source Serif 4. Gövdede de aynı serif var,
 * arayüz parçalarında (etiket, düğme, üst bar) sistem sans. Serif
 * seçilmesinin sebebi hem uzun metinler hem de hedef kitle: TUS'a
 * hazırlanan hekimler.
 *
 * Yazı tipi KENDİ SUNUCUMUZDAN veriliyor, Google Fonts'tan değil.
 * Google'dan çekmek her ziyaretçinin IP adresini Google'a göndermek
 * demek; gizlilik metnimiz ve CSP'deki "default-src 'none';
 * font-src 'self'" bunun tersini iddia ediyor. Source Serif 4 OFL
 * lisanslı, kendi sunucunda barındırmaya izin veriyor.
 *
 * Logo: uygulamanın Play'deki simgesi (siyah zeminde stetoskop).
 * Uygulama içindeki turkuaz çanta simgesi kullanılmadı; o bir Material
 * ikonu ve kodda "geçici" notuyla duruyor, marka değil.
 */


/* ---------------------------------------------------------------- *
 * Yazı tipi
 * ---------------------------------------------------------------- */

/* unicode-range sayesinde tarayıcı yalnızca gereken altkümeyi indiriyor.
 * Türkçe için ikisi de gerekiyor: ç ö ü temel latin'de, ğ ş ı İ
 * latin-ext'te. */
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url('/fonts/source-serif-4-latin-ext-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url('/fonts/source-serif-4-latin-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC,
    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
  src: url('/fonts/source-serif-4-latin-ext-italic.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
  src: url('/fonts/source-serif-4-latin-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC,
    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ================================================================ *
 * Renkler
 * ================================================================ */

:root {
  /* Kâğıt bölge */
  --kagit: #faf8f4;        /* sıcak kırık beyaz; saf beyaz sert duruyor */
  --murekkep: #1d1b18;     /* sıcak siyah */
  --soluk: #6d6760;
  --cizgi: #e4ddd2;
  --cizgi-koyu: #d3c9b9;
  --vurgu: #0f6f66;        /* uygulamanın turkuazının kâğıtta okunan hâli */
  --vurgu-zemin: #e8f2f0;

  /* Koyu bölge — uygulamanın kendi renkleri */
  --gece: #151a26;         /* uygulamanın arka planı #1A1F2E'ye yakın */
  --gece-yuzey: #1e2433;
  --gece-cizgi: #2b3346;
  --gece-metin: #eef1f6;
  --gece-soluk: #9aa4b8;
  --turkuaz: #4ecdc4;      /* uygulamanın birincil rengi, birebir */
}

@media (prefers-color-scheme: dark) {
  :root {
    --kagit: #12151c;
    --murekkep: #e8eaef;
    --soluk: #98a0b0;
    --cizgi: #252b38;
    --cizgi-koyu: #333b4d;
    --vurgu: #4ecdc4;
    --vurgu-zemin: #17242a;
  }
}

/* ================================================================ *
 * Temel
 * ================================================================ */

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

body {
  margin: 0;
  background: var(--kagit);
  color: var(--murekkep);
  font-family: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  font-size: 19px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Kapsayıcılar.
 *
 * Yalnızca yatay eksen ayarlanıyor. "padding: 0 24px" yazmak, aynı
 * elemanda duran main'in dikey iç boşluğunu siliyordu: sınıf seçicisi
 * eleman seçicisini yener ve kısayol özellik dört kenarı birden ezer.
 * Üst boşluk sessizce kayboluyordu. */
.kap {
  max-width: 40rem;
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
}
.kap-genis { max-width: 64rem; }
.kap-orta  { max-width: 52rem; }

a { color: var(--vurgu); text-decoration: none; }
a:not([class]) {
  border-bottom: 1px solid color-mix(in srgb, var(--vurgu) 35%, transparent);
}
a:not([class]):hover { border-bottom-color: var(--vurgu); }

img { max-width: 100%; height: auto; display: block; }

.sans {
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* Yalnızca ekran okuyucu için — görsel olarak gizli ama erişilebilir. */
.gizli-baslik {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ================================================================ *
 * Üst bar
 * ================================================================ */

.ustbar {
  background: var(--gece);
  color: var(--gece-metin);
  border-bottom: 1px solid var(--gece-cizgi);
}

/* Koyu hero'nun hemen üstündeyken çizgi gereksiz; iki koyu alan
 * arasında ince bir çizgi dikiş gibi duruyor. */
.gece-blok .ustbar { border-bottom: 0; }

.ustbar .kap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 18px;
  padding-bottom: 18px;
  flex-wrap: wrap;
}

.marka { display: flex; align-items: center; gap: 11px; color: inherit; border: 0; }
.marka img { width: 34px; height: 34px; border-radius: 9px; }
.marka span { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
.marka em { font-style: italic; font-weight: 400; color: var(--turkuaz); }

.ustbar nav {
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.ustbar nav a { color: var(--gece-soluk); border: 0; }
.ustbar nav a:hover { color: var(--turkuaz); }

.ustbar .indir-kucuk {
  color: var(--gece);
  background: var(--turkuaz);
  padding: 8px 15px;
  border-radius: 6px;
  font-weight: 600;
}
.ustbar .indir-kucuk:hover { color: var(--gece); opacity: .88; }

/* ================================================================ *
 * Hero — koyu, ürünün kendi rengi
 * ================================================================ */

.gece-blok { background: var(--gece); color: var(--gece-metin); }

.hero .kap {
  display: grid;
  grid-template-columns: 1fr minmax(320px, 470px);
  gap: 48px 56px;
  align-items: center;
  padding-top: 68px;
  padding-bottom: 0;   /* telefonlar alttan taşacak */
}

.hero h1 {
  font-size: clamp(2.3rem, 4.6vw, 3.5rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.025em;
  margin: 0 0 22px;
}

.hero h1 em { font-style: italic; color: var(--turkuaz); }

.hero p {
  font-size: 1.14rem;
  line-height: 1.6;
  color: var(--gece-soluk);
  margin: 0 0 30px;
  max-width: 30em;
}

.hero-alt {
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 13px;
  color: var(--gece-soluk);
  margin-top: 16px !important;
  margin-bottom: 68px !important;
}

/* Telefonlar.
 *
 * Eşit hizada üç telefon yerine kademeli: ortadaki önde ve büyük.
 * Alt kenarları bilerek kesiliyor (hero'nun padding-bottom'u sıfır),
 * böylece ekranlar sayfanın içinden çıkıyormuş gibi duruyor. */
.telefonlar {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin-bottom: -60px;
}

.telefon {
  border-radius: 20px;
  border: 1px solid var(--gece-cizgi);
  overflow: hidden;
  box-shadow: 0 24px 48px rgba(0, 0, 0, .45);
  background: var(--gece-yuzey);
}

.telefon.yan { width: 38%; opacity: .78; transform: scale(.92); }
.telefon.yan:first-child { margin-right: -5%; }
.telefon.yan:last-child  { margin-left: -5%; }
.telefon.orta { width: 46%; position: relative; z-index: 2; }

@media (max-width: 880px) {
  .hero .kap { grid-template-columns: 1fr; padding-top: 52px; }
  .telefonlar { margin-bottom: -40px; }
  .hero-alt { margin-bottom: 40px !important; }
}

/* ================================================================ *
 * Sayaç şeridi
 * ================================================================ */

.sayac-serit {
  background: var(--gece-yuzey);
  border-top: 1px solid var(--gece-cizgi);
  color: var(--gece-metin);
}

.sayac-serit .kap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px 36px;
  padding-top: 26px;
  padding-bottom: 26px;
  flex-wrap: wrap;
}

.sayac-sol { display: flex; align-items: baseline; gap: 16px; }

.sayac-sayi {
  font-size: 2.9rem;
  font-weight: 600;
  line-height: 1;
  color: var(--turkuaz);
  letter-spacing: -0.03em;
}

.sayac-metin { font-size: 1.02rem; line-height: 1.45; }
.sayac-metin b { font-weight: 600; }
.sayac-metin span { display: block; color: var(--gece-soluk); font-size: .92rem; }

.sayac-serit a {
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 14px;
  color: var(--turkuaz);
  border-bottom: 1px solid color-mix(in srgb, var(--turkuaz) 40%, transparent);
}

/* ================================================================ *
 * Metin
 * ================================================================ */

main { padding-top: 72px; padding-bottom: 88px; }
.gece-blok + main { padding-top: 84px; }

h1 {
  font-size: clamp(2.1rem, 5vw, 2.9rem);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: -0.022em;
  margin: 0 0 22px;
  max-width: 17em;
}

h2 {
  font-size: 1.55rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.015em;
  margin: 60px 0 16px;
}

h3 { font-size: 1.08rem; font-weight: 600; margin: 32px 0 6px; }

p { margin: 0 0 20px; }
ul, ol { padding-left: 1.15em; margin: 0 0 20px; }
li { margin-bottom: 8px; }
strong { font-weight: 600; }

.giris {
  font-size: 1.2rem;
  line-height: 1.6;
  color: var(--soluk);
  margin-bottom: 36px;
  max-width: 31em;
}

.etiket {
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--soluk);
  margin: 0 0 4px;
}

.tarih {
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 13px;
  color: var(--soluk);
  margin-bottom: 40px;
}

/* Geniş kapsayıcıda düz metin dar kalsın; yoksa satır 100 karakteri
 * buluyor ve göz satır başını kaybediyor. */
.kap-genis > p, .kap-genis > h2, .kap-genis > h3,
.kap-genis > ul, .kap-genis > ol, .kap-genis > .not,
.kap-orta > p, .kap-orta > h2, .kap-orta > h3,
.kap-orta > ul, .kap-orta > ol, .kap-orta > .not {
  max-width: 34rem;
}

/* ================================================================ *
 * Özellik blokları — ekran görüntüsü + metin, yön değişerek
 * ================================================================ */

.blok {
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: 24px 56px;
  align-items: center;
  padding: 52px 0;
  border-top: 1px solid var(--cizgi);
}

.blok:nth-of-type(even) > .blok-gorsel { order: -1; }

.blok h2 { margin: 0 0 12px; font-size: 1.5rem; }
.blok p  { margin: 0 0 14px; color: var(--soluk); }
.blok p:last-child { margin-bottom: 0; }
.blok .blok-metin { max-width: 32rem; }

.blok-gorsel img {
  border-radius: 16px;
  border: 1px solid var(--cizgi-koyu);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .14);
}

@media (max-width: 760px) {
  .blok { grid-template-columns: 1fr; padding: 40px 0; }
  .blok:nth-of-type(even) > .blok-gorsel { order: 0; }
  .blok-gorsel { max-width: 240px; }
}

/* ================================================================ *
 * Satır listesi — kutu değil, çizgiyle ayrılmış satırlar
 * ================================================================ */

.liste { margin: 0 0 8px; }

.satir {
  padding: 18px 0;
  border-top: 1px solid var(--cizgi);
  display: grid;
  grid-template-columns: 11rem 1fr;
  gap: 4px 28px;
  align-items: baseline;
}
.satir:last-child { border-bottom: 1px solid var(--cizgi); }
.satir dt { font-weight: 600; font-size: 1rem; }
.satir dd { margin: 0; color: var(--soluk); font-size: .97rem; line-height: 1.6; }

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

/* ================================================================ *
 * İçerik kartları — diğer sayfalara giden bağlantılar
 * ================================================================ */

.kartlar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1px;
  background: var(--cizgi);
  border: 1px solid var(--cizgi);
  margin: 12px 0 0;
}

.kart {
  background: var(--kagit);
  padding: 24px 22px;
  border: 0;
  color: inherit;
  display: block;
}
.kart:hover { background: var(--vurgu-zemin); }
.kart b { display: block; font-size: 1.05rem; font-weight: 600; margin-bottom: 4px; }
.kart span { color: var(--soluk); font-size: .94rem; line-height: 1.55; display: block; }

/* ================================================================ *
 * Tablo
 * ================================================================ */

.tablo-sar { overflow-x: auto; margin: 20px 0 28px; }
table { width: 100%; border-collapse: collapse; font-size: .93rem; line-height: 1.55; }

th, td {
  text-align: left;
  padding: 11px 14px 11px 0;
  border-bottom: 1px solid var(--cizgi);
  vertical-align: top;
}

th {
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--soluk);
  border-bottom-color: var(--cizgi-koyu);
  padding-bottom: 8px;
}

td { color: var(--soluk); }
td:first-child { color: var(--murekkep); padding-right: 28px; }
tr.gecmis td { opacity: .62; }

/* ================================================================ *
 * Vurgu kutusu
 * ================================================================ */

.not {
  border-left: 2px solid var(--vurgu);
  padding: 2px 0 2px 22px;
  margin: 28px 0;
  color: var(--soluk);
}
.not p:last-child { margin-bottom: 0; }
.not strong { color: var(--murekkep); }

/* ================================================================ *
 * Düğmeler
 * ================================================================ */

.indir {
  display: inline-block;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 15px;
  font-weight: 600;
  background: var(--turkuaz);
  color: #10141d;
  border: 0;
  padding: 13px 24px;
  border-radius: 7px;
}
.indir:hover { opacity: .88; color: #10141d; }

/* Kâğıt bölgede aynı düğme koyu; turkuaz açık zeminde yeterince
 * kontrast vermiyor. */
main .indir { background: var(--murekkep); color: var(--kagit); }
main .indir:hover { background: var(--vurgu); color: #fff; opacity: 1; }

/* ================================================================ *
 * Alt bilgi
 * ================================================================ */

footer {
  background: var(--gece);
  color: var(--gece-soluk);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 14px;
  padding: 48px 0 40px;
}

.footer-izgara {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 32px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--gece-cizgi);
}

footer h4 {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gece-soluk);
  opacity: .72;
  margin: 0 0 12px;
}

footer ul { list-style: none; padding: 0; margin: 0; }
footer li { margin-bottom: 9px; }
footer a { color: var(--gece-metin); border: 0; }
footer a:hover { color: var(--turkuaz); }

.footer-hakkinda p {
  color: var(--gece-soluk);
  font-size: 13.5px;
  line-height: 1.6;
  margin: 0;
  max-width: 28em;
}

.footer-alt {
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 13px;
  opacity: .8;
}

@media (max-width: 700px) {
  .footer-izgara { grid-template-columns: 1fr 1fr; }
  .footer-hakkinda { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  body { font-size: 18px; }
  main { padding-top: 48px; padding-bottom: 60px; }
  .gece-blok + main { padding-top: 56px; }
  h2 { margin-top: 44px; }
  .sayac-sayi { font-size: 2.3rem; }
}