/* ==========================================================================
   Acigol Dernegi - site overrides
   This file never edits the base theme stylesheets (theme.css /
   theme-responsive.css); it is loaded last and overrides them, so the
   customisations here survive a theme update.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1) Turkish letter casing fix
   Browsers apply "text-transform: capitalize" with English rules, which
   breaks Turkish: "için" becomes "Için" (correct is "İçin"), "iftar"
   becomes "Iftar". The markup already carries the correct casing, so the
   transform is simply switched off.
   -------------------------------------------------------------------------- */
.section-title__title,
.thm-btn,
.services-one__title,
.services-one__title a,
.project-one__title,
.project-one__title a,
.project-two__title,
.project-two__title a,
.team-one__title,
.team-one__title a,
.blog-one__title,
.blog-one__title a,
.about-one__list li h3,
.why-are-we__list li .content h3,
.faq-one__left .faq-one-accrodion .accrodion-title h4,
.services-details__faq .faq-one-accrodion .accrodion-title h4 {
    text-transform: none;
}

/* --------------------------------------------------------------------------
   2) Round association logo in the footer and mobile menu
   The theme ships a wide horizontal logo; ours is a round medallion, so its
   height has to be capped.
   -------------------------------------------------------------------------- */
.footer-widget__logo img {
    width: 110px;
    height: auto;
}

.mobile-nav__content .logo-box img {
    width: 120px;
    height: auto;
}

/* --------------------------------------------------------------------------
   Every <img> now carries width/height attributes so the browser can reserve
   space before the file arrives (that is what Cumulative Layout Shift
   measures). Those attributes map to CSS presentational hints, which are
   weaker than any author rule but stronger than the initial `auto` - so
   wherever the theme sets only a width, the attribute height would win and
   squash the image. This restores the aspect ratio globally. Selectors that
   deliberately set a height (e.g. .galeri__item img) are more specific and
   still win. Do not remove this while the attributes are in place.
   -------------------------------------------------------------------------- */
img {
    height: auto;
}

/* --------------------------------------------------------------------------
   3) Footer "About" column - logo floated left, text wrapping beside it
   Floating the logo lets the intro text start to its right and continue at
   full width below it. The contact list clears the float. This shortens the
   column so it lines up with the menu columns on its right.
   -------------------------------------------------------------------------- */
.footer-widget__about .footer-widget__logo {
    float: left;
    margin-right: 22px;
    margin-bottom: 6px;
}

.footer-widget__about .footer-widget__about-text {
    margin-bottom: 55px;
}

.footer-widget__about .footer-widget__about-contact {
    clear: both;
}

/* On narrow screens there is not enough room beside the logo, so it goes back
   above the text and the text returns to full width. */
@media (max-width: 575px) {
    .footer-widget__about .footer-widget__logo {
        float: none;
        margin-right: 0;
        margin-bottom: 20px;
    }
}

/* --------------------------------------------------------------------------
   3b) Legal strip in the very bottom bar (KVKK aydınlatma metni and whatever
   joins it later).

   .site-footer__bottom-inner is already a flex row with space-between, so the
   copyright line stays on the left and this list sits on the right without
   touching the theme. It is small and quiet on purpose: a privacy notice has
   to be reachable from every page, but it is not what anyone came for.
   -------------------------------------------------------------------------- */
.site-footer__legal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 22px;
    margin: 0;
    padding: 0;
}

.site-footer__legal a {
    color: rgba(var(--acigol-white-rgb), .70);
    font-family: var(--acigol-font);
    font-size: 15px;
    transition: color .3s ease;
}

