/*!
* idil Sanat ve Dil Dergisi (idil is always written in lower case)
* Stylesheet of the idilTheme plugin (a child theme of Pragma 1.1.3.2, OJS 3.5).
* Loaded by IdilThemePlugin.php after Pragma's styles; fonts are served from ../fonts.
*
* White paper, ink text, one red mark: the zincifre picture lives only in the logo.
* Values come from the idil design system (tokens.json).
* Version 1.0.4 (2026-10-02)
*/
/* ------------------------------------------------------------------ 0. Fonts
EB Garamond (text) and IBM Plex Sans (interface), SIL OFL, variable weight.
Split by script: a Turkish or English page loads only the -latin files. */
@font-face { font-family: "EB Garamond"; src: url("../fonts/EBGaramond-latin.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap;
unicode-range: U+0000-00FF, U+0100-017F, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+20BA, U+2116, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "EB Garamond"; src: url("../fonts/EBGaramond-ext.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap;
unicode-range: U+0180-024F, U+0250-02BA, U+02BD-02C5, U+02C7-02D9, U+02DB, U+02DD-02FF, U+0300-036F, U+1D00-1DBF, U+1E00-1EFF, U+2070-209F, U+20A0-20AB, U+20AD-20B9, U+20BB-20CF, U+2100-2115, U+2117-2121, U+2123-218F, U+2194-21FF, U+2200-2211, U+2213-2214, U+2216-22FF, U+25CB, U+25CF, U+2C60-2C7F, U+A720-A7FF, U+FB00-FB06; }
@font-face { font-family: "EB Garamond"; src: url("../fonts/EBGaramond-grcy.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap;
unicode-range: U+0370-03FF, U+1F00-1FFF, U+0400-052F, U+1C80-1C8F, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: "EB Garamond"; src: url("../fonts/EBGaramond-Italic-latin.woff2") format("woff2"); font-weight: 400 700; font-style: italic; font-display: swap;
unicode-range: U+0000-00FF, U+0100-017F, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+20BA, U+2116, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "EB Garamond"; src: url("../fonts/EBGaramond-Italic-ext.woff2") format("woff2"); font-weight: 400 700; font-style: italic; font-display: swap;
unicode-range: U+0180-024F, U+0250-02BA, U+02BD-02C5, U+02C7-02D9, U+02DB, U+02DD-02FF, U+0300-036F, U+1D00-1DBF, U+1E00-1EFF, U+2070-209F, U+20A0-20AB, U+20AD-20B9, U+20BB-20CF, U+2100-2115, U+2117-2121, U+2123-218F, U+2194-21FF, U+2200-2211, U+2213-2214, U+2216-22FF, U+25CB, U+25CF, U+2C60-2C7F, U+A720-A7FF, U+FB00-FB06; }
@font-face { font-family: "EB Garamond"; src: url("../fonts/EBGaramond-Italic-grcy.woff2") format("woff2"); font-weight: 400 700; font-style: italic; font-display: swap;
unicode-range: U+0370-03FF, U+1F00-1FFF, U+0400-052F, U+1C80-1C8F, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: "IBM Plex Sans"; src: url("../fonts/IBMPlexSans-latin.woff2") format("woff2"); font-weight: 400 600; font-style: normal; font-display: swap;
unicode-range: U+0000-00FF, U+0100-017F, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+20BA, U+2116, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans"; src: url("../fonts/IBMPlexSans-ext.woff2") format("woff2"); font-weight: 400 600; font-style: normal; font-display: swap;
unicode-range: U+0180-024F, U+0250-02BA, U+02BD-02C5, U+02C7-02D9, U+02DB, U+02DD-02FF, U+0300-036F, U+1D00-1DBF, U+1E00-1EFF, U+2070-209F, U+20A0-20AB, U+20AD-20B9, U+20BB-20CF, U+2100-2115, U+2117-2121, U+2123-218F, U+2194-21FF, U+2200-2211, U+2213-2214, U+2216-22FF, U+25CB, U+25CF, U+2C60-2C7F, U+A720-A7FF, U+FB00-FB06; }
/* ------------------------------------------------------------------ 1. Tokens */
:root {
--idil-kagit: #ffffff; /* page ground */
--idil-kagit-ton: #f6f1e7; /* warm paper: tone blocks, footer */
--idil-murekkep: #221f1c; /* ink: text, headings, rules that carry weight */
--idil-soluk: #6b645c; /* secondary text: 5.8:1 on white, 5.2:1 on kagit-ton */
--idil-cizgi: #ddd5c8; /* hairlines: separators only */
--idil-secim: #ece4d6; /* text selection, hover tint */
--idil-hata: #a3261b; /* form errors only (never decoration) */
--idil-garamond: "EB Garamond", Garamond, "Times New Roman", Georgia, serif;
--idil-plex: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
--idil-b1: 4px;
--idil-b2: 8px;
--idil-b3: 16px;
--idil-b4: 24px;
--idil-b5: 40px;
--idil-b6: 64px;
--idil-b7: 96px;
--idil-container: 1160px;
--idil-gutter: 24px;
--idil-measure: 700px;
--idil-logo-h: 48px; /* the word idil, top of d and l to the baseline */
--idil-logo-h-sm: 38px;
--idil-logo-alt: calc(17 / 192); /* single-line logo: the g of "Dergisi" hangs this far below the word */
--idil-control-h: 44px;
--idil-control-h-sm: 34px;
--idil-kose: 3px; /* only text inputs; everything else is square */
}
/* ------------------------------------------------------------------ 2. Base */
html { -webkit-text-size-adjust: 100%; }
body {
background-color: var(--idil-kagit);
color: var(--idil-murekkep);
font-family: var(--idil-garamond);
font-size: 19px;
line-height: 30px;
font-weight: 400;
font-kerning: normal;
font-variant-ligatures: common-ligatures;
word-break: normal;
overflow-wrap: break-word;
}
::selection { background-color: var(--idil-secim); color: var(--idil-murekkep); }
h1, h2, h3, h4, h5, h6 {
font-family: var(--idil-garamond);
font-weight: 500;
letter-spacing: 0;
color: var(--idil-murekkep);
text-wrap: balance;
}
h1 { font-size: 36px; line-height: 42px; }
h2 { font-size: 28px; line-height: 34px; margin-top: var(--idil-b5); margin-bottom: var(--idil-b3); }
h3 { font-size: 22px; line-height: 28px; margin-top: var(--idil-b4); margin-bottom: var(--idil-b2); }
h4, h5, h6 { font-size: 19px; line-height: 26px; margin-top: var(--idil-b4); margin-bottom: var(--idil-b2); }
th {
font-family: var(--idil-plex);
font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
color: var(--idil-soluk);
}
p, dd, blockquote, cite { margin-bottom: var(--idil-b3); }
li { margin-bottom: 6px; }
strong, b { font-weight: 600; }
small { font-size: 85%; }
a {
color: var(--idil-murekkep);
text-decoration: underline;
text-decoration-color: var(--idil-cizgi);
text-decoration-thickness: 1px;
text-underline-offset: .2em;
transition: text-decoration-color .12s, color .12s, background-color .12s;
}
a:hover { color: var(--idil-murekkep); text-decoration-color: var(--idil-murekkep); }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
.btn:focus-visible, .form-control:focus-visible {
outline: 2px solid var(--idil-murekkep);
outline-offset: 2px;
box-shadow: none;
}
hr { border: 0; border-top: 1px solid var(--idil-cizgi); opacity: 1; margin: var(--idil-b5) 0; }
blockquote {
margin: var(--idil-b4) 0;
padding: 0 0 0 var(--idil-b4);
border-left: 1px solid var(--idil-murekkep);
font-style: italic;
}
cite { text-align: left; }
code, kbd, samp, pre { font-size: .85em; color: var(--idil-murekkep); }
table { font-family: var(--idil-garamond); font-size: 17px; line-height: 26px; }
thead { border-bottom: 1px solid var(--idil-murekkep); text-transform: none; }
tr { border-bottom: 1px solid var(--idil-cizgi); }
td, th { padding: var(--idil-b2) var(--idil-b3) var(--idil-b2) 0; }
dt {
font-family: var(--idil-plex);
font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
color: var(--idil-soluk);
}
address { font-style: normal; font-size: 17px; line-height: 27px; }
aside { font-size: 17px; line-height: 26px; }
/* Container: content width plus gutters, 16px gutters on phones */
.container { max-width: calc(var(--idil-container) + 2 * var(--idil-gutter)); padding-left: var(--idil-gutter); padding-right: var(--idil-gutter); }
/* Label voice (etiket): section names, eyebrows, small headings */
.metadata { font-family: var(--idil-plex); font-size: 14px; line-height: 20px; color: var(--idil-soluk); }
.metadata a { color: var(--idil-soluk); text-decoration: none; }
.metadata a:hover { color: var(--idil-murekkep); text-decoration: underline; }
/* Migration notice injected from the site header (.idil-notice) */
.idil-notice {
background: var(--idil-kagit-ton) !important;
border-bottom: 1px solid var(--idil-cizgi) !important;
color: var(--idil-murekkep) !important;
padding: 10px var(--idil-gutter) !important;
font-family: var(--idil-plex);
font-size: 13px !important;
line-height: 20px !important;
text-align: center;
}
/* ------------------------------------------------------------------ 3. Header */
.main-header {
min-height: 0;
padding: 0 max(var(--idil-gutter), calc((100% - var(--idil-container)) / 2));
background-color: var(--idil-kagit);
border-bottom: 1px solid var(--idil-cizgi);
font-family: var(--idil-plex);
font-weight: 400;
color: var(--idil-murekkep);
}
.main-header a { font-family: var(--idil-plex); color: var(--idil-murekkep); text-decoration: none; background: none; }
.main-header a:hover { background: none; }
/* Account row: language and sign-in, small and quiet */
.main-header__admin {
align-items: center;
min-height: 40px;
font-size: 13px;
line-height: 20px;
}
.main-header__admin #navigationUser { display: flex; gap: var(--idil-b4); }
.main-header__admin .main-menu__nav-item { margin: 0; }
.main-header__admin a,
.main-header__admin .main-menu__nav-link,
.main-header__admin .main-header__nav-link { padding: 10px 0; color: var(--idil-soluk); font-size: 13px; line-height: 20px; font-weight: 400; letter-spacing: 0; text-transform: none; box-shadow: none; }
.main-header__admin a:hover,
.main-header__admin .main-menu__nav-link:hover,
.main-header__admin .main-header__nav-link:hover { color: var(--idil-murekkep); background: none; text-decoration: underline; text-decoration-color: var(--idil-murekkep); }
.main-header__admin .dropdown-menu { font-size: 14px; }
/* Brand row: the logo on the left, the menu on the logo's baseline
(the logo image ends at the baseline of the word, so the image bottom is the line to share).
The single-line logo (192 px word + 17 px for the descenders of "Dergisi", "Language": height="209")
is drawn taller by that share and hangs it below the baseline with a negative margin, so the word
stays --idil-logo-h high and the menu stays on its baseline. Older logos (height="192") are untouched. */
.main-menu { padding: var(--idil-b3) 0 var(--idil-b4); align-items: last baseline; flex-wrap: nowrap; gap: var(--idil-b5); }
.main-menu__title {
margin: 0;
padding: 0;
font-family: var(--idil-garamond);
font-size: 26px;
line-height: 32px;
font-weight: 500;
letter-spacing: 0;
}
.main-menu__title a { display: block; padding: 0; line-height: 0; }
.main-menu__title img { display: block; height: var(--idil-logo-h); max-height: none; width: auto; max-width: 100%; }
.main-menu__title img[height="209"] { height: calc(var(--idil-logo-h) * (1 + var(--idil-logo-alt))); margin-bottom: calc(var(--idil-logo-h) * var(--idil-logo-alt) * -1); }
.main-menu__title span { line-height: 32px; } /* when the journal name is shown instead of a logo */
/* Primary navigation (etiket: Plex, upper case, open tracking) */
.main-menu__nav { margin-top: 0; justify-content: flex-end; }
.main-menu__nav .navbar-nav { gap: var(--idil-b1); }
.main-menu__nav-item { margin: 0; }
.main-menu__nav-link,
.main-header .main-menu__nav .main-menu__nav-link {
display: flex;
align-items: center;
padding: 6px 10px;
font-size: 12px;
line-height: 16px;
font-weight: 500;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--idil-murekkep);
box-shadow: inset 0 -1px 0 transparent;
}
.main-menu__nav-link:hover, .main-menu__nav-link:focus,
.main-header .main-menu__nav .main-menu__nav-link:hover {
color: var(--idil-murekkep);
background-color: transparent;
box-shadow: inset 0 -1px 0 var(--idil-murekkep);
}
.main-menu__nav-item.active > .main-menu__nav-link,
.main-menu__nav-item > .main-menu__nav-link[aria-expanded="true"] {
box-shadow: inset 0 -2px 0 var(--idil-murekkep);
}
.dropdown-toggle::after {
width: 6px; height: 6px;
margin-left: 7px;
border: 0;
border-right: 1.25px solid currentColor;
border-bottom: 1.25px solid currentColor;
transform: translateY(-3px) rotate(45deg);
vertical-align: middle;
}
/* Dropdowns (menu, language, account, citation formats) */
.dropdown-menu {
min-width: 240px;
margin-top: 0;
padding: var(--idil-b2) 0;
background-color: var(--idil-kagit);
border: 1px solid var(--idil-cizgi);
border-top: 1px solid var(--idil-murekkep);
border-radius: 0;
box-shadow: 0 10px 28px rgba(34, 31, 28, .08);
text-align: left;
}
.dropdown-menu .dropdown-item { padding: 0; background: none; font-family: var(--idil-plex); margin: 0; text-align: left; white-space: normal; }
/* the last two menu lists open towards the left: the menu ends at the right edge (2026-10-03) */
.main-menu__nav .navbar-nav > .main-menu__nav-item:nth-last-child(-n+2) > .dropdown-menu, .main-header__admin .dropdown-menu { right: 0; left: auto; }
.dropdown-menu .dropdown-item a,
.main-header .dropdown-menu .dropdown-item a {
display: block;
padding: 9px var(--idil-b3);
font-family: var(--idil-plex);
font-size: 14px;
line-height: 20px;
font-weight: 400;
letter-spacing: 0;
text-transform: none;
color: var(--idil-murekkep);
text-decoration: none;
}
.dropdown-menu .dropdown-item a:hover, .dropdown-menu .dropdown-item a:focus,
.dropdown-menu .dropdown-item a.active, .dropdown-menu .dropdown-item a:active,
.main-header .dropdown-menu .dropdown-item a:hover {
background-color: var(--idil-kagit-ton);
color: var(--idil-murekkep);
}
.main-header .dropdown-menu :focus-visible { outline-offset: -2px; }
/* Hamburger (below 992px) */
.hamburger { height: 44px; width: 44px; padding: 0; justify-content: center; align-items: center; background: none; border: 0; margin-top: 0; }
.hamburger:focus { box-shadow: none; }
.hamburger__wrapper { width: 24px; height: 16px; }
.hamburger__icon, .hamburger__icon::before, .hamburger__icon::after { width: 24px; height: 1.5px; background-color: var(--idil-murekkep); }
.hamburger__icon::before { top: 7px; }
.hamburger__icon::after { top: 14px; }
/* ------------------------------------------------------------------ 4. Page frame */
.main__content { margin-top: var(--idil-b6); margin-bottom: var(--idil-b7); }
.main__header { margin-top: 0; margin-bottom: var(--idil-b5); }
.main__title, .main__header h1, .main__header h2.main__title {
display: block;
margin: 0;
font-family: var(--idil-garamond);
font-size: 36px;
line-height: 42px;
font-weight: 500;
letter-spacing: 0;
}
/* a short ink rule under page titles: the hairline of the masthead, drawn in ink */
.main__header::after {
content: "";
display: block;
width: 48px;
height: 1px;
margin-top: var(--idil-b4);
background: var(--idil-murekkep);
}
.page_index .main__header::after, .page_article .main__header::after { content: none; }
/* "Edit" link shown to journal managers next to page titles */
.main__header > small.float-right { display: block; margin-top: var(--idil-b3); }
.main__header > small.float-right .btn { min-height: 30px; padding: 0 10px; font-size: 11px; line-height: 16px; }
/* Reading column */
.main__content :is(.col-lg-8, #articleMain) > :is(div, section) > :is(p, ul, ol) { max-width: var(--idil-measure); }
.main__content .col-lg-8 h2 { font-size: 26px; line-height: 32px; }
.main__content .col-lg-8 h3 { font-size: 21px; line-height: 28px; }
.main__content :is(.col-lg-8, #articleMain) ul:not([class]) { padding-left: 1.2em; }
.main__content :is(.col-lg-8, #articleMain) ul:not([class]) > li::marker { color: var(--idil-soluk); }
.main__content :is(.col-lg-8, #articleMain) ol:not([class]) > li::marker { font-family: var(--idil-plex); font-size: 14px; color: var(--idil-soluk); }
/* ------------------------------------------------------------------ 5. Buttons, forms, alerts */
.btn, button.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--idil-b2);
min-height: var(--idil-control-h);
padding: 0 var(--idil-b4);
border-radius: 0;
font-family: var(--idil-plex);
font-size: 13px;
line-height: 18px;
font-weight: 500;
letter-spacing: .06em;
text-transform: uppercase;
text-decoration: none;
transition: background-color .12s, border-color .12s, color .12s;
}
.btn-primary, .btn-primary:visited {
background-color: var(--idil-murekkep);
border: 1px solid var(--idil-murekkep);
color: var(--idil-kagit);
}
.btn-primary:hover, .btn-primary:focus-visible,
.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
background-color: var(--idil-kagit);
border-color: var(--idil-murekkep);
color: var(--idil-murekkep);
}
.btn-secondary, .btn-secondary:visited {
background-color: transparent;
border: 1px solid var(--idil-murekkep);
color: var(--idil-murekkep);
}
.btn-secondary:hover, .btn-secondary:focus-visible, .btn-secondary:active, .show > .btn-secondary.dropdown-toggle {
background-color: var(--idil-murekkep);
border-color: var(--idil-murekkep);
color: var(--idil-kagit);
}
.btn:disabled, .btn.disabled { background-color: var(--idil-kagit-ton); border-color: var(--idil-cizgi); color: var(--idil-soluk); opacity: 1; }
button:not(.btn):not(.hamburger):not(.close):not(.navbar-toggler) { border-radius: 0; }
form { font-family: var(--idil-plex); font-size: 15px; line-height: 22px; }
legend { font-family: var(--idil-garamond); font-size: 22px; line-height: 28px; font-weight: 500; margin-bottom: var(--idil-b3); }
label, .form-label { font-weight: 500; color: var(--idil-murekkep); margin-bottom: 6px; }
.form-group { margin-bottom: var(--idil-b4); }
.form-control, select.form-control {
min-height: var(--idil-control-h);
padding: 10px 12px;
margin-bottom: 0;
background-color: var(--idil-kagit);
border: 1px solid #8a8278;
border-radius: var(--idil-kose);
color: var(--idil-murekkep);
font-size: 15px;
line-height: 22px;
}
.form-control::placeholder { color: var(--idil-soluk); opacity: 1; }
.form-control:hover { border-color: var(--idil-murekkep); background-color: var(--idil-kagit); }
.form-control:focus { border-color: var(--idil-murekkep); background-color: var(--idil-kagit); box-shadow: none; outline: 2px solid var(--idil-murekkep); outline-offset: 1px; }
.form-check-input { width: 18px; height: 18px; margin-top: 2px; border: 1px solid #8a8278; background-color: var(--idil-kagit); border-radius: 0; }
.form-check-input:checked, .form-check-input:active { background-color: var(--idil-murekkep); border-color: var(--idil-murekkep); }
.form-check-input[type="radio"] { border-radius: 50%; }
.form-check-input:focus { box-shadow: none; border-color: var(--idil-murekkep); }
.form-check-label { font-weight: 400; }
.required, .form-label .required { color: var(--idil-hata); }
.pkp_form_error, .invalid-feedback, .form-error { color: var(--idil-hata); font-family: var(--idil-plex); font-size: 14px; }
[role=alert], .alert {
margin: 0 0 var(--idil-b5);
padding: var(--idil-b3) var(--idil-b4);
background-color: var(--idil-kagit-ton);
border: 1px solid var(--idil-cizgi);
border-left: 2px solid var(--idil-murekkep);
border-radius: 0;
color: var(--idil-murekkep);
font-family: var(--idil-plex);
font-size: 15px;
line-height: 22px;
text-align: left;
}
[role=alert] a { color: var(--idil-murekkep); text-decoration-color: var(--idil-murekkep); }
.idil-notice[role=status] { margin: 0; border-left: 0; }
.modal .modal-content { background-color: var(--idil-kagit); border: 1px solid var(--idil-cizgi); border-top: 1px solid var(--idil-murekkep); border-radius: 0; color: var(--idil-murekkep); }
.modal-body { padding: var(--idil-b5); }
.modal .close { width: 44px; height: 44px; margin: calc(-1 * var(--idil-b4)) calc(-1 * var(--idil-b4)) 0 0; font-size: 28px; line-height: 1; background: none; border: 0; color: var(--idil-murekkep); }
/* ------------------------------------------------------------------ 6. Homepage */
.page_index.op_index .main__content { margin-top: var(--idil-b5); }
.page_index.op_index .main__content > header.row { row-gap: var(--idil-b4); margin-bottom: var(--idil-b6); }
.page_index.op_index .main__content > header.row > figure { margin: 0 0 var(--idil-b4); background: none !important; }
.page_index.op_index .main__content > header.row > figure img { width: 100%; mix-blend-mode: normal !important; }
.page_index.op_index .main__content > header.row > figure hr { display: none; }
/* About the journal: the description set as a lead paragraph.
The label is "Dergi Hakkında"; the journal-name heading is kept for screen readers only,
so "idil" is never set in capitals by the label style. */
.journal-desc { padding: 0; border: 0; }
.journal-desc__title,
.announcement__content_boxed > .metadata,
.issue > .row > header.issue > .metadata:first-child,
.recent-issues > h3,
.issue-section__toc-title {
display: block;
margin: 0 0 var(--idil-b3);
font-family: var(--idil-plex);
font-size: 12px;
line-height: 16px;
font-weight: 500;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--idil-soluk);
}
.journal-desc > .metadata {
position: absolute !important;
width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.journal-desc article { font-size: 22px; line-height: 34px; }
.journal-desc article > p { margin-bottom: var(--idil-b4); }
.journal-desc article > p:last-child { margin: 0; }
/* Announcements on the homepage: a warm paper block */
.announcement__content_boxed {
height: 100%;
padding: var(--idil-b4);
background-color: var(--idil-kagit-ton);
border: 0;
}
.announcement__title_boxed { margin: 0 0 var(--idil-b1); font-size: 22px; line-height: 28px; font-weight: 500; }
.announcement__content_boxed p { font-size: 17px; line-height: 26px; }
.announcement__content_boxed p.metadata { font-size: 13px; line-height: 18px; margin-bottom: var(--idil-b2); }
.announcement__content_boxed .text-right { text-align: right; }
.announcement__content_boxed .text-right .btn { min-height: 32px; padding: 0 10px; border: 0; }
/* Current issue (homepage) and issue pages */
.issue { padding-top: 0; padding-bottom: 0; }
.issue > .row { align-items: flex-start; row-gap: var(--idil-b4); }
.issue__header, .issue__title {
margin: 0 0 var(--idil-b2);
font-family: var(--idil-garamond);
font-size: 36px;
line-height: 42px;
font-weight: 500;
}
.page_index .issue__title { font-size: 30px; line-height: 36px; }
.issue__title .issue__title, .issue__header .issue__title { display: inline; font-size: inherit; color: var(--idil-soluk); }
header.issue > p.metadata:not(:first-child) { margin: 0; }
.issue-desc { font-size: 17px; line-height: 27px; max-width: var(--idil-measure); margin-top: var(--idil-b3); }
.issue__cover { display: flex; justify-content: flex-end; }
.issue__cover img { width: auto; max-width: min(100%, 200px); max-height: 280px; height: auto; border: 1px solid var(--idil-cizgi); }
.issue__cover a { line-height: 0; }
/* Table of contents */
.issue-galleys { margin: var(--idil-b5) 0 0; }
.issue-galleys > hr, .issue-section > hr { display: none; }
.issue-galleys__title { font-size: 22px; line-height: 28px; margin: 0 0 var(--idil-b3); }
.issue > hr, .main__content > .issue ~ hr, .main__content > hr { display: none; }
.issue-section { padding: 0; margin: var(--idil-b5) 0 0; }
.issue-section__toc-title { margin-bottom: var(--idil-b4); }
.issue-section__header { margin: 0; padding-top: var(--idil-b3); border-top: 1px solid var(--idil-murekkep); }
.issue-section__title {
margin: 0 0 var(--idil-b1);
font-family: var(--idil-garamond);
font-size: 22px;
line-height: 28px;
font-weight: 500;
font-style: italic;
letter-spacing: 0;
color: var(--idil-murekkep);
}
.issue-section__toc { margin: 0; padding: 0; }
.issue-section__toc-item { margin: 0; border-bottom: 1px solid var(--idil-cizgi); }
.issue-section__toc-item:last-child { border-bottom: 0; }
/* Article summary (TOC row, search result) */
.article { --bs-gutter-x: 0; margin: 0; padding: var(--idil-b4) 0; row-gap: var(--idil-b2); }
.article > [class*="col-sm-8"], .article > [class*="col-sm-12"] { padding-right: var(--idil-b4); }
.article__title { margin: 0 0 6px; font-family: var(--idil-garamond); font-size: 20px; line-height: 27px; font-weight: 500; letter-spacing: .01em; }
.article__title a { text-decoration: none; }
.article__title a:hover { text-decoration: underline; text-decoration-color: var(--idil-murekkep); }
.article .metadata { margin: 0; font-family: var(--idil-garamond); font-size: 17px; line-height: 24px; font-style: italic; color: var(--idil-soluk); }
.article > [class*="col-sm-4"] { display: flex; flex-wrap: wrap; align-content: flex-start; justify-content: flex-end; gap: var(--idil-b2); }
/* Galley buttons (PDF, HTML): small square outline */
.issue-galleys .btn, .article .btn-secondary, #articleMain section > .btn-secondary, .galley_supplementary {
min-height: var(--idil-control-h-sm);
padding: 0 12px;
font-size: 12px;
line-height: 16px;
}
.btn.pdf::before, .btn.file::before {
content: "";
width: 9px; height: 11px;
background: currentColor;
clip-path: polygon(0 0, 62% 0, 100% 32%, 100% 100%, 0 100%);
}
.btn.restricted::before { content: none; }
/* Recent issues */
.recent-issues { margin: var(--idil-b6) 0 0; padding-top: var(--idil-b3); border-top: 1px solid var(--idil-murekkep); }
.recent-issues > h3 { margin-bottom: var(--idil-b4); }
.recent-issues__item { margin: 0 0 var(--idil-b4); }
.recent-issues__issue-title { margin: 0 0 var(--idil-b1); font-family: var(--idil-garamond); font-size: 21px; line-height: 27px; font-weight: 500; }
.recent-issues__issue-title a { text-decoration: none; }
.recent-issues__issue-title a:hover { text-decoration: underline; }
.recent-issues .metadata { margin: 0; font-size: 13px; }
/* Additional homepage content */
.additional-content { columns: auto; margin: var(--idil-b6) 0 0; padding-top: var(--idil-b3); border-top: 1px solid var(--idil-cizgi); }
/* ------------------------------------------------------------------ 7. Archive */
.page_issue.op_archive .main__content > .row { row-gap: var(--idil-b5); }
.archived-issue { display: flex; flex-direction: column; gap: 6px; }
.archived-issue img { aspect-ratio: 21 / 29.7; object-fit: cover; width: 100%; border: 1px solid var(--idil-cizgi); margin-bottom: var(--idil-b2); }
/* an issue without a cover gets a blank one: warm paper and the wordmark in one tone */
.archived-issue:not(:has(img))::before {
content: "";
display: block;
aspect-ratio: 21 / 29.7;
margin-bottom: var(--idil-b2);
background: var(--idil-kagit-ton) url("../images/kapak-bos.svg") no-repeat 13% 8% / 44% auto;
border: 1px solid var(--idil-cizgi);
}
.archived-issue__link { text-decoration: none; }
.archived-issue__title, .archived-issue__series { margin: 0; font-family: var(--idil-garamond); font-size: 19px; line-height: 24px; font-weight: 500; letter-spacing: 0; }
.archived-issue__series { font-weight: 400; font-size: 16px; line-height: 22px; color: var(--idil-soluk); }
.archived-issue__link:hover .archived-issue__title { text-decoration: underline; text-decoration-color: var(--idil-murekkep); }
.archived-issue .metadata { margin: 0; }
.archived-issue .metadata small { font-size: 13px; }
.issue__pagination { margin-top: var(--idil-b5); font-family: var(--idil-plex); font-size: 14px; }
/* ------------------------------------------------------------------ 8. Article page */
.page_article .main__header { position: relative; margin-bottom: var(--idil-b5); padding-bottom: var(--idil-b5); }
.page_article .main__header::before {
content: "";
position: absolute;
left: calc(var(--bs-gutter-x) * .5);
right: calc(var(--bs-gutter-x) * .5);
bottom: 0;
height: 1px;
background: var(--idil-cizgi);
}
.page_article .main__header > .col-md-9 > .metadata { margin: 0 0 var(--idil-b1); }
.page_article .main__header > .col-md-9 > .metadata:nth-of-type(2):not(:has(a)) {
margin: var(--idil-b3) 0 var(--idil-b3);
font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
color: var(--idil-murekkep);
}
.page_article .main__title {
margin: 0 0 var(--idil-b4);
font-family: var(--idil-garamond);
font-size: 32px;
line-height: 40px;
font-weight: 500;
letter-spacing: .005em;
max-width: 880px;
}
.page_article .main__header p.metadata:has(> a[href*="doi.org"])::before {
content: "DOI";
margin-right: var(--idil-b2);
font-size: 12px; font-weight: 500; letter-spacing: .06em; color: var(--idil-soluk);
}
.page_article .main__header p.metadata > a[href*="doi.org"] { color: var(--idil-murekkep); text-decoration: underline; text-decoration-color: var(--idil-cizgi); }
.page_article .main__header p.metadata > a[href*="doi.org"]:hover { text-decoration-color: var(--idil-murekkep); }
/* Authors: each name once, the affiliation under it (templates/frontend/objects/article_details.tpl) */
.page_article .main__header ul.idil-yazarlar {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: var(--idil-b3) var(--idil-b5);
margin: var(--idil-b4) 0 0;
padding: 0;
list-style: none;
}
.idil-yazar { margin: 0; }
.idil-yazar__ad { font-family: var(--idil-garamond); font-size: 21px; line-height: 28px; font-weight: 500; color: var(--idil-murekkep); }
.idil-yazar__orcid { display: inline-block; margin-left: 4px; line-height: 0; vertical-align: 1px; text-decoration: none; }
.idil-yazar__orcid svg, .orcid_icon { width: 16px; height: 16px; margin: 0; }
.idil-yazar__kurum { display: block; margin-top: 2px; font-family: var(--idil-plex); font-size: 14px; line-height: 20px; color: var(--idil-soluk); }
.idil-yazar__kurum .article__rorImage { padding-left: 2px; line-height: 0; text-decoration: none; }
.idil-yazar__kurum .article__rorImage svg { width: 14px; height: 14px; vertical-align: -2px; }
.page_article .main__header > section.col-md-3 { display: flex; justify-content: flex-end; }
.page_article .main__header > section.col-md-3 img { width: 100%; max-width: 200px; border: 1px solid var(--idil-cizgi); }
#mainArticleContent { row-gap: var(--idil-b5); }
#articleMain > section { margin: 0 0 var(--idil-b5); max-width: var(--idil-measure); }
#articleMain > section > h2, #mainArticleContent aside > section > h2, #articleMain .label {
margin: 0 0 var(--idil-b3);
padding-top: var(--idil-b2);
border-top: 1px solid var(--idil-murekkep);
font-family: var(--idil-plex);
font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
color: var(--idil-murekkep);
}
#articleMain > section > p, #articleMain > section > div { font-size: 19px; line-height: 30px; }
#articleMain > section > h2 + p > span { font-style: italic; }
/* Abstract blocks in each language (templates/frontend/objects/article_details.tpl): Öz, then Abstract */
.idil-ozet__baslik { margin: 0 0 var(--idil-b2); font-size: 19px; line-height: 27px; font-weight: 500; letter-spacing: .005em; }
.idil-ozet__metin p:last-child { margin-bottom: 0; }
#articleMain > section > p.idil-ozet__anahtar { margin: var(--idil-b3) 0 0; font-size: 17px; line-height: 26px; }
.idil-ozet__anahtar strong {
margin-right: var(--idil-b2);
font-family: var(--idil-plex);
font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
color: var(--idil-soluk);
}
.idil-ozet__anahtar span { font-style: italic; }
/* A keyword line that stayed inside an abstract ("Anahtar Kelimeler: …") looks like the one above */
.idil-ozet__metin > p:last-child:not(:first-child) > strong:first-child {
margin-right: var(--idil-b2);
font-family: var(--idil-plex);
font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
color: var(--idil-soluk);
}
#articleMain > section > ol { padding-left: 1.4em; font-size: 17px; line-height: 26px; }
#articleMain > section > ol > li { margin-bottom: var(--idil-b2); padding-left: var(--idil-b1); overflow-wrap: anywhere; }
#articleMain > section > ol > li::marker { font-family: var(--idil-plex); font-size: 12px; color: var(--idil-soluk); }
#articleMain > section:has(> .btn) { display: flex; flex-wrap: wrap; gap: var(--idil-b2); }
#articleMain > hr { display: none; }
#mainArticleContent aside { font-family: var(--idil-plex); font-size: 14px; line-height: 21px; }
#mainArticleContent aside > section { margin: 0 0 var(--idil-b5); }
#mainArticleContent aside > section > ul { list-style: none; padding: 0; }
#mainArticleContent aside > section > ul > li { margin: 0 0 var(--idil-b2); }
#mainArticleContent aside img { max-width: 100%; height: auto; }
/* How to cite (Citation Style Language plugin) */
#citationOutput {
margin: 0 0 var(--idil-b3) !important;
padding: var(--idil-b3);
background-color: var(--idil-kagit-ton);
font-family: var(--idil-garamond);
font-size: 16px;
line-height: 24px;
overflow-wrap: anywhere;
}
#citationOutput .csl-entry { margin: 0; }
#cslCitationFormatsButton { min-height: var(--idil-control-h-sm); padding: 0 12px; font-size: 12px; background-color: transparent; border: 1px solid var(--idil-murekkep); color: var(--idil-murekkep); }
#cslCitationFormatsButton:hover, #cslCitationFormatsButton[aria-expanded="true"] { background-color: var(--idil-murekkep); color: var(--idil-kagit); }
#mainArticleContent aside section h3 { margin: var(--idil-b3) 0 var(--idil-b2); font-family: var(--idil-plex); font-size: 13px; line-height: 18px; font-weight: 500; }
#mainArticleContent aside section hr { margin: var(--idil-b3) 0; }
/* ------------------------------------------------------------------ 9. Masthead, search, static pages */
.announcements__toc .announcement { padding: var(--idil-b4) 0; }
.announcements__toc .announcement h2 { margin: 0 0 var(--idil-b1); font-size: 26px; line-height: 32px; }
.announcements__toc .announcement h2 a { text-decoration: none; }
.announcements__toc .announcement h2 a:hover { text-decoration: underline; text-decoration-color: var(--idil-murekkep); }
.announcement__date { margin-bottom: var(--idil-b2); font-family: var(--idil-plex); font-size: 13px; color: var(--idil-soluk); }
.announcement__desc { margin-bottom: var(--idil-b3); }
.page_masthead .user_listing { padding: 0; margin: 0 0 var(--idil-b5); list-style: none; }
.page_masthead .user_listing li { display: flex; flex-direction: column; margin: 0; padding: var(--idil-b2) 0; border-bottom: 1px solid var(--idil-cizgi); font-size: 17px; line-height: 25px; }
.page_masthead .user_listing .name { font-weight: 500; }
.page_masthead .user_listing .affiliation { color: var(--idil-soluk); }
.page_masthead .user_listing .date_start { order: 3; font-family: var(--idil-plex); font-size: 13px; color: var(--idil-soluk); }
.page_search .main__content aside { padding-right: var(--idil-b5); }
.page_search .main__content aside .form-row select { flex: 1; }
.cmp_pagination, .pkp_page_nav, .page_search .main__content .col-md-8 > div:last-child { font-family: var(--idil-plex); font-size: 14px; }
.page_about .main__content .col-lg-8 > div > p:first-child { font-size: 22px; line-height: 34px; }
/* ------------------------------------------------------------------ 10. Footer */
.main-footer {
margin-top: 0;
padding: var(--idil-b6) 0 var(--idil-b5);
background-color: var(--idil-kagit-ton);
border-top: 1px solid var(--idil-cizgi);
color: var(--idil-soluk);
font-family: var(--idil-plex);
font-size: 14px;
line-height: 22px;
}
.main-footer a { color: var(--idil-murekkep); text-decoration: none; }
.main-footer a:hover { text-decoration: underline; text-decoration-color: var(--idil-murekkep); }
.main-footer h1, .main-footer h2, .main-footer h3, .main-footer h4, .main-footer .title {
margin: 0 0 var(--idil-b3);
font-family: var(--idil-plex);
font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
color: var(--idil-soluk);
}
.main-footer p, .main-footer li, .main-footer blockquote, .main-footer cite, .main-footer dd, .main-footer .btn { font-family: var(--idil-plex); font-weight: 400; }
.main-footer li { margin: 0 0 6px; }
/* Sidebar blocks laid out as footer columns */
.main-footer .row[role="complementary"] { row-gap: var(--idil-b5); column-gap: 0; }
.main-footer .row[role="complementary"] > .pkp_block { flex: 1 1 200px; max-width: 100%; }
.main-footer .row[role="complementary"] > div > p:first-child > strong:only-child {
display: block;
font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
color: var(--idil-soluk);
}
.main-footer .block_web_feed ul { display: flex; gap: var(--idil-b2); flex-wrap: wrap; }
.main-footer .block_web_feed img { height: 15px; width: auto; }
.main-footer .block_language li.current a { text-decoration: underline; text-decoration-color: var(--idil-murekkep); }
.main-footer hr { margin: var(--idil-b5) 0 var(--idil-b4); border-top: 1px solid var(--idil-cizgi); }
.main-footer__block { align-items: center; row-gap: var(--idil-b4); }
.main-footer__block p { margin: 0 0 6px; font-size: 14px; line-height: 22px; color: var(--idil-soluk); }
.main-footer__block p:last-child { margin-bottom: 0; }
.main-footer__block p strong { color: var(--idil-murekkep); font-weight: 500; }
.main-footer__block a { text-decoration: underline; text-decoration-color: var(--idil-cizgi); }
.main-footer__block [class*="offset-"] { display: flex; justify-content: flex-end; }
.main-footer__block [class*="offset-"] img { width: 80px; max-width: none; filter: grayscale(1) contrast(1.1); opacity: .7; }
@media (min-width: 768px) {
/* one line: the publisher statement on the left, the OJS badge on the right */
.main-footer__block { flex-wrap: nowrap; column-gap: var(--idil-b5); }
.main-footer__block > .col-md-8 { flex: 1 1 auto; width: auto; }
.main-footer__block > [class*="offset-"] { flex: none; width: auto; margin-left: auto; }
}
/* Publisher band (Page Footer, as on the other Artsürem journals): the Artsürem logo in ink,
a hairline, then two lines — who runs idil and where it is published; licence, copyright, e-ISSN */
.idil-yayinci { display: flex; align-items: center; gap: var(--idil-b4); }
.main-footer .idil-yayinci__logo { flex: none; display: block; margin-left: -10px; line-height: 0; text-decoration: none; }
.idil-yayinci__logo img { display: block; width: 132px; height: auto; max-width: none; filter: brightness(0); opacity: .82; transition: opacity 120ms; }
.idil-yayinci__logo:hover img { opacity: 1; }
.idil-yayinci__metin { min-width: 0; padding-left: var(--idil-b4); border-left: 1px solid var(--idil-cizgi); }
.idil-yayinci__metin p:first-child > strong:first-child { font-family: var(--idil-garamond); font-size: 17px; font-weight: 500; }
@media (max-width: 767.98px) {
.idil-yayinci { flex-direction: column; align-items: flex-start; gap: var(--idil-b3); }
.idil-yayinci__metin { padding-left: 0; border-left: 0; }
}
@media print {
.idil-yayinci__logo img { opacity: 1; }
.idil-yayinci__metin { border-left-color: #000; }
}
/* Publisher line (optional, from the Page Footer setting): */
.idil-yayinci p { max-width: 760px; }
/* ------------------------------------------------------------------ 11. Small screens */
@media (max-width: 991.98px) {
.main-menu { flex-wrap: wrap; align-items: center; gap: 0; padding: var(--idil-b3) 0; justify-content: space-between; }
.main-menu__title img { height: var(--idil-logo-h-sm); }
.main-menu__title img[height="209"] { height: calc(var(--idil-logo-h-sm) * (1 + var(--idil-logo-alt))); margin-bottom: calc(var(--idil-logo-h-sm) * var(--idil-logo-alt) * -1); }
.main-menu__nav { flex-basis: 100%; }
.main-menu__nav .navbar-nav { gap: 0; padding: var(--idil-b2) 0 var(--idil-b2); border-top: 1px solid var(--idil-cizgi); margin-top: var(--idil-b3); }
.main-menu__nav-item { display: block; }
.main-menu__nav-link, .main-header .main-menu__nav .main-menu__nav-link { min-height: 44px; padding: 10px 0; justify-content: space-between; font-size: 13px; }
.main-menu__nav-link:hover, .main-header .main-menu__nav .main-menu__nav-link:hover { box-shadow: none; text-decoration: underline; }
.main-menu__nav-item.active > .main-menu__nav-link { box-shadow: inset 2px 0 0 var(--idil-murekkep); padding-left: 12px; }
.main-menu__nav-item > .main-menu__nav-link[aria-expanded="true"] { box-shadow: none; }
.main-menu__nav .dropdown-menu, .main-menu__nav .dropdown-menu .dropdown-item { text-align: left; }
.main-menu__nav .dropdown-menu { position: static; border: 0; border-left: 1px solid var(--idil-cizgi); box-shadow: none; background: none; margin: 0 0 var(--idil-b2) 2px; padding: 0; min-width: 0; }
.main-menu__nav .dropdown-menu .dropdown-item a, .main-header .main-menu__nav .dropdown-menu .dropdown-item a { padding: 9px var(--idil-b3); color: var(--idil-murekkep); }
.main-menu__nav .dropdown-menu .dropdown-item a:hover, .main-header .main-menu__nav .dropdown-menu .dropdown-item a:hover { background: none; text-decoration: underline; }
#mainArticleContent > aside { order: 2; }
#mainArticleContent > #articleMainWrapper { order: 1; }
}
@media (max-width: 767.98px) {
:root { --idil-gutter: 16px; }
body { font-size: 18px; line-height: 28px; }
h1, .main__title, .main__header h1, .issue__header, .issue__title { font-size: 30px; line-height: 36px; }
.page_index .issue__title { font-size: 26px; line-height: 32px; }
.page_article .main__title { font-size: 26px; line-height: 33px; }
.idil-yazar__ad { font-size: 19px; line-height: 26px; }
.journal-desc article { font-size: 20px; line-height: 30px; }
.main__content { margin-top: var(--idil-b5); margin-bottom: var(--idil-b6); }
.issue__cover { justify-content: flex-start; }
.issue__cover img { max-width: 160px; }
.page_article .main__header > section.col-md-3 { justify-content: flex-start; }
.page_article .main__header > section.col-md-3 img { max-width: 140px; margin-top: var(--idil-b4); }
.article > [class*="col-sm-4"] { justify-content: flex-start; }
.main-footer__block [class*="offset-"] { justify-content: flex-start; margin-left: 0; width: auto; }
}
/* ------------------------------------------------------------------ 12. Motion and print */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { transition: none !important; }
}
@media print {
.main-header__admin, .main-menu__nav, .hamburger, .main-footer .row[role="complementary"], #cslCitationFormatsButton, .btn, .idil-notice { display: none !important; }
body, .main-header, .main-footer { background: #fff; color: #000; }
a { text-decoration: none; }
}
/* ------------------------------------------------------------------ 13. Menu labels on narrow desktops (2026-10-03) */
/* A label never breaks inside a word; between 992 and 1199 px the items sit a little closer,
so that the English menu fits on one line beside the logo. */
@media (min-width: 992px) {
.main-header .main-menu__nav .main-menu__nav-link { white-space: nowrap; word-break: normal; overflow-wrap: normal; }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
.main-header .main-menu__nav .main-menu__nav-link { padding-left: 7px; padding-right: 7px; }
}