/* Kitabizi — işıqlı, rəngli, müasir */ :root { color-scheme: light; --fon: #ffffff; --fon-2: #f6f7f9; --seth: #ffffff; --hasiye: #e6e8ec; --hasiye-2: #d6dae1; --metn: #15181d; --metn-2: #5a6472; --metn-3: #8b95a4; --esas: #0d9488; /* firuzəyi-yaşıl */ --esas-tund: #0b7c72; --esas-acig: #e6f5f3; --pulsuz: #e8590c; --pulsuz-fon: #fff2e8; --yeni: #16a34a; --ela: #16a34a; --yaxsi: #ca8a04; --orta: #ea580c; --zedeli:#dc2626; --k: 14px; /* künc */ --k-ki: 10px; --en: 62rem; --kolge: 0 1px 2px rgba(18,22,30,.05), 0 1px 3px rgba(18,22,30,.04); --kolge-2: 0 4px 16px rgba(18,22,30,.08), 0 2px 4px rgba(18,22,30,.04); --bl0:#f97316; --bl1:#0d9488; --bl2:#6366f1; --bl3:#ec4899; --bl4:#22c55e; --bl5:#06b6d4; --bl6:#eab308; --bl7:#8b5cf6; --bl8:#3b82f6; --bl9:#ef4444; --bl10:#14b8a6; --bl11:#f43f5e; --yazi: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; } /* Standart tema həmişə ağdır. Qaranlıq yalnız açıq istəklə: və ya ?tema=qaranliq */ :root[data-tema="qaranliq"] { color-scheme: dark; --fon: #0f1318; --fon-2: #161b22; --seth: #181d25; --hasiye: #262d38; --hasiye-2: #333c4a; --metn: #eef1f5; --metn-2: #a3aebe; --metn-3: #78849a; --esas: #2dd4bf; --esas-tund: #5eead4; --esas-acig: #11312e; --pulsuz: #fb923c; --pulsuz-fon: #3a2412; --yeni: #4ade80; --ela: #4ade80; --yaxsi: #facc15; --orta: #fb923c; --zedeli: #f87171; --kolge: 0 1px 2px rgba(0,0,0,.4); --kolge-2: 0 6px 20px rgba(0,0,0,.45); } *, *::before, *::after { box-sizing: border-box; } [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--fon); color: var(--metn); font-family: var(--yazi); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } img { max-width: 100%; } .qab { width: 100%; max-width: var(--en); margin: 0 auto; padding: 0 1.15rem; } /* ---------- başlıq ---------- */ .bas { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--fon) 88%, transparent); backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--hasiye); } .bas-ic { display: flex; align-items: center; gap: .8rem; min-height: 3.75rem; } .nisan { display: inline-flex; align-items: center; gap: .5rem; font-size: 1.28rem; font-weight: 800; letter-spacing: -.03em; } .nisan-im { width: 1.85rem; height: 1.85rem; border-radius: 8px; background: linear-gradient(135deg, var(--esas), #22c55e); display: grid; place-items: center; color: #fff; font-size: .95rem; font-weight: 800; } .bas-sat { margin-inline-start: auto; } /* ---------- düymələr ---------- */ .dugme { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; font-family: inherit; font-size: .92rem; font-weight: 700; padding: .68rem 1.15rem; border-radius: 999px; border: 1px solid transparent; background: var(--esas); color: #fff; cursor: pointer; white-space: nowrap; transition: background .15s ease, transform .08s ease, box-shadow .15s ease; } .dugme:hover { background: var(--esas-tund); box-shadow: var(--kolge-2); } .dugme:active { transform: translateY(1px); } .dugme-bos { background: var(--seth); color: var(--metn); border-color: var(--hasiye-2); } .dugme-bos:hover { background: var(--fon-2); border-color: var(--metn-3); box-shadow: none; } .dugme-eni { width: 100%; padding: .95rem; font-size: 1rem; } /* ---------- axtarış ---------- */ .axt { display: flex; align-items: center; gap: .55rem; background: var(--fon-2); border: 1.5px solid var(--hasiye); border-radius: 999px; padding: .3rem .3rem .3rem 1.1rem; transition: border-color .15s ease, box-shadow .15s ease; } .axt:focus-within { border-color: var(--esas); box-shadow: 0 0 0 4px color-mix(in srgb, var(--esas) 14%, transparent); } .axt input { flex: 1 1 0; min-width: 0; border: 0; background: transparent; color: inherit; font-family: inherit; font-size: 1rem; padding: .62rem 0; } .axt input:focus { outline: none; } .axt button { border: 0; border-radius: 999px; cursor: pointer; background: var(--esas); color: #fff; font-family: inherit; font-weight: 700; font-size: .88rem; padding: .62rem 1.15rem; } .axt button:hover { background: var(--esas-tund); } /* ---------- qəhrəman ---------- */ .qehreman { padding: 2rem 0 .4rem; } .qehreman h1 { margin: 0 0 .55rem; font-size: clamp(1.7rem, 6vw, 2.5rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.12; } .qehreman h1 em { font-style: normal; background: linear-gradient(120deg, var(--esas), #22c55e 70%); -webkit-background-clip: text; background-clip: text; color: transparent; } .qehreman p { margin: 0 0 1.35rem; color: var(--metn-2); font-size: 1.02rem; } /* ---------- bölmə lövhələri ---------- */ .bolmeler { display: grid; grid-template-columns: repeat(2, 1fr); gap: .7rem; margin: 1.6rem 0 .5rem; } @media (min-width: 44rem) { .bolmeler { grid-template-columns: repeat(3, 1fr); } } .blv { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: .3rem; min-width: 0; padding: 1rem 1rem 1.05rem; border-radius: var(--k); border: 1px solid var(--hasiye); background: var(--seth); box-shadow: var(--kolge); transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease; } .blv:hover { transform: translateY(-2px); box-shadow: var(--kolge-2); border-color: var(--hasiye-2); } .blv::after { content: ""; position: absolute; inset-inline-end: -28%; top: -60%; width: 78%; aspect-ratio: 1; border-radius: 50%; background: var(--bl, var(--esas)); opacity: .14; } .blv b { font-size: 1.02rem; font-weight: 700; letter-spacing: -.015em; position: relative; z-index: 1; } .blv > span { font-size: .8rem; color: var(--metn-3); font-weight: 500; position: relative; z-index: 1; } .blv > span.blv-nis { width: 2.1rem; height: 2.1rem; border-radius: 9px; margin-bottom: .45rem; background: var(--bl, var(--esas)); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 1rem; position: relative; z-index: 1; box-shadow: 0 2px 8px color-mix(in srgb, var(--bl, var(--esas)) 45%, transparent); } /* ---------- bölmə başlığı ---------- */ .sec { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 2.2rem 0 .95rem; } .sec h2 { margin: 0; font-size: 1.22rem; font-weight: 800; letter-spacing: -.025em; } .sec a { font-size: .87rem; font-weight: 600; color: var(--esas); white-space: nowrap; } /* ---------- kitab kartları ---------- */ .tor { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem .8rem; } @media (min-width: 34rem) { .tor { grid-template-columns: repeat(3, 1fr); gap: 1.3rem 1rem; } } @media (min-width: 52rem) { .tor { grid-template-columns: repeat(4, 1fr); } } .kart { display: flex; flex-direction: column; min-width: 0; } .kart:hover .qapaq { transform: translateY(-3px); box-shadow: var(--kolge-2); } .qapaq { position: relative; display: block; width: 100%; aspect-ratio: 3 / 4; border-radius: var(--k-ki); overflow: hidden; background: var(--fon-2); box-shadow: var(--kolge); transition: transform .16s ease, box-shadow .16s ease; } .qapaq img { width: 100%; height: 100%; object-fit: cover; display: block; } /* şəkilsiz kitab üçün yaradılan rəngli üz qabığı */ .qapaq-yaz { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: .85rem .75rem .8rem 1.05rem; background: linear-gradient(150deg, var(--q1), var(--q2)); color: #fff; } .qapaq-yaz::before { /* cild tikişi */ content: ""; position: absolute; inset-inline-start: 0; top: 0; bottom: 0; width: 6px; background: rgba(0,0,0,.18); } .qapaq-yaz::after { /* işıq ləkəsi */ content: ""; position: absolute; inset-inline-end: -22%; bottom: -28%; width: 72%; aspect-ratio: 1; border-radius: 50%; background: rgba(255,255,255,.13); } .qy-ad { position: relative; font-size: .82rem; font-weight: 800; line-height: 1.28; letter-spacing: -.015em; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; text-shadow: 0 1px 3px rgba(0,0,0,.2); } .qy-alt { position: relative; font-size: .65rem; font-weight: 600; line-height: 1.3; opacity: .88; padding-top: .45rem; border-top: 1px solid rgba(255,255,255,.35); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } /* elan səhifəsindəki böyük qabıq */ .elan-qapaq .qy-ad { font-size: 1.35rem; -webkit-line-clamp: 6; } .elan-qapaq .qy-alt { font-size: .88rem; padding-top: .7rem; } .elan-qapaq .qapaq-yaz { padding: 1.4rem 1.2rem 1.3rem 1.7rem; } /* kiçik sətir qabığında yalnız başlıq */ .setir .qy-alt { display: none; } .setir .qy-ad { font-size: .52rem; -webkit-line-clamp: 3; } .setir .qapaq-yaz { padding: .35rem .3rem .35rem .5rem; } .setir .qapaq-yaz::before { width: 3px; } .q0 { --q1:#f97316; --q2:#ea580c; } .q1 { --q1:#14b8a6; --q2:#0d9488; } .q2 { --q1:#6366f1; --q2:#4f46e5; } .q3 { --q1:#ec4899; --q2:#db2777; } .q4 { --q1:#22c55e; --q2:#16a34a; } .q5 { --q1:#06b6d4; --q2:#0891b2; } .q6 { --q1:#eab308; --q2:#ca8a04; } .q7 { --q1:#ef4444; --q2:#dc2626; } .q8 { --q1:#8b5cf6; --q2:#7c3aed; } .q9 { --q1:#3b82f6; --q2:#2563eb; } .nisanca { position: absolute; inset-block-start: .5rem; inset-inline-end: .5rem; font-size: .72rem; font-weight: 800; letter-spacing: .01em; padding: .26rem .52rem; border-radius: 999px; background: var(--pulsuz); color: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.18); } .nisanca-dest { background: rgba(0,0,0,.62); } .kart h3 { margin: .62rem 0 .25rem; font-size: .93rem; font-weight: 700; line-height: 1.3; letter-spacing: -.015em; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .kart-alt { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin-top: auto; } .kart-qiy { font-size: 1.02rem; font-weight: 800; letter-spacing: -.02em; } .kart-qiy.pulsuz { color: var(--pulsuz); } .vahid { font-size: .78em; font-weight: 600; color: var(--metn-2); margin-inline-start: .1em; } .meta { display: flex; align-items: center; gap: .32rem; flex-wrap: wrap; font-size: .78rem; color: var(--metn-3); font-weight: 500; } .meta i { font-style: normal; opacity: .55; } .vez { display: inline-flex; align-items: center; gap: .3rem; } .vez::before { content: ""; width: .48rem; height: .48rem; border-radius: 50%; background: var(--v, var(--metn-3)); flex: none; } .v-yeni{--v:var(--yeni)} .v-ela{--v:var(--ela)} .v-yaxsi{--v:var(--yaxsi)} .v-orta{--v:var(--orta)} .v-zedeli{--v:var(--zedeli)} /* ---------- sətir (kiçik siyahılar üçün) ---------- */ .setir { display: grid; grid-template-columns: 3.1rem 1fr auto; gap: .85rem; align-items: center; padding: .7rem; border-radius: var(--k-ki); transition: background .12s ease; } .setir:hover { background: var(--fon-2); } .setir > * { min-width: 0; } .setir .qapaq { width: 3.1rem; box-shadow: none; } .setir h3 { margin: 0 0 .18rem; font-size: .9rem; font-weight: 700; line-height: 1.3; } .setir .kart-qiy { font-size: .95rem; } /* ---------- yol ---------- */ .yol { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; padding: 1.15rem 0 0; font-size: .82rem; color: var(--metn-3); font-weight: 500; } .yol a:hover { color: var(--esas); } h1.sehife { margin: .55rem 0 .3rem; font-size: clamp(1.5rem, 5vw, 2rem); font-weight: 800; letter-spacing: -.032em; line-height: 1.15; } .altyazi { color: var(--metn-2); font-size: .92rem; font-weight: 500; } /* ---------- elan səhifəsi ---------- */ .elan-tor { display: grid; gap: 1.4rem; margin-top: 1.3rem; } @media (min-width: 44rem) { .elan-tor { grid-template-columns: 17rem 1fr; gap: 2rem; } } .elan-qapaq { border-radius: var(--k); overflow: hidden; box-shadow: var(--kolge-2); max-width: 14rem; } @media (min-width: 44rem) { .elan-qapaq { max-width: none; } } .elan-qapaq .qapaq { border-radius: 0; box-shadow: none; } .elan-qapaq .qapaq-yaz span { font-size: 1.15rem; -webkit-line-clamp: 6; } /* Detail page gallery: whole photo, no crop, swipeable on a phone. */ .qalereya { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; border-radius: var(--k); background: var(--fon-2); border: 1px solid var(--hasiye); -webkit-overflow-scrolling: touch; /* The box takes the first photo's own proportions, set inline from the stored image size. The photo then fills it edge to edge with no bars and nothing cropped. Very tall photos are capped so they do not push the rest of the page off screen. */ max-height: 72vh; margin-inline: auto; } .qalereya img { flex: 0 0 100%; scroll-snap-align: center; width: 100%; height: 100%; object-fit: contain; display: block; } .qalereya-say { margin: .5rem 0 0; font-size: .82rem; color: var(--metn-3); font-weight: 500; } .elan-qiy { display: flex; align-items: baseline; gap: .55rem; flex-wrap: wrap; font-size: 2.1rem; font-weight: 800; letter-spacing: -.035em; margin: .2rem 0 1rem; } .elan-qiy.pulsuz { color: var(--pulsuz); } .elan-qiy .vahid { font-size: .5em; } .cip { display: inline-flex; align-items: center; gap: .4rem; font-size: .82rem; font-weight: 600; padding: .38rem .7rem; border-radius: 999px; background: var(--fon-2); border: 1px solid var(--hasiye); color: var(--metn-2); } .cipler { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 1.1rem; } .tesvir { background: var(--fon-2); border: 1px solid var(--hasiye); border-radius: var(--k); padding: .95rem 1.1rem; margin: 0 0 1.2rem; font-size: .97rem; color: var(--metn-2); line-height: 1.6; } .elaqe { display: grid; gap: .6rem; margin-bottom: 1.2rem; } .elan-mel { display: grid; gap: .55rem; margin: 0 0 1.3rem; } .elan-mel div { display: flex; gap: .7rem; font-size: .93rem; } .elan-mel dt { color: var(--metn-3); min-width: 6.2rem; font-weight: 500; } .elan-mel dd { margin: 0; font-weight: 600; } .elan-mel a { color: var(--esas); } /* ---------- boş hal ---------- */ .bos { text-align: center; padding: 3rem 1.2rem; margin: 1.2rem 0; border: 1.5px dashed var(--hasiye-2); border-radius: var(--k); background: var(--fon-2); } .bos p { margin: 0 0 1.15rem; color: var(--metn-2); font-size: 1.02rem; font-weight: 500; } /* ---------- forma ---------- */ .forma { max-width: 34rem; } .sahe { margin: 1.35rem 0; } .sahe > label, .etiket { display: block; margin-bottom: .45rem; font-size: .88rem; font-weight: 700; color: var(--metn); } .sahe input[type=text], .sahe input[type=number], .sahe input[type=tel], .sahe input[type=search], .sahe textarea, .sahe select { width: 100%; font-family: inherit; font-size: 1rem; color: inherit; background: var(--seth); border: 1.5px solid var(--hasiye); border-radius: var(--k-ki); padding: .78rem .9rem; transition: border-color .14s ease, box-shadow .14s ease; } .sahe textarea { resize: vertical; } .sahe input:focus, .sahe textarea:focus, .sahe select:focus { outline: none; border-color: var(--esas); box-shadow: 0 0 0 4px color-mix(in srgb, var(--esas) 14%, transparent); } .ipucu { font-size: .84rem; color: var(--metn-3); margin-top: .42rem; } .xeta { color: var(--zedeli); font-size: .86rem; font-weight: 600; margin-top: .4rem; } .secimler { display: flex; flex-wrap: wrap; gap: .5rem; } .secimler label { display: inline-flex; align-items: center; gap: .4rem; border: 1.5px solid var(--hasiye); background: var(--seth); padding: .55rem .9rem; border-radius: 999px; cursor: pointer; font-size: .9rem; font-weight: 600; transition: all .13s ease; } .secimler label:hover { border-color: var(--hasiye-2); } .secimler input { position: absolute; opacity: 0; pointer-events: none; } .secimler label:has(input:checked) { border-color: var(--esas); background: var(--esas-acig); color: var(--esas-tund); } /* Visually hidden but still a real, clickable input. A 0x0 input is ignored by some browsers when the label forwards the click. */ .fayl { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .sahe > label.fayl-etiket { display: flex; align-items: center; justify-content: center; gap: .55rem; border: 1.5px dashed var(--hasiye-2); background: var(--fon-2); border-radius: var(--k-ki); padding: 1.15rem 1rem; cursor: pointer; font-size: .94rem; font-weight: 600; color: var(--metn-2); margin-bottom: 0; transition: all .14s ease; } .sahe > label.fayl-etiket:hover { border-color: var(--esas); background: var(--esas-acig); color: var(--esas-tund); } .sahe > label.fayl-etiket::before { content: "＋"; font-size: 1.05rem; } .neticeler { border: 1.5px solid var(--hasiye); border-radius: var(--k-ki); background: var(--seth); box-shadow: var(--kolge-2); margin-top: .45rem; overflow: hidden; } .netice { display: block; width: 100%; text-align: start; padding: .7rem .9rem; border: 0; border-bottom: 1px solid var(--hasiye); background: transparent; color: inherit; cursor: pointer; font: inherit; } .netice:last-child { border-bottom: 0; } .netice:hover { background: var(--esas-acig); } .netice { font-size: .96rem; font-weight: 600; } .netice-yeni { color: var(--esas-tund); font-weight: 700; } .netice-yeni::before { content: "＋ "; } .secildi { display: flex; align-items: center; justify-content: space-between; gap: .8rem; border: 1.5px solid var(--esas); background: var(--esas-acig); border-radius: var(--k-ki); padding: .75rem .9rem; } .secildi b { font-size: .96rem; font-weight: 700; } .secildi button { border: 0; background: transparent; color: var(--esas-tund); font: inherit; font-size: .85rem; font-weight: 700; cursor: pointer; } .lovber { position: sticky; bottom: 0; z-index: 10; background: color-mix(in srgb, var(--fon) 92%, transparent); backdrop-filter: blur(10px); border-top: 1px solid var(--hasiye); padding: .75rem 0 max(.75rem, env(safe-area-inset-bottom)); margin-top: 1.6rem; } /* ---------- alt ---------- */ .alt { border-top: 1px solid var(--hasiye); margin-top: 3.5rem; padding: 1.6rem 0 3rem; display: flex; flex-wrap: wrap; gap: .5rem 1.3rem; font-size: .86rem; color: var(--metn-3); font-weight: 500; } .alt a:hover { color: var(--esas); } /* avtomatik tapılan bölmə sətri */ .bolme-tapildi { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-top: .55rem; padding: .6rem .85rem; background: var(--esas-acig); border: 1px solid color-mix(in srgb, var(--esas) 28%, transparent); border-radius: var(--k-ki); font-size: .9rem; color: var(--metn-2); } .bolme-tapildi b { color: var(--esas-tund); font-weight: 700; } .bolme-tapildi button { margin-inline-start: auto; border: 0; background: transparent; color: var(--esas-tund); font: inherit; font-size: .85rem; font-weight: 700; cursor: pointer; text-decoration: underline; } /* geri oxu — yalnız telefonda; kompüterdə yol sətri onsuz da var */ .geri { display: inline-flex; align-items: center; justify-content: center; width: 2.35rem; height: 2.35rem; flex: none; margin-inline-start: -.5rem; border-radius: 50%; color: var(--metn); transition: background .13s ease; } .geri:hover, .geri:active { background: var(--fon-2); } @media (min-width: 44rem) { .geri { display: none; } } /* Seçilmiş şəkillərin önbaxışı — bir-bir əlavə edib çıxarmaq üçün */ .secilmis { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .6rem; } .secilmis:empty { display: none; } .secilmis-elem { position: relative; width: 4.5rem; aspect-ratio: 1; } .secilmis-elem img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--k-ki); border: 1px solid var(--hasiye); } .secilmis-sil { position: absolute; top: -.4rem; inset-inline-end: -.4rem; width: 1.4rem; height: 1.4rem; border-radius: 50%; border: 0; cursor: pointer; line-height: 1; background: var(--metn); color: var(--fon); font-size: 1rem; font-family: inherit; display: grid; place-items: center; box-shadow: var(--kolge); } /* Şəklə klikləyəndə tam ölçüdə açılır */ .boyudu { position: fixed; inset: 0; z-index: 100; background: rgba(10, 12, 16, .92); display: grid; place-items: center; padding: 1.5rem; } .boyudu img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 6px; } .boyudu-bagla { position: absolute; top: .9rem; inset-inline-end: .9rem; width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 0; cursor: pointer; background: rgba(255,255,255,.14); color: #fff; font-size: 1.5rem; line-height: 1; font-family: inherit; display: grid; place-items: center; } .boyudu-bagla:hover { background: rgba(255,255,255,.26); } .qalereya img[data-boyut] { cursor: zoom-in; } /* Böyüdücüdə şəkillər arası keçid */ .boyudu-alt { position: absolute; inset-inline: 0; bottom: 1.1rem; display: flex; align-items: center; justify-content: center; gap: 1rem; color: rgba(255,255,255,.9); font-size: .85rem; font-weight: 600; font-variant-numeric: tabular-nums; } .boyudu-ox { width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 0; cursor: pointer; background: rgba(255,255,255,.14); color: #fff; display: grid; place-items: center; } .boyudu-ox:hover { background: rgba(255,255,255,.28); }