/* Styling for the STANDARD WordPress blocks used to build every page — nothing here
is a custom/ACF block, so every section stays editable in the native block editor. */
/* ---------- Color utility classes (match editor-color-palette slugs in functions.php) ---------- */
.has-brand-background-color { background-color: var(--c-brand) !important; }
.has-brand-dark-background-color { background-color: var(--c-brand-dark) !important; }
.has-accent-background-color { background-color: var(--c-accent) !important; }
.has-ink-background-color { background-color: var(--c-ink) !important; }
.has-ink-alt-background-color { background-color: var(--c-ink-alt) !important; }
.has-paper-background-color { background-color: var(--c-bg-alt) !important; }
.has-white-background-color { background-color: #fff !important; }
.has-brand-color { color: var(--c-brand) !important; }
.has-brand-dark-color { color: var(--c-brand-dark) !important; }
.has-accent-color { color: var(--c-accent) !important; }
.has-ink-color { color: var(--c-ink) !important; }
.has-white-color { color: #fff !important; }
.has-muted-color { color: var(--c-text-muted) !important; }
/* ---------- Layout ---------- */
.wp-block-group:not(.alignfull), .wp-block-columns:not(.alignfull) { max-width: var(--wrap); margin-left: auto; margin-right: auto; }
.wp-block-group.alignfull, .wp-block-columns.alignfull { max-width: none; width: 100%; }
.wp-block-group.alignfull { padding-top: 90px; padding-bottom: 90px; }
.wp-block-group.eydi-section--tight.alignfull { padding-top: 50px; padding-bottom: 50px; }
h1.wp-block-heading, h2.wp-block-heading, h3.wp-block-heading { letter-spacing: -.02em; }
.wp-block-heading .eydi-accent { color: var(--c-accent); }
/* ---------- Eyebrow / kicker paragraph style ---------- */
.eyebrow { display: inline-block; font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--c-brand); margin-bottom: 6px !important; }
.has-ink-background-color .eyebrow, .has-ink-alt-background-color .eyebrow { color: var(--c-accent); }
/* ---------- Buttons ---------- */
.wp-block-button__link { border-radius: 8px !important; font-weight: 800 !important; padding: 14px 26px !important; transition: transform .2s ease, box-shadow .2s ease; }
.wp-block-button__link:hover { transform: translateY(-2px); }
.wp-block-button.is-style-outline .wp-block-button__link { border: 1.5px solid currentColor !important; }
.has-brand-background-color.wp-block-button__link:hover, .wp-block-button__link.has-brand-background-color:hover { box-shadow: 0 14px 30px rgba(30,150,128,.3); }
/* ---------- Cover (hero banner) ---------- */
.wp-block-cover { border-radius: 0; }
.wp-block-cover .wp-block-heading { margin-top: 0; }
.wp-block-cover__inner-container > * { max-width: 640px; }
/* ---------- Columns as card grids ---------- */
.eydi-card { position: relative; background: #fff; border: 1px solid var(--c-border); border-radius: var(--c-radius); padding: 28px; height: 100%; overflow: hidden; transition: transform .2s ease, box-shadow .2s ease; }
.eydi-card:hover { transform: translateY(-5px); box-shadow: var(--c-shadow); }
.eydi-card img { border-radius: calc(var(--c-radius) - 8px); margin-bottom: 16px; }
.eydi-card > .wp-block-image:first-child {
margin: -28px -28px 16px; width: calc(100% + 56px); max-width: none;
}
.eydi-card > .wp-block-image:first-child img {
width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0;
}
/* Category cards that link through to their own detail page — the heading's own
link is stretched to cover the whole card (::after, position:absolute; inset:0)
so clicking anywhere on the card navigates, not just the heading text itself.
NOTE: the itself must NOT be position:relative — see pief-tr's own notes on
this exact bug (an absolute ::after's containing block becomes the itself). */
.eydi-card h3 a, .eydi-card h4 a { color: inherit; text-decoration: none; }
.eydi-card h3 a::after, .eydi-card h4 a::after { content: ""; position: absolute; inset: 0; }
.eydi-card h3 a:hover, .eydi-card h4 a:hover { color: var(--c-brand); }
.eydi-card:has(h3 a), .eydi-card:has(h4 a) { cursor: pointer; }
.eydi-card--dark { background: var(--c-ink-alt); color: #fff; border: none; }
.eydi-card--dark .wp-block-heading, .eydi-card--dark p { color: #fff; }
/* ---------- Markalar (brand logo) grid ---------- */
.eydi-brand-tile { display: flex; align-items: center; justify-content: center; height: 96px; background: #fff; border: 1px solid var(--c-border); border-radius: 12px; padding: 18px; font-weight: 800; font-size: 15px; color: var(--c-heading); text-align: center; transition: border-color .2s ease, transform .2s ease; }
.eydi-brand-tile:hover { border-color: var(--c-brand); transform: translateY(-3px); }
.eydi-brand-tile img { max-width: 100%; max-height: 42px; object-fit: contain; filter: grayscale(1) opacity(.7); transition: filter .2s ease; }
.eydi-brand-tile:hover img { filter: grayscale(0) opacity(1); }
/* ---------- Hero panel carousel (pief.tr ile aynı mekanik):
1 büyük + birkaç dar panel yan yana; fareyle üstüne gelince o panel aktifleşiyor
(netleşiyor), aktif değilken sırayla soldan sağa otomatik aktifleşiyor. ---------- */
.eydi-hero-panels.wp-block-columns {
margin: 0 !important; gap: 4px !important; align-items: stretch;
}
.eydi-hero-panels .wp-block-column {
margin: 0 !important; flex-grow: 0 !important; flex-shrink: 0 !important;
transition: flex-basis .7s cubic-bezier(.4,0,.2,1);
overflow: hidden;
}
.eydi-hero-panel.wp-block-cover { border-radius: 0; cursor: pointer; }
.eydi-hero-panel .wp-block-cover__image-background {
filter: brightness(.55) saturate(.85);
transition: filter .6s ease, transform 8s ease;
transform: scale(1.02);
}
.eydi-hero-panel.is-active .wp-block-cover__image-background { filter: brightness(1) saturate(1); transform: scale(1.06); }
.eydi-hero-panel .wp-block-cover__inner-container { padding: 22px; width: 100%; }
.eydi-panel-tag {
display: inline-block; background: rgba(255,255,255,.16); backdrop-filter: blur(4px);
color: #fff !important; font-size: 12px; font-weight: 700; padding: 5px 12px;
border-radius: 999px; margin-bottom: 10px !important;
}
.eydi-hero-panel.is-active .eydi-panel-tag { background: var(--c-brand); }
.eydi-panel-heading { font-size: 17px; margin: 0 !important; max-width: calc(100% - 56px); transition: font-size .5s ease; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eydi-panel-heading a { text-decoration: none; }
.eydi-hero-panel.is-active .eydi-panel-heading { font-size: 24px; white-space: normal; }
.wp-block-cover .eydi-panel-arrow-wrap { position: absolute; right: 18px; bottom: 18px; margin: 0; }
.eydi-panel-arrow .wp-block-button__link {
display: flex !important; align-items: center; justify-content: center;
width: 40px; height: 40px; padding: 0 !important; border-radius: 50% !important;
background: rgba(255,255,255,.18) !important; color: #fff !important; font-size: 18px;
backdrop-filter: blur(4px); transition: background .25s ease, transform .25s ease !important;
}
.eydi-hero-panel:hover .eydi-panel-arrow .wp-block-button__link,
.eydi-hero-panel.is-active .eydi-panel-arrow .wp-block-button__link { background: var(--c-brand) !important; }
@media (max-width: 900px) {
.eydi-hero-panels.wp-block-columns { flex-wrap: nowrap !important; position: relative; min-height: 420px; }
.eydi-hero-panels .wp-block-column {
flex-basis: 100% !important; width: 100%; position: absolute; inset: 0;
opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .5s ease;
}
.eydi-hero-panels .wp-block-column.is-active-col { position: relative; opacity: 1; visibility: visible; pointer-events: auto; }
.eydi-hero-panels .eydi-hero-panel.wp-block-cover { min-height: 420px !important; }
}
@media (prefers-reduced-motion: reduce) {
.eydi-hero-panel .wp-block-cover__image-background { transition: none; }
}
/* ---------- Hakkımızda: otomatik çapraz geçişli (crossfade) görsel banner ---------- */
.eydi-about-slider { position: relative; min-height: 420px; border-radius: var(--c-radius); overflow: hidden; }
.eydi-about-slider .eydi-about-slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 1.1s ease; }
.eydi-about-slider .eydi-about-slide.is-active { opacity: 1; }
.eydi-about-slider .eydi-about-slide img { width: 100%; height: 100%; object-fit: cover; }
@media (prefers-reduced-motion: reduce) {
.eydi-about-slider .eydi-about-slide { transition: none; }
}
@media (max-width: 782px) {
.eydi-about-slider { min-height: 260px; }
}
/* ---------- Stat numbers ---------- */
.eydi-stat b { display: block; font-size: 2rem; font-family: var(--font-heading); color: var(--c-heading); }
.has-white-color .eydi-stat b, .has-ink-background-color .eydi-stat b, .has-ink-alt-background-color .eydi-stat b { color: #fff; }
.eydi-stat span { font-size: 13.5px; color: var(--c-text-muted); }
/* ---------- Separator ---------- */
.wp-block-separator { border-color: var(--c-border); }
/* ---------- Contact form ---------- */
.eydi-contact-form { display: grid; gap: 16px; max-width: 560px; }
.eydi-contact-form label { display: block; font-size: 13.5px; font-weight: 700; margin-bottom: 6px; color: var(--c-heading); }
.eydi-contact-form input, .eydi-contact-form textarea {
width: 100%; padding: 13px 14px; border-radius: 8px; border: 1px solid var(--c-border);
background: #fff; color: var(--c-text); font: inherit;
}
.eydi-contact-form input:focus, .eydi-contact-form textarea:focus { outline: none; border-color: var(--c-brand); }
.eydi-contact-form button {
justify-self: start; appearance: none; -webkit-appearance: none; border: none; outline: none;
background: var(--c-brand); color: #fff; cursor: pointer; box-shadow: none; background-image: none;
}
.eydi-contact-form button:hover { background: var(--c-brand-dark); }
.eydi-form-notice { padding: 14px 18px; border-radius: 10px; margin-bottom: 20px; font-size: 14.5px; font-weight: 600; }
.eydi-form-notice--success { background: #e8f9f3; color: #067a5f; border: 1px solid #b9ecd9; }
.eydi-form-notice--error { background: #fdecea; color: #b3261e; border: 1px solid #f5c6c2; }
@media (max-width: 782px) {
.wp-block-columns:not(.is-not-stacked-on-mobile) { flex-wrap: wrap !important; }
.wp-block-group.alignfull { padding-top: 56px; padding-bottom: 56px; }
}