/* WebLibrary tanıtım sayfası.
   ------------------------------------------------------------------------
   Konu bir kütüphane: logo açık bir kitap ve ayraç. Sayfanın da tek gösterişli
   anı bir raf — sağdaki panel gerçek uygulamanın rafı, üstüne gerçek kart
   düşüyor. Geri kalan her şey bilerek sakin: tek gölge, tek vurgu rengi, tek
   hareket.

   Yazı tipi sistem yığınından. Gizlilik iddiası olan bir sayfanın her
   açılışta Google Fonts'a istek atması tutarsız olurdu. Kişilik yazı
   tipinden değil ölçek, ağırlık ve harf aralığından geliyor. */

:root {
  --ink: #071F27;          /* metin — teal'e çalan koyu, siyah değil */
  --teal: #0D3B4A;         /* logodaki sol sayfa */
  --emerald: #2FA37A;      /* logodaki sağ sayfa — tek vurgu */
  --emerald-deep: #1F7355; /* buton zemini: beyaz yazıyla kontrast 4.5+ */
  --emerald-dark: #175B43;
  --emerald-wash: #E7F3EE;
  --amber: #F5A623;        /* logodaki ayraç — sadece "değerli" işareti */
  --paper: #F4F6F4;
  --card: #FFFFFF;
  --muted: #5A6F78;
  --rule: #DFE5E3;

  --hold: 1120px;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

a { color: var(--teal); text-underline-offset: 3px; }

h1, h2, h3 { margin: 0; line-height: 1.06; letter-spacing: -0.035em; font-weight: 800; }

.hold { max-width: var(--hold); margin: 0 auto; padding: 0 24px; }
.hold-narrow { max-width: 720px; }

.skip {
  position: absolute; left: -9999px;
  padding: 12px 18px; background: var(--ink); color: #fff; border-radius: 0 0 10px 0;
}
.skip:focus { left: 0; top: 0; z-index: 50; }

:focus-visible { outline: 2px solid var(--emerald); outline-offset: 3px; border-radius: 6px; }

/* ------------------------------------------------------------- üst şerit */

.masthead {
  max-width: var(--hold);
  margin: 0 auto;
  padding: 22px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}

.mark {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--ink); text-decoration: none;
  font-weight: 800; font-size: 17px; letter-spacing: -0.02em;
}
.mark img { border-radius: 9px; }

.mark-cta {
  font-size: 15px; font-weight: 600; color: var(--teal);
  text-decoration: none;
  padding: 9px 16px;
  border: 1px solid var(--rule); border-radius: 999px;
  background: var(--card);
}
.mark-cta:hover { border-color: var(--teal); }

/* ----------------------------------------------------------------- giriş */

.opening {
  max-width: var(--hold);
  margin: 0 auto;
  padding: 32px 24px 64px;
  display: grid;
  gap: 44px;
  grid-template-columns: 1fr;
  align-items: start;
}

.opening h1 {
  font-size: clamp(36px, 7.6vw, 68px);
  letter-spacing: -0.045em;
}

/* Zorunlu satır kırılması dar ekranda tuhaf duruyor; orada doğal aksın. */
@media (max-width: 599px) {
  .opening h1 br { display: none; }
}

.opening-sub {
  max-width: 46ch;
  margin: 22px 0 0;
  font-size: clamp(16.5px, 1.9vw, 19px);
  color: var(--muted);
}

/* deneme kutusu */

.try {
  margin-top: 30px;
  padding: 18px;
  border: 1px solid var(--rule);
  border-radius: 18px;
  background: var(--card);
}

.try-label { display: block; margin-bottom: 10px; font-size: 14.5px; font-weight: 600; }

.try-row { display: flex; gap: 10px; flex-wrap: wrap; }

.try-row input {
  flex: 1 1 220px; min-width: 0;
  padding: 13px 15px;
  border: 1px solid var(--rule); border-radius: 12px;
  background: var(--paper);
  font: inherit; font-size: 16px; color: inherit;
}
.try-row input:focus { outline: none; border-color: var(--emerald); background: var(--card); }

.try-row button {
  padding: 13px 20px;
  border: 0; border-radius: 12px;
  background: var(--ink); color: #fff;
  font: inherit; font-size: 15px; font-weight: 600;
  cursor: pointer;
}
.try-row button:hover { background: var(--teal); }
.try-row button:disabled { opacity: 0.6; cursor: default; }

.try-msg { margin: 10px 0 0; font-size: 13.5px; color: var(--muted); min-height: 1.2em; }
.try-msg.is-bad { color: #A33A2E; }

.opening-actions { margin-top: 26px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }

.cta {
  display: inline-block;
  padding: 14px 26px;
  border-radius: 999px;
  background: var(--emerald-deep); color: #fff;
  font-size: 16px; font-weight: 700; text-decoration: none;
}
.cta:hover { background: var(--emerald-dark); }

.cta-plain { font-size: 15.5px; font-weight: 600; color: var(--teal); }

/* --------------------------------------------------------------- raf paneli
   Tek gölge burada. Sayfada başka hiçbir yerde gölge yok. */

.shelf-frame {
  padding: 18px 18px 16px;
  border: 1px solid var(--rule);
  border-radius: 24px;
  background: var(--card);
  box-shadow: 0 26px 60px -30px rgba(7, 31, 39, 0.5);
}

.shelf-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 4px 14px;
}
.shelf-name { font-size: 19px; font-weight: 800; letter-spacing: -0.03em; }
.shelf-glyph {
  width: 20px; height: 14px;
  background:
    linear-gradient(var(--muted), var(--muted)) 0 0 / 100% 2px no-repeat,
    linear-gradient(var(--muted), var(--muted)) 0 6px / 100% 2px no-repeat,
    linear-gradient(var(--muted), var(--muted)) 0 12px / 100% 2px no-repeat;
}

