/* Ana sayfa (taslak C · Tanıtım). Ortak tema ve menü: site.css */
.band { background:var(--accent); color:var(--on-accent); }
.hero .wrap { display:grid; grid-template-columns:1.1fr .9fr; gap:32px; align-items:center; padding-top:40px; }
.hero h1 { font-family:Lora, Georgia, serif; font-weight:400; font-size:56px; line-height:1.06; margin:0 0 18px; }
.hero p { font-size:18px; opacity:.88; max-width:500px; margin:0 0 28px; }
.hero .stores { padding-bottom:56px; }
.phone { justify-self:center; align-self:end; width:290px; height:430px; border-radius:38px 38px 0 0; background:#111; padding:12px 12px 0; box-shadow:0 30px 60px rgba(0,0,0,.3); }
.screen { background:var(--paper); color:var(--ink); height:100%; border-radius:28px 28px 0 0; padding:20px 16px; overflow:hidden; }
.screen .hd { display:flex; justify-content:space-between; font-size:12px; color:var(--muted); }
.screen .coins { color:var(--gold); }
.screen h2 { font-family:Lora, Georgia, serif; font-weight:400; font-size:24px; margin:10px 0 12px; line-height:1.2; }
.screen .row { display:flex; gap:10px; min-height:109px; }
.screen .mini { display:flex; gap:6px; margin:12px 0; overflow:hidden; }
.screen .mini span { font-size:10px; padding:3px 8px; border-radius:999px; background:var(--sage); white-space:nowrap; }
.screen .mini span:first-child { background:var(--accent); color:var(--on-accent); }
.screen .gift, .screen .cont { margin-top:10px; background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:10px 12px; font-size:12px; }
.screen .gift { display:flex; justify-content:space-between; } .screen .gift b { color:var(--gold); }
.screen .cont { display:grid; gap:4px; } .screen .cont span { color:var(--muted); }
.screen .cont i { height:4px; background:var(--sage); border-radius:4px; display:block; }
.screen .cont em { display:block; height:100%; width:14%; background:var(--wine); border-radius:4px; }

.feat { display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; padding-top:48px; }
.card { background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:20px; }
.card .ic { width:40px; height:40px; border-radius:12px; background:var(--sage); color:var(--accent); display:grid; place-items:center; margin-bottom:12px; font-size:20px; }
.card h3 { font-size:17px; font-weight:500; margin:0 0 6px; }
.card p { margin:0; font-size:14px; color:var(--muted); }
h2.sec { font-family:Lora, Georgia, serif; font-weight:400; font-size:34px; margin:64px 0 8px; }
.sub { color:var(--muted); margin:0 0 20px; }
.tabs { display:flex; gap:4px; border-bottom:1px solid var(--line); overflow-x:auto; margin-bottom:24px; scrollbar-width:thin; }
.tabs button { border:0; background:none; padding:12px 16px; font:500 15px "DM Sans", sans-serif; color:var(--muted); border-bottom:2px solid transparent; cursor:pointer; white-space:nowrap; }
.tabs button[aria-selected="true"] { color:var(--ink); border-color:var(--wine); }
.state { color:var(--muted); margin:0; }
.state:empty { display:none; }
.grid { display:grid; grid-template-columns:repeat(2, 1fr); gap:18px; }
.bk { display:grid; grid-template-columns:110px 1fr; gap:18px; background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:16px; align-items:start; }
.bk h3 { font-family:Lora, Georgia, serif; font-weight:400; font-size:21px; margin:2px 0 4px; line-height:1.25; }
.bk .s { display:flex; gap:8px; font-size:12px; flex-wrap:wrap; }
.bk .s span { background:var(--sage); border-radius:999px; padding:2px 9px; }
.bk .s span.c { background:var(--rose); }
.bk p { font-size:14px; color:var(--muted); margin:8px 0 0; display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden; cursor:pointer; }
.bk p.open { -webkit-line-clamp:unset; display:block; }
.more { text-align:center; margin-top:20px; }
.more button { font:500 15px "DM Sans", sans-serif; color:var(--ink); background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:10px 22px; cursor:pointer; }

/* Kapak: mobil Cover.tsx ile aynı üç desen; kitabın kapak görseli varsa üstüne konur ve başlık gizlenir (görsel yüklenemezse JS has-img'i kaldırır). */
.cover { position:relative; width:100%; aspect-ratio:156/222; border-radius:4px; overflow:hidden; color:#fff; box-shadow:0 8px 20px rgba(0,0,0,.18); container-type:inline-size; }
.cover svg, .cover img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.cover.has-img .ct { display:none; }
.cover .ct { position:absolute; left:0; right:0; top:0; padding:8.5%; font-family:Lora, Georgia, serif; line-height:1.12; font-size:14.5cqw; overflow-wrap:anywhere; }
.screen .cover { width:76px; flex:none; }

.steps { display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; counter-reset:s; }
.steps .card::before { counter-increment:s; content:counter(s); font-family:Lora, Georgia, serif; font-size:36px; color:var(--wine); display:block; line-height:1; margin-bottom:8px; }
.cta { margin-top:64px; border-radius:24px; padding:40px; display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap; }
.cta h2 { font-family:Lora, Georgia, serif; font-weight:400; font-size:32px; margin:0; }

@media (max-width:860px) {
  .hero .wrap { grid-template-columns:1fr; padding-top:24px; }
  .hero h1 { font-size:38px; } .hero p { font-size:16px; }
  .hero .stores { padding-bottom:28px; }
  .phone { width:240px; height:300px; }
  .feat { grid-template-columns:1fr 1fr; gap:12px; padding-top:28px; } .card { padding:16px; }
  h2.sec { font-size:28px; margin-top:44px; }
  .grid { grid-template-columns:1fr; } .bk { grid-template-columns:88px 1fr; gap:14px; }
  .steps { grid-template-columns:1fr; }
  .cta { padding:28px 20px; } .cta h2 { font-size:26px; }
}