/* Main CSS - Deferred yükleme */
/* Below-the-fold bileşenler */

/* ─── Cards ─── */
.card{background:var(--white);border-radius:var(--radius-lg);padding:2rem;box-shadow:var(--shadow);transition:all var(--transition)}
.card:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px)}
.card-icon{width:56px;height:56px;border-radius:12px;background:linear-gradient(135deg,var(--accent),var(--primary-light));display:flex;align-items:center;justify-content:center;margin-bottom:1rem;color:var(--white)}
.card-icon svg{width:28px;height:28px}
.card h3{margin-bottom:.5rem;font-size:1.125rem}
.card p{color:var(--gray-800);font-size:.95rem;margin-bottom:0}

/* Grid */
.grid{display:grid;gap:1.5rem}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:991px){.grid-4{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:575px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}

/* ─── Steps / Nasıl Çalışır ─── */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;counter-reset:step}
.step{text-align:center;position:relative}
.step::before{counter-increment:step;content:counter(step);display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;background:var(--secondary);color:var(--white);font-size:1.5rem;font-weight:800;margin:0 auto 1rem}
.step h3{font-size:1rem;margin-bottom:.5rem}
.step p{color:var(--gray-800);font-size:.9rem}
@media(max-width:767px){.steps{grid-template-columns:repeat(2,1fr);gap:1.5rem}}
@media(max-width:480px){.steps{grid-template-columns:1fr}}

/* ─── Stats ─── */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;text-align:center}
.stat-number{font-size:2.5rem;font-weight:800;color:var(--secondary);line-height:1}
.stat-label{color:var(--gray-800);font-size:.9rem;margin-top:.5rem}
@media(max-width:767px){.stats{grid-template-columns:repeat(2,1fr);gap:1rem}.stat-number{font-size:2rem}}

/* ─── CTA Banner ─── */
.cta-banner{background:linear-gradient(135deg,var(--primary) 0%,var(--primary-light) 100%);color:var(--white);border-radius:var(--radius-lg);padding:3rem;text-align:center}
.cta-banner h2,.cta-banner h3{color:var(--white);margin-bottom:1rem}
.cta-banner p{color:var(--white);margin-bottom:2rem;max-width:600px;margin-left:auto;margin-right:auto}
.cta-banner .btn{font-size:1.125rem}

/* ─── FAQ Accordion ─── */
.faq-item{border:1px solid var(--gray-200);border-radius:var(--radius);margin-bottom:.75rem;overflow:hidden}
.faq-question{width:100%;padding:1.25rem 1.5rem;background:var(--white);border:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-size:1rem;font-weight:600;color:var(--gray-900);text-align:left;transition:background var(--transition)}
.faq-question:hover{background:var(--gray-50)}
.faq-question::after{content:'+';font-size:1.5rem;font-weight:300;color:var(--secondary);transition:transform var(--transition)}
.faq-item.active .faq-question::after{content:'−'}
.faq-item.active .faq-question{background:var(--gray-50)}
.faq-answer{max-height:0;overflow:hidden;transition:max-height .35s ease}
.faq-answer-inner{padding:0 1.5rem 1.25rem;color:var(--gray-600);line-height:1.7}