.site-footer__legal a:hover {
    color: var(--acigol-primary);
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* Under the copyright line rather than beside it once there is no room; the
   theme's own flex-wrap does the moving, this only puts space between them. */
@media (max-width: 767px) {
    .site-footer__bottom-inner {
        justify-content: center;
        text-align: center;
    }

    .site-footer__legal {
        justify-content: center;
        margin-top: 14px;
    }
}

/* --------------------------------------------------------------------------
   4) Square slider corners on mobile
   The theme gives .main-slider a 50px radius. It reads as a "card" on wide
   screens, but looks wrong on narrow ones where the slider fills the
   viewport, so the corners are squared off there.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .main-slider {
        border-radius: 0;
    }

    .why-choose-one__delivery-box {
        scale: 0.6;
        right: -40px;
        bottom: -20px;
    }

    .about-one__img-1,
    .about-one__img-2 {
        max-width: 100%;
    }

    .cta-one__bg-img {
        background-position: center;
    }

    .page-header__bg,
    .page-header__bg::before {
        border-radius: 0 !important;
    }

    .about-one__left .section-title {
        margin-top: 15px !important;
    }

    .contact-one__inner {
        padding: 0 !important;
    }

    .contact-two__right {
        margin-left: 0 !important;
    }
}

/* --------------------------------------------------------------------------
   4b) Seven menu items on a laptop screen

   The menu was six items when the theme was set up; "Burs Vermek İstiyorum"
   made it seven. .main-menu__wrapper-inner is a flex row with flex-wrap: wrap,
   so the moment the items and the "Bağış Yap" button stop fitting, the button
   drops to a second line and the header silently grows 60px taller - it never
   looks crowded, it just looks wrong.

   Two steps:

   1200px and up  the gap between items comes down from the theme's 30px to
                  18px. There is no upper bound on this rule and that is the
                  point - .container stops growing at 1290px, so a 1920px
                  screen has exactly as much room for the menu as a 1400px one.
                  Nothing else changes (same font, same padding), so the menu
                  still reads as the theme's.
   1200-1399px    the button is hidden as well. Below about 1400px the viewport
                  itself is narrower than the container wants, and the button is
                  the one thing on the row that can go without losing anything:
                  the same page is one item to its left in the menu. Under
                  1200px the desktop menu gives way to the mobile drawer, where
                  the item is present again.
   -------------------------------------------------------------------------- */
@media (min-width: 1200px) {

    .main-menu .main-menu__list > li + li,
    .stricky-header .main-menu__list > li + li {
        margin-left: 18px;
    }
}

@media (min-width: 1200px) and (max-width: 1399px) {

    .main-menu__btn-box {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   5) Page-header heading is an H1, not an H2
   Every page shipped without an H1 because the template styled this heading as
   .page-header__inner h2 - an element selector, so simply swapping the tag
   would have dropped the styling. These two rules repeat the theme's h2
   declarations for h1 (theme.css line 5781 and theme-responsive.css line 892),
   so the markup is correct for search engines and looks exactly as before.
   If the theme's h2 sizes ever change, change these with them.
   -------------------------------------------------------------------------- */
.page-header__inner h1 {
    font-size: 48px;
    font-weight: 700;
    line-height: 56px;
    color: var(--acigol-white);
}

@media (max-width: 767px) {
    .page-header__inner h1 {
        font-size: 30px;
        line-height: 40px;
    }
}

/* --------------------------------------------------------------------------
   6) Photo gallery (/galeri)
   The template had no gallery of its own - its portfolio grid carries a
   title/subtitle per card, which does not suit an archive of ~70 photos.
   These tiles are a plain uniform grid instead: the 4:3 thumbnail is cropped
   to fit, and the full frame opens in the theme's magnific-popup lightbox.

   The fixed aspect-ratio matters for more than looks - isotope measures the
   tiles to lay them out, and with a ratio it gets the right height even
   before a lazy-loaded thumbnail has arrived.
   -------------------------------------------------------------------------- */
.galeri {
    position: relative;
    display: block;
    padding: 120px 0 90px;
}

/* Filter pills. The isotope wiring in main.js reads data-filter off the li,
   so the markup has to stay <li data-filter><span class="filter-text">. */
.galeri__filter {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin: 0 0 45px;
    padding: 0;
}

.galeri__filter li {
    cursor: pointer;
}

.galeri__filter li .filter-text {
    display: inline-block;
    padding: 9px 24px;
    border: 1px solid var(--acigol-bdr-color);
    border-radius: 30px;
    background-color: var(--acigol-white);
    color: var(--acigol-black);
    font-family: var(--acigol-font-two);
    font-size: 17px;
    font-weight: 600;
    line-height: 26px;
    transition: color .3s ease, background-color .3s ease, border-color .3s ease;
}

.galeri__filter li:hover .filter-text,
.galeri__filter li.active .filter-text {
    background-color: var(--acigol-base);
    border-color: var(--acigol-base);
    color: var(--acigol-white);
}

.galeri__item {
    position: relative;
    display: block;
    overflow: hidden;
    margin-bottom: 30px;
    border-radius: 20px;
    aspect-ratio: 4 / 3;
    background-color: var(--acigol-black);
}

.galeri__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s ease;
}

.galeri__item:hover img {
    transform: scale(1.07);
}

/* Magnifier badge, revealed on hover. */
.galeri__item-zoom {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 54px;
    height: 54px;
    margin: -27px 0 0 -27px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--acigol-primary);
    color: var(--acigol-black);
    font-size: 20px;
    opacity: 0;
    transform: scale(.6);
    transition: opacity .4s ease, transform .4s ease;
}

