.page-harf{min-height:100vh;background:var(--bg-primary,#f8f9ff);color:var(--text-primary,#1a1a2e);font-family:Inter,system-ui,sans-serif}.page-harf.dark{--bg-primary:#0f0f1a;--bg-secondary:#1a1a2e;--bg-card:#1e1e35;--bg-card-hover:#252545;--text-primary:#e8e8ff;--text-secondary:#a0a0c0;--text-muted:#6060a0;--border-color:#2a2a4a;--border-hover:#4040a0;--input-bg:#1a1a30;--shadow:0 4px 24px rgba(0,0,0,.4);--accent:#7c6fff;--accent2:#a78bfa}.page-harf:not(.dark){--bg-primary:#f5f5ff;--bg-secondary:#eef;--bg-card:#fff;--bg-card-hover:#f8f8ff;--text-primary:#1a1a3e;--text-secondary:#4a4a6a;--text-muted:#88a;--border-color:#e0e0f0;--border-hover:#8080cc;--input-bg:#fff;--shadow:0 4px 24px rgba(80,60,200,.08);--accent:#65e;--accent2:#8b5cf6}.harf-hero{background:linear-gradient(135deg,#1a1040,#2d1b69 40%,#0f2460);padding:3rem 1rem 2.5rem;text-align:center;position:relative;overflow:hidden}.harf-hero:before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 30% 50%,rgba(124,111,255,.25) 0,transparent 60%),radial-gradient(ellipse at 70% 20%,rgba(167,139,250,.15) 0,transparent 50%);pointer-events:none}.harf-hero-badge{display:inline-flex;align-items:center;gap:.5rem;background:rgba(124,111,255,.2);border:1px solid rgba(124,111,255,.4);color:#c4b5fd;padding:.35rem 1rem;border-radius:2rem;font-size:.8rem;font-weight:600;letter-spacing:.05em;margin-bottom:1.25rem}.harf-hero h1{font-size:clamp(1.8rem,5vw,3rem);font-weight:800;color:#fff;line-height:1.4;margin:0 0 .75rem}.harf-hero h1 span{background:linear-gradient(90deg,#a78bfa,#60a5fa);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;padding-top:.2em;padding-bottom:.2em;line-height:1.4;display:inline-block}.harf-hero-sub{color:#c4b5fd;font-size:clamp(.95rem,2.5vw,1.1rem);max-width:560px;margin:0 auto 2rem;opacity:.9}.harf-input-box{max-width:640px;margin:0 auto;background:hsla(0,0%,100%,.07);border:1.5px solid rgba(124,111,255,.35);border-radius:1.25rem;padding:1.25rem;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.harf-input-row{display:flex;gap:.6rem;align-items:stretch}.harf-main-input{flex:1 1;background:hsla(0,0%,100%,.1);border:1.5px solid rgba(124,111,255,.3);border-radius:.75rem;padding:.85rem 1rem;color:#fff;font-size:1rem;font-family:inherit;outline:none;transition:border-color .2s;resize:none;min-height:52px}.harf-main-input::placeholder{color:rgba(196,181,253,.5)}.harf-main-input:focus{border-color:rgba(167,139,250,.7)}.harf-input-actions{display:flex;gap:.5rem;margin-top:.75rem;flex-wrap:wrap;align-items:center;justify-content:space-between}.harf-quick-btn{background:rgba(124,111,255,.15);border:1px solid rgba(124,111,255,.3);border-radius:.5rem;color:#c4b5fd;padding:.4rem .75rem;font-size:.8rem;cursor:pointer;transition:all .2s}.harf-quick-btn:hover{background:rgba(124,111,255,.3)}.harf-char-counter{color:rgba(196,181,253,.6);font-size:.78rem;margin-left:auto}.harf-hero-stats{display:flex;gap:1.5rem;justify-content:center;margin-top:1.75rem;flex-wrap:wrap}.harf-stat{display:flex;flex-direction:column;align-items:center;gap:.2rem}.harf-stat-num{font-size:1.3rem;font-weight:800;color:#a78bfa}.harf-stat-label{font-size:.73rem;color:#c4b5fd;opacity:.75}.harf-container{max-width:1200px;margin:0 auto;padding:0 1rem}.harf-section-title{font-size:1.35rem;font-weight:700;color:var(--text-primary);margin:0 0 1rem;display:flex;align-items:center;gap:.5rem}.harf-filters-wrap{padding:1.5rem 0 .5rem}.harf-filter-chips{display:flex;gap:.5rem;flex-wrap:wrap}.harf-chip{background:var(--bg-card);border:1.5px solid var(--border-color);border-radius:2rem;padding:.4rem .9rem;font-size:.82rem;font-weight:600;color:var(--text-secondary);cursor:pointer;transition:all .18s;white-space:nowrap}.harf-chip.active,.harf-chip:hover{background:var(--accent);border-color:var(--accent);color:#fff}.harf-results-section{padding:1.5rem 0}.harf-results-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));grid-gap:.85rem;gap:.85rem}.harf-style-card{background:var(--bg-card);border:1.5px solid var(--border-color);border-radius:1rem;padding:1rem 1.1rem;transition:all .2s;cursor:pointer}.harf-style-card:hover{border-color:var(--accent);box-shadow:var(--shadow);transform:translateY(-2px)}.harf-style-card.popular{border-color:rgba(167,139,250,.4)}.harf-card-label{font-size:.73rem;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;display:flex;align-items:center;gap:.4rem;margin-bottom:.4rem}.harf-popular-badge{background:linear-gradient(90deg,#7c6fff,#a78bfa);color:#fff;font-size:.65rem;padding:.1rem .45rem;border-radius:1rem;font-weight:700}.harf-preview-text{font-size:1.3rem;color:var(--text-primary);min-height:2rem;word-break:break-all;line-height:1.4;margin:.35rem 0 .75rem}.harf-card-footer{display:flex;align-items:center;justify-content:space-between;gap:.5rem}.harf-copy-btn{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;border:none;border-radius:.6rem;padding:.45rem 1rem;font-size:.82rem;font-weight:600;cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:.35rem}.harf-copy-btn:hover{opacity:.9;transform:scale(1.03)}.harf-copy-btn.copied{background:linear-gradient(135deg,#22c55e,#16a34a)}.harf-fav-btn{background:none;border:1.5px solid var(--border-color);border-radius:.6rem;width:34px;height:34px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:.9rem;transition:all .2s;color:var(--text-muted)}.harf-fav-btn.active,.harf-fav-btn:hover{border-color:#f43f5e;color:#f43f5e}.harf-az-nav-wrap{position:-webkit-sticky;position:sticky;top:0;z-index:40;background:var(--bg-primary);border-bottom:1px solid var(--border-color);padding:.6rem 0;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.harf-az-nav{display:flex;gap:.3rem;overflow-x:auto;scrollbar-width:none;padding:0 1rem}.harf-az-nav::-webkit-scrollbar{display:none}.harf-az-letter-btn{background:none;border:1.5px solid var(--border-color);border-radius:.5rem;width:36px;height:36px;font-size:.9rem;font-weight:700;color:var(--text-secondary);cursor:pointer;flex-shrink:0;transition:all .18s}.harf-az-letter-btn:hover{border-color:var(--accent);color:var(--accent)}.harf-az-letter-btn.active{background:var(--accent);border-color:var(--accent);color:#fff}.harf-az-section{padding:2.5rem 0 1rem}.harf-letter-section{padding:1rem 0 2rem;scroll-margin-top:80px}.harf-letter-heading{display:flex;align-items:center;gap:1rem;margin-bottom:1rem}.harf-letter-big{font-size:3.5rem;font-weight:900;line-height:1;background:linear-gradient(135deg,var(--accent),var(--accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;width:70px;text-align:center;flex-shrink:0;padding-top:.1em;padding-bottom:.1em}.harf-letter-meta h2{font-size:1.15rem;font-weight:700;color:var(--text-primary);margin:0 0 .2rem}.harf-letter-meta p{font-size:.82rem;color:var(--text-muted);margin:0}.harf-letter-variants{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));grid-gap:.6rem;gap:.6rem}.harf-variant-card{background:var(--bg-card);border:1.5px solid var(--border-color);border-radius:.85rem;padding:.75rem .6rem;text-align:center;transition:all .2s;cursor:pointer;position:relative}.harf-variant-card:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 4px 16px rgba(124,111,255,.15)}.harf-variant-char{font-size:2rem;line-height:1.3;margin-bottom:.3rem;display:block}.harf-variant-name{font-size:.68rem;color:var(--text-muted);font-weight:500}.harf-variant-copy{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(124,111,255,.9);border-radius:.8rem;color:#fff;font-weight:700;font-size:.85rem;opacity:0;transition:opacity .18s}.harf-variant-card:hover .harf-variant-copy{opacity:1}.harf-builder-section{padding:2rem 0}.harf-builder-box{background:var(--bg-card);border:1.5px solid var(--border-color);border-radius:1.25rem;padding:1.5rem}.harf-builder-row{display:flex;gap:.75rem;margin-bottom:1rem;flex-wrap:wrap}.harf-builder-input{flex:1 1;min-width:180px;background:var(--input-bg);border:1.5px solid var(--border-color);border-radius:.75rem;padding:.75rem 1rem;font-size:1rem;color:var(--text-primary);font-family:inherit;outline:none;transition:border-color .2s}.harf-builder-input:focus{border-color:var(--accent)}.harf-builder-btn{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;border:none;border-radius:.75rem;padding:.75rem 1.25rem;font-weight:700;font-size:.9rem;cursor:pointer;transition:opacity .2s}.harf-builder-btn:hover{opacity:.9}.harf-builder-results{display:flex;flex-direction:column;gap:.6rem}.harf-builder-result-row{display:flex;align-items:center;gap:.75rem;background:var(--bg-secondary,#eef);border-radius:.75rem;padding:.65rem 1rem}.page-harf.dark .harf-builder-result-row{background:#1a1a30}.harf-builder-result-text{flex:1 1;font-size:1.1rem;color:var(--text-primary);word-break:break-all}.harf-builder-style-label{font-size:.72rem;color:var(--text-muted);min-width:80px}.harf-builder-copy{background:none;border:1.5px solid var(--border-color);border-radius:.5rem;padding:.35rem .65rem;font-size:.78rem;font-weight:600;color:var(--accent);cursor:pointer;transition:all .18s;white-space:nowrap}.harf-builder-copy.copied,.harf-builder-copy:hover{background:var(--accent);color:#fff}.harf-favorites-section{padding:1.5rem 0}.harf-favs-grid{display:flex;flex-wrap:wrap;gap:.5rem}.harf-fav-item{background:var(--bg-card);border:1.5px solid var(--border-color);border-radius:.75rem;padding:.5rem 1rem;display:flex;align-items:center;gap:.5rem;font-size:1.1rem;color:var(--text-primary)}.harf-fav-remove{background:none;border:none;cursor:pointer;color:var(--text-muted);font-size:1rem;line-height:1;transition:color .15s}.harf-fav-remove:hover{color:#f43f5e}.harf-empty-state{text-align:center;padding:2rem;color:var(--text-muted);font-size:.9rem}.harf-empty-icon{font-size:2.5rem;display:block;margin-bottom:.75rem}.harf-toast{position:fixed;bottom:1.5rem;left:50%;transform:translateX(-50%) translateY(0);background:linear-gradient(135deg,#22c55e,#16a34a);color:#fff;padding:.75rem 1.5rem;border-radius:2rem;font-weight:700;font-size:.9rem;box-shadow:0 8px 32px rgba(34,197,94,.35);z-index:9999;display:flex;align-items:center;gap:.5rem;animation:toastIn .3s ease}@keyframes toastIn{0%{opacity:0;transform:translateX(-50%) translateY(20px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}.harf-article-wrap{padding:2rem 0 3rem}.harf-article-card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:1rem;padding:1.5rem;margin-bottom:1rem}.harf-article-card h2{font-size:1.15rem;font-weight:700;color:var(--text-primary);margin:0 0 .75rem}.harf-article-card li,.harf-article-card p{font-size:.95rem;color:var(--text-secondary);line-height:1.7}.harf-article-card ol,.harf-article-card ul{padding-left:1.25rem}.harf-related-section{padding:1.5rem 0 2.5rem}.harf-related-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));grid-gap:.75rem;gap:.75rem}.harf-related-card{background:var(--bg-card);border:1.5px solid var(--border-color);border-radius:1rem;padding:1rem;text-decoration:none;display:flex;flex-direction:column;align-items:center;gap:.5rem;text-align:center;transition:all .2s}.harf-related-card:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--shadow)}.harf-related-icon{font-size:1.75rem}.harf-related-label{font-size:.82rem;font-weight:600;color:var(--text-primary)}.harf-faq-section{padding:2rem 0}.harf-faq-item{background:var(--bg-card);border:1px solid var(--border-color);border-radius:.85rem;margin-bottom:.65rem;overflow:hidden}.harf-faq-q{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.25rem;cursor:pointer;font-weight:600;font-size:.95rem;color:var(--text-primary);gap:1rem}.harf-faq-q:hover,.harf-faq-toggle{color:var(--accent)}.harf-faq-toggle{font-size:1.25rem;flex-shrink:0;transition:transform .2s}.harf-faq-item.open .harf-faq-toggle{transform:rotate(45deg)}.harf-faq-answer{max-height:0;overflow:hidden;transition:max-height .3s ease}.harf-faq-item.open .harf-faq-answer{max-height:200px}.harf-faq-answer p{padding:0 1.25rem 1rem;color:var(--text-secondary);font-size:.9rem;line-height:1.65;margin:0}.harf-divider{border:none;border-top:1px solid var(--border-color);margin:0}@media (max-width:640px){.harf-results-grid{grid-template-columns:1fr 1fr}.harf-letter-variants{grid-template-columns:repeat(3,1fr)}.harf-related-grid{grid-template-columns:repeat(2,1fr)}.harf-builder-row{flex-direction:column}.harf-hero{padding:2rem 1rem}}