.page-harf{background:var(--bg-primary,#f8f9ff);min-height:100vh;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 #0006;--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 #503cc814;--accent:#65e;--accent2:#8b5cf6}.harf-hero{text-align:center;background:linear-gradient(135deg,#1a1040 0%,#2d1b69 40%,#0f2460 100%);padding:3rem 1rem 2.5rem;position:relative;overflow:hidden}.harf-hero:before{content:"";pointer-events:none;background:radial-gradient(at 30%,#7c6fff40 0%,#0000 60%),radial-gradient(at 70% 20%,#a78bfa26 0%,#0000 50%);position:absolute;inset:0}.harf-hero-badge{color:#c4b5fd;letter-spacing:.05em;background:#7c6fff33;border:1px solid #7c6fff66;border-radius:2rem;align-items:center;gap:.5rem;margin-bottom:1.25rem;padding:.35rem 1rem;font-size:.8rem;font-weight:600;display:inline-flex}.harf-hero h1{color:#fff;margin:0 0 .75rem;font-size:clamp(1.8rem,5vw,3rem);font-weight:800;line-height:1.4}.harf-hero h1 span{background:linear-gradient(90deg,#a78bfa,#60a5fa);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;padding-top:.2em;padding-bottom:.2em;line-height:1.4;display:inline-block}.harf-hero-sub{color:#c4b5fd;opacity:.9;max-width:560px;margin:0 auto 2rem;font-size:clamp(.95rem,2.5vw,1.1rem)}.harf-input-box{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#ffffff12;border:1.5px solid #7c6fff59;border-radius:1.25rem;max-width:640px;margin:0 auto;padding:1.25rem}.harf-input-row{align-items:stretch;gap:.6rem;display:flex}.harf-main-input{color:#fff;resize:none;background:#ffffff1a;border:1.5px solid #7c6fff4d;border-radius:.75rem;outline:none;flex:1;min-height:52px;padding:.85rem 1rem;font-family:inherit;font-size:1rem;transition:border-color .2s}.harf-main-input::placeholder{color:#c4b5fd80}.harf-main-input:focus{border-color:#a78bfab3}.harf-input-actions{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem;margin-top:.75rem;display:flex}.harf-quick-btn{color:#c4b5fd;cursor:pointer;background:#7c6fff26;border:1px solid #7c6fff4d;border-radius:.5rem;padding:.4rem .75rem;font-size:.8rem;transition:all .2s}.harf-quick-btn:hover{background:#7c6fff4d}.harf-char-counter{color:#c4b5fd99;margin-left:auto;font-size:.78rem}.harf-hero-stats{flex-wrap:wrap;justify-content:center;gap:1.5rem;margin-top:1.75rem;display:flex}.harf-stat{flex-direction:column;align-items:center;gap:.2rem;display:flex}.harf-stat-num{color:#a78bfa;font-size:1.3rem;font-weight:800}.harf-stat-label{color:#c4b5fd;opacity:.75;font-size:.73rem}.harf-container{max-width:1200px;margin:0 auto;padding:0 1rem}.harf-section-title{color:var(--text-primary);align-items:center;gap:.5rem;margin:0 0 1rem;font-size:1.35rem;font-weight:700;display:flex}.harf-filters-wrap{padding:1.5rem 0 .5rem}.harf-filter-chips{flex-wrap:wrap;gap:.5rem;display:flex}.harf-chip{background:var(--bg-card);border:1.5px solid var(--border-color);color:var(--text-secondary);cursor:pointer;white-space:nowrap;border-radius:2rem;padding:.4rem .9rem;font-size:.82rem;font-weight:600;transition:all .18s}.harf-chip:hover,.harf-chip.active{background:var(--accent);border-color:var(--accent);color:#fff}.harf-results-section{padding:1.5rem 0}.harf-results-grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:.85rem;display:grid}.harf-style-card{background:var(--bg-card);border:1.5px solid var(--border-color);cursor:pointer;border-radius:1rem;padding:1rem 1.1rem;transition:all .2s}.harf-style-card:hover{border-color:var(--accent);box-shadow:var(--shadow);transform:translateY(-2px)}.harf-style-card.popular{border-color:#a78bfa66}.harf-card-label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;align-items:center;gap:.4rem;margin-bottom:.4rem;font-size:.73rem;font-weight:600;display:flex}.harf-popular-badge{color:#fff;background:linear-gradient(90deg,#7c6fff,#a78bfa);border-radius:1rem;padding:.1rem .45rem;font-size:.65rem;font-weight:700}.harf-preview-text{color:var(--text-primary);word-break:break-all;min-height:2rem;margin:.35rem 0 .75rem;font-size:1.3rem;line-height:1.4}.harf-card-footer{justify-content:space-between;align-items:center;gap:.5rem;display:flex}.harf-copy-btn{background:linear-gradient(135deg, var(--accent), var(--accent2));color:#fff;cursor:pointer;border:none;border-radius:.6rem;align-items:center;gap:.35rem;padding:.45rem 1rem;font-size:.82rem;font-weight:600;transition:all .2s;display:flex}.harf-copy-btn:hover{opacity:.9;transform:scale(1.03)}.harf-copy-btn.copied{background:linear-gradient(135deg,#22c55e,#16a34a)}.harf-fav-btn{border:1.5px solid var(--border-color);cursor:pointer;width:34px;height:34px;color:var(--text-muted);background:0 0;border-radius:.6rem;justify-content:center;align-items:center;font-size:.9rem;transition:all .2s;display:flex}.harf-fav-btn:hover,.harf-fav-btn.active{color:#f43f5e;border-color:#f43f5e}.harf-az-nav-wrap{z-index:40;background:var(--bg-primary);border-bottom:1px solid var(--border-color);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:.6rem 0;position:sticky;top:0}.harf-az-nav{scrollbar-width:none;gap:.3rem;padding:0 1rem;display:flex;overflow-x:auto}.harf-az-nav::-webkit-scrollbar{display:none}.harf-az-letter-btn{border:1.5px solid var(--border-color);width:36px;height:36px;color:var(--text-secondary);cursor:pointer;background:0 0;border-radius:.5rem;flex-shrink:0;font-size:.9rem;font-weight:700;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{align-items:center;gap:1rem;margin-bottom:1rem;display:flex}.harf-letter-big{background:linear-gradient(135deg, var(--accent), var(--accent2));-webkit-text-fill-color:transparent;text-align:center;-webkit-background-clip:text;background-clip:text;flex-shrink:0;width:70px;padding-top:.1em;padding-bottom:.1em;font-size:3.5rem;font-weight:900;line-height:1}.harf-letter-meta h2{color:var(--text-primary);margin:0 0 .2rem;font-size:1.15rem;font-weight:700}.harf-letter-meta p{color:var(--text-muted);margin:0;font-size:.82rem}.harf-letter-variants{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:.6rem;display:grid}.harf-variant-card{background:var(--bg-card);border:1.5px solid var(--border-color);text-align:center;cursor:pointer;border-radius:.85rem;padding:.75rem .6rem;transition:all .2s;position:relative}.harf-variant-card:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 4px 16px #7c6fff26}.harf-variant-char{margin-bottom:.3rem;font-size:2rem;line-height:1.3;display:block}.harf-variant-name{color:var(--text-muted);font-size:.68rem;font-weight:500}.harf-variant-copy{color:#fff;opacity:0;background:#7c6fffe6;border-radius:.8rem;justify-content:center;align-items:center;font-size:.85rem;font-weight:700;transition:opacity .18s;display:flex;position:absolute;inset:0}.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{flex-wrap:wrap;gap:.75rem;margin-bottom:1rem;display:flex}.harf-builder-input{background:var(--input-bg);border:1.5px solid var(--border-color);min-width:180px;color:var(--text-primary);border-radius:.75rem;outline:none;flex:1;padding:.75rem 1rem;font-family:inherit;font-size:1rem;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;cursor:pointer;border:none;border-radius:.75rem;padding:.75rem 1.25rem;font-size:.9rem;font-weight:700;transition:opacity .2s}.harf-builder-btn:hover{opacity:.9}.harf-builder-results{flex-direction:column;gap:.6rem;display:flex}.harf-builder-result-row{background:var(--bg-secondary,#eef);border-radius:.75rem;align-items:center;gap:.75rem;padding:.65rem 1rem;display:flex}.page-harf.dark .harf-builder-result-row{background:#1a1a30}.harf-builder-result-text{color:var(--text-primary);word-break:break-all;flex:1;font-size:1.1rem}.harf-builder-style-label{color:var(--text-muted);min-width:80px;font-size:.72rem}.harf-builder-copy{border:1.5px solid var(--border-color);color:var(--accent);cursor:pointer;white-space:nowrap;background:0 0;border-radius:.5rem;padding:.35rem .65rem;font-size:.78rem;font-weight:600;transition:all .18s}.harf-builder-copy:hover,.harf-builder-copy.copied{background:var(--accent);color:#fff}.harf-favorites-section{padding:1.5rem 0}.harf-favs-grid{flex-wrap:wrap;gap:.5rem;display:flex}.harf-fav-item{background:var(--bg-card);border:1.5px solid var(--border-color);color:var(--text-primary);border-radius:.75rem;align-items:center;gap:.5rem;padding:.5rem 1rem;font-size:1.1rem;display:flex}.harf-fav-remove{cursor:pointer;color:var(--text-muted);background:0 0;border:none;font-size:1rem;line-height:1;transition:color .15s}.harf-fav-remove:hover{color:#f43f5e}.harf-empty-state{text-align:center;color:var(--text-muted);padding:2rem;font-size:.9rem}.harf-empty-icon{margin-bottom:.75rem;font-size:2.5rem;display:block}.harf-toast{color:#fff;z-index:9999;background:linear-gradient(135deg,#22c55e,#16a34a);border-radius:2rem;align-items:center;gap:.5rem;padding:.75rem 1.5rem;font-size:.9rem;font-weight:700;animation:.3s toastIn;display:flex;position:fixed;bottom:1.5rem;left:50%;transform:translate(-50%)translateY(0);box-shadow:0 8px 32px #22c55e59}@keyframes toastIn{0%{opacity:0;transform:translate(-50%)translateY(20px)}to{opacity:1;transform:translate(-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;margin-bottom:1rem;padding:1.5rem}.harf-article-card h2{color:var(--text-primary);margin:0 0 .75rem;font-size:1.15rem;font-weight:700}.harf-article-card p,.harf-article-card li{color:var(--text-secondary);font-size:.95rem;line-height:1.7}.harf-article-card ul,.harf-article-card ol{padding-left:1.25rem}.harf-related-section{padding:1.5rem 0 2.5rem}.harf-related-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:.75rem;display:grid}.harf-related-card{background:var(--bg-card);border:1.5px solid var(--border-color);text-align:center;border-radius:1rem;flex-direction:column;align-items:center;gap:.5rem;padding:1rem;text-decoration:none;transition:all .2s;display:flex}.harf-related-card:hover{border-color:var(--accent);box-shadow:var(--shadow);transform:translateY(-2px)}.harf-related-icon{font-size:1.75rem}.harf-related-label{color:var(--text-primary);font-size:.82rem;font-weight:600}.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{cursor:pointer;color:var(--text-primary);justify-content:space-between;align-items:center;gap:1rem;padding:1rem 1.25rem;font-size:.95rem;font-weight:600;display:flex}.harf-faq-q:hover{color:var(--accent)}.harf-faq-toggle{color:var(--accent);flex-shrink:0;font-size:1.25rem;transition:transform .2s}.harf-faq-item.open .harf-faq-toggle{transform:rotate(45deg)}.harf-faq-answer{max-height:0;transition:max-height .3s;overflow:hidden}.harf-faq-item.open .harf-faq-answer{max-height:200px}.harf-faq-answer p{color:var(--text-secondary);margin:0;padding:0 1.25rem 1rem;font-size:.9rem;line-height:1.65}.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}}