.galeri__item:hover .galeri__item-zoom {
    opacity: 1;
    transform: scale(1);
}

/* The caption sits on a gradient so it stays legible over any photo. */
.galeri__item-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 40px 18px 16px;
    background-image: linear-gradient(to top, rgba(var(--acigol-black-rgb), .92) 0%, rgba(var(--acigol-black-rgb), 0) 100%);
    color: var(--acigol-white);
    font-family: var(--acigol-font);
    font-size: 14px;
    line-height: 20px;
}

@media (max-width: 991px) {
    .galeri {
        padding: 90px 0 60px;
    }

    .galeri__filter li .filter-text {
        padding: 7px 18px;
        font-size: 15px;
    }
}

@media (max-width: 575px) {
    .galeri__item-caption {
        font-size: 13px;
        line-height: 18px;
    }
}


/* --------------------------------------------------------------------------
   6) Dynamic site: forms, rich text pages and pagination
   Added when the site moved from static HTML to PHP. The contact and
   scholarship forms now post to our own server, so they need a way to show a
   result and to mark a field that was filled in wrongly; free-form pages and
   announcement bodies come out of a rich text editor and need readable
   defaults for headings, lists and tables.
   -------------------------------------------------------------------------- */

/* Honeypot: hidden from people, irresistible to scripts. Deliberately NOT
   display:none - some bots skip those; this is off-screen but still "visible"
   to a naive filler. aria-hidden + tabindex="-1" keep it away from screen
   readers and the keyboard. */
