/* Temel stil iskeleti - responsive kart ve takvim */
:root{
	--accent:#07a08a;
	--teal:#07b89a;
	--slot-free:#07b89a;
	--primary:#0b2545;
	--muted:#7b7b7b;
	--bg:#f7f8fb;
	--card:#ffffff;
	--slot-booked:#e9ecef;
	--header-height:72px;
}

/* Add extra top spacing for all post cards on mobile so they sit lower on the page */
@media (max-width:900px){
	/* Add space above the individual article pages */
	.post-article{margin-top:96px !important;padding-top:22px !important}

	/* Add spacing between cards in the posts index */
	.posts-grid{margin-top:120px !important}
	.post-card{margin-top:36px !important}

	/* Small screens slightly less space but increased from previous values */
	@media (max-width:600px){
		.post-article{margin-top:64px !important}
		.posts-grid{margin-top:90px !important}
		.post-card{margin-top:28px !important}
	}
}

/* Mobile-only: place the call-now CTA at header top-right without affecting desktop */
@media (max-width:900px){
	.site-header{position:relative}
	.site-header .cta.call-now{position:absolute;top:18px;right:12px;z-index:220;padding:6px 10px;font-size:13px}
	/* reduce main-nav right padding so tab row doesn't show extra empty space */
	.site-header .main-nav{padding-right:12px}
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;font-family:Poppins,Segoe UI,Helvetica,Arial,sans-serif;background:var(--bg);color:#222}
.container{max-width:1100px;margin:0 auto;padding:28px}
.site-header{background:#fff;border-bottom:1px solid #eee;height:72px}
.site-header .container{display:flex;align-items:center;justify-content:space-between;padding:0 12px;height:100%;flex-wrap:wrap}
.logo{display:inline-flex;align-items:center;text-decoration:none;flex:0 0 auto}
.logo .site-logo{max-width:250px;width:100%;height:auto;display:block;object-fit:contain}
/* allow nav to shrink on narrow viewports */
.main-nav{flex:1 1 auto;display:flex;align-items:center;justify-content:flex-end;gap:12px;min-width:0}
.main-nav a{white-space:nowrap}
.logo-text{font-family:'Dancing Script',cursive;font-size:22px;color:var(--primary);margin-left:8px}
.main-nav a{margin-left:12px;color:var(--primary);text-decoration:none;font-size:15px;line-height:1}
.main-nav .cta{background:var(--slot-free);color:#fff;padding:8px 14px;border-radius:999px;text-decoration:none}
.main-grid{display:grid;grid-template-columns:380px 1fr;gap:28px;padding-top:28px}
/* Make main profile + calendar area fill the initial viewport so it's a fullscreen landing section */
.main-grid{min-height:calc(100vh - 72px);align-items:center}

/* Hero variant only for the homepage to ensure the calendar + profile fit without page scroll */
.hero{padding-top:0;padding-bottom:0}
.hero .main-grid{min-height:calc(100vh - 72px);align-items:center;gap:18px}
.hero .profile-card{padding:20px}
.hero .calendar-panel{padding:18px}

/* Make left profile card and calendar panel equal height within the hero */
.hero .main-grid{align-items:stretch;grid-auto-rows:1fr}
.hero .profile-card,
.hero .calendar-panel{height:100%;display:flex;flex-direction:column}
.hero .profile-card{justify-content:center}
.hero .calendar-panel .calendar-root{flex:1;display:flex;flex-direction:column}
.hero .calendar-panel .slot-grid{flex:1;overflow:visible;max-height:none}

.hero .slot-grid{gap:6px;grid-auto-rows:34px}
.hero .slot{padding:4px 6px;font-size:12px;border-radius:8px}
.hero .day-header{padding:6px;font-size:13px}
.hero .calendar-root{margin-top:10px}

/* Ensure calendar fills the screen without internal scroll */
.hero .calendar-panel{overflow:visible}
.hero .calendar-panel .slot-grid{max-height:none;overflow:visible;padding-right:0}
.profile-card{background:var(--primary);color:#fff;border-radius:14px;padding:36px;box-shadow:0 10px 30px rgba(10,20,30,0.08);text-align:center}
.avatar img{width:140px;height:140px;border-radius:50%;object-fit:cover;border:8px solid #fff;box-shadow:0 10px 30px rgba(0,0,0,0.12);display:block;margin:0 auto}
.profile-card h1{margin-top:18px;font-size:24px}
.subtitle{color:rgba(255,255,255,0.85);margin-top:6px}
.lead{margin-top:16px;color:rgba(255,255,255,0.9);line-height:1.6}
.lead.quote{font-style:italic;font-size:15px;margin:16px auto;max-width:310px}
.bio-list{list-style:disc;margin:12px auto 0;padding-left:18px;max-width:360px;text-align:left;color:rgba(255,255,255,0.95);font-size:13px}
.bio-list li{margin:8px 0}
.profile-card .socials{margin-top:22px;display:flex;justify-content:center;gap:12px}
.profile-card .socials .social-link{display:inline-flex;align-items:center;justify-content:center;background:rgba(255,255,255,0.12);width:40px;height:40px;border-radius:10px;color:#fff;text-decoration:none}
.profile-card .socials .social-link svg{width:18px;height:18px;display:block}
.calendar-panel{background:var(--card);border-radius:14px;padding:28px;box-shadow:0 10px 30px rgba(20,30,40,0.08)}
.calendar-panel h2{font-weight:600;text-align:center;color:var(--primary);margin-bottom:6px}
.calendar-panel h1{font-size:20px;font-weight:600;text-align:center;color:var(--primary);margin-bottom:12px}
.calendar-root{margin-top:18px}
.calendar-loading{padding:28px;text-align:center;color:var(--muted)}
.booking-actions{display:flex;gap:12px;margin-top:18px}
.btn{padding:10px 18px;border-radius:999px;border:0;cursor:pointer}
.btn.primary{background:var(--slot-free);color:#fff}
.btn.whatsapp{background:#25d366;color:#fff}
.site-footer{display:block;background:var(--primary);color:#fff;padding:28px 0;margin-top:0}
.site-footer .container{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}
.footer-grid{display:flex;gap:24px;align-items:flex-start;width:100%;justify-content:space-between}
.footer-left,.footer-mid,.footer-right{flex:1}
.footer-mid{max-width:320px}
.footer-nav{display:flex;flex-direction:column;gap:8px;margin:10px 0}
.footer-nav a{color:#fff;text-decoration:none}
.footer-right a{color:#fff;text-decoration:underline}

/* Footer signature image */
.footer-signature{display:block;margin-top:8px;max-width:360px;height:auto;object-fit:contain}

@media (max-width:900px){
    .footer-signature{max-width:220px}
}

@media (max-width:1100px){
	.site-header .site-logo{max-width:220px}
}
@media (max-width:700px){
	.site-header .site-logo{max-width:160px}
}

@media (max-width:480px){
	.footer-signature{max-width:180px}
}
.footer-cta{margin-top:12px}
.footer-socials{margin-top:10px;display:flex;gap:8px}
.footer-socials a{color:#fff;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;background:rgba(255,255,255,0.08);border-radius:6px;text-decoration:none}

/* Takvim ızgara basit görünüm */
.slot-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:10px}
.day-headers{margin-bottom:10px}
.day-header{background:#f6f7fb;padding:10px;border-radius:12px;text-align:center;color:var(--muted);font-size:13px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}
/* date (e.g. "22 Aralık") and weekday (e.g. "Pazartesi") */
.day-header .day-date{font-weight:700;color:var(--primary);font-size:13px}
.day-header .day-week{font-size:12px;color:var(--muted)}
.slot{padding:10px;border-radius:10px;text-align:center;background:#f1f3f4;color:#666;box-shadow:inset 0 -1px 0 rgba(0,0,0,0.02)}
.slot.available{background:var(--slot-free);color:#fff;box-shadow:0 6px 18px rgba(6,183,157,0.12)}
.slot.booked{background:var(--slot-booked);color:#9aa0a6}
.slot-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:12px;align-items:start}
.day-headers{margin-bottom:14px}
.day-header{background:#f6f7fb;padding:10px;border-radius:12px;text-align:center;color:var(--muted);font-size:13px;box-shadow:0 4px 14px rgba(20,30,40,0.04)}

/* Slot (buton) styling: pill shape, subtle shadow, smooth hover and focus */
.slot{
	padding:6px 8px;
	border-radius:12px;
	text-align:center;
	background:#f6f7f8;
	color:#333;
	box-shadow:0 6px 18px rgba(20,30,40,0.06);
	transition:transform .12s ease, box-shadow .12s ease, background-color .12s ease;
	font-weight:600;
	font-size:13px;
	min-height:30px;
	display:flex;align-items:center;justify-content:center;
}
.slot.available{
	background:linear-gradient(180deg,var(--slot-free),#06a886);
	color:#fff;
	box-shadow:0 10px 24px rgba(6,183,157,0.12), inset 0 -2px 0 rgba(0,0,0,0.06);
}
.slot.booked{
	background:var(--slot-booked);
	color:#8b97a0;
	box-shadow:inset 0 -1px 0 rgba(0,0,0,0.02);
}

/* Past / too-soon slots should appear like booked (disabled) slots */
.slot.too-soon{
	background:var(--slot-booked);
	color:#9aa0a6;
	box-shadow:inset 0 -1px 0 rgba(0,0,0,0.02);
	opacity:0.95;
}

/* Ensure too-soon has no pointer/hover effects even if role present */
.slot.too-soon[role="button"]{ cursor:default }
.slot.too-soon[role="button"]:hover{ transform:none }
.slot[role="button"]{cursor:pointer}
.slot[role="button"]:hover{transform:translateY(-4px)}
.slot[role="button"]:active{transform:translateY(-1px)}
.slot[role="button"]:focus{outline:3px solid rgba(6,183,157,0.16);outline-offset:4px}

/* make available pill a bit wider on small screens */
@media (max-width:900px){
	.slot{font-size:13px;padding:8px 10px;min-height:36px}
	.slot-grid{gap:8px}
}

@media (max-width:900px){
	.main-grid{grid-template-columns:1fr; min-height:auto}
	.profile-card{order:2}

	/* Constrain profile and calendar widths on small screens so profile is wider
	   than calendar but both are centered and don't touch edges. Increase
	   max-widths on mobile so cards appear wider on handhelds. */
	.main-grid > .profile-card{width:100%;max-width:95vw;margin-left:auto;margin-right:auto;box-sizing:border-box}
	.main-grid > .calendar-panel{width:100%;max-width:95vw;margin-left:auto;margin-right:auto;box-sizing:border-box}

	/* Make stats and other homepage cards slightly wider on mobile */
	.stats-grid{max-width:95vw;margin-left:auto;margin-right:auto}

	/* Make profile card occupy full viewport height on small screens
	   and scale avatar/text responsively for all device widths */
	.profile-card{
		/* Reduce height on mobile slightly so the psiholog card isn't full-viewport */
		min-height:calc(80vh - var(--header-height));
		border-radius:0.5rem;
		padding:calc(env(safe-area-inset-top,12px) + 14px) 14px;
		display:flex;
		flex-direction:column;
		justify-content:center;
		align-items:center;
		text-align:center;
	}
	.profile-card .avatar img{
		width:clamp(96px,22vw,140px);
		height:clamp(96px,22vw,140px);
		border-width:6px;
	}
	.profile-card h2{font-size:clamp(18px,4.5vw,26px);margin-top:12px}
	.profile-card .subtitle{font-size:clamp(13px,3.2vw,16px)}
	.profile-card .lead.quote{max-width:92%;font-size:clamp(13px,3.6vw,16px)}
	.bio-list{max-width:92%;padding-left:18px}
}

/* Stats cards row */
.stats-panel{margin:26px auto 36px;padding:0}
	.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:18px;background:var(--card);padding:20px;border-radius:14px;box-shadow:0 6px 24px rgba(11,38,69,0.06);align-items:center}
.stat-card{padding:10px 12px;text-align:center}
.stat-number{font-size:36px;line-height:1;color:#0b6aff;font-weight:800;letter-spacing:-0.01em}
.stat-label{font-size:13px;color:#6b7280;margin-top:6px}
/* subtle vertical separators on wide screens */
.stats-grid .stat-card:not(:last-child){border-right:1px solid #f1f3f5;padding-right:18px}

@media (max-width:900px){
	.stats-grid{grid-template-columns:repeat(2,1fr)}
	.stat-number{font-size:26px}
}

/* Responsive header & footer tweaks */
.site-header .container{display:flex;align-items:center;justify-content:space-between;gap:12px}
.nav-toggle{display:none;background:transparent;border:0;font-size:22px;color:var(--primary);cursor:pointer}
.main-nav{display:flex;align-items:center;gap:12px}

@media (max-width:900px){
	/* hide the hamburger and show a centered tab-style nav (MOBILE ONLY) */
	.nav-toggle{display:none}
	.site-header{position:sticky;top:0;z-index:220;background:#fff}
	.site-header .container{height:auto;padding:8px 12px}
	.site-header .site-logo{width:160px}

	/* Slightly larger header logo on mobile for better visibility */
	.site-header .site-logo{width:180px}

	.main-nav{display:flex;position:relative;flex-direction:row;gap:8px;justify-content:flex-start;align-items:center;padding:4px 6px;background:rgba(255,255,255,0.98);box-shadow:0 1px 0 rgba(15,23,42,0.03);border-bottom:1px solid #f1f3f5;white-space:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;width:100%}
	/* lift the mobile tab bar upward so tabs sit closer to the header */
	.main-nav{margin-top:-6px}
	.main-nav.open{display:flex}
	.main-nav a{padding:6px 10px;border-radius:6px;margin:0;font-size:11px;display:inline-flex;align-items:center;color:var(--primary);text-decoration:none;border-bottom:3px solid transparent;flex:0 0 auto;scroll-snap-align:start}
	/* make active tab more visible */
	.main-nav a.active{border-bottom-color:var(--accent);font-weight:700;color:var(--accent)}

	/* hide horizontal scrollbar but keep touch scrolling */
	.main-nav::-webkit-scrollbar{height:6px}
	.main-nav::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.08);border-radius:999px}
	.main-nav a:hover,.main-nav a:focus{border-bottom-color:rgba(6,183,157,0.14)}
	.main-nav a.active{border-bottom-color:var(--accent);font-weight:700}

	/* ensure page content starts below sticky header/nav */
	.main-grid{padding-top:calc(var(--header-height) + 8px) !important}
	#calendar-root{margin-top:14px !important}

	/* Prevent horizontal overflow on small screens that can cut content in half */
	html,body{max-width:100%;overflow-x:hidden}
	.container{padding-left:12px;padding-right:12px}
	.main-grid{padding-left:0;padding-right:0}
	.calendar-carousel, .calendar-track, .calendar-page{box-sizing:border-box}
	.calendar-page{padding-left:6px;padding-right:6px}

	 /* Additional mobile safeguards: force main layout elements to 100% width
		 and remove unexpected transforms/margins that can push content off-screen */
	 .container{max-width:100%;width:100%}
	 .main-grid{width:100%;grid-template-columns:1fr}
	 .profile-card, .calendar-panel, .about-card, .solution-card, .post-article{width:100%;max-width:100%;margin-left:auto;margin-right:auto;transform:none}
	 .calendar-track{width:100%!important;transform:none!important}

	/* Strong overrides to prevent clipping: apply to most layout containers */
	html, body, main, .container, .main-grid, .about-grid, .solutions-grid, .posts-grid, .reviews-grid, .stats-grid {
		width:100%!important; max-width:100%!important; padding-left:12px!important; padding-right:12px!important; margin:0 auto!important; box-sizing:border-box!important; transform:none!important;
	}
	/* ensure children don't enforce a wider min-width */
	.main-grid > *, .container > * { min-width:0!important }
	*{ -webkit-overflow-scrolling:touch }

	/* Emergency clamp: prevent any element from exceeding viewport width on mobile */
	*{max-width:100vw!important;box-sizing:border-box!important}
	img, iframe, video, picture, svg{max-width:100% !important;height:auto!important}
	.site-header, header, .footer-grid, .site-footer{width:100vw!important;left:0;right:0}

	/* Footer stack on mobile to avoid overflow */
	.site-footer .container{flex-direction:column;align-items:center;gap:12px;text-align:center}
	.site-footer .footer-socials{justify-content:center}
	.footer-grid{flex-direction:column;gap:14px}
	.footer-left,.footer-mid,.footer-right{width:100%}
	.footer-right .footer-cta{margin-bottom:8px}
	/* Make all footer text centered and 10px on mobile */
	.site-footer, .site-footer *{text-align:center !important;font-size:10px !important}
}

/* Improved mobile nav: full-screen overlay, larger touch targets, safe-area support */


@media (max-width:900px){
	/* ensure nav remains a horizontal tab bar on small screens */
	.main-nav{position:static;display:flex;flex-direction:row;padding:0 8px;gap:8px;justify-content:flex-start;align-items:center;overflow-x:auto;width:100%;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
	.main-nav.open{display:flex}
	.main-nav a{display:inline-flex;padding:8px 12px;border-radius:6px;margin:0;font-size:11px;border-bottom:3px solid transparent;flex:0 0 auto;scroll-snap-align:start}
	.main-nav .cta.call-now{display:inline-flex;margin-left:6px;padding:6px 10px;border-radius:12px;background:var(--slot-free);color:#fff}
	/* remove overlay/backdrop behavior since no hamburger is used */
	.site-header.nav-open::after{content:none}
	body.nav-open{height:auto;overflow:visible}

	/* On mobile, ensure header/footer are in normal flow so footer is visible */
	.site-header, .site-footer{position:relative;left:auto;right:auto;margin:0;width:100%}

	/* Hide the "Çözümler" tab on mobile (anchor links to #cozumler) */
	.main-nav a[href$="#cozumler"]{display:none !important}

}
/* Ensure logo scales down on very small devices */
@media (max-width:420px){
	.site-header .site-logo{width:200px}
	.nav-toggle{font-size:20px}
}

@media (max-width:480px){
	.stats-grid{grid-template-columns:1fr}
}

/* About cards: two equal columns */
.about-section{margin:30px auto}
.about-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;align-items:stretch}
.about-card{background:var(--card);padding:22px;border-radius:14px;box-shadow:0 8px 28px rgba(20,30,40,0.06);display:flex;flex-direction:column}
.about-card h3{margin:0 0 10px;font-size:18px;color:var(--primary)}
.about-body{flex:1;color:#222;font-size:15px;line-height:1.7}
.about-header{display:flex;align-items:center;gap:12px;margin-bottom:12px;justify-content:center}
.about-header h3{margin:0}
.about-head-img{width:90px;height:90px;border-radius:50%;object-fit:cover;padding:6px;background:#fff;border:2px solid rgba(11,38,69,0.06);box-shadow:0 8px 22px rgba(11,38,69,0.08)}

.about-card .compact-list{list-style:disc;margin:8px 0 0;padding-left:18px;color:#333}

/* Increase spacing between paragraphs inside about cards for clarity */
.about-body p{margin-bottom:16px}
.about-body p:last-child{margin-bottom:0}

/* Publications and education list styling inside about card */
.about-body .subhead{font-size:14px;font-weight:700;color:var(--primary);margin:8px 0}
.pub-list{margin:6px 0 12px;padding-left:18px;color:#333;font-size:13px;line-height:1.45}
.pub-list li{margin-bottom:8px}
.edu{margin-top:8px}
.edu strong{color:var(--primary);font-size:13px}
.edu .edu-meta{font-weight:700;margin-top:6px;font-size:13px}
.edu .edu-note{color:var(--muted);font-size:13px;margin-top:6px}

/* Work / experience list */
.work-list{margin-top:12px;display:flex;flex-direction:column;gap:12px}
.work-entry{padding:8px 0;border-top:1px solid #f1f3f5}
.work-company{font-weight:700;color:#111;margin-bottom:6px}
.work-company-link{color:inherit;text-decoration:none;font-weight:700}
.work-entry.ongoing .work-company,
.work-entry.ongoing .work-company-link{color:#0b6aff}
.work-entry:not(.ongoing) .work-company,
.work-entry:not(.ongoing) .work-company-link{color:#111}
.work-location{color:var(--muted);font-weight:600;margin-left:6px;font-size:13px}
.work-role{font-size:13px;color:#111}
.job-duration{color:var(--muted);font-size:13px;font-weight:700;margin-top:6px}

/* Certified trainings list */
.cert-list{margin:12px 0 0;padding-left:18px;color:#333;font-size:13px;line-height:1.45}
.cert-list li{margin-bottom:8px}
.cert-list li strong{font-weight:700;color:var(--primary)}

@media (max-width:480px){
	.about-body{font-size:13px;line-height:1.2}
}

@media (max-width:900px){
  .about-grid{grid-template-columns:1fr}
}

/* Make all primary card components share the same max width and alignment on mobile
	 so they match the visual width of the stats card in the screenshot. */
@media (max-width:900px){
	:root{--mobile-card-max:640px}
	.post-card,
	.review-card,
	.about-card,
	.solution-card,
	.post-article,
	.profile-card,
	.calendar-panel,
	.seo-info .info-card,
	.faq-card,
	.stats-grid,
	.stat-card{
		width:100%;
		max-width:var(--mobile-card-max);
		margin-left:auto;
		margin-right:auto;
		box-sizing:border-box;
	}

	/* Ensure inner padding doesn't change card visual width */
	.container{padding-left:12px;padding-right:12px}
}

/* Explicitly align about/reviews/solutions grids and their items so all cards
	 start and end at the same horizontal positions on mobile. */
@media (max-width:900px){
	.about-section .about-grid,
	.reviews-row .reviews-grid,
	.solutions-section .solutions-grid,
	.posts-grid,
	.seo-info,
	.faq-section{
		width:100%;
		max-width:var(--mobile-card-max);
		margin-left:auto;
		margin-right:auto;
		box-sizing:border-box;
		padding-left:0;
		padding-right:0;
	}

	/* Make each grid item fill the grid width so their left/right edges align */
	.about-grid > *,
	.reviews-grid > *,
	.solutions-grid > *,
	.posts-grid > * {
		width:100%;
		max-width:100%;
		box-sizing:border-box;
		margin:0;
	}
}

/* Badges grid for publications/teasers at bottom of about card */
.about-badges{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:18px;align-items:center}
.about-badges img{width:200px;height:200px;border-radius:8px;object-fit:contain;border:1px solid rgba(11,38,69,0.04);box-shadow:0 6px 18px rgba(11,38,69,0.04);justify-self:center;background:#fff}

@media (max-width:480px){
	.about-badges{grid-template-columns:repeat(2,1fr)}
}

/* Reviews row */
.reviews-row{margin-bottom:28px}
.reviews-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;align-items:stretch}
.review-card{background:var(--card);padding:18px;border-radius:12px;box-shadow:0 8px 28px rgba(20,30,40,0.06);display:flex;flex-direction:column;min-height:0}
.review-card h3{margin:0 0 10px;font-size:16px;color:var(--primary)}
.reviews-list{display:flex;flex-direction:column;gap:10px;flex:1;min-height:0}
.review-item{padding:10px;border-radius:10px;background:#fbfcfd;border:1px solid #f1f3f5}
.review-item{display:flex;gap:12px;padding:10px;border-radius:10px;background:#fbfcfd;border:1px solid #f1f3f5}
.review-left{flex:0 0 48px;display:flex;align-items:flex-start}
.avatar-circle{width:40px;height:40px;border-radius:50%;background:#eef3ff;color:#0b6aff;display:flex;align-items:center;justify-content:center;font-weight:700}
.review-body{flex:1}
.review-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.review-author{font-weight:700;color:var(--primary)}
.review-stars{color:#ffb400;font-weight:700}
.review-text{color:#111;line-height:1.4;font-size:13px}
.review-meta{font-size:12px;color:var(--muted);margin-top:6px}

.reviews-summary{padding:6px 0 10px;margin-bottom:6px}
.summary-rating{font-size:18px;color:var(--primary);margin-right:8px}
.summary-count{color:var(--muted);font-size:13px}
.reviews-actions{display:flex;justify-content:flex-start;margin-top:12px;gap:12px;flex-wrap:nowrap;align-items:center}
.reviews-actions .btn{width:auto;white-space:nowrap}

/* Ghost / neutral button used for review links (light background, blue text) */
.btn.ghost{background:#f4f8ff;color:#0b6aff;border-radius:12px;padding:10px 18px;border:0;box-shadow:0 6px 18px rgba(11,38,69,0.06);font-weight:700}
.btn.ghost:hover{box-shadow:0 10px 26px rgba(11,38,69,0.08);transform:translateY(-2px)}
.btn.ghost:active{transform:none}

.review-card .reviews-actions{margin-top:auto}

/* Desktop: hide horizontal scrollbar and keep background full-bleed
	 This prevents horizontal scrolling without changing card sizes. */
@media (min-width:900px){
	html, body { overflow-x: hidden; }
	/* ensure background color spans full viewport */
	body { background: var(--bg); }
}

@media (max-width:900px){
	.reviews-grid{grid-template-columns:1fr}
}

/* Solutions / services cards at page bottom */
.solutions-section{margin:36px auto}
.solutions-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.solution-card{background:var(--card);padding:22px;border-radius:14px;box-shadow:0 8px 28px rgba(20,30,40,0.06);text-align:left}
.solution-icon{width:84px;height:84px;border-radius:50%;border:6px solid rgba(11,38,69,0.06);margin:0 auto 12px;background:transparent;display:none}
.solution-img{width:84px;height:84px;border-radius:12px;object-fit:cover;display:block;margin:0 auto 12px;border:1px solid rgba(11,38,69,0.04);box-shadow:0 6px 18px rgba(11,38,69,0.04);background:#fff}
.solution-card h3{font-size:20px;color:var(--primary);text-align:center;margin:8px 0 12px}
.solution-card ul{list-style:disc;padding-left:20px;color:#333;font-size:14px;line-height:1.6}
.solution-card ul li{margin-bottom:8px}

@media (max-width:900px){
	.solutions-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:480px){
	.solutions-grid{grid-template-columns:1fr}
	.solution-icon{width:68px;height:68px}
	.solution-img{width:68px;height:68px}
}

/* SEO info card above footer */
.seo-info{margin:0 auto}
.seo-info .info-card{background:var(--card);padding:22px;border-radius:14px;box-shadow:0 8px 28px rgba(20,30,40,0.06);color:#222}
.seo-info h3{font-size:18px;color:var(--primary);margin-bottom:8px}
.seo-info h4{font-size:16px;color:var(--primary);margin-top:10px;margin-bottom:8px}
.seo-info p{font-size:14px;line-height:1.6;margin-bottom:10px}
.seo-info hr{border:0;border-top:1px solid #f1f3f5;margin:12px 0}

/* FAQ card styles */
.faq-section{margin:0 auto}
.faq-card{background:var(--card);padding:22px;border-radius:14px;box-shadow:0 8px 28px rgba(20,30,40,0.06);color:#222;display:flex;flex-direction:column}
.faq-card h3{font-size:18px;color:var(--primary);margin-bottom:8px}
.faq-card h4{font-size:15px;color:var(--primary);margin-top:8px;margin-bottom:8px}
.faq-card p{font-size:14px;line-height:1.6;margin-bottom:10px}
.faq-card hr{border:0;border-top:1px solid #f1f3f5;margin:12px 0}

.faq-actions{display:flex;gap:12px;justify-content:center;margin-top:auto;align-items:stretch}
.faq-actions .btn{padding:10px 14px;border-radius:999px;font-weight:700;text-decoration:none;display:flex;align-items:center;justify-content:center;gap:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px;min-width:0}
.faq-actions .btn svg{width:18px;height:18px;flex:0 0 18px}
.faq-actions .btn.whatsapp{background:#25d366;color:#fff}
.faq-actions .btn.primary{background:var(--slot-free);color:#fff}
.faq-actions .btn.email{background:#f3f4f6;color:#111}

/* Call-now link/button: show phone icon, remove underline, align nicely */
.call-now{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:inherit}
.call-now svg{width:16px;height:16px;display:block;flex:0 0 16px}
.call-now, .call-now:link, .call-now:visited, .call-now:hover, .call-now:active{ text-decoration:none }

/* Header CTA keeps existing visuals but ensure no underline when call-now class present */
.main-nav .call-now{padding:8px 14px;border-radius:999px;background:var(--slot-free);color:#fff}

/* Footer call-now within .footer-cta / .btn.primary */
.footer-cta .call-now{display:inline-flex;align-items:center;gap:8px;text-decoration:none}

.footer-right a.call-now{color:#fff;text-decoration:none}

/* Blog post styles */
.post-article{background:var(--card);padding:28px;border-radius:12px;box-shadow:0 12px 30px rgba(20,30,40,0.06);margin:28px 0}
.post-article{position:relative}

/* Nudge blog post cards and contents downward — doubled spacing as requested */
.post-article{margin-top:80px !important}
.post-card{margin-top:36px !important}
.post-content{margin-top:24px}

@media (max-width:900px){
    .post-article{margin-top:68px !important}
    .post-card{margin-top:28px !important}
    .post-content{margin-top:20px}
}
.post-header h1{font-size:28px;color:var(--primary);margin-bottom:10px}
.post-meta{display:flex;flex-wrap:wrap;gap:12px;color:var(--muted);font-size:14px;margin-bottom:12px}
.post-meta .post-author strong{color:var(--primary);font-weight:700}
.post-author{display:flex;align-items:center;gap:10px}
.post-author-avatar{width:56px;height:56px;border-radius:50%;object-fit:cover;flex:0 0 56px;border:3px solid #fff;box-shadow:0 6px 18px rgba(11,38,69,0.08)}
.post-author-name{color:var(--muted);font-size:14px}
.post-author-details{display:flex;flex-direction:column;gap:4px}
.post-author-details .post-date{font-size:13px;color:var(--muted)}
.post-author-details .post-reading{font-size:13px;color:var(--muted)}
.post-views{display:inline-flex;align-items:center;gap:8px;color:var(--muted);font-size:13px}
.post-views .view-icon{width:18px;height:18px;display:inline-block;color:var(--muted)}
.post-views .view-count{font-weight:700;color:var(--primary)}

/* Card-level view indicator in blog index */
.card-views{display:inline-flex;align-items:center;gap:8px;color:var(--muted);font-size:13px;margin:4px 0;margin-top:auto}

/* Ensure post body has bottom padding so view-count sits visually above card edge */
.post-body{padding:16px;flex:1;display:flex;flex-direction:column;box-sizing:border-box}
.card-views .view-icon{width:16px;height:16px;color:var(--muted);display:inline-block}
.card-views .view-count{font-weight:700;color:var(--primary);font-size:13px}
.post-cats{margin-top:18px;margin-bottom:0;display:flex;gap:12px;align-items:center;flex-wrap:wrap}

/* Hide the literal 'Kategori:' and 'Etiketler:' labels but keep links and separators visible */
.post-cats .post-cats-label{display:none}
.post-content{color:#111;line-height:1.8;font-size:16px}
.post-content h4{margin-top:18px}
.post-content p{margin-bottom:14px}
.post-footer{margin-top:22px;border-top:1px solid #f1f3f5;padding-top:14px}
.post-article .tags a{display:inline-block;background:#f1f5f9;color:var(--primary);padding:6px 10px;border-radius:8px;text-decoration:none;margin-right:8px;font-size:13px}

/* Post cover: keep image inside card, responsive and not overflowing */
.post-cover{margin:12px 0 18px;overflow:hidden;border-radius:10px}
.post-cover img{width:100%;height:auto;display:block;max-height:420px;object-fit:cover;border-radius:10px}

@media (max-width:900px){
	.post-header h1{font-size:22px}
	.post-article{padding:18px}
}

/* Ensure titles and cover images never overflow their post card on mobile */
@media (max-width:900px){
	/* Prevent card overflow: ensure card fits viewport and inner elements don't add extra width */
	.post-article{
		width: calc(100% - 24px) !important;
		max-width: calc(100% - 24px) !important;
		margin: 0 auto !important;
		padding: 12px !important;
		box-sizing: border-box !important;
		overflow: hidden !important;
	}
	/* Make header/body/cover use full card width without extra side margins */
	.post-header, .post-body, .post-cover, .post-content{
		box-sizing: border-box !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		width: 100% !important;
		max-width: 100% !important;
	}
	.post-cover{margin:0 0 12px 0 !important;padding:0 !important}
	/* Ensure cover image fully visible, not cropped, and never overflows card */
	.post-cover img{width:100% !important;height:auto !important;max-width:100% !important;max-height:none !important;object-fit:contain !important;display:block !important}
	/* Title should wrap and stay inside the card */
	.post-header h1{margin:0 0 12px 0 !important;padding:0 !important;word-break:break-word;overflow-wrap:break-word;white-space:normal;max-width:100% !important;font-size:clamp(16px,4.6vw,20px);line-height:1.2}
	/* ensure share buttons don't push outside the header area */
	.post-header .share-top{width:auto;max-width:100%;padding-left:0;padding-right:0;margin:8px 0}
}

/* Share icons (post footer) */
.share-icons{display:flex;gap:10px;align-items:center}
.share-btn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:10px;background:#f3f6f8;color:var(--primary);border:0;cursor:pointer;text-decoration:none}
.share-btn svg{display:block}
.share-btn:hover{transform:translateY(-3px);box-shadow:0 8px 20px rgba(11,38,69,0.06)}
.share-btn:active{transform:translateY(-1px)}
.post-footer{display:flex;justify-content:flex-start;align-items:center;margin-top:18px}

@media (max-width:480px){
  .share-btn{width:40px;height:40px}
}

/* Compact top-right share group */
.share-top{position:absolute;top:16px;right:16px;display:flex;gap:8px;z-index:6}
.share-btn.small{width:36px;height:36px;border-radius:8px;padding:6px}
.share-btn.small svg{width:14px;height:14px}

@media (max-width:900px){
	.share-top{top:10px;right:10px}
}

/* When the compact share group is placed inside the post header, show it inline below the title */
.post-header .share-top{position:static;top:auto;right:auto;margin-top:12px;margin-bottom:6px;z-index:1;width:100%;display:flex;justify-content:flex-end;align-items:center}
.post-header .share-top .share-btn.small{width:40px;height:40px}

/* Make footer share buttons slightly smaller for a lower visual weight */
.post-footer .share-btn{width:38px;height:38px;border-radius:8px}
.post-footer .share-btn svg{width:16px;height:16px}
@media (max-width:480px){
	.post-footer .share-btn{width:36px;height:36px}
}

/* Brand colors for specific share buttons */
.share-btn[data-action="whatsapp"]{background:#25D366;color:#fff}
.share-btn[data-action="facebook"]{background:#1877F2;color:#fff}
.share-btn[data-action="linkedin"]{background:#0077B5;color:#fff}
.share-btn[data-action="x"]{background:#111;color:#fff}
.share-btn[data-action="instagram"]{background:linear-gradient(45deg,#feda75,#fa7e1e,#d62976,#962fbf,#4f5bd5);color:#fff}

/* Small header label for share area */
.share-header{font-weight:700;color:var(--primary);margin-right:12px;font-size:14px}

/* Blog index list */
.posts-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:18px;margin-top:36px;align-items:stretch}
.post-card{background:var(--card);border-radius:12px;overflow:hidden;box-shadow:0 8px 24px rgba(20,30,40,0.06);display:flex;flex-direction:column;height:100%}
/* Allow post cards to be a bit wider and centered on larger viewports */
.posts-grid .post-card{max-width:none !important;width:100% !important;margin-left:0 !important;margin-right:0 !important}
.post-card .post-link{display:flex;text-decoration:none;color:inherit;flex:1;align-items:stretch}
.post-thumb{width:160px;flex:0 0 160px;background:#f7f8fb}
.post-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.post-body{padding:16px;flex:1;display:flex;flex-direction:column}
.post-title{margin:0 0 8px;color:var(--primary);font-size:16px}
.post-meta{font-size:13px;color:var(--muted);margin-bottom:8px}
.post-excerpt{color:#222;margin-bottom:8px;flex:1;display:none}
.post-tags .tag{display:inline-block;background:#eef6f4;color:var(--primary);padding:4px 8px;border-radius:8px;font-size:12px;margin-right:6px}

@media (max-width:900px){
	.posts-grid{grid-template-columns:1fr}
	.post-thumb{width:120px;flex:0 0 120px}
}

/* Prevent card overflow on very small screens and allow automatic shrinking */
.post-card, .solution-card, .about-card, .review-card, .stat-card{min-width:0;box-sizing:border-box}
.post-body, .post-title, .post-excerpt, .post-meta, .post-tags{min-width:0}
.post-thumb{max-width:40%;flex:0 0 160px}
.post-thumb img, .solution-img, .about-head-img, .about-badges img{max-width:100%;height:auto;display:block}
.post-excerpt, .about-body, .review-text{word-break:break-word;hyphens:auto}

@media (max-width:600px){
	.post-thumb{flex:0 0 96px;max-width:30%}
	.post-body{padding:12px}

/* Left-align share buttons under the post title on mobile (experiment) */
@media (max-width:900px){
	.post-header .share-top{justify-content:flex-start !important;padding-left:12px !important;padding-right:0 !important}
}
	/* Mobile: show one card per row */
	.posts-grid{grid-template-columns:1fr;gap:12px;margin-top:54px}

/* Make FAQ action buttons wrap and scale on small screens */
.faq-actions{flex-wrap:wrap;gap:10px;justify-content:center;align-items:stretch}
.faq-actions .btn{flex:1 1 calc(50% - 10px);box-sizing:border-box;min-width:0;height:44px;font-size:clamp(12px,2.8vw,14px)}
@media (max-width:360px){
    .faq-actions .btn{flex-basis:100%;height:44px;font-size:13px}
}
	.post-title{font-size:14px}
	.posts-grid{gap:12px}
}

/* Global safeguard: images should never force horizontal scroll */
img{max-width:100%;height:auto}

/* Ensure post list thumbnails fill their card height (no vertical gaps) */
.post-card .post-link .post-thumb{display:block}
.post-card .post-link .post-thumb img{width:100%;height:100%;object-fit:cover;display:block}

/* Slightly zoom out thumbnails so more of the image is visible */
.post-card .post-link .post-thumb img{
	transform-origin:center;
	transform:scale(0.92);
	transition:transform 200ms ease;
}

@media (max-width:900px){
	.post-card .post-link .post-thumb img{transform:scale(0.95)}
}
@media (max-width:600px){
	.post-card .post-link .post-thumb img{transform:scale(0.98)}
}

/* Make post cards shorter and more square-like */
.post-card{height:240px}
.posts-grid{align-items:start}
.post-card .post-link .post-thumb{flex:0 0 42%;max-width:42%}
.post-body{padding:16px}

@media (max-width:900px){
	.post-card{height:180px}
	.post-thumb{flex:0 0 38%;max-width:38%}
}
@media (max-width:600px){
	/* Increase mobile card height so bottom view-count is visible */
	.post-card{height:200px}
	.post-thumb{flex:0 0 30%;max-width:30%}
	/* Add a bit more bottom padding so view-count sits comfortably */
	.post-body{padding:12px 12px 18px}

	/* Ensure thumbnails fill card height on mobile and have no gaps (override earlier global rules) */
	.post-card .post-link .post-thumb{height:100%;min-height:100%;display:block;margin:0;padding:0}
	.post-card .post-link .post-thumb img{height:100% !important;max-height:none !important;width:100%;display:block;margin:0;padding:0;object-fit:cover;object-position:center}
}

/* Final strong overrides: ensure mobile post spacing applies after any earlier clamps
	 Use high-specificity selectors so these rules win in the cascade. */
@media (max-width:900px){
	html body .post-article{margin-top:96px !important;padding-top:22px !important}
	html body .posts-grid{margin-top:120px !important}
	html body .post-card{margin-top:36px !important}
}
@media (max-width:600px){
	html body .post-article{margin-top:64px !important}
	html body .posts-grid{margin-top:90px !important}
	html body .post-card{margin-top:28px !important}
}

/* Blog index title spacing: move the 'Blog' heading lower on the index page */
html body main.container > h1{display:block;margin-top:28px;margin-bottom:18px}
@media (max-width:900px){
  html body main.container > h1{margin-top:56px;margin-bottom:18px}
}

/* Make header and footer full-bleed (span entire viewport) on all devices */
.site-header, .site-footer{
	width:100vw;
	left:50%;
	right:50%;
	margin-left:-50vw;
	margin-right:-50vw;
	box-sizing:border-box;
}
.site-header{
	position:fixed;
	top:0;
	left:0;
	right:0;
	width:100%;
	margin-left:0;
	margin-right:0;
	height:var(--header-height);
	z-index:9999;
	background:#fff;
}
.site-footer{
	position:relative;
}

/* ensure page content doesn't sit under the fixed header */
.main-grid{padding-top:var(--header-height);min-height:calc(100vh - var(--header-height));}

/* Helpers: show/hide calendar copies depending on viewport */
.desktop-only{display:block}
.mobile-only{display:none}

@media (max-width:900px){
	.desktop-only{display:none !important}
	.mobile-only{display:block !important}
}

/* Ensure mobile-only elements (calendar) are hidden on desktop viewports */
@media (min-width:901px){
	.mobile-only{display:none !important}
	.mobile-only .calendar-panel{display:none !important}
	.mobile-only .calendar-root{display:none !important}
	.desktop-only{display:block !important}
}

/* Mobile calendar carousel/page styles */
.calendar-carousel{position:relative}
.calendar-page{display:none}
.calendar-page.active{display:block}
.calendar-nav{display:flex;justify-content:space-between;align-items:center;margin-top:10px;gap:12px}
.calendar-nav button{background:#fff;border:1px solid #e8eef0;padding:6px 10px;border-radius:8px;cursor:pointer}
.calendar-dots{display:flex;gap:6px}
.calendar-dots button{width:10px;height:10px;border-radius:50%;border:0;background:#e0e6e8;cursor:pointer;padding:0}
.calendar-dots button.active{background:var(--slot-free)}

@media (min-width:901px){
  /* ensure nav hidden on desktop copies */
  .calendar-nav{display:none !important}
}

/* Mobile fullscreen and equal slot sizing */
@media (max-width:900px){
	.mobile-only .calendar-panel{
		/* slightly reduced height so card isn't fully edge-to-edge */
		height: calc(88vh - var(--header-height));
		min-height: calc(72vh - var(--header-height));
		/* nudge down a little so the panel title isn't hidden by the header */
		margin-top:8px !important;
		padding: 12px;
		border-radius: 0.5rem;
		display:flex;
		flex-direction:column;
		overflow:hidden;
		box-shadow:none;
	}

	.mobile-only .calendar-root{flex:1 1 auto;display:flex;flex-direction:column;overflow:hidden}
	/* small offset to ensure day headers are fully visible under sticky header */
	.mobile-only .calendar-root{margin-top:6px !important}
	.calendar-carousel{height:100%;display:flex;flex-direction:column;overflow:hidden}
	.calendar-page{display:none;flex-direction:column;height:100%}
	.calendar-page.active{display:flex}

	.calendar-page .day-headers{flex:0 0 auto;margin-bottom:8px;gap:6px}
	.calendar-page .day-header{padding:6px;font-size:12px;border-radius:8px}
	.calendar-page .day-header .day-date{font-size:13px}
	.calendar-page .day-header .day-week{font-size:11px}

	/* Let rows size to their content so there is no extra vertical space between slots */
	.calendar-page .slot-grid{flex:1 1 auto;display:grid;grid-auto-rows:auto !important;row-gap:12px !important;column-gap:4px !important;align-items:stretch}
	/* Adjusted slot/button height for mobile: slightly larger for tap targets */
	.calendar-page .slot{padding:0px 6px !important;font-size:11px !important;border-radius:8px;min-height:28px !important;display:flex;align-items:center;justify-content:center;height:28px !important;line-height:1}
	@media (max-width:360px){ .calendar-page .slot{font-size:10px !important;padding:0px 6px !important;min-height:24px !important;height:24px !important} }

	.calendar-nav{flex:0 0 auto;margin-top:8px}
}

/* Stronger mobile override: allow homepage cards to use viewport-relative widths
   despite the global clamp rules above. This targets main-grid children and
   common card classes with higher specificity and !important so it applies. */
@media (max-width:900px){
	.main-grid > .profile-card, .main-grid > .calendar-panel, .stats-grid, .profile-card, .calendar-panel {
		width:83vw !important;
		max-width:83vw !important;
		margin-left:auto !important;
		margin-right:auto !important;
		box-sizing:border-box !important;
	}
}