.shelf-label {
  margin: 0 4px 10px;
  font-size: 13.5px; font-weight: 700; color: var(--teal);
}

.shelf-stack { display: grid; gap: 9px; }

.tile {
  display: flex; align-items: center; gap: 12px;
  padding: 12px;
  border: 1px solid var(--rule); border-radius: 14px;
  background: var(--card);
}

.tile-icon {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 11px;
  background: var(--emerald-wash);
  color: var(--teal); font-weight: 800; font-size: 17px;
  overflow: hidden;
}
.tile-icon img { width: 100%; height: 100%; object-fit: contain; padding: 9px; }
.tile-icon img.is-cover { padding: 0; object-fit: cover; }

.tile-body { flex: 1; min-width: 0; }
.tile-body h3 {
  font-size: 15px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tile-body p {
  margin: 3px 0 0;
  font-size: 13px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Ayraç rengi sayfada sadece burada: bu link değerli işaretli. */
.tile-mark {
  flex: 0 0 auto;
  width: 13px; height: 18px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 72%, 0 100%);
  background: var(--rule);
}
.tile-mark.is-on { background: var(--amber); }

.shelf-foot { margin: 14px 4px 0; font-size: 13px; color: var(--muted); }

/* Tek hareket: kullanıcı bir link yapıştırdığında kartın rafa düşüşü. */
.tile.is-new { animation: drop 380ms cubic-bezier(0.2, 0.7, 0.3, 1); }
@keyframes drop {
  from { opacity: 0; transform: translateY(-14px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}

/* -------------------------------------------------------------- adımlar */

.steps-band { padding: 56px 0; border-top: 1px solid var(--rule); }
.steps-band h2 { font-size: clamp(26px, 3.6vw, 36px); margin-bottom: 30px; }

.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 30px; }
.steps li { max-width: 62ch; }

.step-num {
  display: inline-grid; place-items: center;
  width: 28px; height: 28px; margin-bottom: 12px;
  border-radius: 50%;
  background: var(--ink); color: #fff;
  font-size: 13px; font-weight: 700;
}
.steps h3 { font-size: 19px; font-weight: 700; margin-bottom: 6px; }
.steps p { margin: 0; color: var(--muted); }

/* ------------------------------------------------------------ gizlilik */

.keep-band {
  padding: 68px 0;
  background: var(--ink);
  color: #DCE8E9;
}
.keep-band h2 { font-size: clamp(26px, 3.6vw, 36px); color: #fff; margin-bottom: 24px; }
.keep-lead { margin: 0 0 16px; max-width: 68ch; color: #A9C2C6; }

.facts { margin: 36px 0 0; display: grid; gap: 0; }
.facts > div { padding: 20px 0; border-top: 1px solid rgba(220, 232, 233, 0.16); }
.facts dt { font-weight: 700; color: #fff; margin-bottom: 5px; }
.facts dd { margin: 0; color: #A9C2C6; font-size: 15.5px; max-width: 66ch; }

/* -------------------------------------------------------------- kurulum */

.setup-band { padding: 64px 0; }
.setup-band h2 { font-size: clamp(26px, 3.6vw, 36px); margin-bottom: 12px; }
.setup-lead { margin: 0 0 32px; color: var(--muted); max-width: 60ch; }

.setup-cols { display: grid; gap: 28px; }
.setup-cols h3 { font-size: 19px; font-weight: 700; margin-bottom: 8px; }
.setup-cols p { margin: 0 0 10px; color: var(--muted); max-width: 52ch; }
.setup-cols strong { color: var(--ink); font-weight: 700; }

/* ------------------------------------------------------------------ alt */

.foot { padding: 44px 0 64px; border-top: 1px solid var(--rule); }
.foot-links {
  margin: 24px 0 0;
  display: flex; flex-wrap: wrap; gap: 8px 20px;
  font-size: 15px;
}
.foot-line { margin: 14px 0 0; font-size: 14px; color: var(--muted); }

/* ------------------------------------------------------------- geniş ekran */

@media (min-width: 900px) {
  .opening {
    grid-template-columns: 1.05fr 0.95fr;
    gap: 56px;
    padding-top: 44px;
    padding-bottom: 88px;
  }
  .shelf-frame { position: sticky; top: 28px; }
  .steps { grid-template-columns: repeat(3, 1fr); gap: 34px; }
  .setup-cols { grid-template-columns: 1fr 1fr; gap: 48px; }
  .facts > div { display: grid; grid-template-columns: 200px 1fr; gap: 24px; }
  .facts dt { margin: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .tile.is-new { animation: none; }
}