.acg-hp {
    position: absolute !important;
    left: -9999px !important;
    top: auto !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

.acg-form-note {
    margin-bottom: 24px;
    padding: 16px 20px;
    border-left: 4px solid var(--acigol-base);
    border-radius: 6px;
    background-color: #f6f7f8;
    color: var(--acigol-black);
    font-family: var(--acigol-font);
    font-size: 16px;
    line-height: 26px;
}

.acg-form-note--ok {
    border-left-color: #15803d;
    background-color: #f0faf3;
    color: #14532d;
}

.acg-form-note--error {
    border-left-color: var(--acigol-base);
    background-color: #fdf2f3;
    color: #7f1d1d;
}

.acg-field-error {
    display: block;
    margin: 6px 2px 0;
    color: var(--acigol-base);
    font-family: var(--acigol-font);
    font-size: 14px;
    line-height: 20px;
}

/* The theme only styles input[type="text"] and input[type="email"], so a phone
   field came out as an unstyled browser default the moment it was given the
   (correct) type="tel". Same property list as theme.css
   .faq-one__input-box input[type="text"], extended to tel. */
.faq-one__input-box input[type="tel"] {
    height: 67px;
    width: 100%;
    border: none;
    padding-left: 20px;
    padding-right: 20px;
    outline: none;
    font-size: 18px;
    color: var(--acigol-white);
    display: block;
    font-weight: 400;
    border-radius: 20px;
    background-color: rgba(var(--acigol-white-rgb), .10);
}

/* ==========================================================================
   7) Long forms: the scholarship application and the "burs vermek istiyorum"
   support form.

   The theme has one form style - white text on the dark red card the contact
   and FAQ blocks use - and it works for four inputs with placeholders instead
   of labels. The scholarship form is twenty-five fields across seven sections
   and four file uploads; on that card it would be an unreadable wall of red,
   and a placeholder that vanishes as soon as you type is the wrong control for
   a field somebody has to get exactly right (an IBAN, a diploma grade).

   So these forms get a light card with real labels, hints under the fields and
   inline errors. Everything below is new markup written for this site - it
   overrides nothing in the theme.
   ========================================================================== */

.acg-basvuru,
.acg-bagis {
    position: relative;
    display: block;
    padding: 80px 0 170px;
    background-color: #f6f7f9;
}

.acg-basvuru__card,
.acg-bagis__card {
    max-width: 960px;
    margin: 0 auto;
    padding: 44px 46px 40px;
    border-radius: 24px;
    background-color: var(--acigol-white);
    box-shadow: 0 18px 50px rgba(var(--acigol-black-rgb), .08);
}

.acg-basvuru__intro {
    margin: 0 0 34px;
    padding: 16px 20px;
    border-radius: 12px;
    background-color: #f6f7f9;
    color: var(--acigol-gray);
    font-family: var(--acigol-font);
    font-size: 16px;
    line-height: 27px;
}

/* --- Sections ------------------------------------------------------------ */
.acg-form__section {
    margin: 0 0 34px;
    padding: 0;
    border: none;
    border-top: 1px solid #e9ebee;
    padding-top: 28px;
}

.acg-form__section:first-of-type {
    border-top: none;
    padding-top: 0;
}

.acg-form__section-title {
    display: block;
    float: none;
    width: auto;
    margin: 0 0 4px;
    padding: 0;
    color: var(--acigol-black);
    font-family: var(--acigol-font-two);
    font-size: 22px;
    font-weight: 700;
    line-height: 32px;
    text-transform: none;
}

.acg-form__section-desc {
    margin: 0 0 22px;
    color: var(--acigol-gray);
    font-family: var(--acigol-font);
    font-size: 15px;
    line-height: 25px;
}

/* --- Fields -------------------------------------------------------------- */
.acg-field {
    position: relative;
    display: block;
    margin-bottom: 22px;
}

.acg-field__label {
    display: block;
    margin: 0 0 8px;
    color: var(--acigol-black);
    font-family: var(--acigol-font);
    font-size: 15px;
    font-weight: 600;
    line-height: 22px;
}

.acg-req {
    color: var(--acigol-base);
    font-weight: 700;
}

.acg-form .acg-field input[type="text"],
.acg-form .acg-field input[type="email"],
.acg-form .acg-field input[type="tel"],
.acg-form .acg-field input[type="date"],
.acg-form .acg-field input[type="number"],
.acg-form .acg-field textarea,
.acg-form .acg-field select {
    width: 100%;
    height: 54px;
    display: block;
    padding: 0 18px;
    border: 1px solid #dcdfe3;
    border-radius: 12px;
    outline: none;
    background-color: var(--acigol-white);
    color: var(--acigol-black);
    font-family: var(--acigol-font);
    font-size: 16px;
    font-weight: 400;
    transition: border-color .25s ease, box-shadow .25s ease;
}

.acg-form .acg-field textarea {
    height: auto;
    min-height: 96px;
    padding: 14px 18px;
    line-height: 26px;
    resize: vertical;
}

.acg-form .acg-field input::placeholder,
.acg-form .acg-field textarea::placeholder {
    color: #9aa1a9;
    opacity: 1;
}

.acg-form .acg-field input:focus,
.acg-form .acg-field textarea:focus,
.acg-form .acg-field select:focus,
.acg-form .acg-field .acg-select-btn:focus {
    border-color: var(--acigol-base);
    box-shadow: 0 0 0 3px rgba(var(--acigol-base-rgb), .12);
}

.acg-field__hint {
    display: block;
    margin: 7px 2px 0;
    color: var(--acigol-gray);
    font-family: var(--acigol-font);
    font-size: 13px;
    line-height: 20px;
}

.acg-field__error {
    display: block;
    margin: 7px 2px 0;
    color: var(--acigol-base);
    font-family: var(--acigol-font);
    font-size: 13px;
    font-weight: 600;
    line-height: 20px;
}

.acg-field.has-error input,
.acg-field.has-error textarea,
.acg-field.has-error select,
.acg-field.has-error .acg-select-btn,
.acg-field.has-error .acg-file__box {
    border-color: var(--acigol-base);
    background-color: #fffafa;
}

/* Fields that depend on another answer: the university block behind "öğrenim
   kademesi", the company name behind "kurum / şirket". acigol-form.js also
   drops "required" when it hides one, so a field nobody can see can never block
   the submit button with a message nobody can read. */
.acg-field.is-hidden {
    display: none;
}

/* --- Custom dropdown -----------------------------------------------------
   The native <select> stays in the page and is what actually posts; this is a
   button and a listbox drawn over it. The theme's nice-select plugin does the
   same trick but REPLACES the element, which loses the value on submit and
   cannot show an error state - hence our own, which also keeps the keyboard
   and the screen reader on the real control.

   Without JS the select is simply visible and works as a native dropdown. */
.acg-select-wrap {
    position: relative;
    display: block;
}

.acg-form .acg-select-wrap select.acg-select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 44px;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%230F1B24' stroke-width='2' d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 18px center;
    cursor: pointer;
}