/* ─── Blog Cards ─── */
.blog-card{background:var(--white);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow);transition:all var(--transition)}
.blog-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px)}
.blog-card img{width:100%;height:200px;object-fit:cover}
.blog-card-body{padding:1.5rem}
.blog-card-date{font-size:.85rem;color:var(--gray-800);margin-bottom:.5rem}
.blog-card-body h3{font-size:1.1rem;margin-bottom:.5rem}
.blog-card-body h3 a{color:var(--primary)}
.blog-card-body h3 a:hover{color:var(--secondary)}
.blog-card-body p{color:var(--gray-800);font-size:.9rem;margin-bottom:1rem}
.blog-card-link{color:#C04D00;font-weight:600;font-size:.9rem}
.blog-card-link:hover{color:var(--primary)}

/* ─── Blog Detail ─── */
.article-content{max-width:800px;margin:0 auto}
.article-content h2{margin-top:2rem;margin-bottom:1rem}
.article-content h3{margin-top:1.5rem;margin-bottom:.75rem}
.article-content p{line-height:1.8;color:var(--gray-800)}
.article-content ul,.article-content ol{margin-bottom:1.5rem;line-height:1.8}
.article-meta{display:flex;gap:1.5rem;color:var(--gray-600);font-size:.9rem;margin-bottom:2rem;padding-bottom:1rem;border-bottom:1px solid var(--gray-200)}

/* ─── TOC (İçindekiler) ─── */
.toc{background:var(--gray-50);border:1px solid var(--gray-200);border-radius:var(--radius);padding:1.5rem;margin-bottom:2rem}
.toc h4{font-size:1rem;margin-bottom:1rem;color:var(--primary)}
.toc ol{padding-left:1.25rem;margin-bottom:0}
.toc li{margin-bottom:.5rem}
.toc a{color:var(--gray-800);font-size:.95rem}
.toc a:hover{color:var(--secondary)}

/* ─── Forms ─── */
.form-group{margin-bottom:1.25rem}
.form-group label{display:block;margin-bottom:.375rem;font-weight:600;font-size:.9rem;color:var(--gray-800)}
.form-control{width:100%;padding:.75rem 1rem;border:1px solid var(--gray-300);border-radius:var(--radius);font-size:1rem;font-family:var(--font);transition:border-color var(--transition);background:var(--white)}
.form-control:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(44,116,179,.15)}
.form-control.error{border-color:#dc3545}
.form-error{color:#dc3545;font-size:.85rem;margin-top:.25rem;display:none}
.form-error.show{display:block}
select.form-control{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236C757D' d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center}
textarea.form-control{min-height:120px;resize:vertical}

/* ─── Calculator ─── */
.calculator{background:var(--white);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:2.5rem;max-width:700px;margin:0 auto}
.calculator h2{text-align:center;margin-bottom:2rem}
.calc-result{background:linear-gradient(135deg,var(--primary),var(--primary-light));color:var(--white);border-radius:var(--radius-lg);padding:2rem;text-align:center;margin-top:2rem;display:none}
.calc-result.show{display:block;animation:fadeInUp .5s ease}
.calc-result-amount{font-size:2.5rem;font-weight:800;margin:.5rem 0}
.calc-result p{opacity:.9;margin-bottom:1.5rem}
.calc-result .form-group label{color:var(--white)}
.calc-result .form-control{background:var(--white);color:var(--dark);border-color:rgba(255,255,255,.3)}
.calc-result .form-control::placeholder{color:var(--gray-500)}
.calc-result .checkbox-label{color:rgba(255,255,255,.9)}
.calc-result .checkbox-label a{color:var(--white);text-decoration:underline}
.calc-result h3{color:var(--white)}
.calc-result .form-error{color:#ffcdd2}

@keyframes fadeInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes countUp{from{opacity:0}to{opacity:1}}

/* ─── Contact Info ─── */
.contact-info{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-bottom:3rem}
.contact-info-item{text-align:center;padding:2rem;background:var(--white);border-radius:var(--radius-lg);box-shadow:var(--shadow)}
.contact-info-item svg{width:40px;height:40px;color:var(--secondary);margin-bottom:1rem}
.contact-info-item h3{font-size:1rem;margin-bottom:.5rem}
.contact-info-item a{color:var(--accent);font-weight:600}
@media(max-width:767px){.contact-info{grid-template-columns:1fr}}

/* ─── Footer ─── */
.footer{background:var(--primary);color:rgba(255,255,255,.8);padding:3.5rem 0 0}
.footer-grid{display:grid;grid-template-columns:1.8fr 1fr 1fr 1fr;gap:2.5rem;padding-bottom:2.5rem}
.footer-logo{color:var(--white);font-size:1.4rem;font-weight:800;display:inline-flex;align-items:center;gap:.25rem;margin-bottom:1rem;text-decoration:none}
.footer-logo span{color:var(--secondary)}
.footer-about p{font-size:.9rem;line-height:1.7;margin-bottom:1.5rem;color:rgba(255,255,255,.8)}
.footer-cta-btn{font-size:.85rem;padding:.6rem 1.5rem;border-color:rgba(255,255,255,.3);color:rgba(255,255,255,.85)}
.footer-cta-btn:hover{background:var(--secondary);border-color:var(--secondary);color:var(--white)}
.footer-heading{color:var(--white);font-size:.85rem;font-weight:700;margin-bottom:1.25rem;text-transform:uppercase;letter-spacing:.8px;position:relative;padding-bottom:.75rem}
.footer-heading::after{content:'';position:absolute;bottom:0;left:0;width:28px;height:2px;background:var(--secondary);border-radius:2px}
.footer-links{list-style:none;padding:0;margin:0}
.footer-links li{margin-bottom:.5rem}
.footer-links a{color:rgba(255,255,255,.8);font-size:.875rem;text-decoration:none;transition:all var(--transition);display:inline-block}
.footer-links a:hover{color:var(--white);transform:translateX(3px)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.08);padding:1.5rem 0;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}
.footer-bottom p{font-size:.8rem;color:rgba(255,255,255,.7);margin:0}
.footer-bottom a{color:rgba(255,255,255,.7);text-decoration:none;transition:color var(--transition)}
.footer-bottom a:hover{color:var(--secondary)}
.footer-sep{margin:0 .4rem;color:rgba(255,255,255,.5)}
@media(max-width:991px){.footer-grid{grid-template-columns:1fr 1fr;gap:2rem}}
@media(max-width:576px){.footer-grid{grid-template-columns:1fr}.footer-bottom{flex-direction:column;text-align:center}}

/* ─── WhatsApp Button ─── */
.whatsapp-float{position:fixed;bottom:1.5rem;right:1.5rem;z-index:999;width:56px;height:56px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(37,211,102,.4);transition:transform var(--transition)}
.whatsapp-float:hover{transform:scale(1.1)}
.whatsapp-float svg{width:28px;height:28px;fill:var(--white)}

/* ─── Cookie Consent ─── */
.cookie-consent{position:fixed;bottom:0;left:0;right:0;z-index:9999;background:var(--white);box-shadow:0 -4px 20px rgba(0,0,0,.1);padding:1.25rem;display:none}
.cookie-consent.show{display:block;animation:slideUp .3s ease}
.cookie-consent-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap}
.cookie-consent p{margin:0;font-size:.9rem;color:var(--gray-800)}
.cookie-consent a{color:var(--accent);text-decoration:underline}
.cookie-btns{display:flex;gap:.75rem;flex-shrink:0}
@keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}

/* ─── Mobile Nav ─── */
.mobile-nav{position:fixed;top:0;right:-100%;width:300px;height:100vh;background:var(--white);z-index:10000;padding:1.5rem;box-shadow:-4px 0 20px rgba(0,0,0,.1);transition:right var(--transition);overflow-y:auto}
.mobile-nav.open{right:0}
.mobile-nav-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:9999;display:none}
.mobile-nav-overlay.show{display:block}
.mobile-nav-close{background:none;border:none;font-size:1.5rem;cursor:pointer;color:var(--gray-800);position:absolute;top:1rem;right:1rem}
.mobile-nav-links{margin-top:2rem}
.mobile-nav-links a{display:block;padding:.75rem 0;color:var(--gray-800);font-weight:500;font-size:1.05rem;border-bottom:1px solid var(--gray-100)}
.mobile-nav-links a:hover,.mobile-nav-links a.active{color:var(--secondary)}
.mobile-nav-phone{margin-top:1.5rem;text-align:center}