/* Once the script takes over, the real select is hidden from sight but stays
   focusable-by-proxy: the button carries the ARIA and moves focus back here on
   change, so nothing about the form is lost. */
.acg-select-wrap.is-enhanced select.acg-select {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.acg-select-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    height: 54px;
    padding: 0 18px;
    border: 1px solid #dcdfe3;
    border-radius: 12px;
    background-color: var(--acigol-white);
    color: var(--acigol-black);
    font-family: var(--acigol-font);
    font-size: 16px;
    text-align: left;
    cursor: pointer;
    transition: border-color .25s ease, box-shadow .25s ease;
}

.acg-select-btn.is-placeholder {
    color: #9aa1a9;
}

.acg-select-btn__arrow {
    flex: 0 0 auto;
    transition: transform .25s ease;
}

.acg-select-wrap.is-open .acg-select-btn {
    border-color: var(--acigol-base);
}

.acg-select-wrap.is-open .acg-select-btn__arrow {
    transform: rotate(180deg);
}

.acg-select-list {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 30;
    max-height: 264px;
    margin: 0;
    padding: 6px;
    overflow-y: auto;
    list-style: none;
    border: 1px solid #e2e5e9;
    border-radius: 12px;
    background-color: var(--acigol-white);
    box-shadow: 0 14px 34px rgba(var(--acigol-black-rgb), .14);
}

.acg-select-list[hidden] {
    display: none;
}

.acg-select-list li {
    padding: 10px 14px;
    border-radius: 8px;
    color: var(--acigol-black);
    font-family: var(--acigol-font);
    font-size: 16px;
    line-height: 24px;
    cursor: pointer;
}

.acg-select-list li[aria-selected="true"] {
    background-color: rgba(var(--acigol-base-rgb), .10);
    font-weight: 600;
}

.acg-select-list li.is-active {
    background-color: var(--acigol-base);
    color: var(--acigol-white);
}

/* --- File upload --------------------------------------------------------- */
.acg-file {
    position: relative;
    display: block;
}

.acg-file input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.acg-file__box {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 54px;
    padding: 12px 18px;
    border: 1px dashed #c8ccd2;
    border-radius: 12px;
    background-color: #fbfbfc;
    color: var(--acigol-gray);
    font-family: var(--acigol-font);
    font-size: 15px;
    line-height: 22px;
    transition: border-color .25s ease, background-color .25s ease, color .25s ease;
}

.acg-file input[type="file"]:focus-visible + .acg-file__box,
.acg-file:hover .acg-file__box {
    border-color: var(--acigol-base);
    color: var(--acigol-black);
}

.acg-file__icon {
    flex: 0 0 auto;
    display: flex;
    color: var(--acigol-base);
}

.acg-file__text {
    word-break: break-word;
}

.acg-field--file.is-loaded .acg-file__box {
    border-style: solid;
    border-color: #15803d;
    background-color: #f2fbf5;
    color: #14532d;
}

.acg-field--file.is-loaded .acg-file__icon {
    color: #15803d;
}

/* --- Consent and actions ------------------------------------------------- */
.acg-form__consent {
    margin: 6px 0 26px;
    padding: 18px 20px;
    border-radius: 12px;
    background-color: #f6f7f9;
}

.acg-form__consent.has-error {
    background-color: #fdf2f3;
}

.acg-check {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0;
    cursor: pointer;
}