/* ─── Breadcrumb ─── */
.breadcrumb{padding:1rem 0;font-size:.9rem}
.breadcrumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:.25rem;padding:0;margin:0}
.breadcrumb-item+.breadcrumb-item::before{content:'/';color:var(--gray-300);margin-right:.25rem}
.breadcrumb-item a{color:var(--gray-600)}
.breadcrumb-item a:hover{color:var(--secondary)}
.breadcrumb-item.active{color:var(--gray-800)}

/* ─── Page Header ─── */
.page-header{background:linear-gradient(135deg,var(--primary),var(--primary-light));color:var(--white);padding:2.5rem 0}
.page-header h1{color:var(--white);margin-bottom:.5rem}
.page-header p{opacity:.9;max-width:640px}

/* ─── Content Sections ─── */
.content-section{padding:2rem 0}
.content-section h2{margin-bottom:1rem}
.content-section p{line-height:1.8;color:var(--gray-800)}

/* ─── Legal Pages ─── */
.legal-content{max-width:800px;margin:0 auto;padding:2rem 0}
.legal-content h2{margin-top:2rem;margin-bottom:1rem;font-size:1.25rem}
.legal-content h3{margin-top:1.5rem;margin-bottom:.75rem;font-size:1.1rem}
.legal-content p{line-height:1.8}
.legal-content ul{line-height:1.8}

/* ─── Alert ─── */
.alert{padding:1rem 1.25rem;border-radius:var(--radius);margin-bottom:1.5rem;font-size:.95rem}
.alert-success{background:#d4edda;color:#155724;border:1px solid #c3e6cb}
.alert-error{background:#f8d7da;color:#721c24;border:1px solid #f5c6cb}

/* ─── Utility ─── */
.text-center{text-align:center}
.text-secondary{color:var(--secondary)}
.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.5rem}.mt-4{margin-top:2rem}
.mb-1{margin-bottom:.5rem}.mb-2{margin-bottom:1rem}.mb-3{margin-bottom:1.5rem}.mb-4{margin-bottom:2rem}