.acg-check input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.acg-check__box {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    margin-top: 2px;
    border: 1px solid #c2c7cd;
    border-radius: 6px;
    background-color: var(--acigol-white);
    transition: background-color .2s ease, border-color .2s ease;
}

.acg-check input:checked + .acg-check__box {
    border-color: var(--acigol-base);
    background-color: var(--acigol-base);
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='11' viewBox='0 0 14 11'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M1 5.5l4 4 8-8'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

.acg-check input:focus-visible + .acg-check__box {
    box-shadow: 0 0 0 3px rgba(var(--acigol-base-rgb), .2);
}

.acg-check__text {
    color: var(--acigol-black);
    font-family: var(--acigol-font);
    font-size: 15px;
    line-height: 24px;
}

.acg-check__text a {
    color: var(--acigol-base);
    text-decoration: underline;
}

/* The two things an applicant most needs to know before ticking the box, and
   neither belongs inside the consent sentence itself: that a minor needs a
   parent, and that they may redact special-category data from their ID. */
.acg-form__consent-note {
    margin: 12px 0 0 34px;
    color: var(--acigol-gray);
    font-family: var(--acigol-font);
    font-size: 13px;
    line-height: 21px;
}

/* Contact form: the disclosure line above the send button. It sits on the dark
   red card, so it takes its colour from there rather than from .acg-field. */
.contact-two__kvkk {
    margin: 4px 0 18px;
    color: rgba(var(--acigol-white-rgb), .78);
    font-family: var(--acigol-font);
    font-size: 14px;
    line-height: 22px;
}

.contact-two__kvkk a {
    color: var(--acigol-white);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.contact-two__kvkk a:hover {
    color: var(--acigol-primary);
}

.acg-form__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px 26px;
}

.acg-form__note {
    flex: 1 1 260px;
    margin: 0;
    color: var(--acigol-gray);
    font-family: var(--acigol-font);
    font-size: 13px;
    line-height: 21px;
}

/* --- Scholarship FAQ, now full width ------------------------------------- */
.acg-sss {
    padding-bottom: 40px;
}

.acg-sss .section-title {
    margin-bottom: 40px;
}

.acg-sss .section-title__title {
    color: var(--acigol-white);
}

/* Red on the near-black panel is barely there; the home page prints the same
   tagline white for exactly this reason (.faq-one__left .section-title__tagline
   in theme.css), but that rule cannot reach here — the heading sits above the
   two accordion columns, not inside one. */
.acg-sss .section-title__tagline {
    color: var(--acigol-white);
}

.acg-sss__grid .accrodion-grp {
    margin-bottom: 0;
}

/* ==========================================================================
   8) "Burs Vermek İstiyorum" page
   ========================================================================== */

.acg-destek {
    position: relative;
    display: block;
    padding: 100px 0 90px;
}

.acg-destek__metin {
    color: var(--acigol-gray);
    font-family: var(--acigol-font);
    font-size: 17px;
    line-height: 32px;
}

.acg-destek__metin br + br {
    line-height: 44px;
}

.acg-destek__liste {
    margin: 18px 0 0;
    padding: 0;
}

.acg-destek__liste li {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 22px 0;
    border-bottom: 1px solid #e9ebee;
}

.acg-destek__liste li:last-child {
    border-bottom: none;
}

.acg-destek__ikon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background-color: rgba(var(--acigol-base-rgb), .08);
    color: var(--acigol-base);
    font-size: 20px;
}

.acg-destek__liste h3 {
    margin: 0 0 5px;
    color: var(--acigol-black);
    font-family: var(--acigol-font-two);
    font-size: 20px;
    font-weight: 700;
    line-height: 28px;
    text-transform: none;
}

.acg-destek__liste p {
    margin: 0;
    color: var(--acigol-gray);
    font-family: var(--acigol-font);
    font-size: 16px;
    line-height: 26px;
}

.acg-destek__liste a {
    color: var(--acigol-base);
    font-weight: 600;
    white-space: nowrap;
}

/* --- Bank account card ---------------------------------------------------
   Laid out as a definition list: the label on the left, the value on the
   right, one row per line - the same shape a banking app shows, so the numbers
   can be checked against it at a glance. The IBAN gets a monospaced-ish
   tracking and its own row so it never wraps mid-group. */
.acg-hesap {
    padding: 0 0 100px;
}

.acg-hesap__kart {
    max-width: 960px;
    margin: 0 auto;
    padding: 38px 42px 30px;
    border-radius: 24px;
    background-color: var(--acigol-black);
    color: var(--acigol-white);
}

.acg-hesap__basliklar {
    margin-bottom: 26px;
}

.acg-hesap__baslik {
    margin: 0 0 8px;
    color: var(--acigol-white);
    font-family: var(--acigol-font-two);
    font-size: 28px;
    font-weight: 700;
    line-height: 38px;
    text-transform: none;
}

.acg-hesap__aciklama {
    margin: 0;
    max-width: 720px;
    color: rgba(var(--acigol-white-rgb), .72);
    font-family: var(--acigol-font);
    font-size: 16px;
    line-height: 27px;
}

.acg-hesap__satirlar {
    margin: 0;
}

.acg-hesap__satir {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 24px;
    padding: 18px 0;
    border-top: 1px solid rgba(var(--acigol-white-rgb), .12);
}

.acg-hesap__satir dt {
    color: rgba(var(--acigol-white-rgb), .60);
    font-family: var(--acigol-font);
    font-size: 16px;
    font-weight: 400;
}

.acg-hesap__satir dd {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin: 0;
    color: var(--acigol-white);
    font-family: var(--acigol-font-two);
    font-size: 19px;
    font-weight: 700;
    line-height: 28px;
    text-align: right;
}

.acg-hesap__iban {
    letter-spacing: .04em;
    word-break: break-word;
}

.acg-hesap__kopyala {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border: 1px solid rgba(var(--acigol-white-rgb), .22);
    border-radius: 30px;
    background: transparent;
    color: var(--acigol-white);
    font-family: var(--acigol-font);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}

.acg-hesap__kopyala:hover {
    border-color: var(--acigol-primary);
    color: var(--acigol-primary);
}

.acg-hesap__kopyala.is-done {
    border-color: var(--acigol-primary);
    background-color: var(--acigol-primary);
    color: var(--acigol-black);
}

.acg-hesap__kopyala-ikon {
    display: flex;
}

.acg-hesap__not {
    margin: 20px 0 0;
    color: rgba(var(--acigol-white-rgb), .62);
    font-family: var(--acigol-font);
    font-size: 14px;
    line-height: 23px;
}

/* --- Home page: the block that replaced the application form -------------
   It keeps the theme's red card (.faq-one__right) so the section still reads
   the way it did; only what is inside changed, from a form to a summary of the
   form and the way to it. */
.acg-burs-yonlendirme .faq-one__from-title {
    margin-bottom: 18px;
}

.acg-burs-yonlendirme__metin {
    margin: 0 0 22px;
    color: rgba(var(--acigol-white-rgb), .85);
    font-family: var(--acigol-font);
    font-size: 16px;
    line-height: 28px;
}

.acg-burs-yonlendirme__liste {
    margin: 0 0 30px;
    padding: 0;
}

.acg-burs-yonlendirme__liste li {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 9px 0;
    color: var(--acigol-white);
    font-family: var(--acigol-font);
    font-size: 16px;
    line-height: 26px;
}

.acg-burs-yonlendirme__liste li span {
    flex: 0 0 auto;
    margin-top: 7px;
    color: var(--acigol-primary);
    font-size: 12px;
}

.acg-burs-yonlendirme__butonlar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 26px;
}

/* The theme's .thm-btn is red on red here, so this one is inverted: gold fill,
   dark text - the same pair the site uses for a highlight anywhere else. */
.acg-burs-yonlendirme__butonlar .thm-btn {
    background-color: var(--acigol-primary);
    color: var(--acigol-black);
}

.acg-burs-yonlendirme__ikincil {
    color: var(--acigol-white);
    font-family: var(--acigol-font);
    font-size: 16px;
    text-decoration: underline;
    text-underline-offset: 4px;
}

.acg-burs-yonlendirme__ikincil:hover {
    color: var(--acigol-primary);
}

@media (max-width: 991px) {
    .acg-destek {
        padding: 70px 0 60px;
    }

    .acg-hesap {
        padding-bottom: 70px;
    }

    .acg-hesap__kart {
        padding: 28px 24px 22px;
        border-radius: 18px;
    }

    .acg-hesap__baslik {
        font-size: 24px;
        line-height: 32px;
    }

    .acg-basvuru,
    .acg-bagis {
        padding: 70px 0 80px;
    }

    .acg-basvuru__card,
    .acg-bagis__card {
        padding: 30px 24px 28px;
        border-radius: 18px;
    }

    .acg-form__section-title {
        font-size: 20px;
        line-height: 28px;
    }
}

@media (max-width: 575px) {
    .acg-basvuru__card,
    .acg-bagis__card {
        padding: 24px 18px 24px;
    }

    .acg-form__actions .thm-btn {
        width: 100%;
        text-align: center;
    }

    /* Label above value on a narrow screen - an IBAN and its label do not fit
       on one line, and a wrapped IBAN with the label beside it is unreadable. */
    .acg-hesap__satir {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .acg-hesap__satir dd {
        text-align: left;
        font-size: 17px;
    }

    .acg-burs-yonlendirme__butonlar .thm-btn {
        width: 100%;
        text-align: center;
    }
}

/* Rich text coming from the panel (announcement bodies, free-form pages).
   The sanitizer allows h2-h6, lists, tables, images and YouTube frames; these
   rules are what makes them read like the rest of the site. */
.acg-icerik {
    font-family: var(--acigol-font);
    font-size: 17px;
    line-height: 32px;
    color: var(--acigol-gray);
}

.acg-icerik > *:first-child {
    margin-top: 0;
}

.acg-icerik h2 {
    margin: 34px 0 14px;
    font-size: 30px;
    line-height: 40px;
    color: var(--acigol-black);
    text-transform: none;
}

.acg-icerik h3 {
    margin: 28px 0 12px;
    font-size: 24px;
    line-height: 34px;
    color: var(--acigol-black);
    text-transform: none;
}

.acg-icerik h4 {
    margin: 24px 0 10px;
    font-size: 20px;
    line-height: 30px;
    color: var(--acigol-black);
    text-transform: none;
}

.acg-icerik p {
    margin-bottom: 20px;
}

.acg-icerik ul,
.acg-icerik ol {
    margin: 0 0 20px;
    padding-left: 22px;
}

.acg-icerik li {
    margin-bottom: 8px;
}

.acg-icerik a {
    color: var(--acigol-base);
    text-decoration: underline;
}

.acg-icerik img {
    max-width: 100%;
    height: auto;
    margin: 10px 0 24px;
    border-radius: 8px;
}

.acg-icerik iframe {
    max-width: 100%;
    margin: 10px 0 24px;
    border: none;
    border-radius: 8px;
    aspect-ratio: 16 / 9;
    width: 100%;
    height: auto;
}

.acg-icerik blockquote {
    margin: 24px 0;
    padding: 14px 24px;
    border-left: 3px solid var(--acigol-primary);
    background-color: #faf7ef;
    font-style: italic;
}

/* A wide table must scroll inside its own box rather than pushing the whole
   page sideways on a phone. */
.acg-icerik table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    margin-bottom: 24px;
    border-collapse: collapse;
}

.acg-icerik table td,
.acg-icerik table th {
    padding: 10px 16px;
    border: 1px solid #e5e5e5;
}

.acg-icerik table th {
    background-color: #f6f6f6;
    text-align: left;
}

.acg-icerik-tarih {
    margin-top: 30px;
    color: var(--acigol-gray);
    font-family: var(--acigol-font);
    font-size: 14px;
    opacity: .75;
}

.acg-pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 40px;
}

.acg-pagination a {
    min-width: 44px;
    padding: 10px 14px;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    background-color: var(--acigol-white);
    color: var(--acigol-black);
    font-family: var(--acigol-font);
    font-size: 16px;
    text-align: center;
    transition: all .3s ease;
}

.acg-pagination a:hover {
    border-color: var(--acigol-base);
    color: var(--acigol-base);
}

.acg-pagination a.active {
    border-color: var(--acigol-base);
    background-color: var(--acigol-base);
    color: var(--acigol-white);
}

@media (max-width: 575px) {
    .acg-icerik {
        font-size: 16px;
        line-height: 29px;
    }

    .acg-icerik h2 {
        font-size: 25px;
        line-height: 34px;
    